Unify page layouts, compact headers and shared UI styling

frontend/app/login/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState, type FormEvent } from 'react'
 import { getApiBase, setToken } from '../lib/auth'
-import MagentMark from '../ui/MagentMark'
+import AuthLayout from '../ui/AuthLayout'
 
 type LoginMode = 'jellyfin' | 'local'
 type LoginOptions = { showJellyfinLogin: boolean; showLocalLogin: boolean; showForgotPassword: boolean; showSignupLink: boolean }
@@ -77,10 +77,9 @@ export default function LoginPage() {
   }
 
   return (
-    <main className="login-page">
-      <section className="login-card" aria-labelledby="login-title">
-        <div className="login-brand"><a href="/login" aria-label="Magent sign in"><MagentMark /><span>Magent</span></a><span className="login-beta">Beta</span></div>
-        <header><h1 id="login-title">Welcome back.</h1><p>Sign in to your media workspace.</p></header>
+    <AuthLayout title="Welcome back." description="Sign in to your media workspace." footer={
+      optionsReady && options.showSignupLink && <>Have an invite? <a href="/signup">Create an account <span aria-hidden="true">↗</span></a></>
+    }>
         {banner && <p className={`account-notice ${['error', 'maintenance'].includes(banner.tone) ? 'is-error' : 'is-status'}`} role="status">{banner.message}</p>}
         {optionsReady && options.showJellyfinLogin && options.showLocalLogin && <div className="login-methods" role="group" aria-label="Sign-in account">
           <button type="button" aria-pressed={selectedMode === 'jellyfin'} disabled={loading} onClick={() => { setMode('jellyfin'); setError('') }}>Grizzlyflix</button>
@@ -102,9 +101,6 @@ export default function LoginPage() {
             <button type="submit" className="account-primary login-submit" disabled={loading}>{loading ? 'Signing in…' : 'Sign in'}<span aria-hidden="true">→</span></button>
           </form>
         )}
-        {optionsReady && options.showSignupLink && <footer>Have an invite? <a href="/signup">Create an account <span aria-hidden="true">↗</span></a></footer>}
-      </section>
-      <p className="login-credit">Grizzlyflix · Request. Watch. Enjoy.</p>
-    </main>
+    </AuthLayout>
   )
 }