/* ═══════════════════════════════════════════════════════════════════════
   暮知音© · 健康相伴 ｜ Apple 风格设计系统（单一样式源）
   ───────────────────────────────────────────────────────────────────────
   品牌：雅之林® YAZHILIN
   载体：微信服务号内嵌 H5（移动端优先）
   ───────────────────────────────────────────────────────────────────────
   ⚠️ 本文件是全站唯一样式源，7 个页面全部引用它，⛔ 不许在页面里写 <style>。
   ⚠️ 字号一律 px（⛔ 零 rem）：微信安卓会改写根字号，rem 会让整站变样。
   ⚠️ 动效只用 transform / opacity / background-color / height，
      ⛔ 不用动 top/left/width、不用动画库、不做滚动驱动动画；尊重 prefers-reduced-motion。
   ⚠️ CSS 注释里绝不出现「星号加斜杠」那对字符，会提前闭合注释吞掉后面的规则。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 设计令牌 ─────────────────────────────────────────────────────────
   配色取自用户指定的参考站（锦淳缘）：主色 #560CEA 紫罗兰、白卡、
   冷白偏紫的页面底、紫灰柔和投影；按钮用「紫 → 蓝紫」渐变。
   结构（分组卡 / 发丝线 / 层级靠留白）仍是 Apple 那一套，只换皮不换骨。 */
:root{
  /* 画布与表面：冷白偏紫做「页面底」，纯白做「卡片」 */
  --bg:            #F7F6FB;
  --bg-group:      #F0EEF8;
  --surface:       #FFFFFF;
  --surface-press: #F5F3FC;

  /* 文字：主 / 次 / 弱三级，弱级只用于法律条文 */
  --ink:           #44464B;
  --ink-strong:    #303133;
  --ink-2:         #7A7C82;
  --ink-3:         #9A9CA2;
  --ink-invert:    #FFFFFF;

  /* 主色：紫罗兰。--pri 用于文字与描边，--pri-2/--pri-3 是按钮渐变的亮端与暗端 */
  --pri:           #560CEA;
  --pri-press:     #4709C4;
  --pri-2:         #AC59FF;
  --pri-3:         #2627FA;
  --pri-tint:      rgba(86,12,234,.07);
  --pri-tint-2:    rgba(86,12,234,.13);

  /* 分隔线与描边：发丝线，不是实心灰边 */
  --line:          rgba(48,49,51,.10);
  --line-strong:   rgba(48,49,51,.18);
  --field-line:    rgba(48,49,51,.16);

  /* 圆角：卡片 20 / 输入 15 / 按钮与胶囊切换 999（按钮做胶囊是 Apple HIG 的
     「单一形状语言」—— 页签是胶囊，按钮就不该再是方角，否则两套形状打架） */
  --r-card:        20px;
  --r-inner:       15px;
  --r-btn:         999px;
  --r-pill:        999px;

  /* 阴影：参考站是「紫灰、大扩散、低不透明度」；这里拆成两层，近处硬远处软 */
  --sh-card:       0 1px 2px rgba(96,97,110,.05), 0 10px 26px -14px rgba(96,97,110,.28);
  --sh-raise:      0 2px 6px rgba(96,97,110,.08), 0 20px 44px -18px rgba(96,97,110,.34);
  --sh-btn:        0 3px 12px -2px rgba(86,12,234,.34);

  /* ── 下面这些是「深色模式必须整套换掉」的语义色 ────────────────────
     ⛔ 凡是在深色下需要变色的地方，一律走令牌，不许写死色值：
        写死一处，深色模式下就是一处看不见的坑（文字与底色同色）。 */
  --glass:         rgba(247,246,251,.72);   /* 胶囊切换的半透明底 */
  --glass-strong:  rgba(247,246,251,.92);   /* 顶部合规条 */
  /* 🔴 2026-10-23 用户令：底部导航要「液态玻璃**透明**效果」。
     ⇒ 不透明度从 .94 降到 .58，靠 blur 26px + 饱和 190% 兜住可读性。
     ⚠️ 别再往回调：.9 以上肉眼就是一块不透明的板，与「玻璃」无关。 */
  --glass-nav:     rgba(247,246,251,.58);   /* 底部导航 / 按钮坞 */
  --glass-solid:   rgba(247,246,251,.96);   /* 浮层页脚，几乎不透明 */
  --glass-edge:    rgba(255,255,255,.60);   /* 玻璃高光边 */
  --seg-thumb:     #FFFFFF;                 /* 胶囊切换的滑块 */
  --seg-thumb-sh:  0 1px 3px rgba(28,28,30,.16), 0 6px 16px -8px rgba(96,97,110,.32);

  /* ── 液态玻璃（Liquid Glass）· 顶部品牌浮条与底部导航**共用这一套** ──
     iOS 26 那种观感的三个必要条件，缺一个就退化成「毛玻璃贴纸」：
       ① 强模糊 + 高饱和（把底下的颜色吸上来，不是糊成灰）；
       ② **边缘镜面高光**（--lg-hi / --lg-hi-soft）—— 玻璃的实体感全在这道边；
       ③ 下沿暗边（--lg-lo）—— 给玻璃一点厚度，否则像一张半透明纸片。
     ⛔ 两处固定条必须同一套令牌：一屏里出现两种玻璃语言＝两种材质，最显廉价。 */
  --lg-blur:       26px;
  --lg-sat:        190%;
  --lg-hi:         rgba(255,255,255,.72);
  --lg-hi-soft:    rgba(255,255,255,.30);
  --lg-lo:         rgba(48,49,51,.10);
  --lg-sh:         0 -1px 0 rgba(48,49,51,.06), 0 -12px 30px -20px rgba(48,49,51,.30);
  --lg-pill:       rgba(255,255,255,.60);   /* 导航选中项的玻璃胶囊 */
  --lg-pill-hi:    rgba(255,255,255,.95);
  --hover:         rgba(86,12,234,.06);
  --disabled-bg:   rgba(48,49,51,.10);
  --danger:        #C0392B;
  --danger-bg:     #FDF6F5;
  --warn-bg:       #FFF5F6;
  --warn-ink:      #8C3A48;
  --warn-ink-b:    #7A2C3A;
  --warn-sh:       0 1px 2px rgba(140,58,72,.05), 0 10px 26px -16px rgba(140,58,72,.24);
  --veil:          rgba(28,28,30,.34);
  --veil-soft:     rgba(28,28,30,.32);
  --shade:         rgba(20,18,26,.48);
  --chip-mute:     rgba(60,60,67,.07);      /* 中性标签底 */
  --dot:           rgba(60,60,67,.26);      /* 轮播指示器未选中 */
  --focus:         rgba(86,12,234,.30);     /* 键盘柔光环（三档浓度） */
  --focus-soft:    rgba(86,12,234,.14);
  --focus-mark:    rgba(86,12,234,.28);
  --link-line:     rgba(86,12,234,.35);     /* 同意书里链接的下划线 */

  /* 动效：iOS 的原生缓动曲线，短、稳、不弹跳 */
  --ease:          cubic-bezier(.32,.72,0,1);
  --t-fast:        140ms;
  --t:             220ms;
  --t-slow:        280ms;

  /* 版心与安全区 */
  --gutter:        20px;
  --maxw:          620px;
  --topbar-h:      46px;   /* 运行时由 app.js 实测覆盖，这里只是兜底 */
  --nav-h:         58px;
  --safe-t:        env(safe-area-inset-top, 0px);
  --safe-b:        env(safe-area-inset-bottom, 0px);

  /* 让 UA 自己把表单控件、滚动条、输入光标切到对应明暗（⛔ 少了这行，
     深色模式下输入框仍是白底黑字、下拉箭头是黑的，看着像没做完） */
  color-scheme:    light dark;
}

