feat: redesign auth pages — rounded-[48px] cards, serif titles, orbs, icon inputs

- Auth layout: warm background with brand-accent/ochre orbs, header with Globe + Momento branding
- Login form: serif heading, icon-inputs with focus transitions, uppercase labels, submit with arrow
- Register form: matching card style with User/Mail/Lock icons, confirm password field
- Forgot password: matching card with email icon, success state with mail icon
- Reset password: matching card with Lock icons, invalid link state with AlertCircle
- All text via i18n (new keys: welcomeBack, createYourSpace, forgot, etc.)
- Dark mode support via CSS variables
- Removed shadcn Card/Button/Input dependencies from auth forms

memento-note/app/(auth)/forgot-password/page.tsx

@@ -1,79 +1,113 @@
-'use client'
+'use client';
 
-import { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { forgotPassword } from '@/app/actions/auth-reset'
-import { toast } from 'sonner'
-import Link from 'next/link'
-import { useLanguage } from '@/lib/i18n'
+import { useState } from 'react';
+import { forgotPassword } from '@/app/actions/auth-reset';
+import { toast } from 'sonner';
+import Link from 'next/link';
+import { Mail, ArrowRight, Sparkles, ArrowLeft } from 'lucide-react';
+import { useLanguage } from '@/lib/i18n';
 
 export default function ForgotPasswordPage() {
-  const { t } = useLanguage()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [isDone, setIsSubmittingDone] = useState(false)
+  const { t } = useLanguage();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isDone, setIsDone] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    setIsSubmitting(true)
-    const formData = new FormData(e.currentTarget)
-    const result = await forgotPassword(formData.get('email') as string)
-    setIsSubmitting(false)
+    e.preventDefault();
+    setIsSubmitting(true);
+    const formData = new FormData(e.currentTarget);
+    const result = await forgotPassword(formData.get('email') as string);
+    setIsSubmitting(false);
 
     if (result.error) {
-      toast.error(result.error)
+      toast.error(result.error);
     } else {
-      setIsSubmittingDone(true)
+      setIsDone(true);
     }
-  }
+  };
 
   if (isDone) {
     return (
-      <main className="flex items-center justify-center md:h-screen p-4">
-        <Card className="w-full max-w-[400px]">
-          <CardHeader>
-            <CardTitle>{t('auth.checkYourEmail')}</CardTitle>
-            <CardDescription>
+      <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
+        <div className="space-y-6 text-center">
+          <div className="w-12 h-12 mx-auto rounded-2xl bg-[var(--color-brand-accent)]/10 flex items-center justify-center">
+            <Mail size={24} className="text-[var(--color-brand-accent)]" />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-serif font-bold">{t('auth.checkYourEmail')}</h1>
+            <p className="text-[var(--muted-foreground)] text-sm">
               {t('auth.resetEmailSent')}
-            </CardDescription>
-          </CardHeader>
-          <CardFooter>
-            <Link href="/login" className="w-full">
-              <Button variant="outline" className="w-full">{t('auth.returnToLogin')}</Button>
-            </Link>
-          </CardFooter>
-        </Card>
-      </main>
-    )
+            </p>
+          </div>
+          <Link href="/login" className="block">
+            <button className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98]">
+              <ArrowLeft size={14} />
+              {t('auth.returnToLogin')}
+            </button>
+          </Link>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <main className="flex items-center justify-center md:h-screen p-4">
-      <Card className="w-full max-w-[400px]">
-        <CardHeader>
-          <CardTitle>{t('auth.forgotPasswordTitle')}</CardTitle>
-          <CardDescription>
+    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
+      <div className="space-y-8">
+        <div className="text-center space-y-2">
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
+            {t('auth.forgotPasswordTitle')}
+          </h1>
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
             {t('auth.forgotPasswordDescription')}
