/* 会员中心 · 视觉升级层 v2（2026-11-04）
 *
 * 为什么单独一层、不改 styles.css：
 *   styles.css 68KB，admin.html 和登录卡共用同一批选择器。
 *   直接改会把运营后台一起带偏，而且回滚要翻整个文件。
 *   这一层只覆盖会员中心（.shell 之内 + .top），把 link 删掉就回到改前。
 *
 * 解决的是什么（对照改前）：
 *   1. 三套宽度打架：.wrap 1040 / .shell 1120 / .side 214+36 —— 顶栏、侧栏、卡片
 *      三条左边缘互不对齐，看起来"紧"且"歪"。现在统一到 1200 一条基线。
 *   2. 密度是后台密度：卡片 padding 24/26、间距 14、标题 15px、三池数字 22px。
 *      改成产品页密度：32/36、20、17px、32px。
 *   3. 没有页面层级：进来第一眼就是一张身份卡，不知道自己在哪。补 .pagehead。
 *   4. 动效只有一张卡淡入。补：错峰进场 / hover 抬升 / 数字滚动 / 额度条生长。
 */

:root {
  --v2-w: 1200px;
  --v2-side: 196px;
  --v2-gap: 20px;
  --v2-pad: 30px 34px;
  --v2-rise: cubic-bezier(.22, 1, .36, 1);
}

/* ==================== 1. 统一网格 ====================
 * 顶栏和内容区共用同一个 max-width，左边缘才会落在同一条线上。
 * 改前：顶栏 1040、内容 1120 —— 差 40px，怎么调都像没对齐。
 */
/* 用「最大宽 1240 + 左右各 20 内边距」而不是「宽度 100vw-40」：
   100vw 在移动端含滚动条，会算宽 15px，卡片右边就被裁掉一截（390 宽实测溢出）。
   这样写：宽屏内容正好 1200，窄屏自动留 20px 边，顶栏品牌和卡片左边缘同一条线。 */
