Rebrand to #6366F1/#63B1F2 palette; gradient on tabs only; white FDA form background

- All brand colors updated to #6366F1 (indigo) and #63B1F2 (sky blue)
- Logo shield: #6366F1 body, #63B1F2 ring, #a8d8f9 cross
- Panel borders: #6366F1 (replaces gold)
- Section chips, profile heading, triage labels: #6366F1
- App container background: white; gradient (130deg #63B1F2->white) on tabs only
- Tab 4 Doctor's View: explicit white background
- FDA form .fda3500b: background:#fff to stay white within gradient tab area

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

app.py

@@ -606,9 +606,9 @@ def format_profile(case: Dict) -> str:
     ]
     rows_html = "".join(row(lbl, val) for lbl, val in fields)
     return (
-        '<div style="background:#f8fafc;border:1px solid #dde3ea;border-radius:10px;'
+        '<div style="background:#f0f4fe;border:1px solid #c5c6fb;border-radius:10px;'
         'padding:16px 20px;font-family:sans-serif;">'
-        '<div style="font-weight:700;font-size:14px;color:#1a3a5c;margin-bottom:12px;'
+        '<div style="font-weight:700;font-size:14px;color:#6366F1;margin-bottom:12px;'
         'letter-spacing:0.3px;">SentinelRx Patient Profile</div>'
         '<div style="display:grid;grid-template-columns:140px 1fr;column-gap:12px;">'
         + rows_html +
@@ -956,7 +956,7 @@ def build_fda_3500b_html(case: Dict, severity: Dict) -> str:
 
     css = """<style>
 .fda3500b{font-family:Arial,sans-serif;font-size:13px;max-width:860px;
-  border:2px solid #003087;border-radius:4px;overflow:hidden;line-height:1.5;}
+  border:2px solid #003087;border-radius:4px;overflow:hidden;line-height:1.5;background:#fff;}
 .fda-mock-banner{background:#eef2f7;border-bottom:1px solid #b0bfcf;padding:4px 14px;
   text-align:right;font-weight:normal;font-size:11px;color:#444;}
 .fda-hdr{background:#2471a3;color:#fff;padding:10px 14px;display:flex;align-items:center;gap:14px;}
@@ -1155,12 +1155,12 @@ def triage_markdown(triage: Dict) -> str:
 
     return f"""
 <div style="font-family:sans-serif;padding:4px 2px;line-height:1.7;">
-  <div style="font-size:16px;font-weight:800;color:#1a3a5c;margin-bottom:14px;">
+  <div style="font-size:16px;font-weight:800;color:#6366F1;margin-bottom:14px;">
     SentinelRx Triage Agent
   </div>
 
   <div style="margin-bottom:14px;">
-    <span style="font-size:12px;font-weight:700;color:#555;text-transform:uppercase;
+    <span style="font-size:12px;font-weight:700;color:#6366F1;text-transform:uppercase;
                  letter-spacing:0.5px;">Priority</span><br>
     <span style="display:inline-block;margin-top:4px;background:{badge_color};color:#fff;
                  font-weight:700;font-size:13px;padding:4px 16px;border-radius:20px;">
@@ -1169,19 +1169,19 @@ def triage_markdown(triage: Dict) -> str:
   </div>
 
   <div style="margin-bottom:14px;">
-    <div style="font-size:12px;font-weight:700;color:#555;text-transform:uppercase;
+    <div style="font-size:12px;font-weight:700;color:#6366F1;text-transform:uppercase;
                 letter-spacing:0.5px;margin-bottom:4px;">Recommended Next Step</div>
     <div style="font-size:13px;color:#222;">{triage['next_step']}</div>
   </div>
 
   <div style="margin-bottom:14px;">
-    <div style="font-size:12px;font-weight:700;color:#555;text-transform:uppercase;
+    <div style="font-size:12px;font-weight:700;color:#6366F1;text-transform:uppercase;
                 letter-spacing:0.5px;margin-bottom:4px;">Agent Explanation</div>
     <div style="font-size:13px;color:#222;">{triage['explanation']}</div>
   </div>
 
   <div>
-    <div style="font-size:12px;font-weight:700;color:#555;text-transform:uppercase;
+    <div style="font-size:12px;font-weight:700;color:#6366F1;text-transform:uppercase;
                 letter-spacing:0.5px;margin-bottom:4px;">Missing Information Checklist</div>
     <ul style="margin:0;padding-left:18px;font-size:13px;color:#444;">
       {missing_items}
@@ -1232,8 +1232,11 @@ _first_case = list(DEMO_CASES.keys())[0]
 
 CUSTOM_CSS = """
 .gradio-container {
-  background: linear-gradient(180deg, #f0edf8 0%, #f7f5fb 40%, #ffffff 100%) !important;
-  min-height: 100vh;
+  background: #ffffff !important;
+}
+#main_tabs_container {
+  background: linear-gradient(130deg, #63B1F2 0%, #ffffff 70%) !important;
+  border-radius: 8px;
 }
 #testimony_box,
 #profile_panel,
@@ -1243,10 +1246,13 @@ CUSTOM_CSS = """
 #severity_panel,
 #extraction_table,
 #triage_panel {
-  border: 2px solid #b8903a !important;
+  border: 2px solid #6366F1 !important;
   border-radius: 10px !important;
   overflow: hidden;
 }
