/* ═══ VentiSim — 呼吸机模拟训练平台 CSS ═══
   参考: NeuroICU SIS main.css 暗色ICU风格 */
:root{
  --primary:#06b6d4;--prim-dim:#0891b2;--prim-glow:rgba(6,182,212,.18);
  --accent:#8b5cf6;--accent2:#f59e0b;
  --danger:#ef4444;--danger-light:rgba(239,68,68,.12);
  --warning:#f59e0b;--warning-light:rgba(245,158,11,.12);
  --success:#10b981;--success-light:rgba(16,185,129,.12);
  --bg:#060d1a;--bg-surface:#0a1628;--bg-card:#0f2040;--bg-elevated:#162640;--bg-input:#0d1f38;
  --border:rgba(6,182,212,.15);--border-light:rgba(6,182,212,.08);
  --text:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--text-dim:#475569;
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;
  background-image:radial-gradient(ellipse at 30% 0%,rgba(6,182,212,.08) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 100%,rgba(139,92,246,.05) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 40%,rgba(59,130,246,.03) 0%,transparent 60%);}

/* ═══ Top Bar ═══ */
.top{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--bg-surface);border-bottom:1px solid var(--border);flex-wrap:wrap;position:sticky;top:0;z-index:100;font-size:14px}
.top h1{font-size:24px;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-right:8px}
.top .badge{font-size:11px;padding:4px 12px;border-radius:14px;font-weight:700;letter-spacing:.5px;border:1px solid}
.badge-vent{background:rgba(6,182,212,.15);color:#22d3ee;border-color:rgba(6,182,212,.3)}
.badge-ai{background:rgba(16,185,129,.15);color:#34d399;border-color:rgba(16,185,129,.3)}
.top .spacer{flex:1}

/* ═══ Page Switcher ═══ */
.page-switcher{display:flex;gap:3px}
.page-switcher button{padding:6px 16px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all .15s}
.page-switcher button:hover{color:var(--primary);border-color:var(--primary)}
.page-switcher button.active{background:var(--primary);color:#060d1a;font-weight:700}

/* ═══ Layout ═══ */
.page{display:none;padding:14px}
.page.active{display:block}
.col3{display:grid;grid-template-columns:300px 1fr 400px;gap:14px;min-height:calc(100vh - 100px)}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.col{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.col-head{font-size:14px;font-weight:800;color:var(--primary);padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-surface);display:flex;align-items:center;gap:8px;letter-spacing:.3px}
.col-body{padding:12px 16px;overflow-y:auto}

/* ═══ KPI Cards ═══ */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.kpi-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;transition:all .2s;cursor:default}
.kpi-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.kpi-card .val{font-size:20px;font-weight:900;font-family:Consolas,monospace;color:var(--primary)}
.kpi-card .val.danger{color:var(--danger)}
.kpi-card .val.warning{color:var(--warning)}
.kpi-card .val.success{color:var(--success)}
.kpi-card .lab{font-size:9px;color:var(--text-dim);margin-top:2px}
.kpi-card .sub{font-size:8px;color:var(--text-muted)}

/* ═══ Scenario Cards ═══ */
.scene-card{cursor:pointer;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-light);margin-bottom:4px;transition:all .15s;font-size:11px}
.scene-card:hover,.scene-card.active{border-color:var(--primary);background:rgba(6,182,212,.08)}
.scene-card .sname{font-weight:600;font-size:12px}
.scene-card .sgroup{font-size:8px;color:var(--primary);margin-top:1px}
.scene-card .sdesc{font-size:9px;color:var(--text-muted);margin-top:2px}

/* ═══ Form Controls ═══ */
.ifld{margin-bottom:8px}
.ifld label{font-size:11px;color:var(--text-secondary);display:block;margin-bottom:3px;font-weight:600}
.ifld input,.ifld select{width:100%;background:var(--bg-input);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:var(--radius-xs);font-size:13px;font-family:inherit;font-weight:600}
.ifld input:focus,.ifld select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(6,182,212,.15)}
.ifld .unit{font-size:10px;color:var(--text-muted);margin-left:4px}
.row2,.row3,.row4{display:grid;gap:8px;margin-bottom:8px}
.row2{grid-template-columns:1fr 1fr}
.row3{grid-template-columns:1fr 1fr 1fr}
.row4{grid-template-columns:1fr 1fr 1fr 1fr}

