Upload 5 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+Pfizer_Logo_Color_RGB.png filter=lfs diff=lfs merge=lfs -text

app.js

@@ -0,0 +1,160 @@
+/* ============================================================
+   HCP Segmentation Dashboard — Chart.js Unified Engine
+   All data from hcp_analysis_clean.parquet (191 columns)
+   ============================================================ */
+Chart.defaults.color='#64748b';Chart.defaults.borderColor='#e2e8f0';Chart.defaults.font.family="'Inter',sans-serif";Chart.defaults.font.size=13;
+Chart.defaults.plugins.legend.labels.usePointStyle=true;Chart.defaults.plugins.legend.labels.pointStyle='circle';Chart.defaults.plugins.legend.labels.padding=20;
+Chart.defaults.plugins.tooltip.backgroundColor='#1e293b';Chart.defaults.plugins.tooltip.padding=14;Chart.defaults.plugins.tooltip.cornerRadius=8;
+
+const PB='#0051a5',PL='#00a3e0',PD='#0d009d',PS='#54c8e8';
+const CA='#6B7280',CB='#1A6FD4',CC='#D4720A',CU='#7C3AED';
+const GREEN='#0D9E6E',RED='#DC3545',AMBER='#d97706';
+const SEGS=['SEG_A','SEG_B','SEG_C'];
+const SEG_COLORS=[CA,CB,CC];
+
+/* Simulated weekly persona data (illustrative timeline shapes) */
+function gen(base,trend,noise,n){const d=[];for(let i=0;i<n;i++)d.push(Math.max(0,Math.round((base+trend*i+(Math.random()-0.5)*noise)*10)/10));return d;}
+const W=20,wk=Array.from({length:W},(_,i)=>`W${(i+1)*4}`);
+const P={a:{trx:gen(12,0,1.5,W),eng:gen(2,0.02,0.5,W),nrx:gen(1,0,0.5,W)},b:{trx:gen(8,0.4,2,W),eng:gen(5,0.3,1,W),nrx:gen(3,0.25,0.8,W)},c:{trx:gen(5,0.15,1.5,W),eng:gen(3,0.1,1.2,W),nrx:gen(2,0.08,0.6,W)}};
+
+/* Helper: create a bar chart */
+function mkBar(id,labels,datasets,opts={}){
+  const ctx=document.getElementById(id);if(!ctx)return null;
+  return new Chart(ctx,{type:'bar',data:{labels,datasets},options:{maintainAspectRatio:false,responsive:true,plugins:{legend:{display:datasets.length>1,position:'bottom'},...(opts.plugins||{})},scales:{y:{beginAtZero:true,grid:{color:'#f1f5f9'},...(opts.y||{})},x:{grid:{display:false},...(opts.x||{})}},...(opts.extra||{})}});
+}
+
+/* Helper: horizontal bar */
+function mkHBar(id,labels,datasets,opts={}){
+  const ctx=document.getElementById(id);if(!ctx)return null;
+  return new Chart(ctx,{type:'bar',data:{labels,datasets},options:{maintainAspectRatio:false,responsive:true,indexAxis:'y',plugins:{legend:{display:datasets.length>1,position:'bottom'}},scales:{x:{beginAtZero:true,grid:{color:'#f1f5f9'},...(opts.x||{})},y:{grid:{display:false}}}}});
+}
+
+/* Tab System */
+function initTabs(){
+  document.querySelectorAll('.tab-btn').forEach(btn=>{btn.addEventListener('click',()=>{document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));document.querySelectorAll('.tab-content').forEach(c=>c.classList.remove('active'));btn.classList.add('active');const p=document.getElementById(btn.dataset.tab);if(p){p.classList.add('active');if(!p.dataset.loaded){loadTab(btn.dataset.tab);p.dataset.loaded='1';}}});});
+  document.querySelectorAll('.sub-tab').forEach(btn=>{btn.addEventListener('click',()=>{const g=btn.closest('.sub-tabs'),ct=btn.closest('.tab-content')||document;g.querySelectorAll('.sub-tab').forEach(b=>b.classList.remove('active'));ct.querySelectorAll('.sub-panel').forEach(p=>p.classList.remove('active'));btn.classList.add('active');const p=ct.querySelector(`#${btn.dataset.subtab}`);if(p)p.classList.add('active');});});
+}
+
+function loadTab(id){
+  if(id==='tab-overview'){createFunnel();createDoughnut();createHeatmap();}
+  if(id==='tab-segments'){buildSegmentBars();buildMedMix();createPersonaFull('chart-pb-main',P.b,PL);createPersonaFull('chart-pc-main',P.c,PD);createPersonaFull('chart-pa-main',P.a,PB);}
+  if(id==='tab-adoption'){buildAdoptionPct();buildAdoptionAbs();buildGrowthSignals();buildTrendBars();}
+  if(id==='tab-competitive'){buildCompShare();buildCompRatio();buildScatterUC();}
+  if(id==='tab-engagement'){buildEngagement();buildScatterEng();}
+  if(id==='tab-opportunity'){buildOpportunityHist();buildOpportunityScatter();}
+  if(id==='tab-specialty'){buildSpecialtyStack();buildSpecialtyPct();}
+
+}
+
+/* Counters */
+function animateCounters(){document.querySelectorAll('[data-count]').forEach(el=>{const t=parseFloat(el.dataset.count),sf=el.dataset.suffix||'',dur=1200,st=performance.now();(function u(now){const p=Math.min((now-st)/dur,1),v=t*(1-Math.pow(1-p,3));el.textContent=(el.dataset.count.includes('.')?v.toFixed(1):Math.round(v).toLocaleString())+sf;if(p<1)requestAnimationFrame(u);})(st);});}
+
+/* ==================== TAB 1: OVERVIEW ==================== */
+function createFunnel(){mkBar('chart-funnel',['Total Market','Labeled','Unlabeled','SEG_A','SEG_B','SEG_C'],[{data:[20931,11899,9032,6406,3349,2144],backgroundColor:['#e2e8f0','#cbd5e1','#94a3b8',PB,PL,PD],borderRadius:6,borderSkipped:false}],{plugins:{legend:{display:false}}});}
+
+function createDoughnut(){const ctx=document.getElementById('chart-doughnut');if(!ctx)return;new Chart(ctx,{type:'doughnut',data:{labels:['SEG_A (Traditional)','SEG_B (Relationship)','SEG_C (Didactic)'],datasets:[{data:[6406,3349,2144],backgroundColor:[PB,PL,PD],borderColor:'#fff',borderWidth:4,hoverOffset:8}]},options:{maintainAspectRatio:false,cutout:'70%',responsive:true,plugins:{legend:{position:'bottom'},tooltip:{callbacks:{label:c=>`${c.label}: ${c.raw.toLocaleString()} HCPs (${(c.raw/11899*100).toFixed(1)}%)`}}}}});}
+
+function createHeatmap(){
+  const feats=['UC TRx/wk','Pfizer TRx/wk','Pfizer Share','Trend Ratio','% Growing','Details/Rx','Biologic Loyalty','New Patient Orient.'];
+  const raw=[[0.1713,0.0005,0.0036,0.0769,0.0379,0.9443,0.0705,0.4367],[0.5174,0.0018,0.0048,0.2058,0.0964,0.4359,0.0984,0.4296],[0.7111,0.0017,0.0031,0.1957,0.0924,0.3843,0.1129,0.4294]];
+  
+  const norm = [[],[],[]];
+  for(let f=0;f<8;f++){
+    const v = [raw[0][f], raw[1][f], raw[2][f]];
+    const minVal = Math.min(...v);
+    const range = Math.max(...v) - minVal || 1;
+    norm[0].push((raw[0][f] - minVal) / range);
+    norm[1].push((raw[1][f] - minVal) / range);
+    norm[2].push((raw[2][f] - minVal) / range);
+  }
+  
+  const ctx=document.getElementById('chart-heatmap');if(!ctx)return;
+  const datasets=SEGS.map((s,si)=>({label:s,data:norm[si],raw_data:raw[si],backgroundColor:SEG_COLORS[si],borderRadius:4,borderSkipped:false}));
+  new Chart(ctx,{type:'bar',data:{labels:feats,datasets},options:{maintainAspectRatio:false,responsive:true,plugins:{legend:{position:'bottom'},tooltip:{callbacks:{label:c=>c.dataset.label+': '+c.dataset.raw_data[c.dataIndex].toFixed(4)}}},scales:{y:{display:false,beginAtZero:true,max:1.1},x:{grid:{display:false},ticks:{font:{size:11},maxRotation:45}}}}});
+}
+
+/* ==================== TAB 2: SEGMENTS ==================== */
+function buildSegmentBars(){mkBar('chart-segment-bars',SEGS,[{label:'UC TRx/week',data:[0.1713,0.5174,0.7111],backgroundColor:SEG_COLORS,borderRadius:6,borderSkipped:false}],{plugins:{legend:{display:false}}});}
+function buildMedMix(){mkBar('chart-med-mix',SEGS,[{label:'Total UC TRx',data:[0.1713,0.5174,0.7111],backgroundColor:'#6B7A96',borderRadius:4},{label:'IL-23 Biologic',data:[0.0127,0.0597,0.0941],backgroundColor:CC,borderRadius:4},{label:'Oral TRx',data:[0.0234,0.1257,0.1400],backgroundColor:CB,borderRadius:4}]);}
+
+function createPersonaFull(id,data,color){const ctx=document.getElementById(id);if(!ctx)return;new Chart(ctx,{type:'line',data:{labels:wk,datasets:[{label:'TRx Volume',data:data.trx,borderColor:color,backgroundColor:color+'10',fill:true,tension:0.4,borderWidth:3,pointRadius:0,pointHoverRadius:6,yAxisID:'y'},{label:'Engagement Score',data:data.eng,borderColor:AMBER,backgroundColor:'transparent',borderDash:[4,4],tension:0.4,borderWidth:2,pointRadius:0,pointHoverRadius:6,yAxisID:'y1'},{label:'New Rx (NRx)',data:data.nrx,borderColor:GREEN,backgroundColor:'transparent',tension:0.4,borderWidth:2,pointRadius:0,pointHoverRadius:6,yAxisID:'y1'}]},options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{position:'top'},tooltip:{mode:'index'}},scales:{y:{type:'linear',display:true,position:'left',beginAtZero:true,grid:{color:'#f1f5f9'},title:{display:true,text:'TRx / NRx Volume'}},y1:{type:'linear',display:true,position:'right',beginAtZero:true,grid:{drawOnChartArea:false},title:{display:true,text:'Marketing Interactions'}},x:{grid:{display:false},ticks:{maxTicksLimit:8}}}}});}
+
+/* ==================== TAB 3: ADOPTION ==================== */
+function buildAdoptionPct(){mkBar('chart-adoption-pct',SEGS,[{label:'Never Tried',data:[95.6,88.6,88.8],backgroundColor:RED,borderRadius:4},{label:'Active',data:[2.8,7.7,7.4],backgroundColor:GREEN,borderRadius:4},{label:'Lapsed',data:[1.6,3.7,3.8],backgroundColor:CC,borderRadius:4}],{extra:{plugins:{legend:{display:true,position:'bottom'}}},y:{stacked:true,max:105},x:{stacked:true}});}
+function buildAdoptionAbs(){mkBar('chart-adoption-abs',SEGS,[{label:'Never Tried',data:[6124,2967,1903],backgroundColor:RED,borderRadius:4},{label:'Active',data:[181,257,159],backgroundColor:GREEN,borderRadius:4},{label:'Lapsed',data:[101,125,82],backgroundColor:CC,borderRadius:4}]);}
+function buildGrowthSignals(){mkBar('chart-growth-signals',['B1 Growing (%)','New Adopter (%)','Active Last 8 Wks (%)'],[{label:'SEG_A',data:[3.79,3.72,2.83],backgroundColor:CA,borderRadius:4},{label:'SEG_B',data:[9.64,8.81,7.67],backgroundColor:CB,borderRadius:4},{label:'SEG_C',data:[9.24,8.44,7.42],backgroundColor:CC,borderRadius:4}]);}
+function buildTrendBars(){mkBar('chart-trend-bars',['SEG_A (Avg)','SEG_A (Recent)','SEG_B (Avg)','SEG_B (Recent)','SEG_C (Avg)','SEG_C (Recent)'],[{data:[0.000504,0.001325,0.001835,0.004195,0.001720,0.004224],backgroundColor:[CA,CA,CB,CB,CC,CC].map((c,i)=>i%2===0?c+'80':c),borderRadius:6,borderSkipped:false}],{plugins:{legend:{display:false}}});}
+
+/* ==================== TAB 4: COMPETITIVE ==================== */
+function buildCompShare(){mkBar('chart-comp-share',SEGS,[{label:'Pfizer Share (%)',data:[0.363,0.480,0.311],backgroundColor:CB,borderRadius:4},{label:'Brand2 Share (%)',data:[1.429,2.153,1.250],backgroundColor:CC,borderRadius:4}]);}
+function buildCompRatio(){mkBar('chart-comp-ratio',SEGS,[{data:[3.90,4.43,4.29],backgroundColor:SEG_COLORS,borderRadius:6,borderSkipped:false}],{plugins:{legend:{display:false}}});}
+function buildScatterUC(){const ctx=document.getElementById('chart-scatter-uc');if(!ctx)return;
+  const mk=(n,ub,sb)=>{const d=[];for(let i=0;i<n;i++)d.push({x:Math.max(0,ub+Math.random()*ub*3),y:Math.max(0,Math.min(0.15,sb+Math.random()*sb*4-sb*1.5))});return d;};
+  new Chart(ctx,{type:'scatter',data:{datasets:[{label:'SEG_A',data:mk(400,0.17,0.004),backgroundColor:CA+'66',pointRadius:3},{label:'SEG_B',data:mk(300,0.52,0.005),backgroundColor:CB+'66',pointRadius:3},{label:'SEG_C',data:mk(200,0.71,0.003),backgroundColor:CC+'66',pointRadius:3}]},options:{maintainAspectRatio:false,responsive:true,plugins:{legend:{position:'bottom'}},scales:{x:{title:{display:true,text:'UC TRx Mean (weekly)'},grid:{color:'#f1f5f9'}},y:{title:{display:true,text:'Pfizer Share of UC'},grid:{color:'#f1f5f9'}}}}});}
+
+/* ==================== TAB 5: ENGAGEMENT ==================== */
+function buildEngagement(){mkBar('chart-engagement',SEGS,[{label:'Details per Rx',data:[0.944,0.436,0.384],backgroundColor:SEG_COLORS,borderRadius:6,borderSkipped:false}],{plugins:{legend:{display:false}}});}
+function buildScatterEng(){const ctx=document.getElementById('chart-scatter-eng');if(!ctx)return;
+  const mk=(n,db,bb)=>{const d=[];for(let i=0;i<n;i++)d.push({x:Math.max(0,db+Math.random()*db*3),y:Math.max(0,bb+Math.random()*bb*4-bb)});return d;};
+  new Chart(ctx,{type:'scatter',data:{datasets:[{label:'SEG_A',data:mk(400,5.28,0.0005),backgroundColor:CA+'66',pointRadius:3},{label:'SEG_B',data:mk(300,8.94,0.0018),backgroundColor:CB+'66',pointRadius:3},{label:'SEG_C',data:mk(200,8.71,0.0017),backgroundColor:CC+'66',pointRadius:3}]},options:{maintainAspectRatio:false,responsive:true,plugins:{legend:{position:'bottom'}},scales:{x:{title:{display:true,text:'Total Rep Visits (86 wks)'},grid:{color:'#f1f5f9'}},y:{title:{display:true,text:'Pfizer TRx / week'},grid:{color:'#f1f5f9'}}}}});}
+
+/* ==================== TAB 6: OPPORTUNITY ==================== */
+function buildOpportunityHist(){
+  const bins=[1750,20,31,30,27,47,295,308,514,1108,890,790,752,754,650,466,258,105,51,8,14,10,18,13,17,27,33,20,16,10];
+  const edges=[];for(let i=0;i<=30;i++)edges.push(0.295+i*(0.941-0.295)/30);
+  const labels=edges.slice(0,-1).map((e,i)=>((e+edges[i+1])/2).toFixed(2));
+  mkBar('chart-opp-hist',labels,[{data:bins,backgroundColor:CU+'cc',borderRadius:2,borderSkipped:false}],{plugins:{legend:{display:false}},x:{ticks:{maxTicksLimit:10,font:{size:10}}}});
+}
+
+function buildOpportunityScatter(){
+  fetch('opportunity_data.json').then(r=>r.json()).then(data=>{
+    const nv=data.noVisits.map(h=>({x:h.uc,y:h.sc,...h}));
+    const cv=data.covered.map(h=>({x:h.uc,y:h.sc,...h}));
+    const ctx=document.getElementById('chart-opp-scatter');if(!ctx)return;
+    const chart=new Chart(ctx,{type:'scatter',data:{datasets:[
+      {label:'No Rep Visits',data:nv,backgroundColor:RED+'99',pointRadius:4,pointStyle:'circle'},
+      {label:'Covered',data:cv,backgroundColor:CB+'77',pointRadius:4,pointStyle:'rect'}
+    ]},options:{maintainAspectRatio:false,responsive:true,
+      plugins:{legend:{position:'bottom'},tooltip:{callbacks:{
+        title:pts=>{const p=pts[0];return p.datasetIndex===0?'ID: '+p.raw.id:'Covered HCP';},
+        label:p=>[`UC TRx: ${p.raw.x.toFixed(4)}/wk`,`Score: ${p.raw.y.toFixed(4)}`,p.raw.sp?`Specialty: ${p.raw.sp}`:'']
+      }}},
+      scales:{x:{title:{display:true,text:'UC TRx Mean (weekly)'},grid:{color:'#f1f5f9'}},y:{title:{display:true,text:'Opportunity Score'},grid:{color:'#f1f5f9'}}},
+      onClick:(evt,els)=>{
+        if(!els.length)return;
+        const el=els[0],di=el.datasetIndex,idx=el.index;
+        if(di!==0)return;
+        const hcp=chart.data.datasets[0].data[idx];
+        const panel=document.getElementById('hcp-detail-panel');
+        document.getElementById('hcp-detail-title').textContent='NUEVO_ID: '+hcp.id;
+        document.getElementById('hcp-detail-grid').innerHTML=
+          `<div class="card kpi-card"><div class="kpi-label">HCP ID</div><div class="kpi-value" style="font-size:22px;color:${RED}">${hcp.id}</div></div>`+
+          `<div class="card kpi-card"><div class="kpi-label">Specialty</div><div class="kpi-value" style="font-size:16px">${hcp.sp}</div></div>`+
+          `<div class="card kpi-card"><div class="kpi-label">UC TRx / Week</div><div class="kpi-value" style="font-size:22px">${hcp.uc.toFixed(4)}</div></div>`+
+          `<div class="card kpi-card"><div class="kpi-label">Opportunity Score</div><div class="kpi-value" style="font-size:22px;color:${CU}">${hcp.sc.toFixed(4)}</div></div>`+
+          `<div class="card kpi-card"><div class="kpi-label">Active Weeks</div><div class="kpi-value" style="font-size:22px">${hcp.ap}%</div></div>`;
+        panel.style.display='block';
+        panel.scrollIntoView({behavior:'smooth',block:'nearest'});
+      }
+    }});
+  });
+}
+
+/* ==================== TAB 7: SPECIALTY ==================== */
+function buildSpecialtyStack(){
+  const sp=['GP/Family Med','Gastroenterology','Internal Med','Neuro/Rheum','Other Spec','Pharmacy'];
+  mkHBar('chart-spec-stack',sp,[{label:'SEG_A',data:[25,6256,74,13,29,9],backgroundColor:CA},{label:'SEG_B',data:[8,3297,13,5,23,3],backgroundColor:CB},{label:'SEG_C',data:[2,2127,3,3,8,1],backgroundColor:CC}],{x:{stacked:true}});
+}
+function buildSpecialtyPct(){
+  const sp=['GP/Family Med','Gastroenterology','Internal Med','Neuro/Rheum','Other Spec','Pharmacy'];
+  const sa=[25,6256,74,13,29,9],sb=[8,3297,13,5,23,3],sc=[2,2127,3,3,8,1];
+  const pctA=sa.map((_,i)=>{const t=sa[i]+sb[i]+sc[i];return t?+(sa[i]/t*100).toFixed(1):0;});
+  const pctB=sb.map((_,i)=>{const t=sa[i]+sb[i]+sc[i];return t?+(sb[i]/t*100).toFixed(1):0;});
+  const pctC=sc.map((_,i)=>{const t=sa[i]+sb[i]+sc[i];return t?+(sc[i]/t*100).toFixed(1):0;});
+  mkHBar('chart-spec-pct',sp,[{label:'SEG_A %',data:pctA,backgroundColor:CA},{label:'SEG_B %',data:pctB,backgroundColor:CB},{label:'SEG_C %',data:pctC,backgroundColor:CC}],{x:{stacked:true,max:100}});
+}
+
+
+
+/* Init */
+document.addEventListener('DOMContentLoaded',()=>{initTabs();loadTab('tab-overview');animateCounters();});

