diff --git a/admin/package-lock.json b/admin/package-lock.json
index 080bb31..e4107a0 100644
--- a/admin/package-lock.json
+++ b/admin/package-lock.json
@@ -11,6 +11,7 @@
         "@tailwindcss/typography": "^0.5.20",
         "@tailwindcss/vite": "^4.3.3",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.42.2",
         "lucide-react": "^1.24.0",
         "react": "^19.2.7",
         "react-dom": "^19.2.7",
@@ -1327,6 +1328,33 @@
         }
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.42.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.42.2.tgz",
+      "integrity": "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.42.2",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2588,6 +2616,21 @@
       ],
       "license": "MIT"
     },
+    "node_modules/motion-dom": {
+      "version": "12.42.2",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.42.2.tgz",
+      "integrity": "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3072,8 +3115,7 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "optional": true
+      "license": "0BSD"
     },
     "node_modules/typescript": {
       "version": "6.0.3",
diff --git a/admin/package.json b/admin/package.json
index 2cd5ae7..6768a7c 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -13,6 +13,7 @@
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "^4.3.3",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.42.2",
     "lucide-react": "^1.24.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
diff --git a/admin/src/components/login-backdrop.tsx b/admin/src/components/login-backdrop.tsx
deleted file mode 100644
index 959946c..0000000
--- a/admin/src/components/login-backdrop.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-/** 登录页背景：青蓝粒子网络（呼应 logo 的节点网络），纯 canvas 无依赖 */
-export function LoginBackdrop() {
-  const ref = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    const canvas = ref.current
-    if (!canvas) return
-    const ctx = canvas.getContext('2d')
-    if (!ctx) return
-
-    const reduce = window.matchMedia(
-      '(prefers-reduced-motion: reduce)',
-    ).matches
-    const dpr = Math.min(window.devicePixelRatio || 1, 2)
-    let w = 0
-    let h = 0
-    let raf = 0
-    const dots: { x: number; y: number; vx: number; vy: number }[] = []
-
-    const resize = () => {
-      w = canvas.clientWidth
-      h = canvas.clientHeight
-      canvas.width = w * dpr
-      canvas.height = h * dpr
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-    }
-
-    const init = () => {
-      dots.length = 0
-      const n = Math.min(64, Math.floor((w * h) / 16000))
-      for (let i = 0; i < n; i++) {
-        dots.push({
-          x: Math.random() * w,
-          y: Math.random() * h,
-          vx: (Math.random() - 0.5) * 0.28,
-          vy: (Math.random() - 0.5) * 0.28,
-        })
-      }
-    }
-
-    const frame = () => {
-      ctx.clearRect(0, 0, w, h)
-      for (const p of dots) {
-        p.x += p.vx
-        p.y += p.vy
-        if (p.x < 0 || p.x > w) p.vx *= -1
-        if (p.y < 0 || p.y > h) p.vy *= -1
-      }
-      for (let i = 0; i < dots.length; i++) {
-        for (let j = i + 1; j < dots.length; j++) {
-          const a = dots[i]
-          const b = dots[j]
-          const d = Math.hypot(a.x - b.x, a.y - b.y)
-          if (d < 130) {
-            ctx.strokeStyle = `rgba(56,189,248,${(1 - d / 130) * 0.16})`
-            ctx.lineWidth = 1
-            ctx.beginPath()
-            ctx.moveTo(a.x, a.y)
-            ctx.lineTo(b.x, b.y)
-            ctx.stroke()
-          }
-        }
-      }
-      for (const p of dots) {
-        ctx.fillStyle = 'rgba(56,189,248,0.55)'
-        ctx.beginPath()
-        ctx.arc(p.x, p.y, 1.4, 0, Math.PI * 2)
-        ctx.fill()
-      }
-      if (!reduce) raf = requestAnimationFrame(frame)
-    }
-
-    const onResize = () => {
-      resize()
-      init()
-    }
-
-    resize()
-    init()
-    frame()
-    window.addEventListener('resize', onResize)
-    return () => {
-      cancelAnimationFrame(raf)
-      window.removeEventListener('resize', onResize)
-    }
-  }, [])
-
-  return (
-    <canvas
-      ref={ref}
-      aria-hidden="true"
-      className="absolute inset-0 h-full w-full"
-    />
-  )
-}
diff --git a/admin/src/components/login/ai-banner.tsx b/admin/src/components/login/ai-banner.tsx
new file mode 100644
index 0000000..ee0f73d
--- /dev/null
+++ b/admin/src/components/login/ai-banner.tsx
@@ -0,0 +1,168 @@
+import { motion } from 'framer-motion'
+
+/** 登录背景：左青色数据流 + 右紫色神经网络 + 中央连线（呼应 logo）。搬自参考项目。 */
+export default function AIBanner() {
+  const dataParticles = Array.from({ length: 100 }).map((_, i) => ({
+    id: `dp-${i}`,
+    y: 10 + Math.random() * 80,
+    size: Math.random() > 0.8 ? 6 : Math.random() * 3 + 1.5,
+    isSquare: Math.random() > 0.6,
+    duration: Math.random() * 2 + 1.5,
+    delay: Math.random() * 3,
+    opacity: Math.random() * 0.7 + 0.3,
+  }))
+
+  const neuralNodes = [
+    { x: 10, y: 50 }, { x: 30, y: 25 }, { x: 35, y: 75 },
+    { x: 55, y: 45 }, { x: 75, y: 15 }, { x: 70, y: 85 },
+    { x: 90, y: 55 }, { x: 80, y: 40 }, { x: 50, y: 90 },
+    { x: 20, y: 95 }, { x: 95, y: 20 }, { x: 45, y: 10 },
+    { x: 85, y: 75 }, { x: 15, y: 20 },
+  ]
+  const neuralLines = [
+    [0, 1], [0, 2], [1, 3], [2, 3], [1, 4], [3, 4],
+    [3, 6], [2, 5], [3, 5], [5, 6], [4, 7], [6, 7],
+    [2, 8], [5, 8], [0, 9], [2, 9], [4, 10], [7, 10],
+    [1, 11], [4, 11], [6, 12], [5, 12], [0, 13], [1, 13],
+  ]
+
+  return (
+    <div className="absolute inset-0 h-full w-full overflow-hidden bg-[#080d17]">
+      <div className="pointer-events-none absolute left-[15%] top-1/2 h-[800px] w-[800px] -translate-y-1/2 rounded-full bg-cyan-600/15 blur-[150px] mix-blend-screen" />
+      <div className="pointer-events-none absolute right-[15%] top-1/2 h-[800px] w-[800px] -translate-y-1/2 rounded-full bg-fuchsia-600/15 blur-[150px] mix-blend-screen" />
+
+      <div
+        className="pointer-events-none absolute inset-y-0 left-0 w-[65%]"
+        style={{
+          maskImage:
+            'linear-gradient(to right, black 0%, black 60%, transparent 100%)',
+          WebkitMaskImage:
+            'linear-gradient(to right, black 0%, black 60%, transparent 100%)',
+        }}
+      >
+        {dataParticles.map((p) => (
+          <motion.div
+            key={p.id}
+            className={`absolute bg-cyan-400 ${p.isSquare ? 'rounded-sm' : 'rounded-full'}`}
+            style={{
+              width: p.size,
+              height: p.size,
+              top: `${p.y}%`,
+              boxShadow: p.isSquare
+                ? '0 0 12px 3px rgba(6,182,212,0.9)'
+                : '0 0 8px 2px rgba(6,182,212,0.6)',
+            }}
+            initial={{ x: '-10vw', opacity: 0 }}
+            animate={{ x: '75vw', opacity: [0, p.opacity, p.opacity, 0] }}
+            transition={{
+              duration: p.duration * 3.5,
+              repeat: Infinity,
+              delay: p.delay,
+              ease: 'linear',
+            }}
+          />
+        ))}
+        <div className="absolute left-0 top-1/2 flex h-[80%] w-full -translate-y-1/2 flex-col justify-between opacity-70">
+          {Array.from({ length: 20 }).map((_, i) => (
+            <motion.div
+              key={`streak-${i}`}
+              className="h-[2px] bg-gradient-to-r from-transparent via-cyan-400 to-transparent"
+              style={{
+                width: `${Math.random() * 40 + 20}%`,
+                filter: 'drop-shadow(0 0 5px rgba(6,182,212,0.8))',
+              }}
+              initial={{ x: '-50%', opacity: 0 }}
+              animate={{ x: '150%', opacity: [0, 1, 1, 0] }}
+              transition={{
+                duration: 7 + Math.random() * 6,
+                repeat: Infinity,
+                delay: Math.random() * 4,
+                ease: 'linear',
+              }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex w-[45%] items-center justify-end pr-[5%]">
+        <svg
+          viewBox="0 0 100 100"
+          className="h-[80%] w-full max-w-[500px] overflow-visible"
+          style={{ filter: 'drop-shadow(0 0 10px rgba(217,70,239,0.6))' }}
+        >
+          {neuralLines.map((line, i) => {
+            const n1 = neuralNodes[line[0]]
+            const n2 = neuralNodes[line[1]]
+            return (
+              <motion.line
+                key={`line-${i}`}
+                x1={n1.x}
+                y1={n1.y}
+                x2={n2.x}
+                y2={n2.y}
+                stroke="rgba(217,70,239,0.5)"
+                strokeWidth="0.5"
+                initial={{ pathLength: 0, opacity: 0 }}
+                animate={{ pathLength: [0, 1, 1, 0], opacity: [0, 1, 1, 0] }}
+                transition={{
+                  duration: 10,
+                  repeat: Infinity,
+                  ease: 'easeInOut',
+                  delay: i * 0.3,
+                }}
+              />
+            )
+          })}
+          {neuralNodes.map((node, i) => (
+            <motion.circle
+              key={`node-${i}`}
+              cx={node.x}
+              cy={node.y}
+              r="1.5"
+              fill="#d946ef"
+              animate={{ r: [1.5, 2.5, 1.5], opacity: [0.4, 0.9, 0.4] }}
+              transition={{ duration: 4.5, repeat: Infinity, delay: i * 0.4 }}
+            />
+          ))}
+        </svg>
+      </div>
+
+      <div className="pointer-events-none absolute left-0 top-1/2 flex h-[600px] w-full -translate-y-1/2 items-center justify-center opacity-60 mix-blend-screen">
+        <svg
+          viewBox="0 0 200 100"
+          preserveAspectRatio="none"
+          className="h-full w-full overflow-visible"
+        >
+          <defs>
+            <linearGradient id="elegant-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor="#06b6d4" stopOpacity="0" />
+              <stop offset="25%" stopColor="#06b6d4" stopOpacity="0.8" />
+              <stop offset="50%" stopColor="#8b5cf6" stopOpacity="0.5" />
+              <stop offset="75%" stopColor="#d946ef" stopOpacity="0.8" />
+              <stop offset="100%" stopColor="#d946ef" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <motion.path
+              key={`line-${i}`}
+              d={`M -20 ${30 + i * 10} C 60 ${10 + i * 5}, 140 ${90 - i * 5}, 220 ${70 - i * 10}`}
+              fill="none"
+              stroke="url(#elegant-grad)"
+              strokeWidth={0.2 + i * 0.05}
+              animate={{
+                strokeDasharray: ['0, 400', '400, 0'],
+                opacity: [0.3, 0.7, 0.3],
+              }}
+              transition={{
+                duration: 16 + i * 4,
+                repeat: Infinity,
+                ease: 'easeInOut',
+                delay: i * 2,
+              }}
+            />
+          ))}
+        </svg>
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/components/login/ai-core-effect.tsx b/admin/src/components/login/ai-core-effect.tsx
new file mode 100644
index 0000000..03f2efd
--- /dev/null
+++ b/admin/src/components/login/ai-core-effect.tsx
@@ -0,0 +1,305 @@
+import { useState } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Cpu, ArrowRight } from 'lucide-react'
+import AIBanner from './ai-banner'
+
+/** 登录前的 boot 过渡：点击芯片 → 神经链接进度 → 解锁。搬自参考项目。 */
+export default function AICoreEffect({ onUnlock }: { onUnlock: () => void }) {
+  const [synced, setSynced] = useState(false)
+  const [progress, setProgress] = useState(0)
+
+  const handleSync = () => {
+    if (synced || progress > 0) return
+    let p = 0
+    const interval = setInterval(() => {
+      p += 1
+      setProgress(p)
+      if (p >= 100) {
+        clearInterval(interval)
+        setSynced(true)
+        setTimeout(() => onUnlock(), 800)
+      }
+    }, 25)
+  }
+
+  return (
+    <AnimatePresence>
+      {!synced && (
+        <motion.div
+          className="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden bg-[#080d17]"
+          exit={{ opacity: 0, scale: 1.05 }}
+          transition={{ duration: 0.8, ease: 'easeInOut' }}
+        >
+          <div className="absolute inset-0 opacity-50">
+            <AIBanner />
+          </div>
+          <div className="absolute inset-0 z-10 bg-[#080d17]/70 backdrop-blur-sm" />
+
+          <div
+            className={`pointer-events-none absolute left-1/2 top-1/2 z-[15] flex h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 items-center justify-center mix-blend-screen transition-all duration-1000 ${progress > 0 ? 'scale-[1.05] opacity-100' : 'scale-100 opacity-90'}`}
+          >
+            <svg viewBox="-20 0 140 100" className="h-full w-full overflow-visible">
+              <defs>
+                <linearGradient id="logo-cyan" x1="0%" y1="0%" x2="100%" y2="0%">
+                  <stop offset="0%" stopColor="#06b6d4" />
+                  <stop offset="100%" stopColor="#3b82f6" />
+                </linearGradient>
+                <linearGradient id="logo-purple" x1="0%" y1="0%" x2="100%" y2="0%">
+                  <stop offset="0%" stopColor="#8b5cf6" />
+                  <stop offset="100%" stopColor="#d946ef" />
+                </linearGradient>
+                <linearGradient id="logo-s" x1="0%" y1="0%" x2="100%" y2="100%">
+                  <stop offset="0%" stopColor="#06b6d4" />
+                  <stop offset="40%" stopColor="#ffffff" />
+                  <stop offset="60%" stopColor="#ffffff" />
+                  <stop offset="100%" stopColor="#d946ef" />
+                </linearGradient>
+                <filter id="logo-glow">
+                  <feGaussianBlur stdDeviation="1.2" result="coloredBlur" />
+                  <feMerge>
+                    <feMergeNode in="coloredBlur" />
+                    <feMergeNode in="SourceGraphic" />
+                  </feMerge>
+                </filter>
+              </defs>
+
+              <g opacity="0.7">
+                <path
+                  d="M 50 10 L 20 25 L 20 75 L 50 90"
+                  fill="none"
+                  stroke="url(#logo-cyan)"
+                  strokeWidth="0.5"
+                  opacity="0.8"
+                />
+                {Array.from({ length: 60 }).map((_, i) => {
+                  const x = 22 + Math.random() * 25
+                  const y = 25 + Math.random() * 50
+                  return (
+                    <motion.circle
+                      key={`dot-${i}`}
+                      cx={x}
+                      cy={y}
+                      r={Math.random() > 0.7 ? 1 : 0.5}
+                      fill="#06b6d4"
+                      animate={{ opacity: [0.2, 1, 0.2] }}
+                      transition={{
+                        duration: 1 + Math.random() * 2,
+                        repeat: Infinity,
+                        delay: Math.random() * 2,
+                      }}
+                    />
+                  )
+                })}
+                {Array.from({ length: 40 }).map((_, i) => (
+                  <motion.circle
+                    key={`inc-${i}`}
+                    cx={-20}
+                    cy={30 + Math.random() * 40}
+                    r={Math.random() > 0.5 ? 1.5 : 0.8}
+                    fill="#06b6d4"
+                    animate={{ x: [0, 45], opacity: [0, 1, 0] }}
+                    transition={{
+                      duration: 1.5 + Math.random() * 1.5,
+                      repeat: Infinity,
+                      ease: 'linear',
+                      delay: Math.random() * 2,
+                    }}
+                  />
+                ))}
+              </g>
+
+              <g opacity="0.7">
+                <path
+                  d="M 50 10 L 80 25 L 80 75 L 50 90"
+                  fill="none"
+                  stroke="url(#logo-purple)"
+                  strokeWidth="0.5"
+                  opacity="0.8"
+                />
+                {Array.from({ length: 20 }).map((_, i) => {
+                  const x = 52 + Math.random() * 25
+                  const y = 25 + Math.random() * 50
+                  return (
+                    <g key={`n-${i}`}>
+                      <motion.circle
+                        cx={x}
+                        cy={y}
+                        r="0.8"
+                        fill="#d946ef"
+                        animate={{ opacity: [0.3, 1, 0.3] }}
+                        transition={{
+                          duration: 1.5 + Math.random() * 2,
+                          repeat: Infinity,
+                          delay: Math.random() * 2,
+                        }}
+                      />
+                      <line
+                        x1={x}
+                        y1={y}
+                        x2={50}
+                        y2={50}
+                        stroke="#d946ef"
+                        strokeWidth="0.1"
+                        opacity="0.4"
+                      />
+                    </g>
+                  )
+                })}
+                {Array.from({ length: 20 }).map((_, i) => {
+                  const startY = 30 + Math.random() * 40
+                  const endY = 20 + Math.random() * 60
+                  return (
+                    <motion.g
+                      key={`out-${i}`}
+                      animate={{ x: [0, 35], opacity: [0, 1, 0] }}
+                      transition={{
+                        duration: 2 + Math.random() * 2,
+                        repeat: Infinity,
+                        ease: 'linear',
+                        delay: Math.random() * 2,
+                      }}
+                    >
+                      <circle cx={80} cy={endY} r="1.2" fill="#d946ef" />
+                      <line
+                        x1={50}
+                        y1={startY}
+                        x2={80}
+                        y2={endY}
+                        stroke="#d946ef"
+                        strokeWidth="0.2"
+                        opacity="0.5"
+                      />
+                    </motion.g>
+                  )
+                })}
+              </g>
+
+              <g filter="url(#logo-glow)">
+                {Array.from({ length: 80 }).map((_, i) => {
+                  const offset = (i - 40) * 0.25
+                  const isCenter = Math.abs(offset) < 3
+                  return (
+                    <motion.path
+                      key={`s-${i}`}
+                      d={`M ${70 + offset} 25 L ${45 + offset} 25 C ${25 + offset} 25, ${25 + offset} 45, ${45 + offset} 50 C ${75 + offset} 60, ${75 + offset} 80, ${55 + offset} 80 L ${30 + offset} 80`}
+                      fill="none"
+                      stroke="url(#logo-s)"
+                      strokeWidth={isCenter ? '0.8' : '0.3'}
+                      animate={{
+                        strokeDasharray: ['0, 300', '300, 0'],
+                        opacity: [0.1, isCenter ? 1 : 0.5, 0.1],
+                      }}
+                      transition={{
+                        duration:
+                          progress > 0
+                            ? 0.6 + Math.random() * 0.5
+                            : 2.5 + Math.random() * 2,
+                        repeat: Infinity,
+                        delay: Math.random() * 3,
+                        ease: 'linear',
+                      }}
+                    />
+                  )
+                })}
+              </g>
+            </svg>
+          </div>
+
+          <div
+            className="pointer-events-none absolute inset-0 z-20 opacity-10"
+            style={{
+              backgroundImage:
+                'repeating-linear-gradient(transparent, transparent 2px, #000 2px, #000 4px)',
+            }}
+          />
+
+          <div className="relative z-30 mt-[450px] flex flex-col items-center">
+            <div className="relative flex h-32 w-32 items-center justify-center">
+              <svg className="absolute inset-0 h-full w-full -rotate-90">
+                <circle
+                  cx="64"
+                  cy="64"
+                  r="60"
+                  fill="none"
+                  stroke="rgba(6,182,212,0.1)"
+                  strokeWidth="1"
+                />
+                <motion.circle
+                  cx="64"
+                  cy="64"
+                  r="60"
+                  fill="none"
+                  stroke="#06b6d4"
+                  strokeWidth="2"
+                  strokeDasharray={377}
+                  strokeDashoffset={377 - (377 * progress) / 100}
+                  style={{ filter: 'drop-shadow(0 0 10px rgba(6,182,212,0.8))' }}
+                />
+              </svg>
+
+              <motion.svg
+                viewBox="0 0 100 100"
+                className={`absolute inset-2 h-[calc(100%-16px)] w-[calc(100%-16px)] transition-colors duration-500 ${progress > 0 ? 'text-fuchsia-500' : 'text-cyan-500/30'}`}
+                animate={{ rotate: progress > 0 ? 360 : 0 }}
+                transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
+              >
+                <polygon
+                  points="50 5, 95 25, 95 75, 50 95, 5 75, 5 25"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="1"
+                />
+              </motion.svg>
+
+              <button
+                onClick={handleSync}
+                disabled={progress > 0}
+                className="group relative z-10 flex h-16 w-16 cursor-pointer items-center justify-center rounded-full border border-cyan-500/50 bg-slate-900 text-cyan-400 shadow-[0_0_15px_rgba(6,182,212,0.2)] transition-all hover:scale-110 hover:bg-cyan-950 hover:shadow-[0_0_30px_rgba(6,182,212,0.6)] disabled:cursor-not-allowed disabled:opacity-100"
+              >
+                <Cpu
+                  className={`h-8 w-8 transition-transform ${progress > 0 && progress < 100 ? 'animate-pulse text-fuchsia-400' : ''} ${progress === 100 ? 'text-white drop-shadow-[0_0_10px_white]' : ''}`}
+                />
+              </button>
+            </div>
+
+            <div className="mt-10 text-center font-mono">
+              <div className="mb-4 text-sm uppercase tracking-[0.4em] text-cyan-400 drop-shadow-md">
+                {progress === 0
+                  ? 'Core Synchronization Required'
+                  : progress < 100
+                    ? 'Establishing Neural Link...'
+                    : 'Link Established'}
+              </div>
+
+              {progress === 0 && (
+                <motion.div
+                  className="flex items-center justify-center gap-2 text-xs tracking-widest text-slate-400"
+                  animate={{ opacity: [0.3, 1, 0.3] }}
+                  transition={{ duration: 1.5, repeat: Infinity }}
+                >
+                  <ArrowRight className="h-3 w-3 text-fuchsia-400" /> INITIATE BOOT
+                  SEQUENCE
+                </motion.div>
+              )}
+
+              {progress > 0 && (
+                <div className="text-3xl font-bold tabular-nums tracking-[0.2em] text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]">
+                  {progress}%
+                </div>
+              )}
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {synced && (
+        <motion.div
+          className="pointer-events-none fixed inset-0 z-[110] bg-gradient-to-r from-cyan-400 to-fuchsia-400 mix-blend-screen"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: [0, 1, 0] }}
+          transition={{ duration: 1, ease: 'easeOut' }}
+        />
+      )}
+    </AnimatePresence>
+  )
+}
diff --git a/admin/src/components/login/login-characters.tsx b/admin/src/components/login/login-characters.tsx
new file mode 100644
index 0000000..1b0387c
--- /dev/null
+++ b/admin/src/components/login/login-characters.tsx
@@ -0,0 +1,424 @@
+import { useState, useEffect, useRef } from 'react'
+
+interface PupilProps {
+  size?: number
+  maxDistance?: number
+  pupilColor?: string
+  forceLookX?: number
+  forceLookY?: number
+}
+
+const Pupil = ({
+  size = 12,
+  maxDistance = 5,
+  pupilColor = 'black',
+  forceLookX,
+  forceLookY,
+}: PupilProps) => {
+  const [mouseX, setMouseX] = useState(0)
+  const [mouseY, setMouseY] = useState(0)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const h = (e: MouseEvent) => {
+      setMouseX(e.clientX)
+      setMouseY(e.clientY)
+    }
+    window.addEventListener('mousemove', h)
+    return () => window.removeEventListener('mousemove', h)
+  }, [])
+
+  const calc = () => {
+    if (!ref.current) return { x: 0, y: 0 }
+    if (forceLookX !== undefined && forceLookY !== undefined)
+      return { x: forceLookX, y: forceLookY }
+    const r = ref.current.getBoundingClientRect()
+    const cx = r.left + r.width / 2
+    const cy = r.top + r.height / 2
+    const dx = mouseX - cx
+    const dy = mouseY - cy
+    const dist = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance)
+    const a = Math.atan2(dy, dx)
+    return { x: Math.cos(a) * dist, y: Math.sin(a) * dist }
+  }
+  const p = calc()
+  return (
+    <div
+      ref={ref}
+      className="rounded-full"
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: pupilColor,
+        transform: `translate(${p.x}px, ${p.y}px)`,
+        transition: 'transform 0.1s ease-out',
+      }}
+    />
+  )
+}
+
+interface EyeBallProps {
+  size?: number
+  pupilSize?: number
+  maxDistance?: number
+  eyeColor?: string
+  pupilColor?: string
+  isBlinking?: boolean
+  forceLookX?: number
+  forceLookY?: number
+}
+
+const EyeBall = ({
+  size = 48,
+  pupilSize = 16,
+  maxDistance = 10,
+  eyeColor = 'white',
+  pupilColor = 'black',
+  isBlinking = false,
+  forceLookX,
+  forceLookY,
+}: EyeBallProps) => {
+  const [mouseX, setMouseX] = useState(0)
+  const [mouseY, setMouseY] = useState(0)
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const h = (e: MouseEvent) => {
+      setMouseX(e.clientX)
+      setMouseY(e.clientY)
+    }
+    window.addEventListener('mousemove', h)
+    return () => window.removeEventListener('mousemove', h)
+  }, [])
+
+  const calc = () => {
+    if (!ref.current) return { x: 0, y: 0 }
+    if (forceLookX !== undefined && forceLookY !== undefined)
+      return { x: forceLookX, y: forceLookY }
+    const r = ref.current.getBoundingClientRect()
+    const cx = r.left + r.width / 2
+    const cy = r.top + r.height / 2
+    const dx = mouseX - cx
+    const dy = mouseY - cy
+    const dist = Math.min(Math.sqrt(dx * dx + dy * dy), maxDistance)
+    const a = Math.atan2(dy, dx)
+    return { x: Math.cos(a) * dist, y: Math.sin(a) * dist }
+  }
+  const p = calc()
+  return (
+    <div
+      ref={ref}
+      className="flex items-center justify-center rounded-full transition-all duration-150"
+      style={{
+        width: size,
+        height: isBlinking ? 2 : size,
+        backgroundColor: eyeColor,
+        overflow: 'hidden',
+      }}
+    >
+      {!isBlinking && (
+        <div
+          className="rounded-full"
+          style={{
+            width: pupilSize,
+            height: pupilSize,
+            backgroundColor: pupilColor,
+            transform: `translate(${p.x}px, ${p.y}px)`,
+            transition: 'transform 0.1s ease-out',
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+interface Props {
+  isTyping?: boolean
+  showPassword?: boolean
+  passwordLength?: number
+}
+
+export default function LoginCharacters({
+  isTyping = false,
+  showPassword = false,
+  passwordLength = 0,
+}: Props) {
+  const [mouseX, setMouseX] = useState(0)
+  const [mouseY, setMouseY] = useState(0)
+  const [isPrimaryBlink, setIsPrimaryBlink] = useState(false)
+  const [isDarkBlink, setIsDarkBlink] = useState(false)
+  const [isLooking, setIsLooking] = useState(false)
+  const [isPrimaryPeek, setIsPrimaryPeek] = useState(false)
+  const primaryRef = useRef<HTMLDivElement>(null)
+  const darkRef = useRef<HTMLDivElement>(null)
+  const yellowRef = useRef<HTMLDivElement>(null)
+  const orangeRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const h = (e: MouseEvent) => {
+      setMouseX(e.clientX)
+      setMouseY(e.clientY)
+    }
+    window.addEventListener('mousemove', h)
+    return () => window.removeEventListener('mousemove', h)
+  }, [])
+
+  useEffect(() => {
+    const schedule = (): ReturnType<typeof setTimeout> =>
+      setTimeout(
+        () => {
+          setIsPrimaryBlink(true)
+          setTimeout(() => {
+            setIsPrimaryBlink(false)
+            schedule()
+          }, 150)
+        },
+        Math.random() * 4000 + 3000,
+      )
+    const t = schedule()
+    return () => clearTimeout(t)
+  }, [])
+
+  useEffect(() => {
+    const schedule = (): ReturnType<typeof setTimeout> =>
+      setTimeout(
+        () => {
+          setIsDarkBlink(true)
+          setTimeout(() => {
+            setIsDarkBlink(false)
+            schedule()
+          }, 150)
+        },
+        Math.random() * 4000 + 3000,
+      )
+    const t = schedule()
+    return () => clearTimeout(t)
+  }, [])
+
+  useEffect(() => {
+    if (isTyping) {
+      setIsLooking(true)
+      const t = setTimeout(() => setIsLooking(false), 800)
+      return () => clearTimeout(t)
+    } else setIsLooking(false)
+  }, [isTyping])
+
+  useEffect(() => {
+    if (passwordLength > 0 && showPassword) {
+      const t = setTimeout(
+        () => {
+          setIsPrimaryPeek(true)
+          setTimeout(() => setIsPrimaryPeek(false), 800)
+        },
+        Math.random() * 3000 + 2000,
+      )
+      return () => clearTimeout(t)
+    } else setIsPrimaryPeek(false)
+  }, [passwordLength, showPassword, isPrimaryPeek])
+
+  const calcPos = (ref: React.RefObject<HTMLDivElement | null>) => {
+    if (!ref.current) return { faceX: 0, faceY: 0, bodySkew: 0 }
+    const r = ref.current.getBoundingClientRect()
+    const cx = r.left + r.width / 2
+    const cy = r.top + r.height / 3
+    const dx = mouseX - cx
+    const dy = mouseY - cy
+    return {
+      faceX: Math.max(-15, Math.min(15, dx / 20)),
+      faceY: Math.max(-10, Math.min(10, dy / 30)),
+      bodySkew: Math.max(-6, Math.min(6, -dx / 120)),
+    }
+  }
+
+  const pp = calcPos(primaryRef)
+  const bp = calcPos(darkRef)
+  const yp = calcPos(yellowRef)
+  const op = calcPos(orangeRef)
+  const hiding = passwordLength > 0 && !showPassword
+  const showing = passwordLength > 0 && showPassword
+
+  return (
+    <div className="relative w-full" style={{ height: 300 }}>
+      <div
+        ref={primaryRef}
+        className="absolute bottom-0 transition-all duration-700 ease-in-out"
+        style={{
+          left: '12%',
+          width: '33%',
+          height: isTyping || hiding ? '110%' : '100%',
+          backgroundColor: '#10b981',
+          borderRadius: '10px 10px 0 0',
+          zIndex: 1,
+          transform: showing
+            ? 'skewX(0deg)'
+            : isTyping || hiding
+              ? `skewX(${(pp.bodySkew || 0) - 12}deg) translateX(40px)`
+              : `skewX(${pp.bodySkew || 0}deg)`,
+          transformOrigin: 'bottom center',
+        }}
+      >
+        <div
+          className="absolute flex gap-8 transition-all duration-700 ease-in-out"
+          style={{
+            left: showing ? 20 : isLooking ? 55 : 45 + pp.faceX,
+            top: showing ? 35 : isLooking ? 65 : 40 + pp.faceY,
+          }}
+        >
+          <EyeBall
+            size={18}
+            pupilSize={7}
+            maxDistance={5}
+            eyeColor="white"
+            pupilColor="#064e3b"
+            isBlinking={isPrimaryBlink}
+            forceLookX={showing ? (isPrimaryPeek ? 4 : -4) : isLooking ? 3 : undefined}
+            forceLookY={showing ? (isPrimaryPeek ? 5 : -4) : isLooking ? 4 : undefined}
+          />
+          <EyeBall
+            size={18}
+            pupilSize={7}
+            maxDistance={5}
+            eyeColor="white"
+            pupilColor="#064e3b"
+            isBlinking={isPrimaryBlink}
+            forceLookX={showing ? (isPrimaryPeek ? 4 : -4) : isLooking ? 3 : undefined}
+            forceLookY={showing ? (isPrimaryPeek ? 5 : -4) : isLooking ? 4 : undefined}
+          />
+        </div>
+      </div>
+
+      <div
+        ref={darkRef}
+        className="absolute bottom-0 transition-all duration-700 ease-in-out"
+        style={{
+          left: '44%',
+          width: '22%',
+          height: '77%',
+          backgroundColor: '#0f766e',
+          borderRadius: '8px 8px 0 0',
+          zIndex: 2,
+          transform: showing
+            ? 'skewX(0deg)'
+            : isLooking
+              ? `skewX(${(bp.bodySkew || 0) * 1.5 + 10}deg) translateX(20px)`
+              : isTyping || hiding
+                ? `skewX(${(bp.bodySkew || 0) * 1.5}deg)`
+                : `skewX(${bp.bodySkew || 0}deg)`,
+          transformOrigin: 'bottom center',
+        }}
+      >
+        <div
+          className="absolute flex gap-6 transition-all duration-700 ease-in-out"
+          style={{
+            left: showing ? 10 : isLooking ? 32 : 26 + bp.faceX,
+            top: showing ? 28 : isLooking ? 12 : 32 + bp.faceY,
+          }}
+        >
+          <EyeBall
+            size={16}
+            pupilSize={6}
+            maxDistance={4}
+            eyeColor="white"
+            pupilColor="#042f2e"
+            isBlinking={isDarkBlink}
+            forceLookX={showing ? -4 : isLooking ? 0 : undefined}
+            forceLookY={showing ? -4 : isLooking ? -4 : undefined}
+          />
+          <EyeBall
+            size={16}
+            pupilSize={6}
+            maxDistance={4}
+            eyeColor="white"
+            pupilColor="#042f2e"
+            isBlinking={isDarkBlink}
+            forceLookX={showing ? -4 : isLooking ? 0 : undefined}
+            forceLookY={showing ? -4 : isLooking ? -4 : undefined}
+          />
+        </div>
+      </div>
+
+      <div
+        ref={orangeRef}
+        className="absolute bottom-0 transition-all duration-700 ease-in-out"
+        style={{
+          left: '0%',
+          width: '44%',
+          height: '50%',
+          backgroundColor: '#f59e0b',
+          borderRadius: '120px 120px 0 0',
+          zIndex: 3,
+          transform: showing ? 'skewX(0deg)' : `skewX(${op.bodySkew || 0}deg)`,
+          transformOrigin: 'bottom center',
+        }}
+      >
+        <div
+          className="absolute flex gap-8 transition-all duration-200 ease-out"
+          style={{
+            left: showing ? '20%' : `calc(34% + ${op.faceX || 0}px)`,
+            top: showing ? '42%' : `calc(45% + ${op.faceY || 0}px)`,
+          }}
+        >
+          <Pupil
+            size={12}
+            maxDistance={5}
+            pupilColor="#78350f"
+            forceLookX={showing ? -5 : undefined}
+            forceLookY={showing ? -4 : undefined}
+          />
+          <Pupil
+            size={12}
+            maxDistance={5}
+            pupilColor="#78350f"
+            forceLookX={showing ? -5 : undefined}
+            forceLookY={showing ? -4 : undefined}
+          />
+        </div>
+      </div>
+
+      <div
+        ref={yellowRef}
+        className="absolute bottom-0 transition-all duration-700 ease-in-out"
+        style={{
+          left: '56%',
+          width: '26%',
+          height: '58%',
+          backgroundColor: '#84cc16',
+          borderRadius: '70px 70px 0 0',
+          zIndex: 4,
+          transform: showing ? 'skewX(0deg)' : `skewX(${yp.bodySkew || 0}deg)`,
+          transformOrigin: 'bottom center',
+        }}
+      >
+        <div
+          className="absolute flex gap-6 transition-all duration-200 ease-out"
+          style={{
+            left: showing ? '14%' : `calc(37% + ${yp.faceX || 0}px)`,
+            top: showing ? '15%' : `calc(17% + ${yp.faceY || 0}px)`,
+          }}
+        >
+          <Pupil
+            size={12}
+            maxDistance={5}
+            pupilColor="#3f6212"
+            forceLookX={showing ? -5 : undefined}
+            forceLookY={showing ? -4 : undefined}
+          />
+          <Pupil
+            size={12}
+            maxDistance={5}
+            pupilColor="#3f6212"
+            forceLookX={showing ? -5 : undefined}
+            forceLookY={showing ? -4 : undefined}
+          />
+        </div>
+        <div
+          className="absolute h-[4px] w-16 rounded-full bg-[#3f6212] transition-all duration-200 ease-out"
+          style={{
+            left: showing ? '7%' : `calc(28% + ${yp.faceX || 0}px)`,
+            top: showing ? '38%' : `calc(38% + ${yp.faceY || 0}px)`,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/admin/src/pages/login.tsx b/admin/src/pages/login.tsx
index 5169abc..92a6a57 100644
--- a/admin/src/pages/login.tsx
+++ b/admin/src/pages/login.tsx
@@ -3,13 +3,17 @@ import { Navigate, useNavigate } from 'react-router-dom'
 import { Eye, EyeOff, Loader2 } from 'lucide-react'
 import { getToken } from '@/api/client'
 import { login } from '@/api/auth'
-import { LoginBackdrop } from '@/components/login-backdrop'
+import AIBanner from '@/components/login/ai-banner'
+import AICoreEffect from '@/components/login/ai-core-effect'
+import LoginCharacters from '@/components/login/login-characters'
 
 export default function LoginPage() {
   const navigate = useNavigate()
+  const [booted, setBooted] = useState(false)
   const [username, setUsername] = useState('')
   const [password, setPassword] = useState('')
   const [showPwd, setShowPwd] = useState(false)
+  const [pwdFocused, setPwdFocused] = useState(false)
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
 
@@ -18,7 +22,7 @@ export default function LoginPage() {
   const onSubmit = async (e: FormEvent) => {
     e.preventDefault()
     if (!username || !password) {
-      setError('请输入用户名和密码')
+      setError('请输入账号和密码')
       return
     }
     setError('')
@@ -34,136 +38,147 @@ export default function LoginPage() {
   }
 
   const fieldCls =
-    'h-11 w-full rounded-xl border border-white/10 bg-white/5 px-3.5 text-[14px] text-white outline-none transition-colors placeholder:text-white/25 focus:border-[#38bdf8]/60 focus:bg-white/[0.08]'
+    'h-12 w-full rounded-xl border border-slate-200 bg-slate-50/50 px-3.5 text-[14px] text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-[#22d3ee] focus:bg-white focus:ring-2 focus:ring-cyan-500/20'
 
   return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#0b1117] p-6">
-      <LoginBackdrop />
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#080d17] p-6">
+      <div className="absolute inset-0 z-0">
+        <AIBanner />
+      </div>
 
-      {/* 品牌光晕（呼应 logo 青→蓝→紫） */}
-      <div className="pointer-events-none absolute -left-32 -top-24 h-[420px] w-[420px] rounded-full bg-[#22d3ee]/12 blur-[110px]" />
-      <div className="pointer-events-none absolute -bottom-28 -right-24 h-[420px] w-[420px] rounded-full bg-[#9333ea]/12 blur-[110px]" />
+      {/* boot 过渡动画，完成后解锁进入登录表单 */}
+      {!booted && <AICoreEffect onUnlock={() => setBooted(true)} />}
 
-      <div className="relative z-10 grid w-full max-w-[880px] overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] shadow-2xl backdrop-blur-xl lg:grid-cols-2">
-        {/* 左：品牌区 */}
-        <div className="relative hidden flex-col justify-between p-10 lg:flex">
-          <div className="flex items-center gap-2.5">
+      <div className="relative z-10 grid w-full max-w-[900px] overflow-hidden rounded-[2rem] shadow-[0_0_50px_rgba(0,0,0,0.5)] ring-1 ring-white/10 lg:grid-cols-2">
+        {/* 左：品牌 + 角色 */}
+        <div className="relative hidden flex-col justify-between overflow-hidden bg-slate-900/40 p-10 text-white backdrop-blur-md lg:flex">
+          <div className="relative z-20 flex items-center gap-2.5">
             <img
               src={`${import.meta.env.BASE_URL}logo-mark.webp`}
               alt=""
-              width={34}
-              height={34}
+              width={28}
+              height={28}
               style={{ borderRadius: '22%' }}
             />
-            <span className="font-mono text-[15px] font-semibold text-white">
+            <span className="font-mono text-[15px] font-semibold tracking-tight">
               sundynix <em className="not-italic text-[#38bdf8]">admin</em>
             </span>
           </div>
 
-          <div>
-            <h2 className="text-[27px] font-semibold leading-snug tracking-tight text-white">
-              事件驱动的
-              <br />
-              AI Agent 工作台
-            </h2>
-            <p className="mt-3 text-[14px] text-white/45">内容管理控制台</p>
+          <div
+            className="relative z-20 mt-auto flex items-end justify-center"
+            style={{ height: 300 }}
+          >
+            <LoginCharacters
+              isTyping={pwdFocused}
+              showPassword={showPwd}
+              passwordLength={password.length}
+            />
           </div>
 
-          <div className="font-mono text-[11px] tracking-wide text-white/25">
+          <div className="relative z-20 mt-10 font-mono text-[11px] tracking-wide text-white/35">
             © 2026 SUNDYNIX AGENTIX
           </div>
+
+          <div className="pointer-events-none absolute right-0 top-0 h-[400px] w-[400px] -translate-y-1/2 translate-x-1/4 rounded-full bg-cyan-500/10 blur-[80px]" />
+          <div className="pointer-events-none absolute bottom-0 left-0 h-[300px] w-[300px] -translate-x-1/4 translate-y-1/4 rounded-full bg-fuchsia-500/10 blur-[60px]" />
         </div>
 
-        {/* 右：表单区 */}
-        <div className="flex flex-col justify-center bg-white/[0.02] px-8 py-12 sm:px-10">
-          {/* 移动端 logo */}
-          <div className="mb-8 flex items-center gap-2.5 lg:hidden">
-            <img
-              src={`${import.meta.env.BASE_URL}logo-mark.webp`}
-              alt=""
-              width={30}
-              height={30}
-              style={{ borderRadius: '22%' }}
-            />
-            <span className="font-mono text-[14px] font-semibold text-white">
-              sundynix <em className="not-italic text-[#38bdf8]">admin</em>
-            </span>
-          </div>
-
-          <h1 className="text-[22px] font-semibold tracking-tight text-white">
-            欢迎回来
-          </h1>
-          <p className="mt-1.5 text-[13.5px] text-white/45">
-            登录内容管理控制台
-          </p>
-
-          <form onSubmit={onSubmit} className="mt-8 space-y-4">
-            {error && (
-              <div className="flex items-center gap-2 rounded-xl border border-red-400/30 bg-red-500/10 px-3.5 py-2.5 text-[13px] text-red-300">
-                <span className="size-1.5 rounded-full bg-red-400" />
-                {error}
-              </div>
-            )}
-
-            <div>
-              <label className="mb-1.5 block text-[13px] text-white/55">
-                用户名
-              </label>
-              <input
-                type="text"
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-                autoComplete="username"
-                disabled={loading}
-                placeholder="管理员账号"
-                className={fieldCls}
+        {/* 右：登录表单 */}
+        <div className="relative flex flex-col items-center justify-center bg-white/95 px-8 py-16 backdrop-blur-2xl sm:px-12">
+          <div className="w-full max-w-[340px]">
+            <div className="mb-8 flex items-center justify-center gap-2.5 lg:hidden">
+              <img
+                src={`${import.meta.env.BASE_URL}logo-mark.webp`}
+                alt=""
+                width={28}
+                height={28}
+                style={{ borderRadius: '22%' }}
               />
+              <span className="font-mono text-[15px] font-semibold text-slate-900">
+                sundynix admin
+              </span>
             </div>
 
-            <div>
-              <label className="mb-1.5 block text-[13px] text-white/55">
-                密码
-              </label>
-              <div className="relative">
-                <input
-                  type={showPwd ? 'text' : 'password'}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  autoComplete="current-password"
-                  disabled={loading}
-                  placeholder="••••••••"
-                  className={`${fieldCls} pr-11`}
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPwd((v) => !v)}
-                  tabIndex={-1}
-                  aria-label={showPwd ? '隐藏密码' : '显示密码'}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-white/35 transition-colors hover:text-white/70"
-                >
-                  {showPwd ? (
-                    <Eye className="size-[18px]" />
-                  ) : (
-                    <EyeOff className="size-[18px]" />
-                  )}
-                </button>
-              </div>
+            <div className="mb-9 text-center">
+              <h1 className="mb-2 text-[28px] font-bold tracking-tight text-slate-900">
+                欢迎回来！
+              </h1>
+              <p className="text-[13.5px] text-slate-500">
+                请输入管理员账号与密码
+              </p>
             </div>
 
-            <button
-              type="submit"
-              disabled={loading}
-              className="mt-2 flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#22d3ee] to-[#3b82f6] text-[14.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-60"
-            >
-              {loading ? (
-                <>
-                  <Loader2 className="size-[18px] animate-spin" /> 登录中…
-                </>
-              ) : (
-                '登录'
+            <form onSubmit={onSubmit} className="space-y-5">
+              {error && (
+                <div className="flex items-center gap-2 rounded-xl border border-red-100 bg-red-50 px-4 py-3 text-[13px] text-red-600">
+                  <span className="size-1.5 rounded-full bg-red-500" />
+                  {error}
+                </div>
               )}
-            </button>
-          </form>
+
+              <div>
+                <label className="mb-2 block text-[13px] font-semibold text-slate-700">
+                  账号
+                </label>
+                <input
+                  type="text"
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  autoComplete="username"
+                  disabled={loading}
+                  placeholder="请输入管理员账号"
+                  className={fieldCls}
+                />
+              </div>
+
+              <div>
+                <label className="mb-2 block text-[13px] font-semibold text-slate-700">
+                  密码
+                </label>
+                <div className="relative">
+                  <input
+                    type={showPwd ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    onFocus={() => setPwdFocused(true)}
+                    onBlur={() => setPwdFocused(false)}
+                    autoComplete="current-password"
+                    disabled={loading}
+                    placeholder="••••••••"
+                    className={`${fieldCls} pr-11`}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPwd((v) => !v)}
+                    tabIndex={-1}
+                    aria-label={showPwd ? '隐藏密码' : '显示密码'}
+                    className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 transition-colors hover:text-slate-600"
+                  >
+                    {showPwd ? (
+                      <Eye className="h-5 w-5" />
+                    ) : (
+                      <EyeOff className="h-5 w-5" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#22d3ee] to-[#3b82f6] text-[15px] font-bold text-white shadow-lg shadow-cyan-600/20 transition-all hover:opacity-90 disabled:opacity-60"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="h-5 w-5 animate-spin" /> 登录中…
+                  </>
+                ) : (
+                  '登 录'
+                )}
+              </button>
+            </form>
+          </div>
         </div>
       </div>
     </div>