UI/UX Overhaul: Premium cyber-medical dark theme, glassmorphic styles, custom SVG metric icons, active pipeline stepper, and Plotly gauge sync

gradio_pharmacopilot_demo.py

@@ -474,7 +474,6 @@ def load_kpi_metrics(searches: int = 0) -> str:
     elif fallback_path.exists():
         text = fallback_path.read_text(encoding="utf-8", errors="ignore")
         if "ocr_accuracy" in text:
-            # Keep a conservative fallback tied to the checked-in report values.
             ocr_accuracy = 0.37888446215139443
             retrieval_accuracy = 0.6055776892430279
 
@@ -487,10 +486,42 @@ def load_kpi_metrics(searches: int = 0) -> str:
     return f"""
     <div class="app-shell">
       <div class="metric-row">
-        <div class="metric"><span>Session Searches</span><strong>{searches}</strong></div>
-        <div class="metric"><span>Retrieval Recovery</span><strong>{retrieval_text}</strong></div>
-        <div class="metric"><span>Medicines Indexed</span><strong>{indexed}</strong></div>
-        <div class="metric"><span>Rx Samples Tested</span><strong>2,510</strong></div>
+        <div class="metric">
+          <div class="metric-head">
+            <span>Session Searches</span>
+            <div class="metric-icon" style="color: var(--glow-cyan); background: rgba(6, 182, 212, 0.12);">
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+            </div>
+          </div>
+          <strong>{searches}</strong>
+        </div>
+        <div class="metric">
+          <div class="metric-head">
+            <span>Retrieval Recovery</span>
+            <div class="metric-icon" style="color: var(--glow-green); background: rgba(16, 185, 129, 0.12);">
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
+            </div>
+          </div>
+          <strong>{retrieval_text}</strong>
+        </div>
+        <div class="metric">
+          <div class="metric-head">
+            <span>Medicines Indexed</span>
+            <div class="metric-icon" style="color: var(--glow-indigo); background: rgba(99, 102, 241, 0.12);">
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
+            </div>
+          </div>
+          <strong>{indexed}</strong>
+        </div>
+        <div class="metric">
+          <div class="metric-head">
+            <span>Rx Samples Tested</span>
+            <div class="metric-icon" style="color: #f43f5e; background: rgba(244, 63, 94, 0.12);">
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 16px; height: 16px;"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg>
+            </div>
+          </div>
+          <strong>2,510</strong>
+        </div>
       </div>
     </div>
     """
@@ -503,21 +534,27 @@ def confidence_gauge(confidence: int = 97):
         go.Indicator(
             mode="gauge+number",
             value=confidence,
-            number={"suffix": "%", "font": {"size": 34}},
+            number={"suffix": "%", "font": {"size": 34, "color": "#ffffff"}},
             gauge={
-                "axis": {"range": [0, 100], "tickwidth": 1},
-                "bar": {"color": "#0f9f6e"},
-                "bgcolor": "white",
-                "borderwidth": 0,
+                "axis": {"range": [0, 100], "tickwidth": 1, "tickcolor": "#94a3b8", "tickfont": {"color": "#94a3b8"}},
+                "bar": {"color": "#10b981"},
+                "bgcolor": "rgba(255, 255, 255, 0.05)",
+                "borderwidth": 1,
+                "bordercolor": "rgba(255, 255, 255, 0.15)",
                 "steps": [
-                    {"range": [0, 60], "color": "#fee2e2"},
-                    {"range": [60, 85], "color": "#fef3c7"},
-                    {"range": [85, 100], "color": "#dcfce7"},
+                    {"range": [0, 60], "color": "rgba(239, 68, 68, 0.15)"},
+                    {"range": [60, 85], "color": "rgba(245, 158, 11, 0.15)"},
+                    {"range": [85, 100], "color": "rgba(16, 185, 129, 0.15)"},
                 ],
             },
         )
     )
-    fig.update_layout(height=230, margin=dict(l=20, r=20, t=20, b=8), paper_bgcolor="rgba(0,0,0,0)")
+    fig.update_layout(
+        height=230,
+        margin=dict(l=20, r=20, t=20, b=8),
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)"
+    )
     return fig
 
 