/* ═══ Buttons ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;border:none;padding:9px 18px;border-radius:var(--radius-xs);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:.2px}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-pri{background:var(--primary);color:#060d1a}
.btn-pri:hover{background:var(--prim-dim)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{opacity:.9}
.btn-sec{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border)}
.btn-sec:hover{border-color:var(--primary);color:var(--primary)}
.btn-full{width:100%;margin-top:10px}
.btn-sm{padding:5px 10px;font-size:11px}

/* ═══ Parameter Display (SIS-style ic-grid) ═══ */
.ic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ic-grid .ic{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:6px;padding:10px 6px;text-align:center;transition:all .15s}
.ic-grid .ic:hover{border-color:var(--primary);background:rgba(6,182,212,.04)}
.ic .icv{font-size:22px !important;font-weight:800;font-family:Consolas,monospace;color:var(--text);letter-spacing:-.5px;line-height:1.2}
.ic .icv.danger{color:var(--danger)}
.ic .icv.warning{color:var(--warning)}
/* 实时跳动数值 */
.ic .icv.live{color:var(--primary);text-shadow:0 0 8px rgba(6,182,212,.4);transition:color 0.15s}
.ic .icv.live.expiring{color:var(--accent)}
.ic .icn{font-size:11px !important;color:var(--text-secondary);margin-top:3px;font-weight:600;letter-spacing:.3px}

.ic-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ic-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ic-grid4 .ic .icv{font-size:18px !important}
.ic-grid4 .ic .icn{font-size:10px !important}

/* ═══ AI Floating Sidebar Widget ═══ */
.ai-fab{
  position:fixed; right:16px; bottom:16px; z-index:99;
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#060d1a; font-size:26px; line-height:54px; text-align:center;
  cursor:pointer; box-shadow:0 6px 20px rgba(13,148,136,.45);
  transition:transform .2s;
  user-select:none;
}
.ai-fab:hover{ transform:scale(1.08); }
.ai-fab::after{
  content:'AI'; position:absolute; right:6px; bottom:6px;
  background:#ef4444; color:#fff; font-size:9px; font-weight:700;
  padding:1px 4px; border-radius:8px; line-height:1;
}
.ai-sidebar.hidden{ display:none !important; }

/* ═══ Patient Panel (left column sections) ═══ */
.cic{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden}
.cic-head{font-size:12px !important;font-weight:700;color:var(--primary);padding:8px 12px;background:var(--bg-surface);border-bottom:1px solid var(--border);letter-spacing:.3px}
.cic-body{padding:8px 12px}

/* ═══ Waveforms ═══ */
.wf-canvas{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);display:block;max-width:100%}

