* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f7f5f1;
  color: #2b2622;
  font-size: 17px;
  line-height: 1.75;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

.site-head { background: #2b2622; color: #f7f5f1; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand { color: #f7f5f1; text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.brand span { font-size: 14px; font-weight: 400; opacity: .75; margin-left: 6px; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-nav a { color: #e8e2d6; text-decoration: none; font-size: 15px; padding: 2px 0; }
.site-nav a:hover { color: #d8b26a; }

.hero { padding: 34px 0 6px; }
.hero h1 { font-size: 28px; letter-spacing: 1px; }
.hero .lead { margin-top: 10px; color: #6b6157; max-width: 760px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 24px 0 8px; }
.card {
  display: block; background: #fff; border: 1px solid #e5ded1; border-radius: 6px;
  padding: 18px 20px; text-decoration: none; color: inherit;
}
.card:hover { border-color: #d8b26a; }
.card h2 { font-size: 19px; margin-bottom: 8px; }
.card p { font-size: 15px; color: #6b6157; line-height: 1.7; }
.card .go { display: inline-block; margin-top: 12px; font-size: 15px; color: #a8791f; }
.card-plain { background: #fbf8f2; }

.about { background: #fff; border: 1px solid #e5ded1; border-radius: 6px; padding: 24px 26px; margin: 28px 0 34px; }
.about h2 { font-size: 21px; margin-bottom: 14px; }
.about h3 { font-size: 17px; margin: 18px 0 6px; color: #4a4038; }
.about p { color: #554d45; font-size: 16px; }

.site-foot { border-top: 1px solid #e0d8c9; background: #efeae1; padding: 20px 0 26px; font-size: 14px; color: #6b6157; }
.foot-links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 14px; }
.foot-links a { color: #6b6157; text-decoration: none; }
.foot-links a:hover { color: #a8791f; }

.page-head { padding: 30px 0 4px; }
.page-head h1 { font-size: 26px; letter-spacing: 1px; }
.page-head p { color: #6b6157; margin-top: 8px; }

.tool { background: #fff; border: 1px solid #e5ded1; border-radius: 6px; padding: 22px 24px; margin: 22px 0 34px; }
.field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.field label { min-width: 78px; font-size: 15px; color: #4a4038; }
.field input, .field select {
  font-size: 16px; padding: 7px 10px; border: 1px solid #d5cbb8; border-radius: 4px;
  background: #fdfcf9; color: #2b2622; min-width: 90px;
}
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tab {
  font-size: 15px; padding: 7px 16px; border: 1px solid #d5cbb8; border-radius: 4px;
  background: #f3efe7; color: #4a4038; cursor: pointer;
}
.tab.on { background: #2b2622; color: #f7f5f1; border-color: #2b2622; }
.btn {
  font-size: 16px; padding: 9px 26px; border: 1px solid #a8791f; border-radius: 4px;
  background: #a8791f; color: #fff; cursor: pointer;
}
.btn:hover { background: #8f6517; }
.hint { font-size: 14px; color: #8a8075; }

.cta-band { background: #2b2622; color: #e8e2d6; border-radius: 6px; padding: 18px 22px; margin: 0 0 26px; font-size: 15px; }
.cta-band a { color: #e5c07b; margin-left: 10px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 23px; }
  .site-head .wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .about, .tool { padding: 18px 16px; }
}

/* ---- 排盘页 ---- */
.site-nav a.on { color: #d8b26a; }
.radio { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: #4a4038; min-width: auto; }
.radio input { width: 16px; height: 16px; }
.gz { width: 74px !important; text-align: center; letter-spacing: 2px; }
.btn.ghost { background: #fff; color: #a8791f; border-color: #a8791f; }
#err:not(:empty) { display: block; margin-top: 8px; font-size: 15px; color: #b0413e; }

.rev-list { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.rev-item {
  font-size: 15px; padding: 6px 12px; border: 1px solid #d5cbb8; border-radius: 4px;
  background: #fbf8f2; cursor: pointer; color: #4a4038;
}
.rev-item:hover { border-color: #a8791f; color: #a8791f; }

.sec-title { font-size: 20px; margin: 26px 0 12px; }
.pan-frame { background: #fff; border: 1px solid #e5ded1; border-radius: 6px; padding: 18px 20px; }
.pan-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: #554d45; margin-bottom: 14px; }
.pan-meta b { color: #2b2622; font-weight: 600; }

.pan-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pan-table th { font-size: 15px; font-weight: 600; color: #4a4038; padding: 8px 4px; background: #f3efe7; border: 1px solid #e5ded1; }
.pan-table .row-h { width: 66px; font-size: 14px; font-weight: 400; color: #6b6157; background: #faf8f4; }
.pan-table td { text-align: center; padding: 10px 4px; border: 1px solid #e5ded1; background: #fff; }
.pan-table td.big { font-size: 26px; }
.pan-table td.small { font-size: 14px; color: #554d45; }
.gz-gan, .gz-zhi { display: block; line-height: 1.25; }
.pan-table .ss { display: block; font-size: 13px; color: #a8791f; }
.canggan { font-size: 13px; }
.canggan .cg { display: block; color: #554d45; line-height: 1.6; }

.dayun-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.dy-card {
  background: #fff; border: 1px solid #e5ded1; border-radius: 5px; padding: 8px 2px; cursor: pointer;
  text-align: center; font-family: inherit;
}
.dy-card.on { border-color: #a8791f; background: #fbf6ec; }
.dy-gz { font-size: 19px; color: #2b2622; }
.dy-ss { font-size: 12px; color: #a8791f; margin-top: 2px; }
.dy-age { font-size: 12px; color: #8a8075; margin-top: 3px; }
.dy-year { font-size: 12px; color: #8a8075; }

.liunian-box { margin-top: 14px; background: #fff; border: 1px solid #e5ded1; border-radius: 6px; padding: 14px 16px; min-height: 60px; }
.ln-title { font-size: 15px; color: #4a4038; margin-bottom: 10px; }
.ln-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.ln-cell { text-align: center; border: 1px solid #eee7db; border-radius: 4px; padding: 6px 2px; background: #fdfcf9; }
.ln-year { font-size: 14px; color: #2b2622; }
.ln-gz { font-size: 15px; color: #4a4038; }
.ln-ss { font-size: 11px; color: #a8791f; }
.ln-age { font-size: 11px; color: #9a9086; }

@media (max-width: 640px) {
  .pan-table td.big { font-size: 24px; }
  .pan-table .row-h { width: 46px; font-size: 12px; }
  .dayun-strip { grid-template-columns: repeat(8, 1fr); gap: 3px; }
  .dy-gz { font-size: 15px; }
  .dy-ss, .dy-age, .dy-year { font-size: 10px; }
  .ln-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ---- 黄历页 ---- */
main > h1 { font-size: 26px; letter-spacing: 1px; margin: 26px 0 10px; }
main > .lead { color: #6b6157; margin-bottom: 6px; }
.crumb { font-size: 14px; color: #8a8075; padding-top: 14px; }
.crumb a { color: #8a8075; text-decoration: none; }
.crumb a:hover { color: #a8791f; }

.panel { background: #fff; border: 1px solid #e5ded1; border-radius: 6px; padding: 20px 22px; margin: 18px 0; }
.panel h2 { font-size: 20px; margin-bottom: 12px; }
.panel h3 { font-size: 16px; margin: 16px 0 6px; color: #4a4038; }
.muted { color: #8a8075; font-size: 14px; }
.note { font-size: 15px; color: #6b6157; margin-top: 12px; }

table.kv { width: 100%; border-collapse: collapse; font-size: 15px; }
table.kv th {
  width: 118px; text-align: left; font-weight: 400; color: #6b6157;
  padding: 8px 10px 8px 0; vertical-align: top; border-bottom: 1px dashed #ece5d8;
}
table.kv td { padding: 8px 0; border-bottom: 1px dashed #ece5d8; vertical-align: top; }
table.kv tr:last-child th, table.kv tr:last-child td { border-bottom: none; }

table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th, table.grid td { border: 1px solid #e5ded1; padding: 7px 9px; text-align: left; vertical-align: top; }
table.grid th { background: #f3efe7; color: #4a4038; font-weight: 600; }
table.grid tbody tr:nth-child(even) { background: #fdfcf9; }
.shichen td:first-child { white-space: nowrap; }

.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.hl-box { background: #fff; border: 1px solid #e5ded1; border-radius: 6px; padding: 16px 18px; }
.hl-box.yi { border-top: 3px solid #3f7d4f; }
.hl-box.ji { border-top: 3px solid #b0413e; }
.hl-box h2 { font-size: 18px; margin-bottom: 6px; }
ul.gloss { list-style: none; }
ul.gloss li { padding: 6px 0; border-bottom: 1px dashed #ece5d8; font-size: 15px; }
ul.gloss li:last-child { border-bottom: none; }
ul.gloss li b { display: inline-block; min-width: 74px; color: #2b2622; font-weight: 600; }
ul.gloss li span { color: #6b6157; font-size: 14px; margin-left: 6px; }

.hl-pager { display: flex; justify-content: space-between; gap: 10px; margin: 20px 0; font-size: 15px; flex-wrap: wrap; }
.hl-pager a { background: #fff; border: 1px solid #e5ded1; border-radius: 5px; padding: 8px 14px; text-decoration: none; color: #4a4038; }
.hl-pager a:hover { border-color: #a8791f; color: #a8791f; }

.hl-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
ul.months { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 15px; }
ul.months a { color: #4a4038; text-decoration: none; }
ul.months a:hover { color: #a8791f; }
.cta { margin-top: 16px; }
.cta .btn { text-decoration: none; display: inline-block; }

table.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.cal th { font-size: 14px; background: #f3efe7; border: 1px solid #e5ded1; padding: 6px; color: #4a4038; font-weight: 600; }
table.cal td { border: 1px solid #e5ded1; padding: 0; background: #fff; height: 78px; vertical-align: top; }
table.cal td.empty { background: #faf8f4; }
table.cal td.today { background: #fbf6ec; box-shadow: inset 0 0 0 2px #d8b26a; }
table.cal a { display: block; padding: 6px 7px; text-decoration: none; color: #2b2622; }
table.cal a:hover { background: #f7f2e7; }
table.cal b { font-size: 16px; }
table.cal i { font-style: normal; float: right; font-size: 12px; padding: 1px 5px; border-radius: 3px; }
table.cal i.good { background: #e8f3e9; color: #3f7d4f; }
table.cal i.bad { background: #f8eae8; color: #b0413e; }
table.cal span { display: block; font-size: 12px; color: #6b6157; line-height: 1.5; margin-top: 2px; }
table.cal span.gz { width: auto !important; letter-spacing: 0; color: #2b2622; font-size: 13px; }
table.cal span.yi { color: #8a8075; }

@media (max-width: 640px) {
  main > h1 { font-size: 22px; }
  .hl-grid, .hl-cols { grid-template-columns: 1fr; }
  .panel { padding: 16px 14px; }
  table.kv th { width: 92px; }
  ul.gloss li b { display: block; min-width: 0; }
  ul.gloss li span { margin-left: 0; }
  .shichen { font-size: 13px; }
  .shichen th, .shichen td { padding: 5px 4px; }
  table.cal td { height: auto; }
  table.cal span.lm, table.cal span.yi { display: none; }
  ul.months { grid-template-columns: 1fr; }
}

/* ---- 查表页（格局表 / 用神表 / 神煞表 / 命例） ---- */
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 16px 0 10px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #6b6157; min-width: 108px; }
.fld select, .fld input {
  font: inherit; font-size: 15px; color: #2b2622; background: #fdfcf9;
  border: 1px solid #d5cbb8; border-radius: 4px; padding: 7px 9px; width: 100%;
}
.fld select:focus, .fld input:focus { outline: none; border-color: #a8791f; }
.fld.grow { flex: 1 1 260px; min-width: 200px; }
.fld.mini { min-width: 74px; flex: 0 0 74px; }

.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
table.tbl th {
  background: #f3efe7; color: #4a4038; font-weight: 600; text-align: left;
  border: 1px solid #e5ded1; padding: 8px 10px; white-space: nowrap;
}
table.tbl td { border: 1px solid #e5ded1; padding: 8px 10px; vertical-align: top; color: #554d45; }
table.tbl tbody tr:nth-child(even) { background: #fdfcf9; }
table.tbl tbody tr:target { background: #fbf6ec; }
table.tbl td.c { text-align: center; white-space: nowrap; font-weight: 600; color: #4a4038; }
table.tbl td.yong { white-space: nowrap; font-weight: 600; color: #a8791f; }
table.tbl td.ok { color: #3f7d4f; }
table.tbl td.no { color: #b0413e; }
table.tbl td.xj { color: #554d45; font-size: 14px; }
table.tbl td i.muted { display: block; font-style: normal; font-weight: 400; font-size: 12px; margin-top: 2px; }
h3 i.muted { font-style: normal; font-weight: 400; font-size: 14px; margin-left: 10px; }
table.tbl.ys { min-width: 640px; }
table.tbl.ys th:first-child, table.tbl.ys td:first-child { white-space: nowrap; }
table.tbl.ss { min-width: 0; }
table.tbl.ss td.c { font-weight: 400; color: #554d45; white-space: normal; }
table.tbl.ss th { text-align: center; }

.calc { background: #fbf8f2; border: 1px solid #e5ded1; border-radius: 6px; padding: 16px 18px; margin: 16px 0 4px; }
.calc .filters { margin-top: 0; }
.out { margin-top: 14px; }
.out:empty { display: none; }
ul.hits { list-style: none; display: grid; gap: 6px; }
ul.hits li { background: #fff; border: 1px solid #e5ded1; border-left: 3px solid #a8791f; border-radius: 4px; padding: 7px 12px; font-size: 15px; color: #554d45; }
ul.hits li b { color: #2b2622; }
.err { color: #b0413e; font-size: 15px; }

ol.steps { margin: 10px 0 0 20px; }
ol.steps li { margin-bottom: 8px; font-size: 16px; color: #554d45; }
ol.steps li b { color: #2b2622; }

.cse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 16px 0 4px; }
.cse { background: #fff; border: 1px solid #e5ded1; border-radius: 6px; padding: 14px 16px; }
.pz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.pz .p { display: block; text-align: center; background: #faf8f4; border: 1px solid #ece5d8; border-radius: 4px; padding: 5px 2px; }
.pz .p i { display: block; font-style: normal; font-size: 12px; color: #8a8075; }
.pz .p b { display: block; font-size: 19px; letter-spacing: 2px; color: #2b2622; }
table.kv.mini { font-size: 14px; margin-bottom: 8px; }
table.kv.mini th { width: 62px; padding: 5px 8px 5px 0; }
table.kv.mini td { padding: 5px 10px 5px 0; }
.cse .muted { font-size: 13px; line-height: 1.6; }
.cse .muted a { color: #a8791f; }

@media (max-width: 640px) {
  .fld { min-width: calc(50% - 5px); flex: 0 0 calc(50% - 5px); }
  .fld.grow { flex-basis: 100%; }
  .fld.mini { flex: 1 1 0; min-width: 0; }
  table.tbl, table.tbl.ys { font-size: 14px; }
  table.tbl th, table.tbl td { padding: 6px 7px; }
  .cse-grid { grid-template-columns: 1fr; }
  .pz .p b { font-size: 17px; letter-spacing: 1px; }
  h3 i.muted { display: block; margin-left: 0; }
}