/* 八字排盘 v2.0 — 样式：米白底 + 白卡 + 棕金主色 */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #faf7f0;
  --card: #ffffff;
  --border: #e8e0d0;
  --primary: #8b5e2a;
  --primary-dark: #6f4a1f;
  --accent: #a0712c;
  --text: #3d3428;
  --text-light: #8a7f6d;
  --good: #4a7c2f;
  --bad: #a04a3a;
  --table-border: #9c8a64;   /* v4：表格线加深，方便中老年人辨认 */
  --table-head: #f0e3c4;
  --radius: 12px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 17px;              /* v2：基准字号 15 → 17 */
  line-height: 1.75;
}

.page { max-width: 920px; margin: 0 auto; padding: 24px 16px 48px; }

/* ---------- 头部 ---------- */
.site-header { text-align: center; padding: 24px 0 8px; }
.site-header h1 {
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  font-size: 34px; letter-spacing: 8px; color: var(--primary-dark);
}
.site-header .subtitle { color: var(--text-light); font-size: 14px; margin-top: 6px; }

/* ---------- 卡片与标题 ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-top: 20px;
}
.sec-title, .chapter-title {
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  font-size: 20px; color: var(--primary-dark);
  display: flex; align-items: center; margin-bottom: 18px;
}
.chapter-title { cursor: pointer; margin-bottom: 0; }
.chapter[open] .chapter-title { margin-bottom: 16px; }
.sec-title i, .chapter-title i {
  display: inline-block; width: 4px; height: 20px;
  background: var(--accent); border-radius: 2px; margin-right: 10px;
}
.tag-note { font-size: 12px; color: var(--text-light); margin-left: 10px; font-family: inherit; }
.chapter-body p { margin-bottom: 10px; }
.mt16 { margin-top: 16px; }

/* ---------- 折叠区块 ---------- */
details.sub-block, details.card.chapter { display: block; }
details.sub-block {
  border-top: 1px dashed var(--border); padding: 12px 0;
}
details.sub-block summary {
  cursor: pointer; font-weight: 600; color: var(--primary-dark);
  font-size: 16px; padding: 4px 0; user-select: none;
}
details.sub-block[open] summary { margin-bottom: 12px; }
details.card.chapter summary::-webkit-details-marker,
details.sub-block summary::-webkit-details-marker { color: var(--accent); }

/* ---------- 公历/农历切换 ---------- */
.cal-toggle { display: flex; gap: 18px; margin-bottom: 16px; }
.cal-toggle label {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 16px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
}
.cal-toggle label:has(input:checked) { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.cal-toggle input { accent-color: var(--primary); }

/* ---------- 表单 ---------- */
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 14px; color: var(--text-light); }
.field input, .field select {
  height: 42px; border: 1px solid var(--border); border-radius: 8px;
  padding: 0 10px; font-size: 16px; background: #fffdf9; color: var(--text);
  font-family: inherit; width: 100%;
}
.field input:focus, .field select:focus { outline: 2px solid rgba(139, 94, 42, 0.25); border-color: var(--accent); }
.time-row { display: flex; gap: 8px; }
.time-row input { flex: 1; }
.region-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hint { font-size: 13px; color: var(--text-light); margin-top: 6px; }
.lng-manual { margin-top: 10px; font-size: 14px; color: var(--text-light); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lng-manual input { width: 130px; height: 38px; border: 1px solid var(--border); border-radius: 8px; padding: 0 10px; font-size: 15px; }
.check-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; cursor: pointer; }
.check-row input { width: 17px; height: 17px; accent-color: var(--primary); }
.check-row input:disabled + span { color: var(--text-light); }

