/* ===========================================================
 * 《让爱不消失》— 组件样式
 * =========================================================== */

/* ---------- Hero（首页大标题区） ---------- */
.hero {
  position: relative;
  padding: 76px 0 58px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 340px at 12% -10%, rgba(20,184,166,.09), transparent 62%),
    radial-gradient(700px 300px at 88% 0%, rgba(99,102,241,.06), transparent 60%),
    var(--bg);
  overflow: hidden;
}

.hero__inner { max-width: 760px; }

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--primary);
  font-weight: 600;
  margin: 0 0 18px;
}

.hero__title {
  font-family: var(--font-sans);
  font-size: clamp(34px, 6vw, 52px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
  margin: 0 0 20px;
}

.hero__title em {
  font-style: normal;
  color: var(--warm);
}

.hero__sub {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0 0 28px;
  max-width: 620px;
}

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .18s, border-color .18s, transform .18s;
}

.btn--primary { background: var(--rose); color: #fff; }
.btn--primary:hover { background: var(--rose-deep); transform: translateY(-1px); }

.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }

/* ---------- 数字卡（首页四个研究数据） ---------- */
.figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.figure__num {
  font-size: 46px;
  margin-bottom: 4px;
}

.figure__label {
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--warm);
  font-weight: 600;
  margin-bottom: 14px;
}

.figure__text {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0 0 auto;
  flex: 1;
}

.figure__src {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------- 内容条目（三大部分的核心组件） ---------- */
.item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px;
  margin-bottom: 18px;
  position: relative;
}

.item__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.item__no {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--line-2);
  line-height: 1;
  flex: 0 0 auto;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}

.item__h {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 6px;
}

.item__sub {
  font-size: 14px;
  color: var(--warm);
  font-weight: 600;
  margin: 0;
}

.item__body {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.95;
  margin: 0;
}

.item__extra {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.95;
  margin: 14px 0 0;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-left: 3px solid var(--primary-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.item__list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.item__list li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.85;
}

.item__list li:last-child { border-bottom: 0; padding-bottom: 0; }

.item__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary-soft);
}

/* 危险条目（四骑士） */
.item--danger { border-color: #e8d5d2; }
.item--danger .item__no { color: #dfc4c0; }
.item--danger .item__list li::before { background: var(--danger); }

/* 行动条（怎么维护 / 怎么保鲜里的「可以做的」） */
.action {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--primary-wash);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--brand-deep);
  line-height: 1.85;
}

.action::before {
  content: "可以做 · ";
  color: var(--primary);
  font-weight: 700;
}

/* ---------- 引文条 ---------- */
.pullquote {
  margin: 40px 0;
  padding: 30px 34px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--warm);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--serif-zh);
  font-size: 19px;
  line-height: 1.95;
  color: var(--ink);
  letter-spacing: .02em;
}

.pullquote a { color: var(--warm); border-bottom: 1px solid var(--warm-soft); }

/* ---------- 自查清单 ---------- */
.checkup__score {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.checkup__scoreNum {
  font-family: var(--font-serif);
  font-size: 54px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.checkup__scoreNum small { font-size: 20px; color: var(--ink-3); font-weight: 400; }

.checkup__scoreText { flex: 1; min-width: 220px; font-size: 15px; color: var(--ink-2); line-height: 1.8; }

.check {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 12px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}

.check:hover { border-color: var(--line-2); }
.check.is-done { background: var(--primary-wash); border-color: var(--primary-soft); }

.check__box {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
  margin-top: 2px;
  transition: all .18s;
}

.check.is-done .check__box {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.check__text { flex: 1; }
.check__t { font-size: 15.5px; color: var(--ink); line-height: 1.75; margin: 0 0 5px; }
.check__n { font-size: 12.5px; color: var(--ink-3); margin: 0; }

/* ---------- 分隔标题 ---------- */
.divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px 0 30px;
}

.divider__line { flex: 1; height: 1px; background: var(--line); }

.divider__label {
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--ink-3);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 三部分入口卡（首页） ---------- */
.pillar {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 24px;
  height: 100%;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

.pillar:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--primary-soft); }

.pillar__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--primary-wash);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.pillar__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.pillar__desc { font-size: 14.5px; color: var(--ink-2); line-height: 1.8; margin: 0 0 16px; }

.pillar__more { font-size: 13.5px; color: var(--primary); font-weight: 600; }

@media (max-width: 640px) {
  .hero { padding: 46px 0 40px; }
  .item { padding: 22px 18px; }
  .item__head { gap: 12px; }
  .item__no { font-size: 20px; }
  .item__h { font-size: 19px; }
  .pullquote { padding: 22px 20px; font-size: 16.5px; }
  .figure__num { font-size: 38px; }
}

/* ===========================================================
 * 分场景卡
 * =========================================================== */
.scene {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 20px;
  overflow: hidden;
}

.scene__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

.scene__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.scene__titleWrap { flex: 1; min-width: 0; }

.scene__title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

.scene__warn {
  font-size: 13px;
  color: var(--warm);
  font-weight: 600;
  margin: 5px 0 0;
  line-height: 1.6;
}

.scene__body { padding: 8px 26px 22px; }

.scene__pt {
  padding: 15px 0;
  border-bottom: 1px dashed var(--line);
}

.scene__pt:last-child { border-bottom: 0; }

.scene__ph {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 6px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.scene__ph::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm);
  transform: translateY(-2px);
}

.scene__pp {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0 0 0 16px;
}

/* ===========================================================
 * FAQ 手风琴
 * =========================================================== */
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .18s;
}

.faq__item.is-open { border-color: var(--primary-soft); }

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  cursor: pointer;
  user-select: none;
}

.faq__q:hover { background: var(--bg-soft); }

.faq__idx {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  flex: 0 0 auto;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.faq__qt {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
}

.faq__toggle {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: transform .22s, background .18s, color .18s;
  margin-top: 2px;
}

.faq__item.is-open .faq__toggle {
  transform: rotate(45deg);
  background: var(--primary);
  color: #fff;
}

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.faq__item.is-open .faq__a { max-height: 900px; }

.faq__at {
  padding: 0 22px 22px 22px;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.95;
  margin: 0;
  border-top: 1px dashed var(--line);
  padding-top: 18px;
}

@media (max-width: 640px) {
  .scene__head { padding: 18px; gap: 12px; }
  .scene__body { padding: 6px 18px 18px; }
  .scene__title { font-size: 18.5px; }
  .faq__q { padding: 16px; gap: 10px; }
  .faq__qt { font-size: 16px; }
  .faq__at { padding: 0 16px 18px; padding-top: 14px; }
}

/* ===========================================================
 * 金句墙
 * =========================================================== */
.qgroup { margin-bottom: 42px; }

.qgroup__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.qgroup__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.qgroup__from {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  border-bottom: 1px solid var(--primary-soft);
  margin-left: auto;
}

.qgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 22px 18px;
  position: relative;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

.quote:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary-soft);
}

.quote::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  right: 16px;
  font-family: Georgia, serif;
  font-size: 54px;
  line-height: 1;
  color: var(--primary-wash);
  pointer-events: none;
}

.quote__t {
  font-family: var(--serif-zh);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: .01em;
  position: relative;
  z-index: 1;
}

.quote__who {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.quote__who::before { content: "— "; }

/* ===========================================================
 * 参考文献
 * =========================================================== */
.refgroup { margin-bottom: 36px; }

.refgroup__title {
  font-family: var(--font-sans);
  font-size: 18.5px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--primary);
  display: inline-block;
}

.ref {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}

.ref:last-child { border-bottom: 0; }

.ref__key {
  flex: 0 0 auto;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--warm-wash);
  color: var(--warm);
  font-weight: 700;
  height: fit-content;
}

.ref__body { flex: 1; min-width: 0; }

.ref__text {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.75;
  margin: 0 0 6px;
  word-break: break-word;
}

.ref__note {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 640px) {
  .qgrid { grid-template-columns: 1fr; }
  .quote__t { font-size: 16px; }
  .qgroup__from { margin-left: 0; }
}

/* ===========================================================
 * 自查操作条
 * =========================================================== */
.checkbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}

.btn--sm {
  padding: 8px 18px;
  font-size: 14px;
}

.checkbar__hint {
  font-size: 13px;
  color: var(--ink-3);
  transition: color .2s;
  margin-left: auto;
}

.checkbar__hint.is-flash {
  color: var(--primary);
  font-weight: 600;
}

/* ===========================================================
 * 金句卡：复制按钮
 * =========================================================== */
.quote__copy {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s, background .18s, color .18s, border-color .18s;
  z-index: 2;
}

.quote:hover .quote__copy { opacity: 1; }

.quote__copy:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.quote__copy.is-ok {
  background: var(--jade, #4a7c6f);
  border-color: var(--jade, #4a7c6f);
  color: #fff;
  opacity: 1;
}

/* ---------- 全局轻提示 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s, transform .24s;
  z-index: 200;
}

.toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px) {
  .quote__copy { opacity: 1; }
  .checkbar__hint { margin-left: 0; width: 100%; }
}

/* ---------- 复制失败兜底弹层 ---------- */
.copybox-mask {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26,26,24,.44);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.copybox {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  width: 100%;
  max-width: 520px;
  animation: modalIn .26s ease;
}

.copybox__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 14px;
}

.copybox__ta {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg-soft);
  margin-bottom: 16px;
}

.copybox .btn { float: right; }

/* ===========================================================
 * 行动手册 plan.html
 * =========================================================== */

/* 目录条：长页面由 app.js 的 buildToc 自动挂上（见该函数注释） */
.toc {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 42px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* 左栏 + 正文的两栏外壳（由 app.js 的 buildToc 生成）
   窄屏：默认上下堆叠，只有章节条时仍在正文上方；
   宽屏：左栏吸住，正文在右栏。左栏 = 「同一大目录的其他页面」+「本页目录」。 */
.tocshell { display: block; }
.tocshell__main { min-width: 0; }

/* 同组页面导航：只在左栏模式显示（窄屏顶部导航里已经有「目录」按钮） */
.tocgroup { display: none; }

.toc__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary);
  white-space: nowrap;
}

.toc__scroll {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 7px;
  padding: 2px 0;
}

.toc__i {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 330px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  line-height: 1.55;
  padding: 4px 11px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .18s, color .18s;
}

