/* ============================================================================
   订阅站**专属**样式。
   🔴 官网那份 `/site-assets/home.css` 在 index.html 里先加载，本文件只做两件事：
      ① 新增订阅站独有的块（广告语区 / 定价表表头与订阅按钮 / 订单表 / 邀请码兑换）；
      ② 用**订阅站前缀 class**（`.sub-*`）修订官网选择器在本站的表现差异。
      ⚠️ 不要在这里改写官网既有选择器本身（`.site-head` / `.pricing` / `.faq` / `.foot` …）——
         那会让「官网改一处、订阅站跟随」的复用前提失效，也会在两站之间埋下静默漂移。
   ============================================================================ */

/* ── 页面骨架 ─────────────────────────────────────────────────────────── */

/* 官网导航是 `position: fixed`，首页靠满屏 hero 顶上去；订阅站第一屏就是内容，
   必须自己让出导航高度（`.hero-bar` 实测 64px）。 */
.sub-page {
  padding-top: 64px;
  background: #fff;
}

/* 订阅站整页浅底 ⇒ 导航一进来就得是「白底深字」那一套（`scrolled`，见 SiteHeader.tsx 注释）。
   贴顶时去掉那道分隔阴影，滚起来再给 —— 避免静止时页面顶部凭空多一条横线。

   🔴 2026-08-16 修：这两条原本写成裸 `.sub-head` / `.sub-head-lifted`（特指度 0,1,0），
   **压不过**官网的 `.site-head.scrolled`（0,2,0，那里带 `box-shadow: 0 1px 0 …`）——
   于是订阅站首屏贴顶时那条横线一直在（用户实拍）。加上 `.site-head` 前缀提到同一特指度，
   再靠「后定义者胜」让 lifted 覆盖非 lifted（两条现在都是 0,2,0，顺序即优先级，别对调）。 */
.site-head.sub-head {
  box-shadow: none;
}
.site-head.sub-head-lifted {
  box-shadow: 0 1px 0 rgba(28, 43, 64, 0.08);
}
/* （`.sub-nav-who` 已于 2026-08-16 随导航右侧账号名一并删除 —— 登录态只留「进入工作台」。）

   🔴 2026-08-16 用户令：**订阅站导航项靠右，不居中**。
   官网的 `.hero-links` 是 `position:absolute + left:50% + translate(-50%,-50%)` 的绝对居中
   （pixieset 式）；订阅站改回正常流并用 `margin-left:auto` 顶到右侧，与右侧动作区连成一组。
   🔴 连带**必须**覆盖 `.nav-login`（未登录）与 `.nav-logout`（登录态）的 `margin-left:auto`
   —— 官网靠那个 auto 把右侧组推到最右；不覆盖的话就有**两个** auto 平分剩余空间，导航项会
   停在三分之一处而不是贴右。**两态各有一个**，只测一态会漏（下面那条规则两个选择器都写了）。
   推手改挂 `.hero-links` 后，原来那个只在登录态用的 `.sub-nav-solo` 已无必要，一并删除。 */
.site-head.sub-head .hero-links {
  position: static;
  transform: none;
  margin-left: auto;
}
/* 未登录的「登录」与登录态的「退出登录」占同一个位置，**两侧留白与字重必须一模一样**
   （2026-08-16 用户令）——它们是同一个槽位的两种态，差一点点在两态之间切换时就会看见跳动。
   🔴 auto 推手已移到 `.hero-links` 上（见上），这里只调留白。
   左 64：左边是导航项组，要拉开；右 20：右边是紧跟着的实底按钮（免费注册 / 进入工作台），
   两者是一组动作，靠近才读得出来。
   🔴 字重 400 不加粗（官网基类给的是 500）：它是**文字链**，加粗会和右边的实底按钮抢。 */
.site-head.sub-head .nav-login,
.site-head.sub-head .nav-logout {
  margin-left: 64px;
  font-weight: 400;
}
.site-head.sub-head .nav-login + .btn-login,
.site-head.sub-head .nav-logout + .btn-login {
  margin-left: 20px;
}

/* 🔴 2026-08-16 用户令：订阅站品牌字标比官网小一档（官网 22/20 → 这里 20/18）。
   只动 `font-size` 就够 —— 两段的字距与那个抵消尾随字距的负 margin 都是 **em 单位**
   （`.brand-cn` 0.2em / `.brand-en` 0.333em），会自动跟着字号缩放，别再手改成 px。
   官网首页的字标不受影响（本规则带 `.sub-head` 前缀）。 */
.site-head.sub-head .brand-cn {
  font-size: 20px;
}
.site-head.sub-head .brand-en {
  font-size: 18px;
}

.sub-main {
  background: #fff;
}
.sub-block {
  padding: 56px 0 0;
}
.sub-main .shell > section:last-child {
  padding-bottom: 72px;
}
.sub-h2 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* 订单历史的加载骨架条。 */
.sub-skel-line {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #eceff2;
}
.sub-skel-line.w40 {
  width: 40%;
}
.sub-skel-line.w70 {
  width: 70%;
}

