fix: UI polish across navbar, payment modal, calendar, and dialog

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/lib/components/layout/NavBar.svelte

@@ -188,7 +188,7 @@
 	<!-- Mobile Menu -->
 	{#if mobileMenuOpen}
 		<div class="border-b border-gray-200 bg-background md:hidden">
-			<div class="space-y-1 px-2 pt-2 pb-3">
+			<div class="space-y-1 px-4 pt-2 pb-3">
 				{#each links as link}
 					{#if canShow(link)}
 						{#if isLoading}
@@ -196,7 +196,7 @@
 						{:else}
 							<a
 								href={link.href}
-								class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
+								class="block rounded px-3 py-3 text-center text-primary hover:text-gray-800"
 							>
 								{link.label}
 							</a>
@@ -207,11 +207,11 @@
 				{#if isAuthenticated}
 					<a
 						href="/notifications"
-						class="flex items-center justify-center gap-2 rounded px-3 py-2 text-primary hover:text-gray-800"
+						class="flex items-center justify-center gap-2 rounded px-3 py-3 text-primary hover:text-gray-800"
 					>
 						<span>Notifications</span>
 						{#if unreadCount > 0}
-							<span class="flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">
+							<span class="flex h-6 w-6 min-w-6 items-center justify-center rounded-full bg-red-500 px-1.5 text-[10px] font-bold text-white">
 								{unreadCount > 9 ? '9+' : unreadCount}
 							</span>
 						{/if}