fix: resolve all 40 Svelte dev warnings for clean startup

- Add $state() to 4 reactive variables (guestMode, emailInput, passwordInput, searchInputElement)
- Replace 3 deprecated <svelte:component> with direct component references
- Fix 8 a11y issues: add ARIA roles, tabindex, keyboard handlers to click-handler divs
- Remove 22 unused CSS selectors across 8 shared-ui components

Zero warnings on dev startup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/shared-ui/src/navigation/GlobalSpotlight.svelte

@@ -291,10 +291,19 @@
 </script>
 
 {#if open}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="spotlight-overlay" onclick={onClose} onkeydown={handleKeydown}>
+	<div
+		class="spotlight-overlay"
+		onclick={onClose}
+		onkeydown={handleKeydown}
+		role="presentation"
+		tabindex="-1"
+	>
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="spotlight-modal" onclick={(e) => e.stopPropagation()}>
+		<div
+			class="spotlight-modal"
+			onclick={(e) => e.stopPropagation()}
+			onkeydown={(e) => e.stopPropagation()}
+		>
 			<!-- Search input -->
 			<div class="spotlight-input-wrapper">
 				<svg class="spotlight-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">

packages/shared-ui/src/navigation/PillDropdown.svelte

@@ -591,11 +591,6 @@
 		border-color: var(--color-primary-800, rgba(59, 130, 246, 0.4));
 	}
 
-	.split-icon {
-		width: 0.875rem;
-		height: 0.875rem;
-	}
-
 	/* Footer for custom content (e.g., a11y toggles) */
 	.dropdown-footer {
 		animation: fanIn 0.15s ease-out forwards;

packages/shared-ui/src/navigation/PillTabGroup.svelte

@@ -208,12 +208,6 @@
 		background: rgba(255, 255, 255, 0.15);
 	}
 
-	.tab-icon {
-		width: 1.125rem;
-		height: 1.125rem;
-		flex-shrink: 0;
-	}
-
 	.tab-label {
 		font-size: 0.8125rem;
 		font-weight: 500;

packages/shared-ui/src/navigation/PillTimeRangeSelector.svelte

@@ -273,12 +273,6 @@
 			0 4px 6px -2px hsl(var(--color-foreground) / 0.05);
 	}
 
-	.pill-icon {
-		width: 1rem;
-		height: 1rem;
-		flex-shrink: 0;
-	}
-
 	.pill-label {
 		font-size: 0.8125rem;
 	}
@@ -316,17 +310,6 @@
 		color: hsl(var(--color-primary));
 	}
 
-	.chevron-icon {
-		width: 0.75rem;
-		height: 0.75rem;
-		transition: transform 0.2s;
-		margin-left: 0.125rem;
-	}
-
-	.chevron-icon.rotated {
-		transform: rotate(180deg);
-	}
-
 	.backdrop {
 		position: fixed;
 		inset: 0;

packages/shared-ui/src/navigation/PillViewSwitcher.svelte

@@ -174,12 +174,6 @@
 		cursor: not-allowed;
 	}
 
-	.switcher-icon {
-		width: 1rem;
-		height: 1rem;
-		flex-shrink: 0;
-	}
-
 	.switcher-label {
 		line-height: 1;
 	}

packages/shared-ui/src/navigation/TagStrip.svelte

@@ -381,22 +381,6 @@
 		transform: scale(0.95) !important;
 	}
 
-	/* DnD: Item hovering over tag pill */
-	.tag-drop-highlight {
-		transform: scale(1.15) !important;
-		background: var(--tag-color) !important;
-		border-color: var(--tag-color) !important;
-		box-shadow: 0 0 16px color-mix(in srgb, var(--tag-color) 40%, transparent) !important;
-	}
-
-	.tag-drop-highlight .tag-dot {
-		background-color: white !important;
-	}
-
-	.tag-drop-highlight .tag-name {
-		color: white !important;
-	}
-
 	/* DnD: Success flash after drop */
 	:global(.tag-pill.mana-passive-zone-success) {
 		animation: tag-drop-success 400ms ease-out;

packages/shared-ui/src/navigation/expandable-toolbar/ExpandableToolbar.svelte

@@ -181,21 +181,6 @@
 		background: hsl(var(--color-muted));
 	}
 
-	.toolbar-fab.active .fab-icon {
-		color: hsl(var(--color-primary));
-	}
-
-	.fab-icon {
-		width: 1.5rem;
-		height: 1.5rem;
-		color: hsl(var(--color-muted-foreground));
-		transition: color 0.2s ease;
-	}
-
-	.toolbar-fab:hover .fab-icon {
-		color: hsl(var(--color-foreground));
-	}
-
 	.toolbar-divider {
 		width: 1px;
 		height: 1.5rem;