/* ═══ AI Output ═══ */
.ai-output{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;font-size:11px;line-height:1.7;color:var(--text-secondary);max-height:350px;overflow-y:auto;white-space:pre-wrap;margin-bottom:8px}
.ai-output strong{color:var(--primary);font-size:12px}
.ai-output h3{color:var(--accent);font-size:12px;margin:6px 0 4px}
.ai-quick-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.ai-quick-tags .tag{cursor:pointer;padding:3px 8px;border-radius:10px;font-size:9px;background:rgba(139,92,246,.1);color:#a78bfa;border:1px solid rgba(139,92,246,.2);transition:all .15s}
.ai-quick-tags .tag:hover{background:rgba(139,92,246,.2)}
.ai-input{width:100%;background:var(--bg-input);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:var(--radius-xs);font-size:11px;resize:none;font-family:inherit;min-height:40px;margin-bottom:8px}
.ai-input:focus{border-color:var(--primary);outline:none}

/* ═══ Warnings ═══ */
.warn-item{padding:6px 10px;margin:3px 0;font-size:12px !important;border-radius:6px;background:var(--danger-light);color:var(--danger);font-weight:600;line-height:1.5}
.warn-item.ok{background:var(--success-light);color:var(--success)}
.warn-item .learn-more{float:right;font-size:10px;color:var(--primary);cursor:pointer;opacity:.7}
.warn-item .learn-more:hover{opacity:1}

/* ═══ Knowledge Panel ═══ */
.know-panel{margin-bottom:8px}
.know-head{cursor:pointer;padding:10px 12px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-weight:700;color:var(--accent);display:flex;justify-content:space-between;align-items:center;transition:all .15s}
.know-head:hover{background:rgba(139,92,246,.08)}
.know-body{display:none;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-size:11px;line-height:1.8;color:var(--text-secondary)}
.know-body.show{display:block}
.know-body b{color:var(--primary)}
.know-tag{padding:2px 6px;border-radius:4px;font-size:9px;font-weight:700;margin:0 2px}
.know-tag.rec{background:rgba(16,185,129,.15);color:#34d399}
.know-tag.warn{background:rgba(245,158,11,.15);color:#fbbf24}
.kv{color:var(--accent);font-family:Consolas,monospace;font-weight:700}

/* ═══ Home Page ═══ */
.home-hero{text-align:center;padding:40px 0 24px}
.home-hero h1{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.home-hero p{font-size:13px;color:var(--text-secondary);max-width:560px;margin:0 auto;line-height:1.6}
.home-stats{display:flex;justify-content:center;gap:40px;margin-top:24px}
.home-stat{text-align:center}
.home-stat .n{font-size:32px;font-weight:900;font-family:Consolas,monospace;color:var(--primary)}
.home-stat .l{font-size:10px;color:var(--text-muted);margin-top:2px}
.home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:900px;margin:24px auto}
.home-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 16px;cursor:pointer;text-align:center;transition:all .2s}
.home-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.home-card .ico{font-size:36px;margin-bottom:8px}
.home-card .tl{font-size:14px;font-weight:700}
.home-card .dsc{font-size:10px;color:var(--text-muted);margin-top:4px}

/* ═══ Modal ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal-box{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:380px}
.modal-box h2{font-size:16px;margin-bottom:14px}
.modal-box input{width:100%;background:var(--bg-input);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:var(--radius-xs);font-size:12px;margin-bottom:8px}
.modal-box input:focus{border-color:var(--primary);outline:none}
.modal-box .modal-btns{display:flex;gap:8px}
.modal-box .modal-btns button{flex:1}
.hidden{display:none !important}

/* ═══ Scoring Dashboard ═══ */
.scoring-bar{display:flex;gap:4px;height:6px;margin:8px 0;border-radius:3px;overflow:hidden;background:var(--bg-input)}
.scoring-bar .seg{height:100%}
.seg-danger{background:var(--danger)}.seg-warning{background:var(--warning)}.seg-success{background:var(--success)}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ═══ v2 Scene Search Dropdown ═══ */
.scene-dd-item{transition:background .1s}
.scene-dd-item:hover{background:rgba(6,182,212,.1)}
.scene-selected-card{line-height:1.4}
#sceneSearch:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px rgba(6,182,212,.15)}

/* ═══ v2 Layout Tweak — wider center column ═══ */
@media(min-width:1200px){
  .page1-grid{grid-template-columns:300px 1fr 400px}
}

/* ═══ v4 ABG Interpretation Wizard ═══ */
.abg-wiz{background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(6,182,212,.05));border:1px solid var(--accent);border-radius:8px;padding:12px;margin:10px 0}
.abg-wiz-title{font-size:13px;font-weight:800;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.abg-wiz-step{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;margin:3px 0;border-radius:6px;background:rgba(0,0,0,.2);font-size:12px;line-height:1.5}
.abg-wiz-step .num{min-width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}
.abg-wiz-step .txt{color:var(--text-secondary)}
.abg-wiz-step .txt b{color:var(--primary)}
.abg-wiz-step.normal{background:rgba(16,185,129,.08);border-left:3px solid var(--success)}
.abg-wiz-step.abnormal{background:rgba(245,158,11,.08);border-left:3px solid var(--warning)}
.abg-wiz-step.danger{background:rgba(239,68,68,.08);border-left:3px solid var(--danger)}
.abg-wiz-conclusion{margin-top:8px;padding:8px;background:rgba(0,0,0,.3);border-radius:6px;font-size:12px;color:var(--text);font-weight:600}
.abg-wiz-conclusion .verdict{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;margin-right:6px}

/* ═══ v4 Ventilator Alarms ═══ */
.alarm-bar{position:sticky;top:0;z-index:50;padding:10px 14px;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;transition:all .3s;cursor:pointer}
.alarm-bar.normal{background:rgba(16,185,129,.1);border:1px solid var(--success);color:var(--success)}
.alarm-bar.low{background:rgba(245,158,11,.15);border:1px solid var(--warning);color:var(--warning);animation:alarmPulse 1.5s infinite}
.alarm-bar.high{background:rgba(239,68,68,.15);border:1px solid var(--danger);color:var(--danger);animation:alarmPulse .8s infinite}
@keyframes alarmPulse{0%,100%{opacity:1}50%{opacity:.6}}
.alarm-bar .alarm-ico{font-size:18px}
.alarm-bar .alarm-msg{flex:1;line-height:1.4}
.alarm-bar .alarm-val{font-family:Consolas,monospace;font-size:14px;padding:2px 8px;background:rgba(0,0,0,.3);border-radius:4px}

/* ═══ v4 Rescue / Emergency Buttons ═══ */
.rescue-panel{background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(245,158,11,.05));border:1px solid var(--danger);border-radius:8px;padding:10px;margin:10px 0}
.rescue-title{font-size:12px;font-weight:800;color:var(--danger);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.rescue-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.rescue-btn{background:rgba(239,68,68,.15);border:1px solid var(--danger);color:var(--danger);padding:6px 8px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;text-align:left}
.rescue-btn:hover{background:var(--danger);color:#fff}
.rescue-btn .rname{font-weight:800;display:block}
.rescue-btn .rdesc{font-size:9px;opacity:.8;font-weight:500;margin-top:1px}

/* ═══ v4 Linking Indicators ═══ */
.link-indicator{font-size:10px;padding:1px 6px;border-radius:3px;margin-left:4px;font-weight:700;display:inline-block}
.link-indicator.linked{background:rgba(16,185,129,.15);color:#34d399}
.link-indicator.warn{background:rgba(245,158,11,.15);color:#fbbf24}
.link-indicator.danger{background:rgba(239,68,68,.15);color:#ef4444}

/* Platform Links Bar */
.platform-links-bar{max-width:1000px;margin:16px auto 0;padding:12px 16px;display:flex;align-items:center;gap:16px;font-size:11px;color:var(--text-dim);flex-wrap:wrap;justify-content:center;border-top:1px solid var(--border);background:var(--card-bg)}
.platform-links-bar b{color:var(--primary);font-size:11px;margin-right:4px}
.platform-links-bar a{color:var(--text-dim);text-decoration:none;padding:4px 10px;border-radius:4px;transition:all .2s}
.platform-links-bar a:hover{color:var(--primary);background:rgba(56,189,248,.08)}
.platform-links-bar a.active{color:var(--primary);font-weight:600;pointer-events:none}

/* ═══ Footer ═══ */
.footer-ventisim{max-width:960px;margin:0 auto;padding:20px 16px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;font-size:9px;color:var(--text-dim);line-height:1.8;border-top:1px solid var(--border)}
.footer-ventisim b{color:var(--primary);font-size:10px}
@media (max-width:768px){.footer-ventisim{grid-template-columns:1fr}}
.beian-bar{max-width:960px;margin:0 auto;padding:12px 16px 20px;text-align:center;font-size:9px;color:var(--text-dim)}
.beian-bar a{color:var(--text-muted);text-decoration:none}
.beian-bar a:hover{color:var(--primary)}
.beian-bar span{margin:0 4px}