@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{
  --hr:#3fff6c;
  --spo2:#39c8ff;
  --rr:#e8e8e8;
  --bg-screen:#000;
  --amber:#ffb02e;
  --red:#ff3b30;
  --bezel:#1c1e22;
}

*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
  background:#0d0e10;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Share Tech Mono','Courier New',monospace;
}

.bezel{
  width:min(96vw,1000px);
  aspect-ratio:16/10;
  background:linear-gradient(160deg,#2b2e33,#15161a 60%);
  border-radius:22px;
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px #000;
}

.screen{
  position:relative;
  width:100%;
  height:100%;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, rgba(0,0,0,0.5) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 24px),
    var(--bg-screen);
  border-radius:8px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,.9);
}

/* ---- status bar ---- */
.statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 14px;
  border-bottom:1px solid #1a1a1a;
  font-size:clamp(10px,1.4vw,13px);
  color:#8a8a8a;
  letter-spacing:1px;
}
.statusbar-left{display:flex;align-items:center;gap:6px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);display:inline-block;transition:background .3s;}
.dot.ok{background:var(--hr);box-shadow:0 0 6px var(--hr);}
.statusbar-mid{flex:1;text-align:center;color:var(--red);font-weight:bold;letter-spacing:2px;opacity:0;transition:opacity .2s;}
.statusbar-mid.show{opacity:1;animation:flash .6s infinite;}
.statusbar-right{display:flex;align-items:center;gap:10px;}
.iconbtn{
  background:#111;
  border:1px solid #333;
  color:#ccc;
  font-family:inherit;
  font-size:11px;
  padding:5px 10px;
  border-radius:4px;
  cursor:pointer;
  letter-spacing:1px;
}
.iconbtn:active{background:#222;}

/* ---- params ---- */
.params{
  flex:1;
  display:flex;
  flex-direction:column;
}
.param{
  flex:1;
  display:grid;
  grid-template-columns:minmax(150px,32%) 1fr;
  border-bottom:1px solid #141414;
  align-items:stretch;
  transition:background .15s;
}
.param:last-child{border-bottom:none;}
.param-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:6px 16px;
  gap:2px;
}
.param-label{
  font-size:clamp(11px,1.6vw,15px);
  letter-spacing:2px;
  color:#888;
}
.param-sub{font-size:.8em;opacity:.7;}
.param-value{
  font-size:clamp(34px,7vw,64px);
  font-weight:bold;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.param-dim{color:#444;font-size:clamp(26px,5vw,44px);}
.param-range{font-size:clamp(9px,1.2vw,11px);color:#555;}

.param-hr .param-label,.param-hr .param-value{color:var(--hr);}
.param-spo2 .param-label,.param-spo2 .param-value{color:var(--spo2);}
.param-rr .param-label{color:var(--rr);}

.param-wave{width:100%;height:100%;display:block;}
.param-wave-flat{opacity:.3;}

.param.alarm{background:rgba(255,59,48,.08);}
.param.alarm .param-value{color:var(--red)!important;animation:flash .6s infinite;}

@keyframes flash{50%{opacity:.2;}}

/* ---- footer ---- */
.footer{
  display:flex;
  justify-content:space-between;
  padding:8px 14px;
  font-size:clamp(9px,1.2vw,11px);
  color:#555;
  border-top:1px solid #141414;
}

/* ---- modal ---- */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10;
  padding:20px;
}
.modal.show{display:flex;}
.modal-card{
  background:#111;
  border:1px solid #333;
  border-radius:10px;
  padding:22px;
  max-width:320px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.modal-card canvas,.modal-card img{background:#fff;padding:10px;border-radius:6px;max-width:100%;}
.modal-card p{color:#999;font-size:13px;font-family:sans-serif;line-height:1.4;}
.qr-fallback{word-break:break-all;background:#000;padding:8px;border-radius:4px;color:#3fff6c!important;font-family:'Share Tech Mono',monospace!important;font-size:12px!important;}
.modal-card button{
  background:#222;border:1px solid #444;color:#ccc;
  padding:8px 18px;border-radius:5px;cursor:pointer;font-family:inherit;
}