UI revamp: inline styles throughout, Inter font, reliable badge system

Root cause of previous bad UI: CSS class selectors (.tiq-badge etc.) defined
in the global style block don't reliably cascade into Streamlit markdown
containers. Fix: 100% inline styles on every HTML component — no CSS classes.

- ui/styles.py: simplified to page-chrome only (sidebar, tabs, buttons,
metrics) — nothing that requires class inheritance
- ui/components.py: verdict_pill/category_badge/ocr_tier_badge/confidence_bar
all use pure inline styles; color-coded confidence bar (green/amber/red)
- ui/tab_overview.py: hero banner, numbered pipeline stage cards, stat_card KPIs
- ui/tab_bidders.py: CSS grid verdict table, bidder header with pass/total,
styled reason/snippet callout boxes, clean dividers
- ui/tab_review.py: amber summary banner, styled evidence cards, clean layout
- ui/tab_interpretability.py: coloured verdict status cards, inline source
citation chip, styled Q&A answer box
- app.py: glowing connection dot, cleaner sidebar branding, Inter font via
Google Fonts import in CSS

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

app.py

@@ -1,5 +1,4 @@
 import shutil
-
 import streamlit as st
 
 from ui.styles import CSS
@@ -10,17 +9,11 @@ from ui.tab_review import render as render_review
 from ui.tab_audit import render as render_audit
 from ui.tab_interpretability import render as render_interpretability
 
-st.set_page_config(
-    page_title="TenderIQ",
-    page_icon="⚖️",
-    layout="wide",
-)
-
+st.set_page_config(page_title="TenderIQ", page_icon="⚖️", layout="wide")
 st.markdown(CSS, unsafe_allow_html=True)
 
 
 def _probe_llm() -> str:
-    """Probe once per session; returns 'green', 'amber', or 'red'."""
     if st.session_state.get("fallback_active"):
         return "amber"
     if "llm_status" in st.session_state:
@@ -30,9 +23,6 @@ def _probe_llm() -> str:
         LLM().chat_json("Respond with valid JSON only.", '{"ping": true}')
         st.session_state["llm_status"] = "green"
         return "green"
-    except LLMUnavailable:
-        st.session_state["llm_status"] = "red"
-        return "red"
     except Exception:
         st.session_state["llm_status"] = "red"
         return "red"
@@ -45,58 +35,54 @@ def _reset_demo() -> None:
     shutil.rmtree(CHROMA_DIR, ignore_errors=True)
     shutil.rmtree(str(OCR_CACHE_DIR), ignore_errors=True)
     st.cache_resource.clear()
-    for key in list(st.session_state.keys()):
-        del st.session_state[key]
+    for k in list(st.session_state.keys()):
+        del st.session_state[k]
 
 
-# ── Sidebar ──────────────────────────────────────────────────────────────────
+# ── Sidebar ───────────────────────────────────────────────────────────────────
 with st.sidebar:
