/* ==========================================================================
   守备医疗人生 - 界面样式
   设计基调：工作站深色外壳（HIS 操作台）+ 白色纸质文书（真实报告单）
   ========================================================================== */

:root {
  --bg: #0e1319;
  --panel: #151c24;
  --panel-2: #1b232d;
  --panel-3: #212b36;
  --line: #26313d;
  --line-2: #33404e;
  --text: #dbe3ec;
  --text-2: #aeb9c6;
  --muted: #7d8996;
  --accent: #2f8fd0;
  --accent-2: #48a9e6;
  --ok: #35a877;
  --warn: #d8a63a;
  --err: #e0644f;
  --gold: #d8b45a;
  --radius: 3px;
  --font-cn: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; font-size: inherit; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #10171e; }
::-webkit-scrollbar-thumb { background: #2c3846; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #3a4a5c; }

/* ---------------- 启动与加载 ---------------- */

.boot-loading {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
}
.boot-loading-mark {
  width: 82px; height: 82px; border: 2px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; letter-spacing: 4px; text-indent: 4px;
}
.boot-loading-text { color: var(--muted); letter-spacing: 2px; }

.boot-error { max-width: 720px; margin: 120px auto; padding: 28px; border: 1px solid var(--err); background: #1a1210; }
.boot-error h1 { color: var(--err); margin: 0 0 12px; font-size: 22px; }

/* ---------------- 外壳 ---------------- */

#app { min-height: 100vh; display: flex; flex-direction: column; }

.v-top {
  display: flex; align-items: center; gap: 24px;
  padding: 0 18px; height: 60px;
  background: linear-gradient(180deg, #1a232e, #141b23);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 60;
}
.v-logo { display: flex; align-items: center; gap: 12px; }
.v-logo-mark {
  width: 38px; height: 38px; border: 1.5px solid var(--accent); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; letter-spacing: 1px;
}
.v-logo-name { display: flex; flex-direction: column; line-height: 1.15; font-size: 17px; font-weight: 700; letter-spacing: 1px; }
.v-logo-sub { font-size: 9px; color: var(--muted); letter-spacing: 2px; font-weight: 400; }

.v-top-mid { display: flex; align-items: center; gap: 26px; margin-left: 8px; }
.v-dept { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.v-dept-label { color: var(--muted); }
.v-dept-name { color: var(--accent-2); border-bottom: 1px dashed var(--line-2); padding-bottom: 1px; }
.v-clock { display: flex; flex-direction: column; line-height: 1.3; }
.v-clock-main { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.v-clock-sub { font-size: 11px; color: var(--muted); }

.v-top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.v-chip {
  padding: 4px 10px; border: 1px solid var(--line-2); background: var(--panel-2);
  font-size: 12px; letter-spacing: .5px;
}
.v-chip-title { color: var(--gold); border-color: #4a4128; }
.v-chip-money { color: var(--ok); font-family: var(--font-mono); }
.v-stamina { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.v-stamina-track { width: 88px; height: 7px; background: #101820; border: 1px solid var(--line-2); }
.v-stamina-fill { height: 100%; background: linear-gradient(90deg, #2f8fd0, #48c0e6); }
.v-icon-btn {
  background: var(--panel-2); color: var(--text-2); border: 1px solid var(--line-2);
  padding: 6px 12px; cursor: pointer; letter-spacing: .5px;
}
.v-icon-btn:hover { background: var(--panel-3); color: #fff; border-color: var(--accent); }

.v-main { flex: 1; display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 14px; padding: 14px; align-items: start; }
.v-col { min-width: 0; }

.v-status {
  display: flex; align-items: center; gap: 30px;
  padding: 10px 18px; background: #121922; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; z-index: 60;
}
.v-status-left { display: flex; gap: 22px; flex-wrap: wrap; }
.v-status-right { margin-left: auto; display: flex; gap: 20px; align-items: center; font-size: 12px; color: var(--text-2); }
.v-status-money { font-family: var(--font-mono); color: var(--ok); }

.v-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.v-bar-label { color: var(--muted); width: 30px; }
.v-bar-track { width: 96px; height: 7px; background: #0d131a; border: 1px solid var(--line-2); }
.v-bar-fill { height: 100%; background: var(--accent); }
.v-bar-fill.stamina { background: linear-gradient(90deg, #2f8fd0, #48c0e6); }
.v-bar-fill.sanity { background: linear-gradient(90deg, #7a6fbf, #a498e0); }
.v-bar-fill.rep { background: linear-gradient(90deg, #b8912f, #d8b45a); }
.v-bar-val { font-family: var(--font-mono); color: var(--text-2); }

/* ---------------- 卡片与基础组件 ---------------- */

.v-card { background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px; }
.v-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.v-card-title { font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--text); }
.v-card-title::before { content: ""; display: inline-block; width: 3px; height: 12px; background: var(--accent); margin-right: 8px; vertical-align: -1px; }
.v-card-body { padding: 12px; }

.v-kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.v-kv th { text-align: left; color: var(--muted); font-weight: 400; width: 42%; padding: 4px 0; vertical-align: top; }
.v-kv td { color: var(--text); padding: 4px 0; word-break: break-all; }

.v-btn {
  background: var(--panel-3); color: var(--text); border: 1px solid var(--line-2);
  padding: 7px 14px; cursor: pointer; letter-spacing: .5px; transition: background .12s, border-color .12s;
}
.v-btn:hover { background: #2b3948; border-color: var(--accent); }
.v-btn.primary { background: #1d4a70; border-color: #2f7fb8; color: #e9f4ff; }
.v-btn.primary:hover { background: #245c8c; }
.v-btn.danger { border-color: #5a2b26; color: #eab0a5; }
.v-btn.danger:hover { background: #3a1f1a; }
.v-btn.big { padding: 12px 26px; font-size: 15px; }
.v-btn:disabled, .v-btn.disabled { opacity: .42; cursor: not-allowed; }

.v-field { display: flex; gap: 8px; font-size: 13px; }
.v-field-l { color: var(--muted); min-width: 84px; }
.v-field-v { color: var(--text); }
.v-empty { color: var(--muted); font-size: 13px; padding: 10px 0; }
.v-muted { color: var(--muted); }
.v-err { color: var(--err); padding: 14px; border: 1px solid #5a2b26; background: #1a1210; margin-bottom: 10px; }

.v-input {
  width: 100%; background: #0f161d; border: 1px solid var(--line-2); color: var(--text);
  padding: 7px 10px; font-family: inherit; font-size: 14px; outline: none;
}
.v-input:focus { border-color: var(--accent); }

/* ---------------- 场景 ---------------- */

.scene { background: var(--panel); border: 1px solid var(--line); }
.scene-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1a232e, #151d26);
}
.scene-title { margin: 0; font-size: 18px; letter-spacing: 1px; }
.scene-title::before { content: ""; display: inline-block; width: 4px; height: 16px; background: var(--accent); margin-right: 10px; vertical-align: -2px; }
.scene-sub { color: var(--muted); font-size: 12px; }
.scene-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.scene-body { padding: 18px; }

.section-label { color: var(--muted); font-size: 12px; letter-spacing: 1px; margin: 18px 0 10px; }
.section-label::before { content: "▪ "; color: var(--accent); }

.tip-box { border-left: 3px solid var(--accent); background: #121b24; padding: 10px 14px; margin-top: 16px; }
.tip-t { font-size: 12px; color: var(--accent-2); letter-spacing: 1px; margin-bottom: 4px; }
.tip-c { font-size: 13px; color: var(--text-2); }

/* ---------------- 启动页 ---------------- */

.boot-page { max-width: 980px; margin: 0 auto; }
.boot-hero { text-align: center; padding: 40px 0 30px; }
.boot-title { font-size: 46px; letter-spacing: 12px; margin: 0; font-weight: 700; text-indent: 12px; }
.boot-en { color: var(--muted); letter-spacing: 5px; font-size: 12px; margin-top: 6px; }
.boot-tagline { margin-top: 22px; color: var(--text-2); font-size: 14px; }
.boot-quote { margin-top: 10px; color: var(--muted); font-size: 13px; font-style: italic; }
.boot-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 26px 0; }
.boot-foot { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); padding-top: 14px; font-family: var(--font-mono); }

.about p { margin: 0 0 12px; color: var(--text-2); }

/* ---------------- 职业选择 / 选校 ---------------- */

.career-grid, .school-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.career-card, .school-card {
  background: var(--panel-2); border: 1px solid var(--line); padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.career-card:hover, .school-card:hover { border-color: var(--accent); }
.career-name { font-size: 21px; font-weight: 700; letter-spacing: 2px; }
.career-en { color: var(--muted); font-size: 11px; letter-spacing: 2px; }
.career-desc, .school-desc { color: var(--text-2); font-size: 13px; flex: 1; }
.career-path-label, .school-meta { color: var(--muted); font-size: 12px; }
.career-path-list { color: var(--gold); font-size: 13px; }
.school-name { font-size: 19px; font-weight: 700; }

/* ---------------- 建档 ---------------- */

.reg { display: grid; grid-template-columns: 280px 1fr; gap: 24px; }
.reg-photo { width: 200px; margin: 0 auto; }
.reg-photo img { width: 100%; display: block; border: 1px solid var(--line-2); background: #fff; aspect-ratio: 5 / 7; object-fit: cover; }
.reg-photo-cap { text-align: center; color: var(--muted); font-size: 12px; margin-top: 6px; }
.reg-photo-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.reg-hint { color: var(--muted); font-size: 12px; margin-top: 14px; line-height: 1.8; }
.reg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-field { display: flex; flex-direction: column; gap: 4px; }
.reg-field label { color: var(--muted); font-size: 12px; }
.reg-start { margin-top: 16px; text-align: right; }

/* ---------------- 学年主界面 ---------------- */

.home-top { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }
.home-year { font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.home-week { color: var(--accent-2); font-family: var(--font-mono); }
.home-courses { color: var(--muted); font-size: 12px; }
.week-track { margin: 14px 0 6px; }
.week-track-inner { display: flex; gap: 6px; }
.week-cell {
  flex: 1; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); color: var(--muted); font-size: 11px; font-family: var(--font-mono);
}
.week-cell.filled { background: #1d3a52; border-color: #2f7fb8; color: #cfe7fa; }

.exam-banner {
  display: flex; align-items: center; gap: 20px; margin: 16px 0;
  border: 1px solid var(--line-2); background: var(--panel-2); padding: 14px 18px;
}
.exam-banner.ready { border-color: #3f6f4f; background: #12211a; }
.exam-info { flex: 1; }
.exam-title { font-size: 16px; font-weight: 600; }
.exam-sub { color: var(--muted); font-size: 12px; }

.action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.action-card {
  border: 1px solid var(--line); background: var(--panel-2); padding: 14px; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.action-card:hover { border-color: var(--accent); background: var(--panel-3); }
.action-card.disabled { opacity: .45; cursor: not-allowed; }
.action-head { display: flex; justify-content: space-between; align-items: baseline; }
.action-name { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.action-stamina { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.action-desc { color: var(--text-2); font-size: 12px; margin-top: 6px; }
.action-gain { color: var(--ok); font-size: 12px; margin-top: 8px; font-family: var(--font-mono); }

/* ---------------- 刷题 ---------------- */

.quiz-bar { display: flex; gap: 20px; align-items: center; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 10px; flex-wrap: wrap; }
.quiz-prog { color: var(--accent-2); font-family: var(--font-mono); }
.quiz-score { margin-left: auto; color: var(--ok); font-family: var(--font-mono); }
.quiz-stem { font-size: 16px; margin: 18px 0; line-height: 1.9; }
.quiz-opts, .exam-opts { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.quiz-opt, .exam-opt {
  display: flex; gap: 12px; align-items: flex-start; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  padding: 11px 14px; cursor: pointer;
}
.quiz-opt:hover, .exam-opt:hover { border-color: var(--accent); background: var(--panel-3); }
.quiz-opt-key, .exam-opt-key {
  width: 24px; height: 24px; flex: 0 0 24px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.quiz-opt.correct { border-color: #2f6f4f; background: #12241a; }
.quiz-opt.correct .quiz-opt-key { border-color: var(--ok); color: var(--ok); }
.quiz-opt.wrong { border-color: #6f2f28; background: #241412; }
.quiz-opt.wrong .quiz-opt-key { border-color: var(--err); color: var(--err); }
.exam-opt.picked { border-color: var(--accent); background: #132a3c; }
.exam-opt.picked .exam-opt-key { border-color: var(--accent); color: var(--accent-2); }
.quiz-explain { margin-top: 18px; border-left: 3px solid var(--accent); background: #121b24; padding: 12px 16px; max-width: 760px; }
.quiz-verdict { font-weight: 600; margin-bottom: 8px; }
.quiz-verdict.ok { color: var(--ok); }
.quiz-verdict.bad { color: var(--err); }
.quiz-explain-t { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.quiz-explain p { margin: 0 0 12px; color: var(--text-2); }
.quiz-wait { margin-top: 16px; color: var(--muted); font-size: 13px; }

/* ---------------- 考试 ---------------- */

.exam-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.exam-title { font-size: 17px; font-weight: 600; }
.exam-sub, .exam-mode { color: var(--muted); font-size: 12px; }
.exam-sheet { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.exam-dot {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); color: var(--muted); font-size: 11px;
  font-family: var(--font-mono); cursor: pointer;
}
.exam-dot.done { background: #1d3a52; border-color: #2f7fb8; color: #cfe7fa; }
.exam-dot.cur { outline: 1px solid var(--accent); }
.exam-stem { font-size: 16px; margin: 16px 0; line-height: 1.9; }
.exam-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.exam-nav-info { color: var(--muted); font-size: 12px; font-family: var(--font-mono); }

.exam-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; }
.exam-table th, .exam-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.exam-table th { background: var(--panel-2); color: var(--muted); font-weight: 400; }
.exam-table tr.ok td { background: #10201a; }
.exam-table tr.bad td { background: #201312; }
.exam-table td.q { max-width: 420px; }
.expert-exam { border: 1px solid var(--line-2); padding: 14px; margin: 16px 0; }

/* ---------------- 总结 / 成绩 ---------------- */

.summary-hero { text-align: center; padding: 22px 0; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.summary-big { font-size: 40px; font-weight: 700; letter-spacing: 3px; }
.summary-big.pos { color: var(--ok); }
.summary-big.neg { color: var(--err); }
.summary-sub { color: var(--muted); margin-top: 6px; }
.summary-list { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.summary-item { padding: 4px 8px; border-left: 2px solid var(--line-2); color: var(--text-2); }
.summary-item.ok { border-color: var(--ok); }
.summary-item.bad { border-color: var(--err); }

/* ---------------- 档案 / 名片 / 证书 ---------------- */

.archive { display: grid; grid-template-columns: 250px 1fr; gap: 24px; }
.archive-photo img { width: 150px; display: block; border: 1px solid var(--line-2); background: #fff; aspect-ratio: 5 / 7; object-fit: cover; }
.archive-photo-cap { color: var(--muted); font-size: 11px; margin-top: 6px; }
.archive-name { font-size: 23px; font-weight: 700; margin-top: 14px; letter-spacing: 2px; }
.archive-title { color: var(--accent-2); font-size: 13px; margin-top: 4px; }
.archive-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.archive-right { display: flex; flex-direction: column; }

.v-photo-thumb { width: 76px; border: 1px solid var(--line-2); background: #fff; aspect-ratio: 5 / 7; object-fit: cover; display: block; margin-bottom: 10px; }
.v-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 10px; text-align: center; }

.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.cert-mini { border: 1px solid var(--line-2); background: var(--panel-2); padding: 10px; cursor: pointer; }
.cert-mini:hover { border-color: var(--gold); }
.cert-mini-name { font-size: 13px; color: var(--gold); }
.cert-mini-no { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }
.cert-mini-date { font-size: 11px; color: var(--muted); }

.cert-list { display: flex; flex-direction: column; gap: 10px; }
.cert-row { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); background: var(--panel-2); padding: 12px 16px; }
.cert-row-main { flex: 1; }
.cert-row-name { font-size: 15px; color: var(--gold); }
.cert-row-sub { color: var(--muted); font-size: 12px; }
.cert-row-no { font-family: var(--font-mono); color: var(--muted); font-size: 12px; }
.cert-holder, .card-holder { max-width: 100%; }
.cert-issued { color: var(--text-2); }
.cert-issued-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cert-issued-item { border-left: 3px solid var(--gold); background: var(--panel-2); padding: 10px 14px; }
.ci-name { color: var(--gold); }
.ci-no { font-family: var(--font-mono); font-size: 12px; }
.ci-issuer { color: var(--muted); font-size: 12px; }

/* ---------------- 设置 ---------------- */

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-card { border: 1px solid var(--line-2); background: var(--panel-2); padding: 16px; cursor: pointer; }
.mode-card:hover { border-color: var(--accent); }
.mode-card.active { border-color: var(--accent); background: #132a3c; }
.mode-name { font-size: 16px; font-weight: 600; }
.mode-desc { color: var(--text-2); font-size: 12px; margin-top: 6px; }

.slots { display: flex; flex-direction: column; gap: 10px; }
.slot { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); padding: 10px 14px; background: var(--panel-2); }
.slot-info { flex: 1; }
.slot-title { font-size: 14px; }
.slot-sub { color: var(--muted); font-size: 12px; }
.slot-actions { display: flex; gap: 8px; }
.danger-zone { display: flex; gap: 10px; }

/* ---------------- 数据自检 ---------------- */

.ok-box { color: var(--ok); }
.bad-box { color: var(--err); }
.bad-box ul, .warn-list { margin: 8px 0 0; padding-left: 20px; color: var(--text-2); font-size: 12px; line-height: 1.9; }
.selftest { display: flex; flex-direction: column; gap: 12px; }
.selftest-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.selftest-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.selftest-gallery { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.selftest-item { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #23272e; }
.selftest-item-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #2c3138; border-bottom: 1px solid var(--line);
}
.selftest-item-t { font-size: 13px; font-weight: 600; color: var(--text); }
.selftest-item-meta { flex: 1; font-size: 11px; color: var(--muted); }
.preview-holder { background: #2a2f36; padding: 16px; max-height: 66vh; overflow: auto; }

/* ---------------- 执业阶段占位 ---------------- */

.practice-stub { display: flex; flex-direction: column; gap: 18px; }
.stub-banner { border: 1px solid var(--line-2); background: var(--panel-2); padding: 18px; }
.stub-title { font-size: 19px; font-weight: 700; letter-spacing: 1px; }
.stub-sub { color: var(--accent-2); font-size: 13px; margin-top: 6px; font-family: var(--font-mono); }
.stub-note { color: var(--muted); font-size: 12px; margin-top: 10px; }
.stub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.stub-item { border-left: 2px solid var(--line-2); padding: 6px 12px; }
.stub-item-t { font-size: 13px; color: var(--text); }
.stub-item-d { font-size: 12px; color: var(--muted); }

/* ---------------- 事件弹窗 ---------------- */

.v-overlay {
  position: fixed; inset: 0; background: rgba(6,9,13,.78); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity .18s;
}
.v-overlay-in { opacity: 1; }
.v-modal { background: var(--panel); border: 1px solid var(--line-2); width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; }
.v-modal-wide { max-width: 1000px; }
.v-modal-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.v-modal-title { font-size: 15px; font-weight: 600; letter-spacing: 1px; }
.v-modal-x { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; }
.v-modal-x:hover { color: #fff; }
.v-modal-body { padding: 16px; overflow: auto; }
.v-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.v-confirm { margin: 0; color: var(--text-2); }

.v-event-title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.v-event-text { color: var(--text); margin-bottom: 8px; }
.v-event-detail { color: var(--text-2); font-size: 13px; border-left: 2px solid var(--line-2); padding-left: 12px; margin-bottom: 16px; }
.v-event-opts { display: flex; flex-direction: column; gap: 10px; }
.v-opt { display: flex; gap: 10px; text-align: left; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text); padding: 11px 14px; cursor: pointer; }
.v-opt:hover { border-color: var(--accent); background: var(--panel-3); }
.v-opt-index { width: 22px; height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.v-result-text { margin-bottom: 12px; color: var(--text); }
.v-result-eff { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; }
.eff.pos { color: var(--ok); }
.eff.neg { color: var(--err); }

.v-log { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.v-log-item { border-left: 2px solid var(--line-2); padding-left: 8px; }
.v-log-at { color: var(--muted); font-family: var(--font-mono); font-size: 11px; display: block; }
.v-log-text { color: var(--text-2); }

.v-courses { display: flex; flex-direction: column; gap: 6px; }
.v-course { font-size: 12px; color: var(--text-2); border-left: 2px solid var(--line-2); padding-left: 8px; }
.v-archive-mini { display: flex; flex-direction: column; }

/* ---------------- 提示条 ---------------- */

#toast-host { position: fixed; right: 20px; bottom: 84px; z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  background: #1e2833; border: 1px solid var(--line-2); border-left: 3px solid var(--accent);
  padding: 10px 16px; max-width: 400px; font-size: 13px; color: var(--text);
  opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s;
}
.toast-in { opacity: 1; transform: translateX(0); }
.toast-ok { border-left-color: var(--ok); }
.toast-warn { border-left-color: var(--warn); }
.toast-err { border-left-color: var(--err); }

/* ==========================================================================
   报告文书（真实医院制式，白纸黑字）
   ========================================================================== */

.rp-paper {
  background: #ffffff; color: #1a1f26;
  font-family: "SimSun", "Songti SC", "Microsoft YaHei", serif;
  padding: 22px 26px 18px; margin-bottom: 20px;
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
  position: relative;          /* 水印层定位基准 */
  overflow: hidden;
}
/* ---------------- 报告防伪水印 ----------------
 * 铺满整张文书的斜排重复水印。用 SVG data-URI 作平铺背景，
 * 好处：与文书尺寸无关、缩放不变形、不额外增加 DOM 数量。
 * z-index 压在正文之下（正文各块统一 z-index:1），保证不影响阅读。 */
.rp-watermark {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none;
  background-repeat: repeat;
  background-size: 300px 200px;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200'>\
<g transform='rotate(-30 150 100)' fill='%231a4f8a' fill-opacity='0.10'>\
<text x='-40' y='60' font-size='17' font-family='Microsoft YaHei,SimHei,sans-serif' letter-spacing='2'>守备医疗人生 · 模拟训练</text>\
<text x='10' y='92' font-size='17' font-family='Microsoft YaHei,SimHei,sans-serif' letter-spacing='2'>内容为虚构 · 不作诊疗依据</text>\
<text x='-30' y='124' font-size='15' font-family='Arial,sans-serif' letter-spacing='3'>SHOUBEI MEDICAL LIFE · FICTIONAL</text>\
</g></svg>");
}
/* 正文各块抬到水印之上 */
.rp-head, .rp-info, .rp-body, .rp-foot, .rp-disclaim, .rp-disclaim2, .rp-fiction {
  position: relative; z-index: 1;
}
/* 抬头区的显式虚构标识（水印之外的醒目提示） */
.rp-fiction {
  display: inline-block; margin: 8px 0 0; padding: 2px 10px;
  border: 1px solid #c0392b; color: #c0392b; border-radius: 2px;
  font-size: 11px; letter-spacing: 2px; font-family: "Microsoft YaHei", sans-serif;
}
.rp-head { display: flex; align-items: flex-start; gap: 16px; border-bottom: 2px solid #1a4f8a; padding-bottom: 10px; }
.rp-head-l { flex: 0 0 auto; }
.rp-hospital { font-size: 22px; font-weight: 700; color: #1a4f8a; letter-spacing: 3px; font-family: "Microsoft YaHei", sans-serif; }
.rp-hosp-en { font-size: 9px; color: #7b8794; letter-spacing: 1.6px; font-family: Arial, sans-serif; }
.rp-head-c { flex: 1; text-align: center; }
.rp-title { font-size: 19px; font-weight: 700; letter-spacing: 4px; font-family: "Microsoft YaHei", sans-serif; }
.rp-sub { font-size: 11px; color: #6b7480; letter-spacing: 1px; }
.rp-head-r { flex: 0 0 auto; text-align: right; font-size: 10px; color: #6b7480; }
.rp-no { font-family: "Courier New", monospace; font-size: 12px; color: #1a4f8a; }

.rp-info { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 12px; }
.rp-info th, .rp-info td { border: 1px solid #c8d0d8; padding: 5px 8px; }
.rp-info th { background: #f2f6fa; color: #46505c; font-weight: 400; width: 72px; white-space: nowrap; }

.rp-body { }
.rp-sec { margin-bottom: 14px; }
.rp-sec-t { font-size: 12px; font-weight: 700; color: #1a4f8a; border-left: 3px solid #1a4f8a; padding-left: 8px; margin-bottom: 8px; font-family: "Microsoft YaHei", sans-serif; }
.rp-sec p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.95; text-align: justify; }
.rp-conc { font-weight: 700; }
.rp-measure { font-family: "Courier New", monospace; font-size: 12px; color: #2b3540; }
.rp-note { color: #8a6a20; font-size: 12px; }

.rp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rp-table th, .rp-table td { border: 1px solid #c8d0d8; padding: 4px 8px; }
.rp-table th { background: #f2f6fa; color: #46505c; font-weight: 400; }
.rp-table .c-no { width: 42px; text-align: center; color: #6b7480; }
.rp-table .c-val { width: 96px; text-align: right; font-family: "Courier New", monospace; font-weight: 700; }
.rp-table .c-unit { width: 96px; color: #46505c; }
.rp-table .c-ref { width: 150px; color: #46505c; }
.rp-table .c-flag { width: 48px; text-align: center; font-weight: 700; }
.rp-table tr.abn td { background: #fff6f6; color: #b02a1c; }
.rp-table tr.abn .c-val { color: #b02a1c; }

.rp-canvas-wrap { background: #fff; border: 1px solid #d8dee5; padding: 6px; margin-bottom: 14px; overflow-x: auto; }
.rp-canvas { display: block; }

.rp-hint { border: 1px dashed #b08a2e; background: #fffbe9; color: #7a5a10; padding: 8px 12px; font-size: 12.5px; margin-top: 10px; font-family: "Microsoft YaHei", sans-serif; }

.rp-foot { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid #c8d0d8; margin-top: 16px; padding-top: 12px; }
.rp-sign { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: #46505c; }
.rp-sign-n { font-family: "STKaiti", "KaiTi", serif; font-size: 15px; color: #1a1f26; padding: 0 6px; border-bottom: 1px solid #98a2ae; }
.rp-stamp {
  width: 118px; height: 118px; border: 3px solid rgba(192,57,43,.8); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: rgba(192,57,43,.85); font-size: 10px; line-height: 1.5; transform: rotate(-9deg);
  font-family: "Microsoft YaHei", sans-serif;
}
.rp-disclaim {
  border-top: 1px dashed #c8d0d8; margin-top: 10px; padding-top: 6px;
  font-size: 10.5px; line-height: 1.8; color: #8a4b3f; background: #fdf6f4;
  border-left: 3px solid #c0392b; padding-left: 8px;
}
.rp-disclaim b { color: #c0392b; }
.rp-disclaim2 { margin-top: 5px; font-size: 10px; color: #7b8794; }

/* ==========================================================================
   床旁视图（3D 病床模型 + 实时监护波形）
   布局：  ◀ │  3D 病床（可拖拽旋转）  │ ▶ │ 监护面板（心电 / 脉搏波 / 生命体征）
   左右箭头用于切换病人——医生线与护士线共用同一组件。
   ========================================================================== */

.bedview {
  display: grid; grid-template-columns: minmax(0, 1fr) 272px;
  border: 1px solid var(--line); background: #05080c;
  position: relative; overflow: hidden;
}
.bedview.compact { grid-template-columns: minmax(0, 1fr) 220px; }

.bedview-stage { position: relative; min-height: 330px; background: #05080c; overflow: hidden; }
.bedview.compact .bedview-stage { min-height: 250px; }

.bedview-gl, .bedview-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: none; touch-action: none;
}
.bedview-gl.active, .bedview-fallback.active { display: block; }

/* 切换病人的左右箭头 */
.bedview-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 76px; padding: 0;
  background: rgba(12, 20, 28, .72); color: var(--accent-2);
  border: 1px solid var(--line-2); cursor: pointer;
  font-size: 17px; line-height: 1; z-index: 6;
  transition: background .15s, color .15s, border-color .15s;
  backdrop-filter: blur(2px);
}
.bedview-arrow:hover { background: rgba(24, 44, 62, .95); color: #fff; border-color: var(--accent); }
.bedview-arrow:active { background: var(--accent); color: #04121c; }
.bedview-arrow.left { left: 10px; }
.bedview-arrow.right { right: 10px; }

/* 床头卡片（床号 / 姓名 / 主诉 / 标签） */
.bedview-hud {
  position: absolute; left: 60px; top: 12px; z-index: 5;
  display: flex; flex-direction: column; gap: 3px;
  background: rgba(8, 14, 20, .66); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); padding: 7px 12px 8px;
  max-width: calc(100% - 130px); pointer-events: none;
}
.hud-bed { font-family: var(--font-mono); font-size: 11px; color: var(--accent-2); letter-spacing: 1px; }
.hud-name { font-size: 15px; color: #eaf2fa; letter-spacing: .5px; }
.hud-dx { font-size: 11.5px; color: var(--text-2); }
.hud-tags { display: flex; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.hud-tag {
  font-size: 10px; padding: 1px 7px; border: 1px solid var(--line-2);
  color: var(--text-2); letter-spacing: .5px;
}
.hud-tag.urgency.critical { border-color: #7a2626; color: #ff8d7a; background: #2a1414; }
.hud-tag.urgency.urgent { border-color: #7a5a1e; color: var(--warn); background: #241d0d; }
.hud-tag.status.critical { border-color: #7a2626; color: #ff8d7a; background: #2a1414; animation: hbPulse 1.6s infinite; }
.hud-tag.status.watch { border-color: #7a5a1e; color: var(--warn); }
.hud-tag.status.stable { border-color: #1f5c42; color: #6fdcab; }
.hud-tag.status.done { border-color: #2a4a63; color: #86b9db; }
.hud-tag.status.dead { border-color: #5a2030; color: #ff7d7d; background: #26090f; }
@keyframes hbPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* 监护面板 */
.bedview-panel {
  background: #060a0f; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0;
}
.bedview-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; border-bottom: 1px solid var(--line); background: #0b1218;
}
.bp-title { font-size: 11.5px; color: var(--text-2); letter-spacing: 2px; }
.bp-live { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: #4dff9b; }
.bp-dot { width: 6px; height: 6px; border-radius: 50%; background: #4dff9b; animation: hbPulse 1.1s infinite; }

.bedview-ecg-wrap, .bedview-pleth-wrap { padding: 4px 6px 2px; }
.bedview-ecg-wrap canvas, .bedview-pleth-wrap canvas { display: block; width: 100%; height: 88px; }
.bedview-pleth-wrap canvas { height: 60px; }
.bp-lead {
  font-family: var(--font-mono); font-size: 10px; color: #4b6b57;
  letter-spacing: 1px; padding-left: 2px;
}

.bedview-vitals {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border-top: 1px solid var(--line); margin-top: 4px;
}
.vtile { background: #080d12; padding: 5px 8px 6px; display: flex; flex-direction: column; min-width: 0; }
.vt-label { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.vt-num { font-family: var(--font-mono); font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; color: var(--text); }
.vt-unit { font-size: 9px; color: var(--muted); font-family: var(--font-mono); }
.vtile.derived .vt-num { font-size: 15px; color: #9fb4c7; }

/* ---- 体征分级 ----
   数值本身是什么颜色不重要，"哪一格在报警"才是床旁要一眼看出来的。
   所以分级做成整块的变化：左侧色条 + 底色 + 边框 + 数字颜色一起走，
   而不是只把数字改成红色（一格一格的深色底上，红字并不跳）。
   危急值再加一层缓慢脉动——静止的红色看久了会被当成常态。 */
.vtile { position: relative; border-left: 3px solid transparent; }
.vtile.ok .vt-num { color: var(--text); }
.vtile.derived.ok .vt-num { color: #9fb4c7; }
.vtile.ok { border-left-color: #1b2b38; }

.vtile.warn { background: linear-gradient(180deg, #1c1608 0%, #100d06 100%); border-left-color: #d99a2b; }
.vtile.warn .vt-num { color: #ffb03a; }
.vtile.warn .vt-label, .vtile.warn .vt-unit { color: #9c8046; }

.vtile.crit { background: linear-gradient(180deg, #2a0f12 0%, #150709 100%); border-left-color: var(--err); }
.vtile.crit .vt-num { color: #ff6b6b; }
.vtile.crit .vt-label, .vtile.crit .vt-unit { color: #b8777c; }
.vtile.crit::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(255, 95, 95, .55); animation: vitalPulse 1.5s ease-in-out infinite;
}
@keyframes vitalPulse {
  0%, 100% { opacity: .18; }
  50% { opacity: .75; }
}
@media (prefers-reduced-motion: reduce) {
  .vtile.crit::after { animation: none; opacity: .5; }
}

/* ---- 床旁结论条 ----
   压在床头卡下方：先看"这病人现在什么状态"，再看具体数字。
   放在体征面板里会变成"看完数字才知道结论"，顺序反了。 */
.bedview-alert {
  margin-top: 6px; padding: 5px 8px; border-radius: 4px;
  display: flex; flex-direction: column; gap: 3px; font-size: 12px;
}
.bedview-alert .ba-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bedview-alert .ba-mark { font-size: 12px; line-height: 1; }
.bedview-alert .ba-text { font-weight: 700; letter-spacing: .5px; }
.bedview-alert .ba-why { font-family: var(--font-mono); font-size: 10.5px; opacity: .85; }

.bedview-alert.crit { background: rgba(120, 20, 26, .42); border: 1px solid #7a2626; }
.bedview-alert.crit .ba-mark, .bedview-alert.crit .ba-text { color: #ff7b7b; }
.bedview-alert.crit .ba-why { color: #e0a0a4; }

.bedview-alert.warn { background: rgba(110, 76, 12, .38); border: 1px solid #6d5518; }
.bedview-alert.warn .ba-mark, .bedview-alert.warn .ba-text { color: var(--warn); }
.bedview-alert.warn .ba-why { color: #c4a76a; }

.bedview-alert.calm {
  background: rgba(20, 52, 40, .34); border: 1px solid #1f5c42;
  color: #6fdcab; font-size: 11.5px;
}

/* ---- 床头卡上的处置窗口倒计时 ---- */
.hud-window {
  margin-top: 6px; display: flex; flex-direction: column; gap: 3px;
  padding: 4px 7px; border-radius: 4px; background: rgba(10, 20, 30, .72);
  border: 1px solid #22384c;
}
.hud-window .hw-label { font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.hud-window .hw-val { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.hud-window .hw-bar { height: 3px; border-radius: 2px; background: #16232e; overflow: hidden; }
.hud-window .hw-fill { display: block; height: 100%; background: #3f9c7a; transition: width .3s linear; }
.hud-window.ok { border-color: #1f5c42; }
.hud-window.ok .hw-val { color: #6fdcab; }
.hud-window.warn { border-color: #6d5518; background: rgba(40, 30, 8, .66); }
.hud-window.warn .hw-val { color: var(--warn); }
.hud-window.warn .hw-fill { background: var(--warn); }
.hud-window.crit { border-color: #7a2626; background: rgba(58, 14, 18, .62); }
.hud-window.crit .hw-val { color: #ff7b7b; }
.hud-window.crit .hw-fill { background: var(--err); }
.hud-window.done { border-color: #2a4a63; }
.hud-window.done .hw-val { color: #86b9db; }

.bedview-window { border-top: 1px solid var(--line); padding: 6px 9px 8px; display: flex; flex-direction: column; gap: 5px; }
.bw-row { display: flex; flex-direction: column; gap: 1px; font-size: 11px; }
.bw-label { color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.bw-val { color: var(--text); font-family: var(--font-mono); }
.bw-hint { color: var(--muted); font-size: 10px; line-height: 1.45; }
.bw-row.warn .bw-val { color: var(--warn); }
.bw-row.bad .bw-val { color: var(--err); }
.bw-row.risk .bw-val { color: #ff9e7a; }

/* ==========================================================================
   执业工作台（医生线 / 护士线）
   ========================================================================== */

.pw { display: flex; flex-direction: column; gap: 12px; }
.pw-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--line); background: var(--panel-2); padding: 10px 16px;
}
.pw-head-title { font-size: 15px; letter-spacing: 1px; }
.pw-head-title span { color: var(--muted); font-size: 12px; margin-left: 8px; letter-spacing: 0; }
.pw-head-metrics { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.pw-metric { display: flex; flex-direction: column; }
.pw-metric-l { font-size: 10px; color: var(--muted); letter-spacing: 1px; }
.pw-metric-v { font-family: var(--font-mono); font-size: 15px; color: var(--text); }
.pw-metric-v.bad { color: var(--err); }
.pw-metric-v.warn { color: var(--warn); }
.pw-metric-v.ok { color: var(--ok); }

/* 工作区标签页 */
.pw-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.pw-tab {
  background: #131b24; border: 1px solid var(--line); border-bottom: none;
  color: var(--text-2); padding: 7px 15px; cursor: pointer; font-size: 13px;
  position: relative; top: 1px;
}
.pw-tab:hover { background: #1a2530; color: var(--text); }
.pw-tab.active { background: var(--panel); color: #fff; border-color: var(--line-2); border-bottom: 1px solid var(--panel); }
.pw-tab .badge {
  display: inline-block; margin-left: 6px; background: var(--accent); color: #04121c;
  font-size: 10px; padding: 0 5px; border-radius: 8px; font-family: var(--font-mono);
}
.pw-tab .badge.err { background: var(--err); color: #fff; }
.pw-tab .badge.ok { background: var(--ok); color: #04121c; }
.pw-body { border: 1px solid var(--line); background: var(--panel); padding: 16px; min-height: 260px; }

.pw-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pw-block { border: 1px solid var(--line); background: var(--panel-2); padding: 12px 14px; }
.pw-block-t {
  font-size: 12.5px; color: var(--accent-2); letter-spacing: 1px; margin-bottom: 8px;
  border-left: 3px solid var(--accent); padding-left: 8px;
}
.pw-row { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; margin-bottom: 5px; }
.pw-row-k { color: var(--muted); flex: 0 0 72px; font-size: 11.5px; }
.pw-row-v { color: var(--text); flex: 1; line-height: 1.7; }
.pw-list { display: flex; flex-direction: column; gap: 6px; }
.pw-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  border: 1px solid var(--line); background: #131b24; font-size: 12.5px;
}
.pw-item:hover { border-color: var(--line-2); background: #17212c; }
.pw-item.sel { border-color: var(--accent); background: #14283a; }
.pw-item.off { opacity: .48; }
.pw-item-t { flex: 1; min-width: 0; }
.pw-item-sub { font-size: 11px; color: var(--muted); }
.pw-item-act { flex: 0 0 auto; display: flex; gap: 6px; }
/* 职业发展页：条件达标记绿，未达标记灰，一眼看出还差什么 */
.pw-item.ok { border-left: 3px solid #1f5c42; }
.pw-item.ok .pw-item-sub { color: #6fdcab; }
.pw-item.waiting { border-left: 3px solid #7a5a1e; }
.pw-item.waiting .pw-item-sub { color: var(--warn); }
.pw-block-sub { font-size: 10.5px; color: var(--muted); letter-spacing: 0; margin-left: 8px; font-weight: 400; }

/* 病区实时报警板：报警是同时响的，所以按"先救谁"排序，而不是按床号 */
.alarm-board { border: 1px solid var(--line-2); background: #101822; margin-bottom: 8px; }
.alarm-board.urgent { border-color: #7a2626; background: #1b1013; }
.alarm-board.clear { border-style: dashed; }
.alarm-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 9px; border-bottom: 1px solid var(--line);
}
.alarm-title { font-size: 11px; letter-spacing: 1px; color: var(--accent-2); }
.alarm-count { font-size: 10.5px; color: var(--muted); }
.alarm-count.warn { color: var(--warn); }
.alarm-count.bad { color: #ff8d7a; }
.alarm-count.ok { color: #6fdcab; }
.alarm-list { max-height: 190px; overflow-y: auto; }
.alarm-row {
  display: grid; grid-template-columns: 34px 52px 1fr; gap: 6px; align-items: baseline;
  padding: 5px 9px; font-size: 11.5px; cursor: pointer; border-left: 3px solid transparent;
}
.alarm-row:hover { background: #17212c; }
.alarm-row.sel { background: #14283a; }
.alarm-row.lv3 { border-left-color: #a83232; color: #ffb3a6; }
.alarm-row.lv2 { border-left-color: #a87c1f; color: #e9cf86; }
.alarm-row.lv1 { border-left-color: var(--line-2); color: var(--text-2); }
.alarm-bed { color: var(--muted); font-size: 10.5px; }
.alarm-who { color: var(--text-2); }
.alarm-text { color: inherit; }
.alarm-more { padding: 5px 9px; font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line); }
.pw-empty { color: var(--muted); font-size: 12.5px; padding: 14px 0; text-align: center; }

.pw-cat { margin-bottom: 14px; }
.pw-cat-t { font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-bottom: 6px; }
.pw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-chip {
  border: 1px solid var(--line-2); background: #131b24; color: var(--text-2);
  padding: 5px 11px; font-size: 12px; cursor: pointer;
}
.pw-chip:hover { border-color: var(--accent); color: #fff; }
.pw-chip.on { background: var(--accent); border-color: var(--accent); color: #04121c; font-weight: 700; }
.pw-chip:disabled { opacity: .4; cursor: not-allowed; }

/* 生命体征条 */
.vsigns { display: flex; gap: 8px; flex-wrap: wrap; }
.vsign { border: 1px solid var(--line); background: #0d141b; padding: 5px 10px; font-family: var(--font-mono); font-size: 12px; }
.vsign b { color: var(--accent-2); font-weight: 400; font-size: 10px; margin-right: 5px; }

/* 诊断排序列表 */
.dx-rank { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.dx-slot {
  display: flex; align-items: center; gap: 9px; border: 1px dashed var(--line-2);
  padding: 6px 10px; font-size: 12.5px; color: var(--muted); min-height: 34px;
}
.dx-slot.filled { border-style: solid; color: var(--text); background: #14202b; }
.dx-slot-n {
  width: 20px; height: 20px; flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--text-2); font-family: var(--font-mono); font-size: 11px;
}
.dx-slot.filled .dx-slot-n { background: var(--accent); color: #04121c; }

/* 医嘱核对结果 */
.rx-out { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.rx-line { padding: 7px 11px; font-size: 12.5px; border-left: 3px solid var(--line-2); background: #131b24; }
.rx-line.err { border-left-color: var(--err); background: #201212; color: #ffb2a5; }
.rx-line.warn { border-left-color: var(--warn); background: #1e1a0f; color: #f0d79a; }
.rx-line.note { border-left-color: var(--accent); background: #101d28; color: #9dc8e6; }
.rx-line.ok { border-left-color: var(--ok); background: #0f1d18; color: #8fdcb6; }

/* 左栏患者列表 */
.plist { display: flex; flex-direction: column; gap: 5px; }
.pcard {
  border: 1px solid var(--line); background: var(--panel-2); padding: 7px 10px;
  cursor: pointer; position: relative;
}
.pcard:hover { border-color: var(--line-2); background: #1a2430; }
.pcard.sel { border-color: var(--accent); background: #15293a; }
.pcard.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.pcard-top { display: flex; align-items: baseline; gap: 7px; }
.pcard-bed { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-2); }
.pcard-name { font-size: 13px; color: var(--text); }
.pcard-sex { font-size: 11px; color: var(--muted); }
.pcard-cc { font-size: 11.5px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-flags { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.pflag { font-size: 9.5px; padding: 0 5px; border: 1px solid var(--line-2); color: var(--muted); }
.pflag.critical { border-color: #7a2626; color: #ff8d7a; background: #2a1414; }
.pflag.watch { border-color: #7a5a1e; color: var(--warn); }
.pflag.done { border-color: #1f5c42; color: #6fdcab; }
.pflag.dead { border-color: #5a2030; color: #ff7d7d; background: #26090f; }
.pflag.open { border-color: var(--accent); color: var(--accent-2); }

.plist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.plist-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* 报告查看器 */
.rpv { max-height: 74vh; overflow: auto; background: #0b1117; padding: 10px; }
.rpv-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ============================== 响应式 ============================== */

@media (max-width: 1180px) {
  .v-main { grid-template-columns: 260px minmax(0, 1fr); }
  .v-right { display: none; }
  .bedview { grid-template-columns: minmax(0, 1fr) 236px; }
}
@media (max-width: 860px) {
  .v-main { grid-template-columns: 1fr; }
  .v-left, .v-right { display: none; }
  .archive, .reg { grid-template-columns: 1fr; }
  .boot-title { font-size: 32px; letter-spacing: 6px; }
  .v-top { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 12px; }
  .v-top-right { width: 100%; }
  .v-status { flex-wrap: wrap; gap: 12px; }
  .bedview, .bedview.compact { grid-template-columns: 1fr; }
  /* 舞台根元素的类名是 `.bedview.compact`（见 bedView.js `h('.bedview' + (opts.compact?'.compact':''))`），
     所以上面这条必须带上 `.compact`。只写 `.bedview` 是**死代码**——它的特异度
     0,1,0 拼不过 `.bedview.compact` 的 0,2,0，媒体查询再靠后也没用。
     这个坑原来的表现就是"平板竖屏下病床和监护挤成两栏、监护里的体征被压到要滚动"。
     下面这条 height 也同理：`.pw-stage .bedview{height:336px}` 在文件更靠后，
     只能靠再加一层类名（0,3,0）压过去；固定高度不给 auto 的话，
     堆叠后的监护面板会被 336px 的容器裁掉。 */
  .pw-stage .bedview.compact { height: auto; }
  .pw-stage .bedview-stage { height: 34vh; min-height: 218px; }
  .bedview-panel { border-left: none; border-top: 1px solid var(--line); }
  .bedview-hud { left: 52px; max-width: calc(100% - 116px); }
}

/* ==========================================================================
   执业工作台 · 补全（practiceConsole / 医生线 / 护士线）
   ========================================================================== */

/* 床旁区：把 3D 视图限制在固定高度，避免把下面的工作区顶到屏幕之外 */
.pw-stage { border: 1px solid var(--line); background: var(--panel); }
.pw-stage .bedview { height: 336px; border: none; }
.pw-stage .bedview-stage { min-height: 0; }
.pw-stage .bedview-panel { overflow-y: auto; }
.pw-stage .bedview-vitals { padding: 6px; gap: 4px; }

.pw-work { display: flex; flex-direction: column; gap: 10px; }

/* 提示条：每次操作后把"花了多少分钟、发生了什么"钉在工作台上方 */
.pw-msg {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--panel-2); padding: 7px 12px; min-height: 34px;
}
.pw-msg-at { font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.pw-msg-line { font-size: 12.5px; color: var(--text); }
.pw-msg-line.ok { color: #8fdcb6; }
.pw-msg-line.warn { color: var(--warn); }
.pw-msg-line.err { color: #ff8d7a; }
.pw-msg-line.note { color: var(--text-2); }
.pw-msg-prev { font-size: 10.5px; color: var(--muted); margin-left: auto; max-width: 60%; }

.pw-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; align-items: center; }

/* 检查申请单 / 选药对话框内的合计栏 */
.pw-pick-info { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.pw-pick-line { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); margin-bottom: 4px; }
.pw-pick-line b { color: var(--accent-2); }
.pw-pick-line.muted { color: var(--muted); font-size: 11.5px; }
.pw-pick-warn { color: var(--warn); }

/* 报告正文容器 */
.rpv-host { padding: 0; }
.pw-rep-notice {
  border-left: 3px solid var(--accent); background: #121b24; color: var(--text-2);
  font-size: 12.5px; line-height: 1.8; padding: 9px 13px; margin-bottom: 12px;
}
.rpv .rp-paper { margin: 0 auto; }

/* 诊断排序里的候选"加入"按钮 */
.pw-add {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #04121c; font-weight: 700; font-size: 13px;
}
.pw-item { cursor: default; }
.pw-item.clickable { cursor: pointer; }
.pw-item.clickable:hover { border-color: var(--accent); background: #172a3a; }

/* 小按钮（诊断排序的上移/下移/移除） */
.pw-mini {
  width: 24px; height: 24px; flex: 0 0 24px; background: #131b24; border: 1px solid var(--line-2);
  color: var(--text-2); font-size: 12px; cursor: pointer; line-height: 1;
}
.pw-mini:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
.pw-mini:disabled { opacity: .35; cursor: not-allowed; }
.pw-mini.danger:hover { border-color: var(--err); color: #ff8d7a; }

/* 长期 / 临时 医嘱切换 */
.pw-seg { display: flex; }
.pw-seg-b {
  flex: 1; background: #0f161d; border: 1px solid var(--line-2); color: var(--muted);
  font-size: 11.5px; padding: 4px 0; cursor: pointer;
}
.pw-seg-b + .pw-seg-b { border-left: none; }
.pw-seg-b.on { background: var(--accent); border-color: var(--accent); color: #04121c; font-weight: 700; }

/* 输入控件 */
.pw-in, .pw-sel {
  width: 100%; box-sizing: border-box; background: #0d141b; border: 1px solid var(--line-2);
  color: var(--text); padding: 5px 7px; font-size: 12px; font-family: var(--font-mono);
}
.pw-in:focus, .pw-sel:focus { outline: none; border-color: var(--accent); }
.pw-sel { font-family: inherit; }
.pw-chk-wrap { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); cursor: pointer; }
.pw-chk { accent-color: var(--accent); cursor: pointer; }

/* 处方 / 医嘱执行单的网格行 */
.pw-rx-list { display: flex; flex-direction: column; gap: 5px; }
.pw-rxrow {
  display: grid; align-items: center; gap: 7px;
  grid-template-columns: minmax(140px, 1.5fr) 76px 78px 108px 74px 62px auto;
  padding: 7px 10px; border: 1px solid var(--line); background: #131b24; font-size: 12.5px;
}
.pw-rxrow.head {
  background: transparent; border: none; color: var(--muted); font-size: 11px;
  letter-spacing: 1px; padding: 0 10px 4px;
}
.pw-rxrow.off { opacity: .55; }
.pw-rxrow .pw-item-act { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

/* 交班 / 复核弹窗里的表格容器 */
.exam-table-wrap { overflow-x: auto; }

/* ---------------- 交班提问 ---------------- */
/* 一题一屏。三个选项做成整块的按钮而不是单选圆点：床前被追问时是"说一个
   答案"，不是"打一个勾"，点击区域大也更像在答话。 */
.hq { display: flex; flex-direction: column; gap: 10px; }
.hq-bed {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-2);
  letter-spacing: 1px; border-left: 3px solid var(--accent); padding-left: 8px;
}
.hq-q { font-size: 15px; line-height: 1.5; color: #eaf2fa; }
.hq-opts { display: flex; flex-direction: column; gap: 6px; }
.hq-opt {
  text-align: left; background: #0f161d; border: 1px solid var(--line-2);
  color: var(--text-2); padding: 10px 13px; cursor: pointer; font-size: 13.5px;
  font-family: inherit; line-height: 1.45;
}
.hq-opt:hover { border-color: var(--accent); color: #fff; background: #16222c; }
.hq-opt.on { border-color: var(--accent); background: #16303f; color: #fff; }

.hq-result .hq-recap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.hq-recap-item {
  border-left: 3px solid var(--line-2); padding: 7px 10px; background: #0c1218;
}
.hq-recap-item.ok { border-left-color: var(--ok); }
.hq-recap-item.bad { border-left-color: var(--err); }
.hq-recap-q { font-size: 13px; color: var(--text); margin-bottom: 3px; }
.hq-recap-line { font-size: 12.5px; color: var(--text-2); font-family: var(--font-mono); }
.hq-recap-line.ok { color: var(--ok); }
.hq-recap-line.bad { color: var(--err); }
.hq-recap-why { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.5; }

/* ---------------- 查房 ---------------- */
/* 三步渐进展开（听交班 → 判读 → 处置），所以每一块之间用虚线分隔，
   让"现在走到第几步"这件事在版面上就看得见。
   类名前缀用 wr-：rw- 已经被通用的 .rw-note 占掉了，混用会让
   .rw-note 的样式意外落到查房块的元素上。 */
.wr-vitals {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px; margin: 2px 0 9px;
}
.wr-v {
  border: 1px solid var(--line-2); background: #0c1218; padding: 5px 7px;
  border-left: 3px solid transparent;
}
.wr-v-l { font-size: 10px; color: var(--muted); letter-spacing: .4px; }
.wr-v-n {
  display: block; font-family: var(--font-mono); font-size: 19px;
  color: var(--text); line-height: 1.15; letter-spacing: -0.6px;
}
.wr-v-u { font-size: 9.5px; color: var(--muted); }
.wr-v.up { border-left-color: #d99a2b; }
.wr-v.up .wr-v-n { color: #ffb03a; }
.wr-v.down { border-left-color: #4a7fb5; }
.wr-v.down .wr-v-n { color: #79b0e0; }

.wr-step-t {
  display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: #dbe7f2;
  margin: 13px 0 7px; border-top: 1px dashed var(--line-2); padding-top: 11px;
}
.wr-step-t b {
  font-size: 10.5px; letter-spacing: 1px; color: var(--accent-2); font-weight: 600;
}
.wr-speak {
  font-size: 12.5px; line-height: 1.8; color: var(--text-2);
  background: #0b1117; border-left: 3px solid var(--accent); padding: 8px 11px;
}
.wr-q {
  font-size: 13.5px; line-height: 1.65; color: #eaf2fa; margin: 9px 0;
  font-family: var(--font-mono);
}
.wr-opts { display: flex; flex-direction: column; gap: 6px; }
.wr-opt {
  display: flex; align-items: flex-start; gap: 9px; text-align: left;
  background: #0f161d; border: 1px solid var(--line-2); color: var(--text-2);
  padding: 9px 12px; cursor: pointer; font-family: inherit; font-size: 13.5px;
  line-height: 1.5;
}
.wr-opt:hover { border-color: var(--accent); color: #fff; background: #16222c; }
.wr-opt.locked, .wr-opt.locked:hover {
  cursor: default; border-color: var(--line-2); color: var(--text-2); background: #0f161d;
}
.wr-opt.ok, .wr-opt.ok:hover {
  border-color: var(--ok); background: #0f2418; color: #cdf0dc;
}
.wr-opt.bad, .wr-opt.bad:hover {
  border-color: var(--err); background: #2a0f12; color: #ffd6d6;
}
.wr-opt-lv {
  flex: none; width: 20px; height: 20px; line-height: 19px; text-align: center;
  font-size: 10.5px; border: 1px solid var(--line-2); color: var(--muted);
}
.wr-opt-lv.crit { border-color: #7a2626; color: #ff9b8b; background: #2a1414; }
.wr-opt-lv.warn { border-color: #6d5518; color: var(--warn); background: #241d08; }
.wr-opt-lv.ok { border-color: #1f5c42; color: #6fdcab; background: #0e2018; }

.wr-judge { margin-top: 9px; padding: 9px 11px; border-left: 3px solid var(--line-2); background: #0c1218; }
.wr-judge.ok { border-left-color: var(--ok); }
.wr-judge.bad { border-left-color: var(--err); }
.wr-judge-h { font-size: 13px; color: #eaf2fa; line-height: 1.65; }
.wr-judge.ok .wr-judge-h { color: #7fe0b2; }
.wr-judge.bad .wr-judge-h { color: #ff8d8d; }
.wr-judge-w { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.65; }
.wr-judge-x { font-size: 12px; color: #c9946a; margin-top: 4px; line-height: 1.65; }

.wr-done { border-left: 3px solid var(--line-2); background: #0c1218; padding: 10px 12px; }
.wr-done.ok { border-left-color: var(--ok); }
.wr-done.bad { border-left-color: var(--warn); }
.wr-done-t { font-size: 13.5px; color: #eaf2fa; margin-bottom: 6px; }
.wr-line { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.8; }
.wr-line .wr-k { flex: none; width: 34px; color: var(--muted); }
.wr-line .wr-val { color: var(--text-2); }

/* ---------------- 病历书写 ----------------
   与查房共用 wr- 体系（同一类"渐进式多段作答"的交互），只补几处：
   规范提示条、多选勾选框、选项后的规范解释。 */
.wr-hint {
  font-size: 11.5px; line-height: 1.7; color: var(--muted);
  border-left: 2px solid var(--line-2); padding-left: 9px; margin: -3px 0 9px;
}
/* 多选项的勾选方块：未选空框、选中打勾。用边框色 + 字形双重区分，
   只靠颜色会让色觉障碍的玩家分不清选没选。 */
.wr-opt-lv.on { border-color: var(--accent); color: var(--accent-2); background: #122232; }
.wr-opt-lv.bad { border-color: #7a2626; color: #ff9b8b; background: #2a1414; }
/* 多选草稿态：已勾但还没提交，所以不能沿用 .ok/.bad 的成败色 */
.wr-opt.picked {
  border-color: var(--accent); background: #16222c; color: #eaf2fa;
}
.wr-opt.picked:hover { border-color: var(--accent-2); }
/* 选项后面那句"为什么不规范"——只在作答后才出现，长度可能两行 */
.wr-opt-w {
  flex: 1 0 100%; font-size: 11.5px; line-height: 1.7;
  color: var(--muted); margin-top: 3px;
  border-top: 1px dashed var(--line-2); padding-top: 4px;
}
.wr-opt.ok .wr-opt-w { color: #86c9a8; }
.wr-opt.bad .wr-opt-w { color: #d99a9a; }
/* 多选项内是一列，勾选框 + 正文两列，解释独占一整行 */
.wr-opts.multi .wr-opt { flex-wrap: wrap; }
.wr-opts.multi .wr-opt-t { flex: 1 1 0; }
.wr-opts.multi .wr-opt-lv { font-family: var(--font-mono); }

/* ---------------- 打断条（护士催促 / 上级查房） ----------------
   它横在所有标签页之上，所以视觉上必须"跳出来"但又不能盖住正文：
   用琥珀色的左边框 + 略亮的底色，比正文强、比报警弱。
   不用模态框是刻意的——现实里没人真的拦住你，你只是在为拖延付账。 */
.pw-itx { margin: 0 0 9px; }
.pw-itx-idle {
  font-size: 11px; color: var(--muted); line-height: 1.6;
  border-left: 2px solid var(--line-2); padding: 3px 0 3px 9px;
}
.pw-itx-card {
  border: 1px solid var(--line-2); border-left: 3px solid #b8862b;
  background: #15130c; padding: 9px 12px;
}
.pw-itx-card.hot { border-left-color: var(--err); background: #1b1113; }
.pw-itx-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pw-itx-tag {
  flex: none; font-size: 10px; letter-spacing: 1px; padding: 1px 6px;
  border: 1px solid #7a6220; color: #e0b459; background: #241d08;
}
.pw-itx-card.hot .pw-itx-tag { border-color: #7a2626; color: #ff9b8b; background: #2a1414; }
.pw-itx-title { font-size: 13.5px; color: #f2e6cd; }
.pw-itx-wait { font-size: 11px; color: var(--muted); margin-left: auto; }
.pw-itx-text { font-size: 12.5px; line-height: 1.75; color: var(--text-2); margin: 7px 0 8px; }
.pw-itx-opts { display: flex; flex-direction: column; gap: 5px; }
.pw-itx-opt {
  text-align: left; background: #1b1810; border: 1px solid var(--line-2);
  color: #e8dcc4; padding: 7px 11px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; line-height: 1.5;
}
.pw-itx-opt:hover { border-color: #b8862b; background: #26200f; color: #fff; }

.rw-note {
  font-size: 12px; color: var(--muted); line-height: 1.85; margin-top: 8px;
  border-left: 2px solid var(--line-2); padding-left: 9px;
}

/* 紧凑提示盒（嵌在面板里时不要那么大间隔） */
.tip-box.compact { margin-top: 10px; padding: 8px 11px; }
.tip-box.compact .tip-c { font-size: 11.5px; line-height: 1.75; }

/* 候诊中的病人 */
.pflag.waiting { border-color: var(--line-2); color: var(--muted); }
.hud-tag.status.waiting { border-color: var(--line-2); color: var(--muted); }

/* 左栏患者列表底部按钮 */
.plist-head .v-btn { padding: 4px 9px; font-size: 11.5px; }

@media (max-width: 1400px) {
  .pw-rxrow { grid-template-columns: minmax(120px, 1.4fr) 70px 70px 96px 66px 56px auto; }
}
@media (max-width: 1180px) {
  .pw-grid2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   抢救台（ACLS）
   抢救是全作唯一一处"秒级"界面。配色刻意从整套 HIS 蓝灰里跳出来，
   改成"监护仪 + 抢救车"的红黑体系——让玩家一眼就知道自己不在普通诊疗里了。
   ========================================================================== */

.pcard.rescuing { border-color: #8a2b2b; background: #221216; }
.pcard.rescuing::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #e0644f; animation: rcPulse 1.1s ease-in-out infinite;
}
.pflag.rescue { border-color: #7a2626; color: #ff8d7a; background: #2a1414; }

@keyframes rcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.alarm-row { grid-template-columns: 34px 52px 1fr auto; }
.alarm-go {
  border: 1px solid #8a2b2b; background: #2a1414; color: #ff8d7a;
  font-size: 10.5px; padding: 1px 8px; cursor: pointer; white-space: nowrap;
}
.alarm-go:hover { background: #3d1a1a; color: #ffb3a6; }

.rc { display: flex; flex-direction: column; gap: 11px; }
.rc-top { display: grid; grid-template-columns: 340px 1fr; gap: 12px; }

.rc-monitor { border: 1px solid #4a1c1c; background: #160407; padding: 6px; }
.rc-ecg { display: block; width: 100%; height: 76px; }
.rc-mon-row { display: flex; gap: 7px; align-items: baseline; padding: 5px 2px 1px; }
.rc-mon-k { font-size: 10.5px; color: #a87373; letter-spacing: 1px; }
.rc-mon-v { font-size: 12.5px; color: #ffb3a6; }
.rc-mon-v.bad { color: #ff8d7a; font-weight: 600; }

.rc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rc-stat { border: 1px solid var(--line); background: #1a1416; padding: 7px 9px; }
.rc-stat-k { font-size: 10.5px; color: #a87373; letter-spacing: 1px; }
.rc-stat-v { font-family: var(--font-mono); font-size: 15px; color: #ffd9d2; margin: 1px 0 5px; }
.rc-stat-sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.rc-bar { height: 5px; background: #2a1a1a; overflow: hidden; }
.rc-bar-fill { height: 100%; background: #6b4040; transition: width .18s linear; }
.rc-bar-fill.ok { background: var(--ok); }
.rc-bar-fill.warn { background: var(--warn); }
.rc-bar-fill.bad { background: var(--err); }

.rc-hints { display: flex; flex-direction: column; gap: 4px; }
.rc-hint { font-size: 11.5px; padding: 4px 9px; border-left: 3px solid var(--line-2); color: var(--text-2); background: #161d25; }
.rc-hint.bad { border-left-color: var(--err); color: #ffb3a6; background: #1f1214; }
.rc-hint.warn { border-left-color: var(--warn); color: #e9cf86; background: #1d1a12; }

.rc-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.rc-act-group { border: 1px solid var(--line); background: #171d25; padding: 7px 9px; }
.rc-act-t { font-size: 10.5px; color: #a87373; letter-spacing: 1px; margin-bottom: 6px; }
.rc-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-btns .v-btn { padding: 5px 11px; font-size: 12px; }

.rc-logbox { border: 1px solid var(--line); background: #12181f; }
.rc-log-t { font-size: 10.5px; color: var(--muted); letter-spacing: 1px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.rc-log { max-height: 190px; overflow-y: auto; padding: 5px 0; }
.rc-log-row { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 3px 10px; font-size: 11.5px; color: var(--text-2); }
.rc-log-row.start { color: #ffb3a6; }
.rc-log-tm { font-family: var(--font-mono); font-size: 10.5px; color: #a87373; }
.rc-log-tx { line-height: 1.7; }

/* 抢救记录单（复用报告纸 .rp-paper，只补表格与署名） */
.rc-rec-wrap { max-height: 62vh; overflow-y: auto; }
.rc-rec-wrap .rp-paper { background: #f5f2ea; color: #23221f; padding: 20px 24px; }
.rc-rec-wrap .rp-title { font-size: 19px; letter-spacing: 3px; text-align: center; color: #23221f; }
.rc-rec-wrap .rp-sub { text-align: center; font-size: 12px; color: #55524b; }
.rc-rec-wrap .rp-hr { border-top: 1px solid #c9c3b6; margin: 10px 0; }
.rc-rec-wrap .rp-h { font-size: 13px; font-weight: 600; margin: 12px 0 6px; color: #23221f; }
.rc-rec-wrap .rp-p { font-size: 12.5px; line-height: 1.9; color: #33302b; margin: 0; }
.rc-rec-wrap .rp-kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 18px; }
.rc-rec-wrap .rp-kvrow { display: flex; gap: 8px; font-size: 12px; padding: 1px 0; }
.rc-rec-wrap .rp-kvk { color: #6b665d; flex: 0 0 78px; }
.rc-rec-wrap .rp-kvv { color: #23221f; }
.rc-rec-wrap .rp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rc-rec-wrap .rp-table th {
  text-align: left; font-weight: 600; color: #55524b; border-bottom: 1px solid #b9b3a6;
  padding: 4px 6px; font-size: 11.5px;
}
.rc-rec-wrap .rp-table td { border-bottom: 1px solid #ded8cb; padding: 4px 6px; vertical-align: top; color: #33302b; }
.rc-rec-wrap .rp-table td.rp-t { font-family: var(--font-mono); font-size: 11px; color: #6b665d; white-space: nowrap; }
.rc-rec-wrap .rp-table td.rp-by { white-space: nowrap; color: #55524b; }
.rc-rec-wrap .rp-list { display: flex; flex-direction: column; gap: 3px; }
.rc-rec-wrap .rp-list-item { font-size: 12px; padding: 3px 8px; border-left: 3px solid #c9c3b6; }
.rc-rec-wrap .rp-list-item.bad { border-left-color: #b4453a; color: #8a3128; background: #f6eae8; }
.rc-rec-wrap .rp-foot { display: flex; flex-wrap: wrap; gap: 22px; font-size: 12px; color: #55524b; margin-top: 12px; }

@media (max-width: 1180px) {
  .rc-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   床旁导航（切换病人）
   --------------------------------------------------------------------------
   桌面：左右各一枚窄箭头，不挡画面。
   窄屏：这两枚撑成舞台两侧的整条竖栏 —— 手机上一个光秃秃的三角毫无信息量，
   必须把"上一位 / 下一位是谁"写在栏里，用户才敢按。
   ========================================================================== */

.bedview-arrow { display: flex; align-items: center; justify-content: center; }
.bedview-arrow .ba-label,
.bedview-arrow .ba-who,
.bedview-arrow .ba-bed { display: none; }
.bedview-arrow.disabled { opacity: .32; cursor: default; }
.bedview-arrow.disabled:hover {
  background: rgba(12, 20, 28, .72); color: var(--accent-2); border-color: var(--line-2);
}

/* 复位视角：拖过头了不用刷新页面，点一下回正面 */
.bedview-reset {
  position: absolute; right: 10px; bottom: 10px; z-index: 6;
  background: rgba(12, 20, 28, .72); color: var(--text-2);
  border: 1px solid var(--line-2); padding: 3px 9px;
  font-size: 11px; cursor: pointer; backdrop-filter: blur(2px);
  transition: color .15s, border-color .15s;
}
.bedview-reset:hover { color: #fff; border-color: var(--accent); }
.bedview-reset:active { background: var(--accent); color: #04121c; }

/* ==========================================================================
   窄屏 / 手机布局
   --------------------------------------------------------------------------
   手机上的信息优先级只有一条：**中间是病床，两边是导航**。
   桌面那种"左边挂病人列表、右边挂病人详情"的两栏在竖屏里会把病床挤成
   一条缝，所以窄屏下改为：
     ① 舞台 = [左导航栏 · 病床 · 右导航栏]，两侧栏内写明上下一位是谁；
     ② 病人列表落成病床下方一条可横向滑动的床卡带（导航的第二种形式）；
     ③ 监护面板从右侧一栏改为病床下方的一排数字，视图本身占满宽度。
   ========================================================================== */

@media (max-width: 720px) {
  /* ---- 外壳 ---- */
  /* 竖屏第一屏必须直接是病床，而不是先看到一长串病人名单。
     所以把"病床工作台"提到最前、"病人床卡带"落到下面。

     align-items / grid-template-columns 必须显式重置：基础规则里
     `.v-main` 是 `display:grid; align-items:start; grid-template-columns:300px …`。
     只把 display 换成 flex 是不够的 —— flex 纵向布局下 `align-items:start`
     会让子项按 max-content 撑开，于是左栏（含 6 张 162px 床卡）算出 1033px，
     在 492px 视口里横向溢出 549px，被 overflow-x:hidden 裁掉后再也够不着。
     症状是"手机上看不到病人列表"，根因却在这一行。 */
  .v-main {
    display: flex; flex-direction: column; align-items: stretch;
    grid-template-columns: none;
    padding: 8px; gap: 10px;
  }
  .v-left, .v-col { min-width: 0; }
  .v-col { order: 1; }
  .v-left { order: 2; display: block; }
  .v-top {
    padding: 6px 10px 8px; gap: 6px 10px; height: auto; flex-wrap: wrap;
    padding-top: max(6px, env(safe-area-inset-top));
  }
  .v-logo { gap: 8px; }
  .v-logo-mark { width: 30px; height: 30px; font-size: 11px; letter-spacing: 0; }
  .v-logo-name { font-size: 15px; letter-spacing: 0; }
  .v-logo-sub { display: none; }
  .v-top-mid { gap: 10px; margin-left: 0; flex-wrap: wrap; row-gap: 4px; }
  .v-top-right { margin-left: 0; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
  .v-chip { padding: 3px 8px; font-size: 11.5px; }
  .v-icon-btn { padding: 4px 9px; font-size: 11.5px; }
  /* 顶栏的元素必须"要么整块留下、要么整块换行"：一旦被 flex 压扁，
     "住院医师""个人档案"会被挤成竖排单字列，读起来像乱码。 */
  .v-top .v-chip, .v-top .v-icon-btn, .v-top .v-logo { flex: 0 0 auto; white-space: nowrap; }
  .v-stamina { flex: 0 0 auto; white-space: nowrap; }
  .v-stamina-track { width: 60px; }
  .boot-title { font-size: 26px; letter-spacing: 4px; }
  /* 体力 / 心态 / 声望是玩家全程要盯的数字，手机上不能沉到文档最底部
     等滚到底才看见，所以让它常驻底部。
     注意这里只调了内边距与换行，**没有**把 position 改成 fixed：
     基础规则给的是 sticky，而 sticky 自己占布局位置，永远不会盖住内容。
     曾经改成 fixed + `.v-main{padding-bottom:104px}`，结果状态条在窄屏折成
     两行实测 116px，比预留的 104px 高，最后一排病人卡片被永久遮住
     ——滚到底也看不见，因为让位的空间本来就不够。 */
  .v-status {
    padding: 5px 10px; gap: 3px 14px; font-size: 11.5px;
    padding-bottom: max(5px, env(safe-area-inset-bottom));
    /* 排成 2 列网格而不是让它自由换行。
       自由换行时三项（体力 / 心态 / 声望）会折成两行、金钱再占一行，
       常驻条高达 84px —— 而首屏高度正是被它吃掉的，多出来的每一行
       都会把"恶化触发条件"这类信息顶出可视区。
       2×2 之后是 54px，四组数据一个不少。
       用 display:contents 把两个分组"拆开"，让它们的孩子直接参与外层网格，
       这样不用改 JS 里"左组 / 右组"的渲染结构。 */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  /* 履历那一行（"住院医师 · 工龄 3 年 · 论文 0 篇"）在顶栏已经有了，
     手机上留着它会让常驻条再涨一行。 */
  .v-status-left, .v-status-right { display: contents; }
  .v-status-right .v-status-progress { display: none; }
  /* 进度条的标签不能被压窄，否则"体力"两个字会竖着排 */
  .v-bar { flex: 0 0 auto; }
  .v-bar-label { width: auto; min-width: 26px; white-space: nowrap; }
  .v-bar-track { width: 58px; }
  .v-status-money { text-align: right; }

  /* 病人列表 → 横向床卡带 */
  .plist { flex-direction: row; overflow-x: auto; gap: 7px; padding-bottom: 4px; }
  .pcard { flex: 0 0 162px; }
  .pcard-cc { white-space: normal; }

  /* ---- 工作台头与标签页 ---- */
  .pw { gap: 8px; }
  .pw-head { flex-direction: column; align-items: flex-start; gap: 5px; padding: 7px 10px; }
  .pw-head-title { font-size: 14px; }
  .pw-head-title span { display: block; margin-left: 0; font-size: 11.5px; }
  .pw-head-metrics { margin-left: 0; gap: 10px; font-size: 11px; }
  .pw-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pw-tabs::-webkit-scrollbar { display: none; }
  .pw-tab { flex: 0 0 auto; padding: 7px 11px; font-size: 12.5px; }
  .pw-body { padding: 10px; min-height: 0; }

  /* ---- 工作台头部：手机上从三行压到两行 ----
     桌面版这里"标题一行 + 统计两行（标签在上、数字在下）"很舒展；
     手机上这三行要占 120px，等于把病床削掉一大块。统计改成
     **内联标签 + 4 列网格**：七项自然排成 4+3 两行，每格近 90px，
     "病区时钟 0′" 这种最长的组合也放得下。省下的 55px 全给病床。 */
  .pw-head { padding: 6px 10px; gap: 3px 10px; }
  .pw-head-title { font-size: 13.5px; width: 100%; }
  .pw-head-title span { font-size: 11px; margin-left: 6px; }
  .pw-head-metrics {
    margin-left: 0; width: 100%;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px 8px;
  }
  .pw-metric { flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
  .pw-metric-l { font-size: 10px; }
  .pw-metric-v { font-size: 12.5px; }

  /* ---- 床旁：中间病床、两边导航 ---- */
  /* 手机上不再用 grid。桌面版是"病床 + 右侧监护栏"的两列网格，窄屏折成
     一列后 grid 只剩副产品：容器高度一旦被上层的某个高度约束，
     grid 会把两行按比例压缩，超出的部分被 .bedview{overflow:hidden} 切掉——
     症状就是"生命体征只显示了一行三个，呼吸和体温不见了"，
     而 DOM 里七块瓦片齐全、控制台也没有任何报错，很容易被误判成 JS 没渲染。
     单列时用块级排版，高度自然由内容撑开，没有这个问题。 */
  .pw-stage .bedview { display: block; height: auto; }
  /* 42vh 再往上加，病床就会把"心电 + 生命体征"顶出首屏；
     再矮，床上的人就小得看不清。头部和常驻条都瘦身后，这里给到 44vh。 */
  .pw-stage .bedview-stage { height: 44vh; min-height: 278px; }
  /* 注意：canvas 是"替换元素"，给它 width:auto 会退回固有尺寸 300×150，
     left/right 拉不动它（绝对定位 + 左右都非 auto 时，宽度仍取固有值）。
     所以这里必须写死 calc，不能图省事写成 auto —— 之前 3D 视图铺不开、
     右侧导航看着像"消失"，根因就在这一行。 */
  .bedview-gl, .bedview-fallback {
    left: 46px; right: auto; top: 0; bottom: auto;
    width: calc(100% - 92px); height: 100%;
  }

  .bedview-arrow {
    top: 0; bottom: 0; transform: none;
    width: 46px; height: auto; padding: 0;
    flex-direction: column; gap: 3px;
    font-size: 14px;
  }
  .bedview-arrow.left { left: 0; }
  .bedview-arrow.right { right: 0; }
  .bedview-arrow .ba-ico { font-size: 15px; line-height: 1; }
  .bedview-arrow .ba-label,
  .bedview-arrow .ba-who,
  .bedview-arrow .ba-bed { display: block; }
  .bedview-arrow .ba-label { font-size: 9.5px; color: var(--muted); letter-spacing: 1px; }
  .bedview-arrow .ba-who {
    font-size: 11.5px; color: var(--accent-2); letter-spacing: 2px;
    writing-mode: vertical-rl; margin: 2px 0;
  }
  .bedview-arrow .ba-bed { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }

  .bedview-hud {
    left: 52px; right: 52px; top: 8px; max-width: none; padding: 6px 10px;
    /* 半透明底改成"上实下透"的渐变：床头卡内容比桌面版多了一行结论条
       和一行倒计时，整块不透明底板会把病床整个盖住 —— 那就变成
       "看病人得先把卡片读完"。渐变让病床的下半身透出来。 */
    background: linear-gradient(180deg, rgba(8, 14, 20, .95) 0%,
      rgba(8, 14, 20, .88) 70%, rgba(8, 14, 20, .30) 100%);
  }
  .hud-name { font-size: 13.5px; }
  /* 主诉可能很长（"静脉用药后5分钟出现全身皮疹、呼吸困难"），
     最多两行并且随字体缩小，否则会把病床挤没。 */
  .hud-dx {
    font-size: 11px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .bedview-reset { right: 52px; bottom: 8px; }
  .bedview-alert { font-size: 11.5px; }
  .bedview-alert .ba-why { font-size: 10px; }
  .hud-window { margin-top: 4px; padding: 3px 6px; }
  .hud-window .hw-val { font-size: 12px; }

  /* 监护面板：从右侧一栏改为病床下方的一排数字 */
  .bedview-panel { border-left: none; border-top: 1px solid var(--line); }
  /* 桌面版面板是右侧固定高度的一栏，所以基础规则给了 overflow-y:auto
     （内容长了就在面板内部滚）。手机上它已经变成病床下方的一段流式内容，
     高度不再受约束，那条 overflow 仍然生效，就把"生命体征"的第二行
     （呼吸 / 体温）收进了滚动区 —— 面板看着是完整的，少的两格却没有
     任何提示，像渲染丢了一样。这里把它放开。 */
  .pw-stage .bedview-panel { overflow-y: visible; }
  /* 生命体征必须**排成一行**。
     早先折成 3+2 时，第二行的"呼吸 / 体温"落在视口 844px 以下，而底部
     状态条是 sticky 常驻的，正好把它压住 —— 画面看着"少了两格"，
     但 DOM 里七块瓦片齐全、控制台也没有任何报错，极容易误判成 JS 没渲染。
     手机首屏高度是被"病床 + 心电 + 体征 + 常驻状态条"四样瓜分的，
     体征占两行必然溢出。所以宁可把字号降几像素，也要一行放满五个：
     74px 的格子装得下"66/41"这种最宽的数值。 */
  .bedview-vitals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vtile { padding: 3px 5px 4px; }
  .vt-num { font-size: 17px; letter-spacing: -0.8px; }
  .vt-label { font-size: 9.5px; letter-spacing: 0; }
  .vt-unit { font-size: 8.5px; }
  .vtile.derived { display: none; }
  .bedview-ecg-wrap canvas { height: 68px; }
  .bedview-pleth-wrap { display: none; }
  /* 临床时钟只是"累计耗时"，头部统计里已有病区时钟；手机上把它撤掉，
     好让"恶化触发条件 / 超窗后果"这两条决策依据留在首屏内。
     （首屏高度是被 sticky 的底部状态条实打实吃掉一截的，任何一行都要算清。） */
  .bw-clock { display: none; }

  /* 抢救台：单指/双指都在用，按钮排两列就够 */
  .rc-actions { grid-template-columns: 1fr; }
  .rc-logbox { max-height: 190px; }
}

@media (max-width: 420px) {
  /* 体征瓦片的列数交给 .bedview-vitals 的 flex 自适应（见 720 断点），
     这里不再写死列数——写死了第二行就填不满。 */
  .pcard { flex: 0 0 142px; }
  .pw-head-metrics { gap: 9px; font-size: 11px; }
}