fix: guard short trader ID, i18n setup page, simplify onboarding UX

- main.go: prevent panic when trader ID < 8 chars
- SetupPage: add zh/en i18n labels
- BeginnerOnboardingPage: show private key by default, simplify code

web/src/components/modals/SetupPage.tsx

@@ -1,14 +1,62 @@
 import React, { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff, Globe } from 'lucide-react'
 import { useAuth } from '../../contexts/AuthContext'
-import { DeepVoidBackground } from '../common/DeepVoidBackground'
 import { invalidateSystemConfig } from '../../lib/config'
 import { OnboardingModeSelector } from '../auth/OnboardingModeSelector'
 import type { UserMode } from '../../lib/onboarding'
 import { useLanguage } from '../../contexts/LanguageContext'
+import type { Language } from '../../i18n/translations'
+
+const labels = {
+  zh: {
+    welcome: '欢迎使用 NOFX',
+    subtitle: '创建账号开始使用',
+    email: '邮箱',
+    emailPlaceholder: 'you@example.com',
+    password: '密码',
+    passwordPlaceholder: '至少 8 个字符',
+    passwordError: '密码至少需要 8 个字符',
+    submit: '开始使用',
+    submitting: '创建中...',
+    setupFailed: '创建失败，请重试',
+    singleUser: '单用户系统 — 这是唯一的账号',
+  },
+  en: {
+    welcome: 'Welcome to NOFX',
+    subtitle: 'Create your account to get started',
+    email: 'Email',
+    emailPlaceholder: 'you@example.com',
+    password: 'Password',
+    passwordPlaceholder: 'At least 8 characters',
+    passwordError: 'Password must be at least 8 characters',
+    submit: 'Get Started',
+    submitting: 'Creating account...',
+    setupFailed: 'Setup failed, please try again',
+    singleUser: 'Single-user system — this is the only account',
+  },
+  id: {
+    welcome: 'Selamat Datang di NOFX',
+    subtitle: 'Buat akun untuk memulai',
+    email: 'Email',
+    emailPlaceholder: 'you@example.com',
+    password: 'Kata Sandi',
+    passwordPlaceholder: 'Minimal 8 karakter',
+    passwordError: 'Kata sandi minimal 8 karakter',
+    submit: 'Mulai',
+    submitting: 'Membuat akun...',
+    setupFailed: 'Gagal membuat akun, coba lagi',
+    singleUser: 'Sistem pengguna tunggal — ini satu-satunya akun',
+  },
+} as const
+
+const langOptions: { value: Language; label: string }[] = [
+  { value: 'en', label: 'English' },
+  { value: 'zh', label: '中文' },
+  { value: 'id', label: 'Bahasa' },
+]
 
 export function SetupPage() {
-  const { language } = useLanguage()
+  const { language, setLanguage } = useLanguage()
   const { register } = useAuth()
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
@@ -17,11 +65,13 @@ export function SetupPage() {
   const [loading, setLoading] = useState(false)
   const [mode, setMode] = useState<UserMode>('beginner')
 
+  const l = labels[language as keyof typeof labels] || labels.en
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
     if (password.length < 8) {
-      setError('Password must be at least 8 characters')
+      setError(l.passwordError)
       return
     }
     setLoading(true)
@@ -30,40 +80,100 @@ export function SetupPage() {
     if (result.success) {
       invalidateSystemConfig()
     } else {
-      setError(result.message || 'Setup failed, please try again')
+      setError(result.message || l.setupFailed)
     }
   }
 
   return (
-    <DeepVoidBackground disableAnimation>
-      <div className="flex-1 flex items-center justify-center px-4 py-16">
-        <div className="w-full max-w-sm">
+    <div className="relative min-h-screen w-full overflow-hidden bg-[#0a0a0f]">
+      {/* Decorative background - simulates the main app behind a modal */}
+
+      {/* Grid */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute inset-x-0 bottom-0 h-[60vh] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-40" style={{ transform: 'perspective(500px) rotateX(60deg) translateY(80px) scale(2)' }} />
+      </div>
+
+      {/* Glow spots */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-[10%] left-[15%] w-[500px] h-[500px] bg-nofx-gold/8 rounded-full blur-[150px]" />
+        <div className="absolute bottom-[5%] right-[10%] w-[400px] h-[400px] bg-indigo-500/6 rounded-full blur-[140px]" />
+        <div className="absolute top-[40%] right-[30%] w-[300px] h-[300px] bg-emerald-500/4 rounded-full blur-[120px]" />
+      </div>
+
+      {/* Faux UI elements in background to simulate the app */}
+      <div className="absolute inset-0 pointer-events-none opacity-[0.06]">
+        {/* Fake header bar */}
+        <div className="h-14 border-b border-white/20 flex items-center px-6 gap-4">
+          <div className="w-8 h-8 rounded-lg bg-white/40" />
+          <div className="h-3 w-20 rounded bg-white/30" />
+          <div className="h-3 w-16 rounded bg-white/20 ml-4" />
+          <div className="h-3 w-16 rounded bg-white/20" />
+          <div className="h-3 w-16 rounded bg-white/20" />
+        </div>
+        {/* Fake content cards */}
+        <div className="p-6 grid grid-cols-4 gap-4 mt-2">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-24 rounded-xl border border-white/15 bg-white/5" />
+          ))}
+        </div>
+        <div className="px-6 mt-2">
+          <div className="h-64 rounded-xl border border-white/15 bg-white/5" />
+        </div>
+      </div>
+
+      {/* Blur overlay */}
+      <div className="absolute inset-0 backdrop-blur-md bg-black/60" />
+
+      {/* Language switcher */}
+      <div className="fixed top-4 right-4 z-50">
+        <div className="flex items-center gap-1.5 rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm px-2 py-1.5">
+          <Globe className="h-3.5 w-3.5 text-zinc-500" />
+          {langOptions.map((opt) => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => setLanguage(opt.value)}
+              className={`rounded-lg px-2 py-1 text-xs font-medium transition ${
+                language === opt.value
+                  ? 'bg-nofx-gold/15 text-nofx-gold'
+                  : 'text-zinc-500 hover:text-zinc-300'
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Modal card */}
+      <div className="relative z-10 flex min-h-screen items-center justify-center px-4 py-16">
+        <div className="w-full max-w-sm animate-[fadeInUp_0.4s_ease-out]">
 
           {/* Logo + Title */}
-          <div className="text-center mb-10">
-            <div className="flex justify-center mb-5">
+          <div className="text-center mb-8">
+            <div className="flex justify-center mb-4">
               <div className="relative">
-                <div className="absolute -inset-3 bg-nofx-gold/15 rounded-full blur-2xl" />
-                <img src="/icons/nofx.svg" alt="NOFX" className="w-14 h-14 relative z-10" />
+                <div className="absolute -inset-4 bg-nofx-gold/20 rounded-full blur-2xl" />
+                <img src="/icons/nofx.svg" alt="NOFX" className="w-14 h-14 relative z-10 drop-shadow-[0_0_15px_rgba(240,185,11,0.3)]" />
               </div>
             </div>
-            <h1 className="text-2xl font-bold text-white mb-1.5">Welcome to NOFX</h1>
-            <p className="text-zinc-500 text-sm">Create your account to get started</p>
+            <h1 className="text-2xl font-bold text-white mb-1.5">{l.welcome}</h1>
+            <p className="text-zinc-500 text-sm">{l.subtitle}</p>
           </div>
 
           {/* Card */}
-          <div className="bg-zinc-900/60 backdrop-blur-xl border border-zinc-800/80 rounded-2xl p-8 shadow-2xl">
+          <div className="bg-zinc-900/80 backdrop-blur-2xl border border-white/10 rounded-2xl p-8 shadow-[0_25px_60px_-15px_rgba(0,0,0,0.5),0_0_40px_-10px_rgba(240,185,11,0.08)]">
             <form onSubmit={handleSubmit} className="space-y-5">
 
               {/* Email */}
               <div>
-                <label className="block text-xs font-medium text-zinc-400 mb-2">Email</label>
+                <label className="block text-xs font-medium text-zinc-400 mb-2">{l.email}</label>
                 <input
                   type="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
-                  className="w-full bg-zinc-950/80 border border-zinc-700/80 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-nofx-gold/60 focus:ring-1 focus:ring-nofx-gold/30 transition-all"
-                  placeholder="you@example.com"
+                  className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-nofx-gold/60 focus:ring-1 focus:ring-nofx-gold/30 transition-all"
+                  placeholder={l.emailPlaceholder}
                   required
                   autoFocus
                 />
@@ -71,14 +181,14 @@ export function SetupPage() {
 
               {/* Password */}
               <div>
-                <label className="block text-xs font-medium text-zinc-400 mb-2">Password</label>
+                <label className="block text-xs font-medium text-zinc-400 mb-2">{l.password}</label>
                 <div className="relative">
                   <input
                     type={showPassword ? 'text' : 'password'}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="w-full bg-zinc-950/80 border border-zinc-700/80 rounded-xl px-4 py-3 pr-11 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-nofx-gold/60 focus:ring-1 focus:ring-nofx-gold/30 transition-all"
-                    placeholder="At least 8 characters"
+                    className="w-full bg-black/40 border border-white/10 rounded-xl px-4 py-3 pr-11 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-nofx-gold/60 focus:ring-1 focus:ring-nofx-gold/30 transition-all"
+                    placeholder={l.passwordPlaceholder}
                     required
                   />
                   <button
@@ -108,18 +218,25 @@ export function SetupPage() {
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-nofx-gold hover:bg-yellow-400 active:scale-[0.98] text-black font-semibold py-3 rounded-xl text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed mt-2"
+                className="w-full bg-nofx-gold hover:bg-yellow-400 active:scale-[0.98] text-black font-semibold py-3 rounded-xl text-sm transition-all disabled:opacity-50 disabled:cursor-not-allowed mt-2 shadow-[0_0_20px_rgba(240,185,11,0.2)]"
               >
-                {loading ? 'Creating account...' : 'Get Started'}
+                {loading ? l.submitting : l.submit}
               </button>
             </form>
           </div>
 
           <p className="text-center text-xs text-zinc-600 mt-6">
-            Single-user system &mdash; this is the only account
+            {l.singleUser}
           </p>
         </div>
       </div>
-    </DeepVoidBackground>
+
+      <style>{`
+        @keyframes fadeInUp {
+          from { opacity: 0; transform: translateY(20px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </div>
   )
 }