Dark/light mode compatibility: replace hardcoded colors with CSS vars and rgba

All HTML components now use:
- var(--text-color) for all text (adapts to Streamlit theme)
- var(--secondary-background-color) for card backgrounds
- rgba(r,g,b,0.08-0.15) tints for verdict/category badge backgrounds
- rgba(128,128,128,0.1-0.2) for borders and dividers
- Vibrant accent colors (#22C55E #EF4444 #F59E0B #3B82F6) for verdict states

Removed base="light" from config.toml so dark mode works properly.
Fixed duplicate key in config.toml.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.streamlit/config.toml

@@ -1,9 +1,5 @@
 [theme]
-base = "light"
 primaryColor = "#2563EB"
-backgroundColor = "#F8FAFC"
-secondaryBackgroundColor = "#FFFFFF"
-textColor = "#0D1B2A"
 font = "sans serif"
 
 [browser]

ui/components.py

@@ -1,105 +1,82 @@
 import streamlit as st
 
-# ── Inline-style badge helpers ────────────────────────────────────────────────
-# Every function returns an HTML string with 100% inline styles.
-# No CSS classes — reliable across all Streamlit markdown containers.
+# Inline-style helpers — all colors use either Streamlit CSS vars or
+# semi-transparent rgba so they render correctly in both light and dark mode.
 
 _BADGE = (
     'display:inline-flex;align-items:center;gap:4px;padding:3px 10px;'
     'border-radius:20px;font-size:0.78rem;font-weight:600;'
-    'white-space:nowrap;font-family:Inter,sans-serif;line-height:1.4;'
+    'white-space:nowrap;line-height:1.4;'
 )
 
 
 def verdict_pill(verdict: str) -> str:
     cfg = {
-        "eligible":     ("#D1FAE5", "#065F46", "#6EE7B7", "✅ Eligible"),
-        "not_eligible": ("#FEE2E2", "#991B1B", "#FCA5A5", "❌ Not Eligible"),
-        "needs_review": ("#FEF3C7", "#92400E", "#FCD34D", "⚠️ Needs Review"),
+        "eligible":     ("rgba(34,197,94,0.15)",   "#22C55E", "✅ Eligible"),
+        "not_eligible": ("rgba(239,68,68,0.15)",    "#EF4444", "❌ Not Eligible"),
+        "needs_review": ("rgba(245,158,11,0.15)",   "#F59E0B", "⚠️ Needs Review"),
     }
-    bg, fg, border, label = cfg.get(verdict, ("#F1F5F9", "#374151", "#CBD5E1", verdict))
+    bg, fg, label = cfg.get(verdict, ("rgba(128,128,128,0.1)", "var(--text-color)", verdict))
     return (f'<span style="{_BADGE}background:{bg};color:{fg};'
-            f'border:1px solid {border};">{label}</span>')
+            f'border:1px solid {fg}33;">{label}</span>')
 
 
 def category_badge(category: str) -> str:
     cfg = {
-        "financial":  ("#DBEAFE", "#1E40AF", "#93C5FD", "💰 Financial"),
-        "technical":  ("#DCFCE7", "#166534", "#86EFAC", "🔧 Technical"),
-        "compliance": ("#FEF3C7", "#92400E", "#FCD34D", "📋 Compliance"),
+        "financial":  ("rgba(37,99,235,0.12)",  "#3B82F6", "💰 Financial"),
+        "technical":  ("rgba(34,197,94,0.12)",  "#22C55E", "🔧 Technical"),
+        "compliance": ("rgba(245,158,11,0.12)", "#F59E0B", "📋 Compliance"),
     }
-    bg, fg, border, label = cfg.get(category, ("#F1F5F9", "#374151", "#CBD5E1", category))
+    bg, fg, label = cfg.get(category, ("rgba(128,128,128,0.1)", "var(--text-color)", category))
     return (f'<span style="{_BADGE}background:{bg};color:{fg};'
-            f'border:1px solid {border};">{label}</span>')
+            f'border:1px solid {fg}33;">{label}</span>')
 
 
 def ocr_tier_badge(source_type: str) -> str:
     cfg = {
-        "text_pdf":   ("#F1F5F9", "#475569", "#CBD5E1", "📄 Typed PDF"),
-        "tesseract":  ("#F5F3FF", "#6D28D9", "#DDD6FE", "🔍 Tesseract"),
-        "vision_llm": ("#FFF7ED", "#C2410C", "#FED7AA", "👁 Vision LLM"),
+        "text_pdf":   ("rgba(100,116,139,0.12)", "#94A3B8", "📄 Typed PDF"),
+        "tesseract":  ("rgba(124,58,237,0.12)",  "#8B5CF6", "🔍 Tesseract"),
+        "vision_llm": ("rgba(234,88,12,0.12)",   "#F97316", "👁 Vision LLM"),
     }
-    bg, fg, border, label = cfg.get(source_type, ("#F1F5F9", "#374151", "#CBD5E1", source_type))
+    bg, fg, label = cfg.get(source_type, ("rgba(128,128,128,0.1)", "var(--text-color)", source_type))
     return (f'<span style="{_BADGE}background:{bg};color:{fg};'
-            f'border:1px solid {border};">{label}</span>')
+            f'border:1px solid {fg}33;">{label}</span>')
 
 
 def mandatory_badge(mandatory: bool) -> str:
     if mandatory:
-        return (f'<span style="{_BADGE}background:#FEE2E2;color:#991B1B;'
-                f'border:1px solid #FCA5A5;">🔴 Mandatory</span>')
-    return (f'<span style="{_BADGE}background:#FFFBEB;color:#92400E;'
-            f'border:1px solid #FDE68A;">🟡 Optional</span>')
+        return (f'<span style="{_BADGE}background:rgba(239,68,68,0.12);color:#EF4444;'
+                f'border:1px solid #EF444433;">🔴 Mandatory</span>')
+    return (f'<span style="{_BADGE}background:rgba(245,158,11,0.12);color:#F59E0B;'
+            f'border:1px solid #F59E0B33;">🟡 Optional</span>')
 
 
 def confidence_bar(value: float, label: str = "Confidence") -> None:
     pct = min(max(value, 0.0), 1.0)
