/* 初名 · 设计系统
   基调：宣纸米白 + 墨色 + 朱砂，衬线标题，大量留白 */

:root {
  --paper: #f7f4ee;
  --paper-2: #fffdfa;
  --ink: #221e1a;
  --ink-2: #6b6157;
  --ink-3: #736a60;   /* 小字也要过 4.5:1：原来是 #a2988c，只有 2.6:1 */
  --line: #e9e2d6;
  --line-2: #f1ece3;
  --cinnabar: #b4472f;
  --cinnabar-2: #c9583c;
  --cinnabar-soft: #f6e7e2;
  --jade: #6e8068;
  --gold: #c9a961;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-1: 0 1px 2px rgba(34, 30, 26, 0.04), 0 10px 30px -18px rgba(34, 30, 26, 0.18);
  --shadow-2: 0 2px 6px rgba(34, 30, 26, 0.06), 0 20px 50px -24px rgba(34, 30, 26, 0.28);
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC", STSong, SimSun, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 宣纸底：两层极淡径向光晕，避免纯色发死 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(201, 169, 97, 0.10), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(180, 71, 47, 0.05), transparent 60%);
  z-index: 0;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 6px;
}
.seal {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--cinnabar-2), var(--cinnabar));
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px -4px rgba(180, 71, 47, 0.5);
  flex: none;
}
.brand-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.16em;
  font-weight: 600;
}
.brand-sub {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
}

/* ---------- 通用 ---------- */
main { flex: 1; padding: 0 22px 40px; }

.hero { padding: 26px 2px 22px; text-align: center; }
.hero h1 {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 0 12px;
}
.hero h1 em {
  font-style: normal;
  color: var(--cinnabar);
  position: relative;
  padding: 0 2px;
}
.hero p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
  letter-spacing: 0.02em;
}
.rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.2em;
  margin: 22px 0 16px;
}
.rule::before, .rule::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  flex: 1;
}

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: 22px 20px;
}
.card + .card { margin-top: 14px; }

label.field {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  margin: 0 0 10px;
}

/* 姓氏输入 */
.surname-input {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 14px;
  border-bottom: 1.5px solid var(--line);
  transition: border-color 0.25s;
}
.surname-input:focus-within { border-color: var(--cinnabar); }
.surname-input input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 128px;
  text-align: center;
  font-family: var(--serif);
  font-size: 40px;
  letter-spacing: 0.08em;
  color: var(--ink);
  padding: 0;
}
.surname-input input::placeholder { color: #ded6c9; }
.surname-input .hint { font-size: 12px; color: var(--ink-3); padding-bottom: 10px; }

/* 药丸选择组 */
.pills { display: flex; flex-wrap: wrap; gap: 9px; }
.pill {
  appearance: none;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
}
.pill:hover { border-color: #ddd3c4; }
.pill[aria-pressed="true"] {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(180, 71, 47, 0.7);
}
.pills.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pills.seg .pill { text-align: center; padding: 10px 0; }

.field-gap { height: 20px; }

/* 日期 */
input[type="date"] {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  background: #fff;
  outline: 0;
}
input[type="date"]:focus { border-color: var(--cinnabar); }

/* 主按钮 */
.btn {
  appearance: none;
  width: 100%;
  border: 0;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.14em;
  padding: 16px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s;
}
.btn-primary {
  background: linear-gradient(160deg, var(--cinnabar-2), var(--cinnabar));
  color: #fff;
  font-weight: 500;
  box-shadow: 0 10px 26px -12px rgba(180, 71, 47, 0.85);
}
.btn-primary:active { transform: translateY(1px) scale(0.995); }
.btn-primary[disabled] { opacity: 0.55; box-shadow: none; cursor: default; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
}

.foot-note {
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 18px;
  letter-spacing: 0.06em;
}

/* ---------- 名字卡 ---------- */
.name-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 20px 22px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.name-card + .name-card { margin-top: 14px; }
.name-card::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--cinnabar-2), rgba(180, 71, 47, 0.15));
}
.name-card.top::after {
  content: "首选";
  position: absolute;
  top: 14px; right: 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
  border: 1px solid rgba(201, 169, 97, 0.5);
  border-radius: 999px;
  padding: 2px 9px;
}
.name-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-bottom: 4px;
}
.name-main {
  font-family: var(--serif);
  font-size: 40px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  font-weight: 600;
  line-height: 1.2;
}
.name-given {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--cinnabar);
  border: 1px solid var(--cinnabar-soft);
  background: var(--cinnabar-soft);
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: 0.1em;
}
.name-pinyin {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: 0.22em;
  margin-bottom: 14px;
  font-style: italic;
}
.name-meaning {
  text-align: center;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.75;
  padding: 0 4px;
}
.name-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.name-meta .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: 26px;
}
.tag {
  font-size: 11.5px;
  color: var(--ink-2);
  background: #fbf8f3;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px 11px;
  letter-spacing: 0.05em;
}
.tag.gold { color: #8a5f28; border-color: rgba(201, 169, 97, 0.35); background: rgba(201, 169, 97, 0.07); }

/* 评分环 */
.score {
  position: relative;
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
}
.score svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score circle { fill: none; stroke-width: 3; }
.score .bg { stroke: var(--line-2); }
.score .fg { stroke: var(--cinnabar); stroke-linecap: round; }
.score b { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--cinnabar); }
.score b i { font-style: normal; font-size: 10px; font-weight: 500; margin-left: 1px; opacity: .62; }

/* ---------- 支付抽屉 ---------- */
.sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(34, 30, 26, 0.42);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.sheet-wrap.open { opacity: 1; pointer-events: auto; }
.sheet {
  width: 100%;
  max-width: 480px;
  background: var(--paper-2);
  border-radius: 24px 24px 0 0;
  padding: 26px 22px calc(26px + env(safe-area-inset-bottom));
  transform: translateY(24px);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.sheet-wrap.open .sheet { transform: translateY(0); }
.sheet h3 {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.1em;
  margin: 0 0 4px;
  text-align: center;
}
.sheet .sub { text-align: center; font-size: 12.5px; color: var(--ink-3); margin-bottom: 20px; }
.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 14px;
}
.pay-row:last-of-type { border-bottom: 0; }
.pay-row .k { color: var(--ink-2); white-space: nowrap; flex: none; }
/* 订单号是 CN + 13 位时间戳 + 8 位随机，一长串：让它自己断行，别把左边的标签挤成竖排 */
.pay-row .v { color: var(--ink); font-weight: 500; min-width: 0; word-break: break-all; text-align: right; }
.pay-row .v.big { font-family: var(--serif); font-size: 20px; color: var(--cinnabar); }
.pay-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--cinnabar);
  border-radius: var(--r-md);
  margin: 16px 0 18px;
  background: var(--cinnabar-soft);
}
.pay-method .dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cinnabar);
  display: grid; place-items: center;
  color: #fff; font-size: 11px; flex: none;
}
.pay-method .t { font-size: 14px; font-weight: 500; }
.pay-method .d { font-size: 11.5px; color: var(--ink-3); }
.demo-tip {
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 12px;
  line-height: 1.6;
}

/* ---------- 报告 ---------- */
.report-head {
  text-align: center;
  padding: 8px 0 6px;
}
.report-head .rn {
  font-family: var(--serif);
  font-size: 34px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  font-weight: 600;
}
.report-head .rp { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.22em; font-style: italic; }
.report-head .report-total{margin-top:10px;font-size:12.5px;letter-spacing:.14em;color:var(--ink-3)}
.report-head .report-total b{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--seal,#a33a2a);
  margin:0 2px;font-variant-numeric:tabular-nums}
.report-head .report-total em{font-style:normal;color:var(--ink-3)}

/* 分项评分：总分的四个来源，五行契合占一半 */
.ns-parts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 14px;margin:12px 0 0;
  padding-top:11px;border-top:1px dashed rgba(120,90,60,.16)}
