/* ══════════════════════════════════════════════════════════════
   心元 · 生命体视觉语言 V5.0  （会呼吸的门面）
   ─────────────────────────────────────────────────────────────
   V5 对症王总 8 条建议：
   ①重点着色加粗  ②草绿替代墨绿  ③日/夜模式实测  ④跳转有标识且加粗着色
   ⑤卡片做 3D 凹凸  ⑥标题配图标(以图释义)  ⑦四级字号规格(路标感)
   ⑧呼吸/起伏/生命力
   ─────────────────────────────────────────────────────────────
   字号规格（路标体系，越大越靠近"方向"）：
     h1  主标题   2.6rem  (41.6px)  一天只出现一次，最大
     h2  段标题   1.75rem (28px)    每段的路牌
     b   内容标题 1.0625rem(17px)   卡片里的小标题
     p   正文     1.125rem(18px)
     sm  辅助     0.9375rem(15px)
     xs  注脚     0.84375rem(13.5px) 下限，不再小
   合规底线：字号 ≥13.5px｜触控 ≥44px｜深色模式｜安全区｜body 底 ≥100px
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── 文字 ── */
  --ink:#16241C; --ink2:#4F6156; --ink3:#7C8E82;
  /* ── 底色：草绿系（治"墨绿太沉重"）── */
  --paper:#FBFAF5;                  /* 暖白 */
  --paper2:#F3F9EC;                 /* 淡草绿（更轻，不抢文字） */
  --deep:#438F57;  --deep2:#57AC6D; /* 草绿·中→亮（再提亮，去墨感） */
  --deep-ink:#F3F8F1;
  /* ── 品牌色 ── */
  --green:#37995B; --green2:#5FC468; --leaf:#8AD25A;   /* 草绿更清爽 */
  --gold:#C9A961; --gold2:#E8CE8F;
  /* ── 字号规格 ── */
  --fs-xs:0.84375rem;  /* 13.5 下限 */
  --fs-sm:0.9375rem;   /* 15 */
  --fs-md:1.125rem;    /* 18 正文 */
  --fs-lg:1.25rem;     /* 20 副标题 */
  --fs-b:1.0625rem;    /* 17 内容标题 */
  --fs-xl:1.75rem;     /* 28 段标题 */
  --fs-h1:2.6rem;      /* 41.6 主标题 */
  --tap:2.75rem;       /* 44 触控 */
  --rhythm-1:1.75rem;  /* 28 紧 */
  --rhythm-2:3.5rem;   /* 56 中 */
  --rhythm-3:5.5rem;   /* 88 松 */
  --ease:cubic-bezier(.22,.61,.36,1);
  /* ── ⑤ 3D 立体：三层阴影（上高光 / 下投影 / 远扩散）── */
  --raise:
    0 2px 0 rgba(255,255,255,1) inset,          /* 顶部高光边（凸起的关键） */
    0 -2px 5px rgba(22,36,28,.07) inset,        /* 底部内暗影 */
    0 1px 2px rgba(22,36,28,.10),               /* 贴地接触影 */
    0 5px 10px -2px rgba(22,36,28,.13),         /* 近距投影 */
    0 14px 26px -8px rgba(22,36,28,.17),        /* 中距投影 */
    0 28px 48px -20px rgba(22,36,28,.22);       /* 远距扩散 */
  --raise-hi:
    0 2px 0 rgba(255,255,255,1) inset,
    0 -2px 5px rgba(22,36,28,.05) inset,
    0 3px 6px rgba(22,36,28,.12),
    0 10px 18px -4px rgba(22,36,28,.16),
    0 22px 38px -12px rgba(55,153,91,.26),
    0 40px 66px -28px rgba(55,153,91,.30);
  --sunk:0 3px 7px rgba(22,36,28,.1) inset,
         0 -1px 0 rgba(255,255,255,.8) inset;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--fs-md); line-height:1.85;
  padding-bottom:calc(6.5rem + env(safe-area-inset-bottom,0px));
}

