/* ============================================================
 *  八字排盘 · 样式
 *  设计基调：现代简洁。中性色底 + 白卡片 + 细描边 + 轻投影，
 *  无衬线字体主导；干支/卦象等数据保留衬线以求辨识度；
 *  仅以朱红作强调色。支持日间/夜间主题与打印。
 *  —— 注意：请勿使用 background-attachment: fixed 与 backdrop-filter，
 *     部分内嵌浏览器会因此卡住合成器，导致动画帧不触发、点击与截图失效。
 * ============================================================ */

:root {
  /* 中性色阶 */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --surface-3: #e9ecef;
  --ink: #16191d;
  --ink-2: #4a5058;
  --ink-3: #878e97;
  --line: #e7e9ec;
  --line-2: #d5d9de;

  /* 强调色：朱红（用于强调，不铺满） */
  --accent: #d94a3d;
  --accent-2: #c03a2d;
  --accent-soft: rgba(217, 74, 61, .085);
  --accent-ring: rgba(217, 74, 61, .16);
  --gold: #b7791f;
  --ok: #15803d;
  --bad: #dc2626;
  --sheng: #16a34a;
  --ke: #dc2626;

  /* 吉凶刻度 */
  --c-daji: #15803d;
  --c-ji: #22a06b;
  --c-ping: #94a3b8;
  --c-bu: #ea9a3e;
  --c-xiong: #dc2626;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-xs: 6px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --shadow-2: 0 4px 14px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-3: 0 16px 40px rgba(16, 24, 40, .12);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", Georgia, serif;
}

/* ---------- 护眼底色预设（浅色主题下可切换，见顶栏「护眼」） ----------
 * gray  冷灰（默认，中性）
 * green 豆沙绿（经典护眼绿，长时阅读最柔和）
 * cream 米黄（暖调纸感，但去除了旧版的纹理与衬线排版）
 * warm  浅褐（更暖、对比更低）
 * 只改三档背景变量，前景色不变，因此卡片与文字仍是「现代白卡」样式。 */
html[data-bg="green"] {
  --bg: #e9f0e6;
  --surface-2: #eef3ec;
  --surface-3: #e1e9de;
  --line: #dbe3d7;
  --line-2: #c9d4c4;
}
html[data-bg="cream"] {
  --bg: #f6f1e4;
  --surface-2: #f4efe1;
  --surface-3: #ece5d2;
  --line: #e5dec9;
  --line-2: #d4cbae;
}
html[data-bg="warm"] {
  --bg: #f2ece3;
  --surface-2: #f0e9de;
  --surface-3: #e8dfd0;
  --line: #e0d7c8;
  --line-2: #cec2ac;
}

html[data-theme="dark"] {
  /* 夜间采用暖炭灰而非纯黑蓝灰，白字改暖白，长时间看不刺眼 */
  --bg: #16150f;
  --surface: #1d1c17;
  --surface-2: #24231d;
  --surface-3: #2b2a23;
  --ink: #e6e1d6;
  --ink-2: #b0a896;
  --ink-3: #7d7566;
  --line: #2e2c24;
  --line-2: #3d3a30;

  --accent: #ff7a6b;
  --accent-2: #ff9184;
  --accent-soft: rgba(255, 122, 107, .13);
  --accent-ring: rgba(255, 122, 107, .24);
  --gold: #dcb055;
  --ok: #57bb8a;
  --bad: #ff8a7d;
  --sheng: #3fae76;
  --ke: #f4736a;
  --c-daji: #3fae76;
  --c-ji: #6fc492;
  --c-ping: #7b8794;
  --c-bu: #dfa055;
  --c-xiong: #f4736a;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .34);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

/* 兜底：任何元素带 hidden 属性都必须不显示（避免被后续 display 规则覆盖） */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

/* 字号档位：以 zoom 实现，一处生效全站缩放。
 * 只作用于 .app（含全部内容），toast/抽屉/弹窗在 .app 之外不受影响。 */
html[data-fs="std"]  .app { zoom: 1; }
html[data-fs="lg"]   .app { zoom: 1.10; }
html[data-fs="xl"]   .app { zoom: 1.20; }
html[data-fs="xxl"]  .app { zoom: 1.32; }

body {
  background: var(--bg);
  /* 顶部一层极淡的强调色光晕，替代原来的宣纸纹理；不用 fixed 附着 */
  background-image: radial-gradient(1100px 380px at 50% -140px, var(--accent-soft), transparent 72%);
  background-repeat: no-repeat;
  background-size: 100% 520px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app { max-width: 1200px; margin: 0 auto; padding: 20px 18px 48px; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 4px 2px 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  font-size: 30px; line-height: 1; color: var(--accent);
  width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
}
.brand-text h1 {
  margin: 0; font-family: var(--font-sans); font-size: 24px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink);
}
.brand-text p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); letter-spacing: 0; }
.top-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- 按钮 ---------------- */
.btn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 8px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: background .16s, color .16s, border-color .16s, box-shadow .16s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn:active { background: var(--surface-2); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.btn.primary {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; padding: 9px 22px;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--accent); }
.btn.tiny { padding: 5px 11px; font-size: 12px; border-radius: var(--radius-xs); }
.btn.danger { color: var(--bad); border-color: var(--line-2); }
.btn.danger:hover { background: rgba(220, 38, 38, .07); border-color: var(--bad); color: var(--bad); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }

/* ---------------- 面板 ---------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 20px 22px; margin-bottom: 18px;
}
.panel-title {
  margin: 0 0 16px; font-family: var(--font-sans); font-size: 16px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink); display: flex; align-items: center; gap: 9px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.panel-title::before { content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--accent); }

/* ---------------- 表单 ---------------- */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 22px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.field > label em { font-style: normal; color: var(--ink-3); font-weight: 400; }

input[type="text"], input[type="number"], input[type="password"], select {
  font-family: var(--font-sans); font-size: 13.5px; padding: 8px 11px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s; min-width: 0;
}
input[type="text"]:hover, input[type="number"]:hover, input[type="password"]:hover, select:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
input:disabled, select:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2); }
input[type="number"] { width: 100%; }
#fYear { max-width: 118px; }
#fLon { max-width: 120px; }

.date-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.date-row .unit { font-size: 12.5px; color: var(--ink-3); }
.date-row select { min-width: 76px; }

/* align-self 必需：在列向 flex 的 .field 里，inline-flex 默认会被拉伸到整行宽 */
.seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.seg-item { position: relative; }
/* 单选按钮本体铺满整个选项并置于最上层：既让整块可点，也让自动化与辅助技术能直接命中它 */
.seg-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.seg-item span {
  display: block; padding: 8px 18px; font-size: 13px; font-weight: 500;
  color: var(--ink-2); background: transparent; transition: background .15s, color .15s;
  user-select: none; pointer-events: none; /* 点击交给上层的 input 处理 */
}
.seg-item input:checked + span { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: var(--shadow-1); }
.seg-item:hover span { color: var(--accent); }
.seg-item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; user-select: none; }
.chk input { accent-color: var(--accent); width: 15px; height: 15px; }

