/* ============================================================
 * 西洋星盘 · 界面样式
 *
 *   两件事最要紧：
 *     1) **移动端优先** —— 第一屏就是顶栏 + 盘型切换 + 星盘；
 *        输入表单和设置都在浮层（sheet）里，不占主视图。
 *     2) **微信内置浏览器**（X5 / WKWebView）单独照顾，见最下面的 body.is-wechat。
 *
 *   深色为默认；浅色主题在 [data-theme="light"] 中覆盖同名变量。
 * ============================================================ */

:root,
[data-theme="dark"] {
  /* 让滚动条、下拉框等浏览器原生部件也跟着走深色 */
  color-scheme: dark;
  --bg:        #0d1017;
  --bg-soft:   #121722;
  --panel:     #151a26;
  --panel-2:   #1a2130;
  --panel-3:   #20283a;
  --line:      #232b3d;
  --line-soft: #2c3648;
  --text:      #e8eefc;
  --text-dim:  #9aa6c2;
  --text-mute: #6f7c99;
  --accent:    #d9a441;
  --accent-2:  #6fb7d8;
  --good:      #5f9e6e;
  --bad:       #e2574c;
  --warn:      #d8a83a;
  --halo:      #151a26;
  --radius:    10px;
  --radius-sm: 6px;
  --shadow:    0 4px 24px rgba(0, 0, 0, .45);
  --glow-a:    rgba(217, 164, 65, .09);
  --glow-b:    rgba(111, 183, 216, .08);
  --hover:     rgba(255, 255, 255, .025);
  --row-alt:   rgba(255, 255, 255, .014);
  --hl-row:    rgba(217, 164, 65, .07);
  --hl-strong: rgba(217, 164, 65, .12);
  --btn-grad-a: #e0ae4c;
  --btn-grad-b: #c8933a;
  --btn-grad-border: #b8862f;
  --btn-text:  #21190a;
  /* 吸顶条用**实底**，不用半透明 + backdrop-filter：
     微信安卓端（X5 内核）不一定支持 backdrop-filter，
     不支持时半透明底会让下面滚动的内容透出来，很难看。实底最稳。 */
  --top-bg:    #0d1017;
  --font: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sym: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", var(--font);
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* 布局尺度：窄屏一套值，≥ 760px 再放大（见文件末的 media query） */
  --pad: 13px;      /* .wrap 的左右内边距 */
  --ppad: 15px;     /* .panel 的左右内边距（星盘通栏时要把它算进去） */
  --tap: 40px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg:        #f4f5f8;
  --bg-soft:   #ffffff;
  --panel:     #ffffff;
  --panel-2:   #f7f8fa;
  --panel-3:   #eef0f4;
  --line:      #e3e6ec;
  --line-soft: #d3d8e0;
  --text:      #1b1f27;
  --text-dim:  #4b5563;
  --text-mute: #7b8494;
  --accent:    #a8791f;
  --accent-2:  #2563a8;
  --good:      #2e7d4f;
  --bad:       #c0392b;
  --warn:      #9a7a12;
  --halo:      #ffffff;
  --shadow:    0 2px 14px rgba(20, 26, 40, .10);
  --glow-a:    rgba(168, 121, 31, .06);
  --glow-b:    rgba(37, 99, 168, .05);
  --hover:     rgba(20, 26, 40, .035);
  --row-alt:   rgba(20, 26, 40, .018);
  --hl-row:    rgba(168, 121, 31, .09);
  --hl-strong: rgba(168, 121, 31, .15);
  --btn-grad-a: #c8952f;
  --btn-grad-b: #a8791f;
  --btn-grad-border: #8f661a;
  --btn-text:  #ffffff;
  --top-bg:    #f4f5f8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 微信 / 部分安卓浏览器会「自动放大」正文，关掉它，否则排版全乱 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ============================================================
 * 首屏防闪（FOUC）
 *
 *   两件事在「第一次绘制」时都还没定下来，都会闪一下：
 *
 *   ① **主题**：真正读主题的代码在页面底部那堆脚本里（约 530KB），
 *      而 <html> 上写死的 data-theme="dark" 会先按深色画一帧 ——
 *      这就是「打开时一闪而过是深色」。现在由 <head> 里那段内联脚本
 *      在首次绘制之前就把 data-theme 定好（见 index.html）。
 *
 *   ② **空态**：「还没有出生资料」在 HTML 里是默认显示的，
 *      而从紫微站带资料过来时它是错的 —— 会先闪一下「请填写资料」再变成星盘。
 *      boot 一跑起来就会摘掉 .booting；万一 JS 挂了，
 *      <head> 里那个 8 秒兜底定时器也会摘掉它（不能一直白屏）。
 * ============================================================ */
body.booting #emptyState { display: none; }

body {
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--glow-a), transparent 62%),
    radial-gradient(950px 560px at 92% 4%, var(--glow-b), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  min-height: 100dvh;      /* 移动端地址栏收起/展开时更准 */
  transition: background-color .18s, color .18s;
  /* ⚠ 这里**不能**写 overflow-x: hidden —— 会让 .top-sticky 的 position:sticky 失效。
     横向溢出靠各个容器自己 overflow-x:auto 解决。 */
}

