:root { color-scheme: dark; font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100svh; margin: 0; overflow: hidden; background: #02070a; }
body { height: 100dvh; }
.stage { width: 100%; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: grid; place-items: center; }
.monitor { width: min(calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)), calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3)); max-width: 100%; max-height: 100%; aspect-ratio: 4 / 3; position: relative; overflow: hidden; color: #d8e6e9; background: radial-gradient(circle at 36% 40%, #122127 0, #071014 44%, #020608 100%); border: 2px solid #667982; box-shadow: inset 0 0 28px #000, 0 12px 40px #000; container-type: inline-size; }
.statusbar { height: 5.667%; padding: 0 1.3%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5%; font-size: 1.9cqw; font-weight: 700; background: linear-gradient(#577589, #304a5c); border-bottom: 1px solid #a4bac2; text-shadow: 1px 1px #10232b; }
.statusbar span:last-child { text-align: right; }
.statusbar [data-fullscreen] { margin-left: .55em; padding: 0 .25em; border: 0; color: inherit; background: transparent; font: inherit; line-height: 1; cursor: pointer; }
.monitor { --waveform-width: 77.5%; }
.clinical { height: 89%; display: grid; grid-template-columns: var(--waveform-width) 1fr; }
#waveforms { width: 100%; height: 100%; display: block; }
.parameters { display: grid; grid-template-rows: 78fr 78fr 70fr 104fr 92fr 92fr; border-left: 2px solid #879ba2; background:#071015; }
.param { position: relative; min-height: 0; padding: 2.5% 5%; overflow: hidden; border-bottom: 1px solid #6f8086; box-shadow:inset 0 0 18px #0008; font-variant-numeric: tabular-nums; }
.param .label { font-size: 2.15cqw; font-weight: 800; line-height: 1; }
.param .label > span { float: right; text-align: right; color: #a7bac0; font-size: .9cqw; line-height: 1.05; }
.param strong { display: block; margin-top: -1%; font-size: 7.2cqw; line-height: .9; letter-spacing: -.35cqw; }
.param small { position: absolute; left: 6%; bottom: 4%; color: #bfced2; font-size: 1.35cqw; font-weight: 700; }
.param.ecg { color: #71f2a1; }.param.spo2 { color: #56bdf6; }.param.nibp { color: #ff7b86; }.param.co2 { color: #d0b5ff; }.param.temp,.param.manual { color: #ffd272; }
.param.compact strong { font-size: 6.3cqw; }
.param.nibp strong { margin-top: 3%; font-size: 4.5cqw; letter-spacing: -.2cqw; }.param.nibp .slash { font-size: 3.2cqw; color: #cbd5d8; }.param.nibp small b { color: #ff7b86; font-size: 1.7cqw; }
.param.dual { display: grid; grid-template-columns: 1fr .78fr; gap: 5%; padding-right: 2%; }.param.dual > div + div { padding-left: 8%; border-left: 1px solid #425259; }.param.dual strong { font-size: 4.6cqw; margin-top: 6%; }.param.dual small { position: static; display: block; font-size: 1.05cqw; }
.param.temp strong { font-size: 5.4cqw; margin-top: 4%; }
.param.manual{display:grid;grid-template-rows:repeat(3,1fr);padding:0}.manual-reading{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;padding:1% 5%;border-bottom:1px solid #425259}.manual-reading:last-child{border-bottom:0}.manual-reading>span{font-size:1.15cqw;font-weight:800}.manual-reading strong{grid-row:1/3;grid-column:2;font-size:3.1cqw}.manual-reading small{position:static;font-size:.85cqw}.manual-reading[data-connected="false"] strong{opacity:.72}
.param[data-connected="false"]{background:linear-gradient(90deg,#0b151a,#050a0d)}.param[data-connected="false"] strong{opacity:.82;letter-spacing:.05cqw}.param[data-connected="false"] .label{filter:saturate(.72)}
.bottom { height: 5.333%; color: #03151f; background: linear-gradient(#1196e3, #0265c4 52%, #064da6); border-top: 1px solid #6ed0ff; font-size: 1.3cqw; font-weight: 700; }
.bottom nav { width: var(--waveform-width); height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; padding: 0 1% .5%; }
@media (max-aspect-ratio: 1/1) { .monitor { transform: rotate(0); } }
.param.nibp strong.measuring { font-size: 2cqw; letter-spacing: 0; line-height: 1.3; }
.param.nibp [data-value="bp-time"] { display: block; font-size: 1.1cqw; }
.bottom nav button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; min-height: 100%; }
.bottom nav button:disabled { opacity: .5; cursor: default; }
.bottom nav button:focus-visible { outline: 2px solid white; outline-offset: -2px; }
.bottom [data-alarm-audio] svg{width:1.55em;height:1.55em;fill:currentColor;vertical-align:middle}.bottom [data-alarm-audio] .sound-wave{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.bottom [data-alarm-audio][aria-pressed=false] .sound-wave{opacity:.28}
dialog { width: min(92vw, 760px); max-height: min(85dvh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px)); overflow: auto; color: #e3edf0; background: #10232c; border: 1px solid #799cae; border-radius: 8px; padding: 20px; font-family: Arial, sans-serif; }
dialog::backdrop { background: #000a; }
dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
dialog button { min-height: 44px; padding: 8px 20px; cursor: pointer; }
dialog table { width: 100%; border-collapse: collapse; }
dialog th, dialog td { text-align: left; padding: 10px 5px; border-bottom: 1px solid #47606e; }
dialog p { line-height: 1.5; }
[data-trend-chart] { display: block; width: auto; min-width: 100%; height: 280px; }.trend-chart-scroll{width:100%;margin:12px 0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #425d69;border-radius:6px;background:#0b1b22}
.table-scroll { max-height: 260px; overflow: auto; overscroll-behavior:contain; }.table-scroll table{min-width:820px}.table-scroll th:first-child,.table-scroll td:first-child{width:150px;white-space:nowrap}.table-scroll th:nth-child(2),.table-scroll td:nth-child(2){width:135px;white-space:nowrap}.table-scroll th:last-child,.table-scroll td:last-child{min-width:500px}
.trend-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0; font-size: 13px; font-weight: 800; }
.trend-legend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin: 0 7px 3px 0; border-radius: 2px; background: currentColor; }
.trend-legend .hr-key { color: #71f2a1; }.trend-legend .bp-key { color: #ff8e98; }
.trend-note { color: #aebfc5; font-size: 12px; }
.ecg-image-scroll { max-height: 55dvh; overflow: auto; background: white; }
.ecg-image-scroll img { display: block; max-width: none; }
@media (orientation: landscape) and (max-height: 600px) {
  dialog { width: min(94vw, 880px); max-height: calc(100dvh - 8px); padding: 12px; }
  dialog header { position: sticky; top: -12px; z-index: 2; padding: 8px 0; background: #10232c; }
}