.pricing-dialog-modal-root.ant-modal {
  padding-bottom: 0;
}
.pricing-dialog-modal-root .ant-modal-content {
  box-shadow: none;
  background: 0 0;
  padding: 0;
}
.pricing-dialog-shell {
  border: 1px solid var(--nuw-modal-border);
  background: var(--nuw-modal-bg);
  width: min(1080px, 100vw - 120px);
  max-height: calc(100vh - 80px);
  color: var(--nuw-text-default);
  border-radius: 28px;
  font-family:
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  display: flex;
  position: relative;
}
.pricing-dialog-close {
  background: var(--nuw-close-bg);
  width: 36px;
  height: 36px;
  color: var(--nuw-close-icon);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  position: absolute;
  top: -1px;
  right: -45px;
}
.pricing-dialog-close:hover {
  background: var(--nuw-close-bg-hover);
}
.pricing-dialog-main {
  flex-direction: column;
  flex: 1;
  gap: 28px;
  min-width: 0;
  min-height: 0;
  padding: 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.pricing-dialog-header-bg {
  background-image: var(--nuw-header-bg-image);
  opacity: 0.7;
  pointer-events: none;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 28px;
  height: 128px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.pricing-dialog-top {
  flex-direction: column;
  flex-shrink: 0;
  gap: 20px;
  display: flex;
  position: relative;
}
.pricing-dialog-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 24px;
  display: flex;
}
.pricing-dialog-title {
  flex-shrink: 0;
  align-items: center;
  height: 80px;
  margin: 0;
  padding: 0 8px;
  display: flex;
}
.pricing-dialog-title-image {
  background-color: var(--nuw-text-default);
  width: 318.5px;
  height: 64px;
  display: block;
  -webkit-mask: url(/assets/images/banners/points-insufficient.webp) 50% /
    contain no-repeat;
  mask: url(/assets/images/banners/points-insufficient.webp) 50% / contain
    no-repeat;
}
.pricing-dialog-recharge-entry {
  background: var(--nuw-chip-bg);
  height: 40px;
  color: var(--nuw-text-default);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: none;
  border-radius: 14px;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 2px 12px 2px 16px;
  font-size: 14px;
  line-height: 22px;
  display: inline-flex;
}
.pricing-dialog-recharge-entry:hover {
  background: var(--pex-entry-bg-hover);
}
.pricing-dialog-tabs {
  border: 0.5px solid var(--nuw-tab-border);
  background: var(--nuw-tab-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 42px;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 3px;
  display: flex;
}
.pricing-dialog-tab {
  min-width: 0;
  height: 38px;
  color: var(--nuw-text-secondary);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  background: 0 0;
  border: 0.5px solid #0000;
  border-radius: 28px;
  flex: 1 0 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
  display: inline-flex;
}
.pricing-dialog-tab:not(.pricing-dialog-tab-active):hover {
  color: var(--nuw-text-default);
}
.pricing-dialog-tab-active {
  border-color: var(--nuw-tab-active-border);
  background: var(--nuw-tab-active-bg);
  color: var(--nuw-text-default);
}
.pricing-dialog-tab-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.pricing-dialog-tab-discount {
  opacity: 0.6;
  font-size: 12px;
  line-height: 18px;
}
.pricing-dialog-tab-active .pricing-dialog-tab-discount {
  color: var(--nuw-accent);
  opacity: 1;
}
.pricing-dialog-tab-divider {
  background: linear-gradient(
      var(--nuw-divider-subtle),
      var(--nuw-divider-subtle)
    )
    center/1px 100% no-repeat;
  flex: 0 0 16px;
  align-self: center;
  height: 24px;
}
.pricing-dialog-table {
  --pex-fixed-gap: 0px;
  flex-direction: column;
  flex: auto;
  gap: 6px;
  min-height: 0;
  display: flex;
}
.pricing-dialog-table-head {
  height: 20px;
  color: var(--nuw-text-secondary);
  flex-shrink: 0;
  align-items: center;
  padding: 0 25px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.pricing-dialog-table-head > * {
  opacity: 0.75;
}
.pricing-dialog-table-head > .pricing-dialog-head-strong {
  color: var(--nuw-text-default);
  opacity: 1;
  font-weight: 500;
}
.pricing-dialog-table-body {
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  flex-direction: column;
  flex: 0 auto;
  gap: 6px;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}
.pricing-dialog-table-body::-webkit-scrollbar {
  display: none;
}
.pricing-dialog-no-more {
  color: var(--nuw-text-secondary);
  opacity: 0.5;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.pricing-dialog-no-more:before,
.pricing-dialog-no-more:after {
  content: "";
  background: currentColor;
  width: 4px;
  height: 1px;
}
.pricing-dialog-cell {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: inline-flex;
}
.pricing-dialog-scroll-area {
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
  display: block;
  overflow: auto hidden;
}
.pricing-dialog-scroll-area::-webkit-scrollbar {
  display: none;
}
.pricing-dialog-cells {
  align-items: center;
  width: 100%;
  min-width: 384px;
  display: flex;
}
.pricing-dialog-cell-name {
  flex: 0 136px;
  gap: 8px;
  min-width: 120px;
}
.pricing-dialog-cell-flex {
  flex: 1 1 0;
  min-width: 80px;
}
.pricing-dialog-cell-video {
  white-space: nowrap;
  min-width: 104px;
}
.pricing-dialog-cell-price {
  box-sizing: border-box;
  flex: 0 0
    calc(var(--pex-fixed-gap) + calc(var(--pex-price-w) + var(--pex-chip-w)));
  padding-left: var(--pex-fixed-gap);
  align-self: stretch;
  gap: 0;
}
.pricing-dialog-power-cells {
  min-width: 376px;
}
.pricing-dialog-power-name {
  flex-direction: column;
  flex: 1 1 0;
  align-items: flex-start;
  gap: 2px;
  min-width: 120px;
}
.pricing-dialog-power-name .pricing-dialog-row-name {
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
}
.pricing-dialog-power-amount {
  flex: 0 0 160px;
  gap: 2px;
}
.pricing-dialog-power-unit {
  flex: 0 0 96px;
}
.pricing-dialog-power-price {
  box-sizing: border-box;
  flex: 0 0 calc(var(--pex-fixed-gap) + 108px);
  padding-left: var(--pex-fixed-gap);
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  align-items: flex-start;
  gap: 2px;
}
.pricing-dialog-power-tag {
  flex: 0 0 94px;
}
.pricing-dialog-table[data-nuw-x-overflow] {
  --pex-fixed-gap: 8px;
}
.pricing-dialog-cell-price,
.pricing-dialog-power-price {
  position: relative;
}
.pricing-dialog-cell-price:before,
.pricing-dialog-power-price:before {
  background: linear-gradient(
    to left,
    var(--pex-fixed-col-shadow),
    transparent
  );
  opacity: 0;
  content: "";
  pointer-events: none;
  width: 12px;
  transition: opacity 0.2s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
}
.pricing-dialog-table[data-nuw-x-clipped] .pricing-dialog-cell-price:before,
.pricing-dialog-table[data-nuw-x-clipped] .pricing-dialog-power-price:before {
  opacity: 1;
}
.pricing-dialog-scroll-bar-track {
  padding: 0
    calc(
      25px + var(--pex-fixed-gap) + calc(var(--pex-price-w) + var(--pex-chip-w))
    )
    0 25px;
  flex-shrink: 0;
  display: flex;
}
.pricing-dialog-scroll-bar-track-power {
  padding-right: calc(227px + var(--pex-fixed-gap));
}
.pricing-dialog-scroll-bar {
  scrollbar-color: var(--nuw-scrollbar-thumb) #0000;
  scrollbar-width: thin;
  overflow-x: scroll;
}
.pricing-dialog-scroll-bar::-webkit-scrollbar {
  height: 6px;
  display: block;
}
.pricing-dialog-scroll-bar::-webkit-scrollbar-thumb {
  background: var(--nuw-scrollbar-thumb);
  border-radius: 3px;
}
.pricing-dialog-scroll-bar-spacer {
  height: 1px;
}
.pricing-dialog-info-btn {
  opacity: 0.5;
  cursor: pointer;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-left: -2px;
  display: inline-flex;
}
.pricing-dialog-row {
  border: 1px solid var(--nuw-row-border);
  background: var(--nuw-row-bg);
  width: 100%;
  height: 74px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 20px;
  flex-shrink: 0;
  align-items: center;
  padding: 0 24px;
  display: flex;
}
.pricing-dialog-row:not(.pricing-dialog-row-selected):hover {
  background: var(--nuw-row-bg-hover);
}
.pricing-dialog-row-selected {
  border-color: var(--nuw-row-selected-border);
  background: var(--nuw-row-selected-bg);
}
.pricing-dialog-row-name {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.pricing-dialog-row-subtitle {
  color: var(--nuw-text-secondary);
  opacity: 0.75;
  font-size: 12px;
  line-height: 18px;
}
.pricing-dialog-sub-chip {
  background: var(--nuw-chip-bg);
  white-space: nowrap;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
}
.pricing-dialog-number {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.pricing-dialog-number-strong {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.pricing-dialog-lightning {
  flex-shrink: 0;
}
.pricing-dialog-lowest-tag {
  color: var(--nuw-lowest);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.pricing-dialog-price-block {
  box-sizing: border-box;
  flex: 0 0 var(--pex-price-w);
  white-space: nowrap;
  min-width: 108px;
  padding-right: 8px;
}
.pricing-dialog-price-content {
  flex-direction: column;
  gap: 2px;
  display: inline-flex;
}
.pricing-dialog-chip-col {
  flex: 0 0 var(--pex-chip-w);
  display: flex;
}
.pricing-dialog-price-main {
  align-items: baseline;
  gap: 1px;
  display: inline-flex;
}
.pricing-dialog-price-symbol {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.pricing-dialog-price-number {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 24px;
  line-height: 28px;
}
.pricing-dialog-price-original {
  color: var(--nuw-text-secondary);
  opacity: 0.75;
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-decoration: line-through;
}
.pricing-dialog-price-saving {
  color: var(--nuw-text-secondary);
  opacity: 0.75;
  font-size: 12px;
  line-height: 18px;
}
.pricing-dialog-chip {
  background: var(--nuw-chip-bg);
  color: var(--nuw-text-default);
  white-space: nowrap;
  border-radius: 8px;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
}
.pricing-dialog-chip-brand {
  background: var(--nuw-discount-chip-bg);
  color: var(--nuw-discount-chip-text);
}
.pricing-dialog-chip-accent {
  background: var(--nuw-discount-chip-accent-bg);
  color: var(--nuw-discount-chip-text);
}
.pricing-dialog-power-footer {
  height: 58px;
  color: var(--nuw-text-secondary);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto;
  padding: 0 8px 16px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.pricing-dialog-power-footer-text {
  opacity: 0.75;
}
.pricing-dialog-power-footer-link {
  color: inherit;
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border: none;
  align-items: center;
  gap: 2px;
  padding: 0;
  display: inline-flex;
}
.pricing-dialog-power-footer-link:hover {
  color: var(--nuw-text-default);
}
.pricing-dialog-side {
  flex: 0 0 328px;
  padding: 8px 8px 8px 0;
}
.pricing-dialog-pricing-area {
  background: var(--nuw-panel-bg);
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 560px;
  padding-bottom: 80px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.pricing-dialog-pricing-main {
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  display: flex;
}
.pricing-dialog-pricing-head {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  display: flex;
}
.pricing-dialog-pricing-price-row {
  align-items: baseline;
  gap: 1px;
  display: flex;
}
.pricing-dialog-pricing-symbol {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}
.pricing-dialog-pricing-number {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 48px;
  line-height: 48px;
}
.pricing-dialog-pricing-suffix {
  font-size: 16px;
  line-height: 30px;
}
.pricing-dialog-pricing-desc {
  white-space: nowrap;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.pricing-dialog-pricing-desc-lead {
  color: var(--nuw-text-secondary);
  opacity: 0.75;
}
.pricing-dialog-detail-card {
  background: var(--pex-card-bg);
  border-radius: 14px;
  flex-direction: column;
  gap: 10px;
  width: 280px;
  padding: 12px 16px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.pricing-dialog-detail-rows {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.pricing-dialog-detail-row {
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}
.pricing-dialog-detail-label {
  color: var(--nuw-text-secondary);
}
.pricing-dialog-detail-value {
  align-items: center;
  gap: 6px;
  font-weight: 500;
  display: inline-flex;
}
.pricing-dialog-detail-strike {
  color: var(--nuw-text-secondary);
  opacity: 0.6;
  font-weight: 400;
  text-decoration: line-through;
}
.pricing-dialog-detail-deduction {
  color: var(--nuw-text-brand);
  font-weight: 500;
}
.pricing-dialog-detail-divider {
  border-top: 0.5px solid var(--nuw-divider-subtle);
  height: 0;
}
.pricing-dialog-side .pricing-dialog-scan-block {
  gap: 28px;
}
.pricing-dialog-pricing-foot {
  color: var(--nuw-text-secondary);
  white-space: nowrap;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%);
}
.pricing-dialog-renew-note {
  opacity: 0.75;
}
.pricing-dialog-agreement {
  align-items: center;
  gap: 4px;
  display: flex;
}
.pricing-dialog-agreement-lead {
  opacity: 0.75;
}
.pricing-dialog-agreement-link {
  color: inherit;
}
.pricing-dialog-agreement-link:hover {
  color: var(--nuw-text-default);
}
.team-seat-bonus-seat-bonus-card {
  background: var(--team-vip-seat-bonus-bg);
  border-radius: 8px;
  width: 100%;
  padding: 12px 0 12px 12px;
  font-family:
    PingFang SC,
    sans-serif;
  display: flex;
}
.team-seat-bonus-seat-bonus-rule-list {
  flex-direction: column;
  width: 100%;
  margin-top: 6px;
  padding-right: 12px;
  display: flex;
}
.team-seat-bonus-seat-bonus-rule-row {
  width: 100%;
  color: var(--team-vip-seat-bonus-rule-text);
  align-items: center;
  gap: 2px;
  padding-bottom: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  display: flex;
}
.team-seat-bonus-seat-bonus-rule-row > span {
  flex: 1 0 0;
  min-width: 0;
}
.team-seat-bonus-seat-bonus-rule-row > span:last-child {
  text-align: right;
}
.team-seat-bonus-seat-bonus-bar {
  width: 100%;
  color: var(--team-vip-seat-bonus-text);
  white-space: pre-wrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  display: flex;
}
.team-seat-bonus-seat-bonus-gift-icon {
  object-fit: contain;
  width: 14px;
  height: 14px;
  filter: var(--vip-team-icon-filter);
}
.team-seat-bonus-seat-bonus-image-icon {
  object-fit: contain;
  width: 16px;
  height: 16px;
  filter: var(--vip-team-icon-filter);
  flex: none;
  margin-top: 1px;
  margin-right: 4px;
}
.team-seat-bonus-seat-bonus-highlight {
  color: var(--team-vip-seat-bonus-highlight);
  font-weight: 600;
}
.team-seat-bonus-seat-bonus-info-icon {
  object-fit: contain;
  cursor: pointer;
  width: 12px;
  height: 12px;
}
.team-seat-bonus-seat-bonus-inline {
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  display: inline-flex;
}
.team-seat-bonus-seat-bonus-inline-text {
  align-items: center;
  gap: 4px;
  min-width: 0;
  display: inline-flex;
}
.team-seat-bonus-seat-bonus-icon {
  object-fit: contain;
  width: 16px;
  height: 16px;
  filter: var(--vip-team-icon-filter);
  flex: none;
}
.team-seat-bonus-seat-bonus-inline-tooltip {
  color: #fff;
  white-space: normal;
  word-break: break-word;
  background-color: #000;
  border-radius: 4px;
  min-width: 217px;
  max-width: 250px;
  padding: 6px 8px 4px;
}
.team-seat-bonus-seat-bonus-inline-tooltip-content {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.team-seat-bonus-seat-bonus-inline-tooltip-title {
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  display: flex;
}
.team-seat-bonus-seat-bonus-inline-tooltip-table {
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: normal;
  display: flex;
}
.team-seat-bonus-seat-bonus-inline-tooltip-row {
  align-items: center;
  gap: 2px;
  padding: 0 2px 4px;
  display: flex;
}
.team-seat-bonus-seat-bonus-inline-tooltip-row > span {
  flex: 1 0 0;
  min-width: 0;
}
.team-seat-bonus-seat-bonus-inline-tooltip-row > span:last-child {
  text-align: right;
}
.team-seat-bonus-seat-bonus-tooltip {
  box-shadow: none;
  color: #fff;
  background-color: #000;
  border: none;
}
.team-seat-bonus-seat-bonus-desc-img {
  border-radius: 8px;
  display: block;
}
.team-seat-bonus-seat-bonus-desc-text {
  white-space: pre-wrap;
  max-width: 200px;
  display: block;
}
.subscription-entry-entry-btn {
  border: 1px solid var(--installment-entry-border);
  background: var(--installment-entry-bg);
  color: var(--installment-entry-text);
  font-family: var(--vip-paywall-font-family);
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 40px;
  padding: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
  display: flex;
  position: relative;
}
.subscription-entry-entry-btn:not(
    .subscription-entry-entry-btn-disabled
  ):hover {
  border-color: var(--installment-entry-hover-color);
  background: var(--installment-entry-hover-bg);
  color: var(--installment-entry-hover-color);
}
.subscription-entry-entry-btn-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.subscription-entry-logo {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.subscription-entry-btn-corner-mark {
  white-space: nowrap;
  height: 18px;
  color: var(--installment-entry-tag-text);
  background: var(--installment-entry-tag-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 1px 6px 2px;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
  position: absolute;
  top: -9px;
  right: -1px;
}
.subscription-footer-footer {
  min-height: 18px;
  color: var(--vip-sku-footer-text);
  text-align: center;
  margin: 10px auto 0;
  font-size: 12px;
  line-height: 18px;
}
.subscription-footer-highlight {
  color: var(--vip-sku-footer-highlight);
  font-weight: 600;
}
.subscription-footer-footer-team {
  color: var(--team-vip-sku-footer-text);
}
.subscription-footer-footer-team .subscription-footer-highlight {
  color: var(--team-vip-sku-footer-highlight);
}
.qr-dialog-modal {
  width: 320px;
  color: var(--team-vip-text-primary);
  box-sizing: border-box;
  border-radius: 24px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}
.qr-dialog-body {
  background: var(--enterprise-qr-modal-bg);
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  display: flex;
}
.qr-dialog-header {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}
.qr-dialog-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}
.qr-dialog-close-btn {
  cursor: pointer;
  width: 24px;
  height: 24px;
  color: var(--team-vip-text-primary);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  transition: opacity 0.15s;
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.qr-dialog-close-btn:hover {
  opacity: 0.7;
}
.qr-dialog-qr-code-wrap {
  border: 1px solid var(--enterprise-qr-frame-border);
  background: var(--enterprise-qr-code-bg);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: 0 0 8px;
  display: flex;
  overflow: hidden;
}
.qr-dialog-qr-code-img {
  object-fit: contain;
  border-radius: 10px;
  width: 180px;
  height: 180px;
  display: block;
}
.qr-dialog-footer {
  background: var(--enterprise-qr-footer-bg);
  width: 100%;
  color: var(--team-vip-sku-text-muted);
  text-align: center;
  padding: 12px 0;
  font-size: 12px;
}
.subscription-benefits-container {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}
.subscription-benefits-benefit-item {
  box-sizing: border-box;
  font-family: var(--vip-paywall-font-family);
  color: var(--vip-benefit-text, #141414);
  width: 100%;
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
}
.subscription-benefits-benefit-item-disabled {
  color: var(--vip-benefit-text-disabled, #a8a8a8);
}
.subscription-benefits-with-children-container {
  width: 100%;
}
.subscription-benefits-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}
.subscription-benefits-title {
  color: var(--vip-benefit-text, #141414);
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
}
.subscription-benefits-title-icon {
  object-fit: contain;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.subscription-benefits-children {
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-left: 14px;
  list-style: outside;
  display: flex;
}
.subscription-benefits-children-rich {
  gap: 8px;
  margin-top: 12px;
  padding-left: 0;
  list-style: none;
}
.subscription-benefits-child-item {
  color: var(--vip-benefit-child-text, #525252);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.subscription-benefits-child-item-rich {
  align-items: center;
  gap: 4px;
  display: flex;
}
.subscription-benefits-child-icon {
  object-fit: contain;
  width: 12px;
  height: 12px;
  filter: var(--vip-team-icon-filter);
  flex-shrink: 0;
}
.subscription-benefits-child-text {
  min-width: 0;
}
.subscription-benefits-with-icon-and-tag-container {
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 16px;
  display: flex;
}
.subscription-benefits-icon-wrapper {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  padding: 2px;
  display: flex;
  position: relative;
}
.subscription-benefits-icon {
  object-fit: contain;
  width: 12px;
  height: 12px;
  filter: var(--vip-team-icon-filter);
}
.subscription-benefits-icon-disabled {
  opacity: 0.4;
}
.subscription-benefits-text {
  color: var(--vip-benefit-text, #141414);
  font-size: 13px;
  font-family: var(--vip-paywall-font-family);
  word-break: break-word;
  flex: 1;
  align-items: center;
  display: flex;
}
.subscription-benefits-text-disabled {
  color: var(--vip-benefit-text-disabled, #a8a8a8);
}
.subscription-benefits-tag {
  border-radius: 100px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  height: 18px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  display: inline-flex;
}
.subscription-benefits-tag-normal {
  background-color: var(--vip-benefit-tag-normal-bg, #fff3d0);
  color: var(--vip-benefit-tag-normal-text, #424242);
}
.subscription-benefits-tag-highlight {
  color: #141414;
  background-color: #ffcf76;
}
.subscription-benefits-tag-highlight-red {
  color: #fff;
  background-color: #ff594d;
}
.subscription-benefits-tag-text {
  white-space: nowrap;
}
.subscription-benefits-free-level {
  background: var(--vip-benefit-bg-base, #f7f7f7);
  border-radius: 8px;
}
.subscription-benefits-sub-item {
  background: var(--vip-btn-normal-bg, #fff);
  height: 18px;
  color: var(--vip-benefit-child-text, #525252);
  text-align: right;
  font-family: var(--vip-paywall-font-family);
  border: 0.5px solid var(--vip-benefit-sub-border, #0000000d);
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  padding: 2px 4px;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.subscription-benefits-inline-icon {
  object-fit: contain;
  vertical-align: -2px;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  display: inline-block;
}
.subscription-benefits-tooltip-target {
  width: 20px;
  height: 20px;
  color: var(--vip-sku-text-tertiary);
  vertical-align: middle;
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.subscription-benefits-desc-img {
  border-radius: 8px;
  display: block;
}
.subscription-benefits-desc-tooltip {
  box-shadow: none;
  background-color: #0000;
  border: none;
  padding: 0;
}
.subscription-benefits-desc-text-tooltip {
  word-break: break-word;
  white-space: pre-line;
  max-width: 220px;
}
.subscription-benefits-highlight-group {
  box-sizing: border-box;
  border: 1px solid var(--vip-benefit-group-border);
  background: var(--vip-benefit-group-bg);
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 12px 16px;
  display: flex;
}
.subscription-benefits-highlight-group
  > .subscription-benefits-section-title-container:first-child {
  margin-top: 0;
}
.subscription-benefits-theme-level2 {
  --sku-benefit-accent: var(--vip-benefit-accent-level2);
  --sku-benefit-group-themed-bg: var(--vip-benefit-group-bg-level2);
  --sku-benefit-group-themed-border: var(--vip-benefit-group-border-level2);
  --sku-benefit-title-tag-bg: var(--vip-benefit-title-tag-bg-level2);
  --sku-benefit-title-tag-text: var(--vip-benefit-title-tag-text-level2);
}
.subscription-benefits-theme-level6 {
  --sku-benefit-accent: var(--vip-benefit-accent-level6);
  --sku-benefit-group-themed-bg: var(--vip-benefit-group-bg-level6);
  --sku-benefit-group-themed-border: var(--vip-benefit-group-border-level6);
  --sku-benefit-title-tag-bg: var(--vip-benefit-title-tag-bg-level6);
  --sku-benefit-title-tag-text: var(--vip-benefit-title-tag-text-level6);
}
.subscription-benefits-theme-team {
  --sku-benefit-accent: var(--vip-benefit-accent-team);
  --sku-benefit-group-themed-bg: var(--vip-benefit-group-bg-team);
  --sku-benefit-group-themed-border: var(--vip-benefit-group-border-team);
  --sku-benefit-title-tag-bg: var(--vip-benefit-title-tag-bg-team);
  --sku-benefit-title-tag-text: var(--vip-benefit-title-tag-text-team);
}
.subscription-benefits-theme-level7 {
  --sku-benefit-accent: var(--vip-benefit-accent-level7);
  --sku-benefit-group-themed-bg: var(--vip-benefit-group-bg-level7);
  --sku-benefit-group-themed-border: var(--vip-benefit-group-border-level7);
  --sku-benefit-title-tag-bg: var(--vip-benefit-title-tag-bg-level7);
  --sku-benefit-title-tag-text: var(--vip-benefit-title-tag-text-level7);
}
.subscription-benefits-highlight-group-themed {
  border: 1px solid var(--sku-benefit-group-themed-border);
  background: var(--sku-benefit-group-themed-bg);
}
.subscription-benefits-section-title-icon-tinted {
  background-color: currentColor;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.subscription-benefits-section-title-tag {
  background: var(--sku-benefit-title-tag-bg, var(--vip-benefit-tag-normal-bg));
  max-width: 156px;
  height: 18px;
  color: var(--sku-benefit-title-tag-text, var(--vip-benefit-tag-normal-text));
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 5px;
  flex-shrink: 0;
  align-items: center;
  margin-left: auto;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  display: inline-flex;
  overflow: hidden;
}
.subscription-benefits-fold-flag {
  width: 100%;
  height: 0;
  margin-top: -8px;
}
.subscription-benefits-divider-container {
  align-items: center;
  width: 100%;
  margin: 4px 0;
  display: flex;
}
.subscription-benefits-divider-line {
  border-top: 1px solid var(--vip-section-border, #e3e3e3);
  flex: 1;
  height: 0;
}
.subscription-benefits-section-title-container {
  align-items: center;
  width: 100%;
  margin-top: 4px;
  display: flex;
}
.subscription-benefits-section-title-top {
  border-top: 0.5px solid var(--vip-section-border, #e3e3e3);
  padding-top: 16px;
}
.subscription-benefits-section-title-cross-container {
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  display: flex;
}
.subscription-benefits-section-title-line {
  border-top: 1px solid var(--vip-section-border, #e3e3e3);
  flex: 1;
  height: 0;
}
.subscription-benefits-section-title-text {
  font-family: var(--vip-paywall-font-family);
  color: var(--vip-sku-text-tertiary);
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  display: flex;
}
.subscription-benefits-section-title-themed {
  color: var(--sku-benefit-accent);
}
.subscription-benefits-section-title-disabled {
  color: var(--vip-benefit-text-disabled, #a8a8a8);
}
.subscription-benefits-section-title-icon {
  object-fit: contain;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.subscription-benefits-section-title-icon-disabled {
  filter: var(--vip-benefit-icon-disabled-filter);
  opacity: 0.4;
}
.period-tabs-tab-container {
  border: 0.5px solid var(--sub-sku-tab-border);
  background: var(--sub-sku-tab-wrap-bg);
  border-radius: 19px;
  width: 100%;
  position: relative;
  overflow: visible;
}
.period-tabs-tab-track {
  background: var(--sub-sku-tab-bg);
  border-radius: 99px;
  align-items: center;
  gap: 0;
  width: 100%;
  display: flex;
}
.period-tabs-gift-badge {
  z-index: 1;
  background: var(--sub-sku-gift-tag-bg);
  height: 18px;
  color: var(--sub-sku-gift-tag-text);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  pointer-events: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 1px 5px 2px;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  display: inline-flex;
  position: absolute;
  top: -9px;
  right: 0;
}
.period-tabs-gift-badge-dimmed {
  background: var(--sub-sku-gift-tag-inactive-bg);
  color: var(--sub-sku-gift-tag-inactive-text);
}
.period-tabs-tab-item {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 99px;
  flex: 1 0 0;
  justify-content: center;
  align-items: center;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  display: flex;
  position: relative;
}
@media (hover: hover) {
  .period-tabs-tab-item:not(.period-tabs-tab-item-active):hover {
    background: var(--sub-sku-tab-hover-bg);
  }
}
.period-tabs-tab-item .period-tabs-gift-badge {
  top: -12px;
  right: 0;
}
.period-tabs-tab-item-active {
  background: var(--sub-sku-tab-active-bg);
  box-shadow: 0 1px 2px #0000000a;
}
.period-tabs-tab-item-active .period-tabs-tab-label {
  color: var(--sub-sku-tab-active-text);
}
.period-tabs-tab-label {
  font-family: var(--vip-paywall-font-family);
  color: var(--sub-sku-tab-text);
  white-space: nowrap;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.numeric-stepper-container {
  background: var(--team-vip-sku-seat-picker-bg, #0d0d0d0d);
  height: 28px;
  color: var(--team-vip-sku-seat-picker-text, #303030);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
  overflow: hidden;
}
.numeric-stepper-container[data-disabled] {
  opacity: 0.6;
  pointer-events: none;
}
.numeric-stepper-side-btn {
  all: unset;
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--team-vip-sku-seat-picker-icon, #303030);
  background: var(--team-vip-sku-seat-picker-btn-bg, #0d0d0d0a);
  justify-content: center;
  align-items: center;
  transition: background 0.15s;
  display: inline-flex;
}
.numeric-stepper-side-btn:hover:not(:disabled) {
  background: var(--team-vip-sku-seat-picker-btn-hover-bg, #0d0d0d14);
}
.numeric-stepper-side-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.numeric-stepper-value-box {
  min-width: 56px;
  height: 28px;
  font-family: var(--vip-paywall-font-family);
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0;
  font-size: 13px;
  line-height: 20px;
  display: inline-flex;
}
.numeric-stepper-value-text {
  font-weight: 400;
}
.numeric-stepper-value-input {
  all: unset;
  text-align: center;
  min-width: 18px;
  color: inherit;
  cursor: text;
  -moz-appearance: textfield;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.numeric-stepper-value-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.numeric-stepper-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.numeric-stepper-value-input:disabled {
  cursor: not-allowed;
}
.numeric-stepper-unit-text {
  font-weight: 400;
}
.team-subscription-container {
  isolation: isolate;
  border-color: #0000;
  border-radius: 24px;
  flex-direction: column;
  flex: 0 0 296px;
  width: 296px;
  line-height: 1.55;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.2s,
    background-color 0.2s;
  display: flex;
  position: relative;
}
.team-subscription-container:after {
  content: "";
  z-index: 1;
  background: var(--sku-card-surface);
  pointer-events: none;
  border-radius: 23px;
  position: absolute;
  inset: 0;
}
.team-subscription-container:hover,
.team-subscription-container[data-elevated="true"] {
  box-shadow: 0 2px 20px #0000000d;
}
.team-subscription-container.team-subscription-mobile {
  flex: none;
  width: 100%;
}
.team-subscription-container.team-subscription-mobile:hover,
.team-subscription-container.team-subscription-mobile[data-elevated="true"] {
  box-shadow: none;
  transform: none;
}
.team-subscription-container.team-subscription-mobile
  .team-subscription-credit-section {
  height: auto;
}
.team-subscription-container.team-subscription-mobile.team-subscription-with-promo-banner {
  margin-top: 32px;
}
.team-subscription-container.team-subscription-mobile
  .team-subscription-content-container
  .team-subscription-disabled-btn,
.team-subscription-container.team-subscription-mobile
  .team-subscription-content-container
  .team-subscription-normal-level-btn,
.team-subscription-container.team-subscription-mobile
  .team-subscription-content-container
  .team-subscription-top-level-btn,
.team-subscription-container.team-subscription-mobile
  .team-subscription-content-container
  .team-subscription-common-level-btn,
.team-subscription-container.team-subscription-mobile
  .team-subscription-content-container
  .team-subscription-free-btn {
  height: 48px;
}
.team-subscription-container.team-subscription-selectable {
  cursor: pointer;
}
.team-subscription-container .team-subscription-header-card {
  flex: none;
}
.team-subscription-container .team-subscription-benefits-card {
  flex: auto;
  min-height: 0;
}
.team-subscription-container .team-subscription-content-container {
  z-index: 2;
  border-radius: 24px;
  flex-direction: column;
  padding: 24px;
  display: flex;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container.team-subscription-header-card {
  border-radius: 0;
  padding: 24px 12px;
}
.team-subscription-container
  .team-subscription-content-container.team-subscription-header-card:after {
  content: "";
  background: var(--vip-sku-card-divider);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 24px;
  right: 24px;
}
.team-subscription-container
  .team-subscription-content-container.team-subscription-header-card:last-child:after {
  display: none;
}
.team-subscription-container
  .team-subscription-content-container.team-subscription-header-card
  .team-subscription-header,
.team-subscription-container
  .team-subscription-content-container.team-subscription-header-card
  .team-subscription-seat-row,
.team-subscription-container
  .team-subscription-content-container.team-subscription-header-card
  .team-subscription-promo-meta-row {
  padding: 0 16px;
}
.team-subscription-container
  .team-subscription-content-container.team-subscription-header-card
  .team-subscription-header {
  padding-top: 2px;
}
.team-subscription-container
  .team-subscription-content-container.team-subscription-with-discount-footer-slot {
  padding-bottom: 12px;
}
.team-subscription-container
  .team-subscription-content-container.team-subscription-benefits-card {
  border-radius: 0;
  padding: 24px;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-header {
  width: 100%;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-header
  .team-subscription-sku-name {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  font-family: var(--vip-paywall-font-family);
  word-wrap: break-word;
  color: var(--vip-sku-text);
  text-align: center;
  z-index: 1;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-header
  .team-subscription-sku-description {
  color: var(--vip-sku-text-tertiary);
  font-family: var(--vip-paywall-font-family);
  margin-top: 6px;
  font-size: 14px;
  line-height: 22px;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-header
  .team-subscription-price-meta-row {
  height: 24px;
  color: var(--vip-sku-text-tertiary);
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-rmb {
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  height: 44px;
  margin: 16px 0 8px;
  padding: 0;
  display: flex;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-rmb
  .team-subscription-rmb-icon {
  color: var(--vip-sku-text);
  margin-right: 2px;
  font-family:
    -apple-system,
    SF Pro Display,
    SF Pro,
    Helvetica Neue,
    sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-rmb
  .team-subscription-rmb-number {
  color: var(--vip-sku-text);
  font-family:
    -apple-system,
    SF Pro Display,
    SF Pro,
    Helvetica Neue,
    sans-serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 44px;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-rmb
  .team-subscription-rmb-origin {
  color: var(--vip-sku-text-tertiary);
  -webkit-font-smoothing: antialiased;
  margin-left: 6px;
  font-family:
    -apple-system,
    SF Pro Display,
    SF Pro,
    Helvetica Neue,
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-rmb
  .team-subscription-rmb-origin:after {
  content: "";
  background:
    linear-gradient(var(--vip-sku-text-tertiary), var(--vip-sku-text-tertiary)),
    var(--vip-sku-card-bg);
  pointer-events: none;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-selected-tip-style {
  color: var(--team-vip-sku-text-secondary, #424242);
  font-family: var(--vip-paywall-font-family);
  white-space: pre-line;
  align-self: flex-start;
  min-height: auto;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-disabled-btn {
  background: var(--vip-sku-btn-disabled-bg);
  color: var(--vip-sku-btn-disabled-text);
  cursor: not-allowed;
  font-family: var(--vip-paywall-font-family);
  text-align: center;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  height: 40px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-normal-level-btn {
  border: 1px solid var(--team-vip-sku-btn-normal-border, #0d0d0d33);
  background: var(--team-vip-sku-btn-normal-bg, #fff);
  color: var(--team-vip-sku-btn-normal-text, #787878);
  font-family: var(--vip-paywall-font-family);
  cursor: not-allowed;
  text-align: center;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  height: 40px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-top-level-btn {
  background: var(--team-vip-sku-btn-cta-top-bg, #1f6dff);
  color: var(--team-vip-sku-btn-cta-top-text, #fff);
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  transition: background-color 0.15s;
  display: flex;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-top-level-btn:hover {
  background: var(--team-vip-sku-btn-cta-top-hover-bg);
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-common-level-btn {
  background: var(--vip-btn-cta-bg, #303030);
  height: 40px;
  color: var(--vip-btn-cta-text, #fff);
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  transition: background-color 0.15s;
  display: flex;
  position: relative;
}
.team-subscription-container
  .team-subscription-content-container
  .team-subscription-common-level-btn:hover {
  background: var(--vip-btn-cta-hover-bg);
}
.team-subscription-container .team-subscription-default-choice {
  border: 1px solid var(--team-vip-sku-card-border-selected, #ffa501);
  border-radius: 8px;
}
.team-subscription-container .team-subscription-no-choice {
  border: 1px solid #0000;
  border-radius: 8px;
}
.team-subscription-promote-label {
  color: #4d2700;
  font-family: var(--vip-paywall-font-family);
  background: linear-gradient(#ffa74a 0% 100%), #ff6932;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.team-subscription-level2-header,
.team-subscription-level6-header,
.team-subscription-level7-header {
  background: 0 0;
}
.team-subscription-level2,
.team-subscription-level7 {
  --sku-card-surface: var(--vip-sku-card-bg);
  border: 1px solid #0000;
}
.team-subscription-corner-mark {
  height: 24px;
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  z-index: 10;
  background: var(--team-vip-corner-mark-bg);
  color: var(--team-vip-corner-mark-text);
  border-radius: 7px;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  display: inline-flex;
}
.team-subscription-with-promo-banner {
  border: 1px solid var(--team-vip-sku-promo-banner-bg, #ffce86);
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    background-color 0.2s;
}
.team-subscription-promo-banner {
  z-index: 0;
  background: var(--team-vip-sku-promo-banner-bg);
  height: 50px;
  color: var(--team-vip-sku-promo-banner-text);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  pointer-events: none;
  border-radius: 24px 24px 0 0;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding-top: 6px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  position: absolute;
  top: -32px;
  left: -1px;
  right: -1px;
}
.team-subscription-promo-banner-dot {
  font-weight: 400;
}
.team-subscription-promo-banner-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
.team-subscription-disabled-btn {
  font-family: var(--vip-paywall-font-family);
  text-align: center;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  height: 40px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  display: flex;
  position: relative;
  background: var(--vip-sku-btn-disabled-bg) !important;
  color: var(--vip-sku-btn-disabled-text) !important;
  cursor: not-allowed !important;
}
.team-subscription-free-btn {
  background: var(--vip-btn-normal-bg, #fff);
  border: 1px solid var(--vip-btn-normal-border, #0d0d0d33);
  color: var(--team-vip-sku-text-primary, #303030);
  font-family: var(--vip-paywall-font-family);
  text-align: center;
  cursor: pointer;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  transition:
    background 0.15s,
    border-color 0.15s;
  display: flex;
  position: relative;
}
.team-subscription-free-btn:hover {
  border-color: var(--team-vip-sku-card-border-selected, #ffa501);
  color: var(--team-vip-sku-text-primary, #303030);
}
:is(
  .dark .team-subscription-free-btn,
  [data-mantine-color-scheme="dark"] .team-subscription-free-btn
) {
  color: #171717;
  background: #fff;
  border-color: #0000;
}
:is(
  .dark .team-subscription-free-btn:hover,
  [data-mantine-color-scheme="dark"] .team-subscription-free-btn:hover
) {
  color: #171717;
  background: #f5f5f5;
  border-color: #0000;
}
.team-subscription-promote-label {
  color: #4d2700;
  font-family: var(--vip-paywall-font-family);
  z-index: 10;
  background: linear-gradient(#ffa74a 0% 100%), #ff6932;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  position: absolute;
}
.team-subscription-sub-sku-range-input {
  opacity: 0;
  cursor: pointer;
  appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  inset: 0;
}
.team-subscription-slider-wrap {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0 12px;
  display: flex;
}
.team-subscription-slider-labels {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.team-subscription-slider-label {
  width: 32px;
  color: var(--vip-sku-text-tertiary);
  text-align: center;
  font-size: 11px;
  line-height: normal;
}
.team-subscription-slider-label:first-child {
  text-align: left;
}
.team-subscription-slider-label:last-child {
  text-align: right;
}
.team-subscription-slider-label.team-subscription-slider-label-active {
  color: var(--team-vip-sku-text-primary, #303030);
  font-size: 13px;
  font-weight: 500;
}
.team-subscription-slider-track-wrap {
  padding: 2px 0;
}
.team-subscription-slider-track {
  background: var(--team-vip-sku-slider-track-bg, #a8a8a8);
  border-radius: 9999px;
  align-items: center;
  width: 100%;
  height: 6px;
  display: flex;
  position: relative;
}
.team-subscription-slider-fill {
  background: var(--team-vip-sku-slider-fill-bg, #fff);
  border-radius: 9999px 0 0 9999px;
  height: 6px;
  position: absolute;
  left: 0;
}
.team-subscription-slider-thumb {
  border: 1px solid var(--team-vip-sku-slider-thumb-border, #e3e3e3);
  background: var(--team-vip-sku-slider-thumb-bg, #fff);
  border-radius: 9999px;
  width: 4px;
  height: 12px;
  position: absolute;
}
.team-subscription-credit-section {
  flex-direction: column;
  justify-content: end;
  gap: 8px;
  width: 100%;
  height: 128px;
  margin-top: 12px;
  display: flex;
  position: relative;
  overflow: visible;
}
.team-subscription-slider-placeholder {
  width: 100%;
  height: 32px;
}
.team-subscription-credit-box {
  background: var(--vip-sku-credit-box-bg);
  border-radius: 18px;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  display: flex;
}
.team-subscription-credit-total-row {
  white-space: nowrap;
  align-items: flex-end;
  gap: 6px;
  display: flex;
}
.team-subscription-credit-total-number {
  font-family: var(--vip-paywall-font-family);
  letter-spacing: 0.28px;
  color: var(--team-vip-sku-text-primary, #303030);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
}
.team-subscription-credit-total-unit {
  font-family: var(--vip-paywall-font-family);
  color: var(--vip-sku-text-tertiary);
  padding: 3px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.team-subscription-credit-estimate-row {
  align-items: center;
  gap: 4px;
  height: 24px;
  display: flex;
}
.team-subscription-credit-estimate-item {
  font-family: var(--vip-paywall-font-family);
  color: var(--vip-sku-text-tertiary);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
}
.team-subscription-team-feature-list {
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: 16px;
  display: flex;
}
.team-subscription-discount-footer-spacer {
  flex-shrink: 0;
  height: 28px;
}
.team-subscription-team-feature-item {
  color: var(--vip-sku-text-tertiary);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  display: inline-flex;
}
.team-subscription-team-feature-icon {
  flex-shrink: 0;
}
.team-subscription-credit-estimate-divider {
  background: var(--vip-sku-credit-divider);
  flex-shrink: 0;
  width: 1px;
  height: 10px;
  margin: 0 4px;
  display: inline-block;
}
.team-subscription-credit-estimate-info-icon {
  width: 20px;
  height: 20px;
  color: var(--vip-sku-text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.team-subscription-group-invite-btn {
  color: var(--text-icon-white, #171717);
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  background: linear-gradient(90deg, #e9fbff 0%, #9dcdda 100%);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  display: flex;
  position: relative;
}
.team-subscription-group-invite-btn-ultimate {
  background: linear-gradient(90deg, #fffdf3 19.23%, #d2bd80 100%);
}
.team-subscription-btn-avatar-group {
  justify-content: center;
  align-items: center;
  padding-right: 8px;
  display: flex;
}
.team-subscription-btn-avatar-leader {
  border: 0.5px solid var(--stroke-selected-dark, #0690ae);
  object-fit: cover;
  z-index: 2;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  position: relative;
}
.team-subscription-btn-avatar-empty {
  border: 0.5px solid var(--stroke-light, #e3e3e3);
  background: var(--text-icon-light-gray, #a8a8a8);
  color: #fff;
  opacity: 0.3;
  z-index: 1;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  margin-left: -8px;
  display: flex;
  position: relative;
}
.team-subscription-seat-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;
}
.team-subscription-total-price {
  font-family: var(--vip-paywall-font-family);
  align-items: baseline;
  gap: 3px;
  display: inline-flex;
}
.team-subscription-total-price-label {
  color: var(--vip-sku-text-tertiary);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.team-subscription-total-price-value {
  color: var(--vip-sku-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
}
.team-subscription-seat-bonus-placeholder {
  flex-shrink: 0;
  height: 12px;
}
.team-subscription-token-meta-row-promo {
  justify-content: flex-start;
}
.team-subscription-promo-meta-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 24px;
  display: flex;
}
.team-subscription-annual-saving-btn {
  cursor: pointer;
  background: 0 0;
  border: 0;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.team-subscription-annual-saving-label {
  color: var(--vip-sku-text-tertiary);
}
.team-subscription-annual-saving-value {
  color: var(--vip-sku-text);
  align-items: center;
  display: inline-flex;
}
.team-subscription-annual-saving-icon {
  color: var(--vip-sku-text-tertiary);
  flex-shrink: 0;
}
.team-subscription-rmb-unit {
  color: var(--vip-sku-text);
  white-space: nowrap;
  margin-left: 2px;
  font-size: 16px;
  line-height: 28px;
}
.team-subscription-promo-extra-badge {
  background: var(--vip-sku-promo-badge-bg);
  height: 24px;
  color: var(--vip-sku-promo-badge-text);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  display: inline-flex;
}
.team-subscription-btn-corner-mark {
  background: var(--sku-btn-corner-mark-bg);
  height: 18px;
  color: var(--sku-btn-corner-mark-text);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  pointer-events: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 1px 6px 2px;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: inline-flex;
  position: absolute;
  top: -8px;
  right: 0;
}
@media (max-width: 767px) {
  .vip-paywall-responsive .team-subscription-container {
    flex: none;
    width: 100%;
  }
  :is(
    .vip-paywall-responsive .team-subscription-container:hover,
    .vip-paywall-responsive .team-subscription-container[data-elevated="true"]
  ) {
    box-shadow: none;
    transform: none;
  }
  .vip-paywall-responsive
    .team-subscription-container.team-subscription-with-promo-banner {
    margin-top: 32px;
  }
  .vip-paywall-responsive
    .team-subscription-container
    .team-subscription-credit-section {
    height: auto;
  }
  .vip-paywall-responsive
    .team-subscription-container
    .team-subscription-benefits-card {
    display: none;
  }
  .vip-paywall-responsive
    .team-subscription-container
    .team-subscription-content-container.team-subscription-header-card:after {
    display: none;
  }
}
.unit-input-number {
  height: 28px;
  color: var(--team-vip-sku-seat-picker-text);
  background: var(--team-vip-sku-seat-picker-bg);
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: inline-flex;
  overflow: hidden;
}
.unit-input-number[data-disabled] {
  opacity: 0.6;
  pointer-events: none;
}
.unit-input-side-btn {
  all: unset;
  width: 28px;
  height: 28px;
  color: var(--team-vip-sku-seat-picker-icon);
  cursor: pointer;
  background: var(--team-vip-sku-seat-picker-btn-bg);
  justify-content: center;
  align-items: center;
  transition: background 0.15s;
  display: inline-flex;
}
.unit-input-side-btn:hover:not(:disabled) {
  background: var(--team-vip-sku-seat-picker-btn-hover-bg);
}
.unit-input-side-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.unit-input-value-box {
  justify-content: center;
  align-items: center;
  min-width: 60px;
  padding: 0 8px 0 0;
  font-family:
    PingFang SC,
    sans-serif;
  font-size: 13px;
  line-height: normal;
  display: inline-flex;
}
.unit-input-value-input {
  all: unset;
  width: 28px;
  color: inherit;
  text-align: center;
  cursor: text;
  appearance: textfield;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
}
.unit-input-value-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.unit-input-value-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.unit-input-value-input:disabled {
  cursor: not-allowed;
}
.unit-input-unit-text {
  white-space: nowrap;
  font-weight: 400;
}
.carousel-arrows-arrow {
  z-index: 1;
  pointer-events: none;
  --arrow-size: 10px;
  --arrow-border-width: 2px;
  justify-content: space-between;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
}
.carousel-arrows-arrow .carousel-arrows-arrow-left {
  cursor: pointer;
  pointer-events: auto;
  align-items: center;
  height: 100%;
  padding-right: 12px;
  display: flex;
  position: relative;
  left: -32px;
}
.carousel-arrows-arrow .carousel-arrows-arrow-right {
  cursor: pointer;
  pointer-events: auto;
  align-items: center;
  height: 100%;
  padding-left: 12px;
  display: flex;
  position: relative;
  right: -24px;
}
.carousel-arrows-arrow .carousel-arrows-arrow-icon-svg {
  cursor: pointer;
  flex-shrink: 0;
  display: block;
}
.membership-payment-modal-style .ant-modal {
  padding: 0;
}
.membership-payment-modal-style .ant-modal-content {
  border: var(--team-vip-modal-content-border, none);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
}
.membership-payment-modal-style .ant-input-number {
  box-shadow: none;
}
.membership-payment-left-container {
  background-position: 0 0;
  background-repeat: no-repeat;
  flex: 1;
  position: relative;
  overflow: hidden;
  background-size: 100% 100% !important;
}
.membership-payment-close {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}
.membership-payment-close img {
  filter: var(--team-vip-icon-filter);
}
.membership-payment-team-vip-sku-list-wrapper {
  width: 100%;
  max-width: 512px;
  position: relative;
}
.membership-payment-team-vip-sku-scroll-btn {
  z-index: 2;
  width: 28px;
  height: 28px;
  color: var(--team-vip-text-secondary, #262626);
  cursor: pointer;
  background: var(--team-vip-modal-bg, #fff);
  border: 1px solid var(--team-vip-border, #e3e3e3);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: box-shadow 0.2s;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px #0000001f;
}
.membership-payment-team-vip-sku-scroll-btn:hover {
  box-shadow: 0 4px 12px #0000002e;
}
.membership-payment-team-vip-sku-scroll-left {
  left: -14px;
}
.membership-payment-team-vip-sku-scroll-right {
  right: -14px;
}
.membership-payment-team-vip-sku-list {
  scrollbar-width: none;
  gap: 12px;
  width: 100%;
  display: flex;
  overflow-x: auto;
}
.membership-payment-team-vip-sku-list::-webkit-scrollbar {
  display: none;
}
.membership-payment-team-vip-sku-card {
  cursor: pointer;
  border: 1px solid var(--team-vip-border, #e3e3e3);
  background: 0 0;
  border-radius: 12px;
  flex-direction: column;
  flex: 0 0 250px;
  gap: 4px;
  min-width: 250px;
  min-height: 71px;
  padding: 12px;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  display: flex;
  position: relative;
}
.membership-payment-team-vip-sku-card:hover {
  border-color: var(--team-vip-selected-border, #05a3c5);
}
.membership-payment-team-vip-sku-card-selected {
  background: var(--team-vip-selected-bg, #05a3c514);
  border-color: var(--team-vip-selected-border, #05a3c5);
}
.membership-payment-team-vip-sku-card-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.membership-payment-team-vip-sku-card-disabled:not(
    .membership-payment-team-vip-sku-card-selected
  ):hover {
  border-color: var(--team-vip-border, #e3e3e3);
}
.membership-payment-team-vip-sku-duration {
  color: var(--team-vip-text-secondary, #262626);
  font-size: 14px;
  line-height: 20px;
}
.membership-payment-team-vip-sku-price-row {
  align-items: flex-end;
  gap: 8px;
  display: flex;
}
.membership-payment-team-vip-sku-price-main {
  color: var(--team-vip-text-secondary, #262626);
  align-items: flex-end;
  gap: 2px;
  display: flex;
}
.membership-payment-team-vip-sku-currency {
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
}
.membership-payment-team-vip-sku-price-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
}
.membership-payment-team-vip-sku-unit {
  font-size: 13px;
  line-height: 16px;
}
.membership-payment-team-vip-sku-original-price {
  color: var(--team-vip-text-muted, #929292);
  font-size: 13px;
  line-height: 16px;
  text-decoration: line-through;
}
.membership-payment-team-vip-sku-desc {
  color: var(--team-vip-text-muted, #929292);
  font-size: 11px;
  line-height: 15px;
}
.membership-payment-team-vip-sku-badge-row {
  align-items: center;
  gap: 4px;
  display: flex;
  position: absolute;
  top: 12px;
  right: 12px;
}
.membership-payment-team-vip-sku-badge {
  color: #5ddcff;
  background: #3cb5cc1a;
  border-radius: 4px;
  padding: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
}
.membership-payment-team-vip-sku-gift-tag {
  height: 20px;
  color: var(--cashier-gift-tag-text);
  white-space: nowrap;
  background: var(--cashier-gift-tag-bg);
  border-radius: 4px;
  align-items: center;
  padding: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 12px;
  display: inline-flex;
}
.membership-payment-team-vip-seat-range {
  color: var(--team-vip-text-muted, #929292);
}
.membership-payment-team-vip-seat-row {
  align-items: center;
  gap: 16px;
  min-height: 32px;
  display: flex;
}
.membership-payment-team-vip-seat-row .ant-input-number {
  box-shadow: none;
}
.membership-payment-team-vip-seat-picker-tooltip-target {
  display: inline-flex;
}
.membership-payment-team-vip-contact-sales-hint {
  color: var(--team-vip-text-muted, #929292);
  font-size: 12px;
}
.membership-payment-team-vip-contact-sales-link {
  color: var(--team-vip-text-muted, #929292);
  cursor: pointer;
  background: 0 0;
  border: none;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
}
.membership-payment-team-vip-seat-benefit {
  color: var(--team-vip-text-secondary, #262626);
  font-size: 14px;
  line-height: 20px;
}
.membership-payment-team-vip-seat-bonus {
  color: var(--team-vip-link, #05a3c5);
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top {
  color: var(--team-vip-text-secondary);
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item {
  margin-bottom: 20px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-price-name {
  align-items: center;
  margin-bottom: 16px;
  margin-right: 24px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-price-name
  .membership-payment-left-line {
  background: linear-gradient(#1aadff 3.12%, #3c95fa 100%);
  border-radius: 4px;
  width: 3px;
  height: 16px;
  margin-right: 8px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-people-num-tips {
  color: var(--team-vip-text-muted);
  margin-left: 12px;
  font-size: 12px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-price-check {
  align-items: center;
  margin-top: 8px;
  display: flex;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type {
  gap: 8px;
  width: 100%;
  display: flex;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip {
  border: 1px solid var(--team-vip-border);
  background: var(--team-vip-card-bg);
  -webkit-backdrop-filter: blur(5.3px);
  backdrop-filter: blur(5.3px);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: column;
  flex: 0 0 102px;
  align-items: center;
  gap: 4px;
  width: 102px;
  min-width: 0;
  max-width: 102px;
  margin-top: 8px;
  padding: 12px 16px;
  display: flex;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-title {
  color: var(--team-vip-text-secondary);
  text-align: center;
  font-family: PingFang SC;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-desc {
  color: var(--team-vip-text-muted);
  text-align: center;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-vip-state {
  color: var(--team-vip-text-secondary);
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-sku-group {
  gap: 8px;
  margin-top: 8px;
  display: flex;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item {
  border: 1px solid var(--team-vip-border);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  min-width: 137px;
  height: 72px;
  padding: 8px 4px;
  display: flex;
  position: relative;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item:hover {
  border: 1px solid var(--team-vip-selected-border);
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item
  .membership-payment-bottom {
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  display: flex;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item
  .membership-payment-sku-title {
  color: var(--team-vip-text-secondary);
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item
  .membership-payment-add-money {
  color: var(--team-vip-text-muted);
  font-size: 12px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item
  .membership-payment-money-num {
  color: var(--team-vip-text-secondary);
  align-items: center;
  font-size: 12px;
  display: flex;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item
  .membership-payment-money-num
  .membership-payment-money-icon {
  align-self: self-end;
  font-size: 14px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item
  .membership-payment-money-num
  .membership-payment-nums {
  font-size: 16px;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-check-vip
  .membership-payment-price-check-item
  .membership-payment-discount {
  color: var(--team-vip-discount-text, #171717);
  background: var(--team-vip-discount-bg, #5ddcff);
  white-space: nowrap;
  border-radius: 0 4px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 500;
  position: absolute;
  top: -10px;
  right: 0;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-checked-item {
  background-color: var(--team-vip-selected-bg);
  border: 1px solid var(--team-vip-selected-border) !important;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-checked-item
  .membership-payment-title,
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-checked-item
  .membership-payment-sku-title,
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-checked-item
  .membership-payment-money-num {
  color: var(--team-vip-selected-text) !important;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  .membership-payment-price-checked-item
  .membership-payment-add-money {
  opacity: 0.5;
  color: var(--team-vip-selected-text) !important;
}
.membership-payment-container
  .membership-payment-right-container
  .membership-payment-right-top
  .membership-payment-price-item
  .membership-payment-membership-type
  :last-child {
  margin-right: 0;
}
.membership-payment-pay-time {
  margin-top: 16px;
}
.membership-payment-pay-time .membership-payment-carousel-container {
  margin-top: 8px;
  position: relative;
}
.membership-payment-pay-time .membership-payment-time-long {
  gap: 12px;
  padding: 1px;
  display: flex;
}
.membership-payment-pay-time
  .membership-payment-time-long
  .membership-payment-time-long-item-selected {
  color: var(--team-vip-selected-text) !important;
  background-color: var(--team-vip-selected-bg) !important;
  outline: 1px solid var(--team-vip-selected-border) !important;
  font-weight: 500 !important;
}
.membership-payment-pay-time
  .membership-payment-time-long
  .membership-payment-time-long-item {
  background-color: var(--team-vip-modal-bg);
  cursor: pointer;
  color: var(--team-vip-text-secondary);
  outline: 1px solid var(--team-vip-border);
  border-radius: 8px;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 175px;
  padding: 12px 16px;
  font-size: 16px;
  display: flex;
  position: relative;
}
.membership-payment-pay-time
  .membership-payment-time-long
  .membership-payment-time-long-item:hover {
  outline: 1px solid var(--team-vip-selected-border);
}
.membership-payment-pay-time
  .membership-payment-time-long
  .membership-payment-time-long-item
  .membership-payment-discount {
  color: var(--team-vip-discount-text, #171717);
  background: var(--team-vip-discount-bg, #5ddcff);
  white-space: nowrap;
  border-radius: 0 4px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 500;
  position: absolute;
  top: -1px;
  right: -1px;
}
.membership-payment-shadow {
  border-top: 1px dashed var(--team-vip-shadow-border);
  justify-content: space-between;
  align-items: flex-start;
  min-height: 130px;
  padding-top: 16px;
  display: flex;
  position: relative;
  background-color: var(--team-vip-modal-bg, #fff) !important;
}
.membership-payment-shadow .membership-payment-pay-box {
  color: var(--team-vip-text-secondary);
  font-size: 14px;
}
.membership-payment-shadow
  .membership-payment-pay-box
  .membership-payment-pay-num-box {
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  display: flex;
}
.membership-payment-shadow
  .membership-payment-pay-box
  .membership-payment-pay-num-box
  .membership-payment-pay-num {
  gap: 14px;
  margin-top: 8px;
  display: flex;
}
.membership-payment-shadow
  .membership-payment-pay-box
  .membership-payment-pay-num-box
  .membership-payment-pay-num
  .membership-payment-pay-current-cn {
  color: var(--team-vip-text-muted);
  margin-right: 8px;
  font-size: 14px;
  font-weight: 400;
}
.membership-payment-shadow
  .membership-payment-pay-box
  .membership-payment-pay-num-box
  .membership-payment-pay-num
  .membership-payment-pay-current {
  color: var(--team-vip-text-secondary);
  align-items: baseline;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  display: inline-flex;
}
.membership-payment-shadow
  .membership-payment-pay-box
  .membership-payment-pay-num-box
  .membership-payment-pay-num
  .membership-payment-pay-price {
  color: var(--team-vip-text-muted);
  margin-top: 4px;
  font-size: 12px;
  line-height: 12px;
}
.membership-payment-shadow
  .membership-payment-pay-box
  .membership-payment-pay-num-box
  .membership-payment-pay-num
  .membership-payment-pay-price
  span {
  text-decoration: line-through;
}
.membership-payment-right-button {
  padding: 0 32px 12px;
}
.membership-payment-right-button .membership-payment-qrtext {
  height: 18px;
  margin-top: 12px;
}
.membership-payment-right-button
  .membership-payment-qrtext
  .membership-payment-qrlefttext {
  color: var(--team-vip-text-muted);
  font-size: 12px;
}
.membership-payment-right-button
  .membership-payment-qrtext
  .membership-payment-qr-rightext {
  color: var(--team-vip-link);
  word-wrap: break-word;
  font-size: 12px;
  font-weight: 400;
}
.membership-payment-right-button .membership-payment-pay-btn {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #1aadff 0%, #3c95fa 100%);
  border-radius: 4px;
  width: 100%;
  padding: 17px 0;
  font-size: 16px;
  font-weight: 500;
}
.membership-payment-right-button .membership-payment-dis-pay-btn {
  color: #fff;
  text-align: center;
  cursor: not-allowed;
  background: #ddd;
  border-radius: 4px;
  width: 100%;
  height: 52px;
  font-size: 20px;
  font-weight: 500;
  line-height: 52px;
}
.membership-payment-team-vip-mode-hint {
  min-width: 0;
  color: var(--team-vip-text-muted);
  flex: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}
.membership-payment-team-vip-mode-hint-action {
  color: var(--team-vip-link);
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0;
}
.membership-payment-team-vip-mode-hint-action:hover {
  text-decoration: underline;
}
.membership-payment-failure-prompt-box {
  border: 1px solid var(--team-vip-failure-border);
  background: var(--team-vip-failure-bg);
  color: #ff4d4f;
  z-index: 1;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  height: 38px;
  margin-top: 8px;
  margin-bottom: 8px;
  padding-left: 8px;
  font-size: 12px;
  display: flex;
  position: relative;
}
.membership-payment-failure-prompt-box .membership-payment-default {
  color: var(--team-vip-text-secondary);
}
.promotion-modal-modal-surface {
  overflow: hidden;
  background: var(--team-vip-modal-bg) !important;
  border-radius: 16px !important;
  flex: 0 0 420px !important;
  width: 420px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 0 !important;
}
.promotion-modal-modal-body {
  padding: 0 !important;
}
.promotion-modal-container {
  flex-direction: column;
  align-items: center;
  padding: 36px 32px 28px;
  display: flex;
  position: relative;
}
.promotion-modal-icon-wrap {
  justify-content: center;
  align-items: center;
  width: 200px;
  margin-bottom: 16px;
  display: flex;
}
.promotion-modal-icon-wrap img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.promotion-modal-title {
  color: var(--team-vip-text-primary);
  text-align: center;
  margin-bottom: 8px;
  font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.promotion-modal-title .promotion-modal-highlight {
  color: var(--team-vip-link);
  margin: 0 4px;
}
.promotion-modal-subtitle {
  color: var(--team-vip-text-muted);
  text-align: center;
  margin-bottom: 28px;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.promotion-modal-button-row {
  justify-content: center;
  gap: 12px;
  width: 100%;
  display: flex;
}
.promotion-modal-btn {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  max-width: 180px;
  height: 40px;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.15s;
  display: inline-flex;
}
.promotion-modal-btn:hover {
  opacity: 0.88;
}
.promotion-modal-btn-secondary {
  color: var(--team-vip-text-primary);
  background: var(--team-vip-card-bg);
  border: 1px solid var(--team-vip-border);
}
.promotion-modal-btn-primary {
  color: #000;
  background: #5ddcff;
  border: none;
}
.subscription-payment-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}
.subscription-payment-container .subscription-payment-close {
  cursor: pointer;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 6px;
  right: 6px;
}
.subscription-payment-container .subscription-payment-close img {
  width: 24px;
  height: 24px;
}
.subscription-payment-container .subscription-payment-tabtitle {
  text-align: center;
  background: linear-gradient(#f5bc464d 0%, #ffffff4d 100%);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  justify-content: center;
  padding-top: 24px;
  line-height: 28px;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tabtitle
  .subscription-payment-payment-detail {
  color: var(--team-vip-text-secondary);
  word-wrap: break-word;
  margin-right: 12px;
  font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
}
.subscription-payment-container
  .subscription-payment-tabtitle
  .subscription-payment-payment-vip {
  color: #814600;
  word-wrap: break-word;
  font-family: PingFang SC;
  font-size: 20px;
  font-weight: 600;
}
.subscription-payment-container .subscription-payment-tab-code {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-content-group {
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-scan-and-agreement {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-scan-group {
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code {
  background: var(--team-vip-qr-panel-bg, var(--team-vip-card-bg, #f7f7f7));
  text-align: center;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  margin-right: 0;
  padding: 4px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code
  .subscription-payment-qr-code-real {
  border-radius: 4px;
  width: 112px;
  height: 112px;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code
  .subscription-payment-mask-blue {
  background: linear-gradient(#006eff00 0%, #006eff66 100%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 48px;
  display: flex;
  position: absolute;
  bottom: 0%;
  left: 0%;
  right: 0;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code
  .subscription-payment-mask {
  cursor: pointer;
  background: #0009;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code
  .subscription-payment-mask
  span {
  color: #fff;
  word-wrap: break-word;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-pay-amount {
  color: var(--team-vip-link, #05a3c5);
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-scan-tips {
  color: var(--team-vip-text-secondary, #262626);
  align-items: center;
  gap: 4px;
  font-size: 16px;
  line-height: normal;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-scan-pay-icons {
  align-items: center;
  gap: 8px;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-scan-pay-icons
  img {
  width: 16px;
  height: 16px;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-pay-countdown {
  color: var(--team-vip-text-secondary, #262626);
  text-align: center;
  font-size: 14px;
  line-height: normal;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-pay-countdown
  span {
  font-variant-numeric: tabular-nums;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-agreement {
  width: 240px;
  color: var(--team-vip-text-muted, #929292);
  text-align: center;
  padding: 0 16px;
  font-size: 10px;
  line-height: 14px;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-agreement-link {
  cursor: pointer;
  color: var(--team-vip-text-secondary, #262626) !important;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right {
  align-self: flex-end;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-right-amount {
  color: var(--team-vip-qr-amount);
  word-wrap: break-word;
  font-size: 24px;
  font-weight: 600;
  position: relative;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-right-amount
  span:nth-child(2) {
  margin-right: 6px;
  font-size: 24px;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-right-amount
  span:nth-child(3) {
  font-size: 36px;
  display: inline-block;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-right-amount
  .subscription-payment-discount {
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(90deg, #ffa700 0%, #ff006b 100%);
  border-radius: 4px;
  width: fit-content;
  margin-left: 8px;
  padding: 3px 8px;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  bottom: 2px;
  left: 0;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-qricon {
  flex: 1;
  align-items: center;
  height: 20px;
  display: flex;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-qricon
  img {
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-right: 2px;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-qricon
  span {
  color: var(--team-vip-qr-text);
  word-wrap: break-word;
  flex: 1;
  margin-left: 2px;
  font-size: 14px;
  font-weight: 400;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-pay-reminder {
  height: 18px;
  color: var(--team-vip-text-muted);
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-qrtext {
  height: 18px;
  margin-top: 12px;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-qrtext
  .subscription-payment-qrlefttext {
  color: var(--team-vip-text-muted);
  word-wrap: break-word;
  font-size: 12px;
  font-weight: 400;
}
.subscription-payment-container
  .subscription-payment-tab-code
  .subscription-payment-qr-code-right
  .subscription-payment-qrtext
  .subscription-payment-qr-rightext {
  color: #814600;
  word-wrap: break-word;
  font-size: 12px;
  font-weight: 400;
}
.subscription-payment-info-color {
  margin-right: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--team-vip-qr-text) !important;
}
.promotion-checkout-modal-root.ant-modal {
  padding-bottom: 0;
}
.promotion-checkout-modal-root .ant-modal-content {
  box-shadow: none;
  background: 0 0;
  padding: 0;
}
.promotion-checkout-shell {
  border: 1px solid var(--nuw-modal-border);
  background: var(--nuw-modal-bg);
  width: min(868px, 100vw - 120px);
  color: var(--nuw-text-default);
  border-radius: 28px;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  font-family:
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  display: flex;
  position: relative;
}
.promotion-checkout-header-bg {
  background-image: var(--nuw-header-bg-image);
  opacity: 0.9;
  pointer-events: none;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  width: min(800px, 100%);
  height: 160px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.promotion-checkout-close {
  background: var(--ugp-close-bg);
  width: 36px;
  height: 36px;
  color: var(--nuw-close-icon);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
  position: absolute;
  top: 0;
  right: -44px;
}
.promotion-checkout-close:hover {
  background: var(--nuw-close-bg-hover);
}
.promotion-checkout-header {
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
  display: flex;
  position: relative;
}
.promotion-checkout-title {
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family:
    HuoshanQinghe Title,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
  display: flex;
}
.promotion-checkout-subtitle {
  color: var(--ugp-text-secondary);
  margin: 0;
  font-size: 13px;
  line-height: 20px;
}
.promotion-checkout-subtitle-strong {
  color: var(--nuw-text-default);
}
.promotion-checkout-body {
  flex-direction: column;
  gap: 8px;
  display: flex;
  position: relative;
}
.promotion-checkout-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  display: grid;
  position: relative;
}
.promotion-checkout-sku-card {
  border: 1px solid var(--nuw-row-border);
  background: var(--ugp-card-bg);
  min-width: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 24px;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  display: flex;
}
.promotion-checkout-sku-card:hover {
  background: var(--ugp-card-bg-hover);
}
.promotion-checkout-sku-card-selected,
.promotion-checkout-sku-card-selected:hover {
  border-color: var(--ugp-card-selected-border);
  background: var(--ugp-card-selected-bg);
}
.promotion-checkout-sku-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px;
  padding-left: 4px;
  display: flex;
}
.promotion-checkout-sku-content {
  flex-direction: column;
  gap: 8px;
  padding: 0 4px;
  display: flex;
}
.promotion-checkout-sku-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  overflow: hidden;
}
.promotion-checkout-sku-tag {
  border: 0.5px solid var(--ugp-tag-border);
  color: var(--ugp-text-brand);
  border-radius: 99px;
  flex: none;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}
.promotion-checkout-price-row,
.promotion-checkout-pricing-price-row {
  white-space: nowrap;
  align-items: flex-end;
  gap: 1.5px;
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  display: flex;
}
.promotion-checkout-price-symbol {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.promotion-checkout-price-number,
.promotion-checkout-pricing-number {
  font-size: 44px;
  font-weight: 400;
  line-height: 44px;
}
.promotion-checkout-price-suffix {
  font-family:
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 16px;
  line-height: 28px;
}
.promotion-checkout-price-original {
  color: var(--ugp-text-secondary);
  opacity: 0.75;
  margin-left: 6px;
  font-size: 16px;
  line-height: 26px;
  text-decoration: line-through;
}
.promotion-checkout-sku-divider {
  background: linear-gradient(
      var(--nuw-divider-subtle),
      var(--nuw-divider-subtle)
    )
    center/100% 1px no-repeat;
  height: 16px;
  display: block;
}
.promotion-checkout-power-row {
  align-items: flex-end;
  gap: 4px;
  display: flex;
}
.promotion-checkout-power-number {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 22px;
}
.promotion-checkout-power-unit {
  color: var(--ugp-text-secondary);
  opacity: 0.75;
  font-size: 12px;
  line-height: 18px;
}
.promotion-checkout-pricing-area .promotion-checkout-scan-tip-row {
  gap: 4px;
}
.promotion-checkout-pricing-area {
  border: 1px solid var(--nuw-row-border);
  background: var(--ugp-card-bg);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 24px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 32px 0;
  display: flex;
  position: relative;
}
.promotion-checkout-pricing-head {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  display: flex;
}
.promotion-checkout-pricing-suffix-wrap {
  display: inline-flex;
  position: relative;
}
.promotion-checkout-discount-chip {
  background: var(--nuw-discount-chip-bg);
  height: 30px;
  color: var(--nuw-discount-chip-text);
  white-space: nowrap;
  border-radius: 99px;
  align-items: center;
  padding: 0 10px;
  font-family:
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  display: inline-flex;
  position: absolute;
  top: -36px;
  left: 8px;
}
.promotion-checkout-discount-number {
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
}
.promotion-checkout-chip-digits {
  align-items: center;
  gap: 2px;
  margin-right: 4px;
  display: inline-flex;
}
.promotion-checkout-chip-digit {
  background: var(--nuw-discount-chip-digit-bg);
  font-variant-numeric: tabular-nums;
  border-radius: 4.6px;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 18.5px;
  font-family:
    Inter,
    -apple-system,
    blinkmacsystemfont,
    PingFang SC,
    Microsoft YaHei,
    Noto Sans CJK SC,
    sans-serif;
  font-size: 10.5px;
  line-height: 16px;
  display: inline-flex;
}
.promotion-checkout-chip-colon {
  font-size: 10.5px;
  line-height: 10.5px;
}
.promotion-checkout-renew-note {
  color: var(--ugp-text-secondary);
  opacity: 0.75;
  font-size: 12px;
  line-height: 18px;
}
.promotion-checkout-agreement {
  color: var(--ugp-text-secondary);
  gap: 4px;
  font-size: 12px;
  line-height: 18px;
  display: flex;
}
.promotion-checkout-agreement > span {
  opacity: 0.75;
}
.promotion-checkout-agreement a {
  color: inherit;
}
.payment-qr-membership-card {
  box-sizing: border-box;
  border-radius: 24px;
  flex-direction: column;
  align-items: center;
  width: 430px;
  max-width: 100%;
  padding-top: 24px;
  display: flex;
  position: relative;
}
.payment-qr-pay-header {
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
}
.payment-qr-pay-header-lead {
  flex: 0 0 36px;
}
.payment-qr-pay-header-trail {
  flex: 0 0 36px;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.payment-qr-qr-code {
  background-color: #fff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 148px;
  height: 148px;
  margin-bottom: 24px;
  display: flex;
  position: relative;
}
.payment-qr-qr-code .payment-qr-mask {
  color: #fff;
  cursor: pointer;
  background-color: #00000080;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
.payment-qr-price-row {
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  display: flex;
}
.payment-qr-price {
  color: #147dff;
  font-family: Plus Jakarta Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 19px;
}
.payment-qr-original-price {
  color: var(--vip-qr-price-original, #424242);
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-decoration: line-through;
}
.payment-qr-corner-mark {
  color: #fff;
  background: #ff6430;
  border-radius: 4px 4px 4px 0;
  justify-content: center;
  align-items: center;
  height: 20px;
  padding: 4px;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  display: flex;
}
.payment-qr-payment-method {
  align-items: center;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  display: flex;
}
.payment-qr-qrtext {
  text-align: center;
  border-radius: 0 0 24px 24px;
  width: 100%;
  padding: 12px;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.payment-qr-qrtext .payment-qr-qr-rightext {
  cursor: pointer;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.redemption-modal-download-modal {
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  padding: 0;
  display: flex;
}
.redemption-modal-content {
  border-radius: 12px;
  flex-direction: column;
  flex-basis: 480px;
  align-items: center;
  padding: 32px 40px;
  display: flex;
}
.redemption-modal-content .redemption-modal-title {
  color: #222531;
  text-align: center;
  font-family: PingFang SC;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}
.redemption-modal-content .redemption-modal-button {
  border-radius: 8px;
  flex-grow: 1;
  width: 0;
  height: fit-content;
  padding: 13px;
  line-height: normal;
}
.redemption-modal-content .redemption-modal-input {
  color: #0000004d;
  border-radius: 8px;
  height: 48px;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.redemption-modal-content .redemption-modal-input * {
  height: 100%;
}
.redemption-modal-exchange-input {
  font-size: 14px;
}
.redemption-modal-exchange-error {
  font-size: 12px;
}
.activity-banner-content {
  isolation: isolate;
  width: var(--activity-banner-width, auto);
  height: var(--activity-banner-height, auto);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.activity-banner-inner {
  z-index: 2;
  flex: 1 0 0;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  min-height: 0;
  padding: 20px 40px;
  display: flex;
  position: relative;
}
.activity-banner-left-content {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}
.activity-banner-tag {
  color: #ffffffe6;
  height: 22px;
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  mix-blend-mode: lighten;
  background: #ffffff14;
  border: 1px solid #ffffff29;
  border-radius: 99px;
  align-self: flex-start;
  align-items: center;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  display: inline-flex;
}
.activity-banner-title {
  color: #fff;
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  margin: 0;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
:is(.activity-banner-title div, .activity-banner-title p) {
  margin: 0;
}
.activity-banner-subtitle {
  color: #fff;
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  margin: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
:is(.activity-banner-subtitle div, .activity-banner-subtitle p) {
  margin: 0;
}
.activity-banner-countdown-wrapper {
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}
.activity-banner-countdown-container {
  mix-blend-mode: lighten;
  border: 1px solid #ffffff14;
  border-radius: 16px;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 20px;
  display: flex;
}
.activity-banner-countdown-item {
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  display: flex;
}
.activity-banner-card-number {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  min-width: 32px;
  height: 32px;
  font-family: var(--vip-paywall-font-family);
  font-variant-numeric: tabular-nums;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  display: flex;
}
.activity-banner-countdown-unit {
  color: #fff9;
  font-family: var(--vip-paywall-font-family);
  letter-spacing: 0.12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}
.activity-banner-countdown-separator {
  opacity: 0.7;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 2px;
  height: 32px;
  display: flex;
}
.activity-banner-countdown-separator:before,
.activity-banner-countdown-separator:after {
  content: "";
  background: #fff9;
  border-radius: 50%;
  width: 2px;
  height: 2px;
}
.activity-banner-content-full-width {
  border-radius: 20px;
  width: 100%;
  max-width: 1400px;
  height: 128px;
}
.activity-banner-content-full-width .activity-banner-inner {
  gap: 28px;
  padding: 0 28px;
}
.activity-banner-content-full-width .activity-banner-left-content {
  gap: 6px;
  padding-bottom: 4px;
}
.activity-banner-content-full-width .activity-banner-tag {
  margin-bottom: 2px;
}
.activity-banner-content-full-width .activity-banner-left-content-with-tag {
  padding-bottom: 12px;
}
.activity-banner-content-full-width .activity-banner-title {
  font-family: "HuoshanQinghe Title", var(--vip-paywall-font-family);
  padding: 0 2px;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
}
.activity-banner-content-full-width .activity-banner-subtitle {
  color: #ffffffbf;
  letter-spacing: 0;
  mix-blend-mode: lighten;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
@media (max-width: 991px) {
  .activity-banner-content {
    display: none;
  }
}
@media (max-width: 768px) {
  .activity-banner-content-course {
    border-radius: 12px;
    width: calc(100% - 16px);
    height: auto;
    min-height: 72px;
    margin: 12px 0;
    display: flex;
  }
  .activity-banner-content-course .activity-banner-inner {
    gap: 12px;
    padding: 14px 20px;
  }
  .activity-banner-content-course .activity-banner-countdown-wrapper {
    display: none;
  }
  .activity-banner-content-course .activity-banner-title {
    white-space: normal;
    font-size: 16px;
  }
  .activity-banner-content-course .activity-banner-subtitle {
    white-space: normal;
    font-size: 12px;
  }
}
.course-subscription-root {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.course-subscription-scroll-body {
  overflow-anchor: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 20px 60px 80px;
  display: flex;
}
.course-subscription-content {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1284px;
  display: flex;
}
.course-subscription-activity-banner {
  justify-content: center;
  width: 100%;
  display: flex;
}
.course-subscription-header {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0 26px;
  display: flex;
}
.course-subscription-title {
  color: var(--vip-text-primary);
  font-family: var(--vip-paywall-font-family);
  font-size: 28px;
  font-weight: 600;
  line-height: 40px;
}
.course-subscription-subtitle {
  color: var(--vip-text-muted);
  font-family: var(--vip-paywall-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.course-subscription-reason-block {
  text-align: center;
}
.course-subscription-reason-title {
  color: var(--vip-text-primary);
  font-family: var(--vip-paywall-font-family);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.course-subscription-reason-content {
  color: var(--vip-text-secondary);
  font-family: var(--vip-paywall-font-family);
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.course-subscription-state {
  color: var(--vip-text-muted);
  font-family: var(--vip-paywall-font-family);
  padding: 80px 0;
  font-size: 14px;
}
.course-subscription-card-list {
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  padding-top: 32px;
  display: flex;
}
.course-subscription-indicator {
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  display: none;
}
.course-subscription-indicator-dot {
  background: var(--course-indicator-dot);
  cursor: pointer;
  border: none;
  border-radius: 999px;
  flex: none;
  width: 8px;
  height: 8px;
  padding: 0;
  transition:
    width 0.2s,
    background-color 0.2s;
}
.course-subscription-indicator-dot-active {
  background: var(--course-indicator-dot-active);
  width: 20px;
}
.course-subscription-card {
  border: 1px solid var(--course-sku-border);
  background: var(--vip-card-bg);
  border-radius: 16px;
  flex-direction: column;
  flex: 0 0 310px;
  width: 310px;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.2s;
  display: flex;
  position: relative;
}
.course-subscription-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 20px #0000000d;
}
.course-subscription-month-header {
  background: var(--course-sku-month-header-bg);
}
.course-subscription-year-header {
  background: var(--course-sku-year-header-bg);
}
.course-subscription-card-year {
  border-color: var(--course-sku-year-border);
}
.course-subscription-with-promo-banner {
  border-color: var(--course-sku-promo-banner-bg);
}
.course-subscription-promo-banner {
  z-index: 0;
  background: var(--course-sku-promo-banner-bg);
  height: 50px;
  color: var(--course-sku-promo-banner-text);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  pointer-events: none;
  border-radius: 16px 16px 0 0;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding-top: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  display: flex;
  position: absolute;
  top: -32px;
  left: -1px;
  right: -1px;
}
.course-subscription-promo-banner-secondary {
  background: var(--course-promo-banner-secondary-bg);
  color: var(--course-sku-text-default);
}
.dark
  .course-subscription-promo-banner-secondary
  .course-subscription-promo-banner-icon {
  filter: invert();
}
.course-subscription-promo-banner-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.course-subscription-header-card {
  z-index: 1;
  border-radius: 16px;
  flex-direction: column;
  flex: none;
  justify-content: space-between;
  height: 340px;
  padding: 24px 24px 16px;
  display: flex;
  position: relative;
  box-shadow:
    0 8px 16px -4px #0000000a,
    0 2px 4px #0000000a;
}
.course-subscription-benefits-card {
  z-index: 1;
  border-radius: 16px;
  flex-direction: column;
  flex: auto;
  min-height: 0;
  padding: 24px;
  display: flex;
  position: relative;
}
.course-subscription-identity {
  flex-direction: column;
  gap: 0;
  width: 100%;
  display: flex;
}
.course-subscription-name-block {
  flex-direction: column;
  gap: 4px;
  width: 100%;
  display: flex;
}
.course-subscription-name-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}
.course-subscription-sku-name {
  color: var(--course-sku-text-default);
  font-family: var(--vip-paywall-font-family);
  word-break: break-word;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}
.course-subscription-sku-tag {
  background: var(--course-paywall-tag-bg);
  height: 27px;
  color: var(--course-paywall-tag-text);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  border-radius: 8px;
  flex: none;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  display: flex;
}
.course-subscription-sku-tag-muted {
  background: var(--course-paywall-tag-muted-bg);
  color: var(--course-paywall-tag-muted-text);
}
.course-subscription-sku-subtitle {
  color: var(--course-sku-text-secondary);
  font-family: var(--vip-paywall-font-family);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.course-subscription-credit-block {
  flex-direction: column;
  gap: 4px;
  width: 100%;
  display: flex;
}
.course-subscription-credit-row {
  align-items: flex-end;
  gap: 4px;
  display: flex;
}
.course-subscription-credit-number {
  color: var(--course-sku-text-default);
  font-family: var(--vip-paywall-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 26px;
}
.course-subscription-credit-unit {
  color: var(--course-sku-text-tertiary);
  font-family: var(--vip-paywall-font-family);
  padding-bottom: 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}
.course-subscription-estimate-info-icon {
  object-fit: contain;
  cursor: pointer;
  flex: none;
  width: 12px;
  height: 12px;
  margin-bottom: 4px;
}
.course-subscription-estimate-row {
  color: var(--course-sku-text-default);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: flex;
}
.course-subscription-estimate-row > * {
  flex: none;
}
.course-subscription-estimate-label {
  color: var(--course-sku-text-secondary);
}
.course-subscription-estimate-divider {
  background: var(--course-sku-border);
  width: 1px;
  height: 12px;
}
.course-subscription-purchase {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}
.course-subscription-price-row {
  justify-content: flex-start;
  align-items: baseline;
  width: 100%;
  height: 60px;
  line-height: 1.55;
  display: flex;
}
.course-subscription-price-currency {
  color: var(--vip-price-color);
  margin-right: 4px;
  font-family:
    Plus Jakarta Sans,
    Noto Sans JP,
    sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}
.course-subscription-price-number {
  color: var(--vip-price-color);
  font-family:
    Plus Jakarta Sans,
    sans-serif;
  font-size: 40px;
  font-weight: 600;
}
.course-subscription-price-period {
  color: var(--vip-price-color);
  margin-left: 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  position: relative;
  top: -3px;
}
.course-subscription-price-original {
  color: var(--vip-price-original);
  -webkit-font-smoothing: antialiased;
  margin-left: 8px;
  font-family:
    Plus Jakarta Sans,
    Noto Sans JP,
    sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
  text-decoration: line-through;
  position: relative;
  top: -2px;
}
.course-subscription-renew-line {
  color: var(--course-sku-text-secondary);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.course-subscription-cta {
  background: var(--course-sku-cta-bg);
  width: 100%;
  height: 40px;
  color: var(--course-sku-cta-text);
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  border: none;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  display: flex;
}
.course-subscription-cta-top-tier {
  background: var(--course-sku-year-cta-bg);
  color: var(--course-sku-year-cta-text);
}
.course-subscription-cta-disabled {
  background: var(--course-sku-cta-disabled-bg);
  color: var(--course-sku-cta-disabled-text);
  cursor: not-allowed;
}
.course-subscription-exclusive-note {
  color: var(--course-sku-text-secondary);
  font-family: var(--vip-paywall-font-family);
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}
.course-subscription-bottom-fade {
  background: linear-gradient(
    to top,
    var(--vip-modal-bottom-from),
    var(--vip-modal-bottom-to)
  );
  pointer-events: none;
  height: 38px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
@media (max-width: 768px) {
  .course-subscription-scroll-body {
    padding: 12px 0 60px;
  }
  .course-subscription-content {
    margin-top: auto;
    margin-bottom: auto;
  }
  .course-subscription-header {
    padding: 16px 24px 26px;
  }
  .course-subscription-card-list {
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 100%;
    padding-left: calc(50% - 155px);
    padding-right: calc(50% - 155px);
    overflow-x: auto;
  }
  .course-subscription-card-list::-webkit-scrollbar {
    display: none;
  }
  .course-subscription-card {
    scroll-snap-align: center;
  }
  .course-subscription-card:hover {
    box-shadow: none;
    transform: none;
  }
  .course-subscription-indicator {
    display: flex;
  }
}
.inline-label-root {
  background: var(--points-store-bg);
  width: 100%;
  min-width: 80px;
  height: 36px;
  color: var(--points-store-text);
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  padding: 2px 8px 2px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  transition: background-color 0.15s;
  display: flex;
  position: relative;
  overflow: hidden;
}
.inline-label-root:hover {
  background: var(--points-store-hover-bg);
}
.inline-label-root svg {
  width: 18px;
  height: 18px;
}
.inline-label-root:after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--points-store-entry-shimmer) 50%,
    transparent 100%
  );
  content: "";
  pointer-events: none;
  width: 36%;
  animation: 2.8s ease-in-out infinite inline-label-points-store-entry-shimmer;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  transform: skew(-24deg);
}
@keyframes inline-label-points-store-entry-shimmer {
  0% {
    transform: translate(0) skew(-24deg);
  }
  60%,
  to {
    transform: translate(450%) skew(-24deg);
  }
}
.inline-label-inline {
  width: auto;
}
.inline-label-label {
  white-space: nowrap;
  padding: 0 4px;
}
.field-label-root {
  background: var(--enterprise-entry-bg);
  min-width: 80px;
  height: 36px;
  color: var(--enterprise-entry-text);
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  padding: 2px 8px 2px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  transition: background-color 0.15s;
  display: flex;
}
.field-label-root:hover {
  background: var(--enterprise-entry-hover-bg);
}
.field-label-root svg {
  width: 18px;
  height: 18px;
}
.field-label-label {
  white-space: nowrap;
  padding: 0 4px;
}
.subscription-tab-tab-title {
  background: var(--vip-period-tab-bg);
  border-radius: 42px;
  flex-shrink: 0;
  align-self: center;
  width: fit-content;
  margin: auto;
  padding: 2px;
  display: flex;
  overflow: hidden;
}
.subscription-tab-tab-title .subscription-tab-tab-item {
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 28px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 158px;
  min-width: 158px;
  height: 36px;
  padding: 0 20px;
  transition:
    background-color 0.2s,
    color 0.2s;
  display: flex;
}
.subscription-tab-tab-title .subscription-tab-selected {
  color: var(--vip-period-tab-text);
  background-color: var(--vip-period-tab-selected-bg);
  box-shadow:
    0 8px 8px #0000000a,
    0 2px 2px #0000000a;
}
.dark .subscription-tab-tab-title .subscription-tab-selected {
  box-shadow:
    0 8px 16px #0000000a,
    0 2px 4px #0000000a;
}
.subscription-tab-tab-title .subscription-tab-unselected {
  color: var(--vip-period-tab-muted);
  background-color: #0000;
}
.subscription-tab-tab-title .subscription-tab-unselected:hover {
  color: var(--vip-period-tab-text);
}
.subscription-tab-tab-title
  .subscription-tab-unselected:hover
  .subscription-tab-title,
.subscription-tab-tab-title
  .subscription-tab-unselected:hover
  .subscription-tab-discount-label {
  opacity: 1;
}
.subscription-tab-tab-title .subscription-tab-title {
  color: inherit;
  font-family: var(--vip-paywall-font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
}
.subscription-tab-tab-title .subscription-tab-discount-label {
  color: var(--vip-period-tab-muted);
  font-family: var(--vip-paywall-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.subscription-tab-tab-title
  .subscription-tab-unselected
  .subscription-tab-title,
.subscription-tab-tab-title
  .subscription-tab-unselected
  .subscription-tab-discount-label {
  opacity: 0.75;
  transition: opacity 0.2s;
}
.subscription-tab-tab-title .subscription-tab-red-envelope-badge {
  background: var(--vip-tab-red-envelope-bg);
  color: var(--vip-tab-red-envelope-text);
  font-family: var(--vip-paywall-font-family);
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 11px;
  display: inline-flex;
}
.subscription-tab-tab-title .subscription-tab-discount-tokens {
  align-items: center;
  gap: 1.5px;
  display: inline-flex;
}
.subscription-tab-tab-title .subscription-tab-limited-badge {
  color: var(--vip-period-tab-limited-text);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}
.subscription-tab-compact {
  gap: 4px;
}
.subscription-tab-compact .subscription-tab-tab-item {
  height: 36px;
  line-height: 36px;
}
.subscription-tab-compact .subscription-tab-title {
  font-size: 13px;
}
.subscription-tab-mobile {
  width: 100%;
}
.subscription-tab-mobile .subscription-tab-tab-item {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}
.subscription-tab-mobile .subscription-tab-title {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .vip-paywall-responsive .subscription-tab-tab-title {
    width: 100%;
    max-width: 480px;
  }
  .vip-paywall-responsive
    .subscription-tab-tab-title
    .subscription-tab-tab-item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 0 8px;
  }
  :is(
    .vip-paywall-responsive
      .subscription-tab-tab-title
      .subscription-tab-discount-label,
    .vip-paywall-responsive
      .subscription-tab-tab-title
      .subscription-tab-limited-badge,
    .vip-paywall-responsive
      .subscription-tab-tab-title
      .subscription-tab-red-envelope-badge
  ) {
    display: none;
  }
}
.collapsible-fold-inner {
  width: 100%;
  position: relative;
}
.collapsible-fold-animating [data-sku-fold-card] {
  max-height: var(--sku-fold-full-height, none);
  transition: max-height 0.3s;
  overflow: hidden;
}
.collapsible-fold-collapsed [data-sku-fold-card] {
  max-height: var(--sku-fold-clip-height, none);
  clip-path: inset(0 0 var(--sku-fold-clip-pad, 0) 0);
  transition: max-height 0.3s;
  overflow: hidden;
}
.collapsible-fold-collapse-row {
  justify-content: center;
  width: 100%;
  padding: 28px 0 16px;
  display: flex;
}
.collapsible-fold-toggle-btn {
  background: var(--sku-fold-btn-bg);
  min-width: 80px;
  height: 36px;
  color: var(--sku-fold-btn-text);
  font-family: var(--vip-paywall-font-family);
  letter-spacing: 0.14px;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  padding: 2px 8px 2px 12px;
  font-size: 14px;
  line-height: 22px;
  transition: background-color 0.15s;
  display: inline-flex;
}
.collapsible-fold-toggle-btn:hover {
  background: var(--enterprise-entry-hover-bg);
}
.collapsible-fold-toggle-label {
  padding: 0 4px;
}
.collapsible-fold-toggle-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.collapsible-fold-toggle-icon-up {
  transform: rotate(180deg);
}
.promotion-countdown-countdown-timer {
  color: var(---, var(---, #303030));
  background: linear-gradient(246deg, #ffdcc5 9.42%, #fff4ec 94.95%);
  border: 0.5px solid #fff;
  border-radius: 6px 6px 0;
  font-family: PingFang SC;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.segmented-control-wrap {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}
.segmented-control-segments {
  background: var(--vip-level-switch-bg, #0000000f);
  border-radius: 999px;
  flex-shrink: 1;
  align-items: center;
  min-width: 0;
  height: 28px;
  padding: 2px;
  display: inline-flex;
}
.segmented-control-segment {
  appearance: none;
  font-family: var(--vip-paywall-font-family);
  color: var(--vip-level-switch-text, #919191);
  cursor: pointer;
  white-space: nowrap;
  background: 0 0;
  border: 0;
  border-radius: 999px;
  outline: 0;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  transition:
    background-color 0.15s,
    color 0.15s;
}
.segmented-control-segment:hover:not(.segmented-control-segment-active) {
  color: var(--vip-level-switch-text-hover, #525252);
}
.segmented-control-segment-active {
  background: var(--vip-level-switch-active-bg, #fff);
  color: var(--vip-level-switch-active-text, #0d0d0d);
  box-shadow: 0 1px 2px #0000000f;
}
.segmented-control-extra {
  flex-shrink: 0;
  align-items: center;
  display: flex;
}
.announcement-bar-bar {
  border: 1px solid var(--vip-section-border);
  width: 100%;
  color: var(--vip-sku-text);
  font-family: var(--vip-paywall-font-family);
  border-radius: 24px;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 24px;
  display: flex;
}
.announcement-bar-icon-box {
  background: var(--enterprise-entry-bg);
  color: currentColor;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}
.announcement-bar-texts {
  min-width: 0;
  color: var(--vip-sku-text-tertiary);
  flex-direction: column;
  flex: 1 0 0;
  gap: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: flex;
}
.announcement-bar-tip {
  white-space: pre-line;
}
.announcement-bar-cta {
  background: var(--enterprise-entry-bg);
  width: 96px;
  height: 40px;
  color: inherit;
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  flex-shrink: 0;
  padding: 2px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.enterprise-subscription-team-group-content {
  z-index: 10;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.enterprise-subscription-enterprise-contact-bar-wrap {
  width: 100%;
  margin-top: 8px;
  padding-bottom: 44px;
}
.enterprise-subscription-team-sku-tip-footer {
  width: 100%;
  color: var(--vip-level-switch-text);
  padding-top: 20px;
  padding-bottom: 44px;
  padding-left: 16px;
  font-size: 12px;
  font-weight: 400;
}
.enterprise-subscription-team-sku-tip {
  white-space: pre-line;
  gap: 4px;
  margin-top: 4px;
  line-height: 17px;
  display: flex;
}
.enterprise-subscription-team-sku-tip-icon {
  object-fit: contain;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 2px;
}
.enterprise-subscription-tab-row-with-points-store {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1280px;
  min-height: 0;
  margin: 0 auto;
  display: grid;
}
.enterprise-subscription-tab-row-mobile {
  width: 100%;
}
.enterprise-subscription-vip-purchase-mobile {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}
.enterprise-subscription-tab-row-lead {
  min-width: 0;
}
.enterprise-subscription-tab-row-center {
  justify-content: center;
  min-width: 0;
  display: flex;
}
.enterprise-subscription-tab-row-trail {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}
@media (max-width: 991px) {
  .enterprise-subscription-tab-row-trail {
    display: none;
  }
}
.enterprise-subscription-sku-bg {
  background: linear-gradient(
    180deg,
    var(--vip-modal-bg, #fff5e2) 0%,
    var(--vip-modal-bg, #fff) 106.56%
  );
  flex-shrink: 0;
  height: 400px;
  position: absolute;
  left: 0;
  right: 0;
}
.enterprise-subscription-vip-purchase-wrap {
  align-items: flex-start;
  width: 100%;
  margin-top: 60px;
  display: flex;
  position: relative;
}
.enterprise-subscription-shadow-left:before {
  content: "";
  background: linear-gradient(to right, var(--vip-modal-bg), transparent);
  z-index: 1;
  pointer-events: none;
  width: 96px;
  position: absolute;
  top: -40px;
  bottom: 0;
  left: 0;
}
.enterprise-subscription-shadow-right:after {
  content: "";
  background: linear-gradient(to left, var(--vip-modal-bg), transparent);
  z-index: 1;
  pointer-events: none;
  width: 96px;
  position: absolute;
  top: -40px;
  bottom: 0;
  right: 0;
}
.enterprise-subscription-vip-purchase {
  backface-visibility: hidden;
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  margin-top: -40px;
  padding-top: 40px;
  display: flex;
  overflow-x: auto;
}
.enterprise-subscription-vip-purchase::-webkit-scrollbar {
  display: none;
}
.enterprise-subscription-scrollable {
  justify-content: flex-start;
  margin-top: -40px;
  padding: 40px 0 0;
}
.enterprise-subscription-icon-button {
  background: var(--vip-sku-scroll-btn-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  width: 36px;
  height: 36px;
  color: var(--vip-sku-scroll-btn-icon);
  z-index: 2;
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition:
    opacity 0.2s,
    background-color 0.2s;
  display: flex;
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
}
.enterprise-subscription-icon-button svg {
  width: 14px;
  height: 14px;
}
.enterprise-subscription-icon-button:hover:not(:disabled) {
  background: var(--vip-sku-scroll-btn-hover-bg);
}
.enterprise-subscription-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.enterprise-subscription-arrow-rail {
  z-index: 2;
  pointer-events: none;
  flex-shrink: 0;
  align-self: stretch;
  width: 36px;
  position: relative;
}
.enterprise-subscription-arrow-track {
  box-sizing: border-box;
  height: calc(50% + 36px);
  padding-top: 296px;
}
.enterprise-subscription-arrow-track .enterprise-subscription-icon-button {
  pointer-events: auto;
}
.enterprise-subscription-left-button {
  margin-right: -36px;
}
.enterprise-subscription-right-button {
  margin-left: -36px;
}
.enterprise-subscription-group-purchase-footer {
  width: 100%;
  font-family: var(--vip-paywall-font-family);
  color: var(--vip-text-footer, #787878);
  margin-top: 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}
.enterprise-subscription-footer-link {
  color: #1f6dff;
  text-decoration: underline;
}
.enterprise-subscription-invite-context-bar {
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 8px 0;
  display: flex;
}
.enterprise-subscription-invite-context-avatar {
  border: 0.5px solid var(--stroke-selected-dark, #0690ae);
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.enterprise-subscription-invite-context-nickname {
  font-family: var(--vip-paywall-font-family);
  color: #fff;
  white-space: nowrap;
  margin-left: 4px;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}
.enterprise-subscription-invite-context-text {
  font-family: var(--vip-paywall-font-family);
  color: #fff;
  white-space: nowrap;
  margin-left: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}
@media (max-width: 1000px) {
  .vip-paywall-responsive .enterprise-subscription-tab-row-with-points-store {
    grid-template-columns: auto 1fr;
  }
  .vip-paywall-responsive .enterprise-subscription-tab-row-center {
    justify-content: flex-end;
  }
  .vip-paywall-responsive .enterprise-subscription-tab-row-trail {
    display: none;
  }
}
@media (max-width: 767px) {
  .vip-paywall-responsive .enterprise-subscription-tab-row-with-points-store {
    justify-content: center;
    display: flex;
  }
  .vip-paywall-responsive .enterprise-subscription-tab-row-lead {
    display: none;
  }
  .vip-paywall-responsive .enterprise-subscription-tab-row-center {
    flex: auto;
  }
  .vip-paywall-responsive .enterprise-subscription-vip-purchase {
    flex-direction: column;
    overflow-x: visible;
  }
}
@media (min-width: 1921px) {
  .vip-paywall-responsive .enterprise-subscription-team-group-content {
    width: max-content;
    max-width: none;
    left: 50%;
    transform: translate(-50%);
  }
}
.generation-hint-rules-button {
  color: #f76560;
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  background: #ffc1c11a;
  border: none;
  border-radius: 12px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: opacity 0.15s;
  display: inline-flex;
}
.generation-hint-rules-label {
  white-space: nowrap;
}
.subscription-layout-scroll-content {
  padding-left: 48px;
  padding-right: 48px;
}
@media (max-width: 767px) {
  .subscription-layout-scroll-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.subscription-layout-content-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}
.subscription-layout-narrow-glow {
  opacity: 0.3;
  pointer-events: none;
  background: radial-gradient(70% 100% at 50% 0, #5ddcff4d 0%, #5ddcff00 100%);
  height: 240px;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.dark .subscription-layout-narrow-glow {
  opacity: 1;
  mix-blend-mode: lighten;
  background: radial-gradient(70% 100% at 50% 0, #5ddcff66 0%, #5ddcff00 100%);
}
@media (max-width: 1000px) {
  .subscription-layout-narrow-glow {
    display: block;
  }
}
.subscription-layout-narrow-title {
  flex-direction: column;
  align-items: center;
  margin: 48px 0;
  display: none;
}
@media (max-width: 767px) {
  .subscription-layout-narrow-title {
    margin: 60px 0 36px;
  }
}
.subscription-layout-narrow-title {
  color: var(--vip-paywall-userinfo-text);
  font-family: "HuoshanQinghe Title", var(--vip-paywall-font-family);
  letter-spacing: 0.28px;
  text-align: center;
  white-space: nowrap;
  font-size: 28px;
  font-weight: 700;
  line-height: 36px;
}
@media (max-width: 1000px) {
  .subscription-layout-narrow-title {
    display: flex;
  }
}
.subscription-layout-narrow-title-accent {
  color: var(--vip-paywall-userinfo-brand);
}
.subscription-layout-cost-table-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 44px;
}
@media (max-width: 767px) {
  .subscription-layout-cost-table-wrap {
    display: none;
  }
}
.subscription-layout-paywall-header {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 60px;
  display: flex;
}
@media (max-width: 1000px) {
  .subscription-layout-paywall-header {
    display: none;
  }
}
.subscription-layout-team-toggle {
  background: var(--vip-paywall-team-toggle-bg);
  height: 36px;
  color: var(--vip-paywall-userinfo-text);
  border: none;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 2px 16px 2px 12px;
  transition: background-color 0.15s;
  display: inline-flex;
}
.subscription-layout-team-toggle:hover {
  background: var(--vip-paywall-team-toggle-hover-bg);
}
.subscription-layout-team-toggle {
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
}
.subscription-layout-team-switch-track {
  background: var(--vip-paywall-team-switch-bg);
  border-radius: 999px;
  flex: 0 0 32px;
  align-items: center;
  width: 32px;
  height: 18px;
  padding: 2px;
  transition: background 0.2s;
  display: inline-flex;
  position: relative;
}
.subscription-layout-team-switch-thumb {
  background: var(--vip-paywall-team-switch-thumb);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
  display: block;
}
.subscription-layout-team-switch-track-checked {
  background: var(--vip-paywall-team-switch-active-bg);
}
.subscription-layout-team-switch-track-checked
  .subscription-layout-team-switch-thumb {
  background: var(--vip-paywall-team-switch-active-thumb);
  transform: translate(14px);
}
.subscription-layout-team-toggle-badge {
  background: var(--vip-paywall-userinfo-tag-bg);
  height: 24px;
  color: var(--vip-paywall-userinfo-brand);
  border-radius: 7px;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  line-height: 18px;
  display: inline-flex;
}
.subscription-layout-team-group-content {
  z-index: 10;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  min-height: 300px;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.subscription-layout-lib-group-content {
  z-index: 10;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.subscription-layout-lib-group-content-mobile {
  z-index: 0;
  width: 100%;
}
.subscription-layout-mobile-tab-wrap {
  width: 100%;
}
.subscription-layout-sku-list-mobile {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 24px;
  display: flex;
}
.subscription-layout-tab-row-with-points-store {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1280px;
  min-height: 0;
  margin: 0 auto;
  display: grid;
}
.subscription-layout-tab-row-lead {
  min-width: 0;
}
.subscription-layout-tab-row-center {
  justify-content: center;
  min-width: 0;
  display: flex;
}
.subscription-layout-tab-row-trail {
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}
@media (max-width: 1000px) {
  .subscription-layout-tab-row-trail {
    display: none;
  }
}
.subscription-layout-sku-list-wrap {
  align-items: stretch;
  width: 100%;
  margin-top: 60px;
  display: flex;
  position: relative;
}
.subscription-layout-shadow-left:before {
  content: "";
  background: linear-gradient(to right, var(--vip-modal-bg), transparent);
  z-index: 1;
  pointer-events: none;
  width: 96px;
  position: absolute;
  top: -40px;
  bottom: 0;
  left: 0;
}
.subscription-layout-shadow-right:after {
  content: "";
  background: linear-gradient(to left, var(--vip-modal-bg), transparent);
  z-index: 1;
  pointer-events: none;
  width: 96px;
  position: absolute;
  top: -40px;
  bottom: 0;
  right: 0;
}
.subscription-layout-sku-list {
  backface-visibility: hidden;
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  margin-top: -40px;
  padding-top: 40px;
  display: flex;
  overflow-x: auto;
}
.subscription-layout-sku-list::-webkit-scrollbar {
  display: none;
}
.subscription-layout-scrollable {
  justify-content: flex-start;
}
.subscription-layout-icon-button {
  background: var(--vip-sku-scroll-btn-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  width: 36px;
  height: 36px;
  color: var(--vip-sku-scroll-btn-icon);
  z-index: 2;
  cursor: pointer;
  border: none;
  border-radius: 9999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  transition:
    opacity 0.2s,
    background-color 0.2s;
  display: flex;
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
}
.subscription-layout-icon-button svg {
  width: 14px;
  height: 14px;
}
.subscription-layout-icon-button:hover:not(:disabled) {
  background: var(--vip-sku-scroll-btn-hover-bg);
}
.subscription-layout-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.subscription-layout-arrow-rail {
  z-index: 2;
  pointer-events: none;
  flex-shrink: 0;
  align-self: stretch;
  width: 36px;
  position: relative;
}
.subscription-layout-arrow-track {
  box-sizing: border-box;
  height: calc(50% + 36px);
  padding-top: 254px;
}
.subscription-layout-arrow-track .subscription-layout-icon-button {
  pointer-events: auto;
}
.subscription-layout-left-button {
  margin-right: -36px;
}
.subscription-layout-right-button {
  margin-left: -36px;
}
.subscription-layout-title {
  color: var(--vip-price-color, #0d0d0d);
  text-align: center;
  font-family: var(--vip-paywall-font-family);
  margin-bottom: 12px;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.subscription-layout-subtitle {
  color: var(--vip-text-secondary, #424242);
  font-family: var(--vip-paywall-font-family);
  margin-bottom: 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.subscription-layout-contentfooter {
  color: var(--vip-text-muted, #787878);
  align-self: flex-start;
  gap: 5px;
  padding-top: 20px;
  font-size: 12px;
  font-weight: 400;
}
.subscription-layout-contentfooter a {
  color: var(--vip-footer-link, #1f6dff);
  text-decoration: underline;
}
@media (max-width: 1000px) {
  .subscription-layout-tab-row-with-points-store {
    grid-template-columns: auto 1fr;
  }
  .subscription-layout-tab-row-center {
    justify-content: flex-end;
  }
}
@media (max-width: 767px) {
  .subscription-layout-tab-row-with-points-store {
    justify-content: center;
    display: flex;
  }
  .subscription-layout-tab-row-lead {
    display: none;
  }
  .subscription-layout-tab-row-center {
    flex: auto;
  }
  .subscription-layout-sku-list {
    flex-direction: column;
    overflow-x: visible;
  }
}
@media (min-width: 1921px) {
  .subscription-layout-lib-group-content {
    width: max-content;
    max-width: none;
    left: 50%;
    transform: translate(-50%);
  }
}
.subscription-levels-root {
  background: var(--qualification-paywall-bg);
  width: 100%;
  height: 100%;
  color: var(--qualification-paywall-text);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}
.subscription-levels-close-button {
  z-index: 4;
  width: 32px;
  height: 32px;
  color: var(--qualification-paywall-text);
  cursor: pointer;
  background: 0 0;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 8px;
  display: flex;
  position: absolute;
  top: 20px;
  right: 20px;
}
.subscription-levels-close-button:hover {
  background: var(--vip-close-hover-bg);
}
.subscription-levels-close-button svg {
  width: 16px;
  height: 16px;
}
.subscription-levels-title-row {
  padding: 68px 0 16px;
  position: relative;
}
.subscription-levels-title {
  color: var(--qualification-paywall-text);
  font-family: var(--vip-paywall-font-family);
  text-align: center;
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 42px;
}
.subscription-levels-sticky-bar {
  z-index: 2;
  background: var(--qualification-paywall-bg);
  justify-content: center;
  align-items: center;
  height: 72px;
  padding: 16px 0;
  display: flex;
  position: sticky;
  top: 0;
}
.subscription-levels-team-switch {
  height: 24px;
  color: var(--qualification-paywall-text);
  font-family: var(--vip-paywall-font-family);
  cursor: pointer;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 14px;
  line-height: 22px;
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 75px;
  transform: translateY(-50%);
}
.subscription-levels-title-row-switch {
  top: 77px;
  left: 72px;
  transform: none;
}
.subscription-levels-switch-track {
  background: var(--qualification-paywall-switch-bg);
  border-radius: 999px;
  flex: 0 0 36px;
  align-items: center;
  width: 36px;
  height: 20px;
  padding: 2px;
  transition: background 0.2s;
  display: inline-flex;
  position: relative;
}
.subscription-levels-switch-thumb {
  background: var(--qualification-paywall-switch-thumb);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
  display: block;
  box-shadow: 0 1px 3px #0003;
}
.subscription-levels-switch-track-checked {
  background: var(--qualification-paywall-switch-active-bg);
}
.subscription-levels-switch-track-checked .subscription-levels-switch-thumb {
  transform: translate(16px);
}
.subscription-levels-scroll-body {
  overscroll-behavior: contain;
  scrollbar-width: none;
  flex: auto;
  min-height: 0;
  padding: 0 0 80px;
  overflow: hidden auto;
}
.subscription-levels-scroll-body::-webkit-scrollbar {
  display: none;
}
.subscription-levels-content-area {
  z-index: 0;
  margin-top: 44px;
  padding: 0 60px;
  position: relative;
}
.subscription-levels-card-list {
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  display: flex;
}
.subscription-levels-card-list-single-level {
  gap: 20px;
}
.subscription-levels-level-card {
  min-width: 0;
  max-width: 472px;
  flex: 1 1 0 !important;
  width: auto !important;
}
.subscription-levels-period-card {
  min-width: 0;
  flex: 0 374px !important;
  width: 374px !important;
}
.subscription-levels-state {
  min-height: 240px;
  color: var(--vip-text-muted);
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: flex;
}
.subscription-levels-view-all-button {
  z-index: 3;
  border: 0.5px solid var(--qualification-paywall-view-all-border);
  background: var(--qualification-paywall-view-all-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  height: 42px;
  color: var(--qualification-paywall-view-all-text);
  font-family: var(--vip-paywall-font-family);
  white-space: nowrap;
  cursor: pointer;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 13px;
  line-height: 18px;
  display: inline-flex;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translate(-50%);
  box-shadow:
    0 4px 10px #0000001a,
    0 2px 4px #0000000a;
}
.subscription-header-title {
  color: var(--vip-price-color, #0d0d0d);
  text-align: center;
  font-family: var(--vip-paywall-font-family);
  margin-bottom: 12px;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.subscription-header-subtitle {
  color: var(--vip-text-secondary, #424242);
  font-family: var(--vip-paywall-font-family);
  margin-bottom: 24px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.subscription-header-tab-title {
  border: none;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin-bottom: 20px;
  display: flex;
}
.subscription-header-tab-title .subscription-header-tab-item {
  text-align: center;
  cursor: pointer;
  width: 170px;
  color: var(--vip-text-muted, #787878);
  line-height: 36px;
  font-family: var(--vip-paywall-font-family);
  flex-shrink: 0;
  padding-top: 8px;
  font-size: 18px;
  font-style: normal;
  line-height: normal;
  transition: all 0.2s;
}
.subscription-header-tab-title .subscription-header-selected {
  color: var(--vip-text-primary, #0d0d0d);
  font-family: "HuoshanQinghe Title", var(--vip-paywall-font-family);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.subscription-header-tab-title .subscription-header-unselected {
  color: var(--vip-text-muted, #787878);
  border-bottom: 2px solid #0000;
  font-weight: 500;
}
.subscription-header-reason-title {
  color: var(--vip-text-primary, #0d0d0d);
  text-align: center;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.subscription-header-reason-content {
  color: var(--vip-text-secondary, #424242);
  text-align: center;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.subscription-header-team-group-content {
  z-index: 10;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  position: relative;
}
.subscription-header-line {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--vip-benefit-separator, #0d0d0d1a) 50%,
    transparent 100%
  );
  width: 100%;
  height: 1px;
  margin-bottom: 28px;
  position: relative;
  top: -1px;
}
.subscription-header-paywall-header {
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 48px;
  display: flex;
}
@media (max-width: 1000px) {
  .subscription-header-paywall-header {
    margin-bottom: 0;
    padding-top: 48px;
  }
}
.membership-modal-empty-center {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 50px;
  display: flex;
  position: relative;
}
.membership-modal-container-model-footter {
  flex-direction: column;
  align-items: flex-start;
  width: 304px;
  height: 166px;
  padding: 106px 12px 12px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}
.membership-modal-white {
  width: 24px;
  height: 24px;
}
.membership-modal-custom-tabs
  .membership-modal-ant-tabs-nav
  .membership-modal-ant-tabs-tab {
  background-color: #0000 !important;
  border: none !important;
}
.membership-modal-custom-tabs
  .membership-modal-ant-tabs-nav
  .membership-modal-ant-tabs-tab-active {
  color: #efd1d1 !important;
}
:is(
  .membership-modal-modal-style .ant-modal,
  .membership-modal-modal-style .ant-modal-content
) {
  background-color: var(--vip-modal-bg, #f7f7f7);
  border: 1px solid var(--vip-modal-border, #e3e3e3);
  border-radius: 16px;
  max-height: calc(100vh - 50px);
  overflow: hidden;
  padding: 0 !important;
}
.membership-modal-modal-style .ant-modal-body {
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
}
.membership-modal-fullscreen-purchase-modal {
  height: 100vh;
  margin: 0;
  padding-bottom: 0;
  top: 0;
  width: 100vw !important;
  max-width: 100vw !important;
}
.membership-modal-fullscreen-purchase-modal .ant-modal-content {
  border: 0;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  max-height: 100vh;
}
.membership-modal-fullscreen-purchase-modal .ant-modal-body {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}
.membership-modal-combined-paywall-modal-root .ant-modal-wrap {
  overscroll-behavior: none;
  overflow: hidden;
}
.membership-modal-qualification-paywall-modal-root .ant-modal-wrap {
  overscroll-behavior: none;
  padding: 40px 0;
  overflow: hidden;
}
.membership-modal-qualification-paywall-modal {
  margin: 0 auto;
  padding-bottom: 0;
  top: 0;
  width: 1080px !important;
  max-width: min(1080px, 100vw - 80px) !important;
}
.membership-modal-qualification-paywall-modal .ant-modal-content {
  border: 1px solid var(--vip-modal-border);
  background: var(--qualification-paywall-bg);
  border-radius: 32px;
  width: 100%;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
}
.membership-modal-qualification-paywall-modal .ant-modal-body {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
.membership-modal-qualification-paywall-modal-single-level {
  width: 1282px !important;
  max-width: min(1282px, 100vw - 80px) !important;
}
.membership-modal-no-shadow-style {
  max-width: 100% !important;
}
:is(
  .membership-modal-no-shadow-style .ant-modal,
  .membership-modal-no-shadow-style .ant-modal-content
) {
  box-shadow: none;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.membership-modal-point-content-area {
  background: var(--charge-content-bg, #f7f7f7);
  width: 100%;
  height: 100%;
}
.membership-modal-sku-content-area {
  position: relative;
}
.membership-modal-container {
  border-radius: 12px;
  flex-grow: 1;
  width: 0;
  display: flex;
}
.membership-modal-container .membership-modal-left-container {
  background-position: 0 0;
  background-repeat: no-repeat;
  flex: 1;
  width: 100%;
  height: 500px;
  position: relative;
  background-size: 100% 100% !important;
}
.membership-modal-container .membership-modal-qr-code-right {
  background-position: 0 0;
  background-repeat: no-repeat;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  width: 260px;
  position: relative;
  background-color: #0000 !important;
  background-size: 100% 100% !important;
}
.membership-modal-container
  .membership-modal-qr-code-right
  .membership-modal-close {
  cursor: pointer;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 6px;
  right: 6px;
}
.membership-modal-container
  .membership-modal-qr-code-right
  .membership-modal-close
  img {
  width: 24px;
  height: 24px;
}
.membership-modal-custom-close-img {
  top: 6px;
  right: 6px;
  position: absolute !important;
}
.membership-modal-ant-modal-close {
  top: 6px;
}
.membership-modal-avatar {
  flex-shrink: 0;
  margin-right: 20px;
}
.membership-modal-up-grade {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-top: 233px;
  margin-bottom: 31px;
  display: flex;
}
.membership-modal-up-grade .membership-modal-up-gradeleft {
  color: #814600;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--vip-paywall-font-family);
  word-wrap: break-word;
  cursor: pointer;
}
.membership-modal-up-grade .membership-modal-up-gradeleft-right {
  color: #814600;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--vip-paywall-font-family);
  word-wrap: break-word;
  cursor: pointer;
}
.membership-modal-qr-code-panel {
  flex-direction: column;
  justify-content: end;
  align-items: center;
  height: 100%;
  display: flex;
}
.membership-modal-qr-code-panel .membership-modal-qr-code-content {
  flex-direction: column;
  align-items: center;
  display: flex;
}
.membership-modal-qr-code-panel
  .membership-modal-qr-code-content
  .membership-modal-qr-code-image {
  flex-shrink: 0;
  width: 156px;
  height: 156px;
}
.membership-modal-qr-code-panel
  .membership-modal-qr-code-content
  .membership-modal-qr-code-text {
  color: #814600;
  font-family: var(--vip-paywall-font-family);
  margin-top: 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.membership-modal-bg {
  background-image: url(/assets/images/reference/reference-image-031.png);
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  width: 100%;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
}
.dark .membership-modal-bg {
  background-image: url(/assets/images/reference/reference-image-217.png);
}
.membership-modal-team-mod {
  background: linear-gradient(#33b4ff4d 0%, #ffffff4d 60%);
  flex-direction: column;
  align-items: center;
  padding: 60px 35px 32px;
  display: flex;
}
.membership-modal-team-mod .membership-modal-team-title {
  color: #222531;
  text-align: center;
}
.membership-modal-team-mod .membership-modal-team-ok {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: #326bff;
  border-radius: 8px;
  flex-shrink: 0;
  width: 200px;
  height: 48px;
  margin-top: 32px;
  font-weight: 500;
  line-height: 48px;
}
.membership-modal-tab-title {
  z-index: 1;
  height: 64px;
  display: flex;
  position: relative;
}
.membership-modal-tab-title .membership-modal-tab-item {
  font-family: var(--vip-paywall-font-family);
  text-align: center;
  cursor: pointer;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  padding-top: 13px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  display: flex;
}
.membership-modal-tab-title .membership-modal-selected {
  color: var(--vip-text-primary, #222531);
}
.membership-modal-tab-title
  .membership-modal-selected
  .membership-modal-sub-title {
  color: #adadad;
  text-align: center;
  font-family: var(--vip-paywall-font-family);
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.membership-modal-tab-title .membership-modal-unselected {
  color: var(--vip-text-muted, #787878);
  font-size: 16px;
}
.membership-modal-tab-title
  .membership-modal-unselected
  .membership-modal-sub-title {
  color: #adadad;
  text-align: center;
  font-family: var(--vip-paywall-font-family);
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.membership-modal-vertical-line {
  background: linear-gradient(#0d0d0d00 0%, #0d0d0d1a 50%, #0d0d0d00 100%);
  width: 1px;
  height: 100%;
}
.purchase-qr-container {
  stroke-width: 1px;
  stroke: #2a2a2a;
  filter: drop-shadow(0 2px 16px #0006);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: linear-gradient(117deg, #232221d9 12.96%, #0a0a0ad9 93%);
  border-radius: 8px;
  outline: 1px solid #2a2a2a;
  width: fit-content;
  min-width: 342px;
  min-height: 224px;
  padding: 20px;
  overflow: hidden;
}
.purchase-qr-container .purchase-qr-inner-card {
  background: linear-gradient(#2c2c2c 0%, #1a1a1a 55.49%, #232323 100%);
  border-radius: 8px;
  display: flex;
  position: relative;
  box-shadow:
    0 2px 10px #0000004d,
    inset 0.5px 1px #fff3,
    inset -0.5px -0.5px #0006;
}
.purchase-qr-container .purchase-qr-inner-card .purchase-qr-title {
  color: #ffffffa6;
  font-feature-settings:
    "clig" off,
    "liga" off;
  background: linear-gradient(#2c2c2ccc 0%, #1a1a1acc 55.49%, #232323cc 100%);
  border-radius: 8px 0 20px 8px;
  align-self: flex-start;
  width: fit-content;
  padding: 8px 20px;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  box-shadow:
    inset 0.5px 1px #fff3,
    inset -0.5px -0.5px #0006;
}
.purchase-qr-container .purchase-qr-inner-card .purchase-qr-sku-name {
  color: #fff;
  font-family: PingFang SC;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.purchase-qr-container .purchase-qr-inner-card .purchase-qr-price {
  color: #fff;
  font-family: PingFang SC;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.purchase-qr-container .purchase-qr-inner-card .purchase-qr-discount {
  color: #fff;
  background: linear-gradient(90deg, #ffa700 0%, #ff006b 100%);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
}
.purchase-qr-container .purchase-qr-inner-card .purchase-qr-tip {
  color: #999;
  margin-top: 8px;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.purchase-qr-container .purchase-qr-inner-card .purchase-qr-scan-text {
  color: #fff6;
  font-family: PingFang SC;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
.purchase-qr-container .purchase-qr-inner-card .purchase-qr-qr-code {
  text-align: center;
  background-color: #fff;
  background-position: 0 0;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 92px;
  display: flex;
  position: relative;
  background-size: 100% 100% !important;
}
.purchase-qr-container
  .purchase-qr-inner-card
  .purchase-qr-qr-code
  .purchase-qr-qr-code-real {
  width: 80px;
}
.purchase-qr-container
  .purchase-qr-inner-card
  .purchase-qr-qr-code
  .purchase-qr-mask {
  background: #0009;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 92px;
  display: flex;
  position: absolute;
  top: 0%;
  left: 0%;
}
.purchase-qr-container
  .purchase-qr-inner-card
  .purchase-qr-qr-code
  .purchase-qr-mask
  span {
  color: #fff;
  word-wrap: break-word;
  font-family: PingFang SC;
  font-size: 12px;
  font-weight: 400;
}
.purchase-qr-container .purchase-qr-btn {
  color: #16181d;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(90deg, #ffe3ca 0%, #ffd5a4 100%);
  border-radius: 100px;
  margin-top: 20px;
  padding: 11px;
  font-family: PingFang SC;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}
.modal-heading-shell {
  background: var(--generation-confirm-bg);
  width: 430px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--course-checkout-shadow);
  border-radius: 24px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 24px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.modal-heading-title {
  width: 100%;
  color: var(--course-sku-text-default);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  overflow: hidden;
}
.modal-heading-close-btn {
  z-index: 10;
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  position: absolute;
  top: 16px;
  right: 16px;
}
.modal-heading-close-btn:hover {
  background: var(--vip-close-hover-bg);
}