feat(onboarding): add theme-aware preview images for mode selection

Replace emoji placeholders with actual preview images for fluent and
legacy modes. Images are loaded from GitHub repository with automatic
theme detection (dark/light variants). Also fix CSS specificity for
mode card styling to ensure proper scoping.

src/components/features/onboarding/ModeSelection.ts

@@ -27,11 +27,11 @@ export class ModeSelection {
 			const body = el.createDiv({cls: "mode-card-body"});
 			const preview = body.createDiv({cls: ["mode-card-preview", "tg-noise-layer"]});
 			// Visual representation for each mode
-			if (mode === "fluent") {
-				preview.innerHTML = "✨"; // Sparkles for modern
-			} else {
-				preview.innerHTML = "☰"; // Menu icon for traditional
-			}
+			const isDark = document.body.classList.contains('theme-dark');
+			const theme = isDark ? '' : '-light';
+			const imageUrl = `https://raw.githubusercontent.com/Quorafind/Obsidian-Task-Progress-Bar/master/media/${mode}${theme}.png`;
+
+			preview.innerHTML = `<img src="${imageUrl}" alt="${mode} mode preview" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px;">`;
 			const description = body.createDiv({cls: "mode-card-desc"});
 			description.setText(desc);
 
@@ -51,13 +51,13 @@ export class ModeSelection {
 
 		card(
 			"fluent",
-			t("Fluent (Modern & Dynamic)"),
+			t("Fluent"),
 			t("New information architecture, navigation and interaction, with more elegant styles and animations."),
 			"sparkles"
 		);
 		card(
 			"legacy",
-			t("Legacy (Classic & Stable)"),
+			t("Legacy"),
 			t("Continue the previous interface and interaction style, maintaining a familiar user experience."),
 			"layout"
 		);

src/styles/onboarding.css

@@ -394,16 +394,6 @@
 	margin-bottom: var(--onboarding-spacing);
 }
 
-.onboarding-modal .mode-card,
-.onboarding-view .mode-card {
-	display: flex;
-	align-items: center;
-	gap: var(--size-4-3);
-	padding: var(--size-4-3);
-	background: var(--background-secondary);
-	border-radius: var(--onboarding-border-radius);
-}
-
 .onboarding-modal .mode-icon,
 .onboarding-view .mode-icon {
 	--icon-size: var(--size-4-4);
@@ -1229,7 +1219,7 @@
 	margin: var(--onboarding-spacing) 0;
 }
 
-.mode-card {
+.onboarding-modal .mode-card, .onboarding-view .mode-card {
 	border: 1px solid var(--background-modifier-border);
 	border-radius: var(--onboarding-border-radius);
 	padding: var(--onboarding-spacing);