diff --git a/wwwroot/app.js b/wwwroot/app.js
index 683ee04..80bcde1 100644
--- a/wwwroot/app.js
+++ b/wwwroot/app.js
@@ -287,14 +287,13 @@ function setupHandlers() {
});
setAuthMode(state.authMode);
- const langSelect = $("language-select");
- if (langSelect) {
- langSelect.value = getLanguage();
- langSelect.addEventListener("change", () => setLanguage(langSelect.value));
- }
+ const langSelects = Array.from(document.querySelectorAll(".lang-select"));
+ const syncLanguageSelects = () => langSelects.forEach(sel => sel.value = getLanguage());
+ syncLanguageSelects();
+ langSelects.forEach(sel => sel.addEventListener("change", () => setLanguage(sel.value)));
onLanguageChange(() => {
- if (langSelect) langSelect.value = getLanguage();
+ syncLanguageSelects();
renderWelcome();
renderPhasePill();
renderCounts();
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 9f790c0..3703409 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -9,18 +9,18 @@
-
-
-
-
+
+ Language
+
+
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 2d93b3a..3f2d1f8 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -13,20 +13,19 @@
gap: 16px;
}
-.lang-switch {
- align-self: flex-end;
+.lang-field {
+ margin-top: 8px;
+}
+.lang-field select { min-width: 160px; }
+.lang-inline {
display: flex;
align-items: center;
- gap: 8px;
- background: rgba(15, 23, 42, 0.8);
- border: 1px solid #1f2937;
- border-radius: 10px;
- padding: 6px 10px;
- box-shadow: 0 10px 24px rgba(0,0,0,0.25);
- font-size: 14px;
+ gap: 6px;
+}
+.lang-inline .label { font-size: 12px; }
+.compact-select {
+ min-width: 120px;
}
-.lang-switch label { color: #9ca3af; }
-.lang-switch select { min-width: 120px; }
.status-bar {
display: flex;