:root {
  color-scheme: dark;
  --bg: #08111f;
  --panel: #101d31;
  --panel-2: #162842;
  --line: rgba(155, 184, 223, .18);
  --text: #f4f8ff;
  --muted: #9fb0c9;
  --cyan: #45d8d0;
  --blue: #6c8cff;
  --gold: #ffca62;
  --danger: #ff8091;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--text); background:
  radial-gradient(circle at 12% 5%, rgba(64, 100, 220, .22), transparent 34rem),
  radial-gradient(circle at 86% 20%, rgba(34, 209, 192, .14), transparent 30rem), var(--bg); }
a { color: inherit; }
.pay-shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 64px; }
.pay-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 42px; }
.pay-brand { font-weight: 800; letter-spacing: .03em; font-size: 19px; }
.pay-brand span { color: var(--cyan); }
.pay-nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.hero { text-align: center; max-width: 760px; margin: 0 auto 22px; }
.hero__eyebrow { color: var(--cyan); font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.hero h1 { font-size: clamp(32px, 5vw, 54px); margin: 14px 0; line-height: 1.08; text-wrap: balance; }
.hero p { color: var(--muted); line-height: 1.8; margin: 0; }
/* 定价页顶部 VIP2 卖点：未查询账号时也能看见专属特权。 */
.vip2-pitch { max-width: 760px; margin: 0 auto 28px; padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(255,202,98,.38); background: linear-gradient(145deg, rgba(255,202,98,.14), rgba(176,96,18,.1)); }
.vip2-pitch__badge { display: inline-block; margin: 0 0 10px; padding: 4px 10px; border-radius: 999px; background: linear-gradient(135deg, #ffca62, #e08a2a); color: #2a1a06; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.vip2-pitch h2 { margin: 0 0 12px; font-size: 22px; color: #ffe7b0; }
.vip2-pitch ul { margin: 0; padding-left: 1.2rem; color: #ffe7b0; line-height: 1.7; font-size: 14px; }
.vip2-pitch li + li { margin-top: 8px; }
.pay-panel { background: linear-gradient(145deg, rgba(21, 39, 65, .96), rgba(11, 23, 41, .96)); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.25); }
.identity { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-bottom: 22px; }
.identity__title { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.identity__player { display: flex; gap: 14px; align-items: center; font-weight: 750; }
.identity__avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #06121c; background: linear-gradient(135deg, var(--cyan), #7ef0ad); }
.identity__meta { display: block; color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 3px; }
.badge { border-radius: 999px; padding: 8px 12px; color: var(--cyan); background: rgba(69,216,208,.1); border: 1px solid rgba(69,216,208,.24); font-size: 12px; }
.lookup { max-width: 580px; margin: 0 auto 24px; }
.field-row { display: flex; gap: 10px; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,12,24,.55); color: var(--text); font: inherit; padding: 13px 14px; outline: none; }
input:focus, textarea:focus { border-color: rgba(69,216,208,.65); box-shadow: 0 0 0 3px rgba(69,216,208,.1); }
.btn { border: 0; border-radius: 12px; padding: 12px 18px; font: inherit; font-weight: 750; cursor: pointer; color: #07111e; background: var(--cyan); transition: transform .15s, filter .15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--ghost { color: var(--text); background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.btn--paypal { color: #071b45; background: #ffc439; }
.btn--wechat { color: white; background: #07c160; }
.plans { display: flex; flex-direction: column; gap: 28px; margin: 22px 0; }
.plans-group__title { margin: 0 0 14px; color: var(--cyan); font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.plans-group__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.plans-group--token .plans-group__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { position: relative; border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: rgba(7,17,32,.44); cursor: pointer; }
.plan.is-selected { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), 0 18px 40px rgba(32,203,196,.09); }
.plan--vip2 { background: linear-gradient(145deg, rgba(86,65,23,.28), rgba(7,17,32,.58)); }
.plan--vip99{border-color:rgba(255,100,124,.42);background:linear-gradient(145deg,rgba(109,30,48,.42),rgba(7,17,32,.62))}.plan--vip99 .badge{color:#ffb3bf;border-color:rgba(255,100,124,.35);background:rgba(255,75,105,.12)}
.plan--token{border-color:rgba(69,216,208,.28);background:linear-gradient(145deg,rgba(18,72,78,.34),rgba(7,17,32,.58))}
.plan--token .badge{color:#9cf3ea;border-color:rgba(69,216,208,.32);background:rgba(69,216,208,.12)}
.plan--token-pack-m{border-color:rgba(108,140,255,.34);background:linear-gradient(145deg,rgba(42,62,128,.36),rgba(7,17,32,.58))}
.plan--token-pack-l{border-color:rgba(255,202,98,.36);background:linear-gradient(145deg,rgba(92,64,18,.36),rgba(7,17,32,.58))}
.plan--token-pack-l .badge{color:#ffd98c;border-color:rgba(255,202,98,.35);background:rgba(255,202,98,.12)}
.plan--token-pack-admin{border-color:rgba(190,145,255,.42);background:linear-gradient(145deg,rgba(89,48,139,.42),rgba(7,17,32,.62))}
.plan--token-pack-admin .badge{color:#dec5ff;border-color:rgba(190,145,255,.4);background:rgba(145,91,214,.16)}
.plan__list-price{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:500;text-decoration:line-through;}
/* 德法俄等长文案允许换行，避免订阅标签挤压商品名或超出卡片。 */
.plan__top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.plan__top .badge{max-width:100%;overflow-wrap:anywhere}
.payment-actions .btn{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.plan__name { font-size: 22px; font-weight: 850; }
.plan__price { font-size: 32px; font-weight: 900; margin: 22px 0 6px; }
.plan__price small { font-size: 14px; color: var(--muted); font-weight: 500; }
.plan__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 8px; }
.plan__channel { padding: 12px 13px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.04); }
.plan__channel span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.plan__channel strong { display: block; font-size: 23px; line-height: 1.1; }
.plan__channel--wechat { border-color: rgba(7,193,96,.26); background: rgba(7,193,96,.07); }
.plan__channel--wechat strong { color: #62e89e; }
.plan__channel--paypal { border-color: rgba(255,196,57,.28); background: rgba(255,196,57,.07); }
.plan__channel--paypal strong { color: #ffd269; }
.plan__period { color: var(--muted); font-size: 12px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 0; color: var(--muted); line-height: 2; }
.plan li::before { content: "✓"; color: var(--cyan); margin-right: 9px; font-weight: 900; }
/* VIP2+ 专属权益：金色底与徽章，和普通条目一眼区分。 */
.plan-benefit--vip2 { margin-top: 8px; padding: 8px 10px 8px 8px; border-radius: 10px; color: #ffe7b0; background: linear-gradient(145deg, rgba(255,202,98,.16), rgba(176,96,18,.12)); border: 1px solid rgba(255,202,98,.38); line-height: 1.55; }
.plan-benefit--vip2::before { content: "★"; color: var(--gold); }
.plan-benefit--vip2 strong { color: #ffe7b0; font-weight: 750; }
.plan-benefit__badge { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #ffca62, #e08a2a); color: #2a1a06; font-size: 11px; font-weight: 800; letter-spacing: .03em; vertical-align: middle; line-height: 1.4; }
.confirm { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 13px; line-height: 1.7; margin: 18px 0; }
.confirm input { width: 17px; height: 17px; flex: 0 0 17px; padding: 0; margin: 4px 0 0; accent-color: var(--cyan); }
/* 勾选框不继承文本输入框的全宽，说明文字与控件保持紧邻。 */
/* 居中反馈弹窗使用浏览器顶层遮罩，避免被页面布局截断。 */
.payment-notice{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:85vh;padding:30px;border:1px solid #667ba7;border-radius:22px;background:linear-gradient(145deg,#20334e,#141f34);color:#edf4ff;box-shadow:0 24px 80px #0008;text-align:center}
.payment-notice::backdrop{background:rgba(5,12,24,.7);backdrop-filter:blur(5px)}
.payment-notice__icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto;border-radius:15px;background:#45d8d022;color:#70eee3;font-size:26px;font-weight:800}
.payment-notice.is-error .payment-notice__icon{background:#ffcb7022;color:#ffcf82}
.payment-notice h2{margin:16px 0 12px;font-size:22px}
.payment-notice p{margin:0 0 24px;font-size:16px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;color:#d5e1f4}
.payment-notice .btn{min-width:140px}
.payment-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.notice { border-radius: 12px; padding: 12px 14px; color: var(--muted); background: rgba(255,255,255,.05); margin: 12px 0; line-height: 1.65; font-size: 13px; }
.notice.is-error { color: #ffdce1; background: rgba(255,65,92,.12); border: 1px solid rgba(255,128,145,.25); }
.notice.is-success { color: #d9fff8; background: rgba(34,210,175,.1); border: 1px solid rgba(69,216,208,.25); }
.notice.notice--vip2 { color: #ffe7b0; border: 1px solid rgba(255,202,98,.38); background: linear-gradient(145deg, rgba(255,202,98,.14), rgba(176,96,18,.1)); font-weight: 700; }
.hidden { display: none !important; }
.order-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 20px; }
.order-title { margin: 0 0 8px; }
.order-status { display: inline-flex; border-radius: 999px; padding: 7px 11px; background: rgba(255,202,98,.12); color: var(--gold); font-size: 12px; font-weight: 800; }
.order-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.order-data { background: rgba(0,0,0,.16); border: 1px solid var(--line); padding: 13px; border-radius: 12px; }
.order-data span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.wechat-box { text-align: center; padding: 24px; border-radius: 20px; border: 1px solid rgba(7,193,96,.32); background: linear-gradient(145deg, rgba(7,193,96,.11), rgba(4,15,26,.44)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.wechat-box__brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; text-align: left; }
.wechat-box__brand h3 { margin: 0 0 4px; font-size: 20px; }
.wechat-box__brand p { margin: 0; color: var(--muted); font-size: 13px; }
.wechat-box__icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, #0ed46d, #05a74f); box-shadow: 0 10px 24px rgba(7,193,96,.24); font-size: 22px; font-weight: 900; }
.wechat-qr-shell { position: relative; width: 252px; height: 252px; margin: 0 auto; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.wechat-qr { width: 220px; height: 220px; overflow: hidden; }
.wechat-qr img, .wechat-qr canvas, .wechat-qr svg { display: block; width: 220px !important; height: 220px !important; }
.wechat-qr__corners::before, .wechat-qr__corners::after { content: ""; position: absolute; inset: -5px; pointer-events: none; border: 2px solid transparent; border-top-color: #18c96b; border-bottom-color: #18c96b; border-radius: 24px; }
.wechat-qr__corners::after { transform: rotate(90deg); }
.wechat-box__amount { margin-top: 19px; color: var(--muted); font-size: 14px; }
.wechat-box__amount strong { color: white; margin-left: 6px; font-size: 21px; }
.wechat-box__waiting { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 12px 0 0; color: #a9dbc1; font-size: 13px; line-height: 1.5; white-space: normal; writing-mode: horizontal-tb; text-orientation: mixed; }
.wechat-box__waiting > span { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; animation: none; }
.wechat-box__waiting-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #16d875; box-shadow: 0 0 0 0 rgba(22,216,117,.45); animation: wechat-waiting 1.7s infinite; font-style: normal; }
@keyframes wechat-waiting { 70% { box-shadow: 0 0 0 8px rgba(22,216,117,0); } 100% { box-shadow: 0 0 0 0 rgba(22,216,117,0); } }
.message { border-left: 2px solid var(--line); padding-left: 12px; margin: 14px 0; color: var(--muted); line-height: 1.6; }
.message strong { color: var(--text); display: block; }
.footer-note { max-width: 780px; margin: 24px auto 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.8; }
.local-test-banner{margin:-22px 0 24px;padding:10px 14px;border:1px solid rgba(255,128,145,.35);border-radius:12px;color:#ffdce1;background:rgba(255,65,92,.12);text-align:center;font-size:13px;font-weight:700}
@media (max-width: 720px) { .plans-group__grid, .plans-group--token .plans-group__grid, .payment-actions, .order-grid { grid-template-columns: 1fr; } .identity { grid-template-columns: 1fr; } .order-list { grid-template-columns: 1fr; } .pay-shell { width: min(100% - 22px, 1080px); padding-top: 20px; } .wechat-box { padding: 20px 12px; } .wechat-qr-shell { width: 232px; height: 232px; padding: 14px; } .wechat-qr, .wechat-qr img, .wechat-qr canvas { width: 204px !important; height: 204px !important; } }