.toc__i:hover { background: var(--primary); color: #fff; }
.toc__i.is-active { background: var(--primary); color: #fff; }

.toc-anchor { scroll-margin-top: calc(var(--navh, 62px) + 96px); }

/* 宽屏：目录移到左栏，竖排、吸顶（--navh 由 app.js 的 syncNavH 写）。
   2026-10-10 改：原来这里放宽到 1340px，是为了让正文列保持 1018px 不变。
   但量下来 1018px 装 15px 正文要排到 64 字/行——眼睛会跳行。
   当时整站容器收成 --maxw(1000px)，正文列落到 678px，一行 40 字上下。
   2026-10-15：按「知岁本源」站对齐，--maxw 升到 1200px，正文列随之到 874px；
   卡内正文已放开 --readw 上限、填满 874px 列（约 54 字/行），不再右侧留白。 */
@media (min-width: 1101px) {
  .wrap--toc { max-width: var(--maxw); }

  .tocshell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    column-gap: 46px;
    align-items: start;
  }

  /* 左栏整体吸顶：组导航钉在最上面，只有下面的章节列表滚动 */
  .tocside {
    position: sticky;
    top: calc(var(--navh, 62px) + 22px);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100vh - var(--navh, 62px) - 44px);
  }

  /* ---------- 左栏顶部：同一大目录下的其他页面 ---------- */
  .tocgroup {
    display: block;
    flex: 0 0 auto;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line);
  }

  .tocgroup__label {
    margin: 0 0 5px;
    padding-left: 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--primary);
  }

  .tocgroup__i {
    display: block;
    padding: 6px 12px;
    border-left: 2px solid transparent;
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
    transition: background .18s, color .18s;
  }

  .tocgroup__i:hover { background: var(--surface-2); color: var(--ink); }

  .tocgroup__i.is-current {
    background: var(--primary-wash);
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
  }

  .tocgroup__all {
    display: block;
    margin-top: 5px;
    padding: 4px 12px 0 13px;
    font-size: 12px;
    color: var(--ink-3);
  }

  .tocgroup__all:hover { color: var(--primary); }

  .toc {
    flex: 1 1 auto;
    min-height: 0;
    position: static;                 /* 吸顶已经交给 .tocside */
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
  }

  .toc__label { padding-left: 13px; }

  .toc__scroll {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1px;
    padding: 0;
  }

  .toc__i {
    max-width: none;
    white-space: normal;
    padding: 7px 12px;
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
    background: none;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-2);
  }

  .toc__i:hover { background: var(--primary-wash); color: var(--primary); }
  .toc__i.is-active {
    background: var(--primary-wash);
    color: var(--primary);
    font-weight: 600;
    border-left-color: var(--primary);
  }

  /* 左栏不挡正文，让开导航就够 */
  .toc-anchor { scroll-margin-top: calc(var(--navh, 62px) + 30px); }
}

/* 只有组导航、没有章节目录的页面（问答 / 自查 / 复盘）：窄屏不必留左栏 */
@media (max-width: 1100px) {
  .tocside--grouponly { display: none; }
}

/* ---------- 顶部导航：四个「大目录」下拉 ----------
   顶部只放首页 + 四组 + 总目录；组里的页面收进下拉（组与 catalog.html 一致）。
   窄屏（<=860）整条收成一个「目录」按钮，展开后按组竖排。 */
.navgroup { position: relative; display: flex; }

.navgroup__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 13px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s;
}

.navgroup__btn:hover { background: var(--surface-2); color: var(--ink); }
.navgroup__btn.is-active { background: var(--primary); color: #fff; }
.navgroup__caret { font-size: 10px; line-height: 1; transition: transform .18s; }
.navgroup.is-open .navgroup__caret { transform: rotate(180deg); }

.navgroup__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 70;
  min-width: 214px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

/* 最后一组的菜单靠右展开，免得顶出屏幕 */
.navgroup:last-of-type .navgroup__panel { left: auto; right: 0; }

.navgroup.is-open .navgroup__panel { display: flex; }

.navgroup__panel a {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
}

.navgroup__panel a:hover { background: var(--surface-2); color: var(--ink); }
.navgroup__panel a.is-active { background: var(--primary); color: #fff; }

.navgroup__hint {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 1px;
}

.navgroup__panel a.is-active .navgroup__hint { color: rgba(255, 255, 255, .76); }

/* 8 项顶栏（「先搞懂」平铺之后是 首页 + 3 个栏目 + 3 个下拉 + 总目录）：
   实测 905px 还排得下、885px 就折行，而折叠成「目录」按钮的断点是 860——
   中间那条窄带会折成两行。这里只在中窄段把间距收紧一档，
   8 项就能一路排到 861，不折行、也不用去动折叠断点。 */
@media (max-width: 1000px) {
  .nav__links a,
  .navgroup__btn { padding: 7px 9px; font-size: 13px; }
  .navgroup__caret { font-size: 9px; }
}

/* 「先搞懂」这一组不收起：桌面端把三个栏目直接平铺到顶栏（2026-10-10）。
   display:contents 让 .navgroup--flat 自己不参与布局，里面的 <a> 直接成为
   .nav__links 的 flex 子项 —— 跟首页/总目录同一排，共用 base.css 那套链接样式。
   窄屏刻意**不给** contents：那时它退回成一个普通 .navgroup，
   <span> 标签借 .navgroup__btn 的样式当分节标题，菜单的四段结构跟另外三组一致。 */
@media (min-width: 861px) {
  .navgroup--flat { display: contents; }
  .navflat__label { display: none; }
}

/* 平铺组与后面下拉之间那道细竖线。
   左＝点一下就到，右＝点开才有东西，两类在交互上不是一回事。
   高度 16px 是跟文字 x-height 对齐的量级，不是撑满整条导航——
   撑满会变成"把导航切开"，那是两栏的意思，这里只是想停一下。 */
.navsep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 16px;
  margin: 0 5px;
  background: var(--line-2);
}

/* 窄屏菜单是竖排分节，靠组标题分界，不需要这条线 */
@media (max-width: 860px) {
  .navsep { display: none; }
}

/* 「目录」按钮：只在窄屏出现 */
.navtoggle { display: none; }

@media (max-width: 860px) {
  .navtoggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
  }

  .navtoggle__caret { font-size: 10px; line-height: 1; transition: transform .18s; }
  .navtoggle[aria-expanded="true"] .navtoggle__caret { transform: rotate(180deg); }
  .navtoggle[aria-expanded="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }

  /* 菜单覆盖在正文之上，不撑高导航条（--navh 保持在 62 左右） */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;      /* 不重置成 nowrap 的话，会被 max-height 折成多列 */
    align-items: stretch;
    gap: 0;
    max-height: 74vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 22px 16px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .nav__links.is-open { display: flex; }

  .nav__links > a {
    padding: 9px 4px;
    border-radius: var(--r-sm);
    font-size: 15px;
    white-space: normal;
  }

  .nav__links > a.is-active { background: var(--primary-wash); color: var(--primary); }

  /* 组标题：只做分节，不可点 */
  .navgroup { display: block; }

  .navgroup__btn {
    display: block;
    width: 100%;
    padding: 15px 4px 5px;
    border-radius: 0;
    text-align: left;          /* button 默认居中，这里要当分节标题用 */
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    pointer-events: none;
  }

  /* 组标题在这里只是分节标题，不吃桌面版那个实心药丸的选中态 */
  .navgroup__btn.is-active { background: none; color: var(--primary); }

  .navgroup__caret { display: none; }

  .navgroup__panel,
  .navgroup:last-of-type .navgroup__panel {
    position: static;
    left: auto;
    right: auto;
    display: flex;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* 平铺组（.navgroup--flat）在窄屏菜单里也得是「一行一项」。
     不写这条的话，它们是块容器里的行内 <a>——三个会挤在同一行、
     只有 31px 高，跟另外三组的 55px 整行不是一个东西。
     ai/jc 这两条是为了把文字拉回左边：见下面 44px 那段里的说明。 */
  .navgroup__panel a,
  .navgroup--flat > a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 44px;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    font-size: 15px;
    white-space: normal;
  }
  .navgroup__panel a.is-active,
  .navgroup--flat > a.is-active { background: var(--primary-wash); color: var(--primary); }
  .navgroup__panel a.is-active .navgroup__hint { color: var(--primary-soft); }
  .navgroup__hint { font-size: 12px; }
}

/* 区块 */
.part { margin-bottom: 62px; }

.part__head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.part__no {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

.part__title {
  font-family: var(--font-serif);
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.45;
}

.part__desc {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0;
  max-width: 660px;
}

/* 段落描述里的加粗（desc 会被渲染成 innerHTML，支持 **加粗**） */
.part__desc strong {
  color: var(--ink);
  font-weight: 700;
}

/* 每天三分钟 */
.daily {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  height: 100%;
}

.daily__t {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--primary);
}

.daily__p { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; margin: 0; }

/* 四季进度条 */
.weekbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 20px;
}

.weekbar__text { font-size: 13.5px; font-weight: 600; color: var(--primary); white-space: nowrap; }

.weekbar__track {
  flex: 1;
  min-width: 120px;
  height: 7px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  overflow: hidden;
}

.weekbar__fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: var(--r-full);
  transition: width .3s ease;
}

.weekbar__note { font-size: 12.5px; color: var(--ink-3); margin-left: auto; }

/* 周卡 */
.week {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 16px;
}

.week__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.week__tag {
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: #fff;
  letter-spacing: .04em;
}

.week__theme {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 180px;
}

.week__prog {
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.week__goal {
  font-size: 14.5px;
  color: var(--warm);
  font-weight: 600;
  line-height: 1.8;
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 3px solid var(--warm-soft);
}

.week__tasks { margin: 0; }

.wtask {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s;
}

.wtask:hover { background: var(--bg-soft); }
.wtask.is-done { background: var(--primary-wash); }

.wtask__box {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 4px;
  border: 1.5px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  margin-top: 4px;
  transition: all .18s;
}

.wtask.is-done .wtask__box { background: var(--primary); border-color: var(--primary); color: #fff; }

.wtask__t { flex: 1; font-size: 15px; color: var(--ink-2); line-height: 1.75; }
.wtask.is-done .wtask__t { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--line-2); }

.week__warn {
  margin: 16px 0 0;
  padding: 13px 16px;
  background: var(--warm-wash);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: #7a4626;
  line-height: 1.8;
}

.week__warn::before { content: "注意 · "; font-weight: 700; color: var(--warm); }

/* 步骤（吵架收场 / 冷淡捞回） */
.step {
  display: flex;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 14px;
}

.step__no {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-wash);
  line-height: 1;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.step__body { flex: 1; min-width: 0; }

.step__t {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.5;
}

.step__p { font-size: 15px; color: var(--ink-2); line-height: 1.9; margin: 0; }

/* 微动作库 */
.microgroup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin-bottom: 16px;
}

.microgroup__t {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--primary);
}

.microgroup__list { list-style: none; margin: 0; padding: 0; }

.microli {
  position: relative;
  padding: 12px 12px 12px 34px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.8;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .16s, color .16s;
}

.microli::before {
  content: "○";
  position: absolute;
  left: 11px;
  top: 12px;
  color: var(--line-2);
  font-size: 13px;
}

.microli:hover { background: var(--bg-soft); }

