refactor: Align form validation UX across management dialogs

src/components/auth/AuthBackground.tsx

@@ -0,0 +1,85 @@
+import { cn } from '@/lib/utils';
+
+const BOKEH_ORBS = [
+  'top-[20%] left-[10%] size-[min(18vw,140px)] opacity-[0.14]',
+  'top-[-18%] right-[-20%] size-[min(42vw,380px)] opacity-[0.1]',
+  'bottom-[-17%] left-[-15%] size-[min(34vw,300px)] opacity-[0.12]',
+] as const;
+
+const PARTICLES = [
+  'top-[30%] left-[45%] opacity-15',
+  'top-[43%] right-[20%] opacity-20',
+  'top-[57%] left-[10%] opacity-20',
+  'bottom-[28%] left-[45%] opacity-20',
+  'bottom-[14%] right-[20%] opacity-20',
+] as const;
+
+type AuthBackgroundProps = {
+  className?: string;
+};
+
+export function AuthBackground({ className }: AuthBackgroundProps) {
+  return (
+    <div
+      className={cn(
+        'relative hidden h-screen w-1/2 shrink-0 overflow-hidden md:block',
+        className,
+      )}
+      aria-hidden
+    >
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'linear-gradient(155deg, color-mix(in oklch, var(--primary) 92%, white 8%) 0%, var(--primary) 32%, color-mix(in oklch, var(--primary) 72%, black 28%) 66%, color-mix(in oklch, var(--primary) 48%, black 52%) 100%)',
+        }}
+      />
+
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            'radial-gradient(circle at 50% 43%, color-mix(in oklch, var(--primary) 78%, white 22% / 34%), transparent 42%), radial-gradient(circle at 18% 8%, color-mix(in oklch, var(--primary) 70%, white 30% / 26%), transparent 36%)',
+        }}
+      />
+
+      <svg
+        className="pointer-events-none absolute inset-0 size-full text-primary-foreground/8"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid slice"
+      >
+        {Array.from({ length: 14 }, (_, index) => (
+          <circle
+            key={index}
+            cx="50"
+            cy="45"
+            r={8 + index * 5.2}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="0.08"
+          />
+        ))}
+      </svg>
+
+      {BOKEH_ORBS.map((position, index) => (
+        <div
+          key={index}
+          className={cn(
+            'absolute rounded-full bg-primary-foreground/16',
+            position,
+          )}
+        />
+      ))}
+
+      {PARTICLES.map((position, index) => (
+        <div
+          key={index}
+          className={cn(
+            'absolute size-1.5 rounded-full bg-primary-foreground/35',
+            position,
+          )}
+        />
+      ))}
+    </div>
+  );
+}