/* ============================================================
   合缘堂 · 免费测算 / 免费自查 页面样式
   来源：APP 古典视觉（宣纸底 / 朱红 / 描金）+ 站点列表页扩展
   .hy-app 为作用域容器，避免污染全站 CSS 变量
   ============================================================ */

/* ---------- 作用域变量 ---------- */
.hy-app {
  --paper: #f4ece0;
  --paper2: #faf5ec;
  --ink: #2c241c;
  --ink2: #5a4c3c;
  --ink3: #8a7a66;
  --red: #9d3323;
  --red2: #b8432d;
  --red-dk: #7a2418;
  --gold: #a8862f;
  --gold2: #c9a961;
  --gold-lt: #e2cf9e;
  --green: #3f7a4e;
  --line: #d9c9ad;
  --shadow2: 0 -8px 34px rgba(70, 48, 26, .20);
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --serif: "Songti SC", "STSong", "SimSun", "Source Han Serif SC", "Noto Serif SC", serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", var(--serif);
}

/* ================= 页面主视觉 ================= */
.calc-hero {
  margin: 20px 0 6px;
  padding: 26px 24px 22px;
  border-radius: 14px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0, rgba(201, 169, 97, .22), transparent 62%),
    linear-gradient(160deg, #8f2f21, #9d3323 58%, #8a2b1e);
  color: #f6ead6;
  border-bottom: 2px solid var(--gold, #a8862f);
  box-shadow: 0 6px 24px rgba(122, 36, 24, .26);
  position: relative;
  overflow: hidden;
}
.calc-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--gold, #a8862f) 0 9px, transparent 9px 15px);
  opacity: .7;
}
.calc-hero h1 {
  font-family: var(--kai, serif);
  font-size: 30px;
  letter-spacing: .34em;
  text-indent: .34em;
  font-weight: 600;
  color: #fdf3e0;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(201, 169, 97, .5);
}
.calc-hero p { margin: 8px 0 0; font-size: 13px; color: #e8cf9f; letter-spacing: .06em; line-height: 1.8; }

.calc-note {
  margin: 22px 0 34px;
  padding: 13px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(238, 247, 238, .85), rgba(228, 240, 228, .65));
  border: 1px solid #c3d9c3;
}
.calc-note p { margin: 0; font-size: 12.5px; color: #4a6a54; line-height: 1.75; }

/* ---------- 门类网格 ---------- */
.calc-cat-grid { display: flex; flex-direction: column; gap: 18px; margin-top: 20px; }
.calc-cat-block {
  border: 1px solid var(--line, #d9c9ad);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 253, 248, .97), rgba(247, 240, 229, .9));
  box-shadow: 0 3px 12px rgba(120, 95, 60, .08);
  overflow: hidden;
}
.calc-cat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg, #fbf4e6, #f4ead6);
  border-bottom: 1px solid var(--line, #d9c9ad);
  position: relative;
}
.calc-cat-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--red, #9d3323), var(--gold, #a8862f));
}
.calc-cat-icon {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 21px; color: var(--red-dk, #7a2418);
  background: radial-gradient(circle at 50% 40%, #fdf2df, #f0dfc4);
  border: 1px solid var(--gold-lt, #e2cf9e);
  border-radius: 10px;
}
.calc-cat-head h2 {
  margin: 0; font-family: var(--kai, serif); font-size: 19px;
  letter-spacing: .1em; color: var(--red-dk, #7a2418);
}
.calc-cat-head p { margin: 2px 0 0; font-size: 12px; color: var(--ink3, #8a7a66); letter-spacing: .04em; }
.calc-cat-count {
  margin-left: auto; flex: 0 0 auto;
  font-size: 11px; color: var(--gold, #a8862f);
  border: 1px solid var(--gold-lt, #e2cf9e); border-radius: 14px;
  padding: 2px 12px; background: rgba(255, 252, 245, .9);
  font-family: var(--sans, sans-serif);
}
.calc-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 12px;
  padding: 14px;
}
.calc-proj-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 15px;
  border-radius: 10px;
  border: 1px solid var(--line, #d9c9ad);
  background: rgba(255, 253, 248, .92);
  box-shadow: 0 2px 8px rgba(120, 95, 60, .06);
  transition: transform .16s, box-shadow .16s, border-color .16s;
  text-decoration: none;
}
.calc-proj-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold-lt, #e2cf9e);
  box-shadow: 0 8px 18px rgba(120, 95, 60, .14);
}
.calc-proj-top { display: flex; align-items: center; gap: 8px; }
.calc-proj-name {
  font-family: var(--kai, serif); font-size: 15.5px; font-weight: 600;
  color: var(--ink, #2c241c); letter-spacing: .04em;
}
.calc-proj-badge {
  font-style: normal; font-size: 9px; color: #fff;
  background: var(--red, #9d3323); border-radius: 6px; padding: 1px 6px;
  font-family: var(--sans, sans-serif); letter-spacing: .06em;
}
.calc-proj-desc {
  margin: 0; font-size: 12px; color: var(--ink2, #5a4c3c);
  line-height: 1.66; min-height: 40px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.calc-proj-go {
  margin-top: auto;
  font-size: 12px; color: var(--gold, #a8862f); letter-spacing: .1em;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--kai, serif);
}
.calc-proj-card:hover .calc-proj-go { color: var(--red-dk, #7a2418); }
.calc-empty {
  padding: 12px; text-align: center; color: var(--ink3, #8a7a66);
  font-family: var(--kai, serif); font-size: 14px;
}

/* ---------- 详情页 ---------- */
.item-hero {
  margin: 20px 0 4px;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid var(--line, #d9c9ad);
  background: linear-gradient(180deg, rgba(255, 253, 248, .97), rgba(247, 240, 229, .92));
  box-shadow: 0 3px 12px rgba(120, 95, 60, .08);
  position: relative; overflow: hidden;
}
.item-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--red, #9d3323), var(--gold, #a8862f));
}
.item-icon {
  width: 52px; height: 52px; float: left; margin: 2px 16px 8px 0;
  display: grid; place-items: center;
  font-size: 26px; color: var(--red-dk, #7a2418);
  background: radial-gradient(circle at 50% 40%, #fdf2df, #f0dfc4);
  border: 1px solid var(--gold-lt, #e2cf9e); border-radius: 11px;
}
.item-hero h1 {
  margin: 0; font-family: var(--kai, serif); font-size: 25px;
  letter-spacing: .12em; color: var(--red-dk, #7a2418);
}
.item-cat {
  font-size: 11.5px; color: var(--gold, #a8862f);
  letter-spacing: .14em; margin-top: 4px; font-family: var(--kai, serif);
}
.item-desc { margin: 12px 0 0; font-size: 14px; color: var(--ink2, #5a4c3c); line-height: 1.9; text-align: justify; }
.item-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.item-actions .btn { min-width: 168px; }

.item-intro {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--line, #d9c9ad);
  background: linear-gradient(180deg, rgba(246, 240, 229, .85), rgba(242, 234, 219, .75));
}
.item-intro b {
  display: block; font-family: var(--kai, serif); font-size: 14px;
  color: var(--red-dk, #7a2418); letter-spacing: .08em; margin-bottom: 5px;
}
.item-intro p { margin: 0; font-size: 12.5px; color: var(--ink2, #5a4c3c); line-height: 1.8; }

/* ================= 按钮 ================= */
.btn {
  padding: 10px 14px; border-radius: 8px;
  font-family: var(--kai, serif); font-size: 14.5px; font-weight: 600;
  letter-spacing: .10em; transition: .15s;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; background: none;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary {
  color: #fdf3e0; background: linear-gradient(180deg, #a93a28, #8f2b1d);
  border-color: var(--red-dk, #7a2418);
  box-shadow: 0 3px 10px rgba(143, 43, 29, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn-ghost {
  color: var(--red-dk, #7a2418); background: linear-gradient(180deg, #fffaef, #f6ecda);
  border-color: var(--gold-lt, #e2cf9e); box-shadow: 0 2px 8px rgba(168, 134, 47, .14);
}
.btn-blk { width: 100%; margin-top: 2px; }

/* ================= 分隔 / 印章 / 隐私条 ================= */
.orn-div { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 0 8px; }
.orn-div .ln { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-lt, #e2cf9e), transparent); max-width: 110px; }
.orn-div .dm { font-size: 9px; color: var(--gold, #a8862f); }
.orn-div .tx { font-family: var(--kai, serif); font-size: 12.5px; color: var(--gold, #a8862f); letter-spacing: .22em; }

.seal {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 6px;
  font-family: var(--kai, serif); font-size: 12px; letter-spacing: .02em; line-height: 1.05; text-align: center;
  color: #fff4e4; background: linear-gradient(160deg, #b03a26, #8a2617);
  border: 1.5px solid #e0b98f;
  box-shadow: 0 2px 9px rgba(138, 38, 23, .32), inset 0 0 0 1.5px rgba(255, 244, 228, .28);
  padding: 2px;
}
.seal-lg { width: 60px; height: 60px; font-size: 17px; border-radius: 9px; }

.privacy-strip {
  display: flex; gap: 11px; margin: 14px 0 8px; padding: 13px 14px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(238, 247, 238, .85), rgba(228, 240, 228, .65));
  border: 1px solid #c3d9c3;
}
.pv-ic { font-size: 20px; color: var(--green, #3f7a4e); flex: 0 0 auto; line-height: 1.2; }
.privacy-strip b { font-family: var(--kai, serif); font-size: 14px; color: #2f5a3a; letter-spacing: .06em; }
.privacy-strip p { margin: 2px 0 0; font-size: 12px; color: #4a6a54; line-height: 1.62; }
.foot-note { text-align: center; font-size: 10.5px; color: var(--ink3, #8a7a66); letter-spacing: .1em; padding: 16px 0 8px; }
.empty { text-align: center; padding: 34px 0; color: var(--ink3, #8a7a66); font-family: var(--kai, serif); font-size: 15px; }

/* ================= 底部抽屉 ================= */
.mask {
  position: fixed; inset: 0; z-index: 1060;
  background: radial-gradient(ellipse at 50% 100%, rgba(44, 36, 28, .5), rgba(30, 22, 16, .62));
  opacity: 0; pointer-events: none; transition: .24s; backdrop-filter: blur(1.5px);
}
.mask.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1070;
  max-width: 600px; margin: 0 auto; max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #fdf9f1, #f5ece0);
  border-top: 2.5px solid var(--gold, #a8862f);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow2, 0 -8px 34px rgba(70, 48, 26, .2));
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.22, .8, .3, 1);
  overflow: hidden;
}
.sheet.on { transform: translateY(0); }
.sheet::before {
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 3.5px; border-radius: 3px; background: var(--gold-lt, #e2cf9e); z-index: 3;
}
.sheet-body { overflow-y: auto; padding: 20px 18px 26px; -webkit-overflow-scrolling: touch; }
@supports not (backdrop-filter: blur(1px)) { .mask { background: rgba(30, 22, 16, .6); } }

.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--line, #d9c9ad); margin-bottom: 14px; }
.dlg-nm { font-family: var(--kai, serif); font-size: 20px; font-weight: 600; color: var(--red-dk, #7a2418); letter-spacing: .06em; }
.dlg-sub { margin-top: 3px; font-size: 11.5px; color: var(--gold, #a8862f); letter-spacing: .14em; }
.dlg-sub2 { font-size: 11.5px; color: var(--ink3, #8a7a66); margin: -4px 0 9px; letter-spacing: .06em; }
.dlg-x {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  color: var(--ink3, #8a7a66); font-size: 15px; cursor: pointer;
  border: 1px solid var(--line, #d9c9ad); background: rgba(255, 253, 248, .9);
  display: grid; place-items: center;
}
.dlg-x:active { background: #f0e4d1; }

/* ================= 表单 ================= */
.dlg-form { display: flex; flex-direction: column; gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld > span { font-size: 12px; color: var(--ink3, #8a7a66); letter-spacing: .14em; font-family: var(--kai, serif); }
.fld input, .fld select {
  padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line, #d9c9ad);
  background: rgba(255, 253, 248, .95); outline: none; font-size: 15px; color: var(--ink, #2c241c);
  box-shadow: inset 0 1px 3px rgba(120, 95, 60, .07); width: 100%; appearance: none;
}
.fld select {
  background-image: linear-gradient(45deg, transparent 50%, var(--gold, #a8862f) 50%), linear-gradient(135deg, var(--gold, #a8862f) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.fld input:focus, .fld select:focus {
  border-color: var(--gold, #a8862f);
  box-shadow: 0 0 0 2px rgba(201, 169, 97, .24), inset 0 1px 3px rgba(120, 95, 60, .07);
}
.fld input::placeholder { color: var(--ink3, #8a7a66); opacity: .65; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 9px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-b {
  padding: 10px; border-radius: 8px; border: 1px solid var(--line, #d9c9ad);
  background: rgba(255, 253, 248, .95); cursor: pointer;
  font-family: var(--kai, serif); font-size: 14px; color: var(--ink2, #5a4c3c); letter-spacing: .06em;
}
.seg-b.on {
  color: #fdf3e0; background: linear-gradient(180deg, #a93a28, #8f2b1d); border-color: var(--red-dk, #7a2418);
  box-shadow: 0 3px 10px rgba(143, 43, 29, .24);
}
.dlg-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ask-strip {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 2px; padding: 11px 13px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(168, 134, 47, .13), rgba(168, 134, 47, .06));
  border: 1px solid rgba(168, 134, 47, .38);
}
.ask-ic {
  flex: 0 0 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%;
  background: linear-gradient(180deg, #a93a28, #8f2b1d); color: #fdf3e0; font-family: var(--kai, serif); font-size: 12px;
}
.ask-strip b { font-family: var(--kai, serif); font-size: 12.5px; color: #7d641f; letter-spacing: .1em; }
.ask-strip p { margin: 3px 0 0; font-size: 13.2px; color: var(--ink, #2c241c); line-height: 1.6; font-family: var(--kai, serif); }
.dlg-priv { margin-top: 12px; font-size: 11px; color: var(--green, #3f7a4e); text-align: center; letter-spacing: .04em; line-height: 1.6; }

/* ================= 结果 ================= */
.blk-t {
  font-family: var(--kai, serif); font-size: 15px; font-weight: 600;
  color: var(--red-dk, #7a2418); letter-spacing: .16em;
  margin: 18px 0 9px; padding-left: 10px;
  border-left: 3px solid var(--gold, #a8862f); line-height: 1.3;
}
.pp-table { border: 1px solid var(--line, #d9c9ad); border-radius: 10px; overflow: hidden; background: rgba(255, 253, 248, .95); }
.pp-row { display: grid; grid-template-columns: 52px repeat(4, 1fr); align-items: center; border-bottom: 1px solid rgba(217, 201, 173, .55); }
.pp-row:last-child { border-bottom: 0; }
.pp-hd { background: linear-gradient(180deg, #9d3323, #8b2b1d); color: #f8ecd6; }
.pp-hd span { text-align: center; font-family: var(--kai, serif); font-size: 12.5px; letter-spacing: .1em; padding: 7px 0; }
.pp-rl {
  font-size: 11px; color: var(--ink3, #8a7a66); text-align: center; letter-spacing: .08em; font-family: var(--kai, serif);
  border-right: 1px solid rgba(217, 201, 173, .55); align-self: stretch; display: grid; place-items: center;
}
.pp-gz { display: flex; gap: 1px; justify-content: center; padding: 8px 0; font-family: var(--kai, serif); }
.pp-gz b { font-size: 20px; font-weight: 600; line-height: 1.1; }
.pp-sm { text-align: center; font-size: 11.5px; color: var(--ink2, #5a4c3c); padding: 5px 0; font-family: var(--kai, serif); }
.pp-sm.sm2 { color: var(--gold, #a8862f); font-size: 10.5px; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pp-meta span {
  font-size: 11px; color: var(--ink2, #5a4c3c); background: rgba(255, 253, 248, .9);
  border: 1px solid var(--line, #d9c9ad); border-radius: 14px; padding: 3px 10px; letter-spacing: .05em;
}

.wx-bars { display: flex; flex-direction: column; gap: 7px; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line, #d9c9ad); background: rgba(255, 253, 248, .92); }
.wx-b { display: flex; align-items: center; gap: 9px; }
.wx-nm { flex: 0 0 auto; width: 20px; font-family: var(--kai, serif); font-size: 14px; color: var(--ink, #2c241c); text-align: center; }
.wx-bar { flex: 1; height: 9px; border-radius: 5px; background: rgba(217, 201, 173, .4); overflow: hidden; box-shadow: inset 0 1px 2px rgba(120, 95, 60, .14); }
.wx-bar i { display: block; height: 100%; border-radius: 5px; transition: width .6s cubic-bezier(.2, .8, .3, 1); }
.wx-v { flex: 0 0 auto; width: 44px; text-align: right; font-size: 11.5px; color: var(--ink2, #5a4c3c); font-family: var(--sans, sans-serif); }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font-size: 11.5px; padding: 3px 10px; border-radius: 14px; letter-spacing: .05em; color: var(--ink2, #5a4c3c); background: rgba(255, 253, 248, .95); border: 1px solid var(--line, #d9c9ad); }
.chip-warn { color: #8a5a12; background: #fdf6e3; border-color: #e0c98a; }
.chip-bad { color: var(--red-dk, #7a2418); background: #fdeeeb; border-color: #e3b4aa; }
.chip-mid { color: #5a4c3c; background: #f7f2e8; border-color: #ddd0b6; }

.yun-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.yun-c { padding: 9px 4px; text-align: center; border-radius: 9px; border: 1px solid var(--line, #d9c9ad); background: rgba(255, 253, 248, .9); display: flex; flex-direction: column; gap: 1px; }
.yun-c b { font-family: var(--kai, serif); font-size: 16px; color: var(--ink, #2c241c); line-height: 1.2; }
.yun-c span { font-size: 9.5px; color: var(--ink3, #8a7a66); font-family: var(--sans, sans-serif); }
.yun-c em { font-style: normal; font-size: 10px; color: var(--gold, #a8862f); }
.y-good { border-color: #b7d3ba; background: linear-gradient(180deg, #f3faf3, #e8f4e9); }
.y-good b { color: #2f6a3d; }
.y-bad { border-color: #e3b4aa; background: linear-gradient(180deg, #fdf1ee, #fae4df); }
.y-bad b { color: var(--red-dk, #7a2418); }

.rd-p {
  position: relative; margin: 0 0 11px; padding: 12px 14px 12px 40px;
  font-size: 13.2px; line-height: 1.9; color: var(--ink, #2c241c);
  background: rgba(255, 253, 248, .9); border: 1px solid var(--line, #d9c9ad); border-radius: 10px; text-align: justify;
}
.rd-n {
  position: absolute; left: 11px; top: 11px; width: 21px; height: 21px; display: grid; place-items: center;
  font-family: var(--kai, serif); font-size: 11.5px; color: #fff4e4;
  background: linear-gradient(160deg, #b03a26, #8a2617); border-radius: 4px;
  box-shadow: 0 1px 4px rgba(138, 38, 23, .28);
}

.yx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yx { padding: 12px 13px; border-radius: 10px; border: 1px solid; }
.yx-h { font-family: var(--kai, serif); font-size: 16px; font-weight: 600; letter-spacing: .2em; margin-bottom: 7px; }
.yx li { position: relative; padding-left: 12px; font-size: 11.8px; line-height: 1.72; margin-bottom: 5px; color: var(--ink2, #5a4c3c); }
.yx li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; }
.yx-good { border-color: #b7d3ba; background: linear-gradient(180deg, #f4faf5, #eaf4eb); }
.yx-good .yx-h { color: #2f6a3d; }
.yx-good li::before { background: #4a8a5c; }
.yx-bad { border-color: #e3b4aa; background: linear-gradient(180deg, #fdf2ef, #fae6e1); }
.yx-bad .yx-h { color: var(--red-dk, #7a2418); }
.yx-bad li::before { background: var(--red2, #b8432d); }

.hl-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hl-gz { padding: 12px 4px; text-align: center; border-radius: 10px; border: 1px solid var(--gold-lt, #e2cf9e); background: linear-gradient(180deg, #fffaf0, #f7eddb); }
.hl-gz b { display: block; font-family: var(--kai, serif); font-size: 17px; color: var(--red-dk, #7a2418); line-height: 1.3; }
.hl-gz span { font-size: 10px; color: var(--ink3, #8a7a66); }

.cta-box {
  margin-top: 18px; padding: 16px; border-radius: 12px;
  border: 1px solid var(--gold-lt, #e2cf9e);
  background: linear-gradient(180deg, #fffaf0, #f6ead7); text-align: center;
  box-shadow: 0 4px 14px rgba(168, 134, 47, .15);
}
.cta-t { font-family: var(--kai, serif); font-size: 16px; font-weight: 600; color: var(--red-dk, #7a2418); letter-spacing: .1em; }
.cta-box p { margin: 7px 0 13px; font-size: 12.2px; color: var(--ink2, #5a4c3c); line-height: 1.72; text-align: left; text-indent: 2em; }

.hl-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.hl-block { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--gold-lt, #e2cf9e); background: linear-gradient(180deg, #fffaf0, #f6ead7); }
.hl-block b { display: block; font-size: 11px; color: var(--red-dk, #7a2418); margin-bottom: 3px; font-family: var(--kai, serif); }
.hl-block span { font-size: 11.5px; color: var(--ink2, #5a4c3c); line-height: 1.6; }
.hl-block.hl-xiong { border-color: #e3b4aa; background: linear-gradient(180deg, #fdf2ef, #fae6e1); }
.hl-block.hl-xiong b { color: #b04030; }

.hl-t { font-family: var(--kai, serif); font-size: 14px; color: var(--red-dk, #7a2418); text-align: center; margin: 18px 0 10px; letter-spacing: .1em; }
.hl-sc { border: 1px solid var(--gold-lt, #e2cf9e); border-radius: 10px; overflow: hidden; background: #fffaf0; }
.hl-sc-row { display: grid; grid-template-columns: 38px 78px 46px 52px 28px 60px; gap: 4px; align-items: center; padding: 7px 10px; border-bottom: 1px solid #f2e8d6; font-size: 11.5px; color: var(--ink, #2c241c); }
.hl-sc-row:last-child { border-bottom: none; }
.hl-sc-row.hl-sc-xiong { background: linear-gradient(90deg, #fdf2ef, #fdf8f5); }
.hl-sc-row.hl-sc-ji { background: linear-gradient(90deg, #f3f8f0, #fdf8f5); }
.hl-sc-name { font-family: var(--kai, serif); font-size: 12px; color: var(--red-dk, #7a2418); font-weight: 700; }
.hl-sc-time { font-size: 10.5px; color: var(--ink3, #8a7a66); }
.hl-sc-gz { font-family: var(--kai, serif); font-size: 11px; color: var(--red-dk, #7a2418); }
.hl-sc-xs { font-size: 10.5px; color: var(--ink2, #5a4c3c); }
.hl-sc-jx { font-size: 11px; font-weight: 700; }
.hl-sc-ji .hl-sc-jx { color: #3f7a2f; }
.hl-sc-xiong .hl-sc-jx { color: #b04030; }
.hl-sc-chong { font-size: 10.5px; color: var(--ink3, #8a7a66); }
.hl-sc-detail { display: flex; gap: 12px; padding: 4px 10px 8px; border-bottom: 1px solid #f2e8d6; font-size: 10.5px; color: var(--ink2, #5a4c3c); }
.hl-sc-detail:last-of-type { border-bottom: none; }
.hl-sc-yi, .hl-sc-ji { display: inline; }
.hl-sc-ji { color: #b04030; }

/* ================= 藏经阁（数据库详参） ================= */
.db-main-t { display: flex; align-items: baseline; gap: 6px; }
.db-main-t em { font-style: normal; font-size: 11px; color: var(--gold, #a8862f); font-family: var(--sans, sans-serif); letter-spacing: .14em; }
.db-note { font-size: 11px; line-height: 1.7; color: var(--ink3, #8a7a66); margin: 2px 0 10px; padding: 8px 10px; border: 1px dashed var(--line, #d9c9ad); border-radius: 8px; background: rgba(168, 134, 47, .05); }
.db-blk { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line, #d9c9ad); border-radius: 10px; background: #fffdf6; }
.db-t { font-family: var(--kai, serif); font-size: 13px; color: var(--red-dk, #7a2418); letter-spacing: .1em; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line, #d9c9ad); }
.db-r { font-size: 12px; line-height: 1.75; color: var(--ink, #2c241c); margin: 0 0 6px; }
.db-r:last-child { margin-bottom: 0; }
.db-r b { color: var(--red, #9d3323); font-weight: 700; margin-right: 6px; font-family: var(--kai, serif); font-size: 12px; letter-spacing: .04em; }

/* ================= 咨询弹窗 ================= */
.modal { position: fixed; inset: 0; z-index: 1090; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(30, 22, 16, .62); }
.modal.on { display: flex; }
.modal-body {
  width: 100%; max-width: 440px; max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, #fdf9f1, #f5ece0);
  border: 2px solid var(--gold, #a8862f); border-radius: 16px;
  box-shadow: 0 18px 46px rgba(30, 22, 16, .42); position: relative;
}
.modal-body::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(201, 169, 97, .42); border-radius: 12px; pointer-events: none; }
.mo-sheet { padding: 20px 18px 22px; position: relative; }
.mo-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.mo-ic {
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 14px; border-radius: 6px; color: #fff4e4;
  background: linear-gradient(160deg, #3f7a4e, #2f5a3a);
}
.mo-ic2 { background: linear-gradient(160deg, #b03a26, #8a2617); }
.mo-t { font-family: var(--kai, serif); font-size: 15.5px; font-weight: 600; color: var(--red-dk, #7a2418); letter-spacing: .08em; }
.mo-body { max-height: 32vh; overflow-y: auto; padding: 12px 13px; border-radius: 9px; background: rgba(246, 240, 229, .85); border: 1px solid var(--line, #d9c9ad); }
.mo-body p { margin: 0 0 8px; font-size: 11.8px; line-height: 1.78; color: var(--ink2, #5a4c3c); text-align: justify; }
.mo-body p:last-child { margin-bottom: 0; }
.mo-body p:first-child { color: var(--ink, #2c241c); font-weight: 600; }
.mo-line { height: 1px; margin: 16px 0; background: linear-gradient(90deg, transparent, var(--gold-lt, #e2cf9e), transparent); }
.wx-box {
  display: flex; align-items: center; justify-content: space-between; padding: 13px 15px;
  border-radius: 10px; border: 1.5px dashed var(--gold, #a8862f);
  background: linear-gradient(180deg, #fff8ea, #f9eeda); margin-bottom: 12px;
}
.wx-lb { font-size: 12px; color: var(--ink3, #8a7a66); letter-spacing: .16em; font-family: var(--kai, serif); }
.wx-id { font-family: var(--sans, sans-serif); font-size: 20px; font-weight: 800; color: var(--red-dk, #7a2418); letter-spacing: .06em; }
.mo-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 13px 0 12px; font-size: 10.5px; color: var(--ink3, #8a7a66); }
.mo-steps span:not(.ar) { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--gold, #a8862f); color: #fff8ec; font-size: 10px; font-family: var(--sans, sans-serif); flex: 0 0 auto; }
.mo-steps .ar { color: var(--gold-lt, #e2cf9e); font-size: 13px; margin: 0 1px; }

/* ================= Toast ================= */
.toast {
  position: fixed; left: 50%; bottom: 60px; transform: translate(-50%, 14px); z-index: 1200;
  padding: 10px 22px; border-radius: 22px; font-size: 13px; color: #fdf3e0; font-family: var(--kai, serif);
  letter-spacing: .08em; background: linear-gradient(180deg, rgba(80, 28, 18, .96), rgba(60, 20, 12, .96));
  border: 1px solid var(--gold, #a8862f); box-shadow: 0 6px 20px rgba(30, 22, 16, .4);
  opacity: 0; pointer-events: none; transition: .24s;
  white-space: nowrap; max-width: 88vw; overflow: hidden; text-overflow: ellipsis;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ================= 问题自查 ================= */
.sc-intro { padding: 14px 4px 4px; text-align: center; }
.sc-title { font-family: var(--kai, serif); font-size: 26px; letter-spacing: .34em; text-indent: .34em; color: var(--red-dk, #7a2418); font-weight: 600; }
.sc-sub { margin-top: -4px; }
.sc-txt { font-size: 13px; color: var(--ink2, #5a4c3c); text-align: left; margin: 2px 0 12px; line-height: 1.82; padding: 0 2px; text-indent: 2em; }
.sc-badge {
  display: inline-block; font-size: 11.5px; color: var(--gold, #a8862f); letter-spacing: .1em;
  border: 1px solid var(--gold-lt, #e2cf9e); border-radius: 14px;
  padding: 3px 14px; background: rgba(255, 252, 245, .8);
}
.sc-badge b { color: var(--red-dk, #7a2418); font-size: 13px; padding: 0 2px; }

.q-group {
  margin-top: 16px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line, #d9c9ad);
  background: linear-gradient(180deg, rgba(255, 253, 248, .95), rgba(247, 240, 229, .85));
  box-shadow: 0 3px 12px rgba(120, 95, 60, .08);
}
.q-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; background: linear-gradient(180deg, #9d3323, #8b2b1d); color: #f8ecd6; position: relative; }
.q-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold, #a8862f); }
.q-num { font-family: var(--kai, serif); font-size: 19px; color: var(--gold2, #c9a961); font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.q-ic { font-size: 14px; color: var(--gold2, #c9a961); opacity: .9; }
.q-nm { flex: 1; font-family: var(--kai, serif); font-size: 15.5px; letter-spacing: .10em; font-weight: 600; }
.q-cnt { font-size: 10px; color: #e0c69a; border: 1px solid rgba(224, 198, 154, .5); border-radius: 9px; padding: 1px 7px; }
.q-body { padding: 4px 0; }
.q-item { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-bottom: 1px dashed rgba(217, 201, 173, .7); transition: .14s; cursor: pointer; }
.q-item:last-child { border-bottom: 0; }
.q-item:active { background: rgba(201, 169, 97, .14); }
.q-qi {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; margin-top: 1px;
  font-family: var(--kai, serif); font-size: 11px; color: #fff4e4;
  background: linear-gradient(160deg, #b03a26, #8a2617); border-radius: 4px;
  box-shadow: 0 1px 4px rgba(138, 38, 23, .3);
}
.q-qt { flex: 1; font-size: 13.5px; color: var(--ink, #2c241c); line-height: 1.6; font-family: var(--kai, serif); letter-spacing: .02em; }
.q-go { flex: 0 0 auto; color: var(--gold, #a8862f); font-size: 19px; line-height: 1.1; font-family: var(--sans, sans-serif); }

/* ---------- 自查解答（站点补全） ---------- */
.qa-card { border: 1px solid var(--line, #d9c9ad); border-radius: 10px; background: rgba(255, 253, 248, .95); overflow: hidden; }
.qa-ask, .qa-ans { display: flex; gap: 10px; padding: 12px 14px; line-height: 1.75; font-size: 13px; }
.qa-ask { border-bottom: 1px dashed rgba(217, 201, 173, .7); color: var(--ink, #2c241c); }
.qa-ask span, .qa-ans span {
  flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center; margin-top: 2px;
  font-family: var(--kai, serif); font-size: 11.5px; color: #fff4e4; border-radius: 4px;
}
.qa-ask span { background: linear-gradient(160deg, #b03a26, #8a2617); box-shadow: 0 1px 4px rgba(138, 38, 23, .28); }
.qa-ans { color: var(--ink2, #5a4c3c); background: rgba(246, 240, 229, .5); text-align: justify; }
.qa-ans span { background: linear-gradient(160deg, #3f7a4e, #2f5a3a); }
.qa-tip { margin-top: 12px; font-size: 11.5px; color: var(--ink3, #8a7a66); line-height: 1.7; text-align: center; letter-spacing: .02em; }
.qa-more { margin-top: 10px; }
.qa-meta span { background: rgba(255, 253, 248, .9); }

/* ---------- 解梦结果 ---------- */
.dream-item { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line, #d9c9ad); border-radius: 10px; background: rgba(255, 253, 248, .92); }
.dream-item b { display: block; font-family: var(--kai, serif); font-size: 14.5px; color: var(--red-dk, #7a2418); letter-spacing: .06em; margin-bottom: 5px; }
.dream-item p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink2, #5a4c3c); text-align: justify; }

/* ---------- 抽签 ---------- */
.lot-poet {
  min-height: 64px; display: flex; align-items: center; justify-content: center; text-align: center;
  margin: 4px 0 10px; padding: 18px 14px; border-radius: 10px;
  background: linear-gradient(180deg, #fffaf0, #f7eddb); border: 1px solid var(--gold-lt, #e2cf9e);
  font-family: var(--kai, serif); font-size: 17px; font-weight: 600; letter-spacing: .14em; line-height: 1.9;
}
.lot-desc { font-size: 13px; line-height: 1.85; color: var(--ink2, #5a4c3c); text-align: justify; padding: 4px 2px 0; }
.lot-guide { display: flex; flex-direction: column; gap: 9px; }
.lot-guide p { margin: 0; padding: 10px 13px; border-radius: 9px; background: rgba(255, 253, 248, .92); border: 1px solid var(--line, #d9c9ad); font-size: 12.5px; line-height: 1.8; color: var(--ink2, #5a4c3c); text-align: justify; }
.lot-guide b { color: var(--red-dk, #7a2418); font-family: var(--kai, serif); font-size: 13px; letter-spacing: .05em; }

/* ---------- 测算详情页 ---------- */
.calc-it-hero {
  margin: 18px 0 6px; padding: 26px 24px 22px; border-radius: 14px;
  display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0, rgba(201, 169, 97, .22), transparent 62%),
    linear-gradient(160deg, #8f2f21, #9d3323 58%, #8a2b1e);
  color: #f6ead6; border-bottom: 2px solid var(--gold, #a8862f);
  box-shadow: 0 6px 24px rgba(122, 36, 24, .26);
}
.calc-it-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--gold, #a8862f) 0 9px, transparent 9px 15px); opacity: .7;
}
.calc-it-icon {
  flex: 0 0 auto; width: 58px; height: 58px; display: grid; place-items: center;
  font-family: var(--kai, serif); font-size: 30px; color: #fdf3e0;
  border: 1.5px solid rgba(226, 207, 158, .65); border-radius: 12px;
  background: linear-gradient(160deg, rgba(201, 169, 97, .22), rgba(122, 36, 24, .22));
  box-shadow: inset 0 0 0 3px rgba(122, 36, 24, .18), 0 3px 10px rgba(0, 0, 0, .18);
}
.calc-it-meta { flex: 1; min-width: 0; }
.calc-it-meta h1 { margin: 0; font-family: var(--kai, serif); font-size: 26px; letter-spacing: .14em; font-weight: 600; color: #fdf3e0; text-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 0 16px rgba(201, 169, 97, .5); }
.calc-it-cat { margin: 6px 0 0; font-size: 12.5px; color: #e8cf9f; letter-spacing: .10em; display: flex; align-items: center; gap: 8px; }
.calc-it-desc { margin: 10px 0 0; font-size: 13.5px; color: #f0ddc0; line-height: 1.8; letter-spacing: .03em; }

.calc-it-card {
  margin-top: 16px; padding: 20px 22px 18px; border-radius: 12px;
  border: 1px solid var(--line, #d9c9ad);
  background: linear-gradient(180deg, rgba(255, 253, 248, .97), rgba(247, 240, 229, .9));
  box-shadow: 0 3px 12px rgba(120, 95, 60, .08);
}
.calc-it-cta { display: flex; justify-content: center; }
.calc-it-btn {
  min-width: 240px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 13px 34px 11px; border: 0; border-radius: 10px;
  font-family: var(--kai, serif); font-size: 19px; letter-spacing: .3em; text-indent: .3em;
  color: #fdf3e0; background: linear-gradient(160deg, #b03a26, #8a2617);
  box-shadow: 0 4px 14px rgba(138, 38, 23, .32), inset 0 1px 0 rgba(255, 255, 255, .16);
  transition: .16s;
}
.calc-it-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(138, 38, 23, .38); }
.calc-it-btn:active { transform: translateY(0); }
.calc-it-btn small { font-family: var(--sans, sans-serif); font-size: 11px; letter-spacing: .12em; color: #e8cf9f; }
.calc-it-need { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.calc-it-need-t { font-size: 12.5px; color: var(--ink3, #8a7a66); }
.calc-it-note {
  margin: 14px 0 0; padding: 10px 13px; border-radius: 9px;
  font-size: 12px; line-height: 1.75; color: #4a6a54; text-align: center;
  background: linear-gradient(180deg, rgba(238, 247, 238, .85), rgba(228, 240, 228, .65));
  border: 1px solid #c3d9c3;
}
.calc-related { margin-top: 20px; }
.calc-related h3 {
  margin: 0 0 12px; padding-left: 12px; position: relative;
  font-family: var(--kai, serif); font-size: 17px; letter-spacing: .14em; color: var(--red-dk, #7a2418);
}
.calc-related h3::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--gold2, #c9a961), var(--gold, #a8862f)); }

/* 自查条目按钮重置：样式跟随 .q-item，去掉原生 button 外观 */
.q-item { border: 0; background: transparent; width: 100%; text-align: left; font: inherit; color: inherit; }

/* ================= 观音灵签（calc 首页入口） ================= */
.lot-block { border-color: var(--gold-lt, #e2cf9e); }
.lot-block .calc-cat-head {
  background: linear-gradient(90deg, #fdf3e0, #f5e6c8);
  border-bottom-color: var(--gold-lt, #e2cf9e);
}
.lot-inner { padding: 18px 16px 20px; text-align: center; }
.lot-start { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 4px; }
.lot-tip { margin: 0; font-size: 13px; color: var(--ink2, #5a4c3c); line-height: 1.8; letter-spacing: .05em; font-family: var(--kai, serif); }
.lot-btn { min-width: 200px; padding: 13px 30px; font-size: 16px; letter-spacing: .3em; text-indent: .3em; border-radius: 30px; }
.lot-result { padding: 6px 2px 2px; }
.lot-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.lot-no {
  font-family: var(--kai, serif); font-size: 19px; font-weight: 600;
  color: var(--red-dk, #7a2418); letter-spacing: .12em;
}
.lot-type {
  font-family: var(--kai, serif); font-size: 13px; letter-spacing: .1em;
  padding: 3px 13px; border-radius: 16px;
  background: linear-gradient(180deg, #e8f4e9, #dcefdd); color: #2f6a3d; border: 1px solid #b7d3ba;
}
.lot-type.t-bad { background: linear-gradient(180deg, #fdf1ee, #fae4df); color: var(--red-dk, #7a2418); border-color: #e3b4aa; }
.lot-type.t-mid { background: linear-gradient(180deg, #f7f2e8, #f1eadb); color: #7d641f; border-color: #ddd0b6; }
.lot-name { font-family: var(--kai, serif); font-size: 15px; color: var(--ink, #2c241c); letter-spacing: .08em; }
.lot-again { margin-top: 16px; }
.lot-foot { margin: 14px 0 0; font-size: 11px; color: var(--ink3, #8a7a66); letter-spacing: .04em; line-height: 1.7; }

/* ================= 响应式 ================= */
@media (max-width: 640px) {
  .calc-proj-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .fld-row { grid-template-columns: 1fr 1fr 1.05fr; }
  .yx-grid { grid-template-columns: 1fr; }
  .yun-wrap { grid-template-columns: repeat(3, 1fr); }
  .hl-sc-row { grid-template-columns: 34px 62px 40px 44px 24px 52px; font-size: 10.5px; gap: 2px; padding: 6px 8px; }
  .hl-top { grid-template-columns: repeat(2, 1fr); }
}