/* ═══════════════════════════════════════════════════════════════
   CEC SIMULATOR — Dark Hospital Monitor Theme
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg-base:       #050b10;
  --bg-panel:      #080f15;
  --bg-panel2:     #0c1620;
  --bg-card:       #0f1e2a;
  --bg-input:      #0a141e;

  --border:        #1a3048;
  --border-bright: #1e4a70;

  --neon-green:    #00ff88;
  --neon-cyan:     #00e5ff;
  --neon-blue:     #0090ff;
  --neon-yellow:   #ffda00;
  --neon-orange:   #ff8c00;
  --neon-red:      #ff2244;
  --neon-purple:   #c060ff;
  --neon-pink:     #ff40a0;

  --text-primary:  #d4eaf7;
  --text-dim:      #5a8aa8;
  --text-muted:    #2e5070;

  --ecg-green:     #00ff44;
  --font-mono:     'Share Tech Mono', monospace;
  --font-display:  'Orbitron', sans-serif;
  --font-body:     'Rajdhani', sans-serif;

  --shadow-neon:   0 0 10px rgba(0,229,255,.3), 0 0 30px rgba(0,144,255,.15);
  --shadow-panel:  0 4px 24px rgba(0,0,0,.6);
}

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

html { font-size: 14px; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius:3px; }

/* ─── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #020c16 0%, #041824 50%, #020c16 100%);
  border-bottom: 2px solid var(--neon-cyan);
  padding: 8px 16px;
  position: sticky; top:0; z-index:200;
  box-shadow: 0 2px 20px rgba(0,229,255,.25);
}

.topbar-left, .topbar-right { display:flex; align-items:center; gap:10px; }
.topbar-center { text-align:center; }

.logo-area { display:flex; align-items:center; gap:10px; }
.logo-icon  { font-size:2rem; color:var(--neon-red); text-shadow:0 0 14px var(--neon-red); animation: heartbeat 1.2s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

.logo-title  { display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--neon-cyan); letter-spacing:.12em; }
.logo-sub    { display:block; font-size:.7rem; color:var(--text-dim); letter-spacing:.06em; }

.clock-time  { font-family:var(--font-display); font-size:1.6rem; color:var(--neon-green); text-shadow:0 0 12px var(--neon-green); display:block; }
.clock-sub   { font-family:var(--font-mono); font-size:.75rem; color:var(--neon-yellow); }

/* ─── BUTTONS ───────────────────────────────────────────────── */
.btn-neon {
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 7px 14px;
  border-radius: 4px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-green  { color:var(--neon-green);  border-color:var(--neon-green);  }
.btn-green:hover  { background:rgba(0,255,136,.15); box-shadow:0 0 14px rgba(0,255,136,.4); }
.btn-red    { color:var(--neon-red);    border-color:var(--neon-red);    }
.btn-red:hover    { background:rgba(255,34,68,.15);  box-shadow:0 0 14px rgba(255,34,68,.4);  }
.btn-yellow { color:var(--neon-yellow); border-color:var(--neon-yellow); }
.btn-yellow:hover { background:rgba(255,218,0,.15);  box-shadow:0 0 14px rgba(255,218,0,.4);  }
.btn-cyan   { color:var(--neon-cyan);   border-color:var(--neon-cyan);   }
.btn-cyan:hover   { background:rgba(0,229,255,.15);  box-shadow:0 0 14px rgba(0,229,255,.4);  }

.w-full   { width:100%; justify-content:center; }
.mt-8     { margin-top:8px; }
.mt-4     { margin-top:4px; }
.hidden   { display:none !important; }

/* ─── ALERT BANNER ──────────────────────────────────────────── */
.alert-banner {
  width: 100%;
  text-align: center;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .1em;
  animation: blink-banner .5s step-end infinite;
  position: sticky; top:58px; z-index:190;
}
.alert-banner.alert-red    { background:#2a0008; color:var(--neon-red); border-bottom:2px solid var(--neon-red); }
.alert-banner.alert-yellow { background:#2a1f00; color:var(--neon-yellow); border-bottom:2px solid var(--neon-yellow); }
.alert-banner.alert-green  { background:#002a10; color:var(--neon-green); border-bottom:2px solid var(--neon-green); }
@keyframes blink-banner { 50%{ opacity:.6 } }

/* ─── MAIN GRID ─────────────────────────────────────────────── */
.main-grid {
  display: grid;
  grid-template-columns: 2fr 1.3fr 1.3fr 1.5fr 1.5fr;
  grid-template-rows: auto;
  gap: 8px;
  padding: 8px;
  min-height: calc(100vh - 80px);
  align-items: start;
}

/* ─── PANELS ────────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  box-shadow: var(--shadow-panel);
  position: relative;
  overflow: hidden;
}
.panel::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}

.panel-header {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--neon-cyan);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sub-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.sub-title {
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: .12em;
  color: var(--neon-blue);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── ECG ───────────────────────────────────────────────────── */
.ecg-wrapper {
  position: relative;
  background: #020c08;
  border: 1px solid #0a3010;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
#ecgCanvas {
  display: block;
  width: 100%;
  height: 130px;
}
.ecg-wrapper::before {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 12px,
    rgba(0,80,20,.15) 12px, rgba(0,80,20,.15) 13px
  ),
  repeating-linear-gradient(
    90deg, transparent, transparent 12px,
    rgba(0,80,20,.15) 12px, rgba(0,80,20,.15) 13px
  );
  pointer-events:none;
}
.ecg-overlay-info {
  position: absolute;
  top: 6px; right: 10px;
  text-align: right;
}
.ecg-rhythm-label {
  display: block;
  font-family: var(--font-display);
  font-size: .6rem;
  color: var(--neon-green);
  letter-spacing: .1em;
}
.ecg-hr-label {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--neon-green);
  text-shadow: 0 0 14px var(--neon-green);
  line-height: 1;
}
.ecg-hr-label small { font-size: .7rem; }

/* Rhythm buttons */
.rhythm-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 8px;
}
.sel-label { font-size:.65rem; color:var(--text-dim); font-family:var(--font-display); margin-right:4px; }
.rbtn {
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: 3px 9px;
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all .15s;
}
.rbtn:hover, .rbtn.active { background:var(--neon-cyan); color:#000; border-color:var(--neon-cyan); box-shadow:0 0 8px rgba(0,229,255,.5); }
.rbtn.btn-danger           { border-color:var(--neon-red);    color:var(--neon-red); }
.rbtn.btn-danger:hover, .rbtn.btn-danger.active { background:var(--neon-red); color:#fff; box-shadow:0 0 8px rgba(255,34,68,.5); }
.rbtn.btn-warning          { border-color:var(--neon-yellow); color:var(--neon-yellow); }
.rbtn.btn-warning:hover, .rbtn.btn-warning.active { background:var(--neon-yellow); color:#000; box-shadow:0 0 8px rgba(255,218,0,.5); }

/* ─── VITALS ROW ────────────────────────────────────────────── */
.vitals-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.vital-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 4px;
  text-align: center;
  transition: border-color .3s, box-shadow .3s;
}
.vital-box.alert-red    { border-color:var(--neon-red);    box-shadow:0 0 8px rgba(255,34,68,.4); }
.vital-box.alert-yellow { border-color:var(--neon-yellow); box-shadow:0 0 8px rgba(255,218,0,.4); }
.vital-box.alert-green  { border-color:var(--neon-green);  box-shadow:0 0 8px rgba(0,255,136,.3); }

.vital-label { display:block; font-family:var(--font-display); font-size:.55rem; color:var(--text-dim); letter-spacing:.08em; }
.vital-value { display:block; font-family:var(--font-display); font-size:1.2rem; color:var(--neon-cyan); line-height:1.1; }
.vital-unit  { display:block; font-family:var(--font-mono); font-size:.55rem; color:var(--text-muted); }

/* ─── FLOW PANEL ────────────────────────────────────────────── */
.sc-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sc-row label { font-size:.75rem; color:var(--text-dim); }
.sc-row input  { width:70px; margin-left:4px; }
.sc-result { font-family:var(--font-display); font-size:.85rem; color:var(--neon-green); }

.flux-btns { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.flux-btn {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  padding: 6px 14px;
  border: 2px solid var(--border-bright);
  border-radius: 4px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all .2s;
  flex:1;
}
.flux-btn:hover { border-color:var(--neon-cyan); color:var(--neon-cyan); }
.flux-btn.active { border-color:var(--neon-green); background:rgba(0,255,136,.12); color:var(--neon-green); box-shadow:0 0 12px rgba(0,255,136,.3); }

.flux-result-row { display:flex; gap:8px; }
.flux-metric {
  flex:1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:4px;
  padding: 8px 6px;
  text-align: center;
}
.fmet-label { display:block; font-size:.55rem; font-family:var(--font-display); color:var(--text-dim); letter-spacing:.08em; }
.fmet-value { display:block; font-size:1.5rem; font-family:var(--font-display); color:var(--neon-yellow); line-height:1.1; }
.fmet-unit  { display:block; font-size:.6rem; font-family:var(--font-mono); color:var(--text-muted); }

#fluxGauge { display:block; margin:8px auto 0; }

/* ─── HEMOCONCENTRADOR ──────────────────────────────────────── */
.hemo-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.hemo-row label { font-size:.75rem; color:var(--text-dim); }
.hemo-row input  { width:70px; margin-left:4px; }
.hemo-result { display:flex; flex-wrap:wrap; gap:12px; font-size:.8rem; margin-bottom:6px; }
.hemo-result b { color:var(--neon-cyan); }
.hemo-progress-bar { display:flex; align-items:center; gap:8px; }
.hemo-bar-track {
  flex:1; height:14px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:7px;
  overflow:hidden;
}
.hemo-bar-fill {
  height:100%;
  background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan));
  border-radius:7px;
  transition: width .5s ease;
}
#hemo-bar-label { font-family:var(--font-display); font-size:.75rem; color:var(--neon-cyan); min-width:40px; }

/* ─── GASOMETRIA ────────────────────────────────────────────── */
.gaso-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.gaso-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 6px 4px;
  text-align: center;
  transition: border-color .3s, box-shadow .3s;
}
.gaso-card.status-high  { border-color:var(--neon-red);    box-shadow:0 0 8px rgba(255,34,68,.35); }
.gaso-card.status-low   { border-color:var(--neon-orange);  box-shadow:0 0 8px rgba(255,140,0,.35); }
.gaso-card.status-ok    { border-color:var(--neon-green);   }
.gaso-card.status-crit  { border-color:var(--neon-red); animation:pulse-card .5s step-end infinite; }
@keyframes pulse-card { 50%{ box-shadow:0 0 20px rgba(255,34,68,.8) } }

.gc-label { display:block; font-family:var(--font-display); font-size:.6rem; color:var(--text-dim); letter-spacing:.1em; }
.gc-value { display:block; font-family:var(--font-display); font-size:1.3rem; line-height:1.1; color:var(--neon-cyan); }
.gc-ref   { display:block; font-size:.55rem; color:var(--text-muted); font-family:var(--font-mono); margin-bottom:4px; }
.gaso-card input[type=range] { width:100%; accent-color:var(--neon-cyan); cursor:pointer; height:4px; }

.gaso-interpretation {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:4px;
  padding:8px 10px;
  margin-top:8px;
  font-size:.8rem;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-primary);
}

