support desktop mode

src/components/BottomNavigation.css

@@ -3,8 +3,6 @@
   bottom: 0;
   left: 0;
   right: 0;
-  max-width: 480px;
-  margin: 0 auto;
   height: 70px;
   background: var(--glass-bg);
   backdrop-filter: blur(16px);
@@ -61,3 +59,28 @@
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
 }
+
+@media (min-width: 768px) {
+  .bottom-nav {
+    top: 0;
+    bottom: 0;
+    right: auto;
+    width: 80px;
+    height: 100vh;
+    flex-direction: column;
+    justify-content: center;
+    gap: 40px;
+    border-top: none;
+    border-right: 1px solid var(--glass-border);
+    padding-bottom: 0;
+  }
+
+  .nav-fab {
+    margin-top: 0;
+    margin-left: 0;
+  }
+
+  .nav-item.active .nav-fab {
+    transform: translateX(2px);
+  }
+}

src/index.css

@@ -52,17 +52,22 @@ body {
 
 #root {
   width: 100%;
-  max-width: 480px; /* Mobile App feel */
   margin: 0 auto;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   position: relative;
   background-color: var(--bg-primary);
-  box-shadow: 0 0 20px rgba(0,0,0,0.5);
+  box-shadow: none;
   overflow-x: hidden;
 }
 
+@media (min-width: 768px) {
+  #root {
+    flex-direction: row;
+  }
+}
+
 /* Utilities */
 .glass-card {
   background: var(--glass-bg);
@@ -160,9 +165,20 @@ input, select, button {
 /* Page Container */
 .page-container {
   padding: 24px;
-  padding-bottom: 90px; /* Space for bottom nav */
+  padding-bottom: 90px; /* Space for bottom nav on mobile */
   flex: 1;
   overflow-y: auto;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .page-container {
+    padding: 40px;
+    padding-left: 120px; /* Space for sidebar */
+    padding-bottom: 40px;
+  }
 }
 
 /* Typography */

src/pages/AddMeal.css

@@ -26,3 +26,9 @@
 .mb-2 {
   margin-bottom: 8px;
 }
+
+@media (min-width: 768px) {
+  .add-meal-container .glass-card {
+    max-width: 600px;
+  }
+}

src/pages/Charts.css

@@ -29,3 +29,21 @@
   border-radius: 50%;
   display: inline-block;
 }
+
+/* Desktop Responsive Layout */
+@media (min-width: 768px) {
+  .charts-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    align-items: start;
+  }
+  
+  .charts-container > header {
+    grid-column: 1 / -1;
+  }
+  
+  .chart-wrapper, .pie-chart-wrapper {
+    height: 300px;
+  }
+}

src/pages/Dashboard.css

@@ -163,3 +163,28 @@
 .water-btn:active {
   transform: scale(0.95);
 }
+
+/* Desktop Responsive Layout */
+@media (min-width: 768px) {
+  .dashboard-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    align-items: start;
+  }
+
+  .dashboard-header {
+    grid-column: 1 / -1;
+  }
+
+  .diet-summary {
+    flex-direction: row;
+    gap: 40px;
+    padding: 20px 0;
+  }
+
+  .macros-list {
+    flex: 1;
+    justify-content: center;
+  }
+}

src/pages/Onboarding.css

@@ -117,3 +117,11 @@
 .macro-row:last-child {
   border-bottom: none;
 }
+
+@media (min-width: 768px) {
+  .onboarding-container .glass-card {
+    max-width: 600px;
+    margin: 0 auto;
+    width: 100%;
+  }
+}

src/pages/Settings.css

@@ -15,3 +15,9 @@
 .danger-btn:hover {
   background: rgba(239, 68, 68, 0.2);
 }
+
+@media (min-width: 768px) {
+  .settings-container .glass-card {
+    max-width: 600px;
+  }
+}