diff --git a/fiveparaminte-main/static/dashboard.html b/fiveparaminte-main/static/dashboard.html
index 86bc34f..46b6f4d 100644
--- a/fiveparaminte-main/static/dashboard.html
+++ b/fiveparaminte-main/static/dashboard.html
@@ -3,11 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Patient Vital Signs Monitor — Contec CMS7000PLUS / CMS8500</title>
-    <meta name="description" content="Real-time patient vital signs monitoring dashboard for Contec CMS7000PLUS / CMS8500 patient monitors">
+    <title>Patient Vital Signs Monitor — Contec CMS8500</title>
+    <meta name="description" content="Real-time patient vital signs monitoring dashboard for Contec CMS8500 patient monitors">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600;700;800&display=swap" rel="stylesheet">
+    
     <style>
         /* === CSS Reset & Base === */
         *, *::before, *::after {
@@ -17,1072 +18,1032 @@
         }
 
         :root {
-            /* Core palette (Light White Theme) */
-            --bg-primary: #f8fafc;
-            --bg-secondary: #ffffff;
-            --bg-card: #ffffff;
-            --bg-card-hover: #f1f5f9;
-            --border-color: rgba(15, 23, 42, 0.08);
-            --text-primary: #0f172a;
-            --text-secondary: #475569;
-            --text-dim: #94a3b8;
-
-            /* Vital sign accent colors (optimized for white background contrast) */
-            --hr-color: #dc2626;      /* dark red */
-            --hr-glow: rgba(220, 38, 38, 0.1);
-            --spo2-color: #0891b2;    /* dark cyan */
-            --spo2-glow: rgba(8, 145, 178, 0.1);
-            --bp-color: #7c3aed;      /* dark purple */
-            --bp-glow: rgba(124, 58, 237, 0.1);
-            --rr-color: #16a34a;      /* dark green */
-            --rr-glow: rgba(22, 163, 74, 0.1);
-            --temp-color: #ea580c;    /* dark orange */
-            --temp-glow: rgba(234, 88, 12, 0.1);
-            --map-color: #db2777;     /* dark pink */
-            --map-glow: rgba(219, 39, 119, 0.1);
-
-            /* Status colors */
-            --status-ok: #16a34a;
-            --status-warn: #ca8a04;
-            --status-critical: #dc2626;
-            --status-offline: #64748b;
+            /* Monitor Theme Palette (Identical to physical monitor) */
+            --bg-monitor: #000000;
+            --bg-card: #080808;
+            --border-color: #1a1a1a;
+            
+            --ecg-color: #00ff66;       /* Bright medical green */
+            --spo2-color: #00ffff;      /* Cyan */
+            --resp-color: #ffff00;      /* Yellow */
+            --nibp-color: #ffffff;      /* White */
+            --temp-color: #ffff00;      /* Yellow temperature */
+            
+            --gray-btn: #333333;
+            --gray-btn-hover: #444444;
+            --text-dim: #888888;
         }
 
         body {
             font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            min-height: 100vh;
-            overflow-x: hidden;
+            background: var(--bg-monitor);
+            color: #ffffff;
+            height: 100vh;
+            overflow: hidden;
             display: flex;
             flex-direction: column;
+            user-select: none;
         }
 
-        /* === Animated Grid Background === */
-        .bg-grid {
+        /* === Retractable Developer Control Panel === */
+        .dev-controls {
             position: fixed;
-            inset: 0;
-            z-index: 0;
-            background-image:
-                linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px),
-                linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
-            background-size: 30px 30px;
-            pointer-events: none;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%) translateY(-100%);
+            background: rgba(20, 20, 20, 0.95);
+            border: 1px solid #333;
+            border-top: none;
+            border-radius: 0 0 16px 16px;
+            padding: 10px 24px;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            z-index: 1000;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.8);
+            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
         }
 
-        .bg-glow {
+        .dev-controls:hover,
+        .dev-controls.active {
+            transform: translateX(-50%) translateY(0);
+        }
+
+        /* Invisible hover trigger zone at the top of the page */
+        .dev-trigger-zone {
             position: fixed;
-            top: -200px;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 12px;
+            z-index: 999;
+            cursor: pointer;
+        }
+
+        .dev-trigger-zone:hover + .dev-controls {
+            transform: translateX(-50%) translateY(0);
+        }
+
+        .dev-pull-tab {
+            position: absolute;
+            bottom: -20px;
             left: 50%;
             transform: translateX(-50%);
-            width: 800px;
-            height: 600px;
-            background: radial-gradient(ellipse, rgba(8, 145, 178, 0.05), transparent 70%);
-            z-index: 0;
-            pointer-events: none;
-            animation: glowPulse 8s ease-in-out infinite;
-        }
-
-        @keyframes glowPulse {
-            0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
-            50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
-        }
-
-        /* === Layout === */
-        .app-container {
-            position: relative;
-            z-index: 1;
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 12px;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-start;
-            width: 100%;
-            box-sizing: border-box;
-        }
-
-        /* === Header === */
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 8px 16px;
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            box-shadow: 
-                0 2px 4px -1px rgba(0, 0, 0, 0.01),
-                0 4px 6px -3px rgba(0, 0, 0, 0.02);
-            margin-bottom: 12px;
-        }
-
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .header-icon {
-            width: 32px;
-            height: 32px;
-            border-radius: 8px;
-            background: linear-gradient(135deg, var(--spo2-color), var(--hr-color));
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            box-shadow: 0 2px 6px rgba(8, 145, 178, 0.15);
-        }
-
-        .header-title {
-            font-size: 15px;
+            background: #222;
+            color: #888;
+            font-size: 9px;
+            padding: 2px 10px;
+            border-radius: 0 0 6px 6px;
+            border: 1px solid #333;
+            border-top: none;
             font-weight: 700;
-            letter-spacing: -0.3px;
-            color: var(--text-primary);
+            pointer-events: none;
         }
 
