/* 积分充值
 *
 * 重写自原 recharge.css。原来的问题不在配色而在权重分配：六个套餐等大平铺、
 * 每张一个高饱和度色块、权益是 8px 灰字，而页面上最醒目的元素是一条警告黄的
 * "充值帮助"——在一个要让人掏钱的页面上，最抢眼的东西长得像报错。
 *
 * 这里把 ¥0.01 首充提成头图（它是转化率最高的一档，原先缩在左上角），
 * 套餐改用原版物品图标而非色块，权益文案说人话，并补上到账/有效期/售后
 * 这三条信任信息。
 */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 顶栏 ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.back-to-create {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
}
.back-to-create:hover { border-color: var(--border-hover); color: var(--text); }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand img { width: 26px; height: 26px; image-rendering: pixelated; }
.brand span { font-size: 16px; font-weight: 700; }

.site-head nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.account-chip { display: flex; flex-direction: column; line-height: 1.3; }
.account-chip small { color: var(--text-muted); font-size: 11px; }
.account-chip b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.account-chip.points b { color: var(--accent); }
.site-head nav a {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
}
.site-head nav a:hover { background: var(--surface-hover); color: var(--text); }
.site-head nav button#themeButton {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.site-head nav button#themeButton:hover { border-color: var(--border-hover); color: var(--text); }

main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }

/* ---------- 通用按钮 ---------- */

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.primary-button:hover { background: var(--accent-hover); }
.primary-button.big { width: 100%; padding: 14px 22px; font-size: 15.5px; }

.ghost-button {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ghost-button:hover { border-color: var(--border-hover); color: var(--text); }

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 首充头图 ---------- */

.first-buy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 26px;
  align-items: center;
  margin-bottom: 30px;
  padding: 26px 28px;
  border: 1px solid var(--accent-border);
  border-radius: 18px;
  background:
    radial-gradient(900px 220px at 12% 0%, var(--accent-soft) 0%, transparent 70%),
    var(--surface);
}
.ribbon {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
}
.first-buy h1 {
  margin: 12px 0 6px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
}
.first-buy h1 b { color: var(--accent); font-variant-numeric: tabular-nums; }
.first-buy-copy > p { margin: 0 0 12px; color: var(--text-secondary); font-size: 14.5px; }
.first-buy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.first-buy li {
  position: relative;
  padding-left: 20px;
  color: var(--text-secondary);
  font-size: 13px;
}
.first-buy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.first-buy-buy {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 20px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-sunken);
}
.first-buy-buy .price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: var(--accent);
}
.first-buy-buy .price span { font-size: 20px; font-weight: 600; }
.first-buy-buy .price b { font-size: 46px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.first-buy-buy .price del { margin-left: 6px; color: var(--text-muted); font-size: 14px; }
.first-buy-buy small { color: var(--text-muted); font-size: 11.5px; }

/* ---------- 套餐 ---------- */

.packages > header { margin-bottom: 16px; }
.packages h2 { margin: 0; font-size: 19px; font-weight: 700; }
.packages > header p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }

/* 五档一字排开，正好读成 进阶→铁→金→钻→下界之星 的阶梯。
   用 auto-fit 会在这个宽度下折成 4+1，把最高档单独甩到第二行。 */
.package-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1080px) { .package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .package-grid { grid-template-columns: 1fr; } }

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 15px 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.package-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}
/* 主推档不靠更饱和的颜色，而靠描边、底色和角标做区分 */
/* ---------------------------------------------------------- 每日签到卡片 */

.checkin-card {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 16px 20px;
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  background: linear-gradient(120deg, var(--accent-soft), var(--surface) 65%);
}

.checkin-copy { flex: 1; min-width: 0; display: grid; gap: 2px }
.checkin-tag { color: var(--accent); font-size: 11px; font-weight: 700 }
.checkin-copy b { font-size: 17px }
.checkin-copy small { color: var(--text-muted); font-size: 12px }

.checkin-week { display: flex; gap: 5px }
.checkin-week i {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.checkin-week i.on { border-color: var(--accent); background: var(--accent) }

.checkin-card.is-done { background: var(--surface) }
.checkin-card.is-capped { border-color: var(--border); background: var(--surface) }
.checkin-card button:disabled { filter: grayscale(.6); opacity: .55; cursor: not-allowed }

/* ---------------------------------------------------------- 纯积分档位 */

.point-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.point-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
}