.hint { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.hint b { color: var(--ink-2); }

.form-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.examples { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.examples .lbl { font-size: 12px; color: var(--ink-3); }
.form-msg { font-size: 12.5px; color: var(--bad); }
.form-msg.ok { color: var(--ok); }

.history {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.history .lbl { font-size: 12px; color: var(--ink-3); }
.history-list { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.hist-chip {
  font-size: 12px; padding: 4px 11px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.hist-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------------- 空状态 ---------------- */
.empty-state { display: flex; justify-content: center; padding: 68px 20px; }
.empty-inner { text-align: center; max-width: 580px; }
.empty-logo {
  font-size: 44px; color: var(--accent); display: flex; align-items: center; justify-content: center;
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
}
.empty-inner h2 { font-family: var(--font-sans); font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: .01em; }
.empty-inner p { margin: 5px 0; color: var(--ink-3); font-size: 13px; }

/* ---------------- 结果区块 ---------------- */
main > section, .result-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 20px 22px; margin-bottom: 18px;
}
main > section > h2, .result-card > h2 {
  margin: 0 0 16px; font-family: var(--font-sans); font-size: 17px; font-weight: 700;
  letter-spacing: .01em; color: var(--ink); display: flex; align-items: center; gap: 9px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
main > section > h2::before, .result-card > h2::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--accent);
}
h4.sub {
  margin: 22px 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  letter-spacing: .01em; display: flex; align-items: center; gap: 7px;
}
h4.sub::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--line-2); }
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.result-head .export-bar { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---------------- 基本信息 ---------------- */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px 20px; }
.info-item { display: flex; gap: 8px; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.info-item .k { color: var(--ink-3); flex: 0 0 74px; font-size: 12.5px; }
.info-item .v { color: var(--ink); flex: 1; }

.note { margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.7; }
.note.info { background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--ink-2); }
.note.warn { background: rgba(183, 121, 31, .09); border-left: 3px solid var(--gold); color: var(--ink-2); }
.note b { color: var(--ink); }

/* ---------------- 四柱盘 ---------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.pillars { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 620px; }
table.pillars th, table.pillars td {
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 10px 9px; text-align: center; vertical-align: middle; font-size: 14px;
}
table.pillars th:first-child, table.pillars td:first-child { border-left: 1px solid var(--line); }
table.pillars thead th {
  border-top: 1px solid var(--line); background: var(--surface-2);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink-2); padding: 10px 8px;
}
table.pillars tbody tr:last-child td, table.pillars tbody tr:last-child th { border-bottom: 1px solid var(--line); }
table.pillars th.rowhead {
  background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  letter-spacing: 0; width: 78px; white-space: nowrap;
}
table.pillars td.col-day, table.pillars th.col-day { background: var(--accent-soft); }
table.pillars thead th.col-day { background: var(--accent-soft); color: var(--accent); }
table.pillars tbody tr:hover td { background: var(--surface-2); }
table.pillars tbody tr:hover td.col-day { background: rgba(217, 74, 61, .12); }

.gz { font-family: var(--font-serif); font-weight: 600; display: inline-block; }
.gz.big { font-size: 34px; line-height: 1.05; letter-spacing: 0; }
.gz.mid { font-size: 24px; line-height: 1.1; }
.gz.small { font-size: 17px; line-height: 1.2; }

.wx-mini { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.rizhu { color: var(--accent); font-weight: 700; }
.ss { color: var(--ink-2); font-size: 12.5px; }
.ss-mini { display: inline-block; font-size: 11.5px; color: var(--ink-2); margin: 0 1px; }
.ny { font-size: 12px; color: var(--ink-2); }
.gong { display: block; font-size: 12.5px; color: var(--ink-2); }
.r-宫位 em { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.ss-badge {
  display: inline-block; font-size: 11px; padding: 2px 7px; margin: 2px;
  border-radius: var(--radius-xs); background: rgba(183, 121, 31, .1); color: var(--gold);
  border: 1px solid rgba(183, 121, 31, .2); cursor: help; white-space: nowrap;
}
.muted { color: var(--ink-3); }
.muted-small { font-size: 12.5px; color: var(--ink-3); }

.cross-rel { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.cross-rel > div { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cross-rel .lbl { color: var(--ink-3); flex: 0 0 36px; font-size: 12px; }
.chip {
  padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-2); font-size: 12px;
}
.chip.good { border-color: rgba(21, 128, 61, .35); color: var(--ok); background: rgba(21, 128, 61, .08); }
.chip.warn { border-color: rgba(183, 121, 31, .35); color: var(--gold); background: rgba(183, 121, 31, .1); }

/* ---------------- 五行 ---------------- */
.two-col { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }
.wx-ring { width: 100%; height: auto; max-width: 380px; display: block; margin: 0 auto; }
.wx-radar { width: 100%; max-width: 240px; display: block; }
.wx-bars { display: flex; flex-direction: column; gap: 9px; }
.wx-row { display: grid; grid-template-columns: 26px 1fr 92px 34px 30px; gap: 9px; align-items: center; }
.wx-name { font-family: var(--font-serif); font-size: 16px; font-weight: 700; text-align: center; }
.wx-track { height: 14px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.wx-fill { display: block; height: 100%; border-radius: var(--radius-pill); transition: width .5s ease; }
.wx-num { font-size: 12px; color: var(--ink-2); text-align: right; white-space: nowrap; }
.wx-num em { font-style: normal; color: var(--ink-3); margin-left: 4px; font-size: 11px; }
.wx-cnt { font-size: 11.5px; color: var(--ink-3); text-align: right; }
.wx-badge { font-size: 11px; text-align: center; border-radius: var(--radius-xs); padding: 1px 0; border: 1px solid var(--line); color: var(--ink-3); }
.wx-badge.good { background: rgba(21, 128, 61, .1); color: var(--ok); border-color: rgba(21, 128, 61, .3); font-weight: 600; }
.wx-badge.bad { background: rgba(220, 38, 38, .09); color: var(--bad); border-color: rgba(220, 38, 38, .26); font-weight: 600; }
.wx-tag { display: inline-block; font-family: var(--font-serif); font-weight: 700; border: 1px solid; border-radius: var(--radius-xs); padding: 0 6px; font-size: 12.5px; }
.wx-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }

/* ---------------- 折叠详情 ---------------- */
details.detail { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
details.detail > summary { cursor: pointer; padding: 10px 14px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; list-style: none; user-select: none; }
details.detail > summary::-webkit-details-marker { display: none; }
details.detail > summary::before { content: "▸ "; color: var(--accent); }
details.detail[open] > summary::before { content: "▾ "; }
details.detail > summary:hover { color: var(--accent); }
details.detail > *:not(summary) { padding: 0 14px; }
details.detail > *:last-child { padding-bottom: 14px; }

table.mini { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 8px 0; }
table.mini th, table.mini td { border-bottom: 1px solid var(--line); padding: 7px 9px; text-align: left; }
table.mini thead th { background: var(--surface-2); font-weight: 600; color: var(--ink-2); font-size: 12px; }
table.mini tbody tr:last-child td { border-bottom: none; }
table.mini td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.mini td.note-cell { color: var(--ink-3); font-size: 11.5px; }
.algo-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.75; margin: 14px 0 0; padding: 11px 13px; background: var(--surface-2); border-radius: var(--radius-sm); }
.algo-note b { color: var(--ink-2); }
.algo-note code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }
.log-list { margin: 8px 0; padding-left: 20px; font-size: 12px; color: var(--ink-2); line-height: 1.75; }
.desc { margin: 10px 0; font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.desc.tiaohou { padding: 10px 13px; background: rgba(183, 121, 31, .07); border-radius: var(--radius-sm); border-left: 3px solid var(--gold); }

/* ---------------- 旺衰 ---------------- */
.strength-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.str-badge {
  flex: 0 0 auto; width: 92px; height: 92px; border-radius: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface-2);
}
.str-badge b { font-family: var(--font-sans); font-size: 21px; font-weight: 700; letter-spacing: 0; }
.str-badge em { font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.str-badge.v-high b { color: var(--bad); }
.str-badge.v-low b { color: #2563eb; }
.str-badge.v-mid b { color: var(--ok); }
.str-meter { flex: 1; min-width: 240px; }
.meter-track {
  position: relative; height: 10px; border-radius: var(--radius-pill); margin: 8px 0 5px;
  background: linear-gradient(90deg, #60a5fa 0%, #93c5fd 26%, #cbd5e1 44%, #cbd5e1 56%, #fbbf24 74%, #f87171 100%);
}
.meter-fill {
  position: absolute; top: -4px; width: 3px; height: 18px; border-radius: 2px;
  background: var(--ink); box-shadow: 0 0 0 2px var(--surface); transition: left .4s ease;
}
.meter-mid { position: absolute; left: 50%; top: -2px; width: 1px; height: 14px; background: rgba(255, 255, 255, .7); }
.meter-labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); }
.meter-val { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }

.flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; margin: 16px 0; }
.flag { display: flex; gap: 7px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.flag span { flex: 0 0 auto; font-weight: 700; }
.flag b { flex: 0 0 auto; color: var(--ink); font-size: 12.5px; }
.flag em { font-style: normal; color: var(--ink-3); font-size: 11.5px; line-height: 1.6; }
.flag.ok { border-left: 3px solid var(--ok); }
.flag.ok span { color: var(--ok); }
.flag.no { border-left: 3px solid var(--line-2); }
.flag.no span { color: var(--ink-3); }

.kv { display: flex; gap: 10px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.kv .k { flex: 0 0 64px; color: var(--ink-3); }
.kv .v { flex: 1; color: var(--ink-2); }

.geju-box { padding: 15px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
.geju-name { font-family: var(--font-sans); font-size: 18px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.geju-name .tag { font-family: var(--font-sans); font-size: 11px; font-weight: 500; color: var(--accent); border: 1px solid currentColor; border-radius: var(--radius-xs); padding: 1px 8px; margin-left: 9px; vertical-align: middle; letter-spacing: 0; }
.evidence { margin: 8px 0 0; padding-left: 20px; font-size: 12px; color: var(--ink-3); line-height: 1.75; }

.ys-method { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 5px 13px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.ys-row { display: flex; gap: 9px; flex-wrap: wrap; }
.ys-chip { display: flex; flex-direction: column; gap: 2px; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); min-width: 84px; }
.ys-chip .lbl { font-size: 10.5px; color: var(--ink-3); }
.ys-chip .val { font-family: var(--font-serif); font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.ys-chip .val i { color: var(--ink-3); font-size: 14px; font-style: normal; font-weight: 400; }
.ys-chip.yong { border-color: rgba(21, 128, 61, .45); background: rgba(21, 128, 61, .07); }
.ys-chip.yong .lbl { color: var(--ok); }
.ys-chip.xi { border-color: rgba(21, 128, 61, .3); }
.ys-chip.ji { border-color: rgba(220, 38, 38, .4); background: rgba(220, 38, 38, .05); }
.ys-chip.ji .lbl { color: var(--bad); }
.ys-chip.chou { border-color: rgba(220, 38, 38, .28); }
.ys-chip.xian { opacity: .75; }

.advice { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 20px; }
.advice > div { display: flex; gap: 9px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.advice .k { flex: 0 0 64px; color: var(--ink-3); }
.advice .v { flex: 1; color: var(--ink-2); }

/* ---------------- 十神 ---------------- */
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ss-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; background: var(--surface-2); }
.ss-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.ss-card-head b { font-family: var(--font-sans); font-size: 14.5px; color: var(--accent); letter-spacing: .01em; }
.ss-card-head span { font-size: 10.5px; color: var(--ink-3); }
.ss-card-body { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.55; }

/* ---------------- 关系 ---------------- */
.rel-list { display: flex; flex-direction: column; gap: 8px; }
.rel-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.rel-item > summary { display: flex; align-items: center; gap: 10px; padding: 9px 13px; cursor: pointer; font-size: 12.5px; list-style: none; }
.rel-item > summary::-webkit-details-marker { display: none; }
.rel-item > summary:hover { background: var(--surface-2); }
.rel-type { flex: 0 0 auto; font-size: 11px; padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid currentColor; white-space: nowrap; }
.rel-text { flex: 1; color: var(--ink-2); }
.rel-score { flex: 0 0 auto; font-size: 11px; color: var(--ink-3); }
.rel-item ul { margin: 0; padding: 4px 14px 12px 32px; font-size: 11.5px; color: var(--ink-3); line-height: 1.75; }
.rel-he .rel-type { color: var(--ok); }
.rel-chong .rel-type, .rel-xing .rel-type { color: var(--bad); }
.rel-hui .rel-type { color: var(--gold); }
.rel-other .rel-type { color: var(--ink-3); }

/* ---------------- 神煞 ---------------- */
.ssb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 9px; }
.ssb-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.ssb-item > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; }
.ssb-item > summary::-webkit-details-marker { display: none; }
.ssb-item > summary:hover { background: var(--surface-3); }
.ssb-item > summary b { font-family: var(--font-sans); font-size: 13.5px; color: var(--gold); letter-spacing: .01em; }
.ssb-pos { font-size: 10.5px; color: var(--ink-3); background: var(--surface); padding: 2px 8px; border-radius: var(--radius-pill); }
.ssb-item .desc { padding: 0 12px; margin: 0 0 6px; font-size: 11.5px; }
.ssb-item .basis { padding: 0 12px 11px; margin: 0; font-size: 11px; color: var(--ink-3); line-height: 1.65; }
.ssb-item .basis span { display: inline-block; font-size: 10px; color: var(--accent); border: 1px solid currentColor; border-radius: var(--radius-xs); padding: 0 5px; margin-right: 6px; }

/* ---------------- 大运 ---------------- */
.yun-head { display: flex; gap: 8px 24px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-2); margin-bottom: 16px; }
.yun-item b { color: var(--accent); font-size: 13px; }
.yun-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); cursor: pointer; }
.yun-toggle input { accent-color: var(--accent); }
.yun-trend-wrap { overflow-x: auto; margin-bottom: 18px; padding-bottom: 4px; }
.yun-trend { height: 176px; display: block; }

