/* ============================================================================
   个人中心（#sub-profile）—— 独立样式文件
   ----------------------------------------------------------------------------
   为什么单开一个文件，不动 style.css：
     style.css 是全站共用、且**别的会话也在改**（2026-09-18 当天仍在动）。
     新增功能的样式单独成文件、排在 style.css 之后加载，是本站的既定做法。

   🔴 三条本文件要守住的东西（前两版都在这些地方翻过车）：
     ① **用站点已有的 CSS 变量**（--primary / --text / --text2 …），不引入新的主色。
        用户说「UI 要高级」时，他要的是质感、层次、间距，不是换一套颜色。
     ② **凡带绝对定位装饰物的容器，必须自带 position: relative** ——
        否则装饰物按 right:-30% 溢出，手机上会把整页撑宽、整页缩成 77%（桌面看不出来）。
     ③ 手机优先。本文件里的尺寸按 390px 宽调，桌面端只在最后统一放大一档。

   🔴 配色纪律（2026-09-18 二代改版，用户原话「这个颜色是怎么搭配的？怎么这么 low 啊」）：
     一代的图标底是 **c-orange / c-blue / c-green / c-purple / c-gray 随机分**，
     再叠上五花八门的 emoji —— 蓝绿紫跟品牌橙毫无关系，一眼就是「早期安卓设置页」。
     二代收敛成 **三个色相、三条规则**，全站品牌橙是唯一强调色：
        · 默认          → 品牌橙淡底 + 橙图标（占绝大多数行）
        · .c-neutral    → 中性暖灰底 + 灰图标（只放「没有色彩信息量」的行：
                          账号 ID / 微信 / 登录设备 / 页面版本 / 协议 / 隐私）
        · .c-danger     → 红底 + 红图标（**只有「注销账号」**）
     🚫 **本文件内禁止再出现 emoji 当图标**：emoji 自带颜色、跨系统渲染不一致、
        视觉重量参差，是「廉价感」的最大来源。图标一律用 profile.js 里的内联 SVG。

   ⚠️ 注释里禁止出现「星号 斜杠」连写（会提前结束注释吞掉后面的规则）。
   ============================================================================ */

.pf-root {
  position: relative;          /* 见铁律② */
  padding: 12px 14px 30px;
}

/* ===================== 顶部身份卡 =====================
 * 2026-09-18 UI 升级：浅橙卡 → **深墨金身份卡**。
 *
 * 为什么改（用户要求"色彩搭配要有视觉冲击力"）：
 *   旧版是四轮浅色调整的结果，层次是对的，但整页**全是浅色** ——
 *   浅卡、浅分组、浅底，视线没有落点，翻到底也不知道该先看哪儿。
 *
 * 🔴 这次升级的核心手法：**冲击力来自明度对比，不是色相数量。**
 *   整页唯一的深色块放在最上面，视线第一眼必然落在"我自己"身上；
 *   而深墨 + 金与品牌橙同属暖色系，不会像蓝绿紫那样把页面搞成彩虹。
 *   （上一版注释里记的"彩虹图标"坑仍然有效：**别再加别的色相**。）
 *
 * ⚠️ 深色卡上不能沿用旧的浅色文字/边框 —— 下面每一条都跟着改了，
 *    包括 .pf-copy / .pf-nick / .pf-meta（它们原来假定底色是白的）。 */
