:root {
  --bg: #f6f4ef;
  --panel: #ffffff;
  --ink: #22201c;
  --muted: #756f66;
  --line: #dfd8cd;
  --accent: #7a2f2f;
  --accent-2: #1f6f78;
  --soft: #f0ebe2;
  --wood: #28724d;
  --fire: #b13c2e;
  --earth: #9a6a24;
  --metal: #66717a;
  --water: #2f5d9a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px max(18px, calc((100vw - 1180px) / 2));
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: 21px;
}

.brand p,
.section-head span,
.status {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.status {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
}

.status.ok {
  color: #1f6f45;
}

.status.bad {
  color: #9b2f28;
}

.layout {
  width: min(1180px, calc(100vw - 28px));
  margin: 22px auto 50px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: 0 12px 28px rgba(48, 38, 28, 0.06);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

label span,
.section-head h2 {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

input,
select,
button {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

input,
select {
  margin-top: 6px;
  padding: 9px 10px;
  background: #fbfaf7;
  color: var(--ink);
}

input:focus,
select:focus {
  outline: 2px solid rgba(31, 111, 120, 0.18);
  border-color: var(--accent-2);
}

button {
  max-width: 160px;
  padding: 0 18px;
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.switch input {
  display: none;
}

.switch span {
  position: relative;
  display: block;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #c7c0b6;
}

.switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

.switch input:checked + span {
  background: var(--accent-2);
}

.switch input:checked + span::after {
  transform: translateX(16px);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.info-item {
  padding: 12px;
  background: #fbfaf7;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.info-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  text-align: center;
  white-space: nowrap;
}

th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.chart-table td:first-child {
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}

.big-char {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}

.day-master {
  background: #fff4d7;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.element-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.element-card {
  padding: 14px 8px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfaf7;
}

.element-card strong {
  display: block;
  font-size: 28px;
}

.analysis-list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.analysis-list div {
  padding: 10px;
  background: var(--soft);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
}

.stars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 14px;
}

.star-item {
  display: flex;
  gap: 8px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 7px;
  font-size: 14px;
}

.star-item span {
  color: var(--muted);
  width: 72px;
  flex: 0 0 auto;
}

.liunian-wrap {
  max-height: 520px;
}

.hidden {
  display: none;
}

.error {
  padding: 12px 14px;
  margin-bottom: 18px;
  border: 1px solid #d7a09b;
  border-radius: 8px;
  background: #fff0ee;
  color: #8f2c25;
}

.element-木 {
  color: var(--wood);
}

.element-火 {
  color: var(--fire);
}

.element-土 {
  color: var(--earth);
}

.element-金 {
  color: var(--metal);
}

.element-水 {
  color: var(--water);
}

@media (max-width: 860px) {
  .form-grid,
  .info-grid,
  .two-col {
    grid-template-columns: 1fr 1fr;
  }

  .element-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .topbar,
  .section-head,
  .option-row {
    align-items: stretch;
    flex-direction: column;
  }

  .form-grid,
  .info-grid,
  .two-col,
  .stars-grid {
    grid-template-columns: 1fr;
  }

  button {
    max-width: none;
  }
}

/* ---------- 地理解析提示 ---------- */
.geo-note {
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--accent-2);
  background: var(--soft);
  border-left: 3px solid var(--accent-2);
  border-radius: 6px;
}
.geo-note.hidden { display: none; }

/* ---------- 十神组合扫描 ---------- */
.shishen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.shishen-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
}
.shishen-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--accent);
}
.shishen-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.shishen-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.shishen-list li {
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--soft);
}
.shishen-list li strong { margin-right: 6px; }
.shishen-list .verse {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.shishen-list li.tone-good { border-left: 3px solid var(--wood); }
.shishen-list li.tone-bad { border-left: 3px solid var(--fire); }
.shishen-list li.tone-mixed { border-left: 3px solid var(--earth); }
.shishen-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 12px;
  background: var(--soft);
  border-radius: 8px;
}

/* ---------- 导航 ---------- */
.topnav { display: flex; gap: 6px; margin-left: auto; margin-right: 16px; }
.topnav a {
  padding: 6px 14px; border-radius: 8px; text-decoration: none;
  color: var(--muted); font-size: 14px; border: 1px solid transparent;
}
.topnav a:hover { background: var(--soft); color: var(--ink); }
.topnav a.active { color: var(--accent); border-color: var(--line); background: var(--panel); font-weight: 600; }

