:root{
  --bg:#000; --grid1:#0c0c0c; --grid5:#141414; --text:#d9e3ea;
  --ecg:#12ff6a; --hr:#12ff6a; --spo2:#23c3ff; --rr:#ffe066; --bp:#ff6b6b; --temp:#ffffff;
  --barH:24px; --barBg:rgba(255,255,255,.86); --barText:#000;
  --vh: 1vh;
}

* { box-sizing: border-box }
html,body{ margin:0; padding:0; width:100vw; height:100dvh; overflow:hidden; background:var(--bg); color:var(--text); font-family:system-ui,Segoe UI,Roboto,Inter }

@supports not (height: 100dvh){ html,body{ height:calc(var(--vh) * 100) } }

.wrap,.monitor{
  position:relative; width:100vw; height:100dvh; max-width:100vw; max-height:100dvh; overflow:hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@supports not (height: 100dvh){ .wrap,.monitor{ height:calc(var(--vh) * 100) } }

.bar{position:absolute;left:0;right:0;height:var(--barH);display:flex;align-items:center;justify-content:space-between;gap:8px;
     padding:0 10px;background:var(--barBg);color:var(--barText);
     font:12px ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
     border-bottom:1px solid #dcdcdc; z-index:10; user-select:none}
.bar.bottom{top:auto;bottom:0;border-bottom:none;border-top:1px solid #dcdcdc}
.brand,.clock,.sid{white-space:nowrap}
.brand{font-weight:700;flex:0 0 auto}
.linkBtn{background:transparent;border:none;color:var(--barText);font:inherit;padding:0;cursor:pointer;flex:0 0 auto}
.connInd{flex:1; display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; font:600 10px/1 system-ui,Segoe UI,Roboto; letter-spacing:.04em; color:#333}
.connDot{ width:6px; height:6px; border-radius:50%; background:#888; flex-shrink:0; transition:background .2s, box-shadow .2s }
.connDot.load{ background:#888; }
.connDot.live{ background:#0b0; box-shadow:0 0 5px #0a0; }
.connDot.poll{ background:#0b0; box-shadow:0 0 5px #0a0; }
.connDot.reconnect{ background:#c22; box-shadow:0 0 4px #c22; }
.connTxt{ max-width:100%; overflow:hidden; text-overflow:ellipsis }
@media (max-width:420px){ .connInd{ font-size:9px; } }

.mid{position:absolute; left:0; right:0; top:var(--barH); bottom:var(--barH); display:flex; flex-direction:column; overflow:hidden}

.ecgPane{position:relative; flex:1; padding:12px; min-height:140px; overflow:hidden}
.hrBadge{position:absolute; top:12px; right:16px; z-index:6; color:var(--hr); text-align:right}

.hrBadge .val{ font-weight:900; line-height:0.9; font-size: clamp(28px, 12vmin, 120px) }
.hrBadge .unit{ font-size: clamp(10px, 2.4vmin, 22px); opacity:.8 }

.grid{position:absolute; left:12px; right:12px; top:12px; bottom:12px;}
.row{position:absolute; inset:0}

canvas {
  position:absolute; inset:0; width:100%; height:100%; z-index:2; display:block;
  filter: drop-shadow(0 0 3px rgba(18, 255, 106, 0.5));
}

.gridlines{position:absolute; inset:0; z-index:1; pointer-events:none}

.vitalsPane{flex:1; border-top:1px solid #141414; padding:8px; background:#000; z-index:5; position:relative; overflow:hidden}
.vitalsWrap{height:100%; display:grid; grid-template-columns: 1fr 120px; gap:8px}
@media (max-width:820px){ .vitalsWrap{ grid-template-columns: 1fr; grid-auto-rows: auto } }

.footer{height:100%; display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:0; overflow:hidden}
.tile{padding:8px 12px;display:flex;align-items:center;gap:10px;border-right:1px solid #141414;border-bottom:1px solid #141414; min-width:0; }
.tile:nth-child(2n){border-right:none}
.tile:nth-last-child(-n+2){border-bottom:none}

/* --- UPDATED FLASHING (Visibility Blink) --- */
@keyframes blink-vis {
  0%, 50% { visibility: visible; }
  51%, 100% { visibility: hidden; }
}

/* When flashing, text turns red and blinks on/off */
.flashing .val,
.flashing .big {
  animation: blink-vis 1s infinite step-end;
}

.big{font-size: clamp(28px, 8vmin, 84px); font-weight:900; letter-spacing:1px; line-height:1; white-space:nowrap}
.label,.unit{font-size: clamp(10px, 2.2vmin, 18px); opacity:.85}
.map{font-size: clamp(14px, 3vmin, 28px); font-weight:500}

.hr{color:var(--hr)} .spo2{color:var(--spo2)} .rr{color:var(--rr)} .bp{color:var(--bp)} .temp{color:var(--temp)}

.controls{display:flex;flex-direction:column;gap:8px}
.ctlBtn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:calc( (100% - 16px) / 3 );
  background:var(--barBg); color:#000; border:1px solid #dcdcdc; border-radius:6px;
  font:12px ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  cursor:pointer; user-select:none
}
.ctlBtn.active { background: #ffbd2e; border-color: #e6a210; }

@media (max-width:820px){ .controls{flex-direction:row} .ctlBtn{flex:1; height:44px} }

.ico{width:16px;height:16px;display:inline-block}
.ico svg{width:100%;height:100%;fill:none;stroke:#000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.powered-off .vitalsWrap{display:none}
.powered-off .vitalsPane::after{
  content:'DISCONNECTED';
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font:700 clamp(12px, 3vmin, 22px) ui-monospace, Menlo, Consolas; opacity:0.55; letter-spacing:2px
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}