Restore toolbar background to bg-nebula; add toolbar backdrop blur

resources/js/components/upload/UploadStepper.jsx

@@ -5,7 +5,7 @@ export default function UploadStepper({ steps = [], activeStep = 1, highestUnloc
 
   return (
     <nav aria-label="Upload steps" className="rounded-xl border border-white/50 bg-slate-900/70 px-3 py-3 sm:px-4">
-      <ol className="flex flex-nowrap items-center gap-2 overflow-x-auto sm:gap-3">
+      <ol className="flex flex-nowrap items-center gap-3 overflow-x-auto sm:gap-4">
         {steps.map((step, index) => {
           const number = index + 1
           const isActive = number === safeActive
@@ -29,21 +29,21 @@ export default function UploadStepper({ steps = [], activeStep = 1, highestUnloc
               : 'border-white/20 bg-white/5 text-white/80'
 
           return (
-            <li key={step.key} className="flex min-w-0 items-center gap-2">
+            <li key={step.key} className="flex-shrink-0 flex items-center gap-3">
               <button
                 type="button"
                 onClick={() => canNavigate && onStepClick?.(number)}
                 disabled={isLocked}
                 aria-disabled={isLocked ? 'true' : 'false'}
                 aria-current={isActive ? 'step' : undefined}
-                className={`${baseBtn} ${stateClass}`}
+                className={`${baseBtn} ${stateClass} flex-shrink-0`}
               >
                 <span className={`grid h-5 w-5 place-items-center rounded-full border text-[11px] ${circleClass}`}>
                   {isComplete ? '✓' : number}
                 </span>
-                <span className="whitespace-nowrap">{step.label}</span>
+                <span className="whitespace-nowrap pr-3">{step.label}</span>
               </button>
-              {index < steps.length - 1 && <span className="text-white/50">→</span>}
+              {index < steps.length - 1 && <span className="text-white/50 mx-1 select-none">→</span>}
             </li>
           )
         })}