fmt

src/App.svelte

@@ -135,7 +135,7 @@
     flex-direction: column;
     height: 100vh;
     height: 100dvh; /* Dynamic viewport height for mobile */
-    background: #f5f5f5;
+    background: white;
     overflow: hidden;
   }
   

src/lib/components/Layout/AppHeader.svelte

@@ -45,8 +45,6 @@
     align-items: center;
     padding: 1rem;
     padding-top: calc(1rem + env(safe-area-inset-top, 0));
-    background: white;
-    border-bottom: 1px solid #eee;
     position: sticky;
     top: 0;
     z-index: 100;

src/lib/components/Layout/TabBar.svelte

@@ -51,8 +51,8 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background: white;
-    border-top: 1px solid #eee;
+    background: #f5f5f5;
+    border-top: 1px solid #e0e0e0;
     z-index: 1000;
     padding-bottom: env(safe-area-inset-bottom, 0);
   }
@@ -78,12 +78,12 @@
   
   .icon-wrapper {
     position: relative;
-    width: 56px;
-    height: 56px;
+    width: 48px;
+    height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 12px;
+    border-radius: 10px;
   }
   
   .tab-item.active .icon-wrapper {
@@ -91,10 +91,10 @@
   }
   
   .tab-icon {
-    width: 40px;
-    height: 40px;
+    width: 32px;
+    height: 32px;
     object-fit: contain;
-    filter: grayscale(100%) brightness(0.5);
+    filter: grayscale(100%) brightness(0.7);
   }
   
   .tab-item.active .tab-icon {