/* ══ 深色模式 ══════════════════════════════════════════════════════════
   只换令牌、不重写任何构件 —— 这是让 7 页 100% 同步变暗的唯一做法。
   ⛔ 凡是这里没覆盖的令牌，深色下就是「文字与底色同色」的看不见的坑，
     所以下面**逐个列全**，与 :root 一一对应，不靠继承、不靠猜。

   取色依据：Apple 深色不用纯黑做卡片（纯黑压不住、层次全塌），
   基底 #100F14（带紫调的近黑）→ 卡片 #1C1B22 → 抬升面 #26242E 三级。
   主色从 #560CEA 提到 #A87BFF：深底上 #560CEA 的对比度只有 2.6:1，
   远低于 WCAG AA 的 4.5:1，正文级的紫色字会糊成一团。 */
@media (prefers-color-scheme:dark){
  :root{
    --bg:            #100F14;
    --bg-group:      #17161D;
    --surface:       #1F1E26;
    --surface-press: #2A2932;

    --ink:           #E8E7ED;
    --ink-strong:    #F5F4F8;
    --ink-2:         #A6A4B0;
    --ink-3:         #7A7884;
    --ink-invert:    #FFFFFF;

    --pri:           #A87BFF;
    --pri-press:     #9463F0;
    --pri-2:         #C08CFF;
    --pri-3:         #5B5CFF;
    --pri-tint:      rgba(168,123,255,.14);
    --pri-tint-2:    rgba(168,123,255,.22);

    --line:          rgba(255,255,255,.10);
    --line-strong:   rgba(255,255,255,.20);
    --field-line:    rgba(255,255,255,.18);

    /* 深色下投影要更黑更收，否则卡片像糊在背景上。
       ⚠️ 但深色底上「投影」几乎看不见（黑投在黑上）⇒ 卡片与页面底的亮度比
          只有 1.1:1，层级得靠猜。所以额外加一条 1px 内描边环把卡片「框出来」，
          这是 Apple 深色界面的常规做法，比一味提亮卡片表面更克制。
          只改这一处令牌，所有用 --sh-card / --sh-raise 的构件全都自动获得分离感。 */
    --sh-card:       inset 0 0 0 1px rgba(255,255,255,.065), 0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.70);
    --sh-raise:      inset 0 0 0 1px rgba(255,255,255,.075), 0 2px 6px rgba(0,0,0,.50), 0 20px 44px -18px rgba(0,0,0,.75);
    --sh-btn:        0 3px 12px -2px rgba(0,0,0,.55);

    --glass:         rgba(30,29,36,.72);
    --glass-strong:  rgba(24,23,30,.88);
    --glass-nav:     rgba(20,19,25,.58);
    --glass-solid:   rgba(20,19,25,.96);
    --glass-edge:    rgba(255,255,255,.10);
    /* 滑块不能再用白色（白块在深底上刺眼、像没做完的分段器），
       改用比轨道高一档的抬升面 + 更重的投影来「浮起来」 */
    --seg-thumb:     #3A3947;
    --seg-thumb-sh:  0 1px 3px rgba(0,0,0,.55), 0 6px 16px -8px rgba(0,0,0,.60);

    /* 液态玻璃·深色档：⛔ 高光绝不能沿用浅色的 .72 白（会在近黑底上炸成一道白杠），
       压到 .16 并把下沿暗边加深，玻璃才有「在暗处仍是玻璃」的质感。 */
    --lg-hi:         rgba(255,255,255,.16);
    --lg-hi-soft:    rgba(255,255,255,.06);
    --lg-lo:         rgba(0,0,0,.55);
    --lg-sh:         0 -1px 0 rgba(0,0,0,.45), 0 -12px 30px -20px rgba(0,0,0,.65);
    --lg-pill:       rgba(255,255,255,.12);
    --lg-pill-hi:    rgba(255,255,255,.20);
    --hover:         rgba(168,123,255,.10);
    --disabled-bg:   rgba(255,255,255,.10);
    --danger:        #FF6B5E;
    --danger-bg:     rgba(255,107,94,.10);
    --warn-bg:       rgba(255,120,138,.10);
    --warn-ink:      #F0A3AD;
    --warn-ink-b:    #F7BCC4;
    --warn-sh:       0 1px 2px rgba(0,0,0,.40), 0 10px 26px -16px rgba(0,0,0,.50);
    --veil:          rgba(0,0,0,.55);
    --veil-soft:     rgba(0,0,0,.52);
    --shade:         rgba(0,0,0,.62);
    --chip-mute:     rgba(255,255,255,.08);
    --dot:           rgba(255,255,255,.28);
    --focus:         rgba(168,123,255,.50);
    --focus-soft:    rgba(168,123,255,.28);
    --focus-mark:    rgba(168,123,255,.45);
    --link-line:     rgba(168,123,255,.50);
  }
  /* 渐变按钮的亮端/暗端已随令牌变浅；这里只把「文字压白」的对比度补回来 */
  .btn{ color:#FFFFFF; }
}

/* ── 基础重置 ───────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--bg);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.85;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* 顶部品牌浮条 + 底部固定导航，正文区两端各让位 */
  padding-top:calc(var(--topbar-h) + var(--safe-t));
  padding-bottom:calc(var(--nav-h) + var(--safe-b) + 8px);
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--pri); text-decoration:none; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0;}
ul,ol{padding:0;list-style:none;}

/* 键盘可达性：Apple 用柔光环，不用浏览器默认虚线框 */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 3.5px var(--focus);
  border-radius:6px;
}

