[feat](trx-frontend-http): add theme toggle and themed map/audio visuals

Add dark/light mode selector below logo and wire theme-aware visuals.\n\n- add compact theme toggle control under header logo\n- support persistent dark/light theme switching\n- use emoji labels for theme toggle actions\n- make jog and audio level visuals theme-aware\n- add dark-mode map tile layer and live layer switching on theme changes\n- keep responsive behavior for header graph and controls\n\nCo-authored-by: OpenAI Codex <codex@openai.com>

Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -12,6 +12,38 @@
   --accent-green: #00d17f;
   --accent-yellow: #f0ad4e;
   --accent-red: #e55353;
+  --jog-hi: #2a3444;
+  --jog-lo: #1a2230;
+  --jog-shadow: rgba(0,0,0,0.3);
+  --jog-inset: rgba(255,255,255,0.05);
+  --audio-level-bg: #1f2937;
+  --audio-level-border: #2d3748;
+  --audio-level-fill-start: #00d17f;
+  --audio-level-fill-end: #f0ad4e;
+}
+
+[data-theme="light"] {
+  --bg: #edf2f7;
+  --card-bg: #ffffff;
+  --input-bg: #f7fafc;
+  --border: #d6deea;
+  --border-light: #bcc8da;
+  --text: #1a202c;
+  --text-muted: #4a5568;
+  --text-heading: #2d3748;
+  --btn-bg: #e6edf8;
+  --btn-border: #a9b8cf;
+  --accent-green: #0f9d61;
+  --accent-yellow: #b57600;
+  --accent-red: #cf3f3f;
+  --jog-hi: #e6edf8;
+  --jog-lo: #cdd9eb;
+  --jog-shadow: rgba(58, 79, 110, 0.18);
+  --jog-inset: rgba(255,255,255,0.75);
+  --audio-level-bg: #edf2fb;
+  --audio-level-border: #b8c5da;
+  --audio-level-fill-start: #0f9d61;
+  --audio-level-fill-end: #b57600;
 }
 
 body { font-family: sans-serif; margin: 0; min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding-top: 2em; background: var(--bg); color: var(--text); }
@@ -61,12 +93,12 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   width: 83.2px;
   height: 83.2px;
   border-radius: 50%;
-  background: radial-gradient(circle at 40% 35%, #2a3444, #1a2230);
+  background: radial-gradient(circle at 40% 35%, var(--jog-hi), var(--jog-lo));
   border: 2px solid var(--border-light);
   position: relative;
   cursor: grab;
   flex-shrink: 0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
+  box-shadow: 0 2px 8px var(--jog-shadow), inset 0 1px 0 var(--jog-inset);
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
@@ -177,7 +209,31 @@ small { color: var(--text-muted); }
   height: 100%;
   display: block;
 }
+.header-right {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.4rem;
+  flex-shrink: 0;
+}
 .header-logo { height: 6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
+.theme-toggle-btn {
+  height: 1.7rem;
+  min-height: 1.7rem;
+  padding: 0 0.65rem;
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  border-radius: 999px;
+  border: 1px solid var(--btn-border);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--btn-bg) 82%, #ffffff), var(--btn-bg));
+  color: var(--text);
+}
+[data-theme="light"] .theme-toggle-btn {
+  background: linear-gradient(135deg, #0f172a, #334155);
+  border-color: #334155;
+  color: #f8fafc;
+}
 .subtitle { color: var(--text-muted); font-size: 0.95rem; }
 .subtitle a { color: var(--accent-green); text-decoration: none; }
 .subtitle a:hover { text-decoration: underline; }
@@ -250,6 +306,21 @@ small { color: var(--text-muted); }
   border: none;
   cursor: pointer;
 }
+#audio-level {
+  flex: 1 1 auto;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--audio-level-bg);
+  border: 1px solid var(--audio-level-border);
+  overflow: hidden;
+  min-width: 80px;
+}
+#audio-level-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--audio-level-fill-start), var(--audio-level-fill-end));
+  transition: width 100ms ease;
+}
 
 .sub-tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
 .sub-tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.35rem 0.75rem; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; height: auto; }
@@ -308,6 +379,7 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   input.status-input, select.status-input { font-size: 1.1rem; }
   .header-text { width: auto; min-width: 0; flex: 0 1 auto; }
   .header-signal-wrap { display: none; }
+  .header-right { align-items: flex-end; }
   .controls-row { grid-template-columns: 1fr auto; }
   .controls-col-power { grid-column: 1 / -1; }
   .ft8-controls { flex-wrap: wrap; }