add collected page and move the checkbox

src/components/CardItem.tsx

@@ -7,18 +7,6 @@ import SetBadge from './SetBadge';
 export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; checked: boolean; onToggle: (id:string)=>void }) {
   return (
     <div className="group relative overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm hover:shadow-md transition">
-      <div className="absolute right-2 top-2 z-10">
-        <label className="inline-flex items-center gap-2 text-xs bg-white/90 px-2 py-1 rounded shadow border border-slate-200">
-          <input
-            type="checkbox"
-            checked={checked}
-            onChange={() => onToggle(card.id)}
-            className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
-            aria-label={`Mark ${card.name} #${card.number} as collected`}
-          />
-          <span>Collected</span>
-        </label>
-      </div>
       <div className="relative aspect-[3/4] w-full bg-slate-100">
         <Image
           src={card.images.small}
@@ -34,6 +22,18 @@ export default function CardItem({ card, checked, onToggle }:{ card: TcgCard; ch
           {card.rarity ? <span className="text-[0.7rem] rounded bg-slate-100 px-2 py-0.5 text-slate-600">{card.rarity}</span> : null}
         </div>
         <SetBadge set={card.set} />
+        <div className="pt-1">
+          <label className="inline-flex items-center gap-2 text-xs bg-white px-2 py-1 rounded border border-slate-200">
+            <input
+              type="checkbox"
+              checked={checked}
+              onChange={() => onToggle(card.id)}
+              className="h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-500"
+              aria-label={`Mark ${card.name} #${card.number} as collected`}
+            />
+            <span>Collected</span>
+          </label>
+        </div>
       </div>
     </div>
   );