/* ── 收尾 CTA 带 ─────────────────────────────────────────────────────── */

/* 🔴 官网 `.closing` 的 `padding: 110px 0 0`（底部 0）是给它那块 520px 高的产品拼贴留的 ——
   订阅站没搬拼贴（进来的人已是用户），不补这条按钮就直接贴住页脚的上边线（用户 2026-08-15
   走查实测报到）。110 → 160（2026-08-16 用户令再加大，按钮离黑页脚太近）。 */
.sub-closing {
  padding-bottom: 160px;
}

/* ── 🔴 整页白底（2026-08-16 用户令：「订阅区与上方区域为啥要搞两种底色」）────────
   官网首页是「白 / 浅灰 #fafafa」交替分段，订阅站原样照搬后变成 白→灰→白→灰→白 交替五次，
   页面被切得很碎。订阅站统一白底，分区改交给表格线与区块间距。
   🔴 连带**必须**把 FAQ 那组卡片从「白卡浮在灰底上」改成「描边卡」—— 只改底不改卡的话，
      白卡落在白底上就完全看不出是卡片（这一条别省）。
   🔴 只在订阅站生效（全部带 `.sub-page` / `.sub-*` 前缀），官网首页的分段配色是 2026-08-14
      定稿的，不受影响。 */
.sub-page .pricing,
.sub-page .faq {
  background: #fff;
}
.sub-page .faq-q {
  border: 1px solid #e6e9ed;
}

/* ── 广告语区（导航栏下方第一块，2026-08-16 走查重做） ──────────────────
   原「当前套餐状态条 + 未登录引导」两块都在这个位置，用户判「很丑、排版不合理」整块删掉；
   这一页现在只回答「买哪一档」，当前档位由定价表那一列自己说。 */
.sub-hero {
  /* 56 不是 84：导航到广告语之间原来空太多（用户 2026-08-16 令缩小）。 */
  padding: 56px 0 0;
  text-align: center;
  background: #fff;
}
.sub-hero-h {
  margin: 0;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.sub-hero-sub {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #54677c;
}
/* 套餐接口失败：只报一行，表格照常渲染（价格退回静态文案）。 */
.sub-hero-err {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: #b4453c;
}
.sub-hero-err .sub-retry {
  margin-left: 12px;
  vertical-align: middle;
}
/* 到期四阶段提示（协议 5.3）。语气是「说明」不是「警告」——导出与下载恒可用。
   🔴 只在非 active 阶段出现：状态条删了之后，这是这一页唯一还会告诉用户「已到期」的地方。 */
.sub-hero-phase {
  display: inline-block;
  margin: 22px 0 0;
  padding: 10px 18px;
  border-radius: 8px;
  background: #fff8ec;
  color: #8a5a12;
  font-size: 13.5px;
  line-height: 1.7;
}

/* ── 定价区留白：广告语区已把标题说完，这里只需要一段呼吸。
   （`.price-body` 那层随第三版改卡片一并删了，padding 改挂在区块上。） */
.sub-pricing {
  padding: 52px 0 110px;
}

/* ── 定价卡片（2026-08-16 第三版：取消表格改卡片，见 PricingTable.tsx 头注释）────────
   🔴 **卡组不通栏**：max-width 1200 居中（用户令「卡片不要这么宽」）。四张卡 grid 等分、
      `align-items: stretch` 让它们等高 —— 权益条数少的那张（单相册）底部留白是对的，
      高度参差会让并排比较变得很难扫。 */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1280px;
  /* 顶部留出强调卡凸出去的那一截（顶带 40px），否则它会顶到上一区块。 */
  margin: 40px auto 0;
  align-items: stretch;
}
.pc-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #d5dbe3;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  /* 常态就略微浮起（用户 2026-08-16 令），四张卡才不像四块贴在白底上的色块。 */
  box-shadow: 0 2px 10px rgba(20, 25, 32, 0.05);
  transition:
    box-shadow 0.25s,
    transform 0.25s;
}
/* 单相册/专业版卡框线 = 订阅按钮（.pt-buy）的描边绿（2026-08-23 用户令）；
   免费版仍灰框、轻量版走 featured 紫壳无边框。 */
.pc-card[data-plan='album'],
.pc-card[data-plan='pro'] {
  border-color: rgba(26, 188, 156, 0.7);
}
/* hover 再浮一层 —— 🔴 只给**可交互**的卡：免费版没有按钮（静态展示对比用），给它 hover
   反馈等于骗一次点击；推荐卡自己已经是最重的一档，不再叠。 */
.pc-card:not(.featured):not([data-plan='free']):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(20, 25, 32, 0.1);
}
.pc-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* 🔴 强调卡 = **外壳 + 内白卡**（2026-08-16 用户令「套一个外层的壳，这样不显得生硬」）：
   整张卡是一块绿壳，顶带就长在壳上（不再是贴上去的一条），白卡嵌在壳里、四周露 7px 壳色。
   上一版是「白卡 + 绿描边 + 顶带」，顶带与卡身之间那条硬接缝就是用户说的「生硬」。
   白卡四周露 3px 壳色（见下方 padding）。 */
