/* 28-appbar.css — v6.8 右上角头像 + 头像裁剪 + 聊天消息头像 + 「我的」弹层浮动玻璃表头
   ────────────────────────────────────────────────────────────
   ① 各页右上角：旧 Logo（点按跳转经典版）→ 用户头像，点按进入「我的」tab。
   ② 「我的」卡片头像可点 → 选图 → 全屏裁剪（拖动/双指缩放，圆形取景框）→ 上传。
   ③ 聊天消息带头像（他人消息左侧；同一人连续消息用等宽空位对齐）。
   ④ ★ v6.8 「我的」弹层表头：不透明实底盖板 → 浮动玻璃（Apple Music 账户页同款）。
      内容一路滚到卡片最顶端、从「我的」两个字背后隔着渐进模糊透出去；
      玻璃配方吃全站统一 token（01-foundation.css 的 --hdr-glass-*），
      与 二级页表头 / 分组详情 / 聊天室顶部 / 各 tab 状态栏条 逐像素一致。 */

/* ── ① 右上角头像（沿用 .common-header 原来放 Logo 的位置） ── */
.header-avatar-btn {
  position: relative;
  width: 40px; height: 40px;
  padding: 0; border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease;
}
.header-avatar-btn:active { transform: scale(0.92); }
/* 未读小红标（原「我的」tab 的信箱红点搬到头像右上角） */
.header-avatar-badge {
  position: absolute;
  top: -3px; right: -5px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff3b30; color: #fff;
  font-size: 10px; font-weight: 700;
  display: none;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--main-bg);
  box-sizing: border-box;
  pointer-events: none;
}

.header-avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 0.5px solid var(--hairline);
  display: block;
  background: #c7ccd3;
}

/* ── ② 「我的」卡片头像（56px，尺寸/阴影沿用 15-profile-settings.css）── */
.profile-avatar {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: none; padding: 0;
  background: #c7ccd3;
  overflow: visible;
}
.profile-avatar-img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.profile-avatar-edit {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card-bg);
  box-sizing: border-box;
}
.profile-avatar-edit svg { width: 11px; height: 11px; }
.profile-avatar.uploading { opacity: 0.55; pointer-events: none; }

/* ── ③ 头像裁剪弹层（微信同款）── */
/* ★ v6.9 头像选图 input：视觉隐藏但保留在布局中（不能用 display:none —— 见 index.html 注释：
   部分安卓 WebView 对 display:none 的 file input 调 .click() 无效，表现为「点头像没反应」）。 */
