feat: add dedicated TopUpResult page for payment return flow

Replace toast-based payment return with animated result page showing
pending/success/failed/timeout states. Extract shared Spinner,
AnimatedCheckmark and AnimatedCrossmark components. Add sessionStorage
persistence with validation and TTL for cross-redirect payment data.
Unify ProtectedRoute with withLayout prop, add aria-live accessibility.

src/components/ui/AnimatedCheckmark.tsx

@@ -0,0 +1,37 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export function AnimatedCheckmark({ className }: { className?: string }) {
+  return (
+    <motion.div
+      initial={{ scale: 0 }}
+      animate={{ scale: 1 }}
+      transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
+      className={cn(
+        'flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10',
+        className,
+      )}
+    >
+      <motion.svg
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.4, delay: 0.3 }}
+        className="h-10 w-10 text-success-500"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2.5}
+        aria-hidden="true"
+      >
+        <motion.path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M5 13l4 4L19 7"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 0.4, delay: 0.3 }}
+        />
+      </motion.svg>
+    </motion.div>
+  );
+}

src/components/ui/AnimatedCrossmark.tsx

@@ -0,0 +1,37 @@
+import { motion } from 'framer-motion';
+import { cn } from '@/lib/utils';
+
+export function AnimatedCrossmark({ className }: { className?: string }) {
+  return (
+    <motion.div
+      initial={{ scale: 0 }}
+      animate={{ scale: 1 }}
+      transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
+      className={cn(
+        'flex h-20 w-20 items-center justify-center rounded-full bg-error-500/10',
+        className,
+      )}
+    >
+      <motion.svg
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.3, delay: 0.3 }}
+        className="h-10 w-10 text-error-400"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        strokeWidth={2}
+        aria-hidden="true"
+      >
+        <motion.path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M6 18L18 6M6 6l12 12"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 0.3, delay: 0.3 }}
+        />
+      </motion.svg>
+    </motion.div>
+  );
+}

src/components/ui/Spinner.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
+
+export function Spinner({ className }: { className?: string }) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      role="status"
+      aria-label={t('common.loading')}
+      className={cn(
+        'h-8 w-8 animate-spin rounded-full border-2 border-dark-600 border-t-accent-500',
+        className,
+      )}
+    />
+  );
+}