+#doctors_view_tab {
+  background: #ffffff !important;
+}
 """
 
 with gr.Blocks(title="SentinelRx — ADR Intelligence", theme=gr.themes.Soft(),
@@ -1256,25 +1262,25 @@ with gr.Blocks(title="SentinelRx — ADR Intelligence", theme=gr.themes.Soft(),
 <div style="display:flex;align-items:center;gap:16px;padding:12px 0 8px;">
   <svg width="52" height="52" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
     <path d="M26 2 L46 10 L46 28 C46 39 36 47 26 50 C16 47 6 39 6 28 L6 10 Z"
-          fill="#3d2b6e" stroke="#6b5aad" stroke-width="2.5"/>
+          fill="#6366F1" stroke="#63B1F2" stroke-width="2.5"/>
     <text x="26" y="34" text-anchor="middle" font-family="Georgia,serif"
           font-size="20" font-weight="700" fill="#ffffff" letter-spacing="-1">Rx</text>
-    <rect x="24" y="11" width="4" height="10" rx="1" fill="#a394d4" opacity="0.9"/>
-    <rect x="20" y="14" width="12" height="4" rx="1" fill="#a394d4" opacity="0.9"/>
+    <rect x="24" y="11" width="4" height="10" rx="1" fill="#a8d8f9" opacity="0.9"/>
+    <rect x="20" y="14" width="12" height="4" rx="1" fill="#a8d8f9" opacity="0.9"/>
   </svg>
   <div>
-    <div style="font-size:26px;font-weight:800;color:#1a3a5c;line-height:1.1;
+    <div style="font-size:26px;font-weight:800;color:#6366F1;line-height:1.1;
                 font-family:sans-serif;letter-spacing:-0.3px;">
       SentinelRx - ADR Intelligence Prototype
     </div>
-    <div style="font-size:13px;color:#555;margin-top:3px;font-style:italic;font-family:sans-serif;">
+    <div style="font-size:13px;color:#63B1F2;margin-top:3px;font-style:italic;font-family:sans-serif;">
       AI-assisted adverse drug reaction detection and FDA MedWatch reporting.
     </div>
   </div>
 </div>
 """)
 
-    main_tabs = gr.Tabs()
+    main_tabs = gr.Tabs(elem_id="main_tabs_container")
 
     with main_tabs:
 
@@ -1290,7 +1296,7 @@ with gr.Blocks(title="SentinelRx — ADR Intelligence", theme=gr.themes.Soft(),
                 label="Select Patient",
             )
 
-            gr.HTML('<div style="display:inline-block;background:#1a3a5c;color:#fff;'
+            gr.HTML('<div style="display:inline-block;background:#6366F1;color:#fff;'
                     'font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;'
                     'letter-spacing:0.5px;margin-bottom:4px;">PATIENT TESTIMONY</div>')
             testimony_box = gr.Textbox(
@@ -1301,7 +1307,7 @@ with gr.Blocks(title="SentinelRx — ADR Intelligence", theme=gr.themes.Soft(),
                 elem_id="testimony_box",
             )
 
-            gr.HTML('<div style="display:inline-block;background:#1a3a5c;color:#fff;'
+            gr.HTML('<div style="display:inline-block;background:#6366F1;color:#fff;'
                     'font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;'
                     'letter-spacing:0.5px;margin:8px 0 4px;">PATIENT PROFILE &amp; BIOMETRICS</div>')
             with gr.Row():
@@ -1310,7 +1316,7 @@ with gr.Blocks(title="SentinelRx — ADR Intelligence", theme=gr.themes.Soft(),
                 biometric_html = gr.HTML(format_biometrics(DEMO_CASES[_first_case]),
                                          elem_id="biometric_panel")
 
-            gr.HTML('<div style="display:inline-block;background:#1a3a5c;color:#fff;'
+            gr.HTML('<div style="display:inline-block;background:#6366F1;color:#fff;'
                     'font-size:11px;font-weight:700;padding:3px 12px;border-radius:20px;'
                     'letter-spacing:0.5px;margin:8px 0 4px;">MEDICATIONS</div>')
             meds_md = gr.Markdown(format_medications(DEMO_CASES[_first_case]),
@@ -1339,7 +1345,7 @@ with gr.Blocks(title="SentinelRx — ADR Intelligence", theme=gr.themes.Soft(),
             send_btn = gr.Button("📋 Send to Doctor", variant="secondary", size="lg")
 
         # ---------------------------------------------------------------- Tab 4
-        with gr.Tab("4. Doctor's View", id=3):
+        with gr.Tab("4. Doctor's View", id=3, elem_id="doctors_view_tab"):
             gr.Markdown(
                 "Pre-filled FDA MedWatch Form 3500B. "
                 "Click **Submit to MedWatch** to simulate report submission."