.wrap,
.shell {
  width: 100%;
  max-width: calc(var(--v2-w) + 40px);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.shell { padding-top: 0; padding-bottom: 0; }

/* 兜底：任何一屏出现横向溢出，页面都不该整体左右晃。
   390 宽实测过一次 —— 顶栏那串邮箱地址不会断行，把 body 撑宽 100px，
   连带 .shell（width:100%）一起变宽，卡片右边就被裁掉了。 */
html, body { overflow-x: hidden; }

/* 兜底：任何一屏出现横向溢出，页面都不该整体左右晃。
   390 宽实测过一次 —— 顶栏那串邮箱地址不会断行，把 body 撑宽 100px，
   连带 .shell（width:100%）一起变宽，卡片右边就被裁掉了。 */
html, body { overflow-x: hidden; }

/* 画布再压深一档：原来 #F7F7F6 和卡片白只差 1.07:1，卡片浮不起来。
   #F3F3F0 是 1.14:1，看得见边界但不脏。深色模式不动。 */
html:not([data-px-mode="dark"]) body { background: #F3F3F0; }

/* ==================== 2. 顶栏 ====================
 * 从「悬浮胶囊」改成「通栏 + 毛玻璃 + 底部一条细线」。
 *
 * 为什么改：胶囊在 1040 宽度下像个标签，拉到 1200 就成了一条面包；
 * 更要紧的是首页 / 定价 / 帮助三页的导航都是通栏，只有会员中心是胶囊 ——
 * 点进会员中心像进了另一个产品。统一成通栏，四个页面才是一套东西。
 */
.top {
  position: sticky; top: 0; z-index: 40;
  padding: 0;
  background: color-mix(in srgb, var(--px-surface) 84%, transparent);
  backdrop-filter: saturate(1.8) blur(16px);
  -webkit-backdrop-filter: saturate(1.8) blur(16px);
  border-bottom: 1px solid var(--px-line-100);
  transition: box-shadow .24s var(--ease);
}
/* 滚动后才浮起来。静止时不能有影子 —— 通栏条一旦有影子，整页会被切成两段 */
.top.is-stuck { box-shadow: 0 1px 14px rgba(16, 18, 22, .07); }

.top__inner {
  height: 64px;
  padding: 0 20px;
  gap: 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand__dot { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.brand__name { font-size: 14px; }
.brand__sub { font-size: 11.5px; }

.tophelp { font-size: 13px; padding: 7px 10px; }

/* 邮箱地址是一串没有空格的字符，不会自动换行 —— 不掐断就会把整条顶栏撑开 */
.who { font-size: 12.5px; min-width: 0; }
.who > span {
  min-width: 0; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==================== 3. 左侧导航 ====================
 * 改前：13.5px 纯文字、padding 10/12、没有图标、选中态是墨色实心块。
 * 墨色实心块在侧栏里太重（一屏最黑的东西是导航），而且 5 项里 4 项都是灰字，
 * 扫起来没有形状可抓。改成：图标 + 文字、选中态浅底 + 左侧 2px 竖条。
 */
.side {
  width: var(--v2-side);
  padding: 34px 24px 40px 0;
  border-right: 1px solid var(--px-line-100);
  position: sticky; top: 88px;
  align-self: flex-start;
}
.side .tabs { gap: 3px; }

.side .tab {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px;
  border-radius: 10px;
  font-size: 13.5px; color: var(--px-ink-700);
  background: transparent;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.side .tab::before {
  content: '';
  flex: none; width: 17px; height: 17px;
  background-color: currentColor;
  opacity: .55;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 17px 17px; mask-size: 17px 17px;
  transition: opacity .18s var(--ease);
}
/* Feather 图标，转成 mask 才能跟 currentColor 一起变色 */
.side .tab[data-tab="rights"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.2 13.9 7 23l5-3 5 3-1.2-9.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.2 13.9 7 23l5-3 5 3-1.2-9.1'/%3E%3C/svg%3E");
}
.side .tab[data-tab="usage"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20V10M12 20V4M6 20v-6'/%3E%3C/svg%3E");
}
.side .tab[data-tab="pay"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2'/%3E%3Cpath d='M1 10h22'/%3E%3C/svg%3E");
}
.side .tab[data-tab="welfare"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12M2 7h20v5H2zM12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12M2 7h20v5H2zM12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}
.side .tab[data-tab="account"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.side .tab:hover {
  background: var(--px-line-100);
  color: var(--px-ink-900);
}
.side .tab:hover::before { opacity: .85; }

/* 选中态：浅底 + 左侧 2px 竖条。竖条比实心块轻，一屏里不会抢主内容的权重。 */
.side .tab.is-on {
  background: var(--px-accent-w);
  color: var(--px-accent-h);
  font-weight: 600;
}
.side .tab.is-on::before { opacity: 1; }
.side .tab.is-on::after {
  content: '';
  position: absolute; left: -1px; top: 10px; bottom: 10px;
  width: 2px; border-radius: 2px;
  background: var(--px-accent);
}

/* ==================== 4. 主区 ==================== */
.main {
  padding: 40px 0 72px 40px;
  max-width: none;
}
/* 登录卡 / 骨架屏是整块居中的：主区左边那 40px 内边距会让它们整体偏右 20px。
   这两屏没有侧栏语义，把内边距还回去。 */
.main:has(> .login:not([hidden])),
.main:has(> .skel-boot) { padding: 40px 0 72px; }

/* 页面标题：改前完全没有。没有它，用户点进任何一个页签都不知道自己在哪一层。 */
.pagehead { margin: 0 0 22px; }
.pagehead__t {
  margin: 0;
  font-size: 28px; font-weight: 700;
  letter-spacing: -.028em; line-height: 1.25;
}
.pagehead__s {
  margin: 7px 0 0;
  font-size: 13.5px; line-height: 1.6;
  color: var(--px-ink-500);
}

/* ==================== 5. 卡片 ==================== */
.card {
  padding: var(--v2-pad);
  margin-bottom: var(--v2-gap);
  border-radius: 20px;
  border-color: var(--hairline);
  box-shadow: 0 1px 2px rgba(16, 18, 22, .04);
  transition: box-shadow .24s var(--ease), transform .24s var(--ease);
}
/* 只有身份卡和价格卡会抬 —— 纯信息卡抬起来是噪音 */
.idcard:hover, .invite:hover, .upsell:hover {
  box-shadow: 0 10px 28px -18px rgba(16, 18, 22, .34);
}

.cardhead { margin-bottom: 18px; gap: 12px; }
.cardhead__t { font-size: 17px; letter-spacing: -.018em; }
.cardhead__s { font-size: 12px; }
.cardhead__more { font-size: 12.5px; }

.hint { font-size: 13.5px; }

/* 身份卡：加高、加大头像，让「我是谁」这一格有分量 */
.idcard { gap: 18px; padding: 26px 34px; }
.idcard__ava {
  width: 48px; height: 48px; border-radius: 14px;
  font-size: 17px;
  box-shadow: 0 6px 16px -8px rgba(15, 125, 87, .7);
}
.idcard__mail { font-size: 15.5px; }
.idcard__line { margin-top: 5px; font-size: 12.5px; }

/* 三池：数字 22 → 32，是这一屏最重要的信息，应该压得住 */
.pools { gap: 14px; margin: 4px 0 20px; }
.pool {
  padding: 16px 18px 15px;
  border-radius: 14px;
  /* 底色比原来深一档：原来用 surface-2(#FAF9F6) 压在白卡上几乎看不见边界，
     三个池看起来像三段文字而不是三块数据。 */
  background: color-mix(in srgb, var(--px-line-100) 72%, var(--px-surface));
  border-color: transparent;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.pool:hover { border-color: var(--px-line-200); transform: translateY(-1px); }
.pool__k { font-size: 12.5px; }
.pool__v {
  margin-top: 9px;
  font-size: 32px; font-weight: 700;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.pool__v i { font-size: 12px; margin-left: 4px; }
.pool__f { margin-top: 9px; font-size: 11.5px; }
.poolnote { font-size: 11.5px; }

.quotafoot { margin-top: 18px; padding-top: 15px; font-size: 12.5px; }

/* 邀请 / 升级引导：跟着放大 */
.invite, .upsell { padding: 26px 32px; }
.upsell__t { font-size: 16px; }
.upsell__p, .upsell__li { font-size: 13px; }

/* ==================== 6. 动效 ====================
 * 规矩（沿用 styles.css 的约定，只收紧范围）：
 *   只动 opacity / transform / box-shadow；
 *   进场 420ms、位移 14px；hover 180ms、位移 3px。
 *   全部走 prefers-reduced-motion 兜底。
 */
@keyframes v2rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes v2fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 卡片错峰进场：标题 0，第一张卡 55ms，之后每张 +55ms，最多排到第 5 张。
   挂在 section 的子元素上而不是 section 自己 ——
   section 从 hidden 切到显示时浏览器会重置子元素的动画，切页签自动重播一遍，
   不用 JS 去 removeClass / addClass。 */
.main > .updbar,
.main > section > * {
  animation: v2rise .42s var(--v2-rise) both;
}
.main > section > *:nth-child(1) { animation-delay: 0ms; }
.main > section > *:nth-child(2) { animation-delay: 55ms; }
.main > section > *:nth-child(3) { animation-delay: 110ms; }
.main > section > *:nth-child(4) { animation-delay: 165ms; }
.main > section > *:nth-child(5) { animation-delay: 220ms; }
.main > section > *:nth-child(n+6) { animation-delay: 275ms; }

/* 数字滚动：v2.js 把 0 数到目标值，这里只管等宽，防止数字跳动时宽度抖 */
[data-count] { font-variant-numeric: tabular-nums; }

/* 侧栏：进场从左侧滑入一点点，和主区错开，视线先落主区 */
.side { animation: v2fade .3s var(--ease) both; }
@keyframes v2side {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}
.side .tabs { animation: v2side .36s var(--v2-rise) .05s both; }

/* 按钮 hover：原版只有 0.985 缩放，太保守，抬 2px */
.btn { transition: all .18s var(--ease); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(15, 125, 87, .8); }
.btn--plain:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.985) translateY(0); }

/* 额度明细的行：hover 时左侧长出一条品牌色，指出"你在看这一行" */
.qrow { transition: background .16s var(--ease), box-shadow .16s var(--ease); }
.qrow:hover { box-shadow: inset 2px 0 0 var(--px-accent); }

/* ==================== 7. 手机 ====================
 * 390 宽实测过两个坑：
 *   1. 顶栏 flex-wrap 之后，brand / 切换器 / 三个文字链接 / 账号挤成三行，
 *      还把横向导航推到最后一行 —— 分不清哪条是顶栏哪条是导航。
 *      手机上顶栏只留「品牌 + 视图切换 + 账号」，三个文字链接收进页脚。
 *   2. 卡片右边被裁 15px —— 100vw 含滚动条宽度，已在上面的容器规则里改掉。
 */
@media (max-width: 1080px) {
  .main { padding-left: 32px; }
}

@media (max-width: 900px) {
  .top { padding: 0; }
  .top__inner {
    height: auto; min-height: 56px;
    padding: 10px 20px;
    flex-wrap: wrap; row-gap: 8px; gap: 12px;
  }
  /* 手机上顶栏只留三样：品牌、视图切换、退出。
     邮箱地址不显示 —— 它是一串没有空格的字符，最小宽度 220px，
     和品牌、切换器加在一起就是 500px，直接把 390 的页面撑宽 110px
     （实测：卡片右边空出 100px，就是因为这个）。 */
  .tophelp { display: none; }
  .top__inner { flex-wrap: nowrap; gap: 10px; }
  .who { margin-left: auto; font-size: 12px; flex: none; }
  .who span { display: none !important; }
  .viewsw { order: 2; flex: none; }
  .who { order: 3; }

  /* account.css 里 .shell 是 align-items:flex-start（横排时让侧栏不被拉高）。
     竖排之后这条会让 .main 按内容宽度收缩 —— 390 宽实测卡片只有 270 宽，
     右边空出 100px。必须顶回 stretch。 */
  .shell { flex-direction: column; align-items: stretch; }
  .main { width: 100%; }
  .side {
    width: 100%; position: static;
    padding: 8px 0 0; border-right: 0;
    border-bottom: 1px solid var(--px-line-100);
  }
  /* 滚动条挂在 .side 上而不是 .tabs 上：
     .tabs 在 account.css 里写死了 overflow:visible，横排后 5 个按钮宽 526px，
     容器只有 460px —— 溢出会一路撑宽 body。挂到父级最稳。 */
  .side { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  /* 手机不横滚、改成换行：横滚容器在 flex 竖排里会把父级撑宽
     （实测 390 宽页面 body 被撑到 500，卡片右边空 110px）。
     5 个页签在 390 里换两行刚好放得下，也不会挡内容。 */
  .side .tabs {
    flex-direction: row; flex-wrap: wrap; gap: 6px;
    overflow: visible; width: 100%;
    padding-bottom: 10px;
  }
  .side .tabs::-webkit-scrollbar { display: none; }
  /* 手机上不显示图标：图标 15px + 间距 6px，5 个页签就是 105px，
     在 350px 的容器里会挤成两行。去掉图标正好一行放下。 */
  .side .tab { width: auto; flex: none; height: 34px; padding: 0 10px; font-size: 12.5px; }
  .side .tab::before { display: none; }
  .side .tab.is-on::after { display: none; }

  .main { padding: 20px 0 48px; }
  .main:has(> .login:not([hidden])),
  .main:has(> .skel-boot) { padding: 20px 0 48px; }
  .pagehead { margin-bottom: 16px; }
  .pagehead__t { font-size: 21px; }
  .pagehead__s { font-size: 12.5px; }
}

@media (max-width: 720px) {
  .card { padding: 22px 20px; border-radius: 16px; margin-bottom: 14px; }
  .idcard { padding: 20px; gap: 14px; }
  .idcard__ava { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }
  .idcard__mail { font-size: 14px; }
  .pools { grid-template-columns: 1fr; gap: 10px; }
  .pool__v { font-size: 28px; }
  .pagehead__t { font-size: 20px; }
  .invite, .upsell { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .main > .updbar, .main > section > *,
  .side, .side .tabs {
    animation: none !important;
  }
  .btn, .card, .pool, .qrow, .top__inner { transition: none !important; }
}