/* ── 版心 ───────────────────────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}
.wrap--tight{ padding:0 var(--gutter); }

/* ── 顶部品牌浮条（每页固定 · 液态玻璃）────────────────────────────────
   🔴 用户 2026-10-23 令：这条浮条改放品牌「雅之林®YAZHILIN / 暮知音© · 健康相伴」
      （免责声明已整段移进页脚）。
   质感＝液态玻璃三件套（见 :root 的 --lg-* ）：
     · 上沿镜面高光 ::before 一条渐隐白线 —— 玻璃的实体感全在这道边
     · 下沿暗边 + 单向投影 —— 让它「浮」在正文之上，而不是贴一张纸
     · backdrop-filter 高模糊高饱和 —— 把滚过去的内容吸成柔和的色块
   ⚠️ 不支持 backdrop-filter 时退化为**不透明**底色（⛔ 绝不透出正文，那会糊成一片）。
   ⚠️ padding-top 吃 safe-area-inset-top：微信内置浏览器/刘海屏不会把品牌字顶到状态栏里。 */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  padding-top:var(--safe-t);
  background:var(--glass-strong);
  -webkit-backdrop-filter:saturate(var(--lg-sat)) blur(var(--lg-blur));
  backdrop-filter:saturate(var(--lg-sat)) blur(var(--lg-blur));
  box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), var(--lg-sh);
}
/* 斜向流逝的高光：一条从左上到右下逐渐消失的白色，静置时也有「玻璃在反光」的暗示 */
.topbar::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg, var(--lg-hi-soft) 0%, rgba(255,255,255,0) 42%);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .topbar{ background:var(--bg); }
}
.topbar-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:var(--topbar-h);
}
/* 品牌锁版：同一级字号、紧贴、英文右移抵消行尾字距 */
.lockup{
  display:flex;
  align-items:baseline;
  gap:0;
  line-height:1.1;
  color:var(--ink-strong);
  font-size:15px;
  font-weight:700;
}
.lockup .cn{ letter-spacing:.01em; }
.lockup .en{ letter-spacing:.02em; margin-right:-.14em; }
.topbar .sitename{
  font-size:11.5px;
  line-height:1.2;
  color:var(--ink-2);
  letter-spacing:.12em;
  white-space:nowrap;
}
/* 320–360px 极窄屏：站名让位给品牌，⛔ 不靠缩字号解决（缩了英文就比中文小了，违反品牌规范） */
@media (max-width:359px){
  .topbar .sitename{ display:none; }
}

/* ── 品牌头 ───────────────────────────────────────────────────────────
   🔴 用户 2026-10-23 令：页头只留站名「暮知音©」，其余文字全部去掉。
   ⚠️ 类名用 .brand，⛔ 不再用 .lock ——
      本站另有一个「格式锁」lock.css，两个 lock 混在一起极易看错。
   ⛔ 这里不放 logo 图片：雅之林® 图标是墨绿底（#1A5C39）方版，
      放在紫罗兰主色的页头上是全站唯一一块绿，一眼就跳出来。
      品牌位由 favicon / apple-touch-icon 承担（浏览器标签上照样认得出）。
   ⛔ 不做渐变字、不做字距拉开档次：一行纯色字，靠字号与留白立住。 */
.masthead{
  display:flex;
  align-items:center;
  gap:10px;
  /* ⚠️ 必须写 padding-top / padding-bottom 单项：
     ⛔ 一写 `padding:18px 0 2px` 这种简写，就会把 .wrap 的左右内边距一起清零，
        页头直接顶到屏幕边（2026-10-23 用户截图实锤，肉眼看才发现的）。 */
  padding-top:18px;
  padding-bottom:6px;
}
/* 🔴 2026-10-23 用户令（原话）：「暮知音©要加大换个颜色，比如页面的紫色，
   跟康养搭伴平行，重新设计一下。」
   ⇒ 站名＝26px、主色紫、与下面的 .eyebrow 胶囊同一左缘（都吃 .wrap 的 gutter）。
   ⛔ 不做渐变字、不加字距拉开档次；靠字号 + 主色立住页头品牌位。 */
.brand{
  font-size:26px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--pri);
}

/* ── 大标题区（Hero）：Apple largeTitle 的排法 —— 大、紧、留白足 ────── */
.hero{ padding:22px 0 4px; }
.eyebrow{
  display:inline-block;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--pri);
  background:var(--pri-tint);
  border-radius:var(--r-pill);
  padding:6px 13px;
  margin-bottom:16px;
}
.display{
  font-size:32px;
  line-height:1.34;
  letter-spacing:-.022em;
  font-weight:700;
  color:var(--ink-strong);
  text-wrap:balance;
}
.display em{
  font-style:normal;
  color:var(--pri);
}
.lede{
  margin-top:14px;
  font-size:17px;
  line-height:1.85;
  color:var(--ink-2);
  letter-spacing:.004em;
}

/* ── 分组卡片（Apple Inset Grouped）───────────────────────────────── */
.group{
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  overflow:hidden;
  margin-top:26px;
}
.group--plain{ box-shadow:none; background:transparent; }
.group-hd{
  padding:22px 20px 10px;
}
.group-hd h2{
  font-size:19px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:-.012em;
  color:var(--ink-strong);
}
.group-hd p{
  margin-top:6px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-2);
}
.group-ft{
  padding:12px 20px 18px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--ink-3);
}

/* 分组外的区块小标题（Apple 的 section header：小、灰、字距略开） */
.sec-hd{
  margin:32px 0 12px;
  padding:0 4px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ink-2);
  text-transform:none;
}

/* ── 列表行（Apple 的 inset cell）─────────────────────────────────── */
.row{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:17px 20px;
  min-height:56px;
}
.row + .row::before{
  content:"";
  position:absolute;
  top:0; left:20px; right:0;
  height:1px;
  background:var(--line);
  transform:scaleY(.5);
  transform-origin:top;
}
.row .rbody{ flex:1 1 auto; min-width:0; }
.row h3{
  font-size:17px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:-.008em;
  color:var(--ink-strong);
}
.row p{
  margin-top:5px;
  font-size:15px;
  line-height:1.78;
  color:var(--ink-2);
}
/* 序号 / 图标位：一个 28px 的圆形色块，Apple 常用 tint 底 + 主色符号 */
.row .idx{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--pri-tint);
  color:var(--pri);
  font-size:14px;
  font-weight:700;
  line-height:28px;
  text-align:center;
  margin-top:1px;
}

/* 可点击整行（chevron 在右） */
.row--link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  color:inherit;
  transition:background-color var(--t-fast) var(--ease);
}
.row--link:active{ background:var(--surface-press); }
.row--link .chev{
  flex:0 0 auto;
  width:9px; height:9px;
  border-right:2px solid var(--ink-3);
  border-top:2px solid var(--ink-3);
  transform:rotate(45deg);
  margin-left:10px;
}

/* ── 数据带（三格）：数字大、标签小，Apple 的 stat 排法 ─────────────── */
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:26px;
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  overflow:hidden;
}
.stats > div{
  position:relative;
  padding:18px 8px 16px;
  text-align:center;
}
.stats > div + div::before{
  content:"";
  position:absolute;
  left:0; top:18px; bottom:18px;
  width:1px;
  background:var(--line);
  transform:scaleX(.5);
}
.stats b{
  display:block;
  font-size:23px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink-strong);
}
.stats span{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-2);
}