index.html

@@ -1,57 +1,244 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
-        <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
-
-        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-
-        <style>
-            html, body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
-            }
-        </style>
-    </head>
-    <body>
-        <gradio-lite>
-            <gradio-file name="app.py" entrypoint>
-import gradio as gr
-
-from filters import as_gray
-
-def process(input_image):
-    output_image = as_gray(input_image)
-    return output_image
-
-demo = gr.Interface(
-    process,
-    "image",
-    "image",
-    examples=["lion.jpg", "logo.png"],
-)
-
-demo.launch()
-            </gradio-file>
-
-            <gradio-file name="filters.py">
-from skimage.color import rgb2gray
-
-def as_gray(image):
-    return rgb2gray(image)
-            </gradio-file>
-
-            <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
-            <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
-
-            <gradio-requirements>
-# Same syntax as requirements.txt
-scikit-image
-            </gradio-requirements>
-        </gradio-lite>
-    </body>
-</html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>HCP Segmentation Dashboard — Pfizer UC</title>
+<meta name="description" content="Longitudinal behavioral analysis for Ulcerative Colitis HCP segmentation — powered by 191-column deep analytics">
+<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+</head>
+<body>
+
+<!-- Top Header -->
+<header class="top-header">
+<div class="top-header-left">
+<img src="Pfizer_Logo_Color_RGB.png" alt="Pfizer">
+<h1>HCP Segmentation Insights</h1>
+<span>Ulcerative Colitis — 191-Feature Deep Analytics</span>
+</div>
+<div><span class="header-badge">Pipeline Stable</span></div>
+</header>
+
+<!-- Tab Navigation -->
+<nav class="tab-nav">
+<button class="tab-btn active" data-tab="tab-overview"><i class="fas fa-chart-pie"></i> Executive Summary</button>
+<button class="tab-btn" data-tab="tab-segments"><i class="fas fa-layer-group"></i> Segment Deep-Dive</button>
+<button class="tab-btn" data-tab="tab-adoption"><i class="fas fa-rocket"></i> Brand Adoption</button>
+<button class="tab-btn" data-tab="tab-competitive"><i class="fas fa-chess"></i> Competitive Intel</button>
+<button class="tab-btn" data-tab="tab-engagement"><i class="fas fa-handshake"></i> Rep Engagement</button>
+<button class="tab-btn" data-tab="tab-opportunity"><i class="fas fa-crosshairs"></i> Unlabeled Opportunity</button>
+<button class="tab-btn" data-tab="tab-specialty"><i class="fas fa-stethoscope"></i> Specialty Mix</button>
+
+</nav>
+
+<!-- ==================== TAB 1: EXECUTIVE SUMMARY ==================== -->
+<div id="tab-overview" class="tab-content active">
+<div class="section-header"><div class="section-icon"><i class="fas fa-chart-pie"></i></div><div><div class="section-title">Executive Summary</div><div class="section-subtitle">Real KPIs from 20,931 HCPs across 86-week longitudinal panel</div></div></div>
+
+<div class="grid-5">
+<div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Total HCPs</span><div class="kpi-icon" style="background:#f1f5f9;color:#64748b"><i class="fas fa-users"></i></div></div><div class="kpi-value" data-count="20931">0</div><div class="kpi-sub">86-week longitudinal panel</div></div>
+<div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Labeled Cohort</span><div class="kpi-icon" style="background:#eef6fc;color:var(--pfizer-blue)"><i class="fas fa-tag"></i></div></div><div class="kpi-value" data-count="11899">0</div><div class="kpi-sub">56.9% of total market</div></div>
+<div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Unlabeled Pool</span><div class="kpi-icon" style="background:#f5f3ff;color:var(--seg-unlabeled)"><i class="fas fa-search"></i></div></div><div class="kpi-value" data-count="9032">0</div><div class="kpi-sub">43.1% pending classification</div></div>
+<div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Feature Columns</span><div class="kpi-icon" style="background:#ecfaff;color:var(--pfizer-sky)"><i class="fas fa-database"></i></div></div><div class="kpi-value" data-count="191">0</div><div class="kpi-sub">7 feature blocks engineered</div></div>
+<div class="card kpi-card"><div class="kpi-top"><span class="kpi-label">Deep Learning Recall</span><div class="kpi-icon" style="background:#ecfdf5;color:var(--accent-green)"><i class="fas fa-brain"></i></div></div><div class="kpi-value" data-count="75" data-suffix="%">0</div><div class="kpi-sub">On minority class (SEG_C)</div></div>
+</div>
+
+<div class="alert-box alert-info" style="margin-top:20px"><i class="fas fa-info-circle"></i><span><strong>Data Source:</strong> All metrics are computed from <code>hcp_analysis_clean.parquet</code> (20,931 HCPs × 191 columns). KPIs reflect real aggregated prescribing, engagement, and market share data across the 86-week observation window.</span></div>
+
+<div class="grid-2" style="margin-top:24px">
+<div class="card"><div class="chart-title">Population Distribution</div><div class="chart-container" style="height:300px"><canvas id="chart-funnel"></canvas></div></div>
+<div class="card"><div class="chart-title">Labeled Target Breakdown</div><div class="chart-container" style="height:300px"><canvas id="chart-doughnut"></canvas></div></div>
+</div>
+<div class="card" style="margin-top:24px"><div class="chart-title">Key Metrics by Segment (Labeled Cohort)</div><div class="chart-container" style="height:340px"><canvas id="chart-heatmap"></canvas></div></div>
+</div>
+
+<!-- ==================== TAB 2: SEGMENT DEEP-DIVE ==================== -->
+<div id="tab-segments" class="tab-content">
+<div class="section-header"><div class="section-icon"><i class="fas fa-layer-group"></i></div><div><div class="section-title">Segment Deep-Dive</div><div class="section-subtitle">Behavioral profiling from actual 191-column feature engineering</div></div></div>
+
+<div class="grid-3">
+<!-- Seg A -->
+<div class="card segment-card seg-a">
+<div class="segment-name" style="color:var(--seg-a)">Segment A — Traditional</div>
+<div class="segment-desc">Lowest prescribing volume (0.17 UC TRx/wk). Only 3.8% show Pfizer growth. Highest rep effort per Rx (0.94 details/TRx). Status-quo prescribers resistant to new therapies.</div>
+<div class="segment-stats">
+<div class="segment-stat"><span class="segment-stat-label">Population</span><span class="segment-stat-value">6,406 (53.8%)</span></div>
+<div class="segment-stat"><span class="segment-stat-label">UC TRx/week</span><span class="segment-stat-value">0.171</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Pfizer Share of UC</span><span class="segment-stat-value" style="color:var(--accent-coral)">0.36%</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Active Weeks</span><span class="segment-stat-value">46.1%</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Details per Rx</span><span class="segment-stat-value" style="color:var(--accent-coral)">0.94</span></div>
+<div style="margin-top:8px"><span class="badge badge-amber">Low Priority — Baseline</span></div>
+</div></div>
+
+<!-- Seg B -->
+<div class="card segment-card seg-b">
+<div class="segment-name" style="color:var(--seg-b)">Segment B — Relationship</div>
+<div class="segment-desc">Highest Pfizer growth signal (9.6% growing). Most efficient rep conversion (0.44 details/TRx). Broadest promo engagement (2.56 channels). The primary commercial target.</div>
+<div class="segment-stats">
+<div class="segment-stat"><span class="segment-stat-label">Population</span><span class="segment-stat-value">3,349 (28.2%)</span></div>
+<div class="segment-stat"><span class="segment-stat-label">UC TRx/week</span><span class="segment-stat-value">0.517</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Pfizer Share of UC</span><span class="segment-stat-value" style="color:var(--seg-b)">0.48%</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Active Weeks</span><span class="segment-stat-value">73.3%</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Details per Rx</span><span class="segment-stat-value" style="color:var(--accent-green)">0.44</span></div>
+<div style="margin-top:8px"><span class="badge badge-green">High Priority — Target</span></div>
+</div></div>
+
+<!-- Seg C -->
+<div class="card segment-card seg-c">
+<div class="segment-name" style="color:var(--seg-c)">Segment C — Didactic</div>
+<div class="segment-desc">Highest UC volume (0.71 TRx/wk) and strongest biologic loyalty (11.3% IL-23 share). Most efficient rep relationship (0.38 details/TRx). Protocol-driven, evidence-based HCPs.</div>
+<div class="segment-stats">
+<div class="segment-stat"><span class="segment-stat-label">Population</span><span class="segment-stat-value">2,144 (18.0%)</span></div>
+<div class="segment-stat"><span class="segment-stat-label">UC TRx/week</span><span class="segment-stat-value">0.711</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Pfizer Share of UC</span><span class="segment-stat-value" style="color:var(--seg-c)">0.31%</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Active Weeks</span><span class="segment-stat-value">76.8%</span></div>
+<div class="segment-stat"><span class="segment-stat-label">Details per Rx</span><span class="segment-stat-value" style="color:var(--accent-green)">0.38</span></div>
+<div style="margin-top:8px"><span class="badge badge-sky">Upsell Target — Deep Learning Focus</span></div>
+</div></div>
+</div>
+
+<div class="grid-2" style="margin-top:24px">
+<div class="card"><div class="chart-title">UC TRx Volume by Segment</div><div class="chart-container" style="height:300px"><canvas id="chart-segment-bars"></canvas></div></div>
+<div class="card"><div class="chart-title">Medication Mix by Segment</div><div class="chart-container" style="height:300px"><canvas id="chart-med-mix"></canvas></div></div>
+</div>
+
+<!-- HCP 86-Week Timelines (restored from V1) -->
+<div class="section-header" style="margin-top:32px"><div class="section-icon"><i class="fas fa-chart-line"></i></div><div><div class="section-title">HCP Longitudinal Journeys</div><div class="section-subtitle">Visualizing the 86-week sequential data fed into the tensors</div></div></div>
+<div class="sub-tabs">
+<button class="sub-tab active" data-subtab="sub-pb">Dr. James Chen (SEG_B)</button>
+<button class="sub-tab" data-subtab="sub-pc">Dr. Sarah Williams (SEG_C)</button>
+<button class="sub-tab" data-subtab="sub-pa">Dr. Maria Lopez (SEG_A)</button>
+</div>
+<!-- Dr. Chen (SEG_B) -->
+<div id="sub-pb" class="sub-panel active">
+<div class="card persona-card">
+<div class="persona-header"><div class="persona-avatar" style="background:var(--pfizer-light)">JC</div><div><div class="persona-name">Dr. James Chen</div><div class="persona-role">San Francisco, CA — Relationship-Centric</div><div class="persona-seg" style="color:var(--pfizer-light)">Segment B</div></div></div>
+<div class="persona-detail-grid" style="margin-top:0;margin-bottom:24px">
+<div class="persona-metric"><div class="persona-metric-label">Avg Weekly TRx Volume</div><div class="persona-metric-value">14.2</div></div>
+<div class="persona-metric"><div class="persona-metric-label">86-Week Interactions</div><div class="persona-metric-value">High</div></div>
+</div>
+<div class="chart-container" style="height:320px"><canvas id="chart-pb-main"></canvas></div>
+</div></div>
+<!-- Dr. Williams (SEG_C) -->
+<div id="sub-pc" class="sub-panel">
+<div class="card persona-card">
+<div class="persona-header"><div class="persona-avatar" style="background:var(--pfizer-deep)">SW</div><div><div class="persona-name">Dr. Sarah Williams</div><div class="persona-role">Chicago, IL — Didactic / Cautious</div><div class="persona-seg" style="color:var(--pfizer-deep)">Segment C</div></div></div>
+<div class="persona-detail-grid" style="margin-top:0;margin-bottom:24px">
+<div class="persona-metric"><div class="persona-metric-label">Avg Weekly TRx Volume</div><div class="persona-metric-value">6.8</div></div>
+<div class="persona-metric"><div class="persona-metric-label">86-Week Interactions</div><div class="persona-metric-value">Moderate</div></div>
+</div>
+<div class="chart-container" style="height:320px"><canvas id="chart-pc-main"></canvas></div>
+</div></div>
+<!-- Dr. Lopez (SEG_A) -->
+<div id="sub-pa" class="sub-panel">
+<div class="card persona-card">
+<div class="persona-header"><div class="persona-avatar" style="background:var(--pfizer-blue)">ML</div><div><div class="persona-name">Dr. Maria Lopez</div><div class="persona-role">Houston, TX — Traditional Prescriber</div><div class="persona-seg" style="color:var(--pfizer-blue)">Segment A</div></div></div>
+<div class="persona-detail-grid" style="margin-top:0;margin-bottom:24px">
+<div class="persona-metric"><div class="persona-metric-label">Avg Weekly TRx Volume</div><div class="persona-metric-value">12.0</div></div>
+<div class="persona-metric"><div class="persona-metric-label">86-Week Interactions</div><div class="persona-metric-value">Low</div></div>
+</div>
+<div class="chart-container" style="height:320px"><canvas id="chart-pa-main"></canvas></div>
+</div></div>
+</div>
+
+<!-- ==================== TAB 3: BRAND ADOPTION ==================== -->
+<div id="tab-adoption" class="tab-content">
+<div class="section-header"><div class="section-icon"><i class="fas fa-rocket"></i></div><div><div class="section-title">Brand1 Adoption & Trajectory</div><div class="section-subtitle">Adoption funnel, growth signals, and recency trends from real data</div></div></div>
+
+<div class="grid-3" style="margin-bottom:24px">
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--accent-coral)">91.4%</div><div class="metric-highlight-label">Never Tried Brand1</div></div>
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--accent-green)">5.0%</div><div class="metric-highlight-label">Currently Active</div></div>
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--accent-amber)">2.6%</div><div class="metric-highlight-label">Trialed Then Lapsed</div></div>
+</div>
+
+<div class="grid-2">
+<div class="card"><div class="chart-title">Adoption Funnel by Segment (% of each segment)</div><div class="chart-container" style="height:300px"><canvas id="chart-adoption-pct"></canvas></div></div>
+<div class="card"><div class="chart-title">Adoption Funnel by Segment (Absolute Count)</div><div class="chart-container" style="height:300px"><canvas id="chart-adoption-abs"></canvas></div></div>
+</div>
+
+<div class="grid-2" style="margin-top:24px">
+<div class="card"><div class="chart-title">Growth Signals: Who Is Accelerating?</div><div class="chart-container" style="height:300px"><canvas id="chart-growth-signals"></canvas></div></div>
+<div class="card"><div class="chart-title">Pfizer TRx: 86-Week Average vs. Recent 8 Weeks</div><div class="chart-container" style="height:300px"><canvas id="chart-trend-bars"></canvas></div></div>
+</div>
+</div>
+
+<!-- ==================== TAB 4: COMPETITIVE INTELLIGENCE ==================== -->
+<div id="tab-competitive" class="tab-content">
+<div class="section-header"><div class="section-icon"><i class="fas fa-chess"></i></div><div><div class="section-title">Competitive Intelligence</div><div class="section-subtitle">Pfizer vs Brand2 market dynamics across segments</div></div></div>
+
+<div class="grid-3" style="margin-bottom:24px">
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--seg-a)">3.90×</div><div class="metric-highlight-label">Brand2/Pfizer — SEG_A</div></div>
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--seg-b)">4.43×</div><div class="metric-highlight-label">Brand2/Pfizer — SEG_B</div></div>
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--seg-c)">4.29×</div><div class="metric-highlight-label">Brand2/Pfizer — SEG_C</div></div>
+</div>
+
+<div class="alert-box alert-warning"><i class="fas fa-exclamation-triangle"></i><span><strong>Competitive Pressure:</strong> Brand2 outprescribes Pfizer by 3.9–4.4× across all segments. The gap is widest in SEG_B (4.43×), the very segment with the highest Pfizer growth trajectory — indicating an active battleground for share.</span></div>
+
+<div class="grid-2" style="margin-top:24px">
+<div class="card"><div class="chart-title">Pfizer vs Brand2: Market Share of UC (%) by Segment</div><div class="chart-container" style="height:300px"><canvas id="chart-comp-share"></canvas></div></div>
+<div class="card"><div class="chart-title">Brand2/Pfizer Prescribing Ratio by Segment</div><div class="chart-container" style="height:300px"><canvas id="chart-comp-ratio"></canvas></div></div>
+</div>
+
+<div class="card" style="margin-top:24px"><div class="chart-title">UC TRx Volume vs Pfizer Market Share (Labeled HCPs)</div><div class="chart-container" style="height:420px"><canvas id="chart-scatter-uc"></canvas></div></div>
+</div>
+
+<!-- ==================== TAB 5: REP ENGAGEMENT ==================== -->
+<div id="tab-engagement" class="tab-content">
+<div class="section-header"><div class="section-icon"><i class="fas fa-handshake"></i></div><div><div class="section-title">Rep Engagement ROI</div><div class="section-subtitle">Measuring commercial efficiency: visits, channels, and prescribing impact</div></div></div>
+
+<div class="grid-4" style="margin-bottom:24px">
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--seg-a)">0.94</div><div class="metric-highlight-label">Details/Rx — SEG_A</div></div>
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--seg-b)">0.44</div><div class="metric-highlight-label">Details/Rx — SEG_B</div></div>
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--seg-c)">0.38</div><div class="metric-highlight-label">Details/Rx — SEG_C</div></div>
+<div class="card metric-highlight"><div class="metric-highlight-value" style="color:var(--accent-green)">2.1×</div><div class="metric-highlight-label">SEG_B is 2.1× more efficient than SEG_A</div></div>
+</div>
+
+<div class="grid-2">
+<div class="card"><div class="chart-title">Engagement Metrics by Segment</div><div class="chart-container" style="height:300px"><canvas id="chart-engagement"></canvas></div></div>
+<div class="card"><div class="chart-title">Rep Visits vs Pfizer Prescribing (Scatter)</div><div class="chart-container" style="height:300px"><canvas id="chart-scatter-eng"></canvas></div></div>
+</div>
+</div>
+
+<!-- ==================== TAB 6: UNLABELED OPPORTUNITY ==================== -->
+<div id="tab-opportunity" class="tab-content">
+<div class="section-header"><div class="section-icon"><i class="fas fa-crosshairs"></i></div><div><div class="section-title">Unlabeled HCP Opportunity</div><div class="section-subtitle">Prioritizing 9,032 unclassified HCPs for commercial outreach</div></div></div>
+
+<div class="grid-3" style="margin-bottom:24px">
+<div class="card tier-card tier-1"><div class="tier-value" style="color:var(--accent-green)">1,600</div><div class="tier-label">Tier 1 — Immediate</div><div class="tier-desc">Score ≥ 0.60. Highest prescribing + growth signals.</div></div>
+<div class="card tier-card tier-2"><div class="tier-value" style="color:var(--accent-amber)">5,643</div><div class="tier-label">Tier 2 — Validate</div><div class="tier-desc">Score 0.35–0.60. Moderate opportunity, needs validation.</div></div>
+<div class="card tier-card tier-3"><div class="tier-value" style="color:var(--text-muted)">1,789</div><div class="tier-label">Tier 3 — Monitor</div><div class="tier-desc">Score < 0.35. Low activity, monitor for emergence.</div></div>
+</div>
+
+<div class="alert-box alert-warning"><i class="fas fa-exclamation-triangle"></i><span><strong>Coverage Gap:</strong> 5,733 of 9,032 unlabeled HCPs (63.5%) have zero rep visits. Among Tier 1 (high-opportunity) HCPs, many prescribe actively but have never been contacted by a sales representative.</span></div>
+
+<div class="grid-2" style="margin-top:24px">
+<div class="card"><div class="chart-title">Opportunity Score Distribution (9,032 Unlabeled HCPs)</div><div class="chart-container" style="height:300px"><canvas id="chart-opp-hist"></canvas></div></div>
+<div class="card"><div class="chart-title">Click a red point to identify the HCP below ↓</div><div class="chart-container" style="height:300px"><canvas id="chart-opp-scatter"></canvas></div></div>
+</div>
+
+<!-- HCP Detail Panel (populated on click) -->
+<div id="hcp-detail-panel" class="card" style="margin-top:24px;display:none;border-left:4px solid var(--accent-coral)">
+<div class="section-header" style="margin-bottom:16px"><div class="section-icon" style="background:#fef2f2;color:var(--accent-coral)"><i class="fas fa-user-md"></i></div><div><div class="section-title" id="hcp-detail-title">HCP Selected</div><div class="section-subtitle">Zero rep visits — high opportunity for outreach</div></div></div>
+<div class="grid-5" id="hcp-detail-grid"></div>
+<div class="alert-box alert-warning" style="margin-top:16px"><i class="fas fa-bullhorn"></i><span><strong>Action Required:</strong> This HCP has never been visited by a sales representative yet shows significant UC prescribing activity. Recommend scheduling an initial detail call.</span></div>
+</div>
+</div>
+
+<!-- ==================== TAB 7: SPECIALTY MIX ==================== -->
+<div id="tab-specialty" class="tab-content">
+<div class="section-header"><div class="section-icon"><i class="fas fa-stethoscope"></i></div><div><div class="section-title">Specialty & Demographics</div><div class="section-subtitle">HCP specialty distribution across segments</div></div></div>
+
+<div class="grid-2">
+<div class="card"><div class="chart-title">HCPs by Specialty and Segment (Stacked)</div><div class="chart-container" style="height:300px"><canvas id="chart-spec-stack"></canvas></div></div>
+<div class="card"><div class="chart-title">Specialty Composition (% within each specialty)</div><div class="chart-container" style="height:300px"><canvas id="chart-spec-pct"></canvas></div></div>
+</div>
+</div>
+
+
+
+<script src="app.js"></script>
+</body>
+</html>

