feat: improve progress display with gradient milestones

- Progress text now says "X of Y lessons completed" in all languages
- Each milestone badge shows a portion of the gradient based on position
- Progress bar shows full gradient, cropped to current progress percentage

🤖 Generated with [Claude Code](https://claude.com/claude-code)

src/app.js

@@ -317,8 +317,10 @@ let lastMilestoneReached = 0;
 function updateProgressDisplay() {
 	const stats = lessonEngine.getProgressStats();
 
-	// Update progress bar (now shows progress to next milestone)
+	// Update progress bar - shows overall progress with full gradient
-	elements.progressFill.style.width = `${stats.progressToNext}%`;
+	const progressPercent = stats.percentComplete || 1;
+	elements.progressFill.style.width = `${progressPercent}%`;
+	elements.progressFill.style.setProperty('--progress-percent', progressPercent);
 
 	// Update progress text - show completed of total lessons
 	elements.progressText.textContent = t("progressTextMilestone", {

src/i18n.js

@@ -40,7 +40,7 @@ const translations = {
 		language: "Language",
 		progress: "Progress",
 		progressText: "{percent}% Complete ({completed}/{total})",
-		progressTextMilestone: "{completed} of {total}",
+		progressTextMilestone: "{completed} of {total} lessons completed",
 		lessons: "Lessons",
 		settings: "Settings",
 		showHints: "Show Hints",
@@ -263,7 +263,7 @@ const translations = {
 		language: "Sprache",
 		progress: "Fortschritt",
 		progressText: "{percent}% abgeschlossen ({completed}/{total})",
-		progressTextMilestone: "{completed} von {total}",
+		progressTextMilestone: "{completed} von {total} Lektionen abgeschlossen",
 		lessons: "Lektionen",
 		settings: "Einstellungen",
 		showHints: "Hinweise anzeigen",
@@ -486,7 +486,7 @@ const translations = {
 		language: "Język",
 		progress: "Postęp",
 		progressText: "{percent}% ukończone ({completed}/{total})",
-		progressTextMilestone: "{completed} z {total}",
+		progressTextMilestone: "{completed} z {total} lekcji ukończonych",
 		lessons: "Lekcje",
 		settings: "Ustawienia",
 		showHints: "Pokaż podpowiedzi",
@@ -708,7 +708,7 @@ const translations = {
 		language: "Idioma",
 		progress: "Progreso",
 		progressText: "{percent}% completado ({completed}/{total})",
-		progressTextMilestone: "{completed} de {total}",
+		progressTextMilestone: "{completed} de {total} lecciones completadas",
 		lessons: "Lecciones",
 		settings: "Configuración",
 		showHints: "Mostrar pistas",
@@ -932,7 +932,7 @@ const translations = {
 		language: "اللغة",
 		progress: "التقدم",
 		progressText: "{percent}% مكتمل ({completed}/{total})",
-		progressTextMilestone: "{completed} من {total}",
+		progressTextMilestone: "{completed} من {total} درس مكتمل",
 		lessons: "الدروس",
 		settings: "الإعدادات",
 		showHints: "إظهار التلميحات",
@@ -1151,7 +1151,7 @@ const translations = {
 		language: "Мова",
 		progress: "Прогрес",
 		progressText: "{percent}% завершено ({completed}/{total})",
-		progressTextMilestone: "{completed} з {total}",
+		progressTextMilestone: "{completed} з {total} уроків завершено",
 		lessons: "Уроки",
 		settings: "Налаштування",
 		showHints: "Показувати підказки",

src/main.css

@@ -1008,7 +1008,8 @@ nav.sidebar-section {
 
 .progress-fill {
 	height: 100%;
-	background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
+	background: linear-gradient(90deg, #9163b8, #d45aa0, #1aafb8, #7c4dff);
+	background-size: calc(100% * 100 / var(--progress-percent, 100)) 100%;
 	border-radius: 4px;
 	transition: width 0.3s ease;
 	width: 0%;
@@ -1045,15 +1046,23 @@ nav.sidebar-section {
 }
 
 .milestone.reached {
-	background: linear-gradient(135deg, #9163b8, #7c4dff);
 	color: white;
 }
 
+/* Each milestone gets a portion of the gradient based on position */
+.milestone.reached:nth-child(1) { background: #9163b8; }
+.milestone.reached:nth-child(2) { background: linear-gradient(135deg, #9163b8, #a85dac); }
+.milestone.reached:nth-child(3) { background: linear-gradient(135deg, #9163b8, #d45aa0); }
+.milestone.reached:nth-child(4) { background: linear-gradient(135deg, #9163b8, #d45aa0, #e87aac); }
+.milestone.reached:nth-child(5) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8); }
+.milestone.reached:nth-child(6) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #4b8ecc); }
+.milestone.reached:nth-child(7) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff); }
+.milestone.reached:nth-child(8) { background: linear-gradient(135deg, #9163b8, #d45aa0, #1aafb8, #7c4dff); }
+
 .milestone.current {
-	background: linear-gradient(135deg, #d45aa0, #1aafb8);
 	color: white;
 	transform: scale(1.15);
-	box-shadow: 0 2px 8px rgba(212, 90, 160, 0.4);
+	box-shadow: 0 2px 8px rgba(145, 99, 184, 0.4);
 }
 
 .milestone.next {