/* ── 按钮 ───────────────────────────────────────────────────────────── */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:14px 20px;
  border:0;
  border-radius:var(--r-btn);
  /* 参考站的主按钮是「紫 → 蓝紫」横向渐变（270deg：右紫左蓝），不是纯色。
     ⚠️ 渐变要写成 background-image，不能用 background-color —— 后者会把渐变盖掉。 */
  background-image:linear-gradient(270deg,var(--pri-2) 0%,var(--pri-3) 100%);
  background-color:var(--pri);
  color:var(--ink-invert);
  font-size:18px;
  font-weight:600;
  letter-spacing:.02em;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:var(--sh-btn);
  transition:transform var(--t-fast) var(--ease),
             filter var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.btn:active{ transform:scale(.982); filter:brightness(.9); }
.btn[disabled],
.btn[aria-disabled="true"]{
  background-image:none;
  background-color:var(--disabled-bg);
  color:var(--ink-3);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
  filter:none;
}
.btn--ghost{
  background-image:none;
  background-color:var(--pri-tint);
  color:var(--pri);
  box-shadow:none;
}
.btn--ghost:active{ background-color:var(--pri-tint-2); filter:none; }
.btn--quiet{
  background-image:none;
  background-color:transparent;
  color:var(--pri);
  box-shadow:none;
  font-weight:600;
}
.btn-sub{
  margin-top:10px;
  text-align:center;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-3);
}
.btn-stack{ margin-top:24px; }

/* ── 表单 ───────────────────────────────────────────────────────────── */
.field{ position:relative; padding:14px 20px 16px; }
.field + .field::before{
  content:"";
  position:absolute;
  top:0; left:20px; right:0;
  height:1px;
  background:var(--line);
  transform:scaleY(.5);
  transform-origin:top;
}
.field > label,
.field .lab{
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:.004em;
  color:var(--ink-strong);
  margin-bottom:9px;
}
.field .req{ color:#C0392B; margin-left:2px; font-weight:700; }
.field .tip{
  display:block;
  margin-top:7px;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-3);
}
.input,
.select,
.textarea{
  display:block;
  width:100%;
  min-height:52px;
  padding:13px 14px;
  background:var(--bg-group);
  border:1px solid transparent;
  border-radius:var(--r-inner);
  font-size:17px;
  line-height:1.5;
  color:var(--ink);
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             box-shadow var(--t-fast) var(--ease);
}
/* 占位文字比正文小一号：文案里最长的占位是「如：一起散步、一起听课、一起买菜做饭」（18 字），
   16px 会在 390px 屏上被裁掉一个字，15px 刚好放得下；裁不掉的时候也不难看。 */
.input::placeholder,
.textarea::placeholder{
  color:var(--ink-3);
  font-size:15px;
  text-overflow:ellipsis;
}
.input:focus,
.select:focus,
.textarea:focus{
  outline:none;
  background:var(--surface);
  border-color:var(--pri);
  box-shadow:0 0 0 3.5px var(--focus-soft);
}
.textarea{ min-height:96px; resize:vertical; line-height:1.7; }
/* select：右侧自绘箭头（⛔ 不用背景图，微信里可能被拦） */
.select-wrap{ position:relative; }
.select-wrap::after{
  content:"";
  position:absolute;
  right:18px; top:50%;
  width:8px; height:8px;
  margin-top:-6px;
  border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);
  pointer-events:none;
}
.select-wrap .select{ padding-right:42px; }

/* 校验失败态 */
.field.is-bad .input,
.field.is-bad .select,
.field.is-bad .textarea{
  border-color:var(--danger);
  background:var(--danger-bg);
}
.err{
  display:block;
  margin-top:7px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--danger);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height var(--t) var(--ease), opacity var(--t) var(--ease);
}
.field.is-bad .err{ max-height:60px; opacity:1; }

/* ── 胶囊分段控件（Apple Segmented · 玻璃版）─────────────────────────
   全站只有一套：`.seg`（表单单选）与 `.tabs`（页面互切）共用同一视觉与动效。
   HIG 依据：
   · 形状：全胶囊 999 —— 和按钮同一形状语言，页签是胶囊、按钮就不能是方角；
   · 底：半透明 + 轻量模糊，选中项是一枚**实心滑块滑过去**，不是换背景色；
   · 动效：只动 transform / width，曲线 iOS 原生 cubic-bezier(.32,.72,0,1)，220ms；
   · 字体：统一 15px / 600。选中项**不加粗**，否则选中瞬间会跳一下；
     区分靠颜色 + 滑块，这与 HIG 的分段控件一致；
   · 无障碍：真 radio / 真链接，滑块只是装饰层，键盘与读屏照常工作。 */
.seg,
.tabs{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  padding:3px;
  border-radius:var(--r-pill);
  background:var(--glass);
  -webkit-backdrop-filter:saturate(1.8) blur(12px);
  backdrop-filter:saturate(1.8) blur(12px);
  box-shadow:inset 0 0 0 1px var(--line);
}
/* 不支持毛玻璃时退化为不透明底 —— ⛔ 绝不因为模糊失效就透出下面的正文 */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .seg,.tabs{ background:var(--bg-group); }
}

.seg .thumb,
.tabs .thumb{
  position:absolute;
  top:3px; left:3px;
  height:calc(100% - 6px);
  /* 位置与宽度只有一个来源：--n（几格）与 --i（第几格）。
     宽度按格数均分，位移用自身的 100% 乘格数 —— 换成 2/3/4 项都不用改样式。
     ⚠️ --i 必须由「索引」驱动，⛔ 不能由 radio 的业务值驱动
        （值 1/0 与 DOM 顺序相反时，滑块会永远错一格，且页面不报红）。 */
  width:calc((100% - 6px) / var(--n, 2));
  border-radius:var(--r-pill);
  background:var(--seg-thumb);
  box-shadow:var(--seg-thumb-sh);
  pointer-events:none;
  z-index:0;
  /* ⚠️ 没有选中项时滑块必须隐藏：
     否则滑块停在左边，看上去像「是，愿意」已被选中，
     而校验又会报「请选择」——用户会觉得表单坏了。 */
  opacity:0;
  transform:translateX(calc(var(--i, 0) * 100%));
  transition:transform var(--t) var(--ease),
             width var(--t) var(--ease),
             opacity var(--t-fast) var(--ease);
}
/* data-v 为空串＝还没选 ⇒ 滑块不显示（:not 排掉空串，别写成 [data-v]） */
.seg[data-v]:not([data-v=""]) .thumb,
.tabs[data-v]:not([data-v=""]) .thumb{ opacity:1; }
/* data-v → --i：.tabs 的位置写死在 HTML 里（无 JS 也正确），.seg 由 JS 同步 */
.seg[data-v="0"],.tabs[data-v="0"]{ --i:0; }
.seg[data-v="1"],.tabs[data-v="1"]{ --i:1; }
.seg[data-v="2"],.tabs[data-v="2"]{ --i:2; }
.seg[data-v="3"],.tabs[data-v="3"]{ --i:3; }