@@ -538,20 +575,34 @@ def pipeline_html(stage: int = 0, validation_status: str = "waiting") -> str:
     cards = []
     logs = []
     for i, (title, status) in enumerate(steps, start=1):
-        active = i <= stage
+        if i < stage:
+            step_class = "done"
+        elif i == stage:
+            step_class = "current" if stage < 5 else "done"
+        else:
+            step_class = ""
+
         cards.append(
             f"""
-            <div class="flow-step {'done' if active else ''}">
+            <div class="flow-step {step_class}">
               <span>{i}</span>
               <strong>{title}</strong>
             </div>
             """
         )
-        if active:
-            logs.append(f"<li>✓ {title} {status}</li>")
+        if i <= stage:
+            logs.append(f"<li>{title} {status}</li>")
+            
+    pulse_indicator = ""
+    if stage > 0 and stage < 5:
+        pulse_indicator = '<span style="display:inline-block; width:10px; height:10px; background:var(--glow-cyan); border-radius:50%; margin-left:8px; animation: pulse-step 1.5s infinite;"></span>'
+
     return f"""
     <div class="pipeline">
-      <div class="pipeline-title">Actual Run Trace</div>
+      <div class="pipeline-title" style="display:flex; align-items:center;">
+        <span>SYSTEM DIAGNOSTICS TRACE</span>
+        {pulse_indicator}
+      </div>
       <div class="flow">{''.join(cards)}</div>
       <ul class="logs">{''.join(logs)}</ul>
     </div>
@@ -581,22 +632,22 @@ def medicine_details_html(
     )
     return f"""
     <div class="result-card">
-      <h3>Prescription Details</h3>
+      <h3>Prescription Analysis</h3>
       <dl class="details">
         <dt>Medicine</dt><dd>{medicine_label}</dd>
-        <dt>Generic</dt><dd>{generic_label}</dd>
+        <dt>Generic</dt><dd style="color: var(--glow-cyan) !important;">{generic_label}</dd>
         <dt>Strength</dt><dd>{strength_label}</dd>
         <dt>Manufacturer</dt><dd>{manufacturer_label}</dd>
-        <dt>Confidence</dt><dd>{confidence}%</dd>
-        <dt>Category</dt><dd>{category_label}</dd>
+        <dt>Confidence</dt><dd style="color: {'var(--text-success)' if accepted else 'var(--text-warning)'} !important;">{confidence}%</dd>
+        <dt>Category</dt><dd><span style="padding: 2px 8px; background: rgba(99,102,241,0.15); border-radius: 4px; font-size:12px; color: #a5b4fc;">{category_label}</span></dd>
         <dt>Price</dt><dd>{price_label}</dd>
       </dl>
       <div class="explain">
-        <h4>AI Explanation</h4>
+        <h4>AI Diagnostic Breakdown</h4>
         <p><b>OCR detected:</b> "{ocr_text}"</p>
-        <p><b>Retrieved:</b> {display_name} ({medicine.get('name', 'Unknown')})</p>
-        <p><b>Validation:</b> {validation_label}</p>
-        <p><b>Inventory:</b> {inventory_label}</p>
+        <p><b>Retrieved Master Match:</b> {display_name} ({medicine.get('name', 'Unknown')})</p>
+        <p><b>Nemotron Validation:</b> <span style="color: {'var(--text-success)' if accepted else 'var(--text-warning)'}; font-weight: 600;">{validation_label}</span></p>
+        <p><b>Inventory Location:</b> {inventory_label}</p>
       </div>
     </div>
     """
@@ -614,15 +665,19 @@ def translated_prescription_html(plan: dict[str, Any]) -> str:
         ("Instructions", plan.get("instructions") or "Pharmacist review required"),
     ]
     row_html = "".join(f"<dt>{label}</dt><dd>{value}</dd>" for label, value in rows)
-    status = plan.get("status", "needs_review").replace("_", " ").title()
+    status_val = plan.get("status", "needs_review")
+    status_label = status_val.replace("_", " ").title()
+    status_class = "status-pill"
+    if status_val == "needs_review":
+        status_class += " needs-review"
     return f"""
     <div class="translated-card">
       <div class="translated-head">