-    if pct >= 0.80:
-        bar_color, text_color = "#22C55E", "#166534"
-    elif pct >= 0.55:
-        bar_color, text_color = "#F59E0B", "#92400E"
-    else:
-        bar_color, text_color = "#EF4444", "#991B1B"
-
+    color = "#22C55E" if pct >= 0.80 else "#F59E0B" if pct >= 0.55 else "#EF4444"
     st.markdown(
         f"""<div style="margin:6px 0 10px;">
-  <div style="display:flex;justify-content:space-between;align-items:center;
-              margin-bottom:4px;">
-    <span style="font-size:0.72rem;font-weight:600;color:#94A3B8;
-                 text-transform:uppercase;letter-spacing:0.05em;">{label}</span>
-    <span style="font-size:0.8rem;font-weight:700;color:{text_color};">{pct:.0%}</span>
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">
+    <span style="font-size:0.72rem;font-weight:600;color:var(--text-color);
+                 opacity:0.5;text-transform:uppercase;letter-spacing:0.05em;">{label}</span>
+    <span style="font-size:0.8rem;font-weight:700;color:{color};">{pct:.0%}</span>
   </div>
-  <div style="background:#F1F5F9;border-radius:6px;height:6px;overflow:hidden;">
-    <div style="width:{pct*100:.1f}%;background:{bar_color};
-                height:100%;border-radius:6px;transition:width 0.3s ease;"></div>
+  <div style="background:rgba(128,128,128,0.15);border-radius:6px;height:6px;overflow:hidden;">
+    <div style="width:{pct*100:.1f}%;background:{color};height:100%;border-radius:6px;"></div>
   </div>
 </div>""",
         unsafe_allow_html=True,
     )
 
 