/* ─── DRUGS ─────────────────────────────────────────────────── */
.drugs-tabs { display:flex; gap:4px; margin-bottom:10px; }
.dtab {
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .08em;
  padding: 5px 10px;
  border: 1px solid var(--border-bright);
  border-radius: 3px 3px 0 0;
  background: var(--bg-card);
  color: var(--text-dim);
  cursor:pointer;
  transition: all .15s;
}
.dtab.active { background:var(--bg-panel2); color:var(--neon-cyan); border-color:var(--neon-cyan); border-bottom:none; }

.drug-tab-content { animation: fadeIn .3s; }
@keyframes fadeIn { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)} }

.drug-item { margin-bottom:10px; }
.drug-name { font-family:var(--font-display); font-size:.65rem; color:var(--neon-cyan); display:block; margin-bottom:2px; letter-spacing:.08em; }
.drug-controls { display:flex; align-items:center; gap:8px; }
.drug-controls input[type=range] { flex:1; accent-color:var(--neon-orange); cursor:pointer; }
.drug-dose { font-family:var(--font-mono); font-size:.7rem; color:var(--neon-orange); min-width:110px; text-align:right; }
.drug-bar { height:4px; background:var(--bg-card); border-radius:2px; margin-top:2px; overflow:hidden; }
.drug-bar-fill { height:100%; border-radius:2px; transition: width .3s ease; }
.drug-bar-fill.nora  { background: linear-gradient(90deg, var(--neon-red), #ff6666); }
.drug-bar-fill.adre  { background: linear-gradient(90deg, #ff4400, var(--neon-orange)); }
.drug-bar-fill.dopa  { background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan)); }
.drug-bar-fill.dobu  { background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink)); }
.drug-bar-fill.vaso  { background: linear-gradient(90deg, #6600cc, var(--neon-purple)); }
.drug-bar-fill.milri { background: linear-gradient(90deg, var(--neon-green), #80ff44); }

/* ─── CORREÇÕES ─────────────────────────────────────────────── */
.corr-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:4px;
  padding:8px;
  margin-bottom:6px;
}
.corr-label { display:flex; align-items:center; gap:6px; font-family:var(--font-display); font-size:.65rem; color:var(--neon-blue); letter-spacing:.08em; margin-bottom:6px; }
.corr-calc { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.75rem; }
.corr-calc label { color:var(--text-dim); }
.corr-calc input  { width:65px; margin-left:4px; }
.corr-result { font-family:var(--font-mono); color:var(--neon-yellow); font-size:.8rem; }
.corr-result b { color:var(--neon-green); }
.temp-btns { display:flex; flex-wrap:wrap; gap:4px; }
.tbtn {
  font-size:.65rem;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:3px;
  background:var(--bg-input);
  color:var(--text-dim);
  cursor:pointer;
  transition:all .15s;
}
.tbtn.active, .tbtn:hover { background:var(--neon-blue); color:#fff; border-color:var(--neon-blue); }

/* ─── CARDIOPLEGIA ──────────────────────────────────────────── */
.cardiop-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px; }
.cardiop-grid label { font-size:.75rem; color:var(--text-dim); display:flex; flex-direction:column; gap:2px; }
.cardiop-grid input, .cardiop-grid select { margin-top:2px; }
.cardiop-status { margin-top:6px; font-size:.75rem; color:var(--neon-yellow); font-family:var(--font-mono); }

.pos-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.pos-card-item {
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; color:var(--text-dim);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:3px;
  padding:5px 7px;
  transition: all .3s;
}
.pos-card-item.done { color:var(--neon-green); border-color:var(--neon-green); background:rgba(0,255,136,.05); }
.step-icon.pending-icon { color:var(--text-muted); }
.step-icon.done-icon    { color:var(--neon-green); }

/* ─── SYSTEMS ───────────────────────────────────────────────── */
.systems-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sys-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius:4px;
  padding:8px;
  transition: border-color .3s;
}
.sys-card:hover { border-color:var(--border-bright); }
.sys-icon { font-size:1.4rem; color:var(--neon-blue); margin-bottom:4px; text-align:center; }
.sys-info { margin-bottom:6px; }
.sys-name { display:block; font-family:var(--font-display); font-size:.6rem; letter-spacing:.1em; color:var(--text-primary); }
.sys-status { display:block; font-family:var(--font-mono); font-size:.65rem; margin-top:2px; }
.sys-status.ok   { color:var(--neon-green); }
.sys-status.warn { color:var(--neon-yellow); }
.sys-status.crit { color:var(--neon-red); }
.sys-params label { display:flex; flex-direction:column; font-size:.65rem; color:var(--text-dim); margin-bottom:4px; }
.sys-params input[type=range] { accent-color:var(--neon-cyan); cursor:pointer; width:100%; margin-top:2px; }
.sys-params span, .sys-params b { color:var(--neon-cyan); font-family:var(--font-mono); font-size:.7rem; }
.param-row { display:flex; justify-content:space-between; font-size:.7rem; margin-bottom:2px; color:var(--text-dim); }
.param-row b { color:var(--neon-green); }

/* reserv bar */
.reserv-bar-wrap {
  height:30px; background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:3px;
  margin-top:4px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.reserv-bar { width:100%; background:linear-gradient(180deg, var(--neon-blue),var(--neon-cyan)); transition:height .4s ease; }

/* ─── ALTERAÇÕES ────────────────────────────────────────────── */
.alteracoes-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.alt-btn {
  font-family: var(--font-display);
  font-size: .6rem;
  letter-spacing: .06em;
  padding: 7px 5px;
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all .15s;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
}
.alt-btn:hover { background:rgba(255,140,0,.15); border-color:var(--neon-orange); color:var(--neon-orange); }
.alt-btn.active { background:rgba(255,34,68,.15); border-color:var(--neon-red); color:var(--neon-red); }

/* ─── ALERT LOG ─────────────────────────────────────────────── */
.alert-log {
  position: fixed;
  bottom: 10px; right: 10px;
  width: 280px;
  max-height: 320px;
  background: rgba(8,15,21,.95);
  border: 1px solid var(--border);
  border-radius: 6px;
  z-index:300;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,.7);
}
.al-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 10px;
  background: var(--bg-panel2);
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--neon-yellow);
  border-bottom:1px solid var(--border);
}
.clear-btn { background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:.75rem; }
.clear-btn:hover { color:var(--neon-red); }
.al-list { overflow-y:auto; flex:1; padding:4px; }
.al-item {
  display:flex;
  align-items:flex-start;
  gap:6px;
  padding:4px 6px;
  border-radius:3px;
  margin-bottom:2px;
  font-size:.7rem;
  animation: slideIn .2s ease;
}
@keyframes slideIn { from{transform:translateX(20px);opacity:0} to{transform:translateX(0);opacity:1} }
.al-item.al-red    { background:rgba(255,34,68,.1);  border-left:3px solid var(--neon-red);    color:var(--neon-red); }
.al-item.al-yellow { background:rgba(255,218,0,.1); border-left:3px solid var(--neon-yellow); color:var(--neon-yellow); }
.al-item.al-green  { background:rgba(0,255,136,.07); border-left:3px solid var(--neon-green);  color:var(--neon-green); }
.al-item.al-cyan   { background:rgba(0,229,255,.07); border-left:3px solid var(--neon-cyan);   color:var(--neon-cyan); }
.al-time { font-family:var(--font-mono); font-size:.6rem; color:var(--text-muted); min-width:50px; }

