Refina tema global e experiencia visual de auth

src/shared/components/month-picker/month-navigation.tsx

@@ -42,7 +42,7 @@ export default function MonthNavigation() {
 	};
 
 	return (
-		<Card className="flex w-full flex-row p-4 sticky top-16 z-10 backdrop-blur-sm bg-card/30">
+		<Card className="sticky top-16 z-10 flex w-full flex-row p-4 backdrop-blur-md bg-card/5">
 			<div className="flex items-center gap-1">
 				<NavigationButton
 					direction="left"

src/shared/components/navigation/navbar/app-navbar.tsx

@@ -4,6 +4,7 @@ import { AnimatedThemeToggler } from "@/shared/components/animated-theme-toggler
 import { Logo } from "@/shared/components/logo";
 import { NotificationBell } from "@/shared/components/navigation/navbar/notification-bell";
 import { RefreshPageButton } from "@/shared/components/refresh-page-button";
+import { DotPattern } from "@/shared/components/ui/dot-pattern";
 import { NavMenu } from "./nav-menu";
 import { NavbarUser } from "./navbar-user";
 
@@ -29,17 +30,26 @@ export function AppNavbar({
 	notificationsSnapshot,
 }: AppNavbarProps) {
 	return (
-		<header className="fixed top-0 left-0 right-0 z-50 flex h-16 shrink-0 items-center bg-primary">
-			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-4 h-full">
-				{/* Logo */}
+		<header className="fixed top-0 left-0 right-0 z-50 flex h-16 shrink-0 items-center border-b border-black/6 bg-primary">
+			<div className="pointer-events-none absolute inset-0 overflow-hidden">
+				<DotPattern
+					width={20}
+					height={20}
+					cx={1.25}
+					cy={1.25}
+					cr={1.25}
+					className="text-black/10 mask-[linear-gradient(to_right,transparent,black_6%,black_60%,transparent)]"
+				/>
+				<div className="absolute inset-0 bg-linear-to-b from-white/8 via-transparent to-black/6" />
+			</div>
+
+			<div className="relative z-10 mx-auto flex h-full w-full max-w-8xl items-center gap-4 px-4">
 				<Link href="/dashboard" className="shrink-0 mr-1">
 					<Logo variant="compact" invertTextOnDark={false} />
 				</Link>
 
-				{/* Navigation */}
 				<NavMenu />
 
-				{/* Right-side actions */}
 				<div className="ml-auto flex items-center gap-2">
 					<NotificationBell
 						notifications={notificationsSnapshot.notifications}
@@ -51,7 +61,6 @@ export function AppNavbar({
 					<AnimatedThemeToggler className={navbarActionClassName} />
 				</div>
 
-				{/* User avatar */}
 				<NavbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
 			</div>
 		</header>

src/shared/components/navigation/navbar/nav-styles.ts

@@ -1,6 +1,6 @@
 // Base para links diretos e triggers — pill arredondado
 export const linkBase =
-	"inline-flex h-8 items-center justify-center rounded-full px-3 text-sm font-medium transition-all lowercase";
+	"inline-flex h-8 items-center justify-center rounded-md px-2 text-sm font-medium transition-all lowercase";
 
 // Estado inativo: muted, hover suave sem underline
 export const linkIdle = "text-black/75 hover:bg-black/10 hover:text-black";
@@ -11,8 +11,8 @@ export const linkActive = "bg-black/10 text-black";
 // Trigger do NavigationMenu — espelha linkBase + linkIdle, remove estilos padrão
 export const triggerClass = [
 	"h-8!",
-	"rounded-full!",
-	"px-3!",
+	"rounded-md!",
+	"px-2!",
 	"py-0!",
 	"text-sm!",
 	"font-medium!",

src/shared/components/ui/dot-pattern.tsx

@@ -0,0 +1,49 @@
+import type { ComponentProps } from "react";
+import { cn } from "@/shared/utils/ui";
+
+type DotPatternProps = ComponentProps<"svg"> & {
+	width?: number;
+	height?: number;
+	x?: number;
+	y?: number;
+	cx?: number;
+	cy?: number;
+	cr?: number;
+};
+
+export function DotPattern({
+	className,
+	width = 18,
+	height = 18,
+	x = 0,
+	y = 0,
+	cx = 1.5,
+	cy = 1.5,
+	cr = 1.5,
+	...props
+}: DotPatternProps) {
+	const patternId = `dot-pattern-${width}-${height}-${x}-${y}-${cx}-${cy}-${cr}`;
+
+	return (
+		<svg
+			aria-hidden
+			className={cn("absolute inset-0 h-full w-full", className)}
+			{...props}
+		>
+			<title>Dot pattern background</title>
+			<defs>
+				<pattern
+					id={patternId}
+					width={width}
+					height={height}
+					patternUnits="userSpaceOnUse"
+					x={x}
+					y={y}
+				>
+					<circle cx={cx} cy={cy} r={cr} fill="currentColor" />
+				</pattern>
+			</defs>
+			<rect width="100%" height="100%" fill={`url(#${patternId})`} />
+		</svg>
+	);
+}