Unify page layouts, compact headers and shared UI styling

frontend/app/forgot-password/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import BrandingLogo from '../ui/BrandingLogo'
+import AuthLayout from '../ui/AuthLayout'
 import { getApiBase } from '../lib/auth'
 
 export default function ForgotPasswordPage() {
@@ -46,14 +46,8 @@ export default function ForgotPasswordPage() {
   }
 
   return (
-    <main className="card auth-card">
-      <BrandingLogo className="brand-logo brand-logo--login" />
-      <h1>Forgot password</h1>
-      <p className="lede">
-        Enter the username or email you use for Jellyfin or Magent. If the account is eligible, a reset link
-        will be emailed to you.
-      </p>
-      <form className="auth-form" onSubmit={submit}>
+    <AuthLayout title="Forgot password?" description="Enter your username or email to request a reset link.">
+      <form className="account-form login-form auth-flow-form" onSubmit={submit}>
         <label>
           Username or email
           <input
@@ -63,10 +57,10 @@ export default function ForgotPasswordPage() {
             placeholder="you@example.com"
           />
         </label>
-        {error && <div className="error-banner">{error}</div>}
-        {status && <div className="status-banner">{status}</div>}
+        {error && <div className="account-notice is-error" role="alert">{error}</div>}
+        {status && <div className="account-notice is-status" role="status">{status}</div>}
         <div className="auth-actions">
-          <button type="submit" disabled={loading}>
+          <button type="submit" className="account-primary" disabled={loading}>
             {loading ? 'Sending reset link…' : 'Send reset link'}
           </button>
         </div>
@@ -74,6 +68,6 @@ export default function ForgotPasswordPage() {
           Back to sign in
         </button>
       </form>
-    </main>
+    </AuthLayout>
   )
 }