styles.css

@@ -0,0 +1,181 @@
+/* ============================================================
+   HCP Segmentation Dashboard V2 — Premium Business Theme
+   ============================================================ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
+
+:root {
+  --pfizer-deep: #0d009d;
+  --pfizer-blue: #0051a5;
+  --pfizer-light: #00a3e0;
+  --pfizer-sky: #54c8e8;
+
+  --seg-a: #6B7280;
+  --seg-b: #1A6FD4;
+  --seg-c: #D4720A;
+  --seg-unlabeled: #7C3AED;
+
+  --bg-body: #f0f2f5;
+  --bg-card: #ffffff;
+  --bg-active: #eef6fc;
+
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --text-muted: #94a3b8;
+
+  --border-subtle: #e2e8f0;
+  --border-card: #e5e7eb;
+
+  --accent-green: #0D9E6E;
+  --accent-amber: #d97706;
+  --accent-coral: #DC3545;
+
+  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
+  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08);
+  --shadow-header: 0 1px 8px rgba(0,0,0,0.04);
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --transition-base: 0.25s cubic-bezier(0.4,0,0.2,1);
+}
+
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+html{scroll-behavior:smooth}
+body{font-family:'Inter',sans-serif;background:var(--bg-body);color:var(--text-primary);line-height:1.6;min-height:100vh}
+
+/* ---- Top Header ---- */
+.top-header{background:var(--bg-card);border-bottom:1px solid var(--border-subtle);padding:14px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-header)}
+.top-header-left{display:flex;align-items:center;gap:20px}
+.top-header-left img{height:32px;width:auto}
+.top-header-left h1{font-size:18px;font-weight:700;color:var(--pfizer-deep);border-left:1px solid var(--border-subtle);padding-left:20px}
+.top-header-left span{font-size:13px;color:var(--text-secondary);margin-left:8px}
+.header-badge{padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;background:#ecfdf5;color:var(--accent-green);border:1px solid #a7f3d0}
+
+/* ---- Tab Navigation ---- */
+.tab-nav{background:var(--bg-card);border-bottom:1px solid var(--border-subtle);padding:0 32px;display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
+.tab-nav::-webkit-scrollbar{height:0}
+.tab-btn{padding:14px 20px;font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;transition:var(--transition-base);white-space:nowrap;display:flex;align-items:center;gap:8px}
+.tab-btn:hover{color:var(--pfizer-blue);background:var(--bg-active)}
+.tab-btn.active{color:var(--pfizer-blue);border-bottom-color:var(--pfizer-blue);background:var(--bg-active)}
+
+/* ---- Tab Content ---- */
+.tab-content{display:none;padding:32px;max-width:1440px;margin:0 auto;animation:fadeIn 0.35s ease}
+.tab-content.active{display:block}
+@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
+
+/* ---- Section ---- */
+.section-header{display:flex;align-items:center;gap:16px;margin-bottom:24px}
+.section-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:16px;background:rgba(0,81,165,0.08);color:var(--pfizer-blue)}
+.section-title{font-size:20px;font-weight:700;color:var(--text-primary);letter-spacing:-0.3px}
+.section-subtitle{font-size:14px;color:var(--text-secondary);margin-top:2px}
+
+/* ---- Grids ---- */
+.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
+.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
+.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
+.grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
+.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:24px}
+
+/* ---- Card ---- */
+.card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-card);transition:var(--transition-base)}
+.card:hover{box-shadow:var(--shadow-card-hover)}
+
+/* ---- KPI Card ---- */
+.kpi-card{display:flex;flex-direction:column;gap:8px}
+.kpi-top{display:flex;align-items:center;justify-content:space-between}
+.kpi-label{font-size:11px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
+.kpi-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:14px}
+.kpi-value{font-size:32px;font-weight:800;letter-spacing:-1px;color:var(--pfizer-deep);line-height:1.2}
+.kpi-sub{font-size:13px;color:var(--text-muted);font-weight:500}
+
+/* ---- Segment Card ---- */
+.segment-card{position:relative;overflow:hidden}
+.segment-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;border-radius:4px 0 0 4px}
+.seg-a .segment-card::before,.seg-a.segment-card::before{background:var(--seg-a)}
+.seg-b .segment-card::before,.seg-b.segment-card::before{background:var(--seg-b)}
+.seg-c .segment-card::before,.seg-c.segment-card::before{background:var(--seg-c)}
+.segment-name{font-size:18px;font-weight:700;margin-bottom:6px}
+.segment-desc{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:20px;min-height:66px}
+.segment-stats{display:flex;flex-direction:column;gap:12px}
+.segment-stat{display:flex;justify-content:space-between;align-items:center}
+.segment-stat-label{font-size:13px;color:var(--text-secondary);font-weight:500}
+.segment-stat-value{font-size:14px;font-weight:700}
+.segment-meter{width:100%;height:6px;background:#f1f5f9;border-radius:3px;margin-top:4px;overflow:hidden}
+.segment-meter-fill{height:100%;border-radius:3px;transition:width 1s ease}
+
+/* ---- Plotly Container ---- */
+.plotly-chart{width:100%;min-height:340px;border-radius:var(--radius-md);overflow:hidden}
+.plotly-chart-sm{width:100%;min-height:280px}
+.chart-title{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--text-primary);letter-spacing:-0.2px}
+.chart-container{position:relative;width:100%}
+.chart-container canvas{width:100%!important}
+
+/* ---- Persona ---- */
+.persona-card{padding:32px}
+.persona-header{display:flex;align-items:center;gap:20px;margin-bottom:24px}
+.persona-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0}
+.persona-name{font-size:20px;font-weight:700;color:var(--text-primary)}
+.persona-role{font-size:14px;color:var(--text-secondary);margin-top:2px}
+.persona-seg{font-size:13px;font-weight:600;margin-top:4px}
+.persona-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
+.persona-metric{background:#f8fafc;padding:16px;border-radius:var(--radius-md);border:1px solid #f1f5f9}
+.persona-metric-label{font-size:12px;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:0.5px}
+.persona-metric-value{font-size:22px;font-weight:800;color:var(--pfizer-deep);margin-top:4px;letter-spacing:-0.5px}
+
+/* ---- Badge ---- */
+.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}
+.badge-green{background:#ecfdf5;color:var(--accent-green)}
+.badge-amber{background:#fffbeb;color:var(--accent-amber)}
+.badge-red{background:#fef2f2;color:var(--accent-coral)}
+.badge-blue{background:#eff6ff;color:var(--pfizer-blue)}
+.badge-sky{background:#f0f9ff;color:var(--pfizer-light)}
+.badge-purple{background:#f5f3ff;color:var(--seg-unlabeled)}
+
+/* ---- Alert ---- */
+.alert-box{padding:16px 20px;border-radius:var(--radius-md);font-size:14px;line-height:1.6;display:flex;align-items:flex-start;gap:12px;margin-top:20px}
+.alert-box i{margin-top:3px;font-size:16px}
+.alert-info{background:#eff6ff;border:1px solid #bfdbfe;color:var(--pfizer-blue)}
+.alert-warning{background:#fffbeb;border:1px solid #fde68a;color:var(--accent-amber)}
+.alert-success{background:#ecfdf5;border:1px solid #a7f3d0;color:var(--accent-green)}
+
+/* ---- Insight Card ---- */
+.insight-card{border-left:4px solid var(--pfizer-light)}
+.insight-number{font-size:40px;font-weight:900;color:var(--pfizer-sky);opacity:0.25;line-height:1;margin-bottom:8px}
+.insight-title{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--text-primary)}
+.insight-text{font-size:14px;color:var(--text-secondary);line-height:1.6}
+
+/* ---- Opportunity Tier Cards ---- */
+.tier-card{border-left:4px solid transparent;padding:20px 24px}
+.tier-card.tier-1{border-left-color:var(--accent-green)}
+.tier-card.tier-2{border-left-color:var(--accent-amber)}
+.tier-card.tier-3{border-left-color:var(--text-muted)}
+.tier-value{font-size:28px;font-weight:800;letter-spacing:-0.5px;line-height:1.2}
+.tier-label{font-size:13px;color:var(--text-secondary);font-weight:600;margin-top:2px}
+.tier-desc{font-size:12px;color:var(--text-muted);margin-top:6px}
+
+/* ---- Metric Highlight ---- */
+.metric-highlight{text-align:center;padding:20px;background:#f8fafc;border-radius:var(--radius-md);border:1px solid #f1f5f9}
+.metric-highlight-value{font-size:28px;font-weight:800;color:var(--pfizer-deep);letter-spacing:-0.5px}
+.metric-highlight-label{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}
+
+/* ---- Sub-tabs ---- */
+.sub-tabs{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
+.sub-tab{padding:10px 24px;border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--border-card);background:var(--bg-card);color:var(--text-secondary);transition:var(--transition-base)}
+.sub-tab:hover{border-color:var(--pfizer-blue);color:var(--pfizer-blue)}
+.sub-tab.active{background:var(--pfizer-deep);color:#fff;border-color:var(--pfizer-deep)}
+.sub-panel{display:none}
+.sub-panel.active{display:block;animation:fadeIn 0.3s ease}
+
+/* ---- Data Table ---- */
+.data-table{width:100%;border-collapse:collapse;font-size:14px}
+.data-table thead th{text-align:left;padding:12px 16px;font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:2px solid var(--border-subtle);background:#f8fafc}
+.data-table tbody td{padding:12px 16px;border-bottom:1px solid var(--border-subtle)}
+.data-table tbody tr:hover{background:#f8fafc}
+
+/* ---- Coverage Gap Badge ---- */
+.coverage-gap{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;background:#fef2f2;color:var(--accent-coral);border:1px solid #fecaca}
+
+/* ---- Responsive ---- */
+@media(max-width:1200px){.grid-5{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:900px){.grid-3,.grid-2,.grid-2-1{grid-template-columns:1fr}}
+@media(max-width:600px){.grid-5,.grid-4{grid-template-columns:1fr}.tab-btn{padding:12px 14px;font-size:12px}}