/* ── ⑧ 生命体：整页铺一层极淡的草绿光晕，纸不再是死纸 ── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58% 34% at 12% 6%, rgba(138,210,90,.075), transparent 62%),
    radial-gradient(46% 28% at 92% 42%, rgba(95,196,104,.05), transparent 66%),
    radial-gradient(64% 30% at 50% 100%, rgba(201,169,97,.045), transparent 70%);
  animation:breathe 14s ease-in-out infinite;
}
.wrap{max-width:39rem;margin:0 auto;padding:0 1.375rem;position:relative;z-index:1}

/* ── ① 呼吸：滚动渐显 ── */
.rise{opacity:1;transform:none}
html.js .rise{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .rise.in{opacity:1;transform:none}

/* ── ⑧ 生命体：三组动效 ── */
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes breathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
@keyframes shine{0%{background-position:-140% 0}60%,100%{background-position:240% 0}}

/* ── ⑥ 芽标记（品牌记号，带脉动光点 + 轻摆）── */
.sprout{position:relative;display:inline-block;width:2.375rem;height:2.375rem;transform-origin:50% 90%;
  animation:sway 6s ease-in-out infinite}
.sprout svg{width:100%;height:100%;display:block}
.sprout::after{
  content:"";position:absolute;top:5px;right:4px;width:.5rem;height:.5rem;border-radius:50%;
  background:var(--gold2);box-shadow:0 0 12px 3px rgba(232,206,143,.6);
  animation:pulse 2.6s ease-in-out infinite;
}

/* ── 顶栏 ── */
.topbar{
  position:sticky;top:0;z-index:20;
  padding:calc(.875rem + env(safe-area-inset-top,0px)) 0 .75rem;
  background:rgba(251,250,245,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(47,139,79,.12);
}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.brand{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);font-weight:700}
/* ④ 跳转：顶栏入口加粗着色 + 箭头 */
.topbar a{min-height:var(--tap);display:inline-flex;align-items:center;gap:.25rem;
  color:var(--green);text-decoration:none;font-size:var(--fs-sm);font-weight:700}
.topbar a::after{content:"›";font-size:1.25em;line-height:0;color:var(--gold)}
/* 返回那条自己带 ‹，不要再挂一个 ›（09-30 王总：栏目里要一眼能看出怎么回去；用 .gobk 是因为基准页的「加微信」也叫 .back）*/
.topbar a.gobk::after{content:none}
.topbar a.gobk{color:var(--ink2)}

/* ══ 首屏 ══════════════════════════════════════════════════ */
.hero{position:relative;overflow:hidden;padding:var(--rhythm-2) 0 var(--rhythm-3)}
.hero::before{
  content:"";position:absolute;left:-18%;bottom:-32%;width:78%;aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(127,194,74,.22);
  box-shadow:0 0 0 26px rgba(127,194,74,.09),0 0 0 64px rgba(92,184,92,.05);
  animation:drift 9s ease-in-out infinite;pointer-events:none;
}
.hero::after{
  content:"";position:absolute;right:-22%;top:-16%;width:56%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,97,.2),transparent 68%);
  animation:drift 12s ease-in-out infinite reverse;pointer-events:none;
}
.rule{width:2.75rem;height:3px;border-radius:2px;margin-bottom:var(--rhythm-1);
  background:linear-gradient(90deg,var(--leaf),var(--gold))}
/* ⑦ 主标题：最大字号，带光泽扫过 */
.hero h1{
  font-family:Georgia,"Songti SC","Noto Serif SC",serif;
  font-size:var(--fs-h1);line-height:1.22;font-weight:700;
  margin:0 0 var(--rhythm-1);letter-spacing:-.015em;
}
.hero h1 em{
  font-style:normal;position:relative;
  background:linear-gradient(100deg,var(--green) 0%,var(--leaf) 42%,var(--green) 62%,var(--green) 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6.5s ease-in-out infinite;
}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.34em;z-index:-1;
  background:linear-gradient(90deg,rgba(201,169,97,.4),rgba(127,194,74,.16));
  border-radius:3px;transform-origin:left;animation:grow 1.1s var(--ease) .35s both;
}
/* ⑦ 副标题：20px，比正文大一档 */
.hero .lead{font-size:var(--fs-lg);color:var(--ink2);margin:0;line-height:1.9;max-width:24em}
.hero .lead b{color:var(--green);font-weight:700}

/* ══ ④ 锚点导航：做成"能点的路标" ════════════════════════ */
.anchors{display:flex;flex-wrap:nowrap;gap:.5rem;overflow-x:auto;
  margin-top:var(--rhythm-2);padding:.25rem 0 .5rem;scrollbar-width:none}