.seg label,
.tabs a{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 10px;
  border-radius:var(--r-pill);
  font-size:15px;
  font-weight:600;
  letter-spacing:.004em;
  line-height:1.35;
  color:var(--ink-2);
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--t) var(--ease);
}
.seg label:has(input:checked),
.tabs a[aria-current="page"]{ color:var(--pri); }

.seg{ margin-top:2px; }
.tabs{ margin-top:18px; }

.seg input{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}
.seg label:has(input:focus-visible),
.tabs a:focus-visible{ box-shadow:0 0 0 3.5px var(--focus); }

/* ── 知情同意（Apple 的同意行：大复选框 + 正文可点链接）──────────── */
.consent{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:17px 20px;
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  margin-top:22px;
  transition:background-color var(--t-fast) var(--ease);
}
.consent:active{ background:var(--surface-press); }
.consent .box{
  position:relative;
  flex:0 0 auto;
  width:26px; height:26px;
  margin-top:1px;
}
.consent input{
  position:absolute;
  inset:0;
  width:26px; height:26px;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.consent .mark{
  position:absolute;
  inset:0;
  border:1.6px solid var(--field-line);
  border-radius:7px;
  background:var(--surface);
  transition:background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.consent .mark::after{
  content:"";
  position:absolute;
  left:7px; top:4px;
  width:8px; height:13px;
  border-right:2.4px solid #fff;
  border-bottom:2.4px solid #fff;
  transform:rotate(38deg) scale(.6);
  opacity:0;
  transition:opacity var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.consent input:checked + .mark{
  background:var(--pri);
  border-color:var(--pri);
}
.consent input:checked + .mark::after{
  opacity:1;
  transform:rotate(38deg) scale(1);
}
.consent input:focus-visible + .mark{
  box-shadow:0 0 0 3.5px var(--focus-mark);
}
.consent .ctext{
  flex:1 1 auto;
  font-size:15.5px;
  line-height:1.8;
  color:var(--ink);
}
.consent .ctext a{
  color:var(--pri);
  font-weight:600;
  border-bottom:1px solid var(--link-line);
  padding-bottom:1px;
}

/* ── 折叠面板（FAQ）：JS 量高度做 height 过渡，稳 ──────────────────── */
.acc{ margin-top:0; }
.acc-item{ position:relative; }
.acc-item + .acc-item::before{
  content:"";
  position:absolute;
  top:0; left:20px; right:0;
  height:1px;
  background:var(--line);
  transform:scaleY(.5);
  transform-origin:top;
}
.acc-q{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  padding:18px 20px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--t-fast) var(--ease);
}
.acc-q:active{ background:var(--surface-press); }
.acc-q .qtx{
  flex:1 1 auto;
  font-size:17px;
  line-height:1.6;
  font-weight:600;
  letter-spacing:-.008em;
  color:var(--ink-strong);
}
.acc-q .sign{
  position:relative;
  flex:0 0 auto;
  width:16px; height:16px;
  margin-top:5px;
}
.acc-q .sign::before,
.acc-q .sign::after{
  content:"";
  position:absolute;
  background:var(--ink-3);
  border-radius:1px;
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.acc-q .sign::before{ left:0; top:7px; width:16px; height:1.8px; }
.acc-q .sign::after{ left:7px; top:0; width:1.8px; height:16px; }
.acc-item.is-open .acc-q .sign::after{ transform:scaleY(0); opacity:0; }
.acc-a{
  height:0;
  overflow:hidden;
  transition:height var(--t-slow) var(--ease);
}
.acc-a .in{
  padding:0 20px 20px;
  font-size:16px;
  line-height:1.9;
  color:var(--ink);
}
.acc-a .in p + p{ margin-top:10px; }

/* ── 活动卡 ─────────────────────────────────────────────────────────── */
.act{
  display:flex;
  gap:0;
  align-items:stretch;
}
.act .date{
  flex:0 0 auto;
  width:76px;
  padding:18px 0;
  text-align:center;
  background:var(--pri-tint);
}
.act .date b{
  display:block;
  font-size:24px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--pri);
}
.act .date span{
  display:block;
  margin-top:2px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--pri);
  opacity:.8;
}
.act .info{ flex:1 1 auto; padding:16px 18px 17px; min-width:0; }
.act .info h3{
  font-size:17px;
  line-height:1.5;
  font-weight:600;
  color:var(--ink-strong);
}
.act .info p{
  margin-top:6px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--ink-2);
}
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.tag{
  display:inline-block;
  font-size:12px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--pri);
  background:var(--pri-tint);
  border-radius:var(--r-pill);
  padding:4px 10px;
}
.tag--mute{ color:var(--ink-2); background:var(--chip-mute); }

/* ── 两列入口卡 ─────────────────────────────────────────────────────── */
.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.duo a{
  display:block;
  padding:18px 16px 17px;
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  color:inherit;
  text-decoration:none;
  transition:transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.duo a:active{ transform:scale(.985); background:var(--surface-press); }
.duo b{
  display:block;
  font-size:16.5px;
  line-height:1.45;
  font-weight:600;
  color:var(--ink-strong);
}
.duo span{
  display:block;
  margin-top:5px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink-2);
}

/* ── 提示块（口径 / 免责 / 风险提示）──────────────────────────────── */
.callout{
  margin-top:22px;
  padding:16px 18px;
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  font-size:14px;
  line-height:1.8;
  color:var(--ink-2);
}
.callout b{ color:var(--ink-strong); font-weight:600; }
.callout--warn{
  background:var(--warn-bg);
  box-shadow:var(--warn-sh);
  color:var(--warn-ink);
}
.callout--warn b{ color:var(--warn-ink-b); }

/* ── 页脚 ─────────────────────────────────────────────────────────────
   ⚠️ 同样必须写单项 padding-top / padding-bottom：
      原来 `padding:22px 0 28px` 把 .wrap 的左右内边距清零，落款顶到屏幕边。 */
.foot{
  margin-top:38px;
  padding-top:22px;
  padding-bottom:28px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  line-height:1.85;
  color:var(--ink-3);
}
.foot p + p{ margin-top:9px; }
/* 🔴 2026-10-23 用户令：「©2026 雅之林®YAZHILIN　ICP 备案号：闽ICP备2025100117号
   一排居中，在免责声明上面。」⇒ 一行居中、两项间留一档呼吸位、窄屏可折行仍居中。 */
.foot .sign{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap:4px 8px;
  /* ⚠️ 实测（2026-10-23）：12.5px 时「版权 + 备案号」需要 367px，而 390 屏只有 350px
     ⇒ 会折成两行，用户要的「一排居中」就没了。压到 11px 后需要约 317px：
     375/390/414 都能并成一行。320 极窄屏仍允许折行（⛔ 宁可折行也不缩到看不清）。 */
  font-size:11px;
  letter-spacing:0;
  text-align:center;
  color:var(--ink-2);
}
.foot .sign .copy{ color:var(--ink-2); }
.foot .sign .icp{ color:var(--ink-3); }
.foot .risk{
  margin-top:14px;
  padding:13px 14px;
  background:var(--bg-group);
  border-radius:var(--r-inner);
  color:var(--ink-2);
}
.foot .icp{ color:var(--ink-3); }

