💫 feat(ui): introduce dispersed blur-ball background to all auth views

This commit refreshes the visual design of the authentication pages and aligns them with the Home banner style.

Details
• LoginForm.js / RegisterForm.js / PasswordResetForm.js / PasswordResetConfirm.js
  – Wrap top-level container with `relative overflow-hidden` to provide a positioning context.
  – Inject two decorative blur balls:
    ▸ Indigo ball on the top-right (`blur-ball-indigo`).
    ▸ Teal ball on the middle-left (`blur-ball-teal`).
  – Disabled the default X-axis transform on the indigo ball to keep the ball anchored to the corner.
  – Removed redundant `mt-[64px]` from the outer container and shifted it to the inner wrapper to maintain vertical rhythm without affecting the background placement.

Result
The auth screens now feature subtle, non-intrusive atmospheric gradients in the top-right and mid-left corners, offering a cohesive look & feel across the application without obstructing the main content.

web/src/components/auth/LoginForm.js

@@ -501,8 +501,11 @@ const LoginForm = () => {
   };
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         {showEmailLogin || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
           ? renderEmailLoginForm()
           : renderOAuthOptions()}

web/src/components/auth/PasswordResetConfirm.js

@@ -78,8 +78,11 @@ const PasswordResetConfirm = () => {
   }
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         <div className="flex flex-col items-center">
           <div className="w-full max-w-md">
             <div className="flex items-center justify-center mb-6 gap-2">

web/src/components/auth/PasswordResetForm.js

@@ -78,8 +78,11 @@ const PasswordResetForm = () => {
   }
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         <div className="flex flex-col items-center">
           <div className="w-full max-w-md">
             <div className="flex items-center justify-center mb-6 gap-2">

web/src/components/auth/RegisterForm.js

@@ -542,8 +542,11 @@ const RegisterForm = () => {
   };
 
   return (
-    <div className="bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 mt-[64px]">
-      <div className="w-full max-w-sm">
+    <div className="relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+      {/* 背景模糊晕染球 */}
+      <div className="blur-ball blur-ball-indigo" style={{ top: '-80px', right: '-80px', transform: 'none' }} />
+      <div className="blur-ball blur-ball-teal" style={{ top: '50%', left: '-120px' }} />
+      <div className="w-full max-w-sm mt-[64px]">
         {showEmailRegister || !(status.github_oauth || status.oidc_enabled || status.wechat_login || status.linuxdo_oauth || status.telegram_oauth)
           ? renderEmailRegisterForm()
           : renderOAuthOptions()}

web/src/pages/Home/index.js

@@ -104,7 +104,7 @@ const Home = () => {
         <div className="w-full overflow-x-hidden">
           {/* Banner 部分 */}
           <div className="w-full border-b border-semi-color-border min-h-[500px] md:min-h-[600px] lg:min-h-[700px] relative overflow-x-hidden">
-            {/* 背景模糊晕染球*/}
+            {/* 背景模糊晕染球 */}
             <div className="blur-ball blur-ball-indigo" />
             <div className="blur-ball blur-ball-teal" />
             <div className="flex items-center justify-center h-full px-4 py-20 md:py-24 lg:py-32 mt-10">