/* ==========================================================================
   五术同盘 · 一屏多盘
   配色：暗底 + 金线；五行色统一在 :root 里，JS 只加 class，不写死颜色。
   ========================================================================== */

:root {
  --bg: #0e1014;
  --panel: #12141a;
  --card: #171a21;
  --card2: #1d212b;
  --line: #28303c;
  --line2: #333c4a;
  --fg: #dfe4ee;
  --fg2: #b9c2d2;
  --dim: #8791a4;
  --dim2: #626c7e;
  --accent: #c8a45c;
  --accent2: #e0c489;

  /* 五行 */
  --mu: #46a06a;
  --huo: #d4584a;
  --tu: #b08a3e;
  --jin: #c2cfdd;
  --shui: #4483c4;

  /* 状态 */
  --ok: #4fae74;
  --bad: #cf7a70;
  --diff: #cfa445;
  --alert: #e04a4a;

  --r: 7px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 20% -10%, #171c27 0%, var(--bg) 60%);
  color: var(--fg);
  font: 12.5px/1.45 "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

b, strong { font-weight: 600; }

/* ------------------------------------------------------------- 顶栏 */
.topbar {
  flex: none;
  background: linear-gradient(180deg, #161a23, var(--panel));
  border-bottom: 1px solid var(--line);
  padding: 4px 10px 3px;
}

.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-row + .bar-row { margin-top: 3px; }

.brand { display: flex; align-items: center; gap: 7px; flex: none; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #3a3020, #1a1712);
  border: 1px solid #4a3d26;
  color: var(--accent2);
  font-size: 15px; font-weight: 700;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 13px; letter-spacing: 1.5px; color: var(--accent2); }
.brand-text i {
  font-style: normal; font-size: 10px; color: var(--dim2);
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; flex: 1; }

.ctl { display: flex; align-items: center; gap: 4px; }
.ctl > span { font-size: 10.5px; color: var(--dim); white-space: nowrap; }

input, select, button {
  font: inherit;
  font-size: 11.5px;
  color: var(--fg);
  background: #10131a;
  border: 1px solid var(--line2);
  border-radius: 5px;
  padding: 3px 6px;
  height: 25px;
  outline: none;
}
input[type="number"] { width: 62px; }
input[type="text"] { width: 56px; }
input[type="datetime-local"] { width: 158px; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(200, 164, 92, .14); }
input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--accent); }
.ctl-chk { cursor: pointer; }
.ctl-chk > span { cursor: pointer; }

