/* ============================================================================
   个人中心（#sub-profile）· 布局重构版 2026-09-28
   ----------------------------------------------------------------------------
   【为什么重构】用户原话：「这 UI 太乱了，这颜色太浅了，而且布局也不合理。
   记住是重新布局啊，不是简单的修改一下，要有高级感，要有视觉冲击力。」

   【上一版（2 列宫格）的三处硬伤 —— 逐条对应这次的改法】
     ① **格子高度参差不齐 = "乱" 的主因**
        2 列宫格里每格高度取决于"描述有几行"（微信那格描述两行，就比旁边那格高一截），
        一行里两块永远对不齐。→ 改回**单列信息行**，高度天然统一。
     ② **箭头被挪到右上角绝对定位 = "不知道怎么点"**
        2 列时没有"行尾"了，所以上一版把箭头钉在右上角。但人扫列表是在**右边**找箭头的，
        放右上角等于把"能点"的暗示藏起来。→ 箭头**回到行尾**（视线落点上）。
     ③ **白卡贴白底 = "颜色太浅"**
        页面底 #fffbf7（近白）+ 卡片 #fff ⇒ 只能靠极浅描边区分，整页发飘。
        → 页面底改成**暖米色**（#f7ece0 系），让白卡**真正浮起来**；
          同时加深卡片阴影，做出"底 / 卡"两级层次。

   【这次新增的"冲击力"来自哪里】
     · **深墨金身份卡加厚**：头像是全页最大的色块（70px），会员与算力豆做成**两块数据**
       （中间竖分隔），一眼就知道"我在哪个档 / 我还有多少"。
     · **分组标题带色条 + 计数**：不再是 12px 小字，做成明确的层级锚点。
     · **图标统一 38px 渐变实底**（18→38，比上一版大一圈），整页节奏更稳。
     · 🔴 **仍然守旧规矩**：不引入新色相（橙 / 暖灰 / 红三档）、不用 emoji 当图标。

   🔴 三条本文件要守住的东西（前几版都在这些地方翻过车）：
     ① 用站点已有的 CSS 变量（--primary / --text / --text2 …），不引入新的主色。
     ② 凡带绝对定位装饰物的容器，必须自带 position: relative。
     ③ 手机优先，桌面端在文件末尾统一放大一档。
   ⚠️ 注释里禁止出现「星号 斜杠」连写（会提前结束注释吞掉后面的规则）。
   ============================================================================ */

.pf-root {
  position: relative;                 /* 见铁律② */
  padding: 14px 14px 34px;
  /* 暖米底：见硬伤③。比 --bg2(#fffbf7) 明显深一档，白卡才能真正浮起来。
     ⚠️ 只给这一页加，不动全局 body 底色（别的页面不受影响）。 */
  background: radial-gradient(120% 60% at 50% 0%, #fff4e6 0%, #f8ecdf 42%, #f6ead9 100%);
  min-height: 100%;
}

/* ===================== 顶部身份卡 ===================== */
/* 深墨金：整页唯一的深色块，视线第一眼必然落在"我自己"身上。
   冲击力来自**明度对比**，不是色相数量 —— 别再加别的色相。 */
.pf-hero {
  position: relative;
  padding: 19px 17px 0;
  border-radius: 24px;
  background: linear-gradient(152deg, #2a1c11 0%, #462b17 44%, #2e1d11 100%);
  box-shadow: 0 22px 42px -24px rgba(48, 25, 8, .85), 0 2px 8px rgba(120, 62, 12, .12);
  overflow: hidden;
  color: #fff;
}
.pf-hero-glow {                        /* 金色光斑：深底上唯一的高光 */
  position: absolute; right: -54px; top: -78px;
  width: 224px; height: 224px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 197, 84, .38) 0%, rgba(242, 197, 84, 0) 66%);
  pointer-events: none;
}
.pf-hero-top { position: relative; display: flex; align-items: center; gap: 15px; }
.pf-ava {
  position: relative; flex: 0 0 auto;
  width: 70px; height: 70px; border-radius: 23px;
  display: flex; align-items: center; justify-content: center;
  font-size: 33px; line-height: 1;
  background: linear-gradient(160deg, #fffdf8 0%, #ffe9cd 100%);
  border: 1.5px solid rgba(242, 197, 84, .68);
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .85), inset 0 1px 0 #fff;
  color: #d9540a; font-weight: 800;
}
.pf-hero-main { min-width: 0; flex: 1; }
.pf-nick {
  font-size: 20px; font-weight: 800; color: #fff; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-meta {
  margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .58);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.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); }

