theme switcher

styles.css

@@ -37,6 +37,34 @@
   }
 }
 
+html[data-theme="dark"] {
+  --bg: #1a1a2e;
+  --bg-light: #16213e;
+  --bg-card: #0f3460;
+  --accent: #e94560;
+  --accent-hover: #ff6b81;
+  --accent-secondary: #ff9a56;
+  --text: #eaeaea;
+  --text-dim: #a0a0b0;
+  --correct: #2ecc71;
+  --incorrect: #e74c3c;
+  --border: rgba(255,255,255,0.08);
+}
+
+html[data-theme="light"] {
+  --bg: #f5f5f5;
+  --bg-light: #ffffff;
+  --bg-card: #ffffff;
+  --accent: #e94560;
+  --accent-hover: #d63851;
+  --accent-secondary: #f09040;
+  --text: #1a1a2e;
+  --text-dim: #555566;
+  --correct: #27ae60;
+  --incorrect: #c0392b;
+  --border: #d0d0d0;
+}
+
 @font-face {
   font-family: 'Ponomar';
   src: url('Ponomar-Regular.woff') format('woff');
@@ -127,6 +155,35 @@ body {
   display: block;
 }
 
+.menu-controls {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+  max-width: 320px;
+}
+
+.menu-controls .lang-select {
+  flex: 1;
+  width: auto;
+  max-width: none;
+  margin: 0;
+}
+
+.theme-toggle {
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  background: var(--bg-light);
+  color: var(--text);
+  border: 2px solid var(--border);
+  border-radius: 8px;
+  font-size: 1.3rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .ticker {
   display: inline-block;
   white-space: nowrap;