+    # Branding
     st.markdown(
-        """<div style="padding:12px 4px 8px;text-align:center;">
-        <div style="font-size:2.4rem;line-height:1;">⚖️</div>
-        <div style="font-size:1.3rem;font-weight:800;color:#F1F5F9;
-                    letter-spacing:-0.01em;margin-top:6px;">TenderIQ</div>
-        <div style="font-size:0.72rem;color:#94A3B8;margin-top:3px;
-                    text-transform:uppercase;letter-spacing:0.08em;">
+        """<div style="padding:16px 8px 12px;text-align:center;">
+          <div style="font-size:2.6rem;">⚖️</div>
+          <div style="font-size:1.4rem;font-weight:800;color:#F8FAFC;
+                      letter-spacing:-0.02em;margin-top:4px;
+                      font-family:Inter,sans-serif;">TenderIQ</div>
+          <div style="font-size:0.7rem;color:#64748B;margin-top:4px;
+                      text-transform:uppercase;letter-spacing:0.1em;">
             AI Tender Evaluation</div>
         </div>""",
         unsafe_allow_html=True,
     )
     st.divider()
 
+    # Connection status
     status = _probe_llm()
-    if status == "green":
-        st.markdown(
-            '<div style="display:flex;align-items:center;gap:8px;padding:6px 0;">'
-            '<div style="width:10px;height:10px;border-radius:50%;background:#22C55E;'
-            'box-shadow:0 0 6px #22C55E;flex-shrink:0;"></div>'
-            '<span style="font-size:0.85rem;font-weight:600;">DeepSeek Connected</span></div>',
-            unsafe_allow_html=True,
-        )
-    elif status == "amber":
-        st.markdown(
-            '<div style="display:flex;align-items:center;gap:8px;padding:6px 0;">'
-            '<div style="width:10px;height:10px;border-radius:50%;background:#F59E0B;'
-            'box-shadow:0 0 6px #F59E0B;flex-shrink:0;"></div>'
-            '<span style="font-size:0.85rem;font-weight:600;">Pre-computed Mode</span></div>',
-            unsafe_allow_html=True,
-        )
-        st.warning("⚠ Showing pre-computed results.")
-    else:
-        st.markdown(
-            '<div style="display:flex;align-items:center;gap:8px;padding:6px 0;">'
-            '<div style="width:10px;height:10px;border-radius:50%;background:#EF4444;'
-            'box-shadow:0 0 6px #EF4444;flex-shrink:0;"></div>'
-            '<span style="font-size:0.85rem;font-weight:600;">No API Key</span></div>',
-            unsafe_allow_html=True,
-        )
-        st.caption("Using pre-computed fallback data.")
+    dot_color  = {"green": "#22C55E", "amber": "#F59E0B", "red": "#EF4444"}[status]
+    dot_shadow = {"green": "#22C55E", "amber": "#F59E0B", "red": "#EF4444"}[status]
+    status_label = {"green": "DeepSeek Connected", "amber": "Pre-computed Mode",
+                    "red": "No API Key"}[status]
+    st.markdown(
+        f"""<div style="display:flex;align-items:center;gap:9px;
+                        padding:8px 4px;margin-bottom:4px;">
+          <div style="width:9px;height:9px;border-radius:50%;flex-shrink:0;
+                      background:{dot_color};
+                      box-shadow:0 0 0 3px {dot_color}33,0 0 8px {dot_shadow}88;">
+          </div>
+          <span style="font-size:0.82rem;font-weight:600;color:#E2E8F0;">
+            {status_label}</span>
+        </div>""",
+        unsafe_allow_html=True,
+    )
+    if status == "amber":
+        st.warning("Using pre-computed results.")
+    elif status == "red":
+        st.caption("Set DEEPSEEK_API_KEY in .env to enable live mode.")
 
     st.divider()
-
     if st.button("↺  Reset Session", use_container_width=True):
-        for key in list(st.session_state.keys()):
-            del st.session_state[key]
+        for k in list(st.session_state.keys()):
+            del st.session_state[k]
         st.rerun()
 
     if st.button("🗑  Reset for Demo", use_container_width=True, type="secondary"):
@@ -113,28 +99,28 @@ with st.sidebar:
             st.rerun()
 
     st.divider()
-    st.caption("CRPF Hackathon · Theme 3\nExplainable AI for Government Procurement")
-
+    st.markdown(
+        """<div style="font-size:0.7rem;color:#334155;text-align:center;
+                       line-height:1.6;padding:0 4px;">
+          CRPF Hackathon · Theme 3<br>
+          Explainable AI for Government Procurement
+        </div>""",
+        unsafe_allow_html=True,
+    )
 
-# ── Tabs ─────────────────────────────────────────────────────────────────────
+# ── Tabs ──────────────────────────────────────────────────────────────────────
 tab1, tab2, tab3, tab4, tab5, tab6 = st.tabs([
-    "🏠  Overview",
-    "📄  Tender Analysis",
-    "⚖️  Bidder Evaluation",
-    "👤  Human Review",
-    "📋  Audit Log",
-    "🔍  Interpretability",
+    "🏠 Overview",
+    "📄 Tender Analysis",
+    "⚖️ Bidder Evaluation",
+    "👤 Human Review",
+    "📋 Audit Log",
+    "🔍 Interpretability",
 ])
 
-with tab1:
-    render_overview()
-with tab2:
-    render_tender()
-with tab3:
-    render_bidders()
-with tab4:
-    render_review()
-with tab5:
-    render_audit()
-with tab6:
-    render_interpretability()
+with tab1: render_overview()
+with tab2: render_tender()
+with tab3: render_bidders()
+with tab4: render_review()
+with tab5: render_audit()
+with tab6: render_interpretability()

ui/components.py

@@ -1,65 +1,105 @@
 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.
+
+_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;'
+)
+
 
 def verdict_pill(verdict: str) -> str:
     cfg = {
-        "eligible":     ("tiq-eligible",  "✅ Eligible"),
-        "not_eligible": ("tiq-not-elig",  "❌ Not Eligible"),
-        "needs_review": ("tiq-review",    "⚠️ Needs Review"),
+        "eligible":     ("#D1FAE5", "#065F46", "#6EE7B7", "✅ Eligible"),
+        "not_eligible": ("#FEE2E2", "#991B1B", "#FCA5A5", "❌ Not Eligible"),
+        "needs_review": ("#FEF3C7", "#92400E", "#FCD34D", "⚠️ Needs Review"),
     }
-    cls, label = cfg.get(verdict, ("tiq-review", verdict))
-    return f'<span class="tiq-badge {cls}">{label}</span>'
+    bg, fg, border, label = cfg.get(verdict, ("#F1F5F9", "#374151", "#CBD5E1", verdict))
+    return (f'<span style="{_BADGE}background:{bg};color:{fg};'
+            f'border:1px solid {border};">{label}</span>')
 
 
 def category_badge(category: str) -> str:
     cfg = {
-        "financial":  ("tiq-cat-fin",  "💰 Financial"),
-        "technical":  ("tiq-cat-tech", "🔧 Technical"),
-        "compliance": ("tiq-cat-comp", "📋 Compliance"),
+        "financial":  ("#DBEAFE", "#1E40AF", "#93C5FD", "💰 Financial"),
+        "technical":  ("#DCFCE7", "#166534", "#86EFAC", "🔧 Technical"),
+        "compliance": ("#FEF3C7", "#92400E", "#FCD34D", "📋 Compliance"),
     }
-    cls, label = cfg.get(category, ("tiq-cat-comp", category))
-    return f'<span class="tiq-badge {cls}">{label}</span>'
+    bg, fg, border, label = cfg.get(category, ("#F1F5F9", "#374151", "#CBD5E1", category))
+    return (f'<span style="{_BADGE}background:{bg};color:{fg};'
+            f'border:1px solid {border};">{label}</span>')
 
 
 def ocr_tier_badge(source_type: str) -> str:
     cfg = {
-        "text_pdf":   ("tiq-ocr-text",   "📄 Typed PDF"),
-        "tesseract":  ("tiq-ocr-tess",   "🔍 Tesseract"),
-        "vision_llm": ("tiq-ocr-vision", "👁 Vision LLM"),
+        "text_pdf":   ("#F1F5F9", "#475569", "#CBD5E1", "📄 Typed PDF"),
+        "tesseract":  ("#F5F3FF", "#6D28D9", "#DDD6FE", "🔍 Tesseract"),
+        "vision_llm": ("#FFF7ED", "#C2410C", "#FED7AA", "👁 Vision LLM"),
     }
-    cls, label = cfg.get(source_type, ("tiq-ocr-text", source_type))
-    return f'<span class="tiq-badge {cls}">{label}</span>'
+    bg, fg, border, label = cfg.get(source_type, ("#F1F5F9", "#374151", "#CBD5E1", source_type))
+    return (f'<span style="{_BADGE}background:{bg};color:{fg};'
+            f'border:1px solid {border};">{label}</span>')
 
 
 def mandatory_badge(mandatory: bool) -> str:
     if mandatory:
-        return '<span class="tiq-badge tiq-mand">🔴 Mandatory</span>'
-    return '<span class="tiq-badge tiq-optional">🟡 Optional</span>'
+        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>')
 
 
 def confidence_bar(value: float, label: str = "Confidence") -> None:
     pct = min(max(value, 0.0), 1.0)
-    color = "#22C55E" if pct >= 0.8 else "#F59E0B" if pct >= 0.55 else "#EF4444"
+    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"
+
+    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>
+  <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>
+</div>""",
+        unsafe_allow_html=True,
+    )
+
+
+def stat_card(value: str | int, label: str, color: str = "#2563EB") -> None:
     st.markdown(
-        f"""<div style="margin:4px 0 8px;">
-        <div style="display:flex;justify-content:space-between;
-                    font-size:0.75rem;color:#64748B;margin-bottom:3px;">
-            <span>{label}</span><span style="font-weight:600;color:{color};">{pct:.0%}</span>
-        </div>
-        <div style="background:#E2E8F0;border-radius:6px;height:7px;overflow:hidden;">
-            <div style="width:{pct*100:.1f}%;background:{color};
-                        height:100%;border-radius:6px;
-                        transition:width 0.4s ease;"></div>
-        </div></div>""",
+        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 section_header(title: str, subtitle: str = "") -> None:
+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 ""
     st.markdown(
-        f'<div class="tiq-section-header">'
-        f'<div style="font-size:1.1rem;font-weight:700;color:#0D1B2A;">{title}</div>'
-        + (f'<div style="font-size:0.82rem;color:#64748B;margin-top:2px;">{subtitle}</div>' if subtitle else "")
-        + "</div>",
+        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}
+</div>""",
         unsafe_allow_html=True,
     )

ui/styles.py

@@ -1,257 +1,122 @@
 CSS = """
 <style>
-/* ================================================================
-   TenderIQ — Professional Theme
-   ================================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
 
-/* ── Global ──────────────────────────────────────────────────── */
-.main .block-container {
-    padding-top: 1.5rem !important;
-    padding-bottom: 2rem !important;
-    max-width: 1200px;
+/* ── Font ──────────────────────────────────────────────────── */
+html, body, [class*="css"], .stMarkdown, .stText, button, input, select {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
 }
-h1 { font-weight: 800 !important; color: #0D1B2A !important; letter-spacing: -0.02em; }
-h2 { font-weight: 700 !important; color: #0D1B2A !important; }
-h3 { font-weight: 600 !important; color: #0D1B2A !important; }
-h4 { font-weight: 600 !important; color: #1E3A5F !important; }
-p  { color: #374151; line-height: 1.7; }
-code {
-    background: #EFF6FF !important;
-    color: #1E40AF !important;
-    padding: 2px 6px !important;
-    border-radius: 4px !important;
-    font-size: 0.85em !important;
-    border: 1px solid #DBEAFE;
-}
-hr { border-color: #E2E8F0 !important; margin: 1.25rem 0 !important; }
 
-/* ── Sidebar ─────────────────────────────────────────────────── */
-[data-testid="stSidebar"] {
-    background: linear-gradient(175deg, #0D1B2A 0%, #1E3A5F 100%) !important;
-    border-right: 1px solid #1E3A5F;
+/* ── Page chrome ───────────────────────────────────────────── */
+#MainMenu, footer, header { visibility: hidden; }
+.main .block-container { max-width: 1140px; padding-top: 1.2rem !important; }
+
+/* ── Sidebar ───────────────────────────────────────────────── */
+section[data-testid="stSidebar"] > div:first-child {
+    background: #0A1628 !important;
 }
 [data-testid="stSidebar"] p,
-[data-testid="stSidebar"] span,
-[data-testid="stSidebar"] label,
-[data-testid="stSidebar"] div {
-    color: #CBD5E1 !important;
-}
-[data-testid="stSidebar"] h1,
-[data-testid="stSidebar"] h2,
-[data-testid="stSidebar"] h3,
-[data-testid="stSidebar"] strong {
-    color: #F1F5F9 !important;
-}
+[data-testid="stSidebar"] span:not(.st-emotion-cache-hidden),
+[data-testid="stSidebar"] small,
+[data-testid="stSidebar"] label { color: #CBD5E1 !important; }
+[data-testid="stSidebar"] strong  { color: #F1F5F9 !important; }
+[data-testid="stSidebar"] hr     { border-color: rgba(255,255,255,0.1) !important; }
 [data-testid="stSidebar"] .stButton > button {
-    background: rgba(255,255,255,0.07) !important;
-    border: 1px solid rgba(255,255,255,0.15) !important;
-    color: #E2E8F0 !important;
-    border-radius: 8px !important;
-    font-weight: 500 !important;
-    transition: all 0.2s ease !important;
-    width: 100%;
+    background: rgba(255,255,255,0.06) !important;
+    border: 1px solid rgba(255,255,255,0.12) !important;
+    color: #CBD5E1 !important;
+    transition: background 0.15s;
 }
 [data-testid="stSidebar"] .stButton > button:hover {
-    background: rgba(255,255,255,0.14) !important;
-    border-color: rgba(255,255,255,0.3) !important;
-    color: #FFFFFF !important;
-}
-[data-testid="stSidebar"] [data-testid="stDivider"] { border-color: rgba(255,255,255,0.12) !important; }
-[data-testid="stSidebar"] .stAlert {
-    background: rgba(245,158,11,0.15) !important;
-    border: 1px solid rgba(245,158,11,0.3) !important;
-    border-radius: 8px !important;
+    background: rgba(255,255,255,0.13) !important;
+    color: #fff !important;
 }
-[data-testid="stSidebar"] [data-testid="stCaptionContainer"] p { color: #94A3B8 !important; }
+[data-testid="stSidebar"] .stAlert { border-radius: 8px !important; }
 
-/* ── Tabs ────────────────────────────────────────────────────── */
+/* ── Tabs ──────────────────────────────────────────────────── */
 .stTabs [data-baseweb="tab-list"] {
-    background: #F1F5F9 !important;
-    border-radius: 12px !important;
-    padding: 5px !important;
-    gap: 2px !important;
+    background: #F0F4F8;
+    padding: 4px;
+    border-radius: 10px;
+    gap: 2px;
     border: 1px solid #E2E8F0;
 }
 .stTabs [data-baseweb="tab"] {
-    border-radius: 8px !important;
-    padding: 8px 18px !important;
-    font-weight: 500 !important;
+    border-radius: 7px !important;
+    padding: 7px 16px !important;
     font-size: 0.875rem !important;
+    font-weight: 500 !important;
     color: #64748B !important;
-    border: none !important;
     background: transparent !important;
-    transition: all 0.15s ease !important;
 }
-.stTabs [data-baseweb="tab"]:hover { color: #1E3A5F !important; background: rgba(255,255,255,0.6) !important; }
 .stTabs [aria-selected="true"] {
     background: #FFFFFF !important;
     color: #0D1B2A !important;
-    box-shadow: 0 1px 6px rgba(0,0,0,0.1) !important;
     font-weight: 600 !important;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
 }
-.stTabs [data-baseweb="tab-highlight"] { display: none !important; }
+.stTabs [data-baseweb="tab-highlight"],
 .stTabs [data-baseweb="tab-border"] { display: none !important; }
 
-/* ── Buttons ─────────────────────────────────────────────────── */
+/* ── Buttons ───────────────────────────────────────────────── */
 .stButton > button {
     border-radius: 8px !important;
-    font-weight: 500 !important;
+    font-weight: 600 !important;
     font-size: 0.875rem !important;
-    transition: all 0.2s ease !important;
-    border: 1px solid #E2E8F0 !important;
+    transition: all 0.18s ease !important;
+    letter-spacing: 0.01em;
 }
 .stButton > button[kind="primary"] {
-    background: linear-gradient(135deg, #1E3A5F 0%, #2563EB 100%) !important;
-    color: #FFFFFF !important;
+    background: linear-gradient(135deg, #1E40AF, #2563EB) !important;
     border: none !important;
+    color: #fff !important;
     box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
 }
 .stButton > button[kind="primary"]:hover {
     box-shadow: 0 4px 16px rgba(37,99,235,0.45) !important;
     transform: translateY(-1px) !important;
 }
-.stButton > button[kind="secondary"] { color: #374151 !important; }
-.stButton > button[kind="secondary"]:hover { background: #F1F5F9 !important; }
 
-/* ── Metric cards ────────────────────────────────────────────── */
+/* ── Metrics ───────────────────────────────────────────────── */
 [data-testid="metric-container"] {
-    background: #FFFFFF !important;
+    background: #fff !important;
     border: 1px solid #E2E8F0 !important;
     border-radius: 12px !important;
-    padding: 20px !important;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
-    transition: box-shadow 0.2s, transform 0.2s;
-}
-[data-testid="metric-container"]:hover {
-    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
-    transform: translateY(-1px);
+    padding: 18px !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
 }
-[data-testid="stMetricValue"] { font-size: 2.2rem !important; font-weight: 800 !important; color: #0D1B2A !important; }
-[data-testid="stMetricLabel"] { font-size: 0.75rem !important; font-weight: 600 !important; color: #64748B !important; text-transform: uppercase; letter-spacing: 0.06em; }
-[data-testid="stMetricDelta"] { font-size: 0.8rem !important; }
+[data-testid="stMetricValue"] { font-size: 2rem !important; font-weight: 800 !important; }
+[data-testid="stMetricLabel"] { font-size: 0.72rem !important; font-weight: 600 !important;
+    text-transform: uppercase; letter-spacing: 0.07em; color: #64748B !important; }
 
-/* ── Bordered containers (cards) ─────────────────────────────── */
+/* ── Bordered containers ───────────────────────────────────── */
 [data-testid="stVerticalBlockBorderWrapper"] {
     border-radius: 12px !important;
-    border: 1px solid #E2E8F0 !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
-    overflow: hidden;
-    transition: box-shadow 0.2s;
-}
-[data-testid="stVerticalBlockBorderWrapper"]:hover {
-    box-shadow: 0 4px 16px rgba(0,0,0,0.09) !important;
+    border-color: #E2E8F0 !important;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
 }
 
-/* ── Expanders ───────────────────────────────────────────────── */
+/* ── Expanders ─────────────────────────────────────────────── */
 [data-testid="stExpander"] {
     border: 1px solid #E2E8F0 !important;
-    border-radius: 10px !important;
-    overflow: hidden !important;
-    margin-bottom: 4px !important;
-}
-[data-testid="stExpander"] summary {
-    font-weight: 500 !important;
-    color: #374151 !important;
-    padding: 10px 14px !important;
-    background: #F8FAFC;
+    border-radius: 8px !important;
 }
-[data-testid="stExpander"] summary:hover { background: #F1F5F9 !important; }
+[data-testid="stExpander"] summary { font-weight: 500 !important; font-size: 0.875rem !important; }
 
-/* ── Alerts ──────────────────────────────────────────────────── */
-[data-testid="stAlert"] { border-radius: 10px !important; border: none !important; }
-div[data-testid="stAlert"][data-baseweb="notification"][kind="info"] {
-    background: #EFF6FF !important; border-left: 4px solid #3B82F6 !important;
-}
-div[data-testid="stAlert"][data-baseweb="notification"][kind="success"] {
-    background: #F0FDF4 !important; border-left: 4px solid #22C55E !important;
-}
-div[data-testid="stAlert"][data-baseweb="notification"][kind="warning"] {
-    background: #FFFBEB !important; border-left: 4px solid #F59E0B !important;
-}
-div[data-testid="stAlert"][data-baseweb="notification"][kind="error"] {
-    background: #FEF2F2 !important; border-left: 4px solid #EF4444 !important;
-}
+/* ── Alerts ────────────────────────────────────────────────── */
+[data-testid="stAlert"] { border-radius: 10px !important; }
 
-/* ── Progress bar ────────────────────────────────────────────── */
-.stProgress > div > div > div { border-radius: 6px !important; }
+/* ── Progress ──────────────────────────────────────────────── */
 .stProgress > div > div > div > div {
-    background: linear-gradient(90deg, #1E3A5F, #2563EB) !important;
+    background: linear-gradient(90deg, #1E40AF, #2563EB) !important;
     border-radius: 6px !important;
 }
 
-/* ── Forms (inputs, selects) ─────────────────────────────────── */
-[data-baseweb="input"],
-[data-baseweb="select"],
-[data-baseweb="textarea"] {
+/* ── Inputs ────────────────────────────────────────────────── */
+[data-baseweb="input"] > div,
+[data-baseweb="select"] > div:first-child {
     border-radius: 8px !important;
     border-color: #E2E8F0 !important;
 }
-[data-baseweb="input"]:focus-within,
-[data-baseweb="select"]:focus-within {
-    border-color: #2563EB !important;
-    box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
-}
-
-/* ── Dataframe ───────────────────────────────────────────────── */
-[data-testid="stDataFrame"] {
-    border-radius: 10px !important;
-    overflow: hidden !important;
-    border: 1px solid #E2E8F0 !important;
-}
-
-/* ── Caption ─────────────────────────────────────────────────── */
-[data-testid="stCaptionContainer"] p { color: #94A3B8 !important; font-size: 0.8rem !important; }
-
-/* ── Spinner ─────────────────────────────────────────────────── */
-.stSpinner > div { border-top-color: #2563EB !important; }
-
-/* ── Hide Streamlit chrome ───────────────────────────────────── */
-#MainMenu { visibility: hidden !important; }
-footer    { visibility: hidden !important; }
-header    { visibility: hidden !important; }
-
-/* ── Verdict badge utility classes ───────────────────────────── */
-.tiq-badge {
-    display: inline-flex; align-items: center; gap: 5px;
-    padding: 4px 12px; border-radius: 20px;
-    font-size: 0.8rem; font-weight: 600; white-space: nowrap;
-}
-.tiq-eligible   { background:#D1FAE5; color:#065F46; border:1px solid #A7F3D0; }
-.tiq-not-elig   { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
-.tiq-review     { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }
-.tiq-cat-fin    { background:#DBEAFE; color:#1E40AF; border:1px solid #BFDBFE; }
-.tiq-cat-tech   { background:#DCFCE7; color:#166534; border:1px solid #BBF7D0; }
-.tiq-cat-comp   { background:#FEF3C7; color:#92400E; border:1px solid #FDE68A; }
-.tiq-ocr-text   { background:#F1F5F9; color:#475569; border:1px solid #CBD5E1; }
-.tiq-ocr-tess   { background:#FDF4FF; color:#7E22CE; border:1px solid #E9D5FF; }
-.tiq-ocr-vision { background:#FFF7ED; color:#C2410C; border:1px solid #FED7AA; }
-.tiq-mand       { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }
-.tiq-optional   { background:#FFFBEB; color:#92400E; border:1px solid #FDE68A; }
-
-/* ── Hero banner ─────────────────────────────��───────────────── */
-.tiq-hero {
-    background: linear-gradient(135deg, #0D1B2A 0%, #1E3A5F 50%, #2563EB 100%);
-    border-radius: 16px; padding: 2.5rem 2rem; margin-bottom: 1.5rem;
-    color: white;
-}
-.tiq-hero h1 { color: #FFFFFF !important; margin: 0; font-size: 2rem; }
-.tiq-hero p  { color: #CBD5E1 !important; margin: 0.5rem 0 0; font-size: 1.05rem; }
-
-/* ── Kpi strip ───────────────────────────────────────────────── */
-.tiq-kpi {
-    background: #FFFFFF; border-radius: 12px; padding: 18px 20px;
-    border: 1px solid #E2E8F0;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
-    text-align: center;
-}
-.tiq-kpi-val { font-size: 2rem; font-weight: 800; color: #0D1B2A; }
-.tiq-kpi-lbl { font-size: 0.72rem; font-weight: 600; color: #64748B;
-               text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; }
-
-/* ── Section header ─────────────────────────────────────────── */
-.tiq-section-header {
-    border-left: 4px solid #2563EB; padding-left: 12px;
-    margin: 1.5rem 0 1rem;
-}
 </style>
 """

ui/tab_bidders.py

@@ -4,193 +4,193 @@ from core import bidder_processor, evaluator
 from core.config import BIDDER_NAMES, DATA_DIR
 from core.fallback import load_criteria
 from core.schemas import Criterion
-from ui.components import (
-    category_badge, confidence_bar, mandatory_badge,
-    ocr_tier_badge, section_header, verdict_pill,
-)
-
-_BIDDER_LABELS = {
-    "bidder_a": "Apex Constructions Pvt. Ltd.",
-    "bidder_b": "BuildRight Enterprises",
-    "bidder_c": "Shree Constructions & Services",
-}
-_BIDDER_SUBLABELS = {
-    "bidder_a": "Clearly Eligible",
-    "bidder_b": "Ineligible — Turnover Below Threshold",
-    "bidder_c": "Needs Review — Scanned Certificate",
+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"),
 }
 
 
 def _get_criteria() -> list[Criterion]:
     data = st.session_state.get("criteria")
-    if data:
-        return [Criterion(**c) for c in data]
-    return load_criteria()
-
-
-def _overall_verdict(verdicts: list[dict], crit_map: dict) -> str:
-    mandatory = [v for v in verdicts
-                 if crit_map.get(v["criterion_id"]) and
-                 crit_map[v["criterion_id"]].mandatory]
-    if not mandatory:
-        mandatory = verdicts
-    if any(v["verdict"] == "not_eligible" for v in mandatory):
+    return [Criterion(**c) for c in data] if data else load_criteria()
+
+
+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 mandatory):
+    if any(v["verdict"] == "needs_review" for v in src):
         return "needs_review"
     return "eligible"
 
 
 def render() -> None:
-    st.header("Bidder Evaluation")
-    st.caption("Run the full evaluation pipeline or load pre-computed results from the Overview tab.")
+    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;">'
+        'Evaluate each bidder against all extracted criteria.</p>',
+        unsafe_allow_html=True,
+    )
 
     selected = st.multiselect(
-        "Select bidders to evaluate",
+        "Select bidders",
         options=list(BIDDER_NAMES.keys()),
         default=list(BIDDER_NAMES.keys()),
-        format_func=lambda x: f"{_BIDDER_LABELS.get(x, x)} — {_BIDDER_SUBLABELS.get(x, '')}",
+        format_func=lambda x: _BIDDER_META.get(x, (x, "", ""))[0],
     )
 
     if st.button("▶  Run Evaluation", type="primary"):
         criteria = _get_criteria()
-        verdicts_dict: dict = {}
-        progress = st.progress(0, text="Starting…")
+        prog = st.progress(0, text="Starting…")
         total = len(selected) * len(criteria)
         done = 0
-        for bidder_id in selected:
-            files = sorted(
-                f for f in (DATA_DIR / "bidders" / bidder_id).iterdir()
-                if f.suffix.lower() in {".pdf", ".png", ".jpg"}
-            )
-            with st.spinner(f"Processing {_BIDDER_LABELS.get(bidder_id, bidder_id)}…"):
-                bidder_processor.process_bidder(bidder_id, files)
-            verdicts_list = []
+        vd: dict = {}
+        for bid in selected:
+            files = sorted(f for f in (DATA_DIR / "bidders" / bid).iterdir()
+                           if f.suffix.lower() in {".pdf", ".png", ".jpg"})
+            with st.spinner(f"Indexing {_BIDDER_META.get(bid,(bid,'',''))[0]}…"):
+                bidder_processor.process_bidder(bid, files)
+            vlist = []
             for c in criteria:
-                v = evaluator.evaluate(bidder_id, c)
-                verdicts_list.append(v.model_dump())
+                v = evaluator.evaluate(bid, c)
+                vlist.append(v.model_dump())
                 done += 1
-                progress.progress(done / total,
-                                  text=f"Evaluated {c.id} · {_BIDDER_LABELS.get(bidder_id, bidder_id)}")
-            verdicts_dict[bidder_id] = verdicts_list
-        st.session_state["verdicts"] = verdicts_dict
-        progress.empty()
-        st.success("Evaluation complete. Results saved.")
+                prog.progress(done / total, text=f"{c.id} · {_BIDDER_META.get(bid,(bid,'',''))[0]}")
+            vd[bid] = vlist
+        st.session_state["verdicts"] = vd
+        prog.empty()
+        st.success("Evaluation complete.")
         st.rerun()
 
-    verdicts_data = st.session_state.get("verdicts", {})
+    vdata = st.session_state.get("verdicts", {})
     criteria = _get_criteria()
     crit_map = {c.id: c for c in criteria}
 
-    if not verdicts_data:
-        st.info("No results yet. Click **Run Evaluation** above, or load the demo from the Overview tab.")
+    if not vdata:
+        st.info("No results yet — click **Run Evaluation** or load the demo from the Overview tab.")
         return
 
     if st.session_state.get("fallback_active"):
         st.warning("⚠ Live API unavailable — showing pre-computed results.")
 
-    for bidder_id in (selected or list(verdicts_data.keys())):
-        if bidder_id not in verdicts_data:
+    for bid in (selected or list(vdata.keys())):
+        if bid not in vdata:
             continue
-        verdicts = verdicts_data[bidder_id]
-        overall = _overall_verdict(verdicts, crit_map)
-        op = verdict_pill(overall)
-        friendly = _BIDDER_LABELS.get(bidder_id, bidder_id)
-        sublabel = _BIDDER_SUBLABELS.get(bidder_id, "")
-        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_mand = sum(1 for v in verdicts
-                         if crit_map.get(v["criterion_id"]) and
-                         crit_map[v["criterion_id"]].mandatory)
-
+        verdicts = vdata[bid]
+        name, tagline, accent = _BIDDER_META.get(bid, (bid, "", "#2563EB"))
+        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)
+        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)
         with st.container(border=True):
-            # Bidder header
+            # 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,
+                )
+
+            # Column header row
             st.markdown(
-                f"""<div style="display:flex;justify-content:space-between;
-                            align-items:center;flex-wrap:wrap;gap:8px;
-                            padding:4px 0 12px;">
-                <div>
-                    <div style="font-size:1.05rem;font-weight:700;color:#0D1B2A;">{friendly}</div>
-                    <div style="font-size:0.8rem;color:#64748B;margin-top:2px;">{sublabel}</div>
-                </div>
-                <div style="display:flex;align-items:center;gap:12px;">
-                    {op}
-                    <span style="font-size:0.78rem;color:#94A3B8;background:#F1F5F9;
-                                 padding:3px 10px;border-radius:20px;">
-                        {passed}/{total_mand} mandatory passed
-                    </span>
-                </div>
-                </div>""",
+                '<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;">'
+                + "".join(
+                    f'<div style="font-size:0.68rem;font-weight:700;color:#94A3B8;'
+                    f'text-transform:uppercase;letter-spacing:0.07em;">{h}</div>'
+                    for h in ["Criterion", "Verdict", "Extracted Value", "Source & Tier", "Category"]
+                )
+                + "</div>",
                 unsafe_allow_html=True,
             )
 
-            # Column headers
-            hcols = st.columns([3, 2, 2, 3, 2])
-            for col, lbl in zip(hcols, ["Criterion", "Verdict", "Extracted Value",
-                                         "Source & OCR Tier", "Category"]):
-                col.markdown(
-                    f'<div style="font-size:0.72rem;font-weight:700;color:#94A3B8;'
-                    f'text-transform:uppercase;letter-spacing:0.06em;padding-bottom:4px;">'
-                    f'{lbl}</div>',
-                    unsafe_allow_html=True,
-                )
-            st.markdown('<hr style="margin:0 0 8px;border-color:#F1F5F9;">', unsafe_allow_html=True)
-
             for v in verdicts:
                 crit = crit_map.get(v["criterion_id"])
-                crit_title = crit.title if crit else v["criterion_id"]
+                title = crit.title if crit else v["criterion_id"]
                 mb = mandatory_badge(crit.mandatory if crit else True)
                 cat = category_badge(crit.category if crit else "compliance")
-
-                cols = st.columns([3, 2, 2, 3, 2])
-                cols[0].markdown(
-                    f'{mb} <span style="font-weight:600;font-size:0.88rem;">'
-                    f'{v["criterion_id"]}</span>'
-                    f'<div style="font-size:0.8rem;color:#374151;margin-top:2px;">{crit_title}</div>',
-                    unsafe_allow_html=True,
-                )
-                cols[1].markdown(verdict_pill(v["verdict"]), unsafe_allow_html=True)
                 extracted = v.get("extracted_value") or ""
-                extracted_html = (
-                    f'<span style="font-size:0.85rem;color:#374151;">{extracted}</span>'
-                    if extracted else
-                    '<span style="color:#9CA3AF;">—</span>'
-                )
-                cols[2].markdown(extracted_html, unsafe_allow_html=True)
-                if v.get("source"):
-                    src = v["source"]
-                    tier = ocr_tier_badge(src["source_type"])
-                    cols[3].markdown(
-                        f'<span style="font-size:0.82rem;font-family:monospace;'
-                        f'background:#F8FAFC;padding:2px 6px;border-radius:4px;'
-                        f'border:1px solid #E2E8F0;">{src["doc_name"]}</span>'
-                        f' p{src["page"]}<br>{tier}',
-                        unsafe_allow_html=True,
+                src = v.get("source") or {}
+
+                src_html = "—"
+                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'<br><div style="margin-top:4px;">{tier}</div>'
                     )
-                else:
-                    cols[3].markdown('<span style="color:#9CA3AF;">—</span>', unsafe_allow_html=True)
-                cols[4].markdown(cat, unsafe_allow_html=True)
 
+                extracted_cell = extracted if extracted else '<span style="color:#CBD5E1;">—</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 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="font-size:0.82rem;">{src_html}</div>'
+                    f'<div style="padding-top:2px;">{cat}</div>'
+                    f'</div>',
+                    unsafe_allow_html=True,
+                )
                 confidence_bar(v.get("combined_confidence", 0.0))
 
-                if v.get("reason") or (v.get("source") and v["source"].get("snippet")):
-                    with st.expander("View details", expanded=False):
-                        if 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:#F8FAFC;border-left:3px solid #3B82F6;'
-                                f'padding:10px 14px;border-radius:0 6px 6px 0;'
-                                f'font-size:0.88rem;color:#374151;">'
-                                f'<strong>Reason:</strong> {v["reason"]}</div>',
+                                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>',
                                 unsafe_allow_html=True,
                             )
-                        if v.get("source") and v["source"].get("snippet"):
+                        if snippet:
                             st.markdown(
                                 f'<div style="background:#FFFBEB;border-left:3px solid #F59E0B;'
-                                f'padding:10px 14px;border-radius:0 6px 6px 0;margin-top:8px;'
-                                f'font-size:0.85rem;color:#374151;font-style:italic;">'
-                                f'"{v["source"]["snippet"]}"</div>',
+                                f'padding:10px 14px;border-radius:0 8px 8px 0;margin-top:8px;'
+                                f'font-size:0.84rem;color:#374151;font-style:italic;">'
+                                f'&ldquo;{snippet}&rdquo;</div>',
                                 unsafe_allow_html=True,
                             )
-                st.markdown('<hr style="margin:6px 0;border-color:#F1F5F9;">', unsafe_allow_html=True)
+
+                st.markdown(
+                    '<hr style="margin:2px 0;border:none;border-top:1px solid #F1F5F9;">',
+                    unsafe_allow_html=True,
+                )

ui/tab_interpretability.py

@@ -1,311 +1,270 @@
-import json
-
 import streamlit as st
 
-from core.config import BIDDER_NAMES, DATA_DIR, MODEL_VERSION
+from core.config import BIDDER_NAMES, DATA_DIR
 from core.fallback import load_criteria
 from core.llm_client import LLM, LLMUnavailable
 from core.pdf_utils import render_page_to_image
 from core.schemas import Criterion
+from ui.components import confidence_bar, verdict_pill
 
-_VERDICT_PLAIN = {
-    "eligible":     ("✅", "PASSED",       "green"),
-    "not_eligible": ("❌", "FAILED",       "red"),
-    "needs_review": ("⚠️", "NEEDS REVIEW", "orange"),
+_VERDICT_STYLE = {
+    "eligible":     ("#F0FDF4", "#166534", "#22C55E", "✅ PASSED"),
+    "not_eligible": ("#FEF2F2", "#991B1B", "#EF4444", "❌ FAILED"),
+    "needs_review": ("#FFFBEB", "#92400E", "#F59E0B", "⚠️ NEEDS REVIEW"),
 }
 
-_CRITERION_RULE_PLAIN = {
-    "numeric_threshold": lambda r: (
-        f"must be ≥ {r['value']:,} {r.get('unit') or ''}" if r["operator"] == ">="
-        else f"must be ≤ {r['value']:,} {r.get('unit') or ''}"
-    ),
-    "count_threshold": lambda r: f"must have completed at least {int(r['value'])}",
+_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'])}",
     "certification_present": lambda _: "valid certificate must be present",
-    "document_present": lambda _: "supporting document must be present",
+    "document_present":    lambda _: "supporting document must be present",
 }
 
 
 def _get_criteria() -> list[Criterion]:
     data = st.session_state.get("criteria")
-    if data:
-        return [Criterion(**c) for c in data]
-    return load_criteria()
+    return [Criterion(**c) for c in data] if data else load_criteria()
 
 
-def _plain_explanation(v: dict, crit: Criterion | None) -> str:
+def _explain(v: dict, crit: Criterion | None) -> str:
     verdict = v.get("verdict", "")
-    extracted = v.get("extracted_value") or ""
-    reason = v.get("reason") or ""
-    src = v.get("source") or {}
-
+    extracted = v.get("extracted_value", "") or ""
+    reason = v.get("reason", "") or ""
     if not crit:
         return reason
-
-    icon, label, _ = _VERDICT_PLAIN.get(verdict, ("❓", verdict, "grey"))
     rule = crit.rule
-
+    rule_desc = _RULE_PLAIN.get(rule.type, lambda _: "")(rule.model_dump())
     if verdict == "eligible":
-        rule_desc = _CRITERION_RULE_PLAIN.get(rule.type, lambda _: "")(rule.model_dump())
-        val_part = f" Found: **{extracted}**." if extracted else ""
-        return f"{icon} **{crit.title}** — {label}.{val_part} {reason}"
-
+        val = f" Found **{extracted}**." if extracted else ""
+        return f"{val} {reason}".strip()
     elif verdict == "not_eligible":
-        rule_desc = _CRITERION_RULE_PLAIN.get(rule.type, lambda _: "")(rule.model_dump())
-        val_part = f" Found: **{extracted}** — this does not meet the requirement ({rule_desc})." if extracted else f" Required: {rule_desc}."
-        return f"{icon} **{crit.title}** — {label}.{val_part} {reason}"
-
-    else:  # needs_review
-        val_part = f" Extracted value: **{extracted}**." if extracted else ""
-        return f"{icon} **{crit.title}** — {label}.{val_part} {reason}"
-
-
-def _source_citation(v: dict) -> str | None:
-    src = v.get("source")
-    if not src:
-        return None
-    doc = src.get("doc_name", "")
-    page = src.get("page", "")
-    tier = src.get("source_type", "")
-    tier_labels = {"text_pdf": "typed PDF", "tesseract": "Tesseract OCR",
-                   "vision_llm": "Vision LLM OCR"}
-    return f"📄 **{doc}**, page {page}  ·  read by _{tier_labels.get(tier, tier)}_"
+        val = f" Found **{extracted}** (requirement: {rule_desc})." if extracted else f" Requirement: {rule_desc}."
+        return f"{val} {reason}".strip()
+    else:
+        val = f" Extracted value: **{extracted}**." if extracted else ""
+        return f"{val} {reason}".strip()
 
 
-def _build_qa_context(bidder_id: str, verdicts: list[dict],
-                       criteria: list[Criterion]) -> str:
-    crit_map = {c.id: c for c in criteria}
-    lines = [
-        f"BIDDER: {BIDDER_NAMES.get(bidder_id, bidder_id)} ({bidder_id})",
-        "",
-        "EVALUATION RESULTS:",
-    ]
+def _qa_context(bid: str, verdicts: list[dict], criteria: list[Criterion]) -> str:
+    cm = {c.id: c for c in criteria}
+    lines = [f"BIDDER: {BIDDER_NAMES.get(bid, bid)}", ""]
     for v in verdicts:
-        crit = crit_map.get(v["criterion_id"])
-        crit_title = crit.title if crit else v["criterion_id"]
-        mandatory = ("Mandatory" if crit and crit.mandatory else "Optional") if crit else "Unknown"
-        lines.append(
-            f"  {v['criterion_id']} — {crit_title} [{mandatory}]: "
-            f"{v['verdict'].upper()}"
-        )
-        if v.get("extracted_value"):
-            lines.append(f"    Extracted value: {v['extracted_value']}")
+        c = cm.get(v["criterion_id"])
+        rule = _RULE_PLAIN.get(c.rule.type, lambda _: "")(c.rule.model_dump()) if c else ""
+        lines += [
+            f"{v['criterion_id']} — {c.title if c else '?'} "
+            f"[{'Mandatory' if c and c.mandatory else 'Optional'}]: {v['verdict'].upper()}",
+            f"  Requirement: {rule}",
+            f"  Extracted: {v.get('extracted_value') or 'not found'}",
+            f"  Confidence: {v.get('combined_confidence', 0):.0%}",
+            f"  Reason: {v.get('reason', '')}",
+        ]
         if v.get("source"):
-            src = v["source"]
-            lines.append(
-                f"    Evidence source: {src.get('doc_name')} page {src.get('page')} "
-                f"(read by {src.get('source_type')})"
-            )
-        if v.get("source") and v["source"].get("snippet"):
-            lines.append(f"    Evidence snippet: \"{v['source']['snippet'][:200]}\"")
-        lines.append(
-            f"    Confidence: {v.get('combined_confidence', 0):.0%}  |  "
-            f"Reason: {v.get('reason', '')}"
-        )
-        if crit:
-            rule = crit.rule
-            rule_desc = _CRITERION_RULE_PLAIN.get(rule.type, lambda _: "")(rule.model_dump())
-            lines.append(f"    Requirement: {rule_desc}")
+            s = v["source"]
+            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("")
     return "\n".join(lines)
 
 
-def _answer_question(question: str, context: str) -> str:
-    system = """You are a procurement compliance assistant helping an evaluation officer
-understand AI-generated eligibility verdicts. Answer questions about the bidder's evaluation
-in plain, professional English. Always cite specific document names and page numbers from the
-evidence. Be concise (2-4 sentences). Do not invent information not present in the context."""
-
-    user = f"""{context}
-
-OFFICER'S QUESTION: {question}
-
-Answer the question based only on the evaluation results above.
-Cite the specific document and page number when referring to evidence."""
-
+def _answer(question: str, context: str) -> str:
+    system = (
+        "You are a procurement compliance assistant. Answer questions about an AI-generated "
+        "tender evaluation in plain professional English. Always cite specific document names "
+        "and page numbers. Be concise (2-4 sentences). Never invent information not in the context. "
+        'Return JSON: {"answer": "<your answer>"}'
+    )
     try:
-        llm = LLM()
-        result = llm.chat_json(
-            system + " Return JSON: {\"answer\": \"<your answer>\"}",
-            user,
-        )
+        result = LLM().chat_json(system, f"{context}\n\nQUESTION: {question}")
         return result.get("answer", "")
     except LLMUnavailable:
-        return _rule_based_answer(question, context)
+        return _rule_answer(question, context)
 
 
-def _rule_based_answer(question: str, context: str) -> str:
-    q = question.lower()
+def _rule_answer(q: str, context: str) -> str:
+    q = q.lower()
     lines = context.splitlines()
-
     if any(w in q for w in ["reject", "fail", "not eligible", "disqualif"]):
-        fails = [l for l in lines if "NOT_ELIGIBLE" in l or "NEEDS_REVIEW" in l]
-        if fails:
-            return ("Based on the evaluation: " +
-                    "; ".join(f.strip() for f in fails[:3]) +
-                    ". See the Bidder Evaluation tab for full details.")
-        return "No failing criteria were found in the evaluation."
-
-    if any(w in q for w in ["pass", "eligible", "meet", "satisfy"]):
-        passes = [l for l in lines if "ELIGIBLE" in l and "NOT_ELIGIBLE" not in l]
-        if passes:
-            return ("Criteria passed: " +
-                    "; ".join(f.strip() for f in passes[:3]) + ".")
-        return "No passing criteria were found."
-
-    if any(w in q for w in ["turnover", "financial", "revenue", "c1"]):
-        relevant = [l for l in lines if "C1" in l or "turnover" in l.lower() or
-                    "Extracted value" in l]
-        if relevant:
-            return " ".join(l.strip() for l in relevant[:4])
-
-    return ("I cannot answer that specific question without the live LLM. "
-            "The evaluation summary above contains the full details.")
+        fails = [l.strip() for l in lines if "NOT_ELIGIBLE" in l or "NEEDS_REVIEW" in l]
+        return ("Failing criteria: " + "; ".join(fails[:3]) + ".") if fails else "No failing criteria found."
+    if any(w in q for w in ["pass", "eligible", "meet"]):
+        passes = [l.strip() for l in lines if "ELIGIBLE" in l and "NOT_ELIGIBLE" not in l]
+        return ("Passing criteria: " + "; ".join(passes[:3]) + ".") if passes else "No passing criteria."
+    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.")
 
 
 def render() -> None:
-    st.header("Interpretability")
-    st.caption(
-        "Plain-English explanations of why each bidder was evaluated the way it was, "
-        "with full source citations. Ask any question about the evaluation."
+    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;">'
+        'Plain-English explanations with source citations. Ask any question about the evaluation.</p>',
+        unsafe_allow_html=True,
     )
 
-    verdicts_data = st.session_state.get("verdicts", {})
-    if not verdicts_data:
-        st.info("No evaluation results yet. Run the evaluation in Bidder Evaluation tab or "
-                "click **Load Pre-computed Demo** in the Overview tab.")
+    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.")
         return
 
     criteria = _get_criteria()
     crit_map = {c.id: c for c in criteria}
 
-    bidder_id = st.selectbox(
-        "Select bidder",
-        options=list(verdicts_data.keys()),
-        format_func=lambda x: BIDDER_NAMES.get(x, x),
-    )
-
-    verdicts = verdicts_data.get(bidder_id, [])
+    bid = st.selectbox("Select bidder", options=list(vdata.keys()),
+                       format_func=lambda x: BIDDER_NAMES.get(x, x))
+    verdicts = vdata.get(bid, [])
     if not verdicts:
-        st.warning("No verdicts available for this bidder.")
+        st.warning("No verdicts for this bidder.")
         return
 
-    # ── Overall summary ───────────────────────────────────────────────────────
-    mandatory_verdicts = [v for v in verdicts
-                          if crit_map.get(v["criterion_id"]) and
-                          crit_map[v["criterion_id"]].mandatory]
-    failed = [v for v in mandatory_verdicts if v["verdict"] == "not_eligible"]
-    review = [v for v in mandatory_verdicts if v["verdict"] == "needs_review"]
-    passed = [v for v in mandatory_verdicts if v["verdict"] == "eligible"]
+    company = BIDDER_NAMES.get(bid, bid)
 
-    friendly = BIDDER_NAMES.get(bidder_id, bidder_id)
+    # 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"]
 
     if failed:
-        st.error(
-            f"**{friendly} — NOT ELIGIBLE**\n\n"
-            f"Failed {len(failed)} mandatory criterion/criteria. "
-            f"A bidder must meet all mandatory criteria to qualify."
-        )
+        ov, bg, border, icon = "not_eligible", "#FEF2F2", "#FECACA", "❌"
+        summary = (f"Failed {len(failed)} mandatory criterion/criteria. "
+                   f"Must meet all mandatory criteria to qualify.")
     elif review:
-        st.warning(
-            f"**{friendly} — NEEDS REVIEW**\n\n"
-            f"Passed {len(passed)} mandatory criteria, but {len(review)} could not be "
-            f"automatically confirmed and require officer verification."
-        )
+        ov, bg, border, icon = "needs_review", "#FFFBEB", "#FDE68A", "⚠️"
+        summary = (f"Passed {len(passed)} mandatory criteria, but {len(review)} "
+                   f"could not be automatically confirmed and require officer sign-off.")
     else:
-        st.success(
-            f"**{friendly} — ELIGIBLE**\n\n"
-            f"All {len(passed)} mandatory criteria satisfied."
-        )
-
-    st.divider()
+        ov, bg, border, icon = "eligible", "#F0FDF4", "#BBF7D0", "✅"
+        summary = f"All {len(passed)} mandatory criteria satisfied."
+
+    bg2, fg2, _, label = _VERDICT_STYLE.get(ov, ("#F1F5F9", "#374151", "#CBD5E1", ov))
+    st.markdown(
+        f'<div style="background:{bg2};border:1px solid {border};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></div>',
+        unsafe_allow_html=True,
+    )
 
-    # ── Per-criterion plain-English cards ─────────────────────────────────────
-    st.subheader("Criterion-by-Criterion Breakdown")
+    # 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>',
+        unsafe_allow_html=True,
+    )
 
     for v in verdicts:
         crit = crit_map.get(v["criterion_id"])
-        _, label, color = _VERDICT_PLAIN.get(v["verdict"], ("❓", v["verdict"], "grey"))
-        mandatory_tag = "🔴 Mandatory" if (crit and crit.mandatory) else "🟡 Optional"
+        verdict = v.get("verdict", "needs_review")
+        cbg, cfg_, _, clabel = _VERDICT_STYLE.get(verdict, ("#F1F5F9", "#374151", "#CBD5E1", verdict))
+        mand_txt = "Mandatory" if (crit and crit.mandatory) else "Optional"
+        title = crit.title if crit else v["criterion_id"]
 
         with st.container(border=True):
-            col_status, col_detail = st.columns([1, 4])
-
-            with col_status:
-                if color == "green":
-                    st.success(label)
-                elif color == "red":
-                    st.error(label)
-                else:
-                    st.warning(label)
-                st.caption(mandatory_tag)
-                conf = v.get("combined_confidence", 0.0)
-                st.caption(f"Confidence: {conf:.0%}")
-
-            with col_detail:
-                explanation = _plain_explanation(v, crit)
-                st.markdown(explanation)
-
-                citation = _source_citation(v)
-                if citation:
-                    st.markdown(citation)
-
-                    # Page preview
-                    src = v.get("source", {})
-                    doc_name = src.get("doc_name", "")
-                    page_no = src.get("page", 1)
-                    bidder_dir = DATA_DIR / "bidders" / bidder_id
-                    doc_path = bidder_dir / doc_name
-
+            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'<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>',
+                    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>',
+                    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>',
+                        unsafe_allow_html=True,
+                    )
+                # Source citation
+                src = v.get("source") or {}
+                if src:
+                    doc = src.get("doc_name", "")
+                    page = 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'<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'</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 page ({doc_name}, p{page_no})",
-                                         expanded=False):
+                        with st.expander(f"View source: {doc}, page {page}", expanded=False):
                             try:
-                                img = render_page_to_image(doc_path, page_no)
-                                st.image(img, caption=f"{doc_name} — Page {page_no}",
+                                img = render_page_to_image(doc_path, int(page))
+                                st.image(img, caption=f"{doc} — Page {page}",
                                          use_column_width=True)
                             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_name})", expanded=False):
-                            st.image(str(doc_path), caption=doc_name,
-                                     use_column_width=True)
+                        with st.expander(f"View source image: {doc}", expanded=False):
+                            st.image(str(doc_path), use_column_width=True)
 
     st.divider()
 
-    # ── Q&A section ───────────────────────────────────────────────────────────
-    st.subheader("Ask About This Evaluation")
-    st.caption(
-        "Ask any question about why this bidder was evaluated the way it was. "
-        "Answers cite specific documents and pages."
+    # 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>',
+        unsafe_allow_html=True,
     )
 
-    suggestions = [
-        "Why was this bidder rejected?",
-        "Which criteria did this bidder fail?",
-        "What turnover figure was found and which document was it from?",
-        "Is this bidder ISO certified?",
-        "Why is the turnover verdict in review?",
-    ]
+    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 s in suggestions:
-            st.markdown(f"- _{s}_")
+        for e in examples:
+            st.markdown(f"- _{e}_")
 
-    question = st.text_input(
-        "Your question",
-        placeholder="e.g. Why was this bidder's turnover flagged for review?",
-        key=f"qa_input_{bidder_id}",
-    )
-
-    if st.button("Get Answer", type="primary", key=f"qa_btn_{bidder_id}"):
+    question = st.text_input("", placeholder="Ask anything about this bidder's evaluation…",
+                             key=f"qa_{bid}", label_visibility="collapsed")
+    if st.button("Get Answer", type="primary", key=f"qa_btn_{bid}"):
         if not question.strip():
             st.warning("Please enter a question.")
         else:
-            context = _build_qa_context(bidder_id, verdicts, criteria)
+            context = _qa_context(bid, verdicts, criteria)
             with st.spinner("Looking up the answer…"):
-                answer = _answer_question(question, context)
-
-            st.markdown("**Answer:**")
-            st.info(answer)
-
-            with st.expander("Full evaluation context used to answer", expanded=False):
+                answer = _answer(question, context)
+            st.markdown(
+                f'<div style="background:#EFF6FF;border:1px solid #BFDBFE;border-radius:10px;'
+                f'padding:16px 18px;margin-top:8px;">'
+                f'<div style="font-size:0.72rem;font-weight:700;color:#1E40AF;'
+                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>',
+                unsafe_allow_html=True,
+            )
+            with st.expander("Full context used", expanded=False):
                 st.code(context, language="text")

ui/tab_overview.py

@@ -3,95 +3,96 @@ 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 banner
+    # Hero
     st.markdown(
-        """<div class="tiq-hero">
-        <h1>⚖️ TenderIQ</h1>
-        <p>Explainable AI for Government Tender Evaluation &nbsp;·&nbsp;
-           CRPF Hackathon Theme 3</p>
-        <p style="font-size:0.88rem;margin-top:8px;color:#94A3B8;">
-        Automated eligibility evaluation with criterion-level explainability,
-        three-tier OCR for scanned documents, and a complete audit trail.</p>
+        """<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;">
+          <div style="font-size:0.75rem;font-weight:700;color:#93C5FD;
+                      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
+            assessment with criterion-level evidence, three-tier OCR, and a complete
+            compliance audit trail.</p>
         </div>""",
         unsafe_allow_html=True,
     )
 
-    # KPI strip
+    # KPIs
     criteria_count = len(st.session_state.get("criteria", load_criteria()))
-    verdicts = st.session_state.get("verdicts", {})
-    bidders_evaluated = len(verdicts)
-    mandatory_checked = sum(
-        1 for bv in verdicts.values() for v in bv
-        if v.get("verdict") in ("eligible", "not_eligible", "needs_review")
-    )
-    audit_entries = len(audit.query())
+    verdicts       = st.session_state.get("verdicts", {})
+    checked        = sum(1 for bv in verdicts.values() for _ in bv)
+    audit_count    = len(audit.query())
 
     c1, c2, c3, c4 = st.columns(4)
-    for col, val, lbl in [
-        (c1, criteria_count,    "Criteria Extracted"),
-        (c2, bidders_evaluated, "Bidders Evaluated"),
-        (c3, mandatory_checked, "Criteria Checked"),
-        (c4, audit_entries,     "Audit Entries"),
-    ]:
-        col.markdown(
-            f'<div class="tiq-kpi">'
-            f'<div class="tiq-kpi-val">{val}</div>'
-            f'<div class="tiq-kpi-lbl">{lbl}</div>'
-            f'</div>',
-            unsafe_allow_html=True,
-        )
+    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")
 
     st.divider()
 
-    # Architecture
-    st.markdown('<div class="tiq-section-header"><div style="font-size:1.1rem;font-weight:700;color:#0D1B2A;">Pipeline Architecture</div></div>', unsafe_allow_html=True)
-
-    col_a, col_b = st.columns(2)
-    with col_a:
-        st.markdown("""
-<div style="background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:20px;">
-<div style="font-weight:700;color:#1E3A5F;margin-bottom:12px;">📥 Ingestion</div>
-
-<div style="display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;">
-<div style="background:#DBEAFE;color:#1E40AF;border-radius:6px;padding:3px 8px;font-size:0.75rem;font-weight:700;flex-shrink:0;">1</div>
-<div><strong>Extract Criteria</strong><br><span style="font-size:0.82rem;color:#64748B;">DeepSeek LLM reads the full tender PDF and returns structured JSON — category, mandatory flag, rule, source clause, query hints.</span></div>
-</div>
-
-<div style="display:flex;align-items:flex-start;gap:10px;">
-<div style="background:#DBEAFE;color:#1E40AF;border-radius:6px;padding:3px 8px;font-size:0.75rem;font-weight:700;flex-shrink:0;">2</div>
-<div><strong>Three-Tier OCR</strong><br><span style="font-size:0.82rem;color:#64748B;">
-📄 PyMuPDF → 🔍 Tesseract → 👁 Vision LLM.<br>
-Each page records its tier and confidence score.
-Chunks indexed into ChromaDB with full provenance.</span></div>
-</div>
-</div>
-""", unsafe_allow_html=True)
-
-    with col_b:
-        st.markdown("""
-<div style="background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:20px;">
-<div style="font-weight:700;color:#1E3A5F;margin-bottom:12px;">⚖️ Evaluation & Oversight</div>
-
-<div style="display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;">
-<div style="background:#DCFCE7;color:#166534;border-radius:6px;padding:3px 8px;font-size:0.75rem;font-weight:700;flex-shrink:0;">3</div>
-<div><strong>Evaluate per Criterion</strong><br><span style="font-size:0.82rem;color:#64748B;">Semantic search retrieves top-k evidence chunks. DeepSeek returns verdict + confidence. Safety rule: borderline "not eligible" is downgraded to "needs review" — never silent disqualification.</span></div>
-</div>
+    # 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>',
+        unsafe_allow_html=True,
+    )
 
-<div style="display:flex;align-items:flex-start;gap:10px;">
-<div style="background:#FEF3C7;color:#92400E;border-radius:6px;padding:3px 8px;font-size:0.75rem;font-weight:700;flex-shrink:0;">4</div>
-<div><strong>Human Review & Audit</strong><br><span style="font-size:0.82rem;color:#64748B;">Flagged verdicts surface with full evidence. Every action — extraction, OCR, evaluation, review — is logged to SQLite with timestamp, model version, and payload.</span></div>
-</div>
-</div>
-""", unsafe_allow_html=True)
+    stages = [
+        ("#2563EB", "#EFF6FF", "#BFDBFE", "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",
+         "📄 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."),
+    ]
+
+    cols = st.columns(4)
+    for col, (accent, bg, border, 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%;">
+                  <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>
+                  </div>
+                  <p style="margin:0;font-size:0.82rem;color:#374151;line-height:1.6;">{body}</p>
+                </div>""",
+                unsafe_allow_html=True,
+            )
 
     st.divider()
 
     # Quick start
-    st.markdown('<div class="tiq-section-header"><div style="font-size:1.1rem;font-weight:700;color:#0D1B2A;">Quick Start</div></div>', unsafe_allow_html=True)
-
+    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):
@@ -101,16 +102,14 @@ Chunks indexed into ChromaDB with full provenance.</span></div>
                 from core.fallback import load_criteria as lc, load_evaluation
                 criteria = lc()
                 st.session_state["criteria"] = [c.model_dump() for c in criteria]
-                verdicts_dict: dict = {}
-                for bidder_id in BIDDER_NAMES:
-                    verdicts_dict[bidder_id] = [
-                        load_evaluation(bidder_id, c.id).model_dump() for c in criteria
-                    ]
-                st.session_state["verdicts"] = verdicts_dict
-                st.success("Loaded. Navigate to Bidder Evaluation or Interpretability.")
+                vd: dict = {}
+                for bid in BIDDER_NAMES:
+                    vd[bid] = [load_evaluation(bid, c.id).model_dump() for c in criteria]
+                st.session_state["verdicts"] = vd
+                st.success("Loaded — navigate to Bidder Evaluation or Interpretability.")
                 st.rerun()
     with col2:
         with st.container(border=True):
             st.markdown("**⚡ Live Pipeline**")
-            st.caption("Upload a tender PDF, run extraction and evaluation against the DeepSeek API.")
-            st.info("Set `DEEPSEEK_API_KEY` in `.env`, then use the Tender Analysis tab.")
+            st.caption("Set DEEPSEEK_API_KEY in .env, then use the Tender Analysis tab.")
+            st.info("Sidebar shows 🟢 when the API is reachable.")

ui/tab_review.py

@@ -7,132 +7,138 @@ from core.schemas import Criterion
 from ui.components import confidence_bar, verdict_pill
 
 
-def _get_criteria_map() -> dict[str, Criterion]:
+def _crit_map() -> dict[str, Criterion]:
     data = st.session_state.get("criteria")
-    if data:
-        return {c["id"]: Criterion(**c) for c in data}
-    return {c.id: c for c in load_criteria()}
+    return {c["id"]: Criterion(**c) for c in data} if data else {c.id: c for c in load_criteria()}
 
 
 def render() -> None:
-    st.header("Human Review Queue")
+    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;">'
+        'Verdicts that could not be automatically confirmed require officer sign-off.</p>',
+        unsafe_allow_html=True,
+    )
 
-    verdicts_data: dict = st.session_state.get("verdicts", {})
-    if not verdicts_data:
+    vdata: dict = st.session_state.get("verdicts", {})
+    if not vdata:
         st.info("No evaluation results yet. Run the evaluation in the Bidder Evaluation tab first.")
         return
 
-    crit_map = _get_criteria_map()
-    pending_items = []
-    for bidder_id, verdicts in verdicts_data.items():
-        for i, v in enumerate(verdicts):
-            if v.get("verdict") == "needs_review" and v.get("review_status", "pending") == "pending":
-                pending_items.append((bidder_id, i, v))
+    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"]
 
-    if not pending_items:
-        st.success("No items pending review. All flagged verdicts have been actioned.")
+    if not pending:
+        st.success("✅ All flagged verdicts have been actioned. Nothing pending.")
         return
 
-    st.markdown(f"**{len(pending_items)} item(s) pending review**")
-    st.caption(
-        "These verdicts require human confirmation before being finalised. "
-        "The certainty bar shows how confident the model is in its decision to flag the item — "
-        "not how likely the bidder meets the criterion."
+    # 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'<span style="font-size:1.3rem;">⚠️</span>'
+        f'<div>'
+        f'<div style="font-weight:700;color:#92400E;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></div>',
+        unsafe_allow_html=True,
     )
-    st.divider()
 
-    for bidder_id, idx, v in pending_items:
-        crit = crit_map.get(v["criterion_id"])
+    for bid, idx, v in pending:
+        crit = cm.get(v["criterion_id"])
         crit_title = crit.title if crit else v["criterion_id"]
+        company = BIDDER_NAMES.get(bid, bid)
 
         with st.container(border=True):
-            col1, col2 = st.columns([3, 1])
-            friendly = BIDDER_NAMES.get(bidder_id, bidder_id)
-            with col1:
-                st.markdown(
-                    f'<div style="font-weight:700;font-size:1rem;color:#0D1B2A;">'
-                    f'{friendly}</div>'
-                    f'<div style="font-size:0.85rem;color:#64748B;margin-top:2px;">'
-                    f'{v["criterion_id"]}: {crit_title}</div>',
-                    unsafe_allow_html=True,
-                )
-                st.markdown(verdict_pill(v["verdict"]), unsafe_allow_html=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>'
+                f'{verdict_pill(v["verdict"])}'
+                f'</div>',
+                unsafe_allow_html=True,
+            )
+
+            col_l, col_r = st.columns([3, 1])
+            with col_l:
                 if v.get("extracted_value"):
                     st.markdown(
-                        f'<div style="margin-top:6px;font-size:0.85rem;">'
+                        f'<div style="font-size:0.84rem;margin-bottom:8px;">'
                         f'<strong>Extracted value:</strong> '
-                        f'<code>{v["extracted_value"]}</code></div>',
+                        f'<code style="background:#F1F5F9;padding:2px 7px;border-radius:4px;'
+                        f'font-size:0.82rem;">{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:8px 12px;border-radius:0 6px 6px 0;margin-top:8px;'
-                        f'font-size:0.85rem;color:#374151;">'
+                        f'padding:9px 13px;border-radius:0 7px 7px 0;font-size:0.84rem;'
+                        f'color:#374151;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:8px 12px;border-radius:6px;margin-top:6px;'
-                        f'font-size:0.82rem;color:#374151;font-style:italic;">'
-                        f'"{v["source"]["snippet"]}"</div>',
+                        f'padding:9px 13px;border-radius:7px;font-size:0.82rem;'
+                        f'color:#374151;font-style:italic;">'
+                        f'&ldquo;{v["source"]["snippet"]}&rdquo;</div>',
                         unsafe_allow_html=True,
                     )
-            with col2:
-                conf = v.get("combined_confidence", 0.0)
-                confidence_bar(conf, "Certainty in assessment")
+            with col_r:
+                confidence_bar(v.get("combined_confidence", 0.0), "Certainty")
 
-            btn_col1, btn_col2, btn_col3 = st.columns(3)
-            key_prefix = f"review_{bidder_id}_{v['criterion_id']}"
+            # 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)
 
-            with btn_col1:
-                if st.button("✅ Approve", key=f"{key_prefix}_approve", use_container_width=True):
-                    st.session_state["verdicts"][bidder_id][idx]["review_status"] = "approved"
-                    audit.log(
-                        "human_review_action",
-                        actor="officer",
-                        bidder_id=bidder_id,
-                        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),
-                    )
+            with bc1:
+                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))
                     st.rerun()
-
-            with btn_col2:
-                edit_val = st.text_input("Edited value", key=f"{key_prefix}_edit_val",
-                                          placeholder="Enter corrected value…")
-                if st.button("✏ Edit & Approve", key=f"{key_prefix}_edit", use_container_width=True):
-                    st.session_state["verdicts"][bidder_id][idx]["review_status"] = "edited"
-                    if edit_val:
-                        st.session_state["verdicts"][bidder_id][idx]["extracted_value"] = edit_val
-                    audit.log(
-                        "human_review_action",
-                        actor="officer",
-                        bidder_id=bidder_id,
-                        criterion_id=v["criterion_id"],
-                        action_taken="edited",
-                        original_verdict=v["verdict"],
-                        original_extracted_value=v.get("extracted_value", ""),
-                        edited_value=edit_val,
-                        combined_confidence=v.get("combined_confidence", 0.0),
-                    )
+            with bc2:
+                edited = st.text_input("Corrected value", key=f"{kp}_edit_val",
+                                       placeholder="Optional override…",
+                                       label_visibility="collapsed")
+                if st.button("✏️ Edit & Approve", key=f"{kp}_edit", use_container_width=True):
+                    st.session_state["verdicts"][bid][idx]["review_status"] = "edited"
+                    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))
                     st.rerun()
-
-            with btn_col3:
-                if st.button("❌ Reject", key=f"{key_prefix}_reject", use_container_width=True):
-                    st.session_state["verdicts"][bidder_id][idx]["review_status"] = "rejected"
-                    audit.log(
-                        "human_review_action",
-                        actor="officer",
-                        bidder_id=bidder_id,
-                        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),
-                    )
+            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))
                     st.rerun()