.microli.is-picked {
  background: var(--primary-wash);
  color: var(--ink);
  font-weight: 600;
}

.microli.is-picked::before { content: "●"; color: var(--primary); }

/* 别做的五件事 */
.avoid {
  background: var(--danger-wash);
  border: 1px solid #ecd6d3;
  border-left: 4px solid var(--danger);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 22px 24px;
  margin-bottom: 14px;
}

.avoid__bad {
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--danger);
  margin: 0 0 10px;
  line-height: 1.5;
}

.avoid__bad::before { content: "✕  "; }

.avoid__why { font-size: 14.5px; color: #6b3430; line-height: 1.85; margin: 0; }

.avoid .src { border-top-color: #e5cbc8; }

/* ===========================================================
 * 异地专页 long.html
 * =========================================================== */
.keyrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}

.keycard {
  background: var(--primary);
  border-radius: var(--r-md);
  padding: 24px 22px;
  color: #fff;
}

.keycard__num {
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
  color: #9fd0c6;
  font-variant-numeric: tabular-nums;
}

.keycard__t { font-size: 14px; line-height: 1.75; margin: 0 0 12px; color: rgba(255,255,255,.92); }

.keycard__s {
  font-size: 11.5px;
  color: rgba(255,255,255,.6);
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.18);
}

/* 规则卡 */
.rule {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
  position: relative;
  height: 100%;
}

.rule__no {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--warm);
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.rule__h {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.5;
}

.rule__p { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; margin: 0; }

/* 提示块 */
.callout {
  margin-top: 18px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px dashed var(--primary-soft);
  border-radius: var(--r-md);
}

.callout__t {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 8px;
}

.callout__p { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; margin: 0; }

/* 日常仪式 */
.ritual {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 24px;
  height: 100%;
}

.ritual__h {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 9px;
  line-height: 1.5;
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.ritual__h::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warm);
  transform: translateY(-2px);
}

.ritual__p { font-size: 14.5px; color: var(--ink-2); line-height: 1.85; margin: 0; }

/* 警报 */
.alertbox {
  background: var(--surface);
  border: 1px solid #e8d5d2;
  border-radius: var(--r-md);
  padding: 8px 24px;
}

.alertitem {
  position: relative;
  padding: 15px 0 15px 26px;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.85;
  border-bottom: 1px dashed var(--line);
}

.alertitem:last-child { border-bottom: 0; }

.alertitem::before {
  content: "!";
  position: absolute;
  left: 0;
  top: 17px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===========================================================
 * 问答搜索 faq.html
 * =========================================================== */
.faqsearch {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.faqsearch__in {
  flex: 1;
  padding: 13px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.faqsearch__in:focus {
  border-color: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-wash);
}

.faqsearch__count {
  font-size: 13px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.faqsearch__empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14.5px;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  margin: 0;
}

/* ===========================================================
 * 每周复盘 review.html
 * =========================================================== */
.rev-entry__box {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 28px;
  margin-bottom: 40px;
}

.rev-entry__left { flex: 1; min-width: 240px; }

.rev-entry__t {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 7px;
}

.rev-entry__d { font-size: 14px; color: var(--ink-2); line-height: 1.8; margin: 0; }

/* 表单 */
.rev-form {
  background: var(--surface);
  border: 1px solid var(--primary-soft);
  border-radius: var(--r-md);
  padding: 28px;
  margin-bottom: 44px;
}

.rev-form__date { margin-bottom: 24px; }

.rev-form__date label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 8px;
  letter-spacing: .04em;
}

.rev-form__date input {
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--bg-soft);
  outline: none;
}

.rev-form__date input:focus { border-color: var(--primary-soft); }

.revq { margin-bottom: 22px; }

.revq__label {
  display: block;
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.55;
}

.revq__ta {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--bg-soft);
  resize: vertical;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.revq__ta:focus {
  border-color: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-wash);
  background: var(--surface);
}

.revq__ta::placeholder { color: #b3b3ab; }

/* 打分 */
.rev-metrics {
  margin: 28px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.rev-metrics__title {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 5px;
}

.rev-metrics__hint { font-size: 13px; color: var(--ink-3); margin: 0 0 18px; }

.metric {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}

.metric:last-child { border-bottom: 0; }

.metric__label {
  flex: 1;
  min-width: 190px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.metric__hint {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 3px;
  line-height: 1.6;
}

.metric__dots { display: flex; gap: 7px; }

.dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  transition: all .16s;
}

.dot:hover { border-color: var(--primary-soft); color: var(--primary); }

.dot.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* 操作行 */
.rev-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.rev-hint { font-size: 13.5px; color: var(--primary); font-weight: 600; }
.rev-hint.is-warn { color: var(--danger); }

/* 曲线 */
.rev-chart {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px;
  margin-bottom: 44px;
}

.rev-chart__title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
}

.rev-chart__lgrow {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.rev-chart__lg {
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rev-chart__lg i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.rev-chart__svg { width: 100%; height: auto; display: block; }

.rev-chart__empty,
.rev-list__empty {
  color: var(--ink-3);
  font-size: 14px;
  margin: 0;
  text-align: center;
  padding: 20px 0;
}

.rev-chart__low {
  margin: 14px 0 0;
  padding: 13px 16px;
  background: var(--warm-wash);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: #7a4626;
  line-height: 1.8;
}

/* 历史 */
.rev-history__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.rev-history__title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  margin-right: auto;
}

.revrec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}

.revrec.is-open { border-color: var(--primary-soft); }

.revrec__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
}

.revrec__head:hover { background: var(--bg-soft); }

.revrec__date {
  font-family: var(--font-serif);
  font-size: 15.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.revrec__avg { font-size: 13px; color: var(--ink-3); margin-left: auto; }

.revrec__toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: transform .22s, background .18s, color .18s;
}

.revrec.is-open .revrec__toggle { transform: rotate(45deg); background: var(--primary); color: #fff; }

.revrec__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.revrec.is-open .revrec__body { max-height: 900px; }

.revrec__scores {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 20px 16px;
}

.revrec__sc {
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--bg-soft);
  border-radius: var(--r-full);
  padding: 4px 12px;
}

.revrec__sc b { color: var(--primary); }

.revrec__qa { padding: 0 20px 16px; }

.revrec__ql {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.revrec__va {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.85;
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--primary-wash);
  white-space: pre-wrap;
}

.revrec__none { font-size: 13.5px; color: var(--ink-3); padding: 0 20px 16px; margin: 0; }

.revrec__body .btn { margin: 0 20px 18px; }

/* 提示 */
.tips { display: grid; gap: 12px; }

.tip {
  position: relative;
  padding: 15px 18px 15px 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.85;
}

.tip::before {
  content: "·";
  position: absolute;
  left: 18px;
  top: 15px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--primary-wash);
  color: var(--primary);
  font-weight: 700;
  font-size: 17px;
  line-height: 15px;
  text-align: center;
}

/* ===========================================================
 * 该不该继续 decide.html
 * =========================================================== */
.decide-note {
  margin: 0 0 44px;
  padding: 18px 24px;
  background: var(--surface);
  border-left: 4px solid var(--warm);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.85;
}

/* 先别急：排除误判 */
.caveat {
  display: flex;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 14px;
}

.caveat__no {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--primary-wash);
  line-height: 1;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.caveat__body { flex: 1; min-width: 0; }

.caveat__t {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.5;
  color: var(--primary);
}

.caveat__p { font-size: 15px; color: var(--ink-2); line-height: 1.9; margin: 0; }

/* 三类信号分组 */
.siggroup {
  border-radius: var(--r-md);
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}

.siggroup__head {
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.siggroup__badge {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--r-full);
  letter-spacing: .04em;
  margin-right: 10px;
}

.siggroup__note {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
}

