fixed browse and tailwindcss style

resources/js/components/upload/UploadProgress.jsx

@@ -51,20 +51,13 @@ export default function UploadProgress({
     Error: 'border-red-400/35 bg-red-400/15 text-red-100',
   }
 
-  const statusColors = {
-    Idle: { borderColor: 'rgba(148,163,184,0.35)', backgroundColor: 'rgba(148,163,184,0.15)', color: 'rgb(226,232,240)' },
-    Uploading: { borderColor: 'rgba(56,189,248,0.35)', backgroundColor: 'rgba(56,189,248,0.15)', color: 'rgb(224,242,254)' },
-    Processing: { borderColor: 'rgba(251,191,36,0.35)', backgroundColor: 'rgba(251,191,36,0.15)', color: 'rgb(254,243,199)' },
-    Ready: { borderColor: 'rgba(52,211,153,0.35)', backgroundColor: 'rgba(52,211,153,0.15)', color: 'rgb(209,250,229)' },
-    Error: { borderColor: 'rgba(248,113,113,0.35)', backgroundColor: 'rgba(248,113,113,0.15)', color: 'rgb(254,226,226)' },
-  }
-
   const quickTransition = prefersReducedMotion
     ? { duration: 0 }
     : { duration: 0.2, ease: 'easeOut' }
 
   const stepLabels = ['Preload', 'Details', 'Publish']
   const stepIndex = progress >= 100 ? 2 : progress >= 34 ? 1 : 0
+  const progressValue = Math.max(0, Math.min(100, Number(progress) || 0))
 
   return (
     <header className="rounded-xl border border-white/50 bg-gradient-to-br from-slate-900/80 to-slate-900/50 p-5 shadow-[0_12px_40px_rgba(0,0,0,0.35)] sm:p-6">
@@ -75,13 +68,11 @@ export default function UploadProgress({
           <p className="mt-1 text-sm text-white/65">{description}</p>
         </div>
 
-        <motion.span
+        <span
           className={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium ${statusTheme[resolvedStatus] || statusTheme.Idle}`}
-          animate={statusColors[resolvedStatus] || statusColors.Idle}
-          transition={quickTransition}
         >
           {resolvedStatus}
-        </motion.span>
+        </span>
       </div>
 
       <div className="mt-4 flex items-center gap-2 overflow-x-auto">
@@ -100,16 +91,14 @@ export default function UploadProgress({
 
       <div className="mt-4">
         <div className="h-2 overflow-hidden rounded-full bg-white/10">
-          <div
-            className="h-full rounded-full"
-            style={{
-              width: `${Math.max(0, Math.min(100, progress))}%`,
-              background: 'linear-gradient(90deg,#38bdf8,#06b6d4,#34d399)',
-              transition: prefersReducedMotion ? 'none' : 'width 200ms ease-out',
-            }}
+          <motion.div
+            className="h-full origin-left rounded-full bg-gradient-to-r from-sky-400/90 via-cyan-300/90 to-emerald-300/90"
+            initial={false}
+            animate={{ scaleX: progressValue / 100 }}
+            transition={quickTransition}
           />
         </div>
-        <p className="mt-2 text-right text-xs text-white/55">{Math.round(progress)}%</p>
+        <p className="mt-2 text-right text-xs text-white/55">{Math.round(progressValue)}%</p>
       </div>
 
       <AnimatePresence initial={false}>