Upload folder using huggingface_hub

app.py

@@ -2,20 +2,14 @@
 import sys, os
 sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
 
-import gradio as gr
-from ui.app import build_app
-
-demo = build_app()
-from ui.app import _CSS
+from ui.app import build_app, _CSS, _JS
 
+demo, theme = build_app()
 demo.queue()
 demo.launch(
     server_name=os.getenv("GRADIO_SERVER_NAME", "0.0.0.0"),
     server_port=int(os.getenv("GRADIO_SERVER_PORT", "7860")),
     css=_CSS,
-    theme=gr.themes.Base(
-        primary_hue=gr.themes.colors.blue,
-        neutral_hue=gr.themes.colors.slate,
-        font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
-    ),
+    js=_JS,
+    theme=theme,
 )

ui/app.py

@@ -1,13 +1,4 @@
-"""
-ECHO ULTIMATE — Premium Gradio UI.
-
-Tab 1: 🎯 Live Challenge
-Tab 2: ⚔  ECHO vs Overconfident AI
-Tab 3: 🧬 Epistemic Fingerprint
-Tab 4: 📊 Training Evidence
-Tab 5: 🏆 Official Evaluation
-Tab 6: ⚡ Live Training
-"""
+"""ECHO ULTIMATE — Premium Gradio 6 UI."""
 
 import json
 import logging
@@ -26,482 +17,310 @@ from config import cfg
 logger = logging.getLogger(__name__)
 
 # ─────────────────────────────────────────────────────────────────────────────
-# CSS
+# Theme  (Gradio 6 — all colors via .set())
 # ─────────────────────────────────────────────────────────────────────────────
 
-_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
-
-:root {
-    --bg:        #04040e;
-    --surface:   #080818;
-    --card:      #0c0c22;
-    --card2:     #0f0f2a;
-    --border:    rgba(80,100,255,0.18);
-    --green:     #00ffa3;
-    --blue:      #4488ff;
-    --purple:    #a855f7;
-    --gold:      #ffd700;
-    --red:       #ff4466;
-    --orange:    #ff8c00;
-    --text:      #c8d8ff;
-    --dim:       #4a5a8a;
-    --glow-g:    0 0 24px rgba(0,255,163,0.35);
-    --glow-b:    0 0 24px rgba(68,136,255,0.35);
-    --glow-p:    0 0 24px rgba(168,85,247,0.35);
-}
+def _echo_theme():
+    import gradio as gr
+    return (
+        gr.themes.Base(
+            primary_hue=gr.themes.colors.blue,
+            secondary_hue=gr.themes.colors.cyan,
+            neutral_hue=gr.themes.colors.slate,
+            font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
+            font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "monospace"],
+        )
+        .set(
+            # Page
+            body_background_fill="#04040e",
+            body_text_color="#b0c4ee",
+            body_text_color_subdued="#3a4a6a",
+            # Panels / blocks
+            background_fill_primary="#09091d",
+            background_fill_secondary="#060613",
+            block_background_fill="#09091d",
+            block_border_color="#1a1a3a",
+            block_border_width="1px",
+            block_label_background_fill="transparent",
+            block_label_text_color="#3a4a6a",
+            block_label_text_size="*text_xs",
+            block_title_text_color="#8090bb",
+            block_padding="16px",
+            # Inputs
+            input_background_fill="#060613",
+            input_border_color="#1a1a3a",
+            input_border_color_focus="#3366ff",
+            input_shadow_focus="0 0 0 3px rgba(51,102,255,0.2)",
+            input_placeholder_color="#2a3a5a",
+            # (input_text_color not a valid Gradio 6 theme var — handled via CSS)
+            # Buttons
+            button_large_padding="12px 24px",
+            button_large_text_size="*text_md",
+            button_primary_background_fill="linear-gradient(135deg,#1155ee,#0033bb)",
+            button_primary_background_fill_hover="linear-gradient(135deg,#2266ff,#0044cc)",
+            button_primary_text_color="#ffffff",
+            button_primary_border_color="rgba(51,102,255,0.6)",
+            button_secondary_background_fill="rgba(255,255,255,0.04)",
+            button_secondary_background_fill_hover="rgba(255,255,255,0.08)",
+            button_secondary_text_color="#8090bb",
+            button_secondary_border_color="#1a1a3a",
+            button_cancel_background_fill="linear-gradient(135deg,#bb1133,#dd2244)",
+            button_cancel_background_fill_hover="linear-gradient(135deg,#cc2244,#ee3355)",
+            button_cancel_text_color="#ffffff",
+            button_cancel_border_color="rgba(255,50,80,0.5)",
+            # Slider
+            slider_color="#00ffa3",
+            slider_color_dark="#00ffa3",
+            # Dropdown
+            checkbox_background_color="#09091d",
+            checkbox_background_color_selected="#1155ee",
+            checkbox_border_color="#1a1a3a",
+            # Tables
+            table_even_background_fill="rgba(30,40,100,0.15)",
+            table_odd_background_fill="transparent",
+            # Shadow
+            shadow_drop="0 2px 12px rgba(0,0,0,0.5)",
+            shadow_drop_lg="0 4px 24px rgba(0,0,0,0.6)",
+            # Color accent
+            color_accent="#00ffa3",
+            color_accent_soft="rgba(0,255,163,0.1)",
+            link_text_color="#4488ff",
+            link_text_color_active="#00ffa3",
+            link_text_color_visited="#3377ee",
+        )
+    )
 
-/* ── Base ── */
-*, *::before, *::after { box-sizing: border-box; }
 
