Update app.py

app.py

@@ -1042,713 +1042,34 @@ if model_load_error:
 # ---------------------------------------------------------------------------
 
 CHEX_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
-
 *, *::before, *::after { box-sizing: border-box; }
 
 :root {
-  --bg-base: #0B0E14;
-  --bg-grad: linear-gradient(180deg, #0B0E14 0%, #06080C 100%);
-  --bg-elev: #131720;
-  --bg-elev-strong: #191E2B;
-  --bg-sunken: #0E121A;
-  --bg-input: rgba(0,0,0,0.2);
-  --border: rgba(255,255,255,0.06);
-  --border-strong: rgba(255,255,255,0.12);
-  --hairline: rgba(255,255,255,0.03);
-  --fg: #E2E8F0;
-  --fg-muted: #94A3B8;
-  --fg-subtle: #475569;
-  --green: #10B981;
-  --green-bg: rgba(16,185,129,0.10);
-  --green-border: rgba(16,185,129,0.25);
-  --red: #F43F5E;
-  --red-bg: rgba(244,63,94,0.10);
-  --red-border: rgba(244,63,94,0.25);
-  --amber: #F59E0B;
-  --amber-bg: rgba(245,158,11,0.10);
-  --amber-border: rgba(245,158,11,0.25);
-  --blur: 24px;
-  --blur-strong: 32px;
-  --shadow-md: 0 1px 0 rgba(255,255,255,0.03) inset,
-               0 8px 24px rgba(0,0,0,0.4),
-               0 1px 2px rgba(0,0,0,0.2);
-  --radius: 10px;
-  --radius-lg: 14px;
-}
-
-body {
-  background: var(--bg-grad) !important;
-  background-attachment: fixed !important;
-  background-color: var(--bg-base) !important;
-  min-height: 100vh;
-}
-
-.gradio-container {
-  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
-  font-size: 14px !important;
-  line-height: 1.55 !important;
-  color: var(--fg) !important;
-  background: transparent !important;
-  -webkit-font-smoothing: antialiased !important;
-  -moz-osx-font-smoothing: grayscale !important;
-  letter-spacing: -0.006em !important;
-  max-width: 1480px !important;
-  margin: 0 auto !important;
-  padding: 0 !important;
-}
-
-footer, .footer, .built-with, #footer,
-footer.svelte-1ax1toq, .svelte-1ax1toq.footer,
-.gradio-container > .footer,
-.share-button, .copy-all-button,
-.gradio-container > .top-panel { display: none !important; }
-
-#root, .app, main {
-  background: transparent !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-.contain, .container {
-  padding: 0 !important;
-  gap: 0 !important;
-  max-width: 100% !important;
-  background: transparent !important;
-}
-
-.block, .gr-block, .gr-box, .gr-group, .gradio-container .block {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-  border-radius: 0 !important;
-}
-
-.gap, .gr-row { gap: 20px !important; }
-
-.panel, .gr-panel, .gr-padded {
-  background: transparent !important;
-  border: none !important;
-  padding: 0 !important;
-  box-shadow: none !important;
-}
-
-.tabs, .gr-tabs { background: transparent !important; border: none !important; }
-
-.tabitem, .gr-tabitem {
-  background: transparent !important;
-  border: none !important;
-  padding: 24px !important;
-}
-
-[data-testid="textbox"], .gr-textbox {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-}
-
-label.block, .label-wrap {
-  background: transparent !important;
-  border: none !important;
-  padding: 0 !important;
-  gap: 6px !important;
-  display: flex !important;
-  flex-direction: column !important;
-}
-
-.row, .gr-row { background: transparent !important; border: none !important; padding: 0 !important; }
-
-.form, .gr-form {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-  gap: 14px !important;
-}
-
-/* ── Topbar ─────────────────────────────────────────────────────────────── */
-.chex-topbar {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 0 28px;
-  height: 52px;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  background: rgba(11, 14, 20, 0.85);
-  backdrop-filter: blur(var(--blur-strong)) saturate(160%);
-  -webkit-backdrop-filter: blur(var(--blur-strong)) saturate(160%);
-  border-bottom: 1px solid var(--hairline);
-}
-
-.chex-logo {
-  width: 22px; height: 22px; border-radius: 5px;
-  background: #E2E8F0;
-  color: #0B0E14; display: grid; place-items: center;
-  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 10px;
-  letter-spacing: -0.05em;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
-  flex-shrink: 0;
-}
-
-.chex-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); font-family: 'Inter', sans-serif; }
-.chex-tag { font-size: 12px; color: var(--fg-muted); font-weight: 400; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.08); font-family: 'Inter', sans-serif; }
-
-.chex-pill {
-  display: inline-flex; align-items: center; gap: 7px;
-  padding: 4px 11px 4px 9px; border: 1px solid var(--border); border-radius: 999px;
-  font-size: 11.5px; color: var(--fg-muted); background: var(--bg-elev);
-  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
-  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
-}
-
-.chex-dot {
-  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
-  box-shadow: 0 0 0 3px rgba(16,185,129,0.22); display: inline-block; flex-shrink: 0;
-}
-
-/* ── Warning banner ─────────────────────────────────────────────────────── */
-.chex-banner {
-  display: flex; align-items: center; gap: 12px; padding: 11px 20px;
-  border-bottom: 1px solid var(--amber-border); background: var(--amber-bg);
-  backdrop-filter: blur(var(--blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
-  color: var(--amber); font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 500;
-}
-.chex-banner-icon { font-size: 14px; flex-shrink: 0; }
-.chex-banner-body { color: var(--fg); font-weight: 400; line-height: 1.5; }
-.chex-banner-body strong { color: var(--fg); font-weight: 600; }
-.chex-banner code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; }
-
-/* ── Tab nav ────────────────────────────────────────────────────────────── */
-.tab-nav {
-  background: rgba(11,14,20,0.85) !important;
-  backdrop-filter: blur(var(--blur)) saturate(160%) !important;
-  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%) !important;
-  border-bottom: 1px solid var(--hairline) !important;
-  border-top: none !important; padding: 0 20px !important; gap: 0 !important;
-  position: sticky !important; top: 52px !important; z-index: 99 !important; overflow: visible !important;
-}
-
-.tab-nav button {
-  background: transparent !important; border: none !important; border-radius: 0 !important;
-  padding: 13px 16px !important; color: var(--fg-muted) !important;
-  font-size: 13px !important; font-weight: 500 !important; font-family: 'Inter', sans-serif !important;
-  letter-spacing: -0.003em !important; position: relative !important; white-space: nowrap !important;
-  transition: color 0.15s ease !important; cursor: pointer !important; box-shadow: none !important; outline: none !important;
-}
-
-.tab-nav button:hover { color: var(--fg) !important; background: transparent !important; }
-
-.tab-nav button.selected, .tab-nav button[aria-selected="true"] {
-  color: var(--fg) !important; background: transparent !important; font-weight: 500 !important; box-shadow: none !important;
-}
-
-.tab-nav button.selected::after, .tab-nav button[aria-selected="true"]::after {
-  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
-  height: 1.5px; background: var(--fg); border-radius: 2px 2px 0 0;
-}
-
-.tabitem { border: none !important; background: transparent !important; padding: 20px 20px !important; }
-
-/* ── Cards (gr-group) ───────────────────────────────────────────────────── */
-.gradio-container .gr-group {
-  background: var(--bg-elev) !important;
-  backdrop-filter: blur(var(--blur)) saturate(180%) !important;
-  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%) !important;
-  border: 1px solid var(--border) !important;
-  border-radius: var(--radius-lg) !important;
-  box-shadow: var(--shadow-md) !important;
-  overflow: hidden !important; padding: 0 !important;
-}
-
-.gradio-container .gr-group > *:not(.chex-card-header):not(.chex-load-bar) {
-  padding-left: 20px !important; padding-right: 20px !important;
-}
-.gradio-container .gr-group > *:last-child { padding-bottom: 18px !important; }
-
-/* ── Card header (new design) ───────────────────────────────────────────── */
-.chex-card-header {
-  padding: 14px 20px; display: flex; align-items: center;
-  gap: 10px; border-bottom: 1px solid var(--hairline);
-}
-
-.chex-card-icon {
-  opacity: 0.45; flex-shrink: 0; display: flex; align-items: center;
-}
-
-.chex-card-title {
-  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
-  color: var(--fg); white-space: nowrap; font-family: 'Inter', sans-serif;
-  display: inline-flex; align-items: center; gap: 0;
-}
-
-.chex-card-sep {
-  font-size: 13px; color: var(--fg-subtle); font-weight: 400;
-  padding: 0 6px; font-family: 'Inter', sans-serif;
-}
-
-.chex-card-sub {
-  font-size: 12px; color: var(--fg-subtle); font-weight: 400;
-  font-family: 'Inter', sans-serif; letter-spacing: 0;
-}
-
-/* ── Load bar (LOAD chip + sample buttons row) ─────────────────────────── */
-.chex-load-bar {
-  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
-  border-bottom: 1px solid var(--hairline); background: var(--bg-sunken); flex-wrap: wrap;
-}
-
-.chex-load-chip {
-  font-family: 'JetBrains Mono', monospace; font-size: 10px;
-  text-transform: uppercase; letter-spacing: 0.1em;
-  color: var(--fg-subtle); background: var(--bg-elev-strong);
-  border: 1px solid var(--border); border-radius: 4px;
-  padding: 3px 7px; white-space: nowrap; flex-shrink: 0;
-}
-
-/* Question label chip */
-.chex-question-label {
-  font-family: 'JetBrains Mono', monospace; font-size: 10px;
-  text-transform: uppercase; letter-spacing: 0.1em;
-  color: var(--fg-subtle); padding: 14px 20px 6px; display: block;
-}
-
-/* ── Suggested hint ─────────────────────────────────────────────────────── */
-.chex-suggested {
-  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
-  background: rgba(13,18,32,0.04); border: 1px solid var(--border); border-radius: var(--radius);
-  font-size: 12.5px; color: var(--fg-muted); font-family: 'Inter', sans-serif; line-height: 1.4; margin-top: 2px;
-}
-.chex-suggested-icon { font-size: 13px; flex-shrink: 0; opacity: 0.7; }
-
-/* ── Labels ─────────────────────────────────────────────────────────────── */
-label > span:first-child, .label-wrap span,
-.gradio-container label span.text-gray-500, span.svelte-1b6s6s {
-  font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important;
-  font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important;
-  color: var(--fg-subtle) !important; margin-bottom: 6px !important; display: block !important;
-}
-
-/* ── Text inputs ────────────────────────────────────────────────────────── */
-textarea, input[type="text"], input[type="search"],
-.gradio-container .gr-input, .gradio-container .gr-textarea,
-.gradio-container [data-testid="textbox"] textarea,
-.gradio-container [data-testid="textbox"] input {
-  background: var(--bg-input) !important; backdrop-filter: blur(10px) !important;
-  -webkit-backdrop-filter: blur(10px) !important; border: 1px solid var(--border) !important;
-  border-radius: var(--radius) !important; color: var(--fg) !important;
-  font-family: 'Inter', sans-serif !important; font-size: 13px !important;
-  line-height: 1.6 !important; padding: 11px 14px !important;
-  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
-  resize: vertical !important;
-}
-
-textarea:focus, input[type="text"]:focus,
-.gradio-container [data-testid="textbox"] textarea:focus,
-.gradio-container [data-testid="textbox"] input:focus {
-  border-color: var(--border-strong) !important; background: var(--bg-elev) !important;
-  box-shadow: 0 0 0 2px rgba(255,255,255,0.05) !important; outline: none !important;
-}
-
-textarea::placeholder, input::placeholder { color: var(--fg-subtle) !important; }
-
-textarea[readonly],
-.gradio-container [data-testid="textbox"][data-interactive="false"] textarea {
-  background: var(--bg-sunken) !important; border: 1px solid var(--hairline) !important;
-  color: var(--fg) !important; cursor: default !important;
-}
-
-/* ── Buttons ────────────────────────────────────────────────────────────── */
-.gradio-container button {
-  font-family: 'Inter', sans-serif !important; font-size: 13px !important;
-  font-weight: 500 !important; border-radius: var(--radius) !important;
-  padding: 9px 16px !important;
-  transition: opacity 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
-  cursor: pointer !important; letter-spacing: -0.003em !important;
-}
-
-.gradio-container button.primary, button.primary {
-  background: var(--fg) !important; color: var(--bg-base) !important; border: 1px solid var(--fg) !important;
-  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.08) inset !important;
-}
-.gradio-container button.primary:hover, button.primary:hover { opacity: 0.9 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }
-
-.gradio-container button.secondary, button.secondary {
-  background: transparent !important; color: var(--fg-muted) !important;
-  border: 1px solid var(--border-strong) !important; box-shadow: none !important;
-}
-.gradio-container button.secondary:hover, button.secondary:hover { background: var(--bg-elev) !important; color: var(--fg) !important; border-color: var(--border-strong) !important; }
-
-button.sm, .gradio-container button[size="sm"], button.small { font-size: 12px !important; padding: 6px 12px !important; }
-
-/* ── File upload ────────────────────────────────────────────────────────── */
-.gradio-container .upload-container, .gradio-container [data-testid="file"] {
-  background: var(--bg-input) !important; border: 1px dashed var(--border-strong) !important; border-radius: var(--radius) !important;
-}
-
-/* ── Dataframe / table ──────────────────────────────────────────────────── */
-.gradio-container .wrap.svelte-a4gbbr, .gradio-container .table-wrap,
-.gradio-container [data-testid="dataframe"] {
-  background: var(--bg-elev) !important;
-  backdrop-filter: blur(var(--blur)) saturate(180%) !important;
-  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%) !important;
-  border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important;
-  box-shadow: var(--shadow-md) !important; overflow: hidden !important;
+  --green: #16a34a;
+  --red:   #dc2626;
+  --amber: #d97706;
 }
 