.siggroup--red .siggroup__badge { background: var(--danger); color: #fff; }
.siggroup--red { border-color: #e8d5d2; }

.siggroup--yellow .siggroup__badge { background: var(--warm); color: #fff; }
.siggroup--yellow { border-color: #ecdccd; }

.siggroup--green .siggroup__badge { background: var(--primary-soft); color: #fff; }
.siggroup--green { border-color: #cfe0dc; }

.siggroup__body { padding: 6px 26px 14px; }

.sig { padding: 17px 0; border-bottom: 1px dashed var(--line); }
.sig:last-child { border-bottom: 0; }

.sig__h {
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 700;
  margin: 0 0 7px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.sig__h::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-2px);
}

.siggroup--red .sig__h::before { background: var(--danger); }
.siggroup--yellow .sig__h::before { background: var(--warm); }
.siggroup--green .sig__h::before { background: var(--primary-soft); }

.sig__p { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; margin: 0 0 0 17px; }

.sig .src { margin-left: 17px; }

/* 三个问题 */
.askq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 24px 26px;
  margin-bottom: 16px;
}

.askq__no {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-soft);
  letter-spacing: .1em;
  margin-bottom: 8px;
}

.askq__q {
  font-family: var(--font-serif);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
}

.askq__why {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

/* 写下答案 */
.decide-write {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 28px;
  margin: 22px 0 34px;
}

.decide-write__t {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 7px;
}

.decide-write__d { font-size: 13.5px; color: var(--ink-3); line-height: 1.75; margin: 0 0 16px; }

.decide-write__ta {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg-soft);
  resize: vertical;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}

.decide-write__ta:focus {
  border-color: var(--primary-soft);
  box-shadow: 0 0 0 3px var(--primary-wash);
  background: var(--surface);
}

.decide-write__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.decide-write__hint { font-size: 13.5px; color: var(--primary); font-weight: 600; }
.decide-write__hint.is-warn { color: var(--danger); }

/* ===========================================================
 * 页脚计数器（一行小字，跟在「内容基于…」后面）
 * =========================================================== */
.footer__visit {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===========================================================
 * 修复页 repair.html
 * =========================================================== */

/* 零、四种「坏」 */
.kindcard {
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.kindcard__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.kindcard__no {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.kindcard__t {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.kindcard__tag {
  margin-left: auto;
  font-size: 12px;
  color: var(--warm);
  background: rgba(176, 106, 59, .09);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.kindcard__p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0 0 8px;
}
.kindcard .src { margin: 0; }

/* 一/四/五：条目卡 */
.rpcard {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-sm);
  margin-bottom: 12px;
}
.rp__h {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 7px;
  line-height: 1.55;
}
.rp__p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}
.rpcard .src { margin: 8px 0 0; }

/* 三、道歉对照 */
.apology-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.apology-col {
  padding: 22px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.apology-col--good {
  background: rgba(31, 77, 70, .035);
  border-color: rgba(31, 77, 70, .22);
}
.apology-col--bad {
  background: rgba(160, 60, 50, .035);
  border-color: rgba(160, 60, 50, .22);
}
.apology-col__h {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 16px;
}
.apology-col--good .apology-col__h { color: var(--primary); }
.apology-col--bad .apology-col__h { color: var(--danger); }

.apl {
  display: flex;
  gap: 11px;
  margin-bottom: 16px;
}
.apl:last-child { margin-bottom: 0; }
.apl__mark {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  margin-top: 2px;
}
.apl--bad .apl__mark { background: var(--danger); }
.apl__h {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.apl__p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.8;
  margin: 0;
}
.apl .src { margin: 5px 0 0; font-size: 11.5px; }

/* 六、三条铁律 */
.rulecard {
  padding: 22px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  position: relative;
}
.rulecard__no {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--warm);
  letter-spacing: .1em;
  margin-bottom: 6px;
}
.rulecard__t {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
}
.rulecard__p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}
.rulecard .src { margin: 8px 0 0; }

/* 警示 callout */
.callout--warn {
  background: rgba(160, 60, 50, .05);
  border-left: 3px solid var(--danger);
}
.callout--warn .callout__p { color: var(--ink-2); }

/* ---------- 异地保鲜（long.html 第四节） ---------- */

/* 浅色版关键数字卡：深底卡在长页中间太重 */
.keycard--plain {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
}
.keycard--plain .keycard__num {
  font-size: 34px;
  color: var(--primary);
}
.keycard--plain .keycard__t { color: var(--ink-2); }
.keycard--plain .keycard__s {
  color: var(--ink-3);
  border-top-color: var(--line);
}

/* 反直觉说明块 */
.ldparadox {
  position: relative;
  margin: 0 0 30px;
  padding: 26px 28px 24px 32px;
  background: rgba(31, 77, 70, .035);
  border: 1px solid rgba(31, 77, 70, .2);
  border-radius: var(--r-md);
}
.ldparadox::before {
  content: "！";
  position: absolute;
  left: -1px;
  top: -1px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-md) 0 12px 0;
}
.ldparadox__h {
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.5;
}
.ldparadox__p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.95;
  margin: 0 0 14px;
}
.ldparadox__hint {
  font-size: 13.5px;
  color: var(--primary);
  line-height: 1.85;
  margin: 0;
  padding-top: 13px;
  border-top: 1px dashed rgba(31, 77, 70, .25);
}

/* 安全边界说明：用中性偏冷色，避免和「危险信号」混淆 */
.callout--safe {
  margin-top: 28px;
  background: rgba(31, 77, 70, .04);
  border-left: 3px solid var(--primary);
}
.callout--safe .callout__t { color: var(--primary); }
.callout--safe .callout__p { color: var(--ink-2); font-size: 13.5px; }

/* 收尾金句 */
.pullquote strong { font-weight: 700; }

/* ---------- 异地失败机制（long.html 第七节） ---------- */
.pitlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 8px;
}
.pitlist .pitcard:first-child { grid-column: 1 / -1; }

.pitcard {
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
}
.pitcard__top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pitcard__no {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pitcard__tag {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-3);
  background: rgba(31, 77, 70, .07);
  border-radius: 99px;
  padding: 3px 11px;
}
.pitcard__h {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.55;
}
.pitcard__p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}
.pitcard__extra {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.pitcard .src { margin: 8px 0 0; }

/* ---------- 异地具体做法四层（long.html 第八节） ---------- */
.htlayer {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 18px;
  background: var(--surface);
}
.htlayer--plain { border-left: 3px solid var(--tone-plain); }
.htlayer--cool  { border-left: 3px solid var(--tone-cool); }
.htlayer--warm  { border-left: 3px solid var(--tone-warm); }
.htlayer--deep  { border-left: 3px solid var(--tone-deep); }

.htlayer__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.htlayer__no {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary);
  flex-shrink: 0;
}
.htlayer--cool .htlayer__no { color: var(--tone-cool); }
.htlayer--warm .htlayer__no { color: var(--tone-warm); }
.htlayer--deep .htlayer__no { color: var(--tone-deep); }

.htlayer__name {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.htlayer__freq {
  display: inline-block;
  margin-left: 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  background: rgba(0, 0, 0, .04);
  border-radius: 99px;
  padding: 2px 10px;
  vertical-align: middle;
}
.htlayer__intro {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.htlayer__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.htitem {
  padding: 16px 18px;
  background: rgba(0, 0, 0, .018);
  border-radius: var(--r-sm);
  border: 1px solid rgba(0, 0, 0, .05);
}
.htitem__h {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.55;
}
.htitem__p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0;
}
.htitem__eg {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 10px 0 0;
  padding: 9px 12px;
  background: rgba(31, 77, 70, .05);
  border-radius: var(--r-sm);
}
.htitem__eg span {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  background: #fff;
  border: 1px solid rgba(31, 77, 70, .3);
  border-radius: 4px;
  padding: 0 5px;
  margin-right: 7px;
  vertical-align: 1px;
}

/* ---------- 异地重聚（long.html 第九节） ---------- */

/* 关键数字卡：收尾警示，用暖红顶边，和前面的浅绿卡区分 */
.keycard--alert {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--danger);
}
.keycard--alert .keycard__num {
  font-size: 34px;
  color: var(--danger);
}
.keycard--alert .keycard__t { color: var(--ink-2); }
.keycard--alert .keycard__s {
  color: var(--ink-3);
  border-top-color: var(--line);
}

/* 子标题：第九节内部拆成四段，需要二级层次 */
.rnsub {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 44px 0 10px;
  padding-left: 13px;
  border-left: 3px solid var(--danger);
  line-height: 1.5;
}
.rnsub__desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0 0 22px;
  padding-left: 16px;
}

/* 9.1 为什么重聚反而危险 */
.rnlist {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
.rncard {
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  border-top: 3px solid var(--danger);
}
.rncard__top {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 11px;
}
.rncard__no {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--danger);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.rncard__h {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
}
.rncard__p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}
.rncard__eg {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 12px 0 0;
  padding: 9px 12px;
  background: rgba(180, 60, 55, .05);
  border-radius: var(--r-sm);
}
.rncard__eg span,
.rncheck__eg span,
.rnmonth__eg span,
.rntalk__eg span {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--danger);
  background: #fff;
  border: 1px solid rgba(180, 60, 55, .3);
  border-radius: 4px;
  padding: 0 5px;
  margin-right: 7px;
  vertical-align: 1px;
}

/* 9.2 谁搬怎么定：清单式，左边一个圆点 */
.rncheck {
  margin-bottom: 4px;
}
.rncheck__item {
  display: flex;
  gap: 13px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.rncheck__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.rncheck__body { flex: 1; min-width: 0; }
.rncheck__h {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 7px;
  line-height: 1.55;
}
.rncheck__p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}
.rncheck__eg {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 10px 0 0;
  padding: 9px 12px;
  background: rgba(0, 0, 0, .022);
  border-radius: var(--r-sm);
}
.rncheck__eg span {
  color: var(--primary);
  border-color: rgba(31, 77, 70, .3);
}

/* 9.3 头三个月：纵向时间轴感 */
.rnmonth {
  display: flex;
  gap: 16px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-md);
  margin-bottom: 14px;
}
.rnmonth__no {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--danger);
  line-height: 1.1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.rnmonth__body { flex: 1; min-width: 0; }
.rnmonth__h {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.55;
}
.rnmonth__p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}
.rnmonth__eg {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 11px 0 0;
  padding: 9px 12px;
  background: rgba(180, 60, 55, .05);
  border-radius: var(--r-sm);
}

/* 9.4 提前戳破幻想 */
.rntalk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rntalk__item {
  padding: 20px 22px;
  background: rgba(31, 77, 70, .035);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.rntalk__h {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.55;
}
.rntalk__p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0;
}
.rntalk__eg {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 11px 0 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .7);
  border-radius: var(--r-sm);
}
.rntalk__eg span {
  color: var(--primary);
  border-color: rgba(31, 77, 70, .3);
}

/* ---------- 一起做点什么（together.html） ---------- */

/* 总原则块 */
.tgprinciple {
  padding: 26px 28px 24px;
  background: rgba(31, 77, 70, .045);
  border: 1px solid rgba(31, 77, 70, .18);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  margin-bottom: 46px;
}
.tgprinciple__h {
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.5;
}
.tgprinciple__p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.95;
  margin: 0 0 14px;
}
.tgprinciple__hint {
  font-size: 13.5px;
  color: var(--primary);
  line-height: 1.85;
  margin: 0;
  padding-top: 13px;
  border-top: 1px dashed rgba(31, 77, 70, .25);
}

/* 游戏前的硬条件标签条（免费 / 双端 / 联机） */
.tgbadges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tgbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--primary);
  background: var(--primary-wash);
  border: 1px solid rgba(31, 77, 70, .14);
  border-radius: var(--r-full);
  padding: 5px 13px 5px 9px;
}

.tgbadge__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  flex: none;
}

/* 游戏前的提醒条 */
.tgnote {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.85;
  padding: 13px 16px;
  background: rgba(0, 0, 0, .025);
  border-radius: var(--r-sm);
  margin-bottom: 20px;
}
.tgnote strong { color: var(--ink); font-weight: 700; }

/* 筛选条 */
.filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.filterbar__label {
  font-size: 13px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.filterbar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.fbtn {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 15px;
  cursor: pointer;
  transition: all .16s;
  white-space: nowrap;
}
.fbtn:hover { border-color: var(--primary); color: var(--primary); }
.fbtn.is-on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

/* 游戏分组 */
.gmgroup {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px 22px;
  margin-bottom: 18px;
  background: var(--surface);
}
.gmgroup--plain { border-left: 3px solid var(--tone-plain); }
.gmgroup--cool  { border-left: 3px solid var(--tone-cool); }
.gmgroup--warm  { border-left: 3px solid var(--tone-warm); }
.gmgroup--deep  { border-left: 3px solid var(--tone-deep); }

.gmgroup__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.gmgroup__no {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary);
  flex-shrink: 0;
}
.gmgroup--cool .gmgroup__no { color: var(--tone-cool); }
.gmgroup--warm .gmgroup__no { color: var(--tone-warm); }
.gmgroup--deep .gmgroup__no { color: var(--tone-deep); }
.gmgroup__meta { flex: 1; min-width: 0; }
.gmgroup__name {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px;
  line-height: 1.45;
}
.gmgroup__tag {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.6;
}
.gmgroup__count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(0, 0, 0, .045);
  border-radius: 99px;
  padding: 3px 11px;
  flex-shrink: 0;
}
.gmgroup__intro {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.gmgroup__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* 单款游戏卡 */
.gmcard {
  padding: 18px 20px 16px;
  background: rgba(0, 0, 0, .018);
  border: 1px solid rgba(0, 0, 0, .055);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
}
.gmcard__head { margin-bottom: 12px; }
.gmcard__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.gmcard__row { margin-bottom: 11px; }
.gmcard__label {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: 1px 7px;
  margin-bottom: 6px;
}
.gmcard__row--why .gmcard__label {
  color: var(--primary);
  background: rgba(15, 118, 110, .09);
}
.gmcard__row--how .gmcard__label {
  color: var(--primary);
  background: rgba(20, 184, 166, .14);
}
.gmcard__text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.88;
  margin: 0;
}
.gmcard__row--how .gmcard__text {
  color: var(--ink-2);
  line-height: 2;
}
.gmcard__text strong { color: var(--ink); font-weight: 700; }
.gmcard__note {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  margin: 12px 0 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .85);
  border-left: 2px solid rgba(31, 77, 70, .3);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.gmcard__note strong { color: var(--ink); font-weight: 700; }

