:root{
  --bg:#0d1117; --bg2:#131a24; --panel:#161e29; --panel2:#1c2532;
  --line:#26313f; --line2:#334255;
  --ink:#e6edf5; --ink2:#a8b6c8; --ink3:#7387a0;
  --accent:#4da3ff; --accent2:#1f6feb;
  --art:#ff5f6d;      
  --pa:#ffd166;       
  --cvp:#7ec8ff;      
  --spo2:#5ee7c3;     
  --ok:#3fb950; --warn:#e3a008; --crit:#f85149;
  --radius:10px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 .35em; line-height:1.25; font-weight:650}
p{margin:0 0 .7em}
button{font:inherit; cursor:pointer}
select,input,textarea{font:inherit; color:inherit}

.topbar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 18px; background:linear-gradient(180deg,#182231,#121a24);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:10px; min-width:230px}
.logo{font-size:26px; line-height:1}
.topbar h1{font-size:17px; margin:0; letter-spacing:.2px}
.tagline{margin:0; font-size:11.5px; color:var(--ink3)}
.tabs{display:flex; gap:4px; flex:1; flex-wrap:wrap}
.tabs button{
  background:transparent; border:1px solid transparent; color:var(--ink2);
  padding:6px 13px; border-radius:8px; font-size:13.5px;
}
.tabs button:hover{background:#1e2836; color:var(--ink)}
.tabs button.active{background:var(--panel2); border-color:var(--line2); color:var(--ink)}
.who{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2)}

button.primary{background:var(--accent2); color:#fff; border:1px solid #2f7ff0; padding:6px 14px; border-radius:8px}
button.primary:hover{background:#2d7ef5}
button.ghost{background:#1a2431; color:var(--ink2); border:1px solid var(--line2); padding:6px 12px; border-radius:8px}
button.ghost:hover{background:#22303f; color:var(--ink)}
button.wide{width:100%; margin-top:8px}
button.danger{background:#3a1c1e; border-color:#6b2a2c; color:#ffb4b0}

.tabpane{display:none; padding:10px 12px 28px}
.tabpane.active{display:block}

.scenariobar{
  display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 12px; margin-bottom:8px;
}
.fld{display:flex; flex-direction:column; gap:3px; min-width:180px; flex:1}
.fld.narrow{flex:0 0 auto; min-width:120px}
.fld > span{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink3)}
.fld select, .fld input{
  background:var(--bg2); border:1px solid var(--line2); color:var(--ink);
  border-radius:7px; padding:6px 8px; max-width:100%;
}
.transport{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap}
.clock{text-align:right; font-family:var(--mono); min-width:90px}
.clock span{font-size:22px; font-variant-numeric:tabular-nums}
.clock small{display:block; font-size:10px; color:var(--ink3); letter-spacing:.6px}

.levelbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:linear-gradient(180deg,#1b2739,#141c27);
  border:1px solid var(--line2); border-radius:var(--radius);
  padding:9px 12px; margin-bottom:8px;
}
.levelbar-lead{flex:1 1 205px; min-width:190px}
.levelbar-eyebrow{
  display:block; font-size:11px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink3); font-weight:700;
}
.levelbar-note{display:block; font-size:12.5px; color:var(--ink2); margin-top:3px}
.levelbtns{display:flex; gap:7px; flex:2 1 610px; flex-wrap:wrap}
.levelbtn{
  flex:1 1 180px; text-align:left; display:grid;
  grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:1px 9px;
  background:#101823; border:1.5px solid var(--line2); color:var(--ink2);
  border-radius:9px; padding:7px 10px; transition:background .12s,border-color .12s;
}
.levelbtn:hover{background:#18222f; border-color:#44576e}
.levelbtn .lvl-n{
  grid-row:1 / span 2; align-self:center; width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center; font-size:14px; font-weight:700;
  background:#1d2937; color:var(--ink3); border:1.5px solid var(--line2);
}
.levelbtn .lvl-t{font-size:15.5px; font-weight:650; color:var(--ink); line-height:1.2}
.levelbtn .lvl-s{font-size:11.5px; color:var(--ink3); line-height:1.3}
.levelbtn.on{background:#12304f; border-color:var(--accent); color:var(--ink)}
.levelbtn.on .lvl-n{background:var(--accent2); border-color:var(--accent); color:#fff}
.levelbtn.on .lvl-s{color:#9fc6f2}

.hintbar{
  background:#16241a; border:1px solid #2c5b30; border-left:3px solid var(--ok);
  border-radius:var(--radius); padding:7px 11px; margin-bottom:8px;
  font-size:13px; color:#bfe3c4;
}
.hintbar b{color:#e2f5e4; font-weight:650}

.watchbar{
  background:linear-gradient(90deg,#152a3d,#141d29); border:1px solid var(--line2);
  border-left:3px solid var(--accent); border-radius:var(--radius);
  padding:7px 11px; margin-bottom:8px; font-size:13px; color:var(--ink2);
}
.watchbar b{color:var(--ink); font-weight:650}
.num.moren{display:grid; place-items:center; color:var(--ink3); font-family:var(--mono); border-style:dashed}
.ctlgroup.more > summary{color:var(--ink3); font-weight:500}
.ctlgroup.more .ctlbody{gap:10px}

.grid{
  display:grid; gap:12px;
  grid-template-columns:minmax(225px,.72fr) minmax(390px,1.5fr) minmax(285px,1fr);
  align-items:start;
}
.case-rail,.case-main{display:flex; flex-direction:column; gap:12px; min-width:0}
.case-rail{position:sticky; top:70px; align-self:start}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; min-width:0;
}
.panelhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap}
.panelhead h2{font-size:12px; text-transform:uppercase; letter-spacing:.9px; color:var(--ink3); margin:0}
.badge{
  font-size:11px; background:#1e2937; border:1px solid var(--line2);
  padding:2px 9px; border-radius:99px; color:var(--ink2);
}
.badge.good{background:#12301c; border-color:#1d5230; color:#7ee08f}
.badge.bad{background:#3a1c1e; border-color:#6b2a2c; color:#ffb4b0}

canvas#waves{width:100%; display:block; background:#080c12; border-radius:8px; border:1px solid #1b2431}
.numerics{display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; margin-top:10px}
.num{background:#101722; border:1px solid var(--line); border-radius:8px; padding:6px 9px}
.num .lbl{font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--ink3)}
.num .val{font-family:var(--mono); font-size:20px; font-variant-numeric:tabular-nums; line-height:1.15}
.num .sub{font-size:10.5px; color:var(--ink3); font-family:var(--mono)}
.num .delta{font-size:10.5px; font-family:var(--mono)}
.delta.up{color:#7ee08f} .delta.dn{color:#ffb4b0}
.num.art .val{color:var(--art)} .num.pa .val{color:var(--pa)}
.num.cvp .val{color:var(--cvp)} .num.spo2 .val{color:var(--spo2)}
.num.warnv{border-color:#5a4410; background:#241c07}
.num.critv{border-color:#6b2a2c; background:#2a1214}

.ctlgroups{display:flex; flex-direction:column; gap:10px; max-height:none}
.ctlgroup{border:1px solid var(--line); border-radius:8px; background:var(--panel2)}
.ctlgroup > summary{
  list-style:none; cursor:pointer; padding:7px 11px; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.ctlgroup > summary::-webkit-details-marker{display:none}
.ctlgroup[open] > summary{border-bottom:1px solid var(--line)}
.ctlbody{padding:9px 11px; display:flex; flex-direction:column; gap:9px}
.ctl{display:grid; grid-template-columns:1fr auto; gap:3px 8px; align-items:center}
.ctl label{font-size:12px; color:var(--ink2); grid-column:1}
.ctl output{font-family:var(--mono); font-size:12.5px; color:var(--ink); grid-column:2; text-align:right; min-width:64px}
.ctl input[type=range]{grid-column:1 / -1; width:100%; accent-color:var(--accent)}
.ctl.row{grid-template-columns:1fr; }
.chiprow{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  background:#141d29; border:1px solid var(--line2); color:var(--ink2);
  border-radius:99px; padding:4px 11px; font-size:12px;
}
.chip.on{background:#123054; border-color:#2f7ff0; color:#cfe4ff}
.chip.act{background:#1c2b1d; border-color:#2c5b30; color:#9fe0a6}
.toggle{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2)}
.hint{font-size:11.5px; color:var(--ink3); margin:0}

#diagram svg{width:100%; height:auto; display:block}
.minitable{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px; margin-top:9px}
.minitable div{background:#101722; border:1px solid var(--line); border-radius:7px; padding:5px 8px; font-size:11.5px}
.minitable b{display:block; font-family:var(--mono); font-size:14px; color:var(--ink)}

.minitabs{display:flex; gap:4px; flex-wrap:wrap}
.minitabs button{background:#141d29; border:1px solid var(--line); color:var(--ink3); border-radius:7px; padding:3px 10px; font-size:11.5px}
.minitabs button.active{background:#123054; border-color:#2f7ff0; color:#cfe4ff}
table.dt{width:100%; border-collapse:collapse; font-size:12.5px}
table.dt td{padding:5px 6px; border-bottom:1px solid var(--line)}
table.dt td:first-child{color:var(--ink2)}
table.dt td:last-child{text-align:right; font-family:var(--mono); white-space:nowrap}
table.dt tr.flag td{color:#ffc9a3}
table.dt tr.bad td{color:#ffb4b0}

#objectives{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
#objectives li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink2)}
#objectives .mark{
  flex:0 0 auto; width:17px; height:17px; border-radius:5px; border:1px solid var(--line2);
  display:grid; place-items:center; font-size:11px; margin-top:1px;
}
#objectives li.met .mark{background:#12301c; border-color:#2c7a3f; color:#7ee08f}
#objectives li.holding .mark{background:#2b2410; border-color:#6b5a1c; color:#ffd166}
#objectives li.met{color:var(--ink)}
#hazards{margin-top:9px; display:flex; flex-direction:column; gap:5px}
.hz{font-size:12px; background:#2a1214; border:1px solid #5b2427; color:#ffb4b0; padding:4px 9px; border-radius:7px}

#alarmList, #eventLog{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:5px}
#alarmList li{font-size:12px; padding:5px 9px; border-radius:7px; border:1px solid var(--line2); background:#141d29}
#alarmList li.warn{background:#241c07; border-color:#6b5a1c; color:#ffd9a0}
#alarmList li.crit{background:#2a1214; border-color:#6b2a2c; color:#ffb4b0}
#eventLog{max-height:150px; overflow:auto; font-family:var(--mono); font-size:11px; color:var(--ink3)}
#eventLog li{border-bottom:1px dotted var(--line); padding:2px 0}

.reading{max-width:920px; margin:0 auto}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:14px;
}
.card h2{font-size:17px} .card h3{font-size:14px; color:var(--ink2); margin-top:1.2em}
.card ul{margin:.3em 0 .8em; padding-left:1.15em}
.card li{margin:.28em 0}
.meta{font-size:12px; color:var(--ink3); margin-bottom:.6em}
.refs{font-size:12px; color:var(--ink3)}
.refs li{margin:.2em 0}

.q{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:15px 18px; margin-bottom:12px}
.q h3{font-size:14.5px; color:var(--ink); margin-bottom:.7em}
.opts{display:flex; flex-direction:column; gap:6px}
.opt{
  text-align:left; background:#141d29; border:1px solid var(--line2); color:var(--ink2);
  border-radius:8px; padding:8px 12px; font-size:13px; display:flex; gap:9px; align-items:flex-start;
}
.opt:hover{background:#1b2735; color:var(--ink)}
.opt .key{font-family:var(--mono); color:var(--ink3); flex:0 0 auto}
.opt.correct{background:#12301c; border-color:#2c7a3f; color:#c7f0cf}
.opt.wrong{background:#2a1214; border-color:#6b2a2c; color:#ffb4b0}
.opt[disabled]{cursor:default}
.explain{margin-top:9px; font-size:12.5px; background:#101722; border-left:3px solid var(--accent); padding:9px 12px; border-radius:0 7px 7px 0; color:var(--ink2)}
.fbrow{display:flex; gap:6px; align-items:center; margin-top:9px; flex-wrap:wrap}
.fbrow small{color:var(--ink3); font-size:11.5px}

.modalwrap{position:fixed; inset:0; background:rgba(4,8,13,.72); display:grid; place-items:center; z-index:80; padding:18px}
.modal{
  background:var(--panel); border:1px solid var(--line2); border-radius:14px;
  padding:22px 24px; max-width:620px; width:100%; max-height:85vh; overflow:auto; position:relative;
}
.modalclose{position:absolute; top:10px; right:12px; background:none; border:none; color:var(--ink3); font-size:24px; line-height:1}
.modal input[type=email], .modal input[type=text], .modal textarea{
  width:100%; background:var(--bg2); border:1px solid var(--line2); border-radius:8px; padding:8px 10px;
}
.modal textarea{min-height:90px; resize:vertical}

table.ref{width:100%; border-collapse:collapse; font-size:12.5px; margin:.5em 0 1em}
table.ref td{padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:top}
table.ref td:first-child{color:var(--ink); font-weight:600; width:32%}
table.ref td:last-child{color:var(--ink2)}

.foot{border-top:1px solid var(--line); padding:16px 18px 30px; color:var(--ink3); font-size:11.5px}
.foot p{max-width:900px}
.foot .ack{color:var(--ink2)}

@media (max-width:1050px){
  .grid{grid-template-columns:1fr}
  .case-rail{position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .levelbar{gap:12px; padding:12px 13px}
  .levelbtns{flex-basis:100%}
  .levelbtn{flex:1 1 100%; padding:9px 12px}
  .levelbtn .lvl-n{width:26px; height:26px; font-size:13px}
  .levelbtn .lvl-t{font-size:14.5px}
}
@media (max-width:600px){
  .topbar{gap:10px; padding:9px 12px}
  .brand{min-width:0}
  .tabpane{padding:12px 12px 34px}
  .case-rail{display:flex}
  .card{padding:13px 15px}
  .numerics{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
}