:root {
  --page-scale: 1;
  color-scheme: dark;
  font-family: "PingFang SC", "PingFangSC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow-x: hidden; background: #05030b; color: #fff; }
button { font: inherit; }

#page-viewport {
  position: relative;
  width: calc(780px * var(--page-scale));
  max-width: 100vw;
  height: calc(1741px * var(--page-scale));
  margin: 0;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0 auto auto 0;
  width: 780px;
  height: 1741px;
  overflow: hidden;
  transform: scale(var(--page-scale));
  transform-origin: top left;
  background: #05030b;
}
.screen[hidden] { display: none; }
.background { position: absolute; inset: 0; width: 780px; height: 1741px; pointer-events: none; user-select: none; }

.page-title {
  position: absolute;
  top: 132px;
  left: 0;
  width: 780px;
  margin: 0;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  text-align: center;
}

.method-card, .payment-card {
  position: absolute;
  left: 32px;
  width: 716px;
  border: 1px solid #fff;
  border-radius: 24px;
  backdrop-filter: blur(2px);
}

.method-card {
  top: 236px;
  height: 448px;
  background: linear-gradient(117.778622deg, rgba(255, 255, 255, .2) 11.03%, rgba(7, 8, 13, .2) 98.51%);
}

.payment-method {
  position: absolute;
  left: 0;
  display: block;
  width: 714px;
  height: 128px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.payment-method:nth-child(1) { top: 0; }
.payment-method:nth-child(2) { top: 128px; }
.payment-method:nth-child(3) { top: 256px; }
.payment-method > span:not(.radio-mark):not(.method-tron-mark) {
  position: absolute;
  top: 76px;
  left: 136px;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  white-space: nowrap;
}
.method-icon { position: absolute; top: 64px; left: 32px; width: 64px; height: 64px; }
.radio-mark { position: absolute; top: 80px; right: 32px; width: 32px; height: 32px; }
.radio-circle, .radio-check { position: absolute; display: block; }
.radio-circle { inset: 0; width: 32px; height: 32px; }
.radio-check { top: 10px; left: 7px; width: 18px; height: 13px; }
.method-tron-mark {
  position: absolute;
  top: 60px;
  left: 30.67px;
  display: block;
  width: 68px;
  height: 68px;
  overflow: hidden;
  -webkit-mask: url('./public/assets/method-tron-mask.svg') 1.333px 1.333px / 64px 64px no-repeat;
  mask: url('./public/assets/method-tron-mask.svg') 1.333px 1.333px / 64px 64px no-repeat;
}
.method-tron-mark img, .tron-mark img, .qr-crop img { position: absolute; display: block; max-width: none; pointer-events: none; }
.method-tron-mark img { top: -558.82%; left: -641.18%; width: 1529.41%; height: 3364.71%; }
.payment-method:focus-visible, .back-button:focus-visible, .copy-button:focus-visible { outline: 2px solid #feab3b; outline-offset: 4px; border-radius: 4px; }
.payment-method:active, .back-button:active, .copy-button:active, .confirm-payment-method:active { opacity: .72; }

.confirm-payment-method {
  position: absolute;
  top: 1533px;
  left: 32px;
  width: 716px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 2px solid #ffd447;
  border-radius: 75px;
  background: linear-gradient(157.035357deg, rgba(255, 255, 255, .2) 11.03%, rgba(7, 8, 13, .2) 98.51%);
  color: #fff;
  cursor: pointer;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.confirm-payment-method:focus-visible { outline: 2px solid #feab3b; outline-offset: 4px; }

.back-button {
  position: absolute;
  z-index: 1;
  top: 132px;
  left: 32px;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.back-button img { position: absolute; top: 0; left: 8.81px; width: 22.29px; height: 40px; }

.amount-row { position: absolute; top: 1172px; left: 0; display: flex; width: 780px; height: 56px; align-items: center; justify-content: center; gap: 16px; }
.usdt-mark { width: 40px; height: 40px; flex: 0 0 auto; object-fit: cover; }
.amount { color: #ee5454; font-size: 40px; font-weight: 600; line-height: 48px; white-space: nowrap; }
.copy-button { position: absolute; display: block; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.copy-button:disabled { cursor: default; }
.amount-copy { position: relative; flex: 0 0 auto; }
.copy-icon, .copy-icon img { position: absolute; display: block; }
.copy-icon { inset: 0; }
.copy-back { top: 4.68px; left: 0; width: 26.95px; height: 27.32px; }
.copy-front { top: 0; left: 6.74px; width: 25.26px; height: 25.76px; }

.countdown-line { position: absolute; top: 236px; left: 0; display: flex; width: 780px; height: 42px; margin: 0; align-items: center; justify-content: center; gap: 16px; color: #fff; font-size: 24px; font-weight: 400; line-height: 42px; }
.countdown-prefix, .countdown-suffix, #countdown { white-space: nowrap; }
#countdown { color: #feab3b; font-size: 30px; font-weight: 600; text-decoration: none; }

.payment-card { top: 318px; height: 814px; background: linear-gradient(106.319587deg, rgba(255, 255, 255, .2) 11.03%, rgba(7, 8, 13, .2) 98.51%); }
.network-pill { position: absolute; top: 40px; left: 284px; display: flex; align-items: center; width: 147px; height: 64px; padding: 0 15px; gap: 13px; border-radius: 40px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 24px; font-weight: 400; line-height: 32px; }
.tron-mark { position: relative; display: block; width: 51px; height: 51px; overflow: hidden; flex: 0 0 auto; border-radius: 50%; }
.tron-mark img { top: -558.82%; left: -641.18%; width: 1529.41%; height: 3364.71%; }
.network-note { position: absolute; top: 119px; left: 0; width: 714px; margin: 0; color: #fff; font-size: 24px; font-weight: 400; line-height: 36px; text-align: center; }
.qr-frame { position: absolute; top: 177px; left: 118px; width: 480px; height: 480px; padding: 12px; overflow: hidden; border: 1px solid #bebebe; border-radius: 24px; background: #fff; }
.qr-crop { position: relative; width: 456px; height: 456px; overflow: hidden; }
.qr-crop img { inset: 0; width: 456px; height: 456px; object-fit: contain; }
.qr-crop img.is-figma-demo-crop { top: -98.46%; left: -35.09%; width: 171.05%; height: 376.32%; object-fit: fill; }
.qr-crop img[hidden] { display: none; }
.wallet-label-row { position: absolute; top: 686px; left: 0; display: flex; width: 714px; height: 40px; align-items: center; justify-content: center; gap: 16px; }
.wallet-label { margin: 0; color: #fff; font-size: 24px; font-weight: 400; line-height: 40px; }
.wallet-row { position: absolute; top: 740px; left: 0; width: 714px; height: 40px; color: #fff; font-size: 24px; font-weight: 400; line-height: 34px; text-align: center; white-space: nowrap; }
.wallet-copy { position: relative; flex: 0 0 auto; }
.copy-feedback { position: absolute; top: 1234px; left: 50%; width: max-content; max-width: 600px; margin: 0; padding: 10px 18px; border-radius: 12px; background: rgba(0, 0, 0, .66); color: #fff; font-size: 20px; line-height: 28px; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity 160ms ease; }
.copy-feedback.is-visible { opacity: 1; }
.payment-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.payment-status.is-error { color: #ff8f8f; }
.payment-finished { position: absolute; top: 1533px; left: 32px; width: 716px; height: 100px; margin: 0; padding: 0; border: 2px solid #ffd447; border-radius: 75px; background: linear-gradient(157.035357deg, rgba(255,255,255,.2) 11.03%, rgba(7,8,13,.2) 98.51%); color: #fff; cursor: pointer; font-size: 32px; font-weight: 500; line-height: 40px; }
.payment-finished:disabled { opacity: .45; cursor: default; }
@media (prefers-reduced-motion: reduce) { .copy-feedback { transition: none; } }