.pf-hero {
  position: relative;          /* 见铁律②：里面有 absolute 金色光斑 */
  padding: 17px 16px 15px;
  border-radius: 22px;
  background: linear-gradient(150deg, #241910 0%, #3d2616 46%, #2a1b10 100%);
  box-shadow: 0 18px 36px -22px rgba(52, 28, 10, .8), 0 2px 6px rgba(120, 62, 12, .10);
  overflow: hidden;
  color: #fff;
}
.pf-hero-glow {                /* 金色光斑：深底上唯一的高光，全卡的气口 */
  position: absolute; right: -48px; top: -68px;
  width: 194px; height: 194px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 193, 75, .34) 0%, rgba(240, 193, 75, 0) 68%);
  pointer-events: none;
}
.pf-hero-top { position: relative; display: flex; align-items: center; gap: 14px; }
.pf-ava {
  position: relative;
  flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 21px;
  display: flex; align-items: center; justify-content: center;
  font-size: 29px; line-height: 1;
  /* 深底上反过来做：**暖白底 + 金描边**，让头像成为卡里的第二个亮点。
     旧版是"白底 + 橙影"，在深卡上会显得发灰。 */
  background: linear-gradient(160deg, #fffdf8 0%, #ffeed8 100%);
  border: 1.5px solid rgba(240, 193, 75, .62);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8), inset 0 1px 0 #fff;
  color: #d9540a; font-weight: 800;
}
.pf-hero-main { min-width: 0; flex: 1; }
.pf-nick {
  font-size: 18.5px; font-weight: 800; color: #fff; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-meta {
  margin-top: 7px; font-size: 12px; color: rgba(255, 255, 255, .58);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* 卡上的两枚小徽章：账号 ID 是「信息」，邀请码是「可以给出去的东西」。
   深底上把可点的那个做成金色，不可点的压成半透明白 —— 层级照旧，只是换了底。 */
.pf-copy {
  display: inline-flex; align-items: center; gap: 3px;
  color: #f6d590; font-weight: 700;
  background: rgba(240, 193, 75, .15); border: 1px solid rgba(240, 193, 75, .3);
  padding: 2px 7px; border-radius: 7px; cursor: pointer;
  font-size: 11.5px;
}
.pf-copy.mute {
  color: rgba(255, 255, 255, .66); font-weight: 600;
  background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .17);
}
.pf-copy:active { transform: scale(.96); }

/* 会员条：深卡的下半截。**只在拿到 /api/auth/me 后渲染**，
   所以它不能依赖上面任何元素的高度（单独一段，缺了也不塌）。 */
