diff --git a/src/app.js b/src/app.js
index b4f10c9..4a86d00 100644
--- a/src/app.js
+++ b/src/app.js
@@ -479,7 +479,11 @@ function loadCurrentLesson() {
// Update level indicator
renderLevelIndicator(elements.levelIndicator, engineState.lessonIndex + 1, engineState.totalLessons);
- renderLevelIndicator(elements.headerLevelPill, engineState.lessonIndex + 1, engineState.totalLessons);
+ // Header pill shows module name + level
+ if (elements.headerLevelPill && engineState.module) {
+ const label = t("lessonLabel");
+ elements.headerLevelPill.innerHTML = ` `;
+ }
// Update active lesson in sidebar
updateActiveLessonInSidebar(engineState.module.id, engineState.lessonIndex);
diff --git a/src/main.css b/src/main.css
index f638983..fc3ac31 100644
--- a/src/main.css
+++ b/src/main.css
@@ -151,6 +151,15 @@ kbd {
margin-left: var(--spacing-sm);
}
+.header-module-name {
+ font-weight: 600;
+ color: var(--text-color);
+}
+
+.header-level {
+ margin-left: 0.5em;
+}
+
.header-left {
display: flex;
align-items: center;
@@ -1652,12 +1661,29 @@ input:checked + .toggle-slider::before {
transform: rotate(-90deg);
}
+/* RTL: Module completed checkmark position (::after) */
+[dir="rtl"] .module-header.completed::after {
+ margin-left: 0;
+ margin-right: 8px;
+}
+
/* RTL: Lesson checkmark position */
-[dir="rtl"] .lesson-list-item::before {
+[dir="rtl"] .lesson-list-item.completed::before {
margin-left: 6px;
margin-right: 0;
}
+/* RTL: Header level pill */
+[dir="rtl"] .header-level-pill {
+ margin-left: 0;
+ margin-right: var(--spacing-sm);
+}
+
+[dir="rtl"] .header-level {
+ margin-left: 0;
+ margin-right: 0.5em;
+}
+
/* RTL: Toggle switch slider */
[dir="rtl"] .toggle-slider {
margin-right: 0;