/* meihua/assets/meihua.css —— 梅花易数排盘页样式 */
/* 主题变量：宣纸墨色两套，基础色取值与 qimen/assets/qimen.css 的 --qm-* 相同（变量名换成 --mh-*）；:root 白天，<html data-theme="dark"> 暗黑。
   断点：≥1010px 左右两栏（同 qimen、daliuren 页），窄屏上下排；<560px 三卦图上下排。
   盘面语义色两套各定一组：五行（--mh-wx-*）、体用标记（--mh-ti / --mh-yong）、生克两组（--mh-rel-a 生体比和 / --mh-rel-b 克泄耗；2026-10-21 用户定改为中性墨色，不用红绿，吉凶之分只靠文字）、
   旺衰五档（--mh-st-*）、爻线（--mh-yao 常爻、--mh-dong 本卦动爻、--mh-bian 变卦变爻，非文字 ≥3:1）；文字 ≥4.5:1，由 _dev/project2026/meihua/tests/contrast_check.mjs 检查。
   颜色之外都另有文字：体 / 用、旺相休囚死、生体克体等写成字，动爻旁写「动」、变爻旁写「变」 */
:root {
  --mh-bg: #f3efe6; --mh-card: #fbf9f4; --mh-text: #2b2622; --mh-muted: #6f6458; --mh-faint: #74695c;
  --mh-line: #cfc5b2; --mh-center: #f6f2ea; --mh-sub: #4a4239; --mh-split: #e6dfd0;
  --mh-tag-bg: #efe9dc; --mh-input-bg: #ffffff; --mh-input-line: #d9d1c0; --mh-shadow: rgba(0,0,0,.06);
  --mh-primary: #b3361f; --mh-primary-hover: #9a2d19; --mh-on-primary: #ffffff; --mh-disabled: #b9af9f;
  --mh-accent: #b3361f; --mh-danger: #b91c1c; --mh-sel-bg: #f6e9e2; --mh-focus: #b45309;
  --mh-warn-fg: #7c3a06; --mh-warn-bg: #fbf1dc; --mh-warn-line: #e3c27a;
  /* 盘面语义色（白天） */
  --mh-wx-jin: #7a5a00; --mh-wx-mu: #1a6b3a; --mh-wx-shui: #1a4f8a; --mh-wx-huo: #b3261e; --mh-wx-tu: #7a4a1a;
  --mh-ti: #b3361f; --mh-yong: #1a3e6e;
  --mh-rel-a: #2b2622; --mh-rel-b: #4f463c;
  --mh-st-wang: #a8231a; --mh-st-xiang: #8a4b00; --mh-st-xiu: #5c564e; --mh-st-qiu: #3f4b5c; --mh-st-si: #6f6458;
  --mh-yao: #2b2622; --mh-dong: #b3361f; --mh-bian: #1a3e6e; --mh-dong-bg: #f6e2da;
  /* B 期 AI 卡片（样式在 meihua-ai.css，取值同 daliuren.css 的 --lr-ai-* 与聊天组件覆盖用色）：左竖条、标题栏悬停底、状态胶囊四组（idle / login / down 共用灰）、
     锁定的输入框底、用户气泡底与字 */
  --mh-ai-bar: #b3361f; --mh-ai-head-hover: #f4ede1;
  --mh-ai-st-gray-bg: #ebe5d9; --mh-ai-st-gray-fg: #4a4239;
  --mh-ai-st-ready-bg: #dff0e5; --mh-ai-st-ready-fg: #1a5e40;
  --mh-ai-st-chat-bg: #b3361f; --mh-ai-st-chat-fg: #ffffff;
  --mh-ai-st-stale-bg: #fbe8c4; --mh-ai-st-stale-fg: #7c3a06;
  --mh-locked: #efe9dc; --mh-ububble: #f6e2da; --mh-on-ububble: #2b2622;
}
[data-theme="dark"] {
  --mh-bg: #16130f; --mh-card: #211d18; --mh-text: #ece4d6; --mh-muted: #aa9e8f; --mh-faint: #998c7b;
  --mh-line: #4a4238; --mh-center: #1c1915; --mh-sub: #d6cbb9; --mh-split: #3a332a;
  --mh-tag-bg: #2a251f; --mh-input-bg: #16130f; --mh-input-line: #3a332a; --mh-shadow: rgba(0,0,0,.4);
  --mh-primary: #c2452c; --mh-primary-hover: #ab3a24; --mh-on-primary: #ffffff; --mh-disabled: #4a4238;
  --mh-accent: #e0a34a; --mh-danger: #f87171; --mh-sel-bg: #33291d; --mh-focus: #e0a34a;
  --mh-warn-fg: #f5d58a; --mh-warn-bg: #33291a; --mh-warn-line: #8a6a1f;
  /* 盘面语义色（暗黑） */
  --mh-wx-jin: #e8c25a; --mh-wx-mu: #6fd39a; --mh-wx-shui: #7fb0ff; --mh-wx-huo: #f87878; --mh-wx-tu: #d9a066;
  --mh-ti: #f0a46b; --mh-yong: #7fb0ff;
  --mh-rel-a: #ece4d6; --mh-rel-b: #c9bfb0;
  --mh-st-wang: #f87878; --mh-st-xiang: #f0a46b; --mh-st-xiu: #c9bfb0; --mh-st-qiu: #a9b4c4; --mh-st-si: #aa9e8f;
  --mh-yao: #ece4d6; --mh-dong: #f0a46b; --mh-bian: #7fb0ff; --mh-dong-bg: #43261c;
  /* B 期 AI 卡片（暗黑） */
  --mh-ai-bar: #e0a34a; --mh-ai-head-hover: #2a251f;
  --mh-ai-st-gray-bg: #3a332a; --mh-ai-st-gray-fg: #d6cbb9;
  --mh-ai-st-ready-bg: #1d3a2c; --mh-ai-st-ready-fg: #7ee0b0;
  --mh-ai-st-chat-bg: #a83a24; --mh-ai-st-chat-fg: #ffffff;
  --mh-ai-st-stale-bg: #45351a; --mh-ai-st-stale-fg: #f5d58a;
  --mh-locked: #2a251f; --mh-ububble: #43261c; --mh-on-ububble: #f1e6da;
  color-scheme: dark;
}
body { margin: 0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--mh-bg); color: var(--mh-text); }
.mh-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== 两栏：≥1010px 左栏表单·排盘历史 / 起卦信息（一张 tab 卡片），右栏 AI 卡片、卦象与细目 tab 卡片；窄屏上下排、左栏在前 ===== */
.mh-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 0 16px; box-sizing: border-box; }
.mh-left, .mh-right { min-width: 0; }
@media (min-width: 1010px) {
  .mh-wrap { flex-direction: row; align-items: flex-start; }
  .mh-left { flex: 0 0 calc(41% - 8px); }
  .mh-right { flex: 1 1 0; }
}