-          </CardDescription>
-        </CardHeader>
-        <form onSubmit={handleSubmit}>
-          <CardContent className="space-y-4">
-            <div className="space-y-2">
-              <label htmlFor="email" className="text-sm font-medium">{t('auth.email')}</label>
-              <Input id="email" name="email" type="email" required placeholder="name@example.com" />
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
+              {t('auth.email')}
+            </label>
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Mail size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
+                id="email"
+                name="email"
+                type="email"
+                required
+                placeholder="name@example.com"
+              />
             </div>
-          </CardContent>
-          <CardFooter className="flex flex-col gap-4">
-            <Button type="submit" className="w-full" disabled={isSubmitting}>
-              {isSubmitting ? t('auth.sending') : t('auth.sendResetLink')}
-            </Button>
-            <Link href="/login" className="text-sm text-center underline">
-              {t('auth.backToLogin')}
-            </Link>
-          </CardFooter>
+          </div>
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98] disabled:opacity-50"
+          >
+            {isSubmitting ? (
+              <Sparkles size={16} className="animate-spin" />
+            ) : (
+              <>
+                {t('auth.sendResetLink')}
+                <ArrowRight size={14} />
+              </>
+            )}
+          </button>
         </form>
-      </Card>
-    </main>
-  )
+
+        <div className="text-center">
+          <Link
+            href="/login"
+            className="text-xs text-[var(--muted-foreground)] hover:text-[var(--color-brand-accent)] transition-colors flex items-center justify-center gap-1"
+          >
+            <ArrowLeft size={12} />
+            {t('auth.backToLogin')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
 }