/* ---------- 人格页 ---------- */
.muted-tag { font-size: 12px; color: var(--muted); }
.muted-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.muted-note code { background: var(--soft); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

.md-body { font-size: 14px; line-height: 1.7; color: var(--ink); }
.md-body h1 { font-size: 20px; margin: 4px 0 10px; }
.md-body h2 { font-size: 17px; margin: 18px 0 8px; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.md-body h3 { font-size: 15px; margin: 14px 0 6px; }
.md-body h4 { font-size: 14px; margin: 10px 0 4px; color: var(--muted); }
.md-body p { margin: 6px 0; }
.md-body ul, .md-body ol { margin: 6px 0; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body blockquote {
  margin: 8px 0; padding: 8px 12px; background: var(--soft);
  border-left: 3px solid var(--accent-2); border-radius: 6px; color: var(--ink);
}
.md-table-wrap { overflow-x: auto; max-width: 100%; margin: 10px 0; }
/* 表格固定在容器宽度内,列按内容自适应并换行(不撑出屏幕);超宽时由 .md-table-wrap 横向滚动兜底 */
.md-table { border-collapse: collapse; width: 100%; max-width: 100%; font-size: 12.5px; line-height: 1.5; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
.md-table th { background: var(--soft); font-weight: 600; white-space: nowrap; }

/* Part 2 清单的**总折叠**(2026-08-23):段数一多这里会顶掉整屏(事业页 17 段 ≈ 823px),
   故整份默认收起,只占一行;点开后里面每段仍各自可折叠。 */
.llm-task-all { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; background: var(--panel); }
.llm-task-all > summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--accent-2); }
.llm-task-all[open] > summary { border-bottom: 1px solid var(--line); }
.llm-task-list { padding: 10px 12px 2px; }
.llm-task-list .llm-task:last-child { margin-bottom: 8px; }
.llm-task { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; background: var(--panel); }
.llm-task summary { cursor: pointer; padding: 10px 14px; font-size: 13px; color: var(--accent-2); }
.prompt-pre {
  margin: 0; padding: 12px 14px; border-top: 1px solid var(--line);
  background: var(--soft); white-space: pre-wrap; word-break: break-word;
  font-size: 12px; line-height: 1.6; font-family: "Consolas", "Courier New", monospace;
}

/* ---------- LLM 段的「生成」「复制提示词」工具条(2026-08-12)----------
   放在正文正上方并 sticky:原先只在页面最底部的「第二部分」面板里，要滚到底才看得见。 */
.gen-bar {
  position: sticky; top: 0; z-index: 20;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); padding: 10px 12px; margin: 0 0 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.gen-bar-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gen-bar-head .muted-note { margin: 0; }
/* 流年三段没出来时的说明(2026-08-23):目标年不在当前大运流年表内,段列表会静默变少 */
.gen-bar-note { margin-top: 8px; padding: 7px 10px; border-radius: 6px; font-size: 12.5px;
                background: #fff8e6; border: 1px solid #f0d9a0; color: #7a5b12; }

/* ★段数一多这条工具条会吃掉整屏(2026-08-23):事业页 17 段时 genBar 高 884px,
   确定性正文被推到 1481px、比一屏(约 900px)还低,得滚半天才看得到(用户实测反馈)。
   这里是常用操作区,不宜整体折叠 —— 改为**限高 + 内部滚动**:最多约 8 行,
   段少的页面(健康 6 段)不受影响,段多的页面滚动条只出现在这一栏内。 */
.gen-bar-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
                max-height: 260px; overflow-y: auto; }

/* ★2026-09-12 用户定:整条工具条**默认折叠**(上面那段 2026-08-23 的「不宜整体折叠」
   已被推翻)。折叠时只留头部一行:段数 + 模型下拉 + 全部生成,其余全收起来,
   正文直接顶到上面。展开由 report.js 的 toggleGenBar() / shiyun_gen.js 的
   data-sy-act="fold" 就地加减 .collapsed。 */
.gen-bar.collapsed .gen-bar-rows,
.gen-bar.collapsed .gen-bar-note { display: none; }
.gen-fold {
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  border-radius: 6px; width: 24px; height: 24px; line-height: 1;
  font-size: 12px; cursor: pointer; padding: 0;
}
.gen-fold:hover { background: var(--bg); }
.gen-bar-title { cursor: pointer; user-select: none; }
.gen-bar-rows::-webkit-scrollbar { width: 8px; }
.gen-bar-rows::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.gen-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.gen-row-name {
  min-width: 200px; color: var(--fg); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) { .gen-row-name { min-width: 100%; } }

.llm-actions-top { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
.llm-btns {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
.btn-gen, .btn-copy {
  cursor: pointer; border-radius: 6px; font-size: 12px; padding: 5px 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  transition: background .15s, border-color .15s;
}
.btn-gen { border-color: var(--accent-2); color: var(--accent-2); }
.btn-gen:hover { background: var(--soft); }
.btn-copy:hover { background: var(--soft); }
.btn-gen:disabled, .btn-copy:disabled { opacity: .5; cursor: not-allowed; }
/* 每处 LLM 段旁边的模型下拉(2026-08-27)。只配了一个模型时前端根本不渲染它,
   所以这条样式在单模型环境下永远用不上 —— 这是刻意的:没得选就别占位置。 */
.gen-model {
  padding: 3px 6px; font-size: 12px; max-width: 190px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 5px;
}
.gen-model:focus { outline: none; border-color: var(--accent-2); }
.gen-bar-head .gen-model { max-width: 220px; }
/* ---------- 来源着色(2026-08-12)----------
   模型(API)生成 = 红字;Claude 人工回填 = 正文黑字(不加任何样式,保持默认)。 */
.md-body .fill-api { color: #c62828; }
.md-body .fill-api strong { color: inherit; }   /* 段内加粗跟随红色,别退回黑色 */

.src-tag {
  font-size: 11px; padding: 1px 6px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.src-tag.src-api { color: #c62828; border-color: #c62828; }

/* 生成成功的浮层提示:固定右下角,不随工具条重渲被冲掉 */
.gen-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  max-width: min(420px, 86vw);
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  font-size: 13px; line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.gen-toast.ok { border-left: 4px solid #2e7d32; }
.gen-toast.warn { border-left: 4px solid #b26a00; }
.gen-toast[hidden] { display: none; }

.gen-msg { font-size: 12px; color: var(--muted); line-height: 1.6; }
.gen-msg.ok { color: #2e7d32; }
.gen-msg.warn { color: #b26a00; }
.gen-msg.err { color: #c62828; }

/* ---------- 五行强弱速览(成局/次多高亮)---------- */
.wx-grid { display: flex; flex-direction: column; gap: 10px; }
.wx-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wx-label { font-size: 13px; color: var(--muted); width: 36px; flex: none; }
.wx-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); font-size: 13px;
}
.wx-chip.wx-most { border-left: 3px solid var(--fire); }
.wx-chip.wx-least { border-left: 3px solid var(--water); }
.wx-el { font-weight: 700; font-size: 15px; }
.wx-ct { color: var(--muted); }
.wx-god { font-size: 12px; color: var(--muted); }
.wx-badge { font-size: 11px; padding: 1px 8px; border-radius: 10px; font-weight: 700; }
.wx-badge.formed { background: #b8860b; color: #fff; }
.wx-badge.second { background: var(--accent-2); color: #fff; }

mark.formed { background: #ffe4a3; color: #7a5200; padding: 0 4px; border-radius: 3px; font-weight: 700; }
mark.second { background: #c7ebed; color: #0a4d54; padding: 0 4px; border-radius: 3px; font-weight: 600; }

/* 时运页标签(大运 / 流年+小运) */
.sy-tabs { display: flex; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid rgba(128,128,128,.25); }
.sy-tab { appearance: none; border: none; background: transparent; cursor: pointer; font-size: 14px; font-weight: 600;
  padding: 8px 16px; color: inherit; opacity: .55; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sy-tab:hover { opacity: .8; }
.sy-tab.active { opacity: 1; border-bottom-color: #6b7fd7; }
.sy-pane.hidden { display: none; }

/* 时运页(大运/流年·小运)分步卡片 */
.sy-step { border: 1px solid rgba(128,128,128,.25); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.sy-step h3 { margin: 0 0 8px; font-size: 15px; }
.sy-sub { font-weight: 400; font-size: 12px; opacity: .68; margin-left: 6px; }
.sy-block { margin: 10px 0; }
.sy-tag { font-weight: 600; font-size: 13px; margin-bottom: 4px; opacity: .92; }
.sy-list { margin: 4px 0; padding-left: 20px; font-size: 13px; line-height: 1.75; }
.sy-list li { margin: 2px 0; }
/* 手工编号(①②③)的列表:去掉默认圆点/序号,避免与圈码重复 */
.sy-list.sy-circ { list-style: none; padding-left: 6px; }
.sy-list.sy-circ li { text-indent: -1.7em; padding-left: 1.7em; }
/* 一级子标题:1、天干十神组合 / 2、地支成局 */
.sy-sub2 { font-weight: 600; font-size: 12.5px; margin: 8px 0 2px; opacity: .95; }
.sy-primary { border-left: 3px solid rgba(120,140,220,.5); padding-left: 10px; }
.sy-fold { font-size: 12px; opacity: .82; display: inline-block; margin-top: 3px; padding: 2px 6px; border-left: 2px solid rgba(120,140,220,.4); }
/* 关键运·十神定义增强(折算/单冲单合/多合 的「十神定义+强弱」行) */
.sy-detail { font-size: 12px; opacity: .9; display: inline-block; margin-top: 2px; padding: 2px 6px; border-left: 2px solid rgba(210,160,90,.55); }
.sy-stars { font-size: 12.5px; line-height: 1.7; opacity: .9; margin-top: 4px; }
.sy-stars.muted, .sy-block .muted { opacity: .55; }

/* ---- 时运页折叠(v3.9.223)----
   两层:外层 .sy-step(大运每步 / 流年每年)点标题 h3 收放;内层 .sy-block(大运各块 / 流年每段)点 .sy-tag 收放。
   纯 CSS 收放(加/去 .sy-collapsed 类),不改后端 HTML 结构——后端那边 </div> 是散落字符串,
   手工配成 <details> 极易配错标签,故折叠一律在前端接管(见 shiyun.js)。
   收起时只留标题行:流年段头本身就带「段①·流年X（十神）·小运Y（十神）」,收起后仍一眼可辨。 */
.sy-step > h3, .sy-block > .sy-tag { cursor: pointer; user-select: none; }
.sy-step > h3::before, .sy-block > .sy-tag::before {
  content: "▾"; display: inline-block; width: 1.1em; opacity: .5; font-weight: 400;
}
.sy-step.sy-collapsed > h3::before, .sy-block.sy-collapsed > .sy-tag::before { content: "▸"; }
.sy-step.sy-collapsed > *:not(h3) { display: none; }
.sy-block.sy-collapsed > *:not(.sy-tag) { display: none; }
.sy-step.sy-collapsed { padding-bottom: 10px; }
.sy-block.sy-collapsed > .sy-tag { margin-bottom: 0; }
/* 全部展开/折叠 工具条 */
.sy-foldbar { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; }
.sy-foldbtn {
  appearance: none; cursor: pointer; font-size: 12px; padding: 3px 11px; line-height: 1.6;
  border: 1px solid rgba(128,128,128,.35); border-radius: 999px; background: transparent; color: inherit;
}
.sy-foldbtn:hover { border-color: #6b7fd7; color: #6b7fd7; }
/* LLM 总结正文 */
.sy-llm { font-size: 13px; line-height: 1.8; margin: 2px 0; }
/* 多段式 LLM 总结(分项+总体):保留 \n\n 换行为分段 */
.sy-llm-multi { white-space: pre-line; }

/* ── 性格页「时运影响」:按『八方面·性格』替换过的段落(2026-08-07) ────────────
   时运页给的是通用核心定义/生克判词;性格页把能对上八方面·性格的整段换成
   性格版(优势/短板/主动善应),换过的标红以便与保留原文的部分一眼区分。 */
.xg-swap { color: #c0392b; }
.xg-legend { display: inline-block; font-size: 12px; color: var(--muted); margin-left: 8px; }
.xg-legend i { font-style: normal; color: #c0392b; }
/* 三三「三种表示·性格」展开块:三三自身只有象辞,性格面按其指针取自十神详解/两两组合。
   用浏览器原生 <details> 默认收起(单条约 3-5 千字),与 fold.js 的折叠互不干扰。 */
.xg-c3 { margin: 6px 0 2px; border-left: 2px solid #e3c7c2; padding-left: 10px; }
.xg-c3 > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.xg-c3-g { margin: 8px 0; }
.xg-c3-h { font-size: 12.5px; font-weight: 600; color: #8a6d68; margin: 6px 0 3px; }
.xg-c3-i { font-size: 13px; line-height: 1.75; margin: 0 0 8px; }

/* ── 时运影响面板(2026-08-17 推广到五页) ──────────────────────────
   一页可能有多块(事业/学业页出「学业」「事业」两块),块之间要有分隔与小标题。 */
.sy-panel + .sy-panel { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line, #d9d9d9); }
.sy-panel-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; }

/* ── 工具条段名可点跳转(2026-08-21) ──────────────────────────────
   点段名 → 滚到正文/时运面板里对应那一段,并闪一下便于定位。 */
.gen-row-goto { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.gen-row-goto:hover { color: #0b6bcb; text-decoration-style: solid; }
.gen-row-goto:focus-visible { outline: 2px solid #0b6bcb; outline-offset: 2px; border-radius: 3px; }
@keyframes secFlash { 0% { background: #fff3bf; } 100% { background: transparent; } }
.sec-flash { animation: secFlash 1.8s ease-out; scroll-margin-top: 72px; }

/* ---------- 时运页的 LLM 段工具条(2026-08-23)----------
   时运页一张盘 90~101 段,远多于五页的 6~17 段。.gen-bar-rows 那条 260px 限高
   在这里不够用(101 行滚起来找不着北),所以按「第N步」/「某年」分组折叠,
   每组是一个 <details>,默认只展开当前所在的那一步、那一年。 */
#genBarDayun .gen-bar-rows,
#genBarLiunian .gen-bar-rows { max-height: 420px; gap: 4px; }

.sy-gen-group { border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.sy-gen-group > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; cursor: pointer; font-size: 13px; list-style: none;
}
.sy-gen-group > summary::-webkit-details-marker { display: none; }
.sy-gen-group > summary::before { content: "▸"; color: var(--muted); }
.sy-gen-group[open] > summary::before { content: "▾"; }
.sy-gen-group[open] > summary { border-bottom: 1px solid var(--line); }
.sy-gen-group > summary:hover { background: var(--soft); }
.sy-gen-glabel { font-weight: 600; min-width: 210px; }
.sy-gen-group > summary .muted-note { margin: 0; font-size: 12px; }
.sy-gen-group .gen-row { padding: 5px 10px 5px 26px; }
.sy-gen-group .gen-row + .gen-row { border-top: 1px dashed var(--line); }
.sy-gen-group .gen-row-name { min-width: 190px; }

/* 组标题上的「本组生成」比行内按钮小一号,免得抢掉组标题的视觉重心 */
.btn-mini { font-size: 11.5px; padding: 1px 8px; }

/* 「未填」标签:灰底虚框,与「模型」(红)、「Claude」(黑)一眼区分 */
.src-tag.src-none { color: var(--muted); border-style: dashed; }


/* ---------- 时运页:折叠的「主动善应」(2026-08-23)----------
   善应是**行动建议**不是定性,直接摊开会把「这段时间会怎样」的正文淹掉(每条 400 字左右);
   所以默认收起、点开才看。用原生 <details>,与 fold.js 那套 .sy-collapsed 互不干扰。 */
.sy-sy { display: inline-block; margin: 4px 0 2px; max-width: 100%; }
.sy-sy > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 12px; color: var(--muted); padding: 1px 8px;
  border: 1px dashed var(--line); border-radius: 10px;
}
.sy-sy > summary::-webkit-details-marker { display: none; }
.sy-sy > summary::before { content: "B8 "; }
.sy-sy[open] > summary::before { content: "BE "; }
.sy-sy > summary:hover { color: var(--accent-2); border-color: var(--accent-2); }
.sy-sy-body {
  font-size: 12.5px; line-height: 1.75; margin-top: 4px; padding: 6px 10px;
  border-left: 2px solid rgba(120, 140, 220, .45); background: var(--soft);
  border-radius: 0 6px 6px 0;
}


/* 流年三段 LLM 总结最前面那一行日期(2026-08-23):固定由渲染层加,不靠模型写 */
.sy-period {
  font-size: 12.5px; font-weight: 600; color: var(--accent-2);
  margin: 0 0 4px; letter-spacing: .2px;
}

/* ---------- 「排盘」悬浮按钮 + 悬浮框（2026-09-13，见 paipan_float.js）----------
   每页右下角一个按钮，点开显示本盘四柱排盘 / 五行力量 / 神煞信息，再点收起。
   内容沿用排盘页的 chart-table / element-card / star-item 等类名，外观与排盘页一致。
   ★开合用 .ppf-open 类而不是 hidden 属性：.ppf-panel 自带 display，会盖掉 [hidden]。
   ★z-index 高于顶栏(5)与 LLM 工具条(20)。 */
.ppf-btn {
  /* 全局 button 规则带 width:100% / max-width:160px / min-height:42px（表单按钮用），
     悬浮按钮不要这些，按内容自适应宽度 */
  width: auto; max-width: none; min-height: 0;
  position: fixed; right: 22px; bottom: 24px; z-index: 900;
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: 2px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.ppf-btn:hover { filter: brightness(1.08); }
.ppf-btn.ppf-active { background: var(--panel); color: var(--accent); }
.ppf-panel {
  display: none;
  position: fixed; right: 22px; bottom: 80px; z-index: 900;
  width: min(980px, calc(100vw - 44px)); max-height: calc(100vh - 110px); overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .22); padding: 14px;
}
.ppf-panel.ppf-open { display: block; }
.ppf-body { display: grid; gap: 14px; }
.ppf-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.ppf-who { color: var(--muted); font-size: 13px; }
.ppf-msg { padding: 18px; text-align: center; color: var(--muted); }
.ppf-msg.ppf-err { color: var(--fire); }

/* ---------- 排盘页「排盘历史」（2026-09-13，逻辑见 app.js）----------
   卡片网格，限高内部滚动，不把下面的排盘结果推太远。
   ★全局 button 规则是表单大按钮（width:100% / 深色底 / min-height 42px），这里全部覆盖。 */
.history-tools { display: flex; align-items: center; gap: 10px; }
.history-tools span { color: var(--muted); font-size: 12px; }
/* 2026-09-19：去掉 196px 限高（只露出约 4 条），改为每页 12 条翻页＋搜索（paipan_history.js 的 view()） */
.history-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.history-tools .history-search {
  width: 180px; min-height: 0; margin: 0; padding: 4px 8px; font-size: 12px;
}
.history-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.history-pager:empty { display: none; }
.history-pager span { color: var(--muted); font-size: 12px; }
.history-pager button {
  width: auto; max-width: none; min-height: 0; padding: 4px 14px;
  font-size: 12px; font-weight: 400; background: transparent; color: var(--ink); border-color: var(--line);
}
.history-pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.history-pager button:disabled { opacity: .4; cursor: default; }
.history-item {
  display: flex; align-items: stretch; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; background: #fbfaf7; overflow: hidden;
}
.history-item button {
  width: auto; max-width: none; min-height: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--ink);
  font-weight: 400; cursor: pointer;
}
.history-item .history-load {
  flex: 1; min-width: 0; padding: 8px 10px; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.history-item .history-load strong { font-size: 14px; }
.history-item .history-load span {
  color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-item .history-load:hover { background: var(--soft); }
.history-item .history-del {
  padding: 0 12px; font-size: 18px; color: var(--muted); border-left: 1px solid var(--line);
}
.history-item .history-del:hover { color: var(--fire); background: var(--soft); }
.history-tools .history-clear {
  width: auto; max-width: none; min-height: 0; padding: 3px 12px;
  font-size: 12px; font-weight: 400; background: transparent; color: var(--muted); border-color: var(--line);
}
.history-tools .history-clear:hover { color: var(--fire); border-color: var(--fire); }
.history-empty { color: var(--muted); font-size: 13px; }

/* ---------- 报告页表单里的「排盘历史」按钮 + 弹窗（2026-09-13，见 paipan_history.js）----------
   按钮放表单网格第二行最右一格（grid-column:-2/-1，列数随断点变也始终在最右）；
   卡片沿用排盘页的 .history-item，弹窗里去掉 196px 限高、改由弹窗主体滚动。
   z-index 950 高于「排盘」悬浮按钮（900）。 */
.history-cell { grid-column: -2 / -1; align-self: end; }
.history-cell .history-open {
  width: 100%; max-width: none;
  background: var(--panel); color: var(--ink); border-color: var(--line); font-weight: 600;
}
.history-cell .history-open:hover { border-color: var(--accent); color: var(--accent); }
.hist-modal {
  display: none; position: fixed; inset: 0; z-index: 950;
  background: rgba(34, 32, 28, .38); padding: 24px; align-items: center; justify-content: center;
}
.hist-modal.hist-open { display: flex; }
.hist-dialog {
  width: min(760px, 100%); max-height: min(80vh, 640px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .25);
}
.hist-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.hist-head strong { font-size: 16px; }
.hist-count { flex: 1; color: var(--muted); font-size: 12px; }
.hist-head .hist-close {
  width: 34px; max-width: none; min-height: 34px; padding: 0;
  background: transparent; color: var(--muted); border-color: transparent; font-size: 22px; font-weight: 400;
}
.hist-head .hist-close:hover { color: var(--fire); }
.hist-body { padding: 14px 16px; overflow-y: auto; }
.hist-body .history-list { max-height: none; overflow: visible; }
.hist-head .hist-search { width: 180px; min-height: 0; margin: 0; padding: 4px 8px; font-size: 12px; }
.hist-pager { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); }

/* ── 流日：月份按钮条 ──────────────────────────────────────────────────────
   ★流日按月拉（用户 2026-10-05：「不用一次拉 365 天，按照本月开始拉」）。
   单月 0.10 秒 / 682 KB，整年 1.53 秒 / 7940 KB —— 差 15 倍。
   三种状态要一眼分得清：cur＝今天所在的月、got＝已经拉过（点了秒开）、active＝正在看。 */
.lr-months { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.lr-mbtn {
  appearance: none; cursor: pointer; font-size: 12px; padding: 3px 12px; line-height: 1.6;
  border: 1px solid rgba(128,128,128,.35); border-radius: 999px;
  background: transparent; color: inherit;
}
.lr-mbtn:hover { border-color: #6b7fd7; color: #6b7fd7; }
/* 已拉过的月：实心小点在前，表示点了秒开（走缓存，不再请求） */
.lr-mbtn.got::before { content: "•"; margin-right: 4px; opacity: .55; }
/* 今天所在的那个月：加粗 + 底色，让「本月」一眼看见 */
.lr-mbtn.cur { font-weight: 700; background: rgba(107,127,215,.10); }
/* 正在看的那个月 */
.lr-mbtn.active { border-color: #6b7fd7; color: #6b7fd7; background: rgba(107,127,215,.18); }
/* 「加载全年」单独放在最后，用虚线框跟月份按钮区分开 —— 它是 8 MB 的操作，
   不该跟普通月份按钮长得一样，免得误点。 */
.lr-mbtn.lr-all { border-style: dashed; margin-left: auto; opacity: .8; }
.lr-mbtn.lr-all:hover { opacity: 1; }
/* 月份按钮上的公历区间。★节气月(寅月…丑月)跟公历 1–12 月不重合，
   按钮必须同时给公历，否则用户对不上日历（2026-10-05 用户实际问到）。 */
.lr-gl { margin-left: 5px; font-size: 11px; opacity: .62; font-variant-numeric: tabular-nums; }
.lr-mbtn.active .lr-gl, .lr-mbtn.cur .lr-gl { opacity: .8; }
/* 干支月做副标（子月/酉月…）。★展示以公历月为主、干支月为副
   —— 用户 2026-10-05：「显示给用户的时候用公历月。判断还是走节气月。
   比如：现在显示的子月，用户不知道是几月。」 */
.lr-gz { margin-left: 5px; font-size: 11px; opacity: .45; }
.lr-mbtn.active .lr-gz, .lr-mbtn.cur .lr-gz { opacity: .65; }
/* 流日：今天那一行。★默认展开（用户 2026-10-06「默认展开当天的」），
   其余各天收起 —— 展开动作在 shiyun.js 的 liuriPaint 里，foldDefaults 全收之后做。 */
.lr-today-badge {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 11px; line-height: 1.7; background: rgba(107,127,215,.18); color: #6b7fd7;
}
.sy-block.lr-today > .sy-tag { font-weight: 700; }
.sy-block.lr-today { box-shadow: inset 2px 0 0 #6b7fd7; padding-left: 6px; }