/* 游戏避坑清单（放在 callout 里） */
.tgmlist { margin-top: 14px; }
.tgmitem {
  display: flex;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px dashed rgba(31, 77, 70, .18);
}
.tgmitem:first-child { border-top: 0; padding-top: 4px; }
.tgmitem__no {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.4;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.tgmitem__body { flex: 1; min-width: 0; }
.tgmitem__h {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.55;
}
.tgmitem__p {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0;
}

/* 非游戏活动卡 */
.actcard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px 22px;
  margin-bottom: 16px;
  background: var(--surface);
}
.actcard--plain { border-top: 3px solid var(--tone-plain); }
.actcard--cool  { border-top: 3px solid var(--tone-cool); }
.actcard--warm  { border-top: 3px solid var(--tone-warm); }
.actcard--deep  { border-top: 3px solid var(--tone-deep); }

.actcard__head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 13px;
}
.actcard__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border-radius: 50%;
  background: rgba(31, 77, 70, .08);
  color: var(--primary);
}
.actcard--cool .actcard__icon { background: var(--tone-cool-wash); color: var(--tone-cool); }
.actcard--warm .actcard__icon { background: var(--tone-warm-wash); color: var(--tone-warm); }
.actcard--deep .actcard__icon { background: var(--tone-deep-wash); color: var(--tone-deep); }

.actcard__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
  line-height: 1.45;
}
.actcard__no {
  font-size: 12px;
  color: var(--ink-3);
}
.actcard__why {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.95;
  margin: 0 0 18px;
}
.actcard__why strong { color: var(--ink); font-weight: 700; }
.actcard__how {
  padding: 16px 18px;
  background: rgba(0, 0, 0, .02);
  border-radius: var(--r-sm);
}
.actcard__howlabel {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.actcard__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tgstep;
}
.tgstep {
  position: relative;
  counter-increment: tgstep;
  padding-left: 27px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.9;
  margin-bottom: 9px;
}
.tgstep:last-child { margin-bottom: 0; }
.tgstep::before {
  content: counter(tgstep);
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.actcard--cool .tgstep::before { background: var(--tone-cool); }
.actcard--warm .tgstep::before { background: var(--tone-warm); }
.actcard--deep .tgstep::before { background: var(--tone-deep); }
.tgstep strong { color: var(--ink); font-weight: 700; }
.actcard__note {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.85;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
}
.actcard__note strong { color: var(--ink-2); font-weight: 700; }

/* 排期表 */
.tgtable {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--surface);
}
.tgrow {
  display: grid;
  grid-template-columns: 128px 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
.tgrow:first-child { border-top: 0; }
.tgrow__freq {
  padding: 17px 18px;
  background: rgba(31, 77, 70, .05);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}
.tgrow__time {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 3px;
}
.tgrow__what {
  padding: 17px 18px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.8;
}
.tgrow__why {
  padding: 17px 18px;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  border-left: 1px dashed var(--line);
}

/* 避坑：错误做法 → 有效替代 */
.tgpit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tgpit__item {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tgpit__swap {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tgpit__bad {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
  text-decoration: line-through;
  text-decoration-color: rgba(156, 59, 52, .45);
}
.tgpit__arrow {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
  flex-shrink: 0;
}
.tgpit__good {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.6;
}
.tgpit__why {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* ---------- 回到顶部（滚动过一屏后出现在右侧中下） ---------- */
/* 只在「页面够长」时由 JS 挂上 is-shown，短页面不打扰 */
.toTop {
  position: fixed;
  right: 18px;
  bottom: 12vh;
  z-index: 210;
  width: 52px;
  padding: 9px 0 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, color .15s, border-color .15s;
}

.toTop.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.toTop:hover,
.toTop:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.toTop svg { display: block; }

.toTop__ring {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  border: 1px solid transparent;
  pointer-events: none;
}

@media (max-width: 900px) {
  .toTop { right: 14px; bottom: 10vh; }
}

@media (max-width: 640px) {
  .toTop {
    right: 10px;
    bottom: 96px;
    width: 44px;
    padding: 7px 0 6px;
    font-size: 11px;
    border-radius: 10px;
  }
}

/* ---------- 同步看片：片单 ---------- */
.films {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-2);
}
.films__title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.5;
}
.films__desc {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.films__desc strong { color: var(--ink); font-weight: 700; }

/* 选片标准 */
.filmrules {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 15px 17px 4px;
  margin-bottom: 24px;
}
.filmrules__h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--primary);
  margin: 0 0 13px;
}
.filmrules__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 18px;
}
.filmrule { padding-bottom: 14px; }
.filmrule__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}
.filmrule__t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.55;
}
.filmrule__p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}
.filmrule__p strong { color: var(--ink); font-weight: 700; }

/* 片单分组 */
.filmset { margin-bottom: 26px; }
.filmset:last-child { margin-bottom: 0; }
.filmset__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 7px;
}
.filmset__no {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.5;
}
.filmset__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.filmset__intro {
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 13px;
}
.filmset__intro strong { color: var(--ink); font-weight: 700; }
.filmset__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 11px;
}

/* 单部电影 */
.film {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px 14px;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
}
.film__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  margin-bottom: 7px;
}
.film__t {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.film__meta {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .02em;
}
.film__why {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}
.film__why strong { color: var(--ink); font-weight: 700; }
.film__talk {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-2);
  margin: 9px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--line-2);
}
.film__talk strong { color: var(--ink); font-weight: 700; }
.film__talklabel {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-wash);
  border-radius: var(--r-full);
  padding: 1px 8px 2px;
  margin-right: 6px;
  vertical-align: 1px;
}

/* 网盘实操 */
.filmops {
  background: var(--primary-wash);
  border-radius: var(--r-md);
  padding: 16px 18px 18px;
  margin-bottom: 22px;
}
.filmops__h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--primary);
  margin: 0 0 12px;
}
.filmops__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tgstep;
}
.filmops__steps .tgstep {
  font-size: 13px;
  margin-bottom: 10px;
}

/* 选片雷区 */
.filmavoid {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 15px 17px 17px;
}
.filmavoid__h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--warm);
  margin: 0 0 12px;
}
.filmavoid__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}
.filmavoid__item { padding-left: 13px; border-left: 2px solid var(--warm-wash); }
.filmavoid__t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.55;
}
.filmavoid__p {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}
.filmavoid__p strong { color: var(--ink); font-weight: 700; }

/* ---------- 自我扩展：可扩展的方向 ---------- */
.expand { margin-bottom: 8px; }
.expand__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.45;
}
.expand__desc {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.expand__desc strong { color: var(--ink); font-weight: 700; }

/* 四条研究结论 */
.exptruths {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: 18px 20px 6px;
  margin-bottom: 30px;
}
.exptruths__h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--primary);
  margin: 0 0 15px;
}
.exptruths__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 26px;
}
.exptruth {
  display: flex;
  gap: 11px;
  padding-bottom: 17px;
}
.exptruth__no {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.exptruth__t {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.6;
}
.exptruth__p {
  font-size: 13px;
  line-height: 1.88;
  color: var(--ink-2);
  margin: 0;
}
.exptruth__p strong { color: var(--ink); font-weight: 700; }

/* 十个方向 */
.expdims__head { margin-bottom: 16px; }
.expdims__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 7px;
  line-height: 1.5;
}
.expdims__desc {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}
.expdims__desc strong { color: var(--ink); font-weight: 700; }

.expdim {
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 19px 21px 18px;
  margin-bottom: 14px;
  background: var(--surface);
}
.expdim--warm { border-left-color: var(--tone-warm); }
.expdim--cool { border-left-color: var(--tone-cool); }
.expdim--deep { border-left-color: var(--tone-deep); }
.expdim--plain { border-left-color: var(--tone-plain); }

.expdim__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.expdim__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  background: var(--primary-wash);
  color: var(--primary);
}
.expdim--warm .expdim__icon { background: var(--tone-warm-wash); color: var(--tone-warm); }
.expdim--cool .expdim__icon { background: var(--tone-cool-wash); color: var(--tone-cool); }
.expdim--deep .expdim__icon { background: var(--tone-deep-wash); color: var(--tone-deep); }
.expdim__name {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}
.expdim__why {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.expdim__why strong { color: var(--ink); font-weight: 700; }

.expdim__todos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.expdo {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px 13px;
}
.expdo:first-child:nth-last-child(3) { grid-column: 1 / -1; }
.expdo__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 9px;
  margin-bottom: 5px;
}
.expdo__t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
}
.expdo__cost {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-wash);
  border-radius: var(--r-full);
  padding: 1px 9px 2px;
  white-space: nowrap;
}
.expdo__how {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}
.expdo__how strong { color: var(--ink); font-weight: 700; }

.expdim__remote {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
}
.expdim__remote strong { color: var(--ink); font-weight: 700; }
.expdim__remotelabel {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--warm);
  background: var(--warm-wash);
  border-radius: var(--r-full);
  padding: 1px 9px 2px;
  margin-right: 7px;
  vertical-align: 1px;
}

/* 20 件 7 分钟小事 */
.expquick {
  background: var(--primary-wash);
  border-radius: var(--r-md);
  padding: 19px 21px 21px;
  margin: 26px 0 18px;
}
.expquick__h {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 7px;
  line-height: 1.5;
}
.expquick__h strong { color: var(--primary); font-weight: 700; }
.expquick__desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 15px;
}
.expquick__desc strong { color: var(--ink); font-weight: 700; }
.expquick__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.expchip {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid rgba(31, 77, 70, .13);
  border-radius: var(--r-full);
  padding: 5px 14px;
}

/* 独自扩展也可以 */
.expsolo {
  border-left: 3px solid var(--warm);
  background: var(--warm-wash);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 17px 20px 18px;
  margin-bottom: 18px;
}
.expsolo__h {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 7px;
  line-height: 1.5;
}
.expsolo__p {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
}
.expsolo__p strong { color: var(--ink); font-weight: 700; }

/* 四个坑 */
.expavoid {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 17px 20px 19px;
}
.expavoid__h {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--warm);
  margin: 0 0 13px;
}
.expavoid__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.expavoid__item { padding-left: 13px; border-left: 2px solid var(--warm-wash); }
.expavoid__t {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.55;
}
.expavoid__p {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}
.expavoid__p strong { color: var(--ink); font-weight: 700; }