.dayun-scroll { overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
.dayun-row { display: flex; gap: 9px; min-width: max-content; }
.dayun-card {
  flex: 0 0 auto; width: 94px; padding: 11px 7px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); text-align: center;
  transition: border-color .16s, box-shadow .16s, background .16s; user-select: none;
}
.dayun-card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }
.dayun-card.active { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.dayun-card.now::after { content: "今"; position: absolute; font-size: 9px; background: var(--accent); color: #fff; border-radius: 4px; padding: 0 4px; margin-left: 28px; margin-top: -6px; }
.dayun-card.pre { opacity: .5; cursor: default; }
.dayun-card.pre:hover { box-shadow: none; border-color: var(--line); }
.dy-gz { font-family: var(--font-serif); line-height: 1.15; }
.dy-ss { font-size: 10.5px; color: var(--ink-3); }
.dy-ss i { font-style: normal; opacity: .75; }
.dy-age { font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.dy-year { font-size: 10px; color: var(--ink-3); }
.dy-rate { font-size: 10.5px; font-weight: 600; margin-top: 3px; border-radius: 4px; }
.r-daji { color: var(--c-daji); }
.r-ji { color: var(--c-ji); }
.r-ping { color: var(--c-ping); }
.r-bu { color: var(--c-bu); }
.r-xiong { color: var(--c-xiong); }

.yun-detail { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.yd-head { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yd-head b { font-family: var(--font-serif); font-size: 20px; color: var(--accent); letter-spacing: .02em; }
.yd-head .rate { font-weight: 700; }
.liunian-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.ln-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 5px; cursor: pointer; background: var(--surface-2); text-align: center; transition: border-color .15s, box-shadow .15s; }
.ln-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.ln-card.active { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.ln-card.now { box-shadow: 0 0 0 2px var(--accent-ring); }
.ln-year { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ln-year em { font-style: normal; font-size: 10px; color: var(--ink-3); margin-left: 3px; }
.ln-gz { font-family: var(--font-serif); line-height: 1.15; font-size: 19px; }
.ln-ss { font-size: 10.5px; color: var(--ink-3); }
.ln-rate { font-size: 10.5px; font-weight: 600; }

.liuyue-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 6px; }
.ly-card { flex: 0 0 auto; width: 68px; padding: 7px 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
.ly-m { font-size: 10.5px; color: var(--ink-3); }
.ly-gz { font-family: var(--font-serif); font-size: 16px; line-height: 1.15; }
.ly-ss { font-size: 10px; color: var(--ink-3); }
.ly-k { font-size: 9.5px; color: var(--ink-3); opacity: .85; }

.xy-row { display: flex; gap: 7px; overflow-x: auto; padding: 8px 0; }
.xy-card { flex: 0 0 auto; min-width: 76px; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; }
.xy-age { display: block; font-size: 10.5px; color: var(--ink-3); }
.xy-gz { font-family: var(--font-serif); font-size: 16px; }
.xy-ss { display: block; font-size: 10px; color: var(--ink-3); }

/* ---------------- 弹窗 ---------------- */
.dlg {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0;
  max-width: 780px; width: calc(100vw - 40px); max-height: 88vh;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3);
}
.dlg::backdrop { background: rgba(12, 15, 20, .48); }
.dlg h2 { margin: 0; padding: 20px 26px 16px; font-family: var(--font-sans); font-size: 17px; font-weight: 700; letter-spacing: .01em; border-bottom: 1px solid var(--line); }
.dlg-body { padding: 18px 26px; overflow-y: auto; max-height: calc(88vh - 140px); font-size: 13px; line-height: 1.8; color: var(--ink-2); }
.dlg-body h3 { font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 22px 0 9px; letter-spacing: .01em; }
.dlg-body h3:first-child { margin-top: 0; }
.dlg-body ul, .dlg-body ol { padding-left: 22px; margin: 8px 0; }
.dlg-body li { margin: 5px 0; }
.dlg-body b { color: var(--ink); }
.dlg-body code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.dlg-body .field-grid { margin-top: 4px; }
.dlg-foot { padding: 16px 26px; border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; }

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--bg); padding: 11px 22px; border-radius: var(--radius-pill);
  font-size: 13px; box-shadow: var(--shadow-3); z-index: 999;
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: min(560px, 90vw);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- 页脚 ---------------- */
.foot { margin-top: 30px; padding: 18px 4px 0; border-top: 1px solid var(--line); }
.foot p { font-size: 11.5px; color: var(--ink-3); line-height: 1.8; margin: 0; }

/* ---------------- 打印 ---------------- */
@media print {
  html[data-theme="dark"] {
    --bg: #fff; --surface: #fff; --surface-2: #f7f8fa; --surface-3: #f1f3f5;
    --ink: #000; --ink-2: #333; --ink-3: #666; --line: #ddd; --line-2: #bbb;
    --accent: #c03a2d; --gold: #8a5d10;
  }
  body { background: #fff !important; background-image: none !important; font-size: 11px; }
  .app { max-width: none; padding: 0; }
  .topbar, .panel.input-panel, .foot, .export-bar, .yun-toggle, .toast, .dlg,
  .modnav, .drawer, .ai-panel, .ai-tools { display: none !important; }
  main > section, .result-card {
    break-inside: avoid; page-break-inside: avoid; box-shadow: none;
    border: 1px solid #ddd; margin-bottom: 10px; padding: 10px 12px;
  }
  .dayun-scroll, .yun-trend-wrap, .table-wrap, .liuyue-row, .xy-row { overflow: visible !important; }
  .dayun-row, .liuyue-row, .gua-row { flex-wrap: wrap; }
  .gz.big { font-size: 24px; }
  details.detail, .rel-item, .ssb-item { break-inside: avoid; }
  .score-card, .dim-item, .ly-point, .xlr-head { break-inside: avoid; }
  a[href]::after { content: ""; }
}

@media (max-width: 640px) {
  .app { padding: 14px 11px 34px; }
  .panel, main > section, .result-card { padding: 15px 14px; }
  .brand-text h1 { font-size: 19px; }
  .logo { width: 40px; height: 40px; font-size: 25px; border-radius: 11px; }
  .gz.big { font-size: 26px; }
  .strength-head { gap: 14px; }
}

/* ============================================================
 *  多模块扩展（导航 / 地区 / 档案 / 合盘 / 算卦 / AI）
 * ============================================================ */

/* ---------------- 模块导航 ---------------- */
.modnav {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 6px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.modnav .grow { flex: 1; }
.modtab {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0;
  padding: 10px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
}
.modtab:hover { color: var(--accent); background: var(--accent-soft); }
.modtab.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: var(--shadow-1); }
.modtab.active:hover { background: var(--accent-2); color: #fff; }

/* ---------------- 地区三级联动 ---------------- */
.region-row { align-items: center; }
.region-row select { min-width: 110px; max-width: 190px; }
.region-search { position: relative; }
.region-search input { min-width: 180px; }
.region-results {
  position: absolute; z-index: 40; top: calc(100% + 5px); left: 0; min-width: 310px;
  max-height: 320px; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-3);
}
.rg-item { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line); }
.rg-item:last-child { border-bottom: none; }
.rg-item:hover { background: var(--accent-soft); }
.rg-lon { color: var(--ink-3); font-size: 12px; flex: 0 0 auto; }

/* ---------------- 档案抽屉 ---------------- */
.drawer {
  position: fixed; top: 0; right: 0; width: min(560px, 96vw); height: 100vh;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3); z-index: 200;
  display: flex; flex-direction: column; padding: 18px 20px;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer-head b { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: .01em; }
.drawer-pick-hint { font-size: 12px; color: var(--accent); margin: 0 0 10px; }
.drawer-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.drawer-tools > input[type=text] { width: 100%; }
.drawer-tools-row { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.drawer-tools-row select { flex: 1; min-width: 96px; }
.prof-stats { font-size: 11.5px; color: var(--ink-3); margin: 2px 0 0; }
.prof-list { flex: 1; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 12px; }
.prof-empty { padding: 36px 12px; text-align: center; color: var(--ink-3); font-size: 13px; }
.prof-item {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 9px; background: var(--surface-2); transition: border-color .15s, box-shadow .15s;
}
.prof-item:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.prof-main { flex: 1; min-width: 0; }
.prof-name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prof-sex { font-size: 10.5px; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid; }
.prof-sex.m { color: #2563eb; border-color: rgba(37, 99, 235, .4); background: rgba(37, 99, 235, .08); }
.prof-sex.f { color: #db2777; border-color: rgba(219, 39, 119, .4); background: rgba(219, 39, 119, .08); }
.tag-chip { font-size: 10.5px; padding: 1px 8px; border-radius: var(--radius-pill); background: rgba(183, 121, 31, .1); color: var(--gold); border: 1px solid rgba(183, 121, 31, .22); }
.prof-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.prof-note { font-size: 12px; color: var(--ink-2); margin-top: 6px; padding: 5px 9px; background: var(--surface); border-radius: var(--radius-xs); white-space: pre-wrap; word-break: break-word; }
.prof-acts { display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; }
@media (max-width: 640px) { .drawer { width: 100vw; } }

/* ---------------- 合盘 ---------------- */
.hepan-slots { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.slot {
  flex: 1; min-width: 240px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; background: var(--surface-2); display: flex; flex-direction: column; gap: 9px;
}
.slot.empty { border-style: dashed; }
.slot-label { font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.slot-body { flex: 1; }
.slot-name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.slot-gz { font-family: var(--font-serif); font-size: 13px; color: var(--ink-2); letter-spacing: .02em; }
.slot-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.slot-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.slot-vs {
  align-self: center; font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--accent);
  width: 42px; height: 42px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent-ring); background: var(--accent-soft);
}
.hepan-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--gold); }
.score-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: var(--surface); margin-bottom: 14px; }
.score-card.g-ss { border-left: 4px solid var(--c-daji); }
.score-card.g-s { border-left: 4px solid var(--c-ji); }
.score-card.g-m { border-left: 4px solid var(--c-ping); }
.score-card.g-x { border-left: 4px solid var(--c-bu); }
.score-card.g-xx { border-left: 4px solid var(--c-xiong); }
.sc-num { display: flex; align-items: baseline; gap: 7px; }
.sc-num b { font-family: var(--font-sans); font-size: 44px; font-weight: 700; line-height: 1; color: var(--accent); }
.sc-num em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.sc-grade { display: inline-block; margin-left: 12px; font-size: 14px; font-weight: 600; padding: 3px 13px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); }
.sc-desc { font-size: 13px; color: var(--ink-2); margin: 12px 0; line-height: 1.8; }
.sc-bar { height: 9px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.sc-bar span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--c-xiong), var(--c-bu), var(--c-ping), var(--c-ji), var(--c-daji)); }
.sc-legend { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.dim-list { display: flex; flex-direction: column; gap: 8px; }
.dim-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.dim-item > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.dim-item > summary::-webkit-details-marker { display: none; }
.dim-item > summary:hover { background: var(--surface-2); }
.dim-name { flex: 0 0 120px; font-size: 13px; font-weight: 600; }
.dim-track { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.dim-track i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--ok); }
.dim-item.d-mid .dim-track i { background: var(--gold); }
.dim-item.d-bad .dim-track i { background: var(--bad); }
.dim-score { flex: 0 0 62px; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dim-score em { font-style: normal; color: var(--ink-3); font-size: 11px; }
.dim-verdict { flex: 0 0 auto; font-size: 11.5px; color: var(--ink-3); min-width: 60px; text-align: right; }
.dim-key { padding: 0 14px; font-size: 11.5px; color: var(--ink-3); font-family: var(--font-serif); }
.dim-item .desc { padding: 4px 14px 14px; margin: 0; }
.spouse-box { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 16px; background: var(--surface-2); }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.sp-head b { font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: var(--accent); letter-spacing: .01em; }
.sp-pct { font-size: 12px; color: var(--ink-3); }
.hepan-summary { font-size: 13.5px; line-height: 1.9; color: var(--ink-2); padding: 16px 18px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
table.cmptable td.k { color: var(--ink-3); font-size: 12px; white-space: nowrap; width: 88px; }
.gz-pill { display: inline-block; font-family: var(--font-serif); font-size: 16px; font-weight: 600; margin-right: 4px; }
.gz-pill.gz-day { color: var(--accent); }
.rel-he { background: rgba(21, 128, 61, .05); }
.rel-chong { background: rgba(220, 38, 38, .05); }
.row-hl { background: rgba(183, 121, 31, .1); }
.rel-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }

/* ---------------- 算卦 ---------------- */
.gua-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.gua-tab {
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0;
  padding: 8px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer; transition: background .16s, color .16s;
}
.gua-tab:hover { color: var(--accent); background: var(--accent-soft); }
.gua-tab.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); font-weight: 600; }
.gua-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 22px; }

