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>
+  );
 }