.pc-card.featured {
  border: none;
  border-radius: 11px;
  /* 🔴 壳色走了四版：CTA 绿 → 靛蓝紫 `#5b4ae4` → 深墨 `--ink` → **改回靛蓝紫**（用户拍板，
     以本版为准）。它与「当前套餐」胶囊的紫渐变同色系，页面上的紫是一套。 */
  background: #5b4ae4;
  /* 壳边 3px（7px → 4px → 3px，两轮都被判太宽）。壳的作用是让顶带与卡身连成一体，
     不是画一道框。 */
  padding: 0 3px 3px;
  /* 🔴 左右各外扩一个壳边：grid 四等分给的是**壳**的宽度，不外扩的话内白卡就比其余三卡
     窄 6px（用户令「卡片单独加宽一点，保持内卡片与其他卡片等宽」）。 */
  margin-left: -3px;
  margin-right: -3px;
  box-shadow: 0 10px 30px rgba(91, 74, 228, 0.2);
}
.pc-card.featured .pc-inner {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
/* 顶带：**只有强调卡有**，长在绿壳上（背景由壳提供），靠负 margin 向上凸出、内白卡仍与
   其余三卡顶端齐平。
   🔴 别再给非强调卡铺一条灰顶带占位（2026-08-16 用户令：「不是每个表格都要加这个空表头，
      这样不觉得丑吗」）—— 参考站（方舟定价）就是只有主推那张卡顶出来一条色带。 */
.pc-card.featured {
  /* -39 不是 -40：其余三张卡有 1px 边框，白卡顶端因此比壳内白卡低 1px。差这 1px 时档名、
     价格、按钮四卡全部错开一线（实测量到）。改顶带高度时这里要跟着重算。 */
  margin-top: -39px;
}
.pc-ribbon {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 15px：与卡内档名（20px）差一档、与按钮（15px）同档 —— 13px 那版用户判「也需要增大」。
     字重 500 不是 600：600 在绿底白字上显得糊（用户判「粗了，需要再细一点」）。 */
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #fff;
}
/* 卡身用 grid，七行：档名 / 价格 / **细注(固定 34px)** / aux 步进器(56) / act 按钮(48) /
   权益清单(auto) / **1fr 弹性(垫底)**。
   🔴 「四张卡按钮齐平」的全部机制在这里，两条缺一不可：
      ① 按钮**以上**的每一行都定高或天然等高 —— 细注写死 34px 就是为此（所以那四句文案
        必须控制在一行内，写长了会被裁）；
      ② 弹性行放在**最后**。各卡权益条数不同（免费 11 / 单相册 6 / 档位 10），把 1fr 放在
        按钮上方的话，下面的清单会把按钮顶到四个不同高度 —— 第一版实拍到的就是这个。 */
.pc-body {
  flex: 1;
  display: grid;
  grid-template-rows: auto auto 34px 56px 48px auto 1fr;
  padding: 26px 24px 26px;
}
/* 档名行：左档名、右「当前套餐」胶囊（只有当前档位那张卡有）。 */
.pc-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
}
/* 🔴 渐变紫实底（2026-08-16 用户令，浅灰 → 深墨 → 渐变紫三版）。
   有意**不用绿**：绿在这一页已经是「推荐 / 可点的行动」那一套（顶带、实底按钮），
   当前档位是**状态**不是行动，混进绿里就分不清「这是推荐」还是「这是我」。
   🔴 配色走了五版（浅灰 → 深墨 → 紫渐变 → plum → 淡蓝紫），2026-08-16 用户令**改回紫渐变**
   那一版。它与推荐卡外壳 `#5b4ae4` 同色系，页面上的紫是一套。 */
