feat(ui): redesign to light-themed SaaS dashboard with guided setup flow

Complete UI overhaul from dark developer-tool aesthetic to a premium light
SaaS dashboard. Key changes:

- Light color palette (#F7F9FC bg, white cards, blue/purple gradient accents)
- Inter font family for modern clean typography
- 7-step guided setup cards with numbered badges and helper text
- Two-column layout: config steps (left) + Run Readiness panel (right)
- Readiness scoring (0-100%) with levels: Getting Started → Automation Pro
- Achievement badges: Resume Ready, Role Focused, Platform Explorer, etc.
- Live checklist with green checkmarks for completed setup items
- Friendly microcopy and estimated scan size/time
- All existing pipeline logic, results tabs, and functionality preserved

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

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "streamlit",
+      "runtimeExecutable": "streamlit",
+      "runtimeArgs": ["run", "ui.py", "--server.port", "8502", "--server.headless", "true"],
+      "port": 8502
+    }
+  ]
+}

HISTORY.md

@@ -4,6 +4,39 @@ A running log of everything built, fixed, and changed. Most recent first.
 
 ---
 
+## 2026-06-15 — UI Redesign v3: Light SaaS Dashboard
+
+### Visual Overhaul
+- **Light theme**: Replaced dark (#0f1117) background with light (#F7F9FC) SaaS palette
+- **Inter font**: Clean modern typography via Google Fonts import
+- **Gradient accent**: Primary buttons and header use #2563EB → #7C3AED gradient
+- **White cards** with subtle borders (#E2E8F0) and soft shadows
+
+### Guided Setup Flow
+- **7 step cards** replace the flat configuration layout — each has a number badge, title, helper text
+- **Two-column layout**: Main config (left 75%) + Run Readiness sidebar (right 25%)
+- **Hero card** at top: "Build your AI job search" with one-line description
+
+### Run Readiness Panel (right sidebar)
+- **Readiness score**: 0–100% circular indicator based on 6 setup steps
+- **Readiness levels**: Getting Started → Balanced Setup → Power Search Ready → Automation Pro
+- **Live checklist**: Green checkmarks for completed items, hollow circles for pending
+- **Summary card**: Roles, locations, platforms, freshness, max jobs, AI match score
+- **Achievement badges**: Resume Ready, Role Focused, Platform Explorer, Tracker Connected, Power Search
+- **Start button**: Disabled until required fields (resume, roles, locations, platforms) are filled
+
+### UX Improvements
+- **Microcopy**: Green success messages after each step ("🎯 Great focus — 3 target roles selected")
+- **Estimated scan**: Shows ~N jobs and ~M minutes based on platform count × max_jobs
+- **Friendly labels**: "Job freshness" instead of "Days Posted", "AI match score" instead of "Min Score for LLM Resume"
+- **Google Sheet card**: Soft amber warning instead of harsh error, with expandable "Advanced setup" instructions
+- **New Search button**: Appears at top of results to return to config without reload
+
+### Modified Files
+- `ui.py` — Complete rewrite: CSS, layout, step cards, readiness panel, gamification
+
+---
+
 ## 2026-06-13 — Unified Platform Selector + ATS + HTML Rendering Fixes
 
 ### Changes

ui.py

@@ -1,5 +1,5 @@
 """
-Job Automation Agent — Streamlit UI v2
+Job Automation Agent — Streamlit UI v3 (Light SaaS Dashboard)
 Run: streamlit run ui.py
 """
 import streamlit as st
@@ -28,142 +28,449 @@ st.set_page_config(
     initial_sidebar_state="collapsed",
 )
 
-# ── CSS ───────────────────────────────────────────────────────────────────────
+# ══════════════════════════════════════════════════════════════════════════════
+# CSS — Light SaaS Dashboard Theme
+# ══════════════════════════════════════════════════════════════════════════════
 st.markdown("""
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
 /* ── Global ── */
-.stApp { background: #0f1117; color: #e0e0e0; }
+.stApp {
+    background: #F7F9FC !important;
+    color: #0F172A;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
 [data-testid="stSidebar"] { display: none !important; }
-.block-container { padding: 1.2rem 2rem !important; max-width: 1300px !important; }
+.block-container {
+    padding: 1rem 2rem !important;
+    max-width: 1400px !important;
+}
+[data-testid="stHeader"] { background: transparent !important; }
+
+/* ── Streamlit overrides ── */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Inter', -apple-system, sans-serif !important;
+    color: #0F172A !important;
+}
+p, span, label, .stMarkdown { color: #0F172A; }
+.stSelectbox label, .stMultiSelect label, .stSlider label,
+.stNumberInput label, .stFileUploader label {
+    color: #334155 !important; font-weight: 500 !important;
+}
+
+/* ── Buttons ── */
+.stButton > button[kind="primary"], .stButton > button {
+    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) !important;
+    color: white !important; border: none !important; border-radius: 10px !important;
+    padding: 10px 24px !important; font-weight: 600 !important;
+    font-family: 'Inter', sans-serif !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 2px 8px rgba(37,99,235,0.25) !important;
+}
+.stButton > button:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 16px rgba(37,99,235,0.35) !important;
+}
+.stButton > button:disabled {
+    opacity: 0.5 !important;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+/* Secondary / ghost buttons */
+.secondary-btn .stButton > button {
+    background: white !important;
+    color: #2563EB !important;
+    border: 1.5px solid #E2E8F0 !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
+}
+.secondary-btn .stButton > button:hover {
+    border-color: #2563EB !important;
+    background: #F0F4FF !important;
+}
+
+/* ── Progress bar ── */
+.stProgress > div > div { background: linear-gradient(90deg, #2563EB, #7C3AED) !important; }
+
+/* ── File uploader ── */
+div[data-testid="stFileUploaderDropzone"] {
+    background: #FFFFFF !important;
+    border: 2px dashed #CBD5E1 !important;
+    border-radius: 12px !important;
+    transition: all 0.2s ease;
+}
+div[data-testid="stFileUploaderDropzone"]:hover {
+    border-color: #2563EB !important;
+    background: #F0F4FF !important;
+}
 
-/* ── Top header ── */
+/* ── Inputs ── */
+.stTextInput > div > div > input,
+.stTextArea > div > div > textarea,
+.stSelectbox > div > div,
+.stMultiSelect > div {
+    background: #FFFFFF !important;
+    border-color: #E2E8F0 !important;
+    border-radius: 8px !important;
+    color: #0F172A !important;
+}
+
+/* ── Expander ── */
+.streamlit-expanderHeader {
+    background: #FFFFFF !important;
+    border: 1px solid #E2E8F0 !important;
+    border-radius: 10px !important;
+    color: #334155 !important;
+    font-weight: 600 !important;
+}
+details {
+    border: 1px solid #E2E8F0 !important;
+    border-radius: 10px !important;
+    background: #FFFFFF !important;
+}
+
+/* ── Tabs ── */
+.stTabs [data-baseweb="tab-list"] {
+    gap: 4px;
+    background: #F1F5F9;
+    border-radius: 12px;
+    padding: 4px;
+}
+.stTabs [data-baseweb="tab"] {
+    border-radius: 8px !important;
+    color: #64748B !important;
+    font-weight: 500 !important;
+    padding: 8px 16px !important;
+}
+.stTabs [aria-selected="true"] {
+    background: white !important;
+    color: #2563EB !important;
+    font-weight: 600 !important;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
+}
+
+/* ── Divider ── */
+hr { border-color: #E2E8F0 !important; opacity: 0.5 !important; }
+
+/* ══════════════════════════════════════════���═══════════════════════════
+   CUSTOM COMPONENT CLASSES
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* ── Header ── */
 .jaa-header {
-    background: linear-gradient(135deg, #1648BE 0%, #0a1f5e 100%);
-    border-radius: 12px; padding: 16px 24px; margin-bottom: 18px;
+    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
+    border-radius: 16px;
+    padding: 20px 28px;
+    margin-bottom: 20px;
     display: flex; align-items: center; justify-content: space-between;
+    box-shadow: 0 4px 20px rgba(37,99,235,0.2);
+}
+.jaa-header-left { flex: 1; }
+.jaa-header-title {
+    color: #fff; font-size: 1.5rem; font-weight: 800;
+    margin: 0; letter-spacing: -0.3px;
+    font-family: 'Inter', sans-serif;
+}
+.jaa-header-sub {
+    color: rgba(255,255,255,0.8); font-size: 0.85rem;
+    margin: 4px 0 0; font-weight: 400;
+}
+.jaa-header-badge {
+    background: rgba(255,255,255,0.15);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255,255,255,0.2);
+    border-radius: 20px;
+    padding: 6px 14px;
+    color: white; font-size: 0.8rem; font-weight: 600;
+    white-space: nowrap;
 }
-.jaa-header-title { color: #fff; font-size: 1.6rem; font-weight: 800; margin: 0; }
-.jaa-header-sub   { color: #a8c4ff; font-size: 0.85rem; margin: 2px 0 0; }
 
-/* ── History panel ── */
-.history-panel {
-    background: #13162a; border: 1px solid #2a2f55; border-radius: 12px;
-    padding: 18px 20px; margin-bottom: 18px;
+/* ── Step Card ── */
+.step-card-container {
+    background: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    border-radius: 14px;
+    padding: 20px 24px;
+    margin-bottom: 16px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    transition: all 0.2s ease;
 }
-.history-run {
-    background: #1a1d27; border: 1px solid #2a2f45; border-radius: 10px;
-    padding: 12px 16px; margin-bottom: 8px;
-    display: flex; align-items: center; justify-content: space-between;
-    gap: 12px;
+.step-card-container:hover {
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
 }
-.history-run-meta { flex: 1; }
-.history-run-date { font-size: 0.82rem; color: #6b7280; }
-.history-run-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
-.htag {
-    padding: 2px 8px; border-radius: 12px; font-size: 0.78rem;
-    background: #1a2540; color: #93c5fd;
+.step-card-container.completed {
+    border-left: 3px solid #16A34A;
+}
+.step-card-header {
+    display: flex; align-items: center; gap: 12px;
+    margin-bottom: 8px;
+}
+.step-number {
+    width: 28px; height: 28px;
+    background: linear-gradient(135deg, #2563EB, #7C3AED);
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    color: white; font-weight: 700; font-size: 0.85rem;
+    flex-shrink: 0;
+}
+.step-number.done {
+    background: #16A34A;
+}
+.step-title-text {
+    font-size: 1rem; font-weight: 700;
+    color: #0F172A; margin: 0;
+}
+.step-helper {
+    font-size: 0.82rem; color: #64748B;
+    margin: 0 0 12px 40px; line-height: 1.4;
 }
-.htag-red    { background: #2b1a1a; color: #f87171; }
-.htag-green  { background: #1a2b1a; color: #4ade80; }
 
-/* ── Config card ── */
-.config-section {
-    background: #1a1d27; border: 1px solid #2a2f45; border-radius: 12px;
-    padding: 20px 24px; margin-bottom: 16px;
+/* ── Readiness Panel ── */
+.readiness-panel {
+    background: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    border-radius: 14px;
+    padding: 24px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.readiness-title {
+    font-size: 1.1rem; font-weight: 700; color: #0F172A;
+    margin: 0 0 16px 0;
+}
+.readiness-progress-ring {
+    width: 100px; height: 100px; margin: 0 auto 16px;
+    position: relative;
+}
+.readiness-score {
+    text-align: center; font-size: 2rem; font-weight: 800;
+    background: linear-gradient(135deg, #2563EB, #7C3AED);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+    margin: 0 0 4px;
+}
+.readiness-label {
+    text-align: center; font-size: 0.82rem; color: #64748B;
+    margin: 0 0 20px;
+}
+.readiness-badge {
+    display: inline-block;
+    background: linear-gradient(135deg, #EFF6FF, #F0ECFF);
+    border: 1px solid #BFDBFE;
+    border-radius: 20px;
+    padding: 4px 12px;
+    font-size: 0.78rem; font-weight: 600; color: #2563EB;
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 16px;
+}
+.readiness-badge.gold {
+    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
+    border-color: #FCD34D; color: #92400E;
+}
+.checklist-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 0;
+    border-bottom: 1px solid #F1F5F9;
+    font-size: 0.85rem;
+}
+.checklist-item:last-child { border-bottom: none; }
+.check-done {
+    width: 20px; height: 20px;
+    background: #16A34A;
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    color: white; font-size: 0.7rem; flex-shrink: 0;
+}
+.check-pending {
+    width: 20px; height: 20px;
+    border: 2px solid #CBD5E1;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+.check-label { color: #334155; font-weight: 500; }
+.check-label.done { color: #16A34A; }
+.check-label.pending { color: #94A3B8; }
+
+.summary-row {
+    display: flex; justify-content: space-between;
+    padding: 6px 0;
+    font-size: 0.82rem;
+    border-bottom: 1px solid #F8FAFC;
+}
+.summary-key { color: #64748B; }
+.summary-val { color: #0F172A; font-weight: 600; }
+
+/* ── Achievement Badges ── */
+.badge-row {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    margin: 12px 0;
+}
+.achievement-badge {
+    padding: 4px 10px;
+    border-radius: 16px;
+    font-size: 0.72rem; font-weight: 600;
+    display: inline-flex; align-items: center; gap: 4px;
+}
+.badge-earned {
+    background: #F0FDF4; border: 1px solid #BBF7D0; color: #16A34A;
 }
-.section-label {
-    color: #93c5fd; font-size: 0.78rem; font-weight: 700;
-    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px;
+.badge-locked {
+    background: #F8FAFC; border: 1px solid #E2E8F0; color: #CBD5E1;
+}
+
+/* ── Microcopy ── */
+.micro-success {
+    background: #F0FDF4;
+    border: 1px solid #BBF7D0;
+    border-radius: 8px;
+    padding: 8px 14px;
+    font-size: 0.82rem; color: #16A34A; font-weight: 500;
+    margin: 8px 0;
 }
 
-/* ── Platform chips ── */
-.plat-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
-.plat-chip {
-    border-radius: 20px; padding: 5px 14px; font-size: 0.82rem;
-    font-weight: 600; border: 1.5px solid;
+/* ── Platform cards ── */
+.platform-summary {
+    background: #F8FAFC;
+    border: 1px solid #E2E8F0;
+    border-radius: 10px;
+    padding: 10px 14px;
+    display: flex; align-items: center; justify-content: space-between;
+    margin-bottom: 8px;
+}
+.platform-count {
+    background: #EFF6FF;
+    color: #2563EB;
+    border-radius: 16px;
+    padding: 2px 10px;
+    font-size: 0.78rem; font-weight: 700;
 }
-.plat-on  { background: #1a2540; border-color: #1648BE; color: #93c5fd; }
-.plat-off { background: #1a1d27; border-color: #3a3f55; color: #6b7280; }
 
-/* ── Step pipeline ── */
+/* ── Step pipeline (running) ── */
 .steps-grid {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     gap: 8px; margin: 12px 0;
 }
 .step-card {
-    background: #1a1d27; border: 1px solid #2a2f45; border-radius: 10px;
+    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 10px;
     padding: 10px 14px; display: flex; align-items: center; gap: 8px;
+    transition: all 0.2s ease;
 }
-.step-card.active { border-color: #1648BE; background: #111e40; }
-.step-card.done   { border-color: #2e7d32; background: #0d1f0d; }
-.step-card.error  { border-color: #b71c1c; background: #1f0d0d; }
+.step-card.active { border-color: #2563EB; background: #EFF6FF; }
+.step-card.done   { border-color: #16A34A; background: #F0FDF4; }
+.step-card.error  { border-color: #EF4444; background: #FEF2F2; }
 .step-card.skip   { opacity: 0.45; }
 .step-icon  { font-size: 1.2rem; flex-shrink: 0; }
 .step-body  { flex: 1; min-width: 0; }
-.step-title { font-size: 0.82rem; font-weight: 600; margin: 0;
-              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.step-detail{ font-size: 0.73rem; color: #9ca3af; margin: 1px 0 0;
-              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.step-time  { font-size: 0.72rem; color: #4b5563; white-space: nowrap; }
+.step-title-run {
+    font-size: 0.82rem; font-weight: 600; margin: 0;
+    color: #0F172A;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.step-detail {
+    font-size: 0.73rem; color: #64748B; margin: 1px 0 0;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.step-time { font-size: 0.72rem; color: #94A3B8; white-space: nowrap; }
 
 /* ── Log box ── */
 .log-box {
-    background: #080a10; border: 1px solid #1e2235; border-radius: 8px;
-    padding: 10px 14px; font-family: 'Courier New', monospace; font-size: 0.76rem;
-    max-height: 160px; overflow-y: auto; color: #d1d5db;
+    background: #1E293B; border: 1px solid #334155; border-radius: 10px;
+    padding: 12px 16px; font-family: 'JetBrains Mono', 'Courier New', monospace;
+    font-size: 0.76rem; max-height: 160px; overflow-y: auto; color: #E2E8F0;
 }
 .log-ok   { color: #4ade80; } .log-warn { color: #facc15; }
 .log-err  { color: #f87171; } .log-info { color: #93c5fd; }
 
+/* ── Metric summary row ── */
+.metrics-row {
+    display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
+}
+.mbox {
+    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
+    padding: 16px 20px; text-align: center; flex: 1; min-width: 100px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    transition: all 0.2s ease;
+}
+.mbox:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
+.mbox .mv { font-size: 1.8rem; font-weight: 800; }
+.mbox .ml { font-size: 0.75rem; color: #64748B; margin-top: 4px; font-weight: 500; }
+.mbox.blue   .mv { color: #2563EB; }
+.mbox.red    .mv { color: #EF4444; }
+.mbox.yellow .mv { color: #F59E0B; }
+.mbox.green  .mv { color: #16A34A; }
+.mbox.purple .mv { color: #7C3AED; }
+
 /* ── Job card ── */
 .job-card {
-    background: #1a1d27; border: 1px solid #2a2f45; border-radius: 12px;
-    padding: 14px 18px; margin-bottom: 10px;
+    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px;
+    padding: 16px 20px; margin-bottom: 10px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+    transition: all 0.2s ease;
 }
-.job-card.jc-high   { border-left: 4px solid #ef5350; }
-.job-card.jc-medium { border-left: 4px solid #ffc107; }
-.job-card.jc-low    { border-left: 4px solid #4b5563; }
+.job-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
+.job-card.jc-high   { border-left: 4px solid #EF4444; }
+.job-card.jc-medium { border-left: 4px solid #F59E0B; }
+.job-card.jc-low    { border-left: 4px solid #CBD5E1; }
 .jc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
-.jc-title   { font-size: 0.98rem; font-weight: 700; color: #e0e0e0; margin: 0; }
-.jc-company { font-size: 0.82rem; color: #9ca3af; margin: 2px 0; }
+.jc-title   { font-size: 1rem; font-weight: 700; color: #0F172A; margin: 0; }
+.jc-company { font-size: 0.85rem; color: #64748B; margin: 3px 0; }
 .jc-badge {
-    padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 700;
+    padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700;
     white-space: nowrap; flex-shrink: 0;
 }
-.badge-high   { background: #2b1a1a; color: #ef5350; border: 1px solid #ef5350; }
-.badge-medium { background: #2b2200; color: #ffc107; border: 1px solid #ffc107; }
-.badge-low    { background: #1a1d27; color: #9ca3af; border: 1px solid #4b5563; }
-.jc-meta { display: flex; gap: 12px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
-.jc-ats-before { color: #6b7280; font-size: 0.8rem; }
-.jc-ats-after  { color: #4ade80; font-size: 0.85rem; font-weight: 700; }
-.jc-ats-gain   { color: #34d399; font-size: 0.8rem; }
-.jc-salary     { color: #93c5fd; font-size: 0.8rem; }
-.jc-platform   { color: #6b7280; font-size: 0.78rem; }
-
-/* ── Metric summary row ── */
-.metrics-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
-.mbox {
-    background: #1a1d27; border: 1px solid #2a2f45; border-radius: 10px;
-    padding: 12px 16px; text-align: center; flex: 1; min-width: 90px;
+.badge-high   { background: #FEF2F2; color: #EF4444; border: 1px solid #FECACA; }
+.badge-medium { background: #FFFBEB; color: #D97706; border: 1px solid #FDE68A; }
+.badge-low    { background: #F8FAFC; color: #94A3B8; border: 1px solid #E2E8F0; }
+.jc-meta {
+    display: flex; gap: 12px; margin-top: 10px;
+    align-items: center; flex-wrap: wrap;
 }
-.mbox .mv { font-size: 1.7rem; font-weight: 800; }
-.mbox .ml { font-size: 0.72rem; color: #6b7280; margin-top: 1px; }
-.mbox.blue   .mv { color: #64b5f6; }
-.mbox.red    .mv { color: #ef5350; }
-.mbox.yellow .mv { color: #ffc107; }
-.mbox.green  .mv { color: #4caf50; }
-.mbox.purple .mv { color: #c084fc; }
+.jc-ats-before { color: #94A3B8; font-size: 0.8rem; }
+.jc-ats-after  { color: #16A34A; font-size: 0.85rem; font-weight: 700; }
+.jc-ats-gain   { color: #16A34A; font-size: 0.8rem; }
+.jc-salary     { color: #2563EB; font-size: 0.8rem; }
+.jc-platform   { color: #94A3B8; font-size: 0.78rem; }
 
-/* ── Buttons ── */
-.stButton > button {
-    background: linear-gradient(90deg, #1648BE, #0d2d6e) !important;
-    color: white !important; border: none !important; border-radius: 8px !important;
-    padding: 8px 20px !important; font-weight: 600 !important;
+/* ── History panel ── */
+.history-panel {
+    background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px;
+    padding: 20px 24px; margin-bottom: 16px;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
 }
-.stButton > button:disabled { opacity: 0.5 !important; }
-.stProgress > div > div { background: #1648BE !important; }
-div[data-testid="stFileUploaderDropzone"] {
-    background: #1a1d27 !important; border-color: #2a2f45 !important;
+.history-run {
+    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px;
+    padding: 12px 16px; margin-bottom: 8px;
+    display: flex; align-items: center; justify-content: space-between; gap: 12px;
+}
+.history-run-meta { flex: 1; }
+.history-run-date { font-size: 0.82rem; color: #64748B; font-weight: 500; }
+.history-run-stats { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
+.htag {
+    padding: 3px 10px; border-radius: 14px; font-size: 0.75rem; font-weight: 600;
+    background: #EFF6FF; color: #2563EB;
+}
+.htag-red    { background: #FEF2F2; color: #EF4444; }
+.htag-green  { background: #F0FDF4; color: #16A34A; }
+
+/* ── Welcome state ── */
+.welcome-card {
+    background: #FFFFFF;
+    border: 1px solid #E2E8F0;
+    border-radius: 16px;
+    padding: 48px 32px;
+    text-align: center;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+.welcome-icon { font-size: 3.5rem; margin-bottom: 16px; }
+.welcome-title {
+    font-size: 1.3rem; font-weight: 700; color: #0F172A;
+    margin: 0 0 8px;
+}
+.welcome-desc {
+    font-size: 0.9rem; color: #64748B; max-width: 480px;
+    margin: 0 auto; line-height: 1.6;
 }
 </style>
 """, unsafe_allow_html=True)
@@ -191,13 +498,13 @@ for _k, _v in _DEFAULTS.items():
     if _k not in st.session_state:
         st.session_state[_k] = _v
 
-# ── Shared progress queue (survives Streamlit reruns via session_state) ───────
+# ── Shared progress queue ────────────────────────────────────────────────────
 if "progress_q" not in st.session_state:
     st.session_state["progress_q"] = queue.Queue()
 _progress_q: queue.Queue = st.session_state["progress_q"]
 
 
-# ── Pipeline steps definition ─────────────────────────────────────────────────
+# ── Pipeline steps definition ────────────────────────────────────────────────
 PIPELINE_STEPS = [
     {"id": "resume",          "icon": "📄", "title": "Parse Resume"},
     {"id": "profile",         "icon": "🧠", "title": "Build Profile"},
@@ -215,7 +522,9 @@ PIPELINE_STEPS = [
 _STEP_TITLE_MAP = {s["id"]: s["title"] for s in PIPELINE_STEPS}
 
 
-# ── Helpers ───────────────────────────────────────────────────────────────────
+# ══════════════════════════════════════════════════════════════════════════════
+# HELPERS
+# ══════════════════════════════════════════════════════════════════════════════
 def _score_color_cls(score):
     if score >= 8: return "high"
     if score >= 6: return "medium"
@@ -247,7 +556,7 @@ def _render_steps(steps_state: dict) -> str:
 <div class="step-card {css}">
   <span class="step-icon">{icon}</span>
   <div class="step-body">
-    <p class="step-title">{s['icon']} {s['title']}</p>
+    <p class="step-title-run">{s['icon']} {s['title']}</p>
     <p class="step-detail">{safe or ('Waiting…' if status=='pending' else '')}</p>
   </div>
   <span class="step-time">{elapsed}</span>
@@ -285,13 +594,13 @@ def _job_card_html(job: dict, rank: int) -> str:
     if ats_b is not None and ats_a is not None:
         ats_html = (
             f'<span class="jc-ats-before">ATS {ats_b}%</span>'
-            f'<span style="color:#4b5563">→</span>'
+            f'<span style="color:#CBD5E1">→</span>'
             f'<span class="jc-ats-after">{ats_a}%</span>'
             f'<span class="jc-ats-gain">(+{imp}pp)</span>'
         )
 
     sal_html = f'<span class="jc-salary">💰 {salary}</span>' if salary and salary != "Not specified" else ""
-    link_html = f'<a href="{url}" target="_blank" style="color:#64b5f6;font-size:0.8rem;text-decoration:none">Apply →</a>' if url else ""
+    link_html = f'<a href="{url}" target="_blank" style="color:#2563EB;font-size:0.8rem;text-decoration:none;font-weight:500">Apply →</a>' if url else ""
 
     t  = title.replace("<","&lt;").replace(">","&gt;")
     co = company.replace("<","&lt;").replace(">","&gt;")
@@ -334,29 +643,53 @@ def _metrics_html(results: list) -> str:
 </div>"""
 
 
-# ── Google Sheet status ───────────────────────────────────────────────────────
 def _sheets_configured() -> tuple[bool, str]:
     if os.path.exists("google_credentials.json"):
-        return True, "Service account ✓"
+        return True, "Service account connected"
     if os.path.exists("google_token.json"):
-        return True, "OAuth token ✓"
+        return True, "OAuth connected"
     if os.path.exists("google_oauth_client.json"):
-        return False, "Run setup_google.py to complete OAuth"
-    return False, "No credentials — run setup_google.py"
+        return False, "Needs one-time authorization"
+    return False, "Not connected yet"
+
+
+def _readiness_score(has_resume, roles, locations, platforms, sheets_ok, min_score):
+    score = 0
+    total = 6
+    if has_resume: score += 1
+    if roles: score += 1
+    if locations: score += 1
+    if platforms: score += 1
+    if sheets_ok: score += 1
+    if min_score is not None: score += 1
+    return int((score / total) * 100)
 
+def _readiness_level(pct):
+    if pct >= 100: return ("Automation Pro", True)
+    if pct >= 83:  return ("Power Search Ready", False)
+    if pct >= 50:  return ("Balanced Setup", False)
+    return ("Getting Started", False)
 
-# ════════════════════════════════════════════════════════════════════════════════
+
+# ══════════════════════════════════════════════════════════════════════════════
 # HEADER
-# ════════════════════════════════════════════════════════════════════════════════
+# ══════════════════════════════════════════════════════════════════════════════
+has_resume = os.path.exists("data/resume/resume.pdf")
+sheets_ok, sheets_status = _sheets_configured()
+
 hdr_l, hdr_r = st.columns([5, 1])
 with hdr_l:
-    st.markdown("""
+    status_text = "Running..." if st.session_state.running else (
+        "Results ready" if st.session_state.results else "Setup in progress"
+    )
+    st.html(f"""
 <div class="jaa-header">
   <div class="jaa-header-left">
     <p class="jaa-header-title">🤖 Job Automation Agent</p>
-    <p class="jaa-header-sub">AI-powered job search · Multi-model assessment · ATS resume generation</p>
+    <p class="jaa-header-sub">AI-powered job discovery, resume matching, and application tracking</p>
   </div>
-</div>""", unsafe_allow_html=True)
+  <span class="jaa-header-badge">{"⏳" if st.session_state.running else "✨"} {status_text}</span>
+</div>""")
 
 with hdr_r:
     st.markdown("<br>", unsafe_allow_html=True)
@@ -366,14 +699,14 @@ with hdr_r:
         st.rerun()
 
 
-# ════════════════════════════════════════════════════════════════════════════════
+# ══════════════════════════════════════════════════════════════════════════════
 # HISTORY PANEL
-# ════════════════════════════════════════════════════════════════════════════════
+# ══════════════════════════════════════════════════════════════════════════════
 if st.session_state.show_history:
     from src.run_history import list_runs, load_run
     past_runs = list_runs()
 
-    st.markdown('<div class="history-panel">', unsafe_allow_html=True)
+    st.html('<div class="history-panel">')
     st.markdown("### 📜 Run History")
 
     if not past_runs:
@@ -416,7 +749,7 @@ if st.session_state.show_history:
                         st.session_state.show_history = False
                         st.rerun()
 
-    st.markdown('</div>', unsafe_allow_html=True)
+    st.html('</div>')
 
     if st.session_state.loaded_run:
         st.info(f"📂 Showing results from run: **{st.session_state.loaded_run}**")
@@ -424,33 +757,73 @@ if st.session_state.show_history:
     st.divider()
 
 
-# ════════════════════════════════════════════════════════════════════════════════
-# CONFIGURATION
-# ════════════════════════════════════════════════════════════════════════════════
-with st.expander("⚙️ Configure Run", expanded=not (st.session_state.running or st.session_state.results)):
+# ══════════════════════════════════════════════════════════════════════════════
+# CONFIGURATION — Two-column layout
+# ══════════════════════════════════════════════════════════════════════════════
+show_config = not (st.session_state.running or st.session_state.results)
+
+if show_config:
+    # ── Hero card ──
+    st.html("""
+<div style="background:linear-gradient(135deg,#EFF6FF 0%,#F5F3FF 100%);
+            border:1px solid #DBEAFE; border-radius:14px;
+            padding:24px 28px; margin-bottom:20px;">
+  <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
+    <div>
+      <h3 style="margin:0; font-size:1.15rem; font-weight:700; color:#1E293B;">
+        Build your AI job search
+      </h3>
+      <p style="margin:4px 0 0; font-size:0.88rem; color:#64748B;">
+        Configure once. Let the agent discover, score, and track relevant jobs for you.
+      </p>
+    </div>
+  </div>
+</div>""")
 
-    # ── Row 1: Resume + Roles ──
-    col_res, col_roles = st.columns([1, 2])
+    col_main, col_sidebar = st.columns([3, 1], gap="large")
+
+    with col_main:
+        # ────────────────────────────────────────────────────────────────────
+        # STEP 1: Upload Resume
+        # ────────────────────────────────────────────────────────────────────
+        step1_done = "done" if has_resume else ""
+        num1_cls = "done" if has_resume else ""
+        st.html(f"""
+<div class="step-card-container {('completed' if has_resume else '')}">
+  <div class="step-card-header">
+    <div class="step-number {num1_cls}">{"✓" if has_resume else "1"}</div>
+    <p class="step-title-text">Upload your resume</p>
+  </div>
+  <p class="step-helper">We'll analyze your resume to match you with better-fit roles and generate ATS-optimized versions.</p>
+</div>""")
 
-    with col_res:
-        st.markdown('<p class="section-label">📄 Resume</p>', unsafe_allow_html=True)
-        resume_file = st.file_uploader("Upload PDF", type=["pdf"], key="resume_upload",
-                                       label_visibility="collapsed")
+        resume_file = st.file_uploader(
+            "Drop your resume PDF here",
+            type=["pdf"], key="resume_upload",
+            label_visibility="collapsed",
+            help="Supported format: PDF. Max size: 10MB.",
+        )
         if resume_file:
             os.makedirs("data/resume", exist_ok=True)
             with open("data/resume/resume.pdf", "wb") as f:
                 f.write(resume_file.read())
-            st.success("✓ Saved")
-        if os.path.exists("data/resume/resume.pdf"):
+            has_resume = True
+            st.rerun()
+
+        if has_resume:
             fsize = os.path.getsize("data/resume/resume.pdf") // 1024
-            st.caption(f"📄 resume.pdf ({fsize} KB)")
+            st.html(f"""
+<div class="micro-success">
+  ✅ <strong>resume.pdf</strong> uploaded ({fsize} KB) — Ready for AI matching
+</div>""")
         else:
-            st.warning("No resume uploaded yet")
+            st.caption("Upload your resume to unlock AI matching.")
 
-    with col_roles:
-        st.markdown('<p class="section-label">🎯 Target Roles</p>', unsafe_allow_html=True)
+        # ────────────────────────────────────────────────────────────────────
+        # STEP 2: Target Roles
+        # ────────────────────────────────────────────────────────────────────
         roles = st.multiselect(
-            "Roles",
+            "**Step 2 · Target roles** — Select up to 5 roles for more focused results",
             options=[
                 "Product Manager", "Senior Product Manager", "AI Product Manager",
                 "Technical Product Manager", "Data Product Manager", "Platform Product Manager",
@@ -458,146 +831,351 @@ with st.expander("⚙️ Configure Run", expanded=not (st.session_state.running
                 "Associate Product Manager", "Head of Product",
             ],
             default=["Product Manager", "Senior Product Manager", "AI Product Manager"],
-            label_visibility="collapsed",
+            key="roles_select",
         )
+        if roles:
+            st.html(f'<div class="micro-success">🎯 Great focus — {len(roles)} target role{"s" if len(roles)!=1 else ""} selected</div>')
 
-    st.divider()
-
-    # ── Row 2: Locations + Params ──
-    col_loc, col_days, col_max = st.columns([3, 1, 1])
-
-    with col_loc:
-        st.markdown('<p class="section-label">📍 Locations</p>', unsafe_allow_html=True)
+        # ────────────────────────────────────────────────────────────────────
+        # STEP 3: Locations
+        # ─────────────────────���──────────────────────────────────────────────
         locations = st.multiselect(
-            "Locations",
+            "**Step 3 · Where should we search?** — Mix cities, countries, and remote preferences",
             options=["India", "Bangalore", "Hyderabad", "Mumbai", "Delhi NCR",
                      "Pune", "Chennai", "Noida", "Remote", "Worldwide"],
             default=["India", "Bangalore"],
-            label_visibility="collapsed",
+            key="locations_select",
         )
+        if locations:
+            st.html(f'<div class="micro-success">📍 Searching in {len(locations)} location{"s" if len(locations)!=1 else ""}</div>')
+
+        # ────────────────────────────────────────────────────────────────────
+        # STEP 4: Job Freshness & Volume
+        # ────────────────────────────────────────────────────────────────────
+        st.html("""
+<div class="step-card-container">
+  <div class="step-card-header">
+    <div class="step-number">4</div>
+    <p class="step-title-text">Job freshness and search volume</p>
+  </div>
+  <p class="step-helper">Lower values make results more focused. Higher values increase coverage.</p>
+</div>""")
+        fc1, fc2 = st.columns(2)
+        with fc1:
+            days_posted = st.selectbox(
+                "Only show jobs posted within",
+                options=[3, 7, 14, 30],
+                index=1,
+                format_func=lambda x: f"Last {x} days",
+            )
+        with fc2:
+            max_jobs = st.number_input(
+                "Maximum jobs per platform",
+                min_value=5, max_value=100, value=25, step=5,
+                help="Total jobs to fetch from each platform (not per query)",
+            )
 
-    with col_days:
-        st.markdown('<p class="section-label">📅 Days Posted</p>', unsafe_allow_html=True)
-        days_posted = st.selectbox("Days", [3, 7, 14, 30], index=1,
-                                   label_visibility="collapsed")
+        # ────────────────────────────────────────────────────────────────────
+        # STEP 5: Job Platforms
+        # ────────────────────────────────────────────────────────────────────
+        from src.ever_jobs_bridge.platforms import PLATFORM_GROUPS, INDIA_DEFAULT_PLATFORMS, EVER_JOBS_PLATFORMS
+
+        sb_count  = len(PLATFORM_GROUPS["Search Boards"])
+        ats_count = len(PLATFORM_GROUPS["ATS Platforms"])
+        cp_count  = len(PLATFORM_GROUPS["Company Pages"])
+        total_platforms = sb_count + ats_count + cp_count
+
+        st.html(f"""
+<div class="step-card-container">
+  <div class="step-card-header">
+    <div class="step-number">5</div>
+    <p class="step-title-text">Job platforms</p>
+  </div>
+  <p class="step-helper">Select platforms where the agent should search. {total_platforms} platforms available across 3 categories.</p>
+</div>""")
 
-    with col_max:
-        st.markdown('<p class="section-label">🔢 Max / Platform</p>', unsafe_allow_html=True)
-        max_jobs = st.number_input("Max", min_value=5, max_value=100, value=25, step=5,
-                                   label_visibility="collapsed",
-                                   help="Max total jobs to fetch from each platform (not per query)")
+        ej_col1, ej_col2, ej_col3 = st.columns(3)
+
+        with ej_col1:
+            with st.expander(f"🔍 Search Boards ({sb_count})"):
+                sb_options  = PLATFORM_GROUPS["Search Boards"]
+                sb_defaults = [p for p in INDIA_DEFAULT_PLATFORMS if p in sb_options]
+                if st.button("↻ Reset to recommended", key="sb_rec", use_container_width=True):
+                    st.session_state["ej_search_boards"] = sb_defaults
+                    st.rerun()
+                selected_search_boards = st.multiselect(
+                    "Search Boards",
+                    options=sb_options,
+                    default=sb_defaults,
+                    format_func=lambda k: EVER_JOBS_PLATFORMS.get(k, {}).get("display", k),
+                    label_visibility="collapsed",
+                    key="ej_search_boards",
+                )
 
-    st.divider()
+        with ej_col2:
+            with st.expander(f"🏢 ATS Platforms ({ats_count})"):
+                ats_options  = PLATFORM_GROUPS["ATS Platforms"]
+                selected_ats = st.multiselect(
+                    "ATS Platforms",
+                    options=ats_options,
+                    default=[],
+                    format_func=lambda k: EVER_JOBS_PLATFORMS.get(k, {}).get("display", k),
+                    label_visibility="collapsed",
+                    key="ej_ats_platforms",
+                    help="Applicant Tracking System platforms (Greenhouse, Lever, Workday, etc.). These are job POSTING platforms, not resume scorers.",
+                )
 
-    # ── Row 3: Unified platform selector ──
-    st.markdown('<p class="section-label">🌐 Job Platforms</p>', unsafe_allow_html=True)
-    from src.ever_jobs_bridge.platforms import PLATFORM_GROUPS, INDIA_DEFAULT_PLATFORMS, EVER_JOBS_PLATFORMS
-
-    ej_col1, ej_col2, ej_col3 = st.columns(3)
-
-    with ej_col1:
-        with st.expander(f"🔍 Search Boards ({len(PLATFORM_GROUPS['Search Boards'])})"):
-            sb_options  = PLATFORM_GROUPS["Search Boards"]
-            sb_defaults = [p for p in INDIA_DEFAULT_PLATFORMS if p in sb_options]
-            selected_search_boards = st.multiselect(
-                "Search Boards",
-                options=sb_options,
-                default=sb_defaults,
-                format_func=lambda k: EVER_JOBS_PLATFORMS.get(k, {}).get("display", k),
-                label_visibility="collapsed",
-                key="ej_search_boards",
-            )
+        with ej_col3:
+            with st.expander(f"🏭 Company Pages ({cp_count})"):
+                cp_options  = PLATFORM_GROUPS["Company Pages"]
+                selected_company = st.multiselect(
+                    "Company Pages",
+                    options=cp_options,
+                    default=[],
+                    format_func=lambda k: EVER_JOBS_PLATFORMS.get(k, {}).get("display", k),
+                    label_visibility="collapsed",
+                    key="ej_company_pages",
+                    help="Direct company career page scrapers. Many are US-centric and slower than search boards.",
+                )
+
+        ever_jobs_platforms = selected_search_boards + selected_ats + selected_company
+        use_ever_jobs = len(ever_jobs_platforms) > 0
 
-    with ej_col2:
-        with st.expander(f"🏢 ATS Platforms ({len(PLATFORM_GROUPS['ATS Platforms'])})"):
-            ats_options  = PLATFORM_GROUPS["ATS Platforms"]
-            selected_ats = st.multiselect(
-                "ATS Platforms",
-                options=ats_options,
-                default=[],
-                format_func=lambda k: EVER_JOBS_PLATFORMS.get(k, {}).get("display", k),
-                label_visibility="collapsed",
-                key="ej_ats_platforms",
-                help="Applicant Tracking System platforms (Greenhouse, Lever, Workday, etc.). These are job POSTING platforms, not resume scorers.",
+        if len(ever_jobs_platforms) > 30:
+            st.warning(
+                f"⚠ **{len(ever_jobs_platforms)} platforms selected.** "
+                "Runs with >30 platforms may take 5–10 minutes. "
+                "Consider reducing to your top platforms for faster results.",
+                icon="⚠️",
             )
+        elif use_ever_jobs:
+            st.html(f'<div class="micro-success">🌐 {len(ever_jobs_platforms)} platform{"s" if len(ever_jobs_platforms)!=1 else ""} selected</div>')
+        else:
+            st.caption("Select platforms where the agent should search.")
+
+        # ────────────────────────────────────────────────────────────────────
+        # STEP 6: AI Match Score
+        # ────────────────────────────────────────────────────────────────────
+        st.html("""
+<div class="step-card-container">
+  <div class="step-card-header">
+    <div class="step-number">6</div>
+    <p class="step-title-text">AI match score threshold</p>
+  </div>
+  <p class="step-helper">Jobs scoring below this get a basic template resume. Jobs above get a fully AI-tailored ATS-optimized version.</p>
+</div>""")
 
-    with ej_col3:
-        with st.expander(f"🏭 Company Pages ({len(PLATFORM_GROUPS['Company Pages'])})"):
-            cp_options  = PLATFORM_GROUPS["Company Pages"]
-            selected_company = st.multiselect(
-                "Company Pages",
-                options=cp_options,
-                default=[],
-                format_func=lambda k: EVER_JOBS_PLATFORMS.get(k, {}).get("display", k),
-                label_visibility="collapsed",
-                key="ej_company_pages",
-                help="Direct company career page scrapers. Many are US-centric and slower than search boards.",
+        sc1, sc2 = st.columns([2, 1])
+        with sc1:
+            min_score = st.slider(
+                "Minimum AI match score",
+                1, 10, 1,
+                help="Set to 1 to generate LLM resumes for ALL jobs. Set higher for more focused tailoring.",
             )
+            labels = {1: "Broad — all jobs", 4: "Balanced", 7: "Focused", 10: "Highly targeted"}
+            nearest = min(labels.keys(), key=lambda k: abs(k - min_score))
+            st.caption(f"Mode: **{labels[nearest]}** — Score {min_score}/10")
+        with sc2:
+            est_jobs = max_jobs * max(1, len(ever_jobs_platforms))
+            est_time = max(2, est_jobs // 50)
+            st.html(f"""
+<div style="background:#F8FAFC; border:1px solid #E2E8F0; border-radius:10px; padding:14px; text-align:center;">
+  <div style="font-size:0.78rem; color:#64748B; margin-bottom:4px;">Estimated scan</div>
+  <div style="font-size:1.3rem; font-weight:700; color:#2563EB;">~{min(est_jobs, 500)} jobs</div>
+  <div style="font-size:0.75rem; color:#94A3B8; margin-top:2px;">~{est_time}–{est_time*2} minutes</div>
+</div>""")
 
-    ever_jobs_platforms = selected_search_boards + selected_ats + selected_company
-    use_ever_jobs = len(ever_jobs_platforms) > 0
+        # ────────────────────────────────────────────────────────────────────
+        # STEP 7: Google Sheet Connection
+        # ────────────────────────────────────────────────────────────────────
+        gs_status_cls = "completed" if sheets_ok else ""
+        gs_num_cls = "done" if sheets_ok else ""
+        st.html(f"""
+<div class="step-card-container {gs_status_cls}">
+  <div class="step-card-header">
+    <div class="step-number {gs_num_cls}">{"✓" if sheets_ok else "7"}</div>
+    <p class="step-title-text">Application tracker</p>
+  </div>
+  <p class="step-helper">Save all discovered jobs into a Google Sheet for easy tracking and sharing.</p>
+</div>""")
 
-    if len(ever_jobs_platforms) > 30:
-        st.warning(
-            f"⚠ **{len(ever_jobs_platforms)} platforms selected.** "
-            "Runs with >30 platforms may take 5–10 minutes. "
-            "Consider reducing to your top platforms for faster results.",
-            icon="⚠️",
-        )
-    elif use_ever_jobs:
-        st.caption(f"✓ {len(ever_jobs_platforms)} platform(s) selected")
+        if sheets_ok:
+            st.html(f'<div class="micro-success">✅ {sheets_status}</div>')
+            from config import GOOGLE as _G
+            st.caption(f"Sheet: `{_G['sheet_id'][:20]}…` · Tab: `{_G['sheet_tab']}`")
+        else:
+            st.html(f"""
+<div style="background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; padding:12px 16px; margin:8px 0;">
+  <span style="font-size:0.85rem; color:#92400E;">
+    ⚠ {sheets_status}. Results will be saved locally.
+  </span>
+</div>""")
+            with st.expander("🔧 Advanced setup"):
+                st.markdown("""
+1. Create a Google service account at [console.cloud.google.com](https://console.cloud.google.com)
+2. Download the JSON credentials file
+3. Save as `google_credentials.json` in the project root
+4. Share your Google Sheet with the service account email
+
+Or run `python connect_google.py` for OAuth-based setup.
+""")
+
+    # ────────────────────────────────────────────────────────────────────
+    # RIGHT SIDEBAR — Run Readiness Panel
+    # ────────────────────────────────────────────────────────────────────
+    with col_sidebar:
+        readiness = _readiness_score(has_resume, roles, locations, ever_jobs_platforms, sheets_ok, min_score)
+        level_name, is_gold = _readiness_level(readiness)
+
+        st.html(f"""
+<div class="readiness-panel">
+  <p class="readiness-title">Run Readiness</p>
+  <p class="readiness-score">{readiness}%</p>
+  <p class="readiness-label">Setup completeness</p>
+  <div class="readiness-badge {"gold" if is_gold else ""}">{level_name}</div>
+</div>""")
 
-    st.divider()
+        # Checklist
+        checks = [
+            (has_resume,                "Resume uploaded"),
+            (bool(roles),               f"{len(roles)} role{'s' if len(roles)!=1 else ''} selected" if roles else "Select target roles"),
+            (bool(locations),           f"{len(locations)} location{'s' if len(locations)!=1 else ''} set" if locations else "Choose locations"),
+            (bool(ever_jobs_platforms), f"{len(ever_jobs_platforms)} platform{'s' if len(ever_jobs_platforms)!=1 else ''} active" if ever_jobs_platforms else "Select platforms"),
+            (sheets_ok,                 "Tracker connected" if sheets_ok else "Connect Google Sheet"),
+            (min_score is not None,     f"Match score: {min_score}/10"),
+        ]
+
+        checklist_html = ""
+        for done, label in checks:
+            icon_cls = "check-done" if done else "check-pending"
+            icon_txt = "✓" if done else ""
+            label_cls = "done" if done else "pending"
+            checklist_html += f"""
+<div class="checklist-item">
+  <div class="{icon_cls}">{icon_txt}</div>
+  <span class="check-label {label_cls}">{label}</span>
+</div>"""
 
-    # ── Row 4: AI + Output settings ──
-    col_score, col_gs = st.columns([2, 3])
+        pending = sum(1 for d, _ in checks if not d)
+        if pending > 0:
+            cta_copy = f"Complete {pending} more step{'s' if pending!=1 else ''} to unlock a better search."
+        else:
+            cta_copy = "You're all set! Launch your search."
+
+        st.html(f"""
+<div style="background:#FFFFFF; border:1px solid #E2E8F0; border-radius:14px; padding:16px; margin-top:12px;
+            box-shadow:0 1px 3px rgba(0,0,0,0.04);">
+  {checklist_html}
+  <p style="font-size:0.8rem; color:#64748B; margin:12px 0 0; text-align:center; font-weight:500;">
+    {cta_copy}
+  </p>
+</div>""")
 
-    with col_score:
-        st.markdown('<p class="section-label">🤖 Min Score for LLM Resume</p>', unsafe_allow_html=True)
-        min_score = st.slider("Min score", 1, 10, 1, label_visibility="collapsed",
-                              help="Jobs scoring ≥ this get a fully AI-tailored resume. Set to 1 to generate LLM resumes for ALL jobs.")
+        # Summary
+        st.html(f"""
+<div style="background:#FFFFFF; border:1px solid #E2E8F0; border-radius:14px; padding:16px; margin-top:12px;
+            box-shadow:0 1px 3px rgba(0,0,0,0.04);">
+  <p style="font-size:0.85rem; font-weight:700; color:#0F172A; margin:0 0 10px;">Summary</p>
+  <div class="summary-row"><span class="summary-key">Roles</span><span class="summary-val">{len(roles)}</span></div>
+  <div class="summary-row"><span class="summary-key">Locations</span><span class="summary-val">{len(locations)}</span></div>
+  <div class="summary-row"><span class="summary-key">Platforms</span><span class="summary-val">{len(ever_jobs_platforms)}</span></div>
+  <div class="summary-row"><span class="summary-key">Freshness</span><span class="summary-val">Last {days_posted} days</span></div>
+  <div class="summary-row"><span class="summary-key">Max / platform</span><span class="summary-val">{max_jobs}</span></div>
+  <div class="summary-row"><span class="summary-key">AI match min</span><span class="summary-val">{min_score}/10</span></div>
+</div>""")
 
-    with col_gs:
-        st.markdown('<p class="section-label">📊 Google Sheet</p>', unsafe_allow_html=True)
-        sheets_ok, sheets_status = _sheets_configured()
-        if sheets_ok:
-            st.success(f"✓ {sheets_status}", icon="✅")
-        else:
-            st.warning(f"⚠ {sheets_status}", icon="⚠️")
-        from config import GOOGLE as _G
-        st.caption(f"Sheet ID: `{_G['sheet_id'][:20]}…`  Tab: `{_G['sheet_tab']}`")
-
-
-# ════════════════════════════════════════════════════════════════════════════════
-# START BUTTON
-# ════════════════════════════════════════════════════════════════════════════════
-btn_col = st.columns([1, 2, 1])[1]
-with btn_col:
-    start = st.button(
-        "▶  Start Search" if not st.session_state.running else "⏳  Running…",
-        disabled=st.session_state.running,
-        use_container_width=True,
-        type="primary",
-    )
+        # Achievement badges
+        badges_html = ""
+        badge_defs = [
+            (has_resume, "📄 Resume Ready"),
+            (len(roles) >= 2, "🎯 Role Focused"),
+            (len(ever_jobs_platforms) >= 5, "🌐 Platform Explorer"),
+            (sheets_ok, "📊 Tracker Connected"),
+            (readiness >= 100, "⚡ Power Search"),
+        ]
+        for earned, label in badge_defs:
+            cls = "badge-earned" if earned else "badge-locked"
+            badges_html += f'<span class="achievement-badge {cls}">{label}</span>'
+
+        st.html(f"""
+<div style="background:#FFFFFF; border:1px solid #E2E8F0; border-radius:14px; padding:16px; margin-top:12px;
+            box-shadow:0 1px 3px rgba(0,0,0,0.04);">
+  <p style="font-size:0.85rem; font-weight:700; color:#0F172A; margin:0 0 10px;">Achievements</p>
+  <div class="badge-row">{badges_html}</div>
+</div>""")
+
+        # Start Search CTA
+        st.markdown("---")
+        can_start = has_resume and bool(roles) and bool(locations) and bool(ever_jobs_platforms)
+        start = st.button(
+            "🚀 Start AI Job Search" if not st.session_state.running else "⏳ Running…",
+            disabled=st.session_state.running or not can_start,
+            use_container_width=True,
+            type="primary",
+            key="start_btn",
+        )
+        if not can_start:
+            missing = []
+            if not has_resume: missing.append("resume")
+            if not roles: missing.append("roles")
+            if not locations: missing.append("locations")
+            if not ever_jobs_platforms: missing.append("platforms")
+            st.caption(f"Missing: {', '.join(missing)}")
 
-# Progress placeholders (always declared — updated when running)
+else:
+    # When running or showing results, we still need these variables
+    # They won't be used for starting a new run, but the pipeline needs them defined
+    roles = st.session_state.get("_last_roles", [])
+    locations = st.session_state.get("_last_locations", [])
+    days_posted = st.session_state.get("_last_days", 7)
+    max_jobs = st.session_state.get("_last_max_jobs", 25)
+    min_score = st.session_state.get("_last_min_score", 1)
+    ever_jobs_platforms = st.session_state.get("_last_platforms", [])
+    start = False
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# START BUTTON (also shown at top of results for re-running)
+# ══════════════════════════════════════════════════════════════════════════════
+if not show_config and not st.session_state.running and st.session_state.results:
+    with st.columns([1, 2, 1])[1]:
+        st.markdown('<div class="secondary-btn">', unsafe_allow_html=True)
+        if st.button("🔄 New Search", use_container_width=True, key="new_search_btn"):
+            st.session_state.results = None
+            st.session_state.loaded_run = ""
+            st.session_state.progress_pct = 0
+            st.session_state.steps = {}
+            st.rerun()
+        st.markdown('</div>', unsafe_allow_html=True)
+
+# Progress placeholders (always declared)
 progress_placeholder = st.empty()
 steps_placeholder    = st.empty()
 log_placeholder      = st.empty()
 done_placeholder     = st.empty()
 
 
-# ════════════════════════════════════════════════════════════════════════════════
+# ══════════════════════════════════════════════════════════════════════════════
 # LAUNCH PIPELINE
-# ════════════════════════════════════════════════════════════════════════════════
-if start and not st.session_state.running:
+# ══════════════════════════════════════════════════════════════════════════════
+if show_config and start and not st.session_state.running:
     if not os.path.exists("data/resume/resume.pdf"):
-        st.error("Please upload your resume above first.")
+        st.error("Please upload your resume first.")
     elif not roles:
-        st.error("Please select at least one role.")
+        st.error("Please select at least one target role.")
     elif not locations:
         st.error("Please select at least one location.")
+    elif not ever_jobs_platforms:
+        st.error("Please select at least one platform.")
     else:
+        # Save config to session state for display during run
+        st.session_state["_last_roles"] = roles
+        st.session_state["_last_locations"] = locations
+        st.session_state["_last_days"] = days_posted
+        st.session_state["_last_max_jobs"] = max_jobs
+        st.session_state["_last_min_score"] = min_score
+        st.session_state["_last_platforms"] = ever_jobs_platforms
+
         st.session_state.running        = True
         st.session_state.results        = None
         st.session_state.loaded_run     = ""
@@ -624,7 +1202,6 @@ if start and not st.session_state.running:
                          _platforms=platforms_cfg, _jscfg=job_search_cfg, _ocfg=output_cfg,
                          _q=_progress_q):
             import time as _t, traceback as _tb
-            # Bind THIS session's queue (shadows module-level helpers)
             _progress_q = _q
             def _q_log(msg):         _q.put(("log", msg))
             def _q_progress(pct, lbl=""): _q.put(("progress", pct, lbl))
@@ -763,7 +1340,6 @@ if start and not st.session_state.running:
                 else:
                     _step_skip("naukri")
 
-                # All non-legacy platforms (150+) → EverJobsScraper
                 _ej_platforms = [p for p in _all_plats if p not in _legacy_keys]
                 if _ej_platforms:
                     from src.scrapers.ever_jobs import EverJobsScraper
@@ -787,7 +1363,6 @@ if start and not st.session_state.running:
                         if outer_done:
                             break
                         for loc in _jscfg["locations"]:
-                            # ── Platform-level total cap (not per-query) ──
                             if len(platform_jobs) >= MAX_PER_PLAT:
                                 outer_done = True
                                 break
@@ -821,7 +1396,6 @@ if start and not st.session_state.running:
                         _q.put(("step", plat_id, "active",
                                 f"Role {ri+1}/{n_roles} — {len(platform_jobs)} jobs so far", ""))
 
-                    # Bulk-fetch descriptions
                     needs_desc = [j for j in platform_jobs if not j.description]
                     if needs_desc and hasattr(scraper, "get_details_bulk"):
                         _q.put(("step", plat_id, "active",
@@ -864,7 +1438,7 @@ if start and not st.session_state.running:
                 _q_progress(78, "Assessment complete!")
                 _q_log(f"✅ Assessment done — High: {high}, Good: {med}, Low: {low}")
 
-                # ── Generate resumes (ALL jobs, no cap) ──
+                # ── Generate resumes ──
                 t0          = _t.time()
                 llm_elig    = sum(1 for j in assessed_jobs if j.get("relevance_score",0) >= _min_score)
                 phase2_cfgs = [m for m in ASSESSMENT_MODELS if m.get("phase2") and m.get("api_key")]
@@ -883,7 +1457,7 @@ if start and not st.session_state.running:
                 assessed_jobs = customizer.customize_for_jobs(
                     assessed_jobs,
                     min_score_for_llm=_min_score,
-                    max_llm_resumes=len(assessed_jobs),   # NO CAP — generate for all
+                    max_llm_resumes=len(assessed_jobs),
                     generate_all=True,
                     model_cfgs=phase2_cfgs,
                     progress_cb=_resume_cb,
@@ -932,7 +1506,6 @@ if start and not st.session_state.running:
                 _q_log(f"✅ Excel: {excel_path}")
                 _q_log(f"✅ Resumes folder: {_ocfg['resumes_dir']}")
 
-                # ── Save to run history ──
                 try:
                     from src.run_history import save_run
                     save_run(assessed_jobs, {
@@ -960,7 +1533,7 @@ if start and not st.session_state.running:
         st.rerun()
 
 
-# ── Drain progress queue into session state ───────────────────────────────────
+# ── Drain progress queue ─────────────────────────────────────────────────────
 if st.session_state.running:
     while True:
         try:
@@ -991,7 +1564,7 @@ if st.session_state.running:
             break
 
 
-# ── Render progress ───────────────────────────────────────────────────────────
+# ── Render progress ──────────────────────────────────────────────────────────
 if st.session_state.running or (st.session_state.progress_pct and st.session_state.results is None):
     pct = st.session_state.progress_pct
     lbl = st.session_state.progress_label
@@ -1003,30 +1576,28 @@ if st.session_state.running or (st.session_state.progress_pct and st.session_sta
 
     if st.session_state.log_msgs:
         log_placeholder.html(
-            '<p style="font-weight:700;color:#e0e0e0;margin:0 0 4px 0">Live Log</p>' +
+            '<p style="font-weight:700;color:#0F172A;margin:0 0 4px 0">Live Log</p>' +
             _render_log(st.session_state.log_msgs)
         )
 
-# ── Done banner ───────────────────────────────────────────────────────────────
+# ── Done banner ──────────────────────────────────────────────────────────────
 if not st.session_state.running and st.session_state.results:
     n    = len(st.session_state.results)
     high = sum(1 for j in st.session_state.results if j.get("relevance_score", 0) >= 8)
     pdfs = sum(1 for j in st.session_state.results if j.get("resume_pdf_path"))
     hist_note = f" · Saved to history" if st.session_state.loaded_run else ""
     done_placeholder.success(
-        f"✅ **Done!** Found **{n} jobs** · **{high} high priority** · **{pdfs} PDFs ready**{hist_note} — "
-        "see the tabs below."
+        f"✅ **Done!** Found **{n} jobs** · **{high} high priority** · **{pdfs} PDFs ready**{hist_note}"
     )
 
-# Poll while running
 if st.session_state.running:
     time.sleep(0.8)
     st.rerun()
 
 
-# ═══════════════════════���════════════════════════════════════════════════════════
-# RESULTS TABS (shown once results are available)
-# ════════════════════════════════════════════════════════════════════════════════
+# ══════════════════════════════════════════════════════════════════════════════
+# RESULTS TABS
+# ══════════════════════════════════════════════════════════════════════════════
 results = st.session_state.results
 
 if results is not None:
@@ -1039,10 +1610,8 @@ if results is not None:
     # TAB 1 — RESULTS
     # ══════════════════════════════════════════════════════════════════════════
     with tab_results:
-        # Metrics summary
         st.html(_metrics_html(results))
 
-        # Download buttons
         dl1, dl2, dl3 = st.columns(3)
         with dl1:
             xp = st.session_state.excel_path
@@ -1053,14 +1622,11 @@ if results is not None:
                                        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
                                        use_container_width=True)
         with dl2:
-            # Current run's resume folder only (most recent date subfolder)
             resume_base = Path("data/output/resumes")
             if st.session_state.loaded_run:
-                # For a loaded historical run, find the date from the first job
                 first_res = next((j.get("resume_path","") for j in results if j.get("resume_path")), "")
                 run_folder = Path(first_res).parent if first_res else None
             else:
-                # Current run: most recently modified date subfolder
                 date_dirs = sorted(
                     [d for d in resume_base.iterdir() if d.is_dir()],
                     key=lambda d: d.stat().st_mtime, reverse=True,
@@ -1081,11 +1647,11 @@ if results is not None:
                     n_pdf  = len(pdf_f)
                     n_docx = len(docx_f)
                     st.download_button(
-                        f"⬇ Download Resumes ({n_docx} DOCX + {n_pdf} PDF = {len(all_rf)} files)",
+                        f"⬇ Resumes ({n_docx} DOCX + {n_pdf} PDF)",
                         zbuf.read(), "tailored_resumes.zip", "application/zip",
                         use_container_width=True,
                     )
-                    st.caption(f"📁 Folder: `{run_folder}`")
+                    st.caption(f"📁 {run_folder}")
         with dl3:
             if sheets_ok:
                 from config import GOOGLE as _GC
@@ -1094,7 +1660,6 @@ if results is not None:
 
         st.divider()
 
-        # Filters
         col_f1, col_f2, col_f3 = st.columns(3)
         with col_f1:
             f_score = st.slider("Min score", 1, 10, 1, key="f_score")
@@ -1118,13 +1683,11 @@ if results is not None:
         st.caption(f"Showing **{len(filtered)}** of **{n_res}** jobs")
 
         if view_mode.startswith("📋"):
-            # Card view — top 10
             for rank, job in enumerate(filtered[:10], 1):
                 st.html(_job_card_html(job, rank))
             if len(filtered) > 10:
                 st.caption(f"… and {len(filtered)-10} more. Switch to Table view to see all.")
         else:
-            # Full table
             if not filtered:
                 st.info("No jobs match the current filters.")
             else:
@@ -1453,8 +2016,8 @@ if results is not None:
                         colored += f'<span style="color:#d1d5db">{safe}</span>'
 
                 st.markdown(
-                    f'<div style="background:#080a10;border:1px solid #1e2235;border-radius:8px;'
-                    f'padding:14px;font-family:Courier New,monospace;font-size:0.78rem;'
+                    f'<div style="background:#1E293B;border:1px solid #334155;border-radius:10px;'
+                    f'padding:14px;font-family:JetBrains Mono,Courier New,monospace;font-size:0.78rem;'
                     f'max-height:500px;overflow-y:auto;white-space:pre-wrap">'
                     f'{colored}</div>',
                     unsafe_allow_html=True,
@@ -1477,15 +2040,15 @@ if results is not None:
             st.rerun()
 
 else:
-    # No results yet — show a welcome state
-    st.markdown("""
-<div style="text-align:center;padding:48px 24px;color:#6b7280;">
-  <div style="font-size:3rem">🤖</div>
-  <h3 style="color:#9ca3af;margin:12px 0">Ready to find your next PM role</h3>
-  <p style="max-width:420px;margin:0 auto;font-size:0.9rem">
-    Configure your search above, then click <strong style="color:#64b5f6">▶ Start Search</strong>.<br>
-    The agent will scrape multiple platforms, assess every job with 6 AI models,
+    # No results yet and not in config mode (shouldn't happen, but safety net)
+    if not show_config:
+        st.html("""
+<div class="welcome-card">
+  <div class="welcome-icon">🤖</div>
+  <p class="welcome-title">Ready to find your next PM role</p>
+  <p class="welcome-desc">
+    Configure your search settings, then click <strong>Start AI Job Search</strong>.<br>
+    The agent will scrape multiple platforms, assess every job with AI models,
     and generate ATS-optimized resumes for all matches.
   </p>
-</div>
-""", unsafe_allow_html=True)
+</div>""")