.pf-hero-bar {
  position: relative;
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid rgba(240, 193, 75, .17);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
.pf-hero-plan { font-size: 12.5px; font-weight: 600; color: #f2cd83; }
.pf-hero-plan b { color: #ffe3a6; font-weight: 800; }
.pf-hero-beans { font-size: 12px; color: rgba(255, 255, 255, .6); }
.pf-hero-beans b {
  color: #ffd479; font-size: 15.5px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}

/* 注销冷静期横幅（只在真的处于注销态时出现） */
.pf-warnbar {
  margin-top: 12px; padding: 11px 13px; border-radius: 13px;
  background: #fff5f5; border: 1px solid #fbd7d7;
  font-size: 12.5px; line-height: 1.65; color: #b42318;
}
.pf-warnbar b { font-weight: 800; }
.pf-warnbar .pf-undo {
  display: inline-block; margin-top: 8px; padding: 6px 13px;
  border-radius: 9px; background: #b42318; color: #fff;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ============== 账号安全体检（2026-09-18 升级新增的那一个"真功能"）==============
   设计意图：把一串**设置项**变成一张**待办清单**。
   只列没做完的项（做完的不占地方），全做完时换成一条绿色横条 ——
   不是消失，是"变成了一个好结果"，用户会想看到它。 */
.pf-sec {
  position: relative;
  margin-top: 13px; padding: 14px 14px 13px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #f4e6d6;
  box-shadow: 0 10px 26px -22px rgba(249, 89, 1, .6);
}
.pf-sec.is-good { border-color: #cfe9dd; }
.pf-sec.is-done {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(140deg, #f2fbf6 0%, #ffffff 70%);
  border-color: #cfe9dd;
}
.pf-sec-check {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #6fd6a8 0%, #10a172 100%);
  color: #fff; font-size: 17px; font-weight: 800;
  box-shadow: 0 6px 14px -8px rgba(16, 161, 114, .9);
}
.pf-sec-head { display: flex; align-items: center; gap: 12px; }

/* 进度环：conic-gradient 画弧，中间挖空放百分比。
   🔴 用 **--p 变量**驱动（0—100），改数字不用改 CSS。 */
.pf-sec-ring {
  flex: none; position: relative;
  width: 47px; height: 47px; border-radius: 50%;
  background: conic-gradient(#ef7a1a calc(var(--p, 0) * 1%), #f4e9dd 0);
  display: flex; align-items: center; justify-content: center;
}
.pf-sec-ring::after {
  content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff;
}
.pf-sec-ring > span {
  position: relative; z-index: 1;
  font-size: 13px; font-weight: 800; color: #c2450a;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.pf-sec-ring > span i { font-style: normal; font-size: 8.5px; font-weight: 700; margin-left: .5px; }

.pf-sec-tx { min-width: 0; flex: 1; }
.pf-sec-t { font-size: 14.5px; font-weight: 800; color: #3a2a1e; }
.pf-sec-s { margin-top: 4px; font-size: 11.5px; line-height: 1.5; color: #a08c7c; }

.pf-sec-list { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.pf-sec-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: 12px;
  background: #fffaf4; border: 1px solid #f7ead9;
  cursor: pointer;
}
.pf-sec-row:active { background: #fff2e4; }
.pf-sec-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ef9420;
  box-shadow: 0 0 0 3px rgba(239, 148, 32, .17);
}
.pf-sec-lb { flex: none; font-size: 13px; font-weight: 700; color: #3a2a1e; }
.pf-sec-dc {
  flex: 1; min-width: 0; font-size: 11.5px; color: #ab9787;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pf-sec-go {
  flex: none; font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ff8845 0%, #f94400 100%);
  padding: 3.5px 10px; border-radius: 9px;
  box-shadow: 0 3px 8px -4px rgba(249, 89, 1, .9);
}

/* ============== 行内状态徽章与分组徽章 ============== */
.pf-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 6px; font-size: 10px; font-weight: 700;
  vertical-align: 1px;
  background: #fff2e0; color: #b8701a;
}
.pf-badge.ok { background: #e8f7ef; color: #12805c; }
.pf-badge.warn { background: #fff2e0; color: #b8701a; }
.pf-badge.off { background: #f4f1ee; color: #a89a8b; }
.pf-gbadge {
  margin-left: 7px; padding: 1px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  background: #f5f1ec; color: #9c8b7c;
}
.pf-gbadge.ok { background: #e8f7ef; color: #12805c; }

/* ============== 分组色条 ==============
   🔴 刻意**不引入新色相** —— 四级都是同一条暖色轴上的深浅（橙 → 琥珀 → 棕 → 灰棕）。
   "分组要有区分度"和"页面要高级"这两件事，靠深浅就能同时满足；
   一旦给每组配一个红黄蓝绿，立刻退回成上一版记过的"彩虹图标"廉价感。 */
.pf-group[class*="pf-tone-"] > .pf-group-title {
  position: relative; padding-left: 11px;
}
.pf-group[class*="pf-tone-"] > .pf-group-title::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 13px; border-radius: 2px;
  background: #f95901;
}
.pf-tone-id > .pf-group-title::before { background: linear-gradient(180deg, #ffa257 0%, #f95901 100%); }
.pf-tone-sec > .pf-group-title::before { background: linear-gradient(180deg, #f0b429 0%, #d97706 100%); }
.pf-tone-priv > .pf-group-title::before { background: linear-gradient(180deg, #cf9860 0%, #a5673a 100%); }
.pf-tone-about > .pf-group-title::before { background: linear-gradient(180deg, #cfc3b6 0%, #a29486 100%); }

/* ===================== 分组 ===================== */
.pf-group { margin-top: 22px; }
/* 分组标题用品牌橙（不是灰）—— 用户两次说「暗淡无光」，
   灰褐色小标题是整页"灰蒙蒙"观感的一部分；换成橙，顺带把视觉引导也做出来。 */
.pf-group-title {
  font-size: 12px; font-weight: 800; color: var(--primary);
  letter-spacing: .6px; margin: 0 0 9px 3px;
}
/* ---------------------------------------------------------------- 2 列宫格
   🔴 2026-09-19 用户要求「个人中心改成 2 列」。原来是 1 列长行，一屏只看得到
      6~7 项、要滚很久；改 2 列后宫格一屏能看 10+ 项。
   ⚠️ 核心取舍：一行只有 ~58px 高、~193px 宽，塞不下「图标 + 标题 + 描述 + 值 + 箭头」
      五样。所以每格改成**上下两段**：上段「图标 + 标题」，下段「描述 / 值」。
      箭头从"行尾"移到**右上角绝对定位** —— 宫格里没有行尾了，
      但"这一格能点"的暗示不能丢。
   ⚠️ .pf-list / .pf-row **只在个人中心主列表**用（弹层、设备列表是另一套结构），
      所以这次改动不会误伤弹窗里的列表。改之前查过的，别怀疑。
   ⚠️ 外层不再需要白底/描边/投影：2 列后每格自己是卡片，"整块白卡 + 内部分行"
      那种做法会把格子切碎，反而更乱。 */
.pf-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* 奇数个时最后一格撑满整行 —— 否则右下角永远缺一块，看着像"少了一个功能"。
   （「数据与隐私」现在只剩「注销账号」一项，正是这种情况。） */
.pf-list > .pf-row:last-child:nth-child(odd) { grid-column: span 2; }
/* 极窄屏（比 iPhone SE 还窄）2 列会挤成"一个字一行"，退回 1 列 */
@media (max-width: 339px) {
  .pf-list { grid-template-columns: 1fr; }
  .pf-list > .pf-row:last-child:nth-child(odd) { grid-column: auto; }
}

/* ===================== 列表行 ===================== */
.pf-row {
  position: relative;                     /* 给右上角的箭头做定位锚 */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px; row-gap: 5px;      /* 标题行与值行之间留一点气口 */
  align-items: center;
  /* 去掉小字说明后格子少了一行 → 高度跟着收（2026-09-19） */
  padding: 11px 12px; min-height: 66px; box-sizing: border-box;
  cursor: pointer; background: var(--card);
  border: 1px solid #f5ece3; border-radius: 15px;
  /* 同色系（橙）柔影：格子微微「浮」起来 */
  box-shadow: 0 8px 20px -18px rgba(249, 89, 1, .55);
  transition: background .12s, border-color .12s;
}
.pf-row:active { background: #fffaf5; border-color: #f6ddc9; }
.pf-row.pf-static { cursor: default; }
.pf-row.pf-static:active { background: transparent; }
/* 「页面版本」行：外观仍是静态信息行（无箭头、灰字，不喧宾夺主），
   但**点一下会把「V2.1 · 构建号」整串复制走**（出问题时粘贴给我们定位）。
   ⚠️ 这两条必须排在上面 .pf-static 之后 —— 选择器都是 `.pf-row.pf-xxx`（两个类，
      特异性相同），谁能生效**只看顺序**。放到前面会被 default / transparent 压掉，
      表现就是"点了没反应"，而且完全不报错。 */
.pf-row.pf-tap { cursor: pointer; }
.pf-row.pf-tap:active { background: #fffaf5; }

/* 图标底 —— 全页只有三档，见文件头「配色纪律」。
   ⚠️ 这一块改了三版，别走回头路：
     一代 = c-orange/c-blue/c-green/c-purple/c-gray **彩虹淡底 + emoji** → 用户「怎么这么 low」
     二代 = **中性灰底 + 橙线条** —— 干净了，但用户「你是都啥颜色，这么暗淡无光」
            （灰色底确实发闷：整页没有一个「亮」的焦点，像灰度图）
     三代（当前）= **品牌橙渐变实底 + 白色线条图标**（iOS 设置页那一路）
     为什么实底反而不 low：**饱和度够 + 白色图标对比强 = 有光泽**；
     而"淡底 + 同色系淡图标"两者互相吃掉，才会显脏、显虚。
     🔴 关键：三档**手法必须一致**（都是渐变实底 + 白图标），
        区分靠色相（橙/灰/红），不靠"有的实底有的淡底" —— 手法不统一就又乱了。 */
.pf-ico {
  grid-column: 1; grid-row: 1;            /* 上段左侧 */
  width: 29px; height: 29px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  background: linear-gradient(140deg, #ffa95c 0%, #f95901 100%);   /* 品牌橙渐变 */
  color: #fff;
  /* 外投影（同色系、柔）+ 顶部内高光 → 方块「浮」起来、有光泽 */
  box-shadow: 0 4px 10px -5px rgba(249, 89, 1, .8), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.pf-ico svg { width: 17px; height: 17px; display: block; }
/* 中性档：只给「没有色彩信息量」的行（账号 ID / 微信 / 登录设备 / 版本 / 协议 / 隐私）。
   走灰是为了让「橙」始终代表「这里有你该做的事」；但**仍然是实底 + 白图标**，
   只是色相换成暖灰 —— 不拉低整页的明度。 */
.pf-ico.c-neutral {
  background: linear-gradient(140deg, #cec5bc 0%, #a2968c 100%);
  box-shadow: 0 4px 10px -5px rgba(120, 108, 96, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
}
/* 危险档：全页只有「注销账号」一个。 */
.pf-ico.c-danger {
  background: linear-gradient(140deg, #ff8a74 0%, #dc2f1e 100%);
  box-shadow: 0 4px 10px -5px rgba(220, 47, 30, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* 显式默认档（头像行在用，语义更清楚） */
.pf-ico.c-brand {
  background: linear-gradient(140deg, #ffa95c 0%, #f95901 100%);
  box-shadow: 0 4px 10px -5px rgba(249, 89, 1, .8), inset 0 1px 0 rgba(255, 255, 255, .38);
}
/* 文字型图标：头像那一行显示的是 emoji 头像或昵称首字母。
   🔴 这一档**必须留浅底** —— emoji 是彩色图形，压在橙实底上会糊成一团。 */
.pf-ico.pf-ico-tx {
  font-size: 15px; font-weight: 800;
  background: #fff4ec; color: #e8500a;
  box-shadow: inset 0 0 0 1px #fbdfc8;
}

.pf-main { grid-column: 2; grid-row: 1; min-width: 0; }
/* 标题和图标同一行 —— 宫格里这是"这一格是什么"的锚点 */
.pf-label { font-size: 13.5px; font-weight: 650; color: var(--text); }
/* 描述限 2 行：长描述（如"同一设备换号也能收验证码"）在窄格里会换行，
   不限行的话同一行的两格高度差会被拉到很难看 */
.pf-desc {
  margin-top: 2px; font-size: 11px; color: var(--text2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 值（昵称 / 手机号 / 「已关联」…）独占下段 —— 宫格里它不再是"行尾的一列" */
.pf-val {
  grid-column: 1 / -1; grid-row: 2;
  max-width: 100%;
  font-size: 12.5px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-val.pf-ok { color: var(--primary); font-weight: 700; }
.pf-val.pf-off { color: #c9c2bb; }
.pf-arrow {
  position: absolute; top: 9px; right: 9px;
  color: #d9cec4; font-size: 13px; line-height: 1;
}

/* 未配置通道的行：整行压灰 + 右侧明确写「暂未开通」，不做成能点的样子 */
.pf-row.pf-disabled { cursor: not-allowed; }
.pf-row.pf-disabled .pf-ico { opacity: .5; }
.pf-row.pf-disabled .pf-label { color: #b6aea6; }
.pf-row.pf-disabled .pf-arrow { visibility: hidden; }
.pf-row.pf-disabled { background: #fcfaf8; }

/* 危险行 */
.pf-row.pf-danger .pf-label { color: var(--danger); }

/* ===================== 账号 ID 那一小块 ===================== */
.pf-idbox {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: #fffaf5; border: 1px dashed #f0dcc9;
  font-size: 12px; color: var(--text2); line-height: 1.7;
}
.pf-idbox code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--text); word-break: break-all;
}

/* ===================== 底部 ===================== */
.pf-foot {
  margin-top: 22px; text-align: center;
  font-size: 11.5px; color: #bdb5ad; line-height: 1.9;
}

/* ===================== 弹层（复用站内 .modal-mask / .pt-card 体系）===================== */
.pf-sheet-mask {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(24, 16, 10, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.pf-sheet {
  width: 100%; max-width: 460px;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 18px 16px 22px; box-sizing: border-box;
  max-height: 82vh; overflow-y: auto;
}
.pf-sheet-title {
  font-size: 15.5px; font-weight: 800; color: var(--text);
  text-align: center; margin-bottom: 4px;
}
.pf-sheet-sub {
  font-size: 12.5px; color: var(--text2); text-align: center;
  line-height: 1.65; margin-bottom: 16px; padding: 0 6px;
}
.pf-ava-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.pf-ava-pick {
  aspect-ratio: 1 / 1; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; background: #fdf6f0; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.pf-ava-pick:active { transform: scale(.92); }
.pf-ava-pick.on { border-color: var(--primary); background: #fff2e8; }

.pf-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 13px; border: 1px solid #eee1d2; border-radius: 11px;
  font-size: 15px; outline: none; color: var(--text); background: #fff;
}
.pf-input:focus { border-color: var(--primary-light); }
.pf-input::placeholder { color: #c9c2bb; }
.pf-code-row { display: flex; gap: 9px; margin-top: 9px; }
.pf-code-row .pf-input { flex: 1; }
.pf-btn-mini {
  flex: 0 0 auto; padding: 0 14px; border-radius: 11px; border: 1px solid #fbdfc8;
  background: #fff1e7; color: var(--primary); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.pf-btn-mini[disabled] { opacity: .55; cursor: not-allowed; }
.pf-msg {
  margin-top: 9px; font-size: 12.5px; min-height: 17px; line-height: 1.5;
}
.pf-msg.err { color: #c0392b; }
.pf-msg.ok { color: #1a7f4b; }
.pf-sheet-btns { display: flex; gap: 10px; margin-top: 18px; }
.pf-btn {
  flex: 1; padding: 12px 0; border-radius: 12px; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--grad); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(249, 89, 1, .7);
}
.pf-btn:active { transform: scale(.985); }
.pf-btn[disabled] { opacity: .55; }
.pf-btn.ghost {
  background: #fff; color: var(--text2);
  border: 1px solid #eee1d2; box-shadow: none;
}
.pf-btn.danger { background: linear-gradient(135deg, #f56a5a 0%, #e03b2a 100%); }

/* 注销确认弹窗里那份「后果清单」 */
.pf-consequences {
  margin: 0 0 14px; padding: 12px 14px 12px 30px;
  background: #fff7f7; border: 1px solid #fbd7d7; border-radius: 12px;
  font-size: 12.5px; color: #8a3a33; line-height: 1.85;
}
.pf-consequences li { margin-bottom: 3px; }

/* 空态 / 加载态 */
.pf-empty {
  padding: 26px 14px; text-align: center;
  font-size: 13px; color: var(--text2); line-height: 1.8;
}

/* ===================== 「我的」页卡片上的入口 =====================
   注意：这个元素**不在 .pf-root 里**（它在「我的」页的 .vip-card 内部），所以样式单独写一行。
   刻意用**流内布局**、不用绝对定位 —— 不给老组件引入「绝对定位装饰物必须给容器加
   position: relative」那条风险（漏了会让手机端整页被撑宽、缩成 77%，桌面完全看不出来）。 */
/* 「我的」页顶部卡片上的「个人中心」入口。三代改版记录（别再走回头路）：
   一代 = 白色小药丸（padding 6px 14px / 12.5px 字），与金色徽章并排 → 用户「根本看不出能点」；
   二代 = 通栏按钮，但 .pf-entry-tx 用了 flex:1 → 文字撑满、箭头被顶到最右边，
         中间空出一大片，读起来像「列表项」不像按钮 → 用户「不美观」；
   三代（当前）= 「图标 + 文案 + 箭头」**紧凑居中**，按钮收窄到贴合内容的宽度。
   🔴 判据：按钮的宽度要跟内容相称。宽底 + 少内容 + 内容贴边 = 空旷；紧凑居中才像按钮。 */
.pf-entry {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; max-width: 250px;
  margin: 18px auto 2px;
  padding: 12px 16px;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff 0%, #fff5ee 100%);
  color: #b8400a;
  font-size: 15px; font-weight: 800; letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(105, 32, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
}
/* 图标底是橙实底 + 白色线条 SVG。不用 emoji：👤 在浅橙底上发暗发脏，且各系统渲染不一致。 */
.pf-entry-ic {
  flex: none; width: 30px; height: 30px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ffa855 0%, #f95901 100%);
  color: #fff;
  box-shadow: 0 3px 8px -4px rgba(150, 60, 0, .95);
}
.pf-entry-tx { flex: none; }
.pf-entry-go {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(249, 89, 1, .13); color: #f95901;
  font-size: 15px; font-weight: 700; line-height: 1; padding-left: 1px;
  transition: transform .14s ease;
}
.pf-entry:active { transform: scale(.975); box-shadow: 0 4px 10px -8px rgba(105, 32, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .9); }
.pf-entry:active .pf-entry-go { transform: translateX(2px); }
@media (hover: hover) {
  .pf-entry:hover { box-shadow: 0 13px 26px -11px rgba(105, 32, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .9); }
  .pf-entry:hover .pf-entry-go { transform: translateX(2px); }
}

/* ===================== 桌面端放大一档 ===================== */
@media (min-width: 768px) {
  .pf-root { max-width: 620px; margin: 0 auto; padding: 16px 18px 40px; }
  /* 桌面端「我的」页是宽幅的（卡片实测 1044px），按钮整体抬一档。
     注意：这里只放大到 340px —— 三代改版后内容是紧凑居中的，按钮不需要撑满，
     撑太宽反而会让「宽底 + 少内容」变空旷（二代 520px 就是这么翻的车）。 */
  .pf-entry { max-width: 340px; padding: 13px 18px; border-radius: 17px; font-size: 16.5px; }
  .pf-entry-ic { width: 34px; height: 34px; border-radius: 11px; }
  .pf-entry-go { width: 24px; height: 24px; font-size: 16px; }
  .pf-nick { font-size: 19px; }
  .pf-ava { width: 66px; height: 66px; font-size: 32px; border-radius: 21px; }
  .pf-ico { width: 35px; height: 35px; border-radius: 12px; }
  .pf-ico svg { width: 20px; height: 20px; }
  .pf-row { min-height: 62px; padding: 14px 16px; }
  .pf-label { font-size: 15px; }
  .pf-sheet { border-radius: 20px; margin: auto; }
  .pf-sheet-mask { align-items: center; }
}


/* ============== 登录设备清单（2026-09-19 修复"207 台设备"事故时新增）==============
   以前这个弹层只给一句"目前有 N 台设备在登录"，用户没法分辨哪台是自己。
   现在列出设备类型 + 最近登录时间 + 该设备登录过几次，他才能自己判断"这台不是我"。 */
.pf-sess-list { margin: 6px 0 12px; display: flex; flex-direction: column; gap: 7px; }
.pf-sess {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 13px;
  background: #fdfaf7; border: 1px solid #f2e9e1;
}
.pf-sess.cur { background: #f2fbf6; border-color: #cfe9dd; }
.pf-sess-ic { flex: none; font-size: 17px; line-height: 1; }
.pf-sess-tx { min-width: 0; flex: 1; }
.pf-sess-n { display: block; font-size: 13.5px; font-weight: 700; color: #3a2a1e; }
.pf-sess-d { display: block; margin-top: 3px; font-size: 11.5px; color: #a08c7c; }