/* ===== 卡片、按钮、表单 ===== */
.mh-card { background: var(--mh-card); border-radius: 8px; padding: 14px; margin-bottom: 14px; box-shadow: 0 1px 3px var(--mh-shadow); outline: 1px solid var(--mh-input-line); outline-offset: -1px; } /* 细边线用 outline 画在内侧，不改盒子尺寸 */
.mh-card-h { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--mh-sub); }
.mh-card h3 { margin: 10px 0 4px; font-size: 13px; color: var(--mh-sub); }
.mh-form-card { position: relative; padding-right: 52px; background-image: url(mh1.png); background-repeat: no-repeat; background-size: auto; background-position: right top;}
.mh-theme-btn { position: absolute; top: 5px; right: 5px; width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--mh-input-line); background: var(--mh-card); color: var(--mh-text); font-size: 14px; line-height: 1; cursor: pointer; }
.mh-theme-btn:hover { border-color: var(--mh-accent); }
.mh-form { display: flex; flex-direction: column; gap: 10px; }
.mh-modes { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--mh-split); }
.mh-mode { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px 8px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--mh-muted); cursor: pointer; font-family: inherit; }
.mh-mode:hover { color: var(--mh-text); }
.mh-mode[aria-selected="true"] { color: var(--mh-accent); border-bottom-color: var(--mh-accent); }
/* 内容 tab（左栏「排盘历史 / 起卦信息」、右栏「体用生克 / 卦气旺衰 / 推导与资料」）：外观同起卦方式 tab；选中项除 accent 色外有 2px 下划线与加粗（非颜色标记） */
.mh-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: -4px 0 10px; border-bottom: 1px solid var(--mh-split); }
.mh-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px 8px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--mh-muted); cursor: pointer; font-family: inherit; }
.mh-tab:hover { color: var(--mh-text); }
.mh-tab[aria-selected="true"] { color: var(--mh-accent); border-bottom-color: var(--mh-accent); font-weight: 700; }
.mh-tab .mh-h-count { margin-left: 2px; }
.mh-tabpanel[hidden] { display: none; }
.mh-tab:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 1px; }
.mh-tabpanel:focus { outline: none; }
.mh-tabpanel:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; }
/* 推导与资料：四块依次排列，块间留距并以细线分隔 */
.mh-block + .mh-block { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--mh-split); }
.mh-card .mh-block-h { margin: 0 0 8px; font-size: 14px; color: var(--mh-sub); }
.mh-card h4 { margin: 10px 0 4px; font-size: 13px; color: var(--mh-sub); }
.mh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; }
.mh-fields { margin-top: 10px; }
.mh-fields[hidden] { display: none; }
.mh-form label { font-size: 14px; white-space: nowrap; }
.mh-form select, .mh-form input { padding: 6px 8px; font-size: 14px; font-family: inherit; background: var(--mh-input-bg); color: var(--mh-text); border: 1px solid var(--mh-input-line); border-radius: 4px; min-width: 0; }
.mh-form input[inputmode="numeric"] { width: 7.5em; }
.mh-form #mh-f-wu { width: 11em; }
.mh-form #mh-f-zi { flex: 1 1 14em; width: 14em; max-width: 100%; }
/* 字占「调整逐字取数」：每字一组「字 + 输入框 / 下拉」；手改过的字用提示色（warn-fg）细框（另有表格里的「已手改」文字），不只靠颜色 */
.mh-zi-adj { margin-top: 8px; }
.mh-zi-adj[hidden], .mh-zi-adj-panel[hidden] { display: none; }
.mh-zi-adj-panel { margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: var(--mh-center); outline: 1px solid var(--mh-split); outline-offset: -1px; }
.mh-zi-adj-panel .mh-note { margin: 0 0 6px; }
.mh-zi-ctls { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.mh-zi-ctl { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px; }
.mh-zi-ctl label { font-size: 15px; font-weight: 600; }
.mh-zi-ctl input { width: 3.2em; }
.mh-zi-ctl-manual { outline: 1px solid var(--mh-warn-fg); background: var(--mh-warn-bg); }
.mh-zi-adj-ops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
/* 字占逐字表（成卦之数卡片里） */
.mh-zi { margin-top: 8px; }
.mh-zi-meta { margin: 0 0 4px; font-size: 13px; line-height: 1.6; color: var(--mh-sub); word-break: break-all; }
.mh-zi-table tbody th { font-size: 15px; }
.mh-zi-num { white-space: nowrap; }
.mh-zi-src { color: var(--mh-sub); }
.mh-zi-note { display: block; font-size: 12px; color: var(--mh-muted); }
.mh-zi-mk { display: inline-block; padding: 0 5px; border: 1px solid var(--mh-warn-fg); border-radius: 4px; background: var(--mh-warn-bg); color: var(--mh-warn-fg); font-size: 12px; font-weight: 700; }
.mh-form [aria-invalid="true"] { border-color: var(--mh-danger); box-shadow: 0 0 0 1px var(--mh-danger); }
.mh-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--mh-muted); }
.mh-actions { display: flex; align-items: center; gap: 12px; }
.mh-status { font-size: 13px; color: var(--mh-muted); }
.mh-btn { padding: 7px 22px; border: 0; border-radius: 6px; background: var(--mh-primary); color: var(--mh-on-primary); font-size: 14px; font-family: inherit; cursor: pointer; }
.mh-btn:hover:not(:disabled) { background: var(--mh-primary-hover); }
.mh-btn:disabled { background: var(--mh-disabled); cursor: not-allowed; }
.mh-btn-sm { flex: none; padding: 3px 9px; border: 1px solid var(--mh-accent); border-radius: 5px; background: var(--mh-card); color: var(--mh-accent); font-size: 12px; font-family: inherit; cursor: pointer; }
.mh-btn-sm:hover { background: var(--mh-sel-bg); }
.mh-error { color: var(--mh-danger); font-size: 14px; }
.mh-error:not(:empty) { margin-top: 8px; }
.mh-mode:focus-visible, .mh-btn:focus-visible, .mh-btn-sm:focus-visible, .mh-theme-btn:focus-visible, .mh-disc-btn:focus-visible,
.mh-form select:focus-visible, .mh-form input:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 1px; }
.mh-result-h:focus { outline: none; }
.mh-result-h:focus-visible { outline: 2px solid var(--mh-focus); outline-offset: 2px; }