.ns-part{min-width:0}
.ns-part .ns-k{display:block;font-size:11px;letter-spacing:.06em;color:var(--ink-3,#7a7268);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ns-part .ns-v{display:block;font-size:13px;color:var(--ink-1,#2c2723);font-variant-numeric:tabular-nums}
.ns-part .ns-v em{font-style:normal;font-size:11px;color:var(--ink-3,#7a7268)}
.ns-part .ns-b{display:block;height:4px;border-radius:99px;background:rgba(120,90,60,.09);margin-top:5px;overflow:hidden}
.ns-part .ns-b i{display:block;height:100%;border-radius:99px;background:var(--seal,#a33a2a)}
.ns-part.key .ns-b i{background:#3f7f5a}
@media (max-width:520px){
  .ns-parts{grid-template-columns:repeat(2,1fr)}
  /* 窄屏把长标题断在逗号处，别把「走得远」劈成两行 */
  .hero h1 em{display:block}
}
.name-switch {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0 18px;
}
.sec { padding: 16px 0; border-top: 1px dashed var(--line); }
.sec:first-of-type { border-top: 0; }
.sec h4 {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.16em;
  margin: 0 0 9px;
  color: var(--cinnabar);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sec h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.sec p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-2); }
.quote {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
  background: #fbf8f3;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.quote .src { display: block; font-size: 12px; color: var(--ink-3); margin-top: 6px; font-family: var(--sans); }

/* ---------- 杂项 ---------- */
.stack-actions { display: flex; gap: 10px; margin-top: 18px; }
.stack-actions .btn { flex: 1; }

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 0;
}
.spinner {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--cinnabar);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading .t { font-family: var(--serif); font-size: 15px; letter-spacing: 0.14em; color: var(--ink-2); }
.loading .s { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 10px);
  background: rgba(34, 30, 26, 0.9);
  color: #fff;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 80;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.hidden { display: none !important; }
.fade-in { animation: fade 0.45s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================
   桌面端（≥900px）
   手机端是"一栏卡片流"，桌面端改成"宽幅 + 多栏网格"
   ========================================================== */

/* ---- 结果网格 ---- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.name-card + .name-card { margin-top: 0; }

/* ---- 被锁的名字格 ---- */
.locked-tile {
  position: relative;
  border: 1px dashed #ddcfc0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fffdfa, #fbf7f0);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 190px;
  cursor: pointer;
  transition: border-color .25s, transform .2s;
}
.locked-tile:hover { border-color: var(--cinnabar); transform: translateY(-2px); }
.locked-tile .blur-name {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--ink-3);
  filter: blur(7px);
  user-select: none;
}
.locked-tile .lock-hint {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: .14em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- 首页特性条 ---- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 26px;
}
.feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: rgba(255, 253, 250, .7);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
.feature .ic {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--cinnabar);
  border: 1px solid var(--cinnabar-soft);
  background: var(--cinnabar-soft);
  border-radius: 7px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  flex: none;
}
.feature b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; letter-spacing: .04em; }
.feature span { font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }

/* ---- 可用性查询（GitHub / 域名） ---- */
.occupy{margin-top:10px}
.occupy-btn{width:100%;font-size:13px;padding:10px}
.occupy-loading{margin:0;font-size:12.5px;color:var(--ink-3,#7a7268)}
.occupy-box{border:1px solid rgba(120,90,60,.16);border-radius:12px;overflow:hidden;background:rgba(255,255,255,.55)}
.occupy-head{padding:8px 12px;font-size:12px;letter-spacing:.06em;color:var(--ink-3,#7a7268);
  background:rgba(120,90,60,.05);border-bottom:1px solid rgba(120,90,60,.1)}
.occupy-row{display:flex;flex-direction:column;gap:2px;padding:8px 12px;
  border-bottom:1px solid rgba(120,90,60,.08);font-size:12.5px}
.occupy-row:last-of-type{border-bottom:none}
.occupy-k{font-variant-numeric:tabular-nums;color:var(--ink-1,#2c2723);letter-spacing:.02em}
.occupy-v{color:var(--ink-2,#4a443c);line-height:1.7;overflow-wrap:anywhere}
.occupy-row.ok .occupy-k{color:#3f7f5a}
.occupy-row.bad .occupy-k{color:#b8442f}
.occupy-note{margin:0;padding:8px 12px;font-size:11.5px;line-height:1.8;
  color:var(--ink-3,#7a7268);border-top:1px dashed rgba(120,90,60,.18)}

/* ---- 内容层（给搜索引擎与生成式引擎看的正文） ---- */
.seo-intro{max-width:820px;margin:8px auto 0;padding:26px 22px 6px;border-top:1px solid var(--line);
  color:var(--ink-2)}
.seo-intro h2{font-family:var(--serif);font-size:19px;margin:0 0 10px;color:var(--ink-1);letter-spacing:.04em}
.seo-intro h3{font-size:14.5px;margin:20px 0 6px;color:var(--ink-1)}
.seo-intro p{font-size:14px;line-height:1.95;margin:0 0 8px}
.seo-intro b{color:var(--seal);font-weight:600}
/* 正文里的内链：默认的蓝色下划线在这张纸上很突兀，统一走印泥色 */
.seo-intro a{color:var(--seal)}
.seo-links{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.seo-links a{display:inline-block;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:#fbf8f3;color:var(--ink-2);text-decoration:none;font-size:13px}
.seo-links a:hover{border-color:rgba(163,58,42,.4);color:var(--seal)}

/* ---- 页脚 ---- */
.site-footer {
  padding: 30px 22px 34px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .06em;
  line-height: 1.9;
}
.site-footer a { color: var(--ink-3); text-decoration: none; }

@media (min-width: 900px) {
  body { font-size: 15.5px; }
  .app { max-width: 1160px; }

  .topbar { padding: 24px 44px 10px; }
  .seal { width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
  .brand-name { font-size: 19px; letter-spacing: .2em; }
  .brand-sub { font-size: 12px; }

  main { padding: 0 44px 56px; }

  /* Hero：桌面端更大更安静 */
  .hero { padding: 60px 0 42px; }
  .hero h1 { font-size: 52px; line-height: 1.25; letter-spacing: .04em; margin-bottom: 18px; }
  .hero p { font-size: 16.5px; letter-spacing: .04em; }

  /* 表单卡：两栏 */
  .card { padding: 36px 40px; }
  .card + .card { margin-top: 20px; }
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 44px;
  }
  .form-grid .span-2 { grid-column: 1 / -1; }
  label.field { font-size: 12.5px; margin-bottom: 12px; }
  .surname-input { justify-content: flex-start; padding: 2px 0 12px; max-width: 340px; }
  .surname-input input { width: 150px; font-size: 46px; text-align: left; }
  .surname-input .hint { padding-bottom: 12px; }
  .field-gap { display: none; }
  input[type="date"] { max-width: 300px; }

  .btn-primary { font-size: 16.5px; padding: 17px; }
  #go { max-width: 420px; margin: 34px auto 0 !important; display: block; }
  .foot-note { font-size: 12.5px; margin-top: 24px; }

  .feature-row { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
  .feature { padding: 20px 22px; }

  /* 结果：三列 */
  .rule { margin: 34px 0 26px; font-size: 12px; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .name-card { padding: 30px 24px 28px; }
  .name-main { font-size: 38px; }
  .locked-tile { min-height: 270px; }
  .locked-tile .blur-name { font-size: 36px; }

  .stack-actions { justify-content: center; margin-top: 26px; }
  .stack-actions .btn { flex: 0 0 240px; }

  /* 支付：居中弹窗而不是底部抽屉 */
  .sheet-wrap { align-items: center; }
  .sheet { border-radius: 22px; max-width: 430px; padding: 34px 34px 30px; transform: translateY(12px) scale(.98); }
  .sheet-wrap.open .sheet { transform: translateY(0) scale(1); }

  /* 报告：左侧名字栏 + 右侧正文 */
  .report-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    margin-top: 20px;
  }
  .name-rail {
    position: sticky;
    top: 24px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    box-shadow: var(--shadow-1);
  }
  .name-rail .rail-title {
    font-size: 11.5px; color: var(--ink-3); letter-spacing: .16em;
    padding: 4px 8px 12px; display: block;
  }
  .name-rail button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left; border: 0; background: transparent;
    font-family: var(--serif); font-size: 17px; letter-spacing: .12em;
    color: var(--ink-2); padding: 11px 12px; border-radius: 10px; cursor: pointer;
    transition: background .2s, color .2s;
  }
  .name-rail button:hover { background: #fbf8f3; }
  .name-rail button[aria-current="true"] { background: var(--cinnabar-soft); color: var(--cinnabar); }
  .name-rail button small { font-family: var(--sans); font-size: 11px; color: var(--ink-3); letter-spacing: 0; }
  .name-switch { display: none; }
  .report-head { text-align: left; padding: 0 0 4px; }
  .report-head .rn { font-size: 44px; }
  .report-panel { padding: 40px 44px; }
  .report-panel .sec p { font-size: 15px; line-height: 1.95; }
  .report-panel .quote { font-size: 16px; }
}

/* ---------- 八字排盘 ---------- */
.mode-switch{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 18px;padding:5px;
  background:var(--paper-2,rgba(0,0,0,.03));border-radius:999px;width:fit-content}
.mode-btn{border:0;background:transparent;padding:9px 20px;border-radius:999px;cursor:pointer;
  font-size:14.5px;color:var(--ink-3,#7a7268);font-family:inherit;transition:.2s}
.mode-btn[aria-pressed="true"]{background:var(--seal,#a33a2a);color:#fff;box-shadow:0 2px 10px rgba(163,58,42,.28)}

.bazi-card{max-width:820px;margin:0 auto 22px;padding:22px 24px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(252,249,244,.7));
  border:1px solid rgba(163,58,42,.14);box-shadow:0 6px 22px rgba(120,90,60,.06)}
.bazi-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px dashed rgba(120,90,60,.18);flex-wrap:wrap}
.bazi-title{font-size:15px;letter-spacing:.12em;color:var(--ink-3,#7a7268)}
.bazi-ganzhi{font-size:21px;letter-spacing:.18em;color:var(--ink-1,#2c2723);font-weight:600}
.bazi-loading{text-align:center;color:var(--ink-3,#7a7268);padding:18px;font-size:14px}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0}
.pillar{text-align:center;padding:12px 6px;border-radius:12px;background:rgba(163,58,42,.045)}
.pillar b{display:block;font-size:12px;font-weight:400;color:var(--ink-3,#7a7268);letter-spacing:.1em}
.pillar i{display:block;font-style:normal;font-size:20px;letter-spacing:.1em;margin:6px 0 4px;color:var(--ink-1,#2c2723)}
.pillar span{font-size:12px;color:var(--seal,#a33a2a)}
.wx-bars{display:flex;flex-direction:column;gap:7px;margin:14px 0 16px}
.wx-row{display:flex;align-items:center;gap:10px;font-size:13px}
.wx-name{width:20px;text-align:center;font-weight:600}
.wx-bar{flex:1;height:8px;border-radius:99px;background:rgba(120,90,60,.09);overflow:hidden}
.wx-bar i{display:block;height:100%;border-radius:99px}
.wx-pct{width:46px;text-align:right;color:var(--ink-3,#7a7268);font-variant-numeric:tabular-nums}
.wx-木{color:#3f7f5a}.wx-bar i.wx-木{background:#3f7f5a}
.wx-火{color:#b8442f}.wx-bar i.wx-火{background:#b8442f}
.wx-土{color:#a07a3c}.wx-bar i.wx-土{background:#a07a3c}
.wx-金{color:#8a7f52}.wx-bar i.wx-金{background:#8a7f52}
.wx-水{color:#3a6b8f}.wx-bar i.wx-水{background:#3a6b8f}
.xiyong{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.xi-chip{font-size:12.5px;padding:5px 11px;border-radius:999px;background:rgba(120,90,60,.08);
  color:var(--ink-2,#4a443c)}
.xi-chip.main{background:rgba(163,58,42,.1);color:var(--seal,#a33a2a);font-weight:600}
.xi-chip.warn{background:rgba(120,90,60,.14);color:#6b6257}
.bazi-note{margin:14px 0 0;font-size:12.5px;line-height:1.75;color:var(--ink-3,#7a7268)}
.wx-tag{font-variant-numeric:tabular-nums}
.wx-tag i{font-style:normal;font-size:11px;opacity:.82}
.tag.rel-good{color:#3f7f5a;border-color:rgba(63,127,90,.32);background:rgba(63,127,90,.07)}
.tag.rel-ok{color:#7a7268;border-color:rgba(120,90,60,.22);background:rgba(120,90,60,.05)}
.tag.rel-bad,.tag.rel-flat.warn{color:#b8442f;border-color:rgba(184,68,47,.35);background:rgba(184,68,47,.08)}
.wx-rel-line{margin:10px 0 0;padding:8px 10px;border-left:2px solid rgba(63,127,90,.4);
  background:rgba(63,127,90,.05);border-radius:0 8px 8px 0;
  font-size:12.5px;line-height:1.85;color:var(--ink-2,#4a443c)}
.wx-rel-line.warn{border-left-color:rgba(184,68,47,.45);background:rgba(184,68,47,.05)}
.wx-rel-head{color:var(--seal,#a33a2a);font-weight:600;margin-right:6px}
.wx-rel-line b{margin-left:8px;font-weight:600;color:var(--ink-1,#2c2723);font-variant-numeric:tabular-nums}
.xi-chip.rel-good{background:rgba(63,127,90,.1);color:#3f7f5a}
.xi-chip.rel-bad{background:rgba(184,68,47,.1);color:#b8442f}

/* ---------- 测名评分 ---------- */
.score-hero{text-align:center;max-width:820px;margin:0 auto 22px;padding:28px 24px}
.score-big{font-size:56px;line-height:1;font-weight:600;color:var(--seal,#a33a2a);
  font-variant-numeric:tabular-nums}
.score-big span{font-size:18px;margin-left:4px;color:var(--ink-3,#7a7268)}
.score-level{margin-top:8px;font-size:15px;letter-spacing:.18em;color:var(--ink-2,#4a443c)}
.score-chars{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.score-note{margin:14px 0 0;font-size:13.5px;line-height:1.8;color:var(--ink-2,#4a443c)}
.sec-title{font-size:15px;letter-spacing:.1em;margin:0 0 14px;color:var(--ink-1,#2c2723);font-weight:600}
.bar-row{display:flex;align-items:center;gap:12px;margin:14px 0 6px;font-size:14px}
.bar-label{width:88px;color:var(--ink-2,#4a443c)}
.bar{flex:1;height:9px;border-radius:99px;background:rgba(120,90,60,.09);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--seal,#a33a2a)}
.bar-num{width:56px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-1,#2c2723)}
.bar-num em{font-style:normal;font-size:12px;color:var(--ink-3,#7a7268)}
.sec-notes{margin:0 0 14px;padding-left:18px;font-size:13px;line-height:1.85;color:var(--ink-2,#4a443c)}
.sec-notes.good li::marker{color:#3f7f5a}
.sec-notes.warn li::marker{color:#b8442f}
select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(120,90,60,.2);
  background:rgba(255,255,255,.7);font-family:inherit;font-size:15px;color:var(--ink-1,#2c2723)}
.pro-table{margin:16px 0 0;padding-top:14px;border-top:1px dashed rgba(120,90,60,.18);display:flex;flex-direction:column;gap:9px}
.pro-row{display:flex;gap:12px;font-size:13px;line-height:1.7}
.pro-row b{flex:0 0 68px;font-weight:400;color:var(--ink-3,#7a7268);letter-spacing:.06em}
.pro-row span{flex:1;color:var(--ink-2,#4a443c)}
.pro-why{color:var(--ink-3,#7a7268);font-size:12px}

/* ---------- 乳名（小名） ---------- */
.ruming-box{max-width:960px;margin:6px auto 22px;padding:0 4px}
.ruming-head{display:flex;align-items:baseline;gap:10px;margin:30px 0 14px;flex-wrap:wrap}
.ruming-title{font-size:17px;font-weight:600;letter-spacing:.06em;color:var(--ink-1,#2c2723)}
.ruming-hint{font-size:12.5px;color:var(--ink-3,#7a7268);letter-spacing:.04em}
.ruming-loading{text-align:center;padding:26px;color:var(--ink-3,#7a7268);font-size:14px}
.ruming-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ruming-card{padding:20px 20px 18px;border-radius:16px;background:rgba(255,255,255,.72);
  border:1px solid rgba(120,90,60,.14);box-shadow:0 2px 12px rgba(120,90,60,.05)}
.ruming-top{display:flex;align-items:baseline;gap:10px}
.ruming-name{font-size:26px;letter-spacing:.14em;color:var(--ink-1,#2c2723)}
.ruming-py{font-size:13px;color:var(--ink-3,#7a7268);letter-spacing:.08em}
.ruming-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.ruming-yili{margin:2px 0 10px;padding:8px 10px;border-left:2px solid rgba(163,58,42,.35);
  background:rgba(163,58,42,.045);border-radius:0 8px 8px 0;
  font-size:12.5px;line-height:1.8;color:var(--ink-2,#4a443c)}
.ruming-why{font-size:14px;line-height:1.75;color:var(--ink-2,#4a443c)}
.ruming-sub{margin-top:6px;font-size:12.5px;color:var(--ink-3,#7a7268);line-height:1.7}
.ruming-warn{margin-top:8px;font-size:12.5px;color:#b8442f;line-height:1.7}
.ruming-note{margin-top:8px;font-size:12.5px;color:var(--ink-3,#7a7268);line-height:1.7}
.doctrine{margin-top:20px;border-top:1px dashed rgba(120,90,60,.2);padding-top:14px}
.doctrine summary{cursor:pointer;font-size:14px;color:var(--ink-2,#4a443c);letter-spacing:.04em}
.doctrine-body{margin-top:14px;display:flex;flex-direction:column;gap:16px}
.doc-layer-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.doc-layer-head b{font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(163,58,42,.08);
  color:var(--seal,#a33a2a);font-weight:600}
.doc-layer-head span{font-size:13.5px;color:var(--ink-1,#2c2723)}
.doc-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.doc-list li{font-size:13px;line-height:1.85;color:var(--ink-2,#4a443c)}
.doc-list li i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3,#7a7268);
  margin-top:2px;letter-spacing:.03em}
.doc-foot{margin:2px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3,#7a7268)}
@media (max-width:720px){.ruming-grid{grid-template-columns:1fr}}

/* ---------- 首页：三个名字，三套逻辑 ---------- */
.three-names{max-width:960px;margin:34px auto 6px;padding:0 4px}
.tn-h2{font-size:19px;letter-spacing:.08em;margin:0 0 8px;text-align:center;
  color:var(--ink-1,#2c2723);font-weight:600}
.tn-sub{text-align:center;font-size:13px;color:var(--ink-3,#7a7268);margin:0 0 18px}
.tn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tn-card{padding:20px 18px;border-radius:16px;background:rgba(255,255,255,.68);
  border:1px solid rgba(120,90,60,.14);display:flex;flex-direction:column;gap:8px}
.tn-card b{font-size:15px;color:var(--ink-1,#2c2723);font-weight:600}
.tn-tag{align-self:flex-start;font-size:12px;letter-spacing:.08em;padding:3px 10px;border-radius:999px;
  background:rgba(163,58,42,.08);color:var(--seal,#a33a2a)}
.tn-list{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:6px}
.tn-list li{font-size:13px;line-height:1.7;color:var(--ink-2,#4a443c)}
.tn-list em{font-style:normal;color:var(--seal,#a33a2a)}
.tn-doc{margin-top:6px;border-top:1px dashed rgba(120,90,60,.2);padding-top:10px}
.tn-doc summary{cursor:pointer;font-size:13px;color:var(--ink-2,#4a443c)}
.tn-doc .doctrine-body{margin-top:12px;display:flex;flex-direction:column;gap:14px}

/* 乳名区补充 */
.ruming-sum{font-size:13px;line-height:1.8;color:var(--ink-2,#4a443c);background:rgba(163,58,42,.05);
  border-left:3px solid rgba(163,58,42,.35);padding:10px 14px;border-radius:0 10px 10px 0;margin:0 0 14px}
.ruming-sum b{color:var(--seal,#a33a2a)}
.ruming-cite{font-size:12.5px;line-height:1.7;color:var(--ink-3,#7a7268);margin-top:6px}
@media (max-width:900px){.tn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tn-grid{grid-template-columns:1fr}.mode-btn{padding:8px 12px;font-size:13px}}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.cards.three{grid-template-columns:1fr}}
.ruming-foot{margin:14px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3,#7a7268)}

/* ---------- 八字怎么读（两栏对照） ---------- */
.reading-box{max-width:820px;margin:0 auto 22px;padding:0 4px}
.reading{background:rgba(255,255,255,.72);border:1px solid rgba(120,90,60,.14);
  border-radius:16px;padding:24px 24px 20px;box-shadow:0 2px 14px rgba(90,70,50,.04)}
.reading-loading{text-align:center;padding:24px;color:var(--ink-3,#7a7268);font-size:14px}
.reading-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.reading-head-bare{justify-content:flex-start}
/* 提交前的确认行：不勾选不提交，位置贴着按钮，不抢表单的注意力 */
.consent-row{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(120,90,60,.18)}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.8;color:var(--ink-2);cursor:pointer}
.consent input{margin:4px 0 0;flex:none;accent-color:var(--cinnabar);width:15px;height:15px}
.consent a{color:var(--cinnabar)}
.consent span{user-select:none}
.reading-head h3{margin:0;font-size:17px;font-weight:600;letter-spacing:.08em;color:var(--ink-1,#2c2723)}
.reading-bazi{font-size:13px;letter-spacing:.16em;color:var(--seal,#a33a2a)}
.reading-headline{margin:12px 0 18px;font-size:14.5px;line-height:1.85;color:var(--ink-1,#2c2723);
  padding:12px 14px;border-radius:10px;background:rgba(163,58,42,.05)}
.rd-sec{padding:16px 0;border-top:1px dashed rgba(120,90,60,.18)}
.rd-sec:first-of-type{border-top:0;padding-top:4px}
.rd-sec-head b{display:block;font-size:15px;color:var(--ink-1,#2c2723);letter-spacing:.06em;margin-bottom:4px}
.rd-sec-head span{font-size:12.5px;line-height:1.75;color:var(--ink-3,#7a7268)}
.rd-items{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.rd-item{border-radius:12px;border:1px solid rgba(120,90,60,.12);overflow:hidden;background:rgba(255,255,255,.6)}
.rd-term{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-1,#2c2723);
  padding:10px 14px;background:rgba(120,90,60,.05)}
.rd-term i{font-style:normal;font-weight:400;font-size:11.5px;letter-spacing:.08em;color:var(--ink-3,#7a7268);
  border:1px solid rgba(120,90,60,.2);border-radius:999px;padding:2px 9px}
.rd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.rd-col{padding:12px 14px;font-size:13px;line-height:1.8}
.rd-col b{display:block;font-size:11.5px;font-weight:500;letter-spacing:.1em;margin-bottom:6px;color:var(--ink-3,#7a7268)}
.rd-col p{margin:0;color:var(--ink-2,#4a443c)}
.rd-trad{background:rgba(120,90,60,.04);border-right:1px dashed rgba(120,90,60,.18)}
.rd-trad p{color:var(--ink-3,#7a7268)}
.rd-advice{margin-top:8px !important;padding-top:8px;border-top:1px dashed rgba(120,90,60,.18);
  color:var(--seal,#a33a2a) !important;font-size:12.5px}
.reading-note{margin:16px 0 0;padding-top:14px;border-top:1px dashed rgba(120,90,60,.18);
  font-size:12px;line-height:1.8;color:var(--ink-3,#7a7268)}
@media (max-width:620px){.rd-grid{grid-template-columns:1fr}.rd-trad{border-right:0;border-bottom:1px dashed rgba(120,90,60,.18)}}

/* ---------- 个人品牌 ---------- */
.brand-hero{max-width:820px;margin:0 auto 14px}
.brand-score{display:flex;align-items:center;gap:18px}
.brand-score-txt b{display:block;font-size:16px;color:var(--ink-1,#2c2723);letter-spacing:.04em}
.brand-score-txt span{font-size:12.5px;color:var(--ink-3,#7a7268)}
.br-notes{margin:14px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.br-notes li{font-size:13px;line-height:1.75;color:var(--ink-2,#4a443c)}
.br-notes.warn li::marker{color:#b8442f}
.br-h{margin:0 0 12px;font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--ink-1,#2c2723)}
.br-rows{display:flex;flex-direction:column;gap:10px}
.br-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:12px;background:rgba(120,90,60,.04);border:1px solid rgba(120,90,60,.1)}
.br-row-main b{display:block;font-size:14.5px;color:var(--ink-1,#2c2723);letter-spacing:.03em;word-break:break-all}
.br-row-main span{font-size:12px;color:var(--ink-3,#7a7268)}
.br-row-side{font-size:12px;line-height:1.7;color:var(--ink-2,#4a443c);text-align:right;max-width:52%}
.br-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;line-height:1.6}
.br-chip.ok{background:rgba(63,127,90,.1);color:#3f7f5a;border:1px solid rgba(63,127,90,.28)}
.br-chip.bad{background:rgba(184,68,47,.08);color:#b8442f;border:1px solid rgba(184,68,47,.26)}
.br-chip.mute{background:rgba(120,90,60,.07);color:var(--ink-3,#7a7268);border:1px solid rgba(120,90,60,.2)}
.br-empty{margin:0;font-size:13px;color:var(--ink-3,#7a7268)}
.br-foot{margin:12px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3,#7a7268)}
@media (max-width:620px){.br-row{flex-direction:column;gap:6px}.br-row-side{text-align:left;max-width:100%}}
.br-side-note{display:block;font-style:normal;font-size:11.5px;line-height:1.65;color:var(--ink-3,#7a7268);margin-top:5px}

/* ---------- 紫微斗数盘（4×4 传统盘面） ---------- */
.zw-scroll{overflow-x:auto;margin:16px 0 4px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.zw-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));
  gap:4px;min-width:620px;aspect-ratio:1;background:rgba(120,90,60,.07);padding:6px;border-radius:12px}
.zw-cell{background:rgba(255,255,255,.82);border:1px solid rgba(120,90,60,.14);border-radius:8px;
  padding:7px 6px 5px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.zw-cell.is-soul{border-color:rgba(163,58,42,.55);background:rgba(163,58,42,.05);
  box-shadow:inset 0 0 0 1px rgba(163,58,42,.16)}
.zw-cell.is-body:not(.is-soul){border-color:rgba(201,169,97,.75);background:rgba(201,169,97,.06)}
.zw-stars{display:flex;flex-wrap:wrap;gap:2px 4px}
.zw-star{white-space:nowrap}
.zw-star b{font-size:13px;color:var(--ink-1,#2c2723);letter-spacing:.02em}
.zw-b{font-style:normal;font-size:10px;color:var(--ink-3,#7a7268);margin-left:1px}
.zw-minors{display:flex;flex-wrap:wrap;gap:2px 5px;font-size:10px;color:var(--ink-3,#7a7268);line-height:1.5}
.zw-minor-star{white-space:nowrap}
.zw-m{display:inline-block;width:13px;height:13px;line-height:13px;text-align:center;border-radius:50%;
  font-style:normal;font-size:9px;color:#fff;margin-left:2px;vertical-align:1px}
.zw-m-禄{background:#3f7f5a}
.zw-m-权{background:#2f6ea8}
.zw-m-科{background:#a8873f}
.zw-m-忌{background:#b8442f}
.zw-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  padding-top:3px;border-top:1px dashed rgba(120,90,60,.16)}
.zw-foot b{font-size:11px;font-weight:600;color:var(--ink-1,#2c2723);letter-spacing:.04em}
.zw-cell.is-soul .zw-foot b{color:var(--seal,#a33a2a)}
.zw-cell.is-body .zw-foot b{color:#8a6d24}
.zw-foot span{font-size:10px;color:var(--ink-3,#7a7268)}
.zw-empty{font-size:10px;color:var(--ink-3,#7a7268);opacity:.75}
.zw-center{background:rgba(163,58,42,.045);border:1px solid rgba(163,58,42,.12);border-radius:10px;
  padding:14px 16px;display:flex;flex-direction:column;gap:5px;justify-content:center}
.zw-center-title{font-family:var(--serif);font-size:15px;letter-spacing:.34em;color:var(--seal,#a33a2a);
  text-align:center;margin-bottom:5px}
.zw-center-row{display:flex;gap:8px;font-size:11.5px;line-height:1.6}
.zw-center-row span{flex:0 0 62px;color:var(--ink-3,#7a7268)}
.zw-center-row b{flex:1;color:var(--ink-1,#2c2723);font-weight:500;word-break:break-all}
.zw-legend{margin-top:7px;padding-top:7px;border-top:1px dashed rgba(163,58,42,.18);
  font-size:10px;line-height:2;color:var(--ink-3,#7a7268);text-align:center}
.zw-dot{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:middle;margin-left:3px}
.zw-dot-soul{background:rgba(163,58,42,.5)}
.zw-dot-body{background:rgba(201,169,97,.85)}
.zw-hint{display:none;margin:0 0 6px;font-size:11px;color:var(--ink-3,#7a7268);text-align:center}
@media (max-width:700px){.zw-hint{display:block}}

/* ---------- 解锁：收款码 + 兑换码 ---------- */
.pay-qr{margin:14px 0 6px;padding:16px;border-radius:14px;background:rgba(255,255,255,.75);
  border:1px solid rgba(120,90,60,.14);text-align:center}
.pay-qr img{display:block;width:190px;height:190px;object-fit:contain;margin:0 auto 10px;
  border-radius:10px;background:#fff}
.pay-qr span{display:block;font-size:12.5px;line-height:1.75;color:var(--ink-2,#4a443c)}
.pay-qr b{color:var(--seal,#a33a2a);letter-spacing:.08em}
.redeem-box{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(120,90,60,.2);text-align:left}
.redeem-box .field{margin-bottom:8px}
.redeem-row{display:flex;gap:8px}
.redeem-row input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;font-size:15px;letter-spacing:.12em;
  border:1px solid rgba(120,90,60,.2);background:rgba(255,255,255,.8);color:var(--ink-1,#2c2723);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.redeem-row input:focus{outline:none;border-color:var(--seal,#a33a2a)}
.redeem-row .btn{flex:0 0 auto;width:auto;min-width:104px;padding:12px 22px;font-size:15px}
.redeem-note{margin:10px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3,#7a7268)}
@media (max-width:420px){.pay-qr img{width:160px;height:160px}}

/* ---- 收银区：通道切换 + 付款码 ---- */
.pay-online{margin:14px 0 6px}
.pay-tabs{display:flex;gap:8px;margin:0 0 12px}
.pay-tab{flex:1;padding:10px 8px;border:1px solid var(--line);border-radius:10px;background:#fbf8f3;
  color:var(--ink-2);font-size:13.5px;font-family:inherit;cursor:pointer}
.pay-tab.on{border-color:rgba(163,58,42,.45);background:rgba(163,58,42,.06);color:var(--seal);font-weight:600}
.pay-body{min-height:80px}
.pay-body .pay-qr{margin:0}
/* 二维码是 SVG：等比缩放到容器宽度，别用固定像素，窄屏才不会溢出 */
.pay-qr svg{display:block;width:200px;height:auto;margin:0 auto 10px;background:#fff;border-radius:8px}
.pay-jump{text-align:center;padding:6px 0 2px}
.pay-jump p{margin:0 0 12px;font-size:12.5px;line-height:1.8;color:var(--ink-2,#4a443c)}
.pay-jump .btn{width:100%}
.pay-jump-tip{margin:8px 0 0 !important;font-size:11.5px;color:var(--ink-3,#8a8279)}
@media (max-width:420px){.pay-qr svg{width:168px}}

/* ---------- 社交名：八字补益与对照诊断 ---------- */
.sx-bar{max-width:960px;margin:0 auto 14px}
.sx-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sx-bazi{font-size:15px;letter-spacing:.16em;color:var(--seal,#a33a2a)}
.sx-verdict{font-size:12.5px;color:var(--ink-3,#7a7268)}
.sx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sx-note{margin:12px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink-2,#4a443c)}
.sx-note b{color:var(--seal,#a33a2a);font-weight:600}
.sx-noxi{max-width:960px;margin:0 auto 14px}
.sx-noxi b{display:block;font-size:14.5px;color:var(--ink-1,#2c2723);margin-bottom:6px}
.sx-noxi p{margin:0;font-size:13px;line-height:1.85;color:var(--ink-2,#4a443c)}
/* 表单里的口径提示（不占满宽，跟在用途 pills 下面） */
.sx-hint{padding:12px 14px;border:1px dashed rgba(120,90,60,.28);border-radius:12px;
  background:rgba(120,90,60,.045)}
.sx-hint b{display:block;font-size:13.5px;color:var(--ink-1,#2c2723);margin-bottom:6px}
.sx-hint p{margin:0;font-size:12.5px;line-height:1.85;color:var(--ink-2,#4a443c)}
.sx-hint p b{display:inline;font-size:inherit;font-weight:600;color:var(--seal,#a33a2a);margin:0}
.sx-hint p + p{margin-top:6px}
.sx-hint a{color:var(--seal,#a33a2a);text-decoration:underline;text-underline-offset:2px}
.sx-hint .stack-actions{margin:10px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.sx-hint .btn{padding:9px 16px;font-size:13px;min-height:auto}
.sx-dx{max-width:960px;margin:0 auto 14px;border-left:3px solid rgba(163,58,42,.35)}
.sx-dx-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sx-dx-head b{font-size:15px;color:var(--ink-1,#2c2723)}
.sx-dx-score{font-size:13px;color:var(--seal,#a33a2a);letter-spacing:.06em}
.sx-dx-sum{margin:10px 0 0;font-size:13px;line-height:1.8;color:var(--ink-2,#4a443c)}
.sx-dx-warn{margin:8px 0 0;font-size:12.5px;line-height:1.75;color:#b8442f}
.sx-dx-tip{margin:10px 0 0;padding-top:10px;border-top:1px dashed rgba(120,90,60,.18);
  font-size:12.5px;line-height:1.8;color:var(--ink-3,#7a7268)}

/* 个人账号：昵称 / 账号 ID 的分工预览 */
.wx-preview{margin:8px 0 2px;border:1px dashed rgba(120,90,60,.22);border-radius:10px;
  padding:8px 10px;background:rgba(120,90,60,.04)}
.wx-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:12.5px;line-height:2;color:var(--ink-3,#7a7268)}
.wx-row + .wx-row{border-top:1px dashed rgba(120,90,60,.14)}
.wx-row b{font-size:13.5px;color:var(--ink-1,#2c2723);letter-spacing:.02em;
  word-break:break-all;text-align:right}

/* ---------- 付费交付：定名结论 · 四维对照 · 命名档案 ---------- */
.verdict{max-width:820px;margin:0 auto 22px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--shadow-1)}
.vd-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vd-title{font-family:var(--serif);font-size:19px;letter-spacing:.08em}
.vd-sub{font-size:12.5px;color:var(--ink-3)}
.vd-row{display:flex;gap:12px;padding:14px 0;border-top:1px dashed var(--line)}
.vd-row:first-of-type{border-top:0}
.vd-row.dim .vd-lock-line{margin:6px 0 0;font-size:12.5px;color:var(--ink-3)}
.vd-rank{font-family:var(--serif);font-size:12.5px;letter-spacing:.08em;color:var(--cinnabar);padding-top:3px}
.vd-body{flex:1;min-width:0}
.vd-name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vd-word{font-family:var(--serif);font-size:22px;letter-spacing:.1em}
.vd-word.masked{color:var(--ink-3);letter-spacing:.22em}
.vd-name em{font-style:normal;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
.vd-name b{font-family:var(--serif);font-size:16px;color:var(--cinnabar);font-weight:500}
.vd-name b i{font-style:normal;font-size:11px;color:var(--ink-3)}
.vd-open{margin-left:auto;font-size:12.5px;padding:7px 12px;
  border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-2);cursor:pointer}
.vd-open:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.vd-lines{margin:9px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.9;color:var(--ink-2)}
.vd-lines li{display:flex;gap:8px}
.vd-lines li b{flex:0 0 auto;color:var(--ink);font-weight:500}
.vd-lines li.weak b::after{content:"（四项里相对最低）";margin-left:6px;font-size:11.5px;color:var(--ink-3)}
.vd-lines li.weak{color:var(--ink-3)}
.vd-note{margin:12px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3)}

.matrix{max-width:960px;margin:0 auto 22px;padding:20px 24px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--shadow-1)}
.mx-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mx-title{font-family:var(--serif);font-size:19px;letter-spacing:.08em}
.mx-sub{font-size:12.5px;color:var(--ink-3)}
.mx-scroll{overflow-x:auto}
.mx-table{width:100%;border-collapse:collapse;font-size:13px}
.mx-table th{font-weight:500;font-size:12px;color:var(--ink-2);text-align:left;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.mx-table td{padding:10px;border-bottom:1px dashed var(--line);vertical-align:middle}
.mx-table tr:last-child td{border-bottom:0}
.mx-rank{font-family:var(--serif);font-size:12.5px;color:var(--ink-3)}
.mx-name{font-family:var(--serif);font-size:16px;letter-spacing:.06em;white-space:nowrap}
.mx-name em{display:block;font-style:normal;font-family:var(--sans);font-size:11px;
  color:var(--ink-3);letter-spacing:.02em;margin-top:2px}
tr.top .mx-name{color:var(--cinnabar)}
.mx-c{min-width:78px}
.mx-num{font-family:var(--serif);font-size:13.5px}
.mx-num em{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.mx-bar{display:block;height:4px;margin-top:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.mx-bar i{display:block;height:100%;background:var(--gold);border-radius:2px}
tr.top .mx-bar i{background:var(--cinnabar)}
.mx-total{font-family:var(--serif);font-size:17px}
.mx-dash{color:var(--ink-3)}
.mx-locked td{padding:12px 10px;text-align:center;font-size:12.5px;color:var(--ink-3);
  background:rgba(201,169,97,.07)}

.dossier{max-width:820px;margin:0 auto;padding:0 4px}
.ds-cover{padding:32px 22px 28px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper-2);box-shadow:var(--shadow-1);text-align:center}
.ds-brand{font-size:12.5px;letter-spacing:.3em;color:var(--cinnabar)}
.ds-cover h2{font-family:var(--serif);font-size:30px;letter-spacing:.12em;margin:14px 0 12px}
.ds-cover h2 span{display:block;margin-top:10px;font-size:13px;letter-spacing:.26em;color:var(--ink-3)}
.ds-cover-meta{display:flex;gap:8px 16px;justify-content:center;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.ds-sec{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.ds-sec h3{font-family:var(--serif);font-size:19px;letter-spacing:.08em;margin:0 0 14px}
.ds-note,.ds-empty,.ds-lock{margin:12px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3)}
.ds-lock{padding:11px 13px;border-radius:var(--r-sm);background:rgba(201,169,97,.08)}
.ds-entry{margin-bottom:14px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2);break-inside:avoid}
.ds-entry-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--line)}
.ds-rank{font-family:var(--serif);font-size:12.5px;color:var(--cinnabar)}
.ds-word{font-family:var(--serif);font-size:22px;letter-spacing:.1em}
.ds-pinyin{font-size:12.5px;color:var(--ink-3)}
.ds-total{margin-left:auto;font-family:var(--serif);font-size:16px;color:var(--cinnabar)}
.ds-total i{font-style:normal;font-size:11px;color:var(--ink-3)}
.ds-row{display:flex;gap:12px;padding:3px 0;font-size:13px;line-height:1.85}
.ds-row b{flex:0 0 54px;font-weight:500;color:var(--ink-2)}
.ds-row span{flex:1;color:var(--ink)}
.ds-tail p{font-size:13px;line-height:1.9;color:var(--ink-2);margin:0 0 10px}

@media print{
  body::before,.topbar,.mode-switch,.no-print,.sheet-wrap,.tip-card,.nudge-card{display:none!important}
  html,body{background:#fff}
  .app{max-width:none;padding:0}
  .verdict,.matrix,.ds-cover,.ds-entry{box-shadow:none}
  .ds-entry,.vd-row,.bazi-card,.mx-table tr{break-inside:avoid;page-break-inside:avoid}
  .ds-sec{break-inside:auto}
  .mx-scroll{overflow:visible}
  /* 打印一份东西带走时，导航、按钮、动画都不该出现，卡片也不该被切两页 */
  .stack-actions,.mode-bar{display:none!important}
  .ds-cover{break-after:page;page-break-after:always}
  .ds-sec h3{break-after:avoid;page-break-after:avoid}
  .ruming-card,.name-card,.nb,.dayun,.kit-card,.cmp-card,.doc-layer{break-inside:avoid;page-break-inside:avoid;box-shadow:none}
  .cards,.ruming-grid{display:block}
  .cards>*+*,.ruming-grid>*+*{margin-top:12px}
  .bazi-table-wrap{overflow:visible}
  .bazi-table{min-width:0}
  .bazi-table tr{break-inside:avoid}
  details.doctrine>.doctrine-body{display:block!important}
  .fade-in{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---------- 换一个字（微调） ---------- */
.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.card-actions .btn{flex:1 1 140px;font-size:14px;padding:11px}
/* 报告单独占一行；体检与手册是并列的两件小事，并排一行 */
.card-actions .report-btn{flex:1 1 100%}
.card-actions .tune-btn,.card-actions .kit-btn{flex:1 1 84px;font-size:13px;padding:9px 8px}
.tag.dup-low{color:var(--jade);border-color:rgba(110,128,104,.35)}
.tag.dup-mid{color:var(--gold);border-color:rgba(201,169,97,.45)}
.tag.dup-high{color:var(--cinnabar);border-color:rgba(180,71,47,.35)}

.tune-card{max-width:820px;margin:0 auto 22px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--shadow-1)}
.tune-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tune-title{font-family:var(--serif);font-size:19px;letter-spacing:.06em}
.tune-sub{font-size:12.5px;color:var(--ink-3)}
.tune-tabs{display:flex;gap:8px;margin:14px 0 10px}
.tune-note{margin:0 0 14px;font-size:12.5px;line-height:1.85;color:var(--ink-3)}
.tune-list{border-top:1px dashed var(--line)}
.tune-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px dashed var(--line)}
.tune-main{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.tune-word{font-family:var(--serif);font-size:20px;letter-spacing:.08em}
.tune-pinyin{font-size:12px;color:var(--ink-3)}
.tune-mid{flex:1 1 200px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tune-delta{font-size:12.5px;color:var(--ink-2)}
.tune-delta.up{color:var(--cinnabar)}
.tune-parts{font-size:11.5px;color:var(--ink-3)}
.tune-side{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tune-adopt{font-size:12.5px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink-2);cursor:pointer}
.tune-adopt:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.tune-adopt:disabled{border-color:var(--line-2);color:var(--ink-3);cursor:default}
.tune-empty{margin:0;padding:14px 0;font-size:13px;line-height:1.9;color:var(--ink-2)}
.tune-foot{margin:14px 0 0;font-size:12px;color:var(--ink-3)}

/* ---------- 名字体检：谐音与外号 ---------- */
.check-card{max-width:820px;margin:0 auto 22px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--shadow-1)}
.check-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.check-title{font-family:var(--serif);font-size:19px;letter-spacing:.08em}
.check-sub{font-size:12.5px;color:var(--ink-3)}
.check-list{margin:0;padding:0;list-style:none}
.check-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-top:1px dashed var(--line);font-size:13.5px;line-height:1.75}
.check-what{color:var(--ink)}
.check-list li.check-warn .check-what,.check-list li.check-warning .check-what{color:var(--cinnabar)}
.check-level{flex:0 0 auto;font-size:12px;color:var(--ink-3)}
.check-list li.check-warn .check-level{color:var(--cinnabar)}
.check-list li.check-warning .check-level{color:var(--gold)}
.check-ok{margin:0;padding:10px 0;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.check-foot{margin:12px 0 0;font-size:12px;line-height:1.85;color:var(--ink-3)}

/* ---------- 名字使用手册：拼音 · 邮箱 · 账号 ID · 域名 · 英文名 ---------- */
.kit-card{max-width:820px;margin:0 auto 22px;padding:22px 24px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--shadow-1)}
.kit-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.kit-title{font-family:var(--serif);font-size:19px;letter-spacing:.08em}
.kit-sub{font-size:12.5px;color:var(--ink-3)}
.kit-rows{border-top:1px dashed var(--line)}
.kit-row{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;
  padding:11px 0;border-bottom:1px dashed var(--line)}
.kit-form{flex:0 0 182px;font-family:var(--serif);font-size:18px;letter-spacing:.06em}
.kit-where{flex:0 0 250px;font-size:12.5px;line-height:1.7;color:var(--ink-3)}
.kit-note{flex:1 1 200px;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.kit-note b{display:inline-block;margin-left:6px;font-weight:400;font-size:11.5px;color:var(--gold)}
.kit-line{padding:11px 0;border-bottom:1px dashed var(--line)}
.kit-line-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kit-line-v{flex:1 1 auto;font-size:14px;letter-spacing:.02em;color:var(--ink)}
.kit-line-v i{margin-left:8px;font-style:normal;font-size:12px;color:var(--ink-3)}
.kit-check{flex:0 0 auto;padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink-2);font-size:12.5px;cursor:pointer}
.kit-check:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.kit-check:disabled{border-color:var(--line-2);color:var(--ink-3);cursor:default}
.kit-occupy-out:empty{display:none}
.kit-occupy-out .occupy-box{margin-top:10px}
.kit-chips{display:flex;gap:10px;flex-wrap:wrap}
.kit-chip{display:inline-flex;align-items:baseline;gap:2px;padding:9px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--paper);font-size:15px;letter-spacing:.04em}
.kit-chip i{font-style:normal;color:var(--cinnabar)}
.kit-traps{margin:0;padding-left:18px;font-size:13.5px;line-height:2;color:var(--ink-2)}
.kit-traps li::marker{color:var(--cinnabar)}
.kit-ok{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.kit-foot{margin:12px 0 0;font-size:12px;line-height:1.85;color:var(--ink-3)}
.kit-alt{margin:12px 0 0;padding:9px 12px;border-left:2px solid var(--gold);background:var(--paper);
  font-size:12.5px;line-height:1.85;color:var(--ink-2)}
.pay-wait{margin:14px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--paper);
  font-size:12.5px;line-height:1.8;color:var(--ink-3)}
.pay-none{margin:14px 0 0;padding:10px 12px;border-radius:var(--r-sm);
  border:1px dashed var(--line);font-size:12.5px;line-height:1.8;color:var(--ink-2)}
/* 等了两三分钟还没到账时出现：把订单号摆出来，并说清下一步，不留人干等 */
.pay-scope{margin:8px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink-3)}
/* 我取过的名：本机记录与召回那一行 */
.ord-recall{margin:14px 0 18px;padding:12px 14px;border-radius:var(--r-sm);background:var(--paper);
  border:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;line-height:1.7;color:var(--ink-2)}
.ord-recall b{font-weight:500;color:var(--ink-1)}
.ord-recall em{font-style:normal;color:var(--ink-3)}
.ord-recall > span{flex:1 1 320px;min-width:0}
/* 这里的按钮是行内小按钮：整站的 .btn 是通栏的，在一条提示里要收窄 */
.ord-recall .btn{width:auto;flex:none;padding:7px 14px;font-size:13px;letter-spacing:.08em;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink-1)}
.ord-recall .btn:first-of-type{margin-left:auto}
.ord-list{margin:0;padding:0;list-style:none}
.ord-list li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.ord-list li:last-child{border-bottom:0}
.ord-list .btn{width:auto;flex:none;padding:6px 14px;font-size:13px;letter-spacing:.08em;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink-1)}
.ord-what{color:var(--ink-1)}
.ord-when{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.ord-empty{font-size:13.5px;line-height:1.9;color:var(--ink-3)}
.ord-note{margin:10px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink-3)}
/* 登录那一行：头像 + 昵称 + 退出 */
.auth-row{display:flex;align-items:center;gap:12px;margin:4px 0 2px}
.auth-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper)}
.auth-name{font-size:15px;color:var(--ink-1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-row .btn{width:auto;flex:none;margin-left:auto;padding:7px 14px;font-size:13px;letter-spacing:.08em;
  border:1px solid var(--line);background:#fff;color:var(--ink-1);border-radius:var(--r-sm)}
a.btn{display:block;text-align:center;text-decoration:none}
.pay-late{margin:8px 0 0;padding:10px 12px;border-radius:var(--r-sm);
  background:rgba(201,169,97,.08);border:1px solid rgba(201,169,97,.28);
  font-size:12.5px;line-height:1.8;color:var(--ink-2)}
.pay-late b{font-weight:400;color:var(--ink-1);word-break:break-all}
.kit-traps li b{font-weight:400;color:var(--cinnabar)}
.kit-note-warn{display:block;margin-top:3px;font-style:normal;font-size:12px;color:var(--cinnabar);opacity:.9}
.kit-fix{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--ink-3)}

@media print{
  .kit-card{break-inside:avoid;box-shadow:none}
}

/* ---------- 解锁卡：把交付清单逐条摆出来 ---------- */
.unlock-card{max-width:640px;margin:22px auto 0;padding:26px 28px 22px;text-align:center;
  border:1px solid rgba(120,90,60,.22);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fffdfa,#fdf8f1);box-shadow:var(--shadow-1)}
.uc-head{display:flex;flex-direction:column;gap:5px;align-items:center;margin-bottom:18px}
.uc-title{font-family:var(--serif);font-size:20px;letter-spacing:.08em}
.uc-sub{font-size:12.5px;color:var(--ink-3)}
.uc-list{margin:0 0 20px;padding:0;list-style:none;text-align:left;
  border-top:1px solid rgba(120,90,60,.14)}
.uc-list li{display:flex;align-items:baseline;gap:10px;padding:11px 2px;
  border-bottom:1px solid rgba(120,90,60,.14)}
.uc-num{flex:0 0 32px;text-align:right;font-family:var(--serif);font-size:19px;
  line-height:1.25;color:var(--cinnabar)}
.uc-key{flex:0 0 104px;font-size:13.5px;color:var(--ink)}
.uc-val{flex:1 1 180px;font-size:12.5px;line-height:1.75;color:var(--ink-3)}
.uc-price{display:flex;align-items:baseline;justify-content:center;gap:10px;
  flex-wrap:wrap;margin-bottom:16px}
.uc-price .now{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--cinnabar)}
.uc-price .now span{font-size:17px}
.uc-price .was{font-size:13px;color:var(--ink-3);text-decoration:line-through}
.uc-per{flex:1 1 100%;font-size:12.5px;color:var(--ink-3)}
.unlock-card .btn-primary{display:block;width:100%;max-width:340px;margin:0 auto}
.uc-trial{display:block;margin:12px auto 0;padding:0;border:0;background:transparent;
  color:var(--cinnabar);font-size:13px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.uc-trial:hover{opacity:.78}
.uc-foot{margin:14px 0 0;font-size:12px;color:var(--ink-3)}

/* ---------- 提醒卡：用了不少之后提一次，不打断、不弹窗 ---------- */
.nudge-card{max-width:640px;margin:22px auto 0;padding:18px 22px 16px;
  border:1px solid var(--line);border-left:3px solid var(--cinnabar);border-radius:var(--r-md);
  background:linear-gradient(180deg,#fffdfa,#fbf7f0);box-shadow:var(--shadow-1)}
.nudge-t{margin:0 0 13px;font-size:13.5px;line-height:1.95;color:var(--ink-2);text-align:left}
.nudge-act{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.nudge-acc{margin:13px 0 0;font-size:12.5px;line-height:1.9;color:var(--ink-3);text-align:left}
.nudge-link{color:var(--cinnabar);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.nudge-link:hover{opacity:.78}

/* ---------- 随喜：不打眼，也不劝人（它出现在内容已经全给完之后） ---------- */
.tip-card{max-width:640px;margin:26px auto 0;padding:24px 28px 20px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fffdfa,#faf6ef);box-shadow:var(--shadow-1)}
.tip-head{display:flex;flex-direction:column;gap:5px;align-items:center;margin-bottom:14px}
.tip-title{font-family:var(--serif);font-size:20px;letter-spacing:.22em;text-indent:.22em;color:var(--cinnabar)}
.tip-sub{font-size:12.5px;color:var(--ink-3)}
.tip-note{margin:0 0 16px;font-size:13.5px;line-height:2;text-align:left;color:var(--ink-2)}
.tip-levels{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.tip-btn{min-width:116px}
.tip-btn:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.tip-foot{margin:14px 0 0;font-size:12px;line-height:1.9;color:var(--ink-3)}

/* 解锁卡里的「现在可读 / 解锁再加」两行 */
.uc-gap{margin:0 0 18px;padding:12px 14px;border-radius:var(--r-md);text-align:left;
  background:rgba(201,169,97,.09)}
.uc-gap-row{display:flex;align-items:baseline;gap:10px;padding:5px 0;flex-wrap:wrap}
.uc-gap-h{flex:0 0 62px;font-size:12.5px;letter-spacing:.04em}
.uc-gap-row.got .uc-gap-h{color:var(--jade)}
.uc-gap-row.plus .uc-gap-h{color:var(--cinnabar)}
.uc-gap-v{flex:1 1 240px;font-size:12.5px;line-height:1.75;color:var(--ink-2)}
.uc-gap-row.got .uc-gap-v{color:var(--ink-3)}

/* ---------- 定名结论：第 4 名起的紧凑行 ---------- */
.vd-rest{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.vd-rest-head{margin-bottom:6px;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
.vd-mini{display:flex;align-items:baseline;gap:6px 10px;flex-wrap:wrap;
  padding:9px 0;border-bottom:1px dashed var(--line)}
.vd-mini:last-child{border-bottom:0}
.vd-mini-name{font-family:var(--serif);font-size:17px;letter-spacing:.08em}
.vd-mini em{font-style:normal;font-size:12px;color:var(--ink-3)}
.vd-mini b{font-family:var(--serif);font-size:14px;font-weight:500;color:var(--cinnabar)}
.vd-mini b i{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.vd-mini-tip{flex:1 1 200px;font-size:12px;line-height:1.7;color:var(--ink-3)}
.vd-mini .vd-open{margin-left:0}

/* ---------- 两两对比 ---------- */
.cmp-card{max-width:960px;margin:0 auto 22px;padding:20px 24px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--paper-2);box-shadow:var(--shadow-1)}
.cmp-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cmp-title{font-family:var(--serif);font-size:19px;letter-spacing:.08em}
.cmp-sub{font-size:12.5px;color:var(--ink-3)}
.cmp-pick{margin-bottom:14px}
.cmp-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 0}
.cmp-side{flex:0 0 auto;min-width:32px;font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.cmp-name{padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink-2);font-size:12.5px;cursor:pointer}
.cmp-name:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.cmp-name[aria-pressed="true"]{border-color:var(--cinnabar);background:rgba(180,71,47,.08);
  color:var(--cinnabar)}
.cmp-table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.cmp-table th{font-weight:400;text-align:left;padding:9px 10px;white-space:nowrap;
  color:var(--ink-2);border-bottom:1px dashed var(--line)}
.cmp-table thead th{font-family:var(--serif);font-size:16px;letter-spacing:.08em;color:var(--ink);
  border-bottom:1px solid var(--line)}
.cmp-table thead th:first-child{border-bottom-color:transparent}
.cmp-table td{padding:9px 10px;border-bottom:1px dashed var(--line)}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom:0}
.cmp-table tr.cmp-total th,.cmp-table tr.cmp-total td{font-family:var(--serif);font-size:16px;color:var(--cinnabar)}
.cmp-table tr.cmp-gap th,.cmp-table tr.cmp-gap td{background:rgba(201,169,97,.12)}
.cmp-table th i{margin-left:8px;font-style:normal;font-size:11px;color:var(--gold)}
.cmp-src td{font-size:12.5px;white-space:normal;color:var(--ink-2)}
.cmp-sum{margin:14px 0 0;font-size:13.5px;line-height:1.9;color:var(--ink)}
.cmp-foot{margin:8px 0 0;font-size:12px;line-height:1.8;color:var(--ink-3)}

@media print{
  .cmp-pick{display:none}
  .cmp-card,.vd-mini{break-inside:avoid}
}

/* 名字手册：生僻字的针对性提示 */
.kit-warn{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-sm);
  background:rgba(180,71,47,.07);font-size:12.5px;line-height:1.85;color:var(--cinnabar)}
@media (max-width:620px){
  .cmp-card{padding:16px 14px}
  .cmp-table{font-size:12.5px}
  .cmp-table th,.cmp-table td{padding:7px 6px}
  .cmp-src td{font-size:11.5px}
  .vd-mini-tip{flex:1 1 100%}
}

/* 出生地（可选）：填了按当地真太阳时定时辰 */
.place-block{margin-top:2px}
.place-block select{width:100%}
.place-dst{display:flex;align-items:center;gap:8px;margin:10px 0 0;
  font-size:13px;color:var(--ink-2);cursor:pointer}
.place-dst input{width:15px;height:15px;accent-color:var(--cinnabar);cursor:pointer}
.place-note{margin:6px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink-3)}
.bazi-solar{margin:10px 0 0;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--line-2);font-size:12.5px;line-height:1.85;color:var(--ink-2)}

/* ---- 今日一字：首页的回访入口，一条窄卡，不抢主流程的位置 ---- */
.daily-card { margin: 18px 0 0; padding: 14px 16px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: linear-gradient(150deg, var(--paper-2), #f8f2e9);
  box-shadow: var(--shadow-1); }
.daily-row { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.daily-glyph { width: 54px; height: 54px; flex: none; border-radius: 14px; display: grid;
  place-items: center; background: linear-gradient(150deg, var(--cinnabar-2), var(--cinnabar));
  color: #fff; font-family: var(--serif); font-size: 29px; line-height: 1; }
.daily-main { flex: 1; min-width: 0; }
.daily-k { display: block; font-size: 11px; letter-spacing: .2em; color: var(--ink-3); }
.daily-t { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink); margin: 3px 0 2px; }
.daily-t .py { font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-left: 5px; letter-spacing: 0; }
.daily-sub { display: block; font-size: 12.5px; color: var(--ink-2); }
.daily-go { flex: none; font-size: 12.5px; color: var(--cinnabar); white-space: nowrap; }
.daily-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
  padding-top: 12px; border-top: 1px dashed var(--line); }
.daily-days a { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
  text-decoration: none; font-family: var(--serif); font-size: 15px; }
.daily-days a.on { background: linear-gradient(150deg, var(--cinnabar-2), var(--cinnabar));
  border-color: transparent; color: #fff; }

/* 八字解读里的四柱表：术语最密的一段，手机上可横向滑动，别把页面撑破 */
.bazi-table-wrap{margin:6px 0 18px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.bazi-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:430px}
.bazi-table th,.bazi-table td{padding:8px 10px;border-bottom:1px solid rgba(120,90,60,.14);text-align:left;white-space:nowrap;color:var(--ink-2,#4a443c)}
.bazi-table thead th{font-size:11.5px;font-weight:500;letter-spacing:.08em;color:var(--ink-3,#7a7268)}
.bazi-table tbody th{font-weight:600;color:var(--ink-1,#2c2723)}
.bazi-table td b{font-weight:600;color:var(--ink-1,#2c2723)}
.bazi-table td small{display:block;font-size:11px;color:var(--ink-3,#7a7268)}
.bazi-table .cg{display:inline-flex;align-items:baseline;gap:3px;margin-right:8px}
.bazi-table .cg i{font-style:normal;font-size:11px;color:var(--ink-3,#7a7268)}
.bazi-table-note{margin:8px 0 0;font-size:11.5px;line-height:1.7;color:var(--ink-3,#7a7268)}
.reading-lede{margin:10px 0 6px;font-size:13.5px;line-height:1.9;color:var(--ink-2,#4a443c)}
.dayun{margin:22px 0 4px;padding-top:18px;border-top:1px solid rgba(120,90,60,.14)}
.dayun-head b{font-size:15px;color:var(--ink-1,#2c2723)}
.dayun-intro{margin:6px 0 4px;font-size:12.5px;line-height:1.85;color:var(--ink-2,#4a443c)}
.dayun-start{margin:0 0 10px;font-size:12.5px;line-height:1.85;color:var(--ink-3,#7a7268)}
@page{margin:16mm 14mm}
.print-flat .ruming-card{animation:none!important;opacity:1!important}
.hour-hint{margin:6px 0 0;font-size:11.5px;line-height:1.75;color:var(--ink-3,#7a7268)}
.hour-hint b{color:var(--cinnabar,#b4472f)}
.reading-partial{margin:10px 0 0;padding:10px 12px;border-left:3px solid rgba(168,118,62,.5);background:rgba(168,118,62,.05);font-size:12.5px;line-height:1.85;color:var(--ink-2,#4a443c)}
.bazi-table td.dayun-theme{white-space:normal;min-width:230px;line-height:1.75}
.nb{margin:14px 0 6px;padding:14px 16px;border-left:3px solid var(--brand,#a8763e);background:rgba(168,118,62,.05);border-radius:0 8px 8px 0}
.nb-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.nb-head b{font-size:14px;color:var(--ink-1,#2c2723)}
.nb-head span{font-size:11.5px;color:var(--ink-3,#7a7268)}
/* 三条方向一人一行：每条都要读完整句，并排两列看着碎，也容易被跳过 */
.nb-list{margin:0;padding:0;list-style:none}
/* 标签原先是绝对定位 + 禁止换行，只留 74px；而「基调 · 日主身弱」有九个字、约 83px，
   于是标签压到正文上。改成两栏 flex，标签自己占一栏，长短都不再挤正文。 */
.nb-list li{display:flex;align-items:baseline;gap:12px;margin:7px 0;font-size:13px;line-height:1.85;color:var(--ink-2,#4a443c)}
.nb-tag{flex:0 0 96px;font-size:11.5px;line-height:1.85;color:var(--cinnabar,#b4472f);letter-spacing:.02em}
.nb-compare{margin:8px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink-2,#4a443c)}
@media (max-width:560px){
  .nb{padding:12px 12px}
  /* 窄屏放不下两栏：标签另起一行，靠左对齐，不缩字号也不截断 */
  .nb-list li{flex-direction:column;gap:1px;margin:9px 0}
  .nb-tag{flex:0 0 auto}
}

/* 系统里开了「减少动态效果」就不播入场动画；加载中的转动保留，那是状态反馈不是装饰 */
@media (prefers-reduced-motion: reduce){
  .fade-in{animation:none!important;opacity:1!important;transform:none!important}
}