-        .header-subtitle {
-            font-size: 11px;
-            color: var(--text-secondary);
-            margin-top: 1px;
-            font-weight: 500;
-        }
-
-        .header-right {
+        .device-selector-container {
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 8px;
+        }
+
+        .device-select-dropdown {
+            background: #111;
+            border: 1px solid #444;
+            color: #fff;
+            padding: 4px 8px;
+            border-radius: 6px;
+            font-size: 11px;
+            font-weight: 600;
+            outline: none;
+            cursor: pointer;
         }
 
-        /* Audio Alert Toggle */
         .audio-toggle {
             display: flex;
             align-items: center;
             gap: 6px;
-            padding: 6px 12px;
-            border-radius: 12px;
+            padding: 4px 10px;
+            border-radius: 6px;
             font-size: 11px;
             font-weight: 600;
-            background: rgba(71, 85, 105, 0.06);
-            border: 1px solid rgba(71, 85, 105, 0.1);
-            color: var(--text-secondary);
+            background: #222;
+            border: 1px solid #444;
+            color: #ccc;
             cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-            user-select: none;
-        }
-
-        .audio-toggle:hover {
-            background: rgba(71, 85, 105, 0.12);
-            color: var(--text-primary);
         }
 
         .audio-toggle.active {
-            background: rgba(239, 68, 68, 0.08);
-            border-color: rgba(239, 68, 68, 0.2);
-            color: var(--status-critical);
+            background: rgba(255, 0, 0, 0.2);
+            border-color: #ff3333;
+            color: #ff5555;
         }
 
         .connection-badge {
             display: flex;
             align-items: center;
             gap: 6px;
-            padding: 6px 12px;
-            border-radius: 12px;
+            padding: 4px 10px;
+            border-radius: 6px;
             font-size: 11px;
             font-weight: 600;
-            background: rgba(22, 163, 74, 0.08);
-            border: 1px solid rgba(22, 163, 74, 0.15);
-            color: var(--status-ok);
-            transition: all 0.3s;
+            background: rgba(0, 255, 0, 0.1);
+            border: 1px solid #00aa44;
+            color: #00ff66;
         }
 
         .connection-badge.offline {
-            background: rgba(100, 116, 139, 0.08);
-            border-color: rgba(100, 116, 139, 0.15);
-            color: var(--status-offline);
+            background: rgba(255,0,0,0.1);
+            border-color: #aa0000;
+            color: #ff3333;
         }
 
         .connection-badge.warning {
-            background: rgba(202, 138, 4, 0.08);
-            border-color: rgba(202, 138, 4, 0.15);
-            color: var(--status-warn);
+            background: rgba(255,255,0,0.1);
+            border-color: #aaaa00;
+            color: #ffff00;
         }
 
-        .status-dot {
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            background: var(--status-ok);
-            animation: statusPulse 2s ease-in-out infinite;
-        }
-
-        .connection-badge.offline .status-dot {
-            background: var(--status-offline);
-            animation: none;
-        }
-
-        @keyframes statusPulse {
-            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
-            50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
-        }
-
-        .time-display {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-secondary);
-        }
-
-        /* === Device Selector Styles === */
-        .device-selector-container {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            margin-right: 4px;
-        }
-
-        .device-select-dropdown {
-            background: #ffffff;
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            padding: 6px 12px;
-            border-radius: 12px;
-            font-size: 11px;
-            font-weight: 600;
-            outline: none;
-            cursor: pointer;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.01);
-            transition: all 0.3s;
-        }
-
-        .device-select-dropdown:hover {
-            border-color: var(--spo2-color);
-            background: #f8fafc;
-        }
-        
-        .device-select-dropdown option {
-            background-color: #ffffff;
-            color: var(--text-primary);
-        }
-
-        /* === Setup Guide Panel === */
-        .setup-guide {
-            display: none !important;
-        }
-
-        .setup-guide-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 16px 24px;
-            cursor: pointer;
-            user-select: none;
-        }
-
-        .setup-guide-header:hover {
-            background: rgba(0, 0, 0, 0.01);
-        }
-
-        .setup-guide-title {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            font-size: 14px;
-            font-weight: 700;
-            color: var(--spo2-color);
-        }
-
-        .setup-guide-toggle {
-            font-size: 12px;
-            color: var(--text-secondary);
-            padding: 4px 12px;
-            border-radius: 8px;
-            background: rgba(0, 0, 0, 0.03);
-            transition: all 0.2s;
-            font-weight: 600;
-        }
-
-        .setup-guide-body {
-            padding: 0 24px 20px 24px;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-        }
-
-        .setup-step {
-            display: flex;
-            gap: 14px;
-            align-items: flex-start;
-        }
-
-        .step-number {
-            width: 32px;
-            height: 32px;
-            border-radius: 10px;
-            background: rgba(8, 145, 178, 0.08);
-            color: var(--spo2-color);
+        /* === Patient Verification Overlay === */
+        .verification-overlay {
+            position: fixed;
+            inset: 0;
+            background: #000000;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-weight: 700;
-            font-size: 14px;
-            flex-shrink: 0;
+            z-index: 100;
         }
 
-        .step-content h4 {
+        .error-card {
+            background: #080808;
+            border: 1px solid #222;
+            border-radius: 12px;
+            padding: 24px;
+            max-width: 450px;
+            text-align: center;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.9);
+        }
+
+        .error-icon {
+            font-size: 48px;
+            margin-bottom: 16px;
+        }
+
+        .error-card h2 {
+            font-size: 18px;
+            font-weight: 700;
+            color: #fff;
+            margin-bottom: 10px;
+        }
+
+        .error-card p {
             font-size: 13px;
-            font-weight: 700;
-            color: var(--text-primary);
-            margin-bottom: 4px;
-        }
-
-        .step-content p {
-            font-size: 12px;
-            color: var(--text-secondary);
+            color: #888;
             line-height: 1.5;
         }
 
-        .step-content code {
-            background: rgba(0, 0, 0, 0.04);
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 11px;
-            color: var(--spo2-color);
+        .verification-overlay.loading .error-icon {
+            animation: spin 1.5s linear infinite;
         }
 
-        .setup-ip-display {
-            grid-column: 1 / -1;
-            background: rgba(0, 0, 0, 0.02);
-            border-radius: 12px;
-            padding: 16px 20px;
+        @keyframes spin {
+            100% { transform: rotate(360deg); }
+        }
+
+        /* === CMS8500 Main Monitor Layout === */
+        .monitor-container {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            background: #000;
+            padding: 4px;
+            justify-content: space-between;
+        }
+
+        /* Top Banner Info */
+        .monitor-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            flex-wrap: wrap;
+            background: #000;
+            padding: 2px 8px;
+            font-size: 12px;
+            font-weight: 600;
+            border-bottom: 1px solid #111;
+            height: 24px;
+        }
+
+        .patient-banner-info {
+            display: flex;
+            align-items: center;
             gap: 12px;
-            border: 1px solid rgba(0, 0, 0, 0.04);
+            color: #00ff66;
         }
 
-        .setup-ip-display div {
-            font-weight: 600;
-        }
-
-        .setup-ip-label {
-            font-size: 13px;
-            color: var(--text-secondary);
-            font-weight: 600;
-        }
-
-        .setup-ip-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 18px;
-            font-weight: 800;
-            color: var(--spo2-color);
-        }
-
-        /* === Vitals Grid === */
-        .vitals-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-            align-content: start;
-        }
-
-        .vital-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            padding: 8px 12px;
-            position: relative;
-            overflow: hidden;
-            box-shadow: 
-                0 1px 3px rgba(0, 0, 0, 0.01),
-                0 2px 4px rgba(0, 0, 0, 0.02);
-            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-            display: grid;
-            grid-template-areas: "header value waveform";
-            grid-template-columns: 90px 70px 1fr;
-            grid-template-rows: 40px;
-            align-items: center;
-            gap: 0 10px;
-            height: 56px;
-            box-sizing: border-box;
-        }
-
-        .vital-card:hover {
-            background: var(--bg-card-hover);
-            transform: translateY(-1px);
-            box-shadow: 
-                0 4px 8px -2px rgba(0, 0, 0, 0.04),
-                0 0 0 1px rgba(0, 0, 0, 0.01);
-        }
-
-        .vital-card.hr:hover { border-color: rgba(220, 38, 38, 0.25); }
-        .vital-card.spo2:hover { border-color: rgba(8, 145, 178, 0.25); }
-        .vital-card.bp:hover { border-color: rgba(124, 58, 237, 0.25); }
-        .vital-card.rr:hover { border-color: rgba(22, 163, 74, 0.25); }
-        .vital-card.temp:hover { border-color: rgba(234, 88, 12, 0.25); }
-        .vital-card.map-card:hover { border-color: rgba(219, 39, 119, 0.25); }
-
-        .vital-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            width: 3px;
-            border-radius: 8px 0 0 8px;
-        }
-
-        .vital-card.hr::before { background: linear-gradient(180deg, var(--hr-color), transparent); }
-        .vital-card.spo2::before { background: linear-gradient(180deg, var(--spo2-color), transparent); }
-        .vital-card.bp::before { background: linear-gradient(180deg, var(--bp-color), transparent); }
-        .vital-card.rr::before { background: linear-gradient(180deg, var(--rr-color), transparent); }
-        .vital-card.temp::before { background: linear-gradient(180deg, var(--temp-color), transparent); }
-        .vital-card.map-card::before { background: linear-gradient(180deg, var(--map-color), transparent); }
-
-        /* Glow effect behind cards */
-        .vital-card::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 20%;
-            width: 80px;
-            height: 80px;
+        .patient-banner-info .gender-badge {
+            background: #0044bb;
+            color: #fff;
+            padding: 0 6px;
             border-radius: 50%;
-            transform: translate(-50%, -50%);
-            opacity: 0;
-            transition: opacity 0.6s;
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .vital-card.hr::after { background: radial-gradient(circle, var(--hr-glow), transparent 70%); }
-        .vital-card.spo2::after { background: radial-gradient(circle, var(--spo2-glow), transparent 70%); }
-        .vital-card.bp::after { background: radial-gradient(circle, var(--bp-glow), transparent 70%); }
-        .vital-card.rr::after { background: radial-gradient(circle, var(--rr-glow), transparent 70%); }
-        .vital-card.temp::after { background: radial-gradient(circle, var(--temp-glow), transparent 70%); }
-        .vital-card.map-card::after { background: radial-gradient(circle, var(--map-glow), transparent 70%); }
-
-        .vital-card.has-value::after {
-            opacity: 0.15;
-        }
-
-        .vital-card.has-value:hover::after {
-            opacity: 0.3;
-        }
-
-        .card-header {
-            grid-area: header;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            justify-content: center;
-            position: relative;
-            z-index: 1;
-            padding-bottom: 0;
-            margin-bottom: 0;
-        }
-
-        .card-label {
-            display: flex;
-            align-items: center;
-            gap: 4px;
-        }
-
-        .card-icon {
-            display: none !important;
-        }
-
-        .card-name {
             font-size: 10px;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
-
-        .vital-card.hr .card-name { color: var(--hr-color); }
-        .vital-card.spo2 .card-name { color: var(--spo2-color); }
-        .vital-card.bp .card-name { color: var(--bp-color); }
-        .vital-card.rr .card-name { color: var(--rr-color); }
-        .vital-card.temp .card-name { color: var(--temp-color); }
-        .vital-card.map-card .card-name { color: var(--map-color); }
-
-        .status-badge {
-            display: none !important;
-        }
-
-        /* === Vital Value Display === */
-        .vital-value-container {
-            grid-area: value;
+            height: 16px;
             display: flex;
             align-items: center;
-            justify-content: flex-start;
-            position: relative;
-            z-index: 1;
-            height: 100%;
+            font-weight: 800;
         }
 
-        .vital-value {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 28px;
-            font-weight: 700;
-            line-height: 1;
-            letter-spacing: -0.5px;
-            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-        }
-
-        .vital-card.hr .vital-value { color: var(--hr-color); text-shadow: 0 0 4px rgba(220, 38, 38, 0.12); }
-        .vital-card.spo2 .vital-value { color: var(--spo2-color); text-shadow: 0 0 4px rgba(8, 145, 178, 0.12); }
-        .vital-card.bp .vital-value { color: var(--bp-color); text-shadow: 0 0 4px rgba(124, 58, 237, 0.12); }
-        .vital-card.rr .vital-value { color: var(--rr-color); text-shadow: 0 0 4px rgba(22, 163, 74, 0.12); }
-        .vital-card.temp .vital-value { color: var(--temp-color); text-shadow: 0 0 4px rgba(234, 88, 12, 0.12); }
-        .vital-card.map-card .vital-value { color: var(--map-color); text-shadow: 0 0 4px rgba(219, 39, 119, 0.12); }
-
-        .vital-value.no-data {
-            font-size: 22px;
-            color: var(--text-dim) !important;
-            text-shadow: none !important;
-        }
-
-        .vital-value .unit {
-            font-size: 11px;
-            font-weight: 500;
-            letter-spacing: 0;
-            margin-left: 2px;
-            color: var(--text-secondary);
-            text-shadow: none !important;
-        }
-
-        .vital-value .slash {
-            font-size: 22px;
-            opacity: 0.3;
-            margin: 0;
-            color: var(--text-secondary);
-            text-shadow: none !important;
-        }
-
-        .vital-value-update {
-            animation: valueFlash 0.6s ease-out;
-        }
-
-        @keyframes valueFlash {
-            0% { transform: scale(1.02); filter: brightness(1.08); }
-            100% { transform: scale(1); filter: brightness(1); }
-        }
-
-        /* === Waveform Canvas === */
-        .waveform-container {
-            grid-area: waveform;
-            height: 40px;
-            position: relative;
-            z-index: 1;
-            overflow: hidden;
-            border-radius: 4px;
-            background: rgba(0, 0, 0, 0.01);
-        }
-
-        .waveform-container canvas {
-            width: 100%;
-            height: 100%;
-            display: block;
-        }
-
-        /* === Normal Range Footer === */
-        .card-footer {
-            display: none !important;
-        }
-
-        /* === Info Bar === */
-        .info-bar {
-            display: none !important;
-        }
-
-
-        @media (max-width: 1024px) {
-            .vitals-grid {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 12px;
-            }
-            .setup-guide-body {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        @media (max-width: 640px) {
-            .app-container { padding: 12px; }
-            .vitals-grid {
-                grid-template-columns: 1fr;
-                gap: 12px;
-            }
-            .header {
-                flex-direction: column;
-                gap: 16px;
-                text-align: center;
-                align-items: center;
-                padding: 20px;
-            }
-            .header-left {
-                flex-direction: column;
-                align-items: center;
-                gap: 10px;
-            }
-            .header-right {
-                flex-direction: column;
-                width: 100%;
-                gap: 12px;
-            }
-            .device-selector-container {
-                width: 100%;
-                justify-content: center;
-                margin-right: 0;
-            }
-            .device-select-dropdown {
-                width: 100%;
-                max-width: 250px;
-            }
-            .setup-guide-body {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        /* === Patient Clinical Info Banner === */
-        .patient-banner {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            gap: 20px;
-            padding: 8px 16px;
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            box-shadow: 
-                0 2px 4px -1px rgba(0, 0, 0, 0.01),
-                0 4px 6px -3px rgba(0, 0, 0, 0.02);
-            margin-bottom: 12px;
-            flex-wrap: wrap;
-        }
-
-        .patient-banner-group {
+        .alarm-notifications {
             display: flex;
             align-items: center;
             gap: 8px;
         }
 
-        .patient-avatar {
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-            background: rgba(8, 145, 178, 0.06);
-            color: var(--spo2-color);
+        .alarm-badge {
+            font-size: 10px;
+            padding: 1px 8px;
+            border-radius: 2px;
+            font-weight: 700;
+        }
+
+        .alarm-badge.blue {
+            background: #0044aa;
+            color: #ffffff;
+        }
+
+        .alarm-badge.yellow {
+            background: #ffff00;
+            color: #000000;
+        }
+
+        .system-status-icons {
             display: flex;
             align-items: center;
-            justify-content: center;
+            gap: 10px;
+            color: #888;
         }
 
-        .patient-avatar svg {
-            width: 14px;
-            height: 14px;
+        .system-status-icons .clock {
+            font-family: 'JetBrains Mono', monospace;
+            color: #fff;
         }
 
-        .patient-label {
-            font-size: 9px;
-            color: var(--text-secondary);
+        /* Main Workspace Grid (Left waveforms, Right digits) */
+        .monitor-body {
+            display: grid;
+            grid-template-columns: 1fr 240px;
+            flex: 1;
+            gap: 4px;
+            overflow: hidden;
+            margin: 4px 0;
+        }
+
+        /* Left Side: Waveform Channels */
+        .wave-channels {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            gap: 4px;
+            background: #000;
+        }
+
+        .wave-channel {
+            flex: 1;
+            position: relative;
+            background: #000;
+            border-bottom: 1px solid rgba(255,255,255,0.02);
+            display: flex;
+            flex-direction: column;
+            min-height: 0;
+        }
+
+        .channel-label {
+            position: absolute;
+            top: 4px;
+            left: 8px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 11px;
+            font-weight: 700;
+            z-index: 10;
+        }
+
+        .channel-label.ecg { color: var(--ecg-color); }
+        .channel-label.spo2 { color: var(--spo2-color); }
+        .channel-label.resp { color: var(--resp-color); }
+
+        .wave-canvas-wrapper {
+            flex: 1;
+            position: relative;
+            min-height: 0;
+        }
+
+        .wave-canvas-wrapper canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        /* Right Side: Numeric Vitals Blocks */
+        .digit-panels {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            gap: 4px;
+        }
+
+        .digit-panel {
+            flex: 1;
+            background: #080808;
+            border: 1px solid #111;
+            border-radius: 4px;
+            padding: 6px 12px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            position: relative;
+            min-height: 0;
+        }
+
+        .digit-panel-header {
+            font-size: 10px;
             font-weight: 700;
             text-transform: uppercase;
-            letter-spacing: 0.3px;
+            letter-spacing: 0.5px;
         }
 
-        .patient-value-text {
-            font-size: 12px;
-            color: var(--text-primary);
+        .digit-panel.ecg .digit-panel-header { color: var(--ecg-color); }
+        .digit-panel.spo2 .digit-panel-header { color: var(--spo2-color); }
+        .digit-panel.resp .digit-panel-header { color: var(--resp-color); }
+
+        .digit-panel-body {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
+        }
+
+        .digit-value {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 72px;
+            font-weight: 800;
+            line-height: 0.9;
+        }
+
+        .digit-panel.ecg .digit-value { color: var(--ecg-color); }
+        .digit-panel.spo2 .digit-value { color: var(--spo2-color); }
+        .digit-panel.resp .digit-value { color: var(--resp-color); }
+
+        .digit-value.no-data {
+            font-size: 54px;
+            color: #333 !important;
+        }
+
+        .digit-sub-indicators {
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+            font-size: 9px;
+            font-weight: 600;
+            color: #aaa;
+        }
+
+        .digit-panel.ecg .digit-sub-indicators { color: var(--ecg-color); }
+        .digit-panel.spo2 .digit-sub-indicators { color: var(--spo2-color); }
+        .digit-panel.resp .digit-sub-indicators { color: var(--resp-color); }
+
+        /* Bottom Section: Measurements Grid */
+        .monitor-bottom {
+            display: grid;
+            grid-template-columns: 1fr 220px 240px;
+            gap: 4px;
+            height: 90px;
+            background: #000;
+        }
+
+        .bottom-card {
+            background: #080808;
+            border: 1px solid #111;
+            border-radius: 4px;
+            padding: 6px 10px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            min-height: 0;
+        }
+
+        /* NIBP List */
+        .nibp-list-card {
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .nibp-list-title {
+            font-size: 9px;
+            color: var(--nibp-color);
+            font-weight: 700;
+            margin-bottom: 4px;
+        }
+
+        .nibp-table {
+            width: 100%;
+            font-size: 9px;
+            border-collapse: collapse;
+            color: #fff;
+        }
+
+        .nibp-table th {
+            text-align: left;
+            color: #888;
+            padding-bottom: 2px;
+            font-weight: 600;
+        }
+
+        .nibp-table td {
+            padding: 1px 0;
+            color: #ffffff;
+        }
+
+        .nibp-table .time {
+            color: #888;
+        }
+
+        /* Temp Block */
+        .temp-card {
+            color: var(--temp-color);
+        }
+
+        .temp-title {
+            font-size: 9px;
             font-weight: 700;
         }
 
-        .patient-banner-divider {
-            height: 16px;
-            width: 1px;
-            background: var(--border-color);
+        .temp-body {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex: 1;
         }
 
-        .vital-svg {
+        .temp-value {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 38px;
+            font-weight: 800;
+            color: var(--temp-color);
+        }
+
+        .temp-details {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            font-size: 8px;
+            font-weight: 600;
+        }
+
+        .temp-limit-label {
+            font-size: 7px;
+            opacity: 0.6;
+        }
+
+        /* NIBP Panel (Right) */
+        .nibp-card {
+            color: var(--nibp-color);
+        }
+
+        .nibp-title {
+            font-size: 9px;
+            font-weight: 700;
+        }
+
+        .nibp-body {
+            display: flex;
+            align-items: baseline;
+            justify-content: space-between;
+            flex: 1;
+        }
+
+        .nibp-large-value {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 34px;
+            font-weight: 800;
+            color: #fff;
+        }
+
+        .nibp-map-value {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 18px;
+            font-weight: 700;
+            color: #aaa;
+            margin-left: 2px;
+        }
+
+        .nibp-info {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            font-size: 8px;
+            text-align: right;
+            color: #888;
+        }
+
+        /* Bottom Gray Buttons Panel */
+        .control-buttons-bar {
+            display: flex;
+            gap: 2px;
+            background: #222;
+            padding: 2px;
+            height: 38px;
+            border-top: 1px solid #111;
+        }
+
+        .ctrl-btn {
+            flex: 1;
+            background: #333;
+            border: none;
+            color: #eee;
+            font-family: 'Outfit', sans-serif;
+            font-size: 8px;
+            font-weight: 700;
+            cursor: pointer;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 2px;
+            border-radius: 2px;
+            transition: background 0.2s;
+            text-transform: uppercase;
+        }
+
+        .ctrl-btn:hover {
+            background: #444;
+        }
+
+        .ctrl-btn svg {
+            width: 12px;
+            height: 12px;
+            stroke: #aaa;
             stroke-width: 2.5;
-            transition: transform 0.3s ease;
-        }
-        
-        .vital-card:hover .vital-svg {
-            transform: scale(1.1);
-        }
-        
-        .vital-card.hr .card-icon { color: var(--hr-color); }
-        .vital-card.spo2 .card-icon { color: var(--spo2-color); }
-        .vital-card.bp .card-icon { color: var(--bp-color); }
-        .vital-card.rr .card-icon { color: var(--rr-color); }
-        .vital-card.temp .card-icon { color: var(--temp-color); }
-        .vital-card.map-card .card-icon { color: var(--map-color); }
-
-        @media (max-width: 768px) {
-            .patient-banner-divider {
-                display: none;
-            }
-            .patient-banner {
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                gap: 16px;
-            }
+            fill: none;
         }
 
-        @media (max-width: 480px) {
-            .patient-banner {
-                grid-template-columns: 1fr;
-            }
+        .ctrl-btn.orange {
+            background: #d97706;
+            color: #000;
+        }
+        .ctrl-btn.orange:hover {
+            background: #f59e0b;
+        }
+        .ctrl-btn.orange svg {
+            stroke: #000;
         }
 
-        /* === Minimal mode for clean iframe embeds === */
-        body.minimal-mode .header { display: none !important; }
-        body.minimal-mode .patient-banner { display: none !important; }
-        body.minimal-mode .setup-guide { display: none !important; }
-        body.minimal-mode .info-bar { display: none !important; }
-        body.minimal-mode .app-container {
-            padding: 0 !important;
-            max-width: 100% !important;
-            margin: 0 !important;
-        }
+        /* === Minimal/Clean Mode for Iframe (Electron) === */
         body.minimal-mode {
-            padding: 0 !important;
-            background: transparent !important;
+            padding: 0;
+            margin: 0;
+            background: #000;
         }
-        body.minimal-mode .bg-grid, body.minimal-mode .bg-glow {
+
+        body.minimal-mode .dev-trigger-zone,
+        body.minimal-mode .dev-controls,
+        body.minimal-mode .control-buttons-bar,
+        body.minimal-mode .monitor-header {
             display: none !important;
         }
 
-        /* === Verification Failure Overlay === */
-        .verification-overlay {
-            position: fixed;
-            inset: 0;
-            background: rgba(248, 250, 252, 0.98);
-            z-index: 9999;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            text-align: center;
-            padding: 24px;
-            color: var(--text-primary);
+        body.minimal-mode .monitor-container {
+            padding: 2px;
+            height: 100vh;
         }
-        .verification-overlay .error-card {
-            background: #ffffff;
-            border: 1px solid rgba(220, 38, 38, 0.12);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-            border-radius: 16px;
-            padding: 32px;
-            max-width: 460px;
-            width: 100%;
-            transition: all 0.3s ease;
+
+        body.minimal-mode .monitor-bottom {
+            height: 60px;
         }
-        .verification-overlay .error-icon {
-            font-size: 40px;
-            margin-bottom: 16px;
+
+        body.minimal-mode .nibp-large-value {
+            font-size: 26px;
         }
-        .verification-overlay h2 {
-            font-size: 19px;
-            font-weight: 700;
-            margin-bottom: 8px;
-            color: #dc2626;
+
+        body.minimal-mode .temp-value {
+            font-size: 28px;
         }
-        .verification-overlay p {
-            font-size: 13px;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-        .verification-overlay.loading h2 {
-            color: var(--spo2-color);
-        }
-        .verification-overlay.loading .error-icon {
-            animation: rotateGlow 2s linear infinite;
-        }
-        @keyframes rotateGlow {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+
+        body.minimal-mode .digit-value {
+            font-size: 48px;
         }
     </style>
 </head>
 <body>
+
+    <!-- Retractable Dev Controls for configuring monitors/audio -->
+    <div class="dev-trigger-zone"></div>
+    <div class="dev-controls" id="devControls">
+        <div class="dev-pull-tab">DEV CONTROLS (HOVER)</div>
+        <div class="device-selector-container">
+            <label for="deviceSelector" style="font-size: 11px; color: #888; font-weight: 600;">Monitor:</label>
+            <select id="deviceSelector" class="device-select-dropdown" onchange="selectDevice(this.value)">
+                <option value="">Waiting...</option>
+            </select>
+        </div>
+        <div class="audio-toggle" id="audioToggle" onclick="toggleAudioAlert()" title="Toggle audio alerts">
+            <span id="audioIcon">🔇</span>
+            <span id="audioText">Alerts Off</span>
+        </div>
+        <div class="connection-badge offline" id="connectionBadge">
+            <span id="connectionText">Offline</span>
+        </div>
+        <div style="font-size: 10px; color: #888;">
+            IP: <strong id="detectedIp" style="color: #fff;">...</strong>
+        </div>
+    </div>
+
     <!-- Patient Verification Overlay -->
     <div id="verificationOverlay" class="verification-overlay" style="display: none;">
         <div class="error-card" id="verificationCard">
             <div class="error-icon" id="verificationIcon">🔒</div>
             <h2 id="verificationTitle">Patient Verification Required</h2>
-            <p id="verificationMsg">Telemetry data is only displayed once the patient's MRN, Name, Gender, and DOB are fully verified against the active monitor.</p>
+            <p id="verificationMsg">Access restricted. Telemetry is only displayed when patient MRN is fully verified against the monitor configuration.</p>
         </div>
     </div>
 
-    <div class="bg-grid"></div>
-    <div class="bg-glow"></div>
-
-    <div class="app-container">
-        <!-- Header -->
-        <header class="header" id="header">
-            <div class="header-left">
-                <div>
-                    <div class="header-title">Patient Vital Signs Monitor</div>
-                    <div class="header-subtitle">Contec Monitor — Real-time Monitoring</div>
-                </div>
+    <!-- CMS8500 Monitor Simulation Container -->
+    <div class="monitor-container">
+        
+        <!-- Top Status Bar -->
+        <header class="monitor-header">
+            <div class="patient-banner-info">
+                <span class="gender-badge" id="bannerGender">M</span>
+                <span id="bannerPatientBed">01 Adu 1Bed</span>
+                <strong id="bannerPatientName" style="color: #fff;">Shahil Kumar</strong>
             </div>
-            <div class="header-right">
-                <div class="device-selector-container">
-                    <label for="deviceSelector" style="font-size: 13px; color: var(--text-secondary); font-weight: 500;">Select Monitor:</label>
-                    <select id="deviceSelector" class="device-select-dropdown" onchange="selectDevice(this.value)">
-                        <option value="">Waiting for devices...</option>
-                    </select>
-                </div>
-                <div class="audio-toggle" id="audioToggle" onclick="toggleAudioAlert()" title="Toggle audio alerts for critical vitals">
-                    <span id="audioIcon">🔇</span>
-                    <span id="audioText">Alerts Off</span>
-                </div>
-                <div class="connection-badge offline" id="connectionBadge">
-                    <div class="status-dot"></div>
-                    <span id="connectionText">Connecting...</span>
-                </div>
-                <div class="time-display" id="timeDisplay">--:--:--</div>
+            
+            <div class="alarm-notifications">
+                <span class="alarm-badge blue" id="alarmNibp">*NIBP Loose Cuff</span>
+                <span class="alarm-badge blue" id="alarmT2">*T2 Sensor Off</span>
+                <span class="alarm-badge yellow" id="alarmT1">**T1 Too Low</span>
+            </div>
+            
+            <div class="system-status-icons">
+                <span style="font-size: 11px;">🔋 📶 🔊</span>
+                <span class="clock" id="timeDisplay">12:56:17</span>
             </div>
         </header>
 
-
-        <!-- Vitals Grid -->
-        <div class="vitals-grid">
-            <!-- Heart Rate -->
-            <div class="vital-card hr" id="card-hr">
-                <div class="card-header">
-                    <div class="card-label">
-                        <div class="card-icon">
-                            <svg class="vital-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
-                            </svg>
-                        </div>
-                        <span class="card-name">Heart Rate</span>
+        <!-- Main Screen Grid: Waveforms + Digits -->
+        <div class="monitor-body">
+            
+            <!-- Left Waveform Traces -->
+            <div class="wave-channels">
+                <!-- ECG Lead II -->
+                <div class="wave-channel">
+                    <div class="channel-label ecg">II &nbsp; X1 &nbsp; Monitor &nbsp; Notch Off</div>
+                    <div class="wave-canvas-wrapper">
+                        <canvas id="waveform-ecg2"></canvas>
                     </div>
-                    <span class="status-badge offline" id="status-hr">No Data</span>
                 </div>
-                <div class="vital-value-container">
-                    <div class="vital-value no-data" id="value-hr">---</div>
+                
+                <!-- ECG Lead I -->
+                <div class="wave-channel">
+                    <div class="channel-label ecg">I &nbsp; X1</div>
+                    <div class="wave-canvas-wrapper">
+                        <canvas id="waveform-ecg1"></canvas>
+                    </div>
                 </div>
-                <div class="waveform-container">
-                    <canvas id="waveform-hr"></canvas>
+                
+                <!-- SpO2 Pleth -->
+                <div class="wave-channel">
+                    <div class="channel-label spo2">Pleth</div>
+                    <div class="wave-canvas-wrapper">
+                        <canvas id="waveform-pleth"></canvas>
+                    </div>
                 </div>
-                <div class="card-footer">
-                    <span class="normal-range">Normal: 60–100 bpm</span>
-                    <span class="last-update" id="update-hr">--</span>
+                
+                <!-- Respiration -->
+                <div class="wave-channel">
+                    <div class="channel-label resp">Resp &nbsp; X2 &nbsp; II</div>
+                    <div class="wave-canvas-wrapper">
+                        <canvas id="waveform-resp"></canvas>
+                    </div>
                 </div>
             </div>
 
-            <!-- SpO2 -->
-            <div class="vital-card spo2" id="card-spo2">
-                <div class="card-header">
-                    <div class="card-label">
-                        <div class="card-icon">
-                            <svg class="vital-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M7 3a3 3 0 0 0-3 3v6a3 3 0 0 0 3 3h1a2 2 0 0 0 2-2V6a3 3 0 0 0-3-3z"/>
-                                <path d="M17 3a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-1a2 2 0 0 1-2-2V6a3 3 0 0 1 3-3z"/>
-                                <path d="M9 20h6"/>
-                                <path d="M12 16v4"/>
-                            </svg>
+            <!-- Right Digit Displays -->
+            <div class="digit-panels">
+                <!-- ECG panel -->
+                <div class="digit-panel ecg">
+                    <div class="digit-panel-header">ECG <span style="font-size: 8px;">bpm</span></div>
+                    <div class="digit-panel-body">
+                        <div class="digit-value no-data" id="value-hr">---</div>
+                        <div class="digit-sub-indicators">
+                            <div>ST-II Off</div>
+                            <div>PVCs --</div>
                         </div>
-                        <span class="card-name">SpO₂</span>
                     </div>
-                    <span class="status-badge offline" id="status-spo2">No Data</span>
                 </div>
-                <div class="vital-value-container">
-                    <div class="vital-value no-data" id="value-spo2">---</div>
-                </div>
-                <div class="waveform-container">
-                    <canvas id="waveform-spo2"></canvas>
-                </div>
-                <div class="card-footer">
-                    <span class="normal-range">Normal: 95–100%</span>
-                    <span class="last-update" id="update-spo2">--</span>
-                </div>
-            </div>
-
-            <!-- Blood Pressure -->
-            <div class="vital-card bp" id="card-bp">
-                <div class="card-header">
-                    <div class="card-label">
-                        <div class="card-icon">
-                            <svg class="vital-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M12 22a7 7 0 0 0 7-7c0-4.3-7-13-7-13S5 10.7 5 15a7 7 0 0 0 7 7z"/>
-                            </svg>
+                
+                <!-- SpO2 panel -->
+                <div class="digit-panel spo2">
+                    <div class="digit-panel-header">SpO₂ <span style="font-size: 8px;">%</span></div>
+                    <div class="digit-panel-body">
+                        <div class="digit-value no-data" id="value-spo2">---</div>
+                        <div class="digit-sub-indicators">
+                            <div>PR bpm <span id="value-pr">--</span></div>
+                            <div>PI % <span id="value-pi">3.70</span></div>
                         </div>
-                        <span class="card-name">Blood Pressure</span>
                     </div>
-                    <span class="status-badge offline" id="status-bp">No Data</span>
                 </div>
-                <div class="vital-value-container">
-                    <div class="vital-value no-data" id="value-bp">---</div>
-                </div>
-                <div class="waveform-container">
-                    <canvas id="waveform-bp"></canvas>
-                </div>
-                <div class="card-footer">
-                    <span class="normal-range">Normal: 90/60–140/90 mmHg</span>
-                    <span class="last-update" id="update-bp">--</span>
-                </div>
-            </div>
-
-            <!-- Respiratory Rate -->
-            <div class="vital-card rr" id="card-rr">
-                <div class="card-header">
-                    <div class="card-label">
-                        <div class="card-icon">
-                            <svg class="vital-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M2 8h16a4 4 0 0 1 4 4v0a4 4 0 0 1-4 4H2"/>
-                                <path d="M6 12h12a2 2 0 0 0 2-2v0a2 2 0 0 0-2-2H6"/>
-                                <path d="M2 16h8"/>
-                            </svg>
+                
+                <!-- Resp panel -->
+                <div class="digit-panel resp">
+                    <div class="digit-panel-header">Resp <span style="font-size: 8px;">rpm</span></div>
+                    <div class="digit-panel-body">
+                        <div class="digit-value no-data" id="value-rr">---</div>
+                        <div class="digit-sub-indicators">
+                            <div style="font-size: 12px; margin-top: 10px;">⚡⚡⚡</div>
                         </div>
-                        <span class="card-name">Respiratory Rate</span>
                     </div>
-                    <span class="status-badge offline" id="status-rr">No Data</span>
-                </div>
-                <div class="vital-value-container">
-                    <div class="vital-value no-data" id="value-rr">---</div>
-                </div>
-                <div class="waveform-container">
-                    <canvas id="waveform-rr"></canvas>
-                </div>
-                <div class="card-footer">
-                    <span class="normal-range">Normal: 12–20 /min</span>
-                    <span class="last-update" id="update-rr">--</span>
-                </div>
-            </div>
-
-            <!-- Temperature -->
-            <div class="vital-card temp" id="card-temp">
-                <div class="card-header">
-                    <div class="card-label">
-                        <div class="card-icon">
-                            <svg class="vital-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>
-                                <line x1="11.5" y1="5" x2="11.5" y2="13"/>
-                            </svg>
-                        </div>
-                        <span class="card-name">Temperature</span>
-                    </div>
-                    <span class="status-badge offline" id="status-temp">No Data</span>
-                </div>
-                <div class="vital-value-container">
-                    <div class="vital-value no-data" id="value-temp">---</div>
-                </div>
-                <div class="waveform-container">
-                    <canvas id="waveform-temp"></canvas>
-                </div>
-                <div class="card-footer">
-                    <span class="normal-range">Normal: 97.0–99.0 °F</span>
-                    <span class="last-update" id="update-temp">--</span>
-                </div>
-            </div>
-
-            <!-- MAP -->
-            <div class="vital-card map-card" id="card-map">
-                <div class="card-header">
-                    <div class="card-label">
-                        <div class="card-icon">
-                            <svg class="vital-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-                                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
-                            </svg>
-                        </div>
-                        <span class="card-name">Mean Arterial Pressure</span>
-                    </div>
-                    <span class="status-badge offline" id="status-map">No Data</span>
-                </div>
-                <div class="vital-value-container">
-                    <div class="vital-value no-data" id="value-map">---</div>
-                </div>
-                <div class="waveform-container">
-                    <canvas id="waveform-map"></canvas>
-                </div>
-                <div class="card-footer">
-                    <span class="normal-range">Normal: 70–105 mmHg</span>
-                    <span class="last-update" id="update-map">--</span>
                 </div>
             </div>
         </div>
 
-        <!-- Info Bar -->
-        <div class="info-bar">
-            <div class="info-item">
-                <span>Model:</span>
-                <span class="model-badge" id="modelBadge">CMS7000PLUS</span>
+        <!-- Bottom Measurement Panel -->
+        <div class="monitor-bottom">
+            <!-- NIBP List (Left) -->
+            <div class="bottom-card nibp-list-card">
+                <div class="nibp-list-title">NIBP List <span style="font-size: 7px; color: #888;">mmHg</span></div>
+                <table class="nibp-table" id="nibpTable">
+                    <thead>
+                        <tr>
+                            <th>SYS/DIA</th>
+                            <th>MAP</th>
+                            <th>PR</th>
+                            <th>Time</th>
+                        </tr>
+                    </thead>
+                    <tbody id="nibpTableBody">
+                        <tr>
+                            <td>125/80</td>
+                            <td>99</td>
+                            <td>92</td>
+                            <td class="time">12:54:49</td>
+                        </tr>
+                        <tr>
+                            <td>133/76</td>
+                            <td>89</td>
+                            <td>97</td>
+                            <td class="time">12:30:31</td>
+                        </tr>
+                        <tr>
+                            <td>141/76</td>
+                            <td>91</td>
+                            <td>100</td>
+                            <td class="time">12:21:43</td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
-            <div class="info-dot"></div>
-            <div class="info-item">
-                <span>Device:</span>
-                <strong id="deviceId">Waiting...</strong>
+
+            <!-- Temperature Panel (Center) -->
+            <div class="bottom-card temp-card">
+                <div class="temp-title">Temp <span style="font-size: 7px; color: #888;">°C</span></div>
+                <div class="temp-body">
+                    <div class="temp-value" id="value-temp">30.5</div>
+                    <div class="temp-details">
+                        <div>T1: <span id="value-t1">30.5</span></div>
+                        <div>T2: ---</div>
+                        <div>TD: ---</div>
+                        <div class="temp-limit-label">38.0 / 35.0</div>
+                    </div>
+                </div>
             </div>
-            <div class="info-dot"></div>
-            <div class="info-item">
-                <span>Patient:</span>
-                <strong id="patientId">Waiting...</strong>
-            </div>
-            <div class="info-dot"></div>
-            <div class="info-item">
-                <span>Readings:</span>
-                <strong id="totalReadings">0</strong>
-            </div>
-            <div class="info-dot"></div>
-            <div class="info-item">
-                <span>Last Update:</span>
-                <strong id="lastUpdateTime">Never</strong>
-            </div>
-            <div class="info-dot"></div>
-            <div class="info-item">
-                <span>API:</span>
-                <strong id="apiStatus">Checking...</strong>
+
+            <!-- NIBP Panel (Right) -->
+            <div class="bottom-card nibp-card">
+                <div class="nibp-title" id="nibpTimeTitle">NIBP mmHg @12:54</div>
+                <div class="nibp-body">
+                    <div>
+                        <span class="nibp-large-value" id="value-nibp">125/80</span>
+                        <span class="nibp-map-value" id="value-nibp-map">(99)</span>
+                    </div>
+                    <div class="nibp-info">
+                        <div>Auto Measuring</div>
+                        <div style="font-size: 6px; margin-top: 2px;">3min43s &nbsp; 15min</div>
+                    </div>
+                </div>
             </div>
         </div>
+
+        <!-- Bottom Gray Control Panel Buttons -->
+        <footer class="control-buttons-bar">
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M4 12h16M4 6h16M4 18h16" stroke="currentColor"/></svg>
+                More
+            </button>
+            <button class="ctrl-btn orange" onclick="toggleAudioAlert()">
+                <svg viewBox="0 0 24 24"><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke="currentColor"/></svg>
+                Alarm Reset
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M15.75 5.25v13.5m-7.5-13.5v13.5" stroke="currentColor"/></svg>
+                Alarm Pause
+            </button>
+            <button class="ctrl-btn" onclick="simulateNibpMeasurement()">
+                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor"/></svg>
+                NIBP Measure
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor"/></svg>
+                Stop All
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M12 2v20M2 12h20" stroke="currentColor"/></svg>
+                Zero IBP
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path 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 2" stroke="currentColor"/></svg>
+                Review
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M18.36 6.64a9 9 0 11-12.73 0M12 2v10" stroke="currentColor"/></svg>
+                Standby
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" stroke="currentColor"/><path d="M8 21h8M12 17v4" stroke="currentColor"/></svg>
+                Display Setup
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" stroke="currentColor"/></svg>
+                Patient Setup
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M12 8v4l3 3" stroke="currentColor"/></svg>
+                Manual Event
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4" stroke="currentColor"/></svg>
+                Print
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M12 18.75V5.25L7.75 9.5H4.5v5h3.25L12 18.75z" stroke="currentColor"/></svg>
+                Volume Setup
+            </button>
+            <button class="ctrl-btn">
+                <svg viewBox="0 0 24 24"><path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke="currentColor"/></svg>
+                Main Menu
+            </button>
+        </footer>
     </div>
 
     <script>
         // === Configuration ===
         const API_BASE = window.location.origin + '/api';
-        const POLL_INTERVAL = 2000; // 2 seconds
-        const WS_URL = `ws://${window.location.host}/ws/vitals`;
-
-        // === Vital ranges for status calculation ===
-        const VITAL_RANGES = {
-            heart_rate:       { low: 60, high: 100, critLow: 40, critHigh: 150 },
-            spo2:             { low: 95, high: 100, critLow: 90, critHigh: 101 },
-            systolic_bp:      { low: 90, high: 140, critLow: 70, critHigh: 180 },
-            diastolic_bp:     { low: 60, high: 90,  critLow: 40, critHigh: 120 },
-            map_bp:           { low: 70, high: 105, critLow: 60, critHigh: 130 },
-            respiratory_rate: { low: 12, high: 20,  critLow: 8,  critHigh: 30 },
-            temperature:      { low: 97.0, high: 99.0, critLow: 95.0, critHigh: 102.2 },
-        };
+        const POLL_INTERVAL = 2000;
+        const WS_URL = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/vitals`;
 
         // === State ===
         let lastReadingId = null;
         let readingCount = 0;
-        let waveformData = {
-            hr: [], spo2: [], bp: [], rr: [], temp: [], map: []
+        
+        // Circular Waveform Buffers (1000 virtual index points)
+        const WAVE_BUFFER_SIZE = 1000;
+        const waveBuffers = {
+            ecg2: new Float32Array(WAVE_BUFFER_SIZE),
+            ecg1: new Float32Array(WAVE_BUFFER_SIZE),
+            pleth: new Float32Array(WAVE_BUFFER_SIZE),
+            resp: new Float32Array(WAVE_BUFFER_SIZE)
         };
-        let waveformCanvases = {};
+        
+        let scanIndex = 0;
+        let ecgPhase = 0;
+        let plethPhase = 0;
+        let respPhase = 0;
+
+        let activeDevices = [];
+        let selectedDeviceId = localStorage.getItem('selectedDeviceId') || '';
+        let isMatchingMode = false;
+        let matchParams = {};
         let useWebSocket = false;
         let ws = null;
         let audioAlertEnabled = false;
         let audioContext = null;
-        let setupGuideCollapsed = false;
         let hasReceivedData = false;
 
-        let activeDevices = [];
-        let selectedDeviceId = localStorage.getItem('selectedDeviceId') || '';
+        // Numeric values synced from monitor
+        let currentHR = null;
+        let currentSpO2 = null;
+        let currentRR = null;
+        let currentTemp = 30.5;
 
-        // Verification / Matching Mode State
-        let isMatchingMode = false;
-        let matchParams = {};
+        // Waveform canvas context cache
+        const canvases = {};
 
+        // === procedural Waveform Functions ===
+        
+        function getECGValue(phase) {
+            const p = phase % 1.0;
+            let v = 0;
+            if (p < 0.1) {
+                // P wave
+                v = 0.08 * Math.sin((p / 0.1) * Math.PI);
+            } else if (p < 0.15) {
+                v = 0;
+            } else if (p < 0.17) {
+                // Q wave
+                v = -0.06 * Math.sin(((p - 0.15) / 0.02) * Math.PI);
+            } else if (p < 0.20) {
+                // R wave (sharp peak)
+                v = 0.85 * Math.sin(((p - 0.17) / 0.03) * Math.PI);
+            } else if (p < 0.23) {
+                // S wave (deep dip)
+                v = -0.22 * Math.sin(((p - 0.20) / 0.03) * Math.PI);
+            } else if (p < 0.32) {
+                v = 0;
+            } else if (p < 0.48) {
+                // T wave
+                v = 0.18 * Math.sin(((p - 0.32) / 0.16) * Math.PI);
+            } else {
+                v = 0;
+            }
+            // Add light high-frequency noise
+            return v + (Math.random() - 0.5) * 0.015;
+        }
+
+        function getECG1Value(phase) {
+            const p = phase % 1.0;
+            let v = 0;
+            if (p < 0.1) {
+                v = 0.05 * Math.sin((p / 0.1) * Math.PI);
+            } else if (p < 0.16) {
+                v = 0;
+            } else if (p < 0.18) {
+                v = -0.04 * Math.sin(((p - 0.16) / 0.02) * Math.PI);
+            } else if (p < 0.21) {
+                v = 0.65 * Math.sin(((p - 0.18) / 0.03) * Math.PI);
+            } else if (p < 0.24) {
+                v = -0.15 * Math.sin(((p - 0.21) / 0.03) * Math.PI);
+            } else if (p < 0.33) {
+                v = 0;
+            } else if (p < 0.50) {
+                v = 0.22 * Math.sin(((p - 0.33) / 0.17) * Math.PI);
+            } else {
+                v = 0;
+            }
+            return v + (Math.random() - 0.5) * 0.015;
+        }
+
+        function getPlethValue(phase) {
+            const p = phase % 1.0;
+            let v = 0;
+            if (p < 0.22) {
+                // Systolic rise
+                v = 0.8 * Math.sin((p / 0.22) * Math.PI / 2);
+            } else if (p < 0.42) {
+                // Diastolic fall
+                v = 0.8 - 0.45 * Math.sin(((p - 0.22) / 0.20) * Math.PI / 2);
+            } else if (p < 0.47) {
+                // Notch
+                const np = (p - 0.42) / 0.05;
+                v = 0.35 - 0.05 * Math.sin(np * Math.PI);
+            } else if (p < 0.62) {
+                // Diastolic peak
+                const dp = (p - 0.47) / 0.15;
+                v = 0.35 + 0.10 * Math.sin(dp * Math.PI);
+            } else {
+                // Decay
+                const dp = (p - 0.62) / 0.38;
+                v = 0.45 * Math.exp(-dp * 3.0);
+            }
+            return v + (Math.random() - 0.5) * 0.008;
+        }
+
+        function getRespValue(phase) {
+            const p = phase % 1.0;
+            return 0.5 + 0.4 * Math.sin(p * Math.PI * 2) + (Math.random() - 0.5) * 0.005;
+        }
+
+        // === Canvas Initialization ===
+        function initCanvases() {
+            const keys = ['ecg2', 'ecg1', 'pleth', 'resp'];
+            keys.forEach(k => {
+                const c = document.getElementById(`waveform-${k}`);
+                if (c) {
+                    const ctx = c.getContext('2d');
+                    const rect = c.parentElement.getBoundingClientRect();
+                    
+                    // High-DPI scaling
+                    c.width = rect.width * 2;
+                    c.height = rect.height * 2;
+                    ctx.scale(2, 2);
+                    
+                    canvases[k] = {
+                        canvas: c,
+                        ctx: ctx,
+                        width: rect.width,
+                        height: rect.height
+                    };
+                }
+            });
+        }
+
+        // === Patient Credentials Matching ===
         async function verifyPatientMatch() {
             const overlay = document.getElementById('verificationOverlay');
             const icon = document.getElementById('verificationIcon');
@@ -1097,28 +1058,21 @@
                 const data = await response.json();
                 if (data.matched) {
                     if (data.device_id) {
-                        // Success - matched and connected!
                         overlay.style.display = 'none';
-                        // Hide device selector element to restrict access
-                        const selectorContainer = document.querySelector('.device-selector-container');
-                        if (selectorContainer) selectorContainer.style.display = 'none';
-
                         if (selectedDeviceId !== data.device_id) {
                             selectedDeviceId = data.device_id;
                             clearVitalsDisplay();
                         }
                     } else {
-                        // Matched but device not transmitting yet
                         overlay.style.display = 'flex';
                         overlay.className = 'verification-overlay loading';
                         icon.textContent = '⏳';
                         title.textContent = 'Connecting Monitor...';
-                        msg.textContent = `Patient ${data.patient_name || 'Record'} verified. Waiting for monitor to start transmitting...`;
+                        msg.textContent = `Patient verified. Waiting for monitor to start transmitting...`;
                         selectedDeviceId = '';
                         clearVitalsDisplay();
                     }
                 } else {
-                    // Match failed
                     overlay.style.display = 'flex';
                     overlay.className = 'verification-overlay';
                     icon.textContent = '❌';
@@ -1129,7 +1083,6 @@
                 }
             } catch (e) {
                 console.error("Match verification failed:", e);
-                // On API error, show connecting/retry state
                 overlay.style.display = 'flex';
                 overlay.className = 'verification-overlay loading';
                 icon.textContent = '🔄';
@@ -1138,276 +1091,29 @@
             }
         }
 
-        // === Initialize ===
-        document.addEventListener('DOMContentLoaded', () => {
-            const urlParams = new URLSearchParams(window.location.search);
-            const isMinimal = urlParams.get('minimal') === 'true' || urlParams.get('clean') === 'true';
-            if (isMinimal) {
-                document.body.classList.add('minimal-mode');
-            }
-
-            // Extract matching credentials from URL query params
-            const mrn = urlParams.get('mrn');
-            const gender = urlParams.get('gender');
-            const dob = urlParams.get('dob');
-            const age = urlParams.get('age');
-
-            if (mrn) {
-                isMatchingMode = true;
-                matchParams = { mrn, gender, dob, age };
-                
-                // Show verification loading overlay initially
-                const overlay = document.getElementById('verificationOverlay');
-                overlay.style.display = 'flex';
-                overlay.className = 'verification-overlay loading';
-                document.getElementById('verificationIcon').textContent = '🔄';
-                document.getElementById('verificationTitle').textContent = 'Verifying Patient Credentials...';
-                document.getElementById('verificationMsg').textContent = 'Matching MRN, Gender, DOB, and Age with live patient monitors...';
-            }
-
-            initWaveforms();
-            updateClock();
-            setInterval(updateClock, 1000);
-
-            if (isMatchingMode) {
-                // In matching mode, verify credentials first, then poll/ws
-                verifyPatientMatch().then(() => {
-                    tryWebSocket();
-                    startPolling();
-                });
-                // Periodically verify the match and update device mapping
-                setInterval(verifyPatientMatch, 5000);
-            } else {
-                fetchDevices().then(() => {
-                    tryWebSocket();
-                    startPolling();
-                });
-                // Periodically refresh the list of active devices
-                setInterval(fetchDevices, 4000);
-            }
-
-            animateWaveforms();
-            fetchNetworkInfo();
-        });
-
-        // === Fetch Network Info ===
-        async function fetchNetworkInfo() {
-            try {
-                const response = await fetch(`${API_BASE}/network-info`);
-                if (response.ok) {
-                    const info = await response.json();
-                    const ipEl = document.getElementById('detectedIp');
-                    if (info.primary_ip) {
-                        ipEl.textContent = info.primary_ip;
-                    } else if (info.ip_addresses && info.ip_addresses.length > 0) {
-                        ipEl.textContent = info.ip_addresses.join(' / ');
-                    } else {
-                        ipEl.textContent = 'Run ipconfig to find your IP';
-                    }
-                    // Update model badge
-                    if (info.monitor_model) {
-                        document.getElementById('modelBadge').textContent = info.monitor_model;
-                    }
-                }
-            } catch (e) {
-                document.getElementById('detectedIp').textContent = 'Check ipconfig';
-            }
-        }
-
-        // === Fetch Devices List ===
-        async function fetchDevices() {
-            try {
-                const response = await fetch(`${API_BASE}/devices`);
-                if (response.ok) {
-                    const devices = await response.json();
-                    activeDevices = devices;
-                    updateDeviceSelector();
-                }
-            } catch (e) {
-                console.error("Error fetching devices:", e);
-            }
-        }
-
-        // === Update Device Dropdown Selector ===
-        function updateDeviceSelector() {
-            const selector = document.getElementById('deviceSelector');
-            const previousSelection = selector.value || selectedDeviceId;
-            
-            selector.innerHTML = '';
-            
-            if (activeDevices.length === 0) {
-                const opt = document.createElement('option');
-                opt.value = '';
-                opt.textContent = 'No monitors connected';
-                selector.appendChild(opt);
-                return;
-            }
-            
-            // Sort: active devices first, then offline
-            const sortedDevices = [...activeDevices].sort((a, b) => {
-                if (a.status === 'active' && b.status !== 'active') return -1;
-                if (a.status !== 'active' && b.status === 'active') return 1;
-                return new Date(b.last_seen) - new Date(a.last_seen);
-            });
-            
-            sortedDevices.forEach(d => {
-                const opt = document.createElement('option');
-                opt.value = d.device_id;
-                
-                const statusSymbol = d.status === 'active' ? '🟢' : '⚫';
-                const ipStr = d.ip_address && d.ip_address !== 'unknown' ? ` (${d.ip_address})` : '';
-                opt.textContent = `${statusSymbol} ${d.device_id}${ipStr}`;
-                
-                selector.appendChild(opt);
-            });
-            
-            if (previousSelection && sortedDevices.some(d => d.device_id === previousSelection)) {
-                selector.value = previousSelection;
-                selectedDeviceId = previousSelection;
-            } else {
-                const firstActive = sortedDevices.find(d => d.status === 'active');
-                if (firstActive) {
-                    selector.value = firstActive.device_id;
-                    selectedDeviceId = firstActive.device_id;
-                } else if (sortedDevices.length > 0) {
-                    selector.value = sortedDevices[0].device_id;
-                    selectedDeviceId = sortedDevices[0].device_id;
-                }
-            }
-            
-            localStorage.setItem('selectedDeviceId', selectedDeviceId);
-        }
-
-        // === Change Selected Device ===
-        function selectDevice(deviceId) {
-            selectedDeviceId = deviceId;
-            localStorage.setItem('selectedDeviceId', deviceId);
-            clearVitalsDisplay();
-            fetchLatestReadings();
-        }
-
-        // === Clear Vitals from Screen ===
-        function clearVitalsDisplay() {
-            ['hr', 'spo2', 'bp', 'rr', 'temp', 'map'].forEach(key => {
-                const valueEl = document.getElementById(`value-${key}`);
-                const statusEl = document.getElementById(`status-${key}`);
-                const cardEl = document.getElementById(`card-${key}`);
-                
-                valueEl.innerHTML = '---';
-                valueEl.className = 'vital-value no-data';
-                statusEl.textContent = 'No Data';
-                statusEl.className = 'status-badge offline';
-                cardEl.classList.remove('has-value');
-                
-                waveformData[key] = [];
-            });
-            document.getElementById('deviceId').textContent = 'Waiting...';
-            document.getElementById('patientId').textContent = 'Waiting...';
-            
-            document.getElementById('bannerPatientId').textContent = 'N/A';
-            document.getElementById('bannerPatientName').textContent = 'John Doe';
-            document.getElementById('bannerMonitorModel').textContent = 'CMS8500';
-            document.getElementById('bannerLastSeen').textContent = 'Never';
-            
-            lastReadingId = null;
-        }
-
-        // === Setup Guide Toggle ===
-        function toggleSetupGuide() {
-            const body = document.getElementById('setupGuideBody');
-            const toggleText = document.getElementById('setupToggleText');
-            setupGuideCollapsed = !setupGuideCollapsed;
-            if (setupGuideCollapsed) {
-                body.style.display = 'none';
-                toggleText.textContent = '▸ Expand';
-            } else {
-                body.style.display = 'grid';
-                toggleText.textContent = '▾ Collapse';
-            }
-        }
-
-        // === Audio Alert Toggle ===
-        function toggleAudioAlert() {
-            audioAlertEnabled = !audioAlertEnabled;
-            const toggle = document.getElementById('audioToggle');
-            const icon = document.getElementById('audioIcon');
-            const text = document.getElementById('audioText');
-            if (audioAlertEnabled) {
-                toggle.classList.add('active');
-                icon.textContent = '🔊';
-                text.textContent = 'Alerts On';
-                // Initialize audio context on user gesture
-                if (!audioContext) {
-                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                }
-            } else {
-                toggle.classList.remove('active');
-                icon.textContent = '🔇';
-                text.textContent = 'Alerts Off';
-            }
-        }
-
-        function playAlertBeep() {
-            if (!audioAlertEnabled || !audioContext) return;
-            try {
-                const oscillator = audioContext.createOscillator();
-                const gainNode = audioContext.createGain();
-                oscillator.connect(gainNode);
-                gainNode.connect(audioContext.destination);
-                oscillator.type = 'sine';
-                oscillator.frequency.setValueAtTime(880, audioContext.currentTime);
-                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
-                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
-                oscillator.start(audioContext.currentTime);
-                oscillator.stop(audioContext.currentTime + 0.5);
-                // Second beep
-                const osc2 = audioContext.createOscillator();
-                const gain2 = audioContext.createGain();
-                osc2.connect(gain2);
-                gain2.connect(audioContext.destination);
-                osc2.type = 'sine';
-                osc2.frequency.setValueAtTime(1100, audioContext.currentTime + 0.6);
-                gain2.gain.setValueAtTime(0.3, audioContext.currentTime + 0.6);
-                gain2.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 1.1);
-                osc2.start(audioContext.currentTime + 0.6);
-                osc2.stop(audioContext.currentTime + 1.1);
-            } catch (e) {
-                // Audio not supported
-            }
-        }
-
-        // === Clock ===
-        function updateClock() {
-            const now = new Date();
-            document.getElementById('timeDisplay').textContent =
-                now.toLocaleTimeString('en-US', { hour12: false });
-        }
-
         // === WebSocket Connection ===
         function tryWebSocket() {
             try {
                 ws = new WebSocket(WS_URL);
                 ws.onopen = () => {
                     useWebSocket = true;
-                    updateConnectionStatus('connected', 'Live — WebSocket');
+                    updateConnectionBadge('connected', 'Live');
                 };
                 ws.onmessage = (event) => {
                     const data = JSON.parse(event.data);
-                    // Filter messages by selected device or auto-select if nothing selected yet
                     if (!selectedDeviceId && data.device_id && !isMatchingMode) {
                         selectDevice(data.device_id);
                     }
                     if (data.device_id && data.device_id === selectedDeviceId) {
                         updateVitals(data);
                     }
-                    // Refresh device list status
                     if (!isMatchingMode) {
                         fetchDevices();
                     }
                 };
                 ws.onclose = () => {
                     useWebSocket = false;
-                    updateConnectionStatus('polling', 'Polling Mode');
+                    updateConnectionBadge('polling', 'Polling');
                     setTimeout(tryWebSocket, 5000);
                 };
                 ws.onerror = () => {
@@ -1418,6 +1124,12 @@
             }
         }
 
+        function updateConnectionBadge(status, text) {
+            const badge = document.getElementById('connectionBadge');
+            badge.textContent = text;
+            badge.className = 'connection-badge ' + (status === 'connected' ? '' : 'warning');
+        }
+
         // === Polling Fallback ===
         function startPolling() {
             fetchLatestReadings();
@@ -1425,9 +1137,7 @@
         }
 
         async function fetchLatestReadings() {
-            if (isMatchingMode && !selectedDeviceId) {
-                return;
-            }
+            if (isMatchingMode && !selectedDeviceId) return;
             try {
                 const url = selectedDeviceId
                     ? `${API_BASE}/latest-readings?device_id=${encodeURIComponent(selectedDeviceId)}&limit=1`
@@ -1443,339 +1153,396 @@
                         readingCount++;
                         updateVitals(latest);
                     }
-                    if (!useWebSocket) {
-                        updateConnectionStatus('connected', 'Connected — Polling');
-                    }
-                } else {
-                    if (!useWebSocket) {
-                        updateConnectionStatus('waiting', 'Waiting for data...');
-                    }
-                }
-
-                // Fetch system status
-                if (!isMatchingMode) {
-                    const statusResp = await fetch(`${API_BASE}/status`);
-                    if (statusResp.ok) {
-                        const status = await statusResp.json();
-                        document.getElementById('totalReadings').textContent = status.total_readings_stored;
-                        document.getElementById('apiStatus').textContent =
-                            status.pending_transmissions > 0
-                                ? `${status.pending_transmissions} pending`
-                                : 'All sent ✓';
-                        
-                        // Update active ports list in guide
-                        const portsEl = document.getElementById('activePortsList');
-                        if (portsEl && status.active_ports && status.active_ports.length > 0) {
-                            portsEl.textContent = status.active_ports.join(', ');
-                        }
-                    }
                 }
             } catch (e) {
-                if (!useWebSocket) {
-                    updateConnectionStatus('offline', 'Server offline');
-                }
+                console.error("Polling error:", e);
             }
         }
 
-        // === Update Vitals Display ===
+        // === Update Vital Values ===
         function updateVitals(data) {
-            // Hide setup guide once data starts flowing
-            if (!hasReceivedData) {
-                hasReceivedData = true;
-                const guide = document.getElementById('setupGuide');
-                guide.classList.add('hidden');
+            hasReceivedData = true;
+
+            // Heart Rate
+            currentHR = data.heart_rate;
+            const hrVal = document.getElementById('value-hr');
+            if (currentHR !== null && currentHR !== undefined) {
+                hrVal.textContent = Math.round(currentHR);
+                hrVal.classList.remove('no-data');
+                document.getElementById('value-pr').textContent = Math.round(currentHR);
+            } else {
+                hrVal.textContent = '---';
+                hrVal.classList.add('no-data');
+                document.getElementById('value-pr').textContent = '--';
             }
 
-            updateVitalCard('hr', data.heart_rate, 'heart_rate', v => `${Math.round(v)}<span class="unit">bpm</span>`);
-            updateVitalCard('spo2', data.spo2, 'spo2', v => `${Math.round(v)}<span class="unit">%</span>`);
+            // SpO2
+            currentSpO2 = data.spo2;
+            const spo2Val = document.getElementById('value-spo2');
+            if (currentSpO2 !== null && currentSpO2 !== undefined) {
+                spo2Val.textContent = Math.round(currentSpO2);
+                spo2Val.classList.remove('no-data');
+            } else {
+                spo2Val.textContent = '---';
+                spo2Val.classList.add('no-data');
+            }
 
-            // Blood pressure - combined display
+            // Resp Rate
+            currentRR = data.respiratory_rate;
+            const rrVal = document.getElementById('value-rr');
+            if (currentRR !== null && currentRR !== undefined) {
+                rrVal.textContent = Math.round(currentRR);
+                rrVal.classList.remove('no-data');
+            } else {
+                rrVal.textContent = '---';
+                rrVal.classList.add('no-data');
+            }
+
+            // Temperature
+            if (data.temperature !== null && data.temperature !== undefined) {
+                currentTemp = data.temperature;
+                document.getElementById('value-temp').textContent = currentTemp.toFixed(1);
+                document.getElementById('value-t1').textContent = currentTemp.toFixed(1);
+            }
+
+            // Blood pressure
             if (data.systolic_bp !== null && data.systolic_bp !== undefined) {
                 const sys = Math.round(data.systolic_bp);
                 const dia = data.diastolic_bp !== null ? Math.round(data.diastolic_bp) : '--';
-                updateVitalCard('bp', data.systolic_bp, 'systolic_bp',
-                    () => `${sys}<span class="slash">/</span>${dia}<span class="unit">mmHg</span>`);
-            } else {
-                updateVitalCard('bp', null, 'systolic_bp');
+                const mapVal = data.map_bp !== null ? Math.round(data.map_bp) : Math.round(sys*0.33 + dia*0.67);
+                
+                document.getElementById('value-nibp').textContent = `${sys}/${dia}`;
+                document.getElementById('value-nibp-map').textContent = `(${mapVal})`;
+                
+                const now = new Date();
+                const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
+                document.getElementById('nibpTimeTitle').textContent = `NIBP mmHg @${timeStr.slice(0, 5)}`;
+                
+                // Add to NIBP table log
+                addNibpTableRow(`${sys}/${dia}`, mapVal, currentHR ? Math.round(currentHR) : 92, timeStr);
             }
 
-            updateVitalCard('rr', data.respiratory_rate, 'respiratory_rate', v => `${Math.round(v)}<span class="unit">/min</span>`);
-            const tempF = data.temperature != null ? (data.temperature * 9/5) + 32 : null;
-            updateVitalCard('temp', tempF, 'temperature', v => `${v.toFixed(1)}<span class="unit">°F</span>`);
-            updateVitalCard('map', data.map_bp, 'map_bp', v => `${Math.round(v)}<span class="unit">mmHg</span>`);
+            // Update Header Name
+            if (data.patient_name) {
+                document.getElementById('bannerPatientName').textContent = data.patient_name;
+            }
+            if (data.patient_gender) {
+                const genderBadge = document.getElementById('bannerGender');
+                genderBadge.textContent = data.patient_gender.slice(0, 1).toUpperCase();
+                genderBadge.style.background = genderBadge.textContent === 'F' ? '#db2777' : '#0044bb';
+            }
+        }
 
-            // Update info bar
-            if (data.device_id) document.getElementById('deviceId').textContent = data.device_id;
-            if (data.patient_id) document.getElementById('patientId').textContent = data.patient_id;
+        // Add dynamically a row to NIBP log
+        function addNibpTableRow(sysDia, map, pr, time) {
+            const body = document.getElementById('nibpTableBody');
+            const row = document.createElement('tr');
+            row.innerHTML = `
+                <td>${sysDia}</td>
+                <td>${map}</td>
+                <td>${pr}</td>
+                <td class="time">${time}</td>
+            `;
+            // Insert at the top
+            body.insertBefore(row, body.firstChild);
+            // Keep maximum 3 rows
+            if (body.children.length > 3) {
+                body.removeChild(body.lastChild);
+            }
+        }
 
+        function simulateNibpMeasurement() {
+            // Replicate NIBP measure action
+            const sys = Math.round(110 + Math.random() * 25);
+            const dia = Math.round(70 + Math.random() * 15);
+            const map = Math.round(sys * 0.33 + dia * 0.67);
+            const pr = currentHR ? Math.round(currentHR) : Math.round(80 + Math.random() * 20);
             const now = new Date();
-            document.getElementById('lastUpdateTime').textContent =
-                now.toLocaleTimeString('en-US', { hour12: false });
-
-            // Update patient clinical banner
-            if (data.patient_id) {
-                document.getElementById('bannerPatientId').textContent = data.patient_id;
-                document.getElementById('bannerPatientName').textContent = data.patient_name || `Patient #${data.patient_id}`;
-            }
-            if (data.device_id) {
-                let deviceModel = 'CMS8500';
-                if (data.device_id.includes('CMS7000')) {
-                    deviceModel = 'CMS7000PLUS';
-                }
-                const parts = data.device_id.split('_');
-                const suffix = parts.length > 1 ? ` (${parts.pop()})` : '';
-                document.getElementById('bannerMonitorModel').textContent = `${deviceModel}${suffix}`;
-            }
-            document.getElementById('bannerLastSeen').textContent = now.toLocaleTimeString('en-US', { hour12: false });
-
-            // Push waveform data
-            pushWaveformPoint('hr', data.heart_rate);
-            pushWaveformPoint('spo2', data.spo2);
-            pushWaveformPoint('bp', data.systolic_bp);
-            pushWaveformPoint('rr', data.respiratory_rate);
-            pushWaveformPoint('temp', tempF);
-            pushWaveformPoint('map', data.map_bp);
+            const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
+            
+            document.getElementById('value-nibp').textContent = `${sys}/${dia}`;
+            document.getElementById('value-nibp-map').textContent = `(${map})`;
+            document.getElementById('nibpTimeTitle').textContent = `NIBP mmHg @${timeStr.slice(0, 5)}`;
+            addNibpTableRow(`${sys}/${dia}`, map, pr, timeStr);
         }
 
-        function updateVitalCard(cardKey, value, rangeKey, formatter) {
-            const valueEl = document.getElementById(`value-${cardKey}`);
-            const statusEl = document.getElementById(`status-${cardKey}`);
-            const updateEl = document.getElementById(`update-${cardKey}`);
-            const cardEl = document.getElementById(`card-${cardKey}`);
+        function clearVitalsDisplay() {
+            currentHR = null;
+            currentSpO2 = null;
+            currentRR = null;
 
-            if (value === null || value === undefined) {
-                valueEl.innerHTML = '---';
-                valueEl.className = 'vital-value no-data';
-                statusEl.textContent = 'No Data';
-                statusEl.className = 'status-badge offline';
-                cardEl.classList.remove('has-value');
-                return;
-            }
+            document.getElementById('value-hr').textContent = '---';
+            document.getElementById('value-hr').classList.add('no-data');
+            document.getElementById('value-pr').textContent = '--';
 
-            // Format value
-            const formatted = formatter ? formatter(value) : Math.round(value);
-            valueEl.innerHTML = formatted;
-            valueEl.className = 'vital-value vital-value-update';
-            cardEl.classList.add('has-value');
+            document.getElementById('value-spo2').textContent = '---';
+            document.getElementById('value-spo2').classList.add('no-data');
 
-            // Remove animation class after it plays
-            setTimeout(() => valueEl.classList.remove('vital-value-update'), 600);
+            document.getElementById('value-rr').textContent = '---';
+            document.getElementById('value-rr').classList.add('no-data');
 
-            // Calculate status
-            const ranges = VITAL_RANGES[rangeKey];
-            let isCritical = false;
-            if (ranges) {
-                if (value <= ranges.critLow || value >= ranges.critHigh) {
-                    statusEl.textContent = '🚨 Critical';
-                    statusEl.className = 'status-badge critical';
-                    isCritical = true;
-                } else if (value < ranges.low || value > ranges.high) {
-                    statusEl.textContent = '⚠ Warning';
-                    statusEl.className = 'status-badge warning';
-                } else {
-                    statusEl.textContent = '✓ Normal';
-                    statusEl.className = 'status-badge normal';
-                }
-            }
-
-            // Play alert for critical values
-            if (isCritical) {
-                playAlertBeep();
-            }
-
-            // Update timestamp
-            const now = new Date();
-            updateEl.textContent = now.toLocaleTimeString('en-US', { hour12: false });
-        }
-
-        // === Connection Status ===
-        function updateConnectionStatus(status, text) {
-            const badge = document.getElementById('connectionBadge');
-            const textEl = document.getElementById('connectionText');
-            textEl.textContent = text;
-
-            badge.className = 'connection-badge';
-            if (status === 'offline') badge.classList.add('offline');
-            else if (status === 'waiting') badge.classList.add('warning');
-            // 'connected' uses default (green)
-        }
-
-        // === Waveform Drawing ===
-        function initWaveforms() {
-            ['hr', 'spo2', 'bp', 'rr', 'temp', 'map'].forEach(key => {
-                const canvas = document.getElementById(`waveform-${key}`);
-                if (canvas) {
-                    const ctx = canvas.getContext('2d');
-                    // Set canvas resolution
-                    const rect = canvas.parentElement.getBoundingClientRect();
-                    canvas.width = rect.width * 2;
-                    canvas.height = rect.height * 2;
-                    ctx.scale(2, 2);
-                    waveformCanvases[key] = { canvas, ctx, width: rect.width, height: rect.height };
-                    waveformData[key] = [];
-                }
-            });
-        }
-
-        function pushWaveformPoint(key, value) {
-            if (!waveformData[key]) waveformData[key] = [];
-            waveformData[key].push(value !== null && value !== undefined ? value : null);
-            if (waveformData[key].length > 100) waveformData[key].shift();
-        }
-
-        const WAVEFORM_COLORS = {
-            hr: '#ef4444', spo2: '#06b6d4', bp: '#a855f7',
-            rr: '#22c55e', temp: '#f97316', map: '#ec4899'
-        };
-
-        function drawWaveform(key) {
-            const wf = waveformCanvases[key];
-            if (!wf) return;
-
-            const { ctx, width, height } = wf;
-            const data = waveformData[key] || [];
-            const color = WAVEFORM_COLORS[key];
-
-            ctx.clearRect(0, 0, width, height);
-
-            if (data.length < 2) {
-                // Draw flat line
-                ctx.beginPath();
-                ctx.strokeStyle = `${color}33`;
-                ctx.lineWidth = 1;
-                ctx.moveTo(0, height / 2);
-                ctx.lineTo(width, height / 2);
-                ctx.stroke();
-                return;
-            }
-
-            // Filter valid values for min/max
-            const validValues = data.filter(v => v !== null);
-            if (validValues.length === 0) return;
-
-            const min = Math.min(...validValues) * 0.9;
-            const max = Math.max(...validValues) * 1.1;
-            const range = max - min || 1;
-
-            // Draw gradient fill
-            const gradient = ctx.createLinearGradient(0, 0, 0, height);
-            gradient.addColorStop(0, `${color}20`);
-            gradient.addColorStop(1, `${color}00`);
-
-            ctx.beginPath();
-            ctx.moveTo(0, height);
-
-            let firstPoint = true;
-            const step = width / (data.length - 1);
-
-            data.forEach((v, i) => {
-                if (v === null) return;
-                const x = i * step;
-                const y = height - ((v - min) / range) * (height * 0.8) - height * 0.1;
-                if (firstPoint) {
-                    ctx.moveTo(x, height);
-                    ctx.lineTo(x, y);
-                    firstPoint = false;
-                } else {
-                    ctx.lineTo(x, y);
-                }
-            });
-
-            // Close fill path
-            const lastValidIdx = data.length - 1 - [...data].reverse().findIndex(v => v !== null);
-            ctx.lineTo(lastValidIdx * step, height);
-            ctx.closePath();
-            ctx.fillStyle = gradient;
-            ctx.fill();
-
-            // Draw line
-            ctx.beginPath();
-            firstPoint = true;
-            data.forEach((v, i) => {
-                if (v === null) return;
-                const x = i * step;
-                const y = height - ((v - min) / range) * (height * 0.8) - height * 0.1;
-                if (firstPoint) {
-                    ctx.moveTo(x, y);
-                    firstPoint = false;
-                } else {
-                    ctx.lineTo(x, y);
-                }
-            });
-            ctx.strokeStyle = color;
-            ctx.lineWidth = 2;
-            ctx.lineJoin = 'round';
-            ctx.lineCap = 'round';
-            ctx.stroke();
-
-            // Glow effect
-            ctx.strokeStyle = `${color}40`;
-            ctx.lineWidth = 6;
-            ctx.stroke();
-
-            // Draw latest point dot
-            if (validValues.length > 0) {
-                const lastVal = validValues[validValues.length - 1];
-                const lastIdx = data.lastIndexOf(lastVal);
-                const x = lastIdx * step;
-                const y = height - ((lastVal - min) / range) * (height * 0.8) - height * 0.1;
-
-                ctx.beginPath();
-                ctx.arc(x, y, 4, 0, Math.PI * 2);
-                ctx.fillStyle = color;
-                ctx.fill();
-                ctx.beginPath();
-                ctx.arc(x, y, 8, 0, Math.PI * 2);
-                ctx.fillStyle = `${color}30`;
-                ctx.fill();
-            }
-        }
-
-        let waveformPhase = 0;
-
-        function generateIdleWaveform(key, type) {
-            const data = waveformData[key] || [];
-            if (data.some(v => v !== null)) return; // Only show idle for no-data
-
-            // Generate synthetic waveform for visual appeal
-            const points = 100;
-            waveformData[key] = [];
-            for (let i = 0; i < points; i++) {
-                const t = (i / points) * Math.PI * 4 + waveformPhase;
-                let val;
-                if (type === 'ecg') {
-                    // ECG-like pattern
-                    const phase = (t % (Math.PI * 2)) / (Math.PI * 2);
-                    if (phase > 0.35 && phase < 0.40) val = 80 + 40 * Math.sin((phase - 0.35) * Math.PI / 0.05);
-                    else if (phase > 0.40 && phase < 0.45) val = 80 - 15 * Math.sin((phase - 0.40) * Math.PI / 0.05);
-                    else val = 72 + Math.sin(t * 0.5) * 2;
-                } else if (type === 'sine') {
-                    val = 50 + Math.sin(t) * 20;
-                } else {
-                    val = 50 + Math.sin(t * 0.8) * 15 + Math.sin(t * 2.1) * 5;
-                }
-                waveformData[key].push(val);
-            }
+            document.getElementById('bannerPatientName').textContent = 'Shahil Kumar';
+            
+            lastReadingId = null;
         }
 
+        // === Animation Loop (Real-time Scanning Sweep Bar) ===
+        
         function animateWaveforms() {
-            waveformPhase += 0.05;
-
-            // Generate idle waveforms for cards with no data
-            generateIdleWaveform('hr', 'ecg');
-            generateIdleWaveform('spo2', 'sine');
-            generateIdleWaveform('bp', 'sine');
-            generateIdleWaveform('rr', 'sine');
-            generateIdleWaveform('temp', 'sine');
-            generateIdleWaveform('map', 'sine');
-
-            Object.keys(waveformCanvases).forEach(drawWaveform);
+            // Speed of the sweep bar (in virtual coordinates per frame)
+            const speed = 4; 
+            
+            // Advance scan position
+            const prevScanIndex = scanIndex;
+            scanIndex = (scanIndex + speed) % WAVE_BUFFER_SIZE;
+            
+            // Increment procedural wave phases
+            // Scale phase speed depending on live vitals rate (beats/breaths per minute)
+            const hr = currentHR || 75; // fallback to 75 bpm
+            const rr = currentRR || 16; // fallback to 16 breaths
+            
+            // Increment phase
+            // For ECG/Pleth, 1 cycle is 1 heartbeat.
+            // For Resp, 1 cycle is 1 breath.
+            const ecgPhaseInc = (hr / 60) * (speed / WAVE_BUFFER_SIZE) * 4.0; // 4 seconds sweep
+            const respPhaseInc = (rr / 60) * (speed / WAVE_BUFFER_SIZE) * 4.0;
+            
+            // Compute values and populate circular buffers for the newly scanned segment
+            for (let i = 0; i < speed; i++) {
+                const targetIdx = (prevScanIndex + i) % WAVE_BUFFER_SIZE;
+                
+                ecgPhase += ecgPhaseInc / speed;
+                plethPhase += ecgPhaseInc / speed; // Sync SpO2 with ECG
+                respPhase += respPhaseInc / speed;
+                
+                waveBuffers.ecg2[targetIdx] = getECGValue(ecgPhase);
+                waveBuffers.ecg1[targetIdx] = getECG1Value(ecgPhase + 0.15); // Offset phase slightly for Lead I
+                waveBuffers.pleth[targetIdx] = getPlethValue(plethPhase - 0.2); // Pulse wave lag
+                waveBuffers.resp[targetIdx] = getRespValue(respPhase);
+            }
+            
+            // Draw all wave channels
+            drawChannel('ecg2', waveBuffers.ecg2, varColor('--ecg-color'), 1.8, false);
+            drawChannel('ecg1', waveBuffers.ecg1, varColor('--ecg-color'), 1.8, false);
+            drawChannel('pleth', waveBuffers.pleth, varColor('--spo2-color'), 2.2, false);
+            drawChannel('resp', waveBuffers.resp, varColor('--resp-color'), 1.8, true); // Respiration is dotted/dashed
+            
             requestAnimationFrame(animateWaveforms);
         }
 
-        // === Handle window resize ===
+        function varColor(varName) {
+            // Fallback colors if styling var fails
+            if (varName.includes('ecg-color')) return '#00ff66';
+            if (varName.includes('spo2-color')) return '#00ffff';
+            if (varName.includes('resp-color')) return '#ffff00';
+            return '#ffffff';
+        }
+
+        function drawChannel(key, buffer, color, lineWidth, isDashed) {
+            const wf = canvases[key];
+            if (!wf) return;
+            
+            const { ctx, width, height } = wf;
+            ctx.clearRect(0, 0, width, height);
+            
+            ctx.strokeStyle = color;
+            ctx.lineWidth = lineWidth;
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            
+            if (isDashed) {
+                ctx.setLineDash([2, 3]);
+            } else {
+                ctx.setLineDash([]);
+            }
+            
+            // Map the virtual index loop to the screen coordinates.
+            // We draw two segments:
+            // 1. From 0 to scanIndex - 5 (new sweep line progress)
+            // 2. From scanIndex + 25 to end of buffer (previous sweep leftovers)
+            
+            const gap = 20; // Width of erasing gap in virtual index points
+            
+            // Segment 1 (New progress)
+            if (scanIndex > 2) {
+                ctx.beginPath();
+                for (let i = 0; i < scanIndex - 2; i++) {
+                    const x = (i / WAVE_BUFFER_SIZE) * width;
+                    const y = height / 2 - (buffer[i] * (height * 0.4));
+                    if (i === 0) {
+                        ctx.moveTo(x, y);
+                    } else {
+                        ctx.lineTo(x, y);
+                    }
+                }
+                ctx.stroke();
+            }
+            
+            // Segment 2 (Leftovers)
+            const leftStart = (scanIndex + gap) % WAVE_BUFFER_SIZE;
+            if (leftStart > scanIndex) {
+                ctx.beginPath();
+                let first = true;
+                for (let i = leftStart; i < WAVE_BUFFER_SIZE; i++) {
+                    const x = (i / WAVE_BUFFER_SIZE) * width;
+                    const y = height / 2 - (buffer[i] * (height * 0.4));
+                    if (first) {
+                        ctx.moveTo(x, y);
+                        first = false;
+                    } else {
+                        ctx.lineTo(x, y);
+                    }
+                }
+                ctx.stroke();
+            }
+        }
+
+        // === Clock ===
+        function updateClock() {
+            const now = new Date();
+            const dateStr = now.toISOString().slice(0, 10);
+            const timeStr = now.toLocaleTimeString('en-US', { hour12: false });
+            document.getElementById('timeDisplay').textContent = `${dateStr} ${timeStr}`;
+        }
+
+        // === Audio Alerts ===
+        function toggleAudioAlert() {
+            audioAlertEnabled = !audioAlertEnabled;
+            const toggle = document.getElementById('audioToggle');
+            const icon = document.getElementById('audioIcon');
+            const text = document.getElementById('audioText');
+            if (audioAlertEnabled) {
+                toggle.classList.add('active');
+                icon.textContent = '🔊';
+                text.textContent = 'Alerts On';
+                if (!audioContext) {
+                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                }
+            } else {
+                toggle.classList.remove('active');
+                icon.textContent = '🔇';
+                text.textContent = 'Alerts Off';
+            }
+        }
+
+        // === Devices List ===
+        async function fetchDevices() {
+            try {
+                const response = await fetch(`${API_BASE}/devices`);
+                if (response.ok) {
+                    const devices = await response.json();
+                    activeDevices = devices;
+                    updateDeviceSelector();
+                }
+            } catch (e) {
+                console.error("Error fetching devices:", e);
+            }
+        }
+
+        function updateDeviceSelector() {
+            const selector = document.getElementById('deviceSelector');
+            const previousSelection = selector.value || selectedDeviceId;
+            selector.innerHTML = '';
+            
+            if (activeDevices.length === 0) {
+                const opt = document.createElement('option');
+                opt.value = '';
+                opt.textContent = 'No monitors connected';
+                selector.appendChild(opt);
+                return;
+            }
+            
+            activeDevices.forEach(d => {
+                const opt = document.createElement('option');
+                opt.value = d.device_id;
+                const statusSymbol = d.status === 'active' ? '🟢' : '⚫';
+                opt.textContent = `${statusSymbol} ${d.device_id}`;
+                selector.appendChild(opt);
+            });
+            
+            if (previousSelection && activeDevices.some(d => d.device_id === previousSelection)) {
+                selector.value = previousSelection;
+                selectedDeviceId = previousSelection;
+            } else {
+                selector.value = activeDevices[0].device_id;
+                selectedDeviceId = activeDevices[0].device_id;
+            }
+            localStorage.setItem('selectedDeviceId', selectedDeviceId);
+        }
+
+        function selectDevice(deviceId) {
+            selectedDeviceId = deviceId;
+            localStorage.setItem('selectedDeviceId', deviceId);
+            clearVitalsDisplay();
+            fetchLatestReadings();
+        }
+
+        async function fetchNetworkInfo() {
+            try {
+                const response = await fetch(`${API_BASE}/network-info`);
+                if (response.ok) {
+                    const info = await response.json();
+                    const ipEl = document.getElementById('detectedIp');
+                    if (info.primary_ip) {
+                        ipEl.textContent = info.primary_ip;
+                    } else if (info.ip_addresses && info.ip_addresses.length > 0) {
+                        ipEl.textContent = info.ip_addresses[0];
+                    }
+                }
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        // === Initialize on Load ===
+        document.addEventListener('DOMContentLoaded', () => {
+            const urlParams = new URLSearchParams(window.location.search);
+            const isMinimal = urlParams.get('minimal') === 'true' || urlParams.get('clean') === 'true';
+            if (isMinimal) {
+                document.body.classList.add('minimal-mode');
+            }
+
+            const mrn = urlParams.get('mrn');
+            const gender = urlParams.get('gender');
+            const dob = urlParams.get('dob');
+            const age = urlParams.get('age');
+
+            if (mrn) {
+                isMatchingMode = true;
+                matchParams = { mrn, gender, dob, age };
+                
+                const overlay = document.getElementById('verificationOverlay');
+                overlay.style.display = 'flex';
+                overlay.className = 'verification-overlay loading';
+                document.getElementById('verificationIcon').textContent = '🔄';
+                document.getElementById('verificationTitle').textContent = 'Verifying Patient Credentials...';
+                document.getElementById('verificationMsg').textContent = 'Matching patient identity...';
+            }
+
+            initCanvases();
+            updateClock();
+            setInterval(updateClock, 1000);
+
+            if (isMatchingMode) {
+                verifyPatientMatch().then(() => {
+                    tryWebSocket();
+                    startPolling();
+                });
+                setInterval(verifyPatientMatch, 5000);
+            } else {
+                fetchDevices().then(() => {
+                    tryWebSocket();
+                    startPolling();
+                });
+                setInterval(fetchDevices, 4000);
+            }
+
+            animateWaveforms();
+            fetchNetworkInfo();
+        });
+
         window.addEventListener('resize', () => {
-            initWaveforms();
+            initCanvases();
         });
     </script>
 </body>