/* ===== 起卦信息、应期要素（dt / dd） ===== */
.mh-info-list { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 13px; line-height: 1.6; }
.mh-info-list dt { color: var(--mh-muted); white-space: nowrap; }
.mh-info-list dd { margin: 0; color: var(--mh-text); word-break: break-word; }
.mh-empty { margin: 0; font-size: 13px; color: var(--mh-muted); }

/* ===== 三卦图：六爻从上往下画（上爻在顶），阳爻一条、阴爻两段，全用 CSS 画 ===== */
.mh-guas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mh-gua { margin: 0; padding: 8px 10px 10px; border-radius: 6px; background: var(--mh-center); outline: 1px solid var(--mh-split); outline-offset: -1px; min-width: 0; }
.mh-gua-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-bottom: 8px; }
.mh-gua-role { font-size: 12px; color: var(--mh-muted); }
.mh-gua-name { font-size: 16px; color: var(--mh-text); }
.mh-gua-no { font-size: 12px; color: var(--mh-muted); }
.mh-gua-body { display: flex; flex-direction: column; gap: 8px; }
.mh-tri { display: flex; align-items: center; gap: 8px; }
.mh-tri-lines { display: flex; flex-direction: column; gap: 5px; flex: none; }
.mh-yao { display: flex; align-items: center; gap: 4px; height: 10px; }
.mh-yao::before { content: ''; flex: none; width: clamp(44px, 8vw, 64px); height: 9px; border-radius: 1px; background: var(--mh-yao); forced-color-adjust: none; }
.mh-yin::before { background: linear-gradient(to right, var(--mh-yao) 0 42%, transparent 42% 58%, var(--mh-yao) 58% 100%); }
.mh-yao-dong::before { background: var(--mh-dong); }
.mh-yao-dong.mh-yin::before { background: linear-gradient(to right, var(--mh-dong) 0 42%, transparent 42% 58%, var(--mh-dong) 58% 100%); }
.mh-yao-bian::before { background: var(--mh-bian); }
.mh-yao-bian.mh-yin::before { background: linear-gradient(to right, var(--mh-bian) 0 42%, transparent 42% 58%, var(--mh-bian) 58% 100%); }
.mh-yao-mk { width: 1.2em; font-size: 11px; line-height: 1; font-weight: 700; }
.mh-yao-dong .mh-yao-mk { color: var(--mh-dong); }
.mh-yao-bian .mh-yao-mk { color: var(--mh-bian); }
.mh-tri-side { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; line-height: 1.35; }
.mh-tri-name { white-space: nowrap; }
.mh-tri-sub { font-size: 12px; color: var(--mh-muted); white-space: nowrap; }
.mh-hu-note { margin: 10px 0 0; padding: 6px 10px; font-size: 13px; line-height: 1.55; color: var(--mh-warn-fg); background: var(--mh-warn-bg); border: 1px solid var(--mh-warn-line); border-radius: 6px; }
.mh-key { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.mh-key li { display: inline-flex; align-items: center; }
.mh-yao-key { display: inline-block; width: 22px; height: 7px; background: var(--mh-dong); forced-color-adjust: none; }
.mh-reason { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--mh-sub); }
/* 窄屏 <560px：三卦仍上下排，每卦内上卦、下卦左右并排（左上卦、右下卦，各标「上卦」「下卦」），铺满宽度、整体变矮；爻线随宽度收缩（360px 宽约 43px）。
   这两段媒体查询须放在卦图基础规则之后（同权重，后写的生效） */
