/* 小灵 · 内化系统
   配色取丹炉与宣纸：纸底、墨字、丹砂点睛。
   档位与火候各有其色 —— 扫一眼就知道这颗丹能不能信。 */

:root {
  --zhi: #faf8f5;          /* 宣纸 */
  --zhi-2: #f3efe9;
  --mo: #2b2724;           /* 墨 */
  --mo-2: #5d564f;
  --mo-3: #8b837a;
  --dan: #8c3a2e;          /* 丹砂 */
  --dan-ruan: #f6e7e4;
  --jin: #a8791f;          /* 实丹 */
  --qing: #4a6f8a;         /* 半实 */
  --hui: #9a948c;          /* 待补 */
  --wei: #b3352b;          /* 高危 */
  --wei-ruan: #fbeae8;
  --ge: #7d756b;           /* 隔离区 */
  --xian: rgba(90, 82, 72, .18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zhi);
  color: var(--mo);
  font-family: "Songti SC", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 900px; margin: 0 auto; padding: 0 20px 80px; }

/* ── 头 ───────────────────────────── */
header { padding: 44px 0 26px; border-bottom: 1px solid var(--xian); margin-bottom: 28px; }
.h-mark { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.h-zi {
  font-size: 40px; font-weight: 700; letter-spacing: .12em;
  color: var(--dan); line-height: 1;
}
.h-sub { font-size: 13px; color: var(--mo-3); letter-spacing: .18em; }
.h-jue { margin-top: 14px; font-size: 15px; color: var(--mo-2); }
.h-jue b { color: var(--mo); font-weight: 600; }

.stats { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; font-size: 12.5px; color: var(--mo-3); }
.stats b { color: var(--mo); font-size: 16px; font-weight: 600; margin-right: 3px; font-family: ui-monospace, Menlo, monospace; }

/* ── 导航 ─────────────────────────── */
nav { display: flex; gap: 4px; margin-bottom: 26px; border-bottom: 1px solid var(--xian); }
nav button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 16px; font: inherit; font-size: 14px; color: var(--mo-3);
  cursor: pointer; margin-bottom: -1px;
}
nav button:hover { color: var(--mo); }
nav button.on { color: var(--dan); border-bottom-color: var(--dan); font-weight: 600; }

section { display: none; }
section.on { display: block; }

/* ── 丹卡 ─────────────────────────── */
.dan-list { display: flex; flex-direction: column; gap: 12px; }
.dan-card {
  background: #fff; border: 1px solid var(--xian); border-radius: 4px;
  padding: 16px 18px; cursor: pointer; transition: .15s;
  display: grid; grid-template-columns: 60px 1fr; gap: 16px; align-items: start;
}
.dan-card:hover { border-color: var(--mo-3); transform: translateX(2px); }
.dan-card.wei { border-left: 3px solid var(--wei); }