-        <h3>Translated Prescription</h3>
-        <span class="status-pill">{status}</span>
+        <h3>Translated Instruction Plan</h3>
+        <span class="{status_class}">{status_label}</span>
       </div>
       <dl class="details translated-details">{row_html}</dl>
-      <p class="fine-print">Generated from OCR text and retrieval candidates. Confirm before dispensing.</p>
+      <p class="fine-print">Generated via local LLM + OCR validation pipeline. Verify dosage instructions before dispensing.</p>
     </div>
     """
 
@@ -631,18 +686,19 @@ def package_status_html(inventory: dict[str, Any], accepted: bool = True) -> str
     if not accepted:
         return """
         <div class="stock-card">
-          <div><span>Available Stock</span><strong>-</strong></div>
+          <div><span>Available Stock</span><strong style="color: var(--text-muted);">-</strong></div>
           <div><span>Status</span><strong class="bad">Needs Review</strong></div>
-          <div><span>Shelf</span><strong>Hidden</strong></div>
+          <div><span>Shelf Location</span><strong style="color: var(--text-muted);">Hidden</strong></div>
         </div>
         """
     status = "In Stock" if inventory.get("quantity", 0) > 0 else "Out of Stock"
     dot_class = "ok" if inventory.get("quantity", 0) > 0 else "bad"
+    shelf_loc = f"Shelf {inventory.get('shelf', '-')} · Row {inventory.get('row', '-')}"
     return f"""
     <div class="stock-card">
       <div><span>Available Stock</span><strong>{inventory.get('quantity', 0)}</strong></div>
       <div><span>Status</span><strong class="{dot_class}">{status}</strong></div>
-      <div><span>Shelf</span><strong>{inventory.get('shelf', '-')} · Row {inventory.get('row', '-')}</strong></div>
+      <div><span>Shelf Location</span><strong>{shelf_loc}</strong></div>
     </div>
     """
 
@@ -651,12 +707,13 @@ def candidates_html(candidates: list[dict[str, Any]]) -> str:
     rows = []
     for rank, item in enumerate(candidates, start=1):
         score = round(item["score"] * 100)
+        score_color = "var(--text-success)" if score > 80 else ("var(--text-warning)" if score > 50 else "var(--text-muted)")
         rows.append(
-            f"<tr><td>{rank}</td><td>{item['label']}</td><td>{item['medicine']['name']}</td><td>{score}%</td></tr>"
+            f"<tr><td style='font-weight:600; color:var(--glow-cyan);'>{rank}</td><td style='font-weight:600;'>{item['label']}</td><td>{item['medicine']['name']}</td><td style='font-weight:700; color:{score_color};'>{score}%</td></tr>"
         )
     return f"""
     <table class="candidate-table">
-      <thead><tr><th>#</th><th>Candidate</th><th>Canonical</th><th>Score</th></tr></thead>
+      <thead><tr><th>Rank</th><th>Candidate Alias</th><th>Canonical Name</th><th>Match Score</th></tr></thead>
       <tbody>{''.join(rows)}</tbody>
     </table>
     """
@@ -669,12 +726,25 @@ def ocr_compare_html(
     confidence: int,
     plan: dict[str, Any],
 ) -> str:
-    corrected = display_name if plan.get("status") == "validated" else f"Needs review: {display_name}"
+    accepted = plan.get("status") == "validated" and confidence >= ACCEPTANCE_THRESHOLD
+    corrected = display_name if accepted else f"Needs review: {display_name}"
+    canonical = medicine['name'] if accepted else 'Not confirmed'
+    corrected_color = "var(--text-success)" if accepted else "var(--text-warning)"
+    canonical_color = "var(--glow-indigo)" if accepted else "var(--text-muted)"
     return f"""
     <div class="compare-grid">
