recipes: fix compact card tag styling and add filter placeholder for CLS

- Fix g-tag dark mode hover text disappearing (explicit background-color)
- Scope compact card tag styles to avoid global/scoped CSS flash on load
- Add placeholder div to prevent layout shift when FilterPanel hydrates
- Improve LogicModeToggle contrast in light mode (nord4 → nord3/nord1)
- Bump compact card recipe name font-size to 1.1rem

src/app.css

@@ -313,14 +313,13 @@ a:focus-visible {
 .g-tag,
 .g-tag:visited,
 .g-tag:link {
-	font-size: 1.1rem;
 	padding: 0.25em 1em;
 	border-radius: var(--radius-pill);
 	background-color: var(--nord5);
 	color: var(--nord0);
 	text-decoration: none;
 	cursor: pointer;
-	transition: var(--transition-fast);
+	transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
 	box-shadow: var(--shadow-sm);
 	border: none;
 	display: inline-block;
@@ -341,6 +340,7 @@ a:focus-visible {
 	}
 	.g-tag:hover,
 	.g-tag:focus-visible {
+		background-color: var(--nord8);
 		color: var(--nord0);
 	}
 }

src/lib/components/recipes/CompactCard.svelte

@@ -67,7 +67,7 @@
 	flex: 1;
 }
 .name {
-	font-size: 0.95rem;
+	font-size: 1.1rem;
 	font-weight: 600;
 	line-height: 1.3;
 	margin: 0;
@@ -81,8 +81,37 @@
 	z-index: 2;
 }
 .tag {
-	font-size: 0.7rem;
-	padding: 0.15em 0.6em;
+	font-size: 0.9rem;
+	padding: 0.15rem 0.55rem;
+	border-radius: var(--radius-pill);
+	background-color: var(--nord5);
+	color: var(--nord3);
+	text-decoration: none;
+	cursor: pointer;
+	transition: transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
+	box-shadow: var(--shadow-sm);
+	border: none;
+	display: inline-block;
+}
+.tag:hover,
+.tag:focus-visible {
+	transform: scale(1.05);
+	background-color: var(--nord8);
+	box-shadow: var(--shadow-hover);
+	color: var(--nord0);
+}
+@media (prefers-color-scheme: dark) {
+	.tag,
+	.tag:visited,
+	.tag:link {
+		background-color: var(--nord0);
+		color: var(--nord4);
+	}
+	.tag:hover,
+	.tag:focus-visible {
+		background-color: var(--nord8);
+		color: var(--nord0);
+	}
 }
 .icon {
 	position: absolute;
@@ -126,7 +155,7 @@
 		{#if recipe.tags?.length}
 			<div class="tags">
 				{#each recipe.tags as tag (tag)}
-					<a href="{routePrefix}/tag/{tag}" class="tag g-tag">{tag}</a>
+					<a href="{routePrefix}/tag/{tag}" class="tag">{tag}</a>
 				{/each}
 			</div>
 		{/if}

src/lib/components/recipes/LogicModeToggle.svelte

@@ -41,7 +41,7 @@
 
 	.filter-label {
 		font-size: 0.9rem;
-		color: var(--nord2);
+		color: var(--nord1);
 		font-weight: 600;
 		margin-bottom: 0.25rem;
 		text-align: center;
@@ -65,7 +65,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.85rem;
-		color: var(--nord4);
+		color: var(--nord3);
 		font-weight: 600;
 	}
 

src/lib/components/recipes/Search.svelte

@@ -361,6 +361,20 @@ scale: 0.8 0.8;
   width: 100%;
   height: 100%;
 }
+/* Reserves space for FilterPanel before JS hydrates, preventing layout shift. */
+.filter-placeholder {
+  display: block;
+  width: 900px;
+  max-width: 95vw;
+  margin: 1rem auto 2rem;
+  height: 3.85rem;
+}
+@media (max-width: 968px) {
+  .filter-placeholder {
+    width: auto;
+    height: calc(2.05rem + 2px);
+  }
+}
 </style>
 <form class="search" method="get" action={buildSearchUrl('')} onsubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>
   {#if selectedCategory}<input type="hidden" name="category" value={selectedCategory} />{/if}
@@ -407,4 +421,6 @@ scale: 0.8 0.8;
     onFavoritesToggle={handleFavoritesToggle}
     onLogicModeToggle={handleLogicModeToggle}
   />
+{:else}
+  <div class="filter-placeholder"></div>
 {/if}

src/routes/[recipeLang=recipeLang]/[name]/+page.svelte

@@ -139,6 +139,7 @@ h1{
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 1em;
+	font-size: 1.1rem;
 }
 .tags h2,
 h2.section-label{