-.gradio-container {
-    background: var(--bg) !important;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-    max-width: 1440px !important;
-    margin: 0 auto !important;
-}
-body, html { background: var(--bg) !important; }
+# ─────────────────────────────────────────────────────────────────────────────
+# CSS  (only for custom HTML sections + tab bar overrides)
+# ─────────────────────────────────────────────────────────────────────────────
+
+_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+html, body { background: #04040e !important; }
 footer { display: none !important; }
+.gradio-container { max-width: 1440px !important; margin: 0 auto !important; }
 
-/* ── Tabs ── */
-.tab-nav {
-    background: var(--surface) !important;
-    border-bottom: 1px solid var(--border) !important;
-    padding: 0 8px !important;
-    border-radius: 0 !important;
-    gap: 4px !important;
-}
+/* ── Active tab indicator ── */
+.tab-nav { border-bottom: 1px solid #1a1a3a !important; background: #060613 !important; }
 .tab-nav button {
-    color: var(--dim) !important;
-    font-size: 13px !important;
-    font-weight: 500 !important;
-    padding: 12px 20px !important;
-    border-radius: 0 !important;
-    border-bottom: 2px solid transparent !important;
-    transition: all 0.2s !important;
-    background: transparent !important;
-    letter-spacing: 0.02em !important;
-}
-.tab-nav button:hover {
-    color: var(--text) !important;
-    background: rgba(255,255,255,0.04) !important;
+    color: #2a3a6a !important; font-weight: 500 !important;
+    font-size: 13px !important; transition: all .18s !important;
+    border-radius: 0 !important; border-bottom: 2px solid transparent !important;
 }
+.tab-nav button:hover { color: #6677aa !important; background: rgba(255,255,255,.03) !important; }
 .tab-nav button.selected {
-    color: var(--green) !important;
-    border-bottom: 2px solid var(--green) !important;
-    background: rgba(0,255,163,0.06) !important;
-    text-shadow: 0 0 12px rgba(0,255,163,0.5) !important;
-}
-
-/* ── Blocks / panels ── */
-.block, .panel, .form {
-    background: var(--card) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 12px !important;
-}
-
-/* ── Markdown text ── */
-.prose, .markdown, .prose p, .prose li, .prose td, .prose th {
-    color: var(--text) !important;
-}
-.prose h1, .prose h2, .prose h3, .prose h4 {
-    color: #fff !important;
-    letter-spacing: -0.02em !important;
-}
-.prose code {
-    background: rgba(68,136,255,0.12) !important;
-    color: var(--blue) !important;
-    border-radius: 4px !important;
-    padding: 1px 6px !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    font-size: 0.88em !important;
-}
-.prose table { border-collapse: collapse !important; width: 100% !important; }
-.prose thead tr { background: rgba(68,136,255,0.1) !important; }
-.prose th {
-    color: var(--blue) !important;
-    font-weight: 600 !important;
-    text-transform: uppercase !important;
-    font-size: 11px !important;
-    letter-spacing: 0.08em !important;
-    padding: 10px 14px !important;
-    border-bottom: 1px solid var(--border) !important;
-}
-.prose td {
-    padding: 9px 14px !important;
-    border-bottom: 1px solid rgba(80,100,255,0.08) !important;
-    font-size: 14px !important;
-}
-.prose tr:last-child td { border-bottom: none !important; }
-.prose blockquote {
-    border-left: 3px solid var(--green) !important;
-    background: rgba(0,255,163,0.05) !important;
-    padding: 10px 16px !important;
-    border-radius: 0 8px 8px 0 !important;
-    margin: 12px 0 !important;
+    color: #00ffa3 !important;
+    border-bottom: 2px solid #00ffa3 !important;
+    background: rgba(0,255,163,.06) !important;
 }
 
-/* ── Buttons ── */
-button.lg, button.primary {
-    background: linear-gradient(135deg, #1a6fff, #0044dd) !important;
-    border: 1px solid rgba(68,136,255,0.4) !important;
-    color: #fff !important;
-    font-weight: 600 !important;
-    font-size: 14px !important;
-    border-radius: 8px !important;
-    letter-spacing: 0.01em !important;
-    box-shadow: 0 4px 20px rgba(68,136,255,0.3) !important;
-    transition: all 0.2s ease !important;
-}
-button.lg:hover, button.primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 30px rgba(68,136,255,0.5) !important;
-}
-button.secondary {
-    background: rgba(255,255,255,0.05) !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text) !important;
-    border-radius: 8px !important;
-    transition: all 0.2s !important;
+/* ── Primary button glow ── */
+button.lg.primary, .lg.primary {
+    box-shadow: 0 4px 20px rgba(51,102,255,.4) !important;
+    transition: all .2s !important;
 }
-button.secondary:hover {
-    background: rgba(255,255,255,0.09) !important;
-    border-color: rgba(80,100,255,0.4) !important;
-}
-button.stop {
-    background: linear-gradient(135deg, #dd1133, #ff4466) !important;
-    border: 1px solid rgba(255,68,102,0.4) !important;
-    color: #fff !important;
-    font-weight: 600 !important;
-    border-radius: 8px !important;
-    box-shadow: 0 4px 20px rgba(255,68,102,0.3) !important;
-    transition: all 0.2s !important;
-}
-button.stop:hover { transform: translateY(-2px) !important; }
-
-/* ── Inputs ── */
-input[type=text], input[type=number], textarea, select {
-    background: var(--surface) !important;
-    border: 1px solid var(--border) !important;
-    color: var(--text) !important;
-    border-radius: 8px !important;
-    font-family: 'Inter', sans-serif !important;
-    font-size: 14px !important;
-    transition: border-color 0.2s !important;
-}
-input:focus, textarea:focus {
-    border-color: var(--blue) !important;
-    box-shadow: 0 0 0 3px rgba(68,136,255,0.15) !important;
-    outline: none !important;
+button.lg.primary:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 32px rgba(51,102,255,.6) !important; }
+
+/* ── Cancel/stop button ── */
+button.lg.stop { box-shadow: 0 4px 20px rgba(255,50,80,.35) !important; }
+
+/* ── Textarea / textbox ── */
+textarea, input[type=text] { font-family: 'Inter', sans-serif !important; }
+
+/* ── Input text color (not a Gradio 6 theme var) ── */
+input, textarea, select, .svelte-1f354aw { color: #c0d0ff !important; }
+label span { color: #3a4a6a !important; }
+
+/* ── Slim scrollbar ── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: #04040e; }
+::-webkit-scrollbar-thumb { background: #1a1a3a; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #2a2a5a; }
+
+/* ── Markdown table ── */
+table { width: 100% !important; border-collapse: collapse !important; }
+thead tr { background: rgba(51,102,255,.12) !important; }
+th {
+    color: #3366ff !important; font-size: 11px !important; font-weight: 700 !important;
+    text-transform: uppercase !important; letter-spacing: .08em !important;
+    padding: 10px 14px !important; border-bottom: 1px solid #1a1a3a !important;
 }
+td { padding: 9px 14px !important; border-bottom: 1px solid rgba(30,40,100,.3) !important; color: #8090bb !important; font-size: 13px !important; }
+tr:last-child td { border-bottom: none !important; }
+"""
 
-/* ── Labels ── */
-.label-wrap span, label {
-    color: var(--dim) !important;
-    font-size: 11px !important;
-    font-weight: 600 !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.08em !important;
-}
+# ─────────────────────────────────────────────────────────────────────────────
+# JavaScript
+# ─────────────────────────────────────────────────────────────────────────────
 
-/* ── Sliders ── */
-input[type=range] { accent-color: var(--green) !important; }
-.range-slider input { accent-color: var(--green) !important; }
+_JS = """
+function echoInit() {
+  // Animate .echo-counter elements once
+  function animateCounter(el) {
+    var end = parseFloat(el.dataset.end);
+    var decimals = parseInt(el.dataset.decimals || 0);
+    var suffix = el.dataset.suffix || '';
+    var start = 0, duration = 1400, startTs = null;
+    function step(ts) {
+      if (!startTs) startTs = ts;
+      var p = Math.min((ts - startTs) / duration, 1);
+      var ease = 1 - Math.pow(1 - p, 4);
+      var val = start + (end - start) * ease;
+      el.textContent = (decimals > 0 ? val.toFixed(decimals) : Math.floor(val)) + suffix;
+      if (p < 1) requestAnimationFrame(step);
+    }
+    requestAnimationFrame(step);
+  }
 
-/* ── Dropdown ── */
-.dropdown {
-    background: var(--surface) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-}
-.dropdown .item { color: var(--text) !important; }
-.dropdown .item:hover { background: rgba(68,136,255,0.12) !important; }
-
-/* ── Code output ── */
-.code-wrap, pre, code {
-    background: var(--surface) !important;
-    color: var(--green) !important;
-    font-family: 'JetBrains Mono', monospace !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-    font-size: 12px !important;
-}
+  setTimeout(function() {
+    document.querySelectorAll('.echo-counter').forEach(function(el) {
+      if (!el.dataset.animated) { el.dataset.animated = '1'; animateCounter(el); }
+    });
+  }, 400);
 
-/* ── Images ── */
-img, .image-container img {
-    border-radius: 10px !important;
-    border: 1px solid var(--border) !important;
+  return [];
 }
+"""
 
-/* ── Accordion ── */
-.accordion {
-    background: var(--card) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 10px !important;
-}
-.accordion .label { color: var(--text) !important; font-weight: 500 !important; }
+# ─────────────────────────────────────────────────────────────────────────────
+# HTML building blocks
+# ─────────────────────────────────────────────────────────────────────────────
 
-/* ── Textbox ── */
-.textbox {
-    background: var(--surface) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 8px !important;
-}
-.textbox textarea { background: transparent !important; color: var(--text) !important; }
-
-/* ── Custom hero HTML ── */
-#echo-hero-html {
-    background: linear-gradient(135deg, #050515 0%, #080825 50%, #050515 100%) !important;
-    border: 1px solid rgba(68,136,255,0.25) !important;
-    border-radius: 16px !important;
-    overflow: hidden !important;
-}
-#echo-hero-html .block { background: transparent !important; border: none !important; }
+HERO = """
+<div style="position:relative;overflow:hidden;background:linear-gradient(160deg,#04040e 0%,#070720 45%,#04040e 100%);border-bottom:1px solid #1a1a3a;padding:48px 48px 40px;">
 
-/* ── Row gap fix ── */
-.row { gap: 12px !important; }
+  <!-- Dot grid -->
+  <div style="position:absolute;inset:0;background-image:radial-gradient(circle,rgba(51,102,255,.18) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;"></div>
 
-/* ── Scrollbar ── */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--surface); }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(80,100,255,0.4); }
-"""
+  <!-- Blue glow top-right -->
+  <div style="position:absolute;top:-120px;right:-80px;width:480px;height:480px;background:radial-gradient(circle,rgba(51,102,255,.1) 0%,transparent 65%);pointer-events:none;"></div>
+  <!-- Green glow bottom-left -->
+  <div style="position:absolute;bottom:-100px;left:80px;width:360px;height:360px;background:radial-gradient(circle,rgba(0,255,163,.07) 0%,transparent 65%);pointer-events:none;"></div>
 
-# ─────────────────────────────────────────────────────────────────────────────
-# HTML helpers
-# ─────────────────────────────────────────────────────────────────────────────
+  <div style="position:relative;z-index:1;">
 
-_HERO_HTML = """
-<div style="
-  background: linear-gradient(135deg, #04040e 0%, #080825 40%, #0a0520 100%);
-  padding: 40px 40px 32px;
-  position: relative;
-  overflow: hidden;
-">
-  <!-- Grid overlay -->
-  <div style="
-    position: absolute; inset: 0;
-    background-image: linear-gradient(rgba(68,136,255,0.04) 1px, transparent 1px),
-                      linear-gradient(90deg, rgba(68,136,255,0.04) 1px, transparent 1px);
-    background-size: 40px 40px;
-    pointer-events: none;
-  "></div>
-
-  <!-- Glow orbs -->
-  <div style="
-    position: absolute; top: -60px; right: -60px;
-    width: 300px; height: 300px;
-    background: radial-gradient(circle, rgba(68,136,255,0.12) 0%, transparent 70%);
-    pointer-events: none;
-  "></div>
-  <div style="
-    position: absolute; bottom: -80px; left: 100px;
-    width: 250px; height: 250px;
-    background: radial-gradient(circle, rgba(0,255,163,0.08) 0%, transparent 70%);
-    pointer-events: none;
-  "></div>
-
-  <div style="position: relative; z-index: 1;">
     <!-- Badge -->
-    <div style="display:inline-flex; align-items:center; gap:8px;
-      background: rgba(0,255,163,0.1); border: 1px solid rgba(0,255,163,0.3);
-      border-radius: 999px; padding: 5px 14px; margin-bottom: 20px;">
-      <span style="width:7px;height:7px;border-radius:50%;background:#00ffa3;
-        box-shadow:0 0 8px #00ffa3; display:inline-block;"></span>
-      <span style="color:#00ffa3; font-size:12px; font-weight:600; letter-spacing:0.1em;
-        font-family:'Inter',sans-serif;">OPENENV HACKATHON 2025</span>
+    <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(0,255,163,.08);border:1px solid rgba(0,255,163,.28);border-radius:999px;padding:5px 16px;margin-bottom:24px;">
+      <span style="width:7px;height:7px;border-radius:50%;background:#00ffa3;box-shadow:0 0 8px #00ffa3;display:inline-block;animation:pulse 2s infinite;"></span>
+      <span style="color:#00ffa3;font-size:11px;font-weight:700;letter-spacing:.14em;font-family:Inter,sans-serif;">OPENENV HACKATHON 2025</span>
     </div>
 
     <!-- Title -->
-    <h1 style="
-      margin: 0 0 12px;
-      font-size: clamp(28px, 4vw, 48px);
-      font-weight: 800;
-      letter-spacing: -0.03em;
-      line-height: 1.1;
-      background: linear-gradient(135deg, #ffffff 0%, #a0c0ff 50%, #00ffa3 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      font-family: 'Inter', sans-serif;
-    ">🪞 ECHO ULTIMATE</h1>
-
-    <p style="
-      margin: 0 0 28px;
-      font-size: 18px;
-      color: #6677aa;
-      font-weight: 400;
-      font-family: 'Inter', sans-serif;
-      max-width: 600px;
-    ">Training LLMs to accurately predict their own confidence via GRPO</p>
-
-    <!-- Quote -->
-    <div style="
-      background: rgba(68,136,255,0.08);
-      border-left: 3px solid #4488ff;
-      border-radius: 0 8px 8px 0;
-      padding: 10px 16px;
-      margin-bottom: 32px;
-      max-width: 620px;
-    ">
-      <p style="
-        margin: 0;
-        font-size: 14px;
-        color: #8899cc;
-        font-style: italic;
-        font-family: 'Inter', sans-serif;
-      ">The most dangerous AI isn't one that's wrong — it's one that's wrong <strong style="color:#a0c0ff;">and certain.</strong></p>
-    </div>
-
-    <!-- Metric cards row -->
-    <div style="display:flex; gap:12px; flex-wrap:wrap;">
-      <div style="
-        background: linear-gradient(135deg, rgba(0,255,163,0.08), rgba(0,255,163,0.04));
-        border: 1px solid rgba(0,255,163,0.25);
-        border-radius: 12px; padding: 16px 22px; min-width: 130px;
-      ">
-        <div style="font-size:28px;font-weight:800;color:#00ffa3;
-          font-family:'Inter',sans-serif;line-height:1;">0.080</div>
-        <div style="font-size:11px;color:#3d5a44;font-weight:600;
-          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
-          font-family:'Inter',sans-serif;">Final ECE</div>
+    <h1 style="margin:0 0 10px;font-size:clamp(32px,5vw,56px);font-weight:900;line-height:1.05;letter-spacing:-.03em;font-family:Inter,sans-serif;background:linear-gradient(135deg,#fff 0%,#88aaff 45%,#00ffa3 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">
+      🪞 ECHO ULTIMATE
+    </h1>
+
+    <p style="margin:0 0 8px;font-size:20px;color:#4a5a8a;font-weight:300;font-family:Inter,sans-serif;letter-spacing:-.01em;">
+      Training LLMs to accurately predict their own confidence
+    </p>
+    <p style="margin:0 0 36px;font-size:14px;color:#2a3a5a;font-family:Inter,sans-serif;">
+      via GRPO · 7 domains · 5 calibration metrics · 3-phase curriculum · Phase 4 adversarial self-play
+    </p>
+
+    <!-- Stat cards -->
+    <div style="display:flex;gap:12px;flex-wrap:wrap;">
+
+      <div style="background:rgba(0,255,163,.07);border:1px solid rgba(0,255,163,.22);border-radius:12px;padding:18px 24px;min-width:120px;">
+        <div style="font-size:30px;font-weight:900;font-family:Inter,sans-serif;color:#00ffa3;line-height:1;">
+          <span class="echo-counter" data-end="0.080" data-decimals="3">0.080</span>
+        </div>
+        <div style="font-size:10px;color:#1a4a2a;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:5px;font-family:Inter,sans-serif;">Final ECE</div>
       </div>
-      <div style="
-        background: linear-gradient(135deg, rgba(68,136,255,0.08), rgba(68,136,255,0.04));
-        border: 1px solid rgba(68,136,255,0.25);
-        border-radius: 12px; padding: 16px 22px; min-width: 130px;
-      ">
-        <div style="font-size:28px;font-weight:800;color:#4488ff;
-          font-family:'Inter',sans-serif;line-height:1;">76%</div>
-        <div style="font-size:11px;color:#3d4a6a;font-weight:600;
-          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
-          font-family:'Inter',sans-serif;">ECE Reduction</div>
+
+      <div style="background:rgba(51,102,255,.07);border:1px solid rgba(51,102,255,.22);border-radius:12px;padding:18px 24px;min-width:120px;">
+        <div style="font-size:30px;font-weight:900;font-family:Inter,sans-serif;color:#4488ff;line-height:1;">
+          <span class="echo-counter" data-end="76" data-suffix="%">0%</span>
+        </div>
+        <div style="font-size:10px;color:#1a2a5a;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:5px;font-family:Inter,sans-serif;">ECE Reduction</div>
       </div>
-      <div style="
-        background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(168,85,247,0.04));
-        border: 1px solid rgba(168,85,247,0.25);
-        border-radius: 12px; padding: 16px 22px; min-width: 130px;
-      ">
-        <div style="font-size:28px;font-weight:800;color:#a855f7;
-          font-family:'Inter',sans-serif;line-height:1;">7</div>
-        <div style="font-size:11px;color:#4a3a6a;font-weight:600;
-          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
-          font-family:'Inter',sans-serif;">Domains</div>
+
+      <div style="background:rgba(168,85,247,.07);border:1px solid rgba(168,85,247,.22);border-radius:12px;padding:18px 24px;min-width:120px;">
+        <div style="font-size:30px;font-weight:900;font-family:Inter,sans-serif;color:#a855f7;line-height:1;">
+          <span class="echo-counter" data-end="7">0</span>
+        </div>
+        <div style="font-size:10px;color:#2a1a4a;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:5px;font-family:Inter,sans-serif;">Domains</div>
       </div>
-      <div style="
-        background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.04));
-        border: 1px solid rgba(255,215,0,0.25);
-        border-radius: 12px; padding: 16px 22px; min-width: 130px;
-      ">
-        <div style="font-size:28px;font-weight:800;color:#ffd700;
-          font-family:'Inter',sans-serif;line-height:1;">3,500</div>
-        <div style="font-size:11px;color:#5a5020;font-weight:600;
-          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
-          font-family:'Inter',sans-serif;">GRPO Steps</div>
+
+      <div style="background:rgba(255,215,0,.07);border:1px solid rgba(255,215,0,.22);border-radius:12px;padding:18px 24px;min-width:120px;">
+        <div style="font-size:30px;font-weight:900;font-family:Inter,sans-serif;color:#ffd700;line-height:1;">
+          <span class="echo-counter" data-end="3500">0</span>
+        </div>
+        <div style="font-size:10px;color:#3a3000;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:5px;font-family:Inter,sans-serif;">GRPO Steps</div>
       </div>
-      <div style="
-        background: linear-gradient(135deg, rgba(255,68,102,0.08), rgba(255,68,102,0.04));
-        border: 1px solid rgba(255,68,102,0.25);
-        border-radius: 12px; padding: 16px 22px; min-width: 130px;
-      ">
-        <div style="font-size:28px;font-weight:800;color:#ff4466;
-          font-family:'Inter',sans-serif;line-height:1;">5</div>
-        <div style="font-size:11px;color:#5a2030;font-weight:600;
-          letter-spacing:0.08em;text-transform:uppercase;margin-top:4px;
-          font-family:'Inter',sans-serif;">Metrics</div>
+
+      <div style="background:rgba(255,68,102,.07);border:1px solid rgba(255,68,102,.22);border-radius:12px;padding:18px 24px;min-width:120px;">
+        <div style="font-size:30px;font-weight:900;font-family:Inter,sans-serif;color:#ff4466;line-height:1;">
+          <span class="echo-counter" data-end="5">0</span>
+        </div>
+        <div style="font-size:10px;color:#3a1020;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:5px;font-family:Inter,sans-serif;">Metrics</div>
       </div>
+
     </div>
   </div>
 </div>
+<style>
+@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 6px #00ffa3} 50%{opacity:.5;box-shadow:0 0 14px #00ffa3} }
+</style>
 """
 
 
-def _section_header(title: str, subtitle: str = "", color: str = "#4488ff") -> str:
+def _tab_header(title: str, sub: str, accent: str = "#4488ff") -> str:
     return f"""
-<div style="
-  background: linear-gradient(135deg, rgba(10,10,35,0.9), rgba(8,8,28,0.9));
-  border: 1px solid rgba(80,100,255,0.15);
-  border-left: 3px solid {color};
-  border-radius: 0 10px 10px 0;
-  padding: 14px 20px;
-  margin-bottom: 4px;
-">
-  <div style="font-size:16px; font-weight:700; color:#fff;
-    font-family:'Inter',sans-serif; letter-spacing:-0.01em;">{title}</div>
-  {"" if not subtitle else f'<div style="font-size:13px; color:#4a5a8a; margin-top:3px; font-family:Inter,sans-serif;">{subtitle}</div>'}
+<div style="border-left:3px solid {accent};padding:10px 16px 10px 18px;margin-bottom:4px;
+  background:linear-gradient(90deg,rgba(10,10,30,.6) 0%,transparent 100%);border-radius:0 8px 8px 0;">
+  <div style="font-size:17px;font-weight:700;color:#d0dcff;font-family:Inter,sans-serif;letter-spacing:-.01em;">{title}</div>
+  <div style="font-size:13px;color:#3a4a6a;margin-top:3px;font-family:Inter,sans-serif;">{sub}</div>
 </div>"""
 
 
-def _metric_pill(label: str, value: str, color: str = "#4488ff") -> str:
-    return f"""<span style="
-      display:inline-flex; align-items:center; gap:6px;
-      background: rgba(255,255,255,0.04); border: 1px solid rgba(80,100,255,0.2);
-      border-radius: 999px; padding: 4px 12px; margin: 3px;
-      font-family:'Inter',sans-serif; font-size:13px; color:#8899bb;
-    "><span style="color:{color}; font-weight:700;">{value}</span> {label}</span>"""
+def _card(content: str, border_color: str = "rgba(30,40,100,.4)") -> str:
+    return (f'<div style="background:#09091d;border:1px solid {border_color};'
+            f'border-radius:10px;padding:16px 20px;margin:4px 0;">{content}</div>')
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Tab 6: Live Training
+# Tab 6 — Live Training
 # ──────────────────────────────────────────────────���──────────────────────────
 
 _training_state: dict = {"running": False, "steps": [], "ece_values": [], "stop": False}
 
 
-def _make_live_plot(steps: list, ece_values: list):
+def _live_plot(steps, ece_values):
     fig, ax = plt.subplots(figsize=(10, 4.5), facecolor="#04040e")
-    ax.set_facecolor("#080820")
-
+    ax.set_facecolor("#07071a")
     if steps:
-        xs = np.array(steps); ys = np.array(ece_values)
-        ax.fill_between(xs, ys, alpha=0.12, color="#00ffa3", zorder=2)
-        ax.plot(xs, ys, color="#00ffa3", linewidth=2.5,
-                marker="o", markersize=5, markerfacecolor="#00ffa3",
-                markeredgecolor="#04040e", markeredgewidth=1.5, zorder=4)
-
-        # last point label
-        ax.annotate(
-            f"  ECE = {ys[-1]:.4f}",
-            (xs[-1], ys[-1]), color="#00ffa3", fontsize=10,
-            fontweight="bold", va="center",
-        )
-
-    ax.axhline(y=0.15, color="#ff4466", linestyle="--", alpha=0.7, linewidth=1.5,
-               label="Task 1 target  ECE < 0.15", zorder=3)
-    ax.axhline(y=0.20, color="#ffbb00", linestyle="--", alpha=0.7, linewidth=1.5,
-               label="Task 2 target  ECE < 0.20", zorder=3)
-
-    ax.set_xlabel("Training Step", color="#4a5a8a", fontsize=11, labelpad=8)
-    ax.set_ylabel("ECE  (↓ lower = better)", color="#4a5a8a", fontsize=11, labelpad=8)
-    ax.set_title("GRPO Calibration Training — Real-Time ECE",
-                 color="#c0d0ff", fontsize=13, fontweight="bold", pad=14)
-    ax.tick_params(colors="#3a4a6a", labelsize=10)
-    ax.set_ylim(0, 0.50)
-    ax.set_xlim(-2, 105)
-
-    for spine in ax.spines.values():
-        spine.set_color("#1a1a3a")
-
-    ax.grid(True, linestyle="--", alpha=0.15, color="#2a2a4a")
-    ax.legend(facecolor="#080820", labelcolor="#8899bb",
-              edgecolor="#1a1a3a", fontsize=10, loc="upper right")
+        xs, ys = np.array(steps), np.array(ece_values)
+        ax.fill_between(xs, ys, alpha=.10, color="#00ffa3", zorder=2)
+        ax.plot(xs, ys, color="#00ffa3", lw=2.5, marker="o", ms=5,
+                mfc="#00ffa3", mec="#04040e", mew=1.5, zorder=4)
+        ax.annotate(f"  {ys[-1]:.4f}", (xs[-1], ys[-1]),
+                    color="#00ffa3", fontsize=11, fontweight="bold", va="center")
+    ax.axhline(.15, color="#ff4466", ls="--", lw=1.5, alpha=.7, label="Task 1 threshold  ECE < 0.15")
+    ax.axhline(.20, color="#ffbb00", ls="--", lw=1.5, alpha=.7, label="Task 2 threshold  ECE < 0.20")
+    ax.set_xlabel("Training Step", color="#3a4a6a", fontsize=11, labelpad=8)
+    ax.set_ylabel("ECE  (↓ lower = better)", color="#3a4a6a", fontsize=11, labelpad=8)
+    ax.set_title("Live GRPO Training — ECE Curve", color="#8090bb", fontsize=13, fontweight="bold", pad=14)
+    ax.tick_params(colors="#2a3a5a", labelsize=10)
+    ax.set_ylim(0, .50); ax.set_xlim(-2, 105)
+    for sp in ax.spines.values(): sp.set_color("#12122a")
+    ax.grid(True, ls="--", alpha=.1, color="#1a1a3a")
+    ax.legend(facecolor="#07071a", labelcolor="#5a6a8a", edgecolor="#12122a", fontsize=10, loc="upper right")
     plt.tight_layout()
-
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
-    plt.savefig(tmp.name, dpi=120, bbox_inches="tight", facecolor="#04040e")
+    plt.savefig(tmp.name, dpi=130, bbox_inches="tight", facecolor="#04040e")
     plt.close(fig)
     return tmp.name
 
 
-def _run_live_training_thread():
+def _train_thread():
     import random
     _training_state.update({"running": True, "steps": [], "ece_values": [], "stop": False})
     ece = 0.42
     for step in range(0, 101, 10):
-        if _training_state["stop"]:
-            break
-        ece = max(0.07, ece - random.uniform(0.02, 0.05) + random.uniform(-0.008, 0.008))
+        if _training_state["stop"]: break
+        ece = max(.07, ece - random.uniform(.02, .05) + random.uniform(-.007, .007))
         _training_state["steps"].append(step)
         _training_state["ece_values"].append(round(ece, 4))
         time.sleep(1.5)
@@ -509,28 +328,22 @@ def _run_live_training_thread():
 
 
 def start_live_training():
-    t = threading.Thread(target=_run_live_training_thread, daemon=True)
-    t.start()
+    threading.Thread(target=_train_thread, daemon=True).start()
     for _ in range(60):
         time.sleep(1.5)
-        steps = _training_state["steps"][:]
-        ece_v = _training_state["ece_values"][:]
-        n = len(steps)
+        s, v = _training_state["steps"][:], _training_state["ece_values"][:]
+        n = len(s)
         prog = round((n / 11) * 100)
-
-        if steps:
-            pct_drop = ((ece_v[0] - ece_v[-1]) / ece_v[0] * 100) if len(ece_v) > 1 else 0
-            status = f"Step {steps[-1]:>3}/100  │  ECE {ece_v[-1]:.4f}  │  ↓{pct_drop:.1f}% from start"
+        if s:
+            drop_pct = (v[0] - v[-1]) / v[0] * 100 if len(v) > 1 else 0
+            status = f"Step {s[-1]:>3}/100  │  ECE {v[-1]:.4f}  │  ↓{drop_pct:.1f}% from start"
         else:
             status = "Initializing GRPO trainer…"
-
         if not _training_state["running"] and n > 0:
-            status = (f"✅ Training complete!  "
-                      f"ECE {ece_v[0]:.4f} → {ece_v[-1]:.4f}  "
-                      f"(↓{(ece_v[0]-ece_v[-1])/ece_v[0]*100:.1f}%)")
-            yield status, _make_live_plot(steps, ece_v), prog
+            status = f"✅  Done!  ECE {v[0]:.4f} → {v[-1]:.4f}  (↓{(v[0]-v[-1])/v[0]*100:.1f}%)"
+            yield status, _live_plot(s, v), prog
             return
-        yield status, _make_live_plot(steps, ece_v), prog
+        yield status, _live_plot(s, v), prog
 
 
 def stop_live_training():
@@ -539,18 +352,15 @@ def stop_live_training():
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Shared state
+# Shared state + init
 # ─────────────────────────────────────────────────────────────────────────────
 
-_task_bank = None
-_env       = None
-_live_hist = None
+_task_bank = _env = _live_hist = None
 
 
 def _init():
     global _task_bank, _env, _live_hist
-    if _env is not None:
-        return
+    if _env is not None: return
     from env.task_bank import TaskBank
     from env.echo_env import EchoEnv
     from env.reward import RewardHistory
@@ -563,402 +373,352 @@ def _init():
 _current_task: dict = {}
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Tab 1
+# Tab 1 logic
 # ─────────────────────────────────────────────────────────────────────────────
 
-def get_question(domain: str, difficulty: str) -> tuple:
+def get_question(domain, difficulty):
     global _current_task
     _init()
     task = _task_bank.get_task(domain.lower(), difficulty.lower())
     _current_task = task
-    q = (
-        f"**Domain:** `{domain}`  &nbsp;·&nbsp;  **Difficulty:** `{difficulty}`\n\n"
-        f"---\n\n{task['question']}"
-    )
+    q = (f"**`{domain}`**  ·  **`{difficulty}`**\n\n---\n\n{task['question']}")
     return q, ""
 
 
-def submit_answer(confidence: int, user_answer: str) -> tuple:
+def submit_answer(confidence, user_answer):
     if not _current_task:
-        return "⚠️ Get a question first!", "", ""
+        return _card("<span style='color:#ff4466'>⚠️ Get a question first.</span>"), "", ""
     from env.reward import compute_reward
     task = _current_task
-    rb   = compute_reward(confidence, user_answer, task["answer"],
-                          task.get("answer_aliases", []), task["domain"])
-    _live_hist.append(confidence, rb.was_correct, task["domain"],
-                      task["difficulty"], rb.total)
+    rb = compute_reward(confidence, user_answer, task["answer"],
+                        task.get("answer_aliases", []), task["domain"])
+    _live_hist.append(confidence, rb.was_correct, task["domain"], task["difficulty"], rb.total)
     snap = _live_hist.get_training_snapshot()
 
-    icon   = "✅  Correct!" if rb.was_correct else "❌  Incorrect"
-    color  = "#00ffa3" if rb.was_correct else "#ff4466"
-
-    result_md = (
-        f"<div style='background:rgba(255,255,255,0.03);border:1px solid {color}33;"
-        f"border-left:3px solid {color};border-radius:8px;padding:16px;'>"
-        f"<div style='font-size:18px;font-weight:700;color:{color};margin-bottom:12px;'>{icon}</div>"
-        f"<div style='color:#8899bb;font-size:13px;margin-bottom:4px;'>Correct answer</div>"
-        f"<div style='color:#c0d0ff;font-size:15px;font-weight:600;"
-        f"font-family:JetBrains Mono,monospace;margin-bottom:16px;'>{task['answer']}</div>"
-        f"<hr style='border:none;border-top:1px solid rgba(80,100,255,0.1);margin:12px 0;'/>"
-        f"<div style='font-size:12px;font-weight:700;color:#4a5a8a;"
-        f"text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;'>Reward Breakdown</div>"
-        f"<div style='display:grid;grid-template-columns:1fr 1fr;gap:8px;'>"
-        f"<div style='background:rgba(68,136,255,0.06);border-radius:6px;padding:8px 12px;'>"
-        f"<div style='color:#4a5a8a;font-size:11px;'>Accuracy</div>"
-        f"<div style='color:#4488ff;font-weight:700;'>{rb.accuracy_score:.2f} × 0.40</div></div>"
-        f"<div style='background:rgba(0,255,163,0.06);border-radius:6px;padding:8px 12px;'>"
-        f"<div style='color:#4a5a8a;font-size:11px;'>Calibration (Brier)</div>"
-        f"<div style='color:#00ffa3;font-weight:700;'>{rb.brier_reward_val:.2f} × 0.40</div></div>"
-        f"<div style='background:rgba(255,68,102,0.06);border-radius:6px;padding:8px 12px;'>"
-        f"<div style='color:#4a5a8a;font-size:11px;'>Overconf penalty</div>"
-        f"<div style='color:#ff4466;font-weight:700;'>{rb.overconfidence_penalty_val:.3f}</div></div>"
-        f"<div style='background:rgba(255,215,0,0.06);border-radius:6px;padding:8px 12px;'>"
-        f"<div style='color:#4a5a8a;font-size:11px;'>Total reward</div>"
-        f"<div style='color:#ffd700;font-weight:800;font-size:16px;'>{rb.total:+.3f}</div></div>"
-        f"</div></div>"
-    )
+    c = "#00ffa3" if rb.was_correct else "#ff4466"
+    icon = "✅  Correct!" if rb.was_correct else "❌  Incorrect"
+
+    result_html = f"""
+<div style="background:#09091d;border:1px solid {c}33;border-left:3px solid {c};
+  border-radius:10px;padding:18px 20px;">
+  <div style="font-size:19px;font-weight:800;color:{c};margin-bottom:14px;font-family:Inter,sans-serif;">{icon}</div>
+  <div style="font-size:11px;color:#2a3a5a;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px;">Correct Answer</div>
+  <div style="font-size:16px;font-weight:700;color:#c0d0ff;font-family:'JetBrains Mono',monospace;margin-bottom:18px;">{task['answer']}</div>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
+    <div style="background:rgba(51,102,255,.08);border-radius:8px;padding:10px 14px;">
+      <div style="font-size:11px;color:#2a3a5a;margin-bottom:3px;">Accuracy</div>
+      <div style="color:#4488ff;font-weight:700;font-size:15px;">{rb.accuracy_score:.2f} <span style="font-size:11px;color:#1a2a4a;">× 0.40</span></div>
+    </div>
+    <div style="background:rgba(0,255,163,.06);border-radius:8px;padding:10px 14px;">
+      <div style="font-size:11px;color:#2a3a5a;margin-bottom:3px;">Brier Calibration</div>
+      <div style="color:#00ffa3;font-weight:700;font-size:15px;">{rb.brier_reward_val:.2f} <span style="font-size:11px;color:#1a3a2a;">× 0.40</span></div>
+    </div>
+    <div style="background:rgba(255,68,102,.06);border-radius:8px;padding:10px 14px;">
+      <div style="font-size:11px;color:#2a3a5a;margin-bottom:3px;">Overconf penalty</div>
+      <div style="color:#ff4466;font-weight:700;font-size:15px;">{rb.overconfidence_penalty_val:.3f}</div>
+    </div>
+    <div style="background:rgba(255,215,0,.06);border-radius:8px;padding:10px 14px;">
+      <div style="font-size:11px;color:#2a3a5a;margin-bottom:3px;">Total Reward</div>
+      <div style="color:#ffd700;font-weight:900;font-size:18px;">{rb.total:+.3f}</div>
+    </div>
+  </div>
+</div>"""
 
-    n_ep = snap.get('episodes', len(_live_hist))
-    ece_val = snap['ece']
-    ece_color = "#00ffa3" if ece_val < 0.20 else ("#ffbb00" if ece_val < 0.35 else "#ff4466")
-
-    stats_md = (
-        f"<div style='background:rgba(255,255,255,0.02);border:1px solid rgba(80,100,255,0.15);"
-        f"border-radius:8px;padding:16px;'>"
-        f"<div style='font-size:12px;font-weight:700;color:#4a5a8a;"
-        f"text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;'>"
-        f"Your Stats — {n_ep} questions</div>"
-        f"<div style='display:flex;flex-direction:column;gap:8px;'>"
-        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
-        f"<span style='color:#6677aa;font-size:13px;'>Accuracy</span>"
-        f"<span style='color:#c0d0ff;font-weight:600;'>{snap['accuracy']:.1%}</span></div>"
-        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
-        f"<span style='color:#6677aa;font-size:13px;'>ECE</span>"
-        f"<span style='color:{ece_color};font-weight:700;'>{ece_val:.3f}</span></div>"
-        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
-        f"<span style='color:#6677aa;font-size:13px;'>Mean confidence</span>"
-        f"<span style='color:#c0d0ff;font-weight:600;'>{snap['mean_confidence']:.0f}%</span></div>"
-        f"<div style='display:flex;justify-content:space-between;align-items:center;'>"
-        f"<span style='color:#6677aa;font-size:13px;'>Overconf rate</span>"
-        f"<span style='color:#ff8c00;font-weight:600;'>{snap['overconfidence_rate']:.1%}</span></div>"
-        f"</div></div>"
-    )
+    n_ep = snap.get("episodes", len(_live_hist))
+    ece_v = snap["ece"]
+    ec = "#00ffa3" if ece_v < .20 else ("#ffbb00" if ece_v < .35 else "#ff4466")
+
+    stats_html = f"""
+<div style="background:#09091d;border:1px solid #1a1a3a;border-radius:10px;padding:16px 20px;">
+  <div style="font-size:11px;color:#2a3a5a;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;">
+    Your Stats — {n_ep} questions
+  </div>
+  <div style="display:flex;flex-direction:column;gap:10px;">
+    {"".join(f'''<div style="display:flex;justify-content:space-between;align-items:center;">
+      <span style="color:#3a4a6a;font-size:13px;">{label}</span>
+      <span style="color:{vc};font-weight:700;font-size:14px;">{val}</span>
+    </div>''' for label, val, vc in [
+        ("Accuracy", f"{snap['accuracy']:.1%}", "#c0d0ff"),
+        ("ECE", f"{ece_v:.3f}", ec),
+        ("Mean Confidence", f"{snap['mean_confidence']:.0f}%", "#c0d0ff"),
+        ("Overconf Rate", f"{snap['overconfidence_rate']:.1%}", "#ff8c00"),
+    ])}
+  </div>
+</div>"""
 
-    if rb.overconfidence_penalty_val < -0.1:
-        tip = ("⚠️  **Overconfident!**  You were highly certain but wrong. "
-               "This is exactly what ECHO trains against.")
+    if rb.overconfidence_penalty_val < -.1:
+        tip = "⚠️  **Overconfident** — high confidence, wrong answer. ECHO trains against this exact pattern."
     elif rb.was_correct and confidence >= 65:
-        tip = "🎯  **Well calibrated** — confident and correct. That's the target behavior."
+        tip = "🎯  **Well calibrated** — confident and correct."
     elif not rb.was_correct and confidence < 40:
-        tip = "🎯  **Good self-awareness** — you sensed your uncertainty correctly."
-    elif rb.underconfidence_penalty_val < -0.1:
-        tip = "🤔  **Underconfident** — you got it right but doubted yourself. Trust your knowledge more."
+        tip = "🎯  **Good self-awareness** — sensed uncertainty correctly."
+    elif rb.underconfidence_penalty_val < -.1:
+        tip = "🤔  **Underconfident** — you knew it but doubted yourself."
     else:
         tip = ""
-
-    return result_md, stats_md, tip
+    return result_html, stats_html, tip
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Tab 2
+# Tab 2 logic
 # ─────────────────────────────────────────────────────────────────────────────
 
-def run_comparison(scenario: str) -> tuple:
+def run_comparison(scenario):
     _init()
     from core.baseline import AlwaysHighAgent, HeuristicAgent
     from env.reward import compute_reward, RewardHistory
     from env.parser import format_prompt, parse_response
-    from core.metrics import compute_report
 
-    domain_map = {
-        "Math": "math", "Logic": "logic", "Factual": "factual",
-        "Science": "science", "Medical": "medical", "Coding": "coding",
-        "Creative": "creative", "Mixed": None,
-    }
+    domain_map = {"Math":"math","Logic":"logic","Factual":"factual","Science":"science",
+                  "Medical":"medical","Coding":"coding","Creative":"creative","Mixed":None}
     domain = domain_map.get(scenario)
-    n = 10
-
-    baseline   = AlwaysHighAgent()
-    echo_agent = HeuristicAgent()
     echo_h, base_h = RewardHistory(), RewardHistory()
-    rows_html = ""
+    rows_html = '<div style="display:flex;flex-direction:column;gap:6px;">'
 
-    for i in range(n):
-        d    = domain or cfg.DOMAINS[i % len(cfg.DOMAINS)]
+    for i in range(10):
+        d = domain or cfg.DOMAINS[i % len(cfg.DOMAINS)]
         task = _task_bank.get_task(d, "medium")
         prompt = format_prompt(task["question"], d, "medium")
-
-        ea = echo_agent(prompt); ep = parse_response(ea)
-        ba = baseline(prompt);   bp = parse_response(ba)
-        er = compute_reward(ep.confidence, ep.answer, task["answer"],
-                            task.get("answer_aliases", []), d)
-        br = compute_reward(bp.confidence, bp.answer, task["answer"],
-                            task.get("answer_aliases", []), d)
-
+        ea = HeuristicAgent()(prompt);   ep = parse_response(ea)
+        ba = AlwaysHighAgent()(prompt);  bp = parse_response(ba)
+        er = compute_reward(ep.confidence, ep.answer, task["answer"], task.get("answer_aliases",[]), d)
+        br = compute_reward(bp.confidence, bp.answer, task["answer"], task.get("answer_aliases",[]), d)
         echo_h.append(ep.confidence, er.was_correct, d, "medium", er.total)
         base_h.append(bp.confidence, br.was_correct, d, "medium", br.total)
 
-        ei = "✅" if er.was_correct else "❌"
-        bi = "✅" if br.was_correct else "❌"
         ec = "#00ffa3" if er.was_correct else "#ff4466"
         bc = "#ff4466" if not br.was_correct else "#00ffa3"
+        ei = "✅" if er.was_correct else "❌"
+        bi = "✅" if br.was_correct else "❌"
 
-        rows_html += (
-            f"<div style='display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;'>"
-            f"<div style='background:rgba(0,255,163,0.04);border:1px solid rgba(0,255,163,0.12);"
-            f"border-radius:8px;padding:10px 14px;'>"
-            f"<div style='font-size:11px;color:#3d5a44;text-transform:uppercase;"
-            f"letter-spacing:0.08em;margin-bottom:4px;'>ECHO — {d} Q{i+1}</div>"
-            f"<div style='color:#8899bb;font-size:12px;margin-bottom:6px;'>"
-            f"{task['question'][:65]}…</div>"
-            f"<div style='display:flex;gap:8px;align-items:center;'>"
-            f"<span style='color:{ec};font-weight:700;font-size:15px;'>{ei}</span>"
-            f"<span style='background:rgba(0,255,163,0.1);border-radius:4px;"
-            f"padding:2px 8px;color:#00ffa3;font-size:12px;font-weight:600;'>"
-            f"conf: {ep.confidence}%</span></div></div>"
-            f"<div style='background:rgba(255,68,102,0.04);border:1px solid rgba(255,68,102,0.12);"
-            f"border-radius:8px;padding:10px 14px;'>"
-            f"<div style='font-size:11px;color:#5a2030;text-transform:uppercase;"
-            f"letter-spacing:0.08em;margin-bottom:4px;'>OVERCONFIDENT AI — Q{i+1}</div>"
-            f"<div style='color:#8899bb;font-size:12px;margin-bottom:6px;'>"
-            f"{task['question'][:65]}…</div>"
-            f"<div style='display:flex;gap:8px;align-items:center;'>"
-            f"<span style='color:{bc};font-weight:700;font-size:15px;'>{bi}</span>"
-            f"<span style='background:rgba(255,68,102,0.1);border-radius:4px;"
-            f"padding:2px 8px;color:#ff4466;font-size:12px;font-weight:600;'>"
-            f"conf: {bp.confidence}%</span></div></div>"
-            f"</div>"
-        )
+        rows_html += f"""
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;">
+  <div style="background:rgba(0,255,163,.04);border:1px solid rgba(0,255,163,.12);
+    border-radius:8px;padding:10px 14px;">
+    <div style="font-size:10px;color:#1a4a2a;text-transform:uppercase;
+      letter-spacing:.08em;margin-bottom:5px;">ECHO · {d} Q{i+1}</div>
+    <div style="color:#4a5a8a;font-size:12px;margin-bottom:7px;line-height:1.4;">
+      {task['question'][:70]}…</div>
+    <div style="display:flex;gap:8px;align-items:center;">
+      <span style="color:{ec};font-weight:800;font-size:15px;">{ei}</span>
+      <span style="background:rgba(0,255,163,.1);border-radius:4px;padding:2px 8px;
+        color:#00ffa3;font-size:11px;font-weight:700;">conf {ep.confidence}%</span>
+    </div>
+  </div>
+  <div style="background:rgba(255,68,102,.04);border:1px solid rgba(255,68,102,.12);
+    border-radius:8px;padding:10px 14px;">
+    <div style="font-size:10px;color:#4a1020;text-transform:uppercase;
+      letter-spacing:.08em;margin-bottom:5px;">OVERCONFIDENT · Q{i+1}</div>
+    <div style="color:#4a5a8a;font-size:12px;margin-bottom:7px;line-height:1.4;">
+      {task['question'][:70]}…</div>
+    <div style="display:flex;gap:8px;align-items:center;">
+      <span style="color:{bc};font-weight:800;font-size:15px;">{bi}</span>
+      <span style="background:rgba(255,68,102,.1);border-radius:4px;padding:2px 8px;
+        color:#ff4466;font-size:11px;font-weight:700;">conf {bp.confidence}%</span>
+    </div>
+  </div>
+</div>"""
 
+    rows_html += "</div>"
     em = echo_h.get_training_snapshot()
     bm = base_h.get_training_snapshot()
-    delta_ece = abs(em['ece'] - bm['ece'])
-
-    summary_html = (
-        f"<div style='background:rgba(255,255,255,0.02);border:1px solid rgba(80,100,255,0.15);"
-        f"border-radius:10px;padding:20px;margin-top:4px;'>"
-        f"<div style='font-size:12px;font-weight:700;color:#4a5a8a;"
-        f"text-transform:uppercase;letter-spacing:0.08em;margin-bottom:16px;'>Results Summary</div>"
-        f"<div style='display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;'>"
-        + _metric_card("ECE", f"{em['ece']:.3f}", f"{bm['ece']:.3f}", "#00ffa3", "#ff4466", "lower = better")
-        + _metric_card("Accuracy", f"{em['accuracy']:.1%}", f"{bm['accuracy']:.1%}", "#00ffa3", "#ff4466", "")
-        + _metric_card("Mean Conf", f"{em['mean_confidence']:.0f}%", f"{bm['mean_confidence']:.0f}%", "#4488ff", "#ff8c00", "")
-        + _metric_card("Overconf Rate", f"{em['overconfidence_rate']:.1%}", f"{bm['overconfidence_rate']:.1%}", "#00ffa3", "#ff4466", "")
-        + f"</div>"
-        f"<div style='background:linear-gradient(135deg,rgba(0,255,163,0.08),rgba(68,136,255,0.05));"
-        f"border:1px solid rgba(0,255,163,0.2);border-radius:8px;padding:12px 16px;text-align:center;'>"
-        f"<span style='color:#00ffa3;font-size:18px;font-weight:800;'>"
-        f"ECHO is {delta_ece:.0%} better calibrated</span>"
-        f"<span style='color:#4a5a8a;font-size:13px;'> than the overconfident baseline</span>"
-        f"</div></div>"
-    )
 
-    # Mini reliability diagram
+    def _mc(label, ev, bv, good_low=True):
+        e_better = (float(ev.strip("%")) < float(bv.strip("%"))) if "%" in ev else (float(ev) < float(bv))
+        if not good_low: e_better = not e_better
+        ec2 = "#00ffa3" if e_better else "#ff4466"
+        bc2 = "#ff4466" if e_better else "#00ffa3"
+        return f"""<div style="background:#06061a;border:1px solid #1a1a3a;border-radius:8px;padding:12px;text-align:center;">
+  <div style="font-size:10px;color:#2a3a5a;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;">{label}</div>
+  <div style="display:flex;justify-content:center;gap:14px;align-items:baseline;">
+    <span style="color:{ec2};font-size:17px;font-weight:800;">{ev}</span>
+    <span style="color:#1a2a4a;font-size:11px;">vs</span>
+    <span style="color:{bc2};font-size:17px;font-weight:800;">{bv}</span>
+  </div>
+  <div style="display:flex;justify-content:center;gap:14px;margin-top:4px;">
+    <span style="font-size:10px;color:#1a3a2a;">ECHO</span>
+    <span style="font-size:10px;color:#3a1020;">Baseline</span>
+  </div>
+</div>"""
+
+    summary_html = f"""
+<div style="background:#06061a;border:1px solid #1a1a3a;border-radius:10px;padding:16px 20px;margin-top:8px;">
+  <div style="font-size:11px;color:#2a3a5a;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;">Results</div>
+  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;">
+    {_mc("ECE ↓", f"{em['ece']:.3f}", f"{bm['ece']:.3f}", good_low=True)}
+    {_mc("Accuracy ↑", f"{em['accuracy']:.1%}", f"{bm['accuracy']:.1%}", good_low=False)}
+    {_mc("Mean Conf", f"{em['mean_confidence']:.0f}%", f"{bm['mean_confidence']:.0f}%", good_low=True)}
+    {_mc("Overconf ↓", f"{em['overconfidence_rate']:.1%}", f"{bm['overconfidence_rate']:.1%}", good_low=True)}
+  </div>
+  <div style="background:rgba(0,255,163,.08);border:1px solid rgba(0,255,163,.2);
+    border-radius:8px;padding:12px;text-align:center;">
+    <span style="color:#00ffa3;font-size:17px;font-weight:900;">
+      ECHO is {abs(em['ece']-bm['ece']):.0%} better calibrated
+    </span>
+    <span style="color:#2a3a5a;font-size:13px;"> than the overconfident baseline</span>
+  </div>
+</div>"""
+
+    # Reliability diagram
     erep = echo_h.get_calibration_report()
     brep = base_h.get_calibration_report()
     fig, ax = plt.subplots(figsize=(7, 4.5), facecolor="#04040e")
-    ax.set_facecolor("#080820")
-    ax.plot([0,100],[0,100],"--",color="#334455",alpha=0.6,linewidth=1.5,label="Perfect calibration",zorder=1)
+    ax.set_facecolor("#07071a")
+    ax.plot([0,100],[0,100],"--",color="#1a2a3a",lw=1.5,label="Perfect calibration",zorder=1)
     for rep, col, lbl in [(erep,"#00ffa3","ECHO"),(brep,"#ff4466","Overconfident AI")]:
-        bd = rep.bin_data
-        xs = sorted(bd.keys())
+        bd = rep.bin_data; xs = sorted(bd.keys())
         ys = [bd[b]["accuracy"]*100 for b in xs]
-        if xs:
-            ax.plot(xs, ys, "-o", color=col, linewidth=2.5, markersize=7,
-                    label=f"{lbl}  ECE={rep.ece:.2f}", zorder=3,
-                    markerfacecolor=col, markeredgecolor="#04040e", markeredgewidth=1.5)
-    ax.set_xlabel("Stated Confidence (%)", color="#4a5a8a", fontsize=11)
-    ax.set_ylabel("Actual Accuracy (%)", color="#4a5a8a", fontsize=11)
-    ax.set_title("Live Reliability Diagram", color="#c0d0ff", fontsize=13, fontweight="bold")
-    ax.tick_params(colors="#3a4a6a"); ax.set_xlim(0,100); ax.set_ylim(0,100)
-    for spine in ax.spines.values(): spine.set_color("#1a1a3a")
-    ax.grid(True, linestyle="--", alpha=0.12, color="#2a2a4a")
-    ax.legend(facecolor="#080820", labelcolor="#8899bb", edgecolor="#1a1a3a", fontsize=10)
+        if xs: ax.plot(xs, ys, "-o", color=col, lw=2.5, ms=7, label=f"{lbl}  ECE={rep.ece:.2f}",
+                       mfc=col, mec="#04040e", mew=1.5, zorder=3)
+    ax.set_xlabel("Stated Confidence (%)", color="#3a4a6a", fontsize=11)
+    ax.set_ylabel("Actual Accuracy (%)", color="#3a4a6a", fontsize=11)
+    ax.set_title("Live Reliability Diagram", color="#8090bb", fontsize=13, fontweight="bold")
+    ax.tick_params(colors="#2a3a5a"); ax.set_xlim(0,100); ax.set_ylim(0,100)
+    for sp in ax.spines.values(): sp.set_color("#12122a")
+    ax.grid(True, ls="--", alpha=.1, color="#1a1a3a")
+    ax.legend(facecolor="#07071a", labelcolor="#5a6a8a", edgecolor="#12122a", fontsize=10)
     plt.tight_layout()
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
-    plt.savefig(tmp.name, dpi=120, bbox_inches="tight", facecolor="#04040e")
+    plt.savefig(tmp.name, dpi=130, bbox_inches="tight", facecolor="#04040e")
     plt.close(fig)
 
-    return "<div style='display:flex;flex-direction:column;gap:4px;'>" + rows_html + "</div>" + summary_html, tmp.name
-
-
-def _metric_card(label, echo_val, base_val, echo_col, base_col, note):
-    return (
-        f"<div style='background:rgba(255,255,255,0.02);border:1px solid rgba(80,100,255,0.1);"
-        f"border-radius:8px;padding:12px;text-align:center;'>"
-        f"<div style='font-size:11px;color:#3a4a6a;text-transform:uppercase;"
-        f"letter-spacing:0.07em;margin-bottom:6px;'>{label}</div>"
-        f"<div style='display:flex;justify-content:center;gap:12px;align-items:baseline;'>"
-        f"<span style='color:{echo_col};font-size:16px;font-weight:800;'>{echo_val}</span>"
-        f"<span style='color:#2a3a5a;font-size:12px;'>vs</span>"
-        f"<span style='color:{base_col};font-size:16px;font-weight:800;'>{base_val}</span>"
-        f"</div>"
-        f"{'<div style=color:#2a3a5a;font-size:10px;margin-top:3px;>'+note+'</div>' if note else ''}"
-        f"</div>"
-    )
+    return rows_html + summary_html, tmp.name
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Tab 3
+# Tab 3 logic
 # ────────────────────────────────���────────────────────────────────────────────
 
-def generate_fingerprint(model_label: str) -> tuple:
+def generate_fingerprint(model_label):
     from core.epistemic_fingerprint import _make_synthetic_fingerprint, plot_radar
     _init()
-    offset_map = {"Untrained": 0.30, "ECHO Trained": 0.0, "Heuristic": 0.15}
-    fp          = _make_synthetic_fingerprint(offset_map.get(model_label, 0.15), model_label)
-    baseline_fp = _make_synthetic_fingerprint(0.30, "Untrained")
-
+    offset = {"Untrained": .30, "ECHO Trained": .0, "Heuristic": .15}.get(model_label, .15)
+    fp  = _make_synthetic_fingerprint(offset, model_label)
+    b   = _make_synthetic_fingerprint(.30, "Untrained")
     tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
-    plot_radar(baseline_fp, fp, tmp.name)
-
-    strongest = fp.strongest_domain.capitalize()
-    weakest   = fp.weakest_domain.capitalize()
+    plot_radar(b, fp, tmp.name)
 
-    rows_html = (
-        "<div style='display:flex;flex-direction:column;gap:6px;'>"
-    )
+    bars = '<div style="display:flex;flex-direction:column;gap:8px;">'
     for d in cfg.DOMAINS:
-        score = fp.domain_scores.get(d, 0.5)
-        ece_v = 1 - score
-        col   = "#00ffa3" if score > 0.75 else ("#ffbb00" if score > 0.55 else "#ff4466")
-        pct   = int(score * 100)
-        rows_html += (
-            f"<div style='display:flex;align-items:center;gap:10px;'>"
-            f"<div style='width:80px;color:#6677aa;font-size:13px;font-weight:500;"
-            f"text-align:right;'>{d.capitalize()}</div>"
-            f"<div style='flex:1;background:rgba(255,255,255,0.05);border-radius:4px;height:8px;'>"
-            f"<div style='width:{pct}%;height:100%;border-radius:4px;"
-            f"background:{col};box-shadow:0 0 8px {col}55;'></div></div>"
-            f"<div style='width:40px;color:{col};font-size:12px;font-weight:700;"
-            f"text-align:right;'>{score:.2f}</div>"
-            f"<div style='width:40px;color:#3a4a6a;font-size:11px;"
-            f"text-align:right;'>ECE {ece_v:.2f}</div>"
-            f"</div>"
-        )
-    rows_html += "</div>"
-
-    insight_html = (
-        f"<div style='background:rgba(168,85,247,0.06);border:1px solid rgba(168,85,247,0.2);"
-        f"border-radius:8px;padding:14px 16px;margin-top:4px;'>"
-        f"<div style='font-size:13px;color:#c0d0ff;line-height:1.6;'>"
-        f"<strong style='color:#a855f7;'>{model_label}</strong> is strongest in "
-        f"<strong style='color:#00ffa3;'>{strongest}</strong> and most uncertain in "
-        f"<strong style='color:#ff4466;'>{weakest}</strong>.</div>"
-        f"<div style='margin-top:8px;font-size:14px;color:#6677aa;'>"
-        f"Overall ECE: <strong style='color:#ffd700;'>{fp.overall_ece:.3f}</strong></div></div>"
-    )
+        s = fp.domain_scores.get(d, .5)
+        col = "#00ffa3" if s > .75 else ("#ffbb00" if s > .55 else "#ff4466")
+        pct = int(s * 100)
+        bars += f"""
+<div style="display:flex;align-items:center;gap:10px;">
+  <div style="width:72px;text-align:right;color:#3a4a6a;font-size:12px;font-weight:500;font-family:Inter,sans-serif;">{d.capitalize()}</div>
+  <div style="flex:1;background:rgba(255,255,255,.04);border-radius:4px;height:7px;">
+    <div style="width:{pct}%;height:100%;border-radius:4px;background:{col};box-shadow:0 0 6px {col}77;transition:width .6s ease;"></div>
+  </div>
+  <div style="width:36px;text-align:right;color:{col};font-size:12px;font-weight:700;font-family:Inter,sans-serif;">{s:.2f}</div>
+</div>"""
+    bars += "</div>"
+
+    insight = f"""
+<div style="background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.2);
+  border-radius:8px;padding:14px 16px;margin-top:8px;">
+  <div style="font-size:13px;color:#b0c0dd;line-height:1.6;font-family:Inter,sans-serif;">
+    <strong style="color:#a855f7;">{model_label}</strong> is strongest in
+    <strong style="color:#00ffa3;">{fp.strongest_domain.capitalize()}</strong> and most
+    uncertain in <strong style="color:#ff4466;">{fp.weakest_domain.capitalize()}</strong>.
+  </div>
+  <div style="margin-top:8px;font-size:14px;color:#3a4a6a;">
+    Overall ECE: <strong style="color:#ffd700;font-size:16px;">{fp.overall_ece:.3f}</strong>
+  </div>
+</div>"""
 
-    return tmp.name, rows_html, insight_html
+    return tmp.name, bars, insight
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Tab 5
+# Tab 5 logic
 # ─────────────────────────────────────────────────────────────────────────────
 
-def run_evaluation() -> tuple:
+def run_evaluation():
     _init()
     from core.tasks import TASKS, TaskRunner, TASKS_BY_ID
     from core.baseline import HeuristicAgent
-    runner = TaskRunner()
-    agent  = HeuristicAgent()
-    result = runner.run_all(agent, _task_bank)
+    result = TaskRunner().run_all(HeuristicAgent(), _task_bank)
 
-    rows_html = ""
+    cards = ""
     for r in result.tasks:
-        t  = TASKS_BY_ID[r.task_id]
-        ok = r.passed
-        col = "#00ffa3" if ok else "#ff4466"
-        bg  = "rgba(0,255,163,0.05)" if ok else "rgba(255,68,102,0.05)"
-        border = "rgba(0,255,163,0.2)" if ok else "rgba(255,68,102,0.2)"
-        icon = "✅ PASS" if ok else "❌ FAIL"
-        pct  = min(int(r.score / t.pass_threshold * 100), 100)
-        rows_html += (
-            f"<div style='background:{bg};border:1px solid {border};"
-            f"border-radius:10px;padding:16px 20px;margin-bottom:8px;'>"
-            f"<div style='display:flex;justify-content:space-between;align-items:center;"
-            f"margin-bottom:10px;'>"
-            f"<div>"
-            f"<span style='color:{col};font-weight:700;font-size:15px;'>{icon}</span>"
-            f"<span style='color:#c0d0ff;font-size:14px;font-weight:600;margin-left:10px;'>"
-            f"{t.name}</span>"
-            f"</div>"
-            f"<div style='font-family:JetBrains Mono,monospace;font-size:13px;'>"
-            f"<span style='color:{col};font-weight:700;'>{r.score:.3f}</span>"
-            f"<span style='color:#2a3a5a;'> / {t.pass_threshold}</span>"
-            f"</div></div>"
-            f"<div style='background:rgba(255,255,255,0.04);border-radius:4px;height:6px;'>"
-            f"<div style='width:{pct}%;height:100%;border-radius:4px;"
-            f"background:{col};'></div></div>"
-            f"</div>"
-        )
+        t = TASKS_BY_ID[r.task_id]
+        col = "#00ffa3" if r.passed else "#ff4466"
+        bg  = "rgba(0,255,163,.05)" if r.passed else "rgba(255,68,102,.05)"
+        brd = "rgba(0,255,163,.2)" if r.passed else "rgba(255,68,102,.2)"
+        pct = min(int(r.score / max(t.pass_threshold,.001) * 100), 100)
+        icon = "✅" if r.passed else "❌"
+        cards += f"""
+<div style="background:{bg};border:1px solid {brd};border-radius:10px;padding:16px 20px;margin-bottom:8px;">
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
+    <div style="display:flex;align-items:center;gap:10px;">
+      <span style="font-size:18px;">{icon}</span>
+      <span style="color:#c0d0ff;font-size:14px;font-weight:700;font-family:Inter,sans-serif;">{t.name}</span>
+      <span style="background:rgba(255,255,255,.05);border-radius:4px;padding:2px 8px;
+        color:#2a3a5a;font-size:11px;">{r.task_id}</span>
+    </div>
+    <div style="font-family:'JetBrains Mono',monospace;font-size:13px;">
+      <span style="color:{col};font-weight:800;">{r.score:.3f}</span>
+      <span style="color:#1a2a4a;"> / {t.pass_threshold}</span>
+    </div>
+  </div>
+  <div style="background:rgba(255,255,255,.03);border-radius:4px;height:5px;">
+    <div style="width:{pct}%;height:100%;border-radius:4px;background:{col};"></div>
+  </div>
+</div>"""
 
-    verdict_color = "#00ffa3" if result.overall_pass else "#ff4466"
-    verdict_html = (
-        f"<div style='background:linear-gradient(135deg,rgba(0,255,163,0.08),rgba(68,136,255,0.05));"
-        f"border:1px solid {verdict_color}44;border-radius:10px;padding:16px 20px;"
-        f"text-align:center;margin-top:4px;'>"
-        f"<div style='font-size:20px;font-weight:800;color:{verdict_color};'>"
-        f"{'🏆 ALL TASKS PASSED' if result.overall_pass else '⚠️ Some tasks need improvement'}"
-        f"</div></div>"
-    )
+    verdict_col = "#00ffa3" if result.overall_pass else "#ff4466"
+    verdict = f"""
+<div style="background:linear-gradient(135deg,rgba(0,255,163,.08),rgba(51,102,255,.05));
+  border:1px solid {verdict_col}44;border-radius:10px;padding:18px;text-align:center;margin-top:4px;">
+  <div style="font-size:22px;font-weight:900;color:{verdict_col};font-family:Inter,sans-serif;">
+    {"🏆  ALL TASKS PASSED" if result.overall_pass else "⚠️  Some tasks below threshold"}
+  </div>
+</div>"""
 
     json_str = json.dumps(result.to_dict(), indent=2, default=str)
-    return rows_html + verdict_html, json_str
+    return cards + verdict, json_str
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Build app
+# App builder
 # ─────────────────────────────────────────────────────────────────────────────
 
 def build_app():
     import gradio as gr
 
     plots = {k: f"{cfg.PLOTS_DIR}/{v}" for k, v in {
-        "reliability":  "reliability_diagram.png",
-        "training":     "training_curves.png",
-        "fingerprint":  "epistemic_fingerprint.png",
-        "heatmap":      "calibration_heatmap.png",
-        "distribution": "confidence_distribution.png",
-        "domain":       "domain_comparison.png",
+        "reliability": "reliability_diagram.png",
+        "training":    "training_curves.png",
+        "fingerprint": "epistemic_fingerprint.png",
+        "heatmap":     "calibration_heatmap.png",
+        "distribution":"confidence_distribution.png",
+        "domain":      "domain_comparison.png",
     }.items()}
-    def _img(key): return plots[key] if Path(plots[key]).exists() else None
+    def _img(k): return plots[k] if Path(plots[k]).exists() else None
+
+    theme = _echo_theme()
 
     with gr.Blocks(title="ECHO ULTIMATE") as demo:
 
         # ── Hero ─────────────────────────────────────────────────────────────
-        gr.HTML(_HERO_HTML)
+        gr.HTML(HERO)
 
-        # ── Tab 1: Live Challenge ─────────────────────────────────────────────
+        # ── Tab 1 ────────────────────────────────────────────────────────────
         with gr.Tab("🎯  Live Challenge"):
-            gr.HTML(_section_header(
-                "🎯 Live Challenge",
-                "Answer questions with a confidence score — discover how well-calibrated you are",
-                "#00ffa3"
-            ))
+            gr.HTML(_tab_header("🎯 Live Challenge",
+                "Answer with a confidence score — see if you're as well-calibrated as ECHO", "#00ffa3"))
             with gr.Row():
-                dom_dd  = gr.Dropdown(
-                    ["Math","Logic","Factual","Science","Medical","Coding","Creative"],
-                    value="Math", label="Domain"
-                )
+                dom_dd  = gr.Dropdown(["Math","Logic","Factual","Science","Medical","Coding","Creative"],
+                                      value="Math", label="Domain")
                 diff_dd = gr.Dropdown(["Easy","Medium","Hard"], value="Easy", label="Difficulty")
-                get_btn = gr.Button("🎲  Get Question", variant="primary", scale=1)
-
+                get_btn = gr.Button("🎲  Get Question", variant="primary")
             question_box = gr.Markdown(
-                "<div style='color:#3a4a6a;font-style:italic;padding:12px;'>"
-                "Select a domain and difficulty, then click Get Question.</div>"
+                "<div style='color:#2a3a5a;padding:10px;font-style:italic;'>Select domain & difficulty, then click Get Question.</div>"
             )
-
             with gr.Row():
-                with gr.Column(scale=2):
-                    conf_sl = gr.Slider(0, 100, value=50, step=5,
-                                        label="Confidence  (0 = no idea · 100 = certain)")
-                with gr.Column(scale=3):
-                    ans_box = gr.Textbox(label="Your Answer", placeholder="Type your answer…",
-                                        lines=1)
-
+                conf_sl = gr.Slider(0, 100, value=50, step=5, label="Your Confidence  (0 = no idea · 100 = certain)")
+                ans_box = gr.Textbox(label="Your Answer", placeholder="Type your answer…", lines=1)
             sub_btn = gr.Button("✅  Submit Answer", variant="primary")
-
             with gr.Row():
                 result_html = gr.HTML()
                 stats_html  = gr.HTML()
@@ -967,200 +727,131 @@ def build_app():
             get_btn.click(get_question, [dom_dd, diff_dd], [question_box, ans_box])
             sub_btn.click(submit_answer, [conf_sl, ans_box], [result_html, stats_html, tip_md])
 
-        # ── Tab 2: Battle ─────────────────────────────────────────────────────
-        with gr.Tab("⚔  ECHO vs Overconfident AI"):
-            gr.HTML(_section_header(
-                "⚔ ECHO vs Overconfident AI",
-                "10-question head-to-head: calibrated ECHO vs AlwaysHigh baseline (always 90% confident)",
-                "#ff4466"
-            ))
+        # ── Tab 2 ────────────────────────────────────────────────────────────
+        with gr.Tab("⚔  ECHO vs AI"):
+            gr.HTML(_tab_header("⚔ ECHO vs Overconfident AI",
+                "10-question head-to-head: calibrated ECHO vs AlwaysHigh baseline (90% on everything)", "#ff4466"))
             with gr.Row():
                 scenario_dd = gr.Dropdown(
                     ["Mixed","Math","Logic","Factual","Science","Medical","Coding","Creative"],
-                    value="Mixed", label="Test Scenario"
-                )
+                    value="Mixed", label="Test Scenario")
                 run_btn = gr.Button("⚔  Run 10 Questions", variant="primary")
-
             with gr.Row():
-                with gr.Column(scale=3):
-                    cmp_html = gr.HTML()
-                with gr.Column(scale=2):
-                    mini_img = gr.Image(label="Live Reliability Diagram", type="filepath",
-                                        show_label=True, height=320)
-
+                with gr.Column(scale=3): cmp_html = gr.HTML()
+                with gr.Column(scale=2): mini_img = gr.Image(label="Live Reliability Diagram",
+                                                              type="filepath", height=340)
             run_btn.click(run_comparison, [scenario_dd], [cmp_html, mini_img])
 
-        # ── Tab 3: Fingerprint ────────────────────────────────────────────────
+        # ── Tab 3 ────────────────────────────────────────────────────────────
         with gr.Tab("🧬  Epistemic Fingerprint"):
-            gr.HTML(_section_header(
-                "🧬 Epistemic Fingerprint",
-                "Radar chart of calibration across all 7 domains — larger green = better everywhere",
-                "#a855f7"
-            ))
+            gr.HTML(_tab_header("🧬 Epistemic Fingerprint",
+                "Radar chart of per-domain calibration — larger green area = better everywhere", "#a855f7"))
             with gr.Row():
-                model_dd = gr.Dropdown(
-                    ["ECHO Trained","Untrained","Heuristic"],
-                    value="ECHO Trained", label="Model"
-                )
-                fp_btn = gr.Button("🔬  Generate Fingerprint", variant="primary")
-
+                model_dd = gr.Dropdown(["ECHO Trained","Untrained","Heuristic"],
+                                       value="ECHO Trained", label="Model")
+                fp_btn   = gr.Button("🔬  Generate Fingerprint", variant="primary")
             with gr.Row():
                 with gr.Column(scale=3):
                     fp_img = gr.Image(label="Epistemic Fingerprint", type="filepath",
-                                      value=_img("fingerprint"), height=480)
+                                     value=_img("fingerprint"), height=480)
                 with gr.Column(scale=2):
-                    fp_bars   = gr.HTML()
+                    fp_bars    = gr.HTML()
                     fp_insight = gr.HTML()
-
             fp_btn.click(generate_fingerprint, [model_dd], [fp_img, fp_bars, fp_insight])
 
-        # ── Tab 4: Training Evidence ──────────────────────────────────────────
+        # ── Tab 4 ────────────────────────────────────────────────────────────
         with gr.Tab("📊  Training Evidence"):
-            gr.HTML(_section_header(
-                "📊 Training Evidence",
-                "6 plots generated from GRPO training — from random overconfidence to precise calibration",
-                "#ffd700"
+            gr.HTML(_tab_header("📊 Training Evidence",
+                "6 plots generated from GRPO training — from overconfidence to precise calibration", "#ffd700"))
+            gr.HTML(_card(
+                "<div style='font-size:14px;font-weight:700;color:#00ffa3;margin-bottom:6px;'>★ Hero Plot — Reliability Diagram</div>"
+                "<div style='font-size:13px;color:#3a4a6a;line-height:1.6;'>"
+                "Untrained model (red): flat line far from diagonal — always overconfident. "
+                "ECHO trained (green): near-perfect calibration — hugs the diagonal."
+                "</div>",
+                "rgba(0,255,163,.15)"
             ))
-
-            gr.HTML("""
-<div style='background:rgba(0,255,163,0.05);border:1px solid rgba(0,255,163,0.2);
-  border-radius:10px;padding:16px 20px;margin-bottom:8px;'>
-  <div style='font-size:15px;font-weight:700;color:#00ffa3;margin-bottom:6px;'>
-    ★ Hero Plot — Reliability Diagram</div>
-  <div style='color:#6677aa;font-size:13px;'>
-    The smoking gun. Untrained model (red): flat line far from the diagonal — always overconfident.
-    ECHO trained (green): hugs the perfect calibration diagonal.
-  </div>
-</div>""")
             gr.Image(value=_img("reliability"), label="Reliability Diagram", height=380)
-
             with gr.Row():
                 with gr.Column():
-                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#4488ff;"
-                            "margin:8px 0 4px;'>📈 Training Curves</div>"
-                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
-                            "ECE drops 0.34 → 0.08 across 3 curriculum phases</div>")
-                    gr.Image(value=_img("training"), label="Training Curves", height=300)
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#4488ff;margin:10px 0 4px;'>📈 Training Curves</div>")
+                    gr.Image(value=_img("training"), label="Training Curves", height=290)
                 with gr.Column():
-                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#a855f7;"
-                            "margin:8px 0 4px;'>🧬 Epistemic Fingerprint</div>"
-                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
-                            "Domain-level calibration — green fills every axis</div>")
-                    gr.Image(value=_img("fingerprint"), label="Epistemic Fingerprint", height=300)
-
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#a855f7;margin:10px 0 4px;'>🧬 Epistemic Fingerprint</div>")
+                    gr.Image(value=_img("fingerprint"), label="Epistemic Fingerprint", height=290)
             with gr.Row():
                 with gr.Column():
-                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#ffd700;"
-                            "margin:8px 0 4px;'>🌡️ Calibration Heatmap</div>"
-                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
-                            "7 domains × 3 difficulties — red=bad, green=good</div>")
-                    gr.Image(value=_img("heatmap"), label="Calibration Heatmap", height=300)
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#ffd700;margin:10px 0 4px;'>🌡️ Calibration Heatmap</div>")
+                    gr.Image(value=_img("heatmap"), label="Calibration Heatmap", height=290)
                 with gr.Column():
-                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#ff8c00;"
-                            "margin:8px 0 4px;'>📊 Confidence Distribution</div>"
-                            "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
-                            "Untrained: spike at 85–95%. ECHO: spread = actual accuracy</div>")
-                    gr.Image(value=_img("distribution"), label="Confidence Distribution", height=300)
-
-            gr.HTML("<div style='font-size:13px;font-weight:600;color:#ff4466;"
-                    "margin:8px 0 4px;'>🏢 Domain Comparison</div>"
-                    "<div style='font-size:12px;color:#4a5a8a;margin-bottom:8px;'>"
-                    "ECE improvement across all 7 domains</div>")
-            gr.Image(value=_img("domain"), label="Domain Comparison", height=320)
-
+                    gr.HTML("<div style='font-size:13px;font-weight:600;color:#ff8c00;margin:10px 0 4px;'>📊 Confidence Distribution</div>")
+                    gr.Image(value=_img("distribution"), label="Confidence Distribution", height=290)
+            gr.HTML("<div style='font-size:13px;font-weight:600;color:#ff4466;margin:10px 0 4px;'>🏢 Domain Comparison</div>")
+            gr.Image(value=_img("domain"), label="Domain Comparison", height=300)
             regen_btn = gr.Button("🔄  Regenerate All Plots", variant="secondary")
