/* ══════════════════════════════════════════════════════════════════════════
   雅之林® 会员中心 · **手机号注册里的「推荐人」区块（唯一源）** · 2026-10-08
   --------------------------------------------------------------------------
   用户令（原话）：
     「如果是扫码跳转到微信服务号，点会员中心就是跳转这个页面，如果选择手机号注册，
       要自动显示推荐人的名字和推荐码，推荐码旁边要有复制的按钮。给我页面设计看一下。」
     → 三套方案（A 确认卡 / B 凭证条 / **C 极简一行**）中**选定 C**；
     → 追加：「**这个方案，改成克莱因蓝。**」

   🔴🔴 为什么这里用**克莱因蓝 `#002FA7`**，而不是本页栏目色（会员中心是胭脂红 `#7A1226`）：
      这一行展示的**不是本页自己的信息**，而是**从「扫码 → 服务号 → 登录卡」那一步带过来的来路**
      ⇒ 用登录卡/商品中心那支机构色做呼应，用户一眼能认出"这是系统帮我带进来的"。
      ⛔ 所以**不许**把它改成 `var(--brand)` —— 那会跟着栏目色变，这层含义就没了。
      ⚠️ 令牌只在下面**定义一次**（`#actModal` 真实页 / `.rf-scope` 预览页同取一套），
         ⛔ 别在别处再写一遍 hex。

   ══════════════════════════════════════════════════════════════════════════
   🔴🔴🔴 格式锁死（用户 2026-10-08 再次强调，原话）：
     「设计的每个页面，一定要把格式锁死。不要因为字体大小或者是换了手机，
       会溢出或者胡乱显示。」
   本文件的铁律（判据＝**根字号 16px→24px（+50%）后，本区块尺寸逐像素不变**）：
     ① **全量固定 px**：字号/高/内边距/圆角/栏位宽**一律 px**，
        ⛔ 不用 `rem`（跟根字号走）、⛔ 不用 `em`（跟父字号走）、⛔ 不用 `vw`（跟视口走）。
        「最多 3 个汉字」那个栏位因此写成 **39px ＝ 13px × 3**，而不是 `3em`。
     ② `text-size-adjust:100%` 再压一道（安卓"字号档位"/ iOS 小屏 Text Autosizing）——
        虽然 `/lock.css` 已在 html/body 上锁过，但本区块含 **input / button**，
        这几类控件是最容易被系统放大把整行挤破的，所以**自己再声明一次**。
     ③ **绝不横向溢出**：`.rf-c` 是 `flex-wrap:wrap` ＋ `overflow:hidden`；
        码 `.v` 可缩（`min-width:0` + 省略号）但**复制键 `.rf-cp` 永不缩**（`flex:none`）
        ⇒ 极端长值只会"码显示成省略号（复制出来仍是完整码）"或"整块换行"，
        ⛔ 绝不会把内容顶出卡片。
     ④ 名字超长**不许撑破**：定宽 39px 栏位 + `overflow:hidden`，只有真的超出才来回滚。
   ══════════════════════════════════════════════════════════════════════════ */

#actModal,
.rf-scope{--rf:#002FA7;--rf-soft:#EDF3FF;--rf-line:#D9E4FF}

/* ③ 控件兜底：只对本区块的元素再声明一次，⛔ 不动其它地方 */
.rf-c, .rf-c *, .rf-tag, .rf-loading, .rf-none, .rf-none *, .rf-more {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── 标签行里的「扫码自动带入」小胶囊 ──────────────────────────────────── */
.rf-tag{display:inline-flex;align-items:center;height:19px;padding:0 8px;margin-left:6px;
  border-radius:999px;border:1px solid var(--rf-line);background:var(--rf-soft);color:var(--rf);
  font:800 10px/1 var(--f);vertical-align:middle;white-space:nowrap}
/* 没有来路时退成中性灰（⛔ 不要还是蓝的 —— 那是"成功带入"的颜色） */
.rf-tag.gray{border-color:var(--line);background:var(--card2);color:var(--mute)}

/* ── 一行主体：● 马小春 2701 ｜ 8AF1CN9S [复制] ────────────────────────── */
.rf-c{display:flex;align-items:center;gap:9px;flex-wrap:wrap;overflow:hidden;
  margin-top:2px;padding:10px 12px;
  border:1px solid var(--rf-line);border-radius:var(--r12);background:var(--rf-soft)}
.rf-c .who{flex:none;display:inline-flex;align-items:center;gap:6px;min-width:0}
.rf-c .who .d{flex:none;width:6px;height:6px;border-radius:50%;background:var(--rf)}
/* 会员号：不许换行、不许被压缩（它很短，但"乱显示"往往就是从这种小地方开始的） */
.rf-c .who i{font-style:normal;flex:none;white-space:nowrap;
  font:600 10.5px/1 var(--f);color:var(--mute);font-variant-numeric:tabular-nums}
/* 码 + 复制键：整块贴右。
   `.rf-cp` 在里面是 `flex:none` ⇒ 真到不够宽时，**先缩码（省略号）、永不缩按钮**；
   若连按钮都放不下，则整块由外层 `flex-wrap` 换到第二行。两条路都不会溢出。 */
.rf-c .code{flex:0 1 auto;min-width:0;margin-left:auto;
  display:inline-flex;align-items:center;gap:8px}
.rf-c .code .v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:900 15px/1 var(--f);color:var(--ink);letter-spacing:.08em;
  font-variant-numeric:tabular-nums}

/* ── 名字：**最多露 3 个汉字**（栏位 39px ＝ 13×3），超出才来回滚 ─────────
   与打卡站 `#uName` 同一套手感：短名字永远静止（全体一起滚会很吵）。 */
.rf-c .nm-box{flex:none;display:inline-block;max-width:39px;overflow:hidden;
  vertical-align:bottom;min-width:0;
  font:900 13px/1 var(--f);color:var(--ink)}
.rf-c .nm-scroll{display:inline-block;white-space:nowrap;width:max-content;max-width:none;
  vertical-align:bottom}
.rf-c .nm-scroll.scrollx{animation:nmScroll 7s ease-in-out infinite alternate}
@keyframes nmScroll{0%,22%{transform:translateX(0)}78%,100%{transform:translateX(var(--nx,0px))}}

/* ── 复制键：34px 圆角胶囊（⛔ 不是整行大按钮 —— 那正是改之前难看的原因）── */
.rf-cp{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:34px;padding:0 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--rf);background:#fff;color:var(--rf);
  font:800 12px/1 var(--f);font-family:inherit;-webkit-appearance:none;
  transition:transform 140ms var(--ease),background 140ms var(--ease),color 140ms var(--ease)}