-def stat_card(value: str | int, label: str, color: str = "#2563EB") -> None:
-    st.markdown(
-        f"""<div style="background:#fff;border:1px solid #E2E8F0;border-radius:12px;
-                        padding:20px 18px;text-align:center;
-                        box-shadow:0 1px 3px rgba(0,0,0,0.06);">
-  <div style="font-size:2rem;font-weight:800;color:{color};
-              font-family:Inter,sans-serif;line-height:1.1;">{value}</div>
-  <div style="font-size:0.7rem;font-weight:700;color:#94A3B8;margin-top:5px;
-              text-transform:uppercase;letter-spacing:0.08em;">{label}</div>
-</div>""",
-        unsafe_allow_html=True,
-    )
-
-
-def page_header(title: str, subtitle: str = "") -> None:
-    sub_html = (f'<p style="margin:6px 0 0;font-size:0.95rem;color:#64748B;'
-                f'font-weight:400;">{subtitle}</p>') if subtitle else ""
+def stat_card(value: str | int, label: str, color: str = "#3B82F6") -> None:
     st.markdown(
-        f"""<div style="margin-bottom:1.5rem;">
-  <h1 style="margin:0;font-size:1.7rem;font-weight:800;color:#0D1B2A;
-             font-family:Inter,sans-serif;letter-spacing:-0.02em;">{title}</h1>
-  {sub_html}
+        f"""<div style="background:var(--secondary-background-color);
+                        border:1px solid rgba(128,128,128,0.2);border-radius:12px;
+                        padding:20px 18px;text-align:center;">
+  <div style="font-size:2rem;font-weight:800;color:{color};line-height:1.1;">{value}</div>
+  <div style="font-size:0.7rem;font-weight:700;color:var(--text-color);opacity:0.45;
+              margin-top:5px;text-transform:uppercase;letter-spacing:0.08em;">{label}</div>
 </div>""",
         unsafe_allow_html=True,
     )

ui/tab_bidders.py

@@ -7,9 +7,9 @@ from core.schemas import Criterion
 from ui.components import category_badge, confidence_bar, mandatory_badge, ocr_tier_badge, verdict_pill
 
 _BIDDER_META = {
-    "bidder_a": ("Apex Constructions Pvt. Ltd.",    "Clearly Eligible",                "#059669"),
-    "bidder_b": ("BuildRight Enterprises",           "Ineligible — Low Turnover",        "#EF4444"),
-    "bidder_c": ("Shree Constructions & Services",   "Needs Review — Scanned Cert",      "#F59E0B"),
+    "bidder_a": ("Apex Constructions Pvt. Ltd.",   "Clearly Eligible",                "#22C55E"),
+    "bidder_b": ("BuildRight Enterprises",          "Ineligible — Low Turnover",        "#EF4444"),
+    "bidder_c": ("Shree Constructions & Services",  "Needs Review — Scanned Cert",      "#F59E0B"),
 }
 
 
@@ -22,18 +22,15 @@ def _overall(verdicts: list[dict], crit_map: dict) -> str:
     mand = [v for v in verdicts if crit_map.get(v["criterion_id"]) and
             crit_map[v["criterion_id"]].mandatory]
     src = mand or verdicts
-    if any(v["verdict"] == "not_eligible" for v in src):
-        return "not_eligible"
-    if any(v["verdict"] == "needs_review" for v in src):
-        return "needs_review"
+    if any(v["verdict"] == "not_eligible" for v in src): return "not_eligible"
+    if any(v["verdict"] == "needs_review"  for v in src): return "needs_review"
     return "eligible"
 
 
 def render() -> None:
     st.markdown(
-        '<h2 style="font-family:Inter,sans-serif;font-weight:800;font-size:1.5rem;'
-        'color:#0D1B2A;margin-bottom:4px;">Bidder Evaluation</h2>'
-        '<p style="color:#64748B;font-size:0.875rem;margin-bottom:1rem;">'
+        '<h2 style="font-weight:800;font-size:1.5rem;color:var(--text-color);">Bidder Evaluation</h2>'
+        '<p style="color:var(--text-color);opacity:0.6;font-size:0.875rem;margin-bottom:1rem;">'
         'Evaluate each bidder against all extracted criteria.</p>',
         unsafe_allow_html=True,
     )
@@ -45,12 +42,18 @@ def render() -> None:
         format_func=lambda x: _BIDDER_META.get(x, (x, "", ""))[0],
     )
 
-    if st.button("▶  Run Evaluation", type="primary"):
+    criteria_loaded = bool(st.session_state.get("criteria"))
+    if not criteria_loaded:
+        st.info(
+            "**Criteria not loaded yet.** Go to **Tender Analysis** and click "
+            "**Extract Criteria**, or use **Load Pre-computed Demo** on the Overview tab."
+        )
+
+    if st.button("▶  Run Evaluation", type="primary", disabled=not criteria_loaded):
         criteria = _get_criteria()
         prog = st.progress(0, text="Starting…")
         total = len(selected) * len(criteria)
-        done = 0
-        vd: dict = {}
+        done, vd = 0, {}
         for bid in selected:
             files = sorted(f for f in (DATA_DIR / "bidders" / bid).iterdir()
                            if f.suffix.lower() in {".pdf", ".png", ".jpg"})
@@ -61,7 +64,8 @@ def render() -> None:
                 v = evaluator.evaluate(bid, c)
                 vlist.append(v.model_dump())
                 done += 1
-                prog.progress(done / total, text=f"{c.id} · {_BIDDER_META.get(bid,(bid,'',''))[0]}")
+                prog.progress(done / total,
+                              text=f"{c.id} · {_BIDDER_META.get(bid,(bid,'',''))[0]}")
             vd[bid] = vlist
         st.session_state["verdicts"] = vd
         prog.empty()
@@ -73,7 +77,7 @@ def render() -> None:
     crit_map = {c.id: c for c in criteria}
 
     if not vdata:
-        st.info("No results yet — click **Run Evaluation** or load the demo from the Overview tab.")
+        st.info("No results yet — click **Run Evaluation** above, or load the demo from Overview.")
         return
 
     if st.session_state.get("fallback_active"):
@@ -83,50 +87,45 @@ def render() -> None:
         if bid not in vdata:
             continue
         verdicts = vdata[bid]
-        name, tagline, accent = _BIDDER_META.get(bid, (bid, "", "#2563EB"))
+        name, tagline, accent = _BIDDER_META.get(bid, (bid, "", "#3B82F6"))
         ov = _overall(verdicts, crit_map)
-        passed = sum(1 for v in verdicts if v["verdict"] == "eligible" and
-                     crit_map.get(v["criterion_id"]) and crit_map[v["criterion_id"]].mandatory)
+        passed  = sum(1 for v in verdicts if v["verdict"] == "eligible" and
+                      crit_map.get(v["criterion_id"]) and crit_map[v["criterion_id"]].mandatory)
         total_m = sum(1 for v in verdicts if crit_map.get(v["criterion_id"]) and
                       crit_map[v["criterion_id"]].mandatory)
 
-        st.markdown("<div style='height:12px'></div>", unsafe_allow_html=True)
+        st.markdown("<div style='height:10px'></div>", unsafe_allow_html=True)
         with st.container(border=True):
-            # Bidder header row
-            hcol1, hcol2 = st.columns([3, 2])
-            with hcol1:
-                st.markdown(
-                    f'<div style="display:flex;align-items:center;gap:10px;padding:4px 0 8px;">'
-                    f'<div style="width:42px;height:42px;border-radius:10px;'
-                    f'background:{accent}22;border:1px solid {accent}44;'
-                    f'display:flex;align-items:center;justify-content:center;'
-                    f'font-size:1.2rem;flex-shrink:0;">🏢</div>'
-                    f'<div>'
-                    f'<div style="font-weight:700;font-size:1rem;color:#0D1B2A;'
-                    f'font-family:Inter,sans-serif;">{name}</div>'
-                    f'<div style="font-size:0.78rem;color:#64748B;margin-top:2px;">{tagline}</div>'
-                    f'</div></div>',
-                    unsafe_allow_html=True,
-                )
-            with hcol2:
-                st.markdown(
-                    f'<div style="display:flex;align-items:center;justify-content:flex-end;'
-                    f'gap:10px;padding:4px 0 8px;">'
-                    f'{verdict_pill(ov)}'
-                    f'<span style="font-size:0.78rem;background:#F8FAFC;color:#64748B;'
-                    f'padding:3px 10px;border-radius:20px;border:1px solid #E2E8F0;">'
-                    f'{passed}/{total_m} mandatory passed</span>'
-                    f'</div>',
-                    unsafe_allow_html=True,
-                )
+            # Header
+            st.markdown(
+                f'<div style="display:flex;justify-content:space-between;'
+                f'align-items:center;flex-wrap:wrap;gap:8px;padding:4px 0 12px;">'
+                f'<div style="display:flex;align-items:center;gap:10px;">'
+                f'<div style="width:40px;height:40px;border-radius:10px;'
+                f'background:{accent}22;border:1px solid {accent}44;display:flex;'
+                f'align-items:center;justify-content:center;font-size:1.1rem;">🏢</div>'
+                f'<div>'
+                f'<div style="font-weight:700;font-size:1rem;color:var(--text-color);">{name}</div>'
+                f'<div style="font-size:0.78rem;color:var(--text-color);opacity:0.5;margin-top:2px;">'
+                f'{tagline}</div></div></div>'
+                f'<div style="display:flex;align-items:center;gap:10px;">'
+                f'{verdict_pill(ov)}'
+                f'<span style="font-size:0.78rem;background:rgba(128,128,128,0.1);'
+                f'color:var(--text-color);opacity:0.7;padding:3px 10px;border-radius:20px;'
+                f'border:1px solid rgba(128,128,128,0.2);">'
+                f'{passed}/{total_m} mandatory passed</span>'
+                f'</div></div>',
+                unsafe_allow_html=True,
+            )
 
-            # Column header row
+            # Column headers
             st.markdown(
                 '<div style="display:grid;grid-template-columns:2.5fr 1.6fr 1.8fr 2.2fr 1.4fr;'
-                'gap:8px;padding:6px 2px;border-top:1px solid #F1F5F9;'
-                'border-bottom:1px solid #F1F5F9;margin-bottom:4px;">'
+                'gap:8px;padding:6px 2px;border-top:1px solid rgba(128,128,128,0.15);'
+                'border-bottom:1px solid rgba(128,128,128,0.15);margin-bottom:4px;">'
                 + "".join(
-                    f'<div style="font-size:0.68rem;font-weight:700;color:#94A3B8;'
+                    f'<div style="font-size:0.68rem;font-weight:700;'
+                    f'color:var(--text-color);opacity:0.4;'
                     f'text-transform:uppercase;letter-spacing:0.07em;">{h}</div>'
                     for h in ["Criterion", "Verdict", "Extracted Value", "Source & Tier", "Category"]
                 )
@@ -137,31 +136,38 @@ def render() -> None:
             for v in verdicts:
                 crit = crit_map.get(v["criterion_id"])
                 title = crit.title if crit else v["criterion_id"]
-                mb = mandatory_badge(crit.mandatory if crit else True)
+                mb  = mandatory_badge(crit.mandatory if crit else True)
                 cat = category_badge(crit.category if crit else "compliance")
                 extracted = v.get("extracted_value") or ""
                 src = v.get("source") or {}
 
-                src_html = "—"
+                src_html = '<span style="color:var(--text-color);opacity:0.3;">—</span>'
                 if src:
                     tier = ocr_tier_badge(src.get("source_type", "text_pdf"))
                     src_html = (
                         f'<span style="font-family:monospace;font-size:0.78rem;'
-                        f'background:#F8FAFC;padding:2px 5px;border-radius:4px;'
-                        f'border:1px solid #E2E8F0;">{src.get("doc_name","")}</span>'
-                        f' <span style="font-size:0.75rem;color:#64748B;">p{src.get("page","")}</span>'
+                        f'background:rgba(128,128,128,0.1);padding:2px 5px;border-radius:4px;'
+                        f'border:1px solid rgba(128,128,128,0.2);'
+                        f'color:var(--text-color);">{src.get("doc_name","")}</span>'
+                        f' <span style="font-size:0.75rem;color:var(--text-color);opacity:0.5;">'
+                        f'p{src.get("page","")}</span>'
                         f'<br><div style="margin-top:4px;">{tier}</div>'
                     )
 
-                extracted_cell = extracted if extracted else '<span style="color:#CBD5E1;">—</span>'
+                extracted_cell = (
+                    f'<span style="font-size:0.84rem;color:var(--text-color);">{extracted}</span>'
+                    if extracted else
+                    '<span style="color:var(--text-color);opacity:0.3;">—</span>'
+                )
+
                 st.markdown(
                     f'<div style="display:grid;grid-template-columns:2.5fr 1.6fr 1.8fr 2.2fr 1.4fr;'
                     f'gap:8px;padding:10px 2px;align-items:start;">'
-                    f'<div>{mb}<div style="font-size:0.85rem;font-weight:600;color:#0D1B2A;'
-                    f'margin-top:5px;">{v["criterion_id"]}: {title}</div></div>'
+                    f'<div>{mb}<div style="font-size:0.85rem;font-weight:600;'
+                    f'color:var(--text-color);margin-top:5px;">'
+                    f'{v["criterion_id"]}: {title}</div></div>'
                     f'<div style="padding-top:2px;">{verdict_pill(v["verdict"])}</div>'
-                    f'<div style="font-size:0.84rem;color:#374151;padding-top:4px;">'
-                    f'{extracted_cell}</div>'
+                    f'<div style="padding-top:4px;">{extracted_cell}</div>'
                     f'<div style="font-size:0.82rem;">{src_html}</div>'
                     f'<div style="padding-top:2px;">{cat}</div>'
                     f'</div>',
@@ -169,28 +175,30 @@ def render() -> None:
                 )
                 confidence_bar(v.get("combined_confidence", 0.0))
 
-                reason = v.get("reason", "")
+                reason  = v.get("reason", "")
                 snippet = (v.get("source") or {}).get("snippet", "")
                 if reason or snippet:
                     with st.expander("View reasoning & evidence", expanded=False):
                         if reason:
                             st.markdown(
-                                f'<div style="background:#F0F9FF;border-left:3px solid #2563EB;'
-                                f'padding:10px 14px;border-radius:0 8px 8px 0;'
-                                f'font-size:0.875rem;color:#1E3A5F;">'
-                                f'<strong>Reason:</strong> {reason}</div>',
+                                f'<div style="background:rgba(37,99,235,0.08);'
+                                f'border-left:3px solid #3B82F6;padding:10px 14px;'
+                                f'border-radius:0 8px 8px 0;font-size:0.875rem;'
+                                f'color:var(--text-color);"><strong>Reason:</strong> {reason}</div>',
                                 unsafe_allow_html=True,
                             )
                         if snippet:
                             st.markdown(
-                                f'<div style="background:#FFFBEB;border-left:3px solid #F59E0B;'
-                                f'padding:10px 14px;border-radius:0 8px 8px 0;margin-top:8px;'
-                                f'font-size:0.84rem;color:#374151;font-style:italic;">'
+                                f'<div style="background:rgba(245,158,11,0.08);'
+                                f'border-left:3px solid #F59E0B;padding:10px 14px;'
+                                f'border-radius:0 8px 8px 0;margin-top:8px;font-size:0.84rem;'
+                                f'color:var(--text-color);font-style:italic;">'
                                 f'&ldquo;{snippet}&rdquo;</div>',
                                 unsafe_allow_html=True,
                             )
 
                 st.markdown(
-                    '<hr style="margin:2px 0;border:none;border-top:1px solid #F1F5F9;">',
+                    '<hr style="margin:2px 0;border:none;'
+                    'border-top:1px solid rgba(128,128,128,0.1);">',
                     unsafe_allow_html=True,
                 )

ui/tab_interpretability.py

@@ -7,17 +7,17 @@ from core.pdf_utils import render_page_to_image
 from core.schemas import Criterion
 from ui.components import confidence_bar, verdict_pill
 
-_VERDICT_STYLE = {
-    "eligible":     ("#F0FDF4", "#166534", "#22C55E", "✅ PASSED"),
-    "not_eligible": ("#FEF2F2", "#991B1B", "#EF4444", "❌ FAILED"),
-    "needs_review": ("#FFFBEB", "#92400E", "#F59E0B", "⚠️ NEEDS REVIEW"),
+_VERDICT_CFG = {
+    "eligible":     ("rgba(34,197,94,0.12)",  "#22C55E", "✅ PASSED"),
+    "not_eligible": ("rgba(239,68,68,0.12)",   "#EF4444", "❌ FAILED"),
+    "needs_review": ("rgba(245,158,11,0.12)",  "#F59E0B", "⚠️ NEEDS REVIEW"),
 }
 
 _RULE_PLAIN = {
-    "numeric_threshold":   lambda r: f"must be {r['operator']} {r['value']:,} {r.get('unit') or ''}".strip(),
-    "count_threshold":     lambda r: f"must have completed at least {int(r['value'])}",
+    "numeric_threshold":    lambda r: f"must be {r['operator']} {r['value']:,} {r.get('unit') or ''}".strip(),
+    "count_threshold":      lambda r: f"must have completed at least {int(r['value'])}",
     "certification_present": lambda _: "valid certificate must be present",
-    "document_present":    lambda _: "supporting document must be present",
+    "document_present":     lambda _: "supporting document must be present",
 }
 
 
@@ -27,22 +27,20 @@ def _get_criteria() -> list[Criterion]:
 
 
 def _explain(v: dict, crit: Criterion | None) -> str:
-    verdict = v.get("verdict", "")
+    verdict   = v.get("verdict", "")
     extracted = v.get("extracted_value", "") or ""
-    reason = v.get("reason", "") or ""
+    reason    = v.get("reason", "") or ""
     if not crit:
         return reason
     rule = crit.rule
     rule_desc = _RULE_PLAIN.get(rule.type, lambda _: "")(rule.model_dump())
     if verdict == "eligible":
-        val = f" Found **{extracted}**." if extracted else ""
-        return f"{val} {reason}".strip()
+        return (f"Found **{extracted}**. " if extracted else "") + reason
     elif verdict == "not_eligible":
-        val = f" Found **{extracted}** (requirement: {rule_desc})." if extracted else f" Requirement: {rule_desc}."
-        return f"{val} {reason}".strip()
+        return ((f"Found **{extracted}** — does not meet requirement ({rule_desc}). "
+                 if extracted else f"Requirement: {rule_desc}. ") + reason)
     else:
-        val = f" Extracted value: **{extracted}**." if extracted else ""
-        return f"{val} {reason}".strip()
+        return (f"Extracted value: **{extracted}**. " if extracted else "") + reason
 
 
 def _qa_context(bid: str, verdicts: list[dict], criteria: list[Criterion]) -> str:
@@ -64,7 +62,7 @@ def _qa_context(bid: str, verdicts: list[dict], criteria: list[Criterion]) -> st
             lines.append(f"  Evidence: {s.get('doc_name')} page {s.get('page')} "
                          f"[{s.get('source_type')}]")
             if s.get("snippet"):
-                lines.append(f"  Snippet: \"{s['snippet'][:200]}\"")
+                lines.append(f'  Snippet: "{s["snippet"][:200]}"')
         lines.append("")
     return "\n".join(lines)
 
@@ -95,21 +93,20 @@ def _rule_answer(q: str, context: str) -> str:
     if any(w in q for w in ["turnover", "financial", "c1", "revenue"]):
         rel = [l.strip() for l in lines if "C1" in l or "turnover" in l.lower() or "Extracted" in l]
         return " ".join(rel[:4]) if rel else "Turnover information not found."
-    return ("Live LLM is unavailable. The evaluation summary above contains the full details.")
+    return "Live LLM is unavailable. The evaluation summary above contains the full details."
 
 
 def render() -> None:
     st.markdown(
-        '<h2 style="font-family:Inter,sans-serif;font-weight:800;font-size:1.5rem;'
-        'color:#0D1B2A;margin-bottom:4px;">Interpretability</h2>'
-        '<p style="color:#64748B;font-size:0.875rem;margin-bottom:1rem;">'
+        '<h2 style="font-weight:800;font-size:1.5rem;color:var(--text-color);">Interpretability</h2>'
+        '<p style="color:var(--text-color);opacity:0.6;font-size:0.875rem;margin-bottom:1rem;">'
         'Plain-English explanations with source citations. Ask any question about the evaluation.</p>',
         unsafe_allow_html=True,
     )
 
     vdata = st.session_state.get("verdicts", {})
     if not vdata:
-        st.info("No results yet. Load the pre-computed demo from the Overview tab, or run evaluation.")
+        st.info("No results yet. Load the pre-computed demo from Overview, or run evaluation.")
         return
 
     criteria = _get_criteria()
@@ -123,99 +120,93 @@ def render() -> None:
         return
 
     company = BIDDER_NAMES.get(bid, bid)
-
-    # Overall verdict banner
     mand = [v for v in verdicts if crit_map.get(v["criterion_id"]) and
             crit_map[v["criterion_id"]].mandatory]
-    failed  = [v for v in mand if v["verdict"] == "not_eligible"]
-    review  = [v for v in mand if v["verdict"] == "needs_review"]
-    passed  = [v for v in mand if v["verdict"] == "eligible"]
+    failed = [v for v in mand if v["verdict"] == "not_eligible"]
+    review = [v for v in mand if v["verdict"] == "needs_review"]
+    passed = [v for v in mand if v["verdict"] == "eligible"]
 
     if failed:
-        ov, bg, border, icon = "not_eligible", "#FEF2F2", "#FECACA", "❌"
-        summary = (f"Failed {len(failed)} mandatory criterion/criteria. "
-                   f"Must meet all mandatory criteria to qualify.")
+        ov, fg, icon = "not_eligible", "#EF4444", "❌"
+        summary = f"Failed {len(failed)} mandatory criterion/criteria. Must meet all to qualify."
     elif review:
-        ov, bg, border, icon = "needs_review", "#FFFBEB", "#FDE68A", "⚠️"
+        ov, fg, icon = "needs_review", "#F59E0B", "⚠️"
         summary = (f"Passed {len(passed)} mandatory criteria, but {len(review)} "
-                   f"could not be automatically confirmed and require officer sign-off.")
+                   f"require officer sign-off.")
     else:
-        ov, bg, border, icon = "eligible", "#F0FDF4", "#BBF7D0", "✅"
+        ov, fg, icon = "eligible", "#22C55E", "✅"
         summary = f"All {len(passed)} mandatory criteria satisfied."
 
-    bg2, fg2, _, label = _VERDICT_STYLE.get(ov, ("#F1F5F9", "#374151", "#CBD5E1", ov))
+    bg, _, label = _VERDICT_CFG.get(ov, ("rgba(128,128,128,0.1)", "#888", ov))
     st.markdown(
-        f'<div style="background:{bg2};border:1px solid {border};border-radius:12px;'
+        f'<div style="background:{bg};border:1px solid {fg}33;border-radius:12px;'
         f'padding:18px 20px;margin-bottom:1.5rem;display:flex;align-items:center;gap:14px;">'
         f'<div style="font-size:2rem;line-height:1;">{icon}</div>'
         f'<div>'
-        f'<div style="font-weight:800;font-size:1.05rem;color:{fg2};">{company} — {label}</div>'
-        f'<div style="font-size:0.84rem;color:{fg2};opacity:0.85;margin-top:4px;">{summary}</div>'
+        f'<div style="font-weight:800;font-size:1.05rem;color:{fg};">'
+        f'{company} — {label}</div>'
+        f'<div style="font-size:0.84rem;color:{fg};opacity:0.85;margin-top:4px;">{summary}</div>'
         f'</div></div>',
         unsafe_allow_html=True,
     )
 
-    # Per-criterion breakdown
     st.markdown(
-        '<div style="font-size:1rem;font-weight:700;color:#0D1B2A;margin-bottom:12px;'
-        'font-family:Inter,sans-serif;">Criterion-by-Criterion Breakdown</div>',
+        '<div style="font-size:1rem;font-weight:700;color:var(--text-color);margin-bottom:12px;">'
+        'Criterion-by-Criterion Breakdown</div>',
         unsafe_allow_html=True,
     )
 
     for v in verdicts:
-        crit = crit_map.get(v["criterion_id"])
+        crit    = crit_map.get(v["criterion_id"])
         verdict = v.get("verdict", "needs_review")
-        cbg, cfg_, _, clabel = _VERDICT_STYLE.get(verdict, ("#F1F5F9", "#374151", "#CBD5E1", verdict))
+        cbg, cfg_, clabel = _VERDICT_CFG.get(verdict, ("rgba(128,128,128,0.1)", "var(--text-color)", verdict))
         mand_txt = "Mandatory" if (crit and crit.mandatory) else "Optional"
-        title = crit.title if crit else v["criterion_id"]
+        title    = crit.title if crit else v["criterion_id"]
 
         with st.container(border=True):
             left, right = st.columns([1, 3])
             with left:
                 st.markdown(
                     f'<div style="background:{cbg};border-radius:8px;padding:14px;'
-                    f'text-align:center;height:100%;min-height:80px;'
-                    f'display:flex;flex-direction:column;align-items:center;'
-                    f'justify-content:center;gap:6px;">'
+                    f'text-align:center;min-height:80px;display:flex;flex-direction:column;'
+                    f'align-items:center;justify-content:center;gap:6px;">'
                     f'<div style="font-weight:800;font-size:0.82rem;color:{cfg_};">{clabel}</div>'
-                    f'<div style="font-size:0.7rem;color:{cfg_};opacity:0.7;">{mand_txt}</div>'
+                    f'<div style="font-size:0.7rem;color:{cfg_};opacity:0.75;">{mand_txt}</div>'
                     f'</div>',
                     unsafe_allow_html=True,
                 )
                 confidence_bar(v.get("combined_confidence", 0.0), "Certainty")
             with right:
                 st.markdown(
-                    f'<div style="font-weight:700;font-size:0.9rem;color:#0D1B2A;'
-                    f'font-family:Inter,sans-serif;">{v["criterion_id"]}: {title}</div>',
+                    f'<div style="font-weight:700;font-size:0.9rem;color:var(--text-color);">'
+                    f'{v["criterion_id"]}: {title}</div>',
                     unsafe_allow_html=True,
                 )
                 explanation = _explain(v, crit)
                 if explanation:
                     st.markdown(
-                        f'<p style="font-size:0.875rem;color:#374151;margin:8px 0;">{explanation}</p>',
+                        f'<p style="font-size:0.875rem;color:var(--text-color);'
+                        f'opacity:0.85;margin:8px 0;">{explanation}</p>',
                         unsafe_allow_html=True,
                     )
-                # Source citation
                 src = v.get("source") or {}
                 if src:
-                    doc = src.get("doc_name", "")
-                    page = src.get("page", "")
+                    doc, page = src.get("doc_name", ""), src.get("page", "")
                     tier_labels = {"text_pdf": "typed PDF", "tesseract": "Tesseract OCR",
                                    "vision_llm": "Vision LLM"}
                     tier = tier_labels.get(src.get("source_type", ""), "")
                     st.markdown(
                         f'<div style="display:inline-flex;align-items:center;gap:6px;'
-                        f'background:#F8FAFC;border:1px solid #E2E8F0;border-radius:6px;'
-                        f'padding:5px 10px;font-size:0.78rem;">'
+                        f'background:rgba(128,128,128,0.08);border:1px solid rgba(128,128,128,0.2);'
+                        f'border-radius:6px;padding:5px 10px;font-size:0.78rem;">'
                         f'<span>📄</span>'
-                        f'<strong style="color:#1E40AF;">{doc}</strong>'
-                        f'<span style="color:#94A3B8;">page {page}</span>'
-                        f'<span style="color:#94A3B8;">·</span>'
-                        f'<span style="color:#64748B;">{tier}</span>'
+                        f'<strong style="color:#3B82F6;">{doc}</strong>'
+                        f'<span style="color:var(--text-color);opacity:0.5;">page {page}</span>'
+                        f'<span style="color:var(--text-color);opacity:0.3;">·</span>'
+                        f'<span style="color:var(--text-color);opacity:0.6;">{tier}</span>'
                         f'</div>',
                         unsafe_allow_html=True,
                     )
-                    # Inline page preview
                     doc_path = DATA_DIR / "bidders" / bid / doc
                     if doc_path.exists() and doc_path.suffix.lower() == ".pdf":
                         with st.expander(f"View source: {doc}, page {page}", expanded=False):
@@ -226,26 +217,24 @@ def render() -> None:
                             except Exception:
                                 st.caption("Page preview unavailable.")
                     elif doc_path.exists() and doc_path.suffix.lower() in {".png", ".jpg"}:
-                        with st.expander(f"View source image: {doc}", expanded=False):
+                        with st.expander(f"View: {doc}", expanded=False):
                             st.image(str(doc_path), use_column_width=True)
 
     st.divider()
 
-    # Q&A section
     st.markdown(
-        '<div style="font-size:1rem;font-weight:700;color:#0D1B2A;margin-bottom:4px;'
-        'font-family:Inter,sans-serif;">Ask About This Evaluation</div>'
-        '<p style="font-size:0.82rem;color:#64748B;margin-bottom:12px;">'
-        'The model answers using the evaluation data above and cites specific documents.</p>',
+        '<div style="font-size:1rem;font-weight:700;color:var(--text-color);margin-bottom:4px;">'
+        'Ask About This Evaluation</div>'
+        '<p style="font-size:0.82rem;color:var(--text-color);opacity:0.6;margin-bottom:12px;">'
+        'Answers cite specific documents and pages.</p>',
         unsafe_allow_html=True,
     )
 
-    examples = ["Why was this bidder rejected?",
-                "What turnover figure was found, and from which document?",
-                "Does this bidder have a valid ISO 9001:2015 certificate?",
-                "Why is the turnover verdict in review?"]
     with st.expander("Example questions", expanded=False):
-        for e in examples:
+        for e in ["Why was this bidder rejected?",
+                  "What turnover figure was found, and from which document?",
+                  "Does this bidder have a valid ISO 9001:2015 certificate?",
+                  "Why is the turnover verdict in review?"]:
             st.markdown(f"- _{e}_")
 
     question = st.text_input("", placeholder="Ask anything about this bidder's evaluation…",
@@ -258,12 +247,13 @@ def render() -> None:
             with st.spinner("Looking up the answer…"):
                 answer = _answer(question, context)
             st.markdown(
-                f'<div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:10px;'
+                f'<div style="background:rgba(37,99,235,0.08);'
+                f'border:1px solid rgba(37,99,235,0.2);border-radius:10px;'
                 f'padding:16px 18px;margin-top:8px;">'
-                f'<div style="font-size:0.72rem;font-weight:700;color:#1E40AF;'
+                f'<div style="font-size:0.72rem;font-weight:700;color:#3B82F6;'
                 f'text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;">Answer</div>'
-                f'<div style="font-size:0.9rem;color:#1E3A5F;line-height:1.7;">{answer}</div>'
-                f'</div>',
+                f'<div style="font-size:0.9rem;color:var(--text-color);line-height:1.7;">'
+                f'{answer}</div></div>',
                 unsafe_allow_html=True,
             )
             with st.expander("Full context used", expanded=False):

ui/tab_overview.py

@@ -2,12 +2,11 @@ import streamlit as st
 
 from core import audit
 from core.config import BIDDER_NAMES
-from core.fallback import load_criteria
 from ui.components import stat_card
 
 
 def render() -> None:
-    # Hero
+    # Hero — intentional dark gradient, works as a visual anchor in both modes
     st.markdown(
         """<div style="background:linear-gradient(135deg,#0D1B2A 0%,#1E3A5F 60%,#2563EB 100%);
                        border-radius:16px;padding:2.5rem 2.5rem 2rem;margin-bottom:1.5rem;">
@@ -15,11 +14,9 @@ def render() -> None:
                       text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px;">
             CRPF Hackathon · Theme 3</div>
           <h1 style="margin:0;font-size:2.2rem;font-weight:800;color:#FFFFFF;
-                     font-family:Inter,sans-serif;letter-spacing:-0.02em;line-height:1.2;">
-            ⚖️ TenderIQ</h1>
-          <p style="margin:10px 0 0;font-size:1rem;color:#CBD5E1;max-width:600px;
-                    line-height:1.6;font-weight:400;">
-            Explainable AI for Government Tender Evaluation. Automated eligibility
+                     letter-spacing:-0.02em;line-height:1.2;">⚖️ TenderIQ</h1>
+          <p style="margin:10px 0 0;font-size:1rem;color:#CBD5E1;max-width:600px;line-height:1.6;">
+            Explainable AI for Government Tender Evaluation — automated eligibility
             assessment with criterion-level evidence, three-tier OCR, and a complete
             compliance audit trail.</p>
         </div>""",
@@ -33,66 +30,58 @@ def render() -> None:
     audit_count    = len(audit.query())
 
     c1, c2, c3, c4 = st.columns(4)
-    with c1: stat_card(criteria_count,    "Criteria Extracted", "#2563EB")
-    with c2: stat_card(len(verdicts),     "Bidders Evaluated",  "#059669")
-    with c3: stat_card(checked,           "Criteria Checked",   "#7C3AED")
-    with c4: stat_card(audit_count,       "Audit Entries",      "#D97706")
+    with c1: stat_card(criteria_count,  "Criteria Extracted", "#3B82F6")
+    with c2: stat_card(len(verdicts),   "Bidders Evaluated",  "#22C55E")
+    with c3: stat_card(checked,         "Criteria Checked",   "#8B5CF6")
+    with c4: stat_card(audit_count,     "Audit Entries",      "#F59E0B")
 
     st.divider()
 
     # Pipeline stages
     st.markdown(
-        '<h3 style="margin:0 0 1rem;font-size:1.1rem;font-weight:700;color:#0D1B2A;'
-        'font-family:Inter,sans-serif;">How it works</h3>',
+        '<p style="font-size:1rem;font-weight:700;color:var(--text-color);">'
+        'How it works</p>',
         unsafe_allow_html=True,
     )
 
     stages = [
-        ("#2563EB", "#EFF6FF", "#BFDBFE", "1", "Extract Criteria",
+        ("#3B82F6", "rgba(37,99,235,0.08)",  "1", "Extract Criteria",
          "DeepSeek reads the tender PDF and returns structured JSON for each criterion — "
-         "category, mandatory flag, rule (threshold / count / certificate), source clause, "
-         "and query hints for downstream retrieval."),
-        ("#7C3AED", "#F5F3FF", "#DDD6FE", "2", "Three-Tier OCR",
+         "category, mandatory flag, rule, source clause, and query hints."),
+        ("#8B5CF6", "rgba(124,58,237,0.08)", "2", "Three-Tier OCR",
          "📄 PyMuPDF for typed PDFs · 🔍 Tesseract for scans · 👁 DeepSeek Vision LLM "
-         "when Tesseract confidence < 65%. Every page records its tier and confidence score. "
-         "Results cached to avoid re-processing."),
-        ("#059669", "#F0FDF4", "#BBF7D0", "3", "Evaluate per Criterion",
-         "Semantic search retrieves the top-k relevant chunks from ChromaDB. DeepSeek "
-         "produces a verdict with combined confidence. Safety rule: borderline "
-         "not-eligible is downgraded to needs-review — never silent disqualification."),
-        ("#D97706", "#FFFBEB", "#FDE68A", "4", "Human Review & Audit",
-         "Flagged verdicts surface in the review queue with full evidence and source "
-         "citations. Every action — extraction, OCR, evaluation, officer decision — is "
-         "logged to SQLite with timestamp, model version, and payload."),
+         "when Tesseract confidence < 65%. Every page records its tier and confidence."),
+        ("#22C55E", "rgba(34,197,94,0.08)",  "3", "Evaluate per Criterion",
+         "Semantic search retrieves the top-k evidence chunks. DeepSeek returns a verdict "
+         "with combined confidence. Safety rule: borderline not-eligible is always "
+         "downgraded to needs-review."),
+        ("#F59E0B", "rgba(245,158,11,0.08)", "4", "Human Review & Audit",
+         "Flagged verdicts surface with full evidence and source citations. Every action "
+         "is logged to SQLite with timestamp, model version, actor, and payload."),
     ]
 
     cols = st.columns(4)
-    for col, (accent, bg, border, num, title, body) in zip(cols, stages):
+    for col, (accent, bg, num, title, body) in zip(cols, stages):
         with col:
             st.markdown(
-                f"""<div style="background:{bg};border:1px solid {border};border-radius:12px;
-                                padding:18px 16px;height:100%;">
+                f"""<div style="background:{bg};border:1px solid {accent}33;
+                                border-radius:12px;padding:18px 16px;height:100%;">
                   <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                     <div style="background:{accent};color:#fff;border-radius:50%;
                                 width:24px;height:24px;display:flex;align-items:center;
                                 justify-content:center;font-size:0.75rem;font-weight:700;
                                 flex-shrink:0;">{num}</div>
-                    <span style="font-weight:700;font-size:0.9rem;color:#0D1B2A;
-                                 font-family:Inter,sans-serif;">{title}</span>
+                    <span style="font-weight:700;font-size:0.9rem;color:var(--text-color);">
+                      {title}</span>
                   </div>
-                  <p style="margin:0;font-size:0.82rem;color:#374151;line-height:1.6;">{body}</p>
+                  <p style="margin:0;font-size:0.82rem;color:var(--text-color);
+                             opacity:0.75;line-height:1.6;">{body}</p>
                 </div>""",
                 unsafe_allow_html=True,
             )
 
     st.divider()
 