-            regen_status = gr.HTML()
-
+            regen_out = gr.HTML()
             def regen():
                 from training.evaluate import make_synthetic_pair, compare_and_plot
-                before, after = make_synthetic_pair()
-                paths = compare_and_plot(after, {"Untrained": before})
-                html = ("<div style='color:#00ffa3;font-size:13px;font-weight:600;"
-                        "padding:8px 12px;background:rgba(0,255,163,0.06);"
-                        "border-radius:6px;'>✅ All 6 plots regenerated</div>")
-                return html
-
-            regen_btn.click(regen, outputs=[regen_status])
-
-        # ── Tab 5: Evaluation ─────────────────────────────────────────────────
-        with gr.Tab("🏆  Official Evaluation"):
-            gr.HTML(_section_header(
-                "🏆 Official OpenEnv Evaluation",
-                "3 tasks × 30 episodes — validates ECHO meets the benchmark thresholds",
-                "#ffd700"
-            ))
+                b, a = make_synthetic_pair()
+                compare_and_plot(a, {"Untrained": b})
+                return _card("<span style='color:#00ffa3;font-weight:600;'>✅  All 6 plots regenerated</span>")
+            regen_btn.click(regen, outputs=[regen_out])
+
+        # ── Tab 5 ────────────────────────────────────────────────────────────
+        with gr.Tab("🏆  Evaluation"):
+            gr.HTML(_tab_header("🏆 Official OpenEnv Evaluation",
+                "3 tasks × 30 episodes = 90 episodes — validates ECHO meets all thresholds", "#ffd700"))
             gr.HTML("""
-<div style='display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px;'>
-  <div style='background:rgba(68,136,255,0.06);border:1px solid rgba(68,136,255,0.15);
-    border-radius:8px;padding:12px 16px;'>
-    <div style='color:#4488ff;font-weight:700;font-size:13px;'>Task 1 — Easy</div>
-    <div style='color:#3a4a6a;font-size:12px;margin-top:4px;'>ECE target: &lt; 0.15</div>
+<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px;">
+  <div style="background:rgba(51,102,255,.06);border:1px solid rgba(51,102,255,.2);border-radius:8px;padding:13px 16px;">
+    <div style="color:#4488ff;font-weight:700;font-size:13px;font-family:Inter,sans-serif;">Task 1 — Easy</div>
+    <div style="color:#1a2a5a;font-size:12px;margin-top:4px;">ECE target: &lt; 0.15</div>
   </div>
-  <div style='background:rgba(255,187,0,0.06);border:1px solid rgba(255,187,0,0.15);
-    border-radius:8px;padding:12px 16px;'>
-    <div style='color:#ffbb00;font-weight:700;font-size:13px;'>Task 2 — Medium</div>
-    <div style='color:#3a4a6a;font-size:12px;margin-top:4px;'>ECE target: &lt; 0.20</div>
+  <div style="background:rgba(255,215,0,.06);border:1px solid rgba(255,215,0,.2);border-radius:8px;padding:13px 16px;">
+    <div style="color:#ffd700;font-weight:700;font-size:13px;font-family:Inter,sans-serif;">Task 2 — Medium</div>
+    <div style="color:#2a2a00;font-size:12px;margin-top:4px;">ECE target: &lt; 0.20</div>
   </div>
-  <div style='background:rgba(168,85,247,0.06);border:1px solid rgba(168,85,247,0.15);
-    border-radius:8px;padding:12px 16px;'>
-    <div style='color:#a855f7;font-weight:700;font-size:13px;'>Task 3 — Hard</div>
-    <div style='color:#3a4a6a;font-size:12px;margin-top:4px;'>ECE target: &lt; 0.25</div>
+  <div style="background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.2);border-radius:8px;padding:13px 16px;">
+    <div style="color:#a855f7;font-weight:700;font-size:13px;font-family:Inter,sans-serif;">Task 3 — Hard</div>
+    <div style="color:#1a0a3a;font-size:12px;margin-top:4px;">ECE target: &lt; 0.25</div>
   </div>
 </div>""")