/* 浮层打开时锁住背后滚动 */
body.sheet-open { overflow: hidden; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- 布局 ---------------- */
.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad) 40px;
}

/* 顶栏 + 盘型切换：吸顶。
   负外边距是为了让它铺满整屏宽（否则滚动时两侧留缝，内容从缝里透出来）。 */
.top-sticky {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0 calc(-1 * var(--pad));
  padding: calc(env(safe-area-inset-top, 0px)) var(--pad) 0;
  background: var(--top-bg);
  border-bottom: 1px solid var(--line);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 0;
}
.topbar .spacer { flex: 1; }

.brand { display: flex; align-items: center; gap: 7px; min-width: 0; }
.brand h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .04em;
  white-space: nowrap;
  /* 顶栏挤的时候宁可省略号，也别把布局撑破 */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.brand-link,
.brand-link:hover,
.brand-link:visited,
.brand-link:active {
  color: inherit;
  text-decoration: none;
}
.brand .glyph {
  font-family: var(--font-sym);
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
}

.topbar-actions { display: flex; gap: 6px; align-items: center; flex: none; }

/* ---------------- 按钮 ---------------- */
.btn {
  appearance: none;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 14px;
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
  white-space: nowrap;
}
.btn:hover { background: var(--panel-3); border-color: #3a4761; }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, var(--btn-grad-a), var(--btn-grad-b));
  border-color: var(--btn-grad-border);
  color: var(--btn-text);
  font-weight: 650;
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 11px; font-size: 12.5px; min-height: 34px; }
.btn.wide { width: 100%; }
.btn.active { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 盘面工具条：手机上两列，够点 */
.wheel-tools { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.wheel-tools .btn { width: 100%; }

/* ---------------- 盘型切换 ---------------- */
.chartmode {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 0 9px;
}
.chartmode button {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 13px;
  /* 让每一颗药丸自己撑开：九种盘型在窄屏上排成两行，全都看得见、点得到 */
  flex: 1 1 auto;
  min-width: 3.9em;
  min-height: 36px;
  padding: 6px 6px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  transition: background .14s, color .14s, border-color .14s;
}
.chartmode button:hover { background: var(--panel-3); color: var(--text); }
.chartmode button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--btn-text);
  font-weight: 650;
}

/* ---------------- 推运日期条 ---------------- */
.datebar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 11px;
  margin: 11px 0 0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
}
.datebar label { color: var(--text-mute); white-space: nowrap; }
.datebar .dateinput {
  flex: 1 1 130px;
  min-width: 0;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
}
.checkline.inline { padding-top: 0; }

/* ---------------- 卡片 / 面板 ---------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px var(--ppad);
  margin-bottom: 13px;
}
.panel.tight { padding: 12px 13px; }
.head-panel { padding: 12px 14px; margin-top: 11px; }

.panel-title {
  margin: 0 0 13px;
  font-size: 15px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-title::before {
  content: "";
  width: 3px; height: 15px;
  background: var(--accent);
  border-radius: 2px;
}
.panel-title .hint {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-mute);
  margin-left: auto;
}

/* 面板底部的操作行：「出生资料」那张主页面面板用它放「排盘 / 用当前时间」
   （站长 2026-09-27 恢复主页面面板时一并搬回来 —— 原来在 .sheet-actions 里，
   浮层没了，用回的是一开始那个 .row-actions） */