-    # Quick start
-    st.markdown(
-        '<h3 style="margin:0 0 1rem;font-size:1.1rem;font-weight:700;color:#0D1B2A;'
-        'font-family:Inter,sans-serif;">Quick Start</h3>',
-        unsafe_allow_html=True,
-    )
     col1, col2 = st.columns(2)
     with col1:
         with st.container(border=True):

ui/tab_review.py

@@ -14,9 +14,9 @@ def _crit_map() -> dict[str, Criterion]:
 
 def render() -> None:
     st.markdown(
-        '<h2 style="font-family:Inter,sans-serif;font-weight:800;font-size:1.5rem;'
-        'color:#0D1B2A;margin-bottom:4px;">Human Review Queue</h2>'
-        '<p style="color:#64748B;font-size:0.875rem;margin-bottom:1rem;">'
+        '<h2 style="font-weight:800;font-size:1.5rem;color:var(--text-color);">'
+        'Human Review Queue</h2>'
+        '<p style="color:var(--text-color);opacity:0.6;font-size:0.875rem;margin-bottom:1rem;">'
         'Verdicts that could not be automatically confirmed require officer sign-off.</p>',
         unsafe_allow_html=True,
     )
@@ -27,27 +27,29 @@ def render() -> None:
         return
 
     cm = _crit_map()
