:root { --bg: #f4f6f9; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --card: #fff; --acc: #2a78d6; --warn: #eda100; --shock: #d62c2c;
  --scr: #05080c; --ecg: #33e07a; --spo2: #3fd0f0; --co2: #f3d34a; --abp: #ff6b6b; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; }
.screen, .scale { direction: ltr; }   /* monitor layout and sweep direction never mirror (clinical convention), also in RTL languages */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; background: #0b1220; color: #fff; flex-wrap: wrap; }
.brand { display: flex; gap: 8px; align-items: center; color: #fff; text-decoration: none; font-weight: 700; } .brand img { width: 26px; height: 26px; }
.top-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; } .top-r select { max-width: 240px; }
.who { opacity: .8; }
.disclaimer { background: #fff4d6; color: #7a4b00; font-size: 13px; padding: 6px 16px; border-bottom: 1px solid #f1d58a; font-weight: 600; }
.langnote { background: #eef2ff; color: #3730a3; font-size: 12px; padding: 4px 16px; }
.home { max-width: 1000px; margin: 0 auto; padding: 24px 16px; }
.home h1 { margin: 0 0 6px; } .lead { color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin: 12px 0; }
.card { text-align: start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.card:hover { border-color: var(--acc); } .card span { color: var(--muted); font-size: 13px; }
.badge { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; } .draft { background: #fde68a; color: #7a4b00; }
.lab { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 12px; padding: 12px 16px; max-width: 1500px; margin: 0 auto; }
.monitor { grid-row: span 2; } .log, .instr, .sc { grid-column: 1 / -1; }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr; } .monitor { grid-row: auto; } }
.screen { background: var(--scr); border-radius: 12px; display: grid; grid-template-columns: 1fr 170px; overflow: hidden; min-height: 340px; }
@media (max-width: 560px) { .screen { grid-template-columns: 1fr; } .nums { grid-template-columns: repeat(2, 1fr) !important; } }
#waves { width: 100%; height: 100%; min-height: 340px; display: block; }
.nums { display: grid; grid-template-rows: repeat(4, 1fr); border-inline-start: 1px solid #1d2733; }
.num { padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid #1d2733; }
.num small { font-size: 12px; opacity: .9; } .num b { font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; } .num i { font-style: normal; font-size: 12px; opacity: .85; }
.num.ecg { color: var(--ecg); } .num.spo2 { color: var(--spo2); } .num.nibp { color: #e5e7eb; } .num.nibp b { font-size: 28px; } .num.co2 { color: var(--co2); }
.alarmbar { min-height: 30px; border-radius: 8px; margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.alarm { padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 13px; }
.alarm.high { background: var(--shock); color: #fff; animation: fl-h .5s steps(1) infinite; }       /* 2 Hz: IEC 60601-1-8 high 1.4-2.8 Hz */
.alarm.medium { background: #f5b301; color: #111; animation: fl-m 1.6s steps(1) infinite; }          /* 0.625 Hz: medium 0.4-0.8 Hz */
.alarm.low { background: #22d3ee; color: #062a33; }                                                   /* constant */
@keyframes fl-h { 50% { opacity: .35; } } @keyframes fl-m { 50% { opacity: .35; } }
.scale { margin-top: 4px; } .link { background: none; border: 0; color: var(--acc); cursor: pointer; font: inherit; padding: 0; }
.device { display: flex; flex-direction: column; gap: 10px; }
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.modes button { padding: 8px 4px; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; font-weight: 600; }
.modes button.on { background: #0b1220; color: #fff; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; } .between { justify-content: space-between; }
button { font: inherit; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: #f8fafc; cursor: pointer; min-height: 36px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.warn { background: var(--warn); border-color: var(--warn); color: #111; font-weight: 700; }
button.shock { background: var(--shock); border-color: var(--shock); color: #fff; font-weight: 800; }
button.tog.on { background: var(--acc); color: #fff; border-color: var(--acc); }
input[type=number] { width: 72px; } input, select { font: inherit; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; }
.rng input { width: 180px; vertical-align: middle; }
.aedmsg { font-size: 18px; font-weight: 700; min-height: 28px; }
.small { font-size: 13px; } .muted { color: var(--muted); } .mono { font-family: ui-monospace, Consolas, monospace; }
.err { color: var(--shock); } .log ol { max-height: 180px; overflow: auto; margin: 6px 0 0; padding-inline-start: 20px; }
.modal { position: fixed; inset: 0; background: rgba(2, 6, 23, .6); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal .box { background: #fff; border-radius: 14px; max-width: 620px; width: 100%; padding: 20px; max-height: 90vh; overflow: auto; }
.modal h2 { margin-top: 0; } .modal label { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.refs { margin-top: 18px; font-size: 13px; } .refs li { margin: 4px 0; }
.lowq .alarm { animation-duration: 1s; }
.home .panel { margin: 14px 0; } .tbl { width: 100%; border-collapse: collapse; margin-top: 8px; } .tbl td, .tbl th { text-align: start; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.approved, .peer { background: #dcfce7; color: #166534; } .auto { background: #dbeafe; color: #1e40af; } .flagged { background: #fee2e2; color: #991b1b; } .changes { background: #fee2e2; color: #991b1b; } .pending { background: #fde68a; color: #7a4b00; }
/* scored ECG / blood-gas scenarios (cases.js) */
.csord { display: block; margin: 4px 0; font-size: 14px; } [data-cs-entry] { margin: 6px 0 10px; }