/* ─── MODALS ─────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset:0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-box {
  background: var(--bg-panel);
  border-radius: 8px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 0 40px rgba(255,34,68,.3);
  animation: modal-in .3s ease;
}
@keyframes modal-in { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }
.modal-box.modal-danger { border: 2px solid var(--neon-red); }
.modal-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: .12em;
  color: var(--neon-red);
  text-shadow: 0 0 12px var(--neon-red);
  margin-bottom: 14px;
  display:flex; align-items:center; gap:10px;
}
.modal-body p { font-size:.85rem; color:var(--text-dim); margin-bottom:12px; }
.protocol-steps { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.pstep {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:3px;
  padding:7px 10px;
  font-size:.78rem;
  transition:all .3s;
}
.pstep.done { border-color:var(--neon-green); color:var(--neon-green); background:rgba(0,255,136,.08); }

/* ─── INPUTS (global) ───────────────────────────────────────── */
input[type=number], select {
  background: var(--bg-input);
  border: 1px solid var(--border-bright);
  border-radius: 3px;
  color: var(--neon-cyan);
  font-family: var(--font-mono);
  font-size: .8rem;
  padding: 4px 6px;
  outline: none;
  transition: border-color .2s;
}
input[type=number]:focus, select:focus { border-color:var(--neon-cyan); box-shadow:0 0 6px rgba(0,229,255,.3); }
select option { background:var(--bg-panel); color:var(--text-primary); }

