Upload app.py

app.py

@@ -1,5 +1,5 @@
 """
-Valuation Sheet OCR — Production Streamlit App
+ValuationAI OCR — Streamlit App
 Model: rasmodev/Handwriting_trocr_model
 """
 import io, time, logging
@@ -8,387 +8,282 @@ import pandas as pd
 from PIL import Image
 
 st.set_page_config(
-    page_title="ValuationAI — OCR",
+    page_title="ValuationAI",
     page_icon="📋",
     layout="wide",
     initial_sidebar_state="collapsed",
 )
 logging.basicConfig(level=logging.INFO)
 
-# ── Design System ─────────────────────────────────────────────────────────────
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Outfit:wght@300;400;500;600&display=swap');
 
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html, body, [class*="css"], .stApp {
+html, body, [class*="css"] {
     font-family: 'Outfit', sans-serif;
-    background: #0A0F1E;
-    color: #E8EAF0;
+    background-color: #080D1A;
+    color: #E2E8F0;
 }
 
-/* ── Hide default Streamlit chrome ── */
-#MainMenu, footer, header { visibility: hidden; }
-.block-container { padding: 0 !important; max-width: 100% !important; }
+.stApp {
+    background: #080D1A;
+}
 
-/* ── Page shell ── */
-.page-shell {
-    min-height: 100vh;
-    background:
-        radial-gradient(ellipse 80% 50% at 10% 0%, rgba(99,102,241,0.18) 0%, transparent 60%),
-        radial-gradient(ellipse 60% 40% at 90% 100%, rgba(16,185,129,0.12) 0%, transparent 55%),
-        #0A0F1E;
-    padding: 2.5rem 3rem 4rem;
+/* Remove default padding */
+.block-container {
+    padding-top: 2rem !important;
+    padding-bottom: 3rem !important;
+    max-width: 1200px !important;
 }
 
-/* ── Nav bar ── */
-.nav {
+/* Hide Streamlit chrome */
+#MainMenu, footer { visibility: hidden; }
+
+/* ── Brand bar ── */
+.brand {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 3.5rem;
     padding-bottom: 1.5rem;
     border-bottom: 1px solid rgba(255,255,255,0.06);
+    margin-bottom: 2.5rem;
 }
-.nav-brand {
-    display: flex; align-items: center; gap: 0.75rem;
-}
-.nav-dot {
+.brand-left { display: flex; align-items: center; gap: 10px; }
+.brand-dot {
     width: 10px; height: 10px; border-radius: 50%;
     background: #6366F1;
-    box-shadow: 0 0 12px rgba(99,102,241,0.8);
-    animation: pulse 2s infinite;
+    box-shadow: 0 0 14px rgba(99,102,241,0.9);
+    animation: glow 2s ease-in-out infinite;
 }
-@keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50%       { opacity: 0.6; transform: scale(0.85); }
+@keyframes glow {
+    0%,100% { opacity:1; transform:scale(1); }
+    50% { opacity:0.5; transform:scale(0.8); }
 }
-.nav-title {
+.brand-name {
     font-family: 'Playfair Display', serif;
-    font-size: 1.35rem;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    color: #fff;
-}
-.nav-subtitle {
-    font-size: 0.72rem;
-    font-weight: 500;
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    color: #6B7280;
-}
-.nav-badge {
-    font-size: 0.72rem;
-    background: rgba(99,102,241,0.15);
-    border: 1px solid rgba(99,102,241,0.3);
-    color: #A5B4FC;
-    padding: 0.3rem 0.8rem;
-    border-radius: 20px;
-    font-weight: 500;
-    letter-spacing: 0.04em;
+    font-size: 1.3rem; font-weight: 700; color: #fff;
+}
+.brand-tag {
+    font-size: 0.68rem; color: #4B5563; letter-spacing: 0.1em;
+    text-transform: uppercase; font-weight: 500;
+}
+.model-pill {
+    font-size: 0.7rem; font-weight: 500;
+    background: rgba(99,102,241,0.12);
+    border: 1px solid rgba(99,102,241,0.28);
+    color: #A5B4FC; padding: 0.3rem 0.9rem;
+    border-radius: 20px; letter-spacing: 0.04em;
 }
 
 /* ── Hero ── */
-.hero-section {
-    margin-bottom: 3rem;
-}
 .hero-eyebrow {
-    font-size: 0.72rem;
-    font-weight: 600;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: #6366F1;
-    margin-bottom: 0.9rem;
-}
-.hero-headline {
+    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
+    text-transform: uppercase; color: #6366F1; margin-bottom: 0.7rem;
+}
+.hero-h1 {
     font-family: 'Playfair Display', serif;
-    font-size: clamp(2.4rem, 4vw, 3.6rem);
-    font-weight: 700;
-    line-height: 1.1;
-    letter-spacing: -0.03em;
-    color: #fff;
-    margin-bottom: 1rem;
-}
-.hero-headline span {
-    background: linear-gradient(135deg, #6366F1 0%, #10B981 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-size: 2.8rem; font-weight: 700; line-height: 1.12;
+    letter-spacing: -0.025em; color: #fff; margin-bottom: 0.8rem;
 }
-.hero-desc {
-    font-size: 1.05rem;
-    font-weight: 300;
-    color: #9CA3AF;
-    line-height: 1.7;
-    max-width: 520px;
+.hero-h1 span {
+    background: linear-gradient(130deg, #6366F1, #10B981);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
-
-/* ── Two-col layout ── */
-.two-col {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-    margin-bottom: 1.5rem;
+.hero-sub {
+    font-size: 1rem; font-weight: 300; color: #6B7280;
+    line-height: 1.7; max-width: 460px; margin-bottom: 2.5rem;
 }
 
 /* ── Cards ── */
-.glass-card {
-    background: rgba(255,255,255,0.03);
-    border: 1px solid rgba(255,255,255,0.07);
-    border-radius: 20px;
-    padding: 2rem;
-    backdrop-filter: blur(12px);
+.card {
+    background: rgba(255,255,255,0.025);
+    border: 1px solid rgba(255,255,255,0.065);
+    border-radius: 18px; padding: 1.8rem;
     transition: border-color 0.2s;
 }
-.glass-card:hover { border-color: rgba(99,102,241,0.3); }
-
+.card:hover { border-color: rgba(99,102,241,0.28); }
 .card-label {
-    font-size: 0.68rem;
-    font-weight: 600;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: #6B7280;
-    margin-bottom: 1.2rem;
-    display: flex; align-items: center; gap: 0.5rem;
+    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em;
+    text-transform: uppercase; color: #4B5563; margin-bottom: 1.2rem;
+    display: flex; align-items: center; gap: 8px;
 }
 .card-label::before {
-    content: '';
-    display: inline-block;
-    width: 18px; height: 2px;
-    background: #6366F1;
-    border-radius: 2px;
-}
-
-/* ── Upload zone ── */
-.upload-zone {
-    border: 2px dashed rgba(99,102,241,0.35);
-    border-radius: 16px;
-    padding: 3rem 2rem;
-    text-align: center;
-    background: rgba(99,102,241,0.04);
-    transition: all 0.25s;
-    cursor: pointer;
-    margin-bottom: 1rem;
-}
-.upload-zone:hover {
-    border-color: rgba(99,102,241,0.7);
-    background: rgba(99,102,241,0.08);
-}
-.upload-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
-.upload-main {
-    font-size: 1rem; font-weight: 500; color: #E8EAF0; margin-bottom: 0.4rem;
-}
-.upload-sub { font-size: 0.8rem; color: #6B7280; }
-.file-chip {
-    display: inline-flex; align-items: center; gap: 0.4rem;
+    content:''; display:inline-block; width:16px; height:2px;
+    background:#6366F1; border-radius:2px;
+}
+
+/* ── File chips ── */
+.chip {
+    display: inline-flex; align-items: center; gap: 5px;
     background: rgba(16,185,129,0.1);
-    border: 1px solid rgba(16,185,129,0.25);
-    color: #6EE7B7;
-    padding: 0.3rem 0.75rem;
-    border-radius: 20px;
-    font-size: 0.75rem;
-    font-weight: 500;
-    margin: 0.2rem;
-}
-
-/* ── Engine pills ── */
-.engine-row { display: flex; gap: 0.6rem; margin-top: 0.5rem; flex-wrap: wrap; }
-.engine-pill {
-    font-size: 0.75rem; font-weight: 500;
-    padding: 0.35rem 0.9rem; border-radius: 20px;
-    border: 1px solid rgba(255,255,255,0.1);
-    color: #9CA3AF; background: transparent; cursor: pointer;
-    transition: all 0.2s;
-}
-.engine-pill.active {
-    background: rgba(99,102,241,0.2);
-    border-color: rgba(99,102,241,0.5);
-    color: #A5B4FC;
-}
-
-/* ── Run button ── */
-.stButton > button {
-    width: 100% !important;
-    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 14px !important;
-    padding: 1rem 2rem !important;
-    font-family: 'Outfit', sans-serif !important;
-    font-size: 0.95rem !important;
-    font-weight: 600 !important;
-    letter-spacing: 0.02em !important;
-    cursor: pointer !important;
-    transition: all 0.2s !important;
-    box-shadow: 0 4px 24px rgba(99,102,241,0.35) !important;
-    margin-top: 1rem !important;
+    border: 1px solid rgba(16,185,129,0.22);
+    color: #6EE7B7; padding: 0.25rem 0.7rem;
+    border-radius: 20px; font-size: 0.72rem; font-weight: 500; margin: 2px;
 }
-.stButton > button:hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 8px 32px rgba(99,102,241,0.5) !important;
+
+/* ── Stats ── */
+.stat-grid {
+    display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem;
+    margin: 1.8rem 0;
 }
-.stButton > button:disabled {
-    background: rgba(255,255,255,0.05) !important;
-    color: #4B5563 !important;
-    box-shadow: none !important;
-    transform: none !important;
-    cursor: not-allowed !important;
+.stat {
+    background: rgba(255,255,255,0.025);
+    border: 1px solid rgba(255,255,255,0.06);
+    border-radius: 14px; padding: 1.2rem 1.4rem;
+    position: relative; overflow: hidden;
 }
-
-/* ── Progress ── */
-.stProgress > div > div > div {
-    background: linear-gradient(90deg, #6366F1, #10B981) !important;
-    border-radius: 4px !important;
+.stat::after {
+    content:''; position:absolute; top:0; left:0; right:0; height:2px;
+    background: linear-gradient(90deg,#6366F1,#10B981);
 }
-.stProgress > div > div {
-    background: rgba(255,255,255,0.06) !important;
-    border-radius: 4px !important;
-    height: 6px !important;
-}
-
-/* ── Stat cards ── */
-.stat-row {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-}
-.stat-card {
-    background: rgba(255,255,255,0.03);
-    border: 1px solid rgba(255,255,255,0.07);
-    border-radius: 16px;
-    padding: 1.4rem 1.6rem;
-    position: relative;
-    overflow: hidden;
-}
-.stat-card::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, #6366F1, #10B981);
-}
-.stat-value {
+.stat-n {
     font-family: 'Playfair Display', serif;
-    font-size: 2.2rem;
-    font-weight: 700;
-    color: #fff;
-    line-height: 1;
-    margin-bottom: 0.3rem;
-}
-.stat-label {
-    font-size: 0.72rem;
-    font-weight: 500;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #6B7280;
-}
-
-/* ── Dataframe ── */
-.stDataFrame {
-    border-radius: 16px !important;
-    overflow: hidden !important;
-    border: 1px solid rgba(255,255,255,0.07) !important;
+    font-size: 2rem; font-weight: 700; color: #fff; line-height: 1;
+}
+.stat-l {
+    font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em;
+    text-transform: uppercase; color: #4B5563; margin-top: 4px;
 }
-.stDataFrame iframe { border-radius: 16px !important; }
 
-/* ── Download button ── */
-div[data-testid="stDownloadButton"] button {
-    background: rgba(16,185,129,0.12) !important;
-    border: 1px solid rgba(16,185,129,0.3) !important;
-    color: #6EE7B7 !important;
-    border-radius: 12px !important;
-    padding: 0.75rem 1.5rem !important;
-    font-family: 'Outfit', sans-serif !important;
-    font-weight: 600 !important;
-    font-size: 0.9rem !important;
-    box-shadow: none !important;
-    width: auto !important;
-    transition: all 0.2s !important;
+/* ── Result header ── */
+.result-row {
+    display: flex; align-items: center;
+    justify-content: space-between; margin-bottom: 1.2rem;
 }
-div[data-testid="stDownloadButton"] button:hover {
-    background: rgba(16,185,129,0.22) !important;
-    border-color: rgba(16,185,129,0.5) !important;
-    transform: translateY(-1px) !important;
+.result-title {
+    font-family: 'Playfair Display', serif;
+    font-size: 1.4rem; font-weight: 600; color: #fff;
+}
+.result-badge {
+    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
+    text-transform: uppercase; color: #10B981;
+    background: rgba(16,185,129,0.1);
+    border: 1px solid rgba(16,185,129,0.2);
+    padding: 0.28rem 0.8rem; border-radius: 20px;
 }
 
-/* ── File uploader override ── */
-[data-testid="stFileUploader"] {
-    background: transparent !important;
+/* ── Divider ── */
+.divider {
+    height: 1px; margin: 2rem 0;
+    background: linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);
 }
+
+/* ── Empty state boxes ── */
+.empty-card {
+    background: rgba(255,255,255,0.02);
+    border: 1px solid rgba(255,255,255,0.055);
+    border-radius: 14px; padding: 2rem 1.5rem; text-align: center;
+}
+.empty-icon { font-size: 1.8rem; margin-bottom: 0.7rem; }
+.empty-title { font-weight: 600; color: #E2E8F0; margin-bottom: 0.4rem; font-size: 0.95rem; }
+.empty-desc { font-size: 0.78rem; color: #4B5563; line-height: 1.6; }
+
+/* ── Streamlit widget overrides ── */
+/* File uploader */
 [data-testid="stFileUploader"] section {
     background: rgba(99,102,241,0.04) !important;
-    border: 2px dashed rgba(99,102,241,0.35) !important;
-    border-radius: 16px !important;
-    padding: 2rem !important;
-    transition: all 0.25s !important;
+    border: 2px dashed rgba(99,102,241,0.3) !important;
+    border-radius: 14px !important;
+    transition: all 0.2s !important;
 }
 [data-testid="stFileUploader"] section:hover {
-    border-color: rgba(99,102,241,0.7) !important;
+    border-color: rgba(99,102,241,0.6) !important;
     background: rgba(99,102,241,0.08) !important;
 }
-[data-testid="stFileUploader"] label { color: #9CA3AF !important; font-size: 0.9rem !important; }
+[data-testid="stFileUploader"] label { color: #6B7280 !important; }
+
+/* Primary button */
+.stButton > button[kind="primary"] {
+    background: linear-gradient(135deg, #6366F1, #4F46E5) !important;
+    color: white !important; border: none !important;
+    border-radius: 12px !important; padding: 0.75rem 2rem !important;
+    font-family: 'Outfit', sans-serif !important;
+    font-size: 0.9rem !important; font-weight: 600 !important;
+    box-shadow: 0 4px 20px rgba(99,102,241,0.4) !important;
+    transition: all 0.2s !important; width: 100% !important;
+}
+.stButton > button[kind="primary"]:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 28px rgba(99,102,241,0.55) !important;
+}
+.stButton > button:disabled {
+    background: rgba(255,255,255,0.05) !important;
+    color: #374151 !important; box-shadow: none !important;
+    transform: none !important; border: 1px solid rgba(255,255,255,0.06) !important;
+}
+
+/* Download button */
+div[data-testid="stDownloadButton"] > button {
+    background: rgba(16,185,129,0.1) !important;
+    border: 1px solid rgba(16,185,129,0.28) !important;
+    color: #6EE7B7 !important; border-radius: 10px !important;
+    padding: 0.6rem 1.4rem !important;
+    font-family: 'Outfit', sans-serif !important;
+    font-weight: 600 !important; font-size: 0.85rem !important;
+    transition: all 0.2s !important;
+}
+div[data-testid="stDownloadButton"] > button:hover {
+    background: rgba(16,185,129,0.18) !important;
+    transform: translateY(-1px) !important;
+}
 
-/* ── Selectbox ── */
+/* Select box */
 [data-testid="stSelectbox"] > div > div {
     background: rgba(255,255,255,0.04) !important;
-    border: 1px solid rgba(255,255,255,0.1) !important;
-    border-radius: 12px !important;
-    color: #E8EAF0 !important;
+    border: 1px solid rgba(255,255,255,0.09) !important;
+    border-radius: 10px !important; color: #E2E8F0 !important;
 }
 
-/* ── Divider ── */
-.section-divider {
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
-    margin: 2.5rem 0;
+/* Slider */
+[data-testid="stSlider"] > div > div > div > div {
+    background: #6366F1 !important;
 }
 
-/* ── Result header ── */
-.result-header {
-    display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: 1.5rem;
+/* Progress bar */
+.stProgress > div > div > div {
+    background: linear-gradient(90deg,#6366F1,#10B981) !important;
+    border-radius: 4px !important;
 }
-.result-title {
-    font-family: 'Playfair Display', serif;
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #fff;
-}
-.result-tag {
-    font-size: 0.72rem;
-    font-weight: 600;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: #10B981;
-    background: rgba(16,185,129,0.1);
-    border: 1px solid rgba(16,185,129,0.2);
-    padding: 0.3rem 0.8rem;
-    border-radius: 20px;
+.stProgress > div > div {
+    background: rgba(255,255,255,0.06) !important;
+    border-radius: 4px !important; height: 5px !important;
 }
 
-/* ── Toast-like success ── */
-.success-banner {
-    background: rgba(16,185,129,0.1);
-    border: 1px solid rgba(16,185,129,0.25);
-    border-radius: 12px;
-    padding: 1rem 1.5rem;
-    display: flex; align-items: center; gap: 0.75rem;
-    margin-bottom: 1.5rem;
-    font-size: 0.9rem;
-    color: #6EE7B7;
-    font-weight: 500;
-}
-
-/* Spinner color */
-.stSpinner > div { border-top-color: #6366F1 !important; }
+/* Dataframe */
+[data-testid="stDataFrame"] {
+    border-radius: 14px !important;
+    border: 1px solid rgba(255,255,255,0.07) !important;
+    overflow: hidden !important;
+}
+
+/* Number input */
+[data-testid="stNumberInput"] input {
+    background: rgba(255,255,255,0.04) !important;
+    border: 1px solid rgba(255,255,255,0.09) !important;
+    border-radius: 10px !important; color: #E2E8F0 !important;
+}
+
+/* Expander */
+[data-testid="stExpander"] {
+    background: rgba(255,255,255,0.02) !important;
+    border: 1px solid rgba(255,255,255,0.06) !important;
+    border-radius: 12px !important;
+}
+
+/* Alert/success */
+[data-testid="stAlert"] {
+    border-radius: 12px !important;
+    border: none !important;
+}
 </style>
 """, unsafe_allow_html=True)
 
 
-# ── Model loading ─────────────────────────────────────────────────────────────
-@st.cache_resource(show_spinner="Initialising model…")
+# ═══════════════════════════════════════════════════════════
+# MODEL LOADING
+# ═══════════════════════════════════════════════════════════
+@st.cache_resource(show_spinner="Loading model from HuggingFace Hub…")
 def load_model():
     import torch
     from transformers import TrOCRProcessor, VisionEncoderDecoderModel
@@ -405,7 +300,9 @@ def load_easyocr():
     return easyocr.Reader(["en"], gpu=False)
 
 
-# ── OCR ───────────────────────────────────────────────────────────────────────
+# ═══════════════════════════════════════════════════════════
+# HELPERS
+# ═══════════════════════════════════════════════════════════
 def run_finetuned(img):
     import torch
     processor, model, device = load_model()
@@ -422,12 +319,10 @@ def run_easyocr(img):
 def ocr_image(img, engine):
     try:
         return run_finetuned(img) if engine == "finetuned" else run_easyocr(img)
-    except Exception as e:
+    except:
         try: return run_easyocr(img)
         except: return ""
 
-
-# ── PDF handler ───────────────────────────────────────────────────────────────
 def pdf_to_images(file_bytes, dpi=200, max_pages=None):
     import fitz
     doc   = fitz.open(stream=file_bytes, filetype="pdf")
@@ -440,8 +335,6 @@ def pdf_to_images(file_bytes, dpi=200, max_pages=None):
     doc.close()
     return pages
 
-
-# ── Field extraction ──────────────────────────────────────────────────────────
 def extract_fields(text, filename):
     import re
     def find(label):
@@ -450,179 +343,151 @@ def extract_fields(text, filename):
     amounts = re.findall(r'AMT:\s*([\d,]+)', text)
     dates   = re.search(r'DATE:\s*(\d{4}-\d{2}-\d{2})', text)
     return {
-        "File":           filename,
-        "Plot Number":    find("PLOT"),
-        "Location":       find("LOC"),
-        "Area":           find("AREA"),
-        "Amount (KES)":   int(amounts[0].replace(",","")) if amounts else None,
-        "Date":           dates.group(1) if dates else None,
-        "VOS":            find("VOS"),
+        "File":          filename,
+        "Plot Number":   find("PLOT"),
+        "Location":      find("LOC"),
+        "Area":          find("AREA"),
+        "Amount (KES)":  int(amounts[0].replace(",","")) if amounts else None,
+        "Date":          dates.group(1) if dates else None,
+        "VOS":           find("VOS"),
     }
 
-
-# ── Excel export ──────────────────────────────────────────────────────────────
 def to_excel(records):
     from openpyxl import load_workbook
-    from openpyxl.styles import Font, PatternFill, Alignment, Border, Side
+    from openpyxl.styles import Font, PatternFill, Alignment
     from openpyxl.utils import get_column_letter
     buf = io.BytesIO()
-    df  = pd.DataFrame(records)
-    df.to_excel(buf, index=False, sheet_name="Valuation Data")
+    pd.DataFrame(records).to_excel(buf, index=False, sheet_name="Valuation Data")
     buf.seek(0)
-    wb  = load_workbook(buf)
-    ws  = wb.active
-    thin = Side(style="thin", color="E5E7EB")
-    for col_idx, cell in enumerate(ws[1], 1):
+    wb = load_workbook(buf)
+    ws = wb.active
+    for ci, cell in enumerate(ws[1], 1):
         cell.font      = Font(name="Calibri", bold=True, color="FFFFFF", size=11)
         cell.fill      = PatternFill("solid", start_color="1E1B4B")
         cell.alignment = Alignment(horizontal="center", vertical="center")
-        cell.border    = Border(bottom=Side(style="medium", color="6366F1"))
-        ws.column_dimensions[get_column_letter(col_idx)].width = 22
-    ws.row_dimensions[1].height = 32
-    for row in ws.iter_rows(min_row=2, max_row=ws.max_row):
-        for i, cell in enumerate(row):
+        ws.column_dimensions[get_column_letter(ci)].width = 22
+    ws.row_dimensions[1].height = 30
+    for row in ws.iter_rows(min_row=2):
+        for cell in row:
             cell.alignment = Alignment(vertical="center", wrap_text=True)
-            cell.border    = Border(
-                left=Side(style="thin", color="F3F4F6"),
-                right=Side(style="thin", color="F3F4F6"),
-                top=Side(style="thin", color="F3F4F6"),
-                bottom=Side(style="thin", color="F3F4F6"),
-            )
             if cell.row % 2 == 0:
-                cell.fill = PatternFill("solid", start_color="F8F7FF")
+                cell.fill = PatternFill("solid", start_color="F5F4FF")
     ws.freeze_panes = "A2"
-    out = io.BytesIO()
-    wb.save(out)
+    out = io.BytesIO(); wb.save(out)
     return out.getvalue()
 
 
-# ═════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════
 # SESSION STATE
-# ═════════════════════════════════════════════════════════════════════════════
-for k, v in [("records", []), ("errors", []), ("excel_bytes", None), ("processed", False)]:
+# ═══════════════════════════════════════════════════════════
+for k, v in [("records",[]),("errors",[]),("excel_bytes",None),("done",False)]:
     if k not in st.session_state:
         st.session_state[k] = v
 
 
-# ═══════════════════════���═════════════════════════════════════════════════════
-# PAGE SHELL OPEN
-# ═════════════════════════════════════════════════════════════════════════════
-st.markdown('<div class="page-shell">', unsafe_allow_html=True)
-
-# ── Nav ───────────────────────────────────────────────────────────────────────
+# ═══════════════════════════════════════════════════════════
+# BRAND BAR
+# ═══════════════════════════════════════════════════════════
 st.markdown("""
-<div class="nav">
-  <div class="nav-brand">
-    <div class="nav-dot"></div>
+<div class="brand">
+  <div class="brand-left">
+    <div class="brand-dot"></div>
     <div>
-      <div class="nav-title">ValuationAI</div>
-      <div class="nav-subtitle">Handwriting Recognition System</div>
+      <div class="brand-name">ValuationAI</div>
+      <div class="brand-tag">Handwriting Recognition System</div>
     </div>
   </div>
-  <div class="nav-badge">rasmodev/Handwriting_trocr_model</div>
+  <div class="model-pill">rasmodev/Handwriting_trocr_model</div>
 </div>
 """, unsafe_allow_html=True)
 
-# ── Hero ──────────────────────────────────────────────────────────────────────
+
+# ═══════════════════════════════════════════════════════════
+# HERO
+# ═══════════════════════════════════════════════════════════
 st.markdown("""
-<div class="hero-section">
-  <div class="hero-eyebrow">AI-Powered Document Intelligence</div>
-  <div class="hero-headline">
-    Extract data from<br><span>handwritten valuations</span>
-  </div>
-  <div class="hero-desc">
-    Upload scanned valuation sheet PDFs and get a clean, structured Excel export
-    in seconds — powered by a fine-tuned TrOCR model.
-  </div>
-</div>
+<div class="hero-eyebrow">AI-Powered Document Intelligence</div>
+<div class="hero-h1">Extract data from<br><span>handwritten valuations</span></div>
+<div class="hero-sub">Upload scanned valuation sheet PDFs and get a clean,
+structured Excel export in seconds — powered by a fine-tuned TrOCR model.</div>
 """, unsafe_allow_html=True)
 
-# ═════════════════════════════════════════════════════════════════════════════
-# UPLOAD + SETTINGS
-# ═════════════════════════════════════════════════════════════════════════════
-col_upload, col_settings = st.columns([3, 2], gap="large")
 
-with col_upload:
-    st.markdown('<div class="glass-card">', unsafe_allow_html=True)
-    st.markdown('<div class="card-label">Upload Documents</div>', unsafe_allow_html=True)
+# ═══════════════════════════════════════════════════════════
+# UPLOAD + SETTINGS (side by side)
+# ═══════════════════════════════════════════════════════════
+col_up, col_cfg = st.columns([3, 2], gap="large")
+
+with col_up:
+    st.markdown('<div class="card"><div class="card-label">Upload Documents</div>', unsafe_allow_html=True)
     uploaded_files = st.file_uploader(
-        "Drop PDF files here",
-        type=["pdf", "png", "jpg", "jpeg", "tiff", "tif", "bmp"],
+        "Drag & drop PDF files here",
+        type=["pdf","png","jpg","jpeg","tiff","tif","bmp"],
         accept_multiple_files=True,
         label_visibility="collapsed",
     )
     if uploaded_files:
         chips = "".join(
-            f'<span class="file-chip">📄 {f.name[:28]}{"…" if len(f.name)>28 else ""}</span>'
+            f'<span class="chip">📄 {f.name[:30]}{"…" if len(f.name)>30 else ""}</span>'
             for f in uploaded_files
         )
-        st.markdown(f'<div style="margin-top:1rem">{chips}</div>', unsafe_allow_html=True)
+        st.markdown(f'<div style="margin-top:0.8rem">{chips}</div>', unsafe_allow_html=True)
     st.markdown('</div>', unsafe_allow_html=True)
 
-with col_settings:
-    st.markdown('<div class="glass-card">', unsafe_allow_html=True)
-    st.markdown('<div class="card-label">Processing Settings</div>', unsafe_allow_html=True)
+with col_cfg:
+    st.markdown('<div class="card"><div class="card-label">Settings</div>', unsafe_allow_html=True)
 
-    engine_choice = st.selectbox(
+    engine_sel = st.selectbox(
         "OCR Engine",
         ["🟢  Fine-tuned Model  (Recommended)", "🔵  EasyOCR  (Fallback)"],
         label_visibility="visible",
     )
-    engine = "finetuned" if "Fine-tuned" in engine_choice else "easyocr"
+    engine = "finetuned" if "Fine-tuned" in engine_sel else "easyocr"
 
-    dpi = st.select_slider(
-        "Scan Resolution (DPI)",
-        options=[150, 200, 250, 300],
-        value=200,
-    )
+    dpi = st.select_slider("Resolution (DPI)", options=[150, 200, 250, 300], value=200)
 
-    max_p = st.number_input("Max pages per PDF  (0 = all)", min_value=0, max_value=100, value=0)
+    max_p = st.number_input("Max pages per PDF  (0 = all)", 0, 100, 0)
     max_pages = None if max_p == 0 else int(max_p)
 
-    run_btn = st.button(
-        "⚡  Run OCR & Extract",
+    st.markdown("</div>", unsafe_allow_html=True)
+
+# Run button below settings
+_, btn_col, _ = st.columns([3, 2, 0.01])
+with btn_col:
+    run = st.button(
+        "⚡  Run OCR & Extract Fields",
+        type="primary",
         disabled=not uploaded_files,
         use_container_width=True,
     )
-    st.markdown('</div>', unsafe_allow_html=True)
 
 
-# ═════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════
 # PROCESSING
-# ═════════════════════════════════════════════════════════════════════════════
-if run_btn and uploaded_files:
-    st.session_state.records  = []
-    st.session_state.errors   = []
-    st.session_state.excel_bytes = None
-    st.session_state.processed   = False
-
-    st.markdown('<div class="section-divider"></div>', unsafe_allow_html=True)
+# ═══════════════════════════════════════════════════════════
+if run and uploaded_files:
+    st.session_state.records = []
+    st.session_state.errors  = []
+    st.session_state.done    = False
 
+    st.markdown('<div class="divider"></div>', unsafe_allow_html=True)
     bar    = st.progress(0.0)
     status = st.empty()
     t0     = time.time()
-    total  = len(uploaded_files)
 
     for fi, uf in enumerate(uploaded_files):
         fname      = uf.name
         file_bytes = uf.read()
-        bar.progress((fi) / total, text=f"Reading  {fname}…")
+        bar.progress(fi / len(uploaded_files), text=f"Reading {fname}…")
 
         try:
             ext = fname.lower().rsplit(".", 1)[-1]
-            if ext == "pdf":
-                pages = pdf_to_images(file_bytes, dpi=dpi, max_pages=max_pages)
-            else:
-                img   = Image.open(io.BytesIO(file_bytes)).convert("RGB")
-                pages = [(1, img)]
+            pages = pdf_to_images(file_bytes, dpi=dpi, max_pages=max_pages) \
+                    if ext == "pdf" \
+                    else [(1, Image.open(io.BytesIO(file_bytes)).convert("RGB"))]
 
             for page_no, img in pages:
-                status.markdown(
-                    f'<div style="font-size:0.82rem;color:#9CA3AF;margin-bottom:0.5rem">'
-                    f'Processing  <strong style="color:#A5B4FC">{fname}</strong>'
-                    f'  —  page {page_no} of {len(pages)}</div>',
-                    unsafe_allow_html=True,
-                )
+                status.caption(f"Processing **{fname}** — page {page_no} of {len(pages)}")
                 text   = ocr_image(img, engine)
                 record = extract_fields(text, fname)
                 st.session_state.records.append(record)
@@ -630,125 +495,96 @@ if run_btn and uploaded_files:
         except Exception as e:
             st.session_state.errors.append(f"{fname}: {e}")
 
-        bar.progress((fi + 1) / total)
+        bar.progress((fi+1)/len(uploaded_files))
 
-    elapsed = time.time() - t0
-    bar.empty()
-    status.empty()
+    bar.empty(); status.empty()
+    st.session_state.excel_bytes = to_excel(st.session_state.records) if st.session_state.records else None
+    st.session_state.done = True
 
-    if st.session_state.records:
-        st.session_state.excel_bytes = to_excel(st.session_state.records)
-    st.session_state.processed = True
-
-    st.success(f"✅  Processed {len(st.session_state.records)} page(s) from {total} file(s) in {elapsed:.1f}s")
+    elapsed = time.time() - t0
+    st.success(f"✅  Done — {len(st.session_state.records)} page(s) from {len(uploaded_files)} file(s) in {elapsed:.1f}s")
 
 
-# ═════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════
 # RESULTS
-# ═════════════════════════════════════════════════════════════════════════════
-if st.session_state.processed and st.session_state.records:
+# ═══════════════════════════════════════════════════════════
+if st.session_state.done and st.session_state.records:
     records = st.session_state.records
     df      = pd.DataFrame(records)
 
-    st.markdown('<div class="section-divider"></div>', unsafe_allow_html=True)
+    st.markdown('<div class="divider"></div>', unsafe_allow_html=True)
 
-    # ── Stats ──────────────────────────────────────────────────────────────
-    n_plots   = df["Plot Number"].notna().sum() if "Plot Number" in df else 0
-    n_amounts = df["Amount (KES)"].notna().sum() if "Amount (KES)" in df else 0
-    n_dates   = df["Date"].notna().sum() if "Date" in df else 0
+    # Stats
+    n_plots   = df["Plot Number"].astype(bool).sum() if "Plot Number" in df else 0
+    n_amounts = df["Amount (KES)"].notna().sum()      if "Amount (KES)" in df else 0
+    n_dates   = df["Date"].astype(bool).sum()         if "Date" in df else 0
 
     st.markdown(f"""
-    <div class="stat-row">
-      <div class="stat-card">
-        <div class="stat-value">{len(records)}</div>
-        <div class="stat-label">Pages Processed</div>
+    <div class="stat-grid">
+      <div class="stat">
+        <div class="stat-n">{len(records)}</div>
+        <div class="stat-l">Pages Processed</div>
       </div>
-      <div class="stat-card">
-        <div class="stat-value">{n_plots}</div>
-        <div class="stat-label">Plot Numbers</div>
+      <div class="stat">
+        <div class="stat-n">{n_plots}</div>
+        <div class="stat-l">Plot Numbers</div>
       </div>
-      <div class="stat-card">
-        <div class="stat-value">{n_amounts}</div>
-        <div class="stat-label">Amounts Extracted</div>
+      <div class="stat">
+        <div class="stat-n">{n_amounts}</div>
+        <div class="stat-l">Amounts Found</div>
       </div>
-      <div class="stat-card">
-        <div class="stat-value">{n_dates}</div>
-        <div class="stat-label">Dates Captured</div>
+      <div class="stat">
+        <div class="stat-n">{n_dates}</div>
+        <div class="stat-l">Dates Captured</div>
       </div>
     </div>
     """, unsafe_allow_html=True)
 
-    # ── Results header + download ──────────────────────────────────────────
-    r_col1, r_col2 = st.columns([3, 1])
-    with r_col1:
-        st.markdown("""
-        <div class="result-header">
-          <div class="result-title">Extracted Data</div>
-          <div class="result-tag">✓ Ready to export</div>
-        </div>
-        """, unsafe_allow_html=True)
-    with r_col2:
+    # Title + download
+    hdr_l, hdr_r = st.columns([4, 1])
+    with hdr_l:
+        st.markdown('<div class="result-row"><div class="result-title">Extracted Data</div><div class="result-badge">✓ Ready to export</div></div>', unsafe_allow_html=True)
+    with hdr_r:
         if st.session_state.excel_bytes:
             st.download_button(
-                label="⬇  Download Excel",
+                "⬇  Download Excel",
                 data=st.session_state.excel_bytes,
                 file_name="valuation_extracted.xlsx",
                 mime="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
             )
 
-    # ── Dataframe ──────────────────────────────────────────────────────────
-    st.dataframe(
-        df,
-        use_container_width=True,
-        height=min(80 + len(df) * 38, 520),
-        hide_index=True,
-    )
+    # Dataframe
+    st.dataframe(df, use_container_width=True,
+                 height=min(80 + len(df)*38, 520), hide_index=True)
 
+    # Errors
     if st.session_state.errors:
-        st.markdown('<div class="section-divider"></div>', unsafe_allow_html=True)
         with st.expander(f"��  {len(st.session_state.errors)} file(s) had errors"):
             for e in st.session_state.errors:
-                st.markdown(
-                    f'<div style="font-size:0.85rem;color:#F87171;padding:0.3rem 0">{e}</div>',
-                    unsafe_allow_html=True,
-                )
+                st.markdown(f'<span style="color:#F87171;font-size:0.85rem">{e}</span>', unsafe_allow_html=True)
 
 
-# ═════════════════════════════════════════════════════════════════════════════
+# ═══════════════════════════════════════════════════════════
 # EMPTY STATE
-# ═════════════════════════════════════════════════════════════════════════════
-if not st.session_state.processed and not uploaded_files:
-    st.markdown('<div class="section-divider"></div>', unsafe_allow_html=True)
-    st.markdown("""
-    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem">
-
-      <div class="glass-card" style="text-align:center;padding:2.5rem 1.5rem">
-        <div style="font-size:2rem;margin-bottom:1rem">📄</div>
-        <div style="font-weight:600;color:#E8EAF0;margin-bottom:0.5rem">Upload PDFs</div>
-        <div style="font-size:0.82rem;color:#6B7280;line-height:1.6">
-          Drag in one or multiple scanned valuation sheet PDFs
-        </div>
-      </div>
-
-      <div class="glass-card" style="text-align:center;padding:2.5rem 1.5rem">
-        <div style="font-size:2rem;margin-bottom:1rem">🤖</div>
-        <div style="font-weight:600;color:#E8EAF0;margin-bottom:0.5rem">AI Reads Fields</div>
-        <div style="font-size:0.82rem;color:#6B7280;line-height:1.6">
-          Fine-tuned TrOCR extracts plot numbers, amounts, dates and locations
-        </div>
-      </div>
-
-      <div class="glass-card" style="text-align:center;padding:2.5rem 1.5rem">
-        <div style="font-size:2rem;margin-bottom:1rem">📊</div>
-        <div style="font-weight:600;color:#E8EAF0;margin-bottom:0.5rem">Download Excel</div>
-        <div style="font-size:0.82rem;color:#6B7280;line-height:1.6">
-          Get a clean, formatted spreadsheet ready for data entry or analysis
-        </div>
-      </div>
-
-    </div>
-    """, unsafe_allow_html=True)
-
-
-# PAGE SHELL CLOSE
-st.markdown('</div>', unsafe_allow_html=True)
+# ═══════════════════════════════════════════════════════════
+if not st.session_state.done and not uploaded_files:
+    st.markdown('<div class="divider"></div>', unsafe_allow_html=True)
+    c1, c2, c3 = st.columns(3, gap="medium")
+    with c1:
+        st.markdown("""<div class="empty-card">
+          <div class="empty-icon">📄</div>
+          <div class="empty-title">Upload PDFs</div>
+          <div class="empty-desc">Drag in one or multiple scanned valuation sheet PDFs</div>
+        </div>""", unsafe_allow_html=True)
+    with c2:
+        st.markdown("""<div class="empty-card">
+          <div class="empty-icon">🤖</div>
+          <div class="empty-title">AI Reads Fields</div>
+          <div class="empty-desc">Fine-tuned TrOCR extracts plot numbers, amounts, dates and locations</div>
+        </div>""", unsafe_allow_html=True)
+    with c3:
+        st.markdown("""<div class="empty-card">
+          <div class="empty-icon">📊</div>
+          <div class="empty-title">Download Excel</div>
+          <div class="empty-desc">Get a clean formatted spreadsheet ready for data entry</div>
+        </div>""", unsafe_allow_html=True)