/* ---------- 按钮 ---------- */
.btn-primary {
  display: block; width: 100%; margin-top: 18px; padding: 15px 0;
  border: none; border-radius: 999px; background: var(--primary); color: #fff;
  font-size: 19px; letter-spacing: 6px; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary.small, .btn-secondary.small { width: auto; padding: 11px 26px; font-size: 15px; letter-spacing: 2px; }
.btn-secondary {
  border: 1px solid var(--primary); background: #fff; color: var(--primary);
  border-radius: 999px; padding: 11px 26px; font-size: 15px; cursor: pointer; font-family: inherit;
}
.btn-secondary:hover { background: #f6efe3; }
.btn-mini {
  border: 1px solid var(--border); background: #fffdf9; border-radius: 8px;
  padding: 0 14px; height: 42px; cursor: pointer; color: var(--primary); font-family: inherit; white-space: nowrap;
}
.btn-row { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
/* 报告区按钮统一尺寸（btn-primary 在 btn-row 内不做全宽大按钮） */
.btn-row .btn-primary {
  display: inline-block; width: auto; padding: 11px 26px;
  font-size: 15px; letter-spacing: 2px; margin-top: 0;
}
.notice {
  margin-top: 14px; font-size: 13px; color: var(--text-light);
  background: #f6f1e7; border-radius: 8px; padding: 10px 14px; line-height: 1.8;
}

/* ---------- 空状态 ---------- */
.empty { text-align: center; color: var(--text-light); padding: 60px 0; font-size: 16px; }

/* ---------- 表格容器：横滑 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ts-note { margin-top: 16px; background: #f3ead8; color: var(--primary-dark); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.chart-info { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--text-light); margin-bottom: 14px; }

/* ---------- 命盘表格 ---------- */
.chart-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 17px; border: 2px solid var(--table-border); }
.chart-table th, .chart-table td { border: 1.5px solid var(--table-border); padding: 12px 8px; vertical-align: middle; }
.chart-table thead th {
  background: var(--table-head); color: var(--primary-dark); font-weight: 700;
  font-family: "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
}
.chart-table .row-name { background: var(--table-head); color: var(--primary-dark); font-size: 15px; width: 60px; font-weight: 600; }
.ganzhi { font-size: 27px; font-family: "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif; font-weight: 600; }
.day-master { color: #b3541e; }
.shishen { font-size: 13px; color: var(--text-light); margin-top: 2px; }
.hidegan { display: inline-block; font-size: 16px; margin: 2px 6px; }
.hidegan em { font-style: normal; font-size: 12px; color: var(--text-light); margin-left: 2px; }
.na-yin { font-size: 13px; color: var(--text-light); }
.di-shi { font-size: 14px; color: var(--accent); }
.kong-hit { color: var(--bad); font-weight: 700; background: #fbf1ee; }

/* ---------- 五行 ---------- */
.wx-bars { display: flex; flex-direction: column; gap: 8px; }
.wx-item { display: flex; align-items: center; gap: 12px; }
.wx-name { width: 20px; font-weight: 600; }
.wx-bar { flex: 1; height: 15px; background: #f1ead9; border-radius: 7px; overflow: hidden; }
.wx-bar i { display: block; height: 100%; background: var(--accent); border-radius: 7px; min-width: 2px; }
.wx-num { width: 24px; text-align: right; color: var(--text-light); }
.wx-item.missing .wx-name, .wx-item.missing .wx-num { color: var(--bad); }
.wx-note { font-size: 13px; color: var(--text-light); margin-top: 10px; }
.sr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.sr-col { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.sr-col.ok { border-color: #c8b28a; background: #fbf7ee; }
.sr-title { font-weight: 600; color: var(--primary-dark); display: flex; justify-content: space-between; font-size: 15px; }
.sr-flag { font-size: 13px; }
.sr-col.ok .sr-flag { color: var(--good); }
.sr-col.no .sr-flag { color: var(--bad); }
.sr-col p { font-size: 13px; color: var(--text-light); margin-top: 6px; }
.sr-verdict { margin-top: 14px; font-size: 15px; }
.sr-patterns { margin-top: 8px; font-size: 14px; color: var(--text-light); }
.tag {
  display: inline-block; border: 1px solid var(--accent); color: var(--accent);
  border-radius: 999px; padding: 1px 10px; font-size: 13px; margin: 2px 4px 2px 0;
}

/* ---------- 宫位 / 神煞 ---------- */
.palace-text { font-size: 15px; margin-top: 10px; }
.palace-table { max-width: 420px; }
.ss-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-item {
  border-radius: 8px; padding: 6px 12px; font-size: 14px; border: 1px solid var(--border);
  display: inline-flex; align-items: baseline; gap: 8px;
}
.ss-item em { font-style: normal; font-size: 12px; color: var(--text-light); }
.ss-item.ji { border-color: #b9c9a6; background: #f5f9f0; }
.ss-item.xiong { border-color: #d8b9b0; background: #fbf2ef; }

/* ---------- 神煞星盘网格 ---------- */
.star-grid .ln-item { padding: 10px 4px; }
.star-ji { border-color: #b9c9a6; background: #f5f9f0; }
.star-xiong { border-color: #d8b9b0; background: #fbf2ef; }
.star-ping { opacity: 0.92; }

/* ---------- 大运流年 ---------- */
.dy-start { font-size: 14px; color: var(--text-light); margin-bottom: 12px; }
.dy-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 16px; border: 2px solid var(--table-border); }
.dy-table th, .dy-table td { border: 1.5px solid var(--table-border); padding: 10px 6px; font-size: 16px; }
.dy-table thead th { background: var(--table-head); color: var(--primary-dark); font-weight: 700; }
.dy-table tbody tr { cursor: pointer; }
.dy-table tbody tr:hover { background: #fbf7ee; }
.dy-table tbody tr.active { background: #f3ead8; }
.dy-gz { font-weight: 600; color: var(--primary); font-size: 17px; font-family: "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif; }
#liunianPanel { margin-top: 18px; }
#liunianPanel h4 { font-size: 15px; color: var(--primary-dark); margin-bottom: 10px; }
.ln-range { font-weight: normal; color: var(--text-light); font-size: 13px; }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.ln-item { border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; text-align: center; }
.ln-year { font-weight: 600; font-size: 15px; }
.ln-gz { font-family: "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif; color: var(--primary); margin: 2px 0; }
.ln-god { font-size: 12px; color: var(--text-light); }
.ln-age { font-size: 12px; color: var(--text-light); }
.ln-level { font-size: 12px; border-radius: 999px; padding: 1px 10px; margin-left: 8px; }
.ln-吉 .ln-level { background: #e8f2e0; color: var(--good); }
.ln-平 .ln-level { background: #f1ead9; color: var(--accent); }
.ln-凶 .ln-level { background: #f7e3dd; color: var(--bad); }
td.good { color: var(--good); font-weight: 600; }
td.mid { color: var(--text-light); }
td.bad { color: var(--bad); font-weight: 600; }

/* ---------- 逐年大表 ---------- */
.year-table { min-width: 900px; }
.year-table th, .year-table td { white-space: nowrap; }
.year-table tbody tr:hover { background: #fbf7ee; cursor: default; }

/* ---------- 解读段落 ---------- */
.it-section { margin-bottom: 14px; }
.it-section h4 {
  font-size: 15px; color: var(--primary-dark);
  border-left: 3px solid var(--accent); padding-left: 8px; margin-bottom: 6px;
}
.it-section p { font-size: 15px; }

/* ---------- 报告 ---------- */
#reportPreview {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fffdf9;
  padding: 12px; font-family: "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  font-size: 13px; line-height: 1.7; resize: vertical; color: var(--text);
}

.site-footer { text-align: center; color: var(--text-light); font-size: 13px; margin-top: 32px; }
.hidden { display: none !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .region-row { grid-template-columns: 1fr; }
  .sr-grid { grid-template-columns: 1fr; }
  .site-header h1 { font-size: 27px; letter-spacing: 5px; }
  .card { padding: 16px 12px; }
  .btn-primary.small, .btn-secondary.small { width: 100%; }
  .btn-row { flex-direction: column; }
  .ganzhi { font-size: 23px; }
  .chart-table { font-size: 16px; }
  .chart-table th, .chart-table td { padding: 10px 5px; }
  .dy-table th, .dy-table td { font-size: 15px; }
  .sec-title, .chapter-title { font-size: 18px; }
}

/* ---------- v3：逐年全表主从神与读表要点 ---------- */
.ms-slave { display: block; font-size: 12px; font-weight: normal; opacity: .85; }
.year-table td em.ms-slave { font-style: normal; }
.yt-notes { margin-top: 12px; }
.yt-notes h4 { font-size: 16px; color: var(--primary-dark); margin-bottom: 4px; }
.yt-notes ol { margin: 0 0 8px 20px; padding: 0; }
.yt-notes li { font-size: 14px; line-height: 1.7; }

/* ---------- v3：神煞断语 ---------- */
.ss-item em { display: block; font-size: 12px; color: var(--text-light); font-style: normal; }
.xugong { color: var(--text-light); font-size: 14px; }

/* ---------- v3：四系合断 ---------- */
.sixi-line { font-size: 15px; line-height: 1.8; margin: 2px 0; }
.sixi-zong { background: #f7f1e4; border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 0 6px 6px 0; margin-top: 8px; font-size: 15px; }

/* ---------- v3：补充 ---------- */
.palace-rel { color: var(--text-light); font-size: 14px; }
.it-overview { background: #f7f3ea; }
.kong-hit { color: #b3382c; font-weight: 600; }
.kong-no { color: var(--text-light); }
.explain-body p { font-size: 15px; line-height: 1.8; margin: 6px 0; }
.explain-body b { color: var(--primary-dark); }