/* ============================================================
   积分套餐目录（个人 / 团队）· v2 整页重设计
   ------------------------------------------------------------
   THESIS: 充值页是首页同一张创作工作台的延伸——用户在同一张深石墨
   桌面"为创作充能"，拒绝"五张等宽彩色卡片 + 亮色浮标徽章"的通用
   SaaS 价目表形态。
   OWN-WORLD: #0b0e10 深石墨底，#141619 卡片 + 1px 发丝边线 + 16px
   圆角 + 顶部 0.5px 内嵌高光；价格与积分用 tabular-nums 白色粗体，
   积分规格取首页点数的淡紫 #eee8ff；紫 #9b6cff 只出现在选中态、
   焦点与弱状态提示；白 chip #f2f2f0 只承担"推荐徽章"与"已选卡片
   的购买按钮"两件事。
   STORY: 用户从首页"购买积分"进来，切换个人/团队，按"实际到账积分
   ÷ 能创作什么"比较各档，在选中的卡片上直接下单扫码。
   FIRST VIEWPORT: 62px 首页式顶栏；居中 10px 眉题 + 展示级标题
   （muted ✦ 前缀）；个人/团队分段切换；其下平铺对比卡片，推荐档是
   唯一带白色徽章与白色按钮的卡片。
   FORM: 既有目录对比结构保留（五档并排），视觉语言整体替换为首页
   workbench 语言；brief 已固定参考对象（首页），未跑 concept-seed。
   DOM/JS 契约：#packageList、.package-card[data-package-id]、
   .package-buy[data-purchase-action]、各状态类全部保持不变。
   ============================================================ */