/* ── 底部固定导航（液态玻璃 · Liquid Glass）────────────────────────────
   与顶部品牌浮条**共用 --lg-* 令牌** ⇒ 一屏里只有一种玻璃材质。
   液态玻璃的四层，缺一层就退化成「毛玻璃贴纸」：
     ① 强模糊 + 高饱和：底下的正文被吸成柔和色块，不是糊成一片灰；
     ② 上沿镜面高光：inset 0 1px 0 var(--lg-hi)；
     ③ 上沿高光渐隐条 ::before：中间亮、两端收，像光线掠过玻璃边缘；
     ④ **向上**投影：让它浮在正文之上（⛔ 向下投＝贴在页底，玻璃感全没了）。
   ⚠️ 选中态是一枚**玻璃胶囊**（半透明白 + 内高光），⛔ 绝不用「换一块底色」——
      在玻璃上换底色会变成一块脏斑，这是液态玻璃最容易做错的地方。
   ⚠️ 胶囊只动 opacity（6 个页签是 6 次整页跳转，不存在「滑动过去」的场景，
      做滑动反而会在首帧闪一下）。 */
.nav{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:80;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  background:var(--glass-nav);
  -webkit-backdrop-filter:saturate(var(--lg-sat)) blur(var(--lg-blur));
  backdrop-filter:saturate(var(--lg-sat)) blur(var(--lg-blur));
  box-shadow:inset 0 1px 0 var(--lg-hi), inset 0 -1px 0 var(--lg-lo), var(--lg-sh);
  padding-bottom:var(--safe-b);
}
/* 上沿高光渐隐条：两端收、中间亮 —— 液态玻璃的标志性边缘 */
.nav::before{
  content:'';
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    var(--lg-hi) 22%,
    var(--lg-hi) 78%,
    rgba(255,255,255,0) 100%);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav{ background:var(--bg); }
}
.nav a{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:var(--nav-h);
  padding:7px 0 6px;
  color:var(--ink-3);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--t-fast) var(--ease);
}
/* ── 液态滑块：6 个页签唯一的一层选中态，靠 transform 在格子间**流**过去 ──
   🔴 2026-10-23 用户令：「切换的时候像液体流动而不是直接切换。」
   ⚠️ 为什么不用「每个页签自己一块胶囊」：那种做法只有 opacity 渐变，
      眼睛看到的是「这块灭了、那块亮了」＝直接切换，没有流动；
      一枚滑块沿着导航条移过去，才是液体的观感。
   ⚠️ 过冲缓动 cubic-bezier(.34,1.16,.64,1) 让它到位置时轻微「涌」一下 ——
      ⛔ 不要换成线性或 ease，那样是平移，不是液体。
   🔴 尺寸算法（第一版算错过，必须按这个写）：
      滑块外层宽度**必须正好等于一格**（100% / 6），位移才等于一格的整数倍；
      视觉上的左右内缩（6px）交给内层 ::before 去做。
      ⛔ 千万别把内缩算进宽度里（写成 (100%-12px)/6、left:6px 那种）——
         那时一格 = 滑块宽 + 2px，`translateX(100%)` 每一步都少走 2px，
         到第 6 格累计偏 10px，而页面完全不报错。 */
.nav-thumb{
  position:absolute;
  left:0; top:0; bottom:0;
  width:calc(100% / 6);
  transform:translateX(calc(var(--nav-i, 0) * 100%));
  transition:transform 520ms cubic-bezier(.34,1.16,.64,1), opacity var(--t) var(--ease);
  opacity:0;
  pointer-events:none;
  z-index:0;
  will-change:transform;
}
.nav-thumb::before{
  content:'';
  position:absolute;
  inset:6px 6px calc(6px + var(--safe-b));
  border-radius:16px;
  background:var(--lg-pill);
  box-shadow:inset 0 1px 0 var(--lg-pill-hi), 0 1px 2px rgba(48,49,51,.06);
}
.nav.has-thumb .nav-thumb{ opacity:1; }
/* 首帧落位用：⛔ 没有它，「先放到上一页→再移到当前页」两次赋值会被浏览器合并，
   动画根本不发生（页面不报错、只是没有流动）。 */
.nav-thumb.no-anim{ transition:none; }
.nav a svg{
  width:22px; height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--t-fast) var(--ease);
}
.nav a b{
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.02em;
}
.nav a:active svg{ transform:scale(.92); }
.nav a[aria-current="page"]{ color:var(--pri); }
.nav a[aria-current="page"] b{ font-weight:700; }