.avatar-file-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.avatar-crop {
  position: fixed; inset: 0;
  z-index: 3000;                      /* 盖过一切（含操作 sheet） */
  background: #000;
  display: none;
  flex-direction: column;
  touch-action: none;                 /* 手势全权接管，禁掉浏览器缩放/滚动 */
  overscroll-behavior: contain;
}
.avatar-crop.open { display: flex; }
.avatar-crop-stage {
  position: relative;
  width: 100vw;
  flex: 1;
  overflow: hidden;
}
.avatar-crop-img {
  position: absolute;
  left: 50%; top: 50%;
  transform-origin: 0 0;              /* JS 用 translate+scale 矩阵控制 */
  will-change: transform;
  max-width: none;                    /* 原始尺寸渲染，缩放全由 transform 决定 */
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;               /* 手势监听挂在 stage 上 */
}
/* 方形取景框：四周半透明黑 + 中间镂空方（box-shadow 打洞法），白色细边 + 角/边刻度 */
.avatar-crop-mask {
  position: absolute; inset: 0;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.avatar-crop-hole {
  position: relative;
  width: var(--crop-size, 300px);
  height: var(--crop-size, 300px);
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
}
/* 四角 L 形刻度 */
.avatar-crop-hole .ct { position: absolute; width: 22px; height: 22px; border: 0 solid #fff; }
.avatar-crop-hole .ct-tl { top: -3px; left: -3px; border-top-width: 3px; border-left-width: 3px; }
.avatar-crop-hole .ct-tr { top: -3px; right: -3px; border-top-width: 3px; border-right-width: 3px; }
.avatar-crop-hole .ct-bl { bottom: -3px; left: -3px; border-bottom-width: 3px; border-left-width: 3px; }
.avatar-crop-hole .ct-br { bottom: -3px; right: -3px; border-bottom-width: 3px; border-right-width: 3px; }
/* 四边中点刻度 */
.avatar-crop-hole .cm { position: absolute; background: #fff; }
.avatar-crop-hole .cm-t, .avatar-crop-hole .cm-b { width: 22px; height: 3px; left: 50%; transform: translateX(-50%); }
.avatar-crop-hole .cm-t { top: -3px; } .avatar-crop-hole .cm-b { bottom: -3px; }
.avatar-crop-hole .cm-l, .avatar-crop-hole .cm-r { width: 3px; height: 22px; top: 50%; transform: translateY(-50%); }
.avatar-crop-hole .cm-l { left: -3px; } .avatar-crop-hole .cm-r { right: -3px; }

/* 工具行：左下旋转，右下还原（无改动时置灰） */
.avatar-crop-tools {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px calc(var(--edge-pad) + 8px);
}
.avatar-crop-tool {
  border: none; background: none;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar-crop-tool svg { width: 26px; height: 26px; display: block; }
.avatar-crop-tool.reset { font-size: 16px; font-weight: 500; }
.avatar-crop-tool:disabled { opacity: 0.35; pointer-events: none; }

.avatar-crop-actions {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px calc(var(--edge-pad) + 8px) calc(env(safe-area-inset-bottom, 0px) + 18px);
  box-sizing: border-box;
}
.avatar-crop-btn {
  border: none; background: none;
  color: #fff;
  font-size: 17px; font-weight: 500;
  padding: 10px 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar-crop-btn.primary { font-weight: 700; }
.avatar-crop-btn:disabled { opacity: 0.4; pointer-events: none; }

/* ============================================================================
   ── ④ 聊天消息头像（v6.7 重做：双向头像 + 与气泡尾巴同侧、底对齐）──
   ────────────────────────────────────────────────────────────────────────────
   ★ 「尾巴指向不对 / 看不到自己的头像 / 不知道消息是谁发的」的根因，一次说清：

   07-chat.css 画的是【iMessage 尾巴】—— 长在气泡的【底部外侧】，而且遵守
   iMessage 规矩：只有【每组最后一条】才有尾巴（.chat-message:has(+ .grouped)
   的那条把尾巴藏掉）。这没问题。

   出问题的是头像那一半（旧版本）：
     · align-items: flex-start  → 头像钉在【顶部】，和昵称一行；
     · 头像只画在【每组第一条】，组内其余条塞一个 .msg-avatar-spacer 空位。
   于是一组消息长这样：
        [头像] 昵称  12:56          ← 头像在这儿（组的头）
        [空位] (气泡)
        [空位] (气泡，带尾巴 ↘)     ← 尾巴在这儿（组的尾），指向一片空白
   头像在组头顶部、尾巴在组尾底部 —— 两个东西天生不可能对上，看起来就是
   "尾巴指着空气"。再加上自己的消息压根不进 .msg-row（没有头像），右边一整列
   蓝气泡没有任何身份标识 → "不知道消息到底是谁发的"。

   新规则（= iOS iMessage 群聊，外加微信式的"自己也有头像"）：
     · .msg-row 改成【底对齐】→ 头像的下沿和气泡的下沿齐平，正好贴着尾巴根；
     · 12-chat.js 每条消息都输出头像（宽度恒定，不跳版），
       "组内非末条"由下面的 :has() 规则把头像 visibility:hidden 掉 ——
       条件和 07-chat.css 藏尾巴的条件【完全一致】，所以头像和尾巴永远成对出现；
     · 自己 = 右侧头像 + 右下尾巴；他人 = 左侧头像 + 左下尾巴。
   一组消息现在长这样：
        [空位] 昵称  12:56
        [空位] (气泡)
        [头像] (气泡，带尾巴 ↙)     ← 尾巴正好指着头像
   ============================================================================ */
.msg-row {
  display: flex;
  align-items: flex-end;          /* ★ 关键一行：从 flex-start 改成 flex-end */
  gap: 10px;
  min-width: 0;
}
.chat-message.self .msg-row { justify-content: flex-end; }

.msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #c7ccd3;
  border: 0.5px solid var(--hairline);
  /* 尾巴是用两个伪元素相减画出来的，其中"挖空"的 ::after 会向气泡外探出 10px
     （> gap），而气泡是 position: relative（已定位）→ 默认层序里会盖在头像上，
     啃掉头像内侧一小角。把头像抬一层即可，尾巴的几何一点都不用动。 */
  position: relative;
  z-index: 2;
}
/* ★ v6.9 自己的头像可点（→「我的」）：给出手型 + 轻微按压反馈；不改任何几何，
   所以气泡尾巴、组内隐藏规则全都原样生效。 */
.msg-avatar-me {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
}
.msg-avatar-me:active { transform: scale(0.92); }
.msg-avatar-me:focus-visible { outline: 2px solid var(--tab-active, #fa2d48); outline-offset: 2px; }

.msg-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-message.self .msg-main { align-items: flex-end; }

/* 组内非末条：头像隐身但【保留占位】（visibility 而不是 display:none）→ 气泡不跳版。
   条件与 07-chat.css 里"藏尾巴"的规则一字不差，两者同生同灭。
   ⚠ :has() 在很老的浏览器上不生效 → 优雅降级为"每条都有头像 + 每条都有尾巴"
     （微信观感），依然是对的，不会坏。 */
.chat-message.self:has(+ .chat-message.self.grouped) .msg-avatar,
.chat-message.other:has(+ .chat-message.other.grouped) .msg-avatar {
  visibility: hidden;
}

/* 自己消息底下的「电台 · 时间」脚注在 .msg-row 之外，
   右边要空出一个头像宽 + gap，才能和气泡的右缘对齐（否则会跑到头像底下） */
.chat-message.self .msg-foot { margin-right: 42px; }


/* ============================================================
   ★ v6.4.4 页头 → 首个内容块 间距全站统一
   ────────────────────────────────────────────────────────────
   基准：.common-header 底 padding 固定 6px（03-home.css），
   收藏/歌单的 .favorites-grid 自带 padding-top 8px → 总空隙 14px。
   改前三处不一致：搜索 6px、词典 10px、收藏/歌单 14px —— 现统一 14px：
   给 搜索/词典 的首块补齐 margin-top 8px。
   ============================================================ */
.search-bar-wrap { margin-top: 8px; }
.dict-page-search { margin-top: 8px; }

/* ── 词典搜索条对齐搜索 tab：左侧放大镜 + 全宽输入（「查词」按钮已移除，
      提交方式 = 键盘「搜索」键 / 回车，与 iOS 系统词典、App Store 同范式） ── */
.dict-page-search { position: relative; }
.dict-page-search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--input-placeholder, #8e8e93);
  pointer-events: none;
}
.dict-page-input { padding-left: 44px; }


/* ============================================================
   ★ v6.4.5 输入框内 ⊗ 清除按钮（Apple Music 同款）——搜索 tab 与词典共用
   ============================================================ */
.input-clear-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: none; background: none; padding: 0;
  color: var(--input-placeholder, #8e8e93);
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.input-clear-btn svg { width: 18px; height: 18px; }
.input-clear-btn:active { opacity: 0.6; }
/* 有字时由 JS 切成 flex；给输入框右侧让位，避免文字压到按钮下面 */
#search-input, .dict-page-input { padding-right: 44px; }
/* 自定义 ⊗ 上岗后，隐藏 WebKit 原生清除钮，防止一左一右两个叉 */
#search-input::-webkit-search-cancel-button,
.dict-page-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.search-results-head {
  padding: 4px var(--edge-pad) 2px;
  font-size: 13px; font-weight: 600;
  color: var(--text-dark); opacity: 0.55;
}
.search-empty-sub { font-size: 13px; opacity: 0.55; margin-top: 4px; }


/* ============================================================
   ★ v6.5.0 「我的」账户弹层（Apple Music 同款）
   ────────────────────────────────────────────────────────────
   z 序：底部标签栏 900 < 本弹层 1500 < 操作 sheet/信箱 2200 < 裁剪 3000。
   全屏子页（使用手册/提交电台 .category-detail-view，z≈100）打开时
   由 JS 自动收起本弹层让位（_bindSheetYield）。
   ============================================================ */
.profile-sheet {
  position: fixed; inset: 0;
  z-index: 1500;
  visibility: hidden;
  pointer-events: none;
}
.profile-sheet.open { visibility: visible; pointer-events: auto; }
.profile-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.profile-sheet.open .profile-sheet-backdrop { opacity: 1; }
.profile-sheet-card {
  /* ★ v6.8 表头高度唯一真源 = 14(上 padding) + 34(✕键高) + 10(下 padding)。
     玻璃层高度和滚动区的 padding-top 都吃这个数，改表头 padding/按钮尺寸时一起改。
     （卡片顶边本来就在状态栏下方 10px 处，卡片内没有刘海，所以不掺 --safe-top ——
       这点和全屏的 .profile-subpage / .category-detail-view 不同。） */
  --psheet-head-h: 58px;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(var(--safe-top) + 10px);
  background: var(--main-bg);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.25);
  display: flex; flex-direction: column;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  touch-action: pan-y;
}
.profile-sheet.open .profile-sheet-card { transform: translate3d(0, 0, 0); }
.profile-sheet-card.dragging { transition: none; }

/* ★ v6.8 表头玻璃层 —— 与站内其它浮动玻璃表头【同一份材质】
   ────────────────────────────────────────────────────────────
   历史：v6.6.2 曾把表头做成不透明实底（内容撞到下缘被干净盖掉），
   v6.8 推翻：Apple Music / Apple 账户页的表头不是"盖板"，是浮动玻璃 ——
   内容钻到标题背后、隔着渐进模糊透出去，一路滚到弹层最顶端。

   分层套路与 .category-detail-view / .profile-subpage 完全一致：
     card::before          = 纯玻璃层（渐进模糊 + mask 自上而下淡出），不吃指针
     .profile-sheet-head   = 纯内容层（标题/✕，absolute 浮在最上）
   为什么玻璃不直接挂在 head 上：mask 会连子元素一起吃掉——直接给 head 上
   mask，标题和 ✕ 会跟着淡没。所以模糊归这层，内容归 head，两层分工。

   z 序（卡片自带 transform → 自成堆叠上下文，这些值只在卡片内部比大小）：
     滚动内容(auto=0) < 玻璃(6) < 表头内容(7) —— 与 .profile-subpage 同一套数。 */
.profile-sheet-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--psheet-head-h);
  z-index: 6;
  pointer-events: none;
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-thin-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-thin-blur));
  background: var(--hdr-glass-bg);
  -webkit-mask-image: var(--hdr-glass-mask);
          mask-image: var(--hdr-glass-mask);
}

.profile-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--edge-pad) 10px calc(var(--edge-pad) + 4px);
  /* ★ v6.8 实底盖板 → 浮层（Apple Music 账户页同款）：
     从 flex 流内元素改为 absolute 浮层，表头不再占位 ——
     内容因此可以一路滚到卡片最顶端，从「我的」背后隔着玻璃透出去。
     底色交给上面 card::before 那层玻璃，这里只负责放内容。 */
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 7;
  background: transparent;
  pointer-events: none;      /* 标题两侧的空白不挡底下内容的滚动/点击 */
}
/* 真正的控件恢复可点（与 .category-detail-back/-title 同套路） */
.profile-sheet-title,
.profile-sheet-close { pointer-events: auto; }
/* ★ v6.6.0 去掉顶部抓手短横杠（Apple Music 账户页同款）——任意位置下拉即可关闭，无需暗示条 */
.profile-sheet-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; color: var(--text-dark);
}
.profile-sheet-title-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; background: #c7ccd3;
  border: 0.5px solid var(--hairline);
}
.profile-sheet-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(120, 120, 128, 0.14);
  color: var(--text-dark);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.profile-sheet-close svg { width: 16px; height: 16px; opacity: 0.7; }
@media (prefers-color-scheme: dark) {
  .profile-sheet-close { background: rgba(120, 120, 128, 0.32); }
}

.profile-sheet-body { flex: 1; min-height: 0; position: relative; }
.profile-sheet-body .view-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
/* 覆盖 15-profile-settings.css 按"整页 tab"写的留白：
   弹层盖住底部栏，底部只留安全区呼吸。
   ★ v6.8 表头浮起后不再占位 —— 滚动容器自己补出这段顶部空间（同
   .category-detail-list / .profile-subpage-scroll 的套路）。
   ⚠ 03-home.css 给全站 .view-scroll 的 padding-top 挂了 !important（清双重留白用），
     这里必须同样带 !important 才能赢（本选择器 2 个 id，特异性更高）。 */
#profile-sheet #view-profile .view-scroll {
  padding-top: var(--psheet-head-h) !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
}
/* ★ v6.6.2 [截图里那块"糊影"的真凶] 03-home.css 给全站 .view-scroll::before 挂了
   一条 sticky 的"状态栏毛玻璃"（高 = env(safe-area-inset-top)，带 backdrop-blur），
   职责是全屏 tab 页让内容钻到手机状态栏底下时隔着玻璃透出来。
   但本弹层卡片开在状态栏【下方】，卡片里没有状态栏 —— 这条玻璃悬在卡片顶部
   毫无意义，个人卡片滚上去就被它糊成一团鬼影。此前只把 padding-top 归零，
   漏了这条 ::before，这里补杀。 */
#profile-sheet .view-scroll::before { content: none; }

/* ★ v6.8 删除 v6.6.2 的「个人卡片随滚动淡出」（--sheet-fade）
   ────────────────────────────────────────────────────────────
   那套淡出是"实底盖板"时代的补偿动画：内容撞上不透明表头前先原地化掉，
   免得被一刀切。现在表头换成了真·浮动玻璃，目标恰恰是让内容【从
   "我的"背后隔着渐进模糊透出去】—— 淡出会把要透出的东西先杀掉，
   和新目标直接矛盾。Apple Music 账户页也不淡：卡片原样从玻璃下穿过，
   模糊本身就是全部的过渡。CSS 与 28-appbar.js 的 _bindSheetScrollFade()
   一并移除；.fade-gone 的指针兜底随之失去存在意义。 */


/* ============================================================================
   ★ v6.7 顺手清掉同一"物种"的另一条表头横线
   ────────────────────────────────────────────────────────────────────────────
   09-sheets.css:53 给公告 sheet 的表头也画了一条
       .announce-sheet-header { border-bottom: 0.5px solid var(--glass-border) }
   和「我的」那条是同一个毛病，一并撤掉。
   （.announce-sheet 自己的 border-top 保留 —— 那是【毛玻璃浮层的外轮廓】，
     不是"标题下的分隔线"；没有它，半透明的 sheet 顶边会和背后的内容糊在一起。）
   ============================================================================ */
.announce-sheet-header { border-bottom: none; }


/* ★ v6.5.1 「我的」弹层内打开的全屏子页临时压层（基础 z=100 → 1600 > 弹层 1500）：
   子页滑入盖住卡片、关闭滑出即回弹层，等同 Apple 账户页的"卡片内推入"体验 */
.category-detail-view.above-sheet { z-index: 1600; }


/* ============================================================
   ★ v6.6.0 卡片内二级页（设置 / 云同步）：从右滑入盖在主表上
   ============================================================ */
/* ★ v6.6.1 二级页表头重做：实心流内横条 → 站内统一的"浮动玻璃头"
   （与 10-category-detail.css 的 .category-detail-view 同一套视觉语言）：
   - ::before = 纯玻璃层（渐进模糊，mask 自上而下淡出），不吃指针
   - .profile-subpage-head = 纯内容层（absolute 浮在最上），返回键是 44px 圆形玻璃键
   - 内容从玻璃底下渐进模糊着穿过去，可一路滚到屏幕最顶端
   - 高度账：safe-top + 6(上 padding) + 44(按钮) + 6(下 padding) = safe-top + 56 */
.profile-subpage {
  --sub-header-h: calc(var(--safe-top, 0px) + 56px);
  position: absolute; inset: 0;
  z-index: 5;
  background: var(--main-bg);
  display: flex; flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.38s cubic-bezier(0.32, 0.72, 0, 1);
  visibility: hidden;                    /* 收起时彻底隐身，防误触 */
}
.profile-subpage.open { transform: translate3d(0, 0, 0); visibility: visible; }
.profile-subpage.closing { visibility: visible; }   /* 退场动画期间保持可见 */

/* 玻璃层：单独一层做渐进模糊 —— mask 会连子元素一起吃掉，
   所以模糊归 ::before，标题/返回键归 head，两层分工互不干扰 */
.profile-subpage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--sub-header-h);
  z-index: 6;
  pointer-events: none;
  /* ★ v6.8 吃全站表头玻璃 token（01-foundation.css 的 --hdr-glass-*）：
     blur 从写死的 18px 归口到 var(--glass-thin-blur)=20px，底色/遮罩同源。 */
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-thin-blur));
  backdrop-filter: saturate(180%) blur(var(--glass-thin-blur));
  background: var(--hdr-glass-bg);
  -webkit-mask-image: var(--hdr-glass-mask);
          mask-image: var(--hdr-glass-mask);
}

.profile-subpage-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 4px;
  padding: 6px var(--edge-pad) 6px var(--edge-pad);
  padding-top: calc(var(--safe-top, 0px) + 6px);
  /* 从 flex 流内元素 → 浮层：内容因此可以一路滚到屏幕最顶端 */
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;          /* 底色交给 ::before 玻璃层 */
  z-index: 7;
  pointer-events: none;             /* 标题两侧空白不挡底下内容的点击 */
}
.subpage-back,
.subpage-title { pointer-events: auto; }

/* 返回键 → 浮动圆形玻璃键（与 .category-detail-back 同款） */
.subpage-back {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--hairline); padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--glass-shadow);
  color: var(--text-dark);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.subpage-back:active {
  background: rgba(0, 0, 0, 0.08);
  transform: scale(0.92);
}
@media (prefers-color-scheme: dark) {
  .subpage-back { background: rgba(44, 44, 46, 0.55); }
  .subpage-back:active { background: rgba(255, 255, 255, 0.1); }
}
.subpage-back svg { width: 28px; height: 28px; display: block; }

.subpage-title {
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: var(--text-dark);
  margin: 0; padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}
.subpage-head-pad { width: 44px; height: 44px; }   /* 与返回键等宽，标题绝对居中 */

.profile-subpage-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* header 变浮层后不再占位 —— 滚动容器自己补出顶部空间，+4 让首行不贴玻璃边缘 */
  padding: calc(var(--sub-header-h) + 4px) var(--edge-pad) calc(env(safe-area-inset-bottom, 0px) + 32px);
}