/* ══════════════════════════════════════════════════════════════════════════
   growth-cards.css —— 成长中心 / 邀请有礼 / 精灵星 三个弹窗的外观 ✓
   ★ 配色：用户拍板【青绿渐变】✓（GROWTH-SPEC 第 174 行 ✓）
   ★ 版式借鉴豆包效果图 ✓ 但【所有数字】来自后端真实规则 ✗（见 growth-cards.js ✓）
   ★ RTL：阿语/波斯语必须镜像 ✓ 用逻辑属性（margin-inline / padding-inline ✓）
     不用 margin-left/right ✗ 那样 RTL 下不会自动翻转 ✓
   ══════════════════════════════════════════════════════════════════════════ */

.gc-modal .gc-box{
  width:min(680px,96vw);
  max-height:92vh; max-height:92dvh;
  overflow:auto;
  padding:0;                         /* ★ 头部要贴边 ✓ 所以外层不留 padding ✓ */
  border-radius:clamp(16px,3vw,22px);
  background:#fff;
}

/* ── 头部：青绿渐变 ✓ ── */
.gc-head{
  position:relative;
  padding:22px 24px 20px;
  color:#fff;
  background:linear-gradient(120deg,#0aa6a6 0%,#12b3a0 42%,#4fc36b 100%);
  border-radius:clamp(16px,3vw,22px) clamp(16px,3vw,22px) 0 0;
  overflow:hidden;
}
.gc-head:after{            /* 右下角柔光 ✓ 让渐变更通透 ✗ 不是死板的双色 ✓ */
  content:'';position:absolute;inset-block-end:-40%;inset-inline-end:-8%;
  width:60%;height:150%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0) 68%);
  pointer-events:none;
}
.gc-brand{
  font-size:11.5px;font-weight:var(--ce-fw-head);letter-spacing:.14em;text-transform:uppercase;
  opacity:.92;margin-block-end:8px;
}
.gc-title{font-size:26px;line-height:1.25;margin:0 0 6px;font-weight:var(--ce-fw-head);color:#fff}
.gc-sub{font-size:13.5px;line-height:1.6;margin:0;opacity:.94;max-width:76%}
.gc-leaf{
  /* ★★ 第 45 轮：树枝🌿被右上角 ✕ 挡住 ✗✗（用户实测 ✓ 给了截图 ✓）
     实测（Chrome headless ✓ 差分求真实绘制像素 ✓ 不是只看 box ✗）：
       旧 inset-inline-end:18px / font-size:34px ⇒ 字形 27×36.5px ✓
         与 ✕ 白圆的绘制像素【相交 330px²（占 ✕ 的 27.7%）】✗
         放大图里能直接看到叶子右上角被白圆切掉 ✓
     改法 = 用户给的两条【一起做】✓✓：
       ① 往左移 ✓ inset-inline-end 18px → 42px（-24px ✓）
          为什么不用"往下移"✗：✕ 是 position:sticky（components.css:1359 ✓）
          z-index:6（components.css:1423 ✓）⇒ 往下移的话【一滚它还是压回来】✗
          这正是用户自己说过的理由 ✓ 采纳 ✓
       ② 放大 14.8% ✓ font-size 34px → 39px ⇒ 字形 31×41.5px ✓
          （用户在 10%~15% 区间里 ✓ 放大后与 ✕ 仍【零相交】✓ 已复测 ✓）
     ★ 逻辑属性 inset-inline-end ✓ ⇒ RTL（ar/fa）自动镜像到左边 ✓
       而 ✕ 也是 inset-inline-end（components.css:1413 ✓）⇒ 两边一起镜像 ⇒ 相对关系不变 ✓✓
     ★ 不用 !important ✓（特异性不变 ✗ 只改值 ✓）
     ★ 实测四种组合【全部 0 像素相交】✗ 1426px² 的 ✕ 里一个叶子像素都没有 ✓✓ */
  position:absolute;inset-block-start:14px;inset-inline-end:42px;
  font-size:39px;opacity:.85;transform:rotate(-12deg);
  pointer-events:none;
}
.gc-modal .close{
  inset-block-start:12px;inset-inline-end:12px;
  color:#fff;background:rgba(255,255,255,.18);border:0;
  width:30px;height:30px;border-radius:50%;font-size:17px;line-height:1;
  cursor:pointer;z-index:3;
}
.gc-modal .close:hover{background:rgba(255,255,255,.32)}

.gc-body{padding:18px 20px 22px}

/* ── 区块标题 ✓ ── */
.gc-sec{margin-block-end:20px}
.gc-sec-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:14.5px;font-weight:var(--ce-fw-head);color:#0f2d4a;margin-block-end:11px;
}
.gc-sec-h em{font-size:11.5px;font-weight:600;color:#7c8ea6;font-style:normal}

/* ── ① 双进度卡 ✓ ── */
.gc-two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:560px){.gc-two{grid-template-columns:1fr}}
.gc-card{
  border:1px solid #e3eef6;border-radius:15px;padding:14px 15px;
  background:linear-gradient(180deg,#f7fcff,#fff);
}
.gc-card-l{font-size:11.5px;font-weight:700;color:#5c7a94;display:flex;align-items:center;gap:6px;margin-block-end:7px}
.gc-dot{width:7px;height:7px;border-radius:50%;background:#12b3a0;flex:0 0 7px}
.gc-lifetime .gc-dot{background:#2f7de1}
.gc-card-v{font-size:17px;font-weight:var(--ce-fw-head);color:#123a72;display:flex;align-items:baseline;gap:5px;flex-wrap:wrap}
.gc-card-v b{font-size:12.5px;color:#12b3a0;font-weight:var(--ce-fw-head)}
.gc-lifetime .gc-card-v b{color:#2f7de1}
.gc-bar{height:8px;border-radius:99px;background:#e8f1f8;overflow:hidden;margin-block:9px 7px}
.gc-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#12b3a0,#4fc36b);transition:width .5s}
.gc-lifetime .gc-bar span{background:linear-gradient(90deg,#2f7de1,#54b0f0)}
.gc-card-s{font-size:11.5px;color:#7189a3;line-height:1.5}

/* ── ② 7 级列表 ✓ ── */
.gc-lvlist{display:flex;flex-direction:column;gap:7px}
.gc-lv{
  display:flex;align-items:center;gap:10px;
  border:1px solid #eaf2f8;border-radius:13px;padding:9px 12px;background:#fff;
}
.gc-lv.done{background:#f6fbf8;border-color:#d8efe2}
.gc-lv.cur{
  background:linear-gradient(100deg,#eafaf4,#f4fdf7);
  border-color:#12b3a0;box-shadow:0 0 0 2px rgba(18,179,160,.14);
}
.gc-num{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:#eef4f9;color:#5c7a94;font-size:12px;font-weight:var(--ce-fw-head);
  display:flex;align-items:center;justify-content:center;
}
.gc-lv.done .gc-num{background:#d9f2e6;color:#0f8f74}
.gc-lv.cur .gc-num{background:#12b3a0;color:#fff}
.gc-ic{font-size:19px;flex:0 0 auto}
.gc-lvtxt{display:flex;align-items:center;gap:7px;flex:1 1 auto;flex-wrap:wrap;min-width:0}
.gc-lvtxt b{font-size:14px;color:#123a72;font-weight:var(--ce-fw-head)}
.gc-lvtxt em{font-size:11.5px;color:#8296ab;font-style:normal}
.gc-tag{
  font-size:10.5px;font-weight:var(--ce-fw-head);padding:2px 8px;border-radius:99px;
  background:#eef4f9;color:#5c7a94;font-style:normal;
}
.gc-tag.done{background:#dff3ea;color:#0f8f74}
.gc-tag.cur{background:#12b3a0;color:#fff}
.gc-perk{
  flex:0 0 auto;font-size:11px;font-weight:var(--ce-fw-head);color:#0f8f74;
  background:#e6f7f0;border:1px solid #c8ecdf;border-radius:99px;padding:3px 10px;
  white-space:nowrap;
}
.gc-perk.mute{color:#93a6b8;background:#f4f7fa;border-color:#e7eef4}

/* ── ③ 月度加权 ✓ ── */
.gc-note{font-size:12.5px;color:#7189a3;line-height:1.6;margin-block-end:10px}
.gc-weights{display:flex;gap:7px;flex-wrap:wrap}
.gc-w{
  flex:1 1 88px;border:1px solid #eaf2f8;border-radius:12px;padding:9px 10px;
  text-align:center;background:#fff;
}
.gc-w.done{background:#f6fbf8;border-color:#d8efe2}
.gc-w.cur{background:linear-gradient(100deg,#eafaf4,#f4fdf7);border-color:#12b3a0;box-shadow:0 0 0 2px rgba(18,179,160,.14)}
.gc-w span{display:block;font-size:18px;line-height:1.2}
.gc-w b{font-size:12px;color:#123a72;font-weight:var(--ce-fw-head)}

/* ── ④ 徽章墙 ✓ ── */
.gc-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.gc-badge{
  border:1px solid #eaf2f8;border-radius:14px;padding:11px 8px;text-align:center;
  background:#fff;position:relative;
}
.gc-badge b{display:block;font-size:11.5px;color:#123a72;font-weight:var(--ce-fw-head);margin-block-start:6px;line-height:1.35}
.gc-badge em{display:block;font-size:10px;color:#93a6b8;font-style:normal;margin-block-start:4px;line-height:1.4}
.gc-bic{font-size:26px;line-height:1;display:block;filter:grayscale(1);opacity:.34}
/* ★ 已获得：彩色 + 金边 ✓ */
.gc-badge.got{background:linear-gradient(180deg,#fffaf0,#fff);border-color:#f2d9a0;box-shadow:0 2px 10px rgba(214,164,60,.12)}
.gc-badge.got .gc-bic{filter:none;opacity:1}
/* ★ 即将推出：虚线边框 ✓ 明确标注 ✗ 绝不假装已获得 ✗✗ */
.gc-badge.soon{border-style:dashed;background:#fbfcfd}
.gc-badge.soon .gc-bic{opacity:.22}
.gc-badge.soon em{color:#b0894a;font-weight:700}

/* ── ⑤ 规则 ✓ ── */
.gc-rules{margin:0;padding:0;list-style:none;counter-reset:gcr}
.gc-rules li{
  counter-increment:gcr;position:relative;
  padding:9px 12px 9px 40px;border-radius:12px;background:#f7fbfd;
  font-size:12.5px;line-height:1.65;color:#3d5a75;margin-block-end:6px;
}
.gc-rules li:before{
  content:counter(gcr);position:absolute;inset-block-start:10px;inset-inline-start:12px;
  width:19px;height:19px;border-radius:50%;background:#12b3a0;color:#fff;
  font-size:11px;font-weight:800/* ★★ 第 2 步例外 ⑤：白字压在 #12b3a0 上只有 2.63:1 ✗ 11px 数字替对比度打工 ⇒ 保留 800 ✓ */;display:flex;align-items:center;justify-content:center;
}

/* ── ⑥ 收尾 ✓ ── */
.gc-foot{
  border:1px dashed #cfe8dd;border-radius:14px;padding:15px;text-align:center;
  background:linear-gradient(100deg,#f2fbf7,#fbfdf5);
}
.gc-foot b{display:block;font-size:15px;color:#0f8f74;font-weight:var(--ce-fw-head);margin-block-end:4px}
.gc-foot em{font-size:12px;color:#7189a3;font-style:normal}

.gc-loading{padding:34px;text-align:center;color:#93a6b8;font-size:14px}
.gc-err{
  padding:22px;text-align:center;color:#b4453c;font-size:13.5px;line-height:1.7;
  background:#fdf5f4;border:1px solid #f5d9d6;border-radius:13px;
}
.gc-err span{color:#8a6a66;font-size:12.5px}

/* ── RTL ✓（阿语/波斯语 ✓ 用逻辑属性已自动镜像 ✗ 这里只补细节 ✓）── */
.gc-modal[dir="rtl"] .gc-leaf{transform:rotate(12deg)}
.gc-modal[dir="rtl"] .gc-sub{max-width:76%;margin-inline-start:0}
.gc-modal[dir="rtl"] .gc-rules li{padding:9px 40px 9px 12px}
.gc-modal[dir="rtl"] .gc-rules li:before{inset-inline-start:12px;inset-inline-end:auto}

/* ── 减少动效 ✓ ── */
@media(prefers-reduced-motion:reduce){
  .gc-bar span,.gc-modal *{transition:none!important;animation:none!important}
}

/* ★★ 第 17 轮：RTL 的 bidi 修正 ✓✓
   设计稿里实测到的问题 ✗：
     逻辑 "أنت +50 Credits" → 视觉 "Credits 50+ أنت" ✗
     逻辑 "18 / 30 · 12"    → 视觉 "12 · 30 / 18"    ✗
   根因：数字与拉丁词之间的【空格】被 UAX#9 解析成 RTL 层 ✓
     → 两个 level-2 run 被拆开并按 RTL 顺序排列 ✓
   修法：把这些动态值包进 <bdi> ✓（HTML 的双向隔离元素 ✓）
     ⇒ 内部永远保持 LTR 顺序 ✓ 母语者与拉丁读者都不会误读 ✓✓
   ★ 只加隔离 ✗ 不改任何文字内容 ✓ 不影响 LTR 语言 ✓ */
.gc-card-s bdi,.gc-perk bdi,.gc-sec-h bdi,.gc-w bdi{unicode-bidi:isolate}
/* ★ 月度 5/6 级的真实门槛说明 ✓ 比上一行再淡一点 ✗ 形成层次 ✓ */
.gc-note-sub{color:#93a6b8;font-size:11.5px;margin-block-end:11px}

/* ══════════════════════════════════════════════════════════════════
   ★★ 邀请有礼弹窗 ✓（第 5 步 ✓）
   ★ RTL：全部用【逻辑属性】✗（padding-inline / margin-inline ✓）
     阿语/波斯语下会自动镜像 ✓ 不需要 row-reverse ✗✗
     （设计稿里正是错用了 row-reverse ✓ 造成二次反转 ✗ 我不重复那个错误 ✓）
   ══════════════════════════════════════════════════════════════════ */
.gc-copyrow{display:flex;gap:8px;align-items:stretch}
.gc-copyinp{
  flex:1 1 auto;min-width:0;font-size:13px;font-weight:700;color:#123a72;
  border:1px solid #dbe9f3;border-radius:12px;padding:11px 13px;background:#f8fcfe;
  font-family:ui-monospace,Consolas,monospace;
  /* ★ 邀请码/链接是拉丁串 ✗ 在 RTL 下必须【保持 LTR 左对齐】✓✓ */
  direction:ltr;text-align:left;
}
.gc-copybtn{
  flex:0 0 auto;border:0;border-radius:12px;padding:0 16px;cursor:pointer;
  font-size:13px;font-weight:800/* ★★ 第 2 步例外 ⑥：白字压 #0aa6a6→#12b3a0 只有 2.63~2.99:1 ✗ 13px 替对比度打工 ⇒ 保留 800 ✓ */;color:#fff;
  background:linear-gradient(135deg,#0aa6a6,#12b3a0);
  white-space:nowrap;
}
.gc-copybtn:hover{filter:brightness(1.06)}
.gc-copybtn:active{transform:translateY(1px)}
/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 第 47 轮：邮件那一行 ✗✗（用户第 ② 条 ✓：「这个图标可以再大 50% ✓ 位置也再往下移 ✓
        与上方被邀请的邮箱地址输入框的间隔再比现在放大 1.5 倍」✓）
   ── 改前真浏览器实测（11 语言 × 2 视口 ✓ 1400×900 + 390×844 ✓ 每个值连读两次一致 ✓）──
      · #gcMailBtn = 105×20.8（en/zh-TW/ja/ko/fr/de/es/it/ar/fa）· 97×20.8（zh-CN ✓ 5 字）
        font-size 13px · line-height 20.8px · padding 0 16px · border-radius 12px
      · 它与 #gcFriendEmail 的垂直间距 = 3.00px（22 组全一样 ✓ 语言无关 ✓）
   ── ★★ 为什么必须【先确定化】才能改那 3px ✗✗（实测出来的反直觉事实 ✓）──
      那一行【不是 flex】✗ 输入框是 inline-block 且吃满整宽 638px ✓
      ⇒ 按钮被挤到【下一行的行盒】里 ✓ 那 3px = 上一行行盒的 descender 余量 ✗
      ⇒ 它【不是任何 margin / gap】✗ 直接往上加 margin 只会得到 3 + margin（不是目标值 ✓）
      ⇒ 所以这里先把这一行变成【纵向 flex】✗ 两个子项各占一行 ✓ 间隙从此由 margin 决定 ✓✓
        （align-items 默认 stretch ⇒ 输入框仍然整宽 ✓ 与改前一致 ✓）
   ── 逐项 ×1.5 ✗✗（用户要求"整体视觉体积"✗ 不是只放大字号 ✓）──
      字号 13px → var(--ce-fs-4) = 20px（阶梯里的最近档 ✓ 19.5px 不许自己造 ✓）
      横内边距 16 → 24px（16×1.5 ✓）
      行高随字号 ⇒ 高度 20.8 → 31.2px（= 目标 ✓ 不需要另写 height ✓）
      圆角 12 → 18px（12×1.5 ✓ 保持同一比例 ✓）
      间距 3.00 → 4.50px（3×1.5 ✓ 用户口径 ✓ ★ 不是 --ce-s-1 的 8px ✗ 那是 2.67× ✓）
   ── ★★★ 为什么选择器带 #gcMailBtn ✗✗（红线 ⑪「不许顺手改共用 class」✓）──
      Send invite 这颗挂的是【共用类】.gc-copybtn ✗
      而"复制"那两颗（邀请码 / 邀请链接 ✓ growth-cards.js 的 .gc-copyrow 里）【同一个类】✓
      实测它们现在 58×60.8（zh-CN）/ 66×60.8（en ✓ 被 flex 拉伸 ✓）
      ⇒ 直接改 .gc-copybtn = 连坐三颗 ✗✗
      ⇒ 用 (1,1,0) 的 .gc-mailrow #gcMailBtn 压 (0,1,0) 的 .gc-copybtn ✗
        ★ 故意【不用 !important】✓（本仓库的老规矩 ✓ 特异性够就不许用 ✓✓）
   ══════════════════════════════════════════════════════════════════════════ */
.gc-mailrow{display:flex;flex-direction:column}
.gc-mailrow #gcMailBtn{
  align-self:flex-start;margin-block-start:4.5px;
  font-size:var(--ce-fs-4);padding:0 24px;border-radius:18px;
}
/* ★ 邮件按钮：未配置时【必须一眼看出是禁用的】✗ 不能看起来能点 ✓ */
.gc-mailbtn{
  width:100%;border:0;border-radius:14px;padding:14px;cursor:pointer;
  font-size:14.5px;font-weight:var(--ce-fw-head);color:#fff;
  background:linear-gradient(135deg,#12b3a0,#4fc36b);
}
.gc-mailbtn.off{
  background:#eef3f7;color:#8296ab;cursor:not-allowed;border:1px dashed #cbd9e5;
}
.gc-mailbtn.off b{color:#b0894a;font-weight:var(--ce-fw-head)}
.gc-warn{
  margin-top:9px;font-size:11.5px;line-height:1.65;color:#8a6a3a;
  background:#fffaf0;border:1px solid #f2e0bd;border-radius:12px;padding:10px 12px;
}
/* ★ 规则里那条"好友侧暂无奖励" ✓ 要显眼 ✗ 不能藏在最后一行 ✓ */
.gc-rule-warn{background:#fffaf0!important;border:1px dashed #f2d9a0}
.gc-rule-warn:before{background:#d6a44a!important}

/* ══════════════════════════════════════════════════════════════════
   ★★ 精灵星弹窗 ✓（第 6 步 ✓）
   ★ RTL：全部逻辑属性 ✗（阿语/波斯语自动镜像 ✓）
   ══════════════════════════════════════════════════════════════════ */
.gc-starhero{
  display:flex;gap:12px;align-items:center;
  /* ★★★ 底色 ✗✗（用户："现在图2是深蓝渐变 ✗ 既不要跟 invite 一样的绿色 ✗
       有没有更柔一点的颜色？"✓）
     ⇒ 选【柔和暖金】✗ 理由：星星换奖励本来就是"金"的语义 ✓
       且与全站的青绿主色 + 既有金族 token（#e8b33c / #8a6410 / #fffaf0）同族 ✓
     ★ 不要纯灰 ✗：Rewards 是"有奖励"的语义 ✗ 金色比中性灰更贴 ✓
     ★ 对比度实算 ✓（脚本遍历渐变 5 个采样点 ✓）：
       标题 #7d5f12 最差 4.84:1 ✓（≥4.5 ✓）
       正文 #6b5a33 最差 5.43:1 ✓（≥4.5 ✓）—— 旧值 #8a7a55 只有 3.41:1 ✗ 已加深 ✓ */
  background:linear-gradient(100deg,#fdf6e3,#f9eed6 52%,#f5e6c8);
  border:1px solid #ecd9a8;border-radius:15px;padding:14px 15px;margin-block-end:16px;
}
.gc-staricon{flex:0 0 auto}
/* ★★ 同上 ✗：`.modalbox b` 会盖掉这两个颜色 ✓ 所以选择器必须带 .modalbox ✓ */
.modalbox .gc-starhero b{display:block;font-size:14.5px;color:#7d5f12;font-weight:var(--ce-fw-head);margin-block-end:3px}
.modalbox .gc-starhero em{font-size:12px;color:#6b5a33;font-style:normal;line-height:1.6}

.gc-exbox{border:1px solid #e3eef6;border-radius:15px;padding:15px;background:#f9fdff}
.gc-exrow{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13.5px;color:#3d5a75}
.gc-exrow-2{border-block-start:1px dashed #d8e8f2;padding-block-start:11px;color:#5c7a94}
.gc-exnum{font-size:24px;font-weight:var(--ce-fw-head);color:#0f8f74}
.gc-exnum i{font-size:12px;font-style:normal;color:#8296ab;margin-inline-start:3px}
.gc-exarrow{text-align:center;font-size:19px;color:#9ec4d8;margin-block:9px}
.gc-redeem{
  width:100%;margin-block-start:14px;border:0;border-radius:14px;padding:14px;cursor:pointer;
  font-size:14.5px;font-weight:var(--ce-fw-head);color:#fff;
  background:linear-gradient(135deg,#12b3a0,#4fc36b);
}
.gc-redeem:hover{filter:brightness(1.06)}
/* ★ 不够时必须【一眼看出不能用】✗ 且写明还差多少 ✓ */
.gc-redeem.off{background:#dfe8ef;color:#8296ab;cursor:not-allowed}
.gc-exmsg{margin-block-start:9px;font-size:12.5px;color:#0f8f74;font-weight:700;min-height:1.2em;line-height:1.5}

/* ══════════════════════════════════════════════════════════════════
   ★★ 第 22 轮：徽章墙重做 ✓✓（用户要求 ✓）
   原话："要把各个徽章设计成大小要一致，然后这个多久点亮要给它凸显"✓
   ★ 关键：用【固定列 + 等高卡片】✗ 保证大小完全一致 ✓
     不用 auto-fill ✗（那会让最后一行被拉伸 ✓ 大小不一 ✓）
   ══════════════════════════════════════════════════════════════════ */
.gc-tier{margin-block-end:16px}
.gc-tier-h{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-block-end:9px;padding-block-end:6px;border-block-end:1px dashed #e3eef6;
}
.gc-tier-n{font-size:12.5px;font-weight:var(--ce-fw-head);color:#0f8f74;letter-spacing:.02em}
.gc-tier-h em{font-size:11px;color:#93a6b8;font-style:normal}
.gc-tier-h b{margin-inline-start:auto;font-size:11px;color:#5c7a94;font-weight:var(--ce-fw-head)}

/* ★ 固定 5 列 ✗ → 每个徽章宽度完全一致 ✓（窄屏降列数但【仍等宽】✓）*/
.gc-badges{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
@media(max-width:560px){.gc-badges{grid-template-columns:repeat(3,1fr)}}
@media(max-width:380px){.gc-badges{grid-template-columns:repeat(2,1fr)}}
/* ★ 等高 ✗：固定高度 + 内容垂直分布 ✓ 不会"有的胖有的瘦"✓ */
.gc-badge{
  position:relative;height:104px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  border:1px solid #eaf2f8;border-radius:14px;padding:11px 6px 8px;text-align:center;background:#fff;
}
.gc-badge .gc-bic{font-size:27px;line-height:1;display:block;filter:grayscale(1);opacity:.32}
.gc-badge b{display:block;font-size:11px;color:#8296ab;font-weight:var(--ce-fw-head);margin-block-start:7px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc-badge em{display:block;font-size:9.5px;color:#a8b8c8;font-style:normal;margin-block-start:4px;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ★★ 点亮 = 凸显 ✗✗：彩色 + 金边 + 微光晕 + 右上角勾 ✓ 对比强烈 ✓ */
.gc-badge.got{
  background:linear-gradient(180deg,#fffdf5,#fff);
  border-color:#f0cf85;
  box-shadow:0 3px 12px rgba(214,164,60,.18),inset 0 0 0 1px rgba(255,255,255,.6);
}
.gc-badge.got .gc-bic{filter:none;opacity:1;transform:scale(1.06)}
.gc-badge.got b{color:#123a72}
.gc-badge.got em{color:#9a8355}
.gc-bcheck{
  position:absolute;inset-block-start:5px;inset-inline-end:5px;
  width:15px;height:15px;border-radius:50%;background:#12b3a0;color:#fff;
  font-size:10px;font-style:normal;font-weight:var(--ce-fw-head);line-height:15px;text-align:center;
}
/* ★ 即将推出：虚线 ✓ 明标 ✓ 绝不假装已获得 ✗✗ */
.gc-badge.soon{border-style:dashed;background:#fbfcfd}
.gc-badge.soon em{color:#b0894a;font-weight:700}

/* ══════════════════════════════════════════════════════════════════
   ★★★ 第 28 轮：成长中心新 UI ✓✓（用户给了效果图 ✓）
   ★ 用【形状】区分两条线 ✗：
       长期等级 = 盾牌 🛡（clip-path 多边形 ✓ 不需要图片 ✓）
       本月等级 = 圆形硬币 ⭕（border-radius:50% ✓）
   ★ 四种状态 ✗ 必须一眼看出 ✓
   ★ RTL：全部用逻辑属性 ✗ 阿语/波斯语自动镜像 ✓
   ══════════════════════════════════════════════════════════════════ */
.gc-rowbox{border-radius:16px;padding:14px 14px 10px;margin-block-end:14px}
.gc-rowbox.lt{background:#f3fbf6;border:1.5px solid #cfeadd}
.gc-rowbox.mt{background:#fffbf0;border:1.5px solid #f2e2bd}
.gc-rowhead{display:flex;align-items:center;gap:8px;margin-block-end:12px;flex-wrap:wrap}
.gc-rowhead b{font-size:14.5px;font-weight:var(--ce-fw-head);color:#123a72}
.gc-rowhead em{font-size:11.5px;color:#8296ab;font-style:normal}
.gc-rowdott{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.gc-rowdott.lt{background:#2fae6a}
.gc-rowdott.mt{background:#e8b33c}
.gc-rowtag{
  margin-inline-start:auto;font-size:11px;font-weight:var(--ce-fw-head);padding:3px 10px;border-radius:99px;
  background:#fff;border:1px solid #cfeadd;color:#1f8f5c;
}
.gc-rowtag.mt{border-color:#f2e2bd;color:#a8791b}

/* ★ 一行放 7 / 7 个 ✗ 窄屏自动缩 ✓
   ★★ 月度从 6 级扩成 7 级后（BADGE-SPEC-v2 第三章 ✓）
      这一行必须从 6 列改成 7 列 ✗✗
      否则第 7 枚（彩虹精灵）会被挤到【第二行】✗ 和终身那行长得不一样 ✓ */
.gc-lvrow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.gc-rowbox.mt .gc-lvrow{grid-template-columns:repeat(7,1fr)}
@media(max-width:560px){
  .gc-lvrow,.gc-rowbox.mt .gc-lvrow{grid-template-columns:repeat(4,1fr);gap:8px}
}
.gc-lvcell{text-align:center;position:relative;padding-block-end:4px}

/* ★★ 盾牌 ✓（clip-path 画 ✓ 不需要图片 ✓）*/
.gc-lvmedal{
  position:relative;margin:0 auto 6px;
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#eef3f7,#dde6ee);
  transition:transform .18s;
}
.gc-lvmedal.shield{
  /* ★ 盾牌轮廓 ✗ 上方平肩 ✓ 下方收尖 ✓ */
  clip-path:polygon(50% 0%,100% 12%,100% 58%,50% 100%,0% 58%,0% 12%);
  border-radius:0;
}
.gc-lvmedal.coin{border-radius:50%}
.gc-lvmedal.coin:after{  /* 硬币内圈 ✓ 像币面 ✓ */
  content:'';position:absolute;inset:6px;border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.55);
}
.gc-lvicon{font-size:20px;line-height:1;filter:grayscale(1);opacity:.42}

/* ── 已通过 ✓ 绿底 + 右上角 ✓ ── */
.gc-lvcell.done .gc-lvmedal{background:linear-gradient(160deg,#d9f2e6,#b6e6cd)}
.gc-lvcell.done .gc-lvicon{filter:none;opacity:1}
.gc-lvcheck{
  position:absolute;inset-block-start:-4px;inset-inline-end:-2px;
  width:16px;height:16px;border-radius:50%;background:#2fae6a;color:#fff;
  font-size:10px;font-style:normal;font-weight:var(--ce-fw-head);line-height:16px;text-align:center;z-index:2;
}
/* ── 当前 ✓ 金色描边 + 放大 ✓ ── */
.gc-lvcell.now .gc-lvmedal{
  background:linear-gradient(160deg,#fff4d0,#f5d783);
  transform:scale(1.14);
  box-shadow:0 0 0 2.5px #e8b33c,0 4px 12px rgba(200,150,40,.28);
}
.gc-lvcell.now .gc-lvicon{filter:none;opacity:1;font-size:22px}
/* ── 下一级 ✓ 虚线目标 ✓（"伸手就能够到"✓）── */
.gc-lvcell.next .gc-lvmedal{
  background:#fbfdff;box-shadow:0 0 0 2px #7fb8e6;
}
.gc-lvcell.next .gc-lvmedal.shield{
  background:#fbfdff;
}
.gc-lvcell.next{outline:1.5px dashed #9fc9ea;outline-offset:3px;border-radius:12px}
.gc-lvcell.next .gc-lvicon{opacity:.55}
/* ── 未解锁 ✓ 灰 + 锁 ✓ ── */
.gc-lvcell.lock .gc-lvlock{
  position:absolute;inset-block-start:-3px;inset-inline-end:0;
  font-size:11px;z-index:2;filter:grayscale(1);opacity:.75;
}
.gc-lvname{display:block;font-size:11px;font-weight:var(--ce-fw-head);color:#5c7a94;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-lvcell.now .gc-lvname{color:#8a6a14;font-size:11.5px}
.gc-lvcell.done .gc-lvname{color:#1f8f5c}
.gc-lvcell.lock .gc-lvname{color:#a8b8c8}
.gc-lvtag{
  display:inline-block;margin-block-start:3px;font-size:9.5px;font-weight:900/* ★★ 第 2 步例外 ⑦：白字压在 #e8b33c 上只有 1.92:1 ✗ 9.5px 极小字替对比度打工 ⇒ 保留 900 ✓ */;
  padding:1.5px 7px;border-radius:99px;background:#e8b33c;color:#fff;
}
.gc-lvtag.next{background:#eaf4fd;color:#2f7de1}
.gc-lvneed{display:block;margin-block-start:2px;font-size:9.5px;color:#a8791b;font-style:normal}

/* ══ 徽章墙 ✓ 6 列圆形奖章 ✓（新 UI 要求去掉分层 ✗）══ */
.gc-badges{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:640px){.gc-badges{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.gc-badges{grid-template-columns:repeat(3,1fr)}}
.gc-badge{
  position:relative;border:1.5px solid #eaf2f8;border-radius:15px;
  padding:11px 6px 9px;text-align:center;background:#fff;
}
.gc-bmedal{
  width:46px;height:46px;margin:0 auto 7px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 30%,#f7fafc,#e4ebf1);
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4.5px #e0e8ef;
}
.gc-badge .gc-bic{font-size:22px;line-height:1;filter:grayscale(1);opacity:.36}
.gc-badge b{display:block;font-size:10.5px;color:#8296ab;font-weight:var(--ce-fw-head);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-badge em{display:block;font-size:9.5px;color:#b0894a;font-style:normal;margin-block-start:3px;font-weight:700}
/* ★ 已获得：彩色 + 金边 + 微光 ✓ */
.gc-badge.got{border-color:#f0cf85;background:linear-gradient(180deg,#fffdf5,#fff);
  box-shadow:0 3px 12px rgba(214,164,60,.18)}
.gc-badge.got .gc-bmedal{background:radial-gradient(circle at 34% 30%,#fff6d9,#f6d78e);
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4.5px #e8b33c}
.gc-badge.got .gc-bic{filter:none;opacity:1}
.gc-badge.got b{color:#123a72}
.gc-badge.soon{border-style:dashed;background:#fbfcfd}
.gc-bcheck{
  position:absolute;inset-block-start:6px;inset-inline-end:6px;z-index:2;
  width:15px;height:15px;border-radius:50%;background:#2fae6a;color:#fff;
  font-size:10px;font-style:normal;font-weight:var(--ce-fw-head);line-height:15px;text-align:center;
}

/* ══ 图例 ✓ + 心理暗示说明 ✓（新 UI 的最后两块 ✓）══ */
.gc-legend{
  display:flex;flex-wrap:wrap;gap:8px 16px;margin-block-start:12px;
  font-size:11px;color:#7189a3;
}
.gc-legend span{display:flex;align-items:center;gap:5px}
.gc-lg{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 11px}
.gc-lg.now{background:#f5d783;box-shadow:0 0 0 2px #e8b33c}
.gc-lg.next{background:#fbfdff;box-shadow:0 0 0 2px #7fb8e6;border:1px dashed #9fc9ea}
.gc-lg.done{background:#2fae6a}
.gc-lg.lock{background:#dde6ee}
.gc-psych{
  margin-block-start:14px;padding:12px 14px;border-radius:13px;
  background:linear-gradient(100deg,#f2fbf7,#fbfdf5);border:1px dashed #cfe8dd;
}
.gc-psych b{display:block;font-size:12.5px;color:#0f8f74;font-weight:var(--ce-fw-head);margin-block-end:4px}
.gc-psych em{font-size:11.5px;color:#5c7a94;font-style:normal;line-height:1.7}

/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 邀请卡主视觉 + 精灵星徽章 ✗✗（本轮新增 ✓）
   ── 邀请卡 ✓ 用户给的图 1：顶部大圆角绿渐变卡 ✓ 礼物盒 ✓ 标题/副标题 ✓ 整宽按钮 ✓
      ★ 底色用【柔和的薄荷绿 → 近白】✗ 不是图 1 那种饱和绿 ✗
        理由：正文必须 ≥4.5:1 ✗ 饱和绿上压白字只有 2.99:1 ✗ 压深字才够 ✓
        ⇒ 卡片保持"绿"✗ 但把饱和度让给按钮 ✓ 层级也更清楚 ✓
      ★ 按钮 ✓：亮绿渐变 + 深墨绿字 ✓（实测最差 4.77:1 ✓ 见汇报里的实算表 ✓）
        不用白字 ✗（白字压亮绿最差 3.42:1 ✗ 只有大字才勉强 ✓ 这里是小字 ✓）
   ── RTL ✗：全部逻辑属性 ✓（block/inline ✓ 不用 left/right ✓）
   ══════════════════════════════════════════════════════════════════════════ */
.gc-hero{
  position:relative;overflow:hidden;
  padding:20px 20px 18px;margin-block-end:16px;
  border-radius:20px;
  background:linear-gradient(180deg,#ecfdf5 0%,#d6f5e6 52%,#f4fdf8 100%);
  border:1px solid #c7ecd9;
  text-align:center;
}
.gc-hero-tx{position:relative;z-index:2;max-width:80%;margin-inline:auto}
/* ★★ 特异性 ✗✗：components.css:310 有 `.modalbox h1..h3,.modalbox b,.modalbox label{color:#1b2a44}`
   ⇒ 它是 (0,2,1) ✗ 只写 `.gc-hero-t` (0,1,0) 会被它盖掉 ✓（真浏览器实测抓到的 ✓ 不是猜的 ✓）
   所以这两条必须带 .modalbox ✗ 提到 (0,3,1) ✓ 故意不写 !important ✓ */
.modalbox .gc-hero-t{
  display:block;font-size:19px;line-height:1.32;font-weight:var(--ce-fw-head);
  color:#0f4f47;                                 /* 8.10:1 ✓ */
}
.modalbox .gc-hero-s{
  display:block;margin-block-start:6px;font-style:normal;
  font-size:12.5px;line-height:1.6;color:#3f6a63;  /* 5.23:1 ✓ */
}
/* ★★ 插画只占卡片【右上一角】✗✗（真渲染实测：右下角会压到整宽按钮 ✓
   第一版把礼物盒放在右下 ✗ 它直接盖住 CTA 的右半边 ✓ —— 这个只有看图才发现 ✓
   ⇒ 改成 inset-block-start 贴右上 ✓ 且按钮自己带白底 → 插画在按钮之后也在下层 ✓）*/
.gc-hero-art{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;
  inline-size:84px;line-height:0;opacity:.95;pointer-events:none;z-index:1;
}
.gc-hero-art svg{display:block;inline-size:100%;block-size:auto;filter:drop-shadow(0 3px 6px rgba(15,79,71,.16))}
.gc-hero-cta{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:9px;
  inline-size:100%;box-sizing:border-box;
  /* ★★★ 第 47 轮：16px → 24px ✗✗（用户第 ③ 条 ✓：「My invite Code 与右上角的礼物盒之间的
     空隙太小了 ✗ 把 My invite Code 再往下挪挪 ✗ 避免没有空间（★ 放大 1.5 倍）」✓）
     ── 改前真浏览器实测（11 语言 ✓ 1400×900 ✓）──
        · 礼物盒 .gc-hero-art = x924→1008 / y194.75→276.13（84×81.38 ✗ absolute ✓ 见它自己的注释 ✓）
        · 这颗按钮 = y271.83→321.02 ⇒ 与礼物盒【下边缘相差 −4.30px】✗
          ⇒ 不是"空隙太小"✗ 是【已经压上了】（按 SVG 可见笔迹算也只有 +0.95px ✓）
        · 而按钮上边缘到上方那句 .gc-hero-s 的距离【正好 = 这个 margin】= 16.00px ✓
     ── ★★ 为什么改的是【这个 margin】而不是别的 ✗✗（实测出来的坑 ✓）──
        礼物盒是 absolute ✗ 锚在 .gc-hero 的上沿 ⇒ 它的下边缘【恒定不动】✓
        按钮在正常流里 ⇒ 只有这一个数能把按钮往下推 ✓
        ★ 而且实测"空隙"本身【不能直接乘 1.5】✗✗：它是语言相关的 —
          fr（副标题折两行）实测 +15.70px ✗ 其余 10 个语言是【负数 −4.30】✗
          ⇒ 负数没法乘 1.5 ⇒ 改【唯一能改的那个旋钮】= 16 × 1.5 = 24px ✓✓
     ── 改后预期（真浏览器复测为准 ✓）──
        按钮下移 8px ⇒ 与礼物盒 bbox 空隙 −4.30 → +3.70px（不再重叠 ✓）
        与上方那句话 16 → 24px（那句话本身【零位移】✓ 它的 y 不变 ✓）✓
     ★ 这个类全仓【只有 1 个使用点】（growth-cards.js 的邀请卡主视觉 ✓）⇒ 不是共用按钮 ✓ */
  margin-block-start:24px;
  padding:13px 16px;border-radius:14px;text-decoration:none;
  font-family:inherit;font-size:14.5px;font-weight:var(--ce-fw-head);
  /* ★★ 白字 ✗✗（真浏览器量出来的 ✓ 不是算的 ✓）
     第一版用亮绿 #0f9d86→#2fae6a + 深字 ✓ 实测最差只有 4.33:1 ✗ 差一点点 ✓
     （14.5px/700 夹在中间 ✗ 按最严的 4.5:1 算 ✗ 不是 3:1 的大字档 ✓）
     ⇒ 改用这组更深的绿 ✗ 白字最差 5.13:1 ✓ 稳稳过 4.5 ✓✓
     亮绿留给卡片底 ✗ 深绿给按钮 ✗ 层级反而更清楚 ✓ */
  color:#fff;
  background:linear-gradient(135deg,#097c67,#1b7a4b);
  box-shadow:0 6px 16px rgba(9,124,103,.30);
  transition:transform .16s,box-shadow .16s,filter .16s;
}
.gc-hero-cta:hover{filter:brightness(1.05);box-shadow:0 9px 20px rgba(15,157,134,.34)}
.gc-hero-cta:active{transform:translateY(1px)}
.gc-hero-cta:focus-visible{outline:3px solid rgba(15,79,71,.55);outline-offset:2px}
.gc-hero-cta-ic{display:inline-flex;inline-size:19px;block-size:19px;flex:0 0 19px}
.gc-hero-cta-ic svg{display:block;inline-size:100%;block-size:100%}
/* 礼物盒两处共用的上色 ✓（颜色只在这里 ✗ 不在 SVG 里 → 不会重复 id ✓）*/
.gi-box{fill:#0f9d86}
.gi-gloss{fill:rgba(255,255,255,.24)}
.gi-lid{fill:#12b3a0}
.gi-ribbon{fill:#f2789c}

/* ── 精灵星徽章 ✓（金圆 + 白勾 + 四颗星 + 光晕 ✓ 与图 2 对齐 ✓）── */
.gc-staricon{
  inline-size:46px;block-size:48px;flex:0 0 46px;
  display:flex;align-items:center;justify-content:center;line-height:0;
}
.gc-staricon svg{display:block;inline-size:100%;block-size:100%}
.sb-halo{fill:#f8d98a;opacity:.34}
.sb-ring{fill:#e8b33c}
.sb-check{stroke:#fff;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
.sb-star{fill:#e8b33c}

/* ── 窄屏 ✗：插画直接【收起】✗✓（真渲染 390px 实测 ✓ 不是推演 ✓）
   第一版只是把它缩到 78px + opacity .34 ✗ 结果它仍然压在副标题的文字上 ✗
   （"Once your friend starts learning, you both earn rewards." 那两行 ✓）
   ⇒ 装饰性插图在窄屏没有价值 ✗ 但会实实在在地降低可读性 ✓ 所以 display:none ✓
     卡片本身的绿渐变已经把观感撑住了 ✓ 少一个插画不损失什么 ✓）*/
@media(max-width:520px){
  .gc-hero-art{display:none}
  .gc-hero-t{font-size:17px}
}