.dc-zi {
  font-size: 34px; font-weight: 700; text-align: center; color: var(--dan);
  line-height: 1.1;
}
.dc-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dc-name { font-size: 15px; font-weight: 600; }
.dc-jue { margin-top: 5px; font-size: 13.5px; color: var(--mo-2); }
.dc-meta { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 2px; letter-spacing: .04em;
  font-family: ui-monospace, Menlo, monospace; white-space: nowrap;
}
.b-shidan { background: #fdf3dd; color: var(--jin); }
.b-banshi { background: #e8eff5; color: var(--qing); }
.b-daibu  { background: #f0efed; color: var(--hui); }
.b-wenhuo { background: var(--zhi-2); color: var(--mo-3); }
.b-wuhuo  { background: var(--dan-ruan); color: var(--dan); }
.b-shicheng { background: #f0ebe0; color: #7a6432; }
.b-jingdian { background: #e9eef2; color: #3f5f7a; }
.b-wei { background: var(--wei-ruan); color: var(--wei); }
.b-ge { background: #eee; color: var(--ge); }

/* ── 三关条 ───────────────────────── */
.guans { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.guan { display: grid; grid-template-columns: 78px 1fr 52px; gap: 9px; align-items: center; font-size: 11.5px; }
.guan-name { color: var(--mo-3); }
.guan-bar { height: 4px; background: var(--zhi-2); border-radius: 2px; overflow: hidden; }
.guan-bar i { display: block; height: 100%; background: var(--qing); border-radius: 2px; }
.guan.guo .guan-bar i { background: var(--jin); }
.guan.buguo .guan-bar i { background: var(--hui); }
.guan-num { text-align: right; color: var(--mo-3); font-family: ui-monospace, Menlo, monospace; }

/* ── 详情 ─────────────────────────── */
.back { background: none; border: none; color: var(--mo-3); cursor: pointer; font: inherit; font-size: 13px; padding: 0 0 16px; }
.back:hover { color: var(--dan); }

.detail-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--xian); }
.detail-h .zi { font-size: 42px; font-weight: 700; color: var(--dan); line-height: 1; }
.detail-h .jue { font-size: 15px; color: var(--mo-2); }

.wei-box {
  background: var(--wei-ruan); border-left: 3px solid var(--wei);
  padding: 14px 18px; margin: 20px 0; border-radius: 0 3px 3px 0;
}
.wei-box .t { font-weight: 700; color: var(--wei); font-size: 14px; margin-bottom: 7px; }
.wei-box ul { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: var(--mo-2); }
.wei-box li { margin-bottom: 3px; }

.blk { margin: 26px 0; }
.blk > h3 {
  font-size: 13px; letter-spacing: .14em; color: var(--mo-3); font-weight: 600;
  margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--xian);
}
.kv { display: grid; grid-template-columns: 76px 1fr; gap: 10px; font-size: 14px; margin-bottom: 9px; }
.kv > .k { color: var(--mo-3); font-size: 12.5px; padding-top: 1px; }
.kv > .v { color: var(--mo); }
.quekou { color: var(--wei); font-size: 13.5px; }

li.item { margin-bottom: 12px; font-size: 13.5px; }
li.item .src { color: var(--mo); }
li.item .rel { color: var(--mo-3); font-size: 12.5px; }
.zhuangtai { color: var(--qing); font-size: 12.5px; }

table.mini { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
table.mini th, table.mini td { border: 1px solid var(--xian); padding: 7px 9px; text-align: left; vertical-align: top; }
table.mini th { background: var(--zhi-2); font-weight: 600; font-size: 12px; color: var(--mo-2); }

/* 对应对 */
.dui { display: flex; flex-direction: column; gap: 7px; }
.dui-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; font-size: 13.5px; }
.dui-l { text-align: right; }
.dui-r { text-align: left; }
.dui-a { color: var(--mo-3); font-size: 11px; font-family: ui-monospace, Menlo, monospace; text-align: center; }
.dui-row.sc { background: #fdf9ef; margin: 0 -8px; padding: 5px 8px; border-radius: 3px; }
.dui-bz { grid-column: 1 / -1; font-size: 12px; color: var(--mo-3); padding-top: 2px; }

/* 隔离区 */
.ge-box { border: 1px dashed var(--ge); border-radius: 3px; padding: 14px 16px; background: #f7f6f4; }
.ge-box .t { font-size: 12.5px; color: var(--ge); margin-bottom: 8px; }
.ge-item { font-size: 13px; padding: 7px 0; border-top: 1px solid var(--xian); }
.ge-item:first-of-type { border-top: none; }
.ge-item .x { color: var(--mo); }
.ge-item .b { color: var(--mo-3); font-size: 12px; }
.ge-item.hw .x { color: var(--wei); }
.ge-locked { font-size: 13px; color: var(--mo-3); text-align: center; padding: 8px 0; }

.switch { display: flex; align-items: center; gap: 9px; margin: 18px 0; font-size: 13px; color: var(--mo-3); }
.switch input { width: 16px; height: 16px; accent-color: var(--dan); cursor: pointer; }

/* ── 一致性检查 ───────────────────── */
.pane { background: #fff; border: 1px solid var(--xian); border-radius: 4px; padding: 18px; margin-bottom: 18px; }
.pane h3 { margin: 0 0 6px; font-size: 15px; }
.pane .desc { font-size: 13px; color: var(--mo-3); margin-bottom: 14px; }
textarea {
  width: 100%; min-height: 92px; border: 1px solid var(--xian); border-radius: 3px;
  padding: 11px; font: inherit; font-size: 13.5px; resize: vertical; background: var(--zhi);
}
textarea:focus { outline: none; border-color: var(--dan); }
button.act {
  background: var(--dan); color: #fff; border: none; border-radius: 3px;
  padding: 9px 20px; font: inherit; font-size: 14px; cursor: pointer; margin-top: 11px;
}
button.act:hover { background: #742f25; }
button.act:disabled { background: var(--mo-3); cursor: default; }

.res { margin-top: 16px; }
.res-item { border-left: 3px solid var(--wei); padding: 9px 0 9px 13px; margin-bottom: 12px; font-size: 13.5px; }
.res-item.ok { border-left-color: #4f8a4f; }
.res-item.hold { border-left-color: var(--jin); }
.res-item .lb { font-size: 11.5px; font-family: ui-monospace, Menlo, monospace; color: var(--mo-3); }
.res-item .sf { color: var(--mo); }
.res-item .sj { color: var(--mo-2); }
.res-item .ts { color: var(--mo-3); font-size: 12.5px; }
.empty { color: #4f8a4f; font-size: 14px; padding: 10px 0; }

/* ── 红线 ─────────────────────────── */
.hx { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--xian); }
.hx-n { font-family: ui-monospace, Menlo, monospace; color: var(--dan); font-size: 13px; min-width: 22px; }
.hx-b { font-weight: 600; font-size: 14px; }
.hx-c { font-size: 13px; color: var(--mo-2); }
.hx-z { font-size: 12.5px; color: var(--mo-3); margin-top: 4px; font-style: italic; }

footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--xian); font-size: 12px; color: var(--mo-3); text-align: center; }

@media (max-width: 620px) {
  .dan-card { grid-template-columns: 44px 1fr; gap: 12px; }
  .dc-zi { font-size: 27px; }
  .h-zi { font-size: 32px; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .dui-row { grid-template-columns: 1fr; gap: 2px; text-align: left; }
  .dui-l, .dui-r, .dui-a { text-align: left; }
}