/* ── 弹窗（成功提示）：Apple Alert —— 居中、圆角、双按钮位 ────────── */
.modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
}
.modal.is-on{ display:flex; }
.modal .veil{
  position:absolute;
  inset:0;
  background:var(--veil);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity var(--t) var(--ease);
}
.modal.is-on .veil{ opacity:1; }
.modal .sheetbox{
  position:relative;
  width:100%;
  max-width:300px;
  background:var(--surface);
  border-radius:22px;
  box-shadow:var(--sh-raise);
  padding:24px 22px 0;
  text-align:center;
  transform:scale(.94);
  opacity:0;
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.modal.is-on .sheetbox{ transform:scale(1); opacity:1; }
.modal .mh{
  font-size:18px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  margin-bottom:8px;
}
.modal .mb{
  font-size:16px;
  line-height:1.8;
  color:var(--ink);
  padding-bottom:22px;
}
.modal .mact{ border-top:1px solid var(--line); }
.modal .mact button{
  width:100%;
  min-height:52px;
  border:0;
  background:transparent;
  color:var(--pri);
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.modal .mact button:active{ background:var(--surface-press); }

/* ── 底部浮层（知情同意书全文）：iOS 的 page sheet ────────────────── */
.sheet{
  position:fixed;
  inset:0;
  z-index:130;
  display:none;
}
.sheet.is-on{ display:block; }
.sheet .veil{
  position:absolute;
  inset:0;
  background:var(--veil-soft);
  opacity:0;
  transition:opacity var(--t) var(--ease);
}
.sheet.is-on .veil{ opacity:1; }
.sheet .panel{
  position:absolute;
  left:0; right:0; bottom:0;
  max-height:88vh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border-radius:20px 20px 0 0;
  box-shadow:var(--sh-raise);
  transform:translateY(100%);
  transition:transform var(--t-slow) var(--ease);
}
.sheet.is-on .panel{ transform:translateY(0); }
.sheet .ph{
  position:relative;
  flex:0 0 auto;
  padding:16px 20px 12px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
/* 顶部的抓手条，iOS sheet 的标志性细节 */
.sheet .grab{
  width:36px; height:5px;
  border-radius:3px;
  background:var(--line-strong);
  margin:0 auto 12px;
}
.sheet .ph h2{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink-strong);
}
.sheet .pb{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px 20px 8px;
}
.sheet .pb h3{
  font-size:16px;
  font-weight:700;
  line-height:1.6;
  color:var(--ink-strong);
  margin:20px 0 6px;
}
.sheet .pb h3:first-child{ margin-top:0; }
.sheet .pb p{
  font-size:15px;
  line-height:1.9;
  color:var(--ink);
}
.sheet .pb p + p{ margin-top:8px; }
.sheet .pb .meta{
  margin-top:20px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--ink-3);
}
.sheet .pf{
  flex:0 0 auto;
  padding:12px 20px calc(14px + var(--safe-b));
  border-top:1px solid var(--line);
  background:var(--glass-solid);
}

/* 打开浮层/弹窗时锁滚动 */
body.is-locked{ overflow:hidden; }

/* ── 页面进场：一次性的轻微淡入上移（只是初次观感，不跟滚动）────────── */
.main{
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
body.is-ready .main{ opacity:1; transform:translateY(0); }

/* ── 分隔与工具 ─────────────────────────────────────────────────────── */
.hr{
  height:1px;
  background:var(--line);
  transform:scaleY(.5);
  margin:26px 0;
  border:0;
}
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.mt-0{ margin-top:0; }
.mt-8{ margin-top:8px; }
.mt-14{ margin-top:14px; }
.mt-22{ margin-top:22px; }
.tc{ text-align:center; }
.mute{ color:var(--ink-2); }
.small{ font-size:14px; line-height:1.8; }

/* ══ 构件的补充（7 页共用）════════════════════════════════════════════ */

/* 隐藏兜底：⛔ 只要某个组件自己给了 display，hidden 属性就会失效（踩过坑）
   ⇒ 全站统一兜住，JS 里才敢放心地用 el.hidden = true/false */
[hidden]{ display:none !important; }

/* .btn 原本按 <button> 写，用作 <a> 时去掉下划线、去掉默认色 */
a.btn{ text-decoration:none; color:var(--ink-invert); }
a.btn.btn--ghost, a.btn.btn--quiet{ color:var(--pri); }

/* ⚠️ 双页签（科普 / 反诈 互切）的样式已上移到上面与 `.seg` 合并成同一套玻璃胶囊，
   此处**不再重复定义**——旧块曾用 grid-template-columns:1fr 1fr + 不透明底
   把新样式整段覆盖掉（同属性后写者胜），且滑块层不存在 ⇒ 选中态没有滑动动画。 */

/* 底部双按钮坞：反诈页的「返回科普 / 我要登记」。
   ⚠️ 必须抬在主导航**之上**（bottom = 导航高 + 安全区），否则两个固定层会叠在一起。 */
.dockbar{
  position:fixed;
  left:0; right:0; z-index:79;
  bottom:calc(var(--nav-h) + var(--safe-b));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px var(--gutter) 12px;
  background:var(--glass-nav);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--line);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .dockbar{ background:var(--bg); }
}
.dockbar .btn{ min-height:48px; font-size:16px; padding:12px 14px; }
/* 有坞的页面，正文底部要给坞让位（坞高 48 + 上下留白 22 + 导航 + 安全区） */
body.has-dock{ padding-bottom:calc(var(--nav-h) + var(--safe-b) + 82px); }

/* 弹窗里的「演示模式」说明：⛔ 绝不假装已经提交成功 */
.modal .demo-note{
  margin-top:-14px;
  padding-bottom:20px;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-3);
}

/* 文章正文块（科普卡片里的多段正文）
   ⚠️ 不能借用 .row：.row 是「一行一个要点」的列表语义，
      多段正文塞进去段间距会挤在一起（.row p 只给了 margin-top:5px）。 */
.prose{ padding:2px 20px 20px; }
.prose p{
  font-size:16px;
  line-height:1.88;
  color:var(--ink);
  letter-spacing:.002em;
}
.prose p + p{ margin-top:11px; }
.prose b{ color:var(--ink-strong); font-weight:600; }

/* 三格大字（反诈页的「三不原则」）
   ⚠️ 不用 .stats：.stats b 是 23px，「不给验证码」五个字在 320px 屏上会溢出；
      这里字号压到 18px 并允许折两行，最窄屏也放得下。 */
.trio{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:12px;
}
.trio div{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:84px;
  padding:14px 6px;
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink-strong);
  text-align:center;
}