-    pending = [(bid, i, v)
-               for bid, verdicts in vdata.items()
-               for i, v in enumerate(verdicts)
-               if v.get("verdict") == "needs_review" and
-               v.get("review_status", "pending") == "pending"]
+    pending = [
+        (bid, i, v)
+        for bid, verdicts in vdata.items()
+        for i, v in enumerate(verdicts)
+        if v.get("verdict") == "needs_review" and
+        v.get("review_status", "pending") == "pending"
+    ]
 
     if not pending:
         st.success("✅ All flagged verdicts have been actioned. Nothing pending.")
         return
 
-    # Summary banner
     st.markdown(
-        f'<div style="background:#FEF3C7;border:1px solid #FDE68A;border-radius:10px;'
-        f'padding:14px 18px;margin-bottom:1.5rem;display:flex;align-items:center;gap:10px;">'
+        f'<div style="background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);'
+        f'border-radius:10px;padding:14px 18px;margin-bottom:1.5rem;'
+        f'display:flex;align-items:center;gap:10px;">'
         f'<span style="font-size:1.3rem;">⚠️</span>'
         f'<div>'
-        f'<div style="font-weight:700;color:#92400E;font-size:0.9rem;">'
+        f'<div style="font-weight:700;color:#F59E0B;font-size:0.9rem;">'
         f'{len(pending)} item{"s" if len(pending) != 1 else ""} pending review</div>'
-        f'<div style="font-size:0.8rem;color:#78350F;margin-top:2px;">'
-        f'High certainty = the model is confident this case needs human judgment, '
-        f'not that the bidder is likely ineligible.</div>'
+        f'<div style="font-size:0.8rem;color:var(--text-color);opacity:0.6;margin-top:2px;">'
+        f'High certainty = model is confident this needs human judgment, '
+        f'not that the bidder is ineligible.</div>'
         f'</div></div>',
         unsafe_allow_html=True,
     )
