design: refatorar topbar para visual neutro refinado

- bg-background + border-b (sem cor primária no fundo)
- Links: pill arredondado, hover bg-accent suave, sem underline
- Link ativo: pill bg-primary/10 text-primary
- Trigger aberto: mesma aparência do hover
- Mobile: mesmo padrão de ativo com pill primário

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/topbar/app-topbar.tsx

@@ -29,8 +29,8 @@ export function AppTopbar({
 	notificationsSnapshot,
 }: AppTopbarProps) {
 	return (
-		<header className="fixed top-0 left-0 right-0 z-50 bg-card h-14 shrink-0 flex items-center">
+		<header className="fixed top-0 left-0 right-0 z-50 bg-background border-b h-14 shrink-0 flex items-center">
-			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-3 h-full">
+			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-4 h-full">
 				{/* Logo */}
 				<Link
 					href="/dashboard"

components/topbar/mobile-nav-link.tsx

@@ -32,8 +32,8 @@ export function MobileNavLink({
 			onClick={onClick}
 			className={cn(
 				"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
-				"text-card-foreground hover:bg-accent",
+				"text-muted-foreground hover:text-foreground hover:bg-accent",
-				isActive && "bg-accent font-medium",
+				isActive && "bg-primary/10 text-primary font-medium",
 			)}
 		>
 			<span className="text-muted-foreground shrink-0">{icon}</span>

components/topbar/nav-styles.ts

@@ -1,20 +1,29 @@
+// Base para links diretos e triggers — pill arredondado
 export const linkBase =
-	"inline-flex h-9 items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors";
+	"inline-flex h-8 items-center justify-center rounded-full px-3 text-sm font-medium transition-all";
 
-export const linkIdle = "text-foreground hover:text-foreground hover:underline";
+// Estado inativo: muted, hover suave sem underline
+export const linkIdle =
+	"text-muted-foreground hover:text-foreground hover:bg-accent";
 
-export const linkActive = "text-primary";
+// Estado ativo: pill com cor primária
+export const linkActive = "bg-primary/10 text-primary";
 
+// Trigger do NavigationMenu — espelha linkBase + linkIdle, remove estilos padrão
 export const triggerClass = [
-	"text-foreground!",
+	"h-8!",
-	"bg-transparent!",
+	"rounded-full!",
-	"hover:bg-transparent!",
-	"hover:text-foreground!",
-	"hover:underline!",
-	"focus:bg-transparent!",
-	"focus:text-foreground!",
-	"data-[state=open]:bg-transparent!",
-	"data-[state=open]:text-foreground!",
-	"data-[state=open]:underline!",
 	"px-3!",
+	"py-0!",
+	"text-sm!",
+	"font-medium!",
+	"bg-transparent!",
+	"text-muted-foreground!",
+	"hover:text-foreground!",
+	"hover:bg-accent!",
+	"focus:text-foreground!",
+	"focus:bg-accent!",
+	"data-[state=open]:text-foreground!",
+	"data-[state=open]:bg-accent!",
+	"shadow-none!",
 ].join(" ");