-.gradio-container table {
-  background: transparent !important; font-size: 13px !important;
-  font-family: 'Inter', sans-serif !important; border-collapse: separate !important;
-  border-spacing: 0 !important; width: 100% !important; border: none !important;
-  box-shadow: none !important; border-radius: 0 !important;
-}
-
-.gradio-container th {
-  background: var(--bg-sunken) !important; border-bottom: 1px solid var(--hairline) !important;
-  border-top: none !important; padding: 14px 18px !important;
-  font-family: 'JetBrains Mono', monospace !important; font-size: 10px !important;
-  text-transform: uppercase !important; letter-spacing: 0.08em !important;
-  color: var(--fg-muted) !important; font-weight: 500 !important; text-align: left !important;
-}
-
-.gradio-container td {
-  padding: 16px 18px !important; border-top: 1px solid var(--hairline) !important;
-  border-bottom: none !important; vertical-align: top !important; line-height: 1.6 !important;
-  color: var(--fg) !important; background: transparent !important;
-}
-
-.gradio-container tr:first-child td { border-top: none !important; }
-
-/* ── Markdown prose ─────────────────────────────────────────────────────── */
-.gradio-container .prose, .gradio-container .md, .gradio-container [data-testid="markdown"] {
-  color: var(--fg) !important; font-family: 'Inter', sans-serif !important;
-  font-size: 13px !important; line-height: 1.65 !important;
-}
-
-.gradio-container .prose h2, .gradio-container .md h2 {
-  font-size: 18px !important; font-weight: 600 !important; letter-spacing: -0.02em !important;
-  color: var(--fg) !important; margin-bottom: 10px !important; margin-top: 0 !important;
-}
-
-.gradio-container .prose p, .gradio-container .md p {
-  color: var(--fg-muted) !important; font-size: 13px !important; line-height: 1.65 !important; margin-bottom: 8px !important;
-}
-
-.gradio-container .prose strong, .gradio-container .md strong { color: var(--fg) !important; font-weight: 600 !important; }
-
-.gradio-container .prose code, .gradio-container .md code {
-  font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important;
-  background: rgba(13,18,32,0.06) !important; padding: 1px 5px !important;
-  border-radius: 4px !important; color: var(--fg) !important;
-}
-
-/* ── Benchmark intro card ───────────────────────────────────────────────── */
-.chex-bench-wrap {
-  background: var(--bg-elev);
-  backdrop-filter: blur(var(--blur)) saturate(180%);
-  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
-  border: 1px solid var(--border); border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md); margin-bottom: 20px; overflow: hidden;
-}
-
-.chex-bench-top {
-  padding: 24px 28px 20px; display: flex; align-items: flex-start; gap: 28px;
-}
-
-.chex-bench-copy { flex: 1; min-width: 0; }
-.chex-bench-copy h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg); font-family: 'Inter', sans-serif; }
-.chex-bench-copy p { margin: 0; color: var(--fg-muted); font-size: 13px; line-height: 1.65; font-family: 'Inter', sans-serif; }
-
-.chex-bench-stats {
-  display: flex; gap: 0; flex-shrink: 0;
-  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
-}
-.chex-bench-stat {
-  padding: 14px 20px; display: flex; flex-direction: column; gap: 3px;
-  border-right: 1px solid var(--border);
-}
-.chex-bench-stat:last-child { border-right: none; }
-.chex-bench-stat .v { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
-.chex-bench-stat .v.red { color: var(--red); }
-.chex-bench-stat .v.green { color: var(--green); }
-.chex-bench-stat .v.white { color: var(--fg); }
-.chex-bench-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); font-family: 'JetBrains Mono', monospace; }
-
-/* ── Benchmark HTML table ──────────────────────────���────────────────────── */
-.chex-bench-table-wrap {
-  background: var(--bg-elev);
-  backdrop-filter: blur(var(--blur)) saturate(180%);
-  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
-  border: 1px solid var(--border); border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-md); overflow: hidden;
-}
-
-.chex-bench-table {
-  width: 100%; border-collapse: separate; border-spacing: 0;
-  font-family: 'Inter', sans-serif; font-size: 13px;
-}
-
-.chex-bench-table th {
-  background: var(--bg-sunken) !important; border-bottom: 1px solid var(--hairline) !important;
-  padding: 13px 18px !important; font-family: 'JetBrains Mono', monospace !important;
-  font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important;
-  color: var(--fg-muted) !important; font-weight: 500 !important; text-align: left !important;
-  white-space: nowrap;
-}
-
-.chex-bench-table td {
-  padding: 16px 18px; border-top: 1px solid var(--hairline);
-  vertical-align: top; line-height: 1.55; color: var(--fg);
-}
-
-.chex-bench-table tr:first-child td { border-top: none; }
-
-.chex-bench-table .col-question { color: var(--fg); font-weight: 400; }
-.chex-bench-table .col-truth { color: var(--fg-muted); font-style: italic; }
-.chex-bench-table .col-base { color: #F87171; }
-.chex-bench-table .col-halluc { text-align: center; }
-
-/* Inline label badges for the benchmark table */
-.cbadge {
-  display: inline-flex; align-items: center; gap: 6px;
-  padding: 5px 10px; border-radius: 8px; font-size: 11px;
-  font-weight: 600; letter-spacing: 0.02em; font-family: 'Inter', sans-serif;
-  white-space: nowrap;
-}
-.cbadge-green  { background: rgba(16,185,129,0.12); color: #10B981; border: 1px solid rgba(16,185,129,0.28); }
-.cbadge-red    { background: rgba(244,63,94,0.10);  color: #F43F5E; border: 1px solid rgba(244,63,94,0.28); }
-.cbadge-amber  { background: rgba(245,158,11,0.12); color: #F59E0B; border: 1px solid rgba(245,158,11,0.30); }
-.cbadge-icon   { font-size: 12px; }
-
-.chex-halluc-yes  { color: var(--red); font-size: 15px; }
-.chex-halluc-no   { color: var(--green); font-size: 15px; }
-
-/* ── Footer ─────────────────────────────────────────────────────────────── */
-.chex-footer {
-  border-top: 1px solid var(--hairline); padding: 13px 28px;
-  display: flex; align-items: center; gap: 18px; color: var(--fg-subtle);
-  font-size: 11px; font-family: 'JetBrains Mono', monospace;
-  background: var(--bg-elev); backdrop-filter: blur(var(--blur));
-  -webkit-backdrop-filter: blur(var(--blur)); margin-top: 24px;
-  justify-content: space-between;
-}
-.chex-footer-left { display: flex; align-items: center; gap: 18px; }
-.chex-footer .sep { opacity: 0.35; }
-.chex-footer-right { font-size: 11px; color: var(--fg-subtle); opacity: 0.6; }
-
-/* ── Misc helpers ───────────────────────────────────────────────────────── */
-.chex-label-wrap { padding: 4px 0 8px; }
-.chex-divider { height: 1px; background: var(--hairline); margin: 18px 0; }
-.chex-section-kicker { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); margin-bottom: 10px; display: block; }
-.chex-card-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
-
-/* ── Empty state ────────────────────────────────────────────────────────── */
-.chex-empty {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  gap: 10px; padding: 48px 24px; color: var(--fg-subtle); text-align: center;
-}
-.chex-empty-icon { font-size: 20px; opacity: 0.4; }
-.chex-empty-title { font-size: 13.5px; font-weight: 500; color: var(--fg-muted); font-family: 'Inter', sans-serif; }
-.chex-empty-body { font-size: 12.5px; color: var(--fg-subtle); line-height: 1.6; font-family: 'Inter', sans-serif; max-width: 280px; }
-
-*::-webkit-scrollbar { width: 8px; height: 8px; }
-*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
-*::-webkit-scrollbar-track { background: transparent; }
-
-.gradio-container .gap-4 { gap: 14px !important; }
-.gradio-container .gap-2 { gap: 8px !important; }
-
-.tabitem .tab-nav { position: static !important; top: auto !important; }
-
-@media (max-width: 900px) {
-  .chex-topbar { padding: 0 16px; }
-  .chex-tag { display: none; }
-  .tabitem { padding: 16px !important; }
-  .chex-bench-top { flex-direction: column; gap: 16px; }
-  .chex-bench-stats { flex-direction: row; }
-  .chex-footer { padding: 12px 16px; gap: 12px; flex-wrap: wrap; }
+/* label badges */
+.badge {
+  display: inline-block; padding: 3px 10px; border-radius: 4px;
+  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
 }
+.badge-green  { background: #dcfce7; color: var(--green); }
+.badge-red    { background: #fee2e2; color: var(--red); }
+.badge-amber  { background: #fef3c7; color: var(--amber); }
+.badge-gray   { background: #f1f5f9; color: #64748b; }
 """
 
 # ---------------------------------------------------------------------------
 # Static HTML
 # ---------------------------------------------------------------------------
 
-TOPBAR_HTML = """
-<div class="chex-topbar">
-  <div class="chex-logo">CX</div>
-  <span class="chex-name">CHEX</span>
-  <span class="chex-tag">grounded answers from documents</span>
-  <div style="flex:1"></div>
-  <div class="chex-pill"><span class="chex-dot"></span>MI300X &middot; ready</div>
-</div>
-"""
-
-FOOTER_HTML = """
-<div class="chex-footer">
-  <div class="chex-footer-left">
-    <span>chex/v0.4.1</span>
-    <span class="sep">&middot;</span>
-    <span>endpoint: mi300x-east-2</span>
-    <span class="sep">&middot;</span>
-    <span>tokens/s 142.7</span>
-  </div>
-  <div class="chex-footer-right">&#8617; to analyse &nbsp;&nbsp; &#8984;K shortcuts</div>
-</div>
-"""
-
-BENCH_INTRO_HTML = """
-<div class="chex-bench-wrap">
-  <div class="chex-bench-top">
-    <div class="chex-bench-copy">
-      <h2>Why grounding matters</h2>
-      <p>We ran the same five questions through a base instruction-tuned model and through CHEX. The base model invented or extrapolated answers in 4 of 5 cases &mdash; confident, plausible, wrong. CHEX returned a verifiable label, a verbatim citation, and refused to answer when the source was silent.</p>
-    </div>
-    <div class="chex-bench-stats">
-      <div class="chex-bench-stat"><div class="v red">4/5</div><div class="k">Base hallucinations</div></div>
-      <div class="chex-bench-stat"><div class="v green">5/5</div><div class="k">CHEX correct</div></div>
-      <div class="chex-bench-stat"><div class="v white">100%</div><div class="k">Cited verbatim</div></div>
-    </div>
-  </div>
-</div>
-"""
-
-BENCH_TABLE_HTML = """
-<div class="chex-bench-table-wrap">
-  <table class="chex-bench-table">
-    <thead>
-      <tr>
-        <th>Question</th>
-        <th>Ground truth</th>
-        <th>Base model</th>
-        <th>CHEX</th>
-        <th>Halluc.</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td class="col-question">What is the annual license fee in the Helix MSA?</td>
-        <td class="col-truth">$144,000</td>
-        <td class="col-base">$120,000 per year (industry-standard rate).</td>
-        <td>
-          <span class="cbadge cbadge-green"><span class="cbadge-icon">&#10003;</span> GROUNDED</span>
-          <div style="margin-top:8px;font-size:12.5px;color:var(--fg-muted)">$144,000 per year.</div>
-        </td>
-        <td class="col-halluc"><span class="chex-halluc-yes">!</span></td>
-      </tr>
-      <tr>
-        <td class="col-question">What is the SLA uptime in the Northwind MSA?</td>
-        <td class="col-truth">99.9% per calendar month</td>
-        <td class="col-base">99.95% with four nines on premium tier.</td>
-        <td>
-          <span class="cbadge cbadge-green"><span class="cbadge-icon">&#10003;</span> GROUNDED</span>
-          <div style="margin-top:8px;font-size:12.5px;color:var(--fg-muted)">99.9% per calendar month, excluding maintenance.</div>
-        </td>
-        <td class="col-halluc"><span class="chex-halluc-yes">!</span></td>
-      </tr>
-      <tr>
-        <td class="col-question">Does the Aperture NDA include an indemnification clause?</td>
-        <td class="col-truth" style="font-style:italic">Not present in the document.</td>
-        <td class="col-base">Yes &mdash; Section 7 of the NDA contains standard mutual indemnification.</td>
-        <td>
-          <span class="cbadge cbadge-red"><span class="cbadge-icon">&#10007;</span> ABSENT</span>
-          <div style="margin-top:8px;font-size:12.5px;color:var(--fg-muted)">No indemnification clause is present.</div>
-        </td>
-        <td class="col-halluc"><span class="chex-halluc-yes">!</span></td>
-      </tr>
-      <tr>
-        <td class="col-question">Within how many days must security incidents be reported?</td>
-        <td class="col-truth">72 hours</td>
-        <td class="col-base">72 hours.</td>
-        <td>
-          <span class="cbadge cbadge-green"><span class="cbadge-icon">&#10003;</span> GROUNDED</span>
-          <div style="margin-top:8px;font-size:12.5px;color:var(--fg-muted)">Within 72 hours of becoming aware.</div>
-        </td>
-        <td class="col-halluc"><span class="chex-halluc-no">&#10003;</span></td>
-      </tr>
-      <tr>
-        <td class="col-question">Is the NDA perpetual?</td>
-        <td class="col-truth" style="font-style:italic">No &mdash; 2 year term.</td>
-        <td class="col-base">The NDA appears to be perpetual based on standard NDA practice.</td>
-        <td>
-          <span class="cbadge cbadge-amber"><span class="cbadge-icon">&#9888;</span> CONTRADICTS PRIOR</span>
-          <div style="margin-top:8px;font-size:12.5px;color:var(--fg-muted)">No &mdash; 2 year term, contradicts the premise.</div>
-        </td>
-        <td class="col-halluc"><span class="chex-halluc-yes">!</span></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-"""
-
-CONTRACT_SOURCE_HEADER_HTML = """
-<div class="chex-card-header">
-  <div class="chex-card-icon">
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
-  </div>
-  <span class="chex-card-title">Contract source</span>
-  <span class="chex-card-sep">/</span>
-  <span class="chex-card-sub">paste or load sample</span>
-</div>
-"""
-
-CONTRACT_RESULTS_HEADER_HTML = """
-<div class="chex-card-header">
-  <div class="chex-card-icon">
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-  </div>
-  <span class="chex-card-title">Classification</span>
-  <span class="chex-card-sep">/</span>
-  <span class="chex-card-sub">ask a question of the source</span>
-</div>
-"""
-
-LOAD_BAR_HTML = """
-<div class="chex-load-bar">
-  <span class="chex-load-chip">LOAD</span>
-</div>
-"""
-
-STATEMENT_SOURCE_HEADER_HTML = """
-<div class="chex-card-header">
-  <div class="chex-card-icon">
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
-  </div>
-  <span class="chex-card-title">Statement source</span>
-  <span class="chex-card-sep">/</span>
-  <span class="chex-card-sub">paste &middot; upload pdf &middot; upload csv</span>
-</div>
-"""
-
-STATEMENT_RESULTS_HEADER_HTML = """
-<div class="chex-card-header">
-  <div class="chex-card-icon">
-    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-  </div>
-  <span class="chex-card-title">Statement analysis</span>
-  <span class="chex-card-sep">/</span>
-  <span class="chex-card-sub">summary + Q&amp;A</span>
-</div>
-"""
-
-CONTRACT_EMPTY_HTML = """
-<div class="chex-empty">
-  <div class="chex-empty-icon">&#9889;</div>
-  <div class="chex-empty-title">No analysis yet</div>
-  <div class="chex-empty-body">Load or paste a contract, type a question, then press Analyze. CHEX will return a label, an exact citation, and its reasoning.</div>
-</div>
-"""
-
-STATEMENT_EMPTY_HTML = """
-<div class="chex-empty">
-  <div class="chex-empty-icon">&#9141;</div>
-  <div class="chex-empty-title">Awaiting statement</div>
-  <div class="chex-empty-body">Paste, upload, or load the sample. CHEX will summarise totals, surface recurring payments, and flag anomalies you can drill into.</div>
-</div>
-"""
+WARNING_BANNER_HTML = (
+    '<div style="background:#fef3c7;border:1px solid #fde68a;border-radius:6px;'
+    'padding:10px 14px;margin-bottom:12px;color:#92400e;font-size:13px;">'
+    '<strong>⚠ Model not loaded</strong> &mdash; {msg}</div>'
+)
 
 # ---------------------------------------------------------------------------
 # Gradio UI
@@ -1756,146 +1077,146 @@ STATEMENT_EMPTY_HTML = """
 
 with gr.Blocks(title="CHEX — Document Intelligence") as demo:
 
-    gr.HTML(TOPBAR_HTML)
-
-    if WARNING_HTML:
-        gr.HTML(WARNING_HTML)
+    if model_load_error:
+        gr.HTML(WARNING_BANNER_HTML.format(msg=model_load_error))
 
     with gr.Tabs():
 
         # ── Tab 01: Contract Analysis ──────────────────────────────────── #
-        with gr.Tab("01  Contract analysis"):
+        with gr.Tab("Contract analysis"):
             with gr.Row(equal_height=False):
 
                 with gr.Column(scale=9):
-                    with gr.Group():
-                        gr.HTML(CONTRACT_SOURCE_HEADER_HTML)
-                        contract_input = gr.Textbox(
-                            label="Contract text",
-                            lines=20,
-                            placeholder="Paste contract text here, or load a sample above…",
-                            show_label=False,
-                        )
-                        gr.HTML(LOAD_BAR_HTML)
-                        with gr.Row():
-                            btn_software = gr.Button("Software License", variant="secondary", size="sm")
-                            btn_nda = gr.Button("NDA", variant="secondary", size="sm")
-                            btn_service = gr.Button("Service Agreement", variant="secondary", size="sm")
-                        suggested_q = gr.HTML(value="", visible=False)
+                    gr.Markdown("### Contract source\nPaste text or load a sample.")
+                    contract_input = gr.Textbox(
+                        label="Contract text",
+                        lines=20,
+                        placeholder="Paste contract text here…",
+                        show_label=False,
+                    )
+                    gr.Markdown("**Load sample:**")
+                    with gr.Row():
+                        btn_software = gr.Button("Software License", variant="secondary", size="sm")
+                        btn_nda = gr.Button("NDA", variant="secondary", size="sm")
+                        btn_service = gr.Button("Service Agreement", variant="secondary", size="sm")
+                    suggested_q = gr.Markdown(value="", visible=False)
 
                 with gr.Column(scale=11):
-                    with gr.Group():
-                        gr.HTML(CONTRACT_RESULTS_HEADER_HTML)
-                        gr.HTML('<span class="chex-question-label">Question</span>')
-                        with gr.Row():
-                            question_input = gr.Textbox(
-                                label="Question",
-                                placeholder="e.g., What is the annual license fee?",
-                                lines=1,
-                                show_label=False,
-                                scale=8,
-                            )
-                            analyze_btn = gr.Button("Analyze ↵", variant="primary", scale=2)
-                        label_display = gr.HTML(value=CONTRACT_EMPTY_HTML)
-                        answer_output = gr.Textbox(label="Answer", interactive=False, lines=3, visible=False)
-                        citation_output = gr.Textbox(label="Citation", interactive=False, lines=2, visible=False)
-                        reasoning_output = gr.Textbox(label="Reasoning", interactive=False, lines=3, visible=False)
+                    gr.Markdown("### Classification\nAsk a yes/no or factual question about the contract.")
+                    with gr.Row():
+                        question_input = gr.Textbox(
+                            label="Question",
+                            placeholder="e.g., What is the annual license fee?",
+                            lines=1,
+                            scale=8,
+                        )
+                        analyze_btn = gr.Button("Analyze", variant="primary", scale=2)
+                    label_display = gr.HTML(value=format_label_html("N/A"))
+                    answer_output = gr.Textbox(label="Answer", interactive=False, lines=3)
+                    citation_output = gr.Textbox(label="Citation", interactive=False, lines=2)
+                    reasoning_output = gr.Textbox(label="Reasoning", interactive=False, lines=3)
 
         # ── Tab 02: Bank Statements ────────────────────────────────────── #
-        with gr.Tab("02  Bank statements"):
+        with gr.Tab("Bank statements"):
             with gr.Row(equal_height=False):
 
                 with gr.Column(scale=9):
-                    with gr.Group():
-                        gr.HTML(STATEMENT_SOURCE_HEADER_HTML)
-                        with gr.Tabs():
-                            with gr.Tab("Paste text"):
-                                bank_paste_input = gr.Textbox(
-                                    label="Bank statement text (supports multiple)",
-                                    lines=20,
-                                    placeholder=(
-                                        "Paste your statement here, e.g. lines like: 2025-03-15  Direct deposit +5,420.00…"
-                                    ),
-                                    show_label=False,
-                                )
-                                btn_load_statement = gr.Button("Load sample statement", variant="secondary", size="sm")
-                            with gr.Tab("Upload PDF"):
-                                bank_pdf_input = gr.File(
-                                    label="PDF bank statement (multiple allowed)",
-                                    file_types=[".pdf"],
-                                    file_count="multiple",
-                                )
-                                bank_pdf_password_input = gr.Textbox(
-                                    label="PDF password (optional)",
-                                    type="password",
-                                    placeholder="Leave blank if PDF is not encrypted",
-                                    show_label=False,
-                                )
-                            with gr.Tab("Upload CSV"):
-                                bank_csv_input = gr.File(
-                                    label="CSV bank statement (multiple allowed)",
-                                    file_types=[".csv"],
-                                    file_count="multiple",
-                                )
-                            with gr.Tab("Upload TXT"):
-                                bank_txt_input = gr.File(
-                                    label="TXT bank statement (multiple allowed)",
-                                    file_types=[".txt", ".text"],
-                                    file_count="multiple",
-                                )
-                            with gr.Tab("Upload Excel"):
-                                bank_xlsx_input = gr.File(
-                                    label="Excel bank statement (.xlsx, multiple allowed)",
-                                    file_types=[".xlsx"],
-                                    file_count="multiple",
-                                )
-                            with gr.Tab("Upload OFX / QFX"):
-                                bank_ofx_input = gr.File(
-                                    label="OFX / QFX bank statement (multiple allowed)",
-                                    file_types=[".ofx", ".qfx"],
-                                    file_count="multiple",
-                                )
-
-                with gr.Column(scale=11):
-                    with gr.Group():
-                        gr.HTML(STATEMENT_RESULTS_HEADER_HTML)
-                        analyse_stmt_btn = gr.Button("Analyse statement", variant="primary")
-                        summary_output = gr.HTML(value=STATEMENT_EMPTY_HTML)
-                        summary_md_output = gr.Markdown(value="", visible=False)
-                        with gr.Row():
-                            export_csv_btn = gr.Button("Export CSV", variant="secondary", size="sm")
-                            export_pdf_btn = gr.Button("Export PDF", variant="secondary", size="sm")
-                        export_status = gr.Markdown(value="")
-                        export_file = gr.File(label="Download", interactive=False)
-                        gr.HTML('<div class="chex-divider"></div>')
-                        gr.HTML('<span class="chex-section-kicker">Ask a question</span>')
-                        with gr.Row():
-                            bank_question_input = gr.Textbox(
-                                label="Question",
-                                placeholder="e.g., What was the largest debit this month?",
-                                lines=1,
+                    gr.Markdown("### Statement source\nPaste, upload, or load the sample.")
+                    with gr.Tabs():
+                        with gr.Tab("Paste text"):
+                            bank_paste_input = gr.Textbox(
+                                label="Statement text",
+                                lines=20,
+                                placeholder="Paste statement here, e.g. lines like: 2025-03-15  Direct deposit +5,420.00…\n\nSeparate multiple statements with a line containing only ---",
                                 show_label=False,
-                                scale=8,
                             )
-                            bank_ask_btn = gr.Button("Ask ↵", variant="secondary", scale=2)
-                        bank_label_display = gr.HTML(value=format_label_html("N/A"))
-                        bank_answer_output = gr.Textbox(label="Answer", interactive=False, lines=3)
-                        bank_citation_output = gr.Textbox(label="Citation", interactive=False, lines=2)
-                        bank_reasoning_output = gr.Textbox(label="Reasoning", interactive=False, lines=3)
+                            btn_load_statement = gr.Button("Load sample", variant="secondary", size="sm")
+                        with gr.Tab("Upload PDF"):
+                            bank_pdf_input = gr.File(
+                                label="PDF (multiple allowed)",
+                                file_types=[".pdf"],
+                                file_count="multiple",
+                            )
+                            bank_pdf_password_input = gr.Textbox(
+                                label="PDF password (leave blank if unencrypted)",
+                                type="password",
+                            )
+                        with gr.Tab("Upload CSV"):
+                            bank_csv_input = gr.File(
+                                label="CSV (multiple allowed)",
+                                file_types=[".csv"],
+                                file_count="multiple",
+                            )
+                        with gr.Tab("Upload TXT"):
+                            bank_txt_input = gr.File(
+                                label="TXT (multiple allowed)",
+                                file_types=[".txt", ".text"],
+                                file_count="multiple",
+                            )
+                        with gr.Tab("Upload Excel"):
+                            bank_xlsx_input = gr.File(
+                                label="XLSX (multiple allowed)",
+                                file_types=[".xlsx"],
+                                file_count="multiple",
+                            )
+                        with gr.Tab("Upload OFX/QFX"):
+                            bank_ofx_input = gr.File(
+                                label="OFX/QFX (multiple allowed)",
+                                file_types=[".ofx", ".qfx"],
+                                file_count="multiple",
+                            )
+
+                with gr.Column(scale=11):
+                    gr.Markdown("### Statement analysis")
+                    analyse_stmt_btn = gr.Button("Analyse statement", variant="primary")
+                    summary_md_output = gr.Markdown(value="*Run Analyse statement to see results.*")
+                    with gr.Row():
+                        export_csv_btn = gr.Button("Export CSV", variant="secondary", size="sm")
+                        export_pdf_btn = gr.Button("Export PDF", variant="secondary", size="sm")
+                    export_status = gr.Markdown(value="")
+                    export_file = gr.File(label="Download", interactive=False)
+                    gr.Markdown("---\n**Ask a question about the statement:**")
+                    with gr.Row():
+                        bank_question_input = gr.Textbox(
+                            label="Question",
+                            placeholder="e.g., What was the largest debit this month?",
+                            lines=1,
+                            scale=8,
+                        )
+                        bank_ask_btn = gr.Button("Ask", variant="secondary", scale=2)
+                    bank_label_display = gr.HTML(value=format_label_html("N/A"))
+                    bank_answer_output = gr.Textbox(label="Answer", interactive=False, lines=3)
+                    bank_citation_output = gr.Textbox(label="Citation", interactive=False, lines=2)
+                    bank_reasoning_output = gr.Textbox(label="Reasoning", interactive=False, lines=3)
 
             bank_statement_state = gr.State("")
             bank_summary_state = gr.State("")
-            # Hidden JSON output for `gradio_client` API usage.
             bank_api_output = gr.JSON(visible=False)
             bank_api_question = gr.Textbox(visible=False)
             bank_api_btn = gr.Button(visible=False)
 
         # ── Tab 03: Benchmark ──────────────────────────────────────────── #
-        with gr.Tab("03  Benchmark"):
-            gr.HTML(BENCH_INTRO_HTML)
-            gr.HTML(BENCH_TABLE_HTML)
-
-    gr.HTML(FOOTER_HTML)
+        with gr.Tab("Benchmark"):
+            gr.Markdown("""
+### Why grounding matters
+
+We ran the same five questions through a base instruction-tuned model and through CHEX.
+The base model invented or extrapolated answers in **4 of 5 cases** — confident, plausible, wrong.
+CHEX returned a verifiable label, a verbatim citation, and refused to answer when the source was silent.
+
+| Metric | Result |
+|---|---|
+| Base hallucinations | **4 / 5** |
+| CHEX correct | **5 / 5** |
+| Cited verbatim | **100%** |
+""")
+            gr.Dataframe(
+                value=BENCHMARK_DF,
+                headers=list(BENCHMARK_DF.columns),
+                datatype=["str"] * len(BENCHMARK_DF.columns),
+                wrap=True,
+                interactive=False,
+            )
 
     # ── Event handlers ─────────────────────────────────────────────────── #
 
@@ -1916,13 +1237,7 @@ with gr.Blocks(title="CHEX — Document Intelligence") as demo:
     btn_service.click(fn=load_service, inputs=[], outputs=[contract_input, question_input, suggested_q])
 
     def analyze_contract_ui(contract_text: str, question: str):
-        label_html, answer, citation, reasoning = analyze_contract(contract_text, question)
-        return (
-            label_html,
-            gr.update(value=answer, visible=True),
-            gr.update(value=citation, visible=True),
-            gr.update(value=reasoning, visible=True),
-        )
+        return analyze_contract(contract_text, question)
 
     analyze_btn.click(
         fn=analyze_contract_ui,
@@ -1939,19 +1254,8 @@ with gr.Blocks(title="CHEX — Document Intelligence") as demo:
 
     btn_load_statement.click(fn=lambda: SAMPLE_STATEMENT, inputs=[], outputs=[bank_paste_input])
 
-    def analyse_bank_ui(paste_text, pdf_file, pdf_password, csv_file, txt_file, xlsx_file, ofx_file):
-        summary_md, combined_text, summary_json = analyse_bank_statement(
-            paste_text, pdf_file, pdf_password, csv_file, txt_file, xlsx_file, ofx_file
-        )
-        return (
-            gr.update(value="", visible=False),
-            gr.update(value=summary_md, visible=True),
-            combined_text,
-            summary_json,
-        )
-
     analyse_stmt_btn.click(
-        fn=analyse_bank_ui,
+        fn=analyse_bank_statement,
         inputs=[
             bank_paste_input,
             bank_pdf_input,
@@ -1961,7 +1265,7 @@ with gr.Blocks(title="CHEX — Document Intelligence") as demo:
             bank_xlsx_input,
             bank_ofx_input,
         ],
-        outputs=[summary_output, summary_md_output, bank_statement_state, bank_summary_state],
+        outputs=[summary_md_output, bank_statement_state, bank_summary_state],
     )
 
     export_csv_btn.click(