/* ---------- 条目内的「联接」入口（跳到独立页） ---------- */
.item__jump {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(31, 77, 70, .18);
  border-radius: var(--r-md);
  background: var(--primary-wash);
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.item__jump:hover,
.item__jump:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.item__jumpico { flex-shrink: 0; font-size: 14px; }
.item__jumptxt { flex: 1; }
.item__jumparrow { flex-shrink: 0; font-size: 14px; }

/* ---------- 新页面的响应式 ---------- */
@media (max-width: 900px) {
  .keyrow { grid-template-columns: 1fr; }
  .apology-grid { grid-template-columns: 1fr; }
  .pitlist { grid-template-columns: 1fr; }
  .pitlist .pitcard:first-child { grid-column: auto; }
  .htlayer__items { grid-template-columns: 1fr; }
  .rnlist { grid-template-columns: 1fr; }
  .rntalk { grid-template-columns: 1fr; }
  .gmgroup__items { grid-template-columns: 1fr; }
  .tgpit { grid-template-columns: 1fr; }
  .tgrow { grid-template-columns: 110px 1fr; }
  .tgrow__why {
    grid-column: 2;
    border-left: 0;
    padding-top: 0;
  }
  .filmrules__grid { grid-template-columns: 1fr; gap: 0; }
  .filmset__items { grid-template-columns: 1fr; }
  .filmavoid__list { grid-template-columns: 1fr; }
  .exptruths__grid { grid-template-columns: 1fr; gap: 0; }
  .expdim__todos { grid-template-columns: 1fr; }
  .expdo:first-child:nth-last-child(3) { grid-column: auto; }
  .expavoid__list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .part { margin-bottom: 44px; }
  .part__no { width: 28px; height: 28px; font-size: 13px; }
  .part__title { font-size: 19px; }
  .ldparadox { padding: 22px 20px 20px 24px; }
  .ldparadox__h { font-size: 16px; }
  .pitcard { padding: 20px 18px; }
  .pitcard__h { font-size: 15px; }
  .htlayer { padding: 20px 16px; }
  .htlayer__name { font-size: 15.5px; }
  .htlayer__freq { display: block; margin: 6px 0 0; }
  .htitem { padding: 14px 14px; }
  .rnsub { font-size: 16.5px; margin-top: 36px; }
  .rnsub__desc { padding-left: 0; }
  .rncard { padding: 20px 18px; }
  .rncard__h { font-size: 14.5px; }
  .rncheck__item { padding: 16px 16px; }
  .rnmonth { padding: 18px 16px; gap: 12px; }
  .rnmonth__no { font-size: 20px; }
  .rntalk__item { padding: 18px 16px; }
  .tgprinciple { padding: 22px 20px 20px; }
  .tgprinciple__h { font-size: 16px; }
  .tgbadges { gap: 6px; margin-bottom: 13px; }
  .tgbadge { font-size: 12px; padding: 4px 11px 4px 8px; }
  .gmgroup { padding: 20px 16px 18px; }
  .gmgroup__name { font-size: 15.5px; }
  .gmgroup__count { display: none; }
  .gmcard { padding: 16px 15px; }
  .gmcard__name { font-size: 14.5px; }
  .actcard { padding: 20px 17px 18px; }
  .actcard__name { font-size: 16px; }
  .actcard__how { padding: 14px 14px; }
  .films { margin-top: 18px; padding-top: 16px; }
  .films__title { font-size: 15.5px; }
  .films__desc { font-size: 13px; }
  .filmrules { padding: 13px 14px 2px; }
  .filmset__name { font-size: 14.5px; }
  .film { padding: 12px 13px 13px; }
  .film__t { font-size: 14px; }
  .film__meta { font-size: 11px; }
  .filmops { padding: 14px 15px 16px; }
  .filmavoid { padding: 14px 15px 15px; }
  .expand__title { font-size: 18.5px; }
  .expand__desc { font-size: 13.5px; }
  .exptruths { padding: 15px 15px 4px; }
  .expdim { padding: 16px 15px 15px; }
  .expdim__name { font-size: 14.5px; }
  .expdo { padding: 11px 12px 12px; }
  .expquick { padding: 15px 15px 17px; }
  .expquick__h { font-size: 14.5px; }
  .expchip { font-size: 12px; padding: 4px 12px; }
  .expsolo { padding: 15px 16px 16px; }
  .expavoid { padding: 15px 15px 16px; }
  .item__jump { font-size: 13px; padding: 11px 13px; gap: 8px; }
  .tgrow { grid-template-columns: 1fr; }
  .tgrow__freq { padding: 13px 16px; }
  .tgrow__what { padding: 4px 16px 12px; }
  .tgrow__why { grid-column: 1; padding: 0 16px 14px; }
  .tgpit__item { padding: 18px 16px; }
  .week { padding: 20px 18px; }
  .week__theme { font-size: 17px; }
  .step { padding: 20px 18px; gap: 14px; }
  .step__no { font-size: 21px; }
  .microgroup { padding: 18px; }
  .avoid { padding: 18px; }
  .metric { gap: 10px; }
  .metric__dots { width: 100%; }
  .dot { width: 32px; height: 32px; font-size: 13px; }
  .rev-form { padding: 20px 18px; }
  .rev-entry__box { padding: 20px 18px; }
  .rev-chart { padding: 18px 14px; }
  .weekbar__note { margin-left: 0; width: 100%; }
  .faqsearch { flex-direction: column; align-items: stretch; }
  .faqsearch__count { text-align: right; }
  .caveat { padding: 20px 18px; gap: 14px; }
  .caveat__no { font-size: 21px; }
  .siggroup__head { padding: 16px 18px; }
  .siggroup__body { padding: 4px 18px 12px; }
  .askq { padding: 20px 18px; }
  .askq__q { font-size: 16.5px; }
  .decide-write { padding: 20px 18px; }
  .decide-note { padding: 16px 18px; }
  .kindcard { padding: 20px 18px; }
  .rpcard { padding: 18px 18px; }
  .apology-col { padding: 20px 18px; }
  .rulecard { padding: 20px 18px; }
  .kindcard__tag { margin-left: 0; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================
 * 总目录 catalog.html
 * =========================================================== */
.catgroup { margin-bottom: 54px; }
.catgroup:last-of-type { margin-bottom: 26px; }

.catgroup__head {
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--primary);
}

.catgroup__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.5;
}

.catgroup__note {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0;
}

.catgroup__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.catcard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 18px 20px 16px;
}

.catcard__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 8px;
}

.catcard__eyebrow {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary);
  background: var(--primary-wash);
  border-radius: var(--r-full);
  padding: 3px 9px;
}

.catcard__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
  transition: color .18s;
}

.catcard__go {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-3);
  transition: transform .18s, color .18s;
}

.catcard__head:hover .catcard__title { color: var(--primary); }
.catcard__head:hover .catcard__go { color: var(--primary); transform: translateX(3px); }

.catcard__desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-2);
  margin: 0 0 13px;
}

.catsecs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.catsec {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 3px 10px;
  transition: background .15s, color .15s, border-color .15s;
}

.catsec:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

