feat: enhance styling and structure for color switcher; move common styles to global.css

src/components/Grid.svelte

@@ -186,6 +186,8 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     justify-content: flex-end;
   }
 
+  /* Removed unused styles */
+
   .logo-title-row {
     display: flex;
     align-items: center;
@@ -221,4 +223,17 @@ $: getLogoThemeColor = logo => getDefaultLogoColor(logo.colors, theme);
     overflow: hidden;
     padding: 0;
   }
+
+  .logo-card {
+    background: var(--color-card);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
+    min-width: 320px;
+  }
+
+  .logo-grid .logo-item .logo-image {
+    width: 100%;
+  }
 </style>

src/components/List.svelte

@@ -278,7 +278,9 @@
     align-items: center;
     justify-content: space-between;
     gap: 0.5em;
-  }  .set-circle {
+  }
+
+  .set-circle {
     display: flex;
     align-items: center;
     justify-content: center;

src/components/Preview.svelte

@@ -387,21 +387,7 @@
     gap: 0.5rem;
   }
 
-  .set-circle {
-    background: var(--color-border);
-    color: var(--color-text);
-    font-size: 10px;
-    font-weight: bold;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Dark theme variation */
-  :global(.dark-theme) .set-circle {
-    background: #444;
-    color: #eee;
-  }
+  /* Moved to global.css */
 
   .preview-actions-container {
     margin-top: 2rem;
@@ -504,4 +490,22 @@
     resize: none;
     overflow-y: auto;
   }
+
+  /* Moved common color switcher styles to global.css */
+
+  .logo-details {
+    margin-top: 1rem;
+    color: var(--color-text);
+  }
+
+  .logo-details p {
+    margin: 0.5rem 0;
+    font-size: 0.9rem;
+    color: var(--color-text);
+  }
+
+  .logo-details strong,
+  .logo-details span {
+    color: var(--color-text);
+  }
 </style>