diff --git a/src/App.css b/src/App.css
index 142de2f..c6fc662 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1895,3 +1895,129 @@ table tbody tr:hover {
   width: 100%;
   height: 100%;
 }
+
+/* ========================================
+   MOBILE UX ENHANCEMENTS
+   All styles below ONLY apply to mobile
+   ======================================== */
+
+@media (max-width: 768px) {
+  /* Better touch targets (min 44px for accessibility) */
+  .mobile-nav-item {
+    min-height: 44px;
+    min-width: 56px;
+  }
+  
+  .carousel-dot {
+    min-height: 32px;
+  }
+  
+  .toggle-switch button {
+    min-height: 28px;
+  }
+  
+  .control-group select,
+  .control-group input[type="date"] {
+    min-height: 44px;
+  }
+  
+  /* Smoother carousel transitions */
+  .carousel-track {
+    transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+  
+  /* Touch feedback */
+  .carousel-dot:active,
+  .mobile-nav-item:active,
+  .stat-card:active {
+    transform: scale(0.96);
+    transition: transform 100ms ease;
+  }
+  
+  /* Bottom nav active indicator */
+  .mobile-nav-item.active {
+    position: relative;
+  }
+  
+  .mobile-nav-item.active::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 20px;
+    height: 3px;
+    background: var(--primary);
+    border-radius: 0 0 3px 3px;
+  }
+  
+  /* Ensure chart title doesn't overlap with toggle */
+  .charts-carousel .chart-card h2 {
+    padding-right: 85px;
+  }
+  
+  /* Period banner stacks on mobile */
+  .period-display-banner {
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+  }
+  
+  .period-display-banner .period-box {
+    min-width: unset;
+  }
+  
+  .period-display-banner .period-value {
+    font-size: 1.25rem;
+  }
+  
+  /* Table scroll hint */
+  .table-container {
+    position: relative;
+  }
+  
+  .table-container::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 16px;
+    background: linear-gradient(to left, var(--surface), transparent);
+    pointer-events: none;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 375px) {
+  .dashboard,
+  .comparison {
+    padding: 12px;
+    padding-bottom: 80px;
+  }
+  
+  .page-title h1 {
+    font-size: 1.125rem;
+  }
+  
+  .stats-carousel .stat-value {
+    font-size: 1.375rem;
+  }
+  
+  .charts-carousel .chart-container {
+    height: 200px;
+  }
+  
+  .carousel-dot .dot-label {
+    font-size: 0.5625rem;
+  }
+  
+  .mobile-nav-item {
+    font-size: 0.5625rem;
+  }
+  
+  .mobile-nav-item svg {
+    width: 20px;
+    height: 20px;
+  }
+}