.anchors::-webkit-scrollbar{display:none}
.anchors a{
  flex:0 0 auto;min-height:var(--tap);display:inline-flex;align-items:center;gap:.3rem;
  padding:0 .875rem;border-radius:999px;
  color:var(--green);text-decoration:none;font-size:var(--fs-sm);font-weight:700;white-space:nowrap;
  background:rgba(255,255,255,.85);border:1px solid rgba(47,139,79,.2);
  box-shadow:var(--raise);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.anchors a::after{content:"→";color:var(--leaf);font-weight:700}
.anchors a:active{transform:translateY(1px);box-shadow:var(--sunk)}

/* ══ 深浅交替：章节感 ═══════════════════════════════════ */
.band{padding:var(--rhythm-3) 0;position:relative}
/* ② 草绿（不再是墨绿） */
.band--deep{
  background:
    radial-gradient(72% 42% at 15% 0%, rgba(159,224,120,.26), transparent 62%),
    linear-gradient(168deg,var(--deep),var(--deep2));
  color:var(--deep-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 -1px 0 rgba(0,0,0,.08) inset;
}
.band--deep .eyebrow{color:var(--gold2)}
.band--deep p,.band--deep li{color:rgba(243,248,241,.9)}
.band--paper2{background:var(--paper2)}

/* ══ 生长线：把模块串起来 ═══════════════════════════════ */
.spine{position:relative}
.spine::before{
  content:"";position:absolute;left:.9375rem;top:0;bottom:0;width:2px;border-radius:1px;
  background:linear-gradient(180deg,transparent,rgba(127,194,74,.5) 12%,rgba(92,184,92,.5) 88%,transparent);
}
.band--deep .spine::before{
  background:linear-gradient(180deg,transparent,rgba(232,206,143,.5) 12%,rgba(232,206,143,.5) 88%,transparent);
}

/* ══ ⑥⑦ 编号块：图标 + 圆环（以图释义 + 路标）═════════ */
.q{padding-left:3rem;position:relative;margin-bottom:var(--rhythm-2)}
.q:last-child{margin-bottom:0}
.q .num{
  position:absolute;left:0;top:.05em;width:2.25rem;height:2.25rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;font-weight:700;line-height:1;
  background:linear-gradient(150deg,#fff,var(--paper2));
  border:1.5px solid rgba(47,139,79,.32);
  box-shadow:var(--raise);
}
.band--deep .q .num{background:rgba(255,255,255,.14);border-color:rgba(232,206,143,.45);box-shadow:none}
/* ⑦ 段标题：28px 衬线，比内容标题大一档半 */
.q h2{font-size:var(--fs-xl);font-family:Georgia,"Songti SC",serif;
  margin:0 0 var(--rhythm-1);font-weight:700;line-height:1.35}
.q p{margin:0 0 .875rem;line-height:1.95}
.q p:last-child{margin-bottom:0}
/* ① 重点着色加粗（治"信息多了没抓住重点"）*/
.hi{color:var(--green);font-weight:700}
.hi-g{color:var(--gold);font-weight:700}
.band--deep .hi{color:var(--leaf)}
.band--deep .hi-g{color:var(--gold2)}
/* 数字强调 */
.num-big{font-family:Georgia,serif;font-size:1.5em;font-weight:700;color:var(--gold);
  line-height:1;vertical-align:-.06em}


/* ══ ⑦ 段标题：统一路标（28px 衬线）══════════════ */
.h2{font-family:Georgia,"Songti SC",serif;font-size:var(--fs-xl);
  font-weight:700;line-height:1.35;margin:0 0 var(--rhythm-1);max-width:17em}

/* ══ ⑤ 六个角色：3D 立体卡 ═══════════════════════════ */
.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:var(--rhythm-1)}
.card{
  display:flex;gap:.9375rem;align-items:flex-start;
  padding:1.25rem 1.25rem 1.25rem 1.125rem;border-radius:16px;
  background:linear-gradient(172deg,#fff 0%,#FCFDFA 62%,#F4F9EF 100%);
  border:1px solid rgba(47,139,79,.18);
  box-shadow:var(--raise);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.card:active{transform:translateY(-3px);box-shadow:var(--raise-hi);border-color:rgba(127,194,74,.5)}
.band--deep .card{
  background:linear-gradient(172deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  border-color:rgba(232,206,143,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -1px 0 rgba(0,0,0,.12) inset,
             0 12px 26px -14px rgba(0,0,0,.4);
}
/* ⑥ 卡片图标：做成小立体徽章 */
.card .ic{
  flex:0 0 auto;width:2.75rem;height:2.75rem;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#fff,#EDF6E6);
  border:1px solid rgba(47,139,79,.2);
  box-shadow:0 2px 5px -1px rgba(47,139,79,.18),0 1px 0 rgba(255,255,255,.9) inset;
  font-size:1.375rem;line-height:1;
}
.band--deep .card .ic{
  background:rgba(255,255,255,.16);border-color:rgba(232,206,143,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset;
}
.band h2,.q h2{max-width:17em}
/* ⑦ 内容标题 17px */
.card b{display:block;font-size:var(--fs-b);font-weight:700;margin-bottom:.35rem;color:var(--ink)}
.band--deep .card b{color:#fff}
.card span{display:block;font-size:var(--fs-sm);color:var(--ink2);line-height:1.8}
.band--deep .card span{color:rgba(243,248,241,.82)}

/* ══ ⑤ 三个方式：立体对比卡（选中档发光）═══════════ */
.tiers{display:grid;gap:1rem;margin-top:var(--rhythm-1)}
.t{border-radius:16px;padding:1.375rem 1.25rem;
  background:linear-gradient(172deg,#fff,#F7FBF3);
  border:1px solid rgba(47,139,79,.16);box-shadow:var(--raise);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.t:active{transform:translateY(-3px)}
.t.pick{border-color:var(--gold);box-shadow:var(--raise-hi),0 0 0 2px rgba(201,169,97,.16)}
.t .nm{display:block;font-size:var(--fs-b);font-weight:700;color:var(--green);margin-bottom:.5rem}
.t p{margin:0;font-size:var(--fs-sm);color:var(--ink2);line-height:1.85}

/* ══ ④⑤ 三条精选资料：可点的立体卡 + 明确箭头 ═══════════ */
.picks{display:grid;gap:.875rem;margin-top:var(--rhythm-1)}
.pick{
  display:flex;align-items:center;gap:.9375rem;min-height:var(--tap);
  padding:1.0625rem 1.125rem;border-radius:14px;text-decoration:none;color:inherit;
  background:linear-gradient(172deg,#fff,#F7FBF3);
  border:1px solid rgba(47,139,79,.18);box-shadow:var(--raise);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.pick:active{transform:translateY(-2px) scale(.995);border-color:var(--leaf);box-shadow:var(--raise-hi)}
.pick .k{font-size:1.5rem;line-height:1;flex:0 0 auto}
.pick .txt{flex:1 1 auto;min-width:0}
.pick .txt b{display:block;font-size:var(--fs-b);font-weight:700}
.pick .txt span{display:block;font-size:var(--fs-sm);color:var(--ink2);margin-top:.2rem}
/* ④ 右侧箭头：明确"这里能点" */
.pick .go{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:.3rem;
  color:var(--green);font-size:var(--fs-sm);font-weight:700;white-space:nowrap;
  padding:.25rem .5rem;border-radius:999px;background:rgba(127,194,74,.14)}
.pick .go::after{content:"→";color:var(--leaf);font-size:1.125em}

/* ══ ⑤ 加微信牌：立体浮起 ═══════════════════════════ */
.wxbox{
  margin-top:var(--rhythm-2);text-align:center;border-radius:20px;
  padding:1.875rem 1.25rem;background:linear-gradient(172deg,#fff,#F4F9EF);
  border:1px solid rgba(201,169,97,.32);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -1px 0 rgba(22,36,28,.05) inset,
             0 8px 18px -8px rgba(22,36,28,.12),0 26px 50px -22px rgba(47,139,79,.32);
}
.wxbox img{width:11.25rem;height:11.25rem;border-radius:12px;background:#fff;padding:.4375rem;
  box-shadow:0 12px 30px -14px rgba(22,36,28,.34),0 0 0 1px rgba(47,139,79,.1)}
.wxbox .wxname{font-size:var(--fs-b);font-weight:700;margin:.9375rem 0 .35rem}
.wxbox .wxsub{font-size:var(--fs-sm);color:var(--ink2);margin:0;line-height:1.8}

/* ══ 过渡句：模块之间的连接 ═════════════════════════ */
.bridge{
  padding:var(--rhythm-2) 0 0;font-size:var(--fs-lg);line-height:1.9;
  font-family:Georgia,"Songti SC",serif;color:var(--ink);
}
.bridge b{color:var(--green);font-weight:700}
.band--deep .bridge,.band--deep .bridge b{color:var(--deep-ink)}

/* ══ ④ CTA：跳转要有身份 ═══════════════════════ */
.next{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--tap);margin-top:var(--rhythm-2);padding:1.1875rem 1.25rem;border-radius:16px;
  text-decoration:none;color:inherit;font-size:var(--fs-b);font-weight:700;
  background:linear-gradient(120deg,rgba(127,194,74,.13),rgba(201,169,97,.15));
  border:1px solid rgba(47,139,79,.26);box-shadow:var(--raise);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.next:active{transform:translateX(3px);border-color:var(--gold);box-shadow:var(--raise-hi)}
.next .ar{color:var(--gold);font-size:1.25rem;font-weight:700}

/* ══ ⑥ 品牌片（视频）═══════════════════════════════ */
.film .h2serif{font-family:Georgia,"Songti SC",serif;font-size:var(--fs-xl);
  margin:0 0 var(--rhythm-1);line-height:1.35}
.film .player{margin-top:var(--rhythm-1)}
.film video{
  width:100%;display:block;border-radius:20px;background:#0d1512;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,
             0 10px 22px -10px rgba(22,36,28,.2),
             0 30px 60px -26px rgba(47,139,79,.4);
  aspect-ratio:9/16;object-fit:cover;
}
.film .cap{
  margin:var(--rhythm-2) 0 0;text-align:center;font-size:var(--fs-sm);
  color:var(--ink3);letter-spacing:.04em;
}

/* ══ 页脚 ═══════════════════════════════════════ */
footer{margin-top:var(--rhythm-3);padding:var(--rhythm-2) 0;
  text-align:center;border-top:1px solid rgba(47,139,79,.14)}
footer .sl{font-family:Georgia,"Songti SC",serif;color:var(--gold);
  letter-spacing:.16em;font-size:var(--fs-sm);margin:0 0 .75rem}
footer .co{font-size:var(--fs-xs);color:var(--ink3);margin:0;line-height:1.9}

/* ══════════════════════════════════════════════
   ③ 深色模式（夜用）：草绿系同步降亮，不是简单反色
   ══════════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#EAF2E8; --ink2:#A7B8AB; --ink3:#7E9084;
    --paper:#0C1410; --paper2:#12201A;
    --deep:#2F6B42; --deep2:#3C8452;
    --deep-ink:#EAF4E6;
    --green:#74D183; --green2:#93DF95; --leaf:#A2DC62;
    --gold:#D9BB77; --gold2:#EFD8A0;
    --raise:0 1px 0 rgba(255,255,255,.07) inset,
            0 -1px 0 rgba(0,0,0,.3) inset,
            0 4px 12px -4px rgba(0,0,0,.5),
            0 18px 36px -18px rgba(0,0,0,.6);
    --raise-hi:0 1px 0 rgba(255,255,255,.1) inset,
               0 -1px 0 rgba(0,0,0,.28) inset,
               0 8px 18px -6px rgba(0,0,0,.55),
               0 26px 50px -22px rgba(110,203,123,.3);
    --sunk:0 2px 6px rgba(0,0,0,.5) inset,0 -1px 0 rgba(255,255,255,.06) inset;
  }
  body{background:var(--paper);color:var(--ink)}
  body::before{
    background:
      radial-gradient(58% 34% at 12% 6%, rgba(116,209,131,.1), transparent 62%),
      radial-gradient(46% 28% at 92% 42%, rgba(162,220,98,.06), transparent 66%),
      radial-gradient(64% 30% at 50% 100%, rgba(217,187,119,.05), transparent 70%);
  }
  .topbar{background:rgba(12,20,16,.9);border-bottom-color:rgba(110,203,123,.18)}
  .hero h1{color:#F1F7EE}
  .hero h1 em{background:linear-gradient(100deg,var(--green2) 0%,var(--leaf) 45%,var(--green2) 100%);
    background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero .lead{color:var(--ink2)}
  .rule{background:linear-gradient(90deg,var(--leaf),var(--gold2))}
  .anchors a{background:rgba(255,255,255,.07);border-color:rgba(110,203,123,.28);color:var(--green2)}
  .band--paper2{background:var(--paper2)}
  .band--deep{background:
    radial-gradient(72% 42% at 15% 0%, rgba(116,209,131,.18), transparent 62%),
    linear-gradient(168deg,var(--deep),var(--deep2))}
  .card{background:linear-gradient(172deg,rgba(255,255,255,.075),rgba(255,255,255,.03))}
  .card b{color:#F1F7EE}
  .card span,.pick span,.t p,.q p{color:var(--ink2)}
  .card .ic{background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
    border-color:rgba(155,215,90,.28)}
  .q .num{background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
    border-color:rgba(110,203,123,.4)}
  .t{background:linear-gradient(172deg,rgba(255,255,255,.075),rgba(255,255,255,.03))}
  .pick{background:linear-gradient(172deg,rgba(255,255,255,.075),rgba(255,255,255,.03))}
  .pick .go{background:rgba(155,215,90,.18)}
  .pick .txt span{color:var(--ink2)}
  .wxbox{background:linear-gradient(172deg,#16281F,#101C16);border-color:rgba(217,187,119,.34)}
  .wxbox img{background:#fff}
  .bridge,.bridge b{color:var(--ink)}
  .film video{box-shadow:0 1px 0 rgba(255,255,255,.08) inset,
              0 30px 60px -26px rgba(0,0,0,.7)}
  footer{border-top-color:rgba(110,203,123,.16)}
}

/* 尊重"减少动效"偏好 */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html.js .rise{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════
   V6 追加：模块标识配色 + 顶栏心跳时钟 + 3D 再加强
   ══════════════════════════════════════════════════════════════ */

/* ── ⑤ 模块标识配色：每段一个色，形成对比与"气息" ── */
.eyebrow.tone-a{color:#BD9A4F !important}   /* 金 —— 品牌 */
.eyebrow.tone-b{color:#C25E3F !important}   /* 陶土橙 —— 说清楚 */
.eyebrow.tone-c{color:#35709F !important}   /* 靛蓝 —— 队伍 */
.eyebrow.tone-d{color:#7A56A8 !important}   /* 紫 —— 怎么一起干 */
.eyebrow.tone-e{color:#27847D !important}   /* 青 —— 怎么进门 */
.eyebrow.tone-f{color:#2F8A50 !important}   /* 草绿 —— 拿资料 */
.band--deep .eyebrow[class*="tone-"]{color:#F0DEB4 !important}

.eyebrow .em{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;border-radius:8px;margin-right:.4375rem;
  font-size:.9375rem;line-height:1;vertical-align:-.34em;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 3px 7px -2px rgba(22,36,28,.28);
}
.tone-a .em{background:linear-gradient(150deg,#FCF2DC,#EBD9AC)}
.tone-b .em{background:linear-gradient(150deg,#FCE6DF,#F0C7B8)}
.tone-c .em{background:linear-gradient(150deg,#E0EBFB,#C2D8F3)}
.tone-d .em{background:linear-gradient(150deg,#EFE5FB,#D9C7F2)}
.tone-e .em{background:linear-gradient(150deg,#DCF3F1,#BEE6E2)}
.tone-f .em{background:linear-gradient(150deg,#E6F7E0,#CBEDC2)}
.band--deep .eyebrow .em{background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.16))}

/* ── ② 顶栏：时间 + 呼吸绿点（心跳感）── */
.clock{display:inline-flex;align-items:center;gap:.4375rem;
  font-size:var(--fs-sm);font-weight:700;color:var(--ink2);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;margin-left:auto}
.clock .beat{
  display:block;width:.625rem;height:.625rem;border-radius:50%;
  background:#5FBF63;
  animation:heartbeat 1.9s ease-in-out infinite;
}
@keyframes heartbeat{
  0%  {transform:scale(.85);box-shadow:0 0 0 0 rgba(95,191,99,.75),0 0 8px 1px rgba(95,191,99,.5)}
  20% {transform:scale(1.18);box-shadow:0 0 0 7px rgba(95,191,99,.06),0 0 16px 5px rgba(95,191,99,.75)}
  38% {transform:scale(.97);box-shadow:0 0 0 3px rgba(95,191,99,.04),0 0 12px 3px rgba(95,191,99,.55)}
  56% {transform:scale(1.09);box-shadow:0 0 0 5px rgba(95,191,99,.05),0 0 14px 4px rgba(95,191,99,.65)}
  100%{transform:scale(.85);box-shadow:0 0 0 0 rgba(95,191,99,0),0 0 8px 1px rgba(95,191,99,.45)}
}
@media (prefers-color-scheme:dark){
  .clock{color:var(--ink2)}
  .clock .beat{background:#74D183}
}

/* ── ⑤ 卡片 3D 再加一层：外扩投影，让"浮起"更明显 ── */
.card{box-shadow:
  0 2px 0 rgba(255,255,255,1) inset,
  0 -2px 5px rgba(22,36,28,.07) inset,
  0 2px 4px rgba(22,36,28,.10),
  0 7px 14px -3px rgba(22,36,28,.14),
  0 18px 32px -10px rgba(22,36,28,.18),
  0 34px 58px -24px rgba(22,36,28,.22) !important}
.pick,.t,.anchors a,.next{box-shadow:
  0 1.5px 0 rgba(255,255,255,1) inset,
  0 -1.5px 4px rgba(22,36,28,.06) inset,
  0 2px 4px rgba(22,36,28,.10),
  0 6px 12px -3px rgba(22,36,28,.13),
  0 16px 28px -10px rgba(22,36,28,.17),
  0 30px 52px -22px rgba(22,36,28,.2) !important}
.card:active,.pick:active,.t:active{
  box-shadow:0 3px 8px rgba(22,36,28,.12) inset,
             0 -1px 0 rgba(255,255,255,.7) inset,
             0 1px 2px rgba(22,36,28,.12) !important}
@media (prefers-color-scheme:dark){
  .card{box-shadow:
    0 2px 0 rgba(255,255,255,.16) inset,
    0 -2px 5px rgba(0,0,0,.3) inset,
    0 2px 4px rgba(0,0,0,.4),
    0 8px 16px -3px rgba(0,0,0,.5),
    0 20px 36px -12px rgba(0,0,0,.55),
    0 36px 62px -26px rgba(0,0,0,.6) !important}
  .pick,.t,.anchors a,.next{box-shadow:
    0 1.5px 0 rgba(255,255,255,.1) inset,
    0 -1.5px 4px rgba(0,0,0,.28) inset,
    0 2px 4px rgba(0,0,0,.4),
    0 7px 14px -3px rgba(0,0,0,.45),
    0 18px 30px -10px rgba(0,0,0,.5),
    0 32px 54px -22px rgba(0,0,0,.55) !important}
}


/* ══ 排版卫生：治孤字（中文行尾只剩 1-2 字）══ */
.card b,.card span,.q p,.t p,.lead,.bridge,.pick .txt span,.wxsub{
  line-break:strict;                 /* 严格避头尾，标点不落行首 */
  word-break:normal;
  overflow-wrap:break-word;
}
@media (min-width:1px){
  .card span,.t p,.q p,.pick .txt span{text-wrap:pretty}   /* 支持则自动优化末行 */
}
/* 防止 nowrap 短语在极窄屏撑破 */
[style*="white-space:nowrap"]{max-width:100%}

/* ══════════════════════════════════════════════════════════════
   V7：①深底三步加框（治"散"）  ②六员图标换彩色（治"平"）
   ══════════════════════════════════════════════════════════════ */

/* ── ① 深底三步骤：每步一张半透明白卡，带立体边框 ── */
.band--deep .q{
  position:relative;
  background:linear-gradient(158deg,rgba(255,255,255,.17),rgba(255,255,255,.09));
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px;
  padding:1.3rem 1.4rem 1.35rem;
  margin-bottom:1.15rem;
  box-shadow:
    0 2px 0 rgba(255,255,255,.30) inset,
    0 -3px 8px rgba(0,0,0,.12) inset,
    0 3px 7px rgba(0,0,0,.13),
    0 12px 24px -8px rgba(0,0,0,.20),
    0 26px 44px -18px rgba(0,0,0,.24);
  backdrop-filter:blur(2px);
}
.band--deep .q:last-of-type{margin-bottom:0}
.band--deep .q .num{
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset, 0 3px 8px -2px rgba(0,0,0,.3);
}
.band--deep .q h2{margin-bottom:.55rem}
.band--deep .q p{margin:0}

/* ── ② 六位总管：图标底块换成彩色（每人一色，拉开反差）── */
#sell .card:nth-child(1) .ic{background:linear-gradient(150deg,#FFF4D9,#FFD98A);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 10px -2px rgba(214,158,48,.5)}
#sell .card:nth-child(2) .ic{background:linear-gradient(150deg,#FFE7E0,#FFB39D);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 10px -2px rgba(219,110,80,.5)}
#sell .card:nth-child(3) .ic{background:linear-gradient(150deg,#E2EEFF,#AECFFF);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 10px -2px rgba(80,135,214,.5)}
#sell .card:nth-child(4) .ic{background:linear-gradient(150deg,#E2F7DC,#A6E197);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 10px -2px rgba(88,170,74,.5)}
#sell .card:nth-child(5) .ic{background:linear-gradient(150deg,#EFE3FC,#C7A5F0);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 10px -2px rgba(139,95,205,.5)}
#sell .card:nth-child(6) .ic{background:linear-gradient(150deg,#FDE3F0,#F5AECF);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 10px -2px rgba(214,96,155,.5)}

/* 深色模式：彩色降饱和但仍保留区分度 */
@media (prefers-color-scheme:dark){
  .band--deep .q{background:linear-gradient(158deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
    border-color:rgba(255,255,255,.16)}
  #sell .card:nth-child(1) .ic{background:linear-gradient(150deg,#4A3E22,#6B5A2E)}
  #sell .card:nth-child(2) .ic{background:linear-gradient(150deg,#4A2C22,#6B4030)}
  #sell .card:nth-child(3) .ic{background:linear-gradient(150deg,#22344A,#2E4A6B)}
  #sell .card:nth-child(4) .ic{background:linear-gradient(150deg,#24401F,#33562C)}
  #sell .card:nth-child(5) .ic{background:linear-gradient(150deg,#33254A,#46346B)}
  #sell .card:nth-child(6) .ic{background:linear-gradient(150deg,#4A2438,#6B3450)}
}

/* ══════════════════════════════════════════════════════════════
   V8：排版对齐总修（王总红框：小图标与文字未对齐；编号与标题未对齐）
   原则：一律改用 flex + align-items:center，不再用 vertical-align 估算偏移
   ══════════════════════════════════════════════════════════════ */

/* ── ① eyebrow（含 🌱🚫👥🤝🚪📄🎬）：图标与文字垂直居中 ── */
.eyebrow{
  display:flex !important;
  align-items:center;
  gap:.5rem;
  line-height:1.4;
}
.eyebrow .em{
  flex:0 0 auto;
  margin:0 !important;          /* 由 gap 控距，避免双重间距 */
  vertical-align:baseline !important;
  width:1.5rem;height:1.5rem;
}

/* ── ② 深底三步骤：编号圈与标题同一行、垂直居中 ── */
.band--deep .q{
  display:block;
}
.band--deep .q .num{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  width:2rem !important;height:2rem !important;
  font-size:.9375rem !important;
  margin:0 .625rem 0 0 !important;
  vertical-align:middle;
  position:static !important;   /* 取消绝对定位，避免压字 */
  float:none !important;
  line-height:1;
}
.band--deep .q h2{
  display:inline !important;    /* 与 num 同行，基线一致 */
  vertical-align:middle;
  margin:0 !important;
  line-height:2rem;
}
.band--deep .q p{
  margin:.6rem 0 0 0 !important;
  clear:both;
}

/* ── ③ 锚点药丸：4 个能换行，不再被右边缘切一半 ── */
.anchors{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:.5rem .5rem !important;
  overflow:visible !important;
  padding-bottom:.25rem;
}
.anchors a{flex:0 0 auto}

/* ── ④ 卡片内：图标与标题也做严格居中（六员/四不） ── */
.card .ic{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  vertical-align:baseline !important;
  margin:0 !important;
}
.card > div{display:flex;flex-direction:column;justify-content:center;gap:.15rem}
.card b{display:block;margin:0;line-height:1.45}

/* ── ⑤ pick 资料卡：图标/文字/按钮三列严格居中 ── */
.pick{align-items:center !important}
.pick .k{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.pick .txt{display:flex;flex-direction:column;justify-content:center;gap:.15rem}

/* ── ⑥ wxbox / 页脚 等块级对齐 ── */
.wxbox{align-items:center}
@media (prefers-color-scheme:dark){
  .band--deep .q .num{box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 3px 8px -2px rgba(0,0,0,.4)}
}

/* ══ V9：触控目标全部补到 ≥44px（手机端点得中）══ */
.anchors a,                     /* 药丸锚点 */
.pick .go,                      /* 资料卡按钮 */
a.wx, .wxbox a,                 /* 加微信 */
.link-more, .more a,            /* 更多链接 */
footer a, .foot a,              /* 页脚 */
.top a, .head a, .bar a,        /* 顶栏返回 */
.btn, a.btn, button, [role="button"]{
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding-top:.35rem;
  padding-bottom:.35rem;
  box-sizing:border-box;
}
/* 纯文字链接用行高撑，不破坏版式 */
.top a, .head a, .bar a, .link-more, .more a{
  padding-left:.5rem;padding-right:.5rem;
  margin-left:-.5rem;margin-right:-.5rem;
}