/* ═══ NeuroICU-AI CSS 变量 ═══ */
:root{
  --primary:#06b6d4;--prim-dim:#0891b2;--prim-glow:rgba(6,182,212,.18);--prim-light:rgba(6,182,212,.12);
  --accent:#8b5cf6;--accent-light:rgba(139,92,246,.12);
  --danger:#ef4444;--danger-light:rgba(239,68,68,.12);--danger-glow:rgba(239,68,68,.2);
  --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;
  --font:'Microsoft YaHei','PingFang SC',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(6,182,212,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(139,92,246,.04) 0%,transparent 50%);}

/* ═══ 顶栏 ═══ */
.top{background:var(--bg-elevated);padding:8px 16px;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--primary);position:sticky;top:0;z-index:100}
.top h1{font-size:15px;color:var(--primary)}.badge{background:var(--primary);color:#000;padding:2px 10px;border-radius:10px;font-size:10px;font-weight:bold}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}
.dot.on{background:var(--success);animation:pulse 2s infinite}.dot.off{background:var(--danger)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ═══ 布局 ═══ */
.layout{display:grid;grid-template-columns:250px 1fr 1fr;gap:8px;padding:8px;height:calc(100vh - 48px);overflow:hidden}
.col{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden}
.col-head{padding:8px 12px;background:var(--bg-elevated);border-bottom:1px solid var(--border);font-size:12px;font-weight:700;color:var(--primary);flex-shrink:0}
.col-body{flex:1;overflow-y:auto;padding:8px}

/* ═══ NeuroICU CRRT/ECMO 卡片式面板 ═══ */
.cic{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;overflow:hidden}
.cic-head{padding:8px 12px;background:var(--bg-elevated);font-size:12px;font-weight:700;color:var(--primary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
.cic-body{padding:10px}
.cic-r{display:grid;gap:6px}

/* 参数小格(NeuroICU风格) */
.ic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ic-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.ic-it{background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--radius-xs);padding:5px 4px;text-align:center;transition:all .2s}
.ic-it .iv{font-size:14px;font-weight:800;font-family:monospace}
.ic-it .il{font-size:8px;color:var(--text-muted);margin-top:1px;text-transform:uppercase;letter-spacing:.5px}
.ic-it.wrn{border-color:var(--warning);background:var(--warning-light)}.ic-it.wrn .iv{color:var(--warning)}
.ic-it.dng{border-color:var(--danger);background:var(--danger-light)}.ic-it.dng .iv{color:var(--danger)}
.ic-it.crt{border-color:var(--danger);background:var(--danger-glow);animation:flashD 1s infinite}.ic-it.crt .iv{color:var(--danger)}
.ic-it.ok{border-color:var(--success)}.ic-it.ok .iv{color:var(--success)}
.ic-it.acc{border-color:var(--accent)}.ic-it.acc .iv{color:var(--accent)}
@keyframes flashD{0%,100%{opacity:1}50%{opacity:.5}}

/* 状态条 */
.stbar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px}
.stled{width:10px;height:10px;border-radius:50%;animation:pulse 2s infinite}
.stlex{font-size:12px;font-weight:700}.stlsub{font-size:10px;color:var(--text-muted);margin-left:4px}
.stltime{margin-left:auto;font-size:11px;color:var(--text-muted)}

/* ═══ 决策面板(NeuroICU风格) ═══ */
.ndc{padding:12px;border-radius:var(--radius-sm);border-left:4px solid;margin-bottom:8px;font-size:11px}
.ndc.start{background:var(--danger-light);border-color:var(--danger)}
.ndc.warn{background:var(--warning-light);border-color:var(--warning)}
.ndc.ok{background:var(--success-light);border-color:var(--success)}
.ndc.acc{background:var(--accent-light);border-color:var(--accent)}
.ndc h3{font-size:14px;font-weight:800;margin-bottom:4px}
.ndc p{color:var(--text-secondary);line-height:1.5}
.ndc .rl{padding:3px 8px;margin:2px 0;border-radius:4px;font-size:10px;font-family:monospace}
.ndc .rl.trg{background:var(--danger-light);border-left:2px solid var(--danger)}
.ndc .rl.sf{color:var(--text-muted)}
.nalert{padding:8px 12px;margin:4px 0;border-radius:var(--radius-xs);font-size:10px;display:flex;align-items:center;gap:6px}
.nalert.red{background:var(--danger-light);color:#fca5a5;border-left:3px solid var(--danger)}
.nalert.amb{background:var(--warning-light);color:#fcd34d;border-left:3px solid var(--warning)}

/* ═══ 表单控件(NeuroICU风格) ═══ */
.ifld{margin-bottom:5px;display:flex;flex-direction:column;gap:2px}
.ifld label{font-size:9px;color:var(--text-muted);letter-spacing:.5px;display:flex;justify-content:space-between}
.ifld label .un{font-size:8px;color:var(--text-dim)}
.ifld input,.ifld select{padding:5px 8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:12px;outline:none;font-family:inherit;width:100%;transition:border-color .15s}
.ifld input:focus,.ifld select:focus{border-color:var(--primary)}

.nbtn{padding:6px 14px;border:none;border-radius:var(--radius-xs);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.nbtn.pri{background:var(--primary);color:#060d1a}.nbtn.pri:hover{background:var(--prim-dim)}
.nbtn.dng{background:var(--danger);color:#fff}.nbtn.dng:hover{opacity:.85}
.nbtn.sec{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}.nbtn.sec:hover{background:var(--bg-input)}
.nbtn.suc{background:var(--success);color:#000}.nbtn.suc:hover{opacity:.85}
.nbtn.acc{background:var(--accent);color:#fff}.nbtn.acc:hover{opacity:.85}
.nbtn.wide{width:100%;margin-bottom:3px}
.nbtn.sm{padding:4px 8px;font-size:10px}

.scen-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;margin-bottom:5px;cursor:pointer;transition:.15s;font-size:11px}
.scen-card:hover,.scen-card.active{border-color:var(--primary);background:var(--bg-elevated)}
.scen-card .sct{font-size:12px;font-weight:700}.scen-card .scd{font-size:9px;color:var(--text-muted)}
.scen-card{position:relative}
.dc{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:14px}
.scen-card.done .dc{display:block}
.scen-card.done{opacity:0.7}
#scenWrap{max-height:260px;overflow-y:auto;padding:2px 0}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:6px 0}
.stb{text-align:center;padding:6px 3px;background:var(--bg-input);border-radius:var(--radius-xs)}
.stb .sv{font-size:16px;font-weight:800}.stb .sl{font-size:8px;color:var(--text-muted)}

.tl{font-size:11px;max-height:340px;overflow-y:auto;padding:4px 0;line-height:1.5}
.tl-it{display:flex;gap:6px;padding:5px 6px;border-bottom:1px solid var(--border-light);transition:background .2s}
.tl-it:hover{background:var(--bg-input)}
.tl-tm{color:var(--text-dim);min-width:52px;font-size:10px;font-family:monospace;flex-shrink:0}.tl-ms{color:var(--text-secondary);word-break:break-all}

.tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:9px;font-weight:700;margin-left:4px}
.tag.r{background:rgba(239,68,68,.2);color:var(--danger)}.tag.y{background:rgba(245,158,11,.2);color:var(--warning)}.tag.g{background:rgba(16,185,129,.2);color:var(--success)}

.ai-narr{padding:6px 10px;background:var(--bg-input);border-radius:var(--radius-xs);font-size:10px;color:var(--accent);line-height:1.5;white-space:pre-wrap;font-family:monospace}

/* ═══ 知识速查面板 ═══ */
.know-panel{border:1px solid rgba(139,92,246,.15);background:rgba(139,92,246,.04);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden}
.know-head{padding:8px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--accent);user-select:none}
.know-head:hover{background:rgba(139,92,246,.06)}
.know-head .kh-arrow{transition:transform .2s;font-size:9px}
.know-body{display:none;padding:8px 12px;font-size:9px;line-height:1.8;color:var(--text-secondary);border-top:1px solid rgba(139,92,246,.08)}
.know-body.show{display:block}
.know-body b{color:var(--primary);display:block;margin:6px 0 3px;font-size:10px}
.know-body .kv{color:var(--text-dim);font-family:monospace}
.know-body .kw{color:var(--warning)}
.know-body .kd{color:var(--danger)}
.know-tag{padding:1px 6px;border-radius:3px;font-size:8px;font-weight:700;margin-left:4px}
.know-tag.rec{background:rgba(16,185,129,.15);color:var(--success)}
.know-tag.warn{background:rgba(245,158,11,.15);color:var(--warning)}

.ir{display:flex;align-items:center;gap:4px;margin:3px 0}
.ir label{font-size:9px;color:var(--text-muted);min-width:44px;text-align:right}
.ir input{width:55px;padding:3px 5px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:10px}
.ir select{width:70px;padding:3px 5px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-size:10px}
.ir .uh{font-size:8px;color:var(--text-dim)}

/* ═══ 血管活性药物控件 ═══ */
.drug-card{border:1px solid rgba(239,68,68,.15);background:rgba(239,68,68,.04);padding:10px;margin:8px 0;border-radius:var(--radius-sm)}
.drug-card .dc-title{font-size:10px;font-weight:700;color:var(--danger);margin-bottom:3px;display:flex;align-items:center;gap:4px}
.drug-card .dc-sub{font-size:8px;color:var(--text-dim)}
.drug-tip{font-size:8px;min-height:16px;padding:2px 0;color:var(--warning);line-height:1.4}
.drug-row{display:flex;align-items:center;gap:6px;margin:4px 0}
.drug-row label{font-size:9px;color:var(--text-secondary);min-width:70px;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.drug-row label .dose-u{font-size:7px;color:var(--text-dim)}
.drug-row input[type=range]{flex:1;height:5px;-webkit-appearance:none;appearance:none;background:var(--bg-input);border-radius:3px;outline:none}
.drug-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid var(--bg);transition:.15s}
.drug-ne input[type=range]::-webkit-slider-thumb{background:var(--danger);box-shadow:0 0 8px var(--danger-glow)}
.drug-dobu input[type=range]::-webkit-slider-thumb{background:var(--primary);box-shadow:0 0 8px var(--prim-glow)}
.drug-vaso input[type=range]::-webkit-slider-thumb{background:var(--warning);box-shadow:0 0 8px rgba(245,158,11,.4)}
.drug-row .dval{font-size:10px;font-family:Consolas,monospace;min-width:80px;color:var(--text);text-align:right}
.drug-row .dval.alert{color:var(--danger);font-weight:700;animation:pulse 1.5s infinite}

/* ═══ 🩸 输血模块 ═══ */
.transfusion-card{border:1px solid rgba(168,85,247,.2);background:rgba(168,85,247,.06);padding:10px;margin:8px 0;border-radius:var(--radius-sm)}
.transfusion-card .tf-title{font-size:10px;font-weight:700;color:#c084fc;margin-bottom:3px;display:flex;align-items:center;gap:4px}
.transfusion-card .tf-sub{font-size:8px;color:var(--text-dim)}
.tf-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
.tf-item{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:6px}
.tf-item label{font-size:8px;color:var(--text-secondary);display:block;margin-bottom:2px}
.tf-item input{width:55px;padding:3px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:10px}
.tf-item span{font-size:8px;color:var(--text-dim);margin-left:3px}
.tf-btn{width:100%;padding:6px;background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.3);border-radius:6px;cursor:pointer;font-size:9px;font-weight:600}
.tf-btn:hover{background:rgba(168,85,247,.25)}
.tf-tip{font-size:8px;min-height:16px;padding:2px 0;color:var(--warning);line-height:1.4}

.slbl{font-size:9px;color:var(--primary);margin:8px 0 4px;font-weight:700;border-bottom:1px solid var(--border-light);padding-bottom:2px}

/* ═══ 🎓 教学模式 ═══ */
.t-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:999;display:flex;align-items:center;justify-content:center}
.t-modal{background:var(--bg-card);border:2px solid var(--primary);border-radius:14px;padding:24px;max-width:580px;width:90%;max-height:85vh;overflow-y:auto}
.t-modal h2{font-size:18px;margin:0 0 4px;color:var(--primary)}
.t-modal .t-sub{font-size:11px;color:var(--text-muted);margin-bottom:14px}
.t-modal .t-q{font-size:13px;color:var(--text);line-height:1.7;margin-bottom:14px;padding:10px;background:var(--bg-input);border-radius:8px}
.t-opt{display:block;width:100%;text-align:left;padding:10px 14px;margin:6px 0;background:var(--bg-input);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;cursor:pointer;transition:.15s;line-height:1.5}
.t-opt:hover{border-color:var(--primary);background:rgba(56,189,248,.06)}
.t-opt.sel{border-color:var(--success);background:rgba(16,185,129,.1)}
.t-opt.done{pointer-events:none;opacity:.6}
.t-fb{margin-top:12px;padding:12px;border-radius:8px;font-size:12px;line-height:1.6;display:none}
.t-fb.show{display:block}
.t-fb.correct{background:rgba(16,185,129,.12);border:1px solid var(--success);color:#a7f3d0}
.t-fb.wrong{background:rgba(239,68,68,.12);border:1px solid var(--danger);color:#fca5a5}
.t-score{font-size:28px;font-weight:800;text-align:center;margin:8px 0}
.t-bar{height:8px;background:var(--bg-input);border-radius:4px;margin:8px 0;overflow:hidden}
.t-bar-fill{height:100%;background:var(--success);border-radius:4px;transition:width .5s}
.t-hist{font-size:10px;color:var(--text-muted);margin-top:4px}
.t-hist .th-row{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid var(--border-light)}
.t-hist .th-s{color:var(--success)}.t-hist .th-f{color:var(--danger)}
.t-btn-row{display:flex;gap:8px;margin-top:12px}
.t-btn{flex:1;padding:10px;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.t-btn.pri{background:var(--primary);color:#060d1a}.t-btn.pri:hover{opacity:.9}
.t-btn.sec{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border)}.t-btn.sec:hover{background:var(--bg-input)}