/* ── 我的 · 个人中心 ── */

.page {
  min-height: 100vh;
  background: var(--bg);
}

/* ── 顶栏 ── */
.me-bar {
  height: 13.867vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5.867vw;
}

.me-bar-t {
  font-size: 4.533vw;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}

.icon-btn {
  width: 10.133vw;
  height: 10.133vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.more-dots {
  display: flex;
  gap: 1.067vw;
  align-items: center;
}

.more-dots view {
  width: 1.067vw;
  height: 1.067vw;
  border-radius: 50%;
  background: var(--ink);
}

/* ── 身份行 ── */
.me-id {
  display: flex;
  align-items: center;
  gap: 4vw;
  padding: 2.133vw 6.4vw 5.867vw;
}

.me-ava {
  width: 16.533vw;
  height: 16.533vw;
  border-radius: 50%;
  background: var(--avatar);
  flex: 0 0 auto;
}

.me-name {
  font-size: 5.067vw;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}

.me-usub {
  font-size: 3.333vw;
  color: var(--meta);
  margin-top: 1.6vw;
}

/* ── 会员卡 ── */
.mcard {
  margin: 0 5.333vw;
  border-radius: 4.8vw;
  padding: 5.333vw;
  position: relative;
  overflow: hidden;
}

.mcard.vip {
  background: var(--vip-bg);
  box-shadow: inset 0 0.267vw 0 var(--vip-line), 0 0 0 0.267vw var(--vip-line);
}

.mcard.free {
  background: var(--surface);
  border: 0.133vw solid var(--line);
}

/* VIP 背景光晕 */
.mc-glow {
  position: absolute;
  top: -13.333vw;
  right: -10.667vw;
  width: 48vw;
  height: 48vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,178,78,.22), transparent 70%);
}

/* 卡顶行 */
.mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.mc-kick {
  display: flex;
  align-items: center;
  gap: 2.133vw;
  font-size: 2.933vw;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--aha-bright);
  white-space: nowrap;
}

.mc-kick-logo {
  width: 4.8vw;
  height: 4.8vw;
  flex: 0 0 auto;
}

.mc-plan-tag {
  font-size: 2.933vw;
  font-weight: 700;
  letter-spacing: .04em;
  color: #1B1B1A;
  background: var(--aha-bright);
  padding: 1.067vw 2.933vw;
  border-radius: 5.333vw;
}

/* VIP 套餐名 */
.mc-plan {
  font-family: 'Noto Serif SC', 'STSong', Georgia, serif;
  font-weight: 700;
  font-size: 5.867vw;
  color: var(--vip-ink);
  margin-top: 4.8vw;
}

/* VIP 有效期 */
.mc-meta {
  font-size: 3.333vw;
  color: var(--vip-sub);
  margin-top: 2.4vw;
  letter-spacing: .01em;
}

/* VIP 底部行 */
.mc-foot {
  display: flex;
  align-items: center;
  gap: 4.267vw;
  margin-top: 4.8vw;
}

.mc-bar {
  flex: 1;
  height: 1.067vw;
  border-radius: 0.533vw;
  background: rgba(255,255,255,.13);
  position: relative;
  overflow: hidden;
}

.mc-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--aha-bright);
  border-radius: 0.533vw;
}

.mc-renew {
  font-size: 3.467vw;
  font-weight: 600;
  color: var(--aha-bright);
  border: 0.267vw solid var(--vip-line);
  padding: 1.867vw 4.267vw;
  border-radius: 5.333vw;
  flex: 0 0 auto;
}

/* 免费卡 */
.mc-free-t {
  font-family: 'Noto Serif SC', 'STSong', Georgia, serif;
  font-weight: 700;
  font-size: 5.067vw;
  color: var(--ink);
  margin-top: 3.733vw;
}

.mc-free-s {
  font-size: 3.333vw;
  color: var(--sub);
  margin-top: 2.133vw;
  line-height: 1.7;
}

.mc-free-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--aha-bright);
  color: #1B1B1A;
  font-size: 3.867vw;
  font-weight: 700;
  padding: 3.467vw;
  border-radius: 3.467vw;
  margin-top: 4.8vw;
  box-shadow: 0 2.667vw 6.4vw -2.667vw var(--aha-bright);
}

/* ── 数据统计 2×2（用 grid，避免 calc 混用 %+rpx 在 iOS 真机上垮成一列）── */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2vw;
  padding: 5.333vw 5.333vw 1.067vw;
}