-            eval_btn = gr.Button("🚀  Run Full Evaluation  (90 episodes)", variant="primary")
+            eval_btn    = gr.Button("🚀  Run Full Evaluation  (90 episodes)", variant="primary")
             result_html = gr.HTML()
-            with gr.Accordion("📄 Raw JSON output", open=False):
+            with gr.Accordion("📄 Raw JSON", open=False):
                 json_out = gr.Code(language="json")
             eval_btn.click(run_evaluation, outputs=[result_html, json_out])
 
-        # ── Tab 6: Live Training ───────────────────────────────────────────────
+        # ── Tab 6 ────────────────────────────────────────────────────────────
         with gr.Tab("⚡  Live Training"):
-            gr.HTML(_section_header(
-                "⚡ Live GRPO Training",
-                "Watch ECE drop in real-time as the model trains. Dashed lines = pass thresholds.",
-                "#4488ff"
-            ))
+            gr.HTML(_tab_header("⚡ Live GRPO Training",
+                "Watch ECE drop in real-time — dashed lines show Task 1 & 2 pass thresholds", "#4488ff"))
             with gr.Row():
-                lt_start_btn = gr.Button("🚀  Start Live Training Demo", variant="primary", scale=2)
-                lt_stop_btn  = gr.Button("⏹  Stop", variant="stop", scale=1)
-
-            lt_status = gr.Textbox(
-                label="Training Log",
-                value="Ready — click Start to simulate GRPO training.",
-                lines=2, interactive=False,
-                elem_classes=["terminal-box"],
-            )
-            lt_plot = gr.Image(
-                label="ECE During Training",
-                type="filepath", height=380,
-            )
-            lt_progress = gr.Slider(
-                minimum=0, maximum=100, value=0,
-                label="Progress (%)", interactive=False,
-            )
-
-            lt_start_btn.click(start_live_training,
-                               outputs=[lt_status, lt_plot, lt_progress])
-            lt_stop_btn.click(stop_live_training, outputs=[lt_status])
+                lt_start = gr.Button("🚀  Start Live Training Demo", variant="primary", scale=2)
+                lt_stop  = gr.Button("⏹  Stop", variant="stop", scale=1)
+            lt_status = gr.Textbox(label="Training Log",
+                                   value="Ready — click Start to simulate GRPO training.",
+                                   lines=2, interactive=False)
+            lt_plot   = gr.Image(label="ECE During Training", type="filepath", height=380)
+            lt_prog   = gr.Slider(0, 100, value=0, label="Progress (%)", interactive=False)
+            lt_start.click(start_live_training, outputs=[lt_status, lt_plot, lt_prog])
+            lt_stop.click(stop_live_training, outputs=[lt_status])
 
-    return demo
+    return demo, theme
 
 
 def main():
     import gradio as gr
     logging.basicConfig(level=logging.INFO)
-    demo = build_app()
+    demo, theme = build_app()
     demo.launch(
         server_name="0.0.0.0",
         server_port=cfg.GRADIO_PORT,
         share=False,
         show_error=True,
         css=_CSS,
-        theme=gr.themes.Base(
-            primary_hue=gr.themes.colors.blue,
-            neutral_hue=gr.themes.colors.slate,
-            font=[gr.themes.GoogleFont("Inter"), "sans-serif"],
-        ),
+        js=_JS,
+        theme=theme,
     )