/* 会员 / 算力豆：两块并列的"数据"，中间一条竖分隔。
   这是整页最有信息量的两件事，所以给它们独立的视觉位置，而不是塞在一行小字里。 */
.pf-hero-bar {
  position: relative;
  margin: 17px -17px 0;
  padding: 14px 17px 15px;
  border-top: 1px solid rgba(240, 193, 75, .18);
  background: rgba(0, 0, 0, .17);
  display: flex; align-items: center; gap: 0;
}
/* 两块数据：**左块一行、右块两行**，靠 .pf-hero-bar 的 align-items:center 对齐中线。
   ⚠️ 别把左块也改成 flex-column —— 左块的文本和 <b> 会被拆成上下三行（第一版实测到，
      看起来像排版坏了）。左块内容由 profile.js 生成，一行就是一行。 */
.pf-hero-plan,
.pf-hero-beans { flex: 1 1 0; min-width: 0; }
.pf-hero-plan {
  font-size: 12.5px; font-weight: 700; color: #f2cd83;
  padding-right: 12px; line-height: 1.35;
}
.pf-hero-plan b { color: #ffe3a6; font-weight: 800; font-size: 17px; letter-spacing: -.2px; }
.pf-hero-beans {
  padding-left: 13px; border-left: 1px solid rgba(240, 193, 75, .22);
  font-size: 11.5px; color: rgba(255, 255, 255, .62); text-align: right;
  line-height: 1.25;
}
.pf-hero-beans b {
  display: block; margin-top: 1px;
  color: #ffd479; font-size: 18px; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}

/* 窄屏（≤420px）：hero 两块数据收一档字号，保证「体验卡 · 还剩 344 天」不换行。
   实测 390px 下左块可用宽度约 164px，12.5px 会换行、11.5px 刚好一行。 */
@media (max-width: 420px) {
  .pf-hero-plan { font-size: 11.5px; }
  .pf-hero-plan b { font-size: 15px; }
  .pf-hero-beans { font-size: 11px; }
  .pf-hero-beans b { font-size: 16.5px; }
}

/* 注销冷静期横幅（只在真的处于注销态时出现） */
.pf-warnbar {
  margin-top: 13px; padding: 12px 14px; border-radius: 14px;
  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;
}

/* ============== 账号安全体检 ==============
   把一串"设置项"变成一张"待办清单"：只列没做完的，全做完时换成一条绿色横条。 */
.pf-sec {
  position: relative;
  margin-top: 14px; padding: 15px 15px 14px;
  border-radius: 19px;
  background: #fff;
  border: 1px solid #f2ddc6;
  box-shadow: 0 14px 30px -24px rgba(120, 62, 12, .85), 0 1px 3px rgba(120, 62, 12, .05);
}
.pf-sec.is-good { border-color: #cfe9dd; }
.pf-sec.is-done {
  display: flex; align-items: center; gap: 13px;
  background: linear-gradient(140deg, #f2fbf6 0%, #ffffff 70%);
  border-color: #cfe9dd;
}
.pf-sec-check {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #6fd6a8 0%, #10a172 100%);
  color: #fff; font-size: 18px; font-weight: 800;
  box-shadow: 0 6px 14px -8px rgba(16, 161, 114, .9);
}
.pf-sec-head { display: flex; align-items: center; gap: 13px; }
.pf-sec-ring {
  flex: none; position: relative;
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(#ef7a1a calc(var(--p, 0) * 1%), #f6ece0 0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -10px rgba(239, 122, 26, .9);
}
.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: 14px; font-weight: 800; color: #c2450a;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.pf-sec-ring > span i { font-style: normal; font-size: 9px; font-weight: 700; margin-left: .5px; }
.pf-sec-tx { min-width: 0; flex: 1; }
.pf-sec-t { font-size: 15px; font-weight: 800; color: #33241a; }
.pf-sec-s { margin-top: 5px; font-size: 11.5px; line-height: 1.55; color: #a08c7c; }
.pf-sec-list { margin-top: 13px; display: flex; flex-direction: column; gap: 8px; }
.pf-sec-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 13px;
  background: #fffaf4; border: 1px solid #f5e5d0;
  cursor: pointer; transition: background .12s;
}
.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: 4px 11px; border-radius: 9px;
  box-shadow: 0 3px 8px -4px rgba(249, 89, 1, .9);
}

/* ============== 行内状态徽章与分组徽章 ============== */
.pf-badge {
  display: inline-block; margin-left: 6px; padding: 1.5px 7px;
  border-radius: 7px; 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: 8px; padding: 1.5px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  background: #f6efe7; color: #9c8b7c;
}
.pf-gbadge.ok { background: #e8f7ef; color: #12805c; }

/* ===================== 分组 =====================
   色条：四级都取自同一条暖色轴的深浅（橙 → 琥珀 → 棕 → 灰棕）。
   给每组配一个红黄蓝绿，立刻退回"彩虹图标"那种廉价感 —— 别走回头路。 */
.pf-group { margin-top: 24px; }
.pf-group-title {
  position: relative;
  font-size: 14px; font-weight: 800; color: #33241a;
  letter-spacing: .3px; margin: 0 0 11px 4px;
  padding-left: 13px;
  display: flex; align-items: center;
}
.pf-group[class*="pf-tone-"] > .pf-group-title::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 3px;
  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%); }

/* 列表容器：**单列**白卡 + 行内分隔线（iOS 设置页那一路）。
   ⚠️ 上一版是 2 列宫格（每格自己是卡片），实测"高度参差 + 箭头藏到右上角"，
      用户直接说"乱"。改回单列后高度天然统一、箭头回到行尾。 */
.pf-list {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #f0e0cd;
  border-radius: 19px;
  overflow: hidden;
  box-shadow: 0 16px 34px -26px rgba(120, 62, 12, .9), 0 1px 3px rgba(120, 62, 12, .05);
}

/* ===================== 列表行（单列信息行）===================== */
.pf-row {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px; min-height: 66px; box-sizing: border-box;
  cursor: pointer; background: transparent;
  border-bottom: 1px solid #f7eee4;
  transition: background .12s;
}
.pf-row:last-child { border-bottom: none; }
.pf-row:active { background: #fff8f1; }
.pf-row.pf-static { cursor: default; }
.pf-row.pf-static:active { background: transparent; }
/* 「页面版本」行：外观是静态信息行，但点一下会把整串构建号复制走。
   ⚠️ 必须排在 .pf-static 之后 —— 选择器特异性相同，谁能生效只看顺序。 */
.pf-row.pf-tap { cursor: pointer; }
.pf-row.pf-tap:active { background: #fff8f1; }

/* 图标底：全页只有三档（橙 / 暖灰 / 红），手法统一（渐变实底 + 白线条图标）。
   为什么实底不 low：饱和度够 + 白图标对比强 = 有光泽；
   "淡底 + 同色系淡图标"两者互相吃掉，才会显脏、显虚。 */
.pf-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  background: linear-gradient(140deg, #ffa95c 0%, #f95901 100%);
  color: #fff;
  box-shadow: 0 5px 12px -6px rgba(249, 89, 1, .85), inset 0 1px 0 rgba(255, 255, 255, .38);
}
.pf-ico svg { width: 20px; height: 20px; display: block; }
/* 辅档：给「没有色彩信息量」的行（微信 / 登录设备 / 页面版本 / 协议 / 隐私 / 关于）。
   🔴 2026-09-28 用户反馈：「这些咋都是灰色的头像，灰色头像这么丑」——
      上一版这一档是**暖灰渐变**，在整页暖色里显脏、显"未激活"，一半卡片像被禁用了。
   改成：**仍是渐变实底 + 白图标（手法与主档一致）**，色相留在暖橙轴上、**只浅一档**：
       主档 #ffa95c → #f95901（这里有你该做的事）
       辅档 #ffc48f → #ef7a2a（信息类，不抢视线）
   主次靠**明度深浅**分 —— 而不是"一个有色、一个发灰"，后者正是"丑"的来源。
   🚫 别再改回灰色。 */
.pf-ico.c-neutral {
  background: linear-gradient(140deg, #ffc48f 0%, #ef7a2a 100%);
  box-shadow: 0 5px 12px -6px rgba(239, 122, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.pf-ico.c-danger {
  background: linear-gradient(140deg, #ff8a74 0%, #dc2f1e 100%);
  box-shadow: 0 5px 12px -6px rgba(220, 47, 30, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.pf-ico.c-brand {
  background: linear-gradient(140deg, #ffa95c 0%, #f95901 100%);
  box-shadow: 0 5px 12px -6px rgba(249, 89, 1, .85), inset 0 1px 0 rgba(255, 255, 255, .38);
}
/* 文字型图标（头像行显示 emoji 头像或昵称首字母）
   🔴 这一档必须留浅底 —— emoji 是彩色图形，压在橙实底上会糊成一团。 */
.pf-ico.pf-ico-tx {
  font-size: 18px; font-weight: 800;
  background: #fff4ec; color: #e8500a;
  box-shadow: inset 0 0 0 1px #fbdfc8;
}

.pf-main { flex: 1; min-width: 0; }
.pf-label { font-size: 15px; font-weight: 700; color: #33241a; }
.pf-desc {
  margin-top: 4px; font-size: 11.5px; color: #a8927e; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* 值回到行尾（视线落点上），右对齐 */
.pf-val {
  flex: 0 0 auto; margin-left: auto; max-width: 46%;
  font-size: 13.5px; font-weight: 600; color: #8a7563; text-align: right;
  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 {
  flex: 0 0 auto; margin-left: 2px;
  color: #d5c7b8; font-size: 17px; line-height: 1;
}

/* 未配置通道的行：整行压灰，不做成能点的样子 */
.pf-row.pf-disabled { cursor: not-allowed; background: #fdfbf9; }
.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-danger .pf-label { color: var(--danger); }
.pf-row.pf-danger:active { background: #fff6f5; }

/* ===================== 「关于」展开区 =====================
   点「关于」展开后才出现的四行（页面版本 / 用户协议 / 隐私政策 / 注销账号）。
   视觉上**明确是"附属"的一层**：左侧一道浅色引导线 + 与主列表留出空隙 ——
   即使展开了也不会跟上面分组混成一片（"乱"的另一半来源）。 */
.pf-sub {
  margin-top: 9px; padding: 8px 0 8px 12px;
  border-left: 2px solid #f3e2cd;
  animation: pfSubIn .18s ease-out both;
}
.pf-sub .pf-list {
  border-radius: 16px;
  box-shadow: 0 12px 26px -24px rgba(120, 62, 12, .9), 0 1px 2px rgba(120, 62, 12, .04);
}
@keyframes pfSubIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================== 账号 ID 那一小块 ===================== */
.pf-idbox {
  margin-top: 11px; padding: 11px 13px; border-radius: 13px;
  background: #fffaf3; border: 1px dashed #efdcc5;
  font-size: 12px; color: #a8927e; line-height: 1.7;
}
.pf-idbox code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: #33241a; word-break: break-all;
}

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

/* ===================== 桌面端：整体放大一档、并限制最大宽度居中 ===================== */
@media (min-width: 768px) {
  .pf-root { padding: 20px 0 44px; }
  .pf-root > * { max-width: 660px; margin-left: auto; margin-right: auto; }
  .pf-hero { padding: 22px 22px 0; }
  .pf-hero-bar { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
  .pf-row { padding: 16px 18px; min-height: 72px; }
  .pf-ico { width: 42px; height: 42px; border-radius: 13px; }
  .pf-ico svg { width: 22px; height: 22px; }
  .pf-label { font-size: 15.5px; }
  .pf-nick { font-size: 21px; }
}

/* ============================================================================
   以下为弹层 / 会话列表 / 「我的」页入口 —— 布局未动，原样保留
   ============================================================================ */
/* ===================== 弹层（复用站内 .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) {
  /* 桌面端「我的」页是宽幅的（卡片实测 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-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; }