memento-note/app/(auth)/layout.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { LanguageProvider } from '@/lib/i18n/LanguageProvider';
+import Link from 'next/link';
+import { Globe } from 'lucide-react';
 
 export default function AuthLayout({
   children,
@@ -9,10 +11,38 @@ export default function AuthLayout({
 }>) {
   return (
     <LanguageProvider>
-      <div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-zinc-950">
-        <div className="w-full max-w-md p-4">
-          {children}
-        </div>
+      <div className="min-h-screen bg-[#FDFCFB] dark:bg-[#0D0D0D] flex flex-col relative overflow-hidden">
+        <div className="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-[var(--color-brand-accent)]/5 blur-[120px] rounded-full pointer-events-none" />
+        <div className="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-[#D4A373]/5 blur-[120px] rounded-full pointer-events-none" />
+
+        <header className="p-6 md:p-8 flex justify-between items-center relative z-10">
+          <Link
+            href="/"
+            className="flex items-center gap-2 text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors group"
+          >
+            <div className="w-8 h-8 rounded-full border border-[var(--border)] flex items-center justify-center group-hover:border-[var(--color-brand-accent)] transition-colors">
+              <Globe size={14} className="group-hover:rotate-12 transition-transform" />
+            </div>
+          </Link>
+
+          <Link href="/" className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-[var(--foreground)] text-[var(--background)] rounded-xl flex items-center justify-center shadow-lg">
+              <span className="font-serif font-bold text-xl">M</span>
+            </div>
+            <span className="font-serif text-xl font-medium tracking-tight">Momento</span>
+          </Link>
+
+          <div className="w-8" />
+        </header>
+
+        <main className="flex-1 flex items-center justify-center p-4 md:p-6 relative z-10">
+          <div className="w-full max-w-md">
+            {children}
+            <p className="text-center mt-8 text-[9px] text-[var(--muted-foreground)] font-bold uppercase tracking-[0.3em] opacity-40 select-none">
+              © 2025 Momento Labs
+            </p>
+          </div>
+        </main>
       </div>
     </LanguageProvider>
   );

memento-note/app/(auth)/login/page.tsx

@@ -1,17 +1,9 @@
 import { LoginForm } from '@/components/login-form';
 import { getSystemConfig } from '@/lib/config';
- 
+
 export default async function LoginPage() {
   const config = await getSystemConfig();
-  
-  // Default to true unless explicitly disabled in DB or Env
   const allowRegister = config.ALLOW_REGISTRATION !== 'false' && process.env.ALLOW_REGISTRATION !== 'false';
 
-  return (
-    <main className="flex items-center justify-center md:h-screen">
-      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
-        <LoginForm allowRegister={allowRegister} />
-      </div>
-    </main>
-  );
+  return <LoginForm allowRegister={allowRegister} />;
 }

memento-note/app/(auth)/register/page.tsx

@@ -1,7 +1,7 @@
 import { RegisterForm } from '@/components/register-form';
 import { getSystemConfig } from '@/lib/config';
 import { redirect } from 'next/navigation';
- 
+
 export default async function RegisterPage() {
   const config = await getSystemConfig();
   const allowRegister = config.ALLOW_REGISTRATION !== 'false' && process.env.ALLOW_REGISTRATION !== 'false';
@@ -10,11 +10,5 @@ export default async function RegisterPage() {
     redirect('/login');
   }
 
-  return (
-    <main className="flex items-center justify-center md:h-screen">
-      <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
-        <RegisterForm />
-      </div>
-    </main>
-  );
+  return <RegisterForm />;
 }

memento-note/app/(auth)/reset-password/page.tsx

@@ -1,98 +1,156 @@
-'use client'
+'use client';
 
-import { useState, Suspense } from 'react'
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { resetPassword } from '@/app/actions/auth-reset'
-import { toast } from 'sonner'
-import { useSearchParams, useRouter } from 'next/navigation'
-import Link from 'next/link'
-import { useLanguage } from '@/lib/i18n'
+import { useState, Suspense } from 'react';
+import { resetPassword } from '@/app/actions/auth-reset';
+import { toast } from 'sonner';
+import { useSearchParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { Lock, ArrowRight, Sparkles, AlertCircle, ArrowLeft } from 'lucide-react';
+import { useLanguage } from '@/lib/i18n';
 
 function ResetPasswordForm() {
-  const searchParams = useSearchParams()
-  const router = useRouter()
-  const { t } = useLanguage()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  
-  const token = searchParams.get('token')
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { t } = useLanguage();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const token = searchParams.get('token');
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    if (!token) return
+    e.preventDefault();
+    if (!token) return;
 
-    const formData = new FormData(e.currentTarget)
-    const password = formData.get('password') as string
-    const confirm = formData.get('confirmPassword') as string
+    const formData = new FormData(e.currentTarget);
+    const password = formData.get('password') as string;
+    const confirm = formData.get('confirmPassword') as string;
 
     if (password !== confirm) {
-      toast.error(t('resetPassword.passwordMismatch'))
-      return
+      toast.error(t('resetPassword.passwordMismatch'));
+      return;
     }
 
-    setIsSubmitting(true)
-    const result = await resetPassword(token, password)
-    setIsSubmitting(false)
-    
+    setIsSubmitting(true);
+    const result = await resetPassword(token, password);
+    setIsSubmitting(false);
+
     if (result.error) {
-      toast.error(result.error)
+      toast.error(result.error);
     } else {
-      toast.success(t('resetPassword.success'))
-      router.push('/login')
+      toast.success(t('resetPassword.success'));
+      router.push('/login');
     }
-  }
+  };
 
   if (!token) {
     return (
-      <Card className="w-full max-w-[400px]">
-        <CardHeader>
-          <CardTitle>{t('resetPassword.invalidLinkTitle')}</CardTitle>
-          <CardDescription>{t('resetPassword.invalidLinkDescription')}</CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <Link href="/forgot-password" title={t('resetPassword.requestNewLink')} className="w-full">
-            <Button variant="outline" className="w-full">{t('resetPassword.requestNewLink')}</Button>
+      <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
+        <div className="space-y-6 text-center">
+          <div className="w-12 h-12 mx-auto rounded-2xl bg-red-500/10 flex items-center justify-center">
+            <AlertCircle size={24} className="text-red-500" />
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-2xl font-serif font-bold">{t('resetPassword.invalidLinkTitle')}</h1>
+            <p className="text-[var(--muted-foreground)] text-sm">{t('resetPassword.invalidLinkDescription')}</p>
+          </div>
+          <Link href="/forgot-password" className="block">
+            <button className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98]">
+              {t('resetPassword.requestNewLink')}
+            </button>
           </Link>
-        </CardFooter>
-      </Card>
-    )
+        </div>
+      </div>
+    );
   }
 
   return (
-    <Card className="w-full max-w-[400px]">
-      <CardHeader>
-        <CardTitle>{t('resetPassword.title')}</CardTitle>
-        <CardDescription>{t('resetPassword.description')}</CardDescription>
-      </CardHeader>
-      <form onSubmit={handleSubmit}>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <label htmlFor="password">{t('resetPassword.newPassword')}</label>
-            <Input id="password" name="password" type="password" required minLength={6} autoFocus />
+    <div className="bg-white dark:bg-[var(--background)]/50 border border-[var(--border)] p-8 md:p-10 rounded-[48px] shadow-2xl">
+      <div className="space-y-8">
+        <div className="text-center space-y-2">
+          <h1 className="text-2xl md:text-3xl font-serif font-bold">
+            {t('resetPassword.title')}
+          </h1>
+          <p className="text-[var(--muted-foreground)] text-sm font-light">
+            {t('resetPassword.description')}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
+              {t('resetPassword.newPassword')}
+            </label>
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Lock size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
+                id="password"
+                name="password"
+                type="password"
+                required
+                minLength={6}
+                autoFocus
+                placeholder="••••••••"
+              />
+            </div>
           </div>
-          <div className="space-y-2">
-            <label htmlFor="confirmPassword">{t('resetPassword.confirmNewPassword')}</label>
-            <Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
+
+          <div className="space-y-1.5">
+            <label className="text-[10px] uppercase tracking-widest font-bold text-[var(--muted-foreground)] px-4">
+              {t('resetPassword.confirmNewPassword')}
+            </label>
+            <div className="relative group">
+              <div className="absolute left-4 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] group-focus-within:text-[var(--color-brand-accent)] transition-colors">
+                <Lock size={16} />
+              </div>
+              <input
+                className="w-full bg-slate-50 dark:bg-white/5 border border-[var(--border)] rounded-2xl py-4 pl-12 pr-4 text-sm outline-none focus:border-[var(--color-brand-accent)] focus:ring-4 ring-[var(--color-brand-accent)]/5 transition-all"
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                minLength={6}
+                placeholder="••••••••"
+              />
+            </div>
           </div>
-        </CardContent>
-        <CardFooter>
-          <Button type="submit" className="w-full" disabled={isSubmitting}>
-            {isSubmitting ? t('resetPassword.resetting') : t('resetPassword.resetPassword')}
-          </Button>
-        </CardFooter>
-      </form>
-    </Card>
-  )
+
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="w-full bg-[var(--foreground)] text-[var(--background)] py-4 rounded-2xl font-bold uppercase tracking-[0.2em] text-[10px] flex items-center justify-center gap-3 transition-all hover:shadow-xl hover:shadow-black/10 active:scale-[0.98] disabled:opacity-50"
+          >
+            {isSubmitting ? (
+              <Sparkles size={16} className="animate-spin" />
+            ) : (
+              <>
+                {t('resetPassword.resetPassword')}
+                <ArrowRight size={14} />
+              </>
+            )}
+          </button>
+        </form>
+
+        <div className="text-center">
+          <Link
+            href="/login"
+            className="text-xs text-[var(--muted-foreground)] hover:text-[var(--color-brand-accent)] transition-colors flex items-center justify-center gap-1"
+          >
+            <ArrowLeft size={12} />
+            {t('auth.backToLogin')}
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
 }
 
 export default function ResetPasswordPage() {
-  const { t } = useLanguage()
+  const { t } = useLanguage();
   return (
-    <main className="flex items-center justify-center md:h-screen p-4">
-      <Suspense fallback={<div>{t('resetPassword.loading')}</div>}>
-        <ResetPasswordForm />
-      </Suspense>
-    </main>
-  )
+    <Suspense fallback={<div className="text-center text-sm text-[var(--muted-foreground)]">{t('resetPassword.loading')}</div>}>
+      <ResetPasswordForm />
+    </Suspense>
+  );
 }