@media (max-width: 900px) {
  .catgroup__items { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .catgroup { margin-bottom: 40px; }
  .catgroup__name { font-size: 16.5px; }
  .catcard { padding: 16px 15px 14px; }
  .catcard__title { font-size: 15px; }
  .catcard__eyebrow { font-size: 10.5px; padding: 2px 8px; }
  .catcard__desc { font-size: 12.5px; }
  .catsec { font-size: 11.5px; padding: 3px 9px; }
}

/* 窄屏的目录条收窄一点：标签让位给正文，药丸也缩一号 */
@media (max-width: 640px) {
  .toc { padding: 7px 10px; margin-bottom: 30px; }
  .toc__label { display: none; }
  .toc__scroll { gap: 5px 6px; }
  .toc__i { font-size: 11.5px; padding: 3px 9px; max-width: 240px; }
}

/* ===========================================================
 * 阅读体验层（2026-10-10）
 * -----------------------------------------------------------
 * 起因是全站量了一遍"读起来累不累"，查出三件事——都不是不好看，
 * 而是"看不动 / 点不准"：
 *   ① 桌面正文行长 61~72 字/行（中文舒适区 33~38 字），眼睛会跳行；
 *   ② 一批正文掉到 13~14.5px，手机上太小；
 *   ③ 手机上可点元素普遍只有 24~26px 高（页脚链接、目录药丸），手指点不准。
 *
 * 这一层刻意放在文件最末尾：用同名选择器覆盖前面，删掉整段就能回退。
 * 只动"阅读与触达"，不动布局骨架、不改类名、不碰 JS。
 * =========================================================== */

/* ---------- ① 行长：正文段落一律收在 --readw（38em，15px 下约 570px） ---------- */
.item__body,
.item__extra,
.section__desc,
.step__p,
.scene__pp,
.faq__at,
.ref__text,
.expsolo__p,
.tgmitem__p,
.gmcard__text,
.pitcard__extra,
.actcard__note,
.tgpit__why,
.filmrule__p {
  max-width: var(--readw);
}

/* 2026-10-15 修正：页面升到 1200px 后，白卡片已占满 874px 正文列，
   但卡内正文仍被 --readw(720) 收住，卡右侧空出一大片（用户截图反馈）。
   改为让卡内正文填满卡片：去掉卡内 --readw 上限，阅读宽度随卡片走。
   首页含长文的卡（.qa__i / .essay）同样放开，避免右侧留白。 */
.tocshell__main .item__body,
.tocshell__main .item__extra,
.tocshell__main .section__desc,
.tocshell__main .step__p,
.tocshell__main .scene__pp,
.tocshell__main .faq__at,
.tocshell__main .ref__text,
.tocshell__main .expsolo__p,
.tocshell__main .tgmitem__p,
.tocshell__main .gmcard__text,
.tocshell__main .pitcard__extra,
.tocshell__main .actcard__note,
.tocshell__main .tgpit__why,
.tocshell__main .filmrule__p,
.qa__i .qa__a,
.essay .essay__p {
  max-width: none;
}

/* ---------- ② 字号下限：正文不低于 15px，说明性小字不低于 14px ---------- */
.expsolo__p    { font-size: 15px;   line-height: 1.9; }
.ref__text     { font-size: 15px;   line-height: 1.85; }
.tgmitem__p    { font-size: 15px;   line-height: 1.9; }
.filmrule__p   { font-size: 15px;   line-height: 1.9; }
.gmcard__text  { font-size: 14.5px; line-height: 1.8; }
.pitcard__extra{ font-size: 14.5px; line-height: 1.85; }
.tgpit__why    { font-size: 14.5px; line-height: 1.85; }
.actcard__note { font-size: 14px;   line-height: 1.8; }

/* ---------- ③ 触达：把可点元素撑到能点准 ----------
   条件是「窄窗口 **或** 触屏」，不是只有窄窗口。
   为什么：光看宽度会漏掉**触摸平板横屏**（1024px 宽，不满足 max-width:860），
   那里同样是手指在点，热区却按桌面尺寸给。
   38px 是上一轮我自己取的"看着够用"的值 —— 手指上并不够，统一 44。
   44 的来源：Apple HIG 44pt / Material 48dp，取保守的那个。 */
@media (max-width: 860px), (pointer: coarse) {
  .nav__brand            { min-height: 44px; display: flex; align-items: center; }
  .navtoggle             { min-height: 44px; }
  /* ⚠️ 下拉/平铺的链接是**竖排**容器，垂直居中要用 justify-content，
     不能用 align-items —— 后者管的是横向，会把标签挤到正中间。
     这条媒体查询同时命中 max-width:860，所以写错的话"窄窗口也中招"，
     2026-10-10 菜单截图才发现：整列标签全居中，左右都不齐。 */
  .navgroup__panel a     { min-height: 44px; display: flex; flex-direction: column;
                           justify-content: center; align-items: flex-start; }
  .footer__col a         { min-height: 44px; display: flex; align-items: center; padding: 0; }
  .footer__quick a       { min-height: 44px; display: inline-flex; align-items: center; }
  .toc__i                { min-height: 44px; display: inline-flex; align-items: center; }
  .catsec                { min-height: 44px; display: inline-flex; align-items: center; }
  .catcard__head         { min-height: 44px; display: flex; align-items: center; }
  /* 下面这几个 2026-10-10 晚用触屏探针（tools/touch_check.py）量出来的：
     .fbtn 38px、.btn--sm 37px —— 窄窗口体检看不见，因为无头浏览器
     默认上报 hover:hover / pointer:fine，得靠 CDP 强制模拟触屏才暴露。
     .btn--sm 是"小按钮"通用类（decide / review / plan / checkup 都在用），
     所以在这一层修，比逐个页面点名稳。 */
  .btn--sm               { min-height: 44px; }
  .fbtn                  { min-height: 44px; display: inline-flex; align-items: center; }
  .decide-write__bar .btn{ min-height: 44px; }
}

/* ---------- ④ 键盘焦点：之前全站没有可见焦点态，Tab 走一圈什么都看不见 ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- ⑤ 层次：长文卡片从"贴住"改成"轻轻浮起" ---------- */
.item    { box-shadow: var(--shadow-sm); }
.catcard { box-shadow: var(--shadow-sm); }

/* 主按钮压一点阴影，让它比次按钮"重"一档（绛红调，2026-10-15 随行动色一起换） */
.btn--primary { box-shadow: 0 2px 10px rgba(171, 53, 81, .18); }
.btn--primary:hover { box-shadow: 0 4px 16px rgba(171, 53, 81, .26); }

/* ---------- ⑥ 手机端目录条：从"折成四行"改成"一行横滑" ----------
   折行时这条目录会吃掉首屏 160px 左右，把标题挤到屏幕 40% 以下。
   手机上先该看见的是标题，目录横滑一下就能看到全部。
   min-width:0 是必须的：不加的话 flex 子项守着自己的 min-content 宽度，
   撑破父容器而不是自己滚动。 */
@media (max-width: 640px) {
  .toc { padding: 9px 0 9px 14px; }
  .toc__scroll {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 14px;
    -webkit-overflow-scrolling: touch;
  }
  .toc__scroll::-webkit-scrollbar { display: none; }
  .toc__i { flex: 0 0 auto; max-width: none; }
}

/* ---------- ⑦ 窄屏的「本页目录」抽屉 ----------
   窄屏只有一个横滑目录条，而且它不吸顶。long（手机端 38 屏）、together（34 屏）
   这类页面滚到中段之后就没法跳章节了。这里补一个右下角的浮动按钮 + 底部抽屉。
   按钮只在窄屏显示，并且要滚过目录条之后才淡入，免得一进页面就压着标题。 */
.tocfab {
  position: fixed;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 205;
  display: none;                       /* 宽屏有左栏，不参与 */
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, color .18s;
}
.tocfab.is-show { opacity: 1; visibility: visible; transform: none; }
.tocfab:active { color: var(--primary); }

.tocfab__n {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.tocsheet { position: fixed; inset: 0; z-index: 300; display: none; }
.tocsheet.is-open { display: block; }

.tocsheet__mask {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 24, .42);
  animation: tocFade .18s ease;
}

.tocsheet__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(26, 26, 24, .18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: tocRise .22s cubic-bezier(.2, .8, .3, 1);
}

.tocsheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid var(--line);
}

.tocsheet__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-2);
}

.tocsheet__close {
  width: 44px;
  height: 44px;
  margin: -10px -6px -10px 0;
  border: 0;
  background: none;
  border-radius: var(--r-full);
  color: var(--ink-3);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.tocsheet__close:active { background: var(--surface-2); color: var(--ink); }

.tocsheet__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 12px;
}

