diff --git a/app/game/[id]/game-page-client.tsx b/app/game/[id]/game-page-client.tsx
index 3f46be8..8957441 100644
--- a/app/game/[id]/game-page-client.tsx
+++ b/app/game/[id]/game-page-client.tsx
@@ -883,7 +883,7 @@ export function GamePageClient({
                     {/* Desktop hero — side-by-side layout */}
                     <div className='hidden md:flex gap-4 sm:gap-6 px-[10svw]'>
                         {/* Cover image */}
-                        <div className='relative shrink-0 aspect-2/3 w-20 sm:w-28 md:w-36 rounded-lg overflow-hidden border border-border bg-text/5 h-max'>
+                        <div className='relative shrink-0 aspect-2/3 w-20 sm:w-32 md:w-52 rounded-lg overflow-hidden border border-border bg-text/5 h-max'>
                             {coverImage && !imgError ? (
                                 <Image
                                     src={coverImage}
diff --git a/app/game/[id]/preset-detail-modal.tsx b/app/game/[id]/preset-detail-modal.tsx
index dfa61bf..35a4663 100644
--- a/app/game/[id]/preset-detail-modal.tsx
+++ b/app/game/[id]/preset-detail-modal.tsx
@@ -47,7 +47,12 @@ interface Preset {
     loadTimeSd: number | null
     tdpWatts: number | null
     youtubeVideoId: string | null
-    screenshots: Array<{ id: string; url: string; width: number; height: number }> | null
+    screenshots: Array<{
+        id: string
+        url: string
+        width: number
+        height: number
+    }> | null
     hardwareWattHours: number | null
     hardwareDeviceType: string | null
     customSystem: boolean
@@ -96,15 +101,22 @@ function MetaItem({
     value: React.ReactNode | string | null
 }) {
     return (
-        <div className="flex items-center justify-between py-1">
-            <span className="text-xs text-text/50">{label}</span>
-            <span className="text-sm text-text/80 font-medium">{value ?? "—"}</span>
+        <div className='flex items-center justify-between py-1'>
+            <span className='text-xs text-text/50'>{label}</span>
+            <span className='text-sm text-text/80 font-medium'>
+                {value ?? "—"}
+            </span>
         </div>
     )
 }
 
 function hasPerformanceData(p: Preset): boolean {
-    return p.fpsAvg !== null || p.fpsOnePercentLow !== null || p.loadTimeSsd !== null || p.loadTimeSd !== null
+    return (
+        p.fpsAvg !== null ||
+        p.fpsOnePercentLow !== null ||
+        p.loadTimeSsd !== null ||
+        p.loadTimeSd !== null
+    )
 }
 
 function hasHardwarePowerData(p: Preset): boolean {
@@ -112,7 +124,13 @@ function hasHardwarePowerData(p: Preset): boolean {
 }
 
 function hasSoftwareData(p: Preset): boolean {
-    return !!(p.protonVersion || p.osVersion || (p.upscalerType && p.upscalerType !== "none") || (p.frameGenMethod && p.frameGenMethod !== "none") || p.launchOptions)
+    return !!(
+        p.protonVersion ||
+        p.osVersion ||
+        (p.upscalerType && p.upscalerType !== "none") ||
+        (p.frameGenMethod && p.frameGenMethod !== "none") ||
+        p.launchOptions
+    )
 }
 
 function hasGameInfoData(p: Preset): boolean {
@@ -159,20 +177,28 @@ export function PresetDetailModal({
 
     const categories = preset.settingsJson ?? []
     const hasCategories = categories.length > 0
-    const currentCategory = hasCategories ? categories[activeCategoryIndex] : null
+    const currentCategory = hasCategories
+        ? categories[activeCategoryIndex]
+        : null
 
     const goPrevCategory = () => {
-        setActiveCategoryIndex((prev) => (prev > 0 ? prev - 1 : categories.length - 1))
+        setActiveCategoryIndex((prev) =>
+            prev > 0 ? prev - 1 : categories.length - 1,
+        )
     }
 
     const goNextCategory = () => {
-        setActiveCategoryIndex((prev) => (prev < categories.length - 1 ? prev + 1 : 0))
+        setActiveCategoryIndex((prev) =>
+            prev < categories.length - 1 ? prev + 1 : 0,
+        )
     }
 
     const handleUpvote = async () => {
         if (!isAuthenticated || userVote === "up") return
         try {
-            const res = await fetch(`/api/performance/${preset.id}/upvote`, { method: "POST" })
+            const res = await fetch(`/api/performance/${preset.id}/upvote`, {
+                method: "POST",
+            })
             if (res.ok) {
                 if (userVote === "down") setLocalDownvotes((d) => d - 1)
                 setLocalUpvotes((u) => u + 1)
@@ -186,7 +212,9 @@ export function PresetDetailModal({
     const handleDownvote = async () => {
         if (!isAuthenticated || userVote === "down") return
         try {
-            const res = await fetch(`/api/performance/${preset.id}/downvote`, { method: "POST" })
+            const res = await fetch(`/api/performance/${preset.id}/downvote`, {
+                method: "POST",
+            })
             if (res.ok) {
                 if (userVote === "up") setLocalUpvotes((u) => u - 1)
                 setLocalDownvotes((d) => d + 1)
@@ -206,7 +234,9 @@ export function PresetDetailModal({
     const handleTogglePin = async () => {
         const method = preset.isPinned ? "DELETE" : "POST"
         try {
-            const res = await fetch(`/api/performance/${preset.id}/pin`, { method })
+            const res = await fetch(`/api/performance/${preset.id}/pin`, {
+                method,
+            })
             if (res.ok) {
                 router.refresh()
             }
@@ -223,8 +253,8 @@ export function PresetDetailModal({
             <>
                 {/* Backdrop */}
                 <motion.div
-                    key="backdrop"
-                    className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
+                    key='backdrop'
+                    className='fixed inset-0 z-50 bg-black/60 backdrop-blur-sm'
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
@@ -233,8 +263,8 @@ export function PresetDetailModal({
 
                 {/* Modal container */}
                 <motion.div
-                    key="modal"
-                    className="fixed inset-0 z-50 flex items-center justify-center p-4"
+                    key='modal'
+                    className='fixed inset-0 z-50 flex items-center justify-center p-4'
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
@@ -242,7 +272,7 @@ export function PresetDetailModal({
                 >
                     {/* Modal card */}
                     <motion.div
-                        className="relative w-full max-w-4xl h-[90vh] md:max-h-[90vh] overflow-hidden rounded-xl border border-border bg-background flex flex-col"
+                        className='relative w-full max-w-6xl h-[90vh] md:max-h-[90vh] overflow-hidden rounded-xl border border-border bg-background flex flex-col'
                         initial={{ y: "100%", opacity: 0 }}
                         animate={{ y: 0, opacity: 1 }}
                         exit={{ y: "100%", opacity: 0 }}
@@ -254,113 +284,151 @@ export function PresetDetailModal({
                         onClick={(e) => e.stopPropagation()}
                     >
                         {/* Header */}
-                        <div className="flex items-center justify-between p-5 border-b border-border shrink-0">
-                            <div className="flex items-center gap-3 min-w-0">
-                                <h2 className="text-base font-semibold text-text truncate">
+                        <div className='flex items-center justify-between p-5 border-b border-border shrink-0'>
+                            <div className='flex items-center gap-3 min-w-0'>
+                                <h2 className='text-base font-semibold text-text truncate'>
                                     {preset.hardwareName}
                                 </h2>
                             </div>
                             <button
                                 onClick={onClose}
-                                className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer shrink-0"
-                                aria-label="Close"
+                                className='p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer shrink-0'
+                                aria-label='Close'
                             >
-                                <XIcon className="h-4 w-4 text-text/50" />
+                                <XIcon className='h-4 w-4 text-text/50' />
                             </button>
                         </div>
 
                         {/* Mobile tabs */}
-                        <div className="flex md:hidden shrink-0 border-b border-border">
+                        <div className='flex md:hidden shrink-0 border-b border-border'>
                             {visibleTabs.map((tab) => (
                                 <button
                                     key={tab}
                                     onClick={() => setActiveTab(tab)}
-                                    className={`flex-1 py-2.5 text-sm font-medium transition-colors capitalize cursor-pointer ${
+                                    className={`flex-1 py-2.5 text-sm font-medium transition-colors capitalize cursor-pointer relative ${
                                         activeTab === tab
-                                            ? "text-primary border-b-2 border-primary"
+                                            ? "text-primary"
                                             : "text-text/50 hover:text-text/70"
                                     }`}
                                 >
                                     {tab}
+                                    <AnimatePresence>
+                                        {activeTab === tab && (
+                                            <motion.div
+                                                layoutId='activeTabMobile'
+                                                className='absolute w-full bottom-0 bg-primary h-0.5'
+                                            />
+                                        )}
+                                    </AnimatePresence>
                                 </button>
                             ))}
                         </div>
 
                         {/* Two-column body */}
-                        <div className="flex flex-col md:flex-row overflow-hidden flex-1">
+                        <div className='flex flex-col md:flex-row overflow-hidden flex-1'>
                             {/* Left panel — Details (always visible on desktop, tab on mobile) */}
-                            <div className={`w-full md:w-1/3 md:min-w-60 flex-col gap-3 md:gap-4 p-4 md:p-5 border-b md:border-b-0 md:border-r border-border overflow-y-auto ${
-                                activeTab === "details" ? "flex" : "hidden md:flex"
-                            }`}>
+                            <div
+                                className={`w-full md:w-1/3 md:min-w-60 flex-col gap-3 md:gap-4 p-4 md:p-5 border-b md:border-b-0 md:border-r border-border overflow-y-auto ${
+                                    activeTab === "details"
+                                        ? "flex"
+                                        : "hidden md:flex"
+                                }`}
+                            >
                                 {/* User info */}
-                                <div className="flex items-center gap-3">
-                                    <div className="h-10 w-10 rounded-full bg-text/10 overflow-hidden flex items-center justify-center shrink-0">
+                                <div className='flex items-center gap-3'>
+                                    <div className='h-10 w-10 rounded-full bg-text/10 overflow-hidden flex items-center justify-center shrink-0'>
                                         {preset.userImage ? (
                                             <Image
                                                 src={preset.userImage}
                                                 alt={preset.userName || "User"}
                                                 width={40}
                                                 height={40}
-                                                className="object-cover"
+                                                className='object-cover'
                                             />
                                         ) : (
-                                            <UserIcon className="h-5 w-5 text-text/50" />
+                                            <UserIcon className='h-5 w-5 text-text/50' />
                                         )}
                                     </div>
-                                    <div className="min-w-0">
-                                        <div className="flex items-center gap-2">
-                                            <span className="font-medium text-sm text-text truncate">
+                                    <div className='min-w-0'>
+                                        <div className='flex items-center gap-2'>
+                                            <span className='font-medium text-sm text-text truncate'>
                                                 {preset.userName || "Anonymous"}
                                             </span>
                                             {preset.verifiedAt && (
-                                                <span className="inline-flex items-center gap-1 text-green-400">
-                                                    <ShieldCheckIcon className="h-3.5 w-3.5" />
-                                                    <span className="text-[10px]">
-                                                        Verified on {new Date(preset.verifiedAt).toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" })}
+                                                <span className='inline-flex items-center gap-1 text-green-400'>
+                                                    <ShieldCheckIcon className='h-3.5 w-3.5' />
+                                                    <span className='text-[10px]'>
+                                                        Verified on{" "}
+                                                        {new Date(
+                                                            preset.verifiedAt,
+                                                        ).toLocaleDateString(
+                                                            undefined,
+                                                            {
+                                                                year: "numeric",
+                                                                month: "short",
+                                                                day: "numeric",
+                                                            },
+                                                        )}
                                                     </span>
                                                 </span>
                                             )}
                                         </div>
-                                        <span className="text-xs text-text/50">
+                                        <span className='text-xs text-text/50'>
                                             {formatDate(preset.createdAt)}
                                         </span>
                                     </div>
                                 </div>
 
-                                <div className="h-px bg-border" />
+                                <div className='h-px bg-border' />
 
                                 {/* Actions */}
-                                <div className="flex flex-wrap items-center gap-2">
+                                <div className='flex flex-wrap items-center gap-2'>
                                     {isAdmin && (
                                         <button
                                             onClick={handleTogglePin}
-                                            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border border-yellow-500/20 hover:bg-yellow-500/10 text-yellow-400 transition-colors cursor-pointer"
+                                            className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border border-yellow-500/20 hover:bg-yellow-500/10 text-yellow-400 transition-colors cursor-pointer'
                                         >
-                                            📌 {preset.isPinned ? 'Unpin' : 'Pin'}
+                                            📌{" "}
+                                            {preset.isPinned ? "Unpin" : "Pin"}
                                         </button>
                                     )}
                                     {(isOwner || isAdmin) && (
                                         <>
                                             {!showDeleteConfirm ? (
                                                 <button
-                                                    onClick={() => setShowDeleteConfirm(true)}
-                                                    className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
+                                                    onClick={() =>
+                                                        setShowDeleteConfirm(
+                                                            true,
+                                                        )
+                                                    }
+                                                    className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer'
                                                 >
-                                                    <TrashIcon className="h-4 w-4" />
+                                                    <TrashIcon className='h-4 w-4' />
                                                     Delete
                                                 </button>
                                             ) : (
-                                                <div className="flex items-center gap-2">
-                                                    <span className="text-xs text-text/50">Are you sure?</span>
+                                                <div className='flex items-center gap-2'>
+                                                    <span className='text-xs text-text/50'>
+                                                        Are you sure?
+                                                    </span>
                                                     <button
-                                                        onClick={() => { onDelete(preset.id); setShowDeleteConfirm(false) }}
-                                                        className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer"
+                                                        onClick={() => {
+                                                            onDelete(preset.id)
+                                                            setShowDeleteConfirm(
+                                                                false,
+                                                            )
+                                                        }}
+                                                        className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-red-400 border border-red-500/20 hover:bg-red-500/10 transition-colors cursor-pointer'
                                                     >
                                                         Confirm
                                                     </button>
                                                     <button
-                                                        onClick={() => setShowDeleteConfirm(false)}
-                                                        className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
+                                                        onClick={() =>
+                                                            setShowDeleteConfirm(
+                                                                false,
+                                                            )
+                                                        }
+                                                        className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer'
                                                     >
                                                         Cancel
                                                     </button>
@@ -370,59 +438,91 @@ export function PresetDetailModal({
                                     )}
                                     {(isOwner || isAdmin) && (
                                         <button
-                                            onClick={() => router.push(`/game/${gameId}/submit?edit=${preset.id}`)}
-                                            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
+                                            onClick={() =>
+                                                router.push(
+                                                    `/game/${gameId}/submit?edit=${preset.id}`,
+                                                )
+                                            }
+                                            className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer'
                                         >
-                                            <PencilIcon className="h-4 w-4" />
+                                            <PencilIcon className='h-4 w-4' />
                                             Edit
                                         </button>
                                     )}
                                     <button
                                         onClick={handleShare}
-                                        className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
+                                        className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer'
                                     >
-                                        <ShareIcon className="h-4 w-4" />
+                                        <ShareIcon className='h-4 w-4' />
                                         {copied ? "Link copied!" : "Share"}
                                     </button>
                                     {session && !hasReported && (
                                         <>
                                             {!showReportForm ? (
                                                 <button
-                                                    onClick={() => setShowReportForm(true)}
-                                                    className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
+                                                    onClick={() =>
+                                                        setShowReportForm(true)
+                                                    }
+                                                    className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer'
                                                 >
-                                                    <FlagIcon className="h-4 w-4" />
+                                                    <FlagIcon className='h-4 w-4' />
                                                     Report
                                                 </button>
                                             ) : (
-                                                <div className="flex flex-col gap-2 w-full">
+                                                <div className='flex flex-col gap-2 w-full'>
                                                     <select
                                                         value={reportReason}
-                                                        onChange={(e) => setReportReason(e.target.value as typeof reportReason)}
-                                                        className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full max-w-xs"
+                                                        onChange={(e) =>
+                                                            setReportReason(
+                                                                e.target
+                                                                    .value as typeof reportReason,
+                                                            )
+                                                        }
+                                                        className='text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full max-w-xs'
                                                     >
-                                                        <option value="inaccurate">Inaccurate data</option>
-                                                        <option value="spam">Spam</option>
-                                                        <option value="inappropriate">Inappropriate</option>
-                                                        <option value="other">Other</option>
+                                                        <option value='inaccurate'>
+                                                            Inaccurate data
+                                                        </option>
+                                                        <option value='spam'>
+                                                            Spam
+                                                        </option>
+                                                        <option value='inappropriate'>
+                                                            Inappropriate
+                                                        </option>
+                                                        <option value='other'>
+                                                            Other
+                                                        </option>
                                                     </select>
                                                     <textarea
                                                         value={reportDetails}
-                                                        onChange={(e) => setReportDetails(e.target.value)}
-                                                        placeholder="Additional details (optional)"
+                                                        onChange={(e) =>
+                                                            setReportDetails(
+                                                                e.target.value,
+                                                            )
+                                                        }
+                                                        placeholder='Additional details (optional)'
                                                         rows={3}
-                                                        className="text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full resize-none"
+                                                        className='text-sm bg-background border border-border rounded-md px-2 py-1.5 text-text/80 focus:outline-none focus:border-primary w-full resize-none'
                                                     />
-                                                    <div className="flex items-center gap-2">
+                                                    <div className='flex items-center gap-2'>
                                                         <button
-                                                            onClick={handleReportSubmit}
-                                                            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer"
+                                                            onClick={
+                                                                handleReportSubmit
+                                                            }
+                                                            className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-primary border border-primary/20 hover:bg-primary/10 transition-colors cursor-pointer'
                                                         >
                                                             Submit Report
                                                         </button>
                                                         <button
-                                                            onClick={() => { setShowReportForm(false); setReportDetails("") }}
-                                                            className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer"
+                                                            onClick={() => {
+                                                                setShowReportForm(
+                                                                    false,
+                                                                )
+                                                                setReportDetails(
+                                                                    "",
+                                                                )
+                                                            }}
+                                                            className='inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium text-text/50 border border-border hover:bg-text/5 transition-colors cursor-pointer'
                                                         >
                                                             Cancel
                                                         </button>
@@ -432,75 +532,112 @@ export function PresetDetailModal({
                                         </>
                                     )}
                                     {hasReported && (
-                                        <span className="inline-flex items-center gap-1.5 text-sm text-text/50">
-                                            <FlagIcon className="h-4 w-4" />
+                                        <span className='inline-flex items-center gap-1.5 text-sm text-text/50'>
+                                            <FlagIcon className='h-4 w-4' />
                                             Reported
                                         </span>
                                     )}
                                 </div>
 
-                                <div className="h-px bg-border" />
+                                <div className='h-px bg-border' />
 
                                 {/* Vote buttons */}
-                                <div className="flex items-center gap-3">
+                                <div className='flex items-center gap-3'>
                                     <button
                                         onClick={handleUpvote}
-                                        disabled={!isAuthenticated || userVote === "up"}
+                                        disabled={
+                                            !isAuthenticated ||
+                                            userVote === "up"
+                                        }
                                         className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
                                             userVote === "up"
                                                 ? "bg-green-500/10 border-green-500/30 text-green-400"
                                                 : "border-border text-text/70 hover:bg-text/5"
                                         } ${!isAuthenticated ? "opacity-50 cursor-not-allowed" : ""}`}
-                                        title={!isAuthenticated ? "Sign in to vote" : undefined}
+                                        title={
+                                            !isAuthenticated
+                                                ? "Sign in to vote"
+                                                : undefined
+                                        }
                                     >
-                                        <ThumbsUpIcon className="h-4 w-4" />
+                                        <ThumbsUpIcon className='h-4 w-4' />
                                         {localUpvotes}
                                     </button>
                                     <button
                                         onClick={handleDownvote}
-                                        disabled={!isAuthenticated || userVote === "down"}
+                                        disabled={
+                                            !isAuthenticated ||
+                                            userVote === "down"
+                                        }
                                         className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer ${
                                             userVote === "down"
                                                 ? "bg-red-500/10 border-red-500/30 text-red-400"
                                                 : "border-border text-text/70 hover:bg-text/5"
                                         } ${!isAuthenticated ? "opacity-50 cursor-not-allowed" : ""}`}
-                                        title={!isAuthenticated ? "Sign in to vote" : undefined}
+                                        title={
+                                            !isAuthenticated
+                                                ? "Sign in to vote"
+                                                : undefined
+                                        }
                                     >
-                                        <ThumbsDownIcon className="h-4 w-4" />
+                                        <ThumbsDownIcon className='h-4 w-4' />
                                         {localDownvotes}
                                     </button>
                                 </div>
 
                                 {/* Performance group */}
                                 {hasPerformanceData(preset) && (
-                                    <div className="rounded-lg border border-border bg-text/3 p-3">
-                                        <span className="text-[10px] text-text/40 uppercase tracking-wider font-medium">
+                                    <div className='rounded-lg border border-border bg-text/3 p-3 py-1'>
+                                        <span className='text-[10px] text-text/40 uppercase tracking-wider font-medium'>
                                             Performance
                                         </span>
-                                        <div className="mt-2 flex flex-col gap-0.5">
+                                        <div className='mt-2 flex flex-col gap-0.5'>
                                             {preset.fpsAvg !== null && (
                                                 <MetaItem
-                                                    label="Avg FPS"
+                                                    label='Avg FPS'
                                                     value={
                                                         <>
-                                                            <span className="font-semibold tabular-nums">{preset.fpsAvg}</span>
-                                                            {preset.fpsLow !== null && preset.fpsHigh !== null && (
-                                                                <span className="text-text/50 ml-1">
-                                                                    ({Math.round(preset.fpsLow)}–{Math.round(preset.fpsHigh)})
-                                                                </span>
-                                                            )}
+                                                            <span className='font-semibold tabular-nums'>
+                                                                {preset.fpsAvg}
+                                                            </span>
+                                                            {preset.fpsLow !==
+                                                                null &&
+                                                                preset.fpsHigh !==
+                                                                    null && (
+                                                                    <span className='text-text/50 ml-1'>
+                                                                        (
+                                                                        {Math.round(
+                                                                            preset.fpsLow,
+                                                                        )}
+                                                                        –
+                                                                        {Math.round(
+                                                                            preset.fpsHigh,
+                                                                        )}
+                                                                        )
+                                                                    </span>
+                                                                )}
                                                         </>
                                                     }
                                                 />
                                             )}
-                                            {preset.fpsOnePercentLow !== null && (
-                                                <MetaItem label="1% Low FPS" value={`${preset.fpsOnePercentLow} fps`} />
+                                            {preset.fpsOnePercentLow !==
+                                                null && (
+                                                <MetaItem
+                                                    label='1% Low FPS'
+                                                    value={`${preset.fpsOnePercentLow} fps`}
+                                                />
                                             )}
                                             {preset.loadTimeSsd !== null && (
-                                                <MetaItem label="Load Time (SSD)" value={`${preset.loadTimeSsd}s`} />
+                                                <MetaItem
+                                                    label='Load Time (SSD)'
+                                                    value={`${preset.loadTimeSsd}s`}
+                                                />
                                             )}
                                             {preset.loadTimeSd !== null && (
-                                                <MetaItem label="Load Time (SD)" value={`${preset.loadTimeSd}s`} />
+                                                <MetaItem
+                                                    label='Load Time (SD)'
+                                                    value={`${preset.loadTimeSd}s`}
+                                                />
                                             )}
                                         </div>
                                     </div>
@@ -508,75 +645,119 @@ export function PresetDetailModal({
 
                                 {/* Hardware & Power group */}
                                 {hasHardwarePowerData(preset) && (
-                                    <div className="rounded-lg border border-border bg-text/3 p-3">
-                                        <span className="text-[10px] text-text/40 uppercase tracking-wider font-medium">
+                                    <div className='rounded-lg border border-border bg-text/3 p-3 py-1'>
+                                        <span className='text-[10px] text-text/40 uppercase tracking-wider font-medium'>
                                             Hardware & Power
                                         </span>
-                                        <div className="mt-2 flex flex-col gap-0.5">
+                                        <div className='mt-2 flex flex-col gap-0.5'>
                                             {preset.tdpWatts !== null && (
-                                                <MetaItem label="TDP" value={`${Math.round(preset.tdpWatts)}W`} />
-                                            )}
-                                            {preset.hardwareWattHours !== null && preset.hardwareDeviceType === "handheld" && (
-                                                <MetaItem label="Battery" value={`${Math.round(preset.hardwareWattHours)}Wh`} />
-                                            )}
-                                            {preset.tdpWatts !== null && preset.hardwareWattHours !== null && preset.hardwareDeviceType === "handheld" && (
-                                                <MetaItem label="Est. Battery" value={`~${(preset.hardwareWattHours / preset.tdpWatts).toFixed(1)}h`} />
+                                                <MetaItem
+                                                    label='TDP'
+                                                    value={`${Math.round(preset.tdpWatts)}W`}
+                                                />
                                             )}
+                                            {preset.hardwareWattHours !==
+                                                null &&
+                                                preset.hardwareDeviceType ===
+                                                    "handheld" && (
+                                                    <MetaItem
+                                                        label='Battery'
+                                                        value={`${Math.round(preset.hardwareWattHours)}Wh`}
+                                                    />
+                                                )}
+                                            {preset.tdpWatts !== null &&
+                                                preset.hardwareWattHours !==
+                                                    null &&
+                                                preset.hardwareDeviceType ===
+                                                    "handheld" && (
+                                                    <MetaItem
+                                                        label='Est. Battery'
+                                                        value={`~${(preset.hardwareWattHours / preset.tdpWatts).toFixed(1)}h`}
+                                                    />
+                                                )}
                                         </div>
                                     </div>
                                 )}
 
                                 {/* Software group */}
                                 {hasSoftwareData(preset) && (
-                                    <div className="rounded-lg border border-border bg-text/3 p-3">
-                                        <span className="text-[10px] text-text/40 uppercase tracking-wider font-medium">
+                                    <div className='rounded-lg border border-border bg-text/3 p-3 py-1'>
+                                        <span className='text-[10px] text-text/40 uppercase tracking-wider font-medium'>
                                             Software
                                         </span>
-                                        <div className="mt-2 flex flex-col gap-0.5">
-                                            <MetaItem label="Proton" value={preset.protonVersion} />
-                                            <MetaItem label="OS" value={preset.osVersion} />
+                                        <div className='mt-2 flex flex-col gap-0.5'>
                                             <MetaItem
-                                                label="Upscaler"
+                                                label='Proton'
+                                                value={preset.protonVersion}
+                                            />
+                                            <MetaItem
+                                                label='OS'
+                                                value={preset.osVersion}
+                                            />
+                                            <MetaItem
+                                                label='Upscaler'
                                                 value={
-                                                    preset.upscalerType && preset.upscalerType !== "none"
+                                                    preset.upscalerType &&
+                                                    preset.upscalerType !==
+                                                        "none"
                                                         ? `${preset.upscalerType.toUpperCase()}${preset.upscalerVersion ? ` ${preset.upscalerVersion}` : ""}`
                                                         : null
                                                 }
                                             />
                                             <MetaItem
-                                                label="Frame Gen"
+                                                label='Frame Gen'
                                                 value={
-                                                    preset.frameGenMethod && preset.frameGenMethod !== "none"
-                                                        ? preset.frameGenMethod === "fsr_fg"
+                                                    preset.frameGenMethod &&
+                                                    preset.frameGenMethod !==
+                                                        "none"
+                                                        ? preset.frameGenMethod ===
+                                                          "fsr_fg"
                                                             ? "FSR FG"
-                                                            : preset.frameGenMethod === "dlss_fg"
+                                                            : preset.frameGenMethod ===
+                                                                "dlss_fg"
                                                               ? "DLSS FG"
                                                               : preset.frameGenMethod
                                                         : null
                                                 }
                                             />
-                                            <MetaItem label="Launch Options" value={preset.launchOptions} />
-                                            {preset.customSystem && <MetaItem label="Custom System" value="Yes" />}
+                                            <MetaItem
+                                                label='Launch Options'
+                                                value={preset.launchOptions}
+                                            />
+                                            {preset.customSystem && (
+                                                <MetaItem
+                                                    label='Custom System'
+                                                    value='Yes'
+                                                />
+                                            )}
                                         </div>
                                     </div>
                                 )}
 
                                 {/* Game Info group */}
                                 {hasGameInfoData(preset) && (
-                                    <div className="rounded-lg border border-border bg-text/3 p-3">
-                                        <span className="text-[10px] text-text/40 uppercase tracking-wider font-medium">
+                                    <div className='rounded-lg border border-border bg-text/3 p-3 py-1'>
+                                        <span className='text-[10px] text-text/40 uppercase tracking-wider font-medium'>
                                             Game Info
                                         </span>
-                                        <div className="mt-2 flex flex-col gap-0.5">
+                                        <div className='mt-2 flex flex-col gap-0.5'>
                                             {preset.versionString && (
-                                                <MetaItem label="Version" value={preset.versionString} />
+                                                <MetaItem
+                                                    label='Version'
+                                                    value={preset.versionString}
+                                                />
                                             )}
                                             {preset.buildId && (
-                                                <MetaItem label="Build" value={String(preset.buildId)} />
+                                                <MetaItem
+                                                    label='Build'
+                                                    value={String(
+                                                        preset.buildId,
+                                                    )}
+                                                />
                                             )}
                                             {preset.gameAntiCheatName && (
                                                 <MetaItem
-                                                    label="Anti-Cheat"
+                                                    label='Anti-Cheat'
                                                     value={`${preset.gameAntiCheatName} (${preset.gameAntiCheatStatus ?? "unknown"})`}
                                                 />
                                             )}
@@ -586,79 +767,120 @@ export function PresetDetailModal({
                             </div>
 
                             {/* Right panel — Tabbed content */}
-                            <div className="flex-1 flex flex-col overflow-hidden">
+                            <div className='flex-1 flex flex-col overflow-hidden'>
                                 {/* Desktop tab bar */}
-                                <div className="hidden md:flex shrink-0 border-b border-border">
-                                    {["media", "settings", ...(preset.userNotes ? ["notes" as TabKey] : [])].map((tab) => (
+                                <div className='hidden md:flex shrink-0 border-b border-border'>
+                                    {[
+                                        "media",
+                                        "settings",
+                                        ...(preset.userNotes
+                                            ? ["notes" as TabKey]
+                                            : []),
+                                    ].map((tab) => (
                                         <button
                                             key={tab}
-                                            onClick={() => setActiveTab(tab as TabKey)}
-                                            className={`px-4 py-2.5 text-sm font-medium transition-colors capitalize cursor-pointer ${
+                                            onClick={() =>
+                                                setActiveTab(tab as TabKey)
+                                            }
+                                            className={`py-2.5 flex-1 text-sm font-medium transition-colors capitalize cursor-pointer relative ${
                                                 activeTab === tab
-                                                    ? "text-primary border-b-2 border-primary"
+                                                    ? "text-primary"
                                                     : "text-text/50 hover:text-text/70"
                                             }`}
                                         >
                                             {tab}
+                                            <AnimatePresence>
+                                                {activeTab === tab && (
+                                                    <motion.div
+                                                        layoutId='activeTab'
+                                                        className='absolute w-full bottom-0 bg-primary h-0.5'
+                                                    />
+                                                )}
+                                            </AnimatePresence>
                                         </button>
                                     ))}
                                 </div>
 
                                 {/* Tab content */}
-                                <div className="flex-1 overflow-y-auto p-5">
+                                <div className='flex-1 overflow-y-auto p-5'>
                                     {/* Media tab */}
                                     {activeTab === "media" && (
-                                        <div className="flex flex-col gap-4">
+                                        <div className='flex flex-col gap-4'>
                                             {/* YouTube Video */}
                                             {preset.youtubeVideoId && (
                                                 <div>
-                                                    <div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
+                                                    <div
+                                                        className='relative w-full'
+                                                        style={{
+                                                            paddingBottom:
+                                                                "56.25%",
+                                                        }}
+                                                    >
                                                         <iframe
                                                             src={`https://www.youtube-nocookie.com/embed/${preset.youtubeVideoId}`}
-                                                            className="absolute inset-0 w-full h-full rounded-lg"
-                                                            allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
-                                                            sandbox="allow-scripts allow-same-origin allow-presentation"
+                                                            className='absolute inset-0 w-full h-full rounded-lg'
+                                                            allow='accelerometer; autoplay; encrypted-media; picture-in-picture'
+                                                            sandbox='allow-scripts allow-same-origin allow-presentation'
                                                             allowFullScreen
-                                                            loading="lazy"
-                                                            title="Gameplay Video"
+                                                            loading='lazy'
+                                                            title='Gameplay Video'
                                                         />
                                                     </div>
                                                 </div>
                                             )}
 
                                             {/* Screenshots */}
-                                            {preset.screenshots && preset.screenshots.length > 0 && (
-                                                <div className="flex flex-col gap-2">
-                                                    <span className="text-xs text-text/50 uppercase tracking-wider">Screenshots</span>
-                                                    <div className="flex gap-2">
-                                                        {preset.screenshots.map((ss, i) => (
-                                                            <button
-                                                                key={ss.id}
-                                                                onClick={() => {
-                                                                    setLightboxIndex(i)
-                                                                    setLightboxOpen(true)
-                                                                }}
-                                                                className="block cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary/50 rounded-lg overflow-hidden"
-                                                                aria-label={`View screenshot ${i + 1}`}
-                                                            >
-                                                                {/* eslint-disable-next-line @next/next/no-img-element */}
-                                                                <img
-                                                                    src={ss.url}
-                                                                    alt={`Screenshot ${i + 1}`}
-                                                                    className="w-24 h-16 object-cover border border-border hover:border-primary/50 transition-colors"
-                                                                    loading="lazy"
-                                                                />
-                                                            </button>
-                                                        ))}
+                                            {preset.screenshots &&
+                                                preset.screenshots.length >
+                                                    0 && (
+                                                    <div className='flex flex-col gap-3'>
+                                                        <span className='text-xs text-text/50 uppercase tracking-wider'>
+                                                            Screenshots
+                                                        </span>
+                                                        <div className='flex flex-col gap-3'>
+                                                            {preset.screenshots.map(
+                                                                (ss, i) => (
+                                                                    <button
+                                                                        key={
+                                                                            ss.id
+                                                                        }
+                                                                        onClick={() => {
+                                                                            setLightboxIndex(
+                                                                                i,
+                                                                            )
+                                                                            setLightboxOpen(
+                                                                                true,
+                                                                            )
+                                                                        }}
+                                                                        className='block cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary/50 rounded-lg overflow-hidden w-full'
+                                                                        aria-label={`View screenshot ${i + 1}`}
+                                                                    >
+                                                                        {/* eslint-disable-next-line @next/next/no-img-element */}
+                                                                        <img
+                                                                            src={
+                                                                                ss.url
+                                                                            }
+                                                                            alt={`Screenshot ${i + 1}`}
+                                                                            className='w-full h-auto object-cover border border-border hover:border-primary/50 transition-colors rounded-lg'
+                                                                            loading='lazy'
+                                                                        />
+                                                                    </button>
+                                                                ),
+                                                            )}
+                                                        </div>
                                                     </div>
-                                                </div>
-                                            )}
+                                                )}
 
-                                            {!preset.youtubeVideoId && (!preset.screenshots || preset.screenshots.length === 0) && (
-                                                <div className="flex flex-col items-center justify-center py-16 gap-3 rounded-lg border border-border bg-text/2">
-                                                    <p className="text-sm text-text/40">No media available</p>
-                                                </div>
-                                            )}
+                                            {!preset.youtubeVideoId &&
+                                                (!preset.screenshots ||
+                                                    preset.screenshots
+                                                        .length === 0) && (
+                                                    <div className='flex flex-col items-center justify-center py-16 gap-3 rounded-lg border border-border bg-text/2'>
+                                                        <p className='text-sm text-text/40'>
+                                                            No media available
+                                                        </p>
+                                                    </div>
+                                                )}
                                         </div>
                                     )}
 
@@ -666,80 +888,117 @@ export function PresetDetailModal({
                                     {activeTab === "settings" && (
                                         <>
                                             {hasCategories ? (
-                                                <AnimatePresence mode="wait">
+                                                <AnimatePresence mode='wait'>
                                                     <motion.div
-                                                        key={currentCategory?.category ?? "empty"}
+                                                        key={
+                                                            currentCategory?.category ??
+                                                            "empty"
+                                                        }
                                                         initial={{ opacity: 0 }}
                                                         animate={{ opacity: 1 }}
                                                         exit={{ opacity: 0 }}
-                                                        transition={{ duration: 0.15 }}
-                                                        className="flex flex-col gap-4"
+                                                        transition={{
+                                                            duration: 0.15,
+                                                        }}
+                                                        className='flex flex-col gap-4'
                                                     >
                                                         {/* Category navigation */}
-                                                        <div className="flex items-center justify-between">
+                                                        <div className='flex items-center justify-between'>
                                                             <button
-                                                                onClick={goPrevCategory}
-                                                                className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer"
-                                                                aria-label="Previous category"
+                                                                onClick={
+                                                                    goPrevCategory
+                                                                }
+                                                                className='p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer'
+                                                                aria-label='Previous category'
                                                             >
-                                                                <ChevronLeftIcon className="h-4 w-4 text-text/50" />
+                                                                <ChevronLeftIcon className='h-4 w-4 text-text/50' />
                                                             </button>
-                                                            <span className="text-sm font-medium text-text/80">
-                                                                {currentCategory?.category}{" "}
-                                                                <span className="text-text/40">
-                                                                    ({activeCategoryIndex + 1}/{categories.length})
+                                                            <span className='text-sm font-medium text-text/80'>
+                                                                {
+                                                                    currentCategory?.category
+                                                                }{" "}
+                                                                <span className='text-text/40'>
+                                                                    (
+                                                                    {activeCategoryIndex +
+                                                                        1}
+                                                                    /
+                                                                    {
+                                                                        categories.length
+                                                                    }
+                                                                    )
                                                                 </span>
                                                             </span>
                                                             <button
-                                                                onClick={goNextCategory}
-                                                                className="p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer"
-                                                                aria-label="Next category"
+                                                                onClick={
+                                                                    goNextCategory
+                                                                }
+                                                                className='p-1.5 rounded-md hover:bg-text/5 transition-colors cursor-pointer'
+                                                                aria-label='Next category'
                                                             >
-                                                                <ChevronRightIcon className="h-4 w-4 text-text/50" />
+                                                                <ChevronRightIcon className='h-4 w-4 text-text/50' />
                                                             </button>
                                                         </div>
 
                                                         {/* Settings table */}
-                                                        <div className="rounded-lg border border-border overflow-hidden">
-                                                            <table className="w-full text-sm">
-                                                                <thead className="bg-text/3">
+                                                        <div className='rounded-lg border border-border overflow-hidden'>
+                                                            <table className='w-full text-sm'>
+                                                                <thead className='bg-text/3'>
                                                                     <tr>
-                                                                        <th className="text-left px-2 py-1.5 md:px-3 md:py-2 text-xs font-medium uppercase tracking-wider text-text/50">
+                                                                        <th className='text-left px-2 py-1.5 md:px-3 md:py-2 text-xs font-medium uppercase tracking-wider text-text/50'>
                                                                             Setting
                                                                         </th>
-                                                                        <th className="text-right px-2 py-1.5 md:px-3 md:py-2 text-xs font-medium uppercase tracking-wider text-text/50">
+                                                                        <th className='text-right px-2 py-1.5 md:px-3 md:py-2 text-xs font-medium uppercase tracking-wider text-text/50'>
                                                                             Value
                                                                         </th>
                                                                     </tr>
                                                                 </thead>
                                                                 <tbody>
-                                                                    {currentCategory?.settings.map((setting, sIdx) => (
-                                                                        <tr key={sIdx} className="border-t border-border">
-                                                                            <td className="px-2 py-1.5 md:px-3 md:py-2 text-text/70">
-                                                                                {setting.title}
-                                                                            </td>
-                                                                            <td className="px-2 py-1.5 md:px-3 md:py-2 text-right font-medium text-text">
-                                                                                {formatValue(setting.value)}
-                                                                            </td>
-                                                                        </tr>
-                                                                    ))}
+                                                                    {currentCategory?.settings.map(
+                                                                        (
+                                                                            setting,
+                                                                            sIdx,
+                                                                        ) => (
+                                                                            <tr
+                                                                                key={
+                                                                                    sIdx
+                                                                                }
+                                                                                className='border-t border-border'
+                                                                            >
+                                                                                <td className='px-2 py-1.5 md:px-3 md:py-2 text-text/70'>
+                                                                                    {
+                                                                                        setting.title
+                                                                                    }
+                                                                                </td>
+                                                                                <td className='px-2 py-1.5 md:px-3 md:py-2 text-right font-medium text-text'>
+                                                                                    {formatValue(
+                                                                                        setting.value,
+                                                                                    )}
+                                                                                </td>
+                                                                            </tr>
+                                                                        ),
+                                                                    )}
                                                                 </tbody>
                                                             </table>
                                                         </div>
                                                     </motion.div>
                                                 </AnimatePresence>
                                             ) : (
-                                                <div className="flex flex-col items-center justify-center py-16 gap-3 rounded-lg border border-border bg-text/2">
-                                                    <p className="text-sm text-text/40">No settings data</p>
+                                                <div className='flex flex-col items-center justify-center py-16 gap-3 rounded-lg border border-border bg-text/2'>
+                                                    <p className='text-sm text-text/40'>
+                                                        No settings data
+                                                    </p>
                                                 </div>
                                             )}
                                         </>
                                     )}
 
                                     {/* Notes tab */}
-                                    {activeTab === "notes" && preset.userNotes && (
-                                        <TiptapRenderer content={preset.userNotes} />
-                                    )}
+                                    {activeTab === "notes" &&
+                                        preset.userNotes && (
+                                            <TiptapRenderer
+                                                content={preset.userNotes}
+                                            />
+                                        )}
                                 </div>
                             </div>
                         </div>
@@ -747,13 +1006,15 @@ export function PresetDetailModal({
                 </motion.div>
 
                 {/* Screenshot Lightbox */}
-                {lightboxOpen && preset.screenshots && preset.screenshots.length > 0 && (
-                    <ScreenshotLightbox
-                        screenshots={preset.screenshots}
-                        initialIndex={lightboxIndex}
-                        onClose={() => setLightboxOpen(false)}
-                    />
-                )}
+                {lightboxOpen &&
+                    preset.screenshots &&
+                    preset.screenshots.length > 0 && (
+                        <ScreenshotLightbox
+                            screenshots={preset.screenshots}
+                            initialIndex={lightboxIndex}
+                            onClose={() => setLightboxOpen(false)}
+                        />
+                    )}
             </>
         </AnimatePresence>
     )
diff --git a/components/wizard/settings-editor.tsx b/components/wizard/settings-editor.tsx
index f4edc25..f850e27 100644
--- a/components/wizard/settings-editor.tsx
+++ b/components/wizard/settings-editor.tsx
@@ -1,518 +1,1039 @@
 "use client"
 
-import { useState, useEffect, useRef } from "react"
-import { Plus, X, ChevronDown, ChevronUp, ToggleLeft, ToggleRight } from "lucide-react"
-import { motion, AnimatePresence } from "motion/react"
+import { useState, useEffect, useRef, useCallback } from "react"
+import {
+    Plus,
+    X,
+    ChevronDown,
+    ChevronUp,
+    GripVertical,
+    Copy,
+    FileInput,
+} from "lucide-react"
+import { motion, AnimatePresence, Reorder, useDragControls } from "motion/react"
 
 export interface SettingItem {
-  title: string
-  value: string | number | boolean
+    title: string
+    value: string | number | boolean
 }
 
 export interface SettingCategory {
-  category: string
-  settings: SettingItem[]
+    category: string
+    settings: SettingItem[]
 }
 
 const DEFAULT_CATEGORIES: SettingCategory[] = [
-  {
-    category: "Graphics",
-    settings: [
-      { title: "Texture Quality", value: "High" },
-      { title: "Shadow Quality", value: "Medium" },
-      { title: "Anti-Aliasing", value: "TAA" },
-      { title: "Effects Quality", value: "High" },
-    ],
-  },
-  {
-    category: "Display",
-    settings: [
-      { title: "Resolution", value: "1280x800" },
-      { title: "Refresh Rate", value: 60 },
-      { title: "VSync", value: false },
-      { title: "Fullscreen", value: true },
-    ],
-  },
-  {
-    category: "Audio",
-    settings: [
-      { title: "Master Volume", value: 80 },
-      { title: "SFX Volume", value: 70 },
-    ],
-  },
+    {
+        category: "Graphics",
+        settings: [
+            { title: "Texture Quality", value: "High" },
+            { title: "Shadow Quality", value: "Medium" },
+            { title: "Anti-Aliasing", value: "TAA" },
+            { title: "Effects Quality", value: "High" },
+        ],
+    },
+    {
+        category: "Display",
+        settings: [
+            { title: "Resolution", value: "1280x800" },
+            { title: "Refresh Rate", value: 60 },
+            { title: "VSync", value: false },
+            { title: "Fullscreen", value: true },
+        ],
+    },
+    {
+        category: "Audio",
+        settings: [
+            { title: "Master Volume", value: 80 },
+            { title: "SFX Volume", value: 70 },
+        ],
+    },
 ]
 
 const typeOptions = [
-  { value: "text", label: "Abc" },
-  { value: "number", label: "123" },
-  { value: "boolean", label: "\u2713/\u2717" },
+    { value: "text", label: "Abc" },
+    { value: "number", label: "123" },
+    { value: "boolean", label: "\u2713/\u2717" },
 ] as const
 
 interface SettingsEditorProps {
-  value: SettingCategory[]
-  onChange: (categories: SettingCategory[]) => void
-  className?: string
+    value: SettingCategory[]
+    onChange: (categories: SettingCategory[]) => void
+    className?: string
+}
+
+function getTypeMeta(value: string | number | boolean) {
+    if (typeof value === "boolean") {
+        return {
+            label: "\u2713/\u2717",
+            className: "bg-emerald-500/10 text-emerald-400 border-emerald-500/20",
+            title: "Toggle",
+            next: "text" as const,
+        }
+    }
+    if (typeof value === "number") {
+        return {
+            label: "123",
+            className: "bg-amber-500/10 text-amber-400 border-amber-500/20",
+            title: "Number",
+            next: "boolean" as const,
+        }
+    }
+    return {
+        label: "Abc",
+        className: "bg-sky-500/10 text-sky-400 border-sky-500/20",
+        title: "Text",
+        next: "number" as const,
+    }
+}
+
+function convertValue(
+    current: string | number | boolean,
+    targetType: "text" | "number" | "boolean",
+): string | number | boolean {
+    if (targetType === "boolean") {
+        if (typeof current === "boolean") return current
+        if (typeof current === "number") return current !== 0
+        return current.toLowerCase() === "true"
+    }
+    if (targetType === "number") {
+        if (typeof current === "number") return current
+        if (typeof current === "boolean") return current ? 1 : 0
+        const parsed = parseInt(current, 10)
+        return isNaN(parsed) ? 0 : parsed
+    }
+    // text
+    if (typeof current === "string") return current
+    return String(current)
+}
+
+function SettingRow({
+    setting,
+    category,
+    onUpdate,
+    onRemove,
+    onDuplicate,
+    onTypeSwitch,
+}: {
+    setting: SettingItem
+    category: string
+    onUpdate: (
+        cat: string,
+        title: string,
+        val: string | number | boolean,
+    ) => void
+    onRemove: (cat: string, title: string) => void
+    onDuplicate: (cat: string, title: string) => void
+    onTypeSwitch: (cat: string, title: string) => void
+}) {
+    const dragControls = useDragControls()
+    const typeMeta = getTypeMeta(setting.value)
+
+    return (
+        <Reorder.Item
+            value={setting}
+            dragListener={false}
+            dragControls={dragControls}
+            as="div"
+            data-setting-row
+            data-category={category}
+            data-title={setting.title}
+            className="group grid grid-cols-[28px_36px_1fr_1fr_56px] gap-2 items-center rounded-lg border border-border bg-text/3 px-2 py-2 shadow-sm hover:shadow-md hover:bg-text/5 transition-all"
+            initial={{ opacity: 0, x: -8 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: -8 }}
+            transition={{ duration: 0.15 }}
+            whileDrag={{
+                scale: 1.01,
+                boxShadow: "0 8px 30px rgba(0,0,0,0.2)",
+                zIndex: 10,
+            }}
+        >
+            {/* Drag Handle */}
+            <div
+                className="cursor-grab active:cursor-grabbing p-0.5 rounded text-text/20 hover:text-text/50 hover:bg-text/5 transition-colors flex items-center justify-center"
+                onPointerDown={(e) => dragControls.start(e)}
+            >
+                <GripVertical className="h-4 w-4" />
+            </div>
+
+            {/* Type Badge — clickable to cycle type */}
+            <button
+                type="button"
+                onClick={() => onTypeSwitch(category, setting.title)}
+                className={`text-[9px] font-bold tracking-wider px-1 py-0.5 rounded border text-center leading-none cursor-pointer hover:brightness-110 transition-all ${typeMeta.className}`}
+                title={`${typeMeta.title} — click to switch type`}
+            >
+                {typeMeta.label}
+            </button>
+
+            {/* Label */}
+            <span className="text-sm font-medium text-text/90 truncate px-1">
+                {setting.title}
+            </span>
+
+            {/* Value Control */}
+            <div className="min-w-0 flex items-center">
+                {typeof setting.value === "boolean" ? (
+                    <button
+                        onClick={() =>
+                            onUpdate(category, setting.title, !setting.value)
+                        }
+                        className="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 cursor-pointer"
+                        style={{
+                            backgroundColor: setting.value
+                                ? "var(--color-primary, #3b82f6)"
+                                : "var(--color-border, #374151)",
+                        }}
+                    >
+                        <span
+                            className="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform"
+                            style={{
+                                transform: setting.value
+                                    ? "translateX(22px)"
+                                    : "translateX(2px)",
+                            }}
+                        />
+                    </button>
+                ) : typeof setting.value === "number" ? (
+                    <input
+                        type="text"
+                        inputMode="numeric"
+                        pattern="[0-9]*"
+                        value={setting.value}
+                        onChange={(e) => {
+                            const cleaned = e.target.value.replace(
+                                /[^0-9]/g,
+                                "",
+                            )
+                            const updated = cleaned === "" ? 0 : Number(cleaned)
+                            onUpdate(category, setting.title, updated)
+                        }}
+                        className="w-full px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors text-right"
+                    />
+                ) : (
+                    <input
+                        type="text"
+                        value={setting.value}
+                        onChange={(e) => {
+                            onUpdate(category, setting.title, e.target.value)
+                        }}
+                        className="w-full px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
+                    />
+                )}
+            </div>
+
+            {/* Actions: Duplicate + Remove */}
+            <div className="flex items-center justify-end gap-0.5">
+                <button
+                    onClick={() => onDuplicate(category, setting.title)}
+                    className="p-1 rounded-md text-text/30 hover:text-primary hover:bg-primary/10 transition-colors cursor-pointer opacity-0 group-hover:opacity-100 focus:opacity-100"
+                    title="Duplicate setting"
+                >
+                    <Copy className="h-3 w-3" />
+                </button>
+                <button
+                    onClick={() => onRemove(category, setting.title)}
+                    className="p-1 rounded-md text-text/30 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer opacity-0 group-hover:opacity-100 focus:opacity-100"
+                    title="Remove setting"
+                >
+                    <X className="h-3.5 w-3.5" />
+                </button>
+            </div>
+        </Reorder.Item>
+    )
 }
 
 export function SettingsEditor({
-  value,
-  onChange,
-  className = "",
+    value,
+    onChange,
+    className = "",
 }: SettingsEditorProps) {
-  const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(
-    new Set()
-  )
-  const [newCategoryName, setNewCategoryName] = useState("")
-  const [newSettingNames, setNewSettingNames] = useState<Record<string, string>>({})
-  const [newSettingTypes, setNewSettingTypes] = useState<Record<string, string>>({})
-  const addSettingInputRefs = useRef<Record<string, HTMLInputElement | null>>({})
-
-  const toggleCategory = (category: string) => {
-    setCollapsedCategories((prev) => {
-      const next = new Set(prev)
-      if (next.has(category)) {
-        next.delete(category)
-      } else {
-        next.add(category)
-      }
-      return next
-    })
-  }
-
-  const addCategory = () => {
-    const name = newCategoryName.trim()
-    if (!name) return
-    if (value.some((c) => c.category === name)) return
-
-    onChange([...value, { category: name, settings: [] }])
-    setNewCategoryName("")
-  }
-
-  const removeCategory = (category: string) => {
-    onChange(value.filter((c) => c.category !== category))
-    setCollapsedCategories((prev) => {
-      const next = new Set(prev)
-      next.delete(category)
-      return next
-    })
-  }
-
-  const addSetting = (category: string) => {
-    const name = (newSettingNames[category] || "").trim()
-    if (!name) return
-    const type = newSettingTypes[category] || "text"
-    const defaultValue = type === "boolean" ? false : type === "number" ? 0 : ""
-    onChange(
-      value.map((c) => {
-        if (c.category !== category) return c
-        if (c.settings.some((s) => s.title === name)) return c
-        return {
-          ...c,
-          settings: [...c.settings, { title: name, value: defaultValue }],
-        }
-      })
+    const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(
+        new Set(),
     )
-    setNewSettingNames((prev) => ({ ...prev, [category]: "" }))
-    // Refocus after React re-renders
-    setTimeout(() => addSettingInputRefs.current[category]?.focus(), 0)
-  }
-
-  const moveCategoryUp = (category: string) => {
-    const idx = value.findIndex((c) => c.category === category)
-    if (idx <= 0) return
-    const next = [...value]
-    ;[next[idx - 1], next[idx]] = [next[idx], next[idx - 1]]
-    onChange(next)
-  }
-
-  const moveCategoryDown = (category: string) => {
-    const idx = value.findIndex((c) => c.category === category)
-    if (idx >= value.length - 1) return
-    const next = [...value]
-    ;[next[idx], next[idx + 1]] = [next[idx + 1], next[idx]]
-    onChange(next)
-  }
-
-  const moveSettingUp = (category: string, settingTitle: string) => {
-    onChange(
-      value.map((c) => {
-        if (c.category !== category) return c
-        const idx = c.settings.findIndex((s) => s.title === settingTitle)
-        if (idx <= 0) return c
-        const next = [...c.settings]
-        ;[next[idx - 1], next[idx]] = [next[idx], next[idx - 1]]
-        return { ...c, settings: next }
-      })
+    const [newCategoryName, setNewCategoryName] = useState("")
+    const [newSettingNames, setNewSettingNames] = useState<
+        Record<string, string>
+    >({})
+    const [newSettingTypes, setNewSettingTypes] = useState<
+        Record<string, string>
+    >({})
+    const addSettingInputRefs = useRef<Record<string, HTMLInputElement | null>>(
+        {},
     )
-  }
+    const [pasteOpenFor, setPasteOpenFor] = useState<string | null>(null)
+    const [pasteText, setPasteText] = useState("")
 
-  const moveSettingDown = (category: string, settingTitle: string) => {
-    onChange(
-      value.map((c) => {
-        if (c.category !== category) return c
-        const idx = c.settings.findIndex((s) => s.title === settingTitle)
-        if (idx >= c.settings.length - 1) return c
-        const next = [...c.settings]
-        ;[next[idx], next[idx + 1]] = [next[idx + 1], next[idx]]
-        return { ...c, settings: next }
-      })
+    const setAddSettingInputRef = useCallback(
+        (category: string) => (el: HTMLInputElement | null) => {
+            addSettingInputRefs.current[category] = el
+        },
+        [],
     )
-  }
 
-  const removeSetting = (category: string, settingTitle: string) => {
-    onChange(
-      value.map((c) => {
-        if (c.category !== category) return c
-        return {
-          ...c,
-          settings: c.settings.filter((s) => s.title !== settingTitle),
-        }
-      })
-    )
-  }
-
-  const updateSetting = (
-    category: string,
-    settingTitle: string,
-    newValue: string | number | boolean
-  ) => {
-    onChange(
-      value.map((c) => {
-        if (c.category !== category) return c
-        return {
-          ...c,
-          settings: c.settings.map((s) =>
-            s.title === settingTitle ? { ...s, value: newValue } : s
-          ),
-        }
-      })
-    )
-  }
-
-  const loadDefaults = () => {
-    onChange(DEFAULT_CATEGORIES)
-    setCollapsedCategories(new Set())
-  }
-
-  const isEmpty = value.length === 0
-  const [showCustomInput, setShowCustomInput] = useState(false)
-  const customInputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (showCustomInput && customInputRef.current) {
-      customInputRef.current.focus()
+    const toggleCategory = (category: string) => {
+        setCollapsedCategories((prev) => {
+            const next = new Set(prev)
+            if (next.has(category)) {
+                next.delete(category)
+            } else {
+                next.add(category)
+            }
+            return next
+        })
     }
-  }, [showCustomInput])
 
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {isEmpty && !showCustomInput && (
-        <div className="flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg bg-text/5">
-          <p className="text-sm text-text/50 mb-4">No settings configured</p>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={loadDefaults}
-              className="px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer"
-            >
-              Load defaults
-            </button>
-            <button
-              onClick={() => setShowCustomInput(true)}
-              className="px-4 py-2 rounded-lg border border-border text-text text-sm font-semibold hover:bg-text/5 transition-colors cursor-pointer"
-            >
-              Create custom
-            </button>
-          </div>
-        </div>
-      )}
+    const collapseAll = () => {
+        setCollapsedCategories(new Set(value.map((c) => c.category)))
+    }
 
-      {isEmpty && showCustomInput && (
-        <div className="rounded-lg border border-dashed border-primary/50 bg-text/5 p-4">
-          <label className="text-xs font-medium text-text/60 mb-2 block">Category name</label>
-          <div className="flex items-center gap-2">
-            <input
-              ref={customInputRef}
-              type="text"
-              value={newCategoryName}
-              onChange={(e) => setNewCategoryName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  e.preventDefault()
-                  if (newCategoryName.trim()) {
-                    addCategory()
-                    setShowCustomInput(false)
-                  }
+    const expandAll = () => {
+        setCollapsedCategories(new Set())
+    }
+
+    const allCollapsed =
+        value.length > 0 && collapsedCategories.size === value.length
+    const allExpanded = collapsedCategories.size === 0
+
+    const addCategory = () => {
+        const name = newCategoryName.trim()
+        if (!name) return
+        if (value.some((c) => c.category === name)) return
+
+        onChange([...value, { category: name, settings: [] }])
+        setNewCategoryName("")
+    }
+
+    const removeCategory = (category: string) => {
+        onChange(value.filter((c) => c.category !== category))
+        setCollapsedCategories((prev) => {
+            const next = new Set(prev)
+            next.delete(category)
+            return next
+        })
+    }
+
+    const addSetting = (category: string) => {
+        const name = (newSettingNames[category] || "").trim()
+        if (!name) return
+        const type = newSettingTypes[category] || "text"
+        const defaultValue =
+            type === "boolean" ? false : type === "number" ? 0 : ""
+        onChange(
+            value.map((c) => {
+                if (c.category !== category) return c
+                if (c.settings.some((s) => s.title === name)) return c
+                return {
+                    ...c,
+                    settings: [
+                        ...c.settings,
+                        { title: name, value: defaultValue },
+                    ],
                 }
-              }}
-              placeholder="e.g. Graphics, Audio, Display..."
-              className="flex-1 px-4 py-2.5 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
-            />
-            <button
-              onClick={() => {
-                if (newCategoryName.trim()) {
-                  addCategory()
-                  setShowCustomInput(false)
-                }
-              }}
-              className="px-4 py-2.5 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer"
-            >
-              Add
-            </button>
-            <button
-              onClick={() => {
-                setNewCategoryName("")
-                setShowCustomInput(false)
-              }}
-              className="px-4 py-2.5 rounded-lg border border-border text-text/70 text-sm font-semibold hover:bg-text/5 transition-colors cursor-pointer"
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
-      )}
+            }),
+        )
+        setNewSettingNames((prev) => ({ ...prev, [category]: "" }))
+        // Refocus after React re-renders
+        setTimeout(() => addSettingInputRefs.current[category]?.focus(), 0)
+    }
 
-      <AnimatePresence initial={false}>
-        {value.map((cat, index) => {
-          const isCollapsed = collapsedCategories.has(cat.category)
-          return (
-            <motion.div
-              key={cat.category}
-              initial={{ opacity: 0, y: -8 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -8 }}
-              transition={{ duration: 0.2 }}
-              className="border border-border rounded-lg overflow-hidden"
-            >
-              <div className="flex items-center justify-between px-4 py-3 bg-text/5">
-                <button
-                  onClick={() => toggleCategory(cat.category)}
-                  className="flex items-center gap-2 text-sm font-semibold text-text hover:text-text/80 transition-colors cursor-pointer"
-                >
-                  {isCollapsed ? (
-                    <ChevronDown className="h-4 w-4" />
-                  ) : (
-                    <ChevronUp className="h-4 w-4" />
-                  )}
-                  {cat.category}
-                  <span className="text-xs text-text/40 font-normal">
-                    ({cat.settings.length})
-                  </span>
-                </button>
-                <div className="flex items-center gap-1">
-                  <button
-                    onClick={() => moveCategoryUp(cat.category)}
-                    disabled={index === 0}
-                    className="p-1 rounded-md text-text/30 hover:text-text/60 hover:bg-text/5 transition-colors cursor-pointer disabled:opacity-20"
-                    title="Move up"
-                  >
-                    <ChevronUp className="h-3.5 w-3.5" />
-                  </button>
-                  <button
-                    onClick={() => moveCategoryDown(cat.category)}
-                    disabled={index === value.length - 1}
-                    className="p-1 rounded-md text-text/30 hover:text-text/60 hover:bg-text/5 transition-colors cursor-pointer disabled:opacity-20"
-                    title="Move down"
-                  >
-                    <ChevronDown className="h-3.5 w-3.5" />
-                  </button>
-                  <button
-                    onClick={() => removeCategory(cat.category)}
-                    className="p-1 rounded-md text-text/40 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
-                    title="Remove category"
-                  >
-                    <X className="h-4 w-4" />
-                  </button>
+    const removeSetting = (category: string, settingTitle: string) => {
+        onChange(
+            value.map((c) => {
+                if (c.category !== category) return c
+                return {
+                    ...c,
+                    settings: c.settings.filter(
+                        (s) => s.title !== settingTitle,
+                    ),
+                }
+            }),
+        )
+    }
+
+    const duplicateSetting = (category: string, settingTitle: string) => {
+        onChange(
+            value.map((c) => {
+                if (c.category !== category) return c
+                const idx = c.settings.findIndex((s) => s.title === settingTitle)
+                if (idx === -1) return c
+                const original = c.settings[idx]
+
+                // Find a unique title
+                let copyTitle = `${original.title} (copy)`
+                let n = 2
+                while (c.settings.some((s) => s.title === copyTitle)) {
+                    copyTitle = `${original.title} (copy ${n})`
+                    n++
+                }
+
+                const next = [...c.settings]
+                next.splice(idx + 1, 0, {
+                    title: copyTitle,
+                    value: original.value,
+                })
+                return { ...c, settings: next }
+            }),
+        )
+    }
+
+    const cycleSettingType = (category: string, settingTitle: string) => {
+        onChange(
+            value.map((c) => {
+                if (c.category !== category) return c
+                return {
+                    ...c,
+                    settings: c.settings.map((s) => {
+                        if (s.title !== settingTitle) return s
+                        const meta = getTypeMeta(s.value)
+                        return { ...s, value: convertValue(s.value, meta.next) }
+                    }),
+                }
+            }),
+        )
+    }
+
+    const updateSetting = (
+        category: string,
+        settingTitle: string,
+        newValue: string | number | boolean,
+    ) => {
+        onChange(
+            value.map((c) => {
+                if (c.category !== category) return c
+                return {
+                    ...c,
+                    settings: c.settings.map((s) =>
+                        s.title === settingTitle
+                            ? { ...s, value: newValue }
+                            : s,
+                    ),
+                }
+            }),
+        )
+    }
+
+    const handleReorderSettings = (
+        category: string,
+        newSettings: SettingItem[],
+    ) => {
+        onChange(
+            value.map((c) => {
+                if (c.category !== category) return c
+                return { ...c, settings: newSettings }
+            }),
+        )
+    }
+
+    const parsePaste = (category: string) => {
+        const lines = pasteText.split("\n")
+        const newSettings: SettingItem[] = []
+
+        for (const line of lines) {
+            const trimmed = line.trim()
+            if (!trimmed) continue
+            // Match: Key = Value, Key: Value, Key - Value
+            const match = trimmed.match(/^(.+?)\s*[:=\-]\s*(.+)$/)
+            if (!match) continue
+            const [, rawKey, rawVal] = match
+            const key = rawKey.trim()
+            const val = rawVal.trim()
+            if (!key || !val) continue
+
+            // Detect type
+            const lower = val.toLowerCase()
+            let parsedValue: string | number | boolean = val
+            if (
+                lower === "true" ||
+                lower === "false" ||
+                lower === "on" ||
+                lower === "off" ||
+                lower === "yes" ||
+                lower === "no"
+            ) {
+                parsedValue =
+                    lower === "true" || lower === "on" || lower === "yes"
+            } else if (/^-?\d+$/.test(val)) {
+                parsedValue = Number(val)
+            }
+
+            newSettings.push({ title: key, value: parsedValue })
+        }
+
+        if (newSettings.length === 0) return
+
+        onChange(
+            value.map((c) => {
+                if (c.category !== category) return c
+                const existingTitles = new Set(c.settings.map((s) => s.title))
+                const uniqueNew = newSettings.filter(
+                    (s) => !existingTitles.has(s.title),
+                )
+                return {
+                    ...c,
+                    settings: [...c.settings, ...uniqueNew],
+                }
+            }),
+        )
+
+        setPasteText("")
+        setPasteOpenFor(null)
+    }
+
+    const loadDefaults = () => {
+        onChange(DEFAULT_CATEGORIES)
+        setCollapsedCategories(new Set())
+    }
+
+    const isEmpty = value.length === 0
+    const [showCustomInput, setShowCustomInput] = useState(false)
+    const customInputRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        if (showCustomInput && customInputRef.current) {
+            customInputRef.current.focus()
+        }
+    }, [showCustomInput])
+
+    // Keyboard reorder: Alt + ArrowUp/ArrowDown
+    const valueRef = useRef(value)
+    const onChangeRef = useRef(onChange)
+
+    useEffect(() => {
+        valueRef.current = value
+        onChangeRef.current = onChange
+    })
+
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (!e.altKey) return
+            if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return
+
+            const active = document.activeElement
+            if (!active) return
+
+            const row = active.closest("[data-setting-row]")
+            if (!row) return
+
+            const category = row.getAttribute("data-category")
+            const title = row.getAttribute("data-title")
+            if (!category || !title) return
+
+            e.preventDefault()
+
+            const currentValue = valueRef.current
+            const direction = e.key === "ArrowUp" ? -1 : 1
+
+            const nextValue = currentValue.map((c) => {
+                if (c.category !== category) return c
+                const idx = c.settings.findIndex((s) => s.title === title)
+                if (idx === -1) return c
+                const newIdx = idx + direction
+                if (newIdx < 0 || newIdx >= c.settings.length) return c
+                const nextSettings = [...c.settings]
+                ;[nextSettings[idx], nextSettings[newIdx]] = [
+                    nextSettings[newIdx],
+                    nextSettings[idx],
+                ]
+                return { ...c, settings: nextSettings }
+            })
+
+            onChangeRef.current(nextValue)
+
+            // Restore focus after React re-renders
+            requestAnimationFrame(() => {
+                const newRow = document.querySelector(
+                    `[data-setting-row][data-category="${category}"][data-title="${title}"]`,
+                )
+                const input = newRow?.querySelector(
+                    "input, button",
+                ) as HTMLElement | null
+                input?.focus()
+            })
+        }
+
+        window.addEventListener("keydown", handler)
+        return () => window.removeEventListener("keydown", handler)
+    }, [])
+
+    return (
+        <div className={`space-y-4 ${className}`}>
+            {isEmpty && !showCustomInput && (
+                <div className="flex flex-col items-center justify-center py-10 border border-dashed border-border rounded-lg bg-text/5">
+                    <p className="text-sm text-text/50 mb-4">
+                        No settings configured
+                    </p>
+                    <div className="flex items-center gap-2">
+                        <button
+                            onClick={loadDefaults}
+                            className="px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer"
+                        >
+                            Load defaults
+                        </button>
+                        <button
+                            onClick={() => setShowCustomInput(true)}
+                            className="px-4 py-2 rounded-lg border border-border text-text text-sm font-semibold hover:bg-text/5 transition-colors cursor-pointer"
+                        >
+                            Create custom
+                        </button>
+                    </div>
                 </div>
-              </div>
+            )}
 
-              <AnimatePresence initial={false}>
-                {!isCollapsed && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: "auto", opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    transition={{ duration: 0.2 }}
-                    className="overflow-hidden"
-                  >
-                    <div className="px-4 pb-4 pt-2 space-y-3">
-                      {/* Add setting row at the top */}
-                      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
-                        <div className="flex items-center gap-1">
-                          {typeOptions.map((opt) => (
-                            <button
-                              key={opt.value}
-                              type="button"
-                              onClick={() =>
-                                setNewSettingTypes((prev) => ({
-                                  ...prev,
-                                  [cat.category]: opt.value,
-                                }))
-                              }
-                              className={`px-2 py-1.5 rounded-md text-xs font-medium border transition-colors cursor-pointer ${
-                                (newSettingTypes[cat.category] || "text") === opt.value
-                                  ? "bg-primary text-white border-primary"
-                                  : "border-border text-text/60 hover:bg-text/5"
-                              }`}
-                            >
-                              {opt.label}
-                            </button>
-                          ))}
-                        </div>
+            {isEmpty && showCustomInput && (
+                <div className="rounded-lg border border-dashed border-primary/50 bg-text/5 p-4">
+                    <label className="text-xs font-medium text-text/60 mb-2 block">
+                        Category name
+                    </label>
+                    <div className="flex items-center gap-2">
                         <input
-                          ref={(el) => {
-                            addSettingInputRefs.current[cat.category] = el
-                          }}
-                          type="text"
-                          value={newSettingNames[cat.category] || ""}
-                          onChange={(e) =>
-                            setNewSettingNames((prev) => ({
-                              ...prev,
-                              [cat.category]: e.target.value,
-                            }))
-                          }
-                          onKeyDown={(e) => {
-                            if (e.key === "Enter") {
-                              e.preventDefault()
-                              addSetting(cat.category)
-                            }
-                          }}
-                          placeholder="Add setting..."
-                          className="flex-1 px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
+                            ref={customInputRef}
+                            type="text"
+                            value={newCategoryName}
+                            onChange={(e) => setNewCategoryName(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault()
+                                    if (newCategoryName.trim()) {
+                                        addCategory()
+                                        setShowCustomInput(false)
+                                    }
+                                }
+                            }}
+                            placeholder="e.g. Graphics, Audio, Display..."
+                            className="flex-1 px-4 py-2.5 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
                         />
                         <button
-                          onClick={() => addSetting(cat.category)}
-                          className="p-1.5 rounded-md bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer flex-shrink-0"
-                          title="Add setting"
-                        >
-                          <Plus className="h-4 w-4" />
-                        </button>
-                      </div>
-
-                      <AnimatePresence initial={false}>
-                        {cat.settings.map((setting) => (
-                          <motion.div
-                            key={setting.title}
-                            initial={{ opacity: 0, x: -8 }}
-                            animate={{ opacity: 1, x: 0 }}
-                            exit={{ opacity: 0, x: -8 }}
-                            transition={{ duration: 0.15 }}
-                            className="flex items-center gap-3"
-                          >
-                            <span className="text-sm text-text/80 min-w-[120px] flex-shrink-0">
-                              {setting.title}
-                            </span>
-
-                            {typeof setting.value === "boolean" ? (
-                              <button
-                                onClick={() =>
-                                  updateSetting(
-                                    cat.category,
-                                    setting.title,
-                                    !setting.value
-                                  )
+                            onClick={() => {
+                                if (newCategoryName.trim()) {
+                                    addCategory()
+                                    setShowCustomInput(false)
                                 }
-                                className="flex items-center gap-2 text-sm text-text/60 hover:text-text transition-colors cursor-pointer"
-                              >
-                                {setting.value ? (
-                                  <ToggleRight className="h-5 w-5 text-primary" />
-                                ) : (
-                                  <ToggleLeft className="h-5 w-5 text-text/40" />
+                            }}
+                            className="px-4 py-2.5 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer"
+                        >
+                            Add
+                        </button>
+                        <button
+                            onClick={() => {
+                                setNewCategoryName("")
+                                setShowCustomInput(false)
+                            }}
+                            className="px-4 py-2.5 rounded-lg border border-border text-text/70 text-sm font-semibold hover:bg-text/5 transition-colors cursor-pointer"
+                        >
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Global toolbar */}
+            {value.length > 0 && (
+                <div className="flex items-center justify-end gap-1">
+                    <button
+                        onClick={expandAll}
+                        disabled={allExpanded}
+                        className="px-2.5 py-1.5 rounded-md text-xs font-medium text-text/60 hover:text-text hover:bg-text/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
+                    >
+                        <ChevronUp className="h-3 w-3" />
+                        Expand all
+                    </button>
+                    <button
+                        onClick={collapseAll}
+                        disabled={allCollapsed}
+                        className="px-2.5 py-1.5 rounded-md text-xs font-medium text-text/60 hover:text-text hover:bg-text/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed flex items-center gap-1"
+                    >
+                        <ChevronDown className="h-3 w-3" />
+                        Collapse all
+                    </button>
+                </div>
+            )}
+
+            <Reorder.Group
+                axis="y"
+                values={value}
+                onReorder={onChange}
+                as="div"
+                className="space-y-4"
+            >
+                <AnimatePresence initial={false}>
+                    {value.map((cat) => {
+                        const isCollapsed = collapsedCategories.has(
+                            cat.category,
+                        )
+                        return (
+                            <CategoryCard
+                                key={cat.category}
+                                cat={cat}
+                                isCollapsed={isCollapsed}
+                                onToggle={() => toggleCategory(cat.category)}
+                                onRemove={() => removeCategory(cat.category)}
+                                newSettingNames={newSettingNames}
+                                newSettingTypes={newSettingTypes}
+                                onNewSettingNameChange={(name) =>
+                                    setNewSettingNames((prev) => ({
+                                        ...prev,
+                                        [cat.category]: name,
+                                    }))
+                                }
+                                onNewSettingTypeChange={(type) =>
+                                    setNewSettingTypes((prev) => ({
+                                        ...prev,
+                                        [cat.category]: type,
+                                    }))
+                                }
+                                onAddSetting={() => addSetting(cat.category)}
+                                setAddSettingInputRef={setAddSettingInputRef}
+                                onUpdateSetting={updateSetting}
+                                onRemoveSetting={removeSetting}
+                                onDuplicateSetting={duplicateSetting}
+                                onTypeSwitch={cycleSettingType}
+                                onReorderSettings={(newSettings) =>
+                                    handleReorderSettings(
+                                        cat.category,
+                                        newSettings,
+                                    )
+                                }
+                                pasteOpen={pasteOpenFor === cat.category}
+                                pasteText={pasteText}
+                                onPasteTextChange={setPasteText}
+                                onTogglePaste={() =>
+                                    setPasteOpenFor((prev) =>
+                                        prev === cat.category
+                                            ? null
+                                            : cat.category,
+                                    )
+                                }
+                                onParsePaste={() => parsePaste(cat.category)}
+                            />
+                        )
+                    })}
+                </AnimatePresence>
+            </Reorder.Group>
+
+            {!isEmpty && (
+                <div className="flex items-center gap-2 pt-2">
+                    <input
+                        type="text"
+                        value={newCategoryName}
+                        onChange={(e) => setNewCategoryName(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault()
+                                addCategory()
+                            }
+                        }}
+                        placeholder="New category name..."
+                        className="flex-1 px-4 py-2.5 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
+                    />
+                    <button
+                        onClick={addCategory}
+                        className="px-4 py-2.5 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer flex items-center gap-2"
+                    >
+                        <Plus className="h-4 w-4" />
+                        Add
+                    </button>
+                </div>
+            )}
+        </div>
+    )
+}
+
+function CategoryCard({
+    cat,
+    isCollapsed,
+    onToggle,
+    onRemove,
+    newSettingNames,
+    newSettingTypes,
+    onNewSettingNameChange,
+    onNewSettingTypeChange,
+    onAddSetting,
+    setAddSettingInputRef,
+    onUpdateSetting,
+    onRemoveSetting,
+    onDuplicateSetting,
+    onTypeSwitch,
+    onReorderSettings,
+    pasteOpen,
+    pasteText,
+    onPasteTextChange,
+    onTogglePaste,
+    onParsePaste,
+}: {
+    cat: SettingCategory
+    isCollapsed: boolean
+    onToggle: () => void
+    onRemove: () => void
+    newSettingNames: Record<string, string>
+    newSettingTypes: Record<string, string>
+    onNewSettingNameChange: (name: string) => void
+    onNewSettingTypeChange: (type: string) => void
+    onAddSetting: () => void
+    setAddSettingInputRef: (
+        category: string,
+    ) => (el: HTMLInputElement | null) => void
+    onUpdateSetting: (
+        cat: string,
+        title: string,
+        val: string | number | boolean,
+    ) => void
+    onRemoveSetting: (cat: string, title: string) => void
+    onDuplicateSetting: (cat: string, title: string) => void
+    onTypeSwitch: (cat: string, title: string) => void
+    onReorderSettings: (newSettings: SettingItem[]) => void
+    pasteOpen: boolean
+    pasteText: string
+    onPasteTextChange: (text: string) => void
+    onTogglePaste: () => void
+    onParsePaste: () => void
+}) {
+    const dragControls = useDragControls()
+
+    return (
+        <Reorder.Item
+            value={cat}
+            dragListener={false}
+            dragControls={dragControls}
+            as="div"
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            transition={{ duration: 0.2 }}
+            className="border border-border rounded-xl overflow-hidden bg-background shadow-sm"
+        >
+            {/* Category Header */}
+            <div className="flex items-center gap-2 px-3 py-3 bg-text/3">
+                {/* Category Drag Handle */}
+                <div
+                    className="cursor-grab active:cursor-grabbing p-1 rounded text-text/30 hover:text-text/60 hover:bg-text/5 transition-colors shrink-0"
+                    onPointerDown={(e) => dragControls.start(e)}
+                >
+                    <GripVertical className="h-4 w-4" />
+                </div>
+
+                {/* Collapse Toggle */}
+                <button
+                    onClick={onToggle}
+                    className="p-1 rounded text-text/50 hover:text-text hover:bg-text/5 transition-colors cursor-pointer shrink-0"
+                >
+                    {isCollapsed ? (
+                        <ChevronDown className="h-4 w-4" />
+                    ) : (
+                        <ChevronUp className="h-4 w-4" />
+                    )}
+                </button>
+
+                {/* Title */}
+                <button
+                    onClick={onToggle}
+                    className="flex-1 text-left text-sm font-semibold text-text hover:text-text/80 transition-colors cursor-pointer flex items-center gap-2"
+                >
+                    {cat.category}
+                    <span className="text-xs text-text/40 font-normal bg-text/5 px-2 py-0.5 rounded-full">
+                        {cat.settings.length}
+                    </span>
+                </button>
+
+                {/* Remove Category */}
+                <button
+                    onClick={onRemove}
+                    className="p-1.5 rounded-md text-text/30 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer shrink-0"
+                    title="Remove category"
+                >
+                    <X className="h-4 w-4" />
+                </button>
+            </div>
+
+            <AnimatePresence initial={false}>
+                {!isCollapsed && (
+                    <motion.div
+                        initial={{ height: 0, opacity: 0 }}
+                        animate={{ height: "auto", opacity: 1 }}
+                        exit={{ height: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="overflow-hidden"
+                    >
+                        <div className="px-3 pb-4 pt-3 space-y-3">
+                            {/* Add setting row at the top */}
+                            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
+                                <div className="flex items-center gap-1 shrink-0">
+                                    {typeOptions.map((opt) => (
+                                        <button
+                                            key={opt.value}
+                                            type="button"
+                                            onClick={() =>
+                                                onNewSettingTypeChange(
+                                                    opt.value,
+                                                )
+                                            }
+                                            className={`px-2 py-1.5 rounded-md text-xs font-medium border transition-colors cursor-pointer ${
+                                                (newSettingTypes[
+                                                    cat.category
+                                                ] || "text") === opt.value
+                                                    ? "bg-primary text-white border-primary"
+                                                    : "border-border text-text/60 hover:bg-text/5"
+                                            }`}
+                                        >
+                                            {opt.label}
+                                        </button>
+                                    ))}
+                                </div>
+                                <input
+                                    ref={setAddSettingInputRef(cat.category)}
+                                    type="text"
+                                    value={newSettingNames[cat.category] || ""}
+                                    onChange={(e) =>
+                                        onNewSettingNameChange(e.target.value)
+                                    }
+                                    onKeyDown={(e) => {
+                                        if (e.key === "Enter") {
+                                            e.preventDefault()
+                                            onAddSetting()
+                                        }
+                                    }}
+                                    placeholder="Add setting..."
+                                    className="flex-1 min-w-0 px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
+                                />
+                                <button
+                                    onClick={onAddSetting}
+                                    className="p-1.5 rounded-md bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer shrink-0"
+                                    title="Add setting"
+                                >
+                                    <Plus className="h-4 w-4" />
+                                </button>
+                                <button
+                                    onClick={onTogglePaste}
+                                    className={`p-1.5 rounded-md border transition-colors cursor-pointer shrink-0 flex items-center gap-1 ${
+                                        pasteOpen
+                                            ? "border-primary text-primary bg-primary/10"
+                                            : "border-border text-text/50 hover:text-text hover:bg-text/5"
+                                    }`}
+                                    title="Paste multiple settings"
+                                >
+                                    <FileInput className="h-4 w-4" />
+                                </button>
+                            </div>
+
+                            {/* Bulk paste textarea */}
+                            <AnimatePresence>
+                                {pasteOpen && (
+                                    <motion.div
+                                        initial={{ height: 0, opacity: 0 }}
+                                        animate={{ height: "auto", opacity: 1 }}
+                                        exit={{ height: 0, opacity: 0 }}
+                                        transition={{ duration: 0.2 }}
+                                        className="overflow-hidden"
+                                    >
+                                        <div className="space-y-2 rounded-lg border border-dashed border-primary/30 bg-primary/5 p-3">
+                                            <textarea
+                                                value={pasteText}
+                                                onChange={(e) =>
+                                                    onPasteTextChange(
+                                                        e.target.value,
+                                                    )
+                                                }
+                                                onKeyDown={(e) => {
+                                                    if (
+                                                        e.key === "Enter" &&
+                                                        e.metaKey
+                                                    ) {
+                                                        e.preventDefault()
+                                                        onParsePaste()
+                                                    }
+                                                }}
+                                                placeholder={`Paste settings like:\nTexture Quality = High\nShadow Quality = Medium\nVSync = Off`}
+                                                rows={4}
+                                                className="w-full px-3 py-2 rounded-md border border-border bg-background text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors resize-y"
+                                            />
+                                            <div className="flex items-center justify-between">
+                                                <p className="text-[10px] text-text/40 leading-relaxed">
+                                                    One setting per line. Use{" "}
+                                                    <code className="text-text/60 bg-text/5 px-1 rounded">
+                                                        =
+                                                    </code>
+                                                    ,{" "}
+                                                    <code className="text-text/60 bg-text/5 px-1 rounded">
+                                                        :
+                                                    </code>
+                                                    , or{" "}
+                                                    <code className="text-text/60 bg-text/5 px-1 rounded">
+                                                        -
+                                                    </code>{" "}
+                                                    as separators. Values like
+                                                    true/false become toggles,
+                                                    numbers become numeric.
+                                                    Press{" "}
+                                                    <kbd className="text-text/60 bg-text/5 px-1 rounded">
+                                                        Cmd+Enter
+                                                    </kbd>{" "}
+                                                    to add.
+                                                </p>
+                                                <button
+                                                    onClick={onParsePaste}
+                                                    disabled={
+                                                        !pasteText.trim()
+                                                    }
+                                                    className="px-3 py-1.5 rounded-md bg-primary text-white text-xs font-semibold hover:bg-primary/90 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+                                                >
+                                                    Add {cat.settings.length > 0 ? "more" : ""}
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </motion.div>
                                 )}
-                                {setting.value ? "On" : "Off"}
-                              </button>
-                            ) : typeof setting.value === "number" ? (
-                              <input
-                                type="text"
-                                inputMode="numeric"
-                                pattern="[0-9]*"
-                                value={setting.value}
-                                onChange={(e) => {
-                                  const cleaned = e.target.value.replace(/[^0-9]/g, "")
-                                  const updated = cleaned === "" ? 0 : Number(cleaned)
-                                  updateSetting(
-                                    cat.category,
-                                    setting.title,
-                                    updated
-                                  )
-                                }}
-                                className="flex-1 min-w-0 px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
-                              />
-                            ) : (
-                              <input
-                                type="text"
-                                value={setting.value}
-                                onChange={(e) => {
-                                  updateSetting(
-                                    cat.category,
-                                    setting.title,
-                                    e.target.value
-                                  )
-                                }}
-                                className="flex-1 min-w-0 px-3 py-1.5 rounded-md border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
-                              />
+                            </AnimatePresence>
+
+                            {/* Column header — visually aligns with setting rows */}
+                            {cat.settings.length > 0 && (
+                                <div className="grid grid-cols-[28px_36px_1fr_1fr_56px] gap-2 items-center px-2 pb-1">
+                                    <div />
+                                    <div className="text-[9px] font-semibold text-text/25 text-center uppercase tracking-wider">
+                                        Type
+                                    </div>
+                                    <div className="text-[9px] font-semibold text-text/25 uppercase tracking-wider px-1">
+                                        Setting
+                                    </div>
+                                    <div className="text-[9px] font-semibold text-text/25 uppercase tracking-wider">
+                                        Value
+                                    </div>
+                                    <div />
+                                </div>
                             )}
 
-                            <div className="flex items-center gap-0.5">
-                              <button
-                                onClick={() => moveSettingUp(cat.category, setting.title)}
-                                className="p-0.5 rounded text-text/20 hover:text-text/50 hover:bg-text/5 transition-colors cursor-pointer"
-                                title="Move up"
-                              >
-                                <ChevronUp className="h-3 w-3" />
-                              </button>
-                              <button
-                                onClick={() => moveSettingDown(cat.category, setting.title)}
-                                className="p-0.5 rounded text-text/20 hover:text-text/50 hover:bg-text/5 transition-colors cursor-pointer"
-                                title="Move down"
-                              >
-                                <ChevronDown className="h-3 w-3" />
-                              </button>
-                              <button
-                                onClick={() =>
-                                  removeSetting(cat.category, setting.title)
-                                }
-                                className="p-1 rounded-md text-text/30 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer flex-shrink-0"
-                                title="Remove setting"
-                              >
-                                <X className="h-3.5 w-3.5" />
-                              </button>
-                            </div>
-                          </motion.div>
-                        ))}
-                      </AnimatePresence>
-                    </div>
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </motion.div>
-          )
-        })}
-      </AnimatePresence>
+                            {/* Settings list with drag-to-reorder */}
+                            <Reorder.Group
+                                axis="y"
+                                values={cat.settings}
+                                onReorder={onReorderSettings}
+                                as="div"
+                                className="space-y-2"
+                            >
+                                <AnimatePresence initial={false}>
+                                    {cat.settings.map((setting) => (
+                                        <SettingRow
+                                            key={setting.title}
+                                            setting={setting}
+                                            category={cat.category}
+                                            onUpdate={onUpdateSetting}
+                                            onRemove={onRemoveSetting}
+                                            onDuplicate={onDuplicateSetting}
+                                            onTypeSwitch={onTypeSwitch}
+                                        />
+                                    ))}
+                                </AnimatePresence>
+                            </Reorder.Group>
 
-      {!isEmpty && (
-        <div className="flex items-center gap-2 pt-2">
-          <input
-            type="text"
-            value={newCategoryName}
-            onChange={(e) => setNewCategoryName(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault()
-                addCategory()
-              }
-            }}
-            placeholder="New category name..."
-            className="flex-1 px-4 py-2.5 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
-          />
-          <button
-            onClick={addCategory}
-            className="px-4 py-2.5 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer flex items-center gap-2"
-          >
-            <Plus className="h-4 w-4" />
-            Add
-          </button>
-        </div>
-      )}
-    </div>
-  )
+                            {cat.settings.length === 0 && (
+                                <div className="text-center py-6 text-xs text-text/30 italic border border-dashed border-border rounded-lg">
+                                    No settings yet — add one above
+                                </div>
+                            )}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </Reorder.Item>
+    )
 }
diff --git a/components/wizard/steps/review-step.tsx b/components/wizard/steps/review-step.tsx
index 581f748..fd363d8 100644
--- a/components/wizard/steps/review-step.tsx
+++ b/components/wizard/steps/review-step.tsx
@@ -1,8 +1,22 @@
 "use client"
 
-import { useEffect, useState } from "react"
-import { motion } from "motion/react"
-import { Send, Loader2, AlertCircle, Monitor, Gauge, SlidersHorizontal, Terminal, FileText, ImagePlus, X } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import { motion, Reorder, useDragControls } from "motion/react"
+import {
+    Send,
+    Loader2,
+    AlertCircle,
+    Monitor,
+    Gauge,
+    SlidersHorizontal,
+    Terminal,
+    FileText,
+    ImagePlus,
+    X,
+    GripVertical,
+    Upload,
+    ImageIcon,
+} from "lucide-react"
 import { TiptapEditor } from "@/components/tiptap-editor"
 import type { SettingCategory } from "@/components/wizard/settings-editor"
 import type { PerformanceData } from "./performance-step"
@@ -10,341 +24,649 @@ import type { EnvironmentData } from "./environment-step"
 import { UPSCALER_TYPE_OPTIONS, FRAME_GEN_OPTIONS } from "./environment-step"
 
 export interface ReviewData {
-  hardwareSlug: string
-  hardwareName: string
-  hardwareWattHours: number | null
-  hardwareDeviceType: string | null
-  gameVersionLabel: string
-  antiCheat: {
-    antiCheatRelevant: boolean
-    antiCheatName: string
-    antiCheatStatus: "none" | "supported" | "unsupported" | "unknown"
-  }
-  performance: PerformanceData
-  settings: SettingCategory[]
-  environment: EnvironmentData
+    hardwareSlug: string
+    hardwareName: string
+    hardwareWattHours: number | null
+    hardwareDeviceType: string | null
+    gameVersionLabel: string
+    antiCheat: {
+        antiCheatRelevant: boolean
+        antiCheatName: string
+        antiCheatStatus: "none" | "supported" | "unsupported" | "unknown"
+    }
+    performance: PerformanceData
+    settings: SettingCategory[]
+    environment: EnvironmentData
 }
 
 interface ReviewStepProps {
-  data: ReviewData
-  userNotes: string
-  onUserNotesChange: (notes: string) => void
-  onSubmit: () => void
-  isSubmitting: boolean
-  error: string | null
-  screenshotFiles: File[]
-  onScreenshotFilesChange: (files: File[]) => void
-  submitPhase: "idle" | "uploading" | "saving" | "success" | "error"
+    data: ReviewData
+    userNotes: string
+    onUserNotesChange: (notes: string) => void
+    onSubmit: () => void
+    isSubmitting: boolean
+    error: string | null
+    screenshotFiles: File[]
+    onScreenshotFilesChange: (files: File[]) => void
+    submitPhase: "idle" | "uploading" | "saving" | "success" | "error"
 }
 
-function SectionHeader({ icon: Icon, label }: { icon: React.ElementType; label: string }) {
-  return (
-    <div className="flex items-center gap-2 mb-2">
-      <Icon className="h-3.5 w-3.5 text-primary" />
-      <span className="text-xs font-semibold text-text/80 uppercase tracking-wider">{label}</span>
-    </div>
-  )
+function SectionHeader({
+    icon: Icon,
+    label,
+}: {
+    icon: React.ElementType
+    label: string
+}) {
+    return (
+        <div className='flex items-center gap-2 mb-2'>
+            <Icon className='h-3.5 w-3.5 text-primary' />
+            <span className='text-xs font-semibold text-text/80 uppercase tracking-wider'>
+                {label}
+            </span>
+        </div>
+    )
 }
 
-function SummaryRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="flex items-center justify-between py-1.5 border-b border-border/50 last:border-b-0">
-      <span className="text-xs text-text/50">{label}</span>
-      <span className="text-xs text-text font-medium">{value}</span>
-    </div>
-  )
+function SummaryRow({
+    label,
+    value,
+}: {
+    label: string
+    value: React.ReactNode
+}) {
+    return (
+        <div className='flex items-center justify-between py-1.5 border-b border-border/50 last:border-b-0'>
+            <span className='text-xs text-text/50'>{label}</span>
+            <span className='text-xs text-text font-medium'>{value}</span>
+        </div>
+    )
 }
 
 function formatNumber(val: number | undefined): string {
-  if (val === undefined || val === null) return "Not set"
-  return String(val)
+    if (val === undefined || val === null) return "Not set"
+    return String(val)
+}
+
+function formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function ScreenshotCard({
+    file,
+    url,
+    index,
+    onRemove,
+}: {
+    file: File
+    url: string
+    index: number
+    onRemove: () => void
+}) {
+    const dragControls = useDragControls()
+
+    return (
+        <Reorder.Item
+            value={file}
+            dragListener={false}
+            dragControls={dragControls}
+            as='div'
+            className='group relative rounded-xl border border-border bg-text/3 overflow-hidden shadow-sm hover:shadow-md hover:border-primary/30 transition-all'
+            whileDrag={{
+                scale: 1.02,
+                boxShadow: "0 12px 40px rgba(0,0,0,0.3)",
+                zIndex: 20,
+            }}
+        >
+            {/* Image */}
+            <div className='relative aspect-video'>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                    src={url}
+                    alt={file.name}
+                    className='w-full h-full object-cover'
+                    draggable={false}
+                />
+
+                {/* Overlay gradient */}
+                <div className='absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity' />
+
+                {/* Drag handle (top-left) */}
+                <div
+                    className='absolute top-2 left-2 p-1.5 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-black/70 backdrop-blur-sm cursor-grab active:cursor-grabbing transition-colors opacity-0 group-hover:opacity-100'
+                    onPointerDown={(e) => dragControls.start(e)}
+                >
+                    <GripVertical className='h-3.5 w-3.5' />
+                </div>
+
+                {/* Remove button (top-right) */}
+                <button
+                    type='button'
+                    onClick={onRemove}
+                    className='absolute top-2 right-2 p-1.5 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-red-500/80 backdrop-blur-sm transition-colors opacity-0 group-hover:opacity-100 cursor-pointer'
+                    title='Remove screenshot'
+                >
+                    <X className='h-3.5 w-3.5' />
+                </button>
+
+                {/* Index badge */}
+                <div className='absolute bottom-2 left-2 px-2 py-0.5 rounded-md bg-black/50 backdrop-blur-sm text-[10px] font-medium text-white/90 opacity-0 group-hover:opacity-100 transition-opacity'>
+                    #{index + 1}
+                </div>
+
+                {/* File info (bottom-right) */}
+                <div className='absolute bottom-2 right-2 px-2 py-0.5 rounded-md bg-black/50 backdrop-blur-sm text-[10px] text-white/70 opacity-0 group-hover:opacity-100 transition-opacity truncate max-w-30'>
+                    {formatFileSize(file.size)}
+                </div>
+            </div>
+
+            {/* Filename bar */}
+            <div className='px-3 py-2 border-t border-border/50'>
+                <p
+                    className='text-[11px] text-text/60 truncate'
+                    title={file.name}
+                >
+                    {file.name}
+                </p>
+            </div>
+        </Reorder.Item>
+    )
 }
 
 export function ReviewStep({
-  data,
-  userNotes,
-  onUserNotesChange,
-  onSubmit,
-  isSubmitting,
-  error,
-  screenshotFiles,
-  onScreenshotFilesChange,
-  submitPhase,
+    data,
+    userNotes,
+    onUserNotesChange,
+    onSubmit,
+    isSubmitting,
+    error,
+    screenshotFiles,
+    onScreenshotFilesChange,
+    submitPhase,
 }: ReviewStepProps) {
-  const { hardwareName, gameVersionLabel, antiCheat, performance, environment, settings } = data
+    const {
+        hardwareName,
+        gameVersionLabel,
+        antiCheat,
+        performance,
+        environment,
+        settings,
+    } = data
 
-  const [previews, setPreviews] = useState<{ file: File; url: string }[]>([])
+    // Stable URL mapping so reordering doesn't flicker
+    const urlMapRef = useRef(new Map<File, string>())
+    const [previewUrls, setPreviewUrls] = useState<string[]>([])
+    const [isDragOver, setIsDragOver] = useState(false)
 
-  useEffect(() => {
-    if (!screenshotFiles?.length) {
-      setPreviews([])
-      return
+    useEffect(() => {
+        const map = urlMapRef.current
+
+        // Create URLs for new files
+        for (const file of screenshotFiles) {
+            if (!map.has(file)) {
+                map.set(file, URL.createObjectURL(file))
+            }
+        }
+
+        // Revoke URLs for removed files
+        for (const [file, url] of Array.from(map.entries())) {
+            if (!screenshotFiles.includes(file)) {
+                URL.revokeObjectURL(url)
+                map.delete(file)
+            }
+        }
+
+        setPreviewUrls(screenshotFiles.map((f) => map.get(f)!))
+    }, [screenshotFiles])
+
+    useEffect(() => {
+        const map = urlMapRef.current
+        return () => {
+            for (const url of map.values()) {
+                URL.revokeObjectURL(url)
+            }
+            map.clear()
+        }
+    }, [])
+
+    const handleFiles = (files: FileList | null) => {
+        if (!files) return
+        const incoming = Array.from(files).filter((f) =>
+            /image\/(jpeg|png|webp)/.test(f.type),
+        )
+        const current = screenshotFiles || []
+        const combined = [...current, ...incoming].slice(0, 2)
+        onScreenshotFilesChange?.(combined)
     }
-    const next = screenshotFiles.map((file) => ({ file, url: URL.createObjectURL(file) }))
-    setPreviews(next)
-    return () => {
-      next.forEach((p) => URL.revokeObjectURL(p.url))
+
+    const removeFile = (file: File) => {
+        const newFiles = (screenshotFiles || []).filter((f) => f !== file)
+        onScreenshotFilesChange?.(newFiles)
     }
-  }, [screenshotFiles])
 
-  const upscalerLabel = (() => {
-    if (!data.environment.upscalerType || data.environment.upscalerType === "none") return "None"
-    const opt = UPSCALER_TYPE_OPTIONS.find(o => o.value === data.environment.upscalerType)
-    const base = opt?.label ?? data.environment.upscalerType
-    return data.environment.upscalerVersion ? `${base} ${data.environment.upscalerVersion}` : base
-  })()
+    const handleReorder = (newFiles: File[]) => {
+        onScreenshotFilesChange(newFiles)
+    }
 
-  const frameGenLabel = (() => {
-    if (!environment.frameGenMethod || environment.frameGenMethod === "none") return "None"
-    const opt = FRAME_GEN_OPTIONS.find(o => o.value === environment.frameGenMethod)
-    return opt?.label ?? environment.frameGenMethod
-  })()
+    const upscalerLabel = (() => {
+        if (
+            !data.environment.upscalerType ||
+            data.environment.upscalerType === "none"
+        )
+            return "None"
+        const opt = UPSCALER_TYPE_OPTIONS.find(
+            (o) => o.value === data.environment.upscalerType,
+        )
+        const base = opt?.label ?? data.environment.upscalerType
+        return data.environment.upscalerVersion
+            ? `${base} ${data.environment.upscalerVersion}`
+            : base
+    })()
 
-  return (
-    <div className="space-y-6">
-      <div className="flex items-start gap-3">
-        <FileText className="h-4 w-4 text-primary mt-0.5 flex-shrink-0" />
-        <div>
-          <h3 className="text-sm font-semibold text-text">Review & Submit</h3>
-          <p className="text-xs text-text/60 mt-1">
-            Review your submission details below. Add any additional notes and click Submit when ready.
-          </p>
-        </div>
-      </div>
+    const frameGenLabel = (() => {
+        if (
+            !environment.frameGenMethod ||
+            environment.frameGenMethod === "none"
+        )
+            return "None"
+        const opt = FRAME_GEN_OPTIONS.find(
+            (o) => o.value === environment.frameGenMethod,
+        )
+        return opt?.label ?? environment.frameGenMethod
+    })()
 
-      {/* Summary Cards */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        {/* Setup: Hardware + Version + Anti-Cheat */}
-        <div className="rounded-lg border border-border bg-text/5 p-4">
-          <SectionHeader icon={Monitor} label="Setup" />
-          <SummaryRow label="Device" value={hardwareName || data.hardwareSlug || "Not selected"} />
-          <SummaryRow label="Game Version" value={gameVersionLabel} />
-          {antiCheat.antiCheatRelevant && (
-            <>
-              <SummaryRow label="Anti-Cheat" value={antiCheat.antiCheatName || "Unknown"} />
-              <SummaryRow label="Anti-Cheat Status" value={
-                antiCheat.antiCheatStatus === "supported" ? "Supported" :
-                antiCheat.antiCheatStatus === "unsupported" ? "Unsupported" :
-                antiCheat.antiCheatStatus === "unknown" ? "Unknown" : "None"
-              } />
-            </>
-          )}
-          {!antiCheat.antiCheatRelevant && (
-            <SummaryRow label="Anti-Cheat" value="None" />
-          )}
-        </div>
+    const canUploadMore =
+        (!screenshotFiles || screenshotFiles.length < 2) &&
+        submitPhase !== "uploading" &&
+        submitPhase !== "saving"
 
-        {/* Performance */}
-        <div className="rounded-lg border border-border bg-text/5 p-4">
-          <SectionHeader icon={Gauge} label="Performance" />
-          <SummaryRow label="FPS Average" value={formatNumber(performance.fpsAvg)} />
-          <SummaryRow label="1% Low FPS" value={formatNumber(performance.fpsOnePercentLow)} />
-          <SummaryRow label="FPS Low" value={formatNumber(performance.fpsLow)} />
-          <SummaryRow label="FPS High" value={formatNumber(performance.fpsHigh)} />
-          <SummaryRow label="Load Time SSD" value={formatNumber(performance.loadTimeSsd)} />
-          <SummaryRow label="Load Time SD" value={formatNumber(performance.loadTimeSd)} />
-          <SummaryRow label="TDP (Watts)" value={formatNumber(performance.tdpWatts)} />
-          <SummaryRow
-            label="Est. Battery"
-            value={(() => {
-              const wh = data.hardwareWattHours
-              const tdp = performance.tdpWatts
-              if (wh && tdp && tdp > 0 && data.hardwareDeviceType === "handheld") {
-                const hours = wh / tdp
-                const mins = Math.round(hours * 60)
-                return `~${hours.toFixed(1)}h (${mins} min)`
-              }
-              return "Not available — requires TDP and a handheld device"
-            })()}
-          />
-        </div>
-
-        {/* Environment */}
-        <div className="rounded-lg border border-border bg-text/5 p-4">
-          <SectionHeader icon={Terminal} label="Environment" />
-          <SummaryRow label="Proton Version" value={environment.protonVersion || "Not set"} />
-          <SummaryRow label="OS Version" value={environment.osVersion || "Not set"} />
-          <SummaryRow label="Upscaler" value={upscalerLabel} />
-          <SummaryRow label="Frame Gen" value={frameGenLabel} />
-          <SummaryRow label="Custom System" value={environment.customSystem ? "Yes" : "No"} />
-          {environment.launchOptions && (
-            <SummaryRow
-              label="Launch Options"
-              value={
-                <span className="font-mono text-[10px] truncate max-w-[160px] block" title={environment.launchOptions}>
-                  {environment.launchOptions}
-                </span>
-              }
-            />
-          )}
-          {environment.youtubeVideoId && /^[a-zA-Z0-9_-]{11}$/.test(environment.youtubeVideoId) ? (
-            <div className="mt-2">
-              <span className="text-xs text-text/50">YouTube Video</span>
-              <div className="mt-1 relative" style={{ paddingBottom: "56.25%" }}>
-                <iframe
-                  src={`https://www.youtube-nocookie.com/embed/${environment.youtubeVideoId}`}
-                  className="absolute inset-0 w-full h-full rounded-md"
-                  allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
-                  sandbox="allow-scripts allow-same-origin allow-presentation"
-                  allowFullScreen
-                  loading="lazy"
-                  title="Review: Gameplay Video"
-                />
-              </div>
-            </div>
-          ) : (
-            <SummaryRow label="YouTube Video" value="Not provided" />
-          )}
-        </div>
-
-        {/* Settings */}
-        <div className="rounded-lg border border-border bg-text/5 p-4">
-          <SectionHeader icon={SlidersHorizontal} label="Settings" />
-          {settings.length === 0 ? (
-            <p className="text-xs text-text/40 py-1">No settings configured</p>
-          ) : (
-            <div className="space-y-2 max-h-40 overflow-y-auto">
-              {settings.map((cat) => (
-                <div key={cat.category}>
-                  <p className="text-xs font-medium text-text/70">{cat.category}</p>
-                  <div className="flex flex-wrap gap-1 mt-0.5">
-                    {cat.settings.map((s) => (
-                      <span
-                        key={s.title}
-                        className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-text/10 text-text/60"
-                      >
-                        {s.title}: {String(s.value)}
-                      </span>
-                    ))}
-                  </div>
+    return (
+        <div className='space-y-6'>
+            <div className='flex items-start gap-3'>
+                <FileText className='h-4 w-4 text-primary mt-0.5 shrink-0' />
+                <div>
+                    <h3 className='text-sm font-semibold text-text'>
+                        Review & Submit
+                    </h3>
+                    <p className='text-xs text-text/60 mt-1'>
+                        Review your submission details below. Add any additional
+                        notes and click Submit when ready.
+                    </p>
                 </div>
-              ))}
             </div>
-          )}
-        </div>
-      </div>
 
-      {/* Screenshots */}
-      <div className="space-y-2">
-        <label className="text-xs font-medium text-text/60">Screenshots</label>
-        {data.settings.length === 0 ? (
-          <div className="rounded-lg border border-border bg-text/5 p-4">
-            <p className="text-xs text-text/50">Add game settings to enable screenshot upload</p>
-          </div>
-        ) : (
-          <div className="rounded-lg border border-border bg-text/5 p-4 space-y-3">
-            {(submitPhase === "uploading" || submitPhase === "saving") && (
-              <div className="flex items-center gap-2 text-xs text-text/60">
-                <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                <span>Uploading...</span>
-              </div>
-            )}
-
-            {previews.length > 0 && (
-              <div className="flex flex-wrap gap-2">
-                {previews.map((preview) => (
-                  <div
-                    key={preview.url}
-                    className="relative w-24 h-24 sm:w-28 sm:h-28 rounded-lg overflow-hidden border border-border bg-text/10"
-                  >
-                    <img
-                      src={preview.url}
-                      alt={preview.file.name}
-                      className="w-full h-full object-cover"
+            {/* Summary Cards */}
+            <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
+                {/* Setup: Hardware + Version + Anti-Cheat */}
+                <div className='rounded-lg border border-border bg-text/5 p-4'>
+                    <SectionHeader
+                        icon={Monitor}
+                        label='Setup'
                     />
-                    <button
-                      type="button"
-                      onClick={() => {
-                        const newFiles = (screenshotFiles || []).filter((f) => f !== preview.file)
-                        onScreenshotFilesChange?.(newFiles)
-                      }}
-                      className="absolute top-1 right-1 p-0.5 rounded bg-black/60 text-white hover:bg-black/80 transition-colors cursor-pointer"
-                    >
-                      <X className="h-3 w-3" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
+                    <SummaryRow
+                        label='Device'
+                        value={
+                            hardwareName || data.hardwareSlug || "Not selected"
+                        }
+                    />
+                    <SummaryRow
+                        label='Game Version'
+                        value={gameVersionLabel}
+                    />
+                    {antiCheat.antiCheatRelevant && (
+                        <>
+                            <SummaryRow
+                                label='Anti-Cheat'
+                                value={antiCheat.antiCheatName || "Unknown"}
+                            />
+                            <SummaryRow
+                                label='Anti-Cheat Status'
+                                value={
+                                    antiCheat.antiCheatStatus === "supported"
+                                        ? "Supported"
+                                        : antiCheat.antiCheatStatus ===
+                                            "unsupported"
+                                          ? "Unsupported"
+                                          : antiCheat.antiCheatStatus ===
+                                              "unknown"
+                                            ? "Unknown"
+                                            : "None"
+                                }
+                            />
+                        </>
+                    )}
+                    {!antiCheat.antiCheatRelevant && (
+                        <SummaryRow
+                            label='Anti-Cheat'
+                            value='None'
+                        />
+                    )}
+                </div>
 
-            {(!screenshotFiles || screenshotFiles.length < 2) && submitPhase !== "uploading" && submitPhase !== "saving" && (
-              <label className="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-dashed border-border bg-text/5 hover:bg-text/10 transition-colors cursor-pointer">
-                <ImagePlus className="h-3.5 w-3.5 text-primary" />
-                <span className="text-xs text-text/70">
-                  {(!screenshotFiles || screenshotFiles.length === 0) ? "Add screenshots" : "Add another screenshot"}
-                </span>
-                <input
-                  type="file"
-                  accept="image/jpeg,image/png,image/webp"
-                  multiple
-                  onChange={(e) => {
-                    const files = Array.from(e.target.files || []).filter((f) =>
-                      /image\/(jpeg|png|webp)/.test(f.type)
-                    )
-                    const current = screenshotFiles || []
-                    const combined = [...current, ...files].slice(0, 2)
-                    onScreenshotFilesChange?.(combined)
-                    e.target.value = ""
-                  }}
-                  className="sr-only"
+                {/* Performance */}
+                <div className='rounded-lg border border-border bg-text/5 p-4'>
+                    <SectionHeader
+                        icon={Gauge}
+                        label='Performance'
+                    />
+                    <SummaryRow
+                        label='FPS Average'
+                        value={formatNumber(performance.fpsAvg)}
+                    />
+                    <SummaryRow
+                        label='1% Low FPS'
+                        value={formatNumber(performance.fpsOnePercentLow)}
+                    />
+                    <SummaryRow
+                        label='FPS Low'
+                        value={formatNumber(performance.fpsLow)}
+                    />
+                    <SummaryRow
+                        label='FPS High'
+                        value={formatNumber(performance.fpsHigh)}
+                    />
+                    <SummaryRow
+                        label='Load Time SSD'
+                        value={formatNumber(performance.loadTimeSsd)}
+                    />
+                    <SummaryRow
+                        label='Load Time SD'
+                        value={formatNumber(performance.loadTimeSd)}
+                    />
+                    <SummaryRow
+                        label='TDP (Watts)'
+                        value={formatNumber(performance.tdpWatts)}
+                    />
+                    <SummaryRow
+                        label='Est. Battery'
+                        value={(() => {
+                            const wh = data.hardwareWattHours
+                            const tdp = performance.tdpWatts
+                            if (
+                                wh &&
+                                tdp &&
+                                tdp > 0 &&
+                                data.hardwareDeviceType === "handheld"
+                            ) {
+                                const hours = wh / tdp
+                                const mins = Math.round(hours * 60)
+                                return `~${hours.toFixed(1)}h (${mins} min)`
+                            }
+                            return "Not available — requires TDP and a handheld device"
+                        })()}
+                    />
+                </div>
+
+                {/* Environment */}
+                <div className='rounded-lg border border-border bg-text/5 p-4'>
+                    <SectionHeader
+                        icon={Terminal}
+                        label='Environment'
+                    />
+                    <SummaryRow
+                        label='Proton Version'
+                        value={environment.protonVersion || "Not set"}
+                    />
+                    <SummaryRow
+                        label='OS Version'
+                        value={environment.osVersion || "Not set"}
+                    />
+                    <SummaryRow
+                        label='Upscaler'
+                        value={upscalerLabel}
+                    />
+                    <SummaryRow
+                        label='Frame Gen'
+                        value={frameGenLabel}
+                    />
+                    <SummaryRow
+                        label='Custom System'
+                        value={environment.customSystem ? "Yes" : "No"}
+                    />
+                    {environment.launchOptions && (
+                        <SummaryRow
+                            label='Launch Options'
+                            value={
+                                <span
+                                    className='font-mono text-[10px] truncate max-w-40 block'
+                                    title={environment.launchOptions}
+                                >
+                                    {environment.launchOptions}
+                                </span>
+                            }
+                        />
+                    )}
+                    {environment.youtubeVideoId &&
+                    /^[a-zA-Z0-9_-]{11}$/.test(environment.youtubeVideoId) ? (
+                        <div className='mt-2'>
+                            <span className='text-xs text-text/50'>
+                                YouTube Video
+                            </span>
+                            <div
+                                className='mt-1 relative'
+                                style={{ paddingBottom: "56.25%" }}
+                            >
+                                <iframe
+                                    src={`https://www.youtube-nocookie.com/embed/${environment.youtubeVideoId}`}
+                                    className='absolute inset-0 w-full h-full rounded-md'
+                                    allow='accelerometer; autoplay; encrypted-media; picture-in-picture'
+                                    sandbox='allow-scripts allow-same-origin allow-presentation'
+                                    allowFullScreen
+                                    loading='lazy'
+                                    title='Review: Gameplay Video'
+                                />
+                            </div>
+                        </div>
+                    ) : (
+                        <SummaryRow
+                            label='YouTube Video'
+                            value='Not provided'
+                        />
+                    )}
+                </div>
+
+                {/* Settings */}
+                <div className='rounded-lg border border-border bg-text/5 p-4'>
+                    <SectionHeader
+                        icon={SlidersHorizontal}
+                        label='Settings'
+                    />
+                    {settings.length === 0 ? (
+                        <p className='text-xs text-text/40 py-1'>
+                            No settings configured
+                        </p>
+                    ) : (
+                        <div className='space-y-2 max-h-40 overflow-y-auto'>
+                            {settings.map((cat) => (
+                                <div key={cat.category}>
+                                    <p className='text-xs font-medium text-text/70'>
+                                        {cat.category}
+                                    </p>
+                                    <div className='flex flex-wrap gap-1 mt-0.5'>
+                                        {cat.settings.map((s) => (
+                                            <span
+                                                key={s.title}
+                                                className='inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-text/10 text-text/60'
+                                            >
+                                                {s.title}: {String(s.value)}
+                                            </span>
+                                        ))}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Screenshots */}
+            <div className='space-y-3 overflow-clip'>
+                <div className='flex items-center justify-between'>
+                    <label className='text-xs font-medium text-text/60 flex items-center gap-1.5'>
+                        <ImageIcon className='h-3.5 w-3.5 text-text/40' />
+                        Screenshots
+                        <span className='text-[10px] text-text/30 font-normal'>
+                            ({screenshotFiles?.length ?? 0}/2)
+                        </span>
+                    </label>
+                    {(submitPhase === "uploading" ||
+                        submitPhase === "saving") && (
+                        <div className='flex items-center gap-2 text-xs text-text/60'>
+                            <Loader2 className='h-3.5 w-3.5 animate-spin' />
+                            <span>Uploading...</span>
+                        </div>
+                    )}
+                </div>
+
+                {data.settings.length === 0 ? (
+                    <div className='rounded-lg border border-border bg-text/5 p-4'>
+                        <p className='text-xs text-text/50'>
+                            Add game settings to enable screenshot upload
+                        </p>
+                    </div>
+                ) : (
+                    <div className='space-y-3'>
+                        {/* Screenshot grid with drag-to-reorder */}
+                        {screenshotFiles && screenshotFiles.length > 0 && (
+                            <Reorder.Group
+                                axis='x'
+                                values={screenshotFiles}
+                                onReorder={handleReorder}
+                                as='div'
+                                className='grid grid-cols-2 gap-3'
+                            >
+                                {screenshotFiles.map((file, idx) => (
+                                    <ScreenshotCard
+                                        key={
+                                            file.name +
+                                            file.size +
+                                            file.lastModified
+                                        }
+                                        file={file}
+                                        url={previewUrls[idx] || ""}
+                                        index={idx}
+                                        onRemove={() => removeFile(file)}
+                                    />
+                                ))}
+                            </Reorder.Group>
+                        )}
+
+                        {/* Upload area */}
+                        {canUploadMore ? (
+                            <label
+                                className={`relative flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed p-6 transition-all cursor-pointer ${
+                                    isDragOver
+                                        ? "border-primary bg-primary/5"
+                                        : "border-border bg-text/2 hover:bg-text/5 hover:border-text/20"
+                                }`}
+                                onDragOver={(e) => {
+                                    e.preventDefault()
+                                    setIsDragOver(true)
+                                }}
+                                onDragLeave={() => setIsDragOver(false)}
+                                onDrop={(e) => {
+                                    e.preventDefault()
+                                    setIsDragOver(false)
+                                    handleFiles(e.dataTransfer.files)
+                                }}
+                            >
+                                <div
+                                    className={`p-2.5 rounded-full transition-colors ${
+                                        isDragOver
+                                            ? "bg-primary/15 text-primary"
+                                            : "bg-text/5 text-text/30"
+                                    }`}
+                                >
+                                    <Upload
+                                        className={`h-5 w-5 transition-transform ${
+                                            isDragOver ? "scale-110" : ""
+                                        }`}
+                                    />
+                                </div>
+                                <div className='text-center space-y-0.5'>
+                                    <p className='text-xs text-text/60 font-medium'>
+                                        {isDragOver
+                                            ? "Drop screenshots here"
+                                            : screenshotFiles &&
+                                                screenshotFiles.length > 0
+                                              ? "Add another screenshot"
+                                              : "Add screenshots"}
+                                    </p>
+                                    <p className='text-[10px] text-text/30'>
+                                        JPG, PNG, WebP · Max 2 files · Drag to
+                                        upload
+                                    </p>
+                                </div>
+                                <input
+                                    type='file'
+                                    accept='image/jpeg,image/png,image/webp'
+                                    multiple
+                                    onChange={(e) => {
+                                        handleFiles(e.target.files)
+                                        e.target.value = ""
+                                    }}
+                                    className='sr-only'
+                                />
+                            </label>
+                        ) : (
+                            <div className='flex items-center justify-center gap-2 rounded-xl border border-border bg-text/2 p-4 text-xs text-text/40'>
+                                <ImagePlus className='h-4 w-4 text-text/20' />
+                                Maximum 2 screenshots reached
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {/* User Notes */}
+            <div className='space-y-2'>
+                <label className='text-xs font-medium text-text/60'>
+                    Additional Notes
+                </label>
+                <TiptapEditor
+                    content={userNotes}
+                    onChange={(json) => onUserNotesChange(JSON.stringify(json))}
+                    placeholder='Add any extra details about your experience...'
                 />
-              </label>
+            </div>
+
+            {/* Error */}
+            {error && (
+                <motion.div
+                    initial={{ opacity: 0, y: -4 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className='flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3'
+                >
+                    <AlertCircle className='h-4 w-4 text-red-400 shrink-0' />
+                    <p className='text-xs text-red-400'>{error}</p>
+                </motion.div>
             )}
 
-            {screenshotFiles && screenshotFiles.length >= 2 && (
-              <p className="text-xs text-text/50">Maximum 2 screenshots reached</p>
-            )}
-
-
-          </div>
-        )}
-      </div>
-
-      {/* User Notes */}
-      <div className="space-y-2">
-        <label className="text-xs font-medium text-text/60">Additional Notes</label>
-        <TiptapEditor
-          content={userNotes}
-          onChange={(json) => onUserNotesChange(JSON.stringify(json))}
-          placeholder="Add any extra details about your experience..."
-        />
-      </div>
-
-      {/* Error */}
-      {error && (
-        <motion.div
-          initial={{ opacity: 0, y: -4 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="flex items-center gap-2 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3"
-        >
-          <AlertCircle className="h-4 w-4 text-red-400 flex-shrink-0" />
-          <p className="text-xs text-red-400">{error}</p>
-        </motion.div>
-      )}
-
-      {/* Submit Button */}
-      <button
-        type="button"
-        onClick={onSubmit}
-        disabled={isSubmitting}
-        className="w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
-      >
-        {isSubmitting ? (
-          <>
-            <Loader2 className="h-4 w-4 animate-spin" />
-            {submitPhase === "uploading"
-              ? "Uploading screenshots..."
-              : submitPhase === "saving"
-                ? "Saving entry..."
-                : "Processing..."}
-          </>
-        ) : (
-          <>
-            <Send className="h-4 w-4" />
-            Submit Entry
-          </>
-        )}
-      </button>
-    </div>
-  )
+            {/* Submit Button */}
+            <button
+                type='button'
+                onClick={onSubmit}
+                disabled={isSubmitting}
+                className='w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer'
+            >
+                {isSubmitting ? (
+                    <>
+                        <Loader2 className='h-4 w-4 animate-spin' />
+                        {submitPhase === "uploading"
+                            ? "Uploading screenshots..."
+                            : submitPhase === "saving"
+                              ? "Saving entry..."
+                              : "Processing..."}
+                    </>
+                ) : (
+                    <>
+                        <Send className='h-4 w-4' />
+                        Submit Entry
+                    </>
+                )}
+            </button>
+        </div>
+    )
 }