feat: enhance layout styles for better responsiveness and visual consistency

public/global.css

@@ -56,6 +56,9 @@
 :global(body) {
   background: var(--color-bg);
   color: var(--color-text);
+  height: 100%;
+  margin: 0;
+  padding: 0;
 }
 
 body {

src/components/Header.svelte

@@ -1183,7 +1183,7 @@
   }
 
   .selected-brand {
-    background: #2196F3;
+    background: #27ae60;
     color: #fff;
     border: none;
     border-radius: 8px;
@@ -1202,7 +1202,7 @@
   }
 
   .selected-brand:hover {
-    background: #1976D2;
+    background: #219150;
   }
 
   .selected-brand .close {

src/components/List.svelte

@@ -73,14 +73,7 @@
     display: grid;
     grid-template-columns: repeat(auto-fill, 200px);
     gap: 1rem;
-    justify-content: space-between;
+    justify-content: space-evenly;
-  }
-
-  @media (max-width: 600px) {
-    .compact-view {
-      grid-template-columns: repeat(auto-fill, 160px);
-      gap: 0.75rem;
-    }
   }
 
   .no-results {

src/pages/Home.svelte

@@ -227,10 +227,17 @@
 </div>
 
 <style>
+  .container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
   main {
     padding: 0 1rem 2rem 1rem;
     max-width: 1400px;
     margin: 0 auto;
     width: 100%;
+    flex: 1;
   }
 </style>