.mh-tri-pos { display: none; }
@media (max-width: 559px) {
  .mh-guas { grid-template-columns: minmax(0, 1fr); }
  .mh-gua-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mh-tri { justify-content: center; gap: 6px; min-width: 0; }
  .mh-yao::before { width: clamp(38px, 12vw, 64px); }
  .mh-tri-pos { display: block; font-size: 11px; color: var(--mh-muted); }
}
/* 单栏 560–1009px：三列较宽而每卦内容只有约 150px，整块居中，空白分在两侧，不全堆在右边（上下卦的爻线仍左对齐） */
@media (min-width: 560px) and (max-width: 1009px) {
  .mh-gua-cap { justify-content: center; }
  .mh-gua-body { width: fit-content; max-width: 100%; margin-inline: auto; }
}

/* 体用标记：文字「体」「用」+ 边框色，不只靠颜色 */
.mh-ty { display: inline-block; align-self: flex-start; padding: 0 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 12px; line-height: 1.4; font-weight: 700; background: var(--mh-card); }
.mh-ty-ti { color: var(--mh-ti); }
.mh-ty-yong { color: var(--mh-yong); }
/* 五行、旺衰、生克：都是文字，颜色只作辅助 */
.mh-wx { font-weight: 600; }
.mh-wx-jin { color: var(--mh-wx-jin); } .mh-wx-mu { color: var(--mh-wx-mu); } .mh-wx-shui { color: var(--mh-wx-shui); } .mh-wx-huo { color: var(--mh-wx-huo); } .mh-wx-tu { color: var(--mh-wx-tu); }
.mh-st { font-weight: 700; }
.mh-st-wang { color: var(--mh-st-wang); } .mh-st-xiang { color: var(--mh-st-xiang); } .mh-st-xiu { color: var(--mh-st-xiu); } .mh-st-qiu { color: var(--mh-st-qiu); } .mh-st-si { color: var(--mh-st-si); }
.mh-rel { font-weight: 700; white-space: nowrap; }
.mh-rel-a { color: var(--mh-rel-a); }
.mh-rel-b { color: var(--mh-rel-b); }

