UI restyle: strict monochrome tactical palette (black/gray/white) for all trainer surfaces

app.py

@@ -820,6 +820,176 @@ button.stop {
     transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
   }
 }
+
+/* Monochrome tactical overrides: black/gray/white only. */
+:root {
+  --ops-bg: #060606;
+  --ops-bg-2: #121212;
+  --ops-panel: #171717;
+  --ops-panel-2: #1f1f1f;
+  --ops-panel-3: #242424;
+  --ops-border: rgba(220, 220, 220, 0.28);
+  --ops-border-strong: rgba(240, 240, 240, 0.38);
+  --ops-text: #f1f1f1;
+  --ops-muted: #b1b1b1;
+  --ops-dim: #8e8e8e;
+  --ops-green: #d4d4d4;
+  --ops-green-soft: rgba(255, 255, 255, 0.1);
+  --ops-cyan: #d4d4d4;
+  --ops-cyan-soft: rgba(255, 255, 255, 0.1);
+  --ops-amber: #a7a7a7;
+  --ops-amber-soft: rgba(255, 255, 255, 0.08);
+  --ops-red: #a0a0a0;
+  --ops-red-soft: rgba(255, 255, 255, 0.08);
+}
+
+.gradio-container {
+  --color-accent: #d0d0d0 !important;
+  --color-accent-soft: rgba(255, 255, 255, 0.12) !important;
+  --color-accent-emphasis: #8a8a8a !important;
+  --button-primary-background-fill: #2b2b2b !important;
+  --button-primary-background-fill-hover: #3b3b3b !important;
+  --button-primary-border-color: rgba(238, 238, 238, 0.4) !important;
+  --button-primary-text-color: #f1f1f1 !important;
+}
+
+.gradio-container,
+body {
+  background:
+    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%),
+    radial-gradient(circle at 86% 4%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 28%),
+    linear-gradient(145deg, #060606 0%, #121212 100%) !important;
+}
+
+.block {
+  background: linear-gradient(180deg, rgba(27, 27, 27, 0.96) 0%, rgba(18, 18, 18, 0.97) 100%) !important;
+}
+
+.mono-hero {
+  border-color: rgba(235, 235, 235, 0.3);
+  background:
+    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 24%),
+    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 26%),
+    linear-gradient(145deg, rgba(30, 30, 30, 0.98) 0%, rgba(15, 15, 15, 0.98) 100%);
+}
+
+.mono-hero::before {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.05) 44%, rgba(255, 255, 255, 0) 72%);
+}
+
+.mono-hero::after {
+  background: linear-gradient(90deg, transparent, rgba(230, 230, 230, 0.45), transparent);
+}
+
+.mono-hero-kicker,
+.mono-hero-panel-label,
+.ops-head h3 {
+  color: #d7d7d7 !important;
+}
+
+.mono-link-row a {
+  border-color: rgba(220, 220, 220, 0.34);
+  background: rgba(30, 30, 30, 0.96);
+}
+
+.mono-link-row a:hover {
+  border-color: rgba(245, 245, 245, 0.44);
+  background: rgba(42, 42, 42, 0.98);
+}
+
+.mono-chip-row span,
+.ops-chip {
+  border-color: rgba(214, 214, 214, 0.28);
+  background: rgba(28, 28, 28, 0.94);
+}
+
+input:focus,
+textarea:focus,
+select:focus,
+.gradio-container textarea:focus,
+.gradio-container input:focus {
+  border-color: rgba(238, 238, 238, 0.62) !important;
+  box-shadow: 0 0 0 1px rgba(245, 245, 245, 0.24), 0 0 0 4px rgba(245, 245, 245, 0.08) !important;
+}
+
+button {
+  border-color: rgba(220, 220, 220, 0.38) !important;
+  background: linear-gradient(180deg, rgba(48, 48, 48, 0.98) 0%, rgba(30, 30, 30, 0.98) 100%) !important;
+}
+
+button:hover {
+  border-color: rgba(240, 240, 240, 0.48) !important;
+}
+
+button.primary,
+button.stop {
+  border-color: rgba(240, 240, 240, 0.48) !important;
+  background: linear-gradient(180deg, rgba(60, 60, 60, 0.98) 0%, rgba(36, 36, 36, 0.98) 100%) !important;
+  color: #f1f1f1 !important;
+}
+
+.ops-visual {
+  border-color: rgba(215, 215, 215, 0.32);
+  background:
+    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.06), transparent 24%),
+    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.04), transparent 26%),
+    linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(13, 13, 13, 0.98) 100%);
+}
+
+.ops-card {
+  border-color: rgba(210, 210, 210, 0.24);
+  background:
+    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 34%),
+    linear-gradient(180deg, rgba(32, 32, 32, 0.98) 0%, rgba(19, 19, 19, 0.98) 100%);
+}
+
+.ops-card.metric-neutral,
+.ops-card.metric-cyan,
+.ops-card.metric-green,
+.ops-card.metric-warning,
+.ops-card.metric-danger {
+  --ops-card-accent: #d0d0d0;
+  --ops-card-glow: rgba(255, 255, 255, 0.06);
+}
+
+.ops-meter-fill {
+  background: linear-gradient(90deg, #a8a8a8 0%, #d4d4d4 100%);
+  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
+}
+
+.ops-chip.on {
+  color: #ececec;
+  border-color: rgba(235, 235, 235, 0.48);
+  background: rgba(58, 58, 58, 0.94);
+}
+
+.ops-chip.off {
+  color: #9d9d9d;
+  border-color: rgba(210, 210, 210, 0.22);
+}
+
+.ops-stage-item.done .ops-stage-dot,
+.ops-stage-item.active .ops-stage-dot {
+  color: #e7e7e7;
+  border-color: rgba(235, 235, 235, 0.5);
+  background: rgba(55, 55, 55, 0.95);
+}
+
+.ops-stage-item.pending .ops-stage-dot {
+  color: #8e8e8e;
+}
+
+.ops-run-badge.ok,
+.ops-run-badge.fail,
+.ops-run-badge.cancel {
+  color: #d6d6d6;
+  border-color: rgba(225, 225, 225, 0.36);
+}
+
+.ops-spark-line {
+  stroke: #d8d8d8;
+  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.18));
+}
 """
 
 UI_HEAD = """