feat(ui): implement Bento Grid design system

- Add Urbanist font (replace Inter)
- Add CSS variables: --bento-radius, --bento-gap, --bento-padding
- Add Tailwind extend: rounded-bento, rounded-4xl, spacing.bento
- Create BentoCard component with size variants (sm/md/lg/xl)
- Add .bento-card, .bento-card-hover, .bento-card-glow classes
- Add .bento-grid container with responsive columns
- Implement floating TabBar (margin 16px, shadow, pill active state)
- Apply bento styles to Dashboard cards
- Support both dark and light themes

src/styles/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -8,6 +8,14 @@
   :root {
     --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
 
+    /* Bento Design System */
+    --bento-radius: 24px;
+    --bento-radius-lg: 32px;
+    --bento-gap: 16px;
+    --bento-gap-lg: 24px;
+    --bento-padding: 24px;
+    --bento-padding-lg: 32px;
+
     /* Theme colors - RGB format for opacity support */
     /* Dark palette (RGB values) */
     --color-dark-50: 248, 250, 252;
@@ -327,6 +335,63 @@
 }
 
 @layer components {
+  /* ========== BENTO DESIGN SYSTEM ========== */
+
+  .bento-card {
+    @apply bg-dark-900/70 border border-dark-700/40 
+           transition-all duration-300 ease-smooth;
+    border-radius: var(--bento-radius);
+    padding: var(--bento-padding);
+    transform: translateZ(0);
+  }
+
+  @media (min-width: 1024px) {
+    .bento-card {
+      @apply bg-dark-900/50 backdrop-blur-sm;
+    }
+  }
+
+  .bento-card-hover {
+    @apply bento-card cursor-pointer
+           hover:bg-dark-800/60 hover:border-dark-600/50 
+           hover:shadow-lg hover:scale-[1.01] active:scale-[0.99];
+  }
+
+  .bento-card-glow {
+    @apply bento-card hover:shadow-glow hover:border-accent-500/30 hover:scale-[1.01];
+  }
+
+  .bento-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--bento-gap);
+  }
+
+  @media (min-width: 768px) {
+    .bento-grid {
+      grid-template-columns: repeat(4, 1fr);
+      gap: var(--bento-gap-lg);
+    }
+  }
+
+  .light .bento-card {
+    @apply bg-white/90 border-champagne-300/50 shadow-sm;
+  }
+
+  @media (min-width: 1024px) {
+    .light .bento-card {
+      @apply bg-white/80 backdrop-blur-sm;
+    }
+  }
+
+  .light .bento-card-hover {
+    @apply hover:bg-white hover:border-champagne-400/50 hover:shadow-md;
+  }
+
+  .light .bento-card-glow {
+    @apply hover:shadow-lg hover:border-accent-400/40;
+  }
+
   /* ========== DARK THEME COMPONENTS (default) ========== */
 
   /* Cards - Dark (optimized for mobile) */
@@ -493,12 +558,17 @@
     @apply nav-item text-accent-400 bg-accent-500/10;
   }
 
-  /* Bottom nav - Dark (optimized for mobile) */
   .bottom-nav {
-    @apply fixed bottom-0 left-0 right-0 z-50
-           bg-dark-900/95 border-t border-dark-800/50
-           safe-area-pb;
+    @apply fixed z-50 bg-dark-900/95;
+    bottom: 16px;
+    left: 16px;
+    right: 16px;
+    border-radius: var(--bento-radius);
+    padding: 8px 4px;
+    padding-bottom: calc(8px + var(--safe-area-inset-bottom));
     transform: translateZ(0);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4),
+                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
   }
 
   @media (min-width: 1024px) {
@@ -508,12 +578,17 @@
   }
 
   .bottom-nav-item {
-    @apply flex flex-col items-center justify-center py-2 px-2 flex-1 min-w-[60px]
-           text-dark-500 transition-colors duration-200 shrink-0;
+    @apply flex flex-col items-center justify-center py-2.5 px-3 flex-1 min-w-[56px]
+           text-dark-500 transition-all duration-200 shrink-0 rounded-2xl;
+  }
+
+  .bottom-nav-item:hover {
+    @apply text-dark-300;
   }
 
   .bottom-nav-item-active {
-    @apply bottom-nav-item text-accent-400;
+    @apply flex flex-col items-center justify-center py-2.5 px-3 flex-1 min-w-[56px]
+           text-accent-400 bg-accent-500/15 rounded-2xl transition-all duration-200 shrink-0;
   }
 
   /* Divider - Dark */
@@ -668,17 +743,28 @@
     @apply text-champagne-800 bg-champagne-200/70;
   }
 
-  /* Bottom nav - Light */
   .light .bottom-nav {
-    @apply bg-white/90 backdrop-blur-xl border-t border-champagne-200;
+    @apply bg-white/95;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1),
+                0 0 0 1px rgba(0, 0, 0, 0.05);
+  }
+
+  @media (min-width: 1024px) {
+    .light .bottom-nav {
+      @apply bg-white/80 backdrop-blur-xl;
+    }
   }
 
   .light .bottom-nav-item {
     @apply text-champagne-500;
   }
 
+  .light .bottom-nav-item:hover {
+    @apply text-champagne-700;
+  }
+
   .light .bottom-nav-item-active {
-    @apply text-champagne-800;
+    @apply text-champagne-800 bg-champagne-300/40;
   }
 
   /* Divider - Light */