@@ -58,14 +60,14 @@ def render() -> None:
         company = BIDDER_NAMES.get(bid, bid)
 
         with st.container(border=True):
-            # Header
             st.markdown(
                 f'<div style="display:flex;justify-content:space-between;'
                 f'align-items:flex-start;gap:12px;margin-bottom:10px;">'
                 f'<div>'
-                f'<div style="font-weight:700;font-size:0.95rem;color:#0D1B2A;">{company}</div>'
-                f'<div style="font-size:0.82rem;color:#64748B;margin-top:2px;">'
-                f'{v["criterion_id"]}: {crit_title}</div>'
+                f'<div style="font-weight:700;font-size:0.95rem;color:var(--text-color);">'
+                f'{company}</div>'
+                f'<div style="font-size:0.82rem;color:var(--text-color);opacity:0.55;'
+                f'margin-top:2px;">{v["criterion_id"]}: {crit_title}</div>'
                 f'</div>'
                 f'{verdict_pill(v["verdict"])}'
                 f'</div>',
@@ -76,46 +78,48 @@ def render() -> None:
             with col_l:
                 if v.get("extracted_value"):
                     st.markdown(
-                        f'<div style="font-size:0.84rem;margin-bottom:8px;">'
+                        f'<div style="font-size:0.84rem;margin-bottom:8px;'
+                        f'color:var(--text-color);">'
                         f'<strong>Extracted value:</strong> '
-                        f'<code style="background:#F1F5F9;padding:2px 7px;border-radius:4px;'
-                        f'font-size:0.82rem;">{v["extracted_value"]}</code></div>',
+                        f'<code style="background:rgba(128,128,128,0.12);padding:2px 7px;'
+                        f'border-radius:4px;">{v["extracted_value"]}</code></div>',
                         unsafe_allow_html=True,
                     )
                 if v.get("reason"):
                     st.markdown(
-                        f'<div style="background:#FFFBEB;border-left:3px solid #F59E0B;'
-                        f'padding:9px 13px;border-radius:0 7px 7px 0;font-size:0.84rem;'
-                        f'color:#374151;margin-bottom:8px;">'
+                        f'<div style="background:rgba(245,158,11,0.08);'
+                        f'border-left:3px solid #F59E0B;padding:9px 13px;'
+                        f'border-radius:0 7px 7px 0;font-size:0.84rem;'
+                        f'color:var(--text-color);margin-bottom:8px;">'
                         f'<strong>Reason:</strong> {v["reason"]}</div>',
                         unsafe_allow_html=True,
                     )
                 if v.get("source") and v["source"].get("snippet"):
                     st.markdown(
-                        f'<div style="background:#F8FAFC;border:1px solid #E2E8F0;'
-                        f'padding:9px 13px;border-radius:7px;font-size:0.82rem;'
-                        f'color:#374151;font-style:italic;">'
-                        f'&ldquo;{v["source"]["snippet"]}&rdquo;</div>',
+                        f'<div style="background:rgba(128,128,128,0.07);'
+                        f'border:1px solid rgba(128,128,128,0.15);padding:9px 13px;'
+                        f'border-radius:7px;font-size:0.82rem;color:var(--text-color);'
+                        f'font-style:italic;">&ldquo;{v["source"]["snippet"]}&rdquo;</div>',
                         unsafe_allow_html=True,
                     )
             with col_r:
                 confidence_bar(v.get("combined_confidence", 0.0), "Certainty")
 
-            # Action buttons
             st.markdown("<div style='height:8px'></div>", unsafe_allow_html=True)
             kp = f"rv_{bid}_{v['criterion_id']}"
             bc1, bc2, bc3 = st.columns(3)
 
+            common = dict(bidder_id=bid, criterion_id=v["criterion_id"],
+                          original_verdict=v["verdict"],
+                          original_extracted_value=v.get("extracted_value", ""),
+                          combined_confidence=v.get("combined_confidence", 0.0))
+
             with bc1:
-                if st.button("✅ Approve", key=f"{kp}_approve", use_container_width=True,
-                             type="primary"):
+                if st.button("✅ Approve", key=f"{kp}_approve",
+                             use_container_width=True, type="primary"):
                     st.session_state["verdicts"][bid][idx]["review_status"] = "approved"
                     audit.log("human_review_action", actor="officer",
-                              bidder_id=bid, criterion_id=v["criterion_id"],
-                              action_taken="approved",
-                              original_verdict=v["verdict"],
-                              original_extracted_value=v.get("extracted_value", ""),
-                              combined_confidence=v.get("combined_confidence", 0.0))
+                              action_taken="approved", **common)
                     st.rerun()
             with bc2:
                 edited = st.text_input("Corrected value", key=f"{kp}_edit_val",
@@ -126,19 +130,11 @@ def render() -> None:
                     if edited:
                         st.session_state["verdicts"][bid][idx]["extracted_value"] = edited
                     audit.log("human_review_action", actor="officer",
-                              bidder_id=bid, criterion_id=v["criterion_id"],
-                              action_taken="edited", edited_value=edited,
-                              original_verdict=v["verdict"],
-                              original_extracted_value=v.get("extracted_value", ""),
-                              combined_confidence=v.get("combined_confidence", 0.0))
+                              action_taken="edited", edited_value=edited, **common)
                     st.rerun()
             with bc3:
                 if st.button("❌ Reject", key=f"{kp}_reject", use_container_width=True):
                     st.session_state["verdicts"][bid][idx]["review_status"] = "rejected"
                     audit.log("human_review_action", actor="officer",
-                              bidder_id=bid, criterion_id=v["criterion_id"],
-                              action_taken="rejected",
-                              original_verdict=v["verdict"],
-                              original_extracted_value=v.get("extracted_value", ""),
-                              combined_confidence=v.get("combined_confidence", 0.0))
+                              action_taken="rejected", **common)
                     st.rerun()