feat(appearance): accent color, corners, wide layout and game art background

src/components/AppHeader.jsx

@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import {usePreferences} from '@/context/PreferencesContext.jsx';
 import {cn} from '@/lib/utils';
+import PageContainer from './PageContainer.jsx';
 
 const NAV_ITEMS = [
     {to: '/dashboard', labelKey: 'NAV.DASHBOARD', Icon: LayoutDashboard},
@@ -37,7 +38,7 @@ export default function AppHeader({isAuthenticated, onLogout}) {
 
     return (
         <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <div className="mx-auto flex h-16 max-w-5xl items-center gap-2 px-4 md:px-8">
+            <PageContainer className="flex h-16 items-center gap-2 px-4 md:px-8">
                 <Link to={isAuthenticated ? '/dashboard' : '/'} className="mr-2 flex items-center gap-2 font-bold tracking-tight whitespace-nowrap">
                     <span className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                         <Gamepad2 className="size-5"/>
@@ -95,7 +96,7 @@ export default function AppHeader({isAuthenticated, onLogout}) {
                         </>
                     )}
                 </div>
-            </div>
+            </PageContainer>
         </header>
     );
 }