.row-actions {
  display: flex;
  gap: 11px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.row-actions .spacer { flex: 1; }
.row-actions .note { margin: 0; }

/* ---------------- 表单 ---------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 11px 12px;
}
.form-grid + .form-grid { margin-top: 12px; }
/* 年月日时分这种小控件用紧凑版：窄屏一行放得下五个 */
.form-grid.compact { grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 8px; }
/* 出生地点 + 经度 + 纬度 + 时区：**四个固定排同一行**（站长 2026-09-27 要求）。
 * 不能用父类的 auto-fit —— 那会按容器宽度自己算列数，不保证同一行。
 * 地点那格给宽一点（它里面有输入框 + 「查询经纬度」按钮 + 检索提示）。
 * align-items:start 是因为地点格底下会多出提示行，别把别的框一起拉高。 */
.form-grid.birthplace {
  grid-template-columns: minmax(190px, 2.2fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(112px, 1.15fr);
  align-items: start;
}
/* 窄屏放不下四个：地点独占一行，经度 / 纬度 / 时区挤第二行 */
@media (max-width: 700px) {
  .form-grid.birthplace { grid-template-columns: 1fr 1fr; }
  .form-grid.birthplace > .field:first-child { grid-column: span 2; }
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.wide { grid-column: span 2; }
.field.rel { position: relative; }
.field label {
  font-size: 12.5px;
  color: var(--text-dim);
  letter-spacing: .03em;
}
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-family: inherit;
  /* 16px：iOS 上小于 16px 的输入框会被自动放大页面 */
  font-size: 16px;
  padding: 8px 10px;
  min-height: var(--tap);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
                    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}
.field input:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--hl-strong);
}
.field .note { font-size: 11.5px; color: var(--text-mute); line-height: 1.5; }
/* 出生地输入框下方的检索提示区（别名兜底 / 搜不到时的指路）。
   空着的时候不占高度，免得把表单撑开。 */
.field .note.city-hint { max-width: 100%; }
.field .note.city-hint:empty { display: none; }
.field .note.city-hint.warn { color: var(--warn); }
.note { font-size: 12px; color: var(--text-mute); line-height: 1.6; }
.note.inline { display: inline; margin-left: 6px; font-size: 11.5px; }

.row-inline { display: flex; gap: 8px; align-items: stretch; }
.row-inline input { flex: 1; min-width: 0; }
.row-inline .with-clear { flex: 1; min-width: 0; }
.row-inline .btn { flex: none; }

/* 输入框内 × 清空（与 zx / bz 同款；有内容才显示） */
.with-clear { position: relative; width: 100%; }
.with-clear > input { padding-right: 34px; width: 100%; }
.with-clear > .inp-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-mute); font-size: 18px; line-height: 1;
  cursor: pointer; display: grid; place-items: center; padding: 0; font-family: inherit;
}
.with-clear > .inp-clear[hidden] { display: none; }
.with-clear > .inp-clear:hover { background: var(--hl-strong); color: var(--text); }