.stat {
  box-sizing: border-box;
  background: var(--surface, #fff);
  border: 0.133vw solid var(--line, #ECEAE6);
  border-radius: 3.733vw;
  padding: 4vw 4.267vw;
}

.stat .n {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 7.2vw;
  color: var(--ink);
  letter-spacing: .01em;
  line-height: 1;
}

.stat .n.gold {
  color: var(--aha);
}

.n-unit {
  font-style: normal;
  font-family: 'Noto Sans SC', 'PingFang SC', sans-serif;
  font-size: 3.333vw;
  font-weight: 500;
  color: var(--meta);
  margin-left: 1.067vw;
}

.stat .l {
  font-size: 3.2vw;
  color: var(--sub);
  margin-top: 2.4vw;
  letter-spacing: .01em;
}

/* ── 分组标题 ── */
.me-sec {
  font-size: 3.2vw;
  font-weight: 600;
  color: var(--meta);
  letter-spacing: .1em;
  padding: 6.4vw 6.933vw 2.933vw;
}

/* ── 列表 ── */
.me-list {
  margin: 0 5.333vw;
  background: var(--surface);
  border: 0.133vw solid var(--line);
  border-radius: 3.733vw;
  overflow: hidden;
}

.me-row {
  display: flex;
  align-items: center;
  gap: 3.467vw;
  padding: 3.733vw 4vw;
  border-bottom: 0.133vw solid var(--line-soft);
}

.me-row:last-child {
  border-bottom: none;
}

/* 图标盒 */
.me-row .ic {
  width: 8.267vw;
  height: 8.267vw;
  border-radius: 2.4vw;
  background: var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* 行图标 · SVG 背景图 */
.row-icon {
  width: 4.8vw;
  height: 4.8vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-clock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.2'/%3E%3Cpath d='M12 7.4V12l3.3 1.9'/%3E%3C/svg%3E");
}

.icon-doc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.8 3.6h6.4L17.4 7.8V20a.6.6 0 0 1-.6.6H6.8a.6.6 0 0 1-.6-.6V4.2a.6.6 0 0 1 .6-.6z'/%3E%3Cpath d='M13 3.8v4.2h4.2M9 13h6M9 16.4h4'/%3E%3C/svg%3E");
}

.icon-bookmark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4.2h11a.6.6 0 0 1 .6.6v15.2l-6.1-4-6.1 4V4.8a.6.6 0 0 1 .6-.6z'/%3E%3C/svg%3E");
}

.icon-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4S4.6 15.7 4.6 10.2A3.9 3.9 0 0 1 12 8.1a3.9 3.9 0 0 1 7.4 2.1c0 5.5-7.4 10.2-7.4 10.2z'/%3E%3C/svg%3E");
}

.icon-refresh {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 11.6a6.9 6.9 0 0 1 11.4-4.3'/%3E%3Cpath d='M16.8 3.8v3.6h-3.6'/%3E%3Cpath d='M18.8 12.4a6.9 6.9 0 0 1-11.4 4.3'/%3E%3Cpath d='M7.2 20.2v-3.6h3.6'/%3E%3C/svg%3E");
}

.icon-download {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8v10.4'/%3E%3Cpath d='M7.8 10.2 12 14.4l4.2-4.2'/%3E%3Cpath d='M5.2 18.8h13.6'/%3E%3C/svg%3E");
}

.icon-moon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.3A8 8 0 0 1 9.7 4 7 7 0 1 0 20 14.3z'/%3E%3C/svg%3E");
}

.icon-help {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M9.8 9.5a2.3 2.3 0 0 1 4.3 1.1c0 1.5-1.9 1.8-1.9 3'/%3E%3Ccircle cx='12' cy='16.3' r='.7' fill='%236B6B68' stroke='none'/%3E%3C/svg%3E");
}

.icon-info {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B68' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M12 11v5.2'/%3E%3Ccircle cx='12' cy='7.8' r='.7' fill='%236B6B68' stroke='none'/%3E%3C/svg%3E");
}

.me-row .lab {
  flex: 1;
  font-size: 3.867vw;
  font-weight: 500;
  color: var(--ink);
}

.me-row .val {
  font-size: 3.467vw;
  color: var(--meta);
  margin-right: 0.533vw;
}

.me-row .chev {
  color: var(--meta);
  font-size: 4.8vw;
  line-height: 1;
}

/* 切换开关 */
.tog {
  width: 11.733vw;
  height: 6.933vw;
  border-radius: 3.467vw;
  background: var(--line);
  position: relative;
  flex: 0 0 auto;
  transition: background .2s;
}

.tog.on {
  background: var(--aha-bright);
}

.tog-thumb {
  position: absolute;
  top: 0.8vw;
  left: 0.8vw;
  width: 5.333vw;
  height: 5.333vw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.267vw 0.8vw rgba(0,0,0,.25);
  transition: left .2s;
}

.tog.on .tog-thumb {
  left: 5.6vw;
}

/* ── 底部空白 ── */
.me-pad {
  height: 7.467vw;
}

/* 头像授权按钮 + 昵称编辑 */
.me-ava-btn {
  padding: 0; margin: 0; line-height: 0; background: transparent;
  width: 16.533vw; height: 16.533vw; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
}
.me-ava-btn::after { border: none; }
.me-ava-btn .me-ava { width: 16.533vw; height: 16.533vw; display: block; }
.me-ava-empty { display: flex; align-items: center; justify-content: center; font-size: 3.2vw; color: var(--meta, #9C9C97); background: var(--avatar, #E7E3DB); }
.me-name-input { font-size: 5.067vw; font-weight: 700; color: var(--ink, #1B1B1A); min-width: 32vw; }

@media (max-width: 1199px) {
  .me-bar,
  .me-id {
    padding-left: var(--h5-pad);
    padding-right: var(--h5-pad);
  }

  .mcard,
  .me-list {
    margin-left: var(--h5-pad);
    margin-right: var(--h5-pad);
    border-radius: var(--h5-card-radius);
  }

  .mcard {
    padding: clamp(18px, 5vw, 24px);
  }

  .stats {
    padding-left: var(--h5-pad);
    padding-right: var(--h5-pad);
    gap: var(--h5-gap);
  }

  .stat {
    border-radius: clamp(14px, 3.6vw, 18px);
    padding: clamp(15px, 4.2vw, 20px);
  }

  .me-sec {
    padding-left: var(--h5-pad);
    padding-right: var(--h5-pad);
  }

  .me-pad {
    height: calc(86px + var(--h5-safe-bottom));
  }
}