/* ============ 天德堂 · 风水命理测算平台 ============ */
:root {
  --ink: #17151c;
  --ink-2: #3d3a45;
  --ink-3: #7c7787;
  --line: #e8e2d6;
  --line-2: #f2ece0;
  --bg: #fbf8f2;
  --paper: #ffffff;
  --red: #a3241b;
  --red-2: #c4432f;
  --red-soft: #fbf0ed;
  --gold: #b08a3e;
  --gold-2: #d9b667;
  --gold-soft: #faf4e6;
  --jade: #2c6650;
  --blue: #2f4d6e;
  --shadow-sm: 0 1px 2px rgba(23, 21, 28, .04);
  --shadow: 0 2px 8px rgba(23, 21, 28, .05), 0 16px 40px -12px rgba(23, 21, 28, .1);
  --shadow-lg: 0 4px 12px rgba(23, 21, 28, .06), 0 32px 64px -16px rgba(23, 21, 28, .16);
  --r: 14px;
  --serif: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.serif { font-family: var(--serif); }
.mono { font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* ---------- 顶栏 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 248, 242, .88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  height: 66px; display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo .seal {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, #b83226, #8d1b13);
  color: #f7e9cd; display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px;
  box-shadow: inset 0 0 0 1.5px rgba(247, 233, 205, .35), 0 2px 6px rgba(141, 27, 19, .25);
}
.logo .t { font-family: var(--serif); font-size: 18px; letter-spacing: 3px; }
.logo .s { font-size: 10px; color: var(--ink-3); letter-spacing: 1.5px; margin-top: -2px; }
.nav-links { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  padding: 8px 13px; border-radius: 8px; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; transition: background .15s, color .15s;
}
.nav-links a:hover { background: rgba(0, 0, 0, .04); }
.nav-links a.on { color: var(--red); background: var(--red-soft); font-weight: 500; }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-guest { font-size: 12.5px; color: var(--ink-3); letter-spacing: .3px; }
@media (max-width: 980px) { .nav-guest { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; font-size: 14px; transition: all .16s; white-space: nowrap;
  background: var(--ink); color: #fff;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: none; }
.btn-primary { background: linear-gradient(160deg, #b83226, #92190f); }
.btn-primary:hover { box-shadow: 0 6px 18px -6px rgba(163, 36, 27, .5); }
.btn-gold { background: linear-gradient(160deg, #c19a4d, #a37d33); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover { background: #fff; border-color: #d8cfbd; }
.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 7px; }
.btn-lg { padding: 13px 30px; font-size: 15.5px; border-radius: 11px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- 页面容器 ---------- */
.page { max-width: 1200px; margin: 0 auto; padding: 34px 24px 90px; }
.page-head { margin-bottom: 26px; }
.page-head .kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--gold); letter-spacing: 2.5px; margin-bottom: 10px;
}
.page-head .kicker::before { content: ""; width: 22px; height: 1px; background: var(--gold-2); }
.page-head h1 { font-family: var(--serif); font-size: 30px; letter-spacing: 2px; font-weight: 500; }
.page-head p { color: var(--ink-3); margin-top: 8px; font-size: 14px; max-width: 620px; }
/* 功能页大标题右侧的半透明纹样，按 data-pat 取对应图案，做语义呼应 */
.page-head .ph-pat {
  position: absolute; right: 0; top: -6px; width: 132px; height: 132px;
  background: var(--pat-taiji) center / contain no-repeat;
  opacity: .1; pointer-events: none; user-select: none;
}
.page-head[data-pat="pillars"] .ph-pat { background-image: var(--pat-pillars); }
.page-head[data-pat="double"] .ph-pat  { background-image: var(--pat-double); }
.page-head[data-pat="seal"] .ph-pat    { background-image: var(--pat-seal); }
.page-head[data-pat="bagua"] .ph-pat   { background-image: var(--pat-bagua); }
.page-head[data-pat="compass"] .ph-pat { background-image: var(--pat-compass); }
.page-head[data-pat="sundial"] .ph-pat { background-image: var(--pat-sundial); }
.page-head[data-pat="sticks"] .ph-pat  { background-image: var(--pat-sticks); }
.page-head { position: relative; }
@media (max-width: 780px) { .page-head .ph-pat { width: 88px; height: 88px; top: -10px; opacity: .085; } }

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 64px 24px 84px;
  background:
    radial-gradient(ellipse 70% 90% at 78% 15%, rgba(217, 182, 103, .18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 90%, rgba(163, 36, 27, .22), transparent 60%),
    linear-gradient(150deg, #22192a 0%, #331f24 40%, #45231c 100%);
  color: #f4ecdc;
  text-align: left;
}
.hero > .hero-in { position: relative; z-index: 2; }
/* 太极八卦图：右上角徽章。完整呈现、不全屏铺水印 —— 要让人一眼看出是"八卦" */
.hero-taiji {
  position: absolute; top: 34px; right: 40px; width: 132px; height: 132px;
  pointer-events: none; z-index: 1;
  opacity: .88;
  filter: drop-shadow(0 0 18px rgba(217, 182, 103, .18));
  animation: ringSpin 120s linear infinite;
}
.hero-taiji svg { width: 100%; height: 100%; display: block; }
/* 八卦环水印：左下。先天八卦主「对待」，与右上徽章遥相呼应 */
.hero-bagua {
  position: absolute; bottom: -42%; left: -16%; width: 52%; max-width: 720px;
  pointer-events: none; opacity: .35;
  animation: ringSpin 240s linear infinite reverse;
}
@media (max-width: 780px) {
  /* 窄屏：缩成小徽章，贴在标题区右上，不压住人像与文字 */
  .hero-taiji { width: 76px; height: 76px; top: 18px; right: 16px; opacity: .8; }
  .hero-bagua { display: none; }
}
.hero::before, .hero::after {
  content: ""; position: absolute; border: 1px solid rgba(217, 182, 103, .13);
  border-radius: 50%; pointer-events: none;
}
.hero::before { width: 620px; height: 620px; top: -260px; right: -160px; }
.hero::after { width: 420px; height: 420px; bottom: -240px; left: -120px; }
.hero-in {
  position: relative; z-index: 1; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px; align-items: center;
}
.hero-left { min-width: 0; }
.hero-right { position: relative; }

/* 顶部真人肖像：照片 + 暗角 + 背后的金环 */
.seer-wrap { position: relative; }
.seer-photo {
  position: relative; border-radius: 200px 200px 16px 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(217, 182, 103, .18);
}
.seer-photo img {
  width: 100%; height: auto; display: block;
  /* 与深红底融合：轻微提亮 + 略降饱和，避免照片过于"抢" */
  filter: saturate(.94) contrast(1.04) brightness(1.02);
}
/* 暗角：四周压暗，让照片边缘融进首屏底色 */
.seer-vig {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 62% at 50% 34%, transparent 42%, rgba(28, 6, 4, .5) 100%),
    linear-gradient(180deg, rgba(28, 6, 4, .34) 0%, transparent 26%, transparent 74%, rgba(28, 6, 4, .62) 100%);
}
/* 金环：叠在照片外沿，缓慢旋转 */
.seer-ringwrap {
  position: absolute; inset: -7%; pointer-events: none;
  animation: ringSpin 90s linear infinite;
  opacity: .85;
}
.seer-ringwrap svg { width: 100%; height: 100%; display: block; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
@keyframes patSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hero-taiji, .hero-bagua, .foot-compass, .foot-bagua, .seer-ringwrap { animation: none !important; }
}

.seer-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .35)); }
.seer-ring { transform-origin: 160px 190px; animation: ringSpin 80s linear infinite; }
.crowd-wrap {
  position: absolute; left: -12%; right: -12%; bottom: -18px;
  pointer-events: none;
}
.crowd-svg { width: 100%; height: auto; display: block; }

/* 首屏信任区 */
.hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.avs { display: flex; }
.av {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(244, 236, 220, .22); margin-left: -9px;
  animation: avIn .5s ease both; animation-delay: var(--d, 0s);
}
.av:first-child { margin-left: 0; }
.av svg { width: 100%; height: 100%; display: block; }
/* 真人头像：金边，与后面两个插画头像统一尺寸 */
.av-photo { animation-delay: 0s; }
.av-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;
  display: block; filter: saturate(.96) brightness(1.04);
}
@keyframes avIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.trust-t b { display: block; font-size: 13px; color: #f4ecdc; font-weight: 500; letter-spacing: .5px; }
.trust-t span { display: block; font-size: 11.5px; color: rgba(244, 236, 220, .45); margin-top: 2px; letter-spacing: .5px; }

/* 首屏结果卡片在 hero 内居中 */
.hero > #heroResult { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.hero-stats-wrap { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.hero .tagline {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: 4px; color: var(--gold-2);
  border: 1px solid rgba(217, 182, 103, .3); border-radius: 30px;
  padding: 6px 18px; margin-bottom: 26px;
  background: rgba(217, 182, 103, .06);
}
.hero h1 {
  font-family: var(--serif); font-size: clamp(34px, 4.4vw, 54px);
  letter-spacing: 10px; line-height: 1.28; font-weight: 500;
}
.hero h1 em { font-style: normal; color: var(--gold-2); }
.hero .lead {
  margin: 20px 0 0; max-width: 520px;
  color: rgba(244, 236, 220, .72); font-size: 15px; line-height: 1.95; letter-spacing: .5px;
}
.hero-actions { margin-top: 34px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-actions .btn-ghost { color: #f4ecdc; border-color: rgba(244, 236, 220, .25); }
.hero-actions .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.hero-stats {
  display: flex; justify-content: center; gap: 56px; margin-top: 56px;
  padding-top: 34px; border-top: 1px solid rgba(217, 182, 103, .16);
  flex-wrap: wrap;
}
.hero-stats div { text-align: center; }
.hero-stats b { font-family: var(--serif); font-size: 27px; color: var(--gold-2); display: block; font-weight: 500; }
.hero-stats span { font-size: 12px; color: rgba(244, 236, 220, .55); letter-spacing: 2px; }

/* ---------- 首屏免费排盘（引流入口） ---------- */
.hero-form { margin-top: 34px; }
.hf-row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(217, 182, 103, .22);
  border-radius: 14px; padding: 10px; max-width: 620px;
  backdrop-filter: blur(6px);
}
.hf-inp {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(244, 236, 220, .16);
  color: #f4ecdc; border-radius: 9px; padding: 0 14px; height: 46px;
  font-size: 14px; font-family: inherit; outline: none; flex: 1; min-width: 140px;
  color-scheme: dark;
}
.hf-inp:focus { border-color: var(--gold); background: rgba(255, 255, 255, .1); }
.hf-sel { flex: 0 0 88px; min-width: 88px; cursor: pointer; }
.hf-sel option { background: #2a1a16; color: #f4ecdc; }
.hf-btn { flex: 0 0 auto; height: 46px; border-radius: 9px; }
.hf-tip { margin-top: 12px; font-size: 12.5px; color: rgba(244, 236, 220, .55); letter-spacing: .5px; }
.hf-tip b { color: var(--gold-2); font-weight: 500; }
.hero-loading { text-align: center; margin-top: 22px; color: rgba(244, 236, 220, .6); font-size: 13px; letter-spacing: 3px; }

.hero-card {
  max-width: 780px; margin: 30px auto 0; text-align: left;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(217, 182, 103, .24);
  border-radius: 16px; padding: 22px 24px; backdrop-filter: blur(10px);
  animation: hcIn .45s ease both;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5);
}
@keyframes hcIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hc-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.hc-t { font-family: var(--serif); font-size: 20px; color: #f4ecdc; letter-spacing: 1px; }
.hc-s { font-size: 12.5px; color: rgba(244, 236, 220, .5); margin-top: 6px; letter-spacing: .5px; }
.hc-gz { display: flex; gap: 8px; }
.hc-p {
  text-align: center; background: rgba(217, 182, 103, .1); border: 1px solid rgba(217, 182, 103, .2);
  border-radius: 10px; padding: 8px 10px 6px; min-width: 52px;
}
.hc-p .g { font-family: var(--serif); font-size: 21px; color: var(--gold-2); display: block; line-height: 1.15; }
.hc-p .z { font-family: var(--serif); font-size: 21px; color: #8fbfa5; display: block; line-height: 1.15; }
.hc-p .l { font-size: 10.5px; color: rgba(244, 236, 220, .45); margin-top: 4px; letter-spacing: 1px; }
.hc-body { display: flex; gap: 24px; margin-top: 20px; align-items: center; flex-wrap: wrap; }
.hc-wx { display: flex; gap: 14px; align-items: flex-end; height: 74px; }
.hc-wx-i { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hc-wx-i .bar { width: 12px; height: 60px; background: rgba(255, 255, 255, .07); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.hc-wx-i .bar i { display: block; width: 100%; border-radius: 6px; transition: height .5s ease; }
.hc-wx-i span { font-size: 12px; color: rgba(244, 236, 220, .6); }
.hc-text { flex: 1; min-width: 240px; }
.hc-text p { font-size: 13.5px; line-height: 1.95; color: rgba(244, 236, 220, .8); }
.hc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.hc-foot { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; border-top: 1px solid rgba(217, 182, 103, .14); padding-top: 18px; }
.hc-foot .btn-ghost { color: #f4ecdc; border-color: rgba(244, 236, 220, .25); }
.hc-foot .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.hc-free { font-size: 12px; color: rgba(244, 236, 220, .4); letter-spacing: 1px; margin-left: auto; }

/* ---------- 分类卡片 ---------- */
.sec-title {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 22px;
}
/* 标题左侧小纹样：由 data-pat 决定用哪一枚，与标题文字语义对应 */
.sec-title h2 { font-family: var(--serif); font-size: 23px; letter-spacing: 3px; font-weight: 500; position: relative; padding-left: 30px; }
.sec-title h2::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 20px; height: 20px; transform: translateY(-50%);
  background: var(--pat-taiji) center / contain no-repeat;
  opacity: .85;
}
.sec-title h2[data-pat="pillars"]::before { background-image: var(--pat-pillars); }
.sec-title h2[data-pat="double"]::before  { background-image: var(--pat-double); }
.sec-title h2[data-pat="seal"]::before    { background-image: var(--pat-seal); }
.sec-title h2[data-pat="bagua"]::before   { background-image: var(--pat-bagua); }
.sec-title h2[data-pat="compass"]::before { background-image: var(--pat-compass); }
.sec-title h2[data-pat="sundial"]::before { background-image: var(--pat-sundial); }
.sec-title h2[data-pat="sticks"]::before  { background-image: var(--pat-sticks); }
/* 深色底（hero / 页脚 / 深色卡片）用金色版本 */
.sec-title.gold h2 { color: #f4e6c8; }
.sec-title.gold h2::before {
  background-image: var(--pat-taiji-gold);
  opacity: .7;
}
.sec-title .en { font-size: 11px; color: var(--ink-3); letter-spacing: 2px; text-transform: uppercase; }
.sec-title .more { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.sec-title .more:hover { color: var(--red); }

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cat {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 24px 22px;
  cursor: pointer; transition: all .22s;
  display: flex; flex-direction: column; min-height: 190px;
}
.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #ddd2bc; }
.cat .icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-family: var(--serif); font-size: 21px;
  margin-bottom: 14px;
}
.cat h3 { font-family: var(--serif); font-size: 19px; letter-spacing: 1.5px; font-weight: 500; }
.cat p { font-size: 13px; color: var(--ink-3); margin-top: 7px; line-height: 1.8; flex: 1; }
.cat .go { font-size: 12.5px; color: var(--red); margin-top: 12px; display: flex; align-items: center; gap: 5px; }
.cat .go::after { content: "→"; transition: transform .2s; }
.cat:hover .go::after { transform: translateX(4px); }
.cat .bgc {
  position: absolute; right: -18px; bottom: -34px;
  font-family: var(--serif); font-size: 120px; line-height: 1;
  opacity: .045; pointer-events: none;
}
.cat.c-red .icon { background: var(--red-soft); color: var(--red); }
.cat.c-gold .icon { background: var(--gold-soft); color: #9c7728; }
.cat.c-jade .icon { background: #eef5f0; color: var(--jade); }
.cat.c-blue .icon { background: #eef2f7; color: var(--blue); }
.cat.c-ink .icon { background: #f1f0f4; color: #4b4a56; }
.cat.c-plum .icon { background: #f9eef3; color: #8d3b5c; }

/* ---------- 今日黄历条 ---------- */
.almanac-bar {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 24px; display: grid;
  grid-template-columns: auto 1px 1fr 1px 1fr; gap: 24px; align-items: center;
}
.almanac-bar .date-big { text-align: center; min-width: 96px; }
.almanac-bar .date-big b {
  font-family: var(--serif); font-size: 34px; color: var(--red); display: block; line-height: 1.15; font-weight: 500;
}
.almanac-bar .date-big span { font-size: 12px; color: var(--ink-3); letter-spacing: 1px; }
.almanac-bar .divider { width: 1px; height: 52px; background: var(--line); }
.almanac-bar .col { font-size: 13px; }
.almanac-bar .col .lb { font-size: 11.5px; color: var(--ink-3); letter-spacing: 2px; margin-bottom: 5px; }
.almanac-bar .col .items { display: flex; flex-wrap: wrap; gap: 5px; }
.almanac-bar .col .items span {
  padding: 1px 7px; border-radius: 5px; font-size: 12.5px;
}
.yi span { background: #eef5f0; color: var(--jade); }
.ji span { background: var(--red-soft); color: var(--red); }

/* ---------- 表单 ---------- */
.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-row.three { grid-template-columns: repeat(3, 1fr); }
.f { margin-bottom: 16px; }
.f:last-child { margin-bottom: 0; }
.f label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 7px; letter-spacing: .5px; }
.f label em { font-style: normal; color: var(--red-2); }
.inp {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  background: #fff; border-radius: 9px; outline: none; transition: all .15s;
}
.inp:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(176, 138, 62, .13); }
.inp::placeholder { color: #b8b2be; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237c7787' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 32px; }
textarea.inp { min-height: 90px; resize: vertical; line-height: 1.8; }

/* ---------- 日期/时间：可手填 + 可点选 ----------
 * 原生 type=date/time 在手机上只能滚轮选，改造成文本 + 小按钮：
 * 想敲键盘就敲，想点日历就点右侧图标。 */
.dt-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }
.dt-wrap > .dt-txt { padding-right: 38px; }
.dt-pick {
  position: absolute; right: 1px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; background: transparent; color: var(--ink-3);
  border-radius: 7px; cursor: pointer; transition: color .15s, background .15s;
}
.dt-pick:hover { color: var(--red); background: rgba(163, 36, 27, .07); }
.dt-pick svg { pointer-events: none; }
/* 原生控件只用来弹系统选择器，不能真藏 display:none（否则唤不出来） */
.dt-native {
  position: absolute; right: 0; bottom: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; border: 0; padding: 0;
}
.dt-bad, .dt-bad:focus { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(163, 36, 27, .1) !important; }
/* 深色首屏表单里的配色 */
.hf-inp.dt-txt { padding-right: 40px; }
.hf-inp + .dt-native { color-scheme: dark; }
.hero-form .dt-pick { color: rgba(244, 236, 220, .55); }
.hero-form .dt-pick:hover { color: var(--gold-2); background: rgba(255, 255, 255, .08); }
.hero-form .dt-wrap { flex: 1 1 150px; min-width: 140px; }
.hero-form .dt-wrap > .hf-inp { width: 100%; min-width: 0; }

.seg { display: inline-flex; background: #f2ede3; border-radius: 9px; padding: 3px; gap: 2px; }
.seg button {
  border: none; background: none; padding: 7px 16px; border-radius: 7px;
  cursor: pointer; font-size: 13.5px; color: var(--ink-2); transition: all .15s;
}
.seg button.on { background: #fff; color: var(--red); box-shadow: var(--shadow-sm); font-weight: 500; }

/* ---------- 结果卡 ---------- */
.result { margin-top: 26px; animation: fadeUp .45s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.card + .card { margin-top: 16px; }
.card-h {
  padding: 17px 24px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, #fff, #fdfbf7);
}
.card-h h3 { font-family: var(--serif); font-size: 16.5px; letter-spacing: 1.5px; font-weight: 500; }
.card-h .sp { flex: 1; }
.card-h .badge {
  font-size: 11.5px; padding: 2px 9px; border-radius: 20px; letter-spacing: 1px;
  background: var(--gold-soft); color: #946f25; border: 1px solid #efe2c4;
}
.card-b { padding: 22px 24px; }
.card-b.tight { padding: 0; }

/* 四柱排盘 */
.pillars4 { display: grid; grid-template-columns: 62px repeat(4, 1fr); gap: 0; }
.pillars4 .hd {
  display: contents;
}
.pillars4 .lbl {
  display: flex; align-items: center; font-size: 12px; color: var(--ink-3);
  letter-spacing: 2px; padding: 7px 0; border-bottom: 1px dashed var(--line-2);
}
.pillars4 .lbl-col { border-bottom: 1px solid var(--line-2); }
.pillars4 .cell {
  text-align: center; padding: 7px 4px; border-bottom: 1px dashed var(--line-2);
  border-left: 1px solid var(--line-2); font-size: 14px;
}
.pillars4 .cell:first-of-type { border-left: none; }
.pillars4 .top .cell { border-bottom: 1px solid var(--line-2); }
.pillars4 .zz { font-family: var(--serif); font-size: 30px; letter-spacing: 3px; line-height: 1.25; }
.pillars4 .zz .g { color: var(--red); }
.pillars4 .zz .z { color: var(--jade); }
.pillars4 .ss { font-size: 12px; color: var(--ink-3); }
.pillars4 .ny { font-size: 11.5px; color: var(--ink-3); }

/* 五行条 */
.wx { display: flex; flex-direction: column; gap: 9px; }
.wx-row { display: grid; grid-template-columns: 26px 1fr 44px; gap: 11px; align-items: center; font-size: 13px; }
.wx-row .bar { height: 9px; border-radius: 5px; background: #f4f0e8; overflow: hidden; }
.wx-row .bar i { display: block; height: 100%; border-radius: 5px; transition: width .6s ease; }
.wx-row .num { text-align: right; color: var(--ink-3); font-size: 12.5px; }

/* 大运 */
.dayun-scroll { overflow-x: auto; padding-bottom: 4px; }
.dayun { display: flex; gap: 8px; min-width: min-content; }
.dy {
  flex: 0 0 84px; text-align: center; padding: 12px 6px;
  border: 1px solid var(--line-2); border-radius: 10px; background: #fff;
  transition: all .2s;
}
.dy:hover { border-color: var(--gold-2); }
.dy.now { background: var(--red-soft); border-color: #e8c5bd; }
.dy .age { font-size: 11px; color: var(--ink-3); }
.dy .gz { font-family: var(--serif); font-size: 22px; letter-spacing: 2px; margin: 3px 0; }
.dy .ss { font-size: 11.5px; color: var(--ink-2); }
.dy .yr { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.dy .marks { font-size: 10px; margin-top: 4px; }

/* 流年表 */
table.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tb th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-3);
  padding: 11px 18px; background: #fcfaf6; border-bottom: 1px solid var(--line);
  letter-spacing: 1px; white-space: nowrap;
}
table.tb td { padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
table.tb tr:last-child td { border-bottom: none; }
table.tb tbody tr:hover { background: #fdfbf7; }

/* 标签 */
.tg {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 5px; font-size: 12px; white-space: nowrap;
  background: #f2ede3; color: var(--ink-2);
}
.tg.red { background: var(--red-soft); color: var(--red); }
.tg.green { background: #edf5f0; color: var(--jade); }
.tg.gold { background: var(--gold-soft); color: #8f6c22; }
.tg.blue { background: #edf1f7; color: var(--blue); }
.tg.gray { background: #f2f1f4; color: var(--ink-3); }

/* 六爻卦象 */
.gua-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gua-box { border: 1px solid var(--line-2); border-radius: 11px; padding: 18px; background: #fdfbf7; }
.gua-box .nm { font-family: var(--serif); font-size: 20px; letter-spacing: 2px; text-align: center; margin-bottom: 4px; }
.gua-box .sub { font-size: 12px; color: var(--ink-3); text-align: center; margin-bottom: 14px; }
.yao-list { display: flex; flex-direction: column-reverse; gap: 7px; }
.yao {
  display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center;
  font-size: 12px; color: var(--ink-3);
}
.yao .sym { display: flex; gap: 5px; height: 13px; align-items: center; }
.yao .sym i { display: block; height: 11px; border-radius: 2px; background: #3a3644; flex: 1; }
.yao .sym.yin i:first-child { margin-right: 5px; }
.yao .sym.yin { background: transparent; }
.yao .sym.yin i { flex: 1; }
.yao.moving .sym i { background: var(--red-2); }
.yao .pos { text-align: right; font-size: 11px; }
.yao .info { text-align: left; font-size: 11.5px; color: var(--ink-2); }
.yao .mark {
  font-size: 10.5px; padding: 0 5px; border-radius: 3px; background: var(--gold-soft); color: #8a6720;
  margin-left: 4px;
}

/* 八卦方位盘 */
.bazhai-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.luoshu {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: #fdfbf7; border: 1px solid var(--line-2); border-radius: 12px; padding: 14px;
  aspect-ratio: 1; max-width: 420px;
}
.gong {
  border-radius: 9px; padding: 10px 8px; text-align: center;
  border: 1px solid var(--line-2); background: #fff;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  transition: all .2s; position: relative;
}
.gong:hover { transform: scale(1.02); box-shadow: var(--shadow-sm); }
.gong .dir { font-size: 11px; color: var(--ink-3); letter-spacing: 1px; }
.gong .qi { font-family: var(--serif); font-size: 17px; }
.gong .lv { font-size: 10.5px; padding: 1px 6px; border-radius: 3px; align-self: center; }
.gong.g1 { background: #edf5f0; border-color: #cfe3d6; } .gong.g1 .qi { color: var(--jade); }
.gong.g2 { background: #f4f8f5; border-color: #dbe8df; }
.gong.g0 { background: #fdfbf7; }
.gong.b1 { background: #fdf2ef; border-color: #eccfc7; } .gong.b1 .qi { color: var(--red); }
.gong.b2 { background: #fef7f5; border-color: #f0dcd6; }
.lv.g1 { background: #d6e9dd; color: #21603f; }
.lv.g2 { background: #e4efe7; color: #2c6650; }
.lv.g0 { background: #eeeae0; color: #6f6a5e; }
.lv.b1 { background: #f6d9d1; color: #9a2419; }
.lv.b2 { background: #f8e5df; color: #a94a37; }

/* 生肖卡 */
.zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.zi {
  text-align: center; padding: 16px 8px; border: 1px solid var(--line-2);
  border-radius: 11px; background: #fff; cursor: pointer; transition: all .2s;
}
.zi:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--gold-2); }
.zi.on { border-color: var(--red); background: var(--red-soft); }
.zi .em { font-size: 26px; line-height: 1.2; }
.zi .nm { font-family: var(--serif); font-size: 15px; margin-top: 3px; }
.zi .yr { font-size: 10.5px; color: var(--ink-3); }

.score-ring {
  width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  position: relative; flex-shrink: 0;
}
.score-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.score-ring .v { position: relative; z-index: 1; text-align: center; }
.score-ring .v b { font-size: 28px; font-family: var(--serif); display: block; line-height: 1; }
.score-ring .v small { font-size: 11px; color: var(--ink-3); }

.dims { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.dim { font-size: 13px; }
.dim .hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dim .hd b { font-weight: 500; min-width: 44px; }
.dim .hd span { color: var(--ink-3); font-size: 12px; }
.dim .bar { height: 7px; border-radius: 4px; background: #f3efe7; overflow: hidden; }
.dim .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #d9b667, #b08a3e); transition: width .7s; }

/* 名字卡片 */
.name-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.name-card {
  border: 1px solid var(--line-2); border-radius: 12px; padding: 18px;
  background: #fff; transition: all .2s; cursor: pointer;
}
.name-card:hover { border-color: var(--gold-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.name-card .big { font-family: var(--serif); font-size: 30px; letter-spacing: 4px; color: var(--red); }
.name-card .py { font-size: 11.5px; color: var(--ink-3); letter-spacing: 1.5px; margin-top: 2px; }
.name-card .mn { font-size: 12.5px; color: var(--ink-2); margin-top: 9px; line-height: 1.75; min-height: 44px; }
.name-card .ft { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.name-card .sc {
  margin-left: auto; font-family: var(--serif); font-size: 19px;
}
.sc.hi { color: var(--jade); } .sc.mid { color: var(--gold); } .sc.lo { color: var(--ink-3); }

/* 四柱小卡 */
.assess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.as-item { background: #fdfbf7; border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 12px; }
.as-item .l { font-size: 11.5px; color: var(--ink-3); }
.as-item .v { font-size: 18px; font-family: var(--serif); margin-top: 1px; }

/* 空态/加载 */
.loading { text-align: center; padding: 60px 0; color: var(--ink-3); font-size: 13.5px; }
.loading .dot { display: inline-block; animation: blink 1.2s infinite; }
/* 旋转太极：推演中的意象，不是随便转的装饰 */
.loading-taiji {
  display: block; width: 46px; height: 46px; margin: 0 auto 16px;
  background: var(--pat-taiji) center / contain no-repeat;
  animation: taijiSpin 3.6s linear infinite;
  opacity: .9;
}
@keyframes taijiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-taiji { animation: none; } }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.empty { text-align: center; padding: 64px 20px; color: var(--ink-3); }
.empty .ic { font-family: var(--serif); font-size: 40px; opacity: .25; margin-bottom: 12px; }

/* 登录弹窗 */
.modal-mask {
  position: fixed; inset: 0; background: rgba(20, 16, 24, .45);
  backdrop-filter: blur(3px); z-index: 200;
  display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-mask.on { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 400px;
  padding: 30px; box-shadow: var(--shadow-lg); transform: translateY(10px); transition: transform .25s;
}
.modal-mask.on .modal { transform: none; }
.modal h3 { font-family: var(--serif); font-size: 21px; letter-spacing: 2px; margin-bottom: 6px; }
.modal .sub { color: var(--ink-3); font-size: 13px; margin-bottom: 22px; }
.modal .tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.modal .tabs button {
  border: none; background: none; padding: 0 0 10px; cursor: pointer;
  font-size: 14px; color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
/* ---------- 起卦模式切换 ---------- */
.mode-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.mode-tabs button {
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  font-family: inherit; font-size: 13px; padding: 9px 18px; border-radius: 999px;
  cursor: pointer; transition: all .18s;
}
.mode-tabs button:hover { border-color: var(--gold); color: var(--gold-3, #8a6720); }
.mode-tabs button.on {
  background: var(--red); border-color: var(--red); color: #fff;
  box-shadow: 0 4px 12px rgba(163, 36, 27, .22);
}


/* 记录 */
.rec-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  border-bottom: 1px solid var(--line-2); transition: background .15s;
}
.rec-item:hover { background: #fdfbf7; }
.rec-item:last-child { border-bottom: none; }
.rec-item .k {
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px; background: var(--gold-soft); color: #8f6c22; flex-shrink: 0;
}
.rec-item .t { flex: 1; min-width: 0; }
.rec-item .t b { font-weight: 500; font-size: 14px; }
.rec-item .t div { font-size: 12px; color: var(--ink-3); }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 16px);
  background: #241c22; color: #f4ecdc; padding: 12px 22px; border-radius: 10px;
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: all .22s; z-index: 300;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .25);
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast.err { background: #8e1f16; }

/* 页脚 */
.foot {
  position: relative; overflow: hidden;
  border-top: 1px solid var(--line); margin-top: 60px;
  background: #faf7f1; color: var(--ink-3);
}
/* 页脚镇底纹样：罗盘主方位，八卦主卦象，一左一右缓慢反向转动，取「天地定位、山泽通气」 */
.foot-compass {
  position: absolute; left: -180px; bottom: -220px; width: 560px; height: 560px;
  background: var(--pat-compass) center / contain no-repeat;
  opacity: .055; pointer-events: none;
  animation: patSpin 300s linear infinite;
}
.foot-bagua {
  position: absolute; right: -150px; top: -180px; width: 480px; height: 480px;
  background: var(--pat-bagua) center / contain no-repeat;
  opacity: .06; pointer-events: none;
  animation: patSpin 360s linear infinite reverse;
}
.foot-in {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto; padding: 44px 24px 28px;
  display: flex; gap: 60px; justify-content: space-between; flex-wrap: wrap;
}
.foot-brand { max-width: 300px; }
.fb-name { font-size: 21px; letter-spacing: 5px; color: var(--ink); }
.foot-brand p { margin-top: 12px; font-size: 12.5px; line-height: 2; color: var(--ink-3); }
.foot-links { display: flex; gap: 48px; flex-wrap: wrap; }
.foot-links b { display: block; font-family: var(--serif); font-size: 13.5px; color: var(--ink-2); letter-spacing: 2px; margin-bottom: 12px; }
.foot-links a {
  display: block; font-size: 12.5px; color: var(--ink-3); line-height: 2.1;
  transition: color .15s;
}
.foot-links a:hover { color: var(--red); }
.foot-bar {
  border-top: 1px solid var(--line); padding: 16px 24px;
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap;
  font-size: 11.5px; color: #a8a29a; line-height: 1.8;
}
.foot-bar .disc { flex: 1; min-width: 260px; text-align: right; }

/* 梅花体用断语 */
.verdict {
  border-radius: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.9;
  background: var(--gold-soft); border-left: 3px solid var(--gold); color: #6b5219;
}
.verdict.good { background: #eff6f1; border-left-color: var(--jade); color: #245445; }
.verdict.bad { background: #fbf0ee; border-left-color: var(--red); color: #8c2a20; }

/* 说明条 */
.note {  background: var(--gold-soft); border: 1px solid #efe2c4; border-radius: 10px;
  padding: 12px 16px; font-size: 12.5px; color: #7d6224; line-height: 1.8;
}
.note b { color: #6b5219; }

@media (max-width: 980px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .bazhai-grid { grid-template-columns: 1fr; }
  .name-grid { grid-template-columns: repeat(2, 1fr); }
  .zodiac-grid { grid-template-columns: repeat(4, 1fr); }
  .almanac-bar { grid-template-columns: auto 1fr; gap: 16px; }
  .almanac-bar .divider { display: none; }
  /* 人像在中等屏幕缩小并靠右 */
  .hero-in { grid-template-columns: minmax(0, 1fr) 250px; gap: 28px; }
  .hero-right { align-self: end; }
}
@media (max-width: 780px) {
  /* 窄屏也照电脑那一版排：人物留在右边、比原来放大四五倍；
     标题在左，表单与信任条通栏铺开。用 display:contents 把左栏拆成网格项，
     这样照片能和标题并排、又能让表单单独占满整行。 */
  .hero-in {
    grid-template-columns: minmax(0, 1fr) 45%;
    grid-template-areas:
      "tag   fig"
      "h1    fig"
      "lead  fig"
      "form  form"
      "trust trust";
    column-gap: 14px; row-gap: 0; align-items: start;
  }
  .hero-left { display: contents; }
  .hero .tagline { grid-area: tag; margin-bottom: 16px; letter-spacing: 3px; }
  .hero h1 { grid-area: h1; }
  .hero .lead { grid-area: lead; margin-top: 14px; font-size: 14px; line-height: 1.85; }
  .hero-form { grid-area: form; margin-top: 22px; }
  .hero-trust { grid-area: trust; margin-top: 20px; }
  .hero-right { grid-area: fig; margin: 6px 0 0; align-self: start; }
  .seer-wrap { display: block; }
  .seer-photo { border-radius: 96px 96px 12px 12px; }
  .seer-photo img { width: 100%; height: auto; }
  .seer-ringwrap { inset: -8%; opacity: .7; }
  /* 太极徽章原本占右上角，正是照片现在的位置 —— 窄屏收起，别压在人脸上 */
  .hero-taiji { display: none; }
  .hf-row { max-width: none; }
  .hero { padding: 30px 18px 46px; }
}
@media (max-width: 640px) {
  .nav-in { padding: 0 16px; gap: 10px; height: 60px; }
  /* 关键：flex 子项默认 min-width:auto，不缩不滚会把右侧按钮挤出屏幕 */
  .nav-links { min-width: 0; flex: 1 1 auto; }
  .nav-right { flex-shrink: 0; }
  .nav-right .btn { padding: 8px 12px; font-size: 13px; }
  .logo .t { font-size: 16px; }
  .logo .s { display: none; }
  .logo .seal { width: 32px; height: 32px; }
  .page { padding: 24px 16px 70px; }
  .cats, .name-grid, .gua-wrap, .form-row, .form-row.three { grid-template-columns: 1fr; }
  .zodiac-grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding: 30px 18px 52px; }
  /* 左栏只有手机四成宽，字号与字距收紧才不挤出框 */
  .hero h1 { font-size: 30px; letter-spacing: 4px; }
  .hero-stats { gap: 30px; }
  .pillars4 { grid-template-columns: 44px repeat(4, 1fr); }
  .pillars4 .zz { font-size: 23px; }
  .assess { grid-template-columns: repeat(2, 1fr); }
  .card-b { padding: 18px 16px; }
  .page-head h1 { font-size: 24px; }
  /* 首屏排盘移动端 */
  .hf-row { flex-direction: column; padding: 12px; }
  .hf-inp, .hf-sel, .hf-btn { flex: none; width: 100%; }
  .hc-head { flex-direction: column; align-items: flex-start; }
  .hc-gz { width: 100%; justify-content: space-between; }
  .hc-p { flex: 1; min-width: 0; }
  .hc-body { gap: 18px; }
  .hc-foot .btn { width: 100%; }
  .hc-free { margin-left: 0; text-align: center; width: 100%; }
}

/* ---------- 分享海报 ---------- */
.share-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.poster-mask {
  position: fixed; inset: 0; background: rgba(20, 12, 8, .72); z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.poster-mask.on { opacity: 1; pointer-events: auto; }
.poster-box { max-height: 92vh; overflow-y: auto; }
.poster {
  width: 340px; background: linear-gradient(170deg, #8e1d16 0%, #a3241b 38%, #6d150f 100%);
  border-radius: 16px; padding: 26px 22px 20px; color: #f6ecd8;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5); position: relative; overflow: hidden;
}
.poster::before {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(217, 182, 103, .32);
  border-radius: 10px; pointer-events: none;
}
.poster::after {
  content: '德'; position: absolute; right: -10px; bottom: -30px;
  font-family: var(--serif); font-size: 180px; color: rgba(255, 255, 255, .045); line-height: 1;
}
.pst-head { text-align: center; position: relative; z-index: 1; }
.pst-seal {
  width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 50%;
  background: rgba(217, 182, 103, .9); color: #7a1310; display: flex;
  align-items: center; justify-content: center; font-family: var(--serif); font-size: 22px;
}
.pst-title { font-family: var(--serif); font-size: 21px; letter-spacing: 5px; text-indent: 5px; }
.pst-sub { font-size: 11px; color: rgba(246, 236, 216, .55); letter-spacing: 2px; margin-top: 5px; }
.pst-gz { display: flex; justify-content: center; gap: 6px; margin: 20px 0 16px; position: relative; z-index: 1; }
.pst-p {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(217, 182, 103, .25);
  border-radius: 8px; padding: 8px 9px; text-align: center; min-width: 54px;
}
.pst-p .g { font-family: var(--serif); font-size: 20px; color: #e8c987; display: block; line-height: 1.2; }
.pst-p .z { font-family: var(--serif); font-size: 20px; color: #9ecdb4; display: block; line-height: 1.2; }
.pst-p .l { font-size: 9.5px; color: rgba(246, 236, 216, .4); margin-top: 3px; }
.pst-line { height: 1px; background: rgba(217, 182, 103, .22); margin: 14px 0; }
.pst-info { font-size: 12.5px; line-height: 2; position: relative; z-index: 1; }
.pst-info .row { display: flex; justify-content: space-between; gap: 10px; }
.pst-info .k { color: rgba(246, 236, 216, .5); }
.pst-info .v { color: #e8c987; font-weight: 500; text-align: right; }
.pst-quote {
  font-size: 12px; line-height: 1.9; color: rgba(246, 236, 216, .82);
  background: rgba(0, 0, 0, .16); border-radius: 8px; padding: 11px 13px;
  margin-top: 14px; position: relative; z-index: 1;
}
.pst-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(217, 182, 103, .28);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; color: rgba(246, 236, 216, .48); position: relative; z-index: 1;
}
.pst-qr {
  width: 46px; height: 46px; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 3px;
}
.pst-qr img { width: 100%; height: 100%; display: block; }
.poster-tips { text-align: center; color: rgba(255, 255, 255, .7); font-size: 12px; margin-top: 14px; line-height: 1.9; }

/* 分享卡片：canvas 出图后以图片展示，手机上长按即为「保存图片」 */
.share-box { max-height: 92vh; overflow-y: auto; text-align: center; padding: 4px; }
.share-box img {
  width: 320px; max-width: 84vw; height: auto; display: block; margin: 0 auto;
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  /* 微信/iOS 里长按要能弹出「保存图片」菜单，别被全局的 user-select:none 关掉 */
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto;
}
.share-hint {
  max-width: 320px; margin: 12px auto 0; padding: 9px 12px;
  font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .84);
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
}
.share-hint b { color: #f0d9a0; }
/* 完整报告链接：字小但可长按全选复制，微信里复制不出来时还能手动选 */
.share-link {
  max-width: 320px; margin: 10px auto 0; padding: 8px 10px;
  font-size: 11px; line-height: 1.6; color: #f0d9a0; word-break: break-all;
  background: rgba(0, 0, 0, .3); border: 1px dashed rgba(217, 182, 103, .45);
  border-radius: 8px; text-align: left;
  -webkit-user-select: all; user-select: all; -webkit-touch-callout: default;
}
.share-ops { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.share-ops .btn {
  background: rgba(255, 255, 255, .10); color: #f6ecd8;
  border: 1px solid rgba(246, 236, 216, .28);
}
.share-ops .btn-primary {
  background: var(--gold-2); color: #5f110c; border-color: transparent; font-weight: 600;
}
@media (max-width: 640px) {
  .poster { width: 300px; padding: 22px 18px 16px; }
}

/* ---------- 结果页交叉推荐 ---------- */
.xsell { margin-top: 34px; }
.xsell-h {
  font-size: 15px; color: var(--ink-2); letter-spacing: 3px;
  margin-bottom: 14px; padding-left: 12px; border-left: 3px solid var(--red);
  line-height: 1.2;
}
.xsell-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.xcard {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: all .2s; cursor: pointer;
}
.xcard:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(120, 80, 30, .1); }
.xi {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 19px; color: #fff;
}
.xi.c-gold { background: linear-gradient(135deg, #c9a25a, #a67f33); }
.xi.c-jade { background: linear-gradient(135deg, #4a8a6d, #2c6650); }
.xi.c-ink { background: linear-gradient(135deg, #4a4a52, #2b2b31); }
.xi.c-plum { background: linear-gradient(135deg, #8a4a55, #6b2f3b); }
.xt { flex: 1; min-width: 0; }
.xt b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.xt span { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; }
.xa { color: var(--gold); font-size: 15px; flex-shrink: 0; }
@media (max-width: 640px) { .xsell-grid { grid-template-columns: 1fr; } }

/* ==================================================================
   付费解锁：收款码弹窗 · 付费墙 · 锁定态
   ================================================================== */
.btn-price {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  background: rgba(255, 255, 255, .18); border-radius: 5px;
  font-size: 11.5px; letter-spacing: .5px; font-weight: 400;
}
.badge.free { background: #eef5f0; color: var(--jade); border-color: #d6e7dc; }
.badge.free::before { content: '免费'; }
.badge.free { font-size: 0; }
.badge.free::before { font-size: 11.5px; }

.pvb {
  font-size: 13px; color: var(--ink-2); line-height: 1.95;
  background: #fdfbf7; border: 1px solid var(--line-2); border-radius: 10px; padding: 14px 16px;
}

/* ---------- 收银台弹窗 ---------- */
.pay-mask {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(20, 14, 10, .62); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.pay-mask.on { opacity: 1; pointer-events: auto; }
.pay-modal {
  position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
  padding: 24px 26px 22px; transform: translateY(12px) scale(.98); transition: transform .28s cubic-bezier(.2, .8, .3, 1);
}
.pay-mask.on .pay-modal { transform: none; }
.pay-x {
  position: absolute; right: 14px; top: 12px; width: 30px; height: 30px;
  border: none; background: none; font-size: 22px; line-height: 1; color: var(--ink-3);
  cursor: pointer; border-radius: 8px;
}
.pay-x:hover { background: #f4f0e8; color: var(--ink); }

.pay-head { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
.pay-seal {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(150deg, #b83226, #8d1b13); color: #f7e9cd;
  display: grid; place-items: center; font-size: 21px;
  box-shadow: inset 0 0 0 1.5px rgba(247, 233, 205, .3);
}
.pay-t { font-size: 18px; letter-spacing: 2px; color: var(--ink); }
.pay-s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pay-amt {
  margin-left: auto; font-family: var(--serif); font-size: 30px; color: var(--red); line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
}
.pay-amt small { font-size: 15px; }
.pay-amt-inline { color: var(--red); font-size: 15px; }

.pay-body { display: flex; gap: 22px; margin-top: 20px; align-items: flex-start; }
.pay-qr { display: flex; gap: 10px; flex-shrink: 0; }
.pay-qr-i { margin: 0; text-align: center; }
.qr-frame {
  width: 156px; height: 156px; padding: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.pay-qr-i figcaption { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; letter-spacing: .5px; }
.pay-qr-i + .pay-qr-i .qr-frame { width: 116px; height: 156px; }

.pay-how { flex: 1; min-width: 0; }
.ph-t { font-size: 13px; color: var(--ink); font-weight: 500; letter-spacing: 1px; margin-bottom: 8px; }
.pay-how ol { margin: 0; padding-left: 18px; font-size: 12.8px; line-height: 1.95; color: var(--ink-2); }
.pay-how ol b { color: var(--ink); }
.pay-code {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--gold-soft); border: 1px dashed #e0cd9e; border-radius: 9px; padding: 8px 11px;
  font-size: 12px; color: #8a6720;
}
.pay-code b { font-size: 17px; letter-spacing: 3px; color: #8a6720; }
.mini {
  margin-left: auto; border: 1px solid #e0cd9e; background: #fff; color: #8a6720;
  font-size: 11.5px; padding: 2px 9px; border-radius: 6px; cursor: pointer;
}
.mini:hover { background: #fffdf7; }
.pay-no { font-size: 11px; color: var(--ink-3); margin-top: 8px; letter-spacing: .3px; }
.pay-no span { font-size: 11px; }

.pay-warn {
  margin-top: 14px; font-size: 11.5px; line-height: 1.85; color: #8a6720;
  background: #fdf8ec; border: 1px solid #efe0bd; border-radius: 9px; padding: 9px 12px;
}
.pay-warn code { background: #f3ead2; padding: 1px 5px; border-radius: 4px; font-size: 11px; }

.pay-foot { margin-top: 18px; }
.pay-sub { text-align: center; font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.7; }

/* ---------- 结果页付费墙 ---------- */
.paywall {
  position: relative; margin: 18px 0;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
  background: linear-gradient(135deg, #fffdf8 0%, #fdf6ea 100%);
  border: 1px solid #ecdcbc; border-radius: var(--r); padding: 20px 22px;
  box-shadow: 0 10px 30px -18px rgba(160, 120, 50, .5);
}
.paywall::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(217, 182, 103, .04) 0 10px, transparent 10px 20px);
}
.pw-lock {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 19px; color: #8a6720;
  background: #fff; border: 1px solid #e6d3a8;
  box-shadow: 0 3px 10px rgba(176, 138, 62, .18);
}
.pw-main { flex: 1; min-width: 240px; }
.pw-t { font-size: 15.5px; letter-spacing: 1px; color: var(--ink); margin-bottom: 9px; }
.pw-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-list span {
  font-size: 11.5px; color: #7a5a1a; background: rgba(255, 255, 255, .75);
  border: 1px solid #eadcbc; border-radius: 6px; padding: 3px 8px;
}
.pw-list span::before { content: '· '; opacity: .5; }
.pw-note { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; line-height: 1.75; }
.pw-act { text-align: center; flex-shrink: 0; }
.pw-price { font-family: var(--serif); font-size: 28px; color: var(--red); line-height: 1.1; }
.pw-price small { font-size: 14px; }
.pw-price em { font-size: 11px; color: var(--ink-3); font-style: normal; margin-left: 4px; letter-spacing: 1px; }
.pw-act .btn { margin-top: 8px; min-width: 148px; }
.pw-safe { font-size: 11px; color: var(--ink-3); margin-top: 7px; letter-spacing: .5px; }

/* ---------- 锁定态内容 ---------- */
.locked-card { position: relative; overflow: hidden; }
.locked-card::after {
  content: ''; position: absolute; inset: 46px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 248, 242, 0) 0%, rgba(251, 248, 242, .55) 55%, rgba(251, 248, 242, .9) 100%);
}
.dy.blur .gz .q, .dy.blur .gz .q2 {
  display: inline-block; font-size: 21px; color: #cfc4ae; letter-spacing: 2px;
}
.dy.blur .ss { color: #b9b0a0; }
.name-card.blurred { position: relative; }
.lock-hint { color: #b9b0a0; font-size: 11.5px; letter-spacing: 1px; }
.lock-hint::before { content: '🔒 '; }

.dir-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
.dir-row b { font-size: 15px; min-width: 52px; font-weight: 500; }
.dir-row .dim { font-size: 12px; color: var(--ink-3); margin-left: auto; }

@media (max-width: 640px) {
  .pay-modal { padding: 20px 18px 18px; border-radius: 16px; }
  .pay-body { flex-direction: column; gap: 16px; align-items: center; }
  .pay-how { width: 100%; }
  .pay-amt { font-size: 24px; }
  .qr-frame { width: 148px; height: 148px; }
  .paywall { flex-direction: column; text-align: left; }
  .pw-act { width: 100%; }
  .pw-act .btn { width: 100%; }
}

/* ==================================================================
   首页分组宫格导航
   ================================================================== */
.grid-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.gn-group {
  background: linear-gradient(180deg, #fffdf9, #fdf8ee);
  border: 1px solid #f0e5cf;
  border-radius: 16px; padding: 4px 0 6px;
  box-shadow: 0 2px 10px rgba(120, 90, 40, .05);
}
.gn-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px 10px;
}
.gn-head h2 {
  font-size: 15.5px; letter-spacing: 2px; font-weight: 600; color: var(--ink);
  position: relative; padding-left: 11px;
}
.gn-head h2::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, #c4432f, #8d1b13);
}
.gn-tag {
  font-style: normal; font-size: 10.5px; letter-spacing: .3px;
  padding: 2px 7px; border-radius: 20px; color: #fff;
  background: linear-gradient(140deg, #c4432f, #a3241b);
  transform: translateY(-1px);
}
.gn-tag.gold { background: linear-gradient(140deg, #c9a25a, #a67f33); }
.gn-tag.jade { background: linear-gradient(140deg, #4a8a6d, #2c6650); }
.gn-tag.red { background: linear-gradient(140deg, #b8477a, #8d2f56); }
.gn-line {
  flex: 1; height: 1px; margin-left: 2px;
  background: linear-gradient(90deg, #eee1c8, transparent);
}

/* 每个功能格：彩色圆角图标 + 名称 */
.gn-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px 8px 4px; }
.gn-cell {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 9px 2px 10px; border-radius: 12px;
  font-size: 12.5px; color: var(--ink-2); text-align: center;
  transition: transform .16s, background .16s;
}
.gn-cell:hover { background: #fff; transform: translateY(-2px); }
.gn-cell:hover .gn-ic { box-shadow: 0 6px 16px rgba(160, 110, 60, .22); transform: translateY(-1px); }

.gn-ic {
  position: relative; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 3px 9px rgba(160, 110, 60, .16);
}
.gn-ic svg { width: 34px; height: 34px; display: block; }
/* 图标底色主题 */
.gn-ic.bg-rd { background: linear-gradient(150deg, #f0574a, #c2231a); }
.gn-ic.bg-wg { background: linear-gradient(150deg, #f4c46a, #d9932d); }
.gn-ic.bg-jd { background: linear-gradient(150deg, #5fa98a, #2c6650); }
.gn-ic.bg-pl { background: linear-gradient(150deg, #a97fc4, #6b4585); }
.gn-ic.bg-bu { background: linear-gradient(150deg, #6aa6d8, #31648f); }
.gn-ic.bg-jk { background: linear-gradient(150deg, #6b6a75, #2f2e38); }
/* 顶部一道高光，做出微浮雕感 */
.gn-ic::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}

.gn-badge {
  position: absolute; top: -5px; right: -6px; font-style: normal;
  font-size: 9.5px; line-height: 1; padding: 3px 5px; border-radius: 8px;
  background: #fff; color: #a3241b; letter-spacing: 0;
  border: 1px solid #f0c9a0; box-shadow: 0 1px 4px rgba(160, 110, 60, .18);
  z-index: 2;
}
.gn-badge.free { color: #2c6650; border-color: #b9d9c8; }
.gn-name { line-height: 1.35; white-space: nowrap; }

@media (max-width: 780px) {
  .grid-nav { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .gn-ic { width: 50px; height: 50px; border-radius: 15px; }
  .gn-ic svg { width: 32px; height: 32px; }
  .gn-cell { font-size: 12px; padding: 8px 1px 9px; gap: 6px; }
  .gn-head { padding: 10px 14px 8px; }
}
@media (max-width: 360px) {
  .gn-ic { width: 46px; height: 46px; border-radius: 14px; }
  .gn-ic svg { width: 29px; height: 29px; }
  .gn-cell { font-size: 11.5px; }
}

/* ==================================================================
   痛点 banner（首屏大图，对应「我们的婚姻会不会幸福？」）
   ================================================================== */
.hbn {
  display: block; position: relative; overflow: hidden;
  margin-top: 24px; border-radius: 18px;
  background: linear-gradient(105deg, #8d1b13 0%, #c2231a 46%, #e05a3c 100%);
  box-shadow: 0 10px 30px rgba(141, 27, 19, .26);
  min-height: 148px;
}
.hbn-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 30%, rgba(255, 220, 160, .34), transparent 58%);
}
.hbn-fig {
  position: absolute; top: 0; bottom: 0; width: 118px;
  display: grid; place-items: center; opacity: .24;
}
.hbn-fig svg { width: 96px; height: 96px; }
.hbn-fig-l { left: -10px; transform: rotate(-6deg); }
.hbn-fig-r { right: -6px; transform: rotate(8deg); opacity: .18; }
.hbn-in { position: relative; padding: 20px 120px 20px 24px; }
.hbn-k {
  font-size: 10.5px; letter-spacing: 2.4px; color: rgba(255, 232, 196, .72);
  margin-bottom: 6px;
}
.hbn-t {
  font-size: 30px; letter-spacing: 6px; color: #fff2d8;
  text-shadow: 0 2px 10px rgba(90, 10, 5, .35); line-height: 1.15;
}
.hbn-s {
  font-size: 13.5px; color: #ffe1b8; letter-spacing: 1.2px; margin-top: 5px;
}
.hbn-btn {
  display: inline-block; margin-top: 13px;
  padding: 7px 16px; border-radius: 20px; font-size: 12.5px;
  background: #fff; color: #a3241b; font-weight: 600;
  box-shadow: 0 4px 12px rgba(90, 10, 5, .2);
}
.hbn:hover .hbn-btn { background: #ffe9cd; }

@media (max-width: 780px) {
  .hbn { min-height: 132px; margin-top: 16px; border-radius: 14px; }
  .hbn-in { padding: 16px 92px 16px 18px; }
  .hbn-t { font-size: 24px; letter-spacing: 4px; }
  .hbn-s { font-size: 12px; }
  .hbn-fig { width: 88px; }
  .hbn-fig svg { width: 72px; height: 72px; }
  .hbn-btn { margin-top: 10px; padding: 6px 13px; font-size: 12px; }
}

/* ==================================================================
   八字合婚
   ================================================================== */
.hu-form { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: start; }
.huf-col .huf-t { font-size: 14px; letter-spacing: 3px; color: var(--red); margin-bottom: 12px; }
.huf-heart {
  align-self: center; margin-top: 26px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, #f9eef3, #f2dfe7); color: #8d3b5c; font-size: 18px;
  border: 1px solid #ecd6e0;
}
.hu-hero .card-b { padding: 26px 24px; }
.hu-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hu-side { text-align: center; flex: 1; }
.hu-ani { font-size: 40px; line-height: 1; }
.hu-ani-t { font-size: 18px; letter-spacing: 3px; color: var(--ink); margin-top: 6px; }
.hu-date { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.hu-center { text-align: center; flex-shrink: 0; }
.hu-ring {
  width: 104px; height: 104px; border-radius: 50%; margin: 0 auto;
  display: grid; place-items: center; position: relative;
}
.hu-ring::after {
  content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff;
}
.hu-ring .v { position: relative; z-index: 1; text-align: center; }
.hu-ring .v b { display: block; font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--ink); }
.hu-ring .v small { font-size: 10.5px; color: var(--ink-3); letter-spacing: 1px; }
.hu-level { margin-top: 10px; font-size: 17px; letter-spacing: 3px; }
.hu-verdict {
  margin-top: 22px; font-size: 13.5px; line-height: 1.95; color: var(--ink-2);
  background: #fdfbf7; border-left: 3px solid var(--gold-2); border-radius: 0 8px 8px 0; padding: 12px 15px;
}
.hu-advice { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 14px; }
.hu-adv-h { font-size: 13.5px; letter-spacing: 2px; color: var(--red); margin-bottom: 8px; }
.hu-advice ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 2; color: var(--ink-2); }

.hu-part { padding: 14px 0; border-bottom: 1px dashed var(--line-2); }
.hu-part:last-child { border-bottom: none; }
.hp-h { display: flex; align-items: center; gap: 8px; }
.hp-h b { font-family: var(--serif); font-size: 15px; letter-spacing: 1px; color: var(--ink); }
.hp-sc { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.hu-part p { margin-top: 6px; font-size: 13px; line-height: 1.9; color: var(--ink-2); }

.hu-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hc-side { background: #fdfbf7; border: 1px solid var(--line-2); border-radius: 10px; padding: 16px; }
.hcs-t { font-size: 12px; letter-spacing: 2px; color: var(--red); margin-bottom: 8px; }
.hcs-gz { font-size: 17px; letter-spacing: 1px; color: var(--ink); margin-bottom: 10px; }
.hcs-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 2; }
.hcs-row span { color: var(--ink-3); flex-shrink: 0; }
.hcs-row b { color: var(--ink-2); font-weight: 500; }

@media (max-width: 780px) {
  .hu-form { grid-template-columns: 1fr; }
  .huf-heart { margin: 0 auto; transform: rotate(90deg); }
  .hu-compare { grid-template-columns: 1fr; }
  .hu-ani { font-size: 32px; }
  .hu-ring { width: 88px; height: 88px; }
  .hu-ring .v b { font-size: 26px; }
}

/* ==================================================================
   月老灵签
   ================================================================== */
.lq-stage { text-align: center; padding: 26px 0 8px; }
.lq-tube {
  width: 120px; height: 150px; margin: 0 auto 24px; position: relative;
}
.lq-sticks {
  position: absolute; inset: 0 0 40px; display: flex; justify-content: center; gap: 4px;
}
.lq-sticks i {
  display: block; width: 5px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #d9b667, #b08a3e);
  height: calc(70px + (var(--i) % 5) * 9px);
  transform-origin: bottom center;
  animation: lqShake 1.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.08s);
}
@keyframes lqShake {
  from { transform: rotate(calc((var(--i) - 6) * 0.5deg)); }
  to { transform: rotate(calc((var(--i) - 6) * 1.6deg)); }
}
.lq-tube .lq-label {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 88px; height: 96px; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(160deg, #a3241b, #7a1710);
  color: #f4e6c8; display: grid; place-items: center;
  font-size: 26px; letter-spacing: 3px; writing-mode: vertical-rl;
  box-shadow: inset 0 0 0 2px rgba(217, 182, 103, .35), 0 10px 24px -10px rgba(122, 23, 16, .6);
}
.lq-tip { font-size: 12px; color: var(--ink-3); margin-top: 14px; letter-spacing: 2px; }

.lq-card {
  max-width: 460px; margin: 0 auto; position: relative;
  background: linear-gradient(170deg, #fffdf6, #fdf6e6);
  border: 1px solid #e9d9b4; border-radius: 16px; padding: 26px 24px 20px;
  box-shadow: 0 20px 50px -22px rgba(150, 110, 40, .45);
  animation: lqIn .5s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes lqIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.lq-card::before {
  content: ''; position: absolute; inset: 8px; border: 1px solid rgba(176, 138, 62, .28);
  border-radius: 10px; pointer-events: none;
}
.lqc-head { display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; z-index: 1; }
.lqc-no { font-size: 15px; letter-spacing: 3px; color: #8a6720; }
.lqc-level {
  font-size: 11px; padding: 2px 9px; border-radius: 20px; color: #fff; letter-spacing: 1px;
}
.lv-ss { background: linear-gradient(140deg, #c4432f, #a3241b); }
.lv-s { background: linear-gradient(140deg, #c9a25a, #a67f33); }
.lv-m { background: #8d95a3; }
.lv-x { background: #6b6675; }
.lqc-title {
  text-align: center; font-size: 25px; letter-spacing: 6px; text-indent: 6px;
  color: var(--red); margin: 12px 0 16px; position: relative; z-index: 1;
}
.lqc-poem {
  text-align: center; font-size: 14.5px; line-height: 2.2; color: var(--ink);
  padding: 14px 0; border-top: 1px solid rgba(176, 138, 62, .2); border-bottom: 1px solid rgba(176, 138, 62, .2);
  position: relative; z-index: 1;
}
.lqc-jie {
  margin-top: 16px; font-size: 13px; line-height: 1.95; color: var(--ink-2); position: relative; z-index: 1;
}
.lqc-jie b {
  display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px;
  background: var(--gold-soft); color: #8a6720; font-size: 11.5px;
}
.lqc-od { margin-top: 14px; position: relative; z-index: 1; }
.lqc-od div { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; line-height: 2; }
.lqc-od .k {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; color: #fff; background: var(--jade);
}
.lqc-od div:last-child .k { background: var(--red); }
.lqc-od .v { color: var(--ink-2); }
.lqc-foot {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed rgba(176, 138, 62, .3);
  font-size: 11px; color: var(--ink-3); line-height: 1.8; position: relative; z-index: 1;
}

/* ===== 支付网关态（qrcode / redirect / 等待到账） ===== */
.pay-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.pay-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
  animation: payDot 1.2s infinite ease-in-out;
}
.pay-dots i:nth-child(2) { animation-delay: .15s; }
.pay-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes payDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.qr-skel { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink-3); }
.qr-frame.scanning { position: relative; }
.qr-frame.scanning::after {
  content: ''; position: absolute; left: 6%; right: 6%; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
  box-shadow: 0 0 10px rgba(44, 102, 80, .5);
  animation: qrScan 2s infinite ease-in-out;
}
@keyframes qrScan {
  0% { top: 4%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 94%; opacity: 0; }
}

.pay-wait {
  margin: 10px 0 0; font-size: 12px; line-height: 1.9; color: var(--ink-3);
}
.pay-alt {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(160deg, #fdfbf6, #f6f1e6);
}
.pay-alt-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); color: #f7efe0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; letter-spacing: 1px;
}
.pay-alt-t { font-size: 13px; color: var(--ink-2); letter-spacing: 2px; }
.pay-alt-s { font-size: 11px; color: var(--ink-3); }
.pay-foot a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ===== 微信 / 支付宝 渠道选择 ===== */
.pay-chs { display: flex; gap: 10px; margin-bottom: 16px; }
.pay-ch {
  flex: 1; display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: #fffdf9; border: 1.5px solid var(--line);
  transition: border-color .18s, background .18s, box-shadow .18s;
  font-family: inherit; text-align: left;
}
.pay-ch:hover { border-color: #d8cfbd; }
.pay-ch.on {
  border-color: var(--jade); background: #f7fbf8;
  box-shadow: 0 0 0 3px rgba(44, 102, 80, .07);
}
.pay-ch-ic {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; font-weight: 600;
}
.pay-ch-ic.wx { background: #12b259; }
.pay-ch-ic.ali { background: #1677ff; }
.pay-ch-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pay-ch-t b { font-size: 13px; color: var(--ink); font-weight: 600; }
.pay-ch-t em { font-size: 10.5px; color: var(--ink-3); font-style: normal; }
@media (max-width: 480px) {
  .pay-chs { gap: 8px; }
  .pay-ch { padding: 9px 10px; gap: 7px; }
  .pay-ch-t em { display: none; }
}

/* ---------- 实景罗盘（GPS/地磁定向） ---------- */
.live-compass { margin-bottom: 20px; }
.lc-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.lc-head h3 { font-size: 17px; letter-spacing: 2px; color: var(--ink); }
.lc-sub { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.8; max-width: 420px; }
.lc-stage {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  margin-top: 22px; padding: 22px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, #2a2130, #1b1720 70%);
}
.lc-dial {
  position: relative; width: 220px; height: 220px; flex: none;
  border-radius: 50%;
  transition: transform .12s linear;
  will-change: transform;
}
.lc-dial .lc-ring { position: absolute; inset: 0; opacity: .45; transition: opacity .3s; }
.lc-dial.on .lc-ring { opacity: .95; }
.lc-dial .lc-ring svg { width: 100%; height: 100%; display: block; }
/* 指针：固定朝上，指的就是你面朝的方向 */
.lc-needle {
  position: absolute; left: 50%; top: 12%; width: 0; height: 0;
  transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-bottom: 26px solid #e0b455;
  filter: drop-shadow(0 2px 6px rgba(224, 180, 85, .5));
}
.lc-hub {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: #e0b455;
  box-shadow: 0 0 0 4px rgba(224, 180, 85, .18), 0 0 16px rgba(224, 180, 85, .5);
}
.lc-read { flex: 1; min-width: 180px; color: #f4ecdc; }
.lc-deg { font-size: 46px; line-height: 1; letter-spacing: 2px; color: #f0d9a4; }
.lc-dir { margin-top: 10px; font-size: 20px; letter-spacing: 4px; color: #f4ecdc; }
.lc-gua { margin-top: 12px; font-size: 12.5px; color: #a99c8a; line-height: 1.9; min-height: 2em; }
.lc-tip {
  margin-top: 16px; padding: 11px 14px; border-radius: 10px;
  background: #faf3e4; border: 1px solid #ecdfc4;
  font-size: 12.5px; color: #8a7247; line-height: 1.9;
}
.lc-tip b { color: var(--red); }
/* 手动定盘：无传感器时的兜底入口 */
.lc-manual {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px dashed #e2d3b6;
  transition: border-color .2s, box-shadow .2s;
}
.lc-manual.hl { border-color: var(--red); box-shadow: 0 0 0 3px rgba(163, 36, 27, .08); }
.lc-m-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lc-m-row label { font-size: 12.5px; color: var(--ink-3); letter-spacing: .5px; }
.lc-m-row .inp { width: 110px; height: 36px; text-align: center; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lc-chip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--line); background: #fdfbf6; color: var(--ink-2);
  cursor: pointer; transition: all .15s; font-family: var(--serif);
}
.lc-chip:hover { border-color: #d9b667; color: var(--red); background: #fff9ec; }
@media (max-width: 780px) {
  .lc-manual { padding: 11px 12px; }
  .lc-m-row .inp { width: 92px; }
  .lc-chip { font-size: 11px; padding: 4px 8px; }
}
@media (max-width: 780px) {
  .lc-stage { gap: 22px; padding: 18px; justify-content: center; }
  .lc-dial { width: 180px; height: 180px; }
  .lc-deg { font-size: 36px; }
  .lc-read { text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .lc-dial { transition: none; } }

/* 表盘方位字：随盘一起转 */
.lc-labels { position: absolute; inset: 0; }
.lc-labels span {
  --a: 0deg;
  position: absolute; left: 50%; top: 50%;
  margin: -9px 0 0 -9px; width: 18px; text-align: center;
  font-size: 12px; letter-spacing: 0; color: #d8c491;
  font-family: var(--serif); white-space: nowrap;
  transform: rotate(var(--a)) translateY(-86px) rotate(calc(-1 * var(--a)));
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
@media (max-width: 780px) { .lc-labels span { transform: rotate(var(--a)) translateY(-70px) rotate(calc(-1 * var(--a))); font-size: 11px; } }

/* ---------- 远程看风水 ---------- */
.remote-head { margin-top: 46px; }
.remote-sub { color: var(--ink-3); font-size: 13px; margin: -10px 0 16px; max-width: 640px; line-height: 1.9; }
.remote-card .card-b { padding-bottom: 18px; }
.rm-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: flex-end; }
.rm-row .inp { flex: 1; min-width: 180px; }
.rm-row > .btn { flex: none; height: 42px; }
.rm-row-2 > .f { flex: 1; min-width: 170px; }
.rm-row-2 .f label { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; }
.rm-row-2 .inp { width: 100%; }
.rm-actions { margin-top: 6px; }
.rm-tip {
  margin-top: 12px; font-size: 12.5px; line-height: 1.9; color: var(--ink-3);
  padding: 10px 13px; border-radius: 9px; background: #faf7f1; border: 1px solid var(--line);
}
.rm-tip b { color: var(--red); }
.rm-tip.ok { background: #f2f8f3; border-color: #d6e8da; color: #3f6b4c; }
.rm-tip.warn { background: #fdf3f1; border-color: #f0d8d2; color: #9a4636; }
.rm-cc { margin-left: 10px; color: #7e8f83; font-variant-numeric: tabular-nums; }

/* 结果 */
.rm-result { margin-top: 18px; }
.rm-rhead { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.rm-place { font-size: 19px; color: var(--ink); letter-spacing: 1px; }
.rm-coord { margin-top: 7px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rm-zhai { text-align: center; padding: 10px 18px; border-radius: 12px; background: linear-gradient(150deg, #2b2027, #48241d); color: #f4e6c8; flex: none; }
.rmz-l { font-size: 11px; letter-spacing: 3px; color: #b79b6e; }
.rmz-k { font-size: 30px; line-height: 1.25; }
.rmz-g { font-size: 11px; letter-spacing: 2px; color: #cbb287; }
.rm-line { display: flex; gap: 14px; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; flex-wrap: wrap; }
.rm-deg { font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: 12.5px; }
.rm-match { font-size: 12px; padding: 3px 10px; border-radius: 20px; margin-left: 8px; }
.rm-match.ok { background: #eaf5ec; color: #3f6b4c; }
.rm-match.no { background: #fdf0ec; color: #a3543f; }
.rm-desc { margin-top: 10px; font-size: 13px; line-height: 1.95; color: var(--ink-2); }
.rm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.rmdir {
  position: relative; padding: 12px 10px; border-radius: 12px; text-align: center;
  background: #faf7f1; border: 1px solid var(--line);
}
.rmdir.good { background: #f4f9f5; border-color: #d9e9dc; }
.rmdir.bad { background: #fdf5f2; border-color: #f0ddd6; }
.rmd-k { font-size: 20px; color: var(--ink); letter-spacing: 1px; }
.rmd-n { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.rmd-q { font-size: 12.5px; margin-top: 7px; color: var(--ink-2); }
.rmd-l { font-size: 11px; margin-top: 4px; color: var(--ink-3); }
.rmdir.good .rmd-l { color: #3f6b4c; }
.rmdir.bad .rmd-l { color: #a3543f; }
.dmark {
  position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 1px 5px;
  border-radius: 6px; background: var(--red); color: #fff; letter-spacing: 1px;
}
.dmark.xiang { background: #b8892f; }
.rm-advice { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #f7f4ec; border: 1px solid #ece2cd; }
.rma-t { font-family: var(--serif); font-size: 14px; letter-spacing: 2px; color: var(--ink); }
.rma-l { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
.rma-tag { font-size: 12px; padding: 4px 10px; border-radius: 20px; background: #fff; border: 1px solid #e4d8bf; color: #7a6a4a; }
.rm-advice p { font-size: 12.5px; line-height: 1.95; color: var(--ink-3); }
.rm-warn { margin-top: 14px; font-size: 12.5px; line-height: 1.9; color: #9a7a3a; }
.rm-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-3); line-height: 1.85; }
@media (max-width: 780px) {
  .rm-grid { grid-template-columns: repeat(2, 1fr); }
  .rm-row > .btn { flex: 1; }
}

/* ---------- 专业罗盘 ---------- */
.luopan-card { margin-top: 16px; }
.lp-layout { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.lp-panwrap { flex: none; width: 380px; max-width: 100%; }
.lp-panwrap svg { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 8px 40px rgba(23, 19, 32, .35); }
.lp-side { flex: 1; min-width: 260px; }
.lp-query label { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.lp-query-row { display: flex; gap: 10px; }
.lp-query-row .inp { flex: 1; }
.lp-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lp-qb {
  font-family: var(--serif); font-size: 12.5px; padding: 5px 12px; border-radius: 18px;
  border: 1px solid var(--line); background: #faf7f1; color: var(--ink-2); cursor: pointer;
}
.lp-qb:hover { border-color: var(--gold); color: var(--red); }
.lp-info { margin-top: 18px; }
.lp-row {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 2px;
  border-bottom: 1px dashed var(--line); font-size: 13.5px; flex-wrap: wrap;
}
.lp-row > span { color: var(--ink-3); font-size: 12.5px; min-width: 96px; }
.lp-row b { font-size: 16px; color: var(--ink); }
.lp-row em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.lp-row em.g { color: #3f6b4c; font-weight: 600; }
.lp-row em.b { color: #a3543f; }
.lp-note { margin-top: 16px; font-size: 11.5px; color: var(--ink-3); line-height: 1.9; padding-top: 12px; border-top: 1px dashed var(--line); }
@media (max-width: 780px) { .lp-panwrap { width: 100%; } }

/* 罗盘层开关 */
.lp-layers { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.lp-ly {
  font-family: var(--serif); font-size: 12px; padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-3); cursor: pointer;
  transition: all .15s;
}
.lp-ly.on { background: #2b2027; border-color: #2b2027; color: #e8d3a6; }
.lp-ly:hover { border-color: var(--gold); }
.lp-hint { margin-top: 8px; font-size: 11px; color: var(--ink-3); line-height: 1.8; }

/* 五分金 */
.lp-jin { margin-top: 12px; padding: 12px 14px; border-radius: 11px; background: #f7f4ec; border: 1px solid #ece2cd; }
.lp-jin-t { font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px; }
.lp-jin-t em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.lp-jin-l { display: flex; gap: 7px; flex-wrap: wrap; }
.lp-jin-i {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 9px; border-radius: 8px; font-size: 13px; font-family: var(--serif);
  background: #fff; border: 1px solid #e4d8bf; color: #7a6a4a;
}
.lp-jin-i em { font-style: normal; font-size: 10px; font-family: system-ui, sans-serif; color: #a09889; }
.lp-jin-i.g { background: #eef7f0; border-color: #cfe4d4; color: #33694a; }
.lp-jin-i.g em { color: #4f7d61; }
.lp-jin-i.x { background: #fbf1ee; border-color: #eed9d2; color: #9c5844; }

/* 十二长生砂水 */
.lp-cs { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.lp-cs-t { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; font-family: var(--serif); letter-spacing: 1px; }
.lp-cs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lp-cs-i {
  padding: 7px 4px; border-radius: 8px; text-align: center; background: #faf7f1;
  border: 1px solid var(--line); font-size: 11.5px; line-height: 1.5;
}
.lp-cs-i b { display: block; font-family: var(--serif); font-size: 14px; color: var(--ink); }
.lp-cs-i span { display: block; color: var(--ink-3); font-size: 10.5px; }
.lp-cs-i em { display: block; font-style: normal; font-size: 10.5px; margin-top: 2px; }
.lp-cs-i.w em { color: #2f6b8a; }
.lp-cs-i.s em { color: #8a6a34; }
.lp-cs-i.w { background: #f2f7fa; border-color: #d7e6ee; }
@media (max-width: 780px) { .lp-cs-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 择吉择日 ---------- */
.zj-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.zj-act {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); font-size: 13.5px; cursor: pointer; transition: all .16s;
}
.zj-act:hover { border-color: var(--gold); color: #8a6720; }
.zj-act.on {
  background: var(--red); border-color: var(--red); color: #f7e9cd;
  box-shadow: 0 2px 8px rgba(163, 36, 27, .18);
}
.zj-form-tip { font-size: 12px; color: var(--ink-3); margin-top: 7px; line-height: 1.6; }

.zj-hero { overflow: hidden; }
.zj-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-2);
}
.zj-k { font-size: 11px; letter-spacing: 2px; color: var(--gold); }
.zj-title { font-size: 26px; letter-spacing: 3px; margin-top: 4px; }
.zj-range { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.zj-total { text-align: center; flex-shrink: 0; }
.zj-total b { display: block; font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--red); }
.zj-total span { font-size: 11.5px; color: var(--ink-3); }
.zj-hint { font-size: 12px; color: var(--ink-3); margin: 14px 0 2px; }

.zj-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.zj-item {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: #fff; transition: border-color .16s;
}
.zj-item.hd { background: linear-gradient(180deg, #fffdf8, #fff); border-color: #ecdfc4; }
.zj-day { display: flex; align-items: center; gap: 14px; }
.zj-date { flex-shrink: 0; width: 88px; }
.zj-date b { display: block; font-family: var(--serif); font-size: 25px; line-height: 1.1; }
.zj-date span { font-size: 11.5px; color: var(--ink-3); }
.zj-mid { flex: 1; min-width: 0; }
.zj-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.zj-tags .tg { font-size: 11.5px; padding: 2px 8px; }
.zj-why { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; line-height: 1.6; }
.zj-g { color: var(--jade); }
.zj-b { color: var(--red-2); }
.zj-lock { color: var(--ink-3); }
.zj-score { flex-shrink: 0; text-align: center; width: 56px; }
.zj-score b { display: block; font-family: var(--serif); font-size: 24px; line-height: 1; }
.zj-score span { font-size: 11px; }
.zj-score.zg b, .zj-score.zg span { color: #a3241b; }
.zj-score.j b, .zj-score.j span { color: #b08a3e; }
.zj-score.k b, .zj-score.k span { color: #2c6650; }
.zj-score.p b, .zj-score.p span { color: var(--ink-3); }
.zj-score.x b, .zj-score.x span { color: #9a949f; }

.zj-hours {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--ink-2);
}
.zj-hl { font-style: normal; color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.zj-hours span {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--gold-soft); border-radius: 6px; padding: 2px 8px;
}
.zj-hours b { color: #8f6c22; font-weight: 600; }
.zj-hours i { font-style: normal; color: var(--ink-3); font-size: 11px; }

.zj-avoid { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; }
.zj-avoid:last-child { border-bottom: 0; }
.zj-avoid b { flex-shrink: 0; color: var(--red); }
.zj-avoid span { color: var(--ink-3); }

.zj-tips { margin: 0; padding-left: 18px; }
.zj-tips li { margin-bottom: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.8; }
.zj-note { font-size: 12px; color: var(--ink-3); margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line-2); }

.zj-promo-in { display: flex; gap: 26px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.zj-promo-in h3 { font-size: 19px; letter-spacing: 1px; }
.zj-promo-in p { font-size: 13px; color: var(--ink-3); margin: 8px 0 14px; max-width: 520px; }
.zj-promo-acts { display: flex; flex-wrap: wrap; gap: 8px; max-width: 300px; }
.zj-promo-acts a {
  font-size: 12.5px; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: #fff;
}
.zj-promo-acts a:hover { border-color: var(--red); color: var(--red); }

@media (max-width: 640px) {
  .zj-day { gap: 10px; }
  .zj-date { width: 70px; }
  .zj-date b { font-size: 21px; }
  .zj-score { width: 46px; }
  .zj-score b { font-size: 20px; }
  .zj-title { font-size: 22px; }
  .zj-total b { font-size: 30px; }
  .zj-why { font-size: 11.5px; }
  .zj-promo-acts { max-width: none; }
}

/* ---------- 会员 ---------- */
.vip-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; color: #8a6720; white-space: nowrap; flex-shrink: 0;
  background: linear-gradient(180deg, #fdf8ec, #f7ecd4);
  border: 1px solid #e7d3aa; transition: all .16s;
}
.vip-chip:hover { border-color: var(--gold); box-shadow: 0 2px 8px rgba(176, 138, 62, .18); }
.vip-chip.on { color: #7d3a12; background: linear-gradient(180deg, #fdf3e2, #f6e3c4); border-color: #ddc294; }
.vip-chip-ic {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #b83226, #8d1b13); color: #f7e9cd; font-size: 10px;
}
.vip-chip-tag {
  font-size: 10px; line-height: 1.5; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #f7e9cd;
}

/* 会员主卡：开通前 / 有效中 */
.vip-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 28px 30px; border-radius: 18px; border: 1px solid #ecdcbc;
  background: linear-gradient(135deg, #fffdf8 0%, #fbf2df 55%, #f6e8ca 100%);
  box-shadow: var(--shadow-sm);
}
.vip-hero.on { background: linear-gradient(135deg, #fffdf8, #f9f0dd); }
.vip-hero-k { font-size: 11.5px; letter-spacing: 2px; color: var(--gold); }
.vip-hero h2 { font-size: 27px; letter-spacing: 2px; margin: 6px 0 8px; }
.vip-hero-p { font-size: 13px; color: var(--ink-3); max-width: 460px; line-height: 1.8; }
.vip-hero-d { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 6px; }
.vip-hero-d b { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--red); }
.vip-hero-d span { font-size: 13px; color: var(--ink-3); }
.vip-hero-m { font-size: 12.5px; color: var(--ink-3); }
.vip-hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.vip-hero-facts b { font-family: var(--serif); font-size: 16px; color: #8a6720; }
.vip-hero-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.vip-hero-note { font-size: 11.5px; color: var(--ink-3); }
.vip-quota {
  min-width: 210px; padding: 12px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .72); border: 1px solid #ecdcbc;
}
.vip-quota-t { font-size: 11px; letter-spacing: 1px; color: var(--ink-3); }
.vip-quota-n { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; }
.vip-quota-n b { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--red); }
.vip-quota-n span { font-size: 12.5px; color: var(--ink-3); }
.vip-bar { height: 5px; border-radius: 99px; background: #eee3cd; margin: 9px 0 6px; overflow: hidden; }
.vip-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #d9b667, #a3241b); }
.vip-quota-s { font-size: 11.5px; color: var(--ink-3); }

.vip-sec { margin-top: 40px; }
.vip-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.vip-benefit {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.vip-bk {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: var(--gold-soft); color: #8a6720; border: 1px solid #ecdfc4;
}
.vip-benefit p { font-size: 13px; color: var(--ink-2); line-height: 1.7; }

.vip-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.vip-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; }
.vip-table th, .vip-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line-2); }
.vip-table thead th { font-size: 12px; color: var(--ink-3); font-weight: 400; background: #fdfaf3; }
.vip-table tbody tr:last-child td { border-bottom: 0; }
.vip-table td:first-child { color: var(--ink-3); font-size: 12.5px; width: 96px; }
.vip-table .hl { color: #8a6720; background: rgba(250, 244, 230, .6); }
.vip-tip { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

.vip-rules { margin: 0; padding-left: 20px; }
.vip-rules li { font-size: 13px; color: var(--ink-2); line-height: 1.9; margin-bottom: 6px; }
.vip-faq { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 26px; }
.vip-faq > div { padding-top: 12px; border-top: 1px dashed var(--line-2); }
.vip-faq b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.vip-faq p { font-size: 12.5px; color: var(--ink-3); line-height: 1.85; }

.vip-final {
  margin-top: 34px; padding: 24px 28px; border-radius: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, #a3241b, #8d1b13); color: #f7e9cd;
  box-shadow: 0 8px 24px -10px rgba(141, 27, 19, .5);
}
.vip-final h3 { font-size: 20px; letter-spacing: 2px; }
.vip-final p { font-size: 12.5px; color: rgba(247, 233, 205, .7); margin-top: 6px; }
.vip-final .btn-primary { background: #f7e9cd; color: #8d1b13; border-color: #f7e9cd; }
.vip-final .btn-primary:hover { background: #fff; }

/* 首页推广条 */
.vip-promo {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 20px 24px; border-radius: 14px; border: 1px solid #ecdcbc;
  background: linear-gradient(120deg, #fffdf8, #faf1de);
}
.vip-promo.on { border-color: #ddc294; background: linear-gradient(120deg, #fffdf8, #f7ecd4); }
.vip-promo-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vip-promo-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: linear-gradient(140deg, #b83226, #8d1b13); color: #f7e9cd;
  box-shadow: inset 0 0 0 1.5px rgba(247, 233, 205, .3);
}
.vip-promo-l b { display: block; font-size: 15px; letter-spacing: .5px; }
.vip-promo-l p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* 记录页小卡 */
.vip-mini {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 16px; border-radius: 12px;
  border: 1px solid #ecdcbc; background: linear-gradient(120deg, #fffdf8, #faf2e0);
}
.vip-mini.on { border-color: #ddc294; }
.vip-mini-l { display: flex; align-items: center; gap: 12px; }
.vip-mini-ic {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #b83226, #8d1b13); color: #f7e9cd; font-size: 14px;
}
.vip-mini-l b { font-size: 14px; }
.vip-mini-l div div { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* 付费墙里的会员入口 */
.pw-vip {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 16px; border-radius: 10px;
  border: 1px dashed #e0cfa8; background: rgba(250, 244, 230, .55);
}
.pw-vip-l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pw-vip-b {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #f7e9cd; font-size: 12px;
}
.pw-vip b { display: block; font-size: 13px; }
.pw-vip em { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.pw-vip > a { font-size: 12.5px; color: #8a6720; white-space: nowrap; }
.pw-vip > a:hover { color: var(--red); }

@media (max-width: 640px) {
  .vip-chip { height: 30px; padding: 0 9px; font-size: 12px; }
  .vip-chip-tag { display: none; }
  .vip-hero { padding: 22px 20px; gap: 20px; }
  .vip-hero h2 { font-size: 23px; }
  .vip-hero-r { align-items: stretch; width: 100%; }
  .vip-hero-r .btn { width: 100%; }
  .vip-quota { width: 100%; min-width: 0; }
  .vip-promo { padding: 16px 18px; }
  .vip-promo .btn { width: 100%; text-align: center; }
  .vip-final { padding: 20px; }
  .vip-final .btn { width: 100%; }
  .vip-mini { padding: 12px 14px; }
}

/* ---------- 后台：收款码 ---------- */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.qr-slot {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.qr-thumb {
  width: 78px; height: 78px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-2); background: #faf8f4;
  display: flex; align-items: center; justify-content: center;
}
.qr-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.qr-empty { font-size: 11.5px; color: var(--ink-3); }
.qr-meta { flex: 1; min-width: 0; }
.qr-meta b { display: block; font-size: 13.5px; }
.qr-meta em { font-style: normal; font-size: 11.5px; }
.qr-meta em.ok { color: var(--jade); }
.qr-meta em.warn { color: var(--red-2); }
.qr-acts { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.qr-acts .btn { white-space: nowrap; cursor: pointer; }
.badge.hot { background: #fdf0ee; color: var(--red); border-color: #f0d6d1; }

@media (max-width: 640px) {
  .qr-slot { padding: 10px; gap: 10px; }
  .qr-thumb { width: 64px; height: 64px; }
  .qr-acts { flex-direction: row; }
  .qr-acts .btn { padding: 6px 10px; font-size: 12px; }
}

/* 弹窗里的收款码图：固定框内等比缩放，长图/宽图都不会撑破 */
.qr-frame img, .qr-frame svg { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 收银台第一步：先确认金额，再出收款码 */
.pay-confirm { padding: 2px 0; }
.pay-confirm-k { font-size: 11px; letter-spacing: 2px; color: var(--gold); }
.pay-confirm-t { font-size: 19px; letter-spacing: 1px; margin-top: 6px; }
.pay-confirm-s { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.pay-confirm-list { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px dashed var(--line-2); }
.pay-confirm-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2); font-size: 12.5px;
}
.pay-confirm-list span { color: var(--ink-3); flex-shrink: 0; }
.pay-confirm-list b { font-weight: 500; color: var(--ink); text-align: right; word-break: break-all; }
.pay-confirm-amt { display: flex; align-items: baseline; justify-content: space-between; margin-top: 14px; }
.pay-confirm-amt span { font-size: 12.5px; color: var(--ink-3); }
.pay-confirm-amt b { font-family: var(--serif); color: var(--red); font-size: 30px; line-height: 1; }
.pay-confirm-amt small { font-size: 15px; margin-right: 2px; }

/* 付款成功页 */
.pay-ok { text-align: center; padding: 26px 4px 6px; }
.pay-ok-badge {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--jade); color: #fff; font-size: 32px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(44, 102, 80, .22);
}
.pay-ok-t { font-size: 24px; letter-spacing: 5px; color: #2c6650; }
.pay-ok-amt { font-family: var(--serif); font-size: 34px; color: var(--ink); margin-top: 10px; line-height: 1; }
.pay-ok-amt small { font-size: 16px; margin-right: 2px; }
.pay-ok-s { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.pay-ok-list { list-style: none; margin: 18px 0 20px; padding: 0; border-top: 1px dashed var(--line-2); text-align: left; }
.pay-ok-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2); font-size: 12.5px;
}
.pay-ok-list span { color: var(--ink-3); flex-shrink: 0; }
.pay-ok-list b { font-weight: 500; color: var(--ink); text-align: right; word-break: break-all; }

/* 首页底部「使用说明」入口：说明不铺版面，只留一个去处 */
.home-guide-link {
  display: inline-block; font-size: 12.5px; letter-spacing: 1px;
  color: var(--ink-3); text-decoration: none;
  padding: 6px 2px; border-bottom: 1px dashed var(--line-2);
  transition: color .15s, border-color .15s;
}
.home-guide-link:hover { color: var(--red); border-color: var(--red); }

/* 使用说明 · 三档价目 */
.guide-price { border-top: 1px solid var(--line-2); }
.guide-price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px dashed var(--line-2); flex-wrap: wrap;
}
.gp-l { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.gp-l b { font-family: var(--serif); font-size: 15px; letter-spacing: 2px; color: var(--ink); }
.gp-l span { font-size: 15px; color: var(--red); font-weight: 500; }
.gp-r { display: flex; gap: 8px; flex-wrap: wrap; }
.gp-r em { font-style: normal; font-size: 12px; color: var(--ink-3); background: var(--paper-2, #f7f3ea); border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 10px; }

/* 收银台：项目档位小签 */
.pay-tier {
  display: inline-block; margin-left: 8px; vertical-align: 3px;
  font-style: normal; font-family: var(--sans, inherit); font-size: 11px; letter-spacing: 1px;
  color: #8a6a2a; background: #fbf0d8; border: 1px solid #e5cfa0;
  border-radius: 999px; padding: 1px 8px; font-weight: 400;
}

/* 后台：会员套餐三格输入 */
.adm-line { display: flex; gap: 16px; flex-wrap: wrap; }
.adm-f { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.adm-f .hf-inp { width: 132px; padding: 8px 10px; }

/* ================= 奇门遁甲 · 九宫盘 ================= */
.qm-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 16px;
}
.qm-ju { font-size: 26px; letter-spacing: 3px; color: var(--red); line-height: 1.1; }
.qm-meta { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: .5px; }
.qm-head-r { display: flex; gap: 18px; font-size: 12.5px; color: var(--ink-3); flex-wrap: wrap; }
.qm-head-r b { color: var(--ink); font-weight: 500; margin-left: 4px; }

.qm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qm-cell {
  position: relative; min-height: 116px; padding: 10px 11px 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.qm-cell.mid { background: var(--gold-soft); }
.qm-cell.yong { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(176, 138, 62, .14); }
.qm-cell.self { border-color: #d8b1ab; }
.qm-cell.lock { background: repeating-linear-gradient(135deg, #fdfbf6, #fdfbf6 6px, #faf6ec 6px, #faf6ec 12px); }
.qm-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; }
.qm-god { color: #8a6a2a; letter-spacing: 1px; }
.qm-dir { color: var(--ink-3); }
.qm-star { font-family: var(--serif); font-size: 15px; color: var(--ink); margin-top: 6px; letter-spacing: 1px; }
.qm-door { font-size: 13px; color: var(--jade); margin-top: 2px; letter-spacing: 1px; }
.qm-gan { font-size: 24px; color: var(--red); text-align: right; line-height: 1; margin-top: auto; }
.qm-foot { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.qm-lv { font-style: normal; padding: 0 6px; border-radius: 999px; background: #f3efe5; color: var(--ink-3); }
.qm-lv.g { background: #e8f3ec; color: #2c6650; }
.qm-lv.b { background: var(--red-soft); color: var(--red); }
.qm-tag {
  position: absolute; top: -9px; left: 10px; font-style: normal; font-size: 10px;
  background: var(--gold); color: #fff; padding: 1px 7px; border-radius: 999px; letter-spacing: 1px;
}
.qm-tag.self { background: var(--red); }

.qm-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); margin: 12px 0 18px; }
.qm-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c9c2b4; margin-right: 5px; }
.qm-legend .dot.g { background: #2c6650; }
.qm-legend .dot.b { background: var(--red); }

.qm-sum { border-top: 1px dashed var(--line-2); padding-top: 16px; }
.qm-sum-t { font-size: 17px; letter-spacing: 1px; color: var(--ink); }
.qm-sum p { font-size: 13.5px; line-height: 2; color: var(--ink-2); margin-top: 8px; }
.qm-tip { font-size: 12px; color: var(--ink-3); margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--line); line-height: 1.9; }
.qm-advice { margin-top: 16px; }
.qm-advice b { font-size: 13px; color: var(--ink); letter-spacing: 2px; }
.qm-advice ul { margin: 8px 0 0; padding-left: 18px; }
.qm-advice li { font-size: 12.5px; line-height: 2; color: var(--ink-2); }
.qm-q { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); }
.qm-blur {
  margin-top: 18px; padding: 18px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, #fffdf8, #faf1de); border: 1px dashed #e2cfa4;
}
.qm-blur b { font-family: var(--serif); font-size: 15px; letter-spacing: 2px; color: #8a6a2a; }
.qm-blur p { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

@media (max-width: 640px) {
  .qm-cell { min-height: 100px; padding: 8px; }
  .qm-gan { font-size: 20px; }
  .qm-star { font-size: 13px; }
  .qm-door { font-size: 12px; }
  .qm-head-r { gap: 10px; }
}

/* ================= 麻衣看相（相面 + 相掌） ================= */
.mx-sec-t { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mx-sec-t b { font-family: var(--serif); font-size: 15px; letter-spacing: 2px; color: var(--ink); }
.mx-sec-t span { font-size: 11.5px; color: var(--ink-3); }
.mx-opt-w { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.mx-opt-l { flex: 0 0 58px; padding-top: 7px; font-size: 12.5px; color: var(--ink-3); letter-spacing: 1px; }
.mx-opt { flex: 1; min-width: 0; }
.mx-opt-c { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-chip {
  padding: 6px 11px; border-radius: 7px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-2); font-size: 12.5px; cursor: pointer;
  transition: all .14s; white-space: nowrap;
}
.mx-chip:hover { border-color: #d8c9a8; color: var(--ink); }
.mx-chip.on { background: var(--red-soft); border-color: #e5c3b6; color: var(--red); font-weight: 500; }
.mx-hint { margin: -2px 0 12px 70px; font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.mx-switch {
  width: 100%; padding: 10px 14px; border-radius: 9px; border: 1px dashed #ddd0b2;
  background: #fffdf8; color: var(--ink-2); font-size: 13px; cursor: pointer; text-align: left;
  transition: all .14s;
}
.mx-switch.on { border-style: solid; border-color: #e5c3b6; background: var(--red-soft); color: var(--red); }
.mx-hand-box { margin-top: 14px; }

.mx-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, #fffdf8, #f8efdb); border: 1px solid #ecdfc2;
}
.mx-face { font-size: 26px; letter-spacing: 4px; color: var(--ink); }
.mx-meta { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.mx-head-r { text-align: right; flex-shrink: 0; }
.mx-total { font-size: 34px; line-height: 1; color: var(--red); }
.mx-total-l { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); letter-spacing: 1px; }
.mx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mx-blk { border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 6px; background: #fff; }
.mx-blk-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.mx-blk-h b { font-family: var(--serif); font-size: 15px; letter-spacing: 3px; }
.mx-blk-h em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.mx-hand-t { margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.mx-hand-t b { font-size: 17px; letter-spacing: 2px; color: #8a6a2a; }
.mx-hand-t span { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; }
.mx-its { display: flex; flex-direction: column; gap: 7px; }
.mx-i { display: flex; gap: 8px; font-size: 12px; line-height: 1.75; padding: 6px 0; border-bottom: 1px dashed #f0e9db; }
.mx-i:last-child { border-bottom: 0; }
.mx-i-n { flex: 0 0 auto; color: var(--ink); font-weight: 500; }
.mx-i-d { color: var(--ink-2); }
.mx-i.lock .mx-i-d { color: #b9ae99; }
.mx-sub { margin: 14px 0 8px; font-size: 11.5px; letter-spacing: 2px; color: var(--ink-3); }
.mx-luck { display: flex; flex-direction: column; gap: 6px; }
.mx-luck-r { display: flex; gap: 10px; font-size: 11.5px; line-height: 1.75; }
.mx-luck-r span { flex: 0 0 104px; color: #8a6a2a; }
.mx-luck-r p { flex: 1; color: var(--ink-2); }
.mx-tip { margin: 10px 0 4px; padding-left: 10px; border-left: 2px solid var(--line); font-size: 11.5px; color: var(--ink-3); line-height: 1.8; }
.mx-pal { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.mx-pal-r { display: flex; gap: 10px; font-size: 11.5px; line-height: 1.75; }
.mx-pal-r b { flex: 0 0 104px; font-weight: 500; color: var(--ink); }
.mx-pal-r p { flex: 1; color: var(--ink-2); }
.mx-comb {
  margin-top: 16px; padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #fff9ef, #f9f0dd); border: 1px solid #ecdfc2;
}
.mx-comb b { font-family: var(--serif); font-size: 14px; letter-spacing: 2px; color: #8a6a2a; }
.mx-comb p { margin-top: 8px; font-size: 12.5px; line-height: 2; color: var(--ink-2); }
.mx-comb.lock p { color: #b9ae99; }
.mx-adv { margin-top: 16px; }
.mx-adv b { font-size: 13px; letter-spacing: 2px; }
.mx-adv ul { margin: 8px 0 0; padding-left: 18px; }
.mx-adv li { font-size: 12.5px; line-height: 2; color: var(--ink-2); }

@media (max-width: 780px) {
  .mx-duo { grid-template-columns: 1fr; }
  .mx-opt-w { flex-direction: column; gap: 4px; }
  .mx-opt-l { flex: none; padding-top: 0; }
  .mx-hint { margin-left: 0; }
  .mx-luck-r span, .mx-pal-r b { flex: 0 0 82px; }
  .mx-face { font-size: 22px; letter-spacing: 3px; }
  .mx-total { font-size: 28px; }
}

/* ================= 麻衣看相 · 相机模式 ================= */
.mx-cam-entry {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  margin-bottom: 14px; border-radius: 11px; border: 1px solid #e6d9bc;
  background: linear-gradient(135deg, #fffdf7, #f8f0dd); cursor: pointer; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.mx-cam-entry:hover { border-color: #dcc9a2; box-shadow: 0 4px 14px rgba(140, 106, 42, .07); }
.mx-cam-ic {
  flex: 0 0 36px; height: 36px; border-radius: 50%; background: var(--red-soft);
  color: var(--red); display: flex; align-items: center; justify-content: center;
}
.mx-cam-ic svg { width: 19px; height: 19px; }
.mx-cam-tx { flex: 1; min-width: 0; }
.mx-cam-tx b { display: block; font-family: var(--serif); font-size: 14.5px; letter-spacing: 2px; color: var(--ink); }
.mx-cam-tx em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.mx-cam-go { flex: 0 0 auto; font-size: 12px; color: var(--red); border: 1px solid #e5c3b6; border-radius: 20px; padding: 4px 12px; }

/* 这几个元素都设了 display，会盖过 hidden 属性 —— 显式补一刀，hidden 时必须真隐藏 */
.mx-ref[hidden], .mx-cam-guide[hidden], .mx-cam-grid[hidden], .mx-cam-read[hidden],
.mx-cam-count[hidden], .mx-cam-err[hidden], .mx-cam-fb[hidden], .mx-cam-zoom[hidden], #mxCamV[hidden], #mxCamShotImg[hidden] { display: none !important; }

.mx-ref { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.mx-ref img { width: 54px; height: 54px; object-fit: cover; border-radius: 7px; cursor: zoom-in; flex: 0 0 auto; background: #f0ece3; }
.mx-ref-tx { flex: 1; min-width: 0; }
.mx-ref-tx b { display: block; font-size: 12.5px; color: var(--ink); }
.mx-ref-tx em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--ink-3); line-height: 1.7; }
.mx-ref-b { flex: 0 0 auto; padding: 4px 9px; font-size: 11.5px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink-2); cursor: pointer; }
.mx-ref-b:hover { border-color: #d8c9a8; color: var(--ink); }

.mx-how { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fffdf8; padding: 0 12px; }
.mx-how summary { cursor: pointer; padding: 9px 0; font-size: 12.5px; color: #8a6a2a; letter-spacing: 1px; list-style: none; }
.mx-how summary::-webkit-details-marker { display: none; }
.mx-how summary::after { content: '＋'; float: right; color: var(--ink-3); }
.mx-how[open] summary::after { content: '－'; }
.mx-how ul { margin: 0 0 8px; padding-left: 16px; }
.mx-how li { font-size: 11.5px; line-height: 1.95; color: var(--ink-2); }
.mx-how li b { color: var(--ink); font-weight: 500; }
.mx-how p { margin: 0 0 10px; font-size: 11px; line-height: 1.8; color: var(--ink-3); }

.mx-cam { position: fixed; inset: 0; z-index: 120; background: #0b0a09; display: flex; align-items: center; justify-content: center; }
.mx-cam-in { width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column; background: #0b0a09; }
.mx-cam-top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.mx-cam-top button {
  color: #efe7d6; background: rgba(255, 255, 255, .1); border: 0; border-radius: 8px;
  padding: 6px 12px; font-size: 12.5px; cursor: pointer;
}
.mx-cam-top button:active { background: rgba(255, 255, 255, .2); }
.mx-cam-tabs { display: flex; gap: 6px; }
.mx-cam-tabs button { min-width: 58px; }
.mx-cam-tabs button.on { background: var(--red); color: #fff; }

.mx-cam-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; }
.mx-cam-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mx-cam-stage video.mir { transform: scaleX(-1); }
.mx-cam-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.mx-cam-guide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mx-cam-guide::before {
  content: ''; width: 64%; aspect-ratio: 3 / 4; border: 2px dashed rgba(255, 255, 255, .78);
  border-radius: 50%; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .3);
}
.mx-cam-guide[data-m="hand"]::before { width: 60%; aspect-ratio: 4 / 5; border-radius: 24% 24% 30% 30%; }
.mx-cam-guide[hidden] { display: none; }

.mx-cam-grid { position: absolute; inset: 0; pointer-events: none; }
.mx-cam-grid i { position: absolute; background: rgba(255, 255, 255, .18); }
.mx-cam-grid i:nth-child(1) { left: 0; right: 0; top: 33.33%; height: 1px; }
.mx-cam-grid i:nth-child(2) { left: 0; right: 0; top: 66.66%; height: 1px; }
.mx-cam-grid i:nth-child(3) { top: 0; bottom: 0; left: 33.33%; width: 1px; }
.mx-cam-grid i:nth-child(4) { top: 0; bottom: 0; left: 66.66%; width: 1px; }

.mx-cam-read {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 20px; font-size: 11.5px; letter-spacing: 1px;
  background: rgba(20, 18, 15, .72); color: #f0e6d2; border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px); white-space: nowrap;
}
.mx-cam-read.ok { color: #bfe3bd; border-color: rgba(150, 210, 150, .45); }
.mx-cam-read.warn { color: #f3cfa2; border-color: rgba(240, 180, 120, .45); }

.mx-cam-count {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: 92px; color: rgba(255, 255, 255, .92);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .5); pointer-events: none;
}
.mx-cam-focus {
  position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none;
  animation: mxFocus .7s ease-out forwards;
}
@keyframes mxFocus { 0% { transform: scale(1.35); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

.mx-cam-tip {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-size: 12px; color: #f3ecdd; text-shadow: 0 1px 6px rgba(0, 0, 0, .75);
  padding: 0 26px; line-height: 1.7;
}
.mx-cam-err {
  position: absolute; left: 16px; right: 16px; bottom: 52px; padding: 12px 14px;
  border-radius: 10px; background: rgba(32, 28, 24, .94); color: #f0e6d2;
  font-size: 12px; line-height: 1.85; border: 1px solid rgba(255, 255, 255, .14);
}

.mx-cam-tools {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px 4px; background: #0b0a09;
}
.mx-t {
  padding: 5px 11px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: #ddd2bd; font-size: 11.5px; cursor: pointer;
}
.mx-t.on { background: var(--red); border-color: var(--red); color: #fff; }
.mx-cam-eng { margin-left: auto; font-size: 10.5px; color: #7d7566; letter-spacing: .5px; }
.mx-cam-eng.ok { color: #8fbd8d; }
.mx-cam-eng.bad { color: #d5a06a; }
.mx-cam-zoom { display: flex; align-items: center; gap: 6px; flex: 1 0 130px; color: #a89e8d; font-size: 10.5px; }
.mx-cam-zoom input { flex: 1; accent-color: var(--red); }

.mx-cam-bot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around;
  gap: 12px; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); background: #0b0a09;
}
.mx-cam-side { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; cursor: pointer; }
.mx-cam-side > span:last-child { font-size: 10px; color: #8b8272; }
.mx-cam-file {
  width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: #e8dcc5;
  background: rgba(255, 255, 255, .06);
}
.mx-cam-snap {
  width: 66px; height: 66px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85);
  background: transparent; position: relative; cursor: pointer; flex: 0 0 auto;
}
.mx-cam-snap::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; transition: transform .1s; }
.mx-cam-snap:active::after { transform: scale(.9); }
.mx-cam-use {
  width: 66px; height: 66px; border-radius: 50%; border: 0; background: var(--red);
  color: #fff; font-size: 12.5px; letter-spacing: 1px; cursor: pointer; flex: 0 0 auto;
}
.mx-cam-use:disabled { opacity: .65; }

.mx-zoom {
  position: fixed; inset: 0; z-index: 130; background: rgba(8, 7, 6, .95);
  display: flex; align-items: center; justify-content: center; padding: 14px; cursor: zoom-out;
}
.mx-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; }
body.mx-lock { overflow: hidden; }

@media (max-width: 780px) {
  .mx-cam-tip { bottom: 8px; font-size: 11.5px; }
  .mx-cam-count { font-size: 72px; }
}

/* ================= 后台 · 免付账号 ================= */
.adm-note { margin: 0 0 12px; font-size: 11.5px; line-height: 1.9; color: var(--ink-3); }
.usr-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.usr-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.usr-row:last-child { border-bottom: 0; }
.usr-m { flex: 1; min-width: 0; }
.usr-m b { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); font-weight: 500; }
.usr-m em { display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.usr-tag {
  font-style: normal; font-size: 10px; letter-spacing: 1px; color: #3f7a46;
  background: #e8f2e6; border: 1px solid #cde0ca; border-radius: 4px; padding: 1px 5px;
}
.usr-free { flex: 0 0 auto; }
@media (max-width: 780px) {
  .usr-row { flex-wrap: wrap; }
  .usr-free { width: 100%; }
}

/* http 下的退路：不硬开网页相机，直接调系统相机 */
.mx-cam-fb {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: radial-gradient(circle at 50% 40%, #1b1815, #0b0a09 70%);
}
.mx-cam-fb-in { max-width: 320px; text-align: center; }
.mx-cam-fb-in b { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: 3px; color: #f0e6d2; }
.mx-cam-fb-in p { margin: 10px 0 18px; font-size: 12.5px; line-height: 1.9; color: #a89e8d; }
.mx-cam-fb-in .btn { display: inline-block; }

/* ============================================================
   门店合作 / 推广代理（#/agent）
   —— 前半是网站展示页，后半是后台「门店物料」打印稿
   ============================================================ */

/* ---------- 首屏 ---------- */
.ag-hero {
  position: relative; overflow: hidden; color: #f2ead9;
  background: radial-gradient(120% 100% at 78% 10%, #3a2419 0%, #1d1511 46%, #120e0b 100%);
  padding: 76px 24px 66px;
}
.ag-hero-bg { position: absolute; right: -140px; top: -180px; opacity: .9; pointer-events: none; }
.ag-hero-in { position: relative; max-width: 1080px; margin: 0 auto; }
.ag-hero .kicker {
  font-size: 11px; letter-spacing: 4px; color: var(--gold-2); opacity: .9; margin-bottom: 16px;
}
.ag-hero h1 { font-size: 40px; letter-spacing: 4px; line-height: 1.35; font-weight: 500; }
.ag-hero h1 em { font-style: normal; color: var(--gold-2); }
.ag-lead { max-width: 640px; margin-top: 18px; font-size: 14px; line-height: 2; color: #bfb3a0; }
.ag-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ag-hero-chips span {
  font-size: 11.5px; letter-spacing: 1px; color: #e8dcc4;
  border: 1px solid rgba(217, 182, 103, .35); border-radius: 999px; padding: 4px 13px;
}
.ag-hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.ag-hero-acts .btn-ghost { color: #e8dcc4; border-color: rgba(232, 220, 196, .35); }
.ag-hero-acts .btn-ghost:hover { border-color: var(--gold-2); color: #fff; }

/* ---------- 通用区块 ---------- */
.ag-page { padding-top: 8px; }
.ag-sec { margin-top: 54px; }
.ag-sec-lead { font-size: 13.5px; color: var(--ink-3); line-height: 2; max-width: 720px; margin: -4px 0 20px; }
.ag-fine { margin-top: 16px; font-size: 12px; color: var(--ink-3); line-height: 1.9; }

/* ---------- 三档合作 ---------- */
.ag-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ag-tier {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 26px 22px 22px; box-shadow: var(--shadow-sm);
}
.ag-tier.hot { border-color: #e2c99a; box-shadow: 0 12px 30px -18px rgba(176, 138, 62, .55); }
.ag-tier-tag {
  position: absolute; top: -11px; right: 18px; font-style: normal; font-size: 10.5px; letter-spacing: 1px;
  color: #6b4f18; background: linear-gradient(180deg, #f6e4bd, #ecd49c);
  border: 1px solid #e0c48d; border-radius: 999px; padding: 3px 11px;
}
.ag-tier-n { font-size: 18px; letter-spacing: 2px; }
.ag-tier-rate { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; }
.ag-tier-rate b { font-size: 38px; line-height: 1; color: var(--red); font-weight: 600; font-variant-numeric: tabular-nums; }
.ag-tier-rate span { font-size: 12px; color: var(--ink-3); }
.ag-tier p { font-size: 12.5px; color: var(--ink-3); line-height: 1.9; min-height: 46px; }
.ag-tier ul { list-style: none; padding: 14px 0 0; margin: 12px 0 0; border-top: 1px dashed var(--line); }
.ag-tier li { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); line-height: 2.1; }
.ag-tier li::before { content: ''; position: absolute; left: 2px; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* ---------- 门店里怎么摆 ---------- */
.ag-place { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 6px; }
.ag-place-c {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 16px; text-align: center; box-shadow: var(--shadow-sm);
}
.ag-place-c b { display: block; margin-top: 14px; font-size: 13.5px; }
.ag-place-c p { margin-top: 6px; font-size: 12px; color: var(--ink-3); line-height: 1.85; text-align: left; }
.ag-place-c em { display: block; margin-top: 10px; font-style: normal; font-size: 11px; color: var(--gold); letter-spacing: .5px; }
.ag-mini {
  height: 108px; margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: #faf7f0; border-radius: 8px; position: relative; overflow: hidden;
}
.ag-mini .serif { color: var(--red); }
/* 台卡：立起来的 A5 */
.ag-mini-card {
  width: 74px; height: 104px; flex-direction: column; gap: 5px;
  background: #fffdf8; border: 1px solid #e6dcc8; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
  border-radius: 3px; transform: translateY(4px);
}
.ag-mini-card .serif { font-size: 16px; }
.ag-mini-card i { display: block; width: 44px; height: 3px; background: #efe6d4; border-radius: 2px; }
.ag-mini-card i:last-child { width: 26px; }
/* 海报：竖长 */
.ag-mini-poster {
  width: 66px; height: 100px; background: linear-gradient(160deg, #fdf9ef, #f3e9d5);
  border: 1px solid #e6dcc8; border-radius: 2px;
}
.ag-mini-poster .serif { font-size: 11px; line-height: 1.6; letter-spacing: 1px; }
/* 圆贴 */
.ag-mini-disc {
  width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf8, #f4ead6);
  border: 1px solid #e6dcc8; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
}
.ag-mini-disc .serif { font-size: 22px; }
/* 名片 */
.ag-mini-name {
  width: 110px; height: 66px; background: #fffdf8; border: 1px solid #e6dcc8;
  border-radius: 3px; flex-direction: column; gap: 6px; transform: rotate(-4deg);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
}
.ag-mini-name .serif { font-size: 12px; letter-spacing: 2px; }
.ag-mini-name i { display: block; width: 52px; height: 13px; background: repeating-linear-gradient(90deg, #2b1a14 0 2px, transparent 2px 4px); opacity: .55; }
.ag-script {
  margin-top: 16px; padding: 18px 22px; border-radius: var(--r);
  background: linear-gradient(180deg, #fdf8ed, #fbf4e5); border: 1px solid #ecdfc4;
}
.ag-script b { font-size: 12px; letter-spacing: 1px; color: var(--gold); }
.ag-script p { margin: 8px 0 4px; font-family: var(--serif); font-size: 16px; line-height: 1.9; color: var(--ink); }
.ag-script span { font-size: 12px; color: var(--ink-3); }

/* ---------- 收益试算 ---------- */
.ag-calc {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm);
}
.ag-calc-f { padding: 22px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ag-calc-f label { display: flex; flex-direction: column; gap: 6px; }
.ag-calc-f label:first-child { grid-column: 1 / -1; }
.ag-calc-f span { font-size: 11.5px; color: var(--ink-3); letter-spacing: .5px; }
.ag-calc-f .hf-inp { padding: 10px 12px; }
.ag-calc-out {
  padding: 22px 24px; background: linear-gradient(160deg, #2a1d16, #1b1410); color: #f2ead9;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.ag-calc-out > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ag-calc-out span { font-size: 12px; color: #a99d8a; }
.ag-calc-out b { font-size: 28px; font-weight: 600; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.ag-calc-out em { font-style: normal; font-size: 11px; color: #8b8070; }

/* ---------- 步骤 ---------- */
.ag-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ag-steps > div { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 18px; }
.ag-steps i {
  display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--red-soft); color: var(--red); font-style: normal; font-size: 13px;
  border: 1px solid #f0d7d1;
}
.ag-steps b { display: block; margin: 10px 0 6px; font-size: 14px; }
.ag-steps p { font-size: 12.5px; color: var(--ink-3); line-height: 1.9; }

/* ---------- 申请表单 ---------- */
.ag-form-wrap { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; align-items: start; }
.ag-form { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); }
.ag-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ag-form label { display: flex; flex-direction: column; gap: 6px; }
.ag-form label > span { font-size: 12px; color: var(--ink-3); }
.ag-form .hf-inp { padding: 10px 12px; }
.ag-form-full { margin-bottom: 16px; }
.ag-form textarea.hf-inp { resize: vertical; line-height: 1.8; }
.ag-form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ag-form-foot em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ag-form-side { background: linear-gradient(180deg, #fdf9f0, #faf5ea); border: 1px solid #ece1cb; border-radius: var(--r); padding: 20px; }
.ag-form-side > b { font-size: 14px; }
.ag-form-side > p { margin: 6px 0 14px; font-size: 12px; color: var(--ink-3); line-height: 1.9; }
.ag-form-side label { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.ag-form-side label span { font-size: 11.5px; color: var(--ink-3); }
.ag-done { background: var(--paper); border: 1px solid #d8e6d6; border-radius: var(--r); padding: 30px 26px; text-align: center; }
.ag-done b { display: block; font-family: var(--serif); font-size: 19px; letter-spacing: 2px; color: var(--jade); }
.ag-done p { margin-top: 10px; font-size: 13px; color: var(--ink-2); line-height: 2; }
.ag-my { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.ag-my-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.ag-my-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; text-align: center; }
.ag-my-stats span { display: block; font-size: 10.5px; color: var(--ink-3); }
.ag-my-stats b { font-size: 15px; color: var(--red); font-variant-numeric: tabular-nums; }
.ag-my-tip { font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.ag-my-list { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.ag-my-list > div { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--ink-3); line-height: 1.9; }
.ag-my-list b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- FAQ ---------- */
.ag-faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
.ag-faq summary { cursor: pointer; font-size: 13.5px; list-style: none; }
.ag-faq summary::-webkit-details-marker { display: none; }
.ag-faq summary::before { content: '问'; margin-right: 10px; font-family: var(--serif); color: var(--gold); }
.ag-faq details[open] summary { color: var(--red); }
.ag-faq p { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 2; }

/* ---------- 首页合作条 ---------- */
.ag-band {
  border-radius: 18px; overflow: hidden; color: #f2ead9;
  background: radial-gradient(120% 140% at 84% 0%, #3a2419, #1c1511 58%, #14100d);
  border: 1px solid #3a2b22;
}
.ag-band-in { display: flex; gap: 30px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 30px 32px; }
.ag-band-k { font-size: 10.5px; letter-spacing: 3px; color: var(--gold-2); }
.ag-band h3 { margin: 8px 0 10px; font-size: 23px; letter-spacing: 2px; font-weight: 500; }
.ag-band p { max-width: 620px; font-size: 12.5px; line-height: 2; color: #b8ac99; }
.ag-band-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ag-band-chips span { font-size: 11px; color: #e5d9c1; border: 1px solid rgba(217, 182, 103, .3); border-radius: 999px; padding: 3px 11px; }
.ag-band-acts { display: flex; flex-direction: column; gap: 10px; min-width: 132px; }
.ag-band-ghost { color: #e8dcc4; border-color: rgba(232, 220, 196, .35); text-align: center; }
.ag-band-ghost:hover { border-color: var(--gold-2); color: #fff; }

/* ---------- 后台：门店列表 ---------- */
.ag-adm-list { display: flex; flex-direction: column; gap: 10px; }
.ag-adm {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fff;
}
.ag-adm.pending { background: #fffdf6; border-color: #ecdfc4; }
.ag-adm-m { flex: 1 1 220px; min-width: 180px; }
.ag-adm-m b { display: block; font-size: 13.5px; }
.ag-adm-m em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ag-code {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 1px;
  background: var(--gold-soft); color: #7a5a1c; border: 1px solid #ecdfc4; border-radius: 4px; padding: 1px 6px;
}
.ag-adm-s { display: flex; gap: 14px; flex-wrap: wrap; }
.ag-adm-s span { font-size: 12px; font-variant-numeric: tabular-nums; }
.ag-adm-s i { display: block; font-style: normal; font-size: 10px; color: var(--ink-3); }
.ag-adm-s .due b, .ag-adm-s .due { color: var(--red); }
.ag-adm-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-rate { display: inline-flex; align-items: center; gap: 3px; }
.ag-rate .hf-inp { width: 56px; padding: 6px 8px; text-align: right; }
.ag-rate i { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ag-adm-off { font-size: 11.5px; color: var(--ink-3); padding: 4px 2px; }

/* ============================================================
   门店物料打印稿（A5 台卡 / A3 海报 / 10cm 圆贴）
   —— 用 mm + em，屏幕按 --s 缩放预览，打印时 --s:1 出实际尺寸
   ============================================================ */
.ag-mask {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(14, 11, 9, .76); opacity: 0; pointer-events: none; transition: opacity .2s; padding: 18px;
  backdrop-filter: blur(3px);
}
.ag-mask.on { opacity: 1; pointer-events: auto; }
body.ag-lock { overflow: hidden; }
.ag-kit {
  width: min(920px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column;
  background: #f6f2e9; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg);
}
.ag-kit-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line);
}
.ag-kit-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-kit-tabs button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 13px;
  font-size: 12px; cursor: pointer; color: var(--ink-2);
}
.ag-kit-tabs button.on { background: var(--red); border-color: var(--red); color: #fff; }
.ag-kit-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 0 4px; }
.ag-kit-stage {
  flex: 1; overflow: auto; padding: 26px; display: flex; justify-content: center; align-items: flex-start;
  background: repeating-linear-gradient(45deg, #efe9dd 0 8px, #f2ede2 8px 16px);
}
.ag-kit-tip {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; background: #fff;
  border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); line-height: 1.9;
}
.ag-kit-tip b { flex: 0 0 auto; color: var(--gold); letter-spacing: 1px; }

.ag-sheet {
  --s: .62;
  flex: 0 0 auto; background: #fffdf8; color: #241b15; position: relative;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
  transform: scale(var(--s)); transform-origin: top center;
  font-size: 3.5mm; line-height: 1.6;
}
.ag-sheet.a5 { width: 148mm; height: 210mm; }
.ag-sheet.a3 { width: 297mm; height: 420mm; --s: .38; font-size: 5.2mm; }
.ag-sheet.disc { width: 100mm; height: 100mm; border-radius: 50%; --s: .72; font-size: 3.2mm; }
/* 预览时的占位高度：缩放后仍占位，避免工具栏跳动 */
.ag-sheet.a5 { margin-bottom: calc(210mm * (.62 - 1)); }
.ag-sheet.a3 { margin-bottom: calc(420mm * (.38 - 1)); }
.ag-sheet.disc { margin-bottom: calc(100mm * (.72 - 1)); }

.ag-sheet-in { height: 100%; display: flex; flex-direction: column; padding: 7% 8%; }
.ag-sheet-top { display: flex; align-items: center; gap: 2.4mm; padding-bottom: 4mm; border-bottom: .3mm solid #e8dcc4; }
.ag-seal {
  width: 9mm; height: 9mm; display: inline-flex; align-items: center; justify-content: center;
  background: #8f2118; color: #f7edd8; border-radius: 1.4mm; font-size: 5.4mm; line-height: 1;
}
.ag-shop { font-size: 3.4mm; letter-spacing: .8mm; color: #6b5b48; }
.ag-h { margin-top: 12%; font-size: 2.9em; line-height: 1.42; letter-spacing: .6mm; font-weight: 500; color: #23180f; }
.ag-sub { margin-top: 4mm; font-size: 1.05em; line-height: 1.95; color: #7a6a56; letter-spacing: .3mm; }
.ag-qr { margin-top: auto; display: flex; align-items: center; gap: 5mm; padding: 5mm; border: .3mm solid #e6d9bf; border-radius: 2.6mm; background: #fff; }
.ag-qr-in { width: 34mm; height: 34mm; flex: 0 0 auto; }
.ag-qr-side b { display: block; font-size: 1.15em; letter-spacing: .4mm; }
.ag-qr-side span { display: block; margin-top: 1.2mm; font-size: .88em; color: #7a6a56; }
.ag-qr-side em {
  display: inline-block; margin-top: 3mm; font-style: normal; font-size: .8em; letter-spacing: .5mm;
  color: #7a5a1c; border: .25mm dashed #d9c79f; border-radius: 1mm; padding: .6mm 2mm;
}
.ag-sheet-foot {
  margin-top: 4mm; padding-top: 3mm; border-top: .3mm solid #efe4cd;
  font-size: .8em; letter-spacing: .5mm; color: #8a7a64;
}
.ag-sheet-foot span { display: block; margin-top: 1mm; font-size: .92em; color: #a4977f; letter-spacing: .2mm; }

/* A3 海报：标题更大，二维码靠下居中 */
.ag-sheet.a3 .ag-sheet-in { padding: 9% 10%; }
.ag-sheet.a3 .ag-h { margin-top: 22%; font-size: 3.4em; }
.ag-sheet.a3 .ag-sub { font-size: 1.15em; }
.ag-sheet.a3 .ag-qr { margin-top: 14%; padding: 7mm; gap: 9mm; }
.ag-sheet.a3 .ag-qr-in { width: 58mm; height: 58mm; }
.ag-sheet.a3 .ag-seal { width: 14mm; height: 14mm; font-size: 8mm; }
.ag-sheet.a3 .ag-shop { font-size: 1.05em; }

/* 圆贴：只留徽记 + 二维码 */
.ag-sheet.disc .ag-sheet-in { align-items: center; justify-content: center; text-align: center; padding: 12%; }
.ag-sheet.disc .ag-sheet-top { border: 0; padding: 0; justify-content: center; }
.ag-sheet.disc .ag-shop { display: none; }
.ag-sheet.disc .ag-seal { width: 11mm; height: 11mm; font-size: 6.4mm; }
.ag-sheet.disc .ag-h { margin-top: 3mm; font-size: 1.55em; letter-spacing: .3mm; }
.ag-sheet.disc .ag-sub { margin-top: 1.5mm; font-size: .82em; }
.ag-sheet.disc .ag-qr { margin-top: 4mm; padding: 3mm; border: 0; }
.ag-sheet.disc .ag-qr-in { width: 40mm; height: 40mm; }
.ag-sheet.disc .ag-qr-side { display: none; }
.ag-sheet.disc .ag-sheet-foot { border: 0; margin-top: 1mm; padding: 0; font-size: .72em; }
.ag-sheet.disc .ag-sheet-foot span { display: none; }

/* ---------- 打印：只留物料，按实际尺寸出纸 ---------- */
@media print {
  html, body { background: #fff !important; }
  body > *:not(#agKit) { display: none !important; }
  body.ag-lock { overflow: visible !important; }
  .ag-mask {
    position: static !important; display: block !important; padding: 0 !important;
    background: none !important; opacity: 1 !important; backdrop-filter: none !important;
  }
  .ag-kit { width: auto !important; max-height: none !important; box-shadow: none !important; border-radius: 0 !important; background: #fff !important; overflow: visible !important; }
  .ag-kit-bar, .ag-kit-tip { display: none !important; }
  .ag-kit-stage { display: block !important; padding: 0 !important; background: none !important; overflow: visible !important; }
  .ag-sheet { --s: 1 !important; transform: none !important; box-shadow: none !important; margin: 0 !important; }
  .ag-sheet.a5, .ag-sheet.a3, .ag-sheet.disc { width: auto; height: auto; }
  .ag-sheet.a5 { width: 148mm; height: 210mm; }
  .ag-sheet.a3 { width: 297mm; height: 420mm; }
  .ag-sheet.disc { width: 100mm; height: 100mm; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 780px) {
  .ag-hero { padding: 52px 18px 46px; }
  .ag-hero h1 { font-size: 27px; letter-spacing: 2px; }
  .ag-lead { font-size: 13px; }
  .ag-tiers { grid-template-columns: 1fr; }
  .ag-tier p { min-height: 0; }
  .ag-place { grid-template-columns: 1fr 1fr; }
  .ag-steps { grid-template-columns: 1fr 1fr; }
  .ag-calc { grid-template-columns: 1fr; }
  .ag-calc-f { grid-template-columns: 1fr; }
  .ag-calc-f label:first-child { grid-column: auto; }
  .ag-form-wrap { grid-template-columns: 1fr; }
  .ag-form-row { grid-template-columns: 1fr; }
  .ag-band-in { padding: 24px 20px; }
  .ag-band h3 { font-size: 19px; }
  .ag-band-acts { flex-direction: row; width: 100%; }
  .ag-band-acts .btn { flex: 1; }
  .ag-kit-stage { padding: 14px 8px; }
  .ag-sheet.a5 { --s: .5; margin-bottom: calc(210mm * (.5 - 1)); }
  .ag-sheet.a3 { --s: .3; margin-bottom: calc(420mm * (.3 - 1)); }
  .ag-sheet.disc { --s: .68; margin-bottom: calc(100mm * (.68 - 1)); }
  .ag-kit-bar { padding: 10px 12px; }
  .ag-kit-acts { margin-left: 0; width: 100%; }
  .ag-kit-acts .btn { flex: 1; }
  .ag-adm-s { gap: 10px; }
  .ag-adm-a { width: 100%; }
}

/* ---------- 物料：二维码指向（能不能拿去印） ---------- */
.ag-kit-origin {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: #fffdf6; border-bottom: 1px solid var(--line);
}
.ag-kit-origin > span { flex: 0 0 auto; font-size: 11.5px; color: var(--ink-3); letter-spacing: .5px; }
.ag-kit-origin .hf-inp {
  flex: 1 1 260px; min-width: 170px; padding: 7px 10px; font-size: 12px;
  font-family: ui-monospace, Menlo, monospace;
}
.ag-kit-origin em { flex: 1 1 100%; font-style: normal; font-size: 11.5px; line-height: 1.7; }
.ag-kit-origin em.bad { color: var(--red); }
.ag-kit-origin em.good { color: var(--jade); }

@media print {
  .ag-kit-origin { display: none !important; }
}

/* ---------- 后台 · 门店明细 / 结算弹层 ---------- */
.ag-dlg {
  width: min(700px, 100%); max-height: calc(100vh - 36px); display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg);
}
.ag-dlg-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.ag-dlg-h b { font-size: 15px; letter-spacing: .5px; }
.ag-dlg-h em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.ag-dlg-b { padding: 4px 18px 18px; overflow: auto; }
.ag-dlg-f { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); background: #fdfbf6; }
.ag-dlg-sec { margin-top: 16px; }
.ag-dlg-sec > h4 { font-size: 12px; letter-spacing: 1px; color: var(--gold); margin-bottom: 4px; }
.ag-dlg-sec > p.ag-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.85; margin-bottom: 8px; }
.ag-sd { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.ag-sd em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.ag-sd b { font-variant-numeric: tabular-nums; }
.ag-od { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.ag-od-m { flex: 1 1 auto; min-width: 0; }
.ag-od-m b { display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-od-m em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.ag-od-n { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; min-width: 62px; }
.ag-od-n i { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.ag-flag { flex: 0 0 auto; font-size: 10.5px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); }
.ag-flag.self { color: #8a5a12; background: #fdf3dd; border-color: #eeddb7; }
.ag-flag.bulk { color: var(--red); background: var(--red-soft); border-color: #f0d7d1; }
.ag-flag.void { color: var(--ink-3); background: #f2f0eb; }
.ag-rev { font-size: 10.5px; color: var(--red); border: 1px solid #f0d7d1; background: var(--red-soft); border-radius: 999px; padding: 1px 7px; }
.ag-settle-f { display: grid; gap: 12px; }
.ag-settle-f label { display: grid; gap: 6px; }
.ag-settle-f span { font-size: 11.5px; color: var(--ink-3); }
.ag-settle-f .hf-inp { padding: 9px 11px; }
.ag-settle-f em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }

@media print { .ag-dlg { display: none !important; } }
@media (max-width: 780px) {
  .ag-dlg-b { padding: 4px 14px 14px; }
  .ag-od { flex-wrap: wrap; }
  .ag-od-n { min-width: 0; }
}

/* ---------- 浅色卡片里的输入框 ----------
   .hf-inp 本来是深色首屏（hero）用的：浅色文字 + 半透明深底。
   后台卡片、门店合作表单、物料与结算弹层都是白底，
   不翻色的话输入的字几乎是白的，根本看不见。 */
.card .hf-inp,
.ag-form .hf-inp,
.ag-calc .hf-inp,
.ag-dlg .hf-inp,
.ag-kit .hf-inp {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  color-scheme: light;
}
.card .hf-inp:focus,
.ag-form .hf-inp:focus,
.ag-calc .hf-inp:focus,
.ag-dlg .hf-inp:focus,
.ag-kit .hf-inp:focus { border-color: var(--gold); background: #fff; }
.card .hf-sel option,
.ag-form .hf-sel option,
.ag-calc .hf-sel option,
.ag-dlg .hf-sel option,
.ag-kit .hf-sel option { background: #fff; color: var(--ink); }