/* 摇卦 */
.toss-list { display: flex; flex-direction: column; gap: 6px; }
.toss-row, .toss-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 12.5px;
}
.toss-row.done { border-color: rgba(21, 128, 61, .3); background: rgba(21, 128, 61, .05); }
.toss-idx { flex: 0 0 44px; color: var(--ink-3); font-size: 12px; }
.toss-coins { flex: 0 0 92px; display: flex; gap: 4px; }
.coin {
  width: 24px; height: 24px; border-radius: var(--radius-pill); display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px; font-style: normal;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
}
.coin.bei { background: rgba(183, 121, 31, .16); border-color: rgba(183, 121, 31, .45); color: var(--gold); font-weight: 700; }
.coin.zi { background: var(--surface-2); }
.coin.none { opacity: .4; }
.toss-yao { flex: 1; font-family: var(--font-serif); font-size: 13.5px; }
.toss-set { flex: 0 0 auto; font-size: 11.5px; padding: 4px 7px; }

/* 卦画 */
.hexa { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.hx-row { display: flex; align-items: center; gap: 5px; }
.hx-line { display: flex; gap: 5px; height: 11px; flex: 1; }
.hx-line i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.hx-line.yang i { flex: 1; }
.hx-line.yin i { flex: 1; }
.hx-line.yin i:first-child { margin-right: 8px; }
.hx-line.dong i { background: var(--accent); }
.hx-line.dong { box-shadow: 0 0 0 2px var(--accent-ring); border-radius: 3px; }
.hx-dong { font-size: 11px; color: var(--accent); width: 12px; }
.gua-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.gua-box { flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); min-width: 110px; }
.gua-box.compact { padding: 9px 11px; }
.gua-title { font-size: 11px; color: var(--ink-3); margin-bottom: 7px; }
.gua-body { margin-bottom: 8px; }
.gua-name { font-family: var(--font-serif); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.gua-name em { font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-left: 5px; font-family: var(--font-sans); }
.gua-sub { font-size: 10.5px; color: var(--ink-3); }
.hx-inline { display: inline-flex; gap: 3px; height: 9px; width: 34px; vertical-align: middle; }
.hx-inline i { display: block; height: 100%; background: var(--ink); border-radius: 2px; flex: 1; }
.hx-inline.yin i:first-child { margin-right: 5px; }
.hx-inline.dong i { background: var(--accent); }
.hx-dong-mark { font-size: 10px; color: var(--accent); margin-left: 3px; }

/* 六爻卦盘 */
.ly-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.ly-head-item { display: flex; flex-direction: column; }
.ly-head-item .k { font-size: 11px; color: var(--ink-3); }
.ly-head-item .v { font-size: 14px; color: var(--ink-2); }
.ly-head-item .v.big { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--accent); letter-spacing: .03em; }
.ly-head-item em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ly-arrow { font-size: 20px; color: var(--ink-3); }
.ly-meta { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.ly-meta b { color: var(--accent); }
table.liuyao { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 620px; }
table.liuyao th, table.liuyao td {
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 8px; text-align: center; vertical-align: middle; font-size: 13px;
}
table.liuyao th:first-child, table.liuyao td:first-child { border-left: 1px solid var(--line); }
table.liuyao thead th { border-top: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
table.liuyao tbody tr:last-child td { border-bottom: 1px solid var(--line); }
table.liuyao .col-ls { width: 58px; font-size: 12px; color: var(--ink-2); }
table.liuyao .col-fu { width: 96px; font-size: 12px; color: var(--gold); }
table.liuyao .col-fu i { font-style: normal; margin-left: 3px; font-size: 11px; }
/* 本卦列：爻象与纳甲同格左对齐（传统六爻盘排法） */
table.liuyao .col-gz { text-align: left; padding-left: 14px; font-family: var(--font-serif); font-size: 14.5px; }
table.liuyao .col-gz b { font-weight: 700; }
table.liuyao .col-gz i { font-style: normal; font-size: 12.5px; color: var(--accent); margin-left: 2px; }
.yao-cell { display: inline-flex; align-items: center; gap: 4px; width: 58px; margin-right: 10px; vertical-align: middle; }
.yao-cell em { font-style: normal; font-size: 10.5px; color: var(--ink-3); font-family: var(--font-sans); }
table.liuyao .col-bian { width: 130px; font-size: 13px; color: var(--ink-2); }
table.liuyao .col-bian i { font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-left: 3px; }
table.liuyao tr.row-yong { background: rgba(21, 128, 61, .07); }
table.liuyao tr.row-dong { box-shadow: inset 3px 0 0 var(--accent); }
.sy { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: var(--radius-xs); margin-left: 4px; border: 1px solid; }
.sy-shi { color: var(--accent); border-color: currentColor; }
.sy-ying { color: var(--ink-2); border-color: var(--line-2); }
.ly-yong { font-size: 10.5px; color: var(--ok); margin-left: 5px; }
.ly-yong.fu { color: var(--gold); }
.ws { font-size: 10.5px; color: var(--ink-3); margin-left: 4px; }
.kong { font-size: 10px; color: var(--bad); border: 1px solid currentColor; border-radius: var(--radius-xs); padding: 0 4px; margin-left: 4px; }
.ly-analysis { display: flex; flex-direction: column; gap: 7px; }
.ly-point {
  font-size: 12.5px; line-height: 1.8; color: var(--ink-2); padding: 10px 13px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--line-2); border-radius: var(--radius-sm);
}
.ly-point.warn { border-left-color: var(--gold); background: rgba(183, 121, 31, .06); }
.ys-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 9px; background: var(--surface-2); }
.ys-block-head { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 5px; }