.point-card.featured { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring) }
.point-price { color: var(--text); font-size: 13px }
.point-price b { font-size: 28px; line-height: 1.1 }
.point-points { color: var(--accent); font-weight: 700 }
.point-bonus { color: var(--text-muted); font-size: 11px; min-height: 15px }
.point-card button {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
.point-card button:hover { background: var(--accent); color: var(--on-accent) }

/* ---------- 兑换码 ---------- */

.redeem-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 15px 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
}
.redeem-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}
.redeem-card h3 { margin: 0; font-size: 16px; }
.redeem-card > small { color: var(--text-muted); font-size: 12px; }
.redeem-card form { display: grid; gap: 8px; margin-top: auto; padding-top: 28px; }
.redeem-card label { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.redeem-card input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: 0;
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  text-transform: uppercase;
}
.redeem-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.redeem-card form button {
  padding: 9px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
}
.redeem-card form button:disabled { opacity: .6; cursor: wait; }
.redeem-result { min-height: 38px; margin: 8px 0 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.redeem-result[data-state="success"] { color: var(--accent); }
.redeem-result[data-state="error"] { color: var(--danger, #b94a48); }

.package-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 90px);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.package-badge {
  position: absolute;
  top: -10px;
  left: 18px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
}

.package-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  padding: 4px;
  border-radius: 10px;
  background: var(--surface-hover);
  image-rendering: pixelated;
}
.package-card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.package-card > small { color: var(--text-muted); font-size: 12px; }

.package-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: 10px 0 2px;
}
.package-price span { font-size: 16px; font-weight: 600; }
.package-price b { font-size: 32px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.package-price del { margin-left: 6px; color: var(--text-muted); font-size: 13px; }

.package-points {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 差价/限购的说明：字比正文小一号，压在价格下面，不去抢档位卖点的位置 */
.package-note {
  margin: -6px 0 12px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.package-note.is-locked { color: var(--text-secondary); }

/* 已经拥有或不能降级的档：整卡压暗，按钮不可点，但内容还看得清 */
.package-card.is-locked { opacity: .62; }
.package-card.is-locked:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.package-card > button[disabled] {
  color: var(--text-muted);
  cursor: not-allowed;
}
.package-card > button[disabled]:hover {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-muted);
}

.package-benefits {
  display: grid;
  gap: 5px;
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.package-benefits span {
  position: relative;
  padding-left: 17px;
  color: var(--text-secondary);
  font-size: 12.5px;
  line-height: 1.5;
}
.package-benefits span::before {
  content: "·";
  position: absolute;
  left: 5px;
  color: var(--accent);
  font-weight: 700;
}

.package-card > button {
  margin-top: auto;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.package-card > button:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.package-card.featured > button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.package-card.featured > button:hover { background: var(--accent-hover); }

/* ---------- 信任信息 ---------- */

.assurance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.assurance article { display: grid; gap: 3px; }
.assurance b { font-size: 13.5px; }
.assurance span { color: var(--text-muted); font-size: 12.5px; }

/* ---------- 登录态 ---------- */

.login-required { display: grid; place-items: center; min-height: 76vh; padding: 24px; }
.login-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(460px, 100%);
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.login-card > img { width: 56px; image-rendering: pixelated; }
.login-card h1 { margin: 4px 0 0; font-size: 21px; }
.login-card > p { margin: 0 0 10px; color: var(--text-muted); font-size: 13.5px; }

/* ---------- 支付弹窗 ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: var(--overlay);
}
.dialog-card {
  width: min(460px, 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}
.dialog-card > header {
  display: flex;
  align-items: flex-start;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
}
.dialog-card > header small { color: var(--text-muted); font-size: 12px; }
.dialog-card > header h2 { margin: 2px 0 0; font-size: 17px; }
.dialog-card > header button {
  margin-left: auto;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-muted);
  font-size: 19px;
  cursor: pointer;
}
.dialog-card > header button:hover { background: var(--surface-hover); color: var(--text); }

.order-summary { display: grid; gap: 1px; padding: 16px 20px 0; }
.order-summary div { display: flex; justify-content: space-between; padding: 7px 0; }
.order-summary span { color: var(--text-muted); font-size: 13px; }
.order-summary b { font-size: 14px; font-variant-numeric: tabular-nums; }
.manual-note { margin: 12px 20px; color: var(--text-muted); font-size: 11.5px; line-height: 1.6; }

.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 0 20px; }
.payment-method {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 15px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.payment-method:hover { border-color: var(--accent); background: var(--accent-soft); }
.payment-method:disabled { opacity: .55; cursor: default; }
.payment-method strong { font-size: 13.5px; }
.payment-method small { color: var(--text-muted); font-size: 11px; }
.method-icon { width: 34px; height: 34px; }
.method-icon svg { width: 100%; height: 100%; fill: var(--accent); }
.wechat-method .wechat-second { opacity: .62; }
.wechat-method .wechat-eye { fill: var(--surface); }
.alipay-icon svg { fill: var(--info); }
.alipay-icon text { fill: #fff; font-size: 30px; font-weight: 700; font-family: var(--font); }

.wechat-qr-panel { display: grid; justify-items: center; gap: 5px; padding: 6px 20px 0; }
.wechat-qr-frame {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.wechat-qr-frame img { display: block; width: 190px; height: 190px; }
.wechat-qr-panel b { font-size: 13.5px; }
.wechat-qr-panel span { color: var(--text-muted); font-size: 11.5px; }

.payment-status { margin: 12px 20px 0; font-size: 12.5px; }
.payment-status[data-state="pending"] { color: var(--warn); }
.payment-status[data-state="success"] { color: var(--success); }
.payment-status[data-state="error"] { color: var(--danger); }
.dialog-card > footer { display: flex; justify-content: flex-end; padding: 16px 20px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 80;
  padding: 11px 20px;
  border-radius: 11px;
  background: var(--text);
  color: var(--page);
  font-size: 13.5px;
  box-shadow: var(--shadow-pop);
}

/* ---------- 响应式 ---------- */

@media (max-width: 880px) {
  .first-buy { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .first-buy h1 { font-size: 32px; }
}

@media (max-width: 620px) {
  main { padding: 18px 14px 44px; }
  .site-head { padding: 0 12px; gap: 8px; }
  .site-head .brand span { display: none; }
  .account-chip { display: none; }
  .account-chip.points { display: flex; }
  .payment-methods { grid-template-columns: 1fr; }
}

/* 手机端唤起微信的那颗按钮。自动跳转有时会被浏览器拦下来（异步之后就不算用户
   手势了），所以永远留一颗能点的，别让人卡在一张扫不了的二维码前面。 */
.wechat-open-app {
  display: block; margin: 0 0 14px; padding: 13px 18px; border-radius: 12px;
  background: #07c160; color: #fff; font-weight: 600; font-size: 16px;
  text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(7, 193, 96, .28);
}
.wechat-open-app:active { transform: translateY(1px) }