.year-pass-reward {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: fit-content;
  max-width: 100%;
  margin: 20px 0 2px;
  padding: 11px 14px;
  border: 1px solid rgba(216, 255, 62, .42);
  border-radius: 14px;
  color: #efffc1;
  background: rgba(216, 255, 62, .1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  font-size: 14px;
  line-height: 1.45;
}

.year-pass-reward span {
  padding: 3px 8px;
  border-radius: 999px;
  color: #091112;
  background: #d8ff3e;
  font-size: 12px;
  font-weight: 900;
}

.year-pass-reward strong { color: #fff; font-size: 16px; }
.year-pass-reward b { color: #efffc1; font-weight: 800; }

.price-reward-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin: -4px 0 18px;
  font-size: 13px;
}

.price-reward-note[hidden] { display: none; }
.price-reward-note s { color: rgba(255, 255, 255, .56); }
.price-reward-note strong { color: #d8ff3e; }
.price-reward-note span { color: #fff; font-weight: 900; }

[data-gaoge-pay].year-pass-price-lock[disabled] {
  cursor: wait !important;
  opacity: .7;
}

body[data-install-reward="eligible"] .price-card {
  box-shadow: 0 0 0 1px rgba(216, 255, 62, .42), var(--shadow);
}

.gaoge-pay-mask {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 9, 10, .76);
  backdrop-filter: blur(7px);
}

.gaoge-pay-modal {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 1px solid rgba(9, 17, 18, .12);
  border-radius: 24px;
  color: #091112;
  background: #f8faf2;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
}

.gaoge-pay-modal__close {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 11px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: #344243;
  background: #e7ebdf;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.gaoge-pay-modal__header { padding: 27px 28px 18px; text-align: center; }
.gaoge-pay-modal__brand { color: #50605a; font-size: 13px; font-weight: 900; }
.gaoge-pay-modal__title { margin-top: 9px; color: #091112; font-size: 23px; font-weight: 950; }
.gaoge-pay-modal__product { margin-top: 6px; color: #63706b; }
.gaoge-pay-modal__price { margin-top: 6px; color: #e45f42; font-size: 44px; font-weight: 950; line-height: 1.1; }
.gaoge-pay-modal__price small { font-size: 20px; }
.gaoge-pay-modal__body { padding: 0 28px 30px; text-align: center; }

.gaoge-pay-modal__loading,
.gaoge-pay-modal__success {
  display: grid;
  gap: 10px;
  justify-items: center;
  color: #566661;
}

.gaoge-pay-modal__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #dce3d6;
  border-top-color: #091112;
  border-radius: 50%;
  animation: year-pass-spin .8s linear infinite;
}

@keyframes year-pass-spin { to { transform: rotate(360deg); } }

.gaoge-pay-modal__qr-wrap {
  display: grid;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  place-items: center;
  border: 1px solid #dce3d6;
  border-radius: 18px;
  background: #fff;
}

.gaoge-pay-modal__qr { width: 210px; height: 210px; }
.gaoge-pay-modal__qr-frame { width: 100%; height: 100%; border: 0; border-radius: 17px; background: #080a0a; }
.gaoge-pay-modal__qr-loading { color: #63706b; font-size: 13px; line-height: 1.7; }
.gaoge-pay-modal__scan { margin: 13px 0 0; color: #091112; font-weight: 900; }

.gaoge-pay-modal__sub,
.gaoge-pay-modal__note,
.gaoge-pay-modal__status,
.gaoge-pay-modal__help {
  margin: 8px 0 0;
  color: #6e7a75;
  font-size: 12px;
}

.gaoge-pay-modal__status { color: #3b4944; }
.gaoge-pay-modal__dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #78a400; }
.gaoge-pay-modal__help-toggle { border: 0; color: #4f5e58; background: transparent; text-decoration: underline; cursor: pointer; }
.gaoge-pay-modal__help-actions { margin-top: 6px; }
.gaoge-pay-modal__success-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; color: #091112; background: #d8ff3e; font-size: 28px; font-weight: 900; }
.gaoge-pay-modal__success-title { color: #091112; font-size: 23px; font-weight: 950; }
.gaoge-pay-modal__success-sub { color: #63706b; }
.gaoge-pay-modal__delivery { margin-top: 16px; }
.gaoge-pay-modal__row { display: grid; gap: 8px; margin-top: 10px; }
.gaoge-pay-modal__code { padding: 12px; border-radius: 12px; background: #e9eddf; font-family: ui-monospace, monospace; font-size: 18px; font-weight: 900; }

.gaoge-pay-modal__btn,
.gaoge-pay-modal__err-btn,
.gaoge-pay-modal__help-btn,
.gaoge-pay-modal__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 6px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 850;
  text-decoration: none !important;
  cursor: pointer;
}

.gaoge-pay-modal__btn--primary,
.gaoge-pay-modal__err-btn--primary { color: #091112 !important; background: #d8ff3e; }

.gaoge-pay-modal__btn--secondary,
.gaoge-pay-modal__err-btn--ghost,
.gaoge-pay-modal__help-btn--ghost,
.gaoge-pay-modal__help-btn--alt,
.gaoge-pay-modal__copy { color: #263531 !important; background: #e4e9dc; }

.gaoge-pay-modal__error { color: #a33c42; }
.gaoge-pay-modal__error-actions { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 640px) {
  .year-pass-reward { width: 100%; align-items: flex-start; }
  .year-pass-reward b { width: 100%; }
  .gaoge-pay-modal__header { padding-inline: 20px; }
  .gaoge-pay-modal__body { padding-inline: 20px; }
  .gaoge-pay-modal__qr-wrap { width: 280px; height: 280px; max-width: 100%; }
  .gaoge-pay-modal__qr { width: 196px; height: 196px; }
}