.tocsheet__i {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 9px 16px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.tocsheet__i:active { background: var(--surface-2); }
.tocsheet__i.is-active { background: var(--primary-wash); color: var(--primary); font-weight: 600; }

.tocsheet__no {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tocsheet__i.is-active .tocsheet__no { color: var(--primary); }

/* 抽屉开着的时候不要再滚底下的正文 */
html.tocsheet-lock { overflow: hidden; }

@keyframes tocFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tocRise { from { transform: translateY(20px); opacity: .55 } to { transform: none; opacity: 1 } }

@media (max-width: 1100px) {
  .tocfab { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .tocfab { transition: none; }
  .tocsheet__mask, .tocsheet__panel { animation: none; }
}

/* ---------- ⑧ 触屏适配：全站原本一条 hover:none 规则都没有 ----------
   最典型的是金句卡的复制按钮：opacity:0，只在 .quote:hover 时显示，
   但**没有 pointer-events:none** —— 在触屏上就是一个"看不见却点得中"的死角，
   手指扫过去会莫名其妙复制一段话。
   桌面保持"悬停才出现"，触屏改成常显 + 撑到 44px。 */
.quote__copy { pointer-events: none; }
.quote:hover .quote__copy,
.quote__copy:focus-visible,
.quote__copy.is-ok { pointer-events: auto; }

@media (hover: none) {
  .quote__copy {
    opacity: 1;
    pointer-events: auto;
    width: 44px;
    height: 44px;
    right: 10px;
    bottom: 10px;
    border-radius: var(--r-md);
    font-size: 16px;
    box-shadow: var(--shadow-sm);
  }
  /* 给它腾出位置，别压住最后一行字 */
  .quote { padding-bottom: 62px; }

  /* 只占一行文字高的链接，用伪元素把命中区撑开，不改视觉 */
  .qgroup__from { position: relative; }
  .qgroup__from::after {
    content: "";
    position: absolute;
    inset: -10px -8px;
  }
}

/* ===========================================================
 * 首页正文块（2026-10-10）
 * -----------------------------------------------------------
 * 原来首页 100% 是入口：简介 + 4 个数字 + 16 张卡 + 一段尾引文，
 * 读者知道站怎么逛，却读不到任何一件关于关系本身的事 —— 这就是它显薄的原因。
 * 这三块把站里已有的实料搬上来：① 全站的地基（why 第一节）
 * ② 今天就能做的四件事（行动手册的「每天三分钟」）③ 三个最常被问的问题。
 * 内容全部现取 content.js，这里只管排版。整段删掉即可回退。
 * =========================================================== */

/* ---------- ① 先读这一段 ----------
   做成"一段文章"：左边一道主色竖线当引文标记，左边栏放编号+标题，
   右边栏放正文。左栏用 232px —— 跟站里左栏目录同一个基准，节奏是对上的；
   右栏剩下的宽度刚好放得下 --readw（42em）的正文，一行 42 字。
   早先做的是"窄卡片左对齐"，右半边空一大片，跟上面满宽的四张数字卡不搭。 */
.essay {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  column-gap: 40px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  padding: 28px 34px 24px;
}

.essay__head { grid-column: 1; }
.essay__body { grid-column: 2; }
.essay__foot { grid-column: 1 / -1; }

.essay__no {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--primary-soft);
  margin-bottom: 6px;
}

.essay__title {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 6px;
}

.essay__sub { font-size: 13.5px; line-height: 1.7; color: var(--warm); margin: 0; }

.essay__p {
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: var(--readw);
}
.essay__p:last-child { margin-bottom: 0; }

.essay__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.essay__src { font-size: 12px; color: var(--ink-3); }
.essay__go { font-size: 13.5px; font-weight: 600; color: var(--primary); margin-left: auto; }

/* ---------- ② 今天就能做的四件事 ---------- */
.daily {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 22px 18px;
}

.daily__t {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 10px;
}

.daily__no {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--primary-soft);
}

/* margin-bottom:auto 把出处压到底 —— 四张卡正文长短不一，这样四条底线齐 */
.daily__p { font-size: 14.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 auto; }

.daily__src {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

/* ---------- ③ 三个最常被问的问题 ----------
   单栏而不是三栏：一条答复 130~180 字，分三栏一行只剩二十来个字，眼睛会跳。
   所以竖着排，答案限制在 --readw 以内。 */
.qa { display: flex; flex-direction: column; gap: 16px; }

.qa__i {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 26px;
}

.qa__q {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 10px;
}

/* 15px 而不是卡片的 14.5px：这一条 150~180 字，是全站除正文页外最长的一段散文，
   站点自己定的下限是"正文不低于 15px"（.daily__p 那种百字内的卡片文字才用 14.5，
   跟既有的 .pillar__desc / .figure__text 一致）。 */
.qa__a {
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
  max-width: var(--readw);
}

/* 每块底下那句"还有更多"的钩子 */
.hookmore { margin: 22px 0 0; text-align: center; }
.hookmore a { font-size: 13.5px; font-weight: 600; color: var(--primary); }

/* 这两处是"只有一行字高"的链接（实测 .essay__go 24px、.hookmore a 18px），
   触屏上点不准。跟站里 .qgroup__from 一样：用伪元素把命中区撑到 44，
   视觉一个字都不动。条件是"窄窗口或触屏"，跟 ③ 触达 那段一致。 */
@media (max-width: 860px), (pointer: coarse) {
  .essay__go, .hookmore a { position: relative; }
  .essay__go::after,
  .hookmore a::after {
    content: "";
    position: absolute;
    inset: -14px -10px;
  }
}

@media (max-width: 900px) {
  /* 两栏在这里合回一栏：再窄下去右栏只剩二十来个字一行 */
  .essay { grid-template-columns: 1fr; row-gap: 14px; }
  .essay__head, .essay__body, .essay__foot { grid-column: 1; }
}

@media (max-width: 640px) {
  .essay { padding: 22px 18px 18px; }
  .essay__title { font-size: 19px; }
  .qa__i { padding: 18px 18px; }
  .daily { padding: 18px 18px 16px; }
}

/* ============================================================
   首页紧凑化（2026-10-11）
   ------------------------------------------------------------
   起因：首页加了三块正文本意是"更丰富"，结果页高从 4073 涨到 6296（桌面）/
   8182 涨到 11273（手机）——手机涨了 38%。但用 gap_check 逐块量过之后，
   发现"空白"并不在块与块之间（相邻块空隙全是 0），而是长在三处：

     ① [data-more] 那张 section：桌面 2116px（全页 34%）、手机 4671px（41%）。
        里面 13 张 .pillar 沿用了"三部分入口卡"的大尺寸——40×40 图标块、
        20px 标题、28/24 内边距。但那是给首页最上面前三张"主推卡"用的规格，
        下面 13 张是索引，同样的规格 13 张堆起来就是 2000 多 px。
     ② 纵向 padding：桌面 6 个 section 光 padding 就 300px，手机 504px；
        每个 section__head 固定 30px 下边距，6 个又是 180px。
     ③ .divider 的 margin 56/30 = 86px，夹在 3 张主卡和 13 张索引卡中间。

   所以这一段的做法是：
     · 把"索引卡"降一级视觉规格（.page-home [data-more] .pillar），
       并把那张 grid 从 3 列提到 4 列（桌面）——13 张从 5 行压到 4 行。
       ⚠️ 只降 [data-more] 里的，前面 [data-pillars] 的三张主推卡**不动**：
          那三张是首页的分区入口，是"重点"，该保持大尺寸。两类卡在同一个
          页面上做出大小差，本身就是层次——原来 16 张一样大，才是"没有层次"。
     · 收紧首页各 section 的纵向 padding 与 section__head 下边距。
     · 压缩 .divider 上下留白。

   作用域：整段以 .page-home 前缀限定（body 上那个类），别页一律不受影响。
   回退：删掉这一段 + index.html 上 <body> 的 class="page-home" 即可。
   ⚠️ 这一段只动纵向间距和卡片内边距，**不动任何宽度**——
      没碰 --maxw / --readw / 左栏宽，所以"卡片右边空一块"那类耦合问题不会出现。
   ⚠️ 正文字号一个都没改。首页正文仍有 15px 下限、42 字/行上限（ux_check 可验）。
   ============================================================ */

/* ---------- ① 收紧首页各段纵向留白 ---------- */
/* 第一个 section（四个数字）原来 60px，比别的段多 20px，没有理由——统一到 34。 */
.page-home .section { padding: 34px 0; }
.page-home .section--tight { padding: 34px 0; }
/* 首尾各让一点：hero 本来就压着 nav，第一个 section 不必再撑 34；
   最后一段（收尾引文）直接接页脚，下边距收掉。 */
.page-home .hero + .section { padding-top: 26px; }
.page-home .section:last-of-type { padding-bottom: 20px; }
/* 段标题块：30 → 22。首页每段都有一行 eyebrow + 一行主标题 + 一行说明，
   30px 的缺口在"段与段本来就贴在一起"的首页里显得散。 */
.page-home .section__head { margin-bottom: 22px; }
/* 三条线卡与下面索引卡之间的那道分隔条：86px → 48px */
.page-home .divider { margin: 30px 0 18px; }

/* ---------- ② 数字卡：往"更实"收一格 ---------- */
/* 46px 的数字在手机上是巨大的一坨；收到 40 仍然够醒目，但四张卡不再虚高。 */
.page-home .figure { padding: 20px 18px; }
.page-home .figure__num { font-size: 40px; margin-bottom: 2px; }
.page-home .figure__label { margin-bottom: 10px; }
.page-home .figure__src { margin-top: 12px; padding-top: 9px; }

/* ---------- ③ 索引卡降级：13 张 .pillar 换成紧凑规格 ---------- */
.page-home [data-more] .pillar { padding: 16px 16px 14px; }
.page-home [data-more] .pillar__mark {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  font-size: 14px;
  margin-bottom: 10px;
}
.page-home [data-more] .pillar__title { font-size: 16px; margin: 0 0 6px; line-height: 1.45; }
.page-home [data-more] .pillar__desc  { font-size: 13.5px; line-height: 1.7; margin: 0 0 10px; }
.page-home [data-more] .pillar__more  { font-size: 12.5px; }
/* 卡片整体上移的悬停位移在密集网格里会互相撞，减到 2px */
.page-home [data-more] .pillar:hover { transform: translateY(-2px); }

/* 三张主推卡也略收一格——它们保持"大"，但不必大到 28/24。
   跟索引卡的大小差仍然清楚（20px 标题 vs 16px、40×40 图标 vs 26×26）。 */
.page-home [data-pillars] .pillar { padding: 22px 20px; }
.page-home [data-pillars] .pillar__mark { width: 34px; height: 34px; font-size: 16px; margin-bottom: 12px; }
.page-home [data-pillars] .pillar__title { font-size: 18px; }
.page-home [data-pillars] .pillar__desc { font-size: 14px; line-height: 1.75; margin: 0 0 12px; }

/* ---------- ④ 索引区换 4 列：12 张从 5 行压到 3 行 ---------- */
/* 只在够宽时生效。1100 是量出来的：再窄下去 4 列每列不到 210px，
   13.5px 的描述会挤成一行六七个字，比多一行更难读。
   ⚠️ 这里 4 列之所以能整除，是因为「总目录」已经拆成下面的 .moretail 通栏条，
     网格里只剩 12 张 = 4×3。原来的 13 张在 3 列/4 列下尾行都会留空角。 */
@media (min-width: 1101px) {
  .page-home [data-more] { grid-template-columns: repeat(4, 1fr); }
}
/* 1000 这条是捡回来的：.grid--3 原本只在 ≤900 才塌成 2 列，
   于是 901~1000 这一段 3 列每列只有 290 左右，卡片又高又窄。
   首页索引卡多、行数敏感，这里让它早一步塌。 */
@media (max-width: 1000px) and (min-width: 861px) {
  .page-home [data-more] { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ④b 索引区的收尾条（总目录） ---------- */
/* 通栏一条，补掉上面网格的尾行空角。视觉是一行"字"，不是卡，
   所以刻意做得比卡扁——高度只有卡的三分之一左右，跟 12 张卡形成收束感。 */
.page-home .moretail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--gap);
  padding: 14px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.page-home .moretail:hover { border-color: var(--primary-soft); background: var(--surface); }
.page-home .moretail__mark {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--primary);
  font-family: var(--font-serif);
  font-weight: 700;
}
.page-home .moretail__title {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.page-home .moretail__desc {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}
.page-home .moretail__more {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
}
/* 窄屏：这条挤不下"标题 + 说明 + 入口"三截，说明先收掉，
   只留 mark + 标题 + 入口。22 字以内的短条比三行折行的长条好扫。 */
@media (max-width: 860px) {
  .page-home .moretail { flex-wrap: wrap; gap: 6px 10px; padding: 13px 16px; }
  .page-home .moretail__desc { display: none; }
  .page-home .moretail__more { margin-left: auto; }
}

/* ---------- ⑤ 手机端：间距再收一档 ---------- */
@media (max-width: 640px) {
  .page-home .section,
  .page-home .section--tight { padding: 26px 0; }
  .page-home .hero + .section { padding-top: 20px; }
  .page-home .section__head { margin-bottom: 18px; }
  .page-home .divider { margin: 22px 0 14px; }
  .page-home .figure { padding: 18px 16px; }
  .page-home .figure__num { font-size: 36px; }
  .page-home [data-more] .pillar { padding: 15px 15px 13px; }
  .page-home [data-pillars] .pillar { padding: 20px 18px; }
  /* 首页的 essay / daily / qa 三段原来的 640 覆盖在文件更早处，
     这里不再重复写——保持它们各自的内边距不动，只由上面的段间距收。 */
}

/* ---------- ⑥ 首页页脚上边距 ---------- */
/* .footer{ margin-top:70px } 是全站统一的，别动。
   但首页最后一段是"收尾引文"，本身收尾意已经很足，再隔 70 就是白白一段空。
   实测：这一处让首页底部多出约 70px 的无内容区（页脚前那道"大空隙"就是它）。
   只在首页收到 34。 */
.page-home .footer { margin-top: 34px; }
@media (max-width: 640px) {
  .page-home .footer { margin-top: 26px; }
}

/* ===========================================================
   2026-10-15：全站「卡片式」→ 分隔线行列表
   指令：江哥「把网站里面很多卡片式的，都改成列表格式」，选定的做法是
   「全站统一改 + 分隔线行」——去掉边框/阴影/圆角/底色/外边距，每条上下
   排列，行间 1px 细线分隔；保留编号/标题/说明/色调强调。
   仅作用于下列卡片类，不动 .quote（金句墙，带复制按钮）、.filmavoid__item
   （本就是左线列表）等专用块。
   =========================================================== */
.item,
.catcard,
.gmcard,
.pitcard,
.actcard,
.expsolo,
.tgmitem,
.filmrule,
.film,
.qa__i,
.figure,
.pillar,
.card {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 18px 0 !important;
}

/* 危险条目（四骑士）：保留红色左边线，提示"这是警示" */
.item--danger {
  border-left: 3px solid var(--danger) !important;
  padding-left: 16px !important;
}

/* 行动卡：原"色调顶条"转为左侧色调强调条（plain/cool/warm/deep 四色） */
.actcard--plain { border-left: 3px solid var(--tone-plain) !important; padding-left: 16px !important; }
.actcard--cool  { border-left: 3px solid var(--tone-cool)  !important; padding-left: 16px !important; }
.actcard--warm  { border-left: 3px solid var(--tone-warm)  !important; padding-left: 16px !important; }
.actcard--deep  { border-left: 3px solid var(--tone-deep)  !important; padding-left: 16px !important; }

/* 卡片悬浮：去掉位移与阴影，改用极浅底色（列表态不需要"浮起"） */
.card--hover:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--bg-soft) !important;
}
.pillar:hover,
.catcard:hover,
.gmcard:hover,
.pitcard:hover,
.actcard:hover,
.film:hover,
.item:hover { background: var(--bg-soft) !important; }

/* ---------- 父容器：多列网格 → 单栏（分隔线行要一条一项） ---------- */
[data-figures],
[data-pillars],
.page-home [data-more],
[data-more],
.catgroup__items,
.gmgroup__items,
.pitlist,
.exptruths__grid,
.expavoid__list,
.filmrules__grid,
.filmset__items,
.filmavoid__list,
.tgpit,
.tgrow {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

/* 首页问答容器：去掉卡片间 gap，让分隔线贴紧 */
.qa { gap: 0 !important; }