-      <div><span>OCR Output</span><strong>{ocr_text}</strong></div>
-      <div><span>AI Corrected</span><strong>{corrected}</strong></div>
-      <div><span>Canonical</span><strong>{medicine['name'] if plan.get('status') == 'validated' else 'Not confirmed'}</strong></div>
+      <div style="border-left: 3px solid var(--text-warning) !important;">
+        <span>Raw OCR Output</span>
+        <strong style="color: var(--text-warning) !important; font-family: monospace;">"{ocr_text}"</strong>
+      </div>
+      <div style="border-left: 3px solid {corrected_color} !important;">
+        <span>AI Corrected Candidate</span>
+        <strong style="color: {corrected_color} !important;">{corrected}</strong>
+      </div>
+      <div style="border-left: 3px solid {canonical_color} !important;">
+        <span>Master Database Canonical</span>
+        <strong style="color: {canonical_color} !important;">{canonical}</strong>
+      </div>
     </div>
     """
 
@@ -828,233 +898,564 @@ def locate_on_shelf(shelf_image, state: dict[str, Any] | None):
 
 
 CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');
+
 :root {
-  --green: #0f9f6e;
-  --ink: #14213d;
-  --muted: #5f6b7a;
-  --line: #d9e2ec;
-  --soft: #f4f8f7;
-  --blue: #1769aa;
+  --glow-green: #10b981;
+  --glow-green-hover: #059669;
+  --glow-cyan: #06b6d4;
+  --glow-indigo: #6366f1;
+  --bg-dark: #070b13;
+  --bg-glass: rgba(13, 20, 38, 0.65);
+  --border-glass: rgba(255, 255, 255, 0.08);
+  --border-active: rgba(16, 185, 129, 0.3);
+  --text-main: #f1f5f9;
+  --text-muted: #94a3b8;
+  --text-success: #34d399;
+  --text-warning: #fbbf24;
+  --text-danger: #f87171;
 }
+
+/* Base Styles & Background Override */
 .gradio-container {
-  background: linear-gradient(180deg, #f8fbfb 0%, #edf6f4 100%);
-  color: var(--ink) !important;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-.gradio-container h1,
-.gradio-container h2,
-.gradio-container h3,
-.gradio-container h4,
-.gradio-container p,
-.gradio-container label,
-.gradio-container span,
-.gradio-container strong,
-.gradio-container div {
-  letter-spacing: 0;
+  background: radial-gradient(circle at 50% 0%, #0d172e 0%, #060911 100%) !important;
+  color: var(--text-main) !important;
+  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
+  min-height: 100vh;
+}
+
+/* Title text colors override */
+.gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4, .gradio-container h5, .gradio-container h6 {
+  color: #ffffff !important;
+  font-weight: 700 !important;
 }
+
 .app-shell {
-  width: min(1120px, calc(100vw - 64px));
+  width: min(1120px, calc(100vw - 48px));
   max-width: 1120px;
   margin: 0 auto;
   box-sizing: border-box;
 }
+
+/* Beautiful Hero Header */
 .hero {
-  padding: 24px 28px;
+  padding: 24px 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
+  border: 1px solid var(--border-glass) !important;
+  border-top: 3px solid var(--glow-green) !important;
+  border-radius: 16px !important;
+  background: linear-gradient(135deg, rgba(16, 26, 48, 0.8), rgba(9, 14, 27, 0.8)) !important;
+  backdrop-filter: blur(16px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 15px rgba(16, 185, 129, 0.05);
   margin-top: 24px;
 }
-.hero h1 { color: var(--ink) !important; font-size: 34px; line-height: 1; margin: 0; letter-spacing: 0; }
-.hero p { margin: 8px 0 0; color: var(--muted) !important; font-size: 16px; }
+.hero h1 {
+  font-size: 36px;
+  line-height: 1.1;
+  margin: 0;
+  background: linear-gradient(90deg, #ffffff, #06b6d4, #10b981);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: -0.5px;
+}
+.hero p {
+  margin: 8px 0 0;
+  color: var(--text-muted) !important;
+  font-size: 16px;
+}
 .powered {
-  color: var(--blue) !important;
-  font-weight: 800;
+  color: #60a5fa !important;
+  font-weight: 700;
   text-align: right;
-  background: #edf7ff;
-  border: 1px solid #cfe7fb;
-  border-radius: 8px;
-  padding: 10px 12px;
+  background: rgba(30, 64, 175, 0.15);
+  border: 1px solid rgba(96, 165, 250, 0.25);
+  border-radius: 10px;
+  padding: 8px 14px;
+  font-size: 13px;
+  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  letter-spacing: 0.5px;
 }
+
+/* Metric KPI Layout */
 .metric-row {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  width: min(1120px, calc(100vw - 64px));
+  gap: 16px;
+  width: min(1120px, calc(100vw - 48px));
   max-width: 1120px;
-  margin: 16px auto 24px;
+  margin: 20px auto 24px;
   box-sizing: border-box;
 }
 .metric {
-  border: 1px solid var(--line);
-  background: #ffffff;
+  border: 1px solid var(--border-glass) !important;
+  background: var(--bg-glass) !important;
+  border-radius: 16px !important;
+  padding: 20px;
+  min-height: 96px;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.metric:hover {
+  transform: translateY(-4px);
+  border-color: var(--glow-cyan) !important;
+  box-shadow: 0 15px 30px rgba(6, 182, 212, 0.15), 0 0 10px rgba(6, 182, 212, 0.05);
+}
+.metric-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.metric span {
+  color: var(--text-muted) !important;
+  font-size: 13px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.metric strong {
+  color: #ffffff !important;
+  font-size: 32px;
+  line-height: 1;
+  font-weight: 800;
+  margin-top: 4px;
+  letter-spacing: -0.5px;
+  background: linear-gradient(180deg, #ffffff 0%, #e2e8f0 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.metric-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--glow-cyan);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(6, 182, 212, 0.1);
   border-radius: 8px;
-  padding: 16px 18px;
-  min-height: 86px;
-  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
+  padding: 4px;
 }
-.metric span, .stock-card span, .compare-grid span { color: var(--muted) !important; display: block; font-size: 13px; }
-.metric strong { color: var(--ink) !important; display: block; font-size: 27px; margin-top: 6px; }
+
+/* Step Capture Card & Upload */
 .capture-card {
-  border: 1px solid var(--line);
-  background: #ffffff;
-  border-radius: 8px;
-  padding: 28px;
-  min-height: 132px;
-  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
+  border: 1px solid var(--border-glass) !important;
+  background: var(--bg-glass) !important;
+  border-radius: 16px !important;
+  padding: 24px 28px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  margin-bottom: 12px;
+}
+.capture-card h2 {
+  color: #ffffff !important;
+  margin: 0 0 8px;
+  font-size: 22px;
+  font-weight: 600;
 }
-.capture-card h2 { color: var(--ink) !important; margin: 0 0 10px; font-size: 24px; }
-.capture-card p { color: var(--muted) !important; margin: 0; }
+.capture-card p {
+  color: var(--text-muted) !important;
+  margin: 0;
+  font-size: 14px;
+}
+
+/* Beautiful Stepper Diagnostics Trace */
 .pipeline {
-  border: 1px solid var(--line);
-  background: #ffffff;
-  border-radius: 8px;
-  padding: 20px;
+  border: 1px solid var(--border-glass) !important;
+  background: var(--bg-glass) !important;
+  border-radius: 16px !important;
+  padding: 24px;
   margin: 0;
-  min-height: 132px;
-  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+.pipeline-title {
+  color: #ffffff !important;
+  font-weight: 700;
+  margin-bottom: 20px;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.flow {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+  position: relative;
 }
-.pipeline-title { color: var(--ink) !important; font-weight: 800; margin-bottom: 12px; }
-.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
 .flow-step {
-  min-height: 86px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--soft);
-  padding: 10px;
+  min-height: 96px;
+  border: 1px solid var(--border-glass) !important;
+  border-radius: 12px !important;
+  background: rgba(255, 255, 255, 0.02) !important;
+  padding: 12px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  transition: all 0.3s ease;
+  position: relative;
 }
 .flow-step span {
-  width: 26px;
-  height: 26px;
+  width: 32px;
+  height: 32px;
   border-radius: 50%;
   display: inline-grid;
   place-items: center;
-  background: #d8e7e3;
-  color: var(--ink);
-  font-weight: 800;
-  margin-bottom: 8px;
-}
-.flow-step.done { border-color: #85d7bd; background: #ebfbf5; }
-.flow-step.done span { background: var(--green); color: #ffffff; }
-.flow-step strong { color: var(--ink) !important; display: block; font-size: 14px; }
-.logs { margin: 14px 0 0; padding-left: 20px; color: #174c3c !important; }
-.result-card, .stock-card {
-  border: 1px solid var(--line);
-  background: #ffffff;
-  border-radius: 8px;
-  padding: 18px;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-muted);
+  font-weight: 700;
+  font-size: 14px;
+  margin-bottom: 12px;
+  border: 1px solid var(--border-glass);
+}
+.flow-step.done {
+  border-color: var(--border-active) !important;
+  background: rgba(16, 185, 129, 0.04) !important;
+  box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);
+}
+.flow-step.done span {
+  background: var(--glow-green);
+  color: #ffffff;
+  border: none;
+  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
+}
+.flow-step.current {
+  border-color: rgba(6, 182, 212, 0.5) !important;
+  background: rgba(6, 182, 212, 0.06) !important;
+  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
+  animation: pulse-step 2s infinite ease-in-out;
+}
+.flow-step.current span {
+  background: var(--glow-cyan);
+  color: #ffffff;
+  border: none;
+  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
+}
+.flow-step strong {
+  color: #ffffff !important;
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+}
+@keyframes pulse-step {
+  0% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4); }
+  70% { box-shadow: 0 0 0 6px rgba(6, 182, 212, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
+}
+
+/* Monospace Diagnostics Console Logs */
+.logs {
+  margin: 20px 0 0;
+  padding: 16px !important;
+  background: #05080e !important;
+  border: 1px solid rgba(255, 255, 255, 0.05) !important;
+  border-radius: 10px;
+  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
+  color: #10b981 !important;
+  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
+  font-size: 13px;
+  list-style-type: none;
+  max-height: 120px;
+  overflow-y: auto;
+}
+.logs li {
+  margin-bottom: 6px;
+  line-height: 1.5;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.logs li::before {
+  content: ">";
+  color: var(--glow-cyan);
+  font-weight: 700;
+}
+
+/* Beautiful Result Card & Medical Details */
+.result-card {
+  border: 1px solid var(--border-glass) !important;
+  background: var(--bg-glass) !important;
+  border-radius: 16px !important;
+  padding: 24px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+}
+.result-card h3 {
+  color: #ffffff !important;
+  margin: 0 0 16px;
+  font-size: 20px;
+  font-weight: 700;
+  border-left: 3px solid var(--glow-green);
+  padding-left: 10px;
 }
-.result-card h3 { color: var(--ink) !important; margin: 0 0 12px; font-size: 20px; }
 .details {
   display: grid;
   grid-template-columns: 140px 1fr;
-  gap: 8px 14px;
+  gap: 10px 16px;
+  margin: 0;
+}
+.details dt {
+  color: var(--text-muted) !important;
+  font-size: 14px;
+  font-weight: 500;
+}
+.details dd {
+  color: #ffffff !important;
   margin: 0;
+  font-weight: 650;
+  font-size: 14px;
 }
-.details dt { color: var(--muted) !important; }
-.details dd { color: var(--ink) !important; margin: 0; font-weight: 750; }
 .explain {
-  margin-top: 16px;
-  border-top: 1px solid var(--line);
-  padding-top: 14px;
+  margin-top: 20px;
+  border-top: 1px solid var(--border-glass);
+  padding-top: 18px;
+}
+.explain h4 {
+  color: #ffffff !important;
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 600;
 }
-.explain h4 { color: var(--ink) !important; margin: 0 0 8px; }
-.explain p { margin: 6px 0; color: #263445 !important; }
+.explain p {
+  margin: 8px 0;
+  color: var(--text-main) !important;
+  font-size: 13.5px;
+  line-height: 1.6;
+}
+.explain p b {
+  color: var(--glow-cyan);
+}
+
+/* Stock Indicators */
 .stock-card {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 10px;
+  gap: 16px;
+  margin-top: 12px;
+  border: 1px solid var(--border-glass) !important;
+  background: var(--bg-glass) !important;
+  border-radius: 16px !important;
+  padding: 18px;
+}
+.stock-card span {
+  color: var(--text-muted) !important;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.stock-card strong {
+  color: #ffffff !important;
+  display: block;
+  font-size: 22px;
+  margin-top: 4px;
+  font-weight: 700;
+}
+.stock-card .ok {
+  color: var(--text-success) !important;
+}
+.stock-card .bad {
+  color: var(--text-danger) !important;
+}
+
+/* Table Candidates */
+.candidate-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: transparent;
 }
-.stock-card strong { color: var(--ink) !important; display: block; font-size: 20px; margin-top: 3px; }
-.stock-card .ok { color: var(--green); }
-.stock-card .bad { color: #b91c1c; }
-.candidate-table { width: 100%; border-collapse: collapse; background: #ffffff; }
 .candidate-table th, .candidate-table td {
-  border-bottom: 1px solid var(--line);
-  padding: 10px 8px;
+  border-bottom: 1px solid var(--border-glass);
+  padding: 12px 14px;
   text-align: left;
-  color: var(--ink) !important;
+  color: var(--text-main) !important;
+  font-size: 13.5px;
 }
-.candidate-table th { color: var(--muted) !important; }
+.candidate-table th {
+  color: var(--text-muted) !important;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.candidate-table tbody tr {
+  transition: background 0.2s ease;
+}
+.candidate-table tbody tr:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+/* Compare Grid */
 .compare-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
+  gap: 16px;
+  margin-top: 12px;
 }
 .compare-grid div {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 14px;
-  background: #ffffff;
+  border: 1px solid var(--border-glass) !important;
+  border-radius: 12px !important;
+  padding: 16px;
+  background: var(--bg-glass) !important;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+  transition: all 0.3s ease;
+}
+.compare-grid div:hover {
+  transform: translateY(-2px);
+  border-color: rgba(99, 102, 241, 0.3) !important;
+}
+.compare-grid strong {
+  color: #ffffff !important;
+  display: block;
+  margin-top: 6px;
+  font-size: 17px;
+  font-weight: 700;
 }
-.compare-grid strong { color: var(--ink) !important; display: block; margin-top: 6px; font-size: 18px; }
+
+/* Translated Prescription Output */
 .translated-card {
-  border: 1px solid var(--line);
-  background: #ffffff;
-  border-radius: 8px;
-  padding: 18px;
-  margin-top: 12px;
+  border: 1px solid var(--border-glass) !important;
+  background: var(--bg-glass) !important;
+  border-radius: 16px !important;
+  padding: 24px;
+  margin-top: 16px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }
 .translated-head {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 20px;
+}
+.translated-head h3 {
+  color: #ffffff !important;
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
 }
-.translated-head h3 { color: var(--ink) !important; margin: 0; font-size: 20px; }
 .status-pill {
-  background: #ebfbf5;
-  border: 1px solid #85d7bd;
-  color: #075f45;
+  background: rgba(16, 185, 129, 0.12);
+  border: 1px solid var(--border-active);
+  color: var(--text-success) !important;
   border-radius: 999px;
-  padding: 5px 10px;
+  padding: 5px 12px;
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.status-pill.needs-review {
+  background: rgba(245, 158, 11, 0.12);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  color: var(--text-warning) !important;
 }
 .translated-details {
-  grid-template-columns: 130px 1fr;
+  grid-template-columns: 140px 1fr;
 }
 .fine-print {
-  border-top: 1px solid var(--line);
-  color: var(--muted) !important;
-  margin: 14px 0 0;
-  padding-top: 12px;
-  font-size: 13px;
+  border-top: 1px solid var(--border-glass);
+  color: var(--text-muted) !important;
+  margin: 20px 0 0;
+  padding-top: 16px;
+  font-size: 12.5px;
+  line-height: 1.5;
 }
-.compact { margin-top: 0; }
+
+/* Action Buttons Custom Styling */
 .gradio-container button.primary,
 .gradio-container button[variant="primary"] {
-  background: var(--green) !important;
-  border-color: var(--green) !important;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
+  border: none !important;
+  color: #ffffff !important;
+  font-weight: 700 !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.5px !important;
+  border-radius: 10px !important;
+  padding: 12px 24px !important;
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
+  transition: all 0.2s ease !important;
+}
+.gradio-container button.primary:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45), 0 0 12px rgba(16, 185, 129, 0.2) !important;
+}
+.gradio-container button.primary:active {
+  transform: translateY(0px) !important;
+}
+
+/* Secondary Buttons */
+.gradio-container button.secondary,
+.gradio-container button:not(.primary) {
+  background: rgba(255, 255, 255, 0.04) !important;
+  border: 1px solid var(--border-glass) !important;
   color: #ffffff !important;
+  border-radius: 10px !important;
+  font-weight: 600 !important;
+  transition: all 0.2s ease !important;
 }
-.gradio-container button.primary:hover,
-.gradio-container button[variant="primary"]:hover {
-  background: #0b7f59 !important;
+.gradio-container button:not(.primary):hover {
+  background: rgba(255, 255, 255, 0.08) !important;
+  border-color: rgba(255, 255, 255, 0.15) !important;
 }
-@media (max-width: 760px) {
-  .app-shell { width: min(100% - 28px, 1120px); }
-  .hero { display: block; }
-  .powered { text-align: left; margin-top: 10px; }
+
+/* Custom Accordion overrides */
+.gradio-container .accordion {
+  border: 1px solid var(--border-glass) !important;
+  background: var(--bg-glass) !important;
+  border-radius: 16px !important;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+}
+.gradio-container .accordion .label-wrap {
+  background: rgba(255, 255, 255, 0.02) !important;
+  padding: 14px 18px !important;
+  border-bottom: 1px solid var(--border-glass) !important;
+}
+.gradio-container .accordion .label-wrap span {
+  color: #ffffff !important;
+  font-weight: 600 !important;
+  font-size: 15px;
+}
+
+/* Gradio input boxes styling to fit theme */
+.gradio-container input, .gradio-container textarea, .gradio-container select {
+  background: rgba(0, 0, 0, 0.3) !important;
+  border: 1px solid var(--border-glass) !important;
+  color: #ffffff !important;
+  border-radius: 8px !important;
+}
+.gradio-container input:focus, .gradio-container textarea:focus {
+  border-color: var(--glow-cyan) !important;
+  box-shadow: 0 0 8px rgba(6, 182, 212, 0.2) !important;
+}
+
+/* Fix mobile responsiveness */
+@media (max-width: 768px) {
+  .app-shell { width: min(100% - 24px, 1120px); }
+  .hero { display: block; padding: 20px; }
+  .powered { text-align: left; margin-top: 12px; display: inline-block; }
   .metric-row, .flow, .stock-card, .compare-grid { grid-template-columns: 1fr; }
   .details { grid-template-columns: 1fr; }
-  .translated-head { align-items: flex-start; flex-direction: column; }
+  .translated-head { align-items: flex-start; flex-direction: column; gap: 8px; }
+  .flow-step { min-height: 80px; }
 }
 """
 
 
-APP_THEME = gr.themes.Soft(
+APP_THEME = gr.themes.Default(
     primary_hue="emerald",
-    secondary_hue="blue",
+    secondary_hue="indigo",
     neutral_hue="slate",
-    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+    font=[gr.themes.GoogleFont("Plus Jakarta Sans"), "ui-sans-serif", "system-ui", "sans-serif"],
 )