.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  min-height: 26px;
  user-select: none;
  cursor: pointer;
}
.checkline input[type="checkbox"] {
  width: 17px; height: 17px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

/* 一行里并排放几个勾选项（夏令时那两个）：窄屏自动折行 */
.check-row { display: flex; flex-wrap: wrap; gap: 2px 20px; }

/* 下拉的城市候选 */
.citybox {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 30;
  margin-top: 6px;
  padding: 6px;
  max-height: 260px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------------- 提示条 ---------------- */
.msg {
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin: 11px 0 0;
  border: 1px solid;
  line-height: 1.65;
}
.msg.ok   { background: rgba(95, 158, 110, .1);  border-color: rgba(95, 158, 110, .38);  color: #9fd0ac; }
.msg.err  { background: rgba(226, 87, 76, .1);   border-color: rgba(226, 87, 76, .4);    color: #f0a49d; }
.msg.warn { background: rgba(216, 168, 58, .1);  border-color: rgba(216, 168, 58, .38);  color: #e2c47c; }
.msg.info { background: rgba(111, 183, 216, .09); border-color: rgba(111, 183, 216, .32); color: #a8d3e8; }

/* ---------------- 盘面头部信息 ---------------- */
.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.chart-head .who h2 {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: .03em;
}
.chart-head .who .meta {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.7;
}
.chart-head .who .meta .k { color: var(--text-mute); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  font-size: 11.5px;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  color: var(--text-dim);
  white-space: nowrap;
}
.badge.accent { border-color: var(--accent); color: var(--accent); background: var(--hl-row); }
.badge.info   { border-color: var(--accent-2); color: var(--accent-2); background: var(--hl-row); }

/* ---------------- 页签 ---------------- */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 13px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-mute);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 13px;
  min-height: var(--tap);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tabs button:hover { color: var(--text-dim); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

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

/* ---------------- 星盘区 ---------------- */
.wheel-row {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.wheel-box { position: relative; }
.wheel-box svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.legend-list { display: flex; flex-direction: column; gap: 1px; }

/* ---------------- 表格 ---------------- */
.tbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
/* 互容接纳「只看庙旺」开关 */
.rec-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rec-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; user-select: none; }
.rec-toggle input { margin: 0; }
.rec-count { font-size: 12.5px; color: var(--text-dim); }
.rec-major-only .rec-minor { display: none; }
table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 460px;
}
table.grid th, table.grid td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.grid thead th {
  background: var(--panel-2);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  position: sticky;
  top: 0;
  z-index: 1;
}
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: var(--hover); }
table.grid td.c, table.grid th.c { text-align: center; }
table.grid td.r, table.grid th.r { text-align: right; }
table.grid td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.grid tr.sub-row td { background: var(--row-alt); font-size: 12.5px; color: var(--text-dim); }
table.grid tr.hl td { background: var(--hl-row); }

.sym { font-family: var(--font-sym); font-size: 17px; line-height: 1; }
.planet-cell { display: inline-flex; align-items: center; gap: 6px; }
.planet-cell .nm { font-size: 13px; }
.rx { color: var(--bad); font-size: 12px; }

.tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  color: var(--text-dim);
  margin-right: 4px;
  line-height: 1.6;
}
.tag.dom  { border-color: rgba(217,164,65,.55); color: #e6c06a; background: rgba(217,164,65,.1); }
.tag.exa  { border-color: rgba(111,183,216,.55); color: #8fcbe8; background: rgba(111,183,216,.1); }
.tag.tri  { border-color: rgba(95,158,110,.5);  color: #93c9a1; background: rgba(95,158,110,.1); }
.tag.trm  { border-color: rgba(155,150,200,.45); color: #b3aede; background: rgba(155,150,200,.09); }
.tag.fac  { border-color: rgba(140,150,175,.4); color: #a8b3ca; background: rgba(140,150,175,.08); }
.tag.neg  { border-color: rgba(226,87,76,.5);   color: #ee9a92; background: rgba(226,87,76,.1); }
.tag.warn { border-color: rgba(216,168,58,.5);  color: #e2c47c; background: rgba(216,168,58,.1); }

.score { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.score.pos { color: var(--good); }
.score.neg { color: var(--bad); }
.score.zero { color: var(--text-mute); }

/* ---------------- 相位网格 ----------------
   相位图（三角阶梯）是复刻 almuten.net 的**白纸**版面：白底、灰格、墨色天体。
   所以这里不做深浅主题适配 —— 参考站就是白纸，暗色界面上它像一张贴着的图纸。
   尺寸也不铺满：原站 #aspgrid 是固定 400px，这里给 560px 上限，
   手机上自然按容器宽度缩放。 */
.aspect-triangle { display: block; margin: 0 auto; max-width: 560px; width: 100%; }
.aspect-grid { max-width: 720px; display: block; margin: 0 auto; width: 100%; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }

/* 相位图的存图/复制条 —— 只有一个按钮，不用 .wheel-tools 那种两列栅格 */
.aspect-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.aspect-tools .hint { font-size: 12px; color: var(--text-mute); }

/* ---------------- 法达 / 小限 ---------------- */
.firdaria-cols {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 11px;
}
.fd-col {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.fd-col .hd {
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-3);
}
.fd-col .hd .nm { font-weight: 600; font-size: 13.5px; }
.fd-col .hd .yrs { margin-left: auto; font-size: 11.5px; color: var(--text-mute); font-family: var(--mono); }
.fd-col .hd .rng { font-size: 11px; color: var(--text-mute); }
.fd-col ul { list-style: none; margin: 0; padding: 5px 0; }
.fd-col li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.fd-col li.now { background: var(--hl-strong); color: var(--accent); }
.fd-col li .d { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-mute); }
.fd-col li.now .d { color: var(--accent); }

/* ---------------- 空态 ---------------- */
.empty { text-align: center; padding: 42px 18px; color: var(--text-mute); margin-top: 13px; }
.empty .glyph {
  font-family: var(--font-sym);
  font-size: 42px;
  color: var(--line-soft);
  display: block;
  margin-bottom: 12px;
}
.empty h3 { color: var(--text-dim); margin: 0 0 6px; font-weight: 600; font-size: 16px; }
.empty p { margin: 0 0 11px; font-size: 13.5px; }
.empty p:last-child { margin-bottom: 0; }

.hidden { display: none !important; }

/* ---------------- 历史记录 ---------------- */
.hist-list { display: flex; flex-direction: column; gap: 2px; }
.hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  border: 1px solid transparent;
}
.hist-item:hover { background: var(--panel-2); border-color: var(--line); }
.hist-item .nm { font-weight: 600; }
.hist-item .meta { color: var(--text-mute); font-size: 12px; }
.hist-item .del {
  margin-left: auto;
  color: var(--text-mute);
  font-size: 15px;
  padding: 0 6px;
  min-height: 30px;
  border: none;
  background: none;
  cursor: pointer;
}
.hist-item .del:hover { color: var(--bad); }

/* 命盘列表：搜索清空 + 一级/二级折叠（与 bz / zx / zw 对齐） */
.acct-search-wrap { position: relative; margin: 8px 0 10px; }
.acct-search {
  width: 100%; box-sizing: border-box; padding: 8px 34px 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; font-size: 14px;
  font-family: inherit; background: var(--panel); color: inherit;
}
.acct-search-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-mute); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0; display: grid; place-items: center; font-family: inherit;
}
.acct-search-x:hover { background: rgba(0,0,0,.06); color: inherit; }
.acct-search-x[hidden] { display: none !important; }
.acct-grp {
  border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px;
  background: var(--panel);
}
.acct-grp-h {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer;
}
.acct-grp-h:hover { background: var(--panel-2); }
.acct-caret { flex: none; color: var(--text-mute); font-size: 12px; width: 14px; text-align: center; user-select: none; }
.acct-grp-name { font-size: 14px; font-weight: 600; }
.acct-grp-count { font-size: 12px; color: var(--text-mute); }
.acct-grp-b { border-top: 1px dashed var(--line); padding: 4px 8px 8px; }
.acct-grp-l2 { margin: 6px 0 6px 10px; background: var(--panel-2); }
.acct-grp-l2 > .acct-grp-h { padding: 8px 10px; }

/* ---------------- 页脚 / 关于 ---------------- */
.foot { color: var(--text-mute); font-size: 12px; line-height: 1.85; }
.foot > div + div { margin-top: 6px; }
.foot code {
  font-family: var(--mono);
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

/* ============================================================
 * 浮层（设置 / 账号 —— 出生资料已经不在这里了，见 #chartForm）
 *   窄屏：从底部升起，占满宽度，最高 90dvh
 *   宽屏：居中弹窗
 * ============================================================ */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .52);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.sheet-mask.on { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  z-index: 101;
  left: 0; right: 0; bottom: 0;
  max-height: 90vh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .5);
  transform: translateY(102%);
  visibility: hidden;
  /* visibility 是「离散」属性，不会自己渐变：关的时候要等位移动画放完再隐藏
     （0s 延迟 .24s），开的时候要立刻可见（0s 无延迟）。写反了就会「一关就消失」。 */
  transition: transform .24s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .24s;
}
.sheet.on {
  transform: translateY(0);
  visibility: visible;
  transition: transform .24s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

.sheet-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.sheet-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
/* 抓手条：手机上提示「可以往下拖」 */
.sheet-head::before {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 34px; height: 3px;
  margin-left: -17px;
  border-radius: 2px;
  background: var(--line-soft);
}
.sheet-close {
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
}
.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 15px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}

.set-group + .set-group {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.set-title {
  margin: 0 0 11px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.set-title::before {
  content: "";
  width: 3px; height: 13px;
  background: var(--accent);
  border-radius: 2px;
  flex: none;
}
.set-title .hint {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-mute);
  margin-left: auto;
}
.sheet-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.sheet-actions .note { margin: 10px 0 0; text-align: center; }

/* 微信里才显示的提示 */
.wx-note { display: none; margin-top: 10px; }

/* ---------------- 浮层提示（toast） ----------------
   固定在屏幕底部中间：操作反馈必须出现在**用户正在看的地方**。
   页面顶部那条 #msg 在滚动到下方时是看不见的 —— 所以复制 / 导出 / 开关这类
   「我刚点了一下」的反馈一律走 toast，不走 #msg。 */
.toast {
  position: fixed;
  z-index: 130;                      /* 高于浮层(101) 与图片框(120) */
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 14px);
  max-width: min(92vw, 540px);
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind="ok"]   { border-color: rgba(95, 158, 110, .65); }
.toast[data-kind="err"]  { border-color: rgba(226, 87, 76, .65); }
.toast[data-kind="warn"] { border-color: rgba(216, 168, 58, .65); }

/* ---------------- 图片结果（微信里长按保存） ---------------- */
.imgbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 0, 0, .88);
}
.imgbox.on { display: flex; }
.imgbox img {
  max-width: 100%;
  max-height: 74vh;
  border-radius: var(--radius);
  background: #fff;
}
.imgbox-hint { color: #ddd; font-size: 13px; margin: 0; }
.imgbox .btn { background: #23283a; border-color: #3a4157; color: #eee; }

/* ============================================================
 * 浅色主题下的彩色元素微调
 * ============================================================ */
[data-theme="light"] .msg.ok   { background: rgba(46,125,79,.09);   border-color: rgba(46,125,79,.35);   color: #1f6b42; }
[data-theme="light"] .msg.err  { background: rgba(192,57,43,.08);   border-color: rgba(192,57,43,.35);   color: #a03225; }
[data-theme="light"] .msg.warn { background: rgba(154,122,18,.10);  border-color: rgba(154,122,18,.35);  color: #7d6410; }
[data-theme="light"] .msg.info { background: rgba(37,99,168,.07);   border-color: rgba(37,99,168,.30);   color: #1f548f; }

[data-theme="light"] .tag.dom  { border-color: rgba(168,121,31,.5);  color: #8a6512; background: rgba(168,121,31,.09); }
[data-theme="light"] .tag.exa  { border-color: rgba(37,99,168,.45);  color: #1f548f; background: rgba(37,99,168,.08); }
[data-theme="light"] .tag.tri  { border-color: rgba(46,125,79,.45);  color: #24663f; background: rgba(46,125,79,.08); }
[data-theme="light"] .tag.trm  { border-color: rgba(99,91,163,.42);  color: #544c9c; background: rgba(99,91,163,.08); }
[data-theme="light"] .tag.fac  { border-color: rgba(107,114,128,.38);color: #4b5563; background: rgba(107,114,128,.07); }
[data-theme="light"] .tag.neg  { border-color: rgba(192,57,43,.45);  color: #a03225; background: rgba(192,57,43,.08); }
[data-theme="light"] .tag.warn { border-color: rgba(154,122,18,.45); color: #7d6410; background: rgba(154,122,18,.09); }

[data-theme="light"] .astro-wheel { box-shadow: var(--shadow); border-radius: var(--radius); }
[data-theme="light"] .aspect-grid { box-shadow: var(--shadow); border-radius: var(--radius); }
[data-theme="light"] .empty .glyph { color: #cdd2da; }
[data-theme="light"] .sheet-mask { background: rgba(20, 26, 40, .38); }

/* ---------------- 双轮（关系盘 / 行运盘）排布 ---------------- */
.bi-wheel-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* ---------------- 第二人卡片 / 返回入口 / 副标题 ---------------- */
.person-b { border-left: 3px solid var(--accent-2); }
.person-a { border-left: 3px solid var(--accent); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--accent-2);
  text-decoration: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  min-height: 34px;
  background: var(--panel-2);
  white-space: nowrap;
  flex: none;
}
.back-link:hover { border-color: var(--accent-2); text-decoration: none; }

.subhead {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 11px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.subhead .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }

/* ---------------- 相位表图例 ---------------- */
.ag-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.8;
}
.ag-legend span { display: inline-flex; align-items: center; gap: 5px; }
.ag-legend b { color: var(--text-dim); font-family: var(--mono); font-size: 11.5px; }
.ag-legend i { font-style: normal; font-size: 15px; }
.ag-legend em { font-style: normal; font-size: 11px; opacity: .7; margin-left: 3px; }
.aspect-legend span {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 8px;
  background: var(--panel-2);
}

/* ---------------- 推运信息条 ---------------- */
.transit-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  align-items: baseline;
  padding: 10px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 13px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.transit-bar .k { color: var(--text-mute); margin-right: 4px; }
.transit-bar .v { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------------- 缺第二人资料的提示卡 ---------------- */
.need-b { text-align: center; padding: 30px 16px; }
.need-b .glyph {
  font-family: var(--font-sym);
  font-size: 38px;
  color: var(--line-soft);
  display: block;
  margin-bottom: 10px;
}
.need-b h3 { margin: 0 0 6px; font-size: 16px; color: var(--text-dim); }
.need-b p { margin: 0 0 14px; font-size: 13px; color: var(--text-mute); }

/* ============================================================
 * 窄屏（≤ 1000px）：星盘独占整行、并左右充满屏幕
 *
 * ⚠ 这个断点必须写在**所有组件的基础规则之后**。
 *   .wheel-row / .bi-wheel-row 是「星盘 1.45fr + 概览 1fr」的两列栅格；
 *   窄屏上不收成单列的话，手机上星盘只剩大约六成宽度，
 *   而「概览 / 主要特征」被挤在右边四成里 —— 两栏都难看，表格还会被撑破视口。
 *   媒体查询和基础规则**同优先级**，CSS 是「后来者赢」，
 *   所以断点写在前面等于没写（这个坑踩过）。
 *
 *   星盘要「左右充满屏幕」，就得冲出两层内边距：
 *   .wrap 的 --pad 和 .panel 的 --ppad。
 *   面板本身跟着变通栏（去掉左右边框与圆角），否则星盘会压在自己的边框上。
 * ============================================================ */
@media (max-width: 1000px) {
  .wheel-row,
  .bi-wheel-row { grid-template-columns: minmax(0, 1fr); }

  #pane-wheel {
    margin-left: calc(-1 * var(--pad));
    margin-right: calc(-1 * var(--pad));
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .wheel-col { padding: 0; }
  /* 盘面工具条别贴到屏幕边上 */
  .wheel-tools { padding: 0 var(--ppad); }
  /* 其余内容把内边距补回来 */
  .side-col,
  #pane-wheel > .pane-lead { padding-left: var(--ppad); padding-right: var(--ppad); }

  /* 表格窄屏允许收缩；宽表靠 .tbl-wrap 自己横向滚，
     不要让 width:100% 又带 min-width 的表格顶出视口 */
  table.grid { min-width: 0; }
  /* auto-fit + minmax(300px) 在窄容器里会强行占 300px 而溢出，改单列 */
  .grid-2 { grid-template-columns: 1fr; }
  .firdaria-cols { grid-template-columns: 1fr; }
}

/* ============================================================
 * 宽屏（≥ 760px）：放大尺度、浮层改成居中弹窗
 * ============================================================ */
@media (min-width: 760px) {
  :root, [data-theme="dark"], [data-theme="light"] {
    --pad: 22px;
    --ppad: 22px;
    --tap: 0px;          /* 桌面上不需要 40px 的最小点按高度 */
  }
  html, body { font-size: 15px; }
  .wrap { padding-top: 14px; padding-bottom: 60px; }
  .brand h1 { font-size: 19px; }
  .panel { padding: 20px var(--ppad); margin-bottom: 16px; }
  .head-panel { padding: 16px 20px; }
  .chartmode button { font-size: 13.5px; padding: 7px 13px; min-height: 34px; }
  .chart-head .who h2 { font-size: 20px; }
  .chart-head .who .meta { font-size: 13px; }
  .wheel-row { gap: 22px; }
  .bi-wheel-row { gap: 22px; }
  .grid-2 { gap: 20px; }
  .firdaria-cols { gap: 14px; }
  table.grid { font-size: 13.5px; }
  table.grid th, table.grid td { padding: 8px 11px; }
  .wheel-tools { display: flex; flex-wrap: wrap; gap: 8px; }
  .wheel-tools .btn { width: auto; }

  /* 浮层：居中弹窗 */
  .sheet {
    left: 50%;
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(680px, 92vw);
    max-height: 86vh;
    border-radius: 14px;
    border: 1px solid var(--line);
    transform: translate(-50%, -46%) scale(.97);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  }
  .sheet.on { transform: translate(-50%, -50%) scale(1); }
  .sheet-head::before { display: none; }
  .sheet-body { padding: 20px 22px 24px; }
}

/* 超窄屏（≤ 360px）：再收一点 */
@media (max-width: 360px) {
  :root { --pad: 10px; }
  .brand h1 { font-size: 15px; }
  .brand .glyph { display: none; }      /* 顶栏真的放不下时，先舍掉装饰符号 */
  .chartmode button { font-size: 12px; min-width: 3.5em; }
  .topbar-actions .btn { padding: 6px 8px; }
}

/* 横屏矮屏：浮层别顶到天 */
@media (max-height: 480px) {
  .sheet { max-height: 96vh; max-height: 96dvh; }
}

/* ============================================================
 * 微信内置浏览器（X5 / WKWebView）
 *   · 不支持 <a download>、剪贴板图片、window.print()
 *   · 字号 <12px 会被自动放大；输入框 <16px 会触发页面缩放
 *   · 用长按图片保存的方式代替下载
 * ============================================================ */
body.is-wechat #btnPrint { display: none; }
body.is-wechat .wx-note { display: block; }
/* 微信里输入框一律 16px，避免点击时页面被放大 */
body.is-wechat .field input[type="text"],
body.is-wechat .field input[type="number"],
body.is-wechat .field input[type="date"],
body.is-wechat .field select,
body.is-wechat .datebar .dateinput { font-size: 16px; }
/* 微信顶栏自己有高度，吸顶往下让一点，避免贴太紧 */
body.is-wechat .top-sticky { padding-top: 2px; }

/* ============================================================
 * 嵌入模式（?embed=1，供紫微站等外部站点 iframe 调用）
 * ============================================================ */
body.embed { background-image: none; }
/* 浮层整个藏掉。出生资料（#chartForm / #panelB）现在是主页面里的面板，
   所以**单独再写一遍** —— 紫微站 iframe 调用时那两张表也必须藏住。 */
body.embed .top-sticky,
body.embed #settingsSheet,
body.embed #chartForm,
body.embed #panelB,
body.embed #emptyState,
body.embed #msg,
body.embed .datebar,
body.embed .no-print { display: none !important; }
body.embed .wrap { max-width: none; padding: 4px 6px 6px; }
body.embed .panel { margin-bottom: 8px; padding: 10px 12px; }
body.embed .head-panel { margin-top: 0; }
body.embed .wheel-tools { margin-top: 8px; }

/* ---------------- 打印 ---------------- */
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg: #fff; --bg-soft: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #fff;
    --text: #111; --text-dim: #444; --text-mute: #666; --line: #ccc; --line-soft: #ddd;
    --hl-row: #f7f7f7; --hl-strong: #efefef; --hover: transparent; --row-alt: #fafafa;
    --shadow: none; --top-bg: #fff;
  }
  body { background: #fff !important; color: #111; background-image: none; }
  .top-sticky, .topbar-actions, .tabs, .btn-row, .wheel-tools, .row-actions,
  .chartmode, .datebar, .sheet, .sheet-mask, .no-print, .toast,
  #chartForm, #panelB { display: none !important; }
  .panel { border-color: #ddd; break-inside: avoid; }
  .tabpane { display: block !important; }
  table.grid th { background: #f2f2f2; color: #333; }
  table.grid { min-width: 0; }
}