/* ===== 表格 ===== */
.mh-scroll { overflow-x: auto; }
.mh-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.55; }
.mh-table caption { text-align: left; font-size: 12px; color: var(--mh-muted); padding: 6px 0 2px; }
.mh-table th, .mh-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--mh-split); vertical-align: top; }
.mh-table thead th { font-weight: normal; font-size: 12px; color: var(--mh-muted); }
.mh-table tbody th { font-weight: 600; color: var(--mh-sub); white-space: nowrap; }
.mh-sk-text { color: var(--mh-sub); }
.mh-ws8 th, .mh-ws8 td { text-align: center; }
.mh-ws8 tbody tr:first-child th:not(:first-child) { font-weight: 600; color: var(--mh-text); }
.mh-ws-text, .mh-dang, .mh-formula { margin: 0 0 6px; font-size: 13px; line-height: 1.6; }
.mh-formula { color: var(--mh-muted); }
.mh-steps, .mh-notes, .mh-yaoci { margin: 4px 0; padding-left: 22px; font-size: 13px; line-height: 1.7; }
.mh-yaoci-dong { font-weight: 700; color: var(--mh-text); }
.mh-yaoci-mk { color: var(--mh-dong); font-weight: 700; }
.mh-ci { margin: 2px 0 6px; font-size: 14px; line-height: 1.7; }
.mh-ci-dong { padding: 2px 8px; border-left: 3px solid var(--mh-dong); background: var(--mh-dong-bg); }

/* ===== 折叠区（按钮 aria-expanded + region） ===== */
.mh-disc + .mh-disc { margin-top: 6px; }
.mh-disc-btn { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: var(--mh-tag-bg); color: var(--mh-text); font-size: 13px; font-weight: 600; font-family: inherit; text-align: left; cursor: pointer; }
.mh-disc-btn:hover { background: var(--mh-sel-bg); }
.mh-disc-arrow::before { content: '▸'; display: inline-block; width: 1em; color: var(--mh-accent); }
.mh-disc-btn[aria-expanded="true"] .mh-disc-arrow::before { content: '▾'; }
.mh-disc-region { padding: 4px 8px 2px; }
.mh-disc-region[hidden] { display: none; }

/* ===== 排盘历史 ===== */
.mh-h-count { font-weight: normal; color: var(--mh-faint); }
.mh-h-note { margin: 0 0 6px; font-size: 12px; color: var(--mh-faint); }
.mh-h-list { list-style: none; margin: 0; padding: 0; }
.mh-h-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--mh-split); font-size: 13px; }
.mh-h-item:first-child { border-top: 0; }
.mh-h-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mh-h-no { flex: none; min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 10px; background: var(--mh-tag-bg); color: var(--mh-sub); font-size: 11px; line-height: 20px; text-align: center; font-weight: 600; }
.mh-h-text { color: var(--mh-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-h-ops { flex: none; display: flex; gap: 6px; }
.mh-h-del { border-color: var(--mh-danger); color: var(--mh-danger); }
.mh-h-empty { font-size: 13px; color: var(--mh-faint); padding: 4px 0; }

/* 减少动态效果：去掉所有过渡与动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}