/* ─── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1400px) {
  .main-grid { grid-template-columns: 2fr 1.3fr 1.3fr; }
  .panel-drugs, .panel-systems { grid-column: span 1; }
}
@media (max-width: 900px) {
  .main-grid { grid-template-columns: 1fr 1fr; }
  .panel-ecg-vitals { grid-column: span 2; }
  .vitals-row { grid-template-columns: repeat(3,1fr); }
  .gaso-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 600px) {
  .main-grid { grid-template-columns: 1fr; }
  .panel-ecg-vitals, .vitals-row { grid-column: span 1; }
  .vitals-row { grid-template-columns: repeat(2,1fr); }
  .gaso-grid   { grid-template-columns: repeat(2,1fr); }
  .topbar { flex-wrap:wrap; gap:6px; }
  .topbar-center { order:3; width:100%; }
}

/* ─── GLOW EFFECT CEC ACTIVE ────────────────────────────────── */
.cec-active .panel::before {
  animation: scanline 3s linear infinite;
  background: linear-gradient(90deg, transparent 0%, var(--neon-green) 50%, transparent 100%);
}
@keyframes scanline {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(200%); }
}

/* Pulsing critical vital */
@keyframes vital-critical {
  0%, 100% { color: var(--neon-red); text-shadow: 0 0 8px var(--neon-red); }
  50%       { color: #ff8888;         text-shadow: 0 0 20px var(--neon-red); }
}
.vital-critical .vital-value { animation: vital-critical .6s ease-in-out infinite; }