/* 体用 */
.tiyong-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--surface-2); }
.tiyong-box.ty-daji, .tiyong-box.ty-ji { border-left: 4px solid var(--ok); }
.tiyong-box.ty-xiong, .tiyong-box.ty-daxiong { border-left: 4px solid var(--bad); }
.tiyong-box.ty-ping { border-left: 4px solid var(--line-2); }
.ty-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 9px; }
.ty-ti, .ty-yong { font-family: var(--font-serif); font-size: 19px; font-weight: 700; }
.ty-ti em, .ty-yong em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 5px; font-weight: 400; font-family: var(--font-sans); }
.ty-rel { font-size: 13.5px; color: var(--accent); font-weight: 700; padding: 3px 13px; border: 1px solid currentColor; border-radius: var(--radius-pill); }
.ty-luck { font-size: 13px; color: var(--ink-2); margin-left: auto; }
.mh-method { font-size: 12.5px; color: var(--ink-3); padding: 9px 13px; background: var(--surface-2); border-radius: var(--radius-sm); margin-bottom: 14px; }
.mh-mean > div { font-size: 12.5px; line-height: 1.85; color: var(--ink-2); margin-bottom: 6px; }
.mh-mean b { color: var(--accent); font-family: var(--font-serif); }

/* 小六壬 */
.xlr-head { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; text-align: center; background: var(--surface-2); margin-bottom: 16px; }
.xlr-head.ty-daji, .xlr-head.ty-ji { border-left: 4px solid var(--ok); }
.xlr-head.ty-xiong, .xlr-head.ty-daxiong { border-left: 4px solid var(--bad); }
.xlr-gua { font-family: var(--font-serif); font-size: 40px; font-weight: 700; letter-spacing: .16em; color: var(--accent); line-height: 1.2; }
.xlr-luck { font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.xlr-meta { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.xlr-wheel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-bottom: 16px; }
.xlr-cell { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 4px; text-align: center; background: var(--surface-2); }
.xlr-cell b { display: block; font-family: var(--font-serif); font-size: 14px; }
.xlr-cell em { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.xlr-cell.active { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.xlr-cell.active b { color: var(--accent); }
.xlr-cell.ty-daji b, .xlr-cell.ty-ji b { color: var(--ok); }
.xlr-cell.ty-xiong b, .xlr-cell.ty-daxiong b { color: var(--bad); }
.xlr-trace { display: flex; flex-direction: column; gap: 6px; }
.xlr-step { display: flex; align-items: center; gap: 12px; font-size: 12.5px; padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.xlr-step-idx { flex: 0 0 48px; color: var(--accent); font-weight: 700; }
.xlr-step-val { flex: 0 0 58px; color: var(--ink-3); }
.xlr-step-path { flex: 1; color: var(--ink-2); }
.xlr-jue {
  font-family: var(--font-serif); font-size: 14px; line-height: 2; color: var(--ink);
  padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm); margin-bottom: 12px;
}
.xlr-jue .lbl { display: block; font-family: var(--font-sans); font-size: 10.5px; color: var(--ink-3); margin-bottom: 5px; }

/* ---------------- AI 面板 ---------------- */
.ai-panel { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; background: var(--surface-2); }
.ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ai-title { margin: 0; font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; letter-spacing: .01em; color: var(--accent); }
.ai-title em { font-style: normal; font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; font-weight: 400; }
.ai-tools { display: flex; gap: 7px; flex-wrap: wrap; }
.ai-input { margin-bottom: 11px; }
.ai-ask { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-ask .ai-q { flex: 1; min-width: 220px; }
.ai-ask .ai-preset { flex: 0 0 auto; max-width: 240px; }
.ai-mode-hint { margin: 7px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.ai-mode-hint a { color: var(--accent); }
.ai-status { font-size: 12.5px; padding: 9px 13px; border-radius: var(--radius-sm); background: var(--surface-3); color: var(--ink-2); margin-bottom: 9px; }
.ai-status.ok { background: rgba(21, 128, 61, .1); color: var(--ok); }
.ai-status.bad { background: rgba(220, 38, 38, .09); color: var(--bad); }
.ai-status.warn { background: rgba(183, 121, 31, .12); color: var(--gold); }
.ai-output {
  font-size: 13.5px; line-height: 1.9; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px;
  background: var(--surface); max-height: 620px; overflow-y: auto;
}
.ai-h1, .ai-h2 { font-family: var(--font-sans); font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.ai-h3, .ai-h4 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--accent); margin: 11px 0 5px; }
.ai-p { margin: 6px 0; }
.ai-ul { margin: 6px 0 6px 20px; padding: 0; }
.ai-ul li { margin: 4px 0; }
.ai-gap { height: 7px; }
.ai-code { background: var(--surface-2); padding: 9px 11px; border-radius: var(--radius-xs); font-size: 12px; overflow-x: auto; }
.ai-table { border-collapse: collapse; margin: 9px 0; width: 100%; font-size: 13px; }
.ai-table th, .ai-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.ai-table th { background: var(--surface-2); font-weight: 600; color: var(--ink); white-space: nowrap; }
.ai-output b { color: var(--ink); }
.ai-output code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.prov-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-test-result { font-size: 12.5px; margin: 12px 0 0; min-height: 18px; }
.ai-test-result.ok { color: var(--ok); }
.ai-test-result.bad { color: var(--bad); }

textarea {
  font-family: var(--font-sans); font-size: 13px; padding: 8px 11px; width: 100%;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--ink); resize: vertical; line-height: 1.7;
}
#textDialogBody { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }

/* ---------------- 经度微调（县内精细定位） ---------------- */
.lon-fine { margin-top: 10px; padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.lf-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lf-label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex: 0 0 auto; }
.lon-fine input[type="range"] {
  flex: 1; min-width: 200px; max-width: 420px; height: 4px; -webkit-appearance: none; appearance: none;
  background: var(--line-2); border-radius: var(--radius-pill); outline: none; cursor: pointer;
}
.lon-fine input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); box-shadow: var(--shadow-1); cursor: grab;
}
.lon-fine input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--surface); box-shadow: var(--shadow-1); cursor: grab;
}
.lf-limits { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); flex: 0 0 auto; }
.lf-limits i { font-style: normal; font-variant-numeric: tabular-nums; }
.lf-limits em { font-style: normal; opacity: .75; }
.lf-read { font-size: 12.5px; color: var(--ink-2); flex: 0 0 auto; margin-left: auto; }
.lf-read b { color: var(--accent); font-variant-numeric: tabular-nums; }
.lf-read em { font-style: normal; color: var(--ink-3); font-size: 11.5px; margin-left: 3px; }
#fTown { max-width: 300px; }