button {
  cursor: pointer;
  border-color: #4a3d26;
  background: linear-gradient(180deg, #3a3122, #241f16);
  color: var(--accent2);
  font-weight: 600;
  padding: 3px 14px;
  letter-spacing: 1px;
}
button:hover { border-color: var(--accent); background: linear-gradient(180deg, #4a3d26, #2c2517); }
button.ghost { background: #151920; color: var(--dim); border-color: var(--line2); font-weight: 400; padding: 3px 9px; }

.bar-chips { flex-wrap: wrap; gap: 5px; }

/* ------------------------------------------------------------- 口径控制条 */
.bar-caliber {
  flex-wrap: nowrap; gap: 8px;
  padding-top: 1px;
  overflow: hidden;
}
.cb-title {
  flex: none; font-size: 10px; letter-spacing: 2px; color: var(--accent);
  border-left: 2px solid var(--accent); padding-left: 6px; line-height: 1.1;
}
.ctl-s { flex: none; }
.ctl-s > span { font-size: 10px; }
.ctl-s select, .ctl-s input { height: 21px; font-size: 10.5px; padding: 1px 4px; }
.ctl-s select { max-width: 132px; }
.ctl-thr input { width: 46px; }
.ctl-thr input:disabled { color: #56606f; background: #0d1015; border-color: #222833; }
.cb-echo {
  flex: 1; min-width: 0; text-align: right;
  font-size: 9.5px; color: var(--dim2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cb-echo b { color: var(--fg2); font-weight: 500; }
.cb-echo .cb-warn { color: var(--accent2); }
.chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: 10.5px; line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #14171f;
  color: var(--fg2);
  white-space: nowrap;
}
.chip b { font-size: 9.5px; color: var(--dim2); font-weight: 400; letter-spacing: .5px; }
.chip-hl { border-color: #4a3d26; background: #1d1a13; color: var(--accent2); }
.chip-dim { color: var(--dim2); }

/* ------------------------------------------------------------- 错误条 */
.errbar {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  background: #34181a;
  border-bottom: 1px solid #6b2a2a;
  font-size: 11.5px;
  color: #ffc9c2;
}
.errbar[hidden] { display: none; }
.errbar-text {
  flex: 1; min-width: 0;
  max-height: 2.9em; overflow-y: auto;
  line-height: 1.3;
  white-space: pre-wrap; word-break: break-word;
}
.errbar.is-info { background: #2c2818; border-bottom-color: #5c4a22; color: #e8d9a8; }
.errbar-tag {
  flex: none; font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: #7a2222; color: #ffe9e5; letter-spacing: 1px;
}
.errbar.is-info .errbar-tag { background: #6b551f; color: #fff3d2; }

/* ------------------------------------------------------------- 盘面骨架 */
.panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 296px minmax(340px, 1.22fr) 300px 300px 292px;
  grid-template-rows: minmax(0, 1fr);
  gap: 6px;
  padding: 5px;
  overflow: hidden;
}

/* 每个分栏都是 grid；轨道必须 minmax(0, …)，否则子卡片的 min-content
   会把轨道顶大，超出的部分被 .panes 的 overflow:hidden 裁掉（奇门最底行曾这样被切） */
.col { display: grid; gap: 6px; min-height: 0; }
/* 五列：8 盘按 命理 / 卦占 / 星命 / 方位 分组，第五列放融合层。
   fr 权重按各卡实测内容高度反推，目标 = 每列都不出现滚动条 */
.col-1 { grid-template-rows: minmax(0, 1.02fr) minmax(0, .97fr) minmax(0, .58fr); }
.col-2 { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.col-3 { grid-template-rows: minmax(0, 1.74fr) minmax(0, .98fr); }
.col-4 { grid-template-rows: minmax(0, 1.04fr) minmax(0, 1fr); }
.col-5 { grid-template-rows: minmax(0, .90fr) minmax(0, .87fr) minmax(0, .66fr); }

.card {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.card-head {
  flex: none;
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 9px 2px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #1b1f29, transparent);
}
.card-head h2 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--accent);
}
.card-head h2::before {
  content: "";
  display: inline-block;
  width: 2px; height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  background: var(--accent);
  opacity: .8;
}
.card-sub {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 10px;
  color: var(--dim2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.card-body {
  flex: 0 1 auto;
  min-height: 0;
  padding: 7px 10px 9px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #3b4453 transparent;
}
.card-body::-webkit-scrollbar { width: 6px; height: 6px; }
.card-body::-webkit-scrollbar-thumb { background: #3b4453; border-radius: 3px; }
.card-body::-webkit-scrollbar-track { background: transparent; }

.placeholder { color: var(--dim2); text-align: center; padding: 26px 0; letter-spacing: 2px; }

/* ------------------------------------------------------------- 通用小件 */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 11px; }
.kv dt { color: var(--dim2); white-space: nowrap; }
.kv dd { margin: 0; color: var(--fg2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kv-inline { display: flex; gap: 6px; align-items: baseline; font-size: 11px; }
.kv-inline i { font-style: normal; color: var(--dim2); font-size: 10px; }

.sec-title {
  font-size: 10px; letter-spacing: 1.5px; color: var(--dim2);
  margin: 5px 0 3px; padding-bottom: 1px;
  border-bottom: 1px dashed var(--line);
}
.sec-title:first-child { margin-top: 0; }

/* 卡片底部的内核说明（口径提示，不参与断语） */
.card-note {
  margin-top: 5px; padding-top: 3px;
  border-top: 1px dashed var(--line);
  font-size: 9.5px; line-height: 1.4; color: var(--dim2);
}

.tag {
  display: inline-block; font-size: 9.5px; line-height: 1.4;
  padding: 0 4px; border-radius: 3px;
  background: #232936; color: var(--dim); border: 1px solid transparent;
}
.tag-kong { background: #3a2224; color: #eda89f; }
.tag-ma { background: #1f3327; color: #93d3a8; }
.tag-dong { background: #2e2a1a; color: var(--accent2); }
.tag-run { background: #2b2438; color: #c3a8e8; }
.tag-wx { border-color: currentColor; background: transparent; }

/* 紫微斗君行（自检失败=真故障，红）/ 奇门置闰行（口径信息，中性） */
.zw-dj {
  font-size: 9.5px; color: var(--dim); padding: 2px 4px; margin-bottom: 3px;
  border-left: 2px solid var(--line2); background: #14171f; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zw-dj b { color: var(--fg2); font-weight: 500; }
.zw-dj.is-bad { border-left-color: #7a2222; background: #1e1315; }
.dj-ok { color: #93d3a8; }
.dj-bad { color: #eda89f; }
.qm-cali {
  font-size: 9.5px; color: var(--dim); padding: 2px 4px; margin-bottom: 4px;
  border-left: 2px solid var(--accent); background: #171a22; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wx-木 { color: var(--mu); }
.wx-火 { color: var(--huo); }
.wx-土 { color: var(--tu); }
.wx-金 { color: var(--jin); }
.wx-水 { color: var(--shui); }

.q-父母 { color: #d0b184; }
.q-兄弟 { color: #a9b3c4; }
.q-子孙 { color: #6dbd8a; }
.q-妻财 { color: #d8c07a; }
.q-官鬼 { color: #d4756b; }

/* ------------------------------------------------------------- 八字 */
.pillar-table {
  display: grid;
  grid-template-columns: 34px repeat(4, 1fr);
  gap: 3px 4px;
  font-size: 11px;
}
.pillar-table .ph { font-size: 10px; color: var(--dim2); text-align: center; }
.pillar-table .pl { font-size: 10px; color: var(--dim2); align-self: center; }
.pillar-table .pv {
  background: var(--card2);
  border-radius: 4px;
  padding: 1px 2px;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}
.pillar-table .pv-gz { font-size: 15px; letter-spacing: 1px; line-height: 1.3; }
.pillar-table .pv-sub { font-size: 9.5px; color: var(--dim); line-height: 1.35; }
.pillar-table .pv-day { box-shadow: inset 0 0 0 1px #4a3d26; background: #20201a; }

.dayun { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.dayun .dy {
  border: 1px solid var(--line);
  background: var(--card2);
  border-radius: 4px;
  padding: 1px 2px;
  text-align: center;
  font-size: 9.5px;
  color: var(--dim);
  line-height: 1.3;
}
.dayun .dy b { display: block; font-size: 11.5px; color: var(--fg2); letter-spacing: .5px; }
.dayun .dy.is-cur { border: 2px solid var(--accent); background: var(--card2); padding: 0 1px; }
.dayun .dy.is-cur b { color: var(--accent2); }

/* ------------------------------------------------------------- 梅花 */
.mh-hero { display: flex; align-items: center; gap: 10px; }
.mh-name { font-size: 17px; letter-spacing: 2px; color: var(--accent2); }
.mh-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }

.yao-stack { display: flex; flex-direction: column; gap: 3px; width: 48px; flex: none; }
.yao-row { display: flex; align-items: center; gap: 4px; height: 7px; }
.yao-row .bar { height: 4px; border-radius: 1px; background: #cfd6e2; }
.yao-row.yin .bar { flex: 0 0 40%; }
.yao-row.yang .bar { flex: 1 1 auto; }
.yao-row.dong .bar { background: var(--accent2); }
.yao-row .mark { font-size: 9px; color: var(--accent); width: 8px; flex: none; }

/* ------------------------------------------------------------- 六爻 */
.ly-table { font-size: 11px; }
.ly-head {
  display: grid;
  grid-template-columns: 24px 48px 1fr 26px 40px 52px;
  gap: 4px;
  font-size: 9.5px;
  color: var(--dim2);
  padding: 0 0 3px;
  border-bottom: 1px solid var(--line);
}
.ly-row {
  display: grid;
  grid-template-columns: 22px 44px 1fr 24px 38px 48px;
  gap: 3px;
  align-items: center;
  padding: 1px 0 1px 3px;
  border-bottom: 1px dashed var(--line);
  border-left: 2px solid transparent;
}
.ly-row:last-child { border-bottom: none; }
.ly-row.is-dong { border-left-color: var(--accent); background: linear-gradient(90deg, rgba(200,164,92,.07), transparent 55%); }
.ly-row.is-shi { background-image: linear-gradient(90deg, rgba(90,169,230,.05), transparent 40%); }

.ly-shen { font-size: 9.5px; color: #b09a6a; letter-spacing: 0; }
.ly-fu { font-size: 9px; color: #7b8698; line-height: 1.2; }
.ly-fu b { color: #9aa6b8; font-weight: 500; }
.ly-main { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; min-width: 0; }
.ly-gz { font-size: 13px; letter-spacing: .5px; }
.ly-qin { font-size: 10.5px; }
.ly-mini { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 1px; }
.ly-sy { font-size: 10px; color: var(--accent); text-align: center; }
.ly-sy.ying { color: #6fa6d8; }
.ly-bian { font-size: 10px; color: #8fa6c4; line-height: 1.25; }
.ly-bian b { color: #cfd9ea; font-weight: 500; }
.ly-yao { display: flex; flex-direction: row; align-items: center; gap: 3px; }
.ly-yao .bar { height: 3px; border-radius: 1px; background: #b9c3d3; }
.ly-yao.yin .bar { flex: 0 0 42%; }
.ly-yao.yang .bar { flex: 1 1 auto; }

/* ------------------------------------------------------------- 紫微 */
#ziwei-body { display: flex; flex-direction: column; }
.zw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 3px;
  /* 卡内还可能有斗君行，必须 flex 撑满剩余空间；用 height:100% 会把它顶出可视区（曾溢出 21px） */
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
.zw-pal {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card2);
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  font-size: 10px;
  min-width: 0;
}
.zw-pal.is-ming {
  border-color: var(--accent);
  background: linear-gradient(160deg, #2a2418, #1e1f22 70%);
  box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .35);
}
.zw-pal.is-shen { border-color: #3f6f9c; }
.zw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; }
.zw-name { font-size: 10px; color: var(--accent); letter-spacing: .5px; flex: none; }
.zw-gz { font-size: 9px; color: var(--dim2); }
.zw-stars { font-size: 11.5px; line-height: 1.2; color: #e9e0ca; overflow: hidden; }
.zw-stars span { margin-right: 2px; }
.zw-minor { font-size: 8.5px; line-height: 1.25; color: #77839a; overflow: hidden; }
.zw-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; gap: 3px;
  font-size: 8.5px; color: #5f6a7c;
}
.zw-center {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 30%, #21262f, #14171d);
  padding: 6px 7px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px;
  overflow: hidden;
}
.zw-center .big { font-size: 14px; color: var(--accent2); letter-spacing: 2px; text-align: center; }
.zw-center .sub { font-size: 9.5px; color: var(--dim); text-align: center; }
.hx { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.hx span { font-size: 9px; padding: 0 4px; border-radius: 3px; background: #1c2430; }
/* 四化着色：星曜与图例共用 */
.h-禄 { color: #63c084; }
.h-权 { color: #5fadea; }
.h-科 { color: #bb8ee4; }
.h-忌 { color: #e2705f; }

/* ------------------------------------------------------------- 奇门 */
#qimen-body { display: flex; flex-direction: column; }
#xuankong-body { display: flex; flex-direction: column; }
.qm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 3px;
  flex: 1 1 auto;
  min-height: 0;
}
.qm-cell {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card2);
  padding: 2px 4px;
  display: flex; flex-direction: column; gap: 0;
  font-size: 10px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.qm-cell.is-zhifu { border-color: #6b5628; box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .3); }
.qm-cell.is-zhishi { border-color: #2f567a; }
.qm-cell.is-center { background: #141821; }
.qm-shen { font-size: 9px; color: #9787c4; line-height: 1.3; }
.qm-ganline { display: flex; align-items: baseline; gap: 4px; line-height: 1.15; }
.qm-gan { font-size: 16px; letter-spacing: 0; }
.qm-di { font-size: 10px; color: #8a94a8; }
.qm-star { font-size: 10px; color: #c9b07a; line-height: 1.25; }
.qm-gate { font-size: 10px; color: #7fa8c9; line-height: 1.25; }
.qm-badges { display: flex; gap: 3px; margin-top: auto; padding-top: 1px; flex-wrap: wrap; }
.qm-pos { position: absolute; right: 3px; top: 2px; font-size: 8.5px; color: #4f5a6c; }

/* ------------------------------------------------------------- 交叉校验 */
.ck { padding: 2px 0 3px; border-bottom: 1px solid var(--line); }
.ck:last-child { border-bottom: none; }
.ck:last-child { border-bottom: none; }
.ck-l1 { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.ck-top { display: flex; align-items: baseline; gap: 6px; }
.ck-item { font-size: 10.5px; font-weight: 600; color: var(--fg2); flex: none; white-space: nowrap; }
.ck-badge {
  flex: none; font-size: 9px; padding: 1px 5px; border-radius: 3px;
  letter-spacing: 1px; line-height: 1.5;
}
.st-ok { background: #1d3327; color: #7fd39c; }
.st-diff { background: #2b2f38; color: #9aa6b8; }
.st-alert {
  background: var(--alert); color: #fff; font-weight: 700;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ck-alert-box {
  border: 1px solid #7a2a2a !important;
  background: linear-gradient(180deg, #2c1618, transparent) !important;
}
/* 差异 = 口径差异，中性：只加一道虚线与"口径"小标，不抢告警的红色 */
.ck-diff { background: linear-gradient(180deg, #1e222b, transparent); }
.tag-caliber { background: #2b2f38; color: #9aa6b8; border-color: #38414f; }
.ck-line { font-size: 10px; color: var(--dim); line-height: 1.35; }
.ck-line b { color: var(--fg2); font-weight: 500; }
/* 期望→实际压成一行并允许省略：8 术时代右侧列要塞 9 条校验 */
.ck-pair {
  margin-left: auto; flex: 1 1 auto; min-width: 0;
  font-size: 9.5px; color: var(--dim2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.ck-pair b { color: var(--fg2); font-weight: 500; }
.ck-sep { color: #4f5a6c; margin: 0 3px; }
.ck-note {
  font-size: 9px; color: var(--dim2); line-height: 1.25; margin-top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 只有告警才允许换行占两行；差异保持单行（全文在 title 里） */
.ck-alert-box .ck-note { white-space: normal; }

/* ------------------------------------------------------------- 共振 */
.res-axis { margin-bottom: 4px; }
.res-axis:last-child { margin-bottom: 0; }
.res-axis-name {
  font-size: 9.5px; letter-spacing: 2px; color: var(--accent);
  padding-bottom: 2px; border-bottom: 1px solid var(--line); margin-bottom: 3px;
}
.res-row { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; font-size: 10.5px; }
.res-val { flex: none; color: #ece3cd; font-weight: 600; min-width: 34px; }
.res-src { font-size: 9px; color: var(--dim); line-height: 1.3; }
.res-empty { font-size: 10px; color: var(--dim2); }

/* ------------------------------------------------------------- 五行画像 */
/* 行=术、列=五行：内核已 8 术，横排 8 列会窄到看不清 */
.wx-grid {
  display: grid; grid-template-columns: 46px repeat(5, 1fr);
  gap: 1px 3px; font-size: 8.5px; grid-auto-rows: 13px; align-content: start;
}
.wx-grid .h { color: var(--dim2); text-align: center; font-size: 8.5px; padding-bottom: 0; }
.wx-grid .rl {
  color: var(--dim); text-align: right; line-height: 13px; font-size: 9px;
  padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wxc {
  position: relative; height: 13px; border-radius: 3px;
  background: #1e222b; overflow: hidden;
}
.wxc i { position: absolute; left: 0; top: 0; bottom: 0; opacity: .5; }
.wxc b {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 8.5px; font-weight: 500; color: #cfd7e4;
}
.wx-legend { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; font-size: 8.5px; color: var(--dim2); }
.wx-legend span { display: inline-flex; align-items: center; gap: 3px; }
.wx-legend i { width: 8px; height: 8px; border-radius: 2px; opacity: .75; }

/* ------------------------------------------------------------- 迷你表（大六壬 / 玄空共用） */
.mt { width: 100%; border-collapse: collapse; font-size: 9.5px; table-layout: fixed; }
.mt th {
  font-weight: 400; color: var(--dim2); font-size: 8.5px; letter-spacing: .5px;
  text-align: left; padding: 0 2px; border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden;
}
.mt td {
  padding: 0 2px; line-height: 1.22; color: var(--fg2); border-bottom: 1px dashed #232833;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt tr:last-child td { border-bottom: none; }
.mt .c-num { color: var(--accent); font-weight: 600; }
.mt .c-chuan { color: var(--accent2); }
.mt .c-dim { color: var(--dim2); }
.mt .unit { font-style: normal; color: var(--dim2); margin-left: 1px; font-size: 8.5px; }
.mt .c-ke { color: #d4827a; }
.mt .c-zei { color: var(--accent2); }
.mt-star b { font-size: 10.5px; }
.mt .c-wuhuang { color: var(--accent2); }
.mt-fx td:nth-child(4) { color: var(--dim2); }

/* ------------------------------------------------------------- 大六壬 / 太乙 / 玄空 */
.ty-pos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px;
  margin: 3px 0 2px;
}
.ty-pos-item { display: flex; align-items: baseline; gap: 4px; font-size: 10px; min-width: 0; }
.ty-pos-item i { font-style: normal; color: var(--dim2); font-size: 9px; flex: none; }
.ty-pos-item b {
  color: var(--fg2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ty-suan-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ty-suan {
  border: 1px solid var(--line); border-radius: 4px;
  background: #1b202a; padding: 3px 5px; min-width: 0;
}
.ty-suan-head { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.ty-suan-name { font-size: 9.5px; color: var(--dim2); }
.ty-suan-num { font-size: 15px; font-weight: 700; color: var(--accent); line-height: 1.15; }
.ty-suan-num i { font-style: normal; font-size: 8.5px; color: var(--dim2); margin-left: 1px; }
.ty-suan-head .tag { font-size: 8.5px; padding: 0 3px; }
.is-he { background: #1d3327; color: #7fd39c; border-color: #2c4a38; }
.is-buhe { background: #33261e; color: #d8a97e; border-color: #4a3a2c; }
.ty-suan-body { font-size: 9.5px; color: var(--fg2); line-height: 1.45; }
.ty-suan-body i { font-style: normal; color: var(--dim2); margin-right: 2px; font-size: 9px; }
.ty-kb { color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

details.fold { margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 3px; }
details.fold summary {
  cursor: pointer; font-size: 9.5px; color: var(--dim2); list-style: none;
  user-select: none;
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary::before { content: '▸ '; color: var(--accent); }
details.fold[open] summary::before { content: '▾ '; }
.fold-item { font-size: 9px; color: var(--dim); margin: 3px 0 0; line-height: 1.4; }
.fold-item b { color: var(--fg2); font-weight: 500; margin-right: 3px; }
.fold-note { color: var(--dim2); font-size: 8.5px; line-height: 1.35; }
.tag-dim { background: #262b35; color: var(--dim2); }
.tag-rel { background: #2b2233; color: #c39ed0; }

/* 玄空九宫：上南下北、左东右西（巽4 离9 坤2 / 震3 中5 兑7 / 艮8 坎1 乾6） */
#xuankong-body .sec-title { margin: 5px 0 3px; }
.xk-grid {
  flex: none; height: 124px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
.xk-cell {
  position: relative; border: 1px solid var(--line); border-radius: 3px;
  background: #1b202a; display: grid; place-items: center;
}
.xk-cell.is-center { background: #20242e; }
.xk-cell.is-five { border-color: var(--accent2); box-shadow: inset 0 0 0 1px #4a3a1e; }
.xk-pos { position: absolute; right: 2px; top: 1px; font-size: 7.5px; color: #4f5a6c; }
.xk-cell b { font-size: 14px; font-weight: 700; }

/* ------------------------------------------------------------- 时间尺度 */
.tl-row { padding: 2px 0 3px; border-bottom: 1px dashed var(--line); font-size: 10px; }
.tl-row:last-child { border-bottom: none; }
.tl-top { display: flex; align-items: baseline; gap: 5px; }
.tl-art { color: var(--accent); font-weight: 600; font-size: 10.5px; }
.tl-scale { color: var(--dim2); font-size: 9px; }
.tl-now { color: var(--fg2); }
.tl-now-inline { color: var(--fg2); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-anchor { color: var(--dim2); font-size: 9px; margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------- 自适应 */
/* 5 列需要 ≥1520px；更窄就降 3 列，卡片按内容高度、整页滚动 */
@media (max-width: 1519px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  .panes {
    display: grid; overflow: visible;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  /* 块流/自动行下必须清掉桌面的 fr 行模板，否则 minmax(0,1.2fr) 会按内容撑出行坑 */
  .col { grid-template-rows: none; }
  .card { min-height: 0; }
  .card.card-tight { min-height: 0; }
  .zw-grid, .qm-grid { min-height: 340px; }
}

@media (max-width: 1100px) {
  .panes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .panes { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
}

@media (max-width: 820px) {
  .col { grid-template-columns: 1fr; }
  input[type="datetime-local"] { width: 148px; }
  .brand-text i { max-width: 120px; }
}
/* 课体说明：单行不换行，超出省略（完整文本在 title） */
.kv-inline .keb-note { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 六爻卡底部口径说明：单行省略（全文在 title） */
.ly-note { margin-top: 4px; padding-top: 3px; border-top: 1px dashed var(--line); font-size: 9px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* --------------------------------------------------- 单文件离线预置条 */
.bar-presets { flex-wrap: nowrap; gap: 6px; padding-top: 1px; overflow: hidden; }
.bar-presets[hidden] { display: none; }
#f-preset { max-width: 320px; }
#f-prev, #f-next { padding: 1px 7px; font-size: 10px; }
/* 离线态：禁用控件视觉上要明显「点不动」，不能装成可用 */
.controls input:disabled, .controls select:disabled,
.bar-caliber select:disabled, .bar-caliber input:disabled, .controls button:disabled {
  opacity: .45; cursor: not-allowed;
}
/* ------------------------------------------------- 单文件离线态（is-offline） */
/* 离线时多一排「预置时刻」，把提示条改成浮层 toast，并从留白里回收十几个像素，
   保证 12 张卡仍能一屏放完（?debug=1 溢出合计为 0）。 */
.errbar.float {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 60; max-width: min(780px, 92vw); border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}
body.is-offline .topbar { padding: 3px 10px 2px; }
body.is-offline .bar-row + .bar-row { margin-top: 2px; }
body.is-offline .panes { padding: 4px 5px; gap: 5px; }
body.is-offline .col { gap: 5px; }
/* 禁用不等于看不见：保留可读的灰字，只靠 cursor/边框提示不可点 */
.controls input:disabled, .controls select:disabled,
.bar-caliber select:disabled, .bar-caliber input:disabled,
.bar-presets select:disabled, .controls button:disabled {
  opacity: 1; color: #9aa6b8; background: #0f131a;
  border-color: #262d3a; cursor: not-allowed;
}
.controls button:disabled { color: #6d7787; }

/* =====================================================================
   整合层 · v2：分区导航 / 阅读模式 / 统一卡片语言 / 动效（可关）
   ===================================================================== */
:root {
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 380ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 30px;
}

/* ------------------------------------------------------ 分区导航（固定） */
.zonenav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h); display: flex; align-items: center; gap: 2px;
  padding: 0 8px; background: rgba(13, 16, 21, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.zonenav .zn {
  background: transparent; border: 1px solid transparent; color: var(--dim);
  font-size: 11.5px; padding: 2px 9px; border-radius: 5px; cursor: pointer;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.zonenav .zn i {
  font-style: normal; font-size: 9px; color: #5a6473; margin-right: 4px;
}
.zonenav .zn:hover { color: var(--fg2); background: #171b23; }
.zonenav .zn.is-on {
  color: var(--accent); border-color: #3a3324; background: #1c1a14;
}
.zonenav .zn.is-on i { color: var(--accent); }
.zonenav .zn-sp { flex: 1; }
.zonenav .zn-motion {
  background: transparent; border: 1px solid var(--line); color: var(--dim2);
  font-size: 11px; padding: 2px 8px; border-radius: 5px; cursor: pointer;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.zonenav .zn-motion.is-on { color: var(--accent); border-color: #3a3324; }

body { padding-top: var(--nav-h); }

/* ---------------------------------------- 统一卡片语言：序号 + 徽标副标题 */
.card-n {
  font-style: normal; font-size: 9.5px; color: #5d6674;
  margin-right: 5px; font-variant-numeric: tabular-nums;
}
.card-sub {
  font-size: 9.5px; color: var(--dim2); font-variant-numeric: tabular-nums;
  background: #1a1e27; border: 1px solid #232936; border-radius: 4px;
  padding: 0 5px; max-width: 56%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* 表头可点击折叠 */
.card-head { cursor: pointer; user-select: none; }
.card.is-folded .card-body { display: none; }
.card.is-folded .card-head { border-bottom: 0; }
.card-head .fold-mark { margin-left: 4px; font-size: 9px; color: #5d6674; }

/* ------------------------------------------------------------ 可读性 */
.mt td, .mt th, .ck, .tl-row, .kv, .res-item, .wx-grid { font-variant-numeric: tabular-nums; }
.mt tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
.ly-row:nth-child(even), .ck:nth-child(even) { background: rgba(255, 255, 255, .022); }
.mt td, .mt th, .ck-l1, .tl-top, .card-sub, .chip { font-variant-numeric: tabular-nums; }

/* 五行只留文字/描边/小色块：去掉大面积底色块 */
.tag, .chip, .tag-wx, .tag-kong, .tag-ma, .tag-dong, .tag-run, .tag-rel, .tag-dim {
  background: transparent !important;
  border: 1px solid currentColor;
}
.tag-wx { color: var(--accent2); }
.tag-kong { color: #d08a86; }
.tag-ma { color: #79c08a; }
.tag-dong { color: #e0b95f; }
.tag-run { color: #b39ae0; }
.tag-rel { color: #8fb2d8; }
.tag-dim { color: #7b8598; }

/* ------------------------------------------------------ 跨卡联动高亮 */
.hl { outline: 1px solid var(--accent); outline-offset: -1px; }
.hl-fill { background: rgba(200, 164, 92, .22) !important; box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .55); }
.zw-pal.hl-fill, .qm-cell.hl-fill { background: rgba(200, 164, 92, .18) !important; box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .7); }
.ck.hl-fill { background: rgba(200, 164, 92, .14) !important; }
.ck.hl { background: rgba(200, 164, 92, .10); }

/* ------------------------------------------------------------ 阅读模式 */
body[data-mode="read"] .panes {
  display: grid; overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content; gap: 10px; padding: 8px 10px;
}
body[data-mode="read"] .col { display: contents; }
body[data-mode="read"] .col[hidden] { display: none; }
body[data-mode="read"] .card { min-height: 0; }
body[data-mode="read"] .card-body { overflow: visible; font-size: 13.5px; line-height: 1.55; }
body[data-mode="read"] .card-head h2 { font-size: 14px; }
body[data-mode="read"] .card-sub { font-size: 11px; }
body[data-mode="read"] .mt td, body[data-mode="read"] .mt th { font-size: 12.5px; line-height: 1.5; }
body[data-mode="read"] .kv, body[data-mode="read"] .ck, body[data-mode="read"] .res-item,
body[data-mode="read"] .tl-row, body[data-mode="read"] .sec-title,
body[data-mode="read"] .card-note { font-size: 12.5px; }
body[data-mode="read"] .ly-row { grid-template-columns: 30px 58px 1fr 34px 52px 66px; }
body[data-mode="read"] .tags, body[data-mode="read"] .chips { gap: 5px; }
body[data-mode="read"] .tag, body[data-mode="read"] .chip { font-size: 11.5px; }
body[data-mode="read"] .wxc b, body[data-mode="read"] .wx-grid .rl { font-size: 11.5px; }
body[data-mode="read"] .zw-pal { font-size: 12px; }
body[data-mode="read"] .zw-name, body[data-mode="read"] .zw-stars { font-size: 13px; }
body[data-mode="read"] .zw-minor, body[data-mode="read"] .zw-foot { font-size: 10.5px; }
body[data-mode="read"] .zw-grid { min-height: 520px; }
body[data-mode="read"] .qm-grid { min-height: 460px; }
body[data-mode="read"] .qm-cell { font-size: 12px; }
body[data-mode="read"] .qm-shen { font-size: 13px; }
body[data-mode="read"] .qm-gan { font-size: 20px; }
@media (max-width: 1100px) {
  body[data-mode="read"] .panes { grid-template-columns: minmax(0, 1fr); }
}

/* 回到顶部 */
.to-top {
  position: fixed; right: 12px; bottom: 14px; z-index: 45;
  background: #1a1e27; border: 1px solid var(--line); color: var(--dim);
  font-size: 11px; padding: 4px 9px; border-radius: 6px; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.to-top.is-on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------- 打印 */
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, body { background: #fff !important; color: #111 !important; padding: 0 !important; height: auto !important; overflow: visible !important; }
  .zonenav, .topbar, .errbar, .to-top, .bar-presets, .card-head .fold-mark { display: none !important; }
  .panes { display: block !important; overflow: visible !important; padding: 0 !important; }
  .col { display: block !important; }
  .card { break-inside: avoid; page-break-inside: avoid; border: 1px solid #bbb !important;
          background: #fff !important; margin: 0 0 6mm 0; box-shadow: none !important; }
  .card-body { overflow: visible !important; max-height: none !important; }
  .card-head { border-bottom: 1px solid #ccc !important; background: #f4f4f4 !important; }
  .card-head h2, .card-sub, .card-n { color: #111 !important; background: #fff !important; border-color: #ccc !important; }
  body, .card-body, .mt td, .mt th, .kv, .ck, .res-item, .tl-row, .tag, .chip { color: #111 !important; }
  .tag, .chip { border-color: #999 !important; }
  .st-alert, .ck-alert-box { border: 1px solid #900 !important; color: #900 !important; }
}
body[data-print="1"] .zonenav, body[data-print="1"] .topbar { display: none; }
body[data-print="1"] { padding-top: 0; }
body[data-print="1"] .panes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; padding: 10px; overflow: auto; grid-auto-rows: min-content;
}
body[data-print="1"] .col { display: contents; }
body[data-print="1"] .card { min-height: 0; }

/* ---------------------------------------------------------------- 动效 */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cellIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sweep { from { background-size: 0% 1px; } to { background-size: 100% 1px; } }
@keyframes goldFlash {
  0% { box-shadow: inset 0 0 0 1px rgba(200, 164, 92, 0); }
  35% { box-shadow: inset 0 0 0 1px rgba(200, 164, 92, .8); }
  100% { box-shadow: inset 0 0 0 1px rgba(200, 164, 92, 0); }
}
@keyframes toastUp { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.card.anim-in { animation: fadeUp var(--dur-3) var(--ease) forwards; }
.card-body.cfade { animation: fadeIn var(--dur-2) var(--ease) forwards; }
.card.flash { animation: goldFlash 520ms var(--ease) 1; }
.zw-pal.lit, .qm-cell.lit { animation: cellIn var(--dur-2) var(--ease) forwards; }
.wxc i { transform-origin: left center; animation: barGrow 500ms var(--ease) forwards; }
.tl-row { background-image: linear-gradient(var(--accent), var(--accent));
          background-repeat: no-repeat; background-position: 0 100%;
          background-size: 100% 1px; animation: sweep 600ms var(--ease) forwards; }
.errbar.float { animation: toastUp 240ms var(--ease) forwards; }

/* 动效总开关：关掉即全部失效（0 位移 / 0 时长） */
body.no-motion *, body.no-motion *::before, body.no-motion *::after {
  animation-duration: 0s !important; animation-delay: 0s !important;
  transition-duration: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important; animation-delay: 0s !important;
    transition-duration: 0s !important; transform: none !important;
  }
}

/* 口径回显：总览不常驻（收进 title / 阅读模式才显示） */
.bar-caliber .cb-echo { display: none; }
body[data-mode="read"] .bar-caliber .cb-echo { display: block; }
/* 时间尺度：压 3px，保住 1600 总览溢出 0 */
#timeline-body .tl-row { padding-bottom: 0; }
#timeline-body .tl-anchor { line-height: 1.28; }

/* =====================================================================
   v2.1：分区挂到「卡」上 + 区间色 + 阅读模式按卡回流 + 可读性修订
   ===================================================================== */

/* -------------------------------------------------- 区间色（卡头竖线） */
.card[data-zone="mingli"]   { --zone-c: var(--jin); }
.card[data-zone="guazhan"]  { --zone-c: var(--mu); }
.card[data-zone="xingming"] { --zone-c: var(--huo); }
.card[data-zone="fangwei"]  { --zone-c: var(--shui); }
.card[data-zone="ronghe"]   { --zone-c: var(--accent); }
.card .card-head { border-left: 2px solid var(--zone-c, transparent); padding-left: 7px; }

/* 太乙/梅花折叠区注释：从 --dim2 提到 --dim（1600 下原来看不见） */
details.fold .fold-note, .fold-item.fold-note { color: var(--dim); font-size: 9px; }

/* -------------------------------------------------- 阅读模式：按卡回流 */
body[data-mode="read"] .panes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  grid-auto-rows: min-content;
  align-content: start;
  align-items: start;
  grid-auto-flow: row dense;
  gap: 10px; padding: 8px 10px; overflow: auto;
}
body[data-mode="read"] .col { display: contents; }
body[data-mode="read"] .card { min-height: 0; align-self: start; }
body[data-mode="read"] .card[hidden] { display: none !important; }
/* 单卡区（星命=紫微）占满整行 */
body[data-mode="read"] .panes > .card:only-of-type,
body[data-mode="read"] .panes > .card[data-zone="xingming"]:only-child { grid-column: 1 / -1; }

/* 正文与表格字号（真正放大） */
body[data-mode="read"] .card-body { overflow: visible; font-size: 13.5px; line-height: 1.6; }
body[data-mode="read"] .card-head h2 { font-size: 15px; }
body[data-mode="read"] .card-sub { font-size: 11.5px; max-width: 62%; }
/* 八字：标签 / 十神 / 干支大字 */
body[data-mode="read"] .pillar-table .ph { font-size: 12.5px; color: var(--dim); }
body[data-mode="read"] .pillar-table .pl { font-size: 12.5px; }
body[data-mode="read"] .pillar-table .pv { font-size: 13.5px; }
body[data-mode="read"] .pillar-table .pv-sub { font-size: 12.5px; }
body[data-mode="read"] .pillar-table .pv-gz { font-size: 15px; letter-spacing: .5px; }
/* 迷你表 */
body[data-mode="read"] .mt th { font-size: 12.5px; }
body[data-mode="read"] .mt td { font-size: 13px; line-height: 1.55; }
/* 六爻 */
body[data-mode="read"] .ly-row { grid-template-columns: 34px 64px 1fr 38px 56px 72px; font-size: 13px; padding: 2px 0; }
/* 紫微（单卡撑满整行时给到 13–14px） */
body[data-mode="read"] .card[data-zone="xingming"] .zw-grid { min-height: 640px; }
body[data-mode="read"] .card[data-zone="xingming"] .zw-name { font-size: 14px; }
body[data-mode="read"] .card[data-zone="xingming"] .zw-stars { font-size: 13.5px; }
body[data-mode="read"] .card[data-zone="xingming"] .zw-gz,
body[data-mode="read"] .card[data-zone="xingming"] .zw-foot { font-size: 12px; }
body[data-mode="read"] .card[data-zone="xingming"] .zw-minor { font-size: 11.5px; }
body[data-mode="read"] .card[data-zone="xingming"] .zw-center .big { font-size: 20px; }
body[data-mode="read"] .card[data-zone="xingming"] .zw-center .sub { font-size: 12.5px; }
/* 奇门 */
body[data-mode="read"] .qm-grid { min-height: 460px; }
body[data-mode="read"] .qm-cell { font-size: 12.5px; }
body[data-mode="read"] .qm-shen, body[data-mode="read"] .qm-gate { font-size: 13px; }
body[data-mode="read"] .qm-gan { font-size: 21px; }
/* 其它文本类 */
body[data-mode="read"] .kv, body[data-mode="read"] .ck, body[data-mode="read"] .res-row,
body[data-mode="read"] .tl-row, body[data-mode="read"] .sec-title,
body[data-mode="read"] .card-note { font-size: 12.5px; }
body[data-mode="read"] .tag, body[data-mode="read"] .chip { font-size: 11.5px; }
body[data-mode="read"] .wx-grid .rl, body[data-mode="read"] .wxc b { font-size: 12px; }
body[data-mode="read"] .wx-grid { grid-auto-rows: 20px; }

/* 交叉校验：右侧「差」角标（--diff 描边），行名省略「口径」后缀 */
.ck-diffmark {
  margin-left: auto; flex: none;
  font-size: 9px; line-height: 1.5; padding: 0 3px; border-radius: 3px;
  color: var(--diff); border: 1px solid var(--diff); background: transparent;
}
.ck-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   v3：填入即算 · 空态 · 黄历 / 评估汇总 / 档位徽标 · 动效补充
   ===================================================================== */

/* 空态与主体互斥（.panes 是 grid，必须压住 display） */
[hidden] { display: none !important; }
main.panes[hidden] { display: none !important; }

/* ---------------------------------------------------------- 空态引导卡 */
.empty-state {
  flex: 1 1 auto; min-height: 0; display: flex;
  align-items: center; justify-content: center;
  padding: 18px 16px; overflow: auto;
}
.es-card {
  max-width: 720px; width: 100%;
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #171b22, #12161c 60%);
  padding: 26px 30px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.42);
  animation: fadeUp var(--dur-3) var(--ease) forwards;
}
.es-mark {
  width: 40px; height: 40px; line-height: 40px; text-align: center;
  border: 1px solid var(--accent); border-radius: 8px;
  color: var(--accent); font-size: 20px; margin-bottom: 12px;
}
.es-card h1 { font-size: 20px; font-weight: 600; letter-spacing: 1px; margin-bottom: 8px; }
.es-lead { font-size: 12.5px; line-height: 1.75; color: var(--fg2); margin-bottom: 12px; }
.es-lead b { color: var(--accent); font-weight: 500; }
.es-list { margin: 0 0 14px; padding-left: 0; list-style: none; }
.es-list li {
  font-size: 11.5px; line-height: 1.7; color: var(--dim);
  padding: 5px 0 5px 12px; border-left: 2px solid #222833; margin-bottom: 4px;
}
.es-list li b { color: var(--fg2); font-weight: 500; }
.es-offline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid rgba(200,164,92,.45); background: rgba(200,164,92,.08);
  border-radius: 6px; padding: 8px 10px; margin-bottom: 10px;
  animation: fadeIn var(--dur-2) var(--ease) forwards;
}
.es-offline-t { font-size: 11px; color: var(--accent); letter-spacing: 1px; }
.es-offline code {
  font-size: 11px; color: var(--fg2); background: #0d1015;
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px;
}
.es-note { font-size: 10px; color: var(--dim2); border-top: 1px dashed var(--line); padding-top: 9px; }

/* ------------------------------------------------------- Dirty 提示条 */
.dirty {
  margin-left: auto; font-size: 9.5px; color: var(--accent);
  border: 1px solid rgba(200,164,92,.5); border-radius: 4px; padding: 1px 7px;
  white-space: nowrap; animation: fadeIn var(--dur-2) var(--ease) forwards;
}

/* --------------------------------------------------- 黄历卡：盘面摘要行 */
.core-line {
  display: flex; flex-wrap: wrap; gap: 3px 5px;
  padding: 3px 9px 4px; border-bottom: 1px dashed var(--line);
  font-size: 9px; overflow: visible;
}
.core-line .chip { font-size: 8.5px; }

/* 建除 / 值神 / 宿 一行徽标 */
.alm-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 5px; }
.alm-badges .tag { font-size: 9px; }

/* 宜 / 忌 两列 */
.alm-yj { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; margin: 4px 0; }
.alm-col-t { font-size: 9px; color: var(--dim2); letter-spacing: 1px; margin-bottom: 2px; }
.alm-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.alm-tag {
  font-size: 9px; line-height: 1.5; padding: 0 4px; border-radius: 3px;
  border: 1px solid currentColor; white-space: nowrap;
  animation: tagIn 200ms var(--ease) forwards;
}
.alm-tag.ok { color: var(--ok); }
.alm-tag.bad { color: var(--bad); }
/* 吉时 12 格 */
.alm-hours { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: 4px; }
.alm-h {
  font-size: 8.5px; line-height: 1.3; text-align: center; padding: 1px 0; min-height: 22px;
  border: 1px solid #222833; border-radius: 3px; color: var(--dim2);
  animation: cellIn 220ms var(--ease) forwards;
}
.alm-h.is-ji { color: var(--ok); border-color: var(--ok); }
.alm-h b { display: block; font-weight: 500; color: var(--fg2); }
.alm-h.is-ji b { color: var(--ok); }
.alm-foot { font-size: 8.5px; color: var(--dim2); margin-top: 4px; line-height: 1.5; }

/* ------------------------------------------------- 档位徽标 + 分值条 */
.grade-badge {
  margin-left: auto; flex: none; font-size: 9.5px; line-height: 1.5;
  padding: 0 6px; border-radius: 3px; border: 1px solid currentColor;
  animation: pop 240ms var(--ease) forwards;
}
.grade-badge.g-大吉 { color: var(--ok); }
.grade-badge.g-吉 { color: #8fc99a; }
.grade-badge.g-平 { color: var(--dim); }
.grade-badge.g-凶 { color: #d9938a; }
.grade-badge.g-大凶 { color: var(--bad); }
.grade-bar {
  position: relative; height: 4px; margin-top: 4px; flex: none;
  background: linear-gradient(90deg, #2a1a1a 0%, #1b1f27 50%, #1a2a1e 100%);
  border-radius: 2px; overflow: hidden;
}
.grade-bar::after {
  content: ''; position: absolute; left: 50%; top: -1px; bottom: -1px; width: 1px;
  background: #3a4250;
}
.grade-bar i {
  position: absolute; top: 0; bottom: 0; display: block;
  animation: barGrow 520ms var(--ease) forwards; transform-origin: left center;
}
.grade-bar i.pos { left: 50%; background: linear-gradient(90deg, #4b7a56, var(--ok)); }
.grade-bar i.neg { right: 50%; background: linear-gradient(270deg, #7a3d38, var(--bad)); }
.grade-src { margin-top: 3px; }
.grade-src > summary { font-size: 9px; color: var(--dim2); cursor: pointer; }
.grade-src .gs-row { font-size: 9px; line-height: 1.5; color: var(--dim); }
.grade-src .gs-row .k { color: var(--fg2); }

/* ---------------------------------------------------------- 评估汇总 */
.sum-grades { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.sum-g {
  display: flex; align-items: center; gap: 3px; font-size: 9px;
  border: 1px solid #222833; border-radius: 3px; padding: 0 4px; line-height: 1.6;
}
.sum-g b { font-weight: 500; }
.sum-g .v { color: var(--dim); }
.sum-g.g-大吉, .sum-g.g-吉 { border-color: rgba(122,190,140,.6); }
.sum-g.g-凶, .sum-g.g-大凶 { border-color: rgba(200,110,100,.6); }
.sum-line { font-size: 9.5px; line-height: 1.55; color: var(--dim); }
.sum-line b { color: var(--fg2); font-weight: 500; }
.sum-note { font-size: 8.5px; color: var(--dim2); line-height: 1.5; margin-top: 3px; }
.sum-verdict { font-size: 11px; color: var(--fg2); margin-bottom: 4px; }

/* ------------------------------------------------------------ 新动效 */
@keyframes pop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tagIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
body.no-motion .grade-badge, body.no-motion .grade-bar i,
body.no-motion .alm-tag, body.no-motion .alm-h, body.no-motion .es-card { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .grade-badge, .grade-bar i, .alm-tag, .alm-h, .es-card { animation: none !important; }
}

/* --------------------------------------------------- 列轨道（14 卡版） */
.col-1 { grid-template-rows: minmax(0, 1.06fr) minmax(0, .92fr) minmax(0, 1.0fr) minmax(0, .58fr); }
.col-5 { grid-template-rows: minmax(0, .96fr) minmax(0, 1.1fr) minmax(0, .92fr) minmax(0, .82fr); }

/* 「待接入」占位：不计入 placeholder（卡片仍算已填充） */
.pending { font-size: 10px; color: var(--dim2); line-height: 1.6; font-style: italic; }

/* ------------------------------------------------- 总览也按内容高度排
   14 张卡（8 术 + 黄历 + 汇总 + 校验/共振/画像 + 时间尺度）+ 档位条/依据
   已超过 1600×1000 一屏能容的量；改成「列内按内容高度 + .panes 内滚动」，
   既保证每张卡不被压缩（溢出 0），也不用把页面拉长。 */
.panes { grid-template-rows: none !important; align-content: start; overflow: auto; }
/* .col-1…col-5 的显式 fr 行模板优先级高于 .col，必须显式清掉 */
.col, .col-1, .col-2, .col-3, .col-4, .col-5 {
  grid-template-rows: none !important;
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
}
.panes .card { min-height: 0; align-self: start; }

/* 档位：无评估（内核未给条目，中性灰，不是错误） */
.grade-badge.g-无评估, .sum-g.g-无评估 { border-color: #333a46; color: var(--dim2); }
.grade-badge.g-无评估 { color: #6f7887; }
.sum-disc { color: var(--dim2); font-size: 9.5px; }

/* 分布 / 徽标行：紧凑横排，不要拉满宽 */
.sum-line { display: block; }
.sum-line .sum-g { width: auto; flex: none; margin-right: 4px; }
.sum-grades { flex-wrap: wrap; }

/* 黄历：吉神/凶煞 与「待核实」尾注 */
.ok-t { color: var(--ok, #7fc99a); font-weight: 500; }
.bad-t { color: var(--bad, #e08a82); font-weight: 500; }
.alm-tip { color: var(--dim2); font-size: 9px; }
.alm-h i { font-style: normal; color: var(--dim2); font-size: 8.5px; display: block; }
.alm-h, .alm-tag, .grade-badge { opacity: 1; }
.alm-hours-t { font-size: 9px; color: var(--dim2); margin-top: 5px; }
.alm-hours-tags { margin-top: 2px; }
.alm-tag.dim { color: #6f7b8c; }
/* v3.1 视觉修订：行与表项不参与纵向分配，卡高只由内容决定 */
.ly-row, .mt tr, .kv > *, .tl-row, .res-item { flex: 0 0 auto; }
.card-body > * { flex-shrink: 0; }