/* 正文里的必填星号（.field .req 只在表单标签里生效，正文里另给一个） */
.star{ color:#C0392B; font-weight:700; }

/* 不许断行的短片段。
   成功弹窗那句「…将在1-2个工作日…」里的「1-2」如果按连字符折行，
   会变成「1-」换行「2个工作日」，读起来像打错了 ⇒ 用 nowrap 钉住。
   ⚠️ 用户指定的原文一字未改，这里只是不让它在中间断行。 */
.nowrap{ white-space:nowrap; }

/* ══ 吸附轮播（选伴意向）══════════════════════════════════════════════
   动效三件事（来源：用户给的录屏）：① 手指拖动 1:1 跟手
   ② 一甩松手，自动吸附停在正中 ③ 中间放大、两侧缩小并变暗。
   ─────────────────────────────────────────────────────────────────────
   ⚠️ 实现走**原生 scroll-snap**，JS 绝不接管手势：
      自己写拖拽/惯性，很容易做成录屏里吐槽的「按下去没反应、翻面硬切」。
      JS 只读滚动位置去算 scale 与压暗层的不透明度，不与系统抢帧。
   ⚠️ 因此 .snap-card 的 transform **不能加 transition**：
      它每帧都被 JS 重写，加过渡会拖出橡皮筋一样的迟滞感。 */
/* ⚠️ --cw 必须给**带单位的确定长度**，不能用百分比。
   踩过的坑：写 `--cw:74%` 时，卡片 flex-basis 的 74% 是按
   **track 扣掉左右 padding 之后的内容盒**算的，等于二次扣减
   ⇒ 实测卡片只剩 53.7% 宽、首张卡整体偏左 34px，而且页面不报任何错。
   改成 px 之后：padding 由同一个值算出来，居中就是精确的。 */
.snap{ --cw:clamp(196px, 66vw, 300px); position:relative; margin-top:14px; }
.snap-vp{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding:4px 0 16px;
}
.snap-vp::-webkit-scrollbar{ display:none; }
.snap-track{
  display:flex;
  gap:12px;
  padding:0 calc((100% - var(--cw)) / 2);
  margin:0;
  list-style:none;
}
.snap-card{
  flex:0 0 var(--cw);
  scroll-snap-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:318px;
  border-radius:22px;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(162deg,#8A4CFF 0%,#3D06B8 100%);
  box-shadow:var(--sh-raise);
  transform-origin:center center;
  -webkit-tap-highlight-color:transparent;
}
/* 四张卡四种墨绿系色阶，克制、不抢字 */
.snap-card--b{ background:linear-gradient(162deg,#A45CFF 0%,#5B12D8 100%); }
.snap-card--c{ background:linear-gradient(162deg,#5C4BFF 0%,#2A1AAE 100%); }
.snap-card--d{ background:linear-gradient(162deg,#B15CE8 0%,#5D1E9E 100%); }

/* 压暗层：两侧卡片靠一层黑压下去。
   ⛔ 别用「改文字颜色」的方式做变暗 —— 字会连带发灰，看着像脏了。 */
.snap-shade{
  position:absolute;
  inset:0;
  background:var(--shade);
  opacity:0;
  pointer-events:none;
}
.snap-top{
  position:absolute;
  top:14px; left:14px; right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:1;
}
.snap-pill{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:5px 11px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.22);
  color:#fff;
}
.snap-body{ position:relative; z-index:1; padding:18px 18px 20px; }

/* 卡面上的大号水印图形：正式版这块区域放活动实拍图（需肖像授权），
   没有图的时候用一枚极淡的描边图标占位 —— ⛔ 不能让它空成一块死白/死绿。 */
.snap-mark{
  position:absolute;
  left:50%; top:44%;
  width:128px; height:128px;
  margin:-64px 0 0 -64px;
  opacity:.14;
  z-index:0;
}
.snap-mark svg{
  width:100%; height:100%;
  fill:none;
  stroke:#fff;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.snap-body h3{
  font-size:21px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:-.014em;
}
.snap-body p{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.62;
  color:rgba(255,255,255,.86);
}
.snap-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.snap-tags span{
  font-size:11.5px;
  font-weight:600;
  line-height:1.5;
  padding:4px 9px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.18);
  color:rgba(255,255,255,.96);
}

/* 指示器：当前项拉长成胶囊，其余是小圆点（与录屏一致） */
.snap-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:2px;
}
.snap-dot{
  width:6px; height:6px;
  padding:0;
  border:0;
  border-radius:var(--r-pill);
  background:var(--dot);
  cursor:pointer;
  transition:width var(--t) var(--ease), background-color var(--t) var(--ease);
}
.snap-dot.is-on{ width:20px; background:var(--pri); }

/* 已选提示行 */
.snap-pick{
  margin-top:16px;
  text-align:center;
  font-size:16px;
  line-height:1.62;
  color:var(--ink-2);
}
.snap-pick b{ color:var(--pri); font-weight:600; font-size:18px; }
.snap-pick span{ font-size:13.5px; color:var(--ink-3); }

/* 同意书浮层底部按钮 */
.sheet .pf .btn{ min-height:50px; font-size:17px; }

/* ── 微信内嵌适配 ───────────────────────────────────────────────────── */
/* 微信 iOS 顶部有原生返回条，页面内不再重复做返回按钮；
   这里只保证：任何情况下都不出现横向滚动、输入框不被放大、长按不选中整页。 */
@supports (-webkit-touch-callout:none){
  body{ -webkit-touch-callout:none; }
  input,textarea,select{ -webkit-touch-callout:default; }
}

/* ══ 桌面端 ════════════════════════════════════════════════════════════
   ⛔ 不是「把手机版拉宽」：手机上贴边的固定条一旦在 1440px 屏上拉满，
      就是两条两米宽的灰带横贯屏幕，看着像没适配。
   ⇒ 版心加宽到 780（正文行长仍在 40 字左右的舒适区），
     底部 6 项导航与双按钮坞改成居中悬浮胶囊（iOS 浮动 Tab Bar / macOS Dock 的语言），
     形状与胶囊切换控件一致，全站只有一种形状语言。 */
@media (min-width:768px){
  :root{
    --maxw:   780px;
    --gutter: 32px;
    --nav-h:  60px;
  }

  /* 底部导航：居中悬浮胶囊，两侧留出与屏幕边的呼吸空间 */
  .nav{
    left:50%; right:auto;
    transform:translateX(-50%);
    width:min(calc(100% - 48px), 620px);
    bottom:18px;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    box-shadow:var(--sh-raise);
  }
  .nav a{ border-radius:var(--r-pill); }

  /* 双按钮坞：抬到悬浮导航之上，同样居中、同样胶囊。
     ⚠️ 圆角必须是胶囊（999），⛔ 不能是卡片的 20px：
        同一屏上两个固定层一个全胶囊、一个圆角矩形，形状语言就散了。 */
  .dockbar{
    left:50%; right:auto;
    transform:translateX(-50%);
    width:min(calc(100% - 48px), 620px);
    bottom:calc(18px + var(--nav-h) + 10px);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    box-shadow:var(--sh-raise);
  }

  /* 正文给「悬浮导航 + 悬空间隙」让位（手机上贴底，桌面上浮起 18px） */
  body{ padding-bottom:calc(var(--nav-h) + var(--safe-b) + 40px); }
  body.has-dock{ padding-bottom:calc(var(--nav-h) + var(--safe-b) + 122px); }

  /* 顶部品牌浮条：不拉满，与版心同宽，做成一块下沿圆角的浮起玻璃 */
  .topbar{
    max-width:var(--maxw);
    margin:0 auto;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    border-radius:0 0 var(--r-card) var(--r-card);
  }

  /* 轮播卡在宽屏放得下更大的卡，仍保留两侧露出下一张的暗示 */
  .snap{ --cw:clamp(280px, 30vw, 360px); }
}

/* 有真实指针的设备才给 hover —— 触屏上没有 hover，加了就是「点一下粘住」 */
@media (hover:hover) and (pointer:fine){
  .duo a:hover{ background:var(--surface-press); transform:translateY(-1px); }
  .nav a:hover{ color:var(--ink-2); background:var(--hover); }
  .seg label:hover,.tabs a:hover{ color:var(--ink); }
  .btn:hover:not([disabled]):not([aria-disabled="true"]){ filter:brightness(1.06); }
  .btn--ghost:hover:not([disabled]),.btn--quiet:hover:not([disabled]){ background:var(--pri-tint-2); }
}

/* 320px 极窄屏：把版心留白收紧一档，字号不动（⛔ 不缩字号） */
@media (max-width:340px){
  :root{ --gutter:16px; }
  .display{ font-size:28px; }
  .stats b{ font-size:21px; }
  .act .date{ width:66px; }
}

/* 无障碍：系统开了「减弱动态效果」就全部关掉，绝不让动效成为干扰 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
  .main{ opacity:1; transform:none; }
}

/* 打印：正式文件可能被打印留档，去掉固定层与阴影 */
@media print{
  .topbar,.nav,.modal,.sheet{ display:none !important; }
  body{ padding:0; background:#fff; }
  .group,.stats,.callout{ box-shadow:none; border:1px solid var(--line); }
}