:root {
  --pp-bg: #0b0e10;
  --pp-card: #141619;
  --pp-card-hover: #181b1e;
  --pp-inset: #0e1013;
  --pp-line: rgba(255, 255, 255, 0.1);
  --pp-line-strong: rgba(255, 255, 255, 0.28);
  --pp-text: #f6f7f8;
  --pp-muted: #b0b4bc;
  --pp-dim: #7d828b;
  --pp-violet: #9b6cff;
  --pp-violet-soft: rgba(155, 108, 255, 0.12);
  --pp-violet-line: rgba(155, 108, 255, 0.34);
  --pp-violet-pale: #eee8ff;
  --pp-success: #83d4aa;
  --pp-chip: #f2f2f0;
  --pp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 页面底：与首页同源的深石墨 + 顶部一抹白光 ---- */
.purchase-page.purchase-personal-mode {
  background: var(--pp-bg);
  color: var(--pp-text);
}

.purchase-page.purchase-personal-mode .bg-glow {
  background:
    radial-gradient(680px 380px at 50% -140px, rgba(255, 255, 255, 0.055), transparent 70%),
    var(--pp-bg);
}

/* ---- 顶栏：首页 header 的语言（solid 深底 + 发丝分隔线） ---- */
.purchase-page.purchase-personal-mode .purchase-topbar {
  min-height: 62px;
  padding: 0 32px;
  background: #0a0b0c;
  border-color: rgba(255, 255, 255, 0.07);
  backdrop-filter: none;
  box-shadow: none;
}

.purchase-page.purchase-personal-mode .purchase-brand {
  gap: 9px;
}

.purchase-page.purchase-personal-mode .purchase-brand-mark {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #232426;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  color: var(--pp-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.purchase-page.purchase-personal-mode .purchase-brand-name {
  color: var(--pp-text);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.purchase-page.purchase-personal-mode .purchase-login-btn,
.purchase-page.purchase-personal-mode .purchase-back {
  height: 40px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #121618;
  color: #e6e9ee;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.purchase-page.purchase-personal-mode .purchase-login-btn:hover,
.purchase-page.purchase-personal-mode .purchase-back:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: #181d20;
  color: #fff;
  transform: none;
}

/* ---- 主区：无框工作台，内容直接落在页面底上 ---- */
.purchase-page.purchase-personal-mode .purchase-shell {
  display: block;
  width: min(1620px, calc(100% - 48px));
  margin: 40px auto 64px;
}

.purchase-page.purchase-personal-mode .purchase-main {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ---- 标题区：首页首屏的"眉题 + 展示级大标题"节奏 ---- */
.purchase-page.purchase-personal-mode .purchase-heading {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  max-width: 980px;
  margin: 6px auto 22px;
  text-align: center;
}

.purchase-page.purchase-personal-mode .purchase-heading > div:first-child {
  max-width: 760px;
}

.purchase-page.purchase-personal-mode .purchase-heading .purchase-kicker {
  display: block;
  color: var(--pp-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.purchase-page.purchase-personal-mode .purchase-heading h1 {
  margin-top: 10px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.14;
  color: #f7f7f9;
}

.purchase-page.purchase-personal-mode .purchase-heading h1 > span {
  display: inline;
  margin-right: 8px;
  color: var(--pp-dim);
  font-size: 0.62em;
  font-weight: 400;
  vertical-align: 0.16em;
}

.purchase-page.purchase-personal-mode .purchase-required {
  flex: 0 0 auto;
  max-width: 260px;
  margin-top: 4px;
  padding: 9px 13px;
  border: 1px solid var(--pp-violet-line);
  border-radius: 10px;
  background: var(--pp-violet-soft);
  color: #d8caff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
  text-align: left;
}

/* ---- 账户类型：首页分段切换控件的语言 ---- */
.purchase-page.purchase-personal-mode .purchase-account-switch {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  margin: 0 auto 26px;
}

.purchase-page.purchase-personal-mode .purchase-account-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #929398;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.purchase-page.purchase-personal-mode .purchase-account-option > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  border-radius: 0;
}

.purchase-page.purchase-personal-mode .purchase-account-option:hover {
  color: #d7d9dd;
}

.purchase-page.purchase-personal-mode .purchase-account-option.active {
  border-color: rgba(255, 255, 255, 0.14);
  background: #262626;
  color: #fff;
  font-weight: 750;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}

/* ---- 团队 / 订单状态提示：沿用首页语义色，仅居中 ---- */
.purchase-page.purchase-personal-mode .purchase-team-notice,
.purchase-page.purchase-personal-mode .purchase-order-status {
  width: 100%;
  max-width: 840px;
  margin: 0 auto 18px;
}

/* ---- 套餐对比网格 ---- */
.purchase-page.purchase-personal-mode .purchase-packages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.purchase-page.purchase-team-mode .purchase-packages {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---- 套餐卡片：平铺石墨面板，选中态用紫，推荐档用白 ---- */
.purchase-page.purchase-personal-mode .package-card--personal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: 22px 20px 20px;
  border: 1px solid var(--pp-line);
  border-radius: 16px;
  background: var(--pp-card);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.04);
  color: var(--pp-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.purchase-page.purchase-personal-mode .package-card--personal:hover,
.purchase-page.purchase-personal-mode .package-card--personal:focus-visible {
  border-color: var(--pp-line-strong);
  background: var(--pp-card-hover);
}

.purchase-page.purchase-personal-mode .package-card--personal.active {
  border-color: rgba(167, 139, 250, 0.55);
  background: #161821;
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(139, 92, 246, 0.16);
}

.purchase-page.purchase-personal-mode .package-card--personal.is-unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}

/* 徽章：钉在卡片顶边的"标签页"，绝对定位不占流式空间，
   保证五张卡片的名称行严格对齐。推荐 = 白 chip（全页唯一的"主角"标记），
   特惠 = 紫弱 chip。 */
.purchase-page.purchase-personal-mode .package-badge {
  position: absolute;
  top: -13px;
  left: 20px;
  min-height: 26px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  white-space: nowrap;
  z-index: 1;
}

.purchase-page.purchase-personal-mode .package-badge.is-recommended {
  background: var(--pp-chip);
  color: #0c0d0d;
}

.purchase-page.purchase-personal-mode .package-badge.is-trial {
  background: var(--pp-violet-soft);
  border-color: var(--pp-violet-line);
  color: #cbbdf2;
}

/* 名称：徽章已绝对定位不占空间，所有卡片名称行严格对齐 */
.purchase-page.purchase-personal-mode .package-name {
  margin: 0 0 16px;
  color: #f7f7f9;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* 价格行 */
.purchase-page.purchase-personal-mode .package-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.purchase-page.purchase-personal-mode .package-amount {
  font-size: clamp(30px, 2.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #f7f7f9;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.purchase-page.purchase-personal-mode .package-limit {
  flex: 0 0 auto;
  margin-bottom: 4px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--pp-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* 对比价 / 备注 */
.purchase-page.purchase-personal-mode .package-compare {
  min-height: 19px;
  margin-top: 10px;
  color: var(--pp-dim);
  font-size: 13px;
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.purchase-page.purchase-personal-mode .package-compare.is-note {
  text-decoration: none;
}

/* 实际到账积分：首页"本次消耗 N 积分"的规格语言 */
.purchase-page.purchase-personal-mode .package-points-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.purchase-page.purchase-personal-mode .package-points-label {
  color: var(--pp-dim);
  font-size: 11px;
  font-weight: 700;
}

.purchase-page.purchase-personal-mode .package-points {
  margin: 0;
  color: var(--pp-violet-pale);
  font-size: clamp(23px, 2.1vw, 29px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 购买 / 赠送积分拆分 */
.purchase-page.purchase-personal-mode .package-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: var(--pp-inset);
}

.purchase-page.purchase-personal-mode .package-split > span {
  display: grid;
  gap: 5px;
  padding: 11px 12px 10px;
}

.purchase-page.purchase-personal-mode .package-split > span + span {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.purchase-page.purchase-personal-mode .package-split small {
  color: var(--pp-dim);
  font-size: 11px;
}

.purchase-page.purchase-personal-mode .package-split b {
  color: #edf1f1;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.purchase-page.purchase-personal-mode .package-split b.bonus {
  color: var(--pp-success);
}

/* 权益列表 */
.purchase-page.purchase-personal-mode .package-benefits {
  display: grid;
  gap: 9px;
  margin: 20px 0 0;
  padding: 16px 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
}

.purchase-page.purchase-personal-mode .package-benefits li {
  position: relative;
  padding-left: 14px;
  color: var(--pp-muted);
  font-size: 12px;
  line-height: 1.5;
}

.purchase-page.purchase-personal-mode .package-benefits li::before {
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(155, 108, 255, 0.5);
  content: '';
}

.purchase-page.purchase-personal-mode .package-card--personal.active .package-benefits li::before {
  background: var(--pp-violet);
}

/* 购买按钮：默认 = 首页次级 chip；选中卡片 = 首页白色付费 chip */
.purchase-page.purchase-personal-mode .package-buy {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #1c1e21;
  color: var(--pp-text);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.purchase-page.purchase-personal-mode .package-buy:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.32);
  background: #26282b;
}

.purchase-page.purchase-personal-mode .package-card--personal.active .package-buy {
  border-color: transparent;
  background: var(--pp-chip);
  color: #0c0d0d;
}

.purchase-page.purchase-personal-mode .package-card--personal.active .package-buy:hover:not(:disabled) {
  background: #fff;
}

.purchase-page.purchase-personal-mode .package-buy:disabled {
  cursor: not-allowed;
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.07);
  background: #17191c;
  color: #5f646c;
}

/* ---- 网格下方的积分规格说明 ---- */
.purchase-page.purchase-personal-mode .purchase-footnote {
  max-width: 760px;
  margin: 26px auto 0;
  color: var(--pp-dim);
  font-size: 12px;
  line-height: 1.9;
  text-align: center;
}

/* ---- 一次编排好的入场：卡片依次浮现，其余保持安静 ---- */
@media (prefers-reduced-motion: no-preference) {
  .purchase-page.purchase-personal-mode .package-card--personal {
    animation: pp-card-in 0.55s var(--pp-ease) backwards;
  }

  .purchase-page.purchase-personal-mode .package-card--personal:nth-child(1) { animation-delay: 0.02s; }
  .purchase-page.purchase-personal-mode .package-card--personal:nth-child(2) { animation-delay: 0.08s; }
  .purchase-page.purchase-personal-mode .package-card--personal:nth-child(3) { animation-delay: 0.14s; }
  .purchase-page.purchase-personal-mode .package-card--personal:nth-child(4) { animation-delay: 0.2s; }
  .purchase-page.purchase-personal-mode .package-card--personal:nth-child(5) { animation-delay: 0.26s; }

  @keyframes pp-card-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}

/* ---- 响应式：五档 → 三档 → 两档 → 单列 ---- */
@media (max-width: 1359px) {
  .purchase-page.purchase-personal-mode .purchase-packages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .purchase-page.purchase-team-mode .purchase-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .purchase-page.purchase-personal-mode .purchase-shell {
    width: min(100% - 28px, 760px);
    margin-top: 28px;
    margin-bottom: 44px;
  }

  .purchase-page.purchase-personal-mode .purchase-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .purchase-page.purchase-team-mode .purchase-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .purchase-page.purchase-personal-mode .package-card--personal {
    min-height: 500px;
    padding: 20px 16px 16px;
  }
}

@media (max-width: 540px) {
  .purchase-page.purchase-personal-mode .purchase-topbar {
    padding: 0 16px;
  }

  .purchase-page.purchase-personal-mode .purchase-brand-name {
    display: none;
  }

  .purchase-page.purchase-personal-mode .purchase-shell {
    width: min(100% - 20px, 520px);
    margin-top: 20px;
    margin-bottom: 36px;
  }

  .purchase-page.purchase-personal-mode .purchase-heading h1 {
    font-size: 26px;
  }

  .purchase-page.purchase-personal-mode .purchase-heading {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .purchase-page.purchase-personal-mode .purchase-required {
    max-width: 100%;
    text-align: center;
  }

  .purchase-page.purchase-personal-mode .purchase-account-switch {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .purchase-page.purchase-personal-mode .purchase-account-option {
    flex: 1;
    padding: 0 10px;
  }

  .purchase-page.purchase-personal-mode .purchase-packages {
    grid-template-columns: 1fr;
  }

  .purchase-page.purchase-team-mode .purchase-packages {
    grid-template-columns: 1fr;
  }

  .purchase-page.purchase-personal-mode .package-card--personal {
    min-height: 0;
  }

  .purchase-page.purchase-personal-mode .purchase-footnote {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .purchase-page.purchase-personal-mode .package-card--personal,
  .purchase-page.purchase-personal-mode .purchase-account-option,
  .purchase-page.purchase-personal-mode .package-buy {
    animation: none;
    transition: none;
  }
}