/* ---------------- 档案关联横幅 ---------------- */
.prof-banner {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 10px 14px; font-size: 12.5px; color: var(--ink-2);
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  border-radius: var(--radius-sm);
}
.prof-banner .pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.prof-banner b { color: var(--accent); }
.prof-banner em { font-style: normal; color: var(--ink-3); }
.prof-banner .pb-tip { color: var(--ink-3); font-size: 11.5px; }
.prof-banner.dirty .pb-tip { color: var(--gold); }
.prof-banner .btn { margin-left: auto; }
.prof-main { cursor: pointer; }
.prof-main:hover .prof-name { color: var(--accent); }

/* ============================================================
 *  紫微斗数模块
 * ============================================================ */

/* ---------------- 模块操作条 ---------------- */
.zw-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.zw-source { font-size: 12.5px; color: var(--ink-2); }
.zw-source b { color: var(--accent); }
.zw-source .src-from { color: var(--ink-3); font-size: 11.5px; }
.zw-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-left: auto; }
.zw-year { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.zw-year input { max-width: 110px; }

/* ---------------- 十二宫方盘 ---------------- */
.zi-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(150px, auto));
  gap: 8px; margin: 16px 0 10px;
  background: var(--surface-2); padding: 8px; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.zp {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: 9px 10px;
  display: flex; flex-direction: column; gap: 5px; min-height: 150px;
  position: relative; transition: box-shadow .15s, border-color .15s;
}
.zp:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.zp-soul { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 3px var(--accent-ring); }
.zp-body { background: linear-gradient(180deg, var(--surface) 60%, var(--accent-soft)); }
.zp-now { outline: 2px dashed var(--gold); outline-offset: -4px; }
.zp-empty { background: var(--surface-2); }