.pc-cur {
  flex: none;
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6b4de6 0%, #a855f7 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* 已排期（V4.6）：比「当前套餐」弱一档 —— 它是「将来会生效」，不是「现在就是」。 */
.pc-cur.queued {
  background: none;
  border: 1px solid rgba(91, 74, 228, 0.35);
  color: #5b4ae4;
}
.pc-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
/* 档名与价格之间留一大口气（用户令「套餐名称下方的间距需要增大」）。 */
.pc-price {
  margin: 24px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
/* ¥ 与数字**等大**（2026-08-16 用户令；此前是小一档的 23px）。 */
.pc-price .cny {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  margin-right: 1px;
}
.pc-price .num {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pc-price .unit {
  margin-left: 8px;
  font-size: 14.5px;
  color: #8a8e96;
}
.pc-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #9aa0a9;
  white-space: nowrap;
}

/* 步进器槽 / 按钮位。合计与步进器同一行（2026-08-16 用户令，合计不单独占一行）。 */
/* 步进器槽比按钮行高不少，让「说明 → 步进器 → 按钮」三层各自透口气（用户两轮都判「太紧」）。
   空槽的三张卡同样占这 56px，四卡按钮才齐平。 */
.pt-aux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 16px 0 8px;
}
.pt-act {
  align-self: stretch; /* 44px 那行要填满；grid 默认 stretch，写出来防以后误加 align-items */
  display: flex;
  align-items: center;
  width: 100%;
}

/* 🔴 免费卡没有按钮（静态展示对比用），把 act 那行塌成 0、清单也不留上边距 ⇒ 它的分割线
   正好落在其余三卡**按钮的上边线**上（2026-08-16 用户令）。
   aux 那 56px 空槽保留 —— 去掉它清单会再上移一截，价格区就跟其余三卡错位了。 */
.pc-card[data-plan='free'] .pc-body {
  grid-template-rows: auto auto 34px 56px 0 auto 1fr;
}
.pc-card[data-plan='free'] .pc-feats {
  margin-top: 0;
}

/* 权益清单：按钮之下（用户令按钮跟在价格后，清单垫底）。上方一条细分隔线分区。 */
.pc-feats {
  margin: 20px 0 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid #eef1f4;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.pc-feats li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #33404f;
}
/* 未包含项：灰化 + 短横，**不写「不支持」**（官网既有口径，ad-copy-cn 同）。 */
.pc-feats li.off {
  color: #b6bcc4;
}
.pc-ico {
  flex: none;
  width: 16px;
  margin-top: 1px;
  color: var(--green);
  text-align: center;
}
.pc-feats li.off .pc-ico {
  color: #cfd4da;
}

/* ── 加载骨架 / 加载失败（订单历史在用；套餐状态条已于 2026-08-16 整块删除） ───── */
.sub-status-card {
  display: flex;
  align-items: stretch;
  gap: 40px;
  padding: 28px 32px;
  border: 1px solid #e6e9ed;
  border-radius: 12px;
  background: #fff;
}
.sub-status-loading {
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-height: 118px;
}
.sub-status-err {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: #b42318;
}
.sub-retry {
  border: 1px solid #e6e9ed;
  background: #fff;
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.sub-retry:hover {
  border-color: #c9ced6;
}

/* ── 订阅按钮 ─────────────────────────────────────────────────────────
   通栏（列内满宽）而不是内容宽胶囊：四列文案长短不一（「立即订阅」/「续订」/「登录后订阅」），
   内容宽会让四个按钮各是各的宽度，横着看一排歪的 —— 用户 2026-08-16 判「按钮要对齐」既指
   纵向基线也指横向宽度。
   🔴 **任何档位都不禁用**（只在下单请求飞行中禁一下防连点）：拒卖在点击时用提示条说明，
      见 App.tsx `tierSaleBlock` 注释。 */
.pt-buy {
  display: block;
  font-family: inherit; /* <button> 的 UA 默认是 Arial，与同卡文字不一致；静态定价页的 <a> 版也靠它对齐 */
  line-height: 1.4; /* 免费版列那个「免费注册」是 <a>，不给 block 会塌成行内、宽度对不齐 */
  text-align: center;
  width: 100%;
  /* 描边比官网 `.cta-ghost` 的 .45 深一档：那一档是首页里孤零零一个按钮的量，四个并排时
     浅到像失效态（2026-08-16 走查）。 */
  border: 1.5px solid rgba(26, 188, 156, 0.7);
  /* 🔴 方形（2026-08-16 用户令）：官网其余 CTA 是 999px 胶囊，定价表这一组**不跟**——
     参考站（pixieset）定价表的订阅按钮就是直角。步进器同步改方，两者才是一套。 */
  border-radius: 2px;
  background: transparent;
  color: var(--green-hover);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 11px 6px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
/* 🔴 2026-08-16 用户令：描边按钮 hover **直接填成实底**（原来只加一层 8% 淡底，几乎看不出
   有反应）。强调卡那颗本来就是实底，它的 hover 走下面的深一档绿。 */
.pt-buy:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
/* 实底 = 被强调的那张卡（当前档位 > 推荐位），跟 `featured` 走不跟 `recommended` 走 ——
   见 PricingTable 的 renderAction 注释。 */
.pt-buy.solid {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.pt-buy.solid:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
}
.pt-buy:disabled {
  opacity: 0.55;
  cursor: default;
}
.pt-qty {
  display: flex;
  align-items: center;
  border: 1px solid #dfe2e6;
  border-radius: 2px; /* 与订阅按钮同一档方角，见 .pt-buy 注释 */
  overflow: hidden;
  background: #fff;
}
.pt-qty button {
  width: 30px;
  height: 28px;
  border: 0;
  background: none;
  font-size: 15px;
  color: #2c3646;
  cursor: pointer;
}
.pt-qty button:disabled {
  color: #c2c7ce;
  cursor: not-allowed;
}
.pt-qty-n {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pt-sum {
  font-size: 14px;
  color: #6b7684;
  white-space: nowrap;
}

/* ── 扫码支付弹窗 ─────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   支付弹窗（2026-08-27 重做：「深色票头 + 白色码面」两段式）
   · 票头：品牌墨蓝底，商品名 + 衬线大金额（与官网价格数字同一衬线栈）；
   · 付款方式分段控件骑在票头/码面的分界线上（可用渠道 ≥2 时才出现）；
   · 渠道只由 tab 选中态 + 码中心 logo 表达（原方案的四角取景框角标 2026-08-27 用户拍板去掉：
     同一信息第三遍表达＝装饰）。其余一律克制：无渐变、无插画、无多余分割线。
   ═══════════════════════════════════════════════════════════════════════════ */
.pay-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 25, 32, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pay-card {
  position: relative;
  width: 372px;
  max-width: 100%;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(20, 25, 32, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: pay-card-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes pay-card-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ── 票头 ── */
.pay-head {
  position: relative;
  padding: 30px 28px 40px;
  background: var(--ink);
  color: #fff;
}
.pay-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}
.pay-x:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.pay-item {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}
.pay-item-ch {
  margin-left: 6px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.5);
}
.pay-amount {
  margin: 6px 0 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: lining-nums;
}
.pay-amount .cny {
  font-size: 24px;
  margin-right: 3px;
  vertical-align: 0.38em;
  color: rgba(255, 255, 255, 0.72);
}
/* ── 码面 ── */
.pay-body {
  padding: 0 28px 24px;
}
/* 付款方式分段控件：骑在票头下缘（负外边距）。浅灰轨道 + 选中段白色浮起（2026-08-27 用户令：选中态要更清晰）。 */
.pay-tabs {
  position: relative;
  display: flex;
  gap: 4px;
  margin: -22px auto 0;
  padding: 4px;
  width: max-content;
  border-radius: 999px;
  background: #e9edf1;
  box-shadow:
    0 6px 18px rgba(20, 25, 32, 0.18),
    0 0 0 1px rgba(20, 25, 32, 0.05);
}
.pay-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #6f7580;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.pay-tab:hover:not(:disabled):not(.active) {
  color: var(--ink);
}
.pay-tab.active {
  color: var(--ink);
  background: #fff;
  box-shadow:
    0 2px 6px rgba(20, 25, 32, 0.18),
    0 0 0 1px rgba(20, 25, 32, 0.06);
  transform: translateY(-0.5px);
}
.pay-tab:disabled {
  cursor: default;
}
.pay-tab:focus-visible {
  outline: 2px solid var(--logo-blue, #2563eb);
  outline-offset: 2px;
}
.pay-ch-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #07c160;
}
.pay-tab.ch-alipay .pay-ch-icon {
  background: #1677ff;
}
.pay-qr {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 26px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 码本体 180×180。🔴 直角（2026-08-27 用户令）：收款码不用圆角。 */
.pay-qr-face {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  animation: pay-face-in 0.18s ease-out both;
}
@keyframes pay-face-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pay-qr-face img {
  display: block;
  width: 180px;
  height: 180px;
}
/* 二维码中心的支付方式 logo（绝对居中盖在码面上；白描边在组件内联样式里）。 */
.pay-qr-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pay-qr-hint {
  font-size: 13px;
  color: #9aa0a9;
  text-align: center;
  padding: 0 12px;
}
.pay-qr-face[data-busy='true'] .pay-qr-hint {
  animation: pay-pulse 1.2s ease-in-out infinite;
}
@keyframes pay-pulse {
  50% {
    opacity: 0.45;
  }
}
/* 支付宝 iframe 兜底（后端取码失败时内嵌订单码页）：与后端 qrcode_width=180 同尺寸，去边框。 */
.pay-qr-face iframe {
  display: block;
  width: 180px;
  height: 180px;
  border: 0;
  background: #fff;
}
.pay-qr-mask {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  color: #8a8e96;
}
.pay-tip {
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}
.pay-expiry {
  margin: 6px 0 0;
  font: 400 11.5px var(--mono);
  letter-spacing: 0.04em;
  color: #9aa0a9;
}
.pay-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.pay-btn {
  flex: 1;
  height: 42px;
  border: 1px solid #e3e6ea;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.pay-btn:hover {
  border-color: #c9ced6;
  background: #fafbfc;
}
.pay-btn.primary {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.pay-btn.primary:hover {
  background: var(--green-hover);
  border-color: var(--green-hover);
}
.pay-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pay-btn:focus-visible,
.pay-x:focus-visible {
  outline: 2px solid var(--logo-blue, #2563eb);
  outline-offset: 2px;
}
.pay-mock {
  margin-top: 14px;
  width: 100%;
  height: 34px;
  border: 1px dashed #d8dce0;
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  color: #9aa0a9;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .pay-card,
  .pay-qr-face,
  .pay-qr-face[data-busy='true'] .pay-qr-hint {
    animation: none;
  }
}

/* ── 通知条 ───────────────────────────────────────────────────────────── */
.sub-notice {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 90;
  max-width: min(560px, calc(100vw - 32px));
  padding: 13px 22px;
  border-radius: 999px;
  background: #16181c;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(20, 25, 32, 0.22);
  cursor: pointer;
  animation: subNoticeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.sub-notice.danger {
  background: #b42318;
}
@keyframes subNoticeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ── 区块通用（邀请码 / 订单历史） ─────────────────────────────────────── */
.sub-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.sub-block-head .sub-h2 {
  margin-bottom: 0;
}
.sub-block-sub {
  margin: -8px 0 18px;
  font-size: 14px;
  color: #6b7280;
}
.sub-refresh {
  border: 1px solid #e6e9ed;
  background: #fff;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.sub-refresh:hover {
  border-color: #c9ced6;
}
.sub-refresh:disabled {
  color: #9aa0a9;
  cursor: not-allowed;
}
.sub-empty {
  margin: 18px 0 0;
  padding: 30px;
  border: 1px dashed #e0e4e9;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  color: #8a8e96;
}

/* ── 邀请码兑换（深色横幅，2026-08-16 用户令参照方舟定价页那条邀请带）──────────── */

/* 与下方「订单历史」的间距：区块默认上间距 56 + 这里 112 = **168**。
   （2026-08-16 用户两次令：先 ×1.5 到 84，再「增加 1 倍」到 168。） */
#invite {
  padding-bottom: 112px;
}
.sub-invite-band {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 30px;
  border-radius: 12px;
  background: var(--dark-band);
  color: #fff;
}
.sub-invite-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--green);
  /* 图标与文案之间那道竖分隔（参考站同款），用 border 不用多一个 DOM。 */
  margin-right: 4px;
}
.sub-invite-copy {
  flex: 1;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 26px;
}
.sub-invite-h {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}
.sub-invite-p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}
.sub-invite {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-invite-input {
  width: 200px;
  max-width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  font-family: inherit;
  font-size: 15px;
  color: #fff;
  /* 🔴 只做视觉大写：提交的仍是用户键入的原值，归一化在服务端（见组件里的 IME 红线）。 */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
}
.sub-invite-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}
.sub-invite-input:focus {
  border-color: var(--green);
}
.sub-invite-btn {
  height: 44px;
  padding: 0 26px;
  border: 1.5px solid var(--green);
  border-radius: 2px; /* 与定价卡那组方角按钮同一档 */
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.sub-invite-btn:hover:not(:disabled) {
  background: var(--green-hover);
  border-color: var(--green-hover);
}
/* （原来这里有 `:disabled` 置灰规则；2026-08-16 用户令按钮恒可点，已删。） */

/* ── 居中提示弹窗（AlertDialog）───────────────────────────────────────── */
.alert-scrim {
  position: fixed;
  inset: 0;
  z-index: 90; /* 高于扫码弹窗的 80：它可能在支付流程之上弹 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 25, 32, 0.45);
}
.alert-card {
  width: 340px;
  max-width: 100%;
  padding: 30px 28px 24px;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(20, 25, 32, 0.25);
}
/* 带头带形态（ConfirmDialog 有标题时）：标题独立墨蓝头，正文归卡体。 */
.alert-card.has-head {
  padding: 0;
  overflow: hidden;
}
.alert-head {
  padding: 15px 24px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.alert-card.has-head .alert-body {
  padding: 22px 28px 24px;
}
.alert-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.alert-msg {
  /* 消息里的 \n 生效（取消订单确认第二句单独换行，2026-08-27 用户令）。 */
  white-space: pre-line;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #54677c;
}
/* 两按钮确认框（ConfirmDialog）：取消在左、确认在右。 */
.pay-success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}
.alert-actions {
  margin-top: 24px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.alert-actions .alert-ok {
  margin-top: 0;
}
.alert-cancel {
  min-width: 100px;
  padding: 0 22px;
  height: 42px;
  border: 1px solid #dfe2e6;
  border-radius: 2px;
  background: #fff;
  color: #54677c;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.alert-cancel:hover {
  border-color: #b6bcc4;
}
.alert-ok {
  margin-top: 24px;
  /* 不通栏：一句提示的「知道了」摆成满宽按钮太重（用户 2026-08-16 判太宽）。 */
  min-width: 132px;
  padding: 0 28px;
  height: 42px;
  border: none;
  border-radius: 2px; /* 与定价卡那组方角按钮同一档 */
  background: var(--green);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.25s;
}
.alert-ok.danger {
  background: #b42318;
}
.alert-ok.danger:hover {
  background: #8f1c13;
}
.alert-ok:hover {
  background: var(--green-hover);
}

/* ── 订单历史 ─────────────────────────────────────────────────────────── */
.sub-orders {
  margin-top: 18px;
  border: 1px solid #e6e9ed;
  border-radius: 10px;
  overflow: hidden;
}
.sub-order-head,
.sub-order {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.2fr 1.4fr 1.5fr;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
}
.sub-order-head {
  background: #fafbfc;
  font-size: 12.5px;
  color: #8a8e96;
  letter-spacing: 0.04em;
}
.sub-order {
  border-top: 1px solid #eef1f4;
  font-size: 14px;
  color: #2c3646;
}
.sub-order-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-weight: 500;
  color: var(--ink);
}
.sub-order-name em {
  font-style: normal;
  color: #6b7280;
}
.sub-order-no {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11.5px;
  color: #9aa0a9;
  letter-spacing: 0.02em;
}
.sub-order-amt {
  font-weight: 600;
}
.sub-order-st.st-pending {
  color: #b25e09;
}
.sub-order-st.st-paid {
  color: #3d7de0;
}
.sub-order-st.st-provisioned {
  color: #0e7a5c;
}
.sub-order-st.st-closed {
  color: #9aa0a9;
}
.sub-order-time {
  font-size: 13px;
  color: #6b7280;
}
.sub-order-ops {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.sub-op {
  border: 1px solid #dfe2e6;
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.sub-op:hover {
  border-color: #c9ced6;
}
.sub-op.danger {
  color: #b42318;
}
.sub-op:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   响应式（2026-08-22 补，断点口径与官网 home.css 一致：≤1279 收缩带 / ≤899 移动版）。
   🔴 只写订阅站自己的 class（`.sub-*` / `.pc-*` / `.pay-*` / `.alert-*`）——
      导航 / 页脚 / FAQ / 收尾 CTA 复用官网 home.css，那边的 @media 已生效，别在这里重写。
   ============================================================================ */

/* ── 平板收缩带（900 ~ 1279）───────────────────────────────────────── */
@media (max-width: 1279px) {
  /* 四列放不下：最长的细注（nowrap 13.5px）+ 卡内 padding 决定单卡下限 ~290px，
     四卡 + 间隙 + shell 留白 ≈ 1280 正好是四列的临界 ⇒ 整个收缩带改两列。 */
  .pc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    row-gap: 24px;
  }
  /* 🔴 强调卡的 -39px 负 margin 是「单行四列顶端齐平」的机制；两列两行后它会顶进上一行
     的卡片里 ⇒ 归零，顶带改为占在卡内（本行邻卡靠 stretch 自动等高）。 */
  .pc-card.featured {
    margin-top: 0;
  }
}

/* ── 移动版（≤899，单独排版）──────────────────────────────────────── */
@media (max-width: 899px) {
  /* 官网移动版导航 .hero-bar 收到 56px（home.css），让位跟着改。 */
  .sub-page {
    padding-top: 56px;
  }

  /* 广告语区 */
  .sub-hero {
    padding-top: 40px;
  }
  .sub-hero-h {
    font-size: 26px;
  }
  .sub-hero-sub {
    font-size: 14.5px;
    padding: 0 6px;
  }

  /* 套餐卡：单列纵排（与官网移动版「整表横滑」不同，卡片天然可纵排，不需要横滑兜底）。 */
  .sub-pricing {
    padding: 36px 0 72px;
  }
  .pc-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-top: 28px;
    row-gap: 20px;
  }
  .pc-card.featured {
    margin-top: 0;
  }
  .pc-body {
    padding: 22px 20px;
  }
  .pc-price .cny,
  .pc-price .num {
    font-size: 34px;
  }

  /* 导航（2026-08-27 用户令「登录/注册按钮位置尴尬」）：桌面的 auto 推手挂在 .hero-links 上，
     窄屏它 display:none 后推手消失、按钮悬在中间 ⇒ 把 auto 还给登录/退出那个槽位，贴右。 */
  .site-head.sub-head .nav-login,
  .site-head.sub-head .nav-logout {
    margin-left: auto;
  }
  /* 邀请码带（2026-08-27 用户令）：窄屏整条居中，图标不再收起；动作组纵排撑满。 */
  .sub-invite-band {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 24px 20px;
  }
  .sub-invite-ico {
    margin-right: 0;
  }
  .sub-invite-copy {
    border-left: none;
    padding-left: 0;
    width: 100%;
  }
  .sub-invite {
    width: 100%;
    justify-content: center;
  }
  /* 套餐卡头（档名 / 价格 / 细注）窄屏居中（2026-08-27 用户令）；「当前套餐」胶囊不跟着居中，
     绝对定位钉回右侧（用户令）。步进器 + 合计那一行同样居中。 */
  .pc-head-row {
    position: relative;
    justify-content: center;
  }
  .pc-cur {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .pc-price,
  .pt-aux {
    justify-content: center;
  }
  .pt-aux {
    gap: 16px;
  }
  .pc-note {
    text-align: center;
  }
  .sub-invite-input {
    flex: 1;
    width: 0; /* flex:1 接管宽度；保留 200px 基准会在窄屏把按钮挤出带外 */
    min-width: 0;
  }
  #invite {
    padding-bottom: 64px;
  }

  /* 订单历史：五列 grid 保持列结构不动，整表横向滑动兜底（参照官网定价表做法）。 */
  .sub-orders {
    overflow-x: auto;
    /* 🔴 横滚容器必须 contain X 轴（2026-08-23 review 批 3，与 guest-h5 的 .h5-cat /
       .h5-catbar / .h5-lb-strip 同一纪律）：640px 内容塞进 ~360px 视口，滑到边缘继续滑
       会被 iOS Safari / Android Chrome 接管成手势返回，用户从订单历史被弹回官网。
       ⚠️ 只 contain X：纵向滚动链照常穿出，不会踩「不可滚的滚动容器吃掉页面滚动」那条
       （见 gotchas §overflow-x:hidden 滚动容器陷阱 的第二条进入路径）。 */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .sub-order-head,
  .sub-order {
    min-width: 640px;
  }
  .sub-block-head {
    flex-wrap: wrap;
  }

  /* 收尾 CTA：官网移动版 .closing 是 76px 0 88px，这里的 160px 底距跟着收一档。 */
  .sub-closing {
    padding-bottom: 96px;
  }

  /* 弹窗：不出屏（.pay-card 基类已有 max-width，这里补齐 alert 系）。 */
  .alert-card {
    max-width: calc(100vw - 32px);
  }
  .sub-status-card {
    padding: 20px;
    gap: 20px;
  }
}

/* ── V5.1-3 付款方式（选择弹窗 / 支付宝收银台态 / 订单来源标签） ─────────────────── */
.sub-order-ch {
  /* 🔴 与上方单号 / 商品名左对齐（2026-08-27 用户令）：flex column 下不缩进，去掉 margin-left。 */
  display: inline-block;
  font-style: normal;
  font-size: 12px;
  color: #9aa0a9;
}

/* 「申请邀请码」= 标题后的一行文字链（2026-08-27 用户令：不做按钮框，字号同副文案）。 */
.sub-invite-apply {
  display: inline;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--green);
  cursor: pointer;
  text-decoration: none;
  vertical-align: baseline;
}
.sub-invite-apply:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

（InviteApplyDialog，2026-08-27）：alert 家族骨架 + 四个字段 ── */ .alert-card.invite-apply {
  width: 440px;
  text-align: left;
}
/* ── 申请邀请码弹窗（InviteApplyDialog，2026-08-27）──────────────────────────────
   与 ConfirmDialog 同一家族：墨蓝头带（居中）+ 白卡体 + 方角按钮。六项之间用细分隔线 + 统一 18px 上下距
   分组（用户判「一拖」后改），称呼 / 联系方式并成一行；输入框 44px 方角、绿聚焦环；枚举题一律胶囊组。 */
/* 六项卡比手机视口高：遮罩层自己可滚，卡片用 auto 外边距——空间够时居中、不够时从顶部开始滚，头带不被裁。 */
.ia-scrim {
  align-items: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ia-scrim .alert-card.invite-apply {
  margin: auto 0;
  flex: none;
}
.alert-card.invite-apply {
  width: 500px;
  text-align: left;
}
.invite-apply .alert-head {
  text-align: center;
}
.invite-apply .alert-body {
  padding: 18px 28px 24px;
}
.ia-sub {
  margin: 0 0 6px;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6b7684;
}
.ia-grid {
  display: grid;
}
.ia-field {
  display: grid;
  gap: 9px;
  padding: 18px 0;
  border-top: 1px solid #eef0f3;
}
/* 称呼 / 联系方式 / 行业 之间不画线（用户令，宽窄屏同）：靠间距分隔，这几块上下距收一档。 */
.ia-grid > .ia-field:first-child,
.ia-field.no-line {
  border-top: none;
  /* 称呼 / 联系方式两块收紧（用户判弹窗太高）：上下各 7px，行业块只留 10px 顶距。 */
  padding: 7px 0;
}
.ia-field.no-line + .ia-field.no-line {
  padding-top: 6px;
}
.ia-field.no-line:has(> .ia-chips) {
  padding-top: 10px;
}
.ia-field > span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.ia-field input {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #dfe2e6;
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.ia-field input::placeholder {
  color: #a0a7b1;
}
.ia-field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.15);
}
.ia-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ia-chip {
  height: 34px;
  padding: 0 14px;
  border: 1px solid #dfe2e6;
  border-radius: 2px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  color: #54677c;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.ia-chip:hover {
  border-color: #b6bcc4;
}
.ia-chip.on {
  border-color: var(--green);
  background: rgba(26, 188, 156, 0.08);
  color: var(--green-hover);
  font-weight: 600;
}
.ia-other {
  margin-top: 2px;
}
.ia-opt {
  margin-left: 6px;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #a0a7b1;
}
.ia-err {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: #c0392b;
}
.invite-apply .alert-actions {
  margin-top: 20px;
  justify-content: flex-end;
}
@media (max-width: 899px) {
  .alert-card.invite-apply {
    width: 100%;
  }
  .invite-apply .alert-body {
    padding: 14px 18px 20px;
  }
  .ia-field {
    padding: 14px 0;
  }
  .invite-apply .alert-actions button {
    flex: 1;
  }
}

/* ── 官网静态定价页（/pricing，由 subscribe-web/scripts/render-pricing.tsx 渲染）──────────
   静态页的「订阅 / 申请邀请码」是 <a>，订阅站里同名 class 长在 <button> 上（.pt-buy 本就按 <a> 设计过，
   只需去下划线）；.sub-invite-btn 是 button 高度 44px 的方角按钮，给链接补上等高居中。 */
a.pt-buy {
  text-decoration: none;
  box-sizing: border-box;
}
a.sub-invite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}