style: UI refinements — navbar active state, card shadows, action card borders

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend-v2/src/app.css

@@ -304,11 +304,18 @@
   background: var(--card);
   border-radius: var(--radius);
   border: 1px solid var(--border);
-  box-shadow: var(--shadow-md);
+  box-shadow: var(--shadow-sm);
   padding: var(--card-pad);
+  transition: box-shadow 0.2s ease;
+}
+.module:hover {
+  box-shadow: var(--shadow-md);
 }
 .module.primary {
   padding: var(--card-pad-primary);
+  box-shadow: var(--shadow-md);
+}
+.module.primary:hover {
   box-shadow: var(--shadow-lg);
 }
 .module.flush { padding: 0; }
@@ -389,7 +396,7 @@
   gap: var(--sp-1.5);
 }
 .tab:hover { color: var(--text-1); background: var(--card-hover); }
-.tab.active { color: var(--text-1); background: var(--card); box-shadow: var(--shadow-xs); }
+.tab.active { color: var(--accent); background: var(--accent-dim); font-weight: 600; }
 
 .tab-badge {
   font-size: var(--text-xs);
@@ -417,6 +424,13 @@
 .page { padding: var(--sp-8) 0 var(--sp-20); }
 .page-header { margin-bottom: var(--section-gap); }
 .page-title {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  color: var(--text-1);
+  letter-spacing: -0.01em;
+  line-height: var(--leading-tight);
+}
+.page-subtitle {
   font-size: var(--text-sm);
   font-weight: 500;
   color: var(--text-3);

frontend-v2/src/lib/components/dashboard/DashboardActionCard.svelte

@@ -16,7 +16,7 @@
 	} = $props();
 </script>
 
-<a {href} class="action-card {size}">
+<a {href} class="action-card {size} {variant}">
 	<div class="action-card-left">
 		<div class="action-card-icon {variant}">
 			{#if variant === 'budget'}
@@ -44,14 +44,18 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: var(--sp-5) var(--sp-5);
-		border-radius: var(--radius-lg);
+		border-radius: var(--radius);
 		background: var(--card);
 		border: 1px solid var(--border);
-		box-shadow: var(--shadow-md);
+		border-left: 3px solid var(--border);
-		transition: all var(--transition);
+		box-shadow: var(--shadow-sm);
+		transition: all 0.2s ease;
 		cursor: pointer;
 		text-decoration: none;
 	}
+	.action-card.budget { border-left-color: var(--accent); }
+	.action-card.inventory { border-left-color: var(--error); }
+	.action-card.fitness { border-left-color: var(--success); }
 
 	.action-card:hover {
 		transform: translateY(-2px);

frontend-v2/src/lib/components/layout/Navbar.svelte

@@ -97,13 +97,13 @@
 		-webkit-backdrop-filter: blur(16px);
 	}
 	.navbar-inner {
-		max-width: 1200px;
+		max-width: 1400px;
 		margin: 0 auto;
 		display: flex;
 		align-items: center;
-		height: 56px;
+		height: 52px;
 		padding: 0 var(--sp-6);
-		gap: var(--sp-6);
+		gap: var(--sp-5);
 	}
 	.navbar-logo {
 		font-weight: 600;
@@ -123,19 +123,24 @@
 		flex: 1;
 	}
 	.navbar-link {
-		padding: 6px var(--sp-3);
+		padding: 5px var(--sp-3);
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius-md);
-		font-size: var(--text-base);
+		font-size: var(--text-sm);
 		font-weight: 500;
 		color: var(--text-3);
-		transition: all var(--transition);
+		transition: all 0.15s ease;
 		background: none;
 		border: none;
 		position: relative;
 		text-decoration: none;
+		letter-spacing: 0.01em;
+	}
+	.navbar-link:hover { color: var(--text-1); background: var(--card-hover); }
+	.navbar-link.active {
+		color: var(--accent);
+		background: var(--accent-dim);
+		font-weight: 600;
 	}
-	.navbar-link:hover { color: var(--text-1); background: var(--accent-dim); }
-	.navbar-link.active { color: var(--text-1); background: var(--accent-dim); }
 
 	.nav-dropdown { position: relative; }
 	.nav-dropdown-menu {

frontend-v2/src/routes/(app)/+page.svelte

@@ -67,7 +67,7 @@
 		</aside>
 		<div class="app-surface">
 		<div class="page-header">
-			<div class="page-title">Dashboard</div>
+			<div class="page-subtitle">Dashboard</div>
 			<div class="page-greeting">Good to see you, <strong>{userName}</strong></div>
 		</div>