.zp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.zp-name { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--ink); }
.zp-gz { font-family: var(--font-serif); font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; }
.zp-stars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.zp-major { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.zp-nomajor { font-size: 11px; color: var(--ink-3); font-style: italic; }
.zp-minor { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.zp-adj { display: flex; flex-wrap: wrap; gap: 2px 5px; opacity: .8; }
.zp-foot { display: flex; align-items: center; gap: 5px; padding-top: 4px; border-top: 1px solid var(--line); }
.zp-age { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.zp-tag {
  font-size: 9.5px; padding: 0 5px; border-radius: var(--radius-xs);
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-ring);
}
.zp-tag.body { background: rgba(37, 99, 235, .1); color: #2563eb; border-color: rgba(37, 99, 235, .3); }
.zp-tag.now { background: rgba(183, 121, 31, .14); color: var(--gold); border-color: rgba(183, 121, 31, .35); margin-left: auto; }

/* 星曜 */
.st { font-family: var(--font-serif); font-size: 14px; font-weight: 600; white-space: nowrap; }
.st-major { color: var(--accent); font-size: 14.5px; }
.st-minor { color: var(--ink-2); font-size: 12px; }
.st-adj { color: var(--ink-3); font-size: 11px; font-weight: 400; }
.br { font-family: var(--font-sans); font-style: normal; font-size: 10px; margin-left: 1px; color: var(--ink-3); }
.br-strong { color: var(--ok); }
.br-weak { color: var(--bad); }
.mut {
  font-family: var(--font-sans); font-style: normal; font-size: 9.5px; font-weight: 700;
  padding: 0 4px; border-radius: var(--radius-xs); margin-left: 3px; border: 1px solid;
}
.mut-lu { color: #15803d; border-color: rgba(21, 128, 61, .4); background: rgba(21, 128, 61, .1); }
.mut-quan { color: #2563eb; border-color: rgba(37, 99, 235, .4); background: rgba(37, 99, 235, .1); }
.mut-ke { color: #b7791f; border-color: rgba(183, 121, 31, .4); background: rgba(183, 121, 31, .12); }
.mut-ji { color: #dc2626; border-color: rgba(220, 38, 38, .4); background: rgba(220, 38, 38, .1); }

/* 中央信息区 */
.zi-center {
  grid-column: 2 / 4; grid-row: 2 / 4;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.zi-row { display: flex; gap: 9px; font-size: 12.5px; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.zi-row:last-child { border-bottom: none; }
.zi-row .k { flex: 0 0 62px; color: var(--ink-3); font-size: 12px; }
.zi-row .v { flex: 1; color: var(--ink); }
.zi-row .v b { color: var(--accent); font-family: var(--font-serif); font-size: 14px; }
.gz-row { display: inline-flex; gap: 2px; font-size: 14px; }
.gz-row .gz-pill { margin-right: 8px; }

/* 图例 */
.zi-legend {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px;
}
.zi-legend > span { display: inline-flex; align-items: center; gap: 4px; }
.zi-legend .mut { margin-left: 0; }

/* 三方四正 */
.sf-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (max-width: 760px) { .sf-row { grid-template-columns: repeat(2, 1fr); } }
.sf-cell {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 11px 13px;
  display: flex; flex-direction: column; gap: 3px;
}
.sf-self { border-color: var(--accent); border-width: 2px; }
.sf-lab { font-size: 10.5px; color: var(--ink-3); }
.sf-cell b { font-size: 14px; color: var(--ink); }
.sf-cell em { font-style: normal; font-family: var(--font-serif); font-size: 12.5px; color: var(--ink-3); }
.sf-stars { font-family: var(--font-serif); font-size: 12.5px; color: var(--accent); margin-top: 3px; }

.zi-mean .evidence li { margin: 4px 0; }
.zi-table td.note-cell { font-family: var(--font-serif); }

@media (max-width: 900px) {
  .zi-board { grid-template-rows: repeat(4, minmax(120px, auto)); }
  .zp { min-height: 120px; padding: 7px; }
  .st-major { font-size: 12px; }
  .zi-center { padding: 10px; }
  .zi-row .k { flex: 0 0 52px; }
}

@media print {
  .zi-board { break-inside: avoid; background: #fff; }
  .zp { break-inside: avoid; }
  .zp-soul { box-shadow: none; }
}

/* ---------------- 顶栏「护眼/字号」控件 ---------------- */
.eyeball {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3);
}
.eyeball select { padding: 5px 8px; font-size: 12.5px; border-radius: var(--radius-xs); }

/* ---------------- 大运与原局关系标注 ---------------- */
.dy-rel { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.rel-mini {
  display: inline-block; font-size: 9.5px; line-height: 1.5; padding: 1px 5px;
  border-radius: var(--radius-xs); background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-3); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.rel-mini.rm-good { color: var(--ok); border-color: rgba(21, 128, 61, .35); background: rgba(21, 128, 61, .07); }
.rel-mini.rm-bad { color: var(--bad); border-color: rgba(220, 38, 38, .3); background: rgba(220, 38, 38, .06); }
.yd-rel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.yd-rel .lbl { font-size: 11.5px; color: var(--ink-3); flex: 0 0 auto; }

/* ---------------- 紫微宫位点击（三方四正高亮） ---------------- */
.zp-click { cursor: pointer; }
.zp-click:hover { border-color: var(--accent); }
.zp.sf-on { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-ring); }
.zp.sf-on .zp-name { color: var(--accent); }
.zi-click-hint { color: var(--accent); font-weight: 600; }
.zi-tip {
  margin-top: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.75; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.zi-tip b { color: var(--accent); }
.zi-tip .zp-tag { margin: 0 4px; }

/* ---------------- 中西星座 ---------------- */
.zc-wrap { margin-top: 4px; }
.zc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.zc-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 4px; transition: box-shadow .16s;
}
.zc-card:hover { box-shadow: var(--shadow-2); }
.zc-label { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.zc-label em { font-style: normal; font-size: 10px; opacity: .7; }
.zc-sign { font-family: var(--font-sans); font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.zc-deg { font-size: 10.5px; color: var(--ink-3); }
.zc-ele { display: flex; gap: 5px; flex-wrap: wrap; font-size: 11px; margin-top: 2px; }
.zc-ele .el-fire { color: var(--bad); }
.zc-ele .el-earth { color: var(--gold); }
.zc-ele .el-air { color: var(--ok); }
.zc-ele .el-water { color: #2563eb; }
.zc-mode, .zc-ruler { color: var(--ink-3); }
.zc-note { font-size: 11px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.zc-na-text { font-size: 12px; color: var(--ink-3); padding: 12px 0; }
.zc-na { border-style: dashed; }

/* 元素对照 */
.ele-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.ele-item {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 13px; flex-wrap: wrap;
}
.ele-item.ele-user { border-color: var(--accent); border-width: 2px; background: var(--accent-soft); }
.ele-zodiac { font-weight: 700; font-size: 14px; }
.ele-arrow { color: var(--ink-3); }
.ele-you { font-size: 11px; color: var(--accent); margin-left: auto; }
.zi-mean.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .zi-mean.two-col { grid-template-columns: 1fr; } .ele-map { grid-template-columns: 1fr; } }

/* ---------------- 星座名称对照表 ---------------- */
.nametable td b { font-family: var(--font-serif); }
.nametable .muted { font-size: 11.5px; }

/* ---------------- 荣格八维 ---------------- */
.jung-group { margin-bottom: 22px; }
.jung-group-head { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.jung-group-head b { font-size: 14px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.jung-group-head em { font-style: normal; font-size: 12px; color: var(--ink-3); margin-left: 9px; }
.jung-q { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; background: var(--surface-2); }
.jq-text { flex: 1; font-size: 13.5px; line-height: 1.7; color: var(--ink); }
.jq-scale { display: flex; gap: 5px; flex: 0 0 auto; flex-wrap: wrap; }
.jq-opt { cursor: pointer; user-select: none; }
.jq-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.jq-opt span {
  display: inline-block; padding: 4px 11px; border-radius: var(--radius-xs);
  border: 1px solid var(--line-2); background: var(--surface); font-size: 11.5px;
  color: var(--ink-3); transition: all .14s; white-space: nowrap;
}
.jq-opt:hover span { border-color: var(--accent); color: var(--accent); }
.jq-opt.checked span {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600;
}
.jq-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -1px; }
.jq-fn-tag {
  flex: 0 0 30px; text-align: center; font-size: 10px; color: var(--ink-3);
  background: var(--surface-3); border-radius: var(--radius-xs); padding: 2px 4px;
  cursor: help; align-self: center;
}
.mbti-hero {
  display: flex; align-items: center; gap: 20px; padding: 20px 24px;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  border-radius: var(--radius); margin-bottom: 16px;
}
.mbti-type b {
  font-family: var(--font-sans); font-size: 48px; font-weight: 800;
  letter-spacing: .04em; color: var(--accent);
}
.mbti-desc { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.8; }
.jf-bars { display: flex; flex-direction: column; gap: 8px; }
.jf-row { display: grid; grid-template-columns: 34px 70px 1fr 40px 28px; gap: 9px; align-items: center; }
.jf-row.jf-top { background: var(--accent-soft); border-radius: var(--radius-xs); padding: 3px 5px; margin: -3px -5px; }
.jf-code { font-family: var(--font-sans); font-weight: 800; font-size: 14px; text-align: center; }
.jf-cn { font-size: 12.5px; color: var(--ink-2); }
.jf-track { height: 12px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.jf-track i { display: block; height: 100%; border-radius: var(--radius-pill); transition: width .5s ease; }
.jf-val { font-size: 12px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.jf-rank { font-size: 10px; color: var(--ink-3); text-align: center; }
.js-list { display: flex; flex-direction: column; gap: 8px; }
.js-item {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  flex-wrap: wrap;
}
.js-rank { font-size: 11px; font-weight: 700; color: var(--accent); flex: 0 0 32px; }
.js-code { font-family: var(--font-sans); font-size: 16px; font-weight: 800; color: var(--ink); flex: 0 0 30px; }
.js-cn { font-size: 13px; color: var(--ink-2); flex: 0 0 72px; }
.js-role { font-size: 11px; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: var(--radius-pill); }
.js-desc { flex: 1; font-size: 12px; color: var(--ink-3); min-width: 200px; }
.jf-desc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.jf-desc-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--surface-2); }
.jf-desc-head { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.jf-desc-head b { font-family: var(--font-sans); font-size: 15px; }
.jf-desc-head em { font-style: normal; font-size: 10.5px; color: var(--accent); }
.jf-desc-head .jf-score-badge { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.jf-desc-text { font-size: 12px; color: var(--ink-2); margin: 3px 0; line-height: 1.7; }
.jf-desc-kw { font-size: 10.5px; color: var(--ink-3); margin: 3px 0 0; }

/* ---------------- 荣格人格形象卡 ---------------- */
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 18px; }
@media (max-width: 760px) { .persona-grid { grid-template-columns: 1fr; } }
.persona-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 18px 16px; text-align: center;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.persona-card.persona-main { border-color: var(--accent); border-width: 2px; box-shadow: var(--shadow-2); }
.persona-role { font-size: 10.5px; font-weight: 700; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; }
.persona-icon { font-size: 42px; line-height: 1; margin: 4px 0; }
.persona-name { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
.persona-fn { font-size: 11px; color: var(--ink-3); font-family: var(--font-sans); }
.persona-desc { font-size: 12px; color: var(--ink-2); line-height: 1.75; margin-top: 4px; }
.persona-detail { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: var(--surface-2); margin-top: 12px; }
.persona-detail b { font-family: var(--font-serif); font-size: 16px; color: var(--accent); }
.persona-detail p { font-size: 13px; color: var(--ink-2); margin: 8px 0; line-height: 1.8; }
.persona-detail .hint { font-size: 11.5px; }
.persona-mini { font-size: 11.5px; color: var(--gold); font-family: var(--font-serif); margin: 3px 0; }
.persona-mini::before { content: "→ "; opacity: .6; }

.jung-flat { display: flex; flex-direction: column; gap: 6px; }
.jung-flat .jung-q { border-left: 3px solid var(--line); }
.jung-flat .jung-q:hover { border-left-color: var(--accent); }
.persona-tagline { font-size: 11.5px; color: var(--gold); font-style: italic; margin: 2px 0; }
.persona-match { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }