修正头图绿色背景高度：pb-16 → pb-22，让渐变切到会员卡一半

之前一直调不对，根因是我把方向搞反了。

重新用构建产物里的真实数值推算（--spacing = .25rem = 4px）：
  绿色切入卡片的深度 = pb - |卡片上浮| = pb - 44px
  pb-16 时只有 64 - 44 = 20px，约占卡片高（86px）的 23%，
  看起来就是「绿色太矮、远没到一半」。
  要切到一半（43px），需 pb ≈ 43 + 44 = 87px → pb-22（88px）。

之前的错误在于：几次都想通过减小 pb 或调整 -mt 来「对齐按钮中线」，
但两者会同步移动、互相抵消，所以怎么调都是 23%。真正要改的是
pb 的绝对值，让绿色背景整体变高。

改动：pb-16 → pb-22（64px → 88px），-mt-11 保持不变。

已用真实构建产物 CSS（dist/assets/*.css）渲染验证：
  切入深度 44px、占卡片 51.2%、与按钮中线差 1px，
  并截图确认绿色正确覆盖到头像与姓名的下半部分。

frondend/src/views/profile/ProfileView.vue

@@ -457,9 +457,12 @@ async function handleRedeemInvite() {
 <template>
   <div class="flex flex-col min-h-full">
     <!-- ======== 顶部：品牌渐变背景 + 个人信息（左对齐）+ 会员卡 ======== -->
-    <!-- 头图：高度以「卡片上浮量 + 卡片内容一半」为准，使渐变色边界正好落在
-         「兑换 CDK」按钮的中线，而不是切在卡片中上部 -->
-    <div class="relative overflow-hidden hero-clip bg-brand-gradient px-5 pb-16 text-white flex-shrink-0" style="padding-top: calc(var(--safe-top) + 14px)">
+    <!-- 头图绿色背景：高度需让渐变边界切到会员卡（VIP 板块）约一半高度。
+         计算：切入深度 = pb - |卡片上浮|
+               卡片实测高约 86px，一半 43px
+               -mt-11 = 44px，故 pb 需 ≈ 43 + 44 = 87px ≈ pb-22（88px）
+         早期误用 pb-16（64px）导致只切入 20px（约卡片 23%），看起来偏低。 -->
+    <div class="relative overflow-hidden hero-clip bg-brand-gradient px-5 pb-22 text-white flex-shrink-0" style="padding-top: calc(var(--safe-top) + 14px)">
       <!-- 装饰：柔光圆 + 细网格纹理 -->
       <div class="pointer-events-none absolute -right-16 -top-20 w-64 h-64 rounded-full bg-white/10" />
       <div class="pointer-events-none absolute right-10 top-24 w-28 h-28 rounded-full bg-white/10" />