.rf-cp:active{transform:scale(.95)}
/* 三态复用页面既有的 cpPulse / cpPop（与「我的邀请码」那个复制键**同一套动效语言**） */
.rf-cp.busy{border-color:var(--rf-line);background:var(--rf-soft);color:var(--rf);
  animation:cpPulse .7s ease-in-out infinite}
.rf-cp.done{border-color:var(--rf);background:var(--rf);color:#fff;
  animation:cpPop .38s var(--spring)}
.rf-cp.done::before{content:"✓";font:900 11px/1 var(--f)}

/* ── 「推荐人不对？手动填写」——很轻的文字入口，只有拿到码时才出现 ────── */
.rf-more{display:block;width:100%;margin:7px 0 0;padding:0;border:0;background:none;
  cursor:pointer;text-align:right;font:700 11px/1.5 var(--f);color:var(--rf);
  font-family:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rf-line)}
.rf-more:active{opacity:.6}

/* ── 正在确认（一行浅蓝条；高度与 `.rf-c` 接近，避免面板跳一下）──────────── */
.rf-loading{display:flex;align-items:center;gap:8px;margin-top:2px;padding:12px;
  border:1px solid var(--rf-line);border-radius:var(--r12);background:var(--rf-soft);
  font:700 11.5px/1 var(--f);color:var(--rf);overflow:hidden}
.rf-loading::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;
  border:2px solid var(--rf-line);border-top-color:var(--rf);animation:rfSpin .7s linear infinite}
@keyframes rfSpin{to{transform:rotate(360deg)}}

/* ── 没有来路（虚线空态）──────────────────────────────────────────────── */
.rf-none{display:flex;gap:9px;align-items:flex-start;margin-top:2px;padding:11px 12px;
  border:1px dashed var(--rf-line);border-radius:var(--r12);background:var(--card);overflow:hidden}
.rf-none .ic{flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--rf-soft);color:var(--rf);font:900 12px/1 var(--f)}
.rf-none b{display:block;font:800 12px/1.5 var(--f);color:var(--ink)}
.rf-none p{margin:4px 0 0;font:600 10.5px/1.7 var(--f);color:var(--sub)}

/* ── 手动填写区（默认收起；`hidden` 必须**真的**不显示）──────────────────── */
.rf-manual[hidden]{display:none}

/* ── 窄屏档（≤339px，覆盖 iPhone SE 的 320）──────────────────────────────
   🔴 量出来的账（不是猜的）：这一行要放
        ● + 名字栏 39px + 会员号  ≈ 80px
        ＋ gap 9
        ＋ 码 84px + gap 8 + 复制键 54px  ≈ 146px
      合计 **235px**。而各视口的`.rf-c` 内容宽是：
        300→206  320→**226**  360→266  390→296  414→320
      ⇒ 360 以上天然是一行；**320 只差 9px**；300 差 29px。
   ⇒ 所以这里**只从内边距/间隙里省**（省 14px：padding 12→9 得 +6、gap 9→7 得 +2、
      复制键左右内边距 14→11 得 +6），**⛔ 绝不缩字号** ——
      用户群里大量是老年人（「很多老年人的手机字体调的很大很大」是既有铁律），
      把 15px 的码缩到 14px 是拿可读性换一行，不划算。
   ⚠️ 媒体查询按**视口宽**判定，与根字号无关 ⇒ ⛔ 不会破坏上面「根字号 +50% 尺寸不变」那条锁格式承诺。
   ⚠️ 300px 视口仍会退化成两行：那属于极端老机，且**不溢出、码仍完整**，可以接受。 */
@media (max-width:339px){
  .rf-c{gap:7px;padding:9px}
  .rf-cp{padding:0 11px}
}

/* ── 无障碍：减少动效 ⇒ 关掉滚动/自旋/脉冲（静态仍然完整可读）──────────── */
@media (prefers-reduced-motion: reduce){
  .rf-c .nm-scroll.scrollx{animation:none;text-overflow:ellipsis;overflow:hidden}
  .rf-loading::before{animation:none}
  .rf-cp.busy{animation:none}
  .rf-cp.done{animation:none}
}