
.buy-body { min-height: 100vh; background: #111214; color: var(--text); }
.buy-head { max-width: 1120px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.buy-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.buy-logo { width: 34px; height: 34px; object-fit: contain; }
.buy-brand span { display: flex; flex-direction: column; line-height: 1.05; }
.buy-brand b { font-size: 15px; letter-spacing: .03em; }
.buy-brand small { margin-top: 4px; color: var(--text-faint); font-size: 10.5px; letter-spacing: .04em; }
.buy-links { display: flex; align-items: center; gap: 16px; }
.buy-link { color: var(--text-dim); font-size: 13px; text-decoration: none; }
.buy-link:hover { color: var(--text); }
.buy-wrap { max-width: 1120px; margin: 0 auto; padding: 26px 24px 70px; }
.buy-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 0 34px; }
.buy-kicker { margin-bottom: 8px; color: #ffd479; font-size: 12px; letter-spacing: .16em; }
.buy-hero h1 { font-size: clamp(28px, 4vw, 46px); letter-spacing: -.03em; }
.buy-sub { max-width: 520px; margin-top: 12px; color: var(--text-dim); font-size: 14px; line-height: 1.7; }
.buy-price { flex: 0 0 auto; display: flex; align-items: baseline; color: #fff; }
.buy-price span { font-size: 22px; color: #ffd479; }
.buy-price b { font-size: 56px; line-height: 1; font-weight: 750; }
.buy-price em { margin-left: 6px; color: var(--text-faint); font-size: 13px; font-style: normal; }
.buy-grid { display: grid; grid-template-columns: minmax(300px, .9fr) minmax(320px, 1.1fr); gap: 18px; align-items: start; }
.buy-card { padding: 20px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--bg-elev); box-shadow: 0 16px 44px rgba(0,0,0,.22); }
.buy-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.buy-card-head h2 { font-size: 16px; }
.buy-card-head span { color: var(--text-faint); font-size: 12px; }
.pay-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 11px; background: rgba(255,255,255,.045); border: 1px solid var(--border-soft); }
.pay-tab { height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--text-dim); font-size: 13px; cursor: pointer; }
.pay-tab.active { background: rgba(255,255,255,.13); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.qr-stage { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 18px 0 4px; }
#qrImage { width: min(260px, 100%); max-height: 390px; object-fit: contain; border-radius: 14px; background: #fff; padding: 10px; }
#payHint { color: var(--text-faint); font-size: 12.5px; }
.buy-form { display: grid; gap: 13px; }
.buy-form label { display: grid; gap: 7px; color: var(--text-dim); font-size: 12.5px; }
.buy-form input, .buy-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 9px; background: #101114; color: var(--text); padding: 10px 12px; font: inherit; font-size: 13.5px; outline: none; }
.buy-form textarea { min-height: 82px; resize: vertical; }
.buy-form input:focus, .buy-form textarea:focus { border-color: rgba(255,212,121,.5); box-shadow: 0 0 0 3px rgba(255,212,121,.08); }
.buy-submit { margin-top: 4px; height: 44px; border: 0; border-radius: 10px; background: #e8e8e8; color: #151515; font-size: 14px; font-weight: 700; cursor: pointer; }
.buy-submit:hover { background: #fff; }
.buy-submit:disabled { opacity: .55; cursor: progress; }
.buy-tip { color: var(--text-faint); font-size: 11.5px; line-height: 1.6; }
.buy-version { max-width: 1120px; margin: 0 auto; padding: 0 24px 30px; color: var(--text-faint); font-size: 11.5px; }
.buy-success { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72);}
.buy-success-card { width: min(420px, 100%); padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: #191a1e; text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.buy-success-card .ok { width: 52px; height: 52px; margin: 0 auto 15px; display: grid; place-items: center; border-radius: 50%; background: rgba(95,185,138,.15); color: #78d29f; font-size: 25px; border: 1px solid rgba(95,185,138,.35); }
.buy-success-card h2 { margin-bottom: 10px; }
.buy-success-card p { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.buy-success-card b { color: #fff; }
.buy-success-card button { margin-top: 18px; height: 40px; padding: 0 22px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; }
@media (max-width: 760px) {
  .buy-head { padding: 15px 14px; }
  .buy-wrap { padding: 14px 14px 60px; }
  .buy-hero { align-items: flex-start; flex-direction: column; padding: 22px 0 24px; }
  .buy-price b { font-size: 44px; }
  .buy-grid { grid-template-columns: 1fr; }
  .buy-card { padding: 16px; border-radius: 14px; }
}
