.app-shell {
  position: relative;
  color: var(--ui-text-primary);
  container-type: inline-size;
  --app-download-height: 12.8205cqw;
  --app-header-height: 70px;
  --app-content-padding-top: calc(var(--app-download-height) + var(--app-header-height));
  --app-content-padding-bottom: 13.8462cqw;
  --app-tabbar-height: 13.8462cqw;
}

.app-main {
  position: absolute;
  inset: var(--app-content-padding-top) 0 var(--app-tabbar-height);
  height: auto;
  padding: 0 var(--app-content-padding-x, 0);
  overflow-y: auto;
  background:
    var(--ui-gradient-app-main-bg),
    var(--app-window-bg);
}

.app-shell.is-route-loading .app-main,
.app-shell.is-layer-loading .app-main {
  cursor: progress;
}

.app-shell.is-route-loading-visible .app-main::before,
.app-shell.is-layer-loading .app-main::before,
.app-shell.is-route-loading-visible .app-main::after,
.app-shell.is-layer-loading .app-main::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.app-shell.is-route-loading-visible .app-main::before,
.app-shell.is-layer-loading .app-main::before {
  z-index: calc(var(--z-modal) + 1);
  inset: 0;
  left: 0;
  top: 0;
  background:
    radial-gradient(circle at center, rgba(18, 23, 33, .32), rgba(9, 12, 18, .12) 52%, rgba(9, 12, 18, 0));
  backdrop-filter: blur(1.5px);
}

.app-shell.is-route-loading-visible .app-main::after,
.app-shell.is-layer-loading .app-main::after {
  z-index: calc(var(--z-modal) + 2);
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 3px solid rgba(255, 255, 255, .28);
  border-top-color: var(--agent-theme-primary, var(--lite-accent, #05d76a));
  border-radius: 999px;
  background: rgba(8, 11, 17, .34);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  animation: lite-spin .72s linear infinite;
}

.lite-route-loading,
.lite-layer-loading {
  position: relative;
}

.lite-layer-loading {
  min-height: 96px;
}

.app-shell > .lite-layer-loading {
  min-height: 0;
}

.app-shell > .lite-layer-loading::before,
.app-shell > .lite-layer-loading::after {
  display: none;
}

.lite-layer-loading::before,
.lite-layer-loading::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.lite-layer-loading::before {
  inset: 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
  background-size: 220% 100%;
  animation: lite-loading-sheen 1.1s ease-in-out infinite;
}

.lite-layer-loading::after {
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: var(--agent-theme-primary, var(--lite-accent, #05d76a));
  border-radius: 999px;
  animation: lite-spin .72s linear infinite;
}

[data-include-error="true"] {
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .055);
  border-radius: 8px;
}

[data-include-error="true"]::before {
  content: "Loading failed. Try again.";
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-form);
}

@keyframes lite-loading-sheen {
  0% {
    background-position: 180% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.is-route-loading-visible .app-main::after,
  .app-shell.is-layer-loading .app-main::after,
  .lite-layer-loading::after {
    animation-duration: 1.8s;
  }

  .lite-layer-loading::before {
    animation: none;
  }
}

.app-shell.route-home {
  background: var(--color-screen-bg, var(--color-bg-300));
}

.app-shell.route-home .app-main {
  background: var(--color-screen-bg, var(--color-bg-300));
}

.app-shell.route-home.is-route-loading .app-main {
  cursor: auto;
}

.app-shell.route-home.is-route-loading-visible .app-main::before,
.app-shell.route-home.is-route-loading-visible .app-main::after {
  content: none;
  display: none;
}

.app-shell.route-restricted,
.app-shell.route-download,
.app-shell.route-ranking-reward-source-empty,
.app-shell.route-sport-category-direct-blank,
.app-shell.route-game-search-direct-blank,
.app-shell.route-withdraw-method-list-source-empty,
.app-shell.route-withdraw-method-edit-source-empty,
.app-shell.route-iframe {
  background: var(--ui-gradient-source-empty-bg);
}

.app-shell.route-restricted .app-main,
.app-shell.route-download .app-main,
.app-shell.route-ranking-reward-source-empty .app-main,
.app-shell.route-sport-category-direct-blank .app-main,
.app-shell.route-game-search-direct-blank .app-main,
.app-shell.route-withdraw-method-list-source-empty .app-main,
.app-shell.route-withdraw-method-edit-source-empty .app-main,
.app-shell.route-iframe .app-main {
  inset: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-gradient-source-empty-bg);
}

.app-shell.route-restricted .pwa-l5-bar,
.app-shell.route-restricted .l5-header,
.app-shell.route-restricted .bottom-tabbar,
.app-shell.route-restricted [data-floating-activity],
.app-shell.route-restricted .l5-support,
.app-shell.route-restricted .l5-side-handle,
.app-shell.route-download .pwa-l5-bar,
.app-shell.route-download .l5-header,
.app-shell.route-download .bottom-tabbar,
.app-shell.route-download [data-floating-activity],
.app-shell.route-download .l5-support,
.app-shell.route-download .l5-side-handle,
.app-shell.route-ranking-reward-source-empty .pwa-l5-bar,
.app-shell.route-ranking-reward-source-empty .l5-header,
.app-shell.route-ranking-reward-source-empty .bottom-tabbar,
.app-shell.route-ranking-reward-source-empty [data-floating-activity],
.app-shell.route-ranking-reward-source-empty .l5-support,
.app-shell.route-ranking-reward-source-empty .l5-side-handle,
.app-shell.route-sport-category-direct-blank .pwa-l5-bar,
.app-shell.route-sport-category-direct-blank .l5-header,
.app-shell.route-sport-category-direct-blank .bottom-tabbar,
.app-shell.route-sport-category-direct-blank [data-floating-activity],
.app-shell.route-sport-category-direct-blank .l5-support,
.app-shell.route-sport-category-direct-blank .l5-side-handle,
.app-shell.route-game-search-direct-blank .pwa-l5-bar,
.app-shell.route-game-search-direct-blank .l5-header,
.app-shell.route-game-search-direct-blank .bottom-tabbar,
.app-shell.route-game-search-direct-blank [data-floating-activity],
.app-shell.route-game-search-direct-blank .l5-support,
.app-shell.route-game-search-direct-blank .l5-side-handle,
.app-shell.route-withdraw-method-list-source-empty .pwa-l5-bar,
.app-shell.route-withdraw-method-list-source-empty .l5-header,
.app-shell.route-withdraw-method-list-source-empty .bottom-tabbar,
.app-shell.route-withdraw-method-list-source-empty [data-floating-activity],
.app-shell.route-withdraw-method-list-source-empty .l5-support,
.app-shell.route-withdraw-method-list-source-empty .l5-side-handle,
.app-shell.route-withdraw-method-edit-source-empty .pwa-l5-bar,
.app-shell.route-withdraw-method-edit-source-empty .l5-header,
.app-shell.route-withdraw-method-edit-source-empty .bottom-tabbar,
.app-shell.route-withdraw-method-edit-source-empty [data-floating-activity],
.app-shell.route-withdraw-method-edit-source-empty .l5-support,
.app-shell.route-withdraw-method-edit-source-empty .l5-side-handle,
.app-shell.route-iframe .pwa-l5-bar,
.app-shell.route-iframe .l5-header,
.app-shell.route-iframe .bottom-tabbar,
.app-shell.route-iframe [data-floating-activity],
.app-shell.route-iframe .l5-support,
.app-shell.route-iframe .l5-side-handle {
  display: none !important;
}

.app-shell.route-restricted [data-route-page="restricted"],
.app-shell.route-download [data-route-page="download"],
.app-shell.route-ranking-reward-source-empty [data-route-page="ranking-reward-source-empty"],
.app-shell.route-sport-category-direct-blank [data-route-page="sport-category-direct-blank"],
.app-shell.route-game-search-direct-blank [data-route-page="game-search-direct-blank"],
.app-shell.route-withdraw-method-list-source-empty [data-route-page="withdraw-method-list-source-empty"],
.app-shell.route-withdraw-method-edit-source-empty [data-route-page="withdraw-method-edit-source-empty"],
.source-empty-page {
  min-height: 100%;
  background: var(--ui-gradient-source-empty-bg);
}

.app-shell.route-iframe,
.app-shell.route-iframe .app-main,
.app-shell.route-iframe [data-route-page="iframe"] {
  background: var(--ui-surface-white);
}

.app-shell.route-iframe [data-route-page="iframe"] {
  height: 100%;
}

.app-shell.route-ranking-rule,
.app-shell.route-ranking-rule .app-main,
.app-shell.route-ranking-rule [data-route-page="ranking-rule"],
.ranking-rule-page {
  min-height: 100vh;
  height: 100%;
  background: var(--app-report-card-bg);
}

.app-shell.route-ranking-rule .pwa-l5-bar,
.app-shell.route-ranking-rule .l5-header,
.app-shell.route-ranking-rule .bottom-tabbar,
.app-shell.route-ranking-rule [data-floating-activity],
.app-shell.route-ranking-rule .l5-support,
.app-shell.route-ranking-rule .l5-side-handle {
  display: none !important;
}

.app-shell.route-ranking-rule .app-main {
  inset: 0;
  padding: 0;
  overflow: hidden;
}

.ranking-rule-page {
  color: var(--ui-text-primary);
}

.ranking-rule-toolbar {
  height: 50px;
  display: grid;
  grid-template-columns: 58px 1fr 58px;
  align-items: center;
}

.ranking-rule-toolbar button {
  width: 46px;
  height: 30px;
  margin-left: 6px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}

.ranking-rule-toolbar button span {
  width: 13px;
  height: 13px;
  border-left: 2px solid rgba(255, 255, 255, .92);
  border-bottom: 2px solid rgba(255, 255, 255, .92);
  transform: rotate(45deg);
}

.ranking-rule-toolbar strong {
  justify-self: center;
  font-size: var(--ui-font-size-xl);
  line-height: var(--ui-line-height-none);
  font-weight: var(--ui-font-weight-regular);
}

.iframe-page {
  min-height: 100%;
  height: 100%;
  background: var(--ui-surface-white);
  color: var(--ui-text-primary);
}

.iframe-toolbar {
  position: relative;
  height: 50px;
  background: rgb(28, 32, 45);
}

.iframe-back-button {
  position: absolute;
  left: 6px;
  top: 9px;
  width: 33px;
  height: 32px;
  border: 0;
  padding: 0;
  background: transparent;
}

.iframe-back-button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  width: 11px;
  height: 11px;
  border-left: 2px solid var(--ui-text-primary);
  border-bottom: 2px solid var(--ui-text-primary);
  transform: rotate(45deg);
}

.iframe-toolbar h1 {
  margin: 0;
  padding: 0 52px;
  font-size: var(--ui-font-size-lg-plus);
  line-height: 50px;
  font-weight: var(--ui-font-weight-medium);
  text-align: center;
}

.iframe-toolbar h1:empty {
  display: none;
}

.iframe-content {
  height: calc(100% - 50px);
  overflow: hidden;
  background: var(--ui-surface-white);
}

.iframe-content iframe {
  display: block;
  width: calc(100% + 18px);
  height: 100%;
  border: 0;
  background: var(--ui-surface-white);
}

.app-shell.route-transition {
  background: var(--ui-surface-white);
}

.app-shell.route-transition .app-main {
  inset: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-surface-white);
}

.app-shell.route-transition .pwa-l5-bar,
.app-shell.route-transition .l5-header,
.app-shell.route-transition .bottom-tabbar,
.app-shell.route-transition [data-floating-activity],
.app-shell.route-transition .l5-support,
.app-shell.route-transition .l5-side-handle {
  display: none !important;
}

.app-shell.route-transition [data-route-page="transition"] {
  min-height: 100%;
  background: var(--ui-surface-white);
}

.app-shell.route-home .bottom-tabbar {
  opacity: 1;
  background: var(--ui-surface-input);
}

.app-shell.route-home:not(.is-app-banner-hidden) .l5-header {
  background: var(--ui-surface);
}

.pwa-l5-bar {
  position: absolute;
  z-index: var(--z-download);
  top: 0;
  left: 0;
  width: 100%;
  height: var(--app-download-height);
  display: block;
  padding: 0;
  background: var(--ui-surface-input);
}

.pwa-l5-bar button {
  border: 0;
}

.pwa-close {
  position: absolute;
  left: 1.0256%;
  top: 26%;
  width: 6.1538%;
  height: 48%;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  color: var(--app-pwa-close-color);
  font-size: var(--app-pwa-close-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-none);
}

.pwa-close span {
  display: block;
  transform: translateY(-1px);
}

.pwa-app-icon {
  position: absolute;
  left: 9.2308%;
  top: 14%;
  width: 9.2308%;
  height: 72%;
  border-radius: 8px;
  object-fit: cover;
}

.pwa-title {
  position: absolute;
  left: 20.5128%;
  top: 14%;
  width: 28.9744%;
  min-width: 0;
  margin: 0;
  color: var(--app-pwa-title-color);
  font-size: var(--ui-font-size-cqw-md);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--app-pwa-title-line-height);
}

.pwa-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pwa-money {
  position: absolute;
  left: 51.7949%;
  top: 18%;
  width: 8.2051%;
  height: 64%;
  object-fit: contain;
}

.pwa-update {
  position: absolute;
  left: 69.2308%;
  top: 16%;
  width: 27.6923%;
  height: 68%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 5px;
  color: var(--ui-text-primary);
  background: var(--app-pwa-update-gradient);
  font-size: var(--app-font-size-cqw-md);
  font-weight: var(--ui-font-weight-heavy);
}

.pwa-cloud {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.app-shell.is-app-banner-hidden .l5-header {
  top: 0;
}

.app-shell.is-app-banner-hidden .app-main {
  top: var(--app-header-height);
  padding-top: 0;
}

.app-shell.is-app-banner-hidden .pwa-l5-bar {
  display: none;
}

.l5-header.app-header {
  z-index: var(--z-header);
  top: var(--app-download-height);
  height: var(--app-header-height);
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.l5-menu,
.l5-pig,
.l5-plus,
.l5-bonus,
.l5-auth-button {
  min-width: 0;
  border: 0;
  padding: 0;
  color: var(--ui-text-primary);
  background: transparent;
}

.l5-menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 14.2051cqw;
  height: 13.5385cqw;
}

.l5-menu img {
  position: absolute;
  left: 3.7212cqw;
  top: 2.7644cqw;
  width: 7.9968cqw;
  height: 7.9968cqw;
  object-fit: contain;
}

.l5-logo {
  position: absolute;
  left: 14.35cqw;
  top: 3.1731cqw;
  width: 34.4cqw;
  height: 7.1795cqw;
  max-height: none;
  object-fit: contain;
}

.l5-header:has(.l5-login-button:not(.is-hidden)) .l5-logo {
  left: 13.85cqw;
  width: 27.1cqw;
}

.l5-wallet-combo {
  position: absolute;
  left: 53.8974cqw;
  top: 2.5641cqw;
  width: 22.5641cqw;
  height: 7.6923cqw;
  min-width: 0;
  border: .2564cqw solid var(--lite-accent, #0da95b);
  border-radius: 1.5cqw;
  background: var(--ui-surface-input);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 .2564cqw .7692cqw rgba(0, 0, 0, .34);
}

.l5-assets {
  position: absolute;
  left: 1.2821cqw;
  top: .5128cqw;
  width: 13.8462cqw;
  height: 6.9231cqw;
  min-width: 0;
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.l5-asset-row {
  position: absolute;
  left: 0;
  min-width: 0;
  width: 13.8462cqw;
  height: 2.7179cqw;
  display: flex;
  align-items: center;
  gap: .5128cqw;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.l5-asset-row:first-child {
  top: .359cqw;
}

.l5-asset-row:nth-child(2) {
  top: 3.8462cqw;
}

.l5-asset-row strong {
  min-width: 0;
  color: #ffea00;
  font-size: var(--ui-font-size-cqw-xs);
  line-height: var(--ui-line-height-none);
  font-weight: var(--ui-font-weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.l5-marker {
  flex: 0 0 auto;
  width: 2.8718cqw;
  height: 2.8718cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: .0769cqw;
  box-sizing: border-box;
  border-radius: 50%;
  color: var(--ui-text-primary);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4872cqw;
  line-height: var(--ui-line-height-none);
  font-weight: var(--ui-font-weight-bold);
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.l5-marker-w {
  background: linear-gradient(rgba(83, 121, 255, .95), rgba(65, 93, 214, .95));
}

.l5-marker-f {
  background: linear-gradient(rgba(var(--lite-accent-rgb, 34, 197, 94), .95), rgba(var(--lite-accent-rgb, 22, 163, 74), .95));
}

.l5-pig {
  position: absolute;
  left: 77.5385cqw;
  top: 3.1795cqw;
  width: 7.3846cqw;
  height: 6.7692cqw;
  display: block;
}

.l5-pig img {
  position: absolute;
  right: 0;
  top: 0;
  width: 7.0769cqw;
  height: 6.7692cqw;
  object-fit: contain;
}

.l5-plus {
  position: absolute;
  right: .359cqw;
  top: .4359cqw;
  width: 6.9231cqw;
  height: 6.9231cqw;
  display: block;
}

.l5-plus img {
  position: absolute;
  right: 0;
  top: 0;
  width: 6.9231cqw;
  height: 6.9231cqw;
  object-fit: contain;
}

.l5-bonus {
  position: absolute;
  left: 86.9231cqw;
  top: .7692cqw;
  width: 12cqw;
  height: 12cqw;
  display: block;
}

.l5-bonus img {
  position: absolute;
  right: 1.0256cqw;
  top: 2cqw;
  width: 7.9968cqw;
  height: 7.9968cqw;
  object-fit: contain;
}

.l5-auth-button {
  position: absolute;
  top: 1.4cqw;
  height: 7.1795cqw;
  border-radius: 1.2308cqw;
  font-size: var(--ui-font-size-cqw-md);
  line-height: 7.1795cqw;
  font-weight: var(--ui-font-weight-regular);
  display: block;
  text-align: center;
}

.l5-login-button {
  left: 45.55cqw;
  width: 19.8974cqw;
  color: var(--ui-text-primary);
  box-shadow: inset 0 0 0 1px var(--lite-accent, #00db70);
}

.l5-register-button {
  left: 68.13cqw;
  width: 19.8974cqw;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #00d66a);
}

.l5-register-button::after {
  content: "Bonus";
  position: absolute;
  right: -1.5385cqw;
  top: -1.8462cqw;
  width: 8.7179cqw;
  height: 3.0769cqw;
  display: grid;
  place-items: center;
  transform: rotate(-9deg);
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #00ba59);
  font-size: 1.641cqw;
  line-height: var(--ui-line-height-none);
  font-weight: var(--ui-font-weight-bold);
}

.rp-bubble {
  position: absolute;
  left: 66.6667cqw;
  top: 10.7692cqw;
  width: 20.5128cqw;
  min-width: 0;
  height: 6.5641cqw;
  padding: 0;
  border-radius: 0;
  color: var(--ui-text-primary);
  background: url("/7000/assets/shared/svg/c77/k5-qipao.webp") center / 100% 100% no-repeat;
  font-size: var(--ui-font-size-cqw-xs);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-none);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: none;
  pointer-events: none;
}

.app-shell.route-promo .rp-bubble,
.app-shell.route-promo-redeem .rp-bubble {
  display: none !important;
}

.l5-home {
  min-height: 100%;
  padding: 0 2.5641cqw 5.1282cqw;
  background: var(--ui-surface-panel-deep);
  pointer-events: auto;
}

.l5-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 54.3243%) minmax(0, 43.5135%);
  grid-template-rows: repeat(3, 15.8974cqw);
  gap: 1.5385cqw 2.1622%;
  padding-top: 0;
  background: transparent;
  border-radius: 10px;
}

.l5-hero-grid article {
  min-width: 0;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background-color: #14202a;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: none;
  cursor: pointer;
}

.l5-hero-grid article::after {
  display: none;
}

.l5-hero-grid span,
.l5-hero-grid strong {
  position: relative;
  z-index: 1;
  display: block;
}

.l5-hero-main {
  grid-row: 1 / 3;
  display: block;
  grid-row: 1 / 4;
  padding: 0;
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/05/01/800580445778053.webp");
  background-position: left top;
}

.l5-hero-grid .l5-hero-main {
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/05/01/800580445778053.webp");
  background-position: left top;
}

.l5-hero-grid .l5-team {
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/04/29/799827966484549.webp");
}

.l5-hero-grid .l5-vip {
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/03/24/787182151045125.png");
}

.l5-hero-grid .l5-hero-wide {
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/03/24/787182207758341.png");
}


.l5-hero-small,
.l5-hero-wide {
  display: block;
  padding: 0;
}

.l5-team {
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/04/29/799827966484549.webp");
}

.l5-vip {
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/03/24/787182151045125.png");
}

.l5-hero-wide {
  grid-column: 2;
  height: auto;
  margin-top: 0;
  background-image: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/03/24/787182207758341.png");
}

.l5-hero-grid span,
.l5-hero-grid strong {
  display: none;
}

.l5-hero-grid .l5-hero-main span,
.l5-hero-grid .l5-hero-main strong {
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  display: block;
  color: var(--ui-text-primary);
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}

.l5-hero-grid .l5-hero-main span,
.l5-hero-grid .l5-hero-main strong {
  display: none;
}

.l5-hero-grid .l5-hero-main span {
  top: 2.5641cqw;
  font-size: var(--ui-font-size-cqw-lg);
  line-height: 4.2051cqw;
  font-weight: var(--ui-font-weight-heavy);
}

.l5-hero-grid .l5-hero-main strong {
  top: 11.2821cqw;
  font-size: 6.6667cqw;
  line-height: 7.1795cqw;
  font-weight: var(--ui-font-weight-black);
}

.l5-hero-dots {
  display: none;
}

.l5-hero-dots i {
  width: 2.0513cqw;
  height: 2.0513cqw;
  border-radius: 50%;
  background: var(--ui-surface-black);
  opacity: .2;
}

.l5-hero-dots i.is-active {
  background: var(--ui-surface-white);
  opacity: 1;
}

.l5-marquee {
  position: relative;
  height: 13.8462cqw;
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #d7e1f0;
}

.l5-marquee::before {
  content: "";
  position: absolute;
  left: .4359cqw;
  top: 3.0769cqw;
  width: 84cqw;
  height: 7.6923cqw;
  border-radius: 1.0256cqw;
  background: rgba(60, 65, 68, .4);
  backdrop-filter: blur(10px);
}

.l5-marquee img {
  position: absolute;
  left: 3.5128cqw;
  top: 4.359cqw;
  width: 5.1282cqw;
  height: 5.1282cqw;
  object-fit: contain;
}

.l5-marquee-window {
  position: absolute;
  left: 11.1795cqw;
  top: 5.1282cqw;
  width: 71.2051cqw;
  height: 3.5897cqw;
  overflow: hidden;
}

.l5-marquee p {
  width: max-content;
  height: 3.5897cqw;
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-cqw-md);
  line-height: var(--ui-line-height-cqw-lg);
  white-space: nowrap;
  animation: l5-marquee-run 34s linear infinite;
}

@keyframes l5-marquee-run {
  0% {
    transform: translate3d(100cqw, 0, 0);
  }
  100% {
    transform: translate3d(calc(100cqw - 100%), 0, 0);
  }
}

.l5-marquee button {
  position: absolute;
  left: 86.4359cqw;
  top: 2.9231cqw;
  width: 8cqw;
  height: 8cqw;
  border: 0;
  border-radius: 1.4769cqw;
  color: var(--theme-color-600);
  background: rgba(60, 65, 68, .4);
  backdrop-filter: blur(10px);
}

.l5-marquee button img {
  left: 1.4103cqw;
  top: 1.7692cqw;
  width: 5.2051cqw;
  height: 4.4103cqw;
  object-fit: contain;
  filter: none;
}

.l5-wallet-card {
  position: relative;
  min-height: 35.3846cqw;
  margin: 1.5385cqw 0 2.0513cqw;
  padding: 2.3077cqw 3.0769cqw 2.5641cqw;
  border-radius: 3.0769cqw;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(31, 35, 49, .96) 0%, rgba(24, 27, 38, .98) 100%);
  border: 1px solid var(--ui-border-subtle);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 2.0513cqw 4.6154cqw rgba(0, 0, 0, .26),
    0 0 0 1px rgba(var(--lite-accent-rgb, 0, 213, 99), .06);
}

.l5-wallet-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--lite-accent, #00d563) 50%, transparent 100%);
  opacity: .55;
}

.l5-wallet-head,
.l5-release-top,
.l5-games-head {
  display: flex;
  align-items: center;
}

.l5-wallet-head {
  justify-content: space-between;
  gap: 2.0513cqw;
}

.l5-wallet-label {
  display: inline-flex;
  align-items: center;
  gap: 2.0513cqw;
  min-width: 0;
  color: var(--ui-text-primary);
  font-size: 5.3333cqw;
  line-height: 1.05;
  font-weight: var(--ui-font-weight-heavy);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .32);
}

.l5-wallet-card .l5-marker {
  width: 4.7179cqw;
  height: 4.7179cqw;
  border: 1px solid var(--lite-accent-bright, #22df73);
  box-shadow: 0 0 1.4359cqw rgba(var(--lite-accent-rgb, 0, 213, 99), .45);
  font-size: var(--ui-font-size-cqw-xs);
  font-weight: var(--ui-font-weight-heavy);
  flex-shrink: 0;
}

.l5-wallet-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 1.0256cqw;
  min-width: 0;
}

.l5-wallet-currency {
  flex-shrink: 0;
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-bold);
}

.l5-wallet-chip {
  min-height: 4.0256cqw;
  min-width: 9.4359cqw;
  padding: .6154cqw 1.4359cqw;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--ui-border-subtle);
  color: var(--color-text-white-80, rgba(255, 255, 255, .8));
  font-size: var(--ui-font-size-cqw-xs);
  line-height: var(--ui-line-height-none);
  font-weight: var(--ui-font-weight-heavy);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.l5-release-title {
  min-width: 0;
  flex: 1;
  color: var(--color-text-white-100);
  font-size: var(--ui-font-size-cqw-sm);
  line-height: 3.3846cqw;
  font-weight: 760;
  letter-spacing: 0;
}

.l5-wallet-value {
  display: flex;
  align-items: baseline;
  gap: 1.0256cqw;
  margin: 0 0 1.3333cqw;
  color: var(--ui-text-primary);
}

.l5-wallet-value small {
  font-size: 2.7179cqw;
  line-height: 4.8cqw;
  font-weight: var(--ui-font-weight-bold);
  color: var(--color-text-gray-300);
}

.l5-wallet-value strong {
  font-size: 2.7179cqw;
  line-height: 5.3415cqw;
  font-weight: var(--ui-font-weight-heavy);
}

.l5-release-box {
  min-height: 20.5128cqw;
  margin-top: 2.5641cqw;
  padding: 2.6667cqw 2.6667cqw 2.3077cqw;
  border-radius: 2.2564cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .015) 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 1.2821cqw 3.0769cqw rgba(0, 0, 0, .22);
}

.l5-release-top {
  justify-content: space-between;
  gap: 1.2308cqw;
  min-height: 7.1795cqw;
  color: var(--color-text-white-80);
  font-size: var(--ui-font-size-cqw-sm);
  line-height: var(--ui-line-height-cqw-lg);
  font-weight: var(--ui-font-weight-bold);
}

.l5-release-top strong {
  color: var(--lite-accent-bright, #00f076);
  font-size: var(--ui-font-size-cqw-sm);
  line-height: var(--ui-line-height-cqw-lg);
  font-weight: var(--ui-font-weight-heavy);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 1.5385cqw rgba(var(--lite-accent-rgb, 0, 213, 99), .5);
  white-space: nowrap;
}

.l5-release-btn {
  width: 7.1795cqw;
  height: 7.1795cqw;
  flex: 0 0 7.1795cqw;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(var(--lite-accent-rgb, 0, 213, 99), .3);
  border-radius: 1.7949cqw;
  background: var(--ui-border-subtle);
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-cqw-xl);
  box-shadow:
    0 1.2308cqw 2.5641cqw rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.l5-release-btn:first-of-type {
  background: linear-gradient(135deg, var(--lite-accent, #00d563) 0%, var(--lite-accent-deep, #009d48) 100%);
}

.l5-release-btn img {
  width: 4.359cqw;
  height: 4.359cqw;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.l5-progress {
  height: 3.3846cqw;
  overflow: hidden;
  margin-top: 2.4615cqw;
  border-radius: 999px;
  border: 1px solid rgba(var(--lite-accent-rgb, 0, 213, 99), .2);
  background: rgba(8, 10, 13, .68);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .35),
    0 0 1.0256cqw rgba(0, 0, 0, .1);
}

.l5-progress span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lite-accent, #00b955) 0%, #ffd34d 72%, var(--lite-accent-bright, #67ffb1) 100%);
  transition: width .25s ease;
}

.l5-progress span::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -2.5641cqw;
  width: 5.1282cqw;
  height: 180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .66) 50%, transparent 100%);
  animation: l5-home-claim-sweep 2.2s linear infinite;
}

@keyframes l5-home-claim-sweep {
  0% {
    transform: translateX(-220%) rotate(20deg);
  }

  100% {
    transform: translateX(220%) rotate(20deg);
  }
}

.l5-release-box p {
  margin: 1.5385cqw 0 0;
  color: var(--color-text-gray-300);
  font-size: 2.2564cqw;
  line-height: 3.1795cqw;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.l5-provider-tabs {
  display: flex;
  gap: 2.6667cqw;
  overflow-x: auto;
  height: 13.9487cqw;
  margin: 0;
  padding: 0 0 0 1.2821cqw;
  background: transparent;
  scrollbar-width: none;
}

.l5-provider-tabs::-webkit-scrollbar,
.l5-game-grid::-webkit-scrollbar {
  display: none;
}

.l5-provider-tabs button {
  flex: 0 0 auto;
  min-width: 18.5897cqw;
  max-width: 30.0513cqw;
  height: 13.9487cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.0256cqw;
  border: 0;
  border-radius: 1.7949cqw;
  color: var(--color-text-gray-300);
  background: var(--color-bg-100);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .045),
    0 .5128cqw 1.2821cqw rgba(0, 0, 0, .18);
  font-family: var(--font-title, Prompt, Roboto, sans-serif);
  font-size: 3.6923cqw;
  line-height: 5.641cqw;
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
  padding: 0 3.3333cqw;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.l5-provider-tabs button.is-active {
  color: var(--color-text-white-100);
  background: rgba(var(--lite-accent-rgb, 0, 213, 99), .34);
  box-shadow:
    inset 0 0 0 1px rgba(var(--lite-accent-rgb, 0, 213, 99), .44),
    0 .6154cqw 2.0513cqw rgba(var(--lite-accent-rgb, 0, 213, 99), .18);
}

.l5-provider-tabs img {
  width: 5.5385cqw;
  height: 5.5385cqw;
  object-fit: contain;
}

.l5-games {
  padding-top: 3.4872cqw;
  padding-bottom: 8px;
}

.l5-provider-section {
  padding-top: 2.5641cqw;
}

.l5-games-head {
  position: relative;
  gap: 6px;
  height: 10cqw;
  align-items: flex-end;
  margin: 0 -0.2564cqw 2.5897cqw;
  padding: 0 1.5385cqw;
}

.l5-games-head strong {
  flex: 0 0 34.7949cqw;
  width: 34.7949cqw;
  max-width: 34.7949cqw;
  height: 8cqw;
  display: inline-flex;
  align-items: center;
  gap: 2cqw;
  padding: 0 2cqw;
  border-radius: 2cqw 0 0 2cqw;
  background: var(--app-popular-header-bg, linear-gradient(90deg, rgba(var(--lite-accent-rgb, 0, 213, 99), .2) 0%, rgba(0, 0, 0, 0) 100%));
  color: var(--app-toolbar-title);
  font-family: var(--font-title, Prompt, Roboto, sans-serif);
  font-size: 4.2cqw;
  line-height: 6.3cqw;
  font-weight: var(--ui-font-weight-medium);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
}

.l5-games-head strong img {
  width: 6cqw;
  height: 6cqw;
  object-fit: contain;
}

.l5-games-head button {
  position: absolute;
  top: 2.641cqw;
  height: 6.6923cqw;
  border: 0;
  border-radius: 1.3128cqw;
  color: var(--color-text-white-100);
  background: var(--color-bg-100);
  box-shadow:
    inset 0 0 0 .5px rgba(255, 255, 255, .34),
    0 .5128cqw 1.2821cqw rgba(0, 0, 0, .16);
  font-family: var(--font-title, Prompt, Roboto, sans-serif);
  font-size: 3.6923cqw;
  line-height: 6.6872cqw;
  font-weight: var(--ui-font-weight-medium);
}

.l5-games-head button:not(.l5-arrow) {
  left: 61.4615cqw;
  width: 15.8462cqw;
}

.l5-games-head button span {
  color: var(--accent-color-yellow);
}

.l5-arrow {
  width: 6.1128cqw;
  padding: 0;
  opacity: .78;
  font-size: 3.6923cqw !important;
  line-height: 6.6872cqw;
}

.l5-games-head .l5-arrow:nth-of-type(2) {
  left: 78.9744cqw;
}

.l5-games-head .l5-arrow:nth-of-type(3) {
  left: 87.2308cqw;
}

.l5-game-grid {
  display: grid;
  grid-template-columns: repeat(var(--l5-home-game-columns, 3), var(--l5-home-game-card-width, 30.5641cqw));
  grid-auto-rows: var(--l5-home-game-card-height, 39.7436cqw);
  gap: 1.2308cqw;
  overflow-x: auto;
  padding: 0 0 4px .359cqw;
  scrollbar-width: none;
}

.l5-game-card {
  position: relative;
  overflow: hidden;
  border-radius: 3.0769cqw;
  background:
    url("/7000/assets/shared/icons/heart.png") no-repeat center center,
    var(--color-bg-50);
  background-size: 45% auto;
  cursor: pointer;
  outline: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 .5128cqw 1.5385cqw rgba(0, 0, 0, .24);
  transition: transform .16s ease, box-shadow .16s ease;
}

.l5-game-card:focus-visible,
.l5-game-card:active {
  transform: scale(.98);
  box-shadow: 0 0 0 2px rgba(var(--lite-accent-rgb, 6, 216, 111), .8);
}

.l5-game-card > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.l5-game-card.is-row2-a > img {
  height: 100%;
}

.l5-game-card.is-row2-b > img {
  width: 100%;
  height: 100%;
}

.l5-game-card.is-row2-c > img {
  height: 100%;
}

.l5-game-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .16) 10.41%, rgba(0, 0, 0, 0) 18.5%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.l5-game-card span {
  position: absolute;
  z-index: 1;
  right: 1.0256cqw;
  top: 1.0256cqw;
  width: 6.1538cqw;
  height: 6.1538cqw;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
}

.l5-game-card span img {
  width: 6.1538cqw;
  height: 6.1538cqw;
  object-fit: contain;
}

.l5-favorite-toggle {
  position: absolute;
  z-index: 2;
  right: 1.0256cqw;
  top: 1.0256cqw;
  width: 6.1538cqw;
  height: 6.1538cqw;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.l5-favorite-toggle img {
  width: 6.1538cqw;
  height: 6.1538cqw;
  object-fit: contain;
}

.l5-home-loading {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2308cqw;
  padding: 3.4872cqw .359cqw 0;
}

.l5-home-loading[hidden] {
  display: none;
}

.l5-home-loading span {
  height: 39.7436cqw;
  border-radius: 3.0769cqw;
  background: linear-gradient(110deg, #182434 8%, #243149 18%, #182434 33%);
  background-size: 200% 100%;
  animation: l5-skeleton 1.2s linear infinite;
}

.l5-empty-state {
  min-height: 31cqw;
  display: grid;
  place-items: center;
  gap: 2cqw;
  color: var(--color-text-gray-300);
  font-size: 3.6cqw;
}

.l5-empty-state img {
  width: 24cqw;
  opacity: .82;
}

.l5-load-more-area {
  display: grid;
  place-items: center;
  gap: 2.0513cqw;
  padding: 4.1026cqw 0 1.5385cqw;
}

.l5-load-more-area div {
  width: 54cqw;
  height: 2.5641cqw;
  position: relative;
  border-radius: 999px;
  background: #202738;
}

.l5-load-more-area div span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-success-profile);
}

.l5-load-more-area div strong {
  position: absolute;
  right: -10cqw;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-cqw-md);
}

.l5-load-more-area button {
  min-width: 28cqw;
  height: 8.2051cqw;
  border: 0;
  border-radius: 2.0513cqw;
  color: #0b121e;
  background: var(--ui-success-profile);
  font-size: var(--ui-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-bold);
}

@keyframes l5-skeleton {
  to {
    background-position-x: -200%;
  }
}

.l5-provider-long-list {
  display: grid;
  gap: 2.0513cqw;
  padding: 3.0769cqw .359cqw 14cqw;
}

.l5-provider-long-list[hidden] {
  display: none;
}

.l5-provider-long-list article {
  min-height: 14.359cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.1026cqw;
  border-radius: 2.5641cqw;
  color: var(--ui-text-primary);
  background: #171d2a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.l5-provider-long-list strong {
  font-size: var(--app-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-bold);
}

.l5-provider-long-list span {
  color: #ffea00;
  font-size: var(--ui-font-size-cqw-lg);
}

.l5-part-view {
  margin: 9.7436cqw -2.5641cqw 0;
  padding: 0 2.5641cqw calc(var(--app-tabbar-height) + 9.2308cqw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ui-surface-control-soft);
}

.l5-part-banner,
.l5-part-logo,
.l5-part-photograph {
  width: 100%;
  display: flex;
  justify-content: center;
}

.l5-part-banner[hidden],
.l5-part-logo[hidden],
.l5-part-photograph[hidden] {
  display: none;
}

.l5-part-banner img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.l5-part-logo {
  margin-top: 3.5897cqw;
}

.l5-part-logo img {
  width: 70%;
  max-width: 70%;
  height: auto;
  object-fit: contain;
}

.l5-part-copy {
  width: min(100%, 92.3077cqw);
  margin: 4.8718cqw auto 0;
  color: rgba(255, 255, 255, .96);
  font-size: 2.8718cqw;
  line-height: 1.95;
  font-weight: var(--ui-font-weight-regular);
  letter-spacing: 0;
}

.l5-part-photograph {
  margin-top: 6.9744cqw;
  margin-bottom: 25.641cqw;
}

.l5-part-photograph img {
  width: 80%;
  max-width: 80%;
  height: auto;
  object-fit: contain;
}

.l5-support {
  position: fixed;
  left: max(
    2.0513cqw,
    calc((100vw - min(100vw, var(--app-window-max-width, var(--ui-max-width, 430px)))) / 2 + 2.0513cqw)
  );
  bottom: calc(var(--app-tabbar-height) + 11px);
  z-index: calc(var(--z-tabbar) + 1);
  width: 13.8462cqw;
  height: 13.8462cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--ui-gradient-profile-action);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
  padding: initial;
}

.l5-support img {
  width: 93%;
  height: 93%;
  object-fit: contain;
  filter: none;
}

.l5-side-handle {
  position: absolute;
  z-index: 39;
  right: 0;
  top: 50%;
  width: 20px;
  height: 48px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 8px 0 0 8px;
  color: var(--ui-text-primary);
  background: linear-gradient(90deg, var(--lite-accent, #00b955), var(--lite-accent, #00d563));
  font-size: var(--ui-font-size-balance-plus);
  line-height: var(--ui-line-height-none);
  transform: translateY(-50%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

.app-shell.route-home .l5-side-handle {
  display: grid;
}

.app-shell:has([data-modal="bonus-cabinet"].is-active) .floating-activity-panel-lite,
.app-shell:has([data-modal="bonus-cabinet"].is-active) > .l5-side-handle {
  display: none;
}

.app-shell:has([data-modal="bonus-cabinet"].is-active) .l5-support {
  z-index: calc(var(--z-tabbar) + 2);
}

.app-shell.route-subpage .l5-side-handle,
.app-shell:not(.route-home) .l5-side-handle {
  display: none;
}

.drawer-title {
  margin: 34px 0 10px;
  font-size: var(--ui-font-size-icon-md);
}

.right-tools-panel {
  padding: 12px 16px 22px;
  overflow: auto;
}

.source-activity-panel,
.activity-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 16px max(22px, env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--ui-surface-panel-deep);
}

.source-activity-hero,
.activity-detail-hero {
  min-height: 150px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 211, 78, .32), transparent 34%),
    linear-gradient(135deg, #151f31 0%, #22344b 52%, #0d131f 100%);
  box-shadow: inset 0 0 0 1px var(--ui-border-subtle);
}

.source-activity-hero span,
.activity-detail-hero span {
  color: #ffd65b;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-black);
  text-transform: uppercase;
}

.source-activity-hero h2,
.activity-detail-hero h2 {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: 26px;
  line-height: var(--ui-line-height-display-sm);
}

.source-activity-copy,
.source-activity-rules,
.source-activity-steps,
.activity-detail-copy,
.activity-detail-rules,
.activity-detail-steps {
  margin: 0;
  padding: 14px;
  border-radius: 12px;
  color: var(--app-deposit-option-text);
  background: rgba(255, 255, 255, .055);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-record);
}

.source-activity-rules,
.activity-detail-rules {
  display: grid;
  gap: 8px;
}

.source-activity-rules b,
.activity-detail-rules b {
  color: var(--ui-text-primary);
}

.source-activity-rules p,
.activity-detail-rules p {
  margin: 0;
}

.source-activity-metrics,
.activity-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.source-activity-metrics article,
.activity-detail-metrics article {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(var(--lite-accent-rgb, 8, 233, 120), .11);
  box-shadow: inset 0 0 0 1px rgba(var(--lite-accent-rgb, 8, 233, 120), .18);
}

.source-activity-metrics span,
.activity-detail-metrics span {
  color: #8b96a8;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-heavy);
}

.source-activity-metrics strong,
.activity-detail-metrics strong {
  color: var(--ui-success-electric);
  font-size: var(--ui-font-size-balance);
}

.source-activity-steps,
.activity-detail-steps {
  display: grid;
  gap: 8px;
}

.source-activity-steps p,
.activity-detail-steps p {
  margin: 0;
}

.source-activity-actions,
.activity-detail-actions {
  display: grid;
  gap: 10px;
}

.drawer-page-header {
  min-height: 48px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}

.drawer-page-header strong {
  justify-self: center;
  font-size: var(--ui-font-size-balance);
}

.back-button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  color: var(--ui-text);
  background: var(--ui-surface-2);
  font-size: var(--ui-font-size-display-sm);
  line-height: var(--ui-line-height-none);
}

.back-button img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.vip-drawer-source {
  overflow: hidden;
}

.vip-source-panel,
.cashier-source-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--ui-text-primary);
  background: var(--ui-surface-panel-muted-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--ui-duration) ease, opacity var(--ui-duration) ease;
}

.vip-drawer-source.is-active .vip-source-panel,
.cashier-drawer.is-active .cashier-source-panel,
.withdraw-drawer.is-active .withdraw-source-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.vip-source-header {
  flex: 0 0 auto;
  min-height: 64px;
  display: grid;
  grid-template-columns: 60px 1fr 92px;
  align-items: center;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
  background: var(--ui-surface-panel-muted-2);
}

.vip-source-back {
  width: 42px;
  height: 42px;
  position: relative;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.vip-source-back::before,
.vip-source-back::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 22px;
  height: 5px;
  border-radius: 999px;
  background: var(--app-vip-accent, var(--theme-color-600));
  transform-origin: 2px 50%;
}

.vip-source-back::before {
  transform: translateY(-50%) rotate(-45deg);
}

.vip-source-back::after {
  transform: translateY(-50%) rotate(45deg);
}

.vip-source-logo {
  justify-self: center;
  width: 142px;
  height: 38px;
  object-fit: contain;
}

.vip-source-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 8px;
}

.vip-source-actions button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 25, 39, .92);
  box-shadow: inset 0 0 0 1px var(--ui-border-subtle);
}

.vip-source-actions img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.vip-source-support {
  width: 40px;
  height: 40px;
  justify-self: end;
  flex: 0 0 auto;
}

.vip-source-support img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vip-source-scroll {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
  padding: 12px 12px max(18px, env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.vip-source-scroll::-webkit-scrollbar {
  display: none;
}

.cashier-source-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 0 max(18px, env(safe-area-inset-bottom));
  scrollbar-width: none;
}

.cashier-source-scroll::-webkit-scrollbar {
  display: none;
}

.cashier-source-scroll,
.cashier-vip-panel .tab-drawer-body,
.cashier-vip-panel .calendar-cards {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.cashier-source-scroll::-webkit-scrollbar,
.cashier-vip-panel .tab-drawer-body::-webkit-scrollbar,
.cashier-vip-panel .calendar-cards::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.vip-level-source-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--app-sub-tab-bg);
}

.vip-level-source-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vip-level-source-title img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.vip-level-source-title strong {
  color: rgba(255, 255, 255, .94);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
  letter-spacing: .8px;
}

.vip-level-stage {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
}

.vip-level-arrow {
  width: 40px;
  height: 40px;
  position: relative;
  border: 0;
  border-radius: 8px;
  background: #242936;
}

.vip-level-arrow::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 13px;
  width: 14px;
  height: 14px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  border-radius: 2px;
  transform: rotate(45deg);
}

.vip-level-arrow.is-next::before {
  left: 11px;
  transform: rotate(225deg);
}

.vip-level-focus {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 24px;
}

.vip-level-pill {
  display: inline-grid;
  place-items: center;
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  color: var(--ui-text-primary);
  background: linear-gradient(180deg, var(--lite-accent-bright, #00f07a) 0%, var(--lite-accent, #00cf63) 100%);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.vip-level-medal {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .24));
}

.vip-progress-source {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.vip-progress-source p {
  margin: 0;
  color: #ffb03b;
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
}

.vip-progress-source i {
  color: var(--ui-text-primary);
  font-style: normal;
}

.vip-progress-source small {
  color: rgba(255, 255, 255, .94);
  font-size: var(--ui-font-size-xs);
}

.vip-progress-track,
.vip-mini-progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #45506b;
}

.vip-mini-progress {
  height: 3px;
  margin-top: 2px;
}

.vip-progress-track i,
.vip-mini-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lite-accent, #00d563), var(--lite-accent-bright, #00f076));
}

.vip-benefit-source-stack {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 9px;
  background: var(--app-withdraw-method-panel-bg);
}

.vip-benefit-source-group {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: var(--ui-surface-panel-muted-2);
}

.vip-benefit-source-group h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b4357;
  color: var(--lite-accent, #00df76);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}

.vip-title-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: 0 0 14px;
  color: var(--app-vip-accent, var(--theme-color-600));
  background: currentColor;
  -webkit-mask: var(--vip-title-icon-mask) center / contain no-repeat;
  mask: var(--vip-title-icon-mask) center / contain no-repeat;
}

.vip-title-icon.is-trophy {
  --vip-title-icon-mask: url("/7000/assets/shared/svg/trophy-outline.svg");
}

.vip-title-icon.is-cash {
  --vip-title-icon-mask: url("/7000/assets/shared/svg/cash-outline.svg");
}

.vip-title-icon.is-wallet {
  --vip-title-icon-mask: url("/7000/assets/shared/svg/wallet-outline.svg");
}

.vip-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.vip-benefit-mini-card,
.vip-benefit-rate-row div,
.vip-benefit-withdraw-row div {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 4px;
  border-radius: 6px;
  background: #101520;
}

.vip-benefit-mini-card {
  min-height: 68px;
}

.vip-benefit-rate-row div,
.vip-benefit-withdraw-row div {
  min-height: 43px;
}

.vip-benefit-mini-card span,
.vip-benefit-rate-row span,
.vip-benefit-withdraw-row span {
  color: var(--color-text-white-80);
  font-size: var(--ui-font-size-micro);
  line-height: 12px;
  text-align: center;
}

.vip-benefit-mini-card strong,
.vip-benefit-withdraw-row strong {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-xs);
}

.vip-benefit-mini-card small {
  color: var(--ui-text-menu);
  font-size: 9px;
  line-height: 10px;
}

.vip-benefit-rate-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.vip-benefit-rate-row div[hidden] {
  display: none;
}

.vip-benefit-rate-row strong {
  color: #ffb03b;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}

.vip-claim-state,
.vip-calendar-strip {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.vip-claim-state span,
.vip-calendar-strip span {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--ui-font-size-xs);
}

.vip-claim-state strong,
.vip-calendar-strip strong {
  color: #ffcf56;
  font-size: var(--ui-font-size-md);
}

.vip-claim-state button {
  min-width: 62px;
  height: 28px;
  border-radius: 14px;
  background: var(--app-vip-panel-bg);
  color: var(--ui-text-tab-muted);
  font-weight: var(--ui-font-weight-heavy);
}

.vip-claim-state.is-claimable button {
  background: var(--theme-color-gradient-400);
  color: var(--app-control-dark-text);
}

.vip-benefit-withdraw-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.vip-bonus-page-link {
  justify-self: center;
  min-height: 0;
  margin-top: 2px;
  padding: 2px 4px;
  border: 0;
  color: var(--app-vip-accent);
  background: transparent;
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-record);
  transform: translate(-10px, -1px);
}

.vip-reward-calendar-source {
  display: grid;
  gap: 12px;
  margin-right: 8px;
  margin-left: 8px;
  padding: 8px;
  border-radius: 12px;
  background: var(--app-vip-calendar-header-bg);
}

.vip-calendar-source-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vip-calendar-source-header img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.vip-calendar-source-header strong {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
  letter-spacing: 1.2px;
}

.vip-calendar-source-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  color: var(--app-vip-text);
  background: var(--app-vip-panel-bg);
  box-shadow: inset 0 0 0 1px var(--ui-border-subtle);
  font-size: var(--ui-font-size-xs);
  transform: translateY(7px);
  white-space: nowrap;
}

.vip-calendar-source-summary .summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.vip-calendar-source-summary b {
  color: var(--app-vip-gold);
  font-weight: var(--ui-font-weight-semibold);
}

.global-vip-drawer-header {
  flex: 0 0 auto;
  min-height: 48px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  padding: max(4px, env(safe-area-inset-top)) 8px 0;
  border-bottom: 1px solid var(--app-vip-divider);
  background: var(--app-vip-deep-bg);
  box-shadow: 0 2px 0 0 var(--theme-color-800) inset;
}

.global-vip-drawer-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: var(--app-vip-drawer-title-size);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--app-vip-drawer-title-line-height);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-vip-drawer-spacer {
  width: 40px;
  height: 40px;
}

.vip-global-header .vip-source-back {
  width: 40px;
  height: 40px;
  border-radius: 0;
}

.vip-global-header .vip-source-back::before,
.vip-global-header .vip-source-back::after {
  left: 17px;
  width: 14px;
  height: 2px;
  background: var(--app-vip-accent, var(--theme-color-600));
}

.vip-loading-container {
  min-height: 180px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--app-report-card-bg);
}

.vip-loading-content {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ui-text-control);
  font-size: var(--ui-font-size-sm);
}

.vip-badge-loader img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px var(--app-vip-badge-glow));
}

.summary-link-row,
.daily-calendar-section,
.bonus-options-box {
  min-width: 0;
}

.summary-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
  color: var(--ui-text-tab-muted);
  font-size: var(--ui-font-size-xs);
}

.summary-link-action,
.info-link {
  border: 0;
  color: var(--app-vip-accent);
  background: transparent;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-record);
}

.calendar-scroll-container {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 6px;
}

.calendar-cards {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.calendar-cards::-webkit-scrollbar {
  display: none;
}

.calendar-card {
  flex: 0 0 82px;
  min-height: 84px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 9px 6px;
  border-radius: 8px;
  color: var(--ui-text-primary);
  background: var(--app-vip-panel-bg);
  box-shadow: inset 0 0 0 1px var(--ui-border-subtle);
  scroll-snap-align: start;
}

.card-date,
.card-status {
  color: var(--ui-text-tab-muted);
  font-size: var(--ui-font-size-micro);
  line-height: var(--app-vip-card-meta-line-height);
}

.card-amount {
  color: var(--app-vip-gold);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}

.card-status.status-claimed {
  color: var(--app-vip-accent);
}

.scroll-arrow {
  width: 26px;
  height: 32px;
  position: relative;
  border: 0;
  border-radius: 6px;
  background: var(--app-vip-panel-bg);
}

.scroll-arrow::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-left: 3px solid var(--app-vip-text);
  border-bottom: 3px solid var(--app-vip-text);
  border-radius: 1px;
  transform: rotate(45deg);
}

.scroll-arrow-right::before {
  left: 7px;
  transform: rotate(225deg);
}

.bonus-options-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 0 8px 8px;
}

.bonus-option-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--app-vip-panel-bg);
  box-shadow: inset 0 0 0 1px var(--ui-border-subtle);
}

.bonus-header,
.bonus-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bonus-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  color: var(--app-control-dark-text);
  background: var(--app-vip-gold);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-black);
}

.bonus-content img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.add-button {
  min-width: 72px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  color: var(--ui-text-tab-muted);
  background: var(--ui-disabled);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-black);
}

.add-button.button-enabled {
  color: var(--app-control-dark-text);
  background: var(--theme-color-gradient-400);
}

.vip-drawer-source {
  --app-drawer-bg: var(--app-vip-drawer-bg);
  --app-panel-bg-dark: var(--app-vip-panel-bg);
  --app-deep-bg: var(--app-vip-deep-bg);
  --app-card-bg: var(--app-vip-card-bg);
  --app-divider-color: var(--app-vip-divider);
  --app-action-orange: var(--app-vip-accent);
  --app-gold-color: var(--app-vip-gold);
  --vip-source-font: var(--app-vip-source-font-size);
}

.vip-drawer-source .vip-source-panel {
  background: var(--app-drawer-bg);
  color: var(--app-vip-text);
}

.vip-drawer-source .tab-drawer-fullscreen,
.vip-drawer-source .quick-entry-drawer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--app-drawer-bg);
  color: var(--app-vip-text);
  font-size: var(--vip-source-font);
  line-height: var(--app-vip-source-line-height);
  z-index: 999999;
}

.vip-drawer-source .drawer-header {
  min-height: 59.8155px;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 9.9692px 12.9601px;
  background: var(--app-drawer-bg);
  position: relative;
  z-index: 100;
}

.vip-drawer-source .drawer-header-left,
.vip-drawer-source .drawer-header-right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.vip-drawer-source .drawer-header-left {
  gap: 9.9692px;
}

.vip-drawer-source .drawer-header-right {
  gap: 5.9816px;
}

.vip-drawer-source .drawer-back-icon,
.vip-drawer-source .drawer-sidebar-icon {
  width: 38.8801px;
  height: 38.8801px;
  flex: 0 0 38.8801px;
  object-fit: contain;
  cursor: pointer;
}

.vip-drawer-source .drawer-logo {
  height: 34.8924px;
  flex: 0 1 auto;
  padding-right: 19.9385px;
  object-fit: contain;
}

.vip-drawer-source .drawer-bonus-icon {
  width: 35.0021px;
  height: 35.0021px;
  flex: 0 0 35.0021px;
  object-fit: contain;
  cursor: pointer;
  transform-origin: center;
  animation: bonus-breath 2s infinite ease-in-out;
}

.vip-drawer-source .tab-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--app-drawer-bg);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vip-drawer-source .tab-drawer-body::-webkit-scrollbar {
  display: none;
}

.vip-drawer-source .vip-container {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  padding: 7.4769px;
  background: var(--app-drawer-bg);
}

.vip-drawer-source[data-drawer="vip"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

.vip-drawer-source[data-drawer="vip"] .v77-vip-panel.ui-drawer-panel {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.vip-drawer-source[data-drawer="vip"] .v77-vip-drawer-body,
.vip-drawer-source[data-drawer="vip"] .v77-vip-drawer-body > [data-include="./blocks/page-promo-vip.html"],
.vip-drawer-source[data-drawer="vip"] .promo-vip-page,
.vip-drawer-source[data-drawer="vip"] .tab-drawer-body,
.vip-drawer-source[data-drawer="vip"] .vip-container,
.vip-drawer-source[data-drawer="vip"] .vip-source-scroll,
.vip-drawer-source[data-drawer="vip"] .level-up-bonus-box,
.vip-drawer-source[data-drawer="vip"] .level-content-wrapper,
.vip-drawer-source[data-drawer="vip"] .level-display-wrapper,
.vip-drawer-source[data-drawer="vip"] .level-content-container,
.vip-drawer-source[data-drawer="vip"] .level-badge-container-wrapper,
.vip-drawer-source[data-drawer="vip"] .level-badge-slider,
.vip-drawer-source[data-drawer="vip"] .level-content-slider,
.vip-drawer-source[data-drawer="vip"] .level-badge-item,
.vip-drawer-source[data-drawer="vip"] .level-content-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.vip-drawer-source[data-drawer="vip"] .v77-vip-drawer-body,
.vip-drawer-source[data-drawer="vip"] .v77-vip-drawer-body > [data-include="./blocks/page-promo-vip.html"],
.vip-drawer-source[data-drawer="vip"] .promo-vip-page {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.vip-drawer-source[data-drawer="vip"] .tab-drawer-body,
.vip-drawer-source[data-drawer="vip"] .vip-source-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.vip-drawer-source[data-drawer="vip"] .level-display-wrapper {
  flex: 0 0 auto !important;
}

.vip-drawer-source[data-drawer="vip"] .level-badge-container-wrapper {
  flex: 1 1 auto !important;
}

@keyframes bonus-breath {
  0% {
    transform: scale(1) translate(0, 0);
  }

  15% {
    transform: scale(1.08) translate(0.5px, -0.5px);
  }

  30% {
    transform: scale(0.96) translate(-0.5px, 0.5px);
  }

  45% {
    transform: scale(1.06) translate(0.5px, 0.5px);
  }

  60%,
  100% {
    transform: scale(1) translate(0, 0);
  }
}

.vip-drawer-source [hidden] {
  display: none !important;
}

.vip-drawer-source .vip-source-scroll {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  gap: 0;
  padding: 0;
  background: transparent;
  color: var(--app-vip-text);
  font-size: var(--vip-source-font);
  line-height: var(--app-vip-source-line-height);
  min-height: 100%;
}

.vip-drawer-source .level-up-bonus-box,
.vip-drawer-source .rewards-calendar-box,
.vip-drawer-source .bonus-options-box {
  width: 100%;
  box-sizing: border-box;
}

.vip-drawer-source .level-up-bonus-box {
  margin-top: 14.9538px;
  padding: 24.9231px;
  display: flex;
  flex-direction: column;
  gap: 19.9385px;
  border-radius: 14.9538px;
  background: var(--app-card-bg);
}

.vip-drawer-source .level-up-header {
  display: flex;
  align-items: center;
  gap: 14.9538px;
  width: 100%;
  height: 39.875px;
}

.vip-drawer-source .level-up-icon {
  width: 39.875px;
  height: 39.875px;
  flex-shrink: 0;
  object-fit: contain;
}

.vip-drawer-source .level-up-title {
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-title-font-size);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--app-vip-source-title-line-height);
  letter-spacing: .8723px;
  text-transform: uppercase;
}

.vip-drawer-source .level-display-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14.9538px;
  padding: 19.9385px 0;
}

.vip-drawer-source .level-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 19.9385px;
}

.vip-drawer-source .level-arrow {
  width: 49.8438px;
  height: 49.8438px;
  flex-shrink: 0;
  border: 0;
  border-radius: 9.9692px;
  background: var(--app-panel-bg-dark);
  color: var(--app-vip-text);
}

.vip-drawer-source .level-arrow::before {
  left: 19px;
  top: 17px;
  width: 15px;
  height: 15px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  border-radius: 1px;
}

.vip-drawer-source .level-arrow-right::before {
  left: 15px;
  transform: rotate(225deg);
}

.vip-drawer-source .level-badge-container-wrapper {
  display: block;
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.vip-drawer-source .level-badge-slider,
.vip-drawer-source .level-content-slider {
  display: flex;
  width: 100%;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.vip-drawer-source .level-badge-item,
.vip-drawer-source .level-content-item {
  width: 100%;
  min-width: 100%;
  flex: 0 0 100%;
}

.vip-drawer-source .level-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14.9538px;
}

.vip-drawer-source .level-content-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.vip-drawer-source .level-content-item {
  display: flex;
  flex-direction: column;
  gap: 19.9385px;
}

.vip-drawer-source .level-badge-name {
  min-width: 0;
  width: auto;
  height: auto;
  padding: 7.4769px 14.9538px;
  border-radius: 39.8769px;
  color: var(--app-action-orange);
  background: var(--app-panel-bg-dark);
  font-size: var(--app-vip-source-title-font-size);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--app-vip-source-title-line-height);
  text-align: center;
}

.vip-drawer-source .level-badge-name.current-level {
  color: var(--app-vip-text);
  background: var(--app-vip-primary-gradient);
}

.vip-drawer-source .level-badge-icon {
  width: 119.625px;
  height: 119.625px;
  object-fit: contain;
  filter: none;
}

.vip-drawer-source .progress-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9.9692px;
}

.vip-drawer-source .progress-section p,
.vip-drawer-source .progress-amount {
  margin: 0;
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-font-size);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--app-vip-source-line-height);
}

.vip-drawer-source .progress-current,
.vip-drawer-source .progress-target {
  color: var(--app-gold-color);
}

.vip-drawer-source .progress-separator {
  color: var(--app-vip-text);
  font-style: normal;
}

.vip-drawer-source .progress-label {
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-label-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-label-line-height);
}

.vip-drawer-source .progress-bar,
.vip-drawer-source .vip-progress-track {
  width: 100%;
  height: 9.9692px;
  border-radius: 4.9846px;
  background: var(--app-divider-color);
  overflow: hidden;
}

.vip-drawer-source .progress-bar-wrapper {
  width: 100%;
  box-sizing: border-box;
  padding: 0 19.9385px;
}

.vip-drawer-source .progress-fill,
.vip-drawer-source .vip-progress-track i {
  background: var(--app-vip-primary-gradient);
}

.vip-drawer-source .vip-benefits-section {
  display: flex;
  flex-direction: column;
  gap: 9.9692px;
  min-height: 406.719px;
  padding: 9.9692px;
  border-radius: 9.9692px;
  background: var(--app-panel-bg-dark);
}

.vip-drawer-source .benefit-group {
  display: block;
  padding: 9.9692px;
  border-radius: 9.9692px;
  background: var(--app-deep-bg);
}

.vip-drawer-source .benefit-group-title {
  display: flex;
  align-items: center;
  gap: 7.4769px;
  margin: 0 0 9.9692px;
  padding: 0 0 4.9846px;
  border-bottom: 1px solid var(--app-divider-color);
  color: var(--app-action-orange);
  font-size: var(--app-vip-source-label-font-size);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--app-vip-source-label-line-height);
}

.vip-drawer-source .vip-title-icon {
  width: 17.4462px;
  height: 17.4462px;
  flex: 0 0 17.4462px;
  display: inline-block;
  color: var(--app-action-orange);
  background: currentColor;
  -webkit-mask: var(--vip-title-icon-mask) center / contain no-repeat;
  mask: var(--vip-title-icon-mask) center / contain no-repeat;
}

.vip-drawer-source .benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7.4769px;
}

.vip-drawer-source .benefit-grid.four-cols {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vip-drawer-source .benefit-card,
.vip-drawer-source .benefit-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4923px;
  border-radius: 7.4769px;
  background: var(--app-card-bg);
}

.vip-drawer-source .benefit-card {
  padding: 7.4769px;
  min-height: 84.7266px;
}

.vip-drawer-source .benefit-item {
  padding: 4.9846px;
}

.vip-drawer-source .benefit-card.mini {
  min-height: auto;
  padding: 4.9846px;
}

.vip-drawer-source .benefit-row-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7.4769px;
}

.vip-drawer-source .benefit-label {
  color: var(--app-vip-muted-text);
  font-size: var(--app-vip-source-small-font-size);
  line-height: var(--app-vip-source-small-line-height);
  text-align: center;
}

.vip-drawer-source .benefit-value {
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-label-font-size);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--app-vip-source-label-line-height);
}

.vip-drawer-source .benefit-value.accent {
  color: var(--app-gold-color);
}

.vip-drawer-source .mini-progress-bar,
.vip-drawer-source .vip-mini-progress {
  width: 100%;
  height: 3.7385px;
  overflow: hidden;
  border-radius: 2.4923px;
  background: var(--app-divider-color);
}

.vip-drawer-source .mini-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4923px;
  margin-top: 2.4923px;
}

.vip-drawer-source .mini-progress-fill,
.vip-drawer-source .vip-mini-progress i {
  display: block;
  height: 100%;
  background: var(--app-vip-primary-gradient);
}

.vip-drawer-source .mini-progress-text {
  color: var(--app-vip-muted-text);
  font-size: var(--app-vip-source-micro-font-size);
  line-height: var(--app-vip-source-micro-line-height);
}

.vip-drawer-source .receive-button,
.vip-drawer-source .vip-claim-state,
.vip-drawer-source .vip-calendar-strip {
  display: none;
}

.vip-drawer-source .bonus-page-link {
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--app-action-orange);
  background: transparent;
  font-size: var(--app-vip-source-title-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-title-line-height);
  text-align: center;
  text-decoration: underline;
  transform: none;
}

.vip-drawer-source .rewards-calendar-box {
  min-height: 528.109px;
  margin: 14.9538px 0 0;
  padding: 9.9692px;
  display: flex;
  flex-direction: column;
  gap: 24.9231px;
  border-radius: 14.9538px;
  background: var(--app-card-bg);
}

.vip-drawer-source .calendar-header {
  display: flex;
  align-items: center;
  gap: 14.9538px;
  margin: -9.9692px -9.9692px 0;
  padding: 4.9846px;
  border-radius: 14.9538px 14.9538px 0 0;
  background: var(--app-vip-calendar-header-bg);
}

.vip-drawer-source .calendar-icon {
  width: 39.875px;
  height: 39.875px;
  flex-shrink: 0;
  object-fit: contain;
}

.vip-drawer-source .calendar-title {
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-title-font-size);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--app-vip-source-title-line-height);
  letter-spacing: .8723px;
  text-transform: uppercase;
}

.vip-drawer-source .reward-summary {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4.9846px;
  padding: 9.9692px;
  border: 1px solid var(--app-divider-color);
  border-radius: 9.9692px;
  color: var(--app-vip-text);
  background: var(--app-drawer-bg);
  box-shadow: none;
  transform: none;
}

.vip-drawer-source .summary-row {
  display: flex;
  align-items: center;
  gap: 9.9692px;
  font-size: var(--app-vip-source-summary-font-size);
  line-height: var(--app-vip-source-summary-line-height);
}

.vip-drawer-source .summary-label,
.vip-drawer-source .summary-link-text {
  color: var(--app-vip-text);
  font-weight: var(--ui-font-weight-regular);
}

.vip-drawer-source .summary-value-yellow {
  color: var(--app-gold-color);
  font-weight: var(--ui-font-weight-medium);
}

.vip-drawer-source .summary-value-white {
  color: var(--app-vip-text);
  font-weight: var(--ui-font-weight-medium);
}

.vip-drawer-source .summary-link-row {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-title-font-size);
  line-height: var(--app-vip-source-title-line-height);
}

.vip-drawer-source .summary-link-action {
  padding: 0;
  color: var(--app-gold-color);
  background: transparent;
  border: 0;
  font-size: var(--app-vip-source-title-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-title-line-height);
  text-decoration: underline;
}

.vip-drawer-source .calendar-scroll-container {
  display: flex;
  align-items: center;
  gap: 9.9692px;
}

.vip-drawer-source .calendar-cards {
  flex: 1;
  display: flex;
  gap: 14.9538px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 9.9692px 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.vip-drawer-source .calendar-cards::-webkit-scrollbar {
  display: none;
}

.vip-drawer-source .calendar-card {
  flex: 0 0 167.477px;
  width: 167.477px;
  height: 239.258px;
  min-height: 0;
  padding: 19.9385px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 9.9692px;
  border: 1px solid var(--app-divider-color);
  border-radius: 9.9692px;
  color: var(--app-vip-text);
  background: var(--app-panel-bg-dark);
  box-shadow: var(--app-vip-card-shadow-subtle);
}

.vip-drawer-source .card-date {
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-label-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-label-line-height);
  text-align: center;
}

.vip-drawer-source .card-amount {
  color: var(--app-gold-color);
  font-size: var(--app-vip-source-card-amount-font-size);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--app-vip-source-card-amount-line-height);
  text-align: center;
}

.vip-drawer-source .card-status {
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-status-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-status-line-height);
  text-align: center;
}

.vip-drawer-source .scroll-arrow {
  width: 39.875px;
  height: 39.875px;
  flex-shrink: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--app-vip-scroll-arrow-color);
}

.vip-drawer-source .scroll-arrow::before {
  left: 14px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}

.vip-drawer-source .scroll-arrow-right::before {
  left: 10px;
  transform: rotate(225deg);
}

.vip-drawer-source .info-link {
  width: 100%;
  padding: 0;
  color: var(--app-action-orange);
  background: transparent;
  border: 0;
  font-size: var(--app-vip-source-summary-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-summary-line-height);
  text-align: center;
  text-decoration: underline;
}

.vip-drawer-source .bonus-options-box {
  margin-top: 14.9538px;
  padding: 9.9692px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9.9692px;
  border-radius: 9.9692px;
  background: var(--app-card-bg);
}

.vip-drawer-source .bonus-option-card {
  min-width: 0;
  min-height: 115.133px;
  padding: 7.4769px;
  display: flex;
  flex-direction: column;
  gap: 9.9692px;
  overflow: hidden;
  border-radius: 9.9692px;
  background: var(--app-panel-bg-dark);
  box-shadow: var(--app-vip-shadow-subtle);
}

.vip-drawer-source .bonus-header {
  display: flex;
  align-items: center;
  gap: 9.9692px;
  padding: 3.9877px 9.9692px;
}

.vip-drawer-source .bonus-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--app-vip-text);
  font-size: var(--app-vip-source-label-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-label-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vip-drawer-source .help-icon {
  width: 19.9385px !important;
  min-width: 19.9385px !important;
  max-width: 19.9385px !important;
  height: 19.9385px !important;
  min-height: 19.9385px !important;
  max-height: 19.9385px !important;
  flex: 0 0 19.9385px !important;
  display: inline-grid;
  place-items: center;
  position: relative;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--app-action-orange) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: var(--ui-font-size-zero) !important;
  line-height: var(--ui-line-height-none) !important;
  overflow: visible;
}

.vip-drawer-source .help-icon::before {
  content: "?";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-none);
}

.vip-drawer-source .bonus-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4.9846px;
  padding: 0 4.9846px;
}

.vip-drawer-source .add-button {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 9.9692px 12.4615px;
  overflow: hidden;
  border: 0;
  border-radius: 9.9692px;
  color: var(--app-vip-text);
  background: var(--app-panel-bg-dark);
  font-size: var(--app-vip-source-label-font-size);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-vip-source-micro-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vip-drawer-source .add-button.button-enabled {
  color: var(--app-vip-text);
  background: var(--app-vip-primary-gradient);
}

.vip-drawer-source .bonus-icon {
  width: 59.8125px;
  height: 59.8125px;
  flex-shrink: 0;
  object-fit: contain;
}

.vip-rules-modal-overlay,
.vip-salary-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--app-vip-modal-overlay-bg);
}

.vip-rules-modal-overlay[hidden],
.vip-salary-modal-overlay[hidden] {
  display: none;
}

.vip-table-modal,
.salary-modal {
  width: min(100%, 448px);
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  color: var(--ui-text-primary);
  background: var(--app-vip-modal-bg);
  box-shadow: var(--app-vip-modal-shadow);
}

.modal-header,
.salary-modal-header {
  flex: 0 0 auto;
  min-height: 48px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid var(--app-vip-modal-header-border);
  background: var(--app-vip-modal-header-bg);
}

.modal-title,
.salary-modal-title {
  grid-column: 2;
  overflow: hidden;
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-semibold);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-close-btn {
  grid-column: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  color: var(--ui-text-primary);
  background: var(--app-vip-modal-close-bg);
  font-size: var(--ui-font-size-balance);
  line-height: var(--ui-line-height-none);
}

.table-tabs,
.salary-filter-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px;
  background: var(--app-vip-tabbar-bg);
  scrollbar-width: none;
}

.table-tabs::-webkit-scrollbar,
.salary-filter-tabs::-webkit-scrollbar {
  display: none;
}

.table-tab,
.filter-tab {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--app-vip-tab-border);
  border-radius: 6px;
  color: var(--app-vip-tab-muted);
  background: var(--app-vip-tab-bg);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-semibold);
}

.table-tab.tab-active,
.filter-tab.tab-active,
.table-tab.is-active,
.filter-tab.is-active {
  color: var(--app-vip-tab-active-text);
  border-color: var(--app-vip-tab-active-bg);
  background: var(--app-vip-tab-active-bg);
}

.vip-rules-table-wrap,
.salary-records-list {
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.vip-rules-table-inner {
  min-width: 640px;
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--app-vip-table-divider);
}

.vip-rules-grid-row {
  display: grid;
  grid-template-columns: 88px repeat(7, 92px);
  gap: 1px;
}

.vip-rules-cell,
.table-header-cell,
.table-cell {
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 6px;
  color: var(--app-vip-table-cell-text);
  background: var(--app-vip-table-cell-bg);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-2xs);
  text-align: center;
}

.vip-rules-th,
.table-header-cell {
  color: var(--ui-text-primary);
  background: var(--app-vip-table-header-bg);
  font-weight: var(--ui-font-weight-semibold);
}

.vip-rules-level-inner,
.level-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.table-vip-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.table-header-row,
.table-row {
  min-width: 420px;
  display: grid;
  grid-template-columns: 90px repeat(3, 1fr);
  gap: 1px;
}

.table-content {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: var(--app-vip-table-divider);
}

.salary-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--app-vip-tabbar-bg);
}

.salary-summary-item {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  background: var(--app-vip-tab-bg);
}

.salary-summary-item span {
  color: var(--app-vip-tab-muted);
  font-size: var(--ui-font-size-xs);
}

.salary-summary-item strong {
  color: var(--app-vip-salary-accent);
  font-size: var(--ui-font-size-md);
}

.salary-records-list {
  display: grid;
  gap: 8px;
}

.salary-record-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--app-vip-salary-record-bg);
}

.record-left,
.record-right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.record-right {
  justify-content: end;
}

.record-type-badge {
  flex: 0 0 auto;
  min-width: 56px;
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--app-vip-tab-active-text);
  background: var(--app-vip-tab-active-bg);
  font-size: var(--ui-font-size-micro);
  font-weight: var(--ui-font-weight-black);
  text-align: center;
}

.record-info {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: var(--app-vip-salary-record-muted);
  font-size: var(--ui-font-size-xs);
}

.record-amount {
  color: var(--app-vip-salary-accent);
  font-size: var(--ui-font-size-xs);
  white-space: nowrap;
}

.claim-btn,
.claim-all-btn {
  border: 0;
  border-radius: 999px;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-black);
}

.claim-btn {
  min-width: 62px;
  height: 28px;
  color: var(--app-vip-tab-muted);
  background: var(--app-vip-disabled-bg);
}

.claim-btn.btn-claimable,
.claim-all-btn:not(:disabled) {
  color: var(--app-vip-claim-text);
  background: var(--app-vip-claim-gradient);
}

.salary-modal-footer {
  flex: 0 0 auto;
  padding: 10px;
  border-top: 1px solid var(--app-vip-tab-border);
}

.claim-all-btn {
  width: 100%;
  min-height: 40px;
  color: var(--app-vip-tab-muted);
  background: var(--app-vip-disabled-bg);
}

@media (max-width: 430px) {
  .vip-source-header {
    grid-template-columns: 48px 1fr 82px;
    min-height: 58px;
    padding: 6px 10px 4px;
  }

  .vip-source-logo {
    justify-self: start;
    align-self: start;
    width: 142px;
    height: 28px;
    margin-left: -20px;
    margin-top: 6px;
  }

  .vip-source-scroll {
    gap: 7px;
    padding: 8px 6px max(14px, env(safe-area-inset-bottom));
  }

  .vip-level-source-card {
    gap: 13px;
    padding: 20px 16px 8px;
  }

  .vip-level-source-title img {
    display: none;
  }

  .vip-level-source-title strong {
    font-size: var(--ui-font-size-md);
  }

  .vip-level-source-title {
    margin-left: 40px;
  }

  .vip-level-stage {
    grid-template-columns: 40px 1fr 40px;
  }

  .vip-level-arrow {
    width: 40px;
    height: 40px;
  }

  .vip-benefit-rate-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vip-benefit-withdraw-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vip-reward-calendar-source {
    background: #394245;
  }

  .vip-calendar-source-header {
    transform: translateY(-1px);
  }

  .vip-calendar-source-summary {
    justify-content: flex-start;
    gap: 50px;
  }

  .vip-calendar-source-summary .summary-row:last-child b {
    color: var(--ui-text-primary);
  }

  .l5-hero-grid .l5-team,
  .l5-hero-grid .l5-vip,
  .l5-hero-grid .l5-hero-wide {
    background-position: center -1px;
  }

  .l5-header:has(.l5-login-button:not(.is-hidden)) .l5-auth-button {
    top: calc(1.4cqw + 6px);
  }

  .l5-header:has(.l5-login-button:not(.is-hidden)) .l5-register-button::after {
    top: calc(-1.8462cqw - 5px);
  }
}

.vip-source-actions button {
  background: transparent;
  box-shadow: none;
}

.ui-drawer-panel button:not(.close-button):not(.back-button) {
  min-height: 44px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  color: var(--ui-text);
  background: var(--ui-surface-hover-soft);
}

.lite-toast {
  position: absolute;
  z-index: 1600;
  left: 50%;
  bottom: calc(var(--app-tabbar-height) + 18px);
  max-width: calc(100% - 36px);
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: rgba(16, 20, 31, .95);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-form);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}

.lite-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lite-toast[data-tone="success"] {
  background: rgba(var(--lite-accent-rgb, 8, 153, 83), .96);
}

.lite-toast[data-tone="warning"] {
  color: #261900;
  background: rgba(255, 197, 65, .96);
}

.lite-toast[data-tone="danger"] {
  background: rgba(229, 57, 53, .96);
}

.bottom-tabbar {
  position: absolute;
  z-index: var(--z-tabbar);
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--app-tabbar-height);
  min-height: var(--app-tabbar-height);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 0;
  border-top: 0;
  border-radius: 14px 14px 0 0;
  background: var(--color-bg-200);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 -1.0256cqw 3.0769cqw rgba(0, 0, 0, .32);
  backdrop-filter: none;
}

.bottom-tabbar button {
  min-width: 0;
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  color: var(--color-text-gray-300);
  background: transparent;
  font-size: var(--ui-font-size-micro);
  font-family: var(--font-title, Prompt, Roboto, sans-serif);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-xs);
}

.bottom-tabbar button.is-active {
  color: var(--color-text-white-100);
  background: transparent;
  font-weight: var(--ui-font-weight-bold);
}

.bottom-tabbar img {
  position: absolute;
  top: calc(.6154cqw + 7px);
  left: 50%;
  width: 25.6px;
  height: 25.6px;
  object-fit: contain;
  transform: translateX(-50%);
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  pointer-events: none;
}

.bottom-tabbar span {
  position: absolute;
  top: 5.9487cqw;
  left: 0;
  width: 100%;
  height: 15px;
  line-height: var(--ui-line-height-xs);
  text-align: center;
  opacity: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.bottom-tabbar button:not(.bottom-main) span {
  top: calc(5.9487cqw + 6px);
}

.bottom-tabbar .bottom-main img {
  top: calc(-2.0513cqw + 1px);
  width: 41.6px;
  height: 41.6px;
  margin-top: 0;
}

.checkin-modal {
  z-index: var(--z-modal);
}

.checkin-modal .ui-backdrop {
  background: rgba(0, 0, 0, .6);
}

.checkin-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(100% - 24px), 420px);
  max-height: min(88dvh, 720px, calc(100% - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px 13px 18px;
  border-radius: 12px;
  background: #141b24;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .54);
  transition: opacity var(--ui-duration) ease, transform var(--ui-duration) ease;
  pointer-events: auto;
  scrollbar-width: none;
}

.checkin-card::-webkit-scrollbar {
  display: none;
}

.checkin-modal:not(.is-active) .checkin-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 16px));
}

.checkin-modal.is-active .checkin-card {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.checkin-card button {
  border: 0;
}

.checkin-card .checkin-close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .95);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--ui-text-primary);
  opacity: .85;
}

.checkin-card .checkin-close::before,
.checkin-card .checkin-close::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.checkin-card .checkin-close::before {
  transform: rotate(45deg);
}

.checkin-card .checkin-close::after {
  transform: rotate(-45deg);
}

.checkin-head {
  min-height: 68px;
  text-align: center;
}

.checkin-head h2 {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-icon-md);
  line-height: 1.15;
  font-weight: var(--ui-font-weight-heavy);
}

.checkin-head p {
  margin: 8px 0 0;
  color: var(--color-text-gray-700);
  font-size: var(--ui-font-size-lg);
}

.checkin-progress-card {
  padding: 12px 10px 11px;
  border-radius: 12px;
  background: var(--ui-surface-hover-soft);
}

.checkin-redeem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 48px;
  align-items: center;
  gap: 0;
  color: #eaf2fd;
  font-size: var(--ui-font-size-lg-plus);
  line-height: var(--ui-line-height-tight-plus);
}

.checkin-redeem b {
  color: var(--ui-primary-2);
}

.checkin-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 48px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px 0 0 999px;
  background: rgba(0, 0, 0, .2);
  color: var(--ui-text-primary);
  font-weight: var(--ui-font-weight-heavy);
}

.checkin-coin img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.checkin-redeem button {
  width: 48px;
  height: 30px;
  border-radius: 0 999px 999px 0;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #258f58);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-black);
}

.checkin-milestones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 11px;
  color: #8e99aa;
  font-size: var(--ui-font-size-md);
  text-align: center;
}

.checkin-milestones span {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 5px;
  background: transparent;
}

.checkin-days {
  display: flex;
  gap: 8px;
  margin-top: 13px;
  margin-bottom: 9px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.checkin-days::-webkit-scrollbar {
  display: none;
}

.checkin-days button {
  position: relative;
  flex: 0 0 46px;
  height: 62px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid var(--ui-border-subtle);
  border-radius: 7px;
  background: var(--ui-surface-hover-soft);
  color: #aeb8c7;
}

.checkin-days button.is-today {
  border-color: var(--ui-primary-2);
  box-shadow: 0 0 6px rgba(251, 165, 49, .25);
  color: var(--ui-text-primary);
}

.checkin-days button.is-checked {
  background: linear-gradient(180deg, rgba(var(--lite-accent-rgb, 38, 201, 109), 0.44), rgba(var(--lite-accent-rgb, 21, 104, 63), 0.62));
  color: var(--ui-text-primary);
}

.checkin-days button.is-future {
  opacity: 0.62;
}

.checkin-days button.is-hot::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff6443;
  box-shadow: 0 0 8px rgba(255, 100, 67, 0.72);
}

.checkin-days button.is-gold {
  border-color: var(--ui-primary-2);
}

.checkin-days b {
  display: block;
  margin-bottom: 2px;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-heavy);
}

.checkin-days img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.checkin-days em {
  position: absolute;
  right: 3px;
  bottom: 2px;
  display: block;
  min-height: 10px;
  color: var(--ui-primary-2);
  font-size: var(--ui-font-size-2xs);
  font-style: normal;
}

.checkin-main-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 8px;
  margin-top: 11px;
}

.checkin-main {
  width: 100%;
  height: 48px;
  margin-top: 0;
  border-radius: 9px;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #05d96e);
  font-size: var(--ui-font-size-lg-plus);
  font-weight: var(--ui-font-weight-black);
}

.checkin-history {
  height: 48px;
  border-radius: 9px;
  border: 1px solid var(--app-withdraw-header-border) !important;
  background: transparent;
  color: #f1c68a;
  font-size: 23px;
}

.checkin-main span {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.checkin-main:disabled,
.checkin-redeem button:disabled {
  opacity: 0.58;
}

.checkin-link {
  display: block;
  margin: 12px 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--lite-accent-bright, #26d86f);
  font-size: var(--ui-font-size-lg-plus);
  text-align: center;
  text-decoration: underline;
}

.checkin-task-tabs {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0;
}

.checkin-task-tabs button {
  height: 45px;
  border-radius: 8px;
  color: #9da8b8;
  background: var(--ui-surface-hover-soft);
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-medium);
}

.checkin-task-tabs button.is-active {
  color: var(--ui-text-primary);
  background: var(--lite-accent, #26c96d);
}

.checkin-task-tabs small {
  color: inherit;
  font-size: var(--ui-font-size-sm);
}

.checkin-tasks {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.checkin-tasks article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 8px;
  border-radius: 9px;
  background: var(--ui-surface-hover-soft);
}

.task-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(56, 168, 250, .2);
  color: var(--lite-accent-bright, #14dc87);
}

.task-icon--bet {
  background: rgba(251, 165, 49, .18);
}

.task-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--lite-accent-bright, #14dc87);
  -webkit-mask: url("/7000/assets/shared/svg/wallet-outline.svg") center / contain no-repeat;
  mask: url("/7000/assets/shared/svg/wallet-outline.svg") center / contain no-repeat;
}

.task-icon--bet::before {
  background: #fba531;
  -webkit-mask-image: url("/7000/assets/shared/svg/game_out_icon.svg");
  mask-image: url("/7000/assets/shared/svg/game_out_icon.svg");
}

.checkin-tasks p,
.checkin-tasks small {
  margin: 0;
}

.checkin-tasks p {
  color: #eaf1fa;
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-title-ratio);
}

.checkin-tasks p b {
  color: #ffca48;
}

.checkin-tasks small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-heavy);
}

.checkin-tasks small img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.checkin-task-track {
  display: block;
  width: 100%;
  height: 4px;
  margin: 4px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.checkin-task-track em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lite-accent, #1fd86f), #ffe36b);
}

.checkin-tasks article > button {
  height: 38px;
  border-radius: 9px;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #25cf6d);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-black);
}

.guest-bind-modal,
.account-access-modal {
  z-index: var(--z-modal);
}

.guest-bind-modal .ui-backdrop,
.account-access-modal .ui-backdrop {
  background: rgba(0, 0, 0, .64);
  backdrop-filter: blur(5px);
}

.guest-bind-card,
.account-access-card {
  position: absolute;
  left: 4.1026cqw;
  right: 4.1026cqw;
  color: #f6fbff;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 78% 14%, rgba(var(--lite-accent-rgb, 56, 220, 107), .35), transparent 26%),
    #171b25;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .55);
  transition: opacity var(--ui-duration) ease, transform var(--ui-duration) ease;
}

.guest-bind-card {
  top: 50%;
  min-height: 0;
  padding: 5.1282cqw 4.1026cqw 4.1026cqw;
  border-radius: 3.0769cqw;
}

.guest-bind-modal:not(.is-active) .guest-bind-card,
.account-access-modal:not(.is-active) .account-access-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.guest-bind-modal:not(.is-active) .guest-bind-card {
  transform: translateY(calc(-50% + 16px));
}

.account-access-modal:not(.is-active) .account-access-card {
  transform: translateY(calc(-50% + 16px));
}

.guest-bind-modal.is-active .guest-bind-card,
.account-access-modal.is-active .account-access-card {
  visibility: visible;
  opacity: 1;
}

.guest-bind-modal.is-active .guest-bind-card {
  transform: translateY(-50%);
}

.account-access-modal.is-active .account-access-card {
  transform: translateY(-50%);
}

.guest-bind-close,
.account-access-close {
  position: absolute;
  top: 2.8205cqw;
  right: 2.8205cqw;
  width: 7.6923cqw;
  height: 7.6923cqw;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

.account-access-close img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.guest-bind-close {
  color: var(--ui-text-primary);
  background: var(--ui-border-subtle);
}

.guest-bind-close img {
  display: none;
}

.guest-bind-close::before {
  content: '×';
  display: block;
  font-size: var(--ui-font-size-cqw-xl);
  line-height: var(--app-line-height-tightest);
  font-weight: var(--ui-font-weight-light);
}

.guest-bind-card h2,
.account-access-card h2 {
  margin: 0;
  padding-right: 8.2051cqw;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-cqw-2xl);
  line-height: 1.3;
  font-weight: var(--ui-font-weight-heavy);
}

.guest-bind-card p {
  margin: 3.0769cqw 0 4.1026cqw;
  color: var(--lite-accent-bright, #11e76f);
  font-size: var(--app-font-size-cqw-md);
  line-height: 1.45;
}

.guest-bind-primary,
.guest-bind-secondary {
  width: 100%;
  height: 11.5385cqw;
  border: 0;
  border-radius: 9999px;
  font-size: var(--app-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-heavy);
}

.account-access-submit,
.account-access-external button {
  width: 100%;
  height: 12.3077cqw;
  border: 0;
  border-radius: 3.0769cqw;
  font-size: var(--ui-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-heavy);
}

.guest-bind-primary {
  color: var(--app-guest-action-text);
  background: var(--app-guest-primary-gradient);
}

.account-access-submit {
  color: var(--app-guest-action-text);
  background: linear-gradient(180deg, var(--lite-accent-bright, #71ef86), var(--lite-accent-bright, #45d66c));
}

.account-access-submit:disabled {
  color: rgba(255, 255, 255, .55);
  background: rgba(var(--lite-accent-rgb, 24, 132, 67), .78);
}

.guest-bind-secondary {
  margin-top: 2.8205cqw;
  color: var(--app-guest-secondary-text);
  background: var(--app-guest-secondary-bg);
  border: 1px solid var(--ui-border-subtle);
}

.account-access-card {
  top: 50%;
  max-height: min(85dvh, calc(100dvh - 12.3077cqw));
  overflow: auto;
  padding: 5.1282cqw 4.1026cqw 4.1026cqw;
  border-radius: 4.1026cqw;
}

.account-access-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
}

.account-access-glow::before {
  content: "";
  position: absolute;
  top: -8.2051cqw;
  right: -6.1538cqw;
  width: 28.7179cqw;
  height: 28.7179cqw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 42%, rgba(var(--lite-accent-rgb, 18, 226, 106), .85) 0 12%, transparent 13%),
    radial-gradient(circle at 70% 70%, rgba(var(--lite-accent-rgb, 18, 226, 106), .45) 0 8%, transparent 9%);
  filter: blur(3.0769cqw);
  opacity: .42;
}

.account-access-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 8.2051cqw;
  margin-bottom: 4.1026cqw;
}

.account-access-card h2 {
  padding-right: 10.2564cqw;
}

.account-access-close {
  top: 3.5897cqw;
  right: 3.5897cqw;
  width: 9.2308cqw;
  height: 9.2308cqw;
  color: #ffffff;
  background: #10131d;
  font-size: 5.1282cqw;
  line-height: 1;
  font-weight: 300;
}

.account-access-close img {
  display: none;
}

.account-access-tabs {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 1.5385cqw 0 3.8462cqw;
  padding: 1.0256cqw;
  border-radius: 2.8205cqw;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(8, 12, 14, .72);
}

.account-access-tabs button {
  height: 10.2564cqw;
  border: 0;
  border-radius: 2.3077cqw;
  color: var(--lite-accent-bright, #28e46e);
  background: transparent;
  font-size: var(--ui-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-heavy);
}

.account-access-tabs button.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, var(--lite-accent-bright, #08e86e), var(--lite-accent, #06be55));
}

.account-access-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5641cqw;
}

.account-access-label {
  color: #ffffff;
  font-size: var(--ui-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-bold);
}

.account-access-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 12.3077cqw;
  margin-bottom: 1.5385cqw;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 3.0769cqw;
  background: rgba(10, 13, 22, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.account-access-field:focus-within {
  border-color: var(--lite-accent-bright, #08e86e);
  box-shadow: inset 0 0 0 1px rgba(var(--lite-accent-rgb, 8, 232, 110), .72);
}

.account-access-icon {
  flex: 0 0 auto;
  width: 5.1282cqw;
  height: 5.1282cqw;
  margin-left: 4.1026cqw;
  color: var(--lite-accent-bright, #08e86e);
}

.account-access-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 4.1026cqw;
  border: 0;
  color: #ffffff;
  outline: 0;
  background: transparent;
  font-size: var(--ui-font-size-cqw-lg);
}

.account-access-phone-field input {
  padding-left: 3.0769cqw;
}

.account-access-phone-prefix {
  display: inline-flex;
  align-items: center;
  gap: 2.0513cqw;
  height: 7.1795cqw;
  margin-left: 3.0769cqw;
  padding-right: 3.0769cqw;
  border-right: 1px solid rgba(255, 255, 255, .55);
  color: #ffffff;
  font-size: var(--ui-font-size-cqw-lg);
  font-weight: var(--ui-font-weight-heavy);
}

.account-access-flag {
  width: 5.1282cqw;
  height: 5.1282cqw;
  border-radius: 50%;
  background: url('/7000/assets/shared/panda/us.svg') center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6);
}

.account-access-toggle {
  flex: 0 0 auto;
  width: 8.2051cqw;
  height: 8.2051cqw;
  margin-right: 2.5641cqw;
  padding: 0;
  border: 0;
  color: var(--lite-accent-bright, #08e86e);
  background: transparent;
}

.account-access-toggle svg {
  width: 5.1282cqw;
  height: 5.1282cqw;
}

.floating-activity-panel-lite {
  position: absolute;
  z-index: 42;
  --floating-activity-top: calc(var(--app-content-padding-top) + 1.7094cqw);
  top: var(--floating-activity-top);
  right: 0;
  bottom: auto;
  width: 35.8974cqw;
  height: min(150.5185cqw, calc(100% - var(--floating-activity-top) - var(--app-tabbar-height)));
  pointer-events: none;
}

.app-shell:not(.route-home) .floating-activity-panel-lite {
  display: none;
}

.floating-activity-row {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  min-height: 0;
  pointer-events: none;
}

.floating-activity-row,
.floating-activity-panel-lite.is-open .floating-activity-row {
  transform: none;
}

.floating-activity-panel-lite .l5-side-handle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  width: 5.1282cqw;
  height: 12.3077cqw;
  transform: translateY(-50%);
  pointer-events: auto;
}

.floating-activity-panel-lite.is-open .l5-side-handle {
  right: 30.7692cqw;
  transform: translateY(-50%);
}

.floating-activity-panel-lite.is-open .l5-side-handle::first-letter {
  color: transparent;
}

.floating-activity-list {
  position: absolute;
  top: 1px;
  right: 0;
  width: 30.7692cqw;
  height: calc(100% - 2px);
  max-height: calc(100% - 2px);
  margin: 0;
  padding: 1.2821cqw;
  overflow: auto;
  list-style: none;
  border: 1px solid var(--ui-border-subtle);
  background: var(--ui-surface-control);
  transform: translateX(100%);
  transition: transform var(--ui-duration) ease;
  pointer-events: auto;
}

.floating-activity-panel-lite.is-open .floating-activity-list {
  transform: translateX(0);
}

.floating-activity-list li + li {
  margin-top: 1.7949cqw;
}

.floating-activity-list button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 1.5385cqw;
  overflow: hidden;
  background: transparent;
}

.floating-activity-list img {
  display: block;
  width: 100%;
  height: 12.8395cqw;
  object-fit: cover;
}

.home-activity-modal {
  z-index: 100;
}

.home-activity-modal .popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: none;
}

.home-activity-modal:not(.is-active) .popup-backdrop,
.home-activity-modal:not(.is-active) .home-activity-popup-content {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.home-activity-popup-content {
  position: absolute;
  z-index: 1;
  top: 25.7244%;
  left: 50%;
  width: min(78.1893cqw, 380px);
  transform: translateX(-50%);
  color: var(--ui-text-primary);
  background: transparent;
}

.home-activity-popup-image {
  display: block;
  width: 100%;
  aspect-ratio: 380 / 400.5;
  object-fit: contain;
  border-radius: 12px;
}

.home-activity-popup-actions {
  display: grid;
  justify-items: center;
  gap: 11px;
  margin-top: 11px;
}

.home-activity-data-card {
  margin: -42px 12px 0;
  position: relative;
  z-index: 2;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, rgba(11, 30, 82, .94), rgba(30, 11, 81, .92));
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
}

.home-activity-data-card > span,
.home-activity-data-card > strong { display: block; }
.home-activity-data-card > span { color: #bad8ff; font-size: 10px; letter-spacing: .12em; }
.home-activity-data-card > strong { margin-top: 4px; font-size: 18px; }
.home-activity-data-values { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 11px; background: rgba(255,255,255,.2); }
.home-activity-data-values p { margin: 0; padding: 8px 5px; background: rgba(0,0,0,.18); }
.home-activity-data-values small, .home-activity-data-values b { display: block; }
.home-activity-data-values small { color: #c6d6f8; font-size: 10px; }
.home-activity-data-values b { margin-top: 3px; color: #ffe58d; font-size: 13px; }
.home-activity-data-countdown { margin-top: 10px; color: #fff; font-weight: 700; letter-spacing: .14em; }

.new-user-reward-modal { z-index: 102; }
.new-user-reward-visual { display: none; }
.new-user-reward-card { position: absolute; top: 50%; left: 50%; width: min(82cqw, 380px); transform: translate(-50%, -50%); padding: 32px 26px 26px; border: 1px solid rgba(255, 234, 161, .72); border-radius: 20px; color: #fff; text-align: center; background: radial-gradient(circle at 50% 0, #7942d4, #1a1255 65%, #0b0d2d); box-shadow: 0 20px 52px rgba(0, 0, 0, .52); }
.new-user-reward-kicker { color: #ffe19b; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.new-user-reward-card h2 { margin: 10px 0 6px; font-size: 23px; }
.new-user-reward-card [data-new-user-reward-amount] { display: block; color: #ffe27d; font-size: 38px; line-height: 1.15; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.new-user-reward-card p { margin: 15px auto 20px; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.5; }
.new-user-reward-primary { width: 100%; min-height: 44px; border: 0; border-radius: 999px; color: #261650; background: linear-gradient(180deg, #ffe98f, #f5b743); font-weight: 800; }
.new-user-reward-close { position: absolute; top: 9px; right: 12px; border: 0; color: rgba(255,255,255,.76); background: transparent; font-size: 28px; line-height: 1; }
.new-user-reward-fab { position: fixed; z-index: 101; right: 16px; bottom: calc(var(--safe-area-bottom, 0px) + 78px); width: 48px; height: 48px; border: 1px solid rgba(255, 234, 161, .82); border-radius: 50%; background: #4b248d; box-shadow: 0 5px 18px rgba(0,0,0,.4); font-size: 23px; }

.home-activity-remind-row {
  min-width: 177.64px;
  height: 33.96px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 13px;
  border-radius: 8.9723px;
  color: #4a4a4a;
  background: rgba(255, 255, 255, .95);
  font-size: 14.3557px;
  line-height: var(--ui-line-height-form);
}

.home-activity-remind-row input {
  width: 16.34px;
  height: 16.34px;
  margin: 0;
  accent-color: var(--lite-accent, #00d563);
}

.home-activity-bottom-close {
  width: 36.88px;
  height: 36.88px;
  position: relative;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-white-80);
  background: rgba(255, 255, 255, .22);
}

.home-activity-bottom-close::before,
.home-activity-bottom-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.home-activity-bottom-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.home-activity-bottom-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.l5-wallet-details-modal,
.l5-wallet-progress-modal {
  z-index: 1050;
}

.l5-wallet-details-modal .ui-backdrop,
.l5-wallet-progress-modal .ui-backdrop {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(5px);
}

.l5-wallet-details-card,
.l5-wallet-progress-card {
  position: absolute;
  left: 50%;
  width: min(95.5cqw, 390px);
  color: var(--ui-text-primary);
  background: #191d28;
  border: 1px solid rgba(111, 122, 147, .38);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .52);
}

.l5-wallet-details-card {
  bottom: 47.98%;
  transform: translate(-50%, 50%);
  padding: 18px 16px 22px;
  border-radius: 14px;
}

.l5-wallet-details-modal:not(.is-active) .l5-wallet-details-card,
.l5-wallet-progress-modal:not(.is-active) .l5-wallet-progress-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.l5-wallet-details-modal.is-active .l5-wallet-details-card,
.l5-wallet-progress-modal.is-active .l5-wallet-progress-card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.l5-wallet-details-card header {
  height: 36px;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
}

.l5-wallet-details-card header strong {
  grid-column: 2;
  justify-self: center;
  font-size: var(--ui-font-size-balance);
  line-height: var(--ui-line-height-title);
}

.l5-wallet-details-card header button,
.l5-wallet-action-card div button {
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, .74);
  background: var(--ui-border-subtle);
}

.l5-wallet-details-card header button {
  grid-column: 3;
  width: 28px;
  height: 28px;
  font-size: var(--ui-font-size-icon-md);
}

.l5-wallet-detail-tabs {
  height: 43px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 8px 0 18px;
  padding: 4px;
  border-radius: 8px;
  background: #11151f;
}

.l5-wallet-detail-tabs button {
  border: 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, .58);
  background: transparent;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-heavy);
}

.l5-wallet-detail-tabs button.is-active {
  color: var(--ui-text-primary);
  background: #2b303c;
}

.l5-wallet-detail-body {
  display: grid;
}

.l5-wallet-detail-panel {
  display: grid;
  gap: 12px;
}

.l5-wallet-amount-card,
.l5-wallet-action-card {
  border: 1px solid rgba(111, 122, 147, .22);
  border-radius: 10px;
  background: linear-gradient(180deg, #222735 0%, #1b202b 100%);
}

.l5-wallet-amount-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px 14px 20px;
}

.l5-wallet-amount-card span,
.l5-wallet-action-card p {
  color: rgba(255, 255, 255, .58);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-record);
}

.l5-wallet-amount-card strong {
  color: #ffad22;
  font-size: 26px;
  line-height: 31px;
}

.l5-wallet-action-card {
  display: grid;
  gap: 12px;
  padding: 18px 16px 16px;
}

.l5-wallet-action-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.l5-wallet-action-card strong {
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-record);
}

.l5-wallet-action-card div button {
  width: 22px;
  height: 22px;
  font-size: var(--ui-font-size-sm);
}

.l5-wallet-action-card > button {
  height: 40px;
  border: 0;
  border-radius: 8px;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #02c765);
  box-shadow: 0 8px 20px rgba(var(--lite-accent-rgb, 2, 199, 101), .28);
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-black);
}

.l5-wallet-progress-card {
  top: 33.65%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 32px 16px 14px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 8%, rgba(var(--lite-accent-rgb, 115, 179, 105), .54), transparent 28%),
    linear-gradient(120deg, #182232 0%, #102d29 100%);
}

.l5-wallet-progress-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 7px;
  color: var(--color-text-gray-700);
  background: var(--ui-border);
  font-size: var(--ui-font-size-display-sm);
}

.l5-wallet-progress-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 8px;
  color: var(--lite-accent-deep, #0a6b38);
  background: var(--lite-accent-bright, #79ff9a);
  font-size: var(--ui-font-size-icon-md);
  font-weight: var(--ui-font-weight-black);
}

.l5-wallet-progress-card small {
  display: block;
  margin-bottom: 6px;
  color: var(--lite-accent-bright, #00ff80);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-black);
  letter-spacing: 0;
}

.l5-wallet-progress-card h2 {
  margin: 0 0 10px;
  font-size: var(--ui-font-size-2xl);
  line-height: 26px;
}

.l5-wallet-progress-card p {
  margin: 0 0 14px;
  color: var(--color-text-gray-700);
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-title);
}

.l5-wallet-progress-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(var(--lite-accent-rgb, 30, 225, 130), .42);
  border-radius: 6px;
  background: rgba(28, 32, 45, .92);
}

.l5-wallet-progress-meter span,
.l5-wallet-progress-meter strong {
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-compact);
}

.l5-wallet-progress-meter strong {
  color: var(--lite-accent-bright, #f4ff7b);
}

.l5-wallet-progress-meter i {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, .48);
}

.l5-wallet-progress-meter em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lite-accent, #0ac766), var(--lite-accent-bright, #66dd59) 64%, #ffe868);
}

.l5-wallet-progress-card footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.l5-wallet-progress-card footer button {
  height: 45px;
  border-radius: 6px;
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-black);
}

.l5-wallet-progress-card footer button:first-child {
  border: 0;
  color: #06140b;
  background: var(--lite-accent, #02c765);
}

.l5-wallet-progress-card footer button:last-child {
  border: 1px solid rgba(var(--lite-accent-rgb, 0, 213, 117), .5);
  color: rgba(255, 255, 255, .7);
  background: rgba(26, 31, 44, .7);
}

.weekcard-modal:not(.is-active) .weekcard-card,
.twostep-payment-methods-modal:not(.is-active) .twostep-payment-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.weekcard-modal {
  z-index: 9999999;
}

.twostep-payment-methods-modal .ui-backdrop {
  background: #131720;
  backdrop-filter: none;
}

.app-shell > [data-include="./blocks/payment-methods-modal.html"] {
  position: fixed;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100vw - var(--app-window-max-width, var(--ui-max-width, 486px))) / 2));
  z-index: var(--z-modal);
  width: min(100vw, var(--app-window-max-width, var(--ui-max-width, 486px)));
  height: min(100dvh, var(--app-window-height, 100dvh));
  pointer-events: none;
}

.twostep-payment-methods-modal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.weekcard-modal .ui-backdrop {
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.app-shell:has([data-modal="weekcard"].is-active) .bottom-tabbar {
  opacity: .16;
}

.app-shell:has([data-modal="weekcard"].is-active) .bottom-tabbar button:not(.bottom-main) img {
  top: calc(.6154cqw + 1px);
}

.app-shell:has([data-modal="weekcard"].is-active) .bottom-tabbar button:not(.bottom-main) span {
  top: 5.9487cqw;
}

.weekcard-card,
.twostep-payment-card {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 408px);
  color: var(--ui-text-primary);
  background: #141923;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .48);
  transform: translateX(-50%);
}

.weekcard-card {
  top: 50%;
  bottom: auto;
  width: min(calc(100% - 10px), 420px);
  height: min(calc(100vh - 40px), 860px);
  height: min(calc(100svh - 40px), 860px);
  height: min(calc(100dvh - 40px), 860px);
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);
  max-height: calc(100dvh - 40px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 152, 0, .55) 0%, rgba(255, 87, 34, .5) 40%, rgba(103, 58, 183, .55) 100%);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .2);
}

.weekcard-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, transparent 100%);
  pointer-events: none;
}

.weekcard-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  pointer-events: none;
}

.weekcard-card > * {
  position: relative;
  z-index: 1;
}

.weekcard-close {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--ui-text-primary);
  background: rgba(0, 0, 0, .4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  font-size: 24px;
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-none);
}

.weekcard-source-header {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 25px 44px;
  text-align: center;
}

.weekcard-source-header strong {
  color: var(--ui-text-primary);
  font-size: clamp(34px, 9.2vw, 52px);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-none);
  text-shadow: 0 3px 6px rgba(0, 0, 0, .34);
}

.weekcard-source-header strong span {
  font-size: var(--ui-font-size-icon-lg);
  font-weight: var(--ui-font-weight-heavy);
}

.weekcard-source-header small {
  color: rgba(255, 255, 255, .84);
  font-size: 11px;
  font-weight: var(--ui-font-weight-bold);
  letter-spacing: 1px;
}

.weekcard-progress {
  display: grid;
  gap: 6px;
  padding: 15px 25px 5px;
}

.weekcard-progress-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffbd44;
  font-size: 11px;
  font-weight: var(--ui-font-weight-black);
}

.weekcard-progress-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(39, 25, 18, .58);
}

.weekcard-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffa42b, #ffd15d);
}

.weekcard-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 0 0 10px;
}

.weekcard-tabs button {
  height: 30px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  color: rgba(255, 255, 255, .48);
  background: rgba(0, 0, 0, .18);
  font-size: 12px;
  font-weight: var(--ui-font-weight-bold);
}

.weekcard-tabs button:first-child {
  min-width: 64px;
}

.weekcard-tabs button.is-active {
  color: var(--ui-text-primary);
  border-color: rgba(255, 164, 43, .92);
  background: rgba(255, 143, 0, .23);
  box-shadow: 0 0 0 1px rgba(255, 164, 43, .28) inset;
}

.weekcard-panel {
  min-height: 0;
}

.weekcard-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding: 0 12px;
  scrollbar-width: none;
}

.weekcard-body::-webkit-scrollbar {
  display: none;
}

.weekcard-reward-list {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  padding: 0;
}

.weekcard-reward-list::-webkit-scrollbar {
  display: none;
}

.weekcard-loading {
  min-height: 70px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: rgba(255, 255, 255, .72);
  background: #1c1c1f;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
}

.weekcard-reward-row {
  min-height: 70px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 70px;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px;
  border-radius: 20px;
  background: #1c1c1f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 7px 16px rgba(0, 0, 0, .18);
}

.weekcard-reward-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #2b2d31;
}

.weekcard-reward-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
}

.weekcard-reward-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.weekcard-reward-copy strong {
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: clamp(13px, 3.25vw, 16px);
  font-weight: var(--ui-font-weight-black);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weekcard-reward-copy small {
  color: #ffb638;
  font-size: clamp(11px, 2.9vw, 14px);
  font-weight: var(--ui-font-weight-black);
  text-shadow: 0 0 8px rgba(255, 182, 56, .3);
}

.weekcard-reward-row button {
  height: 32px;
  border: 0;
  border-radius: 999px;
  color: #9e9e9e;
  background: #424242;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-black);
}

.weekcard-intro {
  overflow: visible;
  margin: 0 0 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(28, 28, 31, .95);
  box-shadow: inset 0 0 0 1px var(--ui-border-subtle);
}

.weekcard-intro strong {
  display: block;
  margin-bottom: 10px;
  color: #ffb638;
  font-size: var(--ui-font-size-section);
}

.weekcard-panel p,
.first-deposit-rules p {
  margin: 0;
  color: var(--app-deposit-option-text);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-record);
}

.weekcard-footer {
  display: block;
  position: relative;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  flex: 0 0 auto;
  padding: 16px 12px calc(24px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

.weekcard-unlock,
.first-deposit-cta,
.twostep-pay-btn {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: linear-gradient(90deg, var(--lite-accent, #08dc6f), var(--lite-accent-bright, #03f078));
  font-size: 16px;
  font-weight: var(--ui-font-weight-black);
  box-shadow: 0 10px 28px rgba(var(--lite-accent-rgb, 7, 218, 110), .28);
}

.twostep-payment-card {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 16px calc(8px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  color: var(--ui-text-primary);
  background: #131720;
  box-shadow: none;
  transform: none;
  overflow: hidden;
}

.twostep-page-header {
  position: relative;
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(64, 70, 88, .78);
}

.twostep-page-header h2 {
  margin: 0;
  color: #f7f8fb;
  font-size: 20px;
  font-weight: var(--ui-font-weight-black);
  line-height: 1;
}

.twostep-back-button {
  width: 44px;
  height: 44px;
  position: absolute;
  left: 0;
  top: 10px;
  border: 0;
  background: transparent;
}

.twostep-back-button::before {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 14px;
  left: 16px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
  border-radius: 2px;
  transform: rotate(45deg);
}

.twostep-amount-panel {
  min-height: 111px;
  display: grid;
  place-items: center;
}

.twostep-amount-panel strong {
  color: var(--lite-accent-bright, #63dc72);
  font-size: 40px;
  font-weight: var(--ui-font-weight-black);
  line-height: 1;
}

.twostep-rp-channel-section {
  display: grid;
  gap: 8px;
  padding: 0 18px 14px;
}

.twostep-rp-channel-label {
  color: rgba(255, 255, 255, .64);
  font-size: 12px;
  font-weight: var(--ui-font-weight-bold);
}

.twostep-rp-channel-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.twostep-rp-channel-list::-webkit-scrollbar {
  display: none;
}

.twostep-rp-channel-option {
  flex: 0 0 auto;
  min-height: 34px;
  max-width: 172px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(101, 145, 231, .35);
  border-radius: 8px;
  color: rgba(255, 255, 255, .72);
  background: rgba(17, 28, 51, .78);
  font-size: 13px;
  font-weight: var(--ui-font-weight-bold);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.twostep-rp-channel-option.is-selected {
  border-color: var(--lite-accent-bright, #5fd66e);
  color: #fff;
  background: rgba(var(--lite-accent-rgb, 7, 218, 110), .2);
  box-shadow: 0 0 0 1px rgba(var(--lite-accent-rgb, 7, 218, 110), .16) inset;
}

.twostep-payment-methods-modal[data-payment-context="recharge-progressive"] .twostep-amount-panel {
  min-height: 88px;
}

.twostep-method-list {
  display: grid;
  gap: 12px;
}

.twostep-method-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: 54px 1fr 38px;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #a4aabd;
  background: #2e3548;
  text-align: left;
  font-size: 20px;
  font-weight: var(--ui-font-weight-medium);
}

.twostep-method-card img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.twostep-method-card i {
  width: 34px;
  height: 34px;
  display: none;
  position: relative;
  border-radius: 999px;
  background: var(--lite-accent-bright, #5fd66e);
}

.twostep-method-card i::before {
  content: "";
  width: 15px;
  height: 8px;
  position: absolute;
  top: 10px;
  left: 9px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

.twostep-method-card.is-selected {
  border: 2px solid var(--lite-accent-bright, #56d66f);
  color: var(--lite-accent-bright, #38df74);
  background: rgba(23, 47, 38, .92);
}

.twostep-method-card.is-selected i {
  display: block;
}

.twostep-method-card.is-disabled {
  opacity: .42;
  cursor: not-allowed;
}

.twostep-methods-loading {
  min-height: 76px;
  display: grid;
  place-items: center;
  margin: 0;
  color: rgba(255, 255, 255, .68);
  font-size: 15px;
}

.twostep-pay-btn {
  height: 56px;
  min-height: 56px;
  margin-top: auto;
  margin-bottom: 8px;
  border-radius: 9px;
  background: var(--lite-accent-bright, #56c66a);
  box-shadow: 0 0 30px rgba(var(--lite-accent-rgb, 59, 211, 112), .22);
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.twostep-btn-spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, .38);
  border-top-color: #fff;
  border-radius: 50%;
  animation: twostep-btn-spin .72s linear infinite;
}

.twostep-pay-btn.is-loading .twostep-btn-spinner {
  display: inline-block;
}

.twostep-pay-btn.is-loading {
  opacity: .86;
  cursor: wait;
}

@keyframes twostep-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.first-deposit-activity-drawer:not(.is-active) .first-deposit-activity-panel {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
}

.first-deposit-activity-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  padding: calc(var(--app-content-padding-top) + 12px) 16px max(18px, env(safe-area-inset-bottom));
  color: var(--ui-text-primary);
  background: var(--ui-surface-panel-deep);
  overflow: auto;
  transform: translateX(0);
  transition: transform var(--ui-duration) ease;
}

.first-deposit-activity-panel .back-button {
  position: absolute;
  left: 12px;
  top: calc(var(--app-content-padding-top) + 8px);
  z-index: 2;
  border-radius: 50%;
  color: var(--ui-text-primary);
  background: var(--ui-border);
}

.first-deposit-activity-panel header {
  min-height: 176px;
  display: grid;
  align-content: end;
  gap: 5px;
  padding: 42px 18px 18px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 221, 74, .44), transparent 35%),
    linear-gradient(135deg, #21243f 0%, #263451 58%, #111722 100%);
}

.first-deposit-activity-panel header strong {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-display-md);
  line-height: var(--ui-line-height-display-md);
}

.first-deposit-table {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.first-deposit-table b {
  color: var(--app-first-deposit-highlight);
  font-size: var(--ui-font-size-xs);
}

.first-deposit-rules {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  background: var(--ui-surface-hover-soft);
}

.first-deposit-rules b {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-md);
}

.rebate-relief-drawer:not(.is-active) .rebate-relief-panel {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
}

.rebate-relief-panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 0 18px max(24px, env(safe-area-inset-bottom));
  color: var(--ui-text-primary);
  background: #171925;
  overflow: auto;
  transform: translateX(0);
  transition: transform var(--ui-duration) ease;
}

.rebate-relief-header {
  height: 73.3672px;
  display: grid;
  grid-template-columns: 42px 1fr 44px 44px;
  align-items: center;
  gap: 7px;
  margin: 0 -18px;
  padding: 0 18px;
  background: #1b1d2b;
}

.rebate-back {
  width: 38.875px;
  height: 38.875px;
  border: 0;
  border-radius: 50%;
  color: var(--lite-accent-bright, #36d475);
  background: transparent;
  font-size: 46px;
  font-weight: var(--ui-font-weight-light);
  line-height: var(--ui-line-height-display-sm);
}

.rebate-relief-header strong {
  color: #fff1bc;
  font-size: 29px;
  line-height: var(--ui-line-height-display-md);
  text-shadow: 0 2px 0 #b95f14, 0 0 8px rgba(255, 199, 76, .35);
}

.rebate-relief-header span {
  display: grid;
  place-items: center;
  color: var(--lite-accent-bright, #44dc75);
  font-size: var(--ui-font-size-icon-lg-plus);
}

.rebate-hero-card {
  min-height: 126px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  margin-top: 12px;
  border-radius: 10px;
  text-align: center;
  background:
    radial-gradient(circle at 78% 15%, rgba(255, 229, 107, .22), transparent 30%),
    linear-gradient(135deg, var(--lite-accent-deep, #2a7c38), var(--lite-accent-deep, #19562d) 72%, #123823);
}

.rebate-hero-card span {
  color: rgba(255, 255, 255, .68);
  font-size: var(--ui-font-size-micro);
  letter-spacing: 4px;
}

.rebate-hero-card h2,
.rebate-hero-card p,
.rebate-rates h3,
.rebate-rules h3 {
  margin: 0;
}

.rebate-hero-card h2 {
  font-size: var(--ui-font-size-balance);
  line-height: var(--ui-line-height-readable);
}

.rebate-hero-card p {
  color: rgba(255, 255, 255, .75);
  font-size: var(--ui-font-size-md);
}

.rebate-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 42px;
  border-radius: 4px;
  overflow: hidden;
  background: #121521;
}

.rebate-tabs button {
  border: 0;
  color: var(--lite-accent-bright, #4fe878);
  background: transparent;
  font-weight: var(--ui-font-weight-black);
}

.rebate-tabs button.is-active {
  color: var(--ui-text-primary);
  background: linear-gradient(180deg, var(--lite-accent-bright, #66df70), var(--lite-accent-bright, #56d569));
}

.rebate-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rebate-metrics article {
  min-height: 95px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(22, 27, 42, .95);
}

.rebate-metrics span,
.rebate-bonus-card span,
.rebate-bonus-card small,
.rebate-sync-dot,
.rebate-rules p {
  color: var(--lite-accent-bright, #58df75);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-form);
}

.rebate-metrics strong {
  font-size: var(--ui-font-size-2xl);
  line-height: 26px;
}

.rebate-metrics button {
  justify-self: start;
  border: 0;
  color: #f2b45e;
  background: transparent;
  font-size: var(--ui-font-size-xs);
}

.rebate-sync-dot {
  position: relative;
  margin: -6px 0 0;
  padding-left: 11px;
}

.rebate-sync-dot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lite-accent-bright, #57e56f);
}

.rebate-bonus-card {
  min-height: 148px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(var(--lite-accent-rgb, 84, 225, 111), .35);
  border-radius: 10px;
  text-align: center;
  background: linear-gradient(180deg, rgba(33, 74, 50, .72), rgba(22, 26, 40, .92));
}

.rebate-bonus-card p {
  margin: 0;
  color: var(--lite-accent-bright, #58df75);
  font-size: var(--ui-font-size-md);
}

.rebate-bonus-card strong {
  color: var(--lite-accent-bright, #58df75);
  font-size: var(--ui-font-size-auth-title);
  line-height: var(--ui-line-height-display-lg);
}

.rebate-claim {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, .74);
  background: #202434;
  font-weight: var(--ui-font-weight-black);
}

.rebate-rates,
.rebate-rules {
  display: grid;
  gap: 14px;
}

.rebate-rates h3,
.rebate-rules h3 {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
}

.rebate-rates p {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  color: var(--lite-accent-bright, #54e070);
  text-align: center;
  background: rgba(var(--lite-accent-rgb, 38, 81, 54), .42);
  font-size: var(--ui-font-size-sm);
}

.rebate-rules p {
  position: relative;
  margin: 0;
  padding-left: 14px;
}

.rebate-rules p::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lite-accent-bright, #54e070);
}

.rebate-history {
  justify-self: center;
  min-height: 36px;
  border: 0;
  color: #f3c46a;
  background: transparent;
}

.bonus-cabinet-modal {
  position: fixed;
  inset: 0 auto 0 50%;
  width: min(100vw, var(--app-window-max-width, var(--ui-max-width)));
  max-width: min(100vw, var(--app-window-max-width, var(--ui-max-width)));
  transform: translateX(-50%);
  z-index: var(--z-modal);
}

.bonus-cabinet-modal .ui-backdrop {
  background: var(--ui-overlay);
  backdrop-filter: blur(4px);
}

.bonus-cabinet-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: 70vh;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 1rem 1rem 0 0;
  color: var(--ui-text-primary);
  background: url("/7000/assets/shared/svg/c77/bg_back.png") no-repeat center center / 100% 100%;
  transform: translateX(-50%);
}

.bonus-cabinet-modal:not(.is-active) .bonus-cabinet-card {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.bonus-cabinet-hero {
  flex: 0 0 0;
  pointer-events: none;
}

.bonus-cabinet-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.1rem;
  height: 2.1rem;
  z-index: 4;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: rgba(0, 0, 0, .62);
  font-size: 1.25rem;
  line-height: var(--ui-line-height-none);
  font-weight: var(--ui-font-weight-semibold);
}

.bonus-cabinet-close:active {
  background: rgba(0, 0, 0, .82);
}

.bonus-cabinet-title {
  position: relative;
  z-index: 2;
  margin: 8.8rem 0 0;
  color: var(--ui-text-primary);
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  font-size: 1.5rem;
  line-height: 1.65;
  font-weight: var(--ui-font-weight-bold);
}

.bonus-cabinet-tabs {
  display: flex;
  gap: 0;
  flex: 0 0 auto;
  padding: .25rem;
  margin: .5rem .75rem;
  border: 1px solid var(--app-divider-color, rgba(255, 255, 255, .08));
  border-radius: .75rem;
  background: var(--app-segment-bg, hsl(190, 6%, 18%));
}

.bonus-cabinet-tabs button {
  flex: 1;
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  border-radius: .5rem;
  color: rgba(255, 255, 255, .6);
  background: transparent;
  font-size: .875rem;
  font-weight: var(--ui-font-weight-medium);
  position: relative;
}

.bonus-cabinet-tabs button.is-active {
  color: var(--ui-text-primary);
  background: var(--app-gradient-worklog);
}

.bonus-cabinet-tabs img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.bonus-cabinet-tabs em {
  display: inline-grid;
  position: absolute;
  top: 0;
  right: .75rem;
  min-width: 1rem;
  min-height: 1rem;
  place-items: center;
  padding: .125rem .375rem;
  border-radius: .5rem;
  color: var(--ui-text-primary);
  background: var(--app-red-color);
  font-size: .625rem;
  font-style: normal;
  font-weight: var(--ui-font-weight-bold);
}

.bonus-cabinet-tabs em:empty,
.bonus-cabinet-tabs em[data-bonus-cabinet-count="0"] {
  display: none;
}

.bonus-cabinet-status {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 3rem 1rem;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  font-size: .875rem;
}

.bonus-cabinet-status.is-visible {
  display: flex;
}

.bonus-cabinet-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  gap: 0;
  overflow: auto;
  min-height: 0;
  margin: .5rem .75rem 0;
  padding-bottom: 1rem;
  border-radius: .75rem;
  scrollbar-width: none;
}

.bonus-cabinet-list::-webkit-scrollbar {
  display: none;
}

.bonus-cabinet-list article {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 4rem;
  gap: 1.2rem;
  padding: .25rem;
  margin-bottom: .5rem;
  border: 1px solid #283049;
  border-radius: .8rem;
  background: #171c29;
  box-shadow: none;
}

.bonus-cabinet-list article:last-child {
  margin-bottom: 1rem;
}

.bonus-cabinet-list img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bonus-cabinet-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .8rem;
  background: #10131c;
  box-shadow: none;
}

.bonus-cabinet-copy {
  min-width: 0;
  flex: 1;
}

.bonus-cabinet-list strong,
.bonus-cabinet-list span {
  display: block;
}

.bonus-cabinet-list strong {
  overflow: hidden;
  color: var(--ui-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  line-height: var(--ui-line-height-title-ratio);
  font-weight: var(--ui-font-weight-medium);
}

.bonus-cabinet-list span,
.bonus-cabinet-empty {
  margin-top: .125rem;
  color: var(--app-gold-color);
  font-size: .625rem;
  line-height: var(--ui-line-height-tight-plus);
  word-break: break-word;
}

.bonus-cabinet-list button {
  flex: 0 0 auto;
  min-height: 2rem;
  padding: .5rem 1rem;
  margin-right: .5rem;
  border: 1px solid #30364d;
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: #10131c;
  font-size: .75rem;
  line-height: var(--ui-line-height-none);
  font-weight: var(--ui-font-weight-medium);
  white-space: nowrap;
}

.bonus-cabinet-list button.is-claim {
  border: 0;
  background: var(--theme-color-gradient-100);
}

.bonus-cabinet-list button:disabled,
.bonus-cabinet-list button.is-disabled {
  color: rgba(255, 255, 255, .4);
  background: var(--app-panel-bg-dark, hsl(0, 0%, 25%));
  cursor: not-allowed;
}

.bonus-cabinet-empty {
  padding: 28px 12px;
  margin: 0;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

@media (max-height: 760px) {
  .bonus-cabinet-card {
    bottom: 0;
    height: 72vh;
    max-height: 72vh;
  }

  .bonus-cabinet-title {
    margin-top: 7.8rem;
  }

  .bonus-cabinet-hero {
    display: none;
  }
}

.menu-drawer-source {
  z-index: 1000;
}

.menu-drawer-source .ui-backdrop {
  left: 0;
  right: 0;
  background: var(--ui-overlay);
  backdrop-filter: blur(7px);
}

.menu-drawer-source .source-left-panel {
  width: 64.1cqw;
  max-width: 312px;
  min-width: 280px;
  padding: 0;
  gap: 0;
  border: 0;
  color: var(--ui-text-primary);
  background: rgba(0, 0, 0, .08);
  box-shadow: none;
}

.menu-drawer-source .ui-drawer-panel button {
  min-height: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.source-left-toolbar {
  height: 17.8909cqw;
  min-height: 86.95px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22.3311px 0 18.468px;
}

.source-left-close {
  width: 43.86px;
  height: 43.86px;
  display: grid;
  place-items: center;
  flex: 0 0 43.86px;
  margin-left: 13px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-border-subtle);
}

.source-left-close img {
  width: 15.95px;
  height: 15.95px;
  object-fit: contain;
}

.source-left-logo {
  width: 240.46px;
  height: 46.16px;
  flex: 0 0 240.46px;
  object-fit: contain;
  object-position: left center;
}

.source-left-banners {
  display: grid;
  gap: 9.97px;
  width: 239.22px;
  margin: 9.97px 0 0 36.16px;
}

.source-left-bonus-card {
  position: relative;
  height: 89.72px;
  overflow: hidden;
  display: block;
  border: 0;
  border-radius: 8px;
  padding: 8px 78px 10px 12px;
  color: var(--ui-text-primary);
  text-align: left;
  background:
    radial-gradient(circle at 82% 45%, rgba(255, 223, 71, .46), transparent 26%),
    linear-gradient(120deg, #5b00ff 0%, #6139ff 48%, #42a8ff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.source-left-bonus-card strong {
  display: block;
  font-size: var(--ui-font-size-auth-heading);
  line-height: 32px;
  font-weight: var(--ui-font-weight-black);
  letter-spacing: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.source-left-bonus-card span {
  display: block;
  margin-top: 3px;
  font-size: var(--ui-font-size-icon-lg-plus);
  line-height: 28px;
  font-weight: var(--ui-font-weight-regular);
}

.source-left-bonus-card img {
  position: absolute;
  right: 10px;
  top: 17px;
  width: 63px;
  height: 58px;
  object-fit: contain;
}

.source-left-middle {
  display: grid;
  gap: 9.97px;
  width: 249.22px;
  margin: 9.97px 0 0 31.16px;
}

.source-left-middle button {
  width: 249.22px;
  height: 59.81px;
  display: grid;
  grid-template-columns: 59.81px minmax(0, 1fr) 35px;
  align-items: center;
  padding: 0 9.97px;
  border: 0;
  border-radius: 12.4615px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-spread);
  text-align: left;
}

.source-left-middle img {
  width: 59.81px;
  height: 59.81px;
  object-fit: contain;
}

.source-left-middle span {
  overflow: hidden;
  font-size: 13.95px;
  line-height: var(--ui-line-height-form);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-left-middle i {
  justify-self: end;
  width: 27.91px;
  height: 27.91px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #cf7738;
  background: rgba(17, 20, 30, .7);
  font-style: normal;
  font-size: 27px;
  line-height: var(--ui-line-height-none);
}

.source-left-support {
  width: 249.22px;
  height: 48.59px;
  display: flex;
  align-items: center;
  gap: 23px;
  margin: 33.89px 0 0 31.16px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(138, 146, 165, .28);
  color: var(--ui-text-primary);
  background: transparent;
  text-align: left;
}

.source-left-support img {
  width: 29.91px;
  height: 29.91px;
  object-fit: contain;
}

.source-left-support span {
  font-size: 19.94px;
  line-height: 29.91px;
}

.menu-drawer-source .source-left-panel button.source-left-bonus-card:not(.close-button):not(.back-button) {
  min-height: 0;
  border: 0;
  border-radius: 8px;
  color: var(--ui-text-primary);
  background:
    radial-gradient(circle at 82% 45%, rgba(255, 223, 71, .46), transparent 26%),
    linear-gradient(120deg, #5b00ff 0%, #6139ff 48%, #42a8ff 100%);
}

.menu-drawer-source .source-left-panel .source-left-middle button {
  min-height: 0;
  border: 0;
  border-radius: 12.4615px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-spread);
}

.menu-drawer-source .source-left-panel button.source-left-support:not(.close-button):not(.back-button) {
  min-height: 0;
  border: 0;
  border-bottom: 1px solid rgba(138, 146, 165, .28);
  border-radius: 0;
  color: var(--ui-text-primary);
  background: transparent;
}

.l5-search-drawer {
  z-index: 1040;
}

.l5-search-drawer .ui-backdrop {
  background: var(--ui-overlay);
  backdrop-filter: blur(7px);
}

.l5-search-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  overflow-y: auto;
  color: var(--ui-text-primary);
  background: #181d29;
  box-shadow: none;
}

.l5-search-panel header {
  height: 52px;
  display: grid;
  grid-template-columns: 42px 1fr 38px 38px;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: #1d2330;
}

.l5-search-panel header button {
  min-height: 0;
  height: 36px;
  border: 0;
  border-radius: 999px;
  color: var(--lite-accent-bright, #00e982);
  background: transparent;
  font-size: var(--ui-font-size-display-md);
}

.l5-search-panel header img {
  width: 144px;
  max-width: 100%;
  height: 31px;
  object-fit: contain;
  object-position: left center;
}

.l5-search-box {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 14px;
  padding: 0 12px;
  border-radius: 8px;
  background: #252b3a;
}

.l5-search-box img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.l5-search-box input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--ui-font-size-section);
}

.l5-search-chip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 14px 12px;
}

.l5-search-chip-row button {
  height: 42px;
  min-width: 88px;
  border: 0;
  border-radius: 7px;
  color: var(--color-text-gray-700);
  background: #202634;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-heavy);
}

.l5-search-chip-row button.is-active {
  color: var(--ui-text-primary);
  background: #063f31;
}

.l5-search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 2px 14px 24px;
}

.l5-search-results article {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  padding: 0 0 9px;
  border-radius: 8px;
  background: #202634;
}

.l5-search-results img {
  width: 100%;
  aspect-ratio: 1 / 1.16;
  object-fit: cover;
}

.l5-search-results span {
  overflow: hidden;
  padding: 0 8px;
  color: rgba(255, 255, 255, .86);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .checkin-card {
    left: 8px;
    right: 8px;
  }
}

[data-route-page] {
  min-height: 100%;
}

[data-route-page][hidden] {
  display: none !important;
}

[data-route-page].route-base-page {
  min-height: 100%;
  pointer-events: none;
}

[data-route-page].route-slide-page {
  position: absolute;
  z-index: var(--route-slide-z-index, calc(var(--z-modal) - 1));
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: var(--app-route-slide-bg);
  transform: translateX(0);
  transition: transform var(--ui-duration) ease;
  -webkit-overflow-scrolling: touch;
}

[data-route-page].route-stack-page {
  pointer-events: none;
}

[data-route-page].route-slide-page.is-entering {
  transform: translateX(100%);
}

[data-route-page].route-slide-page.has-unified-slide-shell {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.route-slide-header {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 80;
  color: var(--ui-text-primary);
}

.route-slide-back {
  cursor: pointer;
}

.route-slide-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.route-slide-actions {
  min-width: 0;
  min-height: 44px;
}

[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

[data-route-page].route-slide-page.has-unified-slide-shell > .withdraw-page,
[data-route-page].route-slide-page.has-unified-slide-shell > .wallet-page,
[data-route-page].route-slide-page.has-unified-slide-shell > .setting-page,
[data-route-page].route-slide-page.has-unified-slide-shell > .security-page {
  background-position: center -56px !important;
}

[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .subpage-header,
[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .source-toolbar,
[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .activity-source-header,
[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .sports-source-header,
[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .deposit-page-title,
[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .deposit-back-hotspot,
[data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .deposit-record-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-shell.route-subpage .app-main {
  inset: 0;
  overflow: hidden;
  padding: 0;
  background: var(--app-route-slide-bg);
}

.app-shell.route-subpage .home-container {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  width: 100%;
  transform: none;
}

.app-shell.route-subpage.route-clip-doll .app-main {
  background: #050606;
}

.app-shell.route-subpage .pwa-l5-bar,
.app-shell.route-subpage .l5-header,
.app-shell.route-subpage .bottom-tabbar {
  display: none;
}

.app-shell:not(.route-home) .pwa-l5-bar {
  display: none;
}

.app-shell.route-promos .l5-header,
.app-shell.route-promo .l5-header {
  top: 0;
}

.app-shell.route-promos .l5-header > *,
.app-shell.route-promo .l5-header > * {
  opacity: 1;
}

.app-shell.route-promos .app-main,
.app-shell.route-promo .app-main {
  top: var(--app-header-height);
  bottom: var(--app-tabbar-height);
  padding-top: 0;
  background: var(--ui-surface-control);
}

.app-shell:not(.route-home):not(.route-promos):not(.route-promo):not(.route-game-action) .l5-header {
  display: none;
}

.app-shell:not(.route-home):not(.route-promos):not(.route-promo):not(.route-game-action):not(.route-subpage) .app-main {
  top: 0;
  bottom: var(--app-tabbar-height);
  padding-top: 0;
}

.app-shell.route-search .bottom-tabbar,
.app-shell.route-notification .bottom-tabbar,
.app-shell.route-wallet .bottom-tabbar,
.app-shell.route-report .bottom-tabbar,
.app-shell.route-share .bottom-tabbar,
.app-shell.route-setting .bottom-tabbar,
.app-shell.route-security .bottom-tabbar,
.app-shell.route-invite .bottom-tabbar,
.app-shell.route-spread .bottom-tabbar,
.app-shell.route-recharge-record .bottom-tabbar,
.app-shell.route-credit-score .bottom-tabbar {
  display: none;
}

.app-shell.route-deposit .bottom-tabbar {
  display: none;
}

.app-shell.route-game-action {
  height: 100vh;
  height: 100dvh;
  max-width: none;
  overflow: hidden;
  background: var(--ui-surface-black);
}

.app-shell.route-game-action .pwa-l5-bar,
.app-shell.route-game-action .l5-header,
.app-shell.route-game-action .bottom-tabbar,
.app-shell.route-game-action [data-floating-activity],
.app-shell.route-game-action .l5-support,
.app-shell.route-game-action .l5-side-handle {
  display: none !important;
}

.app-shell.route-game-action .app-main {
  position: fixed;
  z-index: var(--z-modal);
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: var(--ui-surface-black);
}

.app-shell.route-game-action [data-route-page="home"].route-base-page {
  visibility: hidden;
}

.app-shell.route-game-action [data-route-page="game-action"] {
  position: fixed !important;
  z-index: calc(var(--z-modal) + 20) !important;
  inset: 0 !important;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden !important;
  background: var(--ui-surface-black);
  transform: none !important;
}

.app-shell.route-search .app-main,
.app-shell.route-notification .app-main,
.app-shell.route-wallet .app-main,
.app-shell.route-report .app-main,
.app-shell.route-share .app-main,
.app-shell.route-setting .app-main,
.app-shell.route-security .app-main,
.app-shell.route-credit-score .app-main,
.app-shell.route-invite .app-main,
.app-shell.route-spread .app-main,
.app-shell.route-recharge-record .app-main {
  bottom: 0 !important;
  padding-bottom: 0 !important;
}

.app-shell.route-invite,
.app-shell.route-spread {
  --theme-color-500: var(--agent-theme-primary);
  --theme-color-600: var(--agent-theme-primary-strong);
  --theme-color-gradient-100: var(--agent-segment-selected-bg-color);
  --app-drawer-bg: var(--agent-theme-surface-200);
  --app-card-bg: var(--agent-base-bg-color);
  --app-dialog-bg: var(--agent-theme-surface-300);
  --app-segment-bg: var(--agent-segmnet-base-bg-color);
  --app-setting-tab-active-bg: var(--agent-segment-selected-bg-color);
  --app-action-orange: var(--agent-theme-primary);
  --app-gold-color: var(--money-text-color);
  --app-divider-color: var(--agent-theme-border);
  background: var(--agent-theme-surface-200);
}

.app-shell.route-invite [data-route-page="invite"],
.app-shell.route-spread [data-route-page="spread"] {
  background: var(--agent-theme-surface-200);
}

.app-shell.route-wallet,
.app-shell.route-wallet .app-main,
.app-shell.route-wallet [data-route-page] {
  background: #282d3e;
}

[data-route-page="game-action"].route-slide-page {
  background: var(--ui-surface-black);
}

.game-action-page {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ui-surface-black);
}

.game-action-page iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--ui-surface-black);
}

.game-action-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--ui-surface-black);
}

.game-action-loading[hidden] {
  display: none;
}

.game-action-loading span {
  width: 9.2308cqw;
  height: 9.2308cqw;
  border: .7692cqw solid rgba(255, 255, 255, .24);
  border-top-color: var(--ui-text-primary);
  border-radius: 999px;
  animation: lite-spin .72s linear infinite;
}

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

.game-action-error {
  position: absolute;
  z-index: 75;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 3.0769cqw;
  padding: 6.1538cqw;
  text-align: center;
  color: var(--ui-text-primary);
  background: rgba(0, 0, 0, .88);
}

.game-action-error[hidden] {
  display: none;
}

.game-action-error strong {
  font-size: var(--ui-font-size-cqw-2xl);
}

.game-action-error p {
  margin: 0;
  color: var(--color-text-gray-700);
}

.game-action-error button,
.game-exit-confirm button {
  border: 0;
  border-radius: 999px;
  min-height: 10.2564cqw;
  padding: 0 6.1538cqw;
  color: var(--ui-text-primary);
  background: #f44939;
}

.game-source-error-modal {
  position: absolute;
  z-index: 78;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.game-source-error-modal[hidden] {
  display: none;
}

.game-source-error-card {
  position: relative;
  width: 87.1795cqw;
  min-height: 66.4103cqw;
  margin-top: 1.2821cqw;
  overflow: visible;
  border-radius: 5.1282cqw;
  background: var(--ui-surface-white);
}

.game-source-error-bg {
  display: block;
  width: 100%;
  height: 25.641cqw;
  object-fit: cover;
  border-radius: 5.1282cqw 5.1282cqw 0 0;
}

.game-source-error-icon {
  position: absolute;
  z-index: 1;
  top: -18.4615cqw;
  left: 50%;
  width: 87.1795cqw;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.game-source-error-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24.359cqw;
  padding: 3.3333cqw 10.2564cqw 1.0256cqw;
  text-align: center;
  background: var(--ui-surface-white);
}

.game-source-error-content strong {
  max-width: 61.5385cqw;
  color: #595959;
  font-size: 4.6154cqw;
  font-weight: var(--ui-font-weight-bold);
  line-height: 1.26;
}

.game-source-error-confirm {
  position: relative;
  z-index: 2;
  display: block;
  width: 28.2051cqw;
  height: 8.9744cqw;
  min-height: 0;
  margin: 2.5641cqw auto 6.1538cqw;
  border: 0;
  border-radius: 1.2821cqw;
  background: #ff9f24;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-cqw-md);
  font-weight: var(--ui-font-weight-medium);
}

.game-exit-shield {
  position: absolute;
  inset: 0;
  z-index: 61;
  background: transparent;
}

.game-exit-shield[hidden] {
  display: none;
}

.game-exit-control {
  position: absolute;
  z-index: 70;
  top: 3.7209cqw;
  right: -53.9535cqw;
  width: 65.814cqw;
  height: 12.093cqw;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease;
}

.game-exit-control.is-open {
  transform: translateX(-25.5814cqw);
}

.game-exit-toggle,
.game-exit-label,
.game-exit-icon {
  position: absolute;
  z-index: 75;
  border: 0;
  padding: 0;
  color: var(--ui-text-primary);
  background: transparent;
}

.game-exit-toggle {
  top: 0;
  left: 0;
  width: 10.4186cqw;
  height: 10.4186cqw;
}

.game-exit-box {
  width: 100%;
  height: 100%;
  display: block;
}

.game-exit-change {
  position: absolute;
  top: 2.7907cqw;
  left: 3.4884cqw;
  width: 3.2558cqw;
  height: 4.186cqw;
  transition: transform .3s ease;
}

.game-exit-control.is-open .game-exit-change {
  transform: rotate(180deg);
}

.game-exit-ribbon {
  position: absolute;
  top: 2.3256cqw;
  left: 3.4884cqw;
  width: 33.4884cqw;
  height: 11.6279cqw;
  pointer-events: none;
}

.game-exit-label {
  top: 5.3488cqw;
  left: 12.5581cqw;
  width: 16.7442cqw;
  height: 5.1163cqw;
  font-size: 3.2558cqw;
  line-height: var(--ui-line-height-none);
  text-align: left;
}

.game-exit-line {
  position: absolute;
  top: 8.3721cqw;
  left: 24.186cqw;
  width: 4.6512cqw;
  height: 1px;
  background: rgba(255, 255, 255, .35);
  transform: rotate(-72deg);
}

.game-exit-icon {
  top: 3.2558cqw;
  left: 26.5116cqw;
  width: 11.1628cqw;
  height: 11.1628cqw;
  display: grid;
  place-items: center;
}

.game-exit-icon img {
  width: 4.186cqw;
  height: 4.186cqw;
}

.game-exit-confirm {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 5.1282cqw;
  background: rgba(0, 0, 0, .46);
}

.game-exit-confirm[hidden] {
  display: none;
}

.game-exit-confirm-card {
  width: min(84%, 82.0513cqw);
  border-radius: 3.0769cqw;
  padding: 5.1282cqw;
  background: var(--color-bg-700);
  color: var(--color-text-white-100);
  text-align: center;
  box-shadow: 0 5.1282cqw 12.8205cqw rgba(0, 0, 0, .36);
}

.game-exit-confirm-card strong {
  font-size: var(--ui-font-size-cqw-2xl);
}

.game-exit-confirm-card p {
  margin: 3.0769cqw 0 4.1026cqw;
  color: var(--color-text-white-100);
}

.game-exit-confirm-card div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.0769cqw;
}

.game-exit-confirm-card button:first-child {
  color: var(--color-text-white-100);
  background: var(--theme-color-gradient-100);
}

.game-exit-confirm-card button:last-child {
  border: 1px solid var(--theme-color-900);
  color: var(--color-text-white-100);
  background: transparent;
}

/*
 * The game route expands .app-shell to the full viewport on desktop. The
 * source exit UI is rem-based (root capped at the 486px layout width), so
 * leaving these dimensions in cqw made the control and confirmation card grow
 * with the monitor width. Preserve the mobile cqw layout; restore the source
 * desktop geometry once the viewport is wider than the layout cap.
 */
@media (min-width: 487px) {
  .app-shell.route-game-action .game-exit-control {
    top: 1rem;
    right: -14.5rem;
    width: 17.6875rem;
    height: 3.2rem;
  }

  .app-shell.route-game-action .game-exit-control.is-open {
    transform: translateX(-6.875rem);
  }

  .app-shell.route-game-action .game-exit-toggle {
    width: 2.8rem;
    height: 2.8rem;
  }

  .app-shell.route-game-action .game-exit-change {
    top: .78rem;
    left: .975rem;
    width: .8rem;
    height: .8rem;
  }

  .app-shell.route-game-action .game-exit-ribbon {
    top: 1rem;
    left: 1.5rem;
    width: 9rem;
    height: 3.125rem;
  }

  .app-shell.route-game-action .game-exit-label {
    top: 1.5rem;
    left: 3.375rem;
    width: 4rem;
    height: auto;
    font-size: .875rem;
    line-height: 2;
  }

  .app-shell.route-game-action .game-exit-line {
    top: 2.25rem;
    left: 6.5rem;
    width: 1.25rem;
  }

  .app-shell.route-game-action .game-exit-icon {
    top: .875rem;
    left: 7.125rem;
    width: 3rem;
    height: 3rem;
  }

  .app-shell.route-game-action .game-exit-icon img {
    width: 1rem;
    height: 1rem;
  }

  .app-shell.route-game-action .game-exit-confirm {
    padding: 1.25rem;
  }

  .app-shell.route-game-action .game-exit-confirm-card {
    width: 19.375rem;
    min-height: 10rem;
    padding: 1.25rem;
    border-radius: .9375rem;
    box-shadow: none;
  }

  .app-shell.route-game-action .game-exit-confirm-card strong {
    display: block;
    font-size: 1rem;
    line-height: 1.1875rem;
  }

  .app-shell.route-game-action .game-exit-confirm-card p {
    margin: 1.5625rem 0;
    font-size: .8125rem;
    line-height: 1rem;
  }

  .app-shell.route-game-action .game-exit-confirm-card div {
    display: flex;
    justify-content: center;
    gap: 1.875rem;
  }

  .app-shell.route-game-action .game-exit-confirm-card button {
    width: 6.875rem;
    min-height: 2.1875rem;
    height: 2.1875rem;
    padding: 0;
  }
}

.l5-page {
  min-height: 100%;
  padding: 2.5641cqw 3.0769cqw 6.1538cqw;
  background: #111721;
  color: var(--ui-text-primary);
}

.page-busy {
  position: sticky;
  top: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  margin: 0 auto 8px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: transparent;
  background: var(--app-page-busy-bg);
  font-size: var(--ui-font-size-zero);
  line-height: var(--ui-font-size-zero);
}

.page-busy::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid var(--app-page-busy-border);
  border-top-color: var(--app-page-busy-accent);
  border-radius: 50%;
  animation: lite-spin .72s linear infinite;
}

[data-route-page].route-base-page [data-page-busy],
[data-route-page]:not(.is-active):not(.route-base-page) [data-page-busy] {
  display: none !important;
}

.deposit-page [data-page-busy],
.withdraw-page [data-page-busy],
.wallet-page [data-page-busy],
.setting-page [data-page-busy],
.profile-panda2-page [data-page-busy] {
  display: none !important;
}

.promo-page {
  padding: calc(2.5641cqw - 1px) 3.8462cqw 6.1538cqw;
  background: var(--ui-surface-control);
}

.app-shell.route-promos,
.app-shell.route-promo {
  --app-header-height: 53px;
  --app-content-padding-top: 53px;
  background: var(--ui-surface-spread);
}

.app-shell.route-promo-panda1 {
  --app-header-height: 0px;
  --app-content-padding-top: 0px;
  background: #f7f9ff;
}

.app-shell.route-promo-panda1::before,
.app-shell.route-promo-panda1::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: 40;
  width: 390px;
  max-width: 100%;
  pointer-events: none;
  transform: translateX(-50%);
}

.app-shell.route-promo-panda1::before {
  top: 0;
  height: 194px;
  background: url("/7000/assets/shared/acceptance/promo-panda1-top-shell.png") top center / 100% 100% no-repeat;
}

.app-shell.route-promo-panda1::after {
  bottom: 0;
  height: 86px;
  background: url("/7000/assets/shared/acceptance/promo-panda1-bottom-nav.png") bottom center / 100% 100% no-repeat;
}

.app-shell.route-promos .l5-header.app-header,
.app-shell.route-promo .l5-header.app-header {
  height: var(--app-header-height);
}

.app-shell.route-promos .app-main,
.app-shell.route-promo .app-main {
  background: transparent;
}

.app-shell.route-promos .promo-page,
.app-shell.route-promo .promo-page {
  opacity: 1;
}

.app-shell.route-promos .promo-page .page-busy,
.app-shell.route-promo .promo-page .page-busy {
  display: none !important;
}

.app-shell.route-promos .bottom-tabbar,
.app-shell.route-promo .bottom-tabbar {
  opacity: 1;
  background: var(--ui-surface-input);
}

.app-shell.route-promo-panda1 .bottom-tabbar {
  opacity: 1;
  background: var(--ui-surface-input);
}

.promo-list {
  display: grid;
  gap: 2.5641cqw;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.promo-redeem-panel {
  min-height: calc(100cqh - var(--app-header-height) - var(--app-tabbar-height));
  padding: 32px 0 36px;
  color: var(--ui-text-primary);
}

.promo-redeem-panel h1 {
  margin: 0 0 25px;
  color: #f6f7fb;
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-heavy);
  line-height: 1.35;
}

.promo-redeem-input {
  position: relative;
  display: block;
  height: 40px;
  margin-bottom: 27px;
}

.promo-redeem-input input {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0 42px 0 10px;
  color: var(--lite-accent, #03db72);
  background: transparent;
  font-size: var(--ui-font-size-md);
  outline: none;
}

.promo-redeem-input input::placeholder {
  color: var(--lite-accent, #04b963);
  opacity: .9;
}

.promo-redeem-input button {
  position: absolute;
  right: 4px;
  top: 5px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.promo-redeem-input button::before,
.promo-redeem-input button::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  width: 12px;
  height: 1px;
  background: rgba(255, 255, 255, .45);
}

.promo-redeem-input button::before {
  transform: rotate(45deg);
}

.promo-redeem-input button::after {
  transform: rotate(-45deg);
}

.promo-redeem-submit {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 9px;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #06d96a);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-bold);
}

.promo-redeem-platforms {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 18px;
  margin: 27px 28px 21px;
}

.promo-redeem-platforms img {
  max-width: 40px;
  max-height: 25px;
  justify-self: center;
  object-fit: contain;
}

.promo-redeem-social {
  border-top: 1px solid rgba(99, 108, 136, .36);
  padding-top: 17px;
  text-align: center;
}

.promo-redeem-social p {
  margin: 0 0 13px;
  color: #596178;
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-none);
}

.promo-redeem-social div {
  display: grid;
  grid-template-columns: repeat(4, 64px);
  justify-content: center;
  gap: 18px;
}

.promo-redeem-social a {
  display: grid;
  place-items: center;
  width: 64px;
  height: 35px;
  border-radius: 7px;
  background: #168fca;
}

.promo-redeem-social a:nth-child(2) {
  background: var(--lite-accent, #31c341);
}

.promo-redeem-social a:nth-child(3) {
  background: #5879c3;
}

.promo-redeem-social img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.promo-redeem-description {
  margin-top: 56px;
  color: var(--lite-accent-bright, #00ee78);
  font-size: var(--ui-font-size-xs);
  line-height: 1.33;
}

.promo-redeem-description p {
  margin: 0;
}

.promo-card {
  overflow: hidden;
  min-height: 43.7949cqw;
  border-radius: 2.0513cqw;
  background: #1a2130;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .26);
}

.promo-art {
  min-height: 32.0513cqw;
  position: relative;
  display: grid;
  align-content: center;
  gap: 1.2821cqw;
  padding: 4.6154cqw 5.1282cqw;
  overflow: hidden;
  background:
    var(--promo-bg-image, none) center / cover no-repeat,
    radial-gradient(circle at 82% 22%, rgba(255, 241, 130, .38), transparent 18%),
    linear-gradient(120deg, var(--lite-accent-deep, #109a50), var(--lite-accent-deep, #076e39) 64%, #0e3d2e);
}

.promo-art-image {
  background:
    var(--promo-bg-image) center / cover no-repeat,
    linear-gradient(135deg, rgba(100, 100, 100, .22) 0%, rgba(20, 20, 20, .6) 100%);
}

.promo-art::after {
  content: "";
  position: absolute;
  right: 5.1282cqw;
  top: 5.641cqw;
  width: 25.641cqw;
  height: 24.6154cqw;
  border-radius: 45% 55% 50% 50%;
  background: radial-gradient(circle, rgba(255, 207, 73, .86), rgba(122, 72, 255, .32) 48%, transparent 70%);
  opacity: .9;
}

.promo-art-image::after,
.promo-art-image strong,
.promo-art-image span {
  display: none;
}

.promo-art-image .promo-countdown {
  position: absolute;
  left: 6.7cqw;
  bottom: 2.56cqw;
  z-index: 2;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 2px;
  width: auto;
  max-width: none;
  padding: 0;
  color: var(--ui-text-primary);
  background: transparent;
  font-style: normal;
  font-size: clamp(14px, 4.1026cqw, 20px);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-none);
}

.promo-countdown span {
  min-width: 1.375rem;
  max-width: none;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: #ff7717;
  color: var(--ui-text-primary);
  font-size: 1rem;
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-title-ratio);
  text-shadow: none;
}

.promo-countdown i {
  color: var(--ui-text-primary);
  font-style: normal;
}

.promo-art-box::after {
  background: radial-gradient(circle, rgba(255, 218, 146, .95), rgba(105, 93, 112, .46) 50%, transparent 71%);
}

.promo-art-card::after {
  background: radial-gradient(circle, rgba(255, 233, 91, .9), rgba(255, 143, 45, .4) 52%, transparent 72%);
}

.promo-art-vip::after {
  background: radial-gradient(circle, rgba(255, 230, 152, .9), rgba(210, 89, 52, .42) 52%, transparent 72%);
}

.promo-art strong,
.promo-art span,
.promo-art em {
  position: relative;
  z-index: 1;
  max-width: 66%;
}

.promo-art strong {
  font-size: clamp(18px, 5.1282cqw, 25px);
  line-height: 1.12;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .34);
}

.promo-art span {
  font-size: clamp(42px, 12.8205cqw, 62px);
  font-weight: var(--ui-font-weight-black);
  line-height: .92;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}

.promo-art em {
  width: max-content;
  padding: .7692cqw 1.7949cqw;
  border-radius: 1.2821cqw;
  background: #ff7717;
  font-style: normal;
  font-size: clamp(14px, 4.1026cqw, 20px);
  font-weight: var(--ui-font-weight-black);
}

.promo-art .promo-countdown span {
  min-width: 1.375rem;
  max-width: none;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: #ff7717;
  color: var(--ui-text-primary);
  font-size: 1rem;
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-title-ratio);
  text-shadow: none;
}

.promo-card footer {
  min-height: 11.54cqw;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.0256cqw;
  align-items: center;
  gap: 2.0513cqw;
  padding: 1.5385cqw 1.5385cqw 1.2821cqw 1.5385cqw;
}

.promo-card b {
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
  line-height: var(--ui-line-height-readable);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-card button,
.deposit-next,
.profile-actions button,
.invite-url button,
.withdraw-methods button,
.withdraw-form button {
  border: 0;
  color: var(--ui-text-primary);
  background: var(--ui-success-action);
  font-weight: var(--ui-font-weight-black);
}

.promo-card button {
  width: 21.0256cqw;
  height: 8.7941cqw;
  min-height: 34.2969px;
  border-radius: 5.85px;
  background: linear-gradient(90deg, var(--lite-accent-deep, #009d48), var(--lite-accent, #00b955));
  font-family: Roboto, "Helvetica Neue", sans-serif;
  font-size: 12.48px;
  font-weight: var(--ui-font-weight-semibold);
  line-height: 12.48px;
}

.promo-panda1-page {
  min-height: 100%;
  padding: 0 0 calc(var(--app-tabbar-height) + 1.5385cqw);
  color: #31333d;
  background: #f7f9ff;
  font-family: Prompt, -apple-system, Roboto, sans-serif;
}

.panda1-tabs {
  height: 14.359cqw;
  min-height: 56px;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid #1b2436;
  border-bottom: 3px solid #1b2436;
  background: var(--ui-surface-white);
  scrollbar-width: none;
}

.panda1-tabs::-webkit-scrollbar {
  display: none;
}

.panda1-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-width: 16.1538cqw;
  height: 100%;
  border: 0;
  padding: 0 2.5641cqw;
  color: #8d9eb9;
  background: transparent;
  font-family: Prompt, -apple-system, Roboto, sans-serif;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-none);
  white-space: nowrap;
}

.panda1-tabs button.is-active {
  color: #007aff;
}

.panda1-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--lite-accent, #00da73);
}

.panda1-activity-list {
  display: grid;
  gap: 4.1026cqw;
  padding: 2.8205cqw 3.8462cqw 6.1538cqw;
}

.panda1-activity-card {
  width: 100%;
  min-height: 50.7692cqw;
  display: grid;
  grid-template-rows: 30.7692cqw 20cqw;
  overflow: hidden;
  border: 0;
  border-radius: .5rem;
  padding: 0;
  text-align: left;
  color: #3f444d;
  background: var(--ui-surface-white);
  box-shadow: 0 .5rem .875rem -.45rem rgba(29, 51, 88, .2);
}

.panda1-activity-image {
  display: block;
  background: var(--panda1-card-image, none) center / cover no-repeat, var(--lite-accent-deep, #168744);
}

.panda1-activity-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26.6667cqw;
  align-items: center;
  gap: 2.0513cqw;
  padding: 0 4.1026cqw;
}

.panda1-activity-meta b {
  min-width: 0;
  overflow: hidden;
  color: #3f4248;
  font-family: Prompt, -apple-system, Roboto, sans-serif;
  font-size: var(--ui-font-size-balance);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panda1-activity-meta i {
  height: 12.0513cqw;
  display: grid;
  place-items: center;
  border-radius: 1.2821cqw;
  color: #6683e3;
  background: #e9eefb;
  font-family: Prompt, -apple-system, Roboto, sans-serif;
  font-size: var(--ui-font-size-md);
  font-style: normal;
  font-weight: var(--ui-font-weight-heavy);
  line-height: var(--ui-line-height-title-ratio);
  white-space: nowrap;
}

.deposit-page {
  position: relative;
  padding: 0 20px 24px;
  background: var(--color-screen-bg);
}

.deposit-page::after {
  content: none;
  position: absolute;
  left: 0;
  z-index: 8;
  width: 100%;
  pointer-events: none;
}

.deposit-page[data-active-cashier-tab="deposit"]::after {
  top: 49px;
  height: calc(100% - 49px);
  background: none;
}

.deposit-page[data-active-cashier-tab="deposit"][data-amount-focused="true"]::after {
  background-image: none;
}

.deposit-page[data-active-cashier-tab="transactions"]::after {
  top: 0;
  height: 455px;
  background: none;
}

.deposit-page[data-active-cashier-tab="vip"]::after {
  top: 0;
  height: 455px;
  background: none;
}

.app-shell.route-deposit .deposit-page[data-active-cashier-tab] > :not(.deposit-tabs):not(.deposit-record-button):not(.deposit-back-hotspot) {
  opacity: 1;
}

.deposit-tabs {
  height: 49px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -20px;
  padding: 8px 14px;
  background: var(--app-deposit-tabs-bg);
}

.deposit-tabs button {
  flex: 0 0 86px;
  width: 86px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  color: var(--color-text-gray-300);
  background: transparent;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--app-deposit-tab-line-height);
}

.deposit-tabs button.is-active {
  flex-basis: 86px;
  width: 86px;
  color: var(--ui-text-primary);
  background: var(--app-deposit-tab-active-gradient);
}

.deposit-page-title {
  position: absolute;
  z-index: 2;
  top: 3.3333cqw;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-balance);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-title-ratio);
  pointer-events: none;
}

.app-shell.route-deposit {
  background: var(--ui-surface-panel-deep);
}

[data-route-page="deposit"].route-slide-page {
  background: var(--ui-surface-panel-deep);
}

.app-shell.route-deposit .app-main {
  inset: 0;
  padding: 0;
  background: transparent;
}

.app-shell.route-deposit .deposit-page {
  opacity: 1;
}

.deposit-record-button {
  position: absolute;
  z-index: 2;
  top: 3.0769cqw;
  right: 4.1026cqw;
  width: 20px;
  height: 22px;
  border: 0;
  background: transparent;
}

.deposit-back-hotspot {
  position: absolute;
  z-index: 3;
  top: 1.2821cqw;
  left: 1.0256cqw;
  width: 10.2564cqw;
  height: 10.2564cqw;
  border: 0;
  background: transparent;
  opacity: .001;
}

.deposit-record-button::before,
.deposit-record-button::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.deposit-record-button::before {
  inset: 2px 3px 1px 2px;
  border: 1.5px solid var(--app-deposit-record-icon);
  border-radius: 2px;
}

.deposit-record-button::after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 7px;
  border-top: 1.4px solid var(--app-deposit-record-icon);
  border-bottom: 1.4px solid var(--app-deposit-record-icon);
}

.deposit-hero {
  height: 157px;
  min-height: 0;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2821cqw;
  margin: 0 -20px 0;
  background: var(--app-deposit-hero-bg);
  border-bottom: 1px solid var(--app-deposit-hero-border);
}

.deposit-hero span {
  color: var(--color-text-gray-300);
  font-size: var(--app-deposit-label-size);
  font-weight: var(--ui-font-weight-heavy);
  transform: translateY(-5px);
  opacity: 1;
}

.deposit-hero strong {
  color: var(--color-text-white-100);
  font-size: var(--app-deposit-total-size);
  line-height: var(--ui-line-height-none);
  transform: translateY(-5px);
  opacity: 1;
}

.deposit-hero em {
  color: var(--app-deposit-accent);
  font-style: normal;
}

.deposit-hero b {
  position: absolute;
  top: 5.1282cqw;
  right: 4.1026cqw;
  padding: 1.2821cqw 2.5641cqw;
  border-radius: 999px;
  color: var(--app-deposit-badge-text);
  background: var(--app-deposit-badge-bg);
  font-size: var(--ui-font-size-2xs);
  opacity: 1;
}

.deposit-hero b::before {
  content: "♛";
  margin-right: .7692cqw;
  color: var(--app-deposit-badge-icon);
}

.deposit-total-card,
.deposit-range {
  border: 1px solid var(--ui-border);
  border-radius: 2.5641cqw;
  background: var(--ui-surface-panel-muted);
}

.deposit-total-card {
  display: grid;
  grid-template-columns: 1fr 16px 1fr 16px 1fr;
  align-items: center;
  gap: 2.0513cqw;
  min-height: 79.5px;
  padding: 15px;
  margin-top: -5px;
  position: relative;
  z-index: 1;
}

.deposit-total-card span {
  display: block;
  color: #8790a1;
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-bold);
}

.deposit-total-card strong {
  display: block;
  margin-top: 1.2821cqw;
  color: var(--ui-text-primary);
  font-size: clamp(14px, 3.5897cqw, 18px);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-title-ratio);
}

.deposit-total-card i {
  color: #f4cf41;
  font-style: normal;
  font-weight: var(--ui-font-weight-black);
}

.deposit-total-card .green {
  color: var(--ui-success-electric);
}

.deposit-reward-card,
.deposit-choice-section,
.deposit-bonus-toggle {
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface-panel-muted);
}

.deposit-reward-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
}

.deposit-page .deposit-reward-card,
.deposit-page .deposit-choice-section,
.deposit-page .deposit-bonus-toggle {
  display: none;
}

.deposit-reward-card span,
.deposit-choice-section header,
.deposit-bonus-toggle span {
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-heavy);
}

.deposit-reward-card strong {
  display: block;
  margin-top: 5px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
}

.deposit-reward-card button {
  min-width: 74px;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  color: #07150d;
  background: var(--ui-gradient-success-bright);
  font-weight: var(--ui-font-weight-black);
}

.deposit-choice-section {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
}

.deposit-choice-section div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.deposit-choice-section button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  color: var(--app-deposit-option-text);
  background: var(--app-deposit-option-bg);
  font-weight: var(--ui-font-weight-heavy);
}

.deposit-choice-section button.is-selected {
  color: var(--app-control-inverse-text);
  background: var(--ui-gradient-success-bright);
}

.deposit-range {
  height: 74px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 20px;
  padding: 0 16px;
}

.deposit-range span {
  width: 7.1795cqw;
  height: 7.1795cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--app-deposit-range-dot);
  font-weight: var(--ui-font-weight-black);
}

.deposit-range strong {
  color: var(--ui-success-electric);
  font-size: var(--app-fluid-sm);
}

.deposit-reward-summary {
  display: grid;
  gap: 8px;
  margin: -10px 0 18px;
}

.deposit-reward-summary[hidden] {
  display: none;
}

.deposit-reward-popup {
  width: 100%;
  min-height: 81px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 11px;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: clamp(14px, 3.5897cqw, 17px);
  line-height: 1.55;
  text-align: left;
}

.deposit-reward-popup i {
  width: 18px;
  height: 18px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
}

.deposit-reward-summary.is-open .deposit-reward-popup i {
  transform: rotate(225deg) translateY(-1px);
}

.deposit-reward-details {
  border: 1px solid rgba(135, 144, 161, .42);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--color-text-gray-300);
  background: rgba(22, 27, 39, .72);
  font-size: var(--ui-font-size-xs);
}

.deposit-reward-details p {
  margin: 0;
}

.deposit-turnover-tip {
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ui-text-primary);
  font-size: clamp(13px, 3.5897cqw, 18px);
  line-height: 1.25;
}

.deposit-turnover-tip b {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
}

.deposit-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px 10px;
  background: none;
}

.deposit-page .deposit-amount-grid button {
  position: relative;
  min-height: 55px;
  border: 0;
  border-radius: 10px;
  color: var(--ui-text-primary);
  background: var(--app-deposit-amount-bg);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-black);
  opacity: 1;
}

.cashier-drawer .deposit-page .deposit-amount-grid button:not(.close-button):not(.back-button) {
  min-height: 55px;
}

.cashier-drawer .deposit-page .deposit-next:not(.close-button):not(.back-button) {
  min-height: 54px;
  background: var(--ui-gradient-success-bright);
}

.deposit-amount-grid button.is-selected {
  opacity: 1;
  color: var(--ui-success-electric);
  background: rgba(9, 52, 39, .78);
  box-shadow: inset 0 0 0 2px var(--ui-success-electric);
}

.deposit-amount-grid small {
  margin-right: 2.5641cqw;
  color: var(--app-muted-amount);
  font-size: var(--app-relative-small-text);
}

.deposit-amount-grid button b {
  display: none;
  position: absolute;
  top: -10px;
  right: 10px;
  min-width: 31px;
  height: 22px;
  place-items: center;
  border: 2px solid #ff1818;
  border-radius: 6px;
  color: #fff;
  background: #fb4b42;
  box-shadow: 0 0 10px rgba(255, 65, 50, .68);
  font-size: 12px;
  font-weight: var(--ui-font-weight-black);
  line-height: 1;
}

.deposit-amount-grid button.is-selected b {
  display: grid;
}

.deposit-next {
  width: 100%;
  height: 54px;
  min-height: 0;
  margin: 25px 0 24px;
  border-radius: 8px;
  border: 0;
  color: var(--ui-text-primary);
  background: var(--ui-gradient-success-bright);
  box-shadow: var(--app-deposit-next-shadow);
  font-size: var(--ui-font-size-icon-md);
  font-weight: var(--ui-font-weight-black);
}

.deposit-bonus-toggle {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0 12px;
}

.deposit-bonus-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--ui-success-electric);
}

.cashier-drawer,
.withdraw-drawer {
  z-index: 58;
}

.cashier-drawer .ui-backdrop,
.withdraw-drawer .ui-backdrop {
  background: rgba(0, 0, 0, .18);
}

.cashier-drawer-panel {
  width: 100% !important;
  max-width: none;
  padding: 0;
  overflow-y: auto;
  background: var(--ui-surface-panel-deep);
}

.cashier-drawer-panel > [data-include] {
  min-height: 100%;
}

.cashier-drawer .deposit-page {
  min-height: 100%;
  background: var(--ui-surface-panel-deep);
}

.cashier-drawer .deposit-page::after {
  display: none;
}

.cashier-drawer .deposit-tabs {
  position: relative;
  z-index: 10;
  height: 56px;
  display: grid;
  grid-template-columns: 110px 1fr 1.35fr 1fr;
  align-items: center;
  gap: 0;
  margin-top: 0;
  padding: 8px 24px 8px 28px;
  background: #0b121c;
  border-bottom: 1px solid var(--ui-border-subtle);
}

.cashier-drawer .deposit-tabs button {
  width: auto;
  height: 42px;
  flex: initial;
  justify-self: center;
  padding: 0;
  color: #9ca3b5;
  font-size: 13px;
  font-weight: var(--ui-font-weight-black);
}

.cashier-drawer .deposit-tabs button.is-active {
  width: 86px;
  flex-basis: auto;
  border-radius: 12px;
  color: var(--ui-text-primary);
  background: var(--app-deposit-tab-active-gradient);
}

.cashier-drawer .deposit-tabs button:first-child {
  justify-self: start;
}

.cashier-drawer .deposit-page-title,
.cashier-drawer .deposit-back-hotspot,
.cashier-drawer .deposit-country-back-button,
.cashier-drawer .deposit-record-button {
  display: none;
}

.withdraw-drawer .vip-drawer-fullscreen {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--ui-text-primary);
  background: var(--app-drawer-bg, var(--ui-surface-panel-deep));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--ui-duration) ease, opacity var(--ui-duration) ease;
}

.withdraw-drawer .vip-drawer-navbar {
  min-height: 48px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  background: var(--app-drawer-bg, var(--ui-surface-panel-deep));
  box-shadow: 0 1px 0 var(--app-divider-color, rgba(255, 255, 255, .06));
  flex-shrink: 0;
}

.withdraw-drawer .vip-back-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  padding: 0;
}

.withdraw-drawer .vip-back-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.withdraw-drawer .vip-navbar-title {
  justify-self: center;
  font-size: var(--ui-font-size-title);
  font-weight: 700;
  color: var(--ui-text-primary);
}

.withdraw-drawer .vip-drawer-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--app-dialog-bg, var(--ui-surface-panel-deep));
}

.withdraw-drawer .withdraw-page {
  min-height: 100%;
  background: var(--app-dialog-bg, var(--ui-surface-panel-deep));
}

.withdraw-drawer .withdraw-page .subpage-header {
  display: none;
}

.profile-subpage-drawer {
  overflow: hidden;
}

.profile-subpage-drawer .profile-subpage-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--ui-text-primary);
  background: var(--app-drawer-bg, var(--ui-surface-panel-deep));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--ui-duration) ease, opacity var(--ui-duration) ease;
}

.profile-subpage-drawer.is-active .profile-subpage-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.profile-subpage-navbar {
  min-height: 48px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  background: var(--app-drawer-bg, var(--ui-surface-panel-deep));
  box-shadow: 0 1px 0 var(--app-divider-color, rgba(255, 255, 255, .06));
  flex-shrink: 0;
}

.profile-subpage-back {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  padding: 0;
}

.profile-subpage-back img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.profile-subpage-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--app-dialog-bg, var(--ui-surface-panel-deep));
}

.profile-subpage-content {
  min-height: 100%;
  background: var(--app-dialog-bg, var(--ui-surface-panel-deep));
}

.profile-subpage-content[hidden],
.profile-subpage-history [data-profile-history-panel][hidden] {
  display: none !important;
}

.profile-subpage-drawer .subpage-header,
.profile-subpage-drawer .activity-source-header {
  display: none !important;
}

.profile-subpage-drawer .report-page,
.profile-subpage-drawer .setting-page,
.profile-subpage-drawer .wallet-page,
.profile-subpage-drawer .activity-history-page,
.profile-subpage-drawer .agente-container {
  min-height: 100%;
  background: var(--app-dialog-bg, var(--ui-surface-panel-deep));
}

.profile-history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  background: var(--app-dialog-bg, var(--ui-surface-panel-deep));
  border-bottom: 1px solid var(--app-divider-color, rgba(255, 255, 255, .06));
}

.profile-history-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--ui-surface-2);
  color: var(--ui-text-secondary);
  font-weight: 700;
}

.profile-history-tabs button.is-active {
  color: var(--ui-text-primary);
  background: var(--app-accent, #6ea8f4);
}

.cashier-panel {
  margin: 28px -4px 0;
}

.cashier-empty {
  display: grid;
  gap: 12px;
  padding: 22px 16px;
  border-radius: 14px;
  background: var(--ui-surface-panel-muted);
  color: var(--ui-text-primary);
}

.cashier-empty strong {
  font-size: var(--ui-font-size-display-sm);
}

.cashier-empty p {
  margin: 0;
  color: var(--color-text-gray-300);
  line-height: var(--ui-line-height-record);
}

.cashier-empty button {
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  color: var(--app-control-inverse-text);
  background: var(--ui-gradient-success-bright);
  font-weight: var(--ui-font-weight-black);
}

.cashier-transactions-card {
  display: grid;
  gap: 19px;
  color: var(--ui-text-primary);
}

.cashier-subtabs {
  height: 31px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 46px;
}

.cashier-subtabs button {
  position: relative;
  border: 0;
  outline: none;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--ui-font-size-section);
}

.cashier-subtabs button.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 27px;
  height: 2px;
  border-radius: 999px;
  background: #ff4da3;
  transform: translateX(-50%);
}

.cashier-transaction-table {
  overflow: hidden;
  border-radius: 10px;
  background: #171a27;
}

.cashier-transaction-table [role="row"] {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1.1fr .9fr .9fr;
  align-items: center;
  border-bottom: 1px solid rgba(124, 137, 164, .18);
  text-align: center;
}

.cashier-transaction-table [role="row"]:first-child {
  min-height: 45px;
}

.cashier-transaction-table [role="row"]:last-child {
  border-bottom: 0;
}

.cashier-transaction-table .cashier-transaction-empty {
  min-height: 180px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

.cashier-transaction-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.cashier-transaction-table b {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
}

.cashier-transaction-table span {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-form);
}

.cashier-transaction-empty span {
  color: var(--color-text-gray-300);
}

.cashier-transaction-table strong {
  color: var(--ui-success-electric);
  font-size: var(--ui-font-size-md);
}

.cashier-transaction-table strong.text-green {
  color: var(--ui-success-electric);
}

.cashier-transaction-table strong.text-red {
  color: var(--ui-danger-bright);
}

.cashier-transaction-table em {
  color: var(--ui-success-electric);
  font-size: var(--ui-font-size-sm);
  font-style: normal;
}

.cashier-transaction-table em.pending,
.cashier-transaction-table em.status-pending,
.cashier-transaction-table em.status-confiscate {
  color: var(--app-status-yellow);
}

.cashier-transaction-table em.status-success {
  color: var(--ui-success-electric);
}

.cashier-transaction-table em.status-failed {
  color: var(--ui-danger-bright);
}

.cashier-transactions-card footer {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: -19px;
  border-radius: 0 0 10px 10px;
  background: #171a27;
  color: var(--ui-success-electric);
}

.cashier-transactions-card footer button {
  border: 0;
  color: rgba(var(--lite-accent-rgb, 0, 228, 133), .45);
  background: transparent;
  font-size: var(--ui-font-size-balance);
}

.cashier-vip-panel {
  margin: 0;
  min-height: calc(100vh - 57px);
  background: var(--app-drawer-bg, #090f1f);
}

.cashier-drawer .deposit-page[data-active-cashier-tab="vip"] {
  padding-right: 0;
  padding-left: 0;
}

.cashier-vip-panel .vip-source-panel,
.cashier-vip-panel .tab-drawer-fullscreen,
.cashier-vip-panel .quick-entry-drawer {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: auto;
  min-height: calc(100vh - 57px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.cashier-vip-panel .drawer-header {
  display: none;
}

.deposit-confirm-modal:not(.is-active) .deposit-confirm-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.deposit-confirm-card {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 420px);
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  color: var(--ui-text-primary);
  background: #151a27;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
}

.deposit-confirm-card header {
  display: grid;
  gap: 4px;
}

.deposit-confirm-card header span,
.deposit-confirm-card dt,
.deposit-confirm-card p {
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-xs);
}

.deposit-confirm-card header strong {
  color: var(--ui-success-electric);
  font-size: var(--ui-font-size-icon-lg);
}

.deposit-confirm-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.deposit-confirm-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-border-subtle);
}

.deposit-confirm-card dd {
  margin: 0;
  font-weight: var(--ui-font-weight-black);
}

.deposit-confirm-card p {
  margin: 0;
  line-height: var(--ui-line-height-form);
}

.payment-detail-modal:not(.is-active) .payment-detail-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.payment-detail-card {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(calc(100% - 28px), 420px);
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  color: var(--ui-text-primary);
  background: #151a27;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
  transform: translateX(-50%);
}

.payment-detail-card header {
  display: grid;
  gap: 4px;
  padding-right: 36px;
}

.payment-detail-card header span,
.payment-detail-card dt,
.payment-detail-card p {
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-xs);
}

.payment-detail-card header strong {
  color: #edc921;
  font-size: var(--ui-font-size-sm);
}

.payment-detail-card header b {
  color: var(--ui-success-electric);
  font-size: var(--ui-font-size-icon-lg);
}

.payment-detail-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.payment-detail-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-border-subtle);
}

.payment-detail-card dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-weight: var(--ui-font-weight-black);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-detail-card p {
  margin: 0;
  line-height: var(--ui-line-height-form);
}

.payment-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.payment-detail-actions a,
.payment-detail-actions button {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: var(--ui-text-primary);
  background: var(--app-payment-action-bg);
  text-align: center;
  text-decoration: none;
  font-weight: var(--ui-font-weight-black);
}

.payment-detail-actions a:not([hidden]) {
  grid-column: 1 / -1;
  color: var(--app-control-inverse-text);
  background: var(--ui-gradient-success-bright);
}

.qr-payment-modal:not(.is-active) .qr-payment-card {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.qr-payment-modal .ui-backdrop {
  background: var(--app-qr-payment-backdrop);
}

.qr-payment-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(calc(100% - 32px), 360px);
  max-height: calc(100% - 42px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  color: var(--app-qr-payment-title);
  background: var(--app-qr-payment-card-bg);
  border: 1px solid var(--app-qr-payment-border);
  border-radius: 20px;
  box-shadow: var(--app-qr-payment-shadow);
}

.qr-payment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--app-qr-payment-border);
}

.qr-payment-heading {
  font-size: 18px;
  font-weight: 800;
  color: var(--app-qr-payment-title);
}

.qr-payment-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: var(--app-qr-payment-close-icon);
  background: var(--app-qr-payment-close-bg);
  cursor: pointer;
}

.qr-payment-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
}

.qr-payment-instructions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.qr-payment-instructions p {
  margin: 0;
  color: var(--app-qr-payment-instruction);
  font-size: 14px;
  line-height: 1.5;
}

.qr-payment-amount {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--app-qr-payment-amount);
  font-size: 24px;
  font-weight: 800;
}

.qr-payment-amount[hidden] {
  display: none;
}

.qr-payment-amount-copy {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.qr-payment-amount-copy img {
  width: 18px;
  height: 18px;
}

.qr-payment-code-card {
  padding: 14px;
  border: 1px solid var(--app-qr-payment-qr-border);
  border-radius: 16px;
  background: var(--app-qr-payment-qr-bg);
  box-shadow: 0 4px 16px rgba(74, 108, 247, .08);
}

.qr-payment-graphic {
  width: 200px;
  height: 200px;
  display: block;
}

.qr-payment-graphic[hidden] {
  display: none;
}

.qr-payment-graphic svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-payment-countdown {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--app-qr-payment-countdown);
  text-align: center;
}

.qr-payment-copy {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  color: var(--app-qr-payment-copy-text);
  background: var(--app-qr-payment-copy-bg);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(74, 108, 247, .28);
}

.qr-payment-copy-icon {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.qr-payment-address {
  width: 100%;
  border: 1px solid var(--app-qr-payment-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--app-qr-payment-address-bg);
  color: var(--app-qr-payment-address-text);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
  text-align: left;
  cursor: pointer;
}

.app-shell.route-deposit .app-main {
  inset: 0;
  padding: 0;
}

.deposit-perks {
  margin: 0 -20px;
  padding: 20px;
  border-top: 1px solid #2a2e3f;
  text-align: center;
  background: #161823;
}

.deposit-perks h2 {
  margin: 0 0 20px;
  color: var(--ui-text-primary);
  font-size: 16px;
  font-weight: var(--ui-font-weight-black);
  line-height: 1.25;
  letter-spacing: .5px;
}

.deposit-perks h2 span {
  color: #ffda44;
}

.deposit-perks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.deposit-perk-card,
.profile-withdrawable,
.profile-invite,
.profile-menu button,
.agent-summary,
.withdraw-card,
.withdraw-form {
  border-radius: 2.0513cqw;
  background: var(--ui-surface-card);
}

.deposit-perk-card {
  min-height: 139px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 15px;
  border: 1px solid #2a2e3f;
  border-radius: 12px;
  background: #1c202d;
  text-align: center;
}

.deposit-perk-card:active {
  transform: scale(.97);
}

.deposit-perks strong {
  color: var(--ui-text-primary);
  font-size: 13px;
  font-weight: var(--ui-font-weight-black);
  line-height: 1.2;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.deposit-perk-card span {
  color: #8a92a5;
  font-size: 11px;
  line-height: 1.4;
}

.deposit-perk-icon {
  width: 28px;
  height: 28px;
  display: block;
  margin-bottom: 10px;
  color: var(--lite-accent, #00d563);
  fill: currentColor;
}

.deposit-perk-icon.is-spins {
  color: #ffda44;
}

.deposit-perk-icon.is-cashback {
  color: #00bcd4;
}

.deposit-perk-icon.is-support {
  color: #e91e63;
}

.deposit-terms {
  margin: 0 -20px;
  padding: 25px 20px;
  background: #13151f;
  color: #8a92a5;
  font-size: 12px;
  line-height: 1.6;
}

.deposit-terms h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a2e3f;
  color: var(--ui-text-primary);
  font-size: 14px;
  font-weight: var(--ui-font-weight-black);
  line-height: 1.25;
  text-transform: uppercase;
}

.deposit-terms-icon {
  width: 14px;
  height: 14px;
  display: block;
  color: var(--ui-text-primary);
  fill: currentColor;
  opacity: .9;
}

.deposit-terms ul {
  margin: 0;
  padding-left: 15px;
  list-style: none;
}

.deposit-terms li {
  margin-bottom: 10px;
  color: #8a92a5;
}

.agent-summary {
  display: grid;
  gap: 2.0513cqw;
  margin: 16px 21px 12px;
  padding: 16px;
}

.agent-summary header,
.profile-withdrawable header,
.profile-withdrawable div,
.profile-withdrawable footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agent-summary header strong {
  color: var(--ui-text-primary);
}

.agent-summary header button {
  border: 0;
  color: var(--app-agent-action-text);
  background: var(--app-agent-action-bg);
  border-radius: 999px;
  font-weight: var(--ui-font-weight-black);
}

.agent-summary p,
.invite-url p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--app-agent-link);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent-summary small {
  color: var(--app-agent-muted);
}

.reward-rules {
  margin: 0 5.1282cqw;
  padding: 3.0769cqw;
  border-radius: 2.0513cqw;
  background: var(--ui-surface-page-deep);
}

.reward-rules nav {
  display: flex;
  gap: 2.0513cqw;
  margin-bottom: 2.5641cqw;
}

.reward-rules button {
  border: 0;
  color: var(--app-rules-tab-muted);
  background: transparent;
  font-weight: var(--ui-font-weight-black);
}

.reward-rules button.is-active {
  color: var(--ui-text-primary);
}

.reward-rules p {
  margin: 1.5385cqw 0;
  color: var(--app-rules-copy);
  font-size: var(--app-fluid-xs);
}

.agent-summary div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.0769cqw;
}

.agent-summary article {
  display: grid;
  gap: 1.5385cqw;
  padding: 3.0769cqw;
  border-radius: 1.5385cqw;
  background: var(--ui-surface);
}

.agent-summary span,
.profile-invite span,
.profile-menu span,
.profile-nav-list b,
.profile-withdrawable span,
.profile-withdrawable b,
.withdraw-card span,
.withdraw-card p {
  color: var(--ui-text-section-muted);
}

.agent-summary b {
  color: var(--app-agent-value);
  font-size: var(--app-fluid-value);
}

.profile-page {
  position: relative;
  min-height: 100%;
  background: var(--color-screen-bg);
  color: var(--color-text-white-100);
  padding: 5cqw 2.0513cqw 18.4615cqw;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  text-shadow: none;
}

.profile-page > :not(.page-busy) {
  opacity: 1;
}

.profile-page .profile-actions,
.profile-page .profile-menu,
.profile-page .profile-nav-list,
.profile-page .profile-invite .invite-url {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.profile-page .source-click-hotspot {
  opacity: .001 !important;
  pointer-events: auto !important;
}

.profile-page .profile-actions button,
.profile-page .profile-menu button,
.profile-page .profile-nav-list button,
.profile-page .profile-invite .invite-url button {
  pointer-events: auto !important;
}

.profile-hero {
  min-height: 28.8462cqw;
  position: relative;
}

.profile-avatar {
  position: absolute;
  left: 0;
  top: 0;
  width: 15.1282cqw;
  height: 15.1282cqw;
  border-radius: 50%;
  object-fit: cover;
  background: var(--ui-surface-profile-avatar);
}

.profile-main {
  position: absolute;
  left: 0;
  top: 17.5641cqw;
  display: grid;
  gap: .2564cqw;
}

.profile-main strong {
  color: var(--color-text-white-100);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-record);
}

.profile-main span {
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-profile-id);
  line-height: var(--ui-line-height-record);
}

.profile-main b {
  color: var(--ui-success-profile);
  font-weight: var(--ui-font-weight-medium);
}

.profile-id-line {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.profile-copy {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  margin-left: -1px;
  transform: translateY(3px);
}

.profile-wallets {
  position: absolute;
  top: 0;
  right: 0;
  width: 31.2051cqw;
  height: 10cqw;
  display: block;
}

.profile-wallets span {
  display: inline-flex;
  align-items: center;
  gap: 4.8px;
  min-height: 16px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-wallet);
}

.profile-wallets b {
  color: var(--profile-wallet-value-color, var(--app-gold-color, var(--money-text-color, var(--ui-success-profile))));
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-compact);
}

.profile-wallets em {
  position: absolute;
  top: 0;
  left: 0;
  width: 10cqw;
  height: 10cqw;
  margin: 0;
  overflow: hidden;
  color: transparent;
  background: url("/7000/assets/shared/svg/c77/vipSignIn_0.png") center / contain no-repeat;
  font-size: var(--ui-font-size-zero);
}

.profile-wallet-title {
  display: none;
}

.profile-wallet-stack {
  position: absolute;
  left: 13.0769cqw;
  top: .1795cqw;
  display: grid;
  gap: 5.6px;
}

.profile-wallets .l5-marker {
  width: 14.4px;
  height: 14.4px;
  font-size: var(--ui-font-size-marker-xs);
  line-height: var(--ui-font-size-marker-xs);
}

.profile-panda2-page {
  min-height: calc(100vh - 54px);
  padding: 0 12px 18px;
  overflow: auto;
  background: var(--color-screen-bg);
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
}

.panda2-top-card {
  margin: 0 -12px 26px;
  height: 223px;
  padding: 29px 12px 14px;
  border-radius: 0 0 22px 22px;
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 255, 255, .72), transparent 42%),
    linear-gradient(180deg, #f4f8ff 0%, #e7eef9 100%);
  color: #243044;
  box-shadow: inset 0 -1px 0 rgba(21, 28, 48, .12);
}

.panda2-top-card > * {
  opacity: 1;
}

.panda2-user-row {
  display: flex;
  align-items: center;
  min-height: 56px;
}

.panda2-avatar {
  width: 54px;
  height: 54px;
  margin: 0 14px 0 4px;
  border-radius: 50%;
  object-fit: contain;
  background: #050506;
  padding: 1px;
}

.panda2-user-copy strong {
  color: #1e2636;
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-bold);
}

.panda2-user-copy p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 8px 0 0;
  color: #3d4c66;
  font-size: var(--ui-font-size-xs);
}

.panda2-user-copy p img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(53%) sepia(77%) saturate(1413%) hue-rotate(111deg) brightness(95%) contrast(101%);
}

.panda2-vip-pill,
.panda2-level-badge,
.panda2-next-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 18px;
  margin-left: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, #9b9b9b, #4d4d4d);
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-bold);
}

.panda2-balance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12px 0 15px;
  border-bottom: 1px solid rgba(21, 28, 48, .38);
  padding-bottom: 12px;
}

.panda2-balance-row article {
  display: grid;
  gap: 5px;
}

.panda2-balance-row article:last-child {
  text-align: center;
}

.panda2-balance-row span {
  color: #455672;
  font-size: var(--ui-font-size-2xs);
}

.panda2-balance-row b,
.panda2-balance-row strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffd509;
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-bold);
}

.panda2-balance-row strong {
  display: block;
  color: #1f2839;
  font-size: var(--ui-font-size-display-sm);
}

.panda2-money-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.panda2-money-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  border: 0;
  border-radius: 6px;
  background: #d9e5f6;
  color: #2f3b52;
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-bold);
}

.panda2-money-actions img {
  width: 26px;
  height: 26px;
  filter: brightness(0) saturate(100%) invert(58%) sepia(44%) saturate(3281%) hue-rotate(207deg) brightness(98%) contrast(95%);
}

.panda2-vip-panel {
  position: relative;
  box-sizing: border-box;
  min-height: 210px;
  margin: 0 0 12px;
  padding: 28px 14px 22px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 255, 255, .1), transparent 38%),
    linear-gradient(135deg, #30333c 0%, #1b1f2b 62%, #141823 100%);
  color: rgba(255,255,255,.72);
  border: 1px solid var(--ui-border-subtle);
}

.panda2-vip-panel > * {
  opacity: 1;
}

.panda2-vip-detail {
  position: absolute;
  right: 2px;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 7px;
  min-width: 114px;
  height: 46px;
  border: 0;
  border-radius: 22px;
  background: url("/7000/assets/shared/panda/first/vip/vipDetail1.png") center / 100% 100% no-repeat;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-sm);
}

.panda2-vip-detail span {
  color: #6d8cff;
  font-size: var(--ui-font-size-icon-md);
}

.panda2-vip-line {
  display: grid;
  grid-template-columns: 92px 1fr 78px;
  align-items: center;
  gap: 10px;
  min-height: 38px;
}

.panda2-vip-line b {
  color: rgba(255,255,255,.72);
  font-size: var(--ui-font-size-sm);
}

.panda2-level-badge,
.panda2-next-badge {
  margin-left: 0;
  position: relative;
  overflow: visible;
  padding-left: 28px;
}

.panda2-level-badge img,
.panda2-next-badge img {
  position: absolute;
  left: -2px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  object-fit: contain;
}

.panda2-next-badge {
  opacity: .86;
}

.panda2-progress {
  display: block;
  height: 4px;
  margin: 14px 0 12px;
  border-radius: 6px;
  background: #cdd7e8;
}

.panda2-progress em {
  display: block;
  width: 13%;
  height: 100%;
  border-radius: inherit;
  background: #f6b748;
}

.panda2-vip-panel h2 {
  margin: 0 0 12px;
  color: rgba(255,255,255,.52);
  font-size: var(--ui-font-size-sm);
}

.panda2-vip-panel p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.78);
  font-size: var(--ui-font-size-2xs);
}

.panda2-vip-panel strong {
  color: #ffc021;
}

.panda2-vip-panel span {
  color: rgba(255,255,255,.55);
}

.panda2-support,
.panda2-menu {
  overflow: hidden;
  border-radius: 6px;
  background: #edf3fb;
}

.panda2-support {
  margin-bottom: 10px;
  height: 57px;
  background: #edf3fb;
}

.panda2-menu {
  height: 285px;
  background: #edf3fb;
}

.panda2-support > *,
.panda2-menu > * {
  opacity: 1;
}

.panda2-support button,
.panda2-menu button {
  display: grid;
  grid-template-columns: 28px 1fr 18px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 0 15px;
  border: 0;
  border-bottom: 1px solid rgba(21, 28, 48, .18);
  background: transparent;
  color: #2b3548;
  text-align: left;
}

.panda2-menu button:last-child {
  border-bottom: 0;
}

.panda2-support span {
  color: #7a95ff;
  font-size: var(--ui-font-size-display-sm);
}

.panda2-support b,
.panda2-menu b {
  color: #2b3548;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.panda2-support i,
.panda2-menu i {
  color: #3f4c63;
  font-size: var(--ui-font-size-display-sm);
  font-style: normal;
  text-align: right;
}

.panda2-menu img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  opacity: .9;
  filter: brightness(0) saturate(100%) invert(29%) sepia(18%) saturate(801%) hue-rotate(178deg) brightness(88%) contrast(91%);
}

.app-shell.route-profile .lite-toast {
  top: 47%;
  bottom: auto;
  border-radius: 6px;
  padding: 16px 15px;
  background: var(--ui-surface-profile-toast);
  box-shadow: none;
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-md);
}

.profile-actions {
  position: absolute;
  top: 19.1026cqw;
  right: 2.0513cqw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 50.1026cqw;
  margin: 0;
}

.profile-actions button {
  min-height: 9.2308cqw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2.0513cqw;
  border-radius: 2.0513cqw;
  font-size: var(--ui-control-text-size);
  font-weight: var(--ui-font-weight-regular);
  background: var(--ui-gradient-profile-action);
}

.profile-actions img {
  width: 5.1282cqw;
  height: 5.1282cqw;
  object-fit: contain;
}

.profile-withdrawable {
  display: grid;
  gap: 12px;
  margin-top: 3.5897cqw;
  padding: 14px 10px 10px;
  background: var(--ui-surface-profile-panel);
}

.profile-withdrawable strong {
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-compact);
}

.profile-withdrawable-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-white-100);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-compact);
}

.profile-withdrawable-title img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: .5;
}

.profile-withdrawable div span,
.profile-withdrawable div b {
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
}

.profile-withdrawable header > span:not(.profile-withdrawable-title),
.profile-withdrawable footer button {
  color: var(--ui-warning-profile);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
}

.profile-withdrawable header .profile-withdrawable-title {
  color: var(--color-text-white-100);
}

.profile-withdrawable i {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ui-surface-profile-progress);
}

.profile-withdrawable i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-success-profile);
}

.profile-withdrawable footer button {
  min-width: 15.641cqw;
  height: 9.2308cqw;
  border: 0;
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-profile-panel);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.profile-withdrawable footer button img {
  width: 14px;
  height: 14px;
  filter: brightness(0) saturate(100%) invert(52%) sepia(89%) saturate(2301%) hue-rotate(359deg) brightness(99%) contrast(98%);
}

.profile-invite {
  overflow: hidden;
  margin-top: 11px;
  background: var(--ui-surface-profile-panel);
}

.profile-invite h2 {
  height: 36px;
  margin: 0 0 14px;
  padding: 10px;
  background: var(--ui-gradient-profile-title);
  color: var(--color-text-white-100);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-compact);
}

.invite-stats {
  display: flex;
  gap: 0;
  padding: 0;
}

.invite-stats article {
  flex: 1 1 0;
  display: block;
  height: 63.6px;
  min-height: 0;
  margin: 0 6.4px;
  padding: 7.8px 9.75px;
  border-radius: 8px;
  background: var(--ui-surface-profile-invite);
  text-align: center;
}

.invite-stats b {
  color: var(--ui-warning-profile-value);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-medium);
  line-height: var(--ui-line-height-lg);
}

.invite-stats span {
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
  display: block;
  margin-bottom: 8px;
}

.invite-url {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11.2821cqw;
  gap: 8px;
  height: 60px;
  margin-top: 16px;
  padding: 12px 8px;
  background: var(--ui-surface-profile-invite-row);
}

.invite-url p {
  display: flex;
  align-items: center;
  min-height: 9.2308cqw;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--ui-surface-profile-invite);
  color: var(--accent-color-yellow);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-url button {
  border-radius: 2.5641cqw;
  background: var(--ui-gradient-profile-copy);
  font-size: var(--ui-font-size-profile-id);
  font-weight: var(--ui-font-weight-regular);
}

.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 9.2308cqw;
  margin: 26px 10px 8px;
  padding: 0 14px;
}

.profile-page .share-row span {
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-profile-share);
  line-height: var(--ui-line-height-compact);
}

.profile-page .share-row button {
  display: inline-grid;
  width: 9.2308cqw;
  height: 9.2308cqw;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  place-items: center;
}

.share-row img {
  width: 9.2308cqw;
  height: 9.2308cqw;
  border-radius: 50%;
  object-fit: contain;
}

.profile-menu {
  display: flex;
  gap: 0;
  height: 102px;
  margin-top: 10px;
}

.profile-page .profile-menu {
  position: relative;
  z-index: 4;
  transform: none;
}

.profile-menu button {
  flex: 1 1 0;
  height: 92px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  place-items: center;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 10px 10px 0 0;
  padding: 10px;
  border: 0;
  background: var(--ui-surface-profile-panel);
}

.profile-menu button:last-child {
  margin-right: 0;
}

.profile-menu span {
  color: var(--color-text-gray-300);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-profile-menu);
}

.profile-menu img {
  width: 9.2308cqw;
  height: 9.2308cqw;
  object-fit: contain;
}

.profile-nav-list {
  overflow: hidden;
  margin-top: 3.0769cqw;
  padding-left: 16px;
  border-radius: 2.0513cqw;
  background: var(--ui-surface-profile-panel);
}

.profile-page .profile-nav-list {
  position: relative;
  z-index: 3;
  transform: none;
}

.profile-nav-list button {
  width: 100%;
  min-height: 11.2821cqw;
  display: grid;
  grid-template-columns: 20.4px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: var(--color-text-gray-300);
  background: transparent;
  text-align: left;
  font-size: var(--ui-font-size-md);
}

.profile-nav-list b {
  color: var(--color-text-gray-300);
  font-weight: var(--ui-font-weight-regular);
}

.profile-row-icon,
.profile-nav-list i {
  color: var(--ui-text-row-icon);
  font-style: normal;
  font-size: var(--ui-font-size-xl);
}

.profile-nav-list i {
  width: 20px;
  margin-right: 16px;
  text-align: center;
}

.profile-row-icon-img {
  width: 20.4px;
  height: 20.4px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(76%) sepia(7%) saturate(394%) hue-rotate(183deg) brightness(88%) contrast(87%);
}

.withdraw-page {
  min-height: 100%;
  background: var(--color-screen-bg);
  padding: 0 3.0769cqw 8.2051cqw;
}

.withdraw-page > :not(.page-busy) {
  opacity: 1;
}

.withdraw-page[data-has-withdraw-account="true"] {
  background-image: none;
}

.withdraw-page[data-has-withdraw-account="true"] > :not(.page-busy) {
  opacity: 1;
}

.withdraw-page[data-has-withdraw-account="true"] .withdraw-balance-grid,
.withdraw-page[data-has-withdraw-account="true"] .withdraw-amount-row,
.withdraw-page[data-has-withdraw-account="true"] .withdraw-limit-grid,
.withdraw-page[data-has-withdraw-account="true"] .withdraw-submit {
  background-image: none;
}

.withdraw-page[data-has-withdraw-account="true"] .withdraw-balance-grid article,
.withdraw-page[data-has-withdraw-account="true"] .withdraw-amount-row > *,
.withdraw-page[data-has-withdraw-account="true"] .withdraw-limit-grid article {
  opacity: 1;
}

.withdraw-page[data-has-withdraw-account="true"] .withdraw-submit {
  background: var(--lite-accent, #03da71);
  color: var(--ui-text-primary);
}

.withdraw-page[data-direct-path="withdraw-apply"] {
  background-image: none;
}

.subpage-header {
  height: 12.8205cqw;
  display: grid;
  grid-template-columns: 11.7949cqw 1fr 11.7949cqw;
  align-items: center;
  margin-bottom: 2.5641cqw;
}

.subpage-header button {
  width: 11.7949cqw;
  height: 7.6923cqw;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.subpage-header img {
  width: 5.1282cqw;
  height: 5.1282cqw;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.subpage-header strong {
  justify-self: center;
  font-size: var(--app-fluid-title);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-page .subpage-header span {
  width: 16.4103cqw;
  height: 9.7436cqw;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-withdraw-header-border);
  border-radius: 1.5385cqw;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-readable);
  white-space: nowrap;
  transform: translate(-5px, 7px);
}

.withdraw-page .subpage-header button {
  opacity: 0;
  pointer-events: none;
}

.withdraw-page[data-direct-path="withdraw-apply"] .subpage-header button {
  opacity: 1;
  pointer-events: auto;
}

.withdraw-page .subpage-header {
  grid-template-columns: 11.7949cqw 1fr 16.4103cqw;
}

.withdraw-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5641cqw;
  background: none;
}

.withdraw-balance-grid article {
  box-sizing: border-box;
  height: 17.9487cqw;
  min-height: 70px;
  padding: 3.3333cqw 3.0769cqw;
  border: 1px solid var(--app-withdraw-card-border);
  border-top-color: var(--app-withdraw-card-accent);
  border-radius: 3.0769cqw;
  background: var(--app-withdraw-card-bg);
  opacity: 1;
}

.withdraw-balance-grid article:nth-child(2) {
  border-top-color: var(--app-withdraw-card-accent-alt);
}

.withdraw-balance-grid span,
.withdraw-limit-grid span {
  color: var(--app-withdraw-muted);
  font-size: var(--app-fluid-micro);
}

.withdraw-balance-grid strong {
  display: block;
  margin-top: 1.7949cqw;
  color: var(--ui-text-primary);
  font-size: var(--app-fluid-lg);
}

.withdraw-amount-row {
  height: 11.2821cqw;
  display: grid;
  grid-template-columns: 8.2051cqw 1fr 12.8205cqw;
  align-items: center;
  gap: 4.1026cqw;
  margin: 3.5897cqw 1.5385cqw 2.5641cqw;
  color: var(--app-withdraw-row-muted);
  border-radius: 2.0513cqw;
  background: var(--ui-surface);
  padding: 0 3.0769cqw;
}

.withdraw-amount-row > * {
  opacity: 1;
}

.withdraw-amount-row p {
  margin: 0;
  font-size: var(--app-fluid-md);
}

.withdraw-amount-row button {
  width: 11.7949cqw;
  height: 8.2051cqw;
  border: 0;
  border-radius: 999px;
  color: var(--app-withdraw-quick-text);
  background: var(--app-withdraw-quick-bg);
  font-size: var(--app-withdraw-quick-font-size);
  font-weight: var(--ui-font-weight-bold);
}

.withdraw-account-empty {
  margin-top: 2.5641cqw;
  padding: 3.0769cqw 0 5.1282cqw;
  border-bottom: 1px solid rgba(255, 255, 255, .26);
  text-align: center;
  background: transparent;
}

.withdraw-account-empty > * {
  opacity: 1;
}

.withdraw-account-empty h2 {
  margin: 0 0 1.5385cqw;
  text-align: left;
  color: var(--ui-text-primary);
  font-size: clamp(16px, 4.1026cqw, 19px);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-account-empty p {
  margin: 0 0 2.3077cqw;
  color: #aeb4c0;
  font-size: clamp(16px, 4.1026cqw, 19px);
}

.withdraw-account-empty button {
  height: 6.9231cqw;
  width: 43.5897cqw;
  padding: 0;
  border: 1px solid #fff000;
  border-radius: .7692cqw;
  color: #fff000;
  background: transparent;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.withdraw-submit {
  width: 69.4872cqw;
  height: 10.2564cqw;
  display: grid;
  place-items: center;
  margin: 7.1795cqw auto 3.0769cqw;
  border: 0;
  border-radius: 2.5641cqw;
  color: var(--ui-text-primary);
  background: var(--ui-gradient-profile-action);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.withdraw-confirm-modal {
  position: fixed;
  z-index: calc(var(--z-modal) + 10);
  inset: 0;
  display: none;
  place-items: start center;
  padding: 28.7179cqw 6.1538cqw 6.1538cqw;
}

.withdraw-confirm-modal.is-active {
  display: grid;
}

.withdraw-confirm-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, .64);
  backdrop-filter: blur(5px);
}

.withdraw-confirm-card {
  position: relative;
  z-index: 1;
  width: min(82.0513cqw, 320px);
  min-height: 55.3846cqw;
  padding: 4.1026cqw 4.1026cqw 5.1282cqw;
  border-radius: 5.1282cqw;
  color: var(--ui-text-primary);
  background: var(--ui-surface);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
}

.withdraw-confirm-card > p {
  margin: 0 0 4.8718cqw;
  text-align: center;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.withdraw-confirm-close {
  position: absolute;
  top: 3.5897cqw;
  right: 3.5897cqw;
  width: 6.1538cqw;
  height: 6.1538cqw;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: clamp(20px, 5.641cqw, 24px);
  line-height: 1;
}

.withdraw-confirm-card > span {
  display: block;
  text-align: center;
  color: var(--app-withdraw-muted);
  font-size: var(--ui-font-size-sm);
}

.withdraw-confirm-card > strong {
  display: block;
  margin: 2.5641cqw 0 4.6154cqw;
  text-align: center;
  font-size: clamp(24px, 6.1538cqw, 30px);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-confirm-line {
  height: 1px;
  margin: 0 0 4.6154cqw;
  background: rgba(255, 255, 255, .18);
}

.withdraw-confirm-fee {
  display: flex;
  justify-content: space-between;
  gap: 3.0769cqw;
  color: var(--app-withdraw-muted);
  font-size: var(--ui-font-size-xs);
}

.withdraw-confirm-fee b {
  color: var(--app-withdraw-muted);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-account-modal {
  position: absolute;
  z-index: calc(var(--z-modal) + 20);
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: var(--ui-text-primary);
  background: rgba(0, 0, 0, .64);
}

.withdraw-account-modal.is-active {
  display: block;
}

.withdraw-account-modal-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: 0 0 5.1282cqw 5.1282cqw;
  background: var(--color-bg-modal-payment, #1b1d29);
}

.withdraw-account-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10.2564cqw;
  align-items: center;
  min-height: clamp(52px, 13.3333cqw, 58px);
  padding: 0 clamp(16px, 4.1026cqw, 18px);
  background: color-mix(in srgb, var(--color-bg-modal-payment, #1b1d29) 94%, #000 6%);
}

.withdraw-account-modal-header strong {
  overflow: hidden;
  font-size: clamp(20px, 5.1282cqw, 24px);
  font-weight: var(--ui-font-weight-regular);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.withdraw-account-modal-header button {
  width: 8.2051cqw;
  height: 8.2051cqw;
  justify-self: end;
  border: 0;
  color: rgba(255, 255, 255, .82);
  background: transparent;
  font-size: clamp(24px, 6.1538cqw, 28px);
  line-height: 1;
}

.withdraw-account-modal-form {
  display: grid;
  align-content: start;
  gap: clamp(14px, 4.1026cqw, 18px);
  padding: clamp(16px, 4.1026cqw, 18px);
}

.withdraw-account-modal-form label {
  display: grid;
  gap: clamp(8px, 2.0513cqw, 10px);
  color: rgba(255, 255, 255, .26);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.withdraw-account-modal-form input[type="text"],
.withdraw-account-select {
  width: 100%;
  min-height: clamp(48px, 12.3077cqw, 54px);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .055);
  border-radius: 0;
  color: rgba(255, 255, 255, .84);
  background: #080d20;
  font-size: var(--ui-font-size-md);
}

.withdraw-account-modal-form input[type="text"] {
  padding: 0 clamp(16px, 4.1026cqw, 18px);
  outline: none;
}

.withdraw-account-modal-form input[type="text"]::placeholder {
  color: rgba(255, 255, 255, .62);
}

.withdraw-account-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border-color: transparent;
  background: transparent;
  text-align: left;
}

.withdraw-account-select span {
  color: rgba(255, 255, 255, .72);
}

.withdraw-account-select i {
  color: rgba(255, 255, 255, .62);
  font-style: normal;
}

.withdraw-account-default-row {
  display: flex !important;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.5641cqw, 12px);
  color: rgba(255, 255, 255, .9) !important;
}

.withdraw-account-default-row input {
  width: clamp(16px, 4.1026cqw, 18px);
  height: clamp(16px, 4.1026cqw, 18px);
  min-width: 16px;
  min-height: 16px;
  accent-color: var(--agent-theme-primary-strong);
}

.withdraw-account-create {
  width: 100%;
  min-height: clamp(42px, 10.7692cqw, 48px);
  margin-top: clamp(10px, 3.0769cqw, 14px);
  border: 0;
  border-radius: 2.5641cqw;
  color: rgba(255, 255, 255, .62);
  background: var(--lite-accent-deep, #328049);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.withdraw-account-create:not(:disabled) {
  color: var(--app-control-dark-text);
  background: var(--agent-theme-primary-strong);
}

.withdraw-account-create.is-loading {
  opacity: .68;
}

.withdraw-account-method-sheet[hidden] {
  display: none !important;
}

.withdraw-account-method-sheet {
  position: absolute;
  z-index: calc(var(--z-modal) + 30);
  inset: 0;
  display: grid;
  place-items: end center;
  color: var(--ui-text-primary);
}

.withdraw-account-method-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, .44);
}

.withdraw-account-method-card {
  position: relative;
  z-index: 1;
  width: min(92.3077cqw, 360px);
  margin-bottom: 2.5641cqw;
  overflow: hidden;
  border-radius: 3.0769cqw;
  background: #202432;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
}

.withdraw-account-method-card [role="radiogroup"] {
  display: grid;
}

.withdraw-account-method-card button {
  min-height: 12.3077cqw;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .88);
  background: transparent;
  font-size: var(--ui-font-size-md);
}

.withdraw-account-method-card button.is-selected {
  color: var(--agent-theme-primary-strong);
}

.withdraw-account-method-card footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.withdraw-account-method-card footer button:last-child {
  color: var(--agent-theme-primary-strong);
}

.withdraw-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.0513cqw;
  background: none;
}

.withdraw-limit-grid article {
  min-height: 15.3846cqw;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.2821cqw;
  border: 1px solid var(--app-withdraw-limit-border);
  border-radius: 2.5641cqw;
  background: var(--app-withdraw-limit-bg);
  opacity: 1;
}

.withdraw-limit-grid strong {
  color: var(--ui-text-primary);
  font-size: var(--app-fluid-lg);
}

.app-shell.route-withdraw .bottom-tabbar {
  display: none;
}

.app-shell.route-withdraw .app-main {
  padding-bottom: 0;
  background: var(--app-withdraw-main-bg);
}

.app-shell.route-subpage [data-route-page].route-slide-page .subpage-header {
  position: sticky;
  z-index: 8;
  top: 0;
  display: grid !important;
  opacity: 1 !important;
  pointer-events: auto;
  background: var(--app-subpage-header-bg);
}

.app-shell.route-subpage [data-route-page].route-slide-page .subpage-header button {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.app-shell.route-subpage [data-route-page].route-slide-page .subpage-header strong,
.app-shell.route-subpage [data-route-page].route-slide-page .subpage-header span {
  opacity: 1 !important;
}

.app-shell.route-subpage [data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .subpage-header,
.app-shell.route-subpage [data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .source-toolbar,
.app-shell.route-subpage [data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .activity-source-header,
.app-shell.route-subpage [data-route-page].route-slide-page.has-unified-slide-shell > [data-ui-block] .sports-source-header {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sub-route-page {
  min-height: 100%;
  padding-top: 0;
  background: var(--ui-surface-route);
}

.share-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ui-text-primary);
  background: var(--ui-surface-route);
}

.share-page::before,
.share-page::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  pointer-events: none;
}

.share-page::before {
  top: 0;
  height: 184px;
  background: url("../assets/generated/t16-share/share-top-source.png") top center / 390px 184px no-repeat;
}

.share-page::after {
  top: 566px;
  height: 278px;
  background: url("../assets/generated/t16-share/share-bottom-source.png") top center / 390px 278px no-repeat;
}

.share-header {
  height: 47px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  align-items: center;
  padding: 0 10px 0 4px;
}

.share-header,
.share-progress,
.share-invite,
.share-tab,
.share-report-list {
  opacity: 0;
}

.share-header button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
}

.share-header img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.share-header strong {
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-share-title-line-height);
  text-overflow: clip;
  white-space: nowrap;
}

.share-content {
  padding: 0 20px 20px;
}

.share-progress {
  padding: 30px 20px 0;
}

.share-money-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 94px;
  align-items: center;
  gap: 16px;
}

.share-money-row > img {
  width: 52px;
  height: 40px;
  object-fit: contain;
}

.share-money-row b {
  color: var(--ui-text-lime);
  font-size: var(--ui-font-size-auth-heading);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--app-share-money-line-height);
  white-space: nowrap;
}

.share-money-row button {
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 10px;
  color: var(--ui-text-lime);
  background: var(--app-share-action-gradient);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-heavy);
}

.share-money-row button img {
  width: 14px;
  height: 14px;
}

.share-progress > strong {
  display: block;
  margin-top: -1px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-control);
  text-align: right;
}

.share-progress i {
  position: relative;
  height: 10px;
  display: block;
  overflow: visible;
  border-radius: 999px;
  background: var(--ui-text-lime);
}

.share-progress i em {
  position: absolute;
  right: 0;
  top: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ui-surface-white);
}

.share-progress p {
  margin: 9px 0 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-control);
  text-align: center;
}

.share-progress p span {
  color: var(--ui-text-lime);
}

.share-wheel {
  position: relative;
  height: 380px;
  margin: 4px -20px 0;
}

.share-wheel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: 382px;
  z-index: 20;
  pointer-events: none;
  background: url("../assets/generated/t16-share/share-wheel-source.png") top center / 390px 382px no-repeat;
}

.share-wheel > img,
.share-wheel .share-prize,
.share-wheel .share-wheel-start {
  opacity: 0;
}

.share-wheel-aperture {
  position: absolute;
  left: -6px;
  top: 100px;
  width: 410px;
  opacity: .75;
}

.share-wheel-stage {
  position: absolute;
  left: 48px;
  top: 48px;
  width: 318px;
  height: 318px;
  object-fit: contain;
  z-index: 2;
}

.share-wheel-spin,
.share-wheel-light {
  position: absolute;
  left: 75px;
  top: 153px;
  width: 238px;
  height: 238px;
  object-fit: contain;
  z-index: 3;
}

.share-wheel-light {
  z-index: 5;
  pointer-events: none;
}

.share-wheel-pointer {
  position: absolute;
  left: 173px;
  top: 101px;
  width: 44px;
  height: 44px;
  z-index: 7;
}

.share-wheel-start {
  position: absolute;
  left: 166px;
  top: 225px;
  width: 57px;
  height: 77px;
  z-index: 8;
  border: 0;
  background: transparent;
}

.share-wheel-start img {
  width: 100%;
  height: 100%;
}

.share-wheel-start span {
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-auth-heading);
  font-weight: var(--ui-font-weight-black);
  line-height: 38px;
}

.share-prize {
  position: absolute;
  z-index: 6;
  color: #ffe74a;
  font-size: var(--ui-font-size-icon-md);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-none);
  text-shadow: 0 1px rgba(0, 0, 0, .25);
}

.share-prize.is-cash {
  left: 105px;
  top: 249px;
  color: #f0191d;
  transform: rotate(-88deg);
}

.share-prize.is-two {
  left: 260px;
  top: 206px;
  transform: rotate(62deg);
}

.share-prize.is-three {
  left: 268px;
  top: 274px;
  color: #fa292b;
  transform: rotate(88deg);
}

.share-prize.is-four {
  left: 240px;
  top: 330px;
  transform: rotate(148deg);
}

.share-prize.is-smile {
  left: 139px;
  top: 331px;
  color: #f9df43;
  font-size: var(--ui-font-size-2xl);
}

.share-prize.is-money-one,
.share-prize.is-money-two {
  width: 30px;
  height: 18px;
  border-radius: 3px;
  background: linear-gradient(135deg, var(--lite-accent-bright, #69d16c), var(--lite-accent-bright, #d6f8a0));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25);
}

.share-prize.is-money-one {
  left: 195px;
  top: 181px;
}

.share-prize.is-money-two {
  left: 205px;
  top: 331px;
  transform: rotate(-12deg);
}

.share-prize.is-pix {
  left: 247px;
  top: 170px;
  width: 58px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #c89b38;
  color: #8a110b;
  background: #fff7ce;
  font-size: var(--ui-font-size-sm);
  line-height: 13px;
  transform: rotate(3deg);
}

.share-prize.is-pix small {
  color: #8a110b;
  font-size: 7px;
  line-height: 8px;
}

.share-invite,
.share-tab {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  color: var(--ui-text-primary);
  background: var(--app-share-control-bg);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-record);
}

.share-invite {
  justify-content: flex-end;
  gap: 85px;
  padding: 0 12px;
}

.share-invite b {
  font-size: var(--ui-font-size-icon-md);
  font-weight: var(--ui-font-weight-regular);
  transform: rotate(-25deg);
}

.share-tab {
  margin-top: 20px;
}

.share-report-list {
  height: 168px;
  overflow: hidden;
  margin: 14px -1px 0;
  color: var(--app-share-report-muted);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-readable);
}

.share-report-list p {
  display: grid;
  grid-template-columns: 114px minmax(0, 1fr) 100px;
  align-items: center;
  margin: 0;
}

.share-report-list span,
.share-report-list em {
  font-style: normal;
}

.share-report-list b {
  color: var(--ui-text-lime);
  font-weight: var(--ui-font-weight-regular);
  text-align: right;
}

.share-report-list i {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  border-radius: 50%;
  color: var(--ui-text-primary);
  background: var(--ui-text-lime);
  font-size: var(--ui-font-size-2xs);
  font-style: normal;
  font-weight: var(--ui-font-weight-black);
}

.sub-route-page .subpage-header {
  margin: 0 -1.0256cqw 3.0769cqw;
}

.app-shell.route-activity-redeem,
.app-shell.route-activity-checkin,
.app-shell.route-activity-signin,
.app-shell.route-activity-mining,
.app-shell.route-activity-assistance,
.app-shell.route-activity-assistance-cash,
.app-shell.route-activity-convite,
.app-shell.route-activity-agency,
.app-shell.route-activity-agency-details,
.app-shell.route-activity-member-reward,
.app-shell.route-activity-recharge,
.app-shell.route-activity-redpacket,
.app-shell.route-activity-weekcard,
.app-shell.route-activity-newuser,
.app-shell.route-activity-cashback,
.app-shell.route-activity-bankrupt,
.app-shell.route-activity-blindbox,
.app-shell.route-activity-history-claim,
.app-shell.route-activity-history-unclaimed {
  --app-tabbar-height: 0px;
  background: var(--ui-surface-card-soft);
}

.app-shell.route-activity-redeem .app-main,
.app-shell.route-activity-checkin .app-main,
.app-shell.route-activity-signin .app-main,
.app-shell.route-activity-mining .app-main,
.app-shell.route-activity-assistance .app-main,
.app-shell.route-activity-assistance-cash .app-main,
.app-shell.route-activity-convite .app-main,
.app-shell.route-activity-agency .app-main,
.app-shell.route-activity-agency-details .app-main,
.app-shell.route-activity-member-reward .app-main,
.app-shell.route-activity-recharge .app-main,
.app-shell.route-activity-redpacket .app-main,
.app-shell.route-activity-weekcard .app-main,
.app-shell.route-activity-newuser .app-main,
.app-shell.route-activity-cashback .app-main,
.app-shell.route-activity-bankrupt .app-main,
.app-shell.route-activity-blindbox .app-main,
.app-shell.route-activity-history-claim .app-main,
.app-shell.route-activity-history-unclaimed .app-main,
.app-shell.route-subpage.route-activity-redeem .app-main,
.app-shell.route-subpage.route-activity-checkin .app-main,
.app-shell.route-subpage.route-activity-signin .app-main,
.app-shell.route-subpage.route-activity-mining .app-main,
.app-shell.route-subpage.route-activity-assistance .app-main,
.app-shell.route-subpage.route-activity-assistance-cash .app-main,
.app-shell.route-subpage.route-activity-convite .app-main,
.app-shell.route-subpage.route-activity-agency .app-main,
.app-shell.route-subpage.route-activity-agency-details .app-main,
.app-shell.route-subpage.route-activity-member-reward .app-main,
.app-shell.route-subpage.route-activity-recharge .app-main,
.app-shell.route-subpage.route-activity-redpacket .app-main,
.app-shell.route-subpage.route-activity-weekcard .app-main,
.app-shell.route-subpage.route-activity-newuser .app-main,
.app-shell.route-subpage.route-activity-cashback .app-main,
.app-shell.route-subpage.route-activity-bankrupt .app-main,
.app-shell.route-subpage.route-activity-blindbox .app-main,
.app-shell.route-subpage.route-activity-history-claim .app-main,
.app-shell.route-subpage.route-activity-history-unclaimed .app-main {
  inset: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-surface-card-soft);
}

.app-shell.route-activity-redeem .bottom-tabbar,
.app-shell.route-activity-redeem .l5-header,
.app-shell.route-activity-redeem .pwa-l5-bar,
.app-shell.route-activity-redeem [data-floating-activity],
.app-shell.route-activity-redeem .l5-support,
.app-shell.route-activity-redeem .l5-side-handle,
.app-shell.route-activity-checkin .bottom-tabbar,
.app-shell.route-activity-checkin .l5-header,
.app-shell.route-activity-checkin .pwa-l5-bar,
.app-shell.route-activity-checkin [data-floating-activity],
.app-shell.route-activity-checkin .l5-support,
.app-shell.route-activity-checkin .l5-side-handle,
.app-shell.route-activity-signin .bottom-tabbar,
.app-shell.route-activity-signin .l5-header,
.app-shell.route-activity-signin .pwa-l5-bar,
.app-shell.route-activity-signin [data-floating-activity],
.app-shell.route-activity-signin .l5-support,
.app-shell.route-activity-signin .l5-side-handle,
.app-shell.route-activity-mining .bottom-tabbar,
.app-shell.route-activity-mining .l5-header,
.app-shell.route-activity-mining .pwa-l5-bar,
.app-shell.route-activity-mining [data-floating-activity],
.app-shell.route-activity-mining .l5-support,
.app-shell.route-activity-mining .l5-side-handle,
.app-shell.route-activity-assistance .bottom-tabbar,
.app-shell.route-activity-assistance .l5-header,
.app-shell.route-activity-assistance .pwa-l5-bar,
.app-shell.route-activity-assistance [data-floating-activity],
.app-shell.route-activity-assistance .l5-support,
.app-shell.route-activity-assistance .l5-side-handle,
.app-shell.route-activity-assistance-cash .bottom-tabbar,
.app-shell.route-activity-assistance-cash .l5-header,
.app-shell.route-activity-assistance-cash .pwa-l5-bar,
.app-shell.route-activity-assistance-cash [data-floating-activity],
.app-shell.route-activity-assistance-cash .l5-support,
.app-shell.route-activity-assistance-cash .l5-side-handle,
.app-shell.route-activity-convite .bottom-tabbar,
.app-shell.route-activity-convite .l5-header,
.app-shell.route-activity-convite .pwa-l5-bar,
.app-shell.route-activity-convite [data-floating-activity],
.app-shell.route-activity-convite .l5-support,
.app-shell.route-activity-convite .l5-side-handle,
.app-shell.route-activity-agency .bottom-tabbar,
.app-shell.route-activity-agency .l5-header,
.app-shell.route-activity-agency .pwa-l5-bar,
.app-shell.route-activity-agency [data-floating-activity],
.app-shell.route-activity-agency .l5-support,
.app-shell.route-activity-agency .l5-side-handle,
.app-shell.route-activity-agency-details .bottom-tabbar,
.app-shell.route-activity-agency-details .l5-header,
.app-shell.route-activity-agency-details .pwa-l5-bar,
.app-shell.route-activity-agency-details [data-floating-activity],
.app-shell.route-activity-agency-details .l5-support,
.app-shell.route-activity-agency-details .l5-side-handle,
.app-shell.route-activity-member-reward .bottom-tabbar,
.app-shell.route-activity-member-reward .l5-header,
.app-shell.route-activity-member-reward .pwa-l5-bar,
.app-shell.route-activity-member-reward [data-floating-activity],
.app-shell.route-activity-member-reward .l5-support,
.app-shell.route-activity-member-reward .l5-side-handle,
.app-shell.route-activity-recharge .bottom-tabbar,
.app-shell.route-activity-recharge .l5-header,
.app-shell.route-activity-recharge .pwa-l5-bar,
.app-shell.route-activity-recharge [data-floating-activity],
.app-shell.route-activity-recharge .l5-support,
.app-shell.route-activity-recharge .l5-side-handle,
.app-shell.route-activity-redpacket .bottom-tabbar,
.app-shell.route-activity-redpacket .l5-header,
.app-shell.route-activity-redpacket .pwa-l5-bar,
.app-shell.route-activity-redpacket [data-floating-activity],
.app-shell.route-activity-redpacket .l5-support,
.app-shell.route-activity-redpacket .l5-side-handle,
.app-shell.route-activity-weekcard .bottom-tabbar,
.app-shell.route-activity-weekcard .l5-header,
.app-shell.route-activity-weekcard .pwa-l5-bar,
.app-shell.route-activity-weekcard [data-floating-activity],
.app-shell.route-activity-weekcard .l5-support,
.app-shell.route-activity-weekcard .l5-side-handle,
.app-shell.route-activity-newuser .bottom-tabbar,
.app-shell.route-activity-newuser .l5-header,
.app-shell.route-activity-newuser .pwa-l5-bar,
.app-shell.route-activity-newuser [data-floating-activity],
.app-shell.route-activity-newuser .l5-support,
.app-shell.route-activity-newuser .l5-side-handle,
.app-shell.route-activity-cashback .bottom-tabbar,
.app-shell.route-activity-cashback .l5-header,
.app-shell.route-activity-cashback .pwa-l5-bar,
.app-shell.route-activity-cashback [data-floating-activity],
.app-shell.route-activity-cashback .l5-support,
.app-shell.route-activity-cashback .l5-side-handle,
.app-shell.route-activity-bankrupt .bottom-tabbar,
.app-shell.route-activity-bankrupt .l5-header,
.app-shell.route-activity-bankrupt .pwa-l5-bar,
.app-shell.route-activity-bankrupt [data-floating-activity],
.app-shell.route-activity-bankrupt .l5-support,
.app-shell.route-activity-bankrupt .l5-side-handle,
.app-shell.route-activity-blindbox .bottom-tabbar,
.app-shell.route-activity-blindbox .l5-header,
.app-shell.route-activity-blindbox .pwa-l5-bar,
.app-shell.route-activity-blindbox [data-floating-activity],
.app-shell.route-activity-blindbox .l5-support,
.app-shell.route-activity-blindbox .l5-side-handle,
.app-shell.route-activity-history-claim .bottom-tabbar,
.app-shell.route-activity-history-claim .l5-header,
.app-shell.route-activity-history-claim .pwa-l5-bar,
.app-shell.route-activity-history-claim [data-floating-activity],
.app-shell.route-activity-history-claim .l5-support,
.app-shell.route-activity-history-claim .l5-side-handle,
.app-shell.route-activity-history-unclaimed .bottom-tabbar,
.app-shell.route-activity-history-unclaimed .l5-header,
.app-shell.route-activity-history-unclaimed .pwa-l5-bar,
.app-shell.route-activity-history-unclaimed [data-floating-activity],
.app-shell.route-activity-history-unclaimed .l5-support,
.app-shell.route-activity-history-unclaimed .l5-side-handle {
  display: none !important;
}

.activity-standalone-page,
[data-route-page].route-slide-page:has(.activity-standalone-page) {
  min-height: 100%;
  background: var(--ui-surface-card-soft);
  color: var(--ui-text-primary);
}

.activity-source-header,
.app-shell.route-subpage [data-route-page].route-slide-page .activity-source-header {
  height: 50px;
  min-height: 50px;
  margin: 0;
  padding: 0;
  background: #1d2331;
}

.activity-source-header button {
  display: grid;
  place-items: center;
}

.activity-source-header img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.activity-source-header strong {
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-regular);
  letter-spacing: 0;
}

.activity-source-header-title-only {
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  border-bottom: 1px solid var(--ui-border-subtle);
}

.activity-signin-page {
  background: var(--ui-surface-control-soft);
}

.activity-signin-content {
  min-height: calc(100vh - 50px);
  display: grid;
  align-items: center;
  padding: 0 22px 16px;
}

.activity-signin-content p {
  max-width: 345px;
  margin: 0 auto;
  color: #7f8494;
  font-size: var(--ui-font-size-lg-plus);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-readable);
  text-align: center;
}

.activity-checkin-page {
  min-height: 100%;
  overflow: hidden;
  background: #0e1421;
  color: var(--ui-text-primary);
}

.activity-checkin-content {
  position: relative;
  min-height: 100%;
  padding-bottom: 32px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% -8%, rgba(var(--lite-accent-rgb, 33, 98, 67), .26), transparent 44%),
    linear-gradient(180deg, #151c28 0%, #101725 47%, #0c1220 100%);
  -webkit-overflow-scrolling: touch;
}

.activity-checkin-hero {
  position: relative;
  width: 100%;
  min-height: 286px;
  overflow: hidden;
  background: #111a25;
}

.activity-checkin-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 78px;
  background: linear-gradient(180deg, rgba(17, 24, 34, 0) 0%, #151c28 63%, #151c28 100%);
  pointer-events: none;
}

.activity-checkin-hero img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 286px;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.04) contrast(1.02);
}

.activity-checkin-progress {
  position: relative;
  z-index: 1;
  margin: -6px 12px 0;
  padding: 15px 18px 8px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, #111827 0%, #0b111e 100%);
  box-shadow:
    0 -10px 28px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.activity-checkin-progress .checkin-redeem {
  grid-template-columns: minmax(0, 1fr) auto 48px;
  gap: 9px;
  color: #d9e0ec;
  font-size: 13px;
  line-height: 1.25;
}

.activity-checkin-progress .checkin-coin,
.activity-checkin-progress .checkin-redeem button {
  height: 34px;
}

.activity-checkin-progress .checkin-coin {
  min-width: 56px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .05);
  background: rgba(255, 255, 255, .045);
}

.activity-checkin-progress .checkin-redeem button {
  border: 0;
  color: #08160f;
  background: linear-gradient(180deg, var(--lite-accent-bright, #65e885) 0%, var(--lite-accent, #16c76b) 100%);
  box-shadow: 0 8px 18px rgba(var(--lite-accent-rgb, 22, 199, 107), .18);
}

.activity-checkin-progress-track {
  position: relative;
  display: block;
  height: 5px;
  margin: 19px 0 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
}

.activity-checkin-progress-track em {
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #f7b54b;
  box-shadow: 0 0 10px rgba(247, 181, 75, .36);
  transform: translateY(-50%);
}

.activity-checkin-milestones {
  gap: 0;
  margin-top: 0;
}

.activity-checkin-milestones span {
  height: 47px;
  border: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  background: transparent;
  color: #bec5d2;
  font-size: 13px;
  font-weight: var(--ui-font-weight-heavy);
}

.activity-checkin-milestones span::before {
  content: "";
  width: 22px;
  height: 22px;
  background: url("/7000/assets/shared/svg/c77/icon-coin2.png") center / contain no-repeat;
  opacity: .78;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .2));
}

.activity-checkin-daily {
  margin: 0 12px 16px;
  padding: 0 18px 18px;
  border: 1px solid rgba(255, 255, 255, .045);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #0b1120 0%, #080d1a 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}

.activity-checkin-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 49px;
  color: #ffffff;
  font-size: 17px;
  font-weight: var(--ui-font-weight-heavy);
}

.activity-checkin-title i {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24));
}

.activity-checkin-title i:last-child {
  background: linear-gradient(90deg, rgba(255, 255, 255, .24), transparent);
}

.activity-checkin-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  max-height: none;
  padding: 0;
  overflow: visible;
}

.activity-checkin-days button {
  min-width: 0;
  height: 114px;
  gap: 8px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, .075);
  background: linear-gradient(180deg, #171e2e 0%, #111827 100%);
  overflow: visible;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 8px 18px rgba(0, 0, 0, .14);
}

.activity-checkin-days button.is-today {
  border-color: #f2b04e;
  background:
    linear-gradient(180deg, rgba(243, 178, 78, .16) 0%, rgba(243, 178, 78, .035) 44%),
    linear-gradient(180deg, #1b2232 0%, #111827 100%);
  box-shadow:
    0 0 0 1px rgba(242, 176, 78, .26),
    0 10px 22px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

.activity-checkin-days button.is-hot {
  border-color: #fba531;
  background: linear-gradient(135deg, #44372d 0%, #5b452e 100%);
  box-shadow: 0 0 16px rgba(251, 165, 49, .5);
  animation: activity-checkin-hot-pulse 2s ease-in-out infinite;
}

.activity-checkin-days button.is-hot::after {
  display: none;
}

@keyframes activity-checkin-hot-pulse {
  0%,
  100% {
    box-shadow: 0 0 16px rgba(251, 165, 49, .5);
  }

  50% {
    box-shadow: 0 0 24px rgba(251, 165, 49, .68);
  }
}

.activity-checkin-day-label {
  display: block;
  color: #f4f6fb;
  font-size: 13px;
  font-weight: var(--ui-font-weight-heavy);
  line-height: 1;
}

.activity-checkin-chest-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 56px;
}

.activity-checkin-chest-count {
  position: absolute;
  right: -13px;
  bottom: -9px;
  min-width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(180deg, var(--lite-accent-bright, #32d873) 0%, var(--lite-accent-deep, #168d4a) 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
  font-size: 18px;
  font-style: normal;
  font-weight: var(--ui-font-weight-black);
  line-height: 1;
}

.activity-checkin-days .activity-checkin-chest-count {
  right: -13px;
  bottom: -9px;
  display: grid;
  color: #ffffff;
  font-size: 18px;
  font-style: normal;
}

.activity-checkin-highlight-badge {
  position: absolute;
  top: -12px;
  right: -9px;
  z-index: 2;
  font-size: 23px;
  line-height: 1;
  filter: drop-shadow(0 4px 8px rgba(255, 106, 38, .42));
  animation: activity-checkin-badge-bounce 1s ease-in-out infinite;
}

@keyframes activity-checkin-badge-bounce {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.16);
  }
}

.activity-checkin-checked-mark {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #ffffff;
  background: var(--lite-accent, #2dd36f);
  font-size: 12px;
  font-weight: var(--ui-font-weight-black);
}

.activity-checkin-days b {
  margin: 0;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
}

.activity-checkin-days img {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
}

.activity-checkin-days em {
  right: 8px;
  bottom: 8px;
  font-size: 12px;
}

.activity-checkin-actions {
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 10px;
  margin: 0 18px 14px;
}

.activity-checkin-actions .checkin-main,
.activity-checkin-actions .checkin-history {
  height: 50px;
  border-radius: 10px;
}

.activity-checkin-actions .checkin-main {
  border: 0;
  color: #06150d;
  background: linear-gradient(180deg, var(--lite-accent-bright, #65ea83) 0%, var(--lite-accent, #14c969) 100%);
  box-shadow: 0 12px 22px rgba(var(--lite-accent-rgb, 20, 201, 105), .22);
}

.activity-checkin-actions .checkin-history {
  position: relative;
  border-color: rgba(255, 255, 255, .08) !important;
  background: linear-gradient(180deg, #171e2c 0%, #101724 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  color: #e7c07a;
  font-size: 0;
}

.activity-checkin-actions .checkin-history::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 24px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f4d99f 0%, #c89551 100%);
  box-shadow:
    inset 0 0 0 2px rgba(117, 77, 38, .22),
    0 5px 10px rgba(0, 0, 0, .22);
  transform: translate(-50%, -50%);
}

.activity-checkin-actions .checkin-history::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: rgba(88, 58, 31, .64);
  box-shadow:
    0 5px 0 rgba(88, 58, 31, .56),
    0 10px 0 rgba(88, 58, 31, .48);
  transform: translateX(-50%);
}

.activity-checkin-task-tabs {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 12px 18px 12px;
  padding: 0;
  overflow: hidden;
  border-radius: 9px;
  background: transparent;
}

.activity-checkin-task-tabs button {
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .06);
  font-size: 16px;
  font-weight: var(--ui-font-weight-medium);
  line-height: 1.15;
}

.activity-checkin-task-tabs button:first-child {
  border-radius: 9px 0 0 9px;
}

.activity-checkin-task-tabs button:last-child {
  border-radius: 0 9px 9px 0;
}

.activity-checkin-task-tabs button.is-active {
  color: #ffffff;
  background: linear-gradient(90deg, var(--lite-accent, #00d563) 0%, var(--lite-accent-bright, #00f076) 100%);
}

.activity-checkin-task-tabs small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  color: inherit;
  font-size: 13px;
  line-height: 1.2;
}

.activity-checkin-task-tabs small::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url("/7000/assets/shared/svg/c77/icon-time.png") center / contain no-repeat;
  opacity: .95;
}

.activity-checkin-tasks {
  gap: 14px;
  margin: 0 18px;
}

.activity-checkin-tasks article {
  min-height: 109px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 20px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
}

.activity-checkin-task-info {
  min-width: 0;
  flex: 1;
}

.activity-checkin-task-description {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.4;
  font-weight: var(--ui-font-weight-regular);
}

.activity-checkin-task-description b {
  color: #fba531;
  font-weight: var(--ui-font-weight-heavy);
}

.activity-checkin-task-rewards {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: var(--ui-font-weight-heavy);
}

.activity-checkin-task-rewards span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.activity-checkin-task-rewards img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.activity-checkin-tasks article > button {
  min-width: 82px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(180deg, var(--lite-accent-bright, #00f076) 0%, var(--lite-accent, #00d563) 100%);
  box-shadow: 0 6px 10px rgba(0, 0, 0, .18);
  font-size: 15px;
  font-weight: var(--ui-font-weight-heavy);
}

.activity-checkin-tasks .task-icon {
  display: none;
}

.activity-checkin-tasks .checkin-task-track {
  display: none;
}

@media (max-width: 380px) {
  .activity-checkin-progress {
    padding-inline: 14px;
  }

  .activity-checkin-daily {
    padding: 0 14px 16px;
  }

  .activity-checkin-days {
    gap: 10px;
  }

  .activity-checkin-days button {
    height: 96px;
  }

  .activity-checkin-days img {
    width: 44px;
    height: 44px;
  }

  .activity-checkin-task-tabs button {
    height: 76px;
    font-size: 16px;
  }

  .activity-checkin-tasks article {
    min-height: 96px;
    padding: 15px 14px;
  }

  .activity-checkin-task-description,
  .activity-checkin-task-rewards,
  .activity-checkin-tasks article > button {
    font-size: 15px;
  }

  .activity-checkin-task-rewards img {
    width: 24px;
    height: 24px;
  }
}

.activity-mining-page {
  background: var(--ui-surface-control-soft);
}

.activity-mining-content {
  min-height: calc(100vh - 50px);
  padding: 12px 15px 40px;
  background: var(--ui-surface-control-soft);
  color: var(--ui-text-primary);
}

.activity-mining-hero {
  width: 358px;
  max-width: 100%;
  height: 149px;
  display: block;
  margin: 0 auto 31px;
  border-radius: 8px;
  object-fit: cover;
}

.activity-mining-info {
  position: relative;
  min-height: 132px;
  margin: 0;
}

.activity-mining-info p {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-record);
}

.activity-mining-info-earnings {
  min-height: 157px;
}

.activity-mining-info-earnings strong {
  display: block;
  margin-top: 65px;
  color: #ffb21a;
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-readable);
  text-align: center;
}

.activity-mining-closed {
  height: 36px;
  display: flex;
  align-items: center;
  margin-top: 6px;
  padding: 0 13px;
  border-radius: 18px;
  color: var(--lite-accent, #03e277);
  background: var(--ui-surface-card-deep);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-bold);
}

.activity-rescue-page {
  background: var(--ui-surface-card-soft);
}

.activity-rescue-content {
  min-height: calc(100vh - 50px);
  padding: 13px 15px 92px;
  background: var(--ui-surface-card-soft);
  color: var(--ui-text-primary);
}

.activity-rescue-hero,
.activity-rescue-card,
.activity-rescue-recover {
  border-radius: 8px;
  background: #151925;
}

.activity-rescue-hero,
.activity-rescue-recover {
  background:
    linear-gradient(180deg, rgba(138, 26, 40, .34), rgba(25, 20, 31, .55)),
    #151925;
  border: 1px solid rgba(160, 58, 64, .1);
}

.activity-rescue-hero {
  height: 151px;
  padding: 9px 16px 15px;
}

.activity-rescue-hero small,
.activity-rescue-hero span,
.activity-rescue-card span,
.activity-rescue-card small,
.activity-rescue-card p,
.activity-rescue-recover span,
.activity-rescue-recover small {
  color: var(--lite-accent, #00e67a);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-compact);
}

.activity-rescue-hero h1 {
  margin: 2px 0 17px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-heavy);
  line-height: var(--ui-line-height-record);
}

.activity-rescue-hero strong,
.activity-rescue-recover strong {
  display: block;
  margin-top: 2px;
  color: var(--lite-accent, #00d36b);
  font-size: 32px;
  font-weight: var(--ui-font-weight-black);
  line-height: 36px;
}

.activity-rescue-card {
  margin-top: 12px;
  padding: 14px;
}

.activity-rescue-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-height: 154px;
}

.activity-rescue-metrics article,
.activity-rescue-plan-grid article {
  min-height: 101px;
  padding: 9px 11px 8px;
  border-radius: 7px;
  background: #1e2331;
}

.activity-rescue-metrics strong,
.activity-rescue-plan-grid strong,
.activity-rescue-plan footer strong,
.activity-rescue-conditions strong {
  display: block;
  margin-top: 4px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-record);
}

.activity-rescue-metrics button {
  min-height: 28px;
  margin-top: 7px;
  padding: 0;
  border: 0;
  color: #ffb11b;
  background: transparent;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-black);
}

.activity-rescue-metrics > p {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 0;
}

.activity-rescue-metrics i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lite-accent, #00d96d);
}

.activity-rescue-recover {
  height: 104px;
  display: grid;
  place-items: center;
  align-content: center;
  margin-top: 8px;
  text-align: center;
}

.activity-rescue-recover strong {
  margin: 4px 0 0;
}

.activity-rescue-plan {
  min-height: 286px;
  padding: 14px;
}

.activity-rescue-plan header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.activity-rescue-plan h2,
.activity-rescue-conditions h2 {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-record);
}

.activity-rescue-plan header p {
  margin: 6px 0 0;
}

.activity-rescue-plan header b {
  max-width: 118px;
  padding: 5px 10px;
  border: 1px solid rgba(170, 47, 56, .62);
  border-radius: 999px;
  color: var(--lite-accent, #00d96d);
  background: rgba(136, 31, 47, .22);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
  text-align: right;
}

.activity-rescue-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.activity-rescue-plan-grid article {
  min-height: 68px;
}

.activity-rescue-plan-grid strong {
  font-size: var(--ui-font-size-balance);
}

.activity-rescue-plan footer {
  margin-top: 10px;
}

.activity-rescue-conditions {
  min-height: 170px;
  padding: 19px 14px;
}

.activity-rescue-conditions h2 {
  margin-bottom: 16px;
}

.activity-rescue-conditions p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 8px 0;
}

.activity-rescue-conditions strong {
  margin: 0;
  font-size: var(--ui-font-size-sm);
}

.activity-rescue-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  height: 243px;
  padding: 21px 16px 0;
  background: var(--ui-surface-card-soft);
  color: var(--ui-text-primary);
  box-shadow:
    0 -20px 30px rgba(0, 0, 0, .2),
    0 -520px 0 520px rgba(0, 0, 0, .24);
}

.activity-rescue-sheet > span {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  transform: translateX(-50%);
}

.activity-rescue-sheet h2 {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-record);
}

.activity-rescue-sheet p {
  margin: 77px 0 0;
  color: var(--lite-accent, #00e67a);
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-title);
  text-align: center;
}

.activity-piece-page {
  background: var(--ui-surface-route);
}

.activity-piece-page .activity-source-header strong {
  max-width: 300px;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  justify-self: start;
  font-size: var(--ui-font-size-xl);
}

.activity-piece-content {
  min-height: calc(100vh - 50px);
  padding: 21px 20px 40px;
  overflow: hidden;
  background: var(--ui-surface-route);
  color: var(--ui-text-primary);
}

.activity-piece-money-row {
  height: 44px;
  display: grid;
  grid-template-columns: 78px 1fr 107px;
  align-items: center;
  gap: 10px;
}

.activity-piece-money-row > img {
  width: 56px;
  height: 40px;
  object-fit: contain;
  transform: translate(14px, 2px);
}

.activity-piece-money-row strong {
  color: var(--lite-accent-bright, #6be236);
  font-size: var(--ui-font-size-auth-heading);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-display-lg);
  letter-spacing: 0;
}

.activity-piece-money-row button {
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 10px;
  color: var(--ui-text-primary);
  background: linear-gradient(90deg, var(--lite-accent, #4ba51a), var(--lite-accent-deep, #2d8c31));
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-black);
}

.activity-piece-money-row button img {
  width: 16px;
  height: 16px;
}

.activity-piece-percent {
  margin-top: 3px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-form);
  text-align: right;
}

.activity-piece-track {
  height: 10px;
  margin-top: 3px;
  border-radius: 999px;
  background: var(--lite-accent-bright, #6cdf39);
}

.activity-piece-track span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ui-surface-white);
}

.activity-piece-progress p {
  margin: 10px 0 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-record);
  text-align: center;
}

.activity-piece-progress b {
  color: var(--lite-accent-bright, #6cdf39);
}

.activity-piece-wheel {
  position: relative;
  width: 390px;
  height: 407px;
  margin: 15px 0 0 -20px;
  background: url("../assets/generated/activity-assistance-cash-wheel-source.png") left top / 390px 407px no-repeat;
}

.activity-piece-wheel > * {
  opacity: 0;
}

.activity-piece-bg {
  position: absolute;
  right: -29px;
  top: 4px;
  width: 337px;
  height: 333px;
  object-fit: contain;
}

.activity-piece-spin {
  position: absolute;
  left: 2px;
  top: 139px;
  width: 198px;
  height: 198px;
  object-fit: contain;
}

.activity-piece-light {
  position: absolute;
  left: 67px;
  top: 183px;
  z-index: 2;
  width: 239px;
  height: 239px;
  object-fit: contain;
  opacity: .88;
}

.activity-piece-start {
  position: absolute;
  left: 166px;
  top: 238px;
  z-index: 4;
  width: 61px;
  height: 61px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ui-text-primary);
  background: radial-gradient(circle at 50% 44%, #e6192a 0 56%, #b0001b 57% 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 220, 56, .95);
  font-size: var(--ui-font-size-auth-title);
  font-weight: var(--ui-font-weight-black);
}

.activity-piece-prize {
  position: absolute;
  z-index: 3;
  color: #f6d84a;
  font-size: 27px;
  font-weight: var(--ui-font-weight-black);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.activity-piece-prize.p1 {
  left: 19px;
  top: 210px;
  color: var(--lite-accent-bright, #11e66d);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.activity-piece-prize.p2 {
  left: 125px;
  top: 210px;
  color: #ffd54a;
  transform: rotate(39deg);
}

.activity-piece-prize.p3 {
  left: 127px;
  top: 289px;
  color: #ffd54a;
  transform: rotate(-38deg);
}

.activity-piece-prize.p4 {
  left: 49px;
  top: 300px;
  color: #ffdb31;
  font-size: var(--ui-font-size-icon-md);
}

.activity-piece-prize.p5 {
  left: 56px;
  top: 243px;
}

.activity-piece-prize.p5 img {
  width: 31px;
  height: 22px;
}

.activity-piece-tabs {
  height: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
  border-radius: 4px;
  background: #111622;
}

.activity-piece-tabs button {
  border: 0;
  color: #7c8192;
  background: transparent;
  font-size: var(--ui-font-size-md);
}

.activity-piece-records {
  margin-top: 24px;
}

.activity-piece-records article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--lite-accent-bright, #00f06d);
  font-size: var(--ui-font-size-sm);
}

.activity-piece-records strong {
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
}

.activity-piece-records i {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  margin-left: 6px;
  border-radius: 50%;
  color: var(--ui-text-primary);
  background: var(--lite-accent-bright, #5fd74a);
  font-size: var(--ui-font-size-micro);
  font-style: normal;
  font-weight: var(--ui-font-weight-black);
}

.activity-agency-page {
  background: var(--ui-surface-route);
}

.activity-convite-page {
  min-height: 100%;
  overflow-y: auto;
  background: var(--app-drawer-bg, hsl(220, 26%, 14%));
  color: var(--color-text-white-100, #fff);
}

.activity-convite-top {
  background: var(--app-drawer-bg, hsl(220, 26%, 14%));
}

.activity-convite-top img {
  width: 100%;
  min-height: 7.5rem;
  display: block;
  object-fit: cover;
}

.activity-convite-content {
  display: grid;
  gap: 0.5rem;
  padding: 0.375rem 0.375rem 1.5rem;
  background: var(--app-drawer-bg, hsl(220, 26%, 14%));
}

.convite-share-box,
.convite-tournament-button,
.convite-reward-section,
.convite-condition-section,
.convite-description-section {
  border-radius: 0.5rem;
  background: var(--app-card-bg, hsl(190, 6%, 21%));
}

.convite-share-box {
  display: grid;
  gap: 0.875rem;
  padding: 0.875rem;
}

.convite-link-input {
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: var(--app-panel-bg-dark, #2a2a2a);
}

.convite-link-input span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--app-gold-color, #ffd700);
  font-size: 0.75rem;
  line-height: 1.4;
}

.convite-link-input button {
  min-width: 4.25rem;
  min-height: 2rem;
  border: 0;
  border-radius: 0.375rem;
  color: var(--app-modal-btn-text, #fff);
  background: var(--app-gradient-orange, linear-gradient(90deg, #9d4edd 0%, #ff6b35 100%));
  font-size: 0.75rem;
  font-weight: var(--ui-font-weight-semibold);
}

.convite-share-section h2,
.convite-description-section h2 {
  margin: 0 0 0.75rem;
  color: var(--color-text-white-100, #fff);
  font-size: 0.8125rem;
  font-weight: var(--ui-font-weight-semibold);
}

.convite-share-icons {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.convite-share-icons button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  border: 0;
  padding: 0;
  background: transparent;
}

.convite-share-icons img {
  width: min(10.6vw, 2.5rem);
  height: min(10.6vw, 2.5rem);
  object-fit: contain;
}

.convite-share-icons span {
  max-width: 100%;
  overflow: hidden;
  color: var(--app-action-orange, #ff6b35);
  font-size: 0.625rem;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convite-tournament-button {
  min-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  padding: 0 1rem;
  color: var(--color-text-white-100, #fff);
  text-align: left;
}

.convite-tournament-button span,
.convite-tournament-button b {
  font-size: 0.8125rem;
  font-weight: var(--ui-font-weight-regular);
}

.convite-tournament-button b {
  color: var(--app-gold-color, #ffd700);
}

.convite-reward-section {
  overflow: hidden;
}

.convite-reward-section header {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background: rgba(0, 0, 0, 0.16);
}

.convite-reward-section strong {
  color: var(--app-gold-color, #ffd700);
  font-size: 0.875rem;
}

.convite-reward-section header span {
  color: var(--color-text-gray-300, #b0b0b0);
  font-size: 0.75rem;
}

.convite-reward-box {
  max-height: 30rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem 0.25rem;
  overflow-y: auto;
  padding: 0.625rem 0.5rem 0.875rem;
  scrollbar-width: none;
}

.convite-reward-box::-webkit-scrollbar {
  display: none;
}

.convite-reward-box button {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.375rem;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
}

.convite-reward-box img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
}

.convite-reward-arrow {
  position: absolute;
  right: -1.48rem;
  top: 1.46rem;
  z-index: 1;
  width: 2.55rem;
  height: 0.8rem;
  overflow: visible;
  filter: drop-shadow(0 0.12rem 0.16rem rgba(0, 0, 0, .45));
  pointer-events: none;
}

.convite-reward-arrow-glow,
.convite-reward-arrow-line,
.convite-reward-arrow-head {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.convite-reward-arrow-glow {
  stroke: rgba(var(--lite-accent-rgb, 2, 238, 128), .34);
  stroke-width: 7;
  filter: blur(1px);
}

.convite-reward-arrow-line,
.convite-reward-arrow-head {
  stroke: var(--lite-accent-bright, #10f17d);
  stroke-width: 4;
}

.convite-reward-arrow-head {
  stroke-width: 4.5;
}

.convite-reward-box span {
  width: 3.75rem;
  color: var(--color-text-gray-300, #b0b0b0);
  font-size: 0.6rem;
  line-height: 1.25;
  text-align: center;
}

.convite-reward-box b,
.convite-condition-section b {
  color: var(--app-action-orange, #ff6b35);
  font-weight: var(--ui-font-weight-semibold);
}

.convite-reward-box button.is-claimable img {
  animation: conviteChestPulse 1.2s infinite;
}

.convite-reward-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.8rem 0.75rem;
  color: var(--color-text-gray-300, #b0b0b0);
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: center;
}

@keyframes conviteChestPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.08) rotate(-4deg); }
  65% { transform: scale(1.08) rotate(4deg); }
}

.convite-condition-section {
  display: grid;
  gap: 0.625rem;
  padding: 0.5rem;
  background: var(--app-deep-bg, hsla(203, 6%, 25%, 0.4));
}

.convite-condition-section article {
  min-height: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.5rem;
  background: var(--app-card-bg, hsl(190, 6%, 21%));
}

.convite-condition-section span,
.convite-condition-section b {
  min-width: 0;
  font-size: 0.8125rem;
}

.convite-condition-section span {
  color: var(--color-text-white-100, #fff);
}

.convite-description-section {
  padding: 0.75rem;
  background: var(--app-deep-bg, hsla(203, 6%, 25%, 0.4));
}

.convite-description-section h2 {
  color: var(--app-action-orange, #ff6b35);
}

.convite-description-section div {
  color: var(--color-text-gray-300, #b0b0b0);
  font-size: 0.75rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.activity-agency-content {
  min-height: calc(100vh - 50px);
  padding: 16px 15px 48px;
  overflow-y: auto;
  background:
    url("../assets/generated/activity-agency-content-source.png") 15px 16px / 360px 778px no-repeat,
    #181c29;
  color: var(--ui-text-primary);
}

.activity-agency-content > section {
  opacity: 0;
}

.activity-agency-share-card,
.activity-agency-rewards,
.activity-agency-rules {
  border-radius: 7px;
  background: var(--ui-surface-panel-flat);
}

.activity-agency-link-row {
  height: 43px;
  display: grid;
  grid-template-columns: 1fr 33px;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid #2b3140;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
}

.activity-agency-link-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-agency-link-row button,
.activity-agency-quick button,
.activity-agency-subrow button {
  border: 0;
  background: transparent;
}

.activity-agency-link-row img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: .85;
}

.activity-agency-quick {
  padding: 9px 15px 7px;
  border-bottom: 1px solid #2b3140;
}

.activity-agency-quick p {
  margin: 0 0 10px;
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
}

.activity-agency-quick div {
  display: flex;
  gap: 8px;
}

.activity-agency-quick button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}

.activity-agency-quick img {
  width: 34px;
  height: 34px;
  object-fit: cover;
}

.activity-agency-subrow {
  min-height: 44px;
  display: grid;
  grid-template-columns: 1fr 70px;
  align-items: center;
  padding: 8px 15px;
}

.activity-agency-subrow p {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-sm);
}

.activity-agency-subrow b {
  color: #ffab16;
  font-weight: var(--ui-font-weight-regular);
}

.activity-agency-subrow button {
  color: var(--lite-accent-bright, #00eb6a);
  font-size: var(--ui-font-size-2xs);
  text-align: right;
}

.activity-agency-rewards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 10px;
  row-gap: 22px;
  margin-top: 12px;
  min-height: 596px;
  padding: 20px 14px 12px;
  border-radius: 3px;
  background: url("../assets/generated/activity-agency-rewards-source.png") left top / 360px 596px no-repeat;
}

.activity-agency-rewards > * {
  opacity: 0;
  pointer-events: none;
}

.activity-agency-rewards article {
  position: relative;
  min-width: 0;
  text-align: center;
}

.activity-agency-rewards img {
  width: 70px;
  height: 60px;
  object-fit: fill;
}

.activity-agency-rewards b {
  position: absolute;
  left: 50%;
  top: 22px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-2xs);
  line-height: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  transform: translateX(-50%);
}

.activity-agency-rewards i {
  position: absolute;
  right: -9px;
  top: 27px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg-plus);
  font-style: normal;
  line-height: var(--ui-line-height-form);
}

.activity-agency-rewards span {
  display: block;
  margin-top: 8px;
  color: var(--lite-accent-bright, #00eb6a);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-xs);
}

.activity-agency-rules {
  margin-top: 12px;
  padding: 12px 14px;
  color: #b8becd;
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-form);
}

.activity-agency-rules h2 {
  margin: 0 0 6px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-sm);
}

.activity-agency-rules p {
  margin: 0 0 3px;
}

.activity-member-reward-page {
  background: #111621;
}

.activity-member-reward-content {
  position: relative;
  min-height: calc(100vh - 50px);
  background: #111621;
}

.activity-source-spinner {
  position: absolute;
  left: 186px;
  top: 359px;
  width: 20px;
  height: 20px;
}

.activity-source-spinner i {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--lite-accent, #03e27a);
}

.activity-source-spinner i:nth-child(1) { transform: translate(0, -7px); opacity: .95; }
.activity-source-spinner i:nth-child(2) { transform: translate(6px, -3px); opacity: .8; }
.activity-source-spinner i:nth-child(3) { transform: translate(6px, 4px); opacity: .7; }
.activity-source-spinner i:nth-child(4) { transform: translate(0, 7px); opacity: .55; }
.activity-source-spinner i:nth-child(5) { transform: translate(-6px, 3px); opacity: .5; }
.activity-source-spinner i:nth-child(6) { transform: translate(-6px, -4px); opacity: .65; }

.activity-agency-details-page,
.activity-recharge-page {
  background: #1d2331;
}

.activity-rich-page,
.activity-weekcard-page {
  background: var(--ui-surface-control-soft);
}

.activity-rich-page .activity-source-header strong,
.activity-weekcard-page .activity-source-header strong {
  overflow: hidden;
  padding: 0 12px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xl);
  line-height: 50px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-rich-content {
  min-height: calc(100vh - 50px);
  padding: 21px 3px 36px;
  overflow-y: auto;
  background: var(--ui-surface-card-deep);
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-lg);
  line-height: 23px;
}

.activity-rich-content p {
  margin: 0 0 3px;
}

.activity-rich-content b,
.activity-rich-content strong {
  color: var(--ui-text-primary);
  font-weight: var(--ui-font-weight-heavy);
}

.activity-rich-content a,
.activity-rich-yellow,
.activity-rich-content span {
  color: var(--lite-accent-bright, #00f171);
  text-decoration: none;
}

.activity-rich-center .activity-rich-muted-link {
  color: var(--ui-text-primary);
}

.activity-rich-nowrap {
  white-space: nowrap;
}

.activity-rich-content table {
  color: var(--ui-text-page-active);
}

.activity-rich-center {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-readable);
}

.activity-rich-spacer {
  height: 43px;
}

.activity-rich-gap {
  height: 45px;
}

.activity-rich-table {
  width: 100%;
  margin: 2px 0 1px;
  border-collapse: collapse;
  table-layout: fixed;
}

.activity-rich-table td {
  border: 1px solid rgba(255, 255, 255, .43);
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-control);
  text-align: center;
  vertical-align: middle;
}

.activity-redpacket-table td:first-child {
  width: 26%;
}

.activity-redpacket-table td {
  min-height: 41px;
  padding: 10px 7px;
}

.activity-redpacket-table tr:nth-child(2) td {
  height: 86px;
}

.activity-redpacket-table tr:nth-child(3) td {
  height: 87px;
}

.activity-redpacket-table tr:nth-child(4) td {
  height: 109px;
}

.activity-redpacket-table tr:nth-child(5) td {
  height: 108px;
}

.activity-newuser-content {
  padding-top: 21px;
}

.activity-newuser-table {
  margin-top: 0;
}

.activity-newuser-table td {
  padding: 9px 9px;
}

.activity-newuser-table tr:first-child td {
  height: 62px;
}

.activity-newuser-table td:first-child {
  width: 33%;
  text-align: left;
}

.activity-newuser-table tr:first-child td:first-child {
  text-align: center;
}

.activity-newuser-table td:nth-child(2) {
  width: 19%;
}

.activity-newuser-table td:nth-child(3) {
  width: 48%;
}

.activity-newuser-table tr:nth-child(2) td:first-child {
  height: 166px;
}

.activity-newuser-table tr:nth-child(3) td:first-child,
.activity-newuser-table tr:nth-child(4) td:first-child {
  height: 42px;
}

.activity-newuser-table b,
.activity-newuser-table strong {
  font-size: var(--ui-font-size-lg);
}

.activity-weekcard-content {
  min-height: calc(100vh - 50px);
  padding: 5px 13px 36px;
  overflow-y: auto;
  background: var(--ui-surface-control-soft);
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-lg);
}

.activity-weekcard-banner {
  width: 380px;
  max-width: none;
  height: 98px;
  display: block;
  margin: 0 0 0 -11px;
  object-fit: cover;
}

.activity-weekcard-date {
  margin: -17px 0 0;
  color: #e9eef8;
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-title);
}

.activity-weekcard-my {
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-lg);
}

.activity-weekcard-my i {
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, .62);
}

.activity-weekcard-stats p {
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-section);
}

.activity-weekcard-stats i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 2px;
  border-radius: 50%;
  background: #aa48e2;
  box-shadow: inset 0 0 0 2px rgba(240, 180, 255, .45);
}

.activity-weekcard-stats b {
  font-size: var(--ui-font-size-balance);
  font-weight: var(--ui-font-weight-heavy);
}

.activity-weekcard-distribution {
  margin-top: 24px;
  text-align: center;
}

.activity-weekcard-distribution p {
  margin: 0 0 11px;
  font-size: var(--ui-font-size-lg);
}

.activity-weekcard-distribution > strong {
  display: block;
  margin-bottom: 13px;
  color: #d0a8e9;
  font-size: var(--ui-font-size-lg-plus);
  font-weight: var(--ui-font-weight-regular);
}

.activity-weekcard-progress {
  height: 88px;
  padding: 2px 8px 12px;
  border-radius: 3px;
  background: #4d5361;
}

.activity-weekcard-progress small,
.activity-weekcard-progress span,
.activity-weekcard-progress b {
  display: block;
}

.activity-weekcard-progress small {
  height: 14px;
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-2xs);
}

.activity-weekcard-progress span {
  margin-top: 1px;
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-lg);
}

.activity-weekcard-progress b {
  margin-top: 2px;
  color: #ff603c;
  font-size: var(--ui-font-size-balance);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-record);
}

.activity-weekcard-progress button {
  width: 100%;
  height: 21px;
  display: block;
  margin-top: -1px;
  border: 0;
  border-radius: 4px;
  color: var(--ui-text-primary);
  background: #c495bd;
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-control);
}

.activity-weekcard-table {
  display: grid;
  grid-template-columns: 68px 141px 140px;
  gap: 6px 7px;
  margin-top: 20px;
  color: var(--ui-text-page-active);
  text-align: center;
}

.activity-weekcard-table b,
.activity-weekcard-table span {
  min-height: 20px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: #333947;
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-record);
}

.activity-weekcard-table b {
  height: 26px;
  background: #4a5060;
  font-size: var(--ui-font-size-lg-plus);
  font-weight: var(--ui-font-weight-black);
}

.activity-weekcard-table span:nth-child(3n) {
  color: #a2a6af;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-heavy);
}

.activity-redpacket-page .activity-rich-content,
.activity-weekcard-page .activity-weekcard-content,
.activity-newuser-page .activity-rich-content {
  background-color: #171b27;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 390px 794px;
}

.activity-redpacket-page .activity-rich-content {
  background-image: url("../assets/generated/activity-redpacket-source-body.png");
}

.activity-weekcard-page .activity-weekcard-content {
  background-image: url("../assets/generated/activity-weekcard-source-body.png");
}

.activity-newuser-page .activity-rich-content {
  background-image: url("../assets/generated/activity-newuser-source-body.png");
}

.activity-redpacket-page .activity-rich-content > *,
.activity-weekcard-page .activity-weekcard-content > *,
.activity-newuser-page .activity-rich-content > * {
  opacity: .001;
}

.activity-cashback-page,
.activity-bankrupt-page,
.activity-blindbox-page {
  background: var(--ui-surface-card-soft);
  color: var(--ui-text-primary);
}

.activity-source-header-with-action {
  grid-template-columns: 46px minmax(0, 1fr) 76px;
}

.activity-header-action {
  width: 76px;
  height: 50px;
  border: 0;
  color: var(--ui-text-page-active);
  background: transparent;
  font-size: var(--ui-font-size-section);
}

.activity-cashback-page .activity-source-header-with-action {
  grid-template-columns: minmax(0, 1fr) 76px;
}

.activity-cashback-page .activity-source-back {
  display: none;
}

.activity-source-back {
  width: 46px;
  height: 50px;
  border: 0;
  background: transparent;
  position: relative;
}

.activity-source-back::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-left: 2px solid #f8fafc;
  border-bottom: 2px solid #f8fafc;
  transform: rotate(45deg);
}

.activity-cashback-content {
  min-height: calc(100vh - 50px);
  padding: 2px 3px 84px;
  background: #1b1f2b url("../assets/generated/activity-cashback-source-body.png") left top / 390px 794px no-repeat;
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-lg);
}

.activity-cashback-content > *,
.activity-cashback-footer {
  opacity: .001;
}

.activity-cashback-empty {
  height: 43px;
  display: grid;
  place-items: center;
  margin-bottom: 7px;
  background: #171b26;
  border-radius: 1px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-section);
}

.activity-cashback-card {
  padding: 6px 7px 9px;
  background: #171b26;
}

.activity-cashback-row {
  height: 31px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  color: var(--ui-text-page-active);
  text-align: center;
  font-size: var(--ui-font-size-section);
}

.activity-cashback-row.is-head {
  height: 34px;
  margin-bottom: 2px;
  border: 1px solid rgba(255, 255, 255, .9);
  font-size: var(--ui-font-size-section);
}

.activity-cashback-row.is-alt {
  background: #151923;
}

.activity-cashback-row b {
  color: var(--lite-accent-bright, #00f171);
  font-weight: var(--ui-font-weight-medium);
}

.activity-cashback-rules {
  margin-top: 4px;
  padding: 9px 6px 11px;
  background: #171b26;
  color: var(--ui-text-primary);
  line-height: var(--ui-line-height-control);
}

.activity-cashback-rules h2 {
  margin: 0 0 2px;
  font-size: var(--ui-font-size-balance);
  font-weight: var(--ui-font-weight-regular);
}

.activity-cashback-rules p {
  margin: 0;
  font-size: var(--ui-font-size-lg);
}

.activity-cashback-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 51px;
  padding: 6px 4px;
  background: #111520;
}

.activity-cashback-footer button {
  border: 1px solid var(--lite-accent-bright, #00f171);
  background: #111520;
  color: var(--lite-accent-bright, #00f171);
  font-size: var(--ui-font-size-md);
}

.activity-cashback-footer button:last-child {
  color: rgba(0, 0, 0, .35);
}

.activity-cashback-toast {
  position: fixed;
  left: 51px;
  top: 387px;
  z-index: 80;
  width: 288px;
  min-height: 74px;
  display: grid;
  place-items: center;
  padding: 14px 24px;
  border-radius: 6px;
  background: #2d3346;
  color: var(--ui-text-page-active);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-title);
  text-align: center;
}

.activity-bankrupt-header,
.activity-blindbox-header {
  grid-template-columns: 46px minmax(0, 1fr) 46px;
}

.activity-bankrupt-header::after,
.activity-blindbox-header::after {
  content: "";
}

.activity-bankrupt-content {
  min-height: calc(100vh - 50px);
  background: var(--ui-surface-card-soft);
}

.activity-blindbox-content {
  min-height: calc(100vh - 50px);
  padding: 27px 45px 40px;
  background: #181c27 url("../assets/generated/activity-blindbox-source-body.png") left top / 390px 794px no-repeat;
}

.activity-blindbox-content > * {
  opacity: .001;
}

.activity-blindbox-card {
  height: 387px;
  box-sizing: border-box;
  padding: 15px 13px 14px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(226, 154, 60, .98) 0%, rgba(191, 65, 63, .92) 48%, rgba(107, 61, 177, .96) 100%);
  box-shadow: inset 0 42px 72px rgba(255, 255, 255, .16), 0 8px 18px rgba(0, 0, 0, .22);
  text-align: center;
}

.activity-blindbox-gift {
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  border-radius: 22px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .18) 54%, rgba(255, 255, 255, 0) 73%);
  font-size: 64px;
  filter: drop-shadow(0 8px 9px rgba(0, 0, 0, .22));
}

.activity-blindbox-card h1 {
  margin: 0 auto 8px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-icon-lg-plus);
  font-weight: var(--ui-font-weight-black);
  line-height: 33px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

.activity-blindbox-card p {
  margin: 0 auto 12px;
  color: var(--color-text-white-80);
  font-size: var(--ui-font-size-section);
  line-height: var(--ui-line-height-title);
  letter-spacing: .1px;
}

.activity-blindbox-card button {
  width: 274px;
  max-width: 100%;
  height: 45px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 23px;
  background: var(--ui-surface-black);
  color: var(--ui-text-primary);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .42);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-heavy);
  letter-spacing: 1px;
}

.activity-blindbox-card small {
  display: block;
  margin-top: 9px;
  color: var(--ui-text-menu);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-form);
}

.activity-blindbox-rules {
  min-height: 56px;
  margin-top: 23px;
  padding: 18px 17px 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 15px;
  background: rgba(0, 0, 0, .26);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .18);
}

.activity-blindbox-rules div {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}

.activity-blindbox-rules i {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
}

.activity-blindbox-rules strong {
  color: #ffd21a;
  font-size: var(--ui-font-size-micro);
  line-height: var(--ui-line-height-2xs);
}

.activity-blindbox-rules p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-record);
}

.blindbox-modal {
  z-index: calc(var(--z-modal) + 24);
}

.blindbox-modal .ui-backdrop {
  background: rgba(3, 5, 10, .68);
  backdrop-filter: none;
}

.blindbox-modal-wrap {
  position: absolute;
  left: 50%;
  top: 54.5%;
  width: min(calc(100% - 10px), 360px);
  display: grid;
  justify-items: center;
  gap: 15px;
  transform: translate(-50%, -48%) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--ui-duration) ease, opacity var(--ui-duration) ease;
}

.blindbox-modal.is-active .blindbox-modal-wrap {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.blindbox-modal-card {
  position: relative;
  width: 100%;
  min-height: 548px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px 20px 27px;
  border: 1px solid rgba(255, 235, 186, .42);
  border-radius: 25px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 235, 186, .32), transparent 32%),
    linear-gradient(180deg, rgba(226, 161, 82, .94) 0%, rgba(199, 74, 55, .9) 45%, rgba(92, 63, 170, .96) 100%);
  box-shadow:
    inset 0 46px 78px rgba(255, 255, 255, .14),
    inset 0 -34px 72px rgba(54, 32, 122, .24),
    0 18px 42px rgba(0, 0, 0, .44);
  text-align: center;
  color: #fff;
}

.blindbox-modal[data-blindbox-state="registered"] .blindbox-modal-card {
  min-height: 0;
  padding: 25px 18px 44px;
}

.blindbox-modal[data-blindbox-state="registered"] .blindbox-modal-wrap {
  top: 55%;
  width: min(calc(100% - 10px), 360px);
}

.blindbox-modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent),
    radial-gradient(circle at 18% 86%, rgba(198, 64, 184, .22), transparent 30%);
  opacity: .7;
  pointer-events: none;
}

.blindbox-gift-stage {
  position: relative;
  z-index: 1;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  margin: 9px auto 18px;
  border-radius: 23px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .44) 0%, rgba(255, 255, 255, .18) 52%, rgba(255, 255, 255, 0) 72%);
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .24));
  cursor: pointer;
}

.blindbox-gift-emoji {
  display: block;
  color: #fff;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 72px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  transform: translateY(1px);
}

.blindbox-copy {
  position: relative;
  z-index: 1;
  min-height: 104px;
}

.blindbox-copy h2 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.08;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .34);
  white-space: nowrap;
}

.blindbox-modal[data-blindbox-state="registered"] .blindbox-copy h2 {
  max-width: 304px;
  margin-inline: auto;
  font-size: 25px;
  line-height: 1.18;
  white-space: pre-line;
}

.blindbox-copy p {
  margin: 0 auto;
  max-width: 244px;
  color: rgba(255, 255, 255, .94);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.47;
}

.blindbox-modal[data-blindbox-state="registered"] .blindbox-copy p {
  max-width: 302px;
  font-size: 16px;
}

.blindbox-primary {
  position: relative;
  z-index: 1;
  width: min(100%, 286px);
  height: 55px;
  margin: 6px 0 28px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  background: #050505;
  color: #fff;
  box-shadow: 0 5px 17px rgba(0, 0, 0, .46);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.blindbox-tap-hint {
  position: relative;
  z-index: 1;
  margin: -6px auto 0;
  max-width: 306px;
  color: var(--lite-accent-bright, #00ff65);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.blindbox-tap-hint[hidden] {
  display: none;
}

.blindbox-reward-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 21px 13px 19px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(122, 45, 95, .42), rgba(53, 30, 112, .56));
  box-shadow: inset 0 22px 42px rgba(255, 255, 255, .07);
}

.blindbox-reward-panel[hidden],
.blindbox-countdown-box[hidden] {
  display: none;
}

.blindbox-reward-panel h3 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
}

.blindbox-reward-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  margin: 0 0 19px;
  color: #fff;
}

.blindbox-reward-amount span,
.blindbox-reward-amount strong {
  color: #ffc400;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 196, 0, .34);
}

.blindbox-reward-amount span {
  font-size: 34px;
}

.blindbox-reward-amount strong {
  font-size: 41px;
}

.blindbox-reward-amount b {
  font-size: 20px;
  font-weight: 900;
}

.blindbox-countdown-box {
  box-sizing: border-box;
  min-height: 102px;
  display: grid;
  place-items: center;
  padding: 11px 12px 12px;
  border: 1px solid rgba(255, 186, 49, .64);
  border-radius: 12px;
  background: rgba(107, 44, 96, .26);
}

.blindbox-countdown-box p {
  margin: 0 0 9px;
  color: #ffbd3c;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
}

.blindbox-countdown-box time {
  display: block;
  color: #ffb331;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.blindbox-close {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(74, 74, 78, .94);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}

.blindbox-close span,
.blindbox-close span::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 20px;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(45deg);
}

.blindbox-close span::after {
  left: 0;
  top: 0;
  transform: rotate(90deg);
}

.blindbox-modal[data-blindbox-state="unregistered"] .blindbox-gift-emoji {
  filter: grayscale(1) brightness(.9);
}

.blindbox-modal[data-blindbox-state="registered"] .blindbox-gift-stage {
  animation: blindbox-gift-pulse 1.8s ease-in-out infinite;
}

.blindbox-modal[data-blindbox-state="registered"] .blindbox-reward-panel,
.blindbox-modal[data-blindbox-state="unregistered"] .blindbox-reward-panel {
  display: none;
}

@keyframes blindbox-gift-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.app-shell.route-activity-recharge-progressive,
.app-shell.route-activity-rebate-relief,
.app-shell.route-activity-total-pool {
  --app-tabbar-height: 0px;
  background: var(--ui-surface-panel-dark);
}

.app-shell.route-activity-recharge-progressive .app-main,
.app-shell.route-activity-rebate-relief .app-main,
.app-shell.route-activity-total-pool .app-main,
.app-shell.route-subpage.route-activity-recharge-progressive .app-main,
.app-shell.route-subpage.route-activity-rebate-relief .app-main,
.app-shell.route-subpage.route-activity-total-pool .app-main {
  inset: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-surface-panel-dark);
}

.app-shell.route-activity-recharge-progressive .bottom-tabbar,
.app-shell.route-activity-recharge-progressive .l5-header,
.app-shell.route-activity-recharge-progressive .pwa-l5-bar,
.app-shell.route-activity-recharge-progressive [data-floating-activity],
.app-shell.route-activity-recharge-progressive .l5-support,
.app-shell.route-activity-recharge-progressive .l5-side-handle,
.app-shell.route-activity-rebate-relief .bottom-tabbar,
.app-shell.route-activity-rebate-relief .l5-header,
.app-shell.route-activity-rebate-relief .pwa-l5-bar,
.app-shell.route-activity-rebate-relief [data-floating-activity],
.app-shell.route-activity-rebate-relief .l5-support,
.app-shell.route-activity-rebate-relief .l5-side-handle,
.app-shell.route-activity-total-pool .bottom-tabbar,
.app-shell.route-activity-total-pool .l5-header,
.app-shell.route-activity-total-pool .pwa-l5-bar,
.app-shell.route-activity-total-pool [data-floating-activity],
.app-shell.route-activity-total-pool .l5-support,
.app-shell.route-activity-total-pool .l5-side-handle {
  display: none !important;
}

.activity-source-back,
.activity-total-pool-header button {
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  background: transparent;
}

.activity-source-back::before,
.activity-total-pool-header button::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 17px;
  width: 12px;
  height: 12px;
  border-left: 2px solid var(--ui-text-primary);
  border-bottom: 2px solid var(--ui-text-primary);
  transform: rotate(45deg);
}

.activity-source-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ui-surface-card-deep);
  z-index: 5;
}

.activity-source-loading[hidden] {
  display: none;
}

.activity-source-loading img {
  width: 170px;
  height: auto;
}

.is-source-loading > :not(.activity-source-loading) {
  display: none !important;
}

.activity-recharge-progressive-page {
  position: relative;
  min-height: 100%;
  color: var(--ui-text-primary);
  background: #252b3c;
  overflow: hidden;
}

.activity-progressive-header {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  background: var(--ui-surface-card-soft);
}

.activity-progressive-header .activity-source-back::after {
  content: "Back";
  position: absolute;
  left: 28px;
  top: 14px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-balance);
  line-height: var(--ui-line-height-title);
}

.activity-progressive-header .activity-source-back::before {
  left: 12px;
  top: 17px;
}

.activity-progressive-header strong {
  padding-left: 4px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-regular);
}

.activity-progressive-content {
  height: calc(100vh - 50px);
  overflow: auto;
  background: #252b3c;
  scrollbar-width: none;
}

.activity-progressive-content::-webkit-scrollbar {
  display: none;
}

.rp-source-page {
  max-width: 480px;
  min-height: 100%;
  margin: 0 auto;
  color: var(--ui-text-primary);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 183, 40, .12), transparent 30%),
    #252b3c;
}

.rp-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 28px 18px 24px;
  text-align: center;
}

.rp-hero::before {
  content: "";
  position: absolute;
  inset: -80px -80px auto;
  height: 230px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 212, 78, .26), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(var(--lite-accent-rgb, 8, 228, 116), .16), transparent 30%);
  pointer-events: none;
}

.rp-hero > * {
  position: relative;
  z-index: 1;
}

.rp-hero-kicker {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: var(--ui-font-weight-black);
}

.rp-hero h1 {
  margin: 0;
  color: #ffd86a;
  font-size: 34px;
  font-weight: var(--ui-font-weight-black);
  line-height: 1.05;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}

.rp-hero h1 span {
  color: var(--lite-accent-bright, #00f06b);
}

.rp-countdown {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  color: #ffffff;
  font-style: normal;
  font-weight: var(--ui-font-weight-black);
}

.rp-countdown span {
  min-width: 40px;
  padding: 5px 9px;
  border-radius: 6px;
  background: #ff7717;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.rp-countdown i {
  color: #ffffff;
  font-style: normal;
}

.rp-hero ul {
  display: grid;
  gap: 8px;
  width: min(100%, 330px);
  margin: 2px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, .9);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-record);
  text-align: left;
  list-style: none;
}

.rp-hero li::before {
  content: "$";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  color: #203421;
  background: #ffd86a;
  font-size: 11px;
  font-weight: var(--ui-font-weight-black);
}

.rp-cashier-section,
.rp-benefits-section,
.rp-rules-section,
.rp-tracker-section {
  padding: 0 18px 22px;
}

.rp-math {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-black);
  text-align: center;
}

.rp-cashier-section h2 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
}

.rp-choice-note {
  margin: 0 0 12px;
  color: #ffd86a;
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-black);
  text-align: center;
}

.rp-custom-input {
  min-height: 56px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  background: #1c2331;
}

.rp-custom-input span,
.rp-preset-grid span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #1f2937;
  background: #ffd86a;
  font-size: 14px;
  font-weight: var(--ui-font-weight-black);
}

.rp-custom-input input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #ffffff;
  background: transparent;
  font-size: 28px;
  font-weight: var(--ui-font-weight-black);
  text-align: right;
}

.rp-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 16px;
}

.rp-preset-grid button {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, .78);
  background: #313747;
  font-size: 15px;
  font-weight: var(--ui-font-weight-black);
}

.rp-preset-grid button.is-active {
  border-color: #ffd86a;
  color: #ffffff;
  background: linear-gradient(145deg, #5b4a2a, #263241);
}

.rp-preset-grid em {
  position: absolute;
  right: -4px;
  bottom: -6px;
  padding: 1px 5px;
  border-radius: 999px;
  color: #152314;
  background: #ffd86a;
  font-size: 10px;
  font-style: normal;
}

.rp-deposit-button {
  width: min(100%, 280px);
  min-height: 48px;
  display: block;
  margin: 0 auto;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(90deg, var(--lite-accent, #08c764), var(--lite-accent, #03e678));
  font-size: 17px;
  font-weight: var(--ui-font-weight-black);
  letter-spacing: 0;
  box-shadow: 0 12px 24px rgba(var(--lite-accent-rgb, 8, 205, 101), .25);
}

.rp-deposit-button:active {
  transform: translateY(1px);
}

.rp-marquee {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, .58);
  font-size: var(--ui-font-size-xs);
  line-height: 1.45;
  text-align: center;
}

.rp-marquee span,
.rp-marquee b {
  color: #ffffff;
}

.rp-benefits-section {
  display: grid;
  gap: 20px;
  padding-top: 10px;
}

.rp-benefits-section h2 {
  margin: 0 0 4px;
  color: #ffd86a;
  font-size: 18px;
  line-height: 1.25;
  text-align: center;
}

.rp-benefits-section article,
.rp-tracker-section article {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: #1d2432;
  text-align: center;
}

.rp-benefits-section article > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffffff;
  background: #353d4d;
  font-size: 22px;
  font-weight: var(--ui-font-weight-black);
  box-shadow: inset 0 0 0 2px rgba(255, 216, 106, .32);
}

.rp-benefits-section h3,
.rp-tracker-section h3 {
  margin: 0;
  color: #ffd86a;
  font-size: 15px;
  line-height: 1.2;
}

.rp-benefits-section p,
.rp-tracker-section p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-black);
  line-height: 1.45;
}

.rp-login-table {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border-radius: 10px;
  background: #283041;
}

.rp-login-table strong {
  display: block;
  margin-bottom: 8px;
  color: #ffd86a;
  font-size: var(--ui-font-size-xs);
}

.rp-login-table div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.rp-login-table p {
  margin: 0;
  display: grid;
  gap: 3px;
  color: rgba(255, 255, 255, .82);
  font-size: 10px;
}

.rp-login-table b,
.rp-login-table em {
  font-style: normal;
  font-weight: var(--ui-font-weight-black);
}

.rp-login-table em {
  color: #ffffff;
}

.rp-rules-section {
  padding-bottom: 34px;
}

.rp-rules-section h2 {
  margin: 0 0 10px;
  color: #ffd86a;
  font-size: 14px;
}

.rp-rules-section ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: rgba(255, 255, 255, .72);
  font-size: var(--ui-font-size-xs);
  line-height: 1.5;
}

.rp-asset-row {
  width: min(100%, 330px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.rp-asset-row p {
  margin: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
}

.rp-asset-row span {
  color: rgba(255, 255, 255, .64);
  font-size: var(--ui-font-size-xs);
}

.rp-asset-row b {
  color: var(--lite-accent-bright, #00f06b);
  font-size: 18px;
}

.activity-rebate-relief-page {
  height: 100%;
  overflow-y: auto;
  background: var(--ui-surface-panel-dark);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.activity-rebate-relief-page * {
  box-sizing: border-box;
}

.activity-rebate-relief-page::-webkit-scrollbar {
  display: none;
}

.activity-rebate-relief-content {
  height: auto;
  max-width: 480px;
  margin: 0 auto;
  overflow: visible;
  padding: 0 16px 32px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-panel-dark);
}

.activity-rebate-relief-content::-webkit-scrollbar {
  display: none;
}

.activity-rebate-relief-hero {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 28px 16px;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(135deg, var(--lite-accent-deep, #0d5c2e) 0%, var(--lite-accent-deep, #1a8a4a) 50%, var(--lite-accent-deep, #0d5c2e) 100%);
}

.activity-rebate-relief-page[data-rebate-mode="loss"] .activity-rebate-relief-hero {
  background: linear-gradient(135deg, #6b1a1a 0%, #c0392b 50%, #6b1a1a 100%);
}

.activity-rebate-relief-hero small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 2px;
}

.activity-rebate-relief-hero h1 {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}

.activity-rebate-relief-hero p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  line-height: 19.5px;
}

.activity-rebate-relief-tabs {
  display: flex;
  gap: 0;
  overflow: hidden;
  margin: 16px 0;
  border: 1px solid var(--color-border-input-basic, #2a324e);
  border-radius: 8px;
  background: var(--color-bg-second, #161823);
}

.activity-rebate-relief-tabs button {
  flex: 1;
  padding: 11px 0;
  border: 0;
  color: var(--color-text-second, #9ba7be);
  background: var(--color-bg-second, #161823);
  font-size: 14px;
  font-weight: 700;
  line-height: 21px;
  letter-spacing: .5px;
}

.activity-rebate-relief-tabs button.is-active {
  color: var(--ui-text-primary);
  background: var(--lite-accent, #2dd55b);
}

.activity-rebate-relief-page[data-rebate-mode="loss"] .activity-rebate-relief-tabs button.is-active {
  background: #eb445a;
}

.activity-rebate-mode {
  display: block;
}

.activity-rebate-stat-grid {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}

.activity-rebate-stat-grid article {
  flex: 1;
  min-height: 94px;
  padding: 12px;
  border: 1px solid var(--color-border-input-basic, #2a324e);
  border-radius: 10px;
  background: var(--color-bg-second, #161823);
}

.activity-rebate-stat-grid span,
.activity-rebate-sync,
.activity-rebate-reward-card p,
.activity-rebate-reward-card small,
.activity-rebate-upgrade,
.activity-rebate-rules p {
  color: var(--color-text-second, #9ba7be);
}

.activity-rebate-stat-grid span {
  font-size: 11px;
}

.activity-rebate-stat-grid strong {
  color: var(--ui-text-primary);
  font-size: 18px;
  line-height: normal;
  margin-top: 4px;
}

.activity-rebate-stat-grid strong.is-loss,
.activity-rebate-reward-card.is-loss strong {
  color: #ff486a;
}

.activity-rebate-stat-grid button {
  border: 0;
  padding: 0;
  color: #f0ae4c;
  background: transparent;
  font-size: 11px;
  margin-top: 4px;
}

.activity-rebate-sync {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 12px;
  color: var(--lite-accent, #00d563);
  font-size: 10px;
  line-height: 15px;
}

.activity-rebate-sync i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.activity-rebate-reward-card {
  min-height: 0;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(var(--lite-accent-rgb, 39, 174, 96), .3);
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(180deg, rgba(var(--lite-accent-rgb, 39, 174, 96), .15) 0%, var(--color-bg-second, #161823) 100%);
}

.activity-rebate-reward-card.is-loss {
  border-color: rgba(192, 57, 43, .3);
  background: linear-gradient(180deg, rgba(192, 57, 43, .15) 0%, var(--color-bg-second, #161823) 100%);
}

.activity-rebate-reward-card p,
.activity-rebate-reward-card h2,
.activity-rebate-reward-card small {
  margin: 0;
  font-weight: 400;
}

.activity-rebate-reward-card p {
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 16.5px;
}

.activity-rebate-reward-card h2 {
  color: var(--color-text-second, #9ba7be);
  font-size: 13px;
  line-height: 19.5px;
}

.activity-rebate-reward-card strong {
  color: var(--lite-accent-bright, #2eea75);
  display: block;
  margin: 6px 0;
  font-size: 32px;
  font-weight: 800;
  line-height: 48px;
}

.activity-rebate-reward-card small {
  display: block;
  font-size: 11px;
  line-height: 16.5px;
}

.activity-rebate-claim {
  width: 100%;
  min-height: 43px;
  padding: 14px;
  margin-bottom: 16px;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  background: #2a2e3f;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  letter-spacing: .5px;
}

.activity-rebate-mode h3 {
  margin: 0 0 8px;
  color: var(--ui-text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 19.5px;
  letter-spacing: .5px;
}

.activity-rebate-upgrade {
  min-height: 0;
  padding: 8px;
  margin-bottom: 16px;
  border-radius: 8px;
  color: var(--ion-color-success, var(--lite-accent, #2ecc71));
  text-align: center;
  background: rgba(var(--lite-accent-rgb, 39, 174, 96), .1);
  font-size: 12px;
  line-height: 18px;
}

.activity-rebate-rules {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--color-bg-second, #161823);
}

.activity-rebate-rules > * {
  opacity: 1;
}

.activity-rebate-rules h3 {
  margin: 0 0 8px;
  color: var(--color-text-basic, #fff);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.activity-rebate-rules p {
  position: relative;
  margin: 0;
  padding: 4px 0 4px 12px;
  font-size: 11px;
  line-height: 1.5;
}

.activity-rebate-rules p::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 4px;
  color: currentColor;
}

.activity-rebate-action-links {
  margin-bottom: 16px;
}

.activity-rebate-history {
  width: 100%;
  padding: 8px 0;
  border: 0;
  color: #f0ae4c;
  background: transparent;
  font-size: 13px;
  line-height: 19.5px;
  text-align: center;
}

.activity-rebate-plan,
.activity-rebate-condition {
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border-input-basic, #2a324e);
  border-radius: 10px;
  background: var(--color-bg-second, #161823);
}

.activity-rebate-plan {
  border-color: rgba(192, 57, 43, .3);
}

.activity-rebate-plan header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.activity-rebate-plan header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.activity-rebate-plan header strong {
  display: block;
  color: var(--color-text-basic, #fff);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.activity-rebate-plan header span,
.activity-rebate-plan p span,
.activity-rebate-plan-grid span,
.activity-rebate-condition span {
  display: block;
  color: var(--color-text-second, #9ba7be);
  font-size: 11px;
  line-height: 16.5px;
}

.activity-rebate-plan-grid span {
  font-size: 10px;
  line-height: 15px;
}

.activity-rebate-plan p span {
  font-size: 10px;
  line-height: 15px;
}

.activity-rebate-plan header span {
  margin-top: 4px;
  white-space: nowrap;
}

.activity-rebate-plan header span span {
  display: inline;
  margin-top: 0;
}

.activity-rebate-plan header em {
  align-self: start;
  max-width: 46%;
  padding: 4px 8px;
  border: 1px solid rgba(192, 57, 43, .25);
  border-radius: 999px;
  color: var(--ion-color-danger, #e74c3c);
  background: rgba(192, 57, 43, .12);
  font-size: 11px;
  font-style: normal;
  line-height: 16.5px;
  text-align: right;
  word-break: break-word;
}

.activity-rebate-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.activity-rebate-plan-grid article {
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--color-border-input-basic, #2a324e);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
}

.activity-rebate-plan-grid b {
  color: var(--ui-text-primary);
  display: block;
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
}

.activity-rebate-plan p,
.activity-rebate-condition p {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.activity-rebate-plan p {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.activity-rebate-plan p b {
  color: var(--color-text-basic, #fff);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.activity-rebate-condition {
  display: block;
}

.activity-rebate-condition h3 {
  margin: 0 0 8px;
  color: var(--color-text-basic, #fff);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}

.activity-rebate-condition p {
  padding: 4px 0;
  color: var(--color-text-second, #9ba7be);
  font-size: 12px;
  line-height: 18px;
}

.activity-rebate-condition span {
  display: inline;
  font-size: 12px;
  line-height: 18px;
}

.activity-rebate-condition b {
  color: var(--ui-text-primary);
  font-size: 12px;
  font-weight: var(--ui-font-weight-regular);
  line-height: 18px;
}

.activity-rebate-rate-breakdown {
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border-input-basic, #2a324e);
  border-radius: 10px;
  background: var(--color-bg-second, #161823);
}

.activity-rebate-rate-breakdown p {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 6px 0;
  color: var(--color-text-second, #9ba7be);
  font-size: 13px;
  line-height: 19.5px;
}

.activity-rebate-rate-breakdown p.total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-input-basic, #2a324e);
  color: var(--color-text-basic, #fff);
  font-weight: 700;
}

.activity-rebate-rate-breakdown b {
  color: var(--color-text-basic, #fff);
  font-weight: 600;
}

.activity-rebate-rate-breakdown b.is-loss,
.activity-rebate-upgrade.is-loss {
  color: var(--ion-color-danger, #e74c3c);
}

.activity-rebate-upgrade.is-loss {
  background: rgba(192, 57, 43, .1);
}

.activity-rebate-rules.is-loss p:last-child {
  color: var(--ion-color-danger, #e74c3c);
  font-weight: 600;
}

.activity-total-pool-page {
  position: relative;
  min-height: 100%;
  background: var(--ui-surface-panel-dark);
}

.activity-total-pool-header {
  height: 50px;
  background: #0d1018;
}

.activity-total-pool-content {
  min-height: calc(100vh - 50px);
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 134px;
  background: var(--ui-surface-panel-dark);
}

.activity-total-pool-content p {
  margin: 0 0 18px;
  color: #9aa0b0;
  font-size: var(--ui-font-size-md);
}

.activity-total-pool-content button {
  min-width: 57px;
  min-height: 27px;
  border: 0;
  border-radius: 7px;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #04c864);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-heavy);
}

.activity-total-pool-toast {
  position: absolute;
  left: 87px;
  top: 397px;
  width: 216px;
  height: 50px;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  border-radius: 6px;
  color: var(--ui-text-primary);
  background: #2c3146;
  z-index: 4;
}

.activity-total-pool-toast[hidden] {
  display: none;
}

.activity-total-pool-toast span {
  justify-self: end;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  margin-right: 15px;
  border-radius: 50%;
  color: #1e2432;
  background: #ffc41c;
  font-weight: var(--ui-font-weight-black);
}

.activity-total-pool-toast b {
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
}

.activity-agency-details-page {
  background: url("../assets/generated/activity-agency-details-source.png") left top / 390px 844px no-repeat;
}

.activity-agency-details-page .activity-source-header,
.activity-agency-details-content {
  opacity: .001;
}

.activity-agency-details-content {
  min-height: calc(100vh - 50px);
  padding-top: 11px;
  background: var(--ui-surface-spread);
  color: var(--ui-text-primary);
}

.activity-agency-details-page .activity-source-header {
  background: var(--ui-surface-spread);
}

.activity-agency-details-search {
  width: 145px;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  margin-left: 23px;
}

.activity-agency-details-search input {
  transform: translateY(-2px);
  width: 100%;
  height: 22px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--lite-accent-bright, #04e87c);
  background: transparent;
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-title);
}

.activity-agency-details-search input::placeholder {
  color: var(--lite-accent-bright, #04e87c);
  opacity: .94;
}

.activity-agency-details-search button {
  position: relative;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  transform: translateY(-2px);
}

.activity-agency-details-search button::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 8px;
  height: 8px;
  border: 1.5px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
}

.activity-agency-details-search button::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .82);
  transform: rotate(45deg);
  transform-origin: left center;
}

.activity-agency-details-table {
  width: 374px;
  margin: 1px 8px 0;
  background: var(--ui-surface-input);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-xs);
}

.activity-agency-details-table header,
.activity-agency-details-row {
  display: grid;
  grid-template-columns: 76px 80px 78px 79px 61px;
  align-items: center;
  text-align: center;
}

.activity-agency-details-table header {
  min-height: 65px;
  color: var(--lite-accent-bright, #00ef79);
  font-weight: var(--ui-font-weight-heavy);
}

.activity-agency-details-table header span {
  transform: translateY(-4px);
}

.activity-agency-details-row {
  min-height: 41px;
  color: #f4f5f8;
}

.activity-agency-details-row span {
  transform: translateY(-3px);
}

.activity-agency-details-row b {
  display: block;
  color: #ffae17;
  font-weight: var(--ui-font-weight-black);
}

.activity-recharge-content {
  min-height: calc(100vh - 50px);
  padding: 20px 16px 0;
  background: #1d2331;
}

.activity-recharge-skeleton {
  width: 358px;
  max-width: 100%;
  height: calc(100vh - 70px);
  min-height: 774px;
  background:
    linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .045) 24%, transparent 45%),
    #2a303f;
  background-size: 230px 100%, 100% 100%;
}

.activity-toast {
  position: fixed;
  left: 50%;
  top: 398px;
  z-index: 120;
  min-width: 162px;
  padding: 14px 16px;
  border-radius: 6px;
  color: var(--ui-text-primary);
  background: rgba(49, 52, 68, .96);
  font-size: var(--ui-font-size-md);
  text-align: center;
  transform: translateX(-50%);
}

.activity-redeem-content {
  padding: 44px 15px 0;
}

.activity-redeem-content h1 {
  margin: 0 0 33px;
  color: var(--ui-text-page-active);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-record);
}

.activity-source-input {
  position: relative;
  display: block;
  height: 22px;
  margin: 0 0 36px 12px;
}

.activity-source-input input {
  width: 100%;
  height: 22px;
  padding: 0 36px 0 0;
  border: 0;
  outline: 0;
  color: var(--lite-accent, #00df70);
  background: transparent;
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-title);
}

.activity-source-input input::placeholder {
  color: var(--lite-accent, #00cf69);
  opacity: .94;
}

.activity-source-input button {
  position: absolute;
  right: 10px;
  top: -6px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.activity-source-input button::before,
.activity-source-input button::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  width: 12px;
  height: 1px;
  background: rgba(255, 255, 255, .55);
}

.activity-source-input button::before {
  transform: rotate(45deg);
}

.activity-source-input button::after {
  transform: rotate(-45deg);
}

.activity-source-input input:placeholder-shown + button {
  display: none;
}

.activity-redeem-submit {
  width: 100%;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border: 0;
  border-radius: 10px;
  color: var(--ui-text-primary);
  background: var(--lite-accent, #05db72);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-semibold);
}

.activity-redeem-platforms {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border: 0;
  background: url("../assets/generated/activity-redeem-platforms-source.png") center top / 100% 100% no-repeat;
}

.activity-redeem-platforms img {
  max-width: 42px;
  max-height: 26px;
  object-fit: contain;
  opacity: 0;
}

.activity-redeem-social {
  height: 72px;
  margin: 15px 0 0;
  text-align: center;
  background: url("../assets/generated/activity-redeem-social-source.png") center top / 310px 72px no-repeat;
}

.activity-redeem-social h2 {
  margin: 0 0 12px;
  color: #58627b;
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-record);
}

.activity-redeem-social div {
  display: flex;
  justify-content: center;
  gap: 17px;
}

.activity-redeem-social h2,
.activity-redeem-social div {
  opacity: 0;
}

.activity-redeem-social a {
  width: 64px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #1f93d6;
}

.activity-redeem-social a:nth-child(2) {
  background: var(--lite-accent, #26b83e);
}

.activity-redeem-social a:nth-child(3) {
  background: #5775c3;
}

.activity-redeem-social img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.activity-redeem-copy {
  margin: 57px 0 0 1px;
  color: var(--lite-accent, #00dc70);
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-compact);
}

.activity-redeem-copy p {
  margin: 0;
}

.activity-history-page {
  min-height: 100%;
  background: var(--ui-surface-card-soft);
}

.activity-history-filter-row {
  height: 74px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.activity-history-date {
  width: 158px;
  height: 49px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px 0 16px;
  border: 0;
  border-radius: 3px;
  color: var(--ui-text-primary);
  background: #1b2130;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
}

.activity-history-date b {
  color: var(--lite-accent-bright, #00e979);
}

.activity-history-date span {
  color: var(--ui-text-primary);
}

.activity-history-date i {
  width: 0;
  height: 0;
  margin-left: auto;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--lite-accent, #00d96d);
}

.activity-history-filter-row p,
.activity-history-summary-row p {
  justify-self: end;
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
}

.activity-history-filter-row strong,
.activity-history-summary-row strong {
  color: #ffb300;
}

.activity-history-summary-row {
  height: 60px;
  display: grid;
  align-items: center;
  padding-right: 0;
}

.activity-history-table-head {
  height: 52px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  background: #2c3142;
  color: var(--lite-accent-bright, #00ef7a);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-sm);
  text-align: center;
}

.app-shell.route-activity-custom,
.app-shell.route-activity-recharge-reward,
.app-shell.route-activity-rebate-record {
  --app-tabbar-height: 0px;
  background: var(--ui-surface-card-soft);
}

.app-shell.route-activity-custom .app-main,
.app-shell.route-activity-recharge-reward .app-main,
.app-shell.route-activity-rebate-record .app-main,
.app-shell.route-subpage.route-activity-custom .app-main,
.app-shell.route-subpage.route-activity-recharge-reward .app-main,
.app-shell.route-subpage.route-activity-rebate-record .app-main {
  inset: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-surface-card-soft);
}

.app-shell.route-activity-custom .bottom-tabbar,
.app-shell.route-activity-custom .l5-header,
.app-shell.route-activity-custom .pwa-l5-bar,
.app-shell.route-activity-custom [data-floating-activity],
.app-shell.route-activity-custom .l5-support,
.app-shell.route-activity-custom .l5-side-handle,
.app-shell.route-activity-recharge-reward .bottom-tabbar,
.app-shell.route-activity-recharge-reward .l5-header,
.app-shell.route-activity-recharge-reward .pwa-l5-bar,
.app-shell.route-activity-recharge-reward [data-floating-activity],
.app-shell.route-activity-recharge-reward .l5-support,
.app-shell.route-activity-recharge-reward .l5-side-handle,
.app-shell.route-activity-rebate-record .bottom-tabbar,
.app-shell.route-activity-rebate-record .l5-header,
.app-shell.route-activity-rebate-record .pwa-l5-bar,
.app-shell.route-activity-rebate-record [data-floating-activity],
.app-shell.route-activity-rebate-record .l5-support,
.app-shell.route-activity-rebate-record .l5-side-handle {
  display: none !important;
}

.activity-recharge-reward-page,
.activity-rebate-record-page {
  background: var(--ui-surface-card-deep);
}

.activity-custom-content {
  position: relative;
  min-height: calc(100vh - 50px);
  padding: 32px 55px 0;
  background: var(--ui-surface-card-deep);
}

.activity-custom-apply {
  width: 280px;
  height: 41px;
  border: 0;
  border-radius: 12px;
  color: var(--color-text-white-80);
  background: var(--lite-accent-deep, #00994d);
  font-size: var(--ui-font-size-md);
  line-height: 41px;
  text-align: center;
}

.activity-custom-page.is-source-applied .activity-custom-apply {
  background: var(--lite-accent, #05d86d);
}

.activity-custom-page .activity-source-spinner {
  left: 185px;
  top: 359px;
}

.activity-custom-toast {
  position: fixed;
  left: 107px;
  top: 396px;
  z-index: 120;
  width: 176px;
  height: 51px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--ui-text-primary);
  background: #2d3345;
  font-size: var(--ui-font-size-md);
}

.activity-recharge-reward-content {
  min-height: calc(100vh - 50px);
  display: grid;
  place-items: center;
  padding-bottom: 71px;
  background: var(--ui-surface-card-deep);
}

.activity-n3-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--ui-font-size-icon-lg-plus);
  font-weight: var(--ui-font-weight-black);
  letter-spacing: 0;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .45);
}

.activity-n3-logo span {
  color: #f6d46d;
}

.activity-n3-logo b {
  color: #e94c18;
  font-weight: var(--ui-font-weight-black);
}

.activity-n3-logo i {
  color: #e7221d;
  font-style: normal;
}

.activity-rebate-record-content {
  min-height: calc(100vh - 50px);
  padding: 27px 16px 0;
  background: var(--ui-surface-spread);
  color: var(--ui-text-primary);
}

.activity-rebate-record-filter {
  height: 26px;
  display: grid;
  grid-template-columns: 79px 114px 60px 75px;
  column-gap: 12px;
  align-items: center;
}

.activity-rebate-record-filter button {
  height: 24px;
  display: grid;
  grid-template-columns: 1fr 16px;
  align-items: center;
  padding: 0 8px 0 10px;
  border: 1px solid var(--lite-accent, #00e678);
  border-radius: 10px;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--ui-font-size-xs);
  text-align: left;
}

.activity-rebate-record-filter button i {
  width: 0;
  height: 0;
  justify-self: end;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--lite-accent, #00e678);
}

.activity-rebate-record-filter button.is-open i {
  transform: rotate(180deg);
}

.activity-rebate-record-filter p {
  margin: 0;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
  text-align: center;
}

.activity-rebate-empty {
  display: grid;
  justify-items: center;
  margin-top: 167px;
}

.activity-rebate-empty img {
  width: 119px;
  height: 119px;
  opacity: .13;
}

.activity-rebate-empty strong {
  margin-top: -13px;
  color: var(--lite-accent, #00e678);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
}

.activity-history-table-body {
  height: 10px;
}

.activity-history-unclaimed-page .activity-history-table-body {
  height: 0;
}

.activity-history-collect {
  width: 334px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 14px auto 0;
  border: 0;
  border-radius: 5px;
  color: var(--ui-text-primary);
  background: #48516d;
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-bold);
}

.app-shell.route-activity-lucky-wheel .app-main,
.app-shell.route-subpage.route-activity-lucky-wheel .app-main {
  inset: 0;
  bottom: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ui-surface-black);
}

.app-shell.route-activity-lucky-wheel {
  --app-tabbar-height: 0px;
  background: var(--ui-surface-black);
}

.app-shell.route-activity-lucky-wheel .bottom-tabbar,
.app-shell.route-activity-lucky-wheel .l5-header,
.app-shell.route-activity-lucky-wheel .pwa-l5-bar,
.app-shell.route-activity-lucky-wheel [data-floating-activity],
.app-shell.route-activity-lucky-wheel .l5-support,
.app-shell.route-activity-lucky-wheel .l5-side-handle {
  display: none !important;
}

.lucky-wheel-page {
  min-height: 100%;
  background: var(--ui-surface-black);
  color: var(--ui-text-primary);
}

.lucky-wheel-header,
.app-shell.route-subpage [data-route-page].route-slide-page .lucky-wheel-header {
  height: 12.8205cqw;
  min-height: 50px;
  margin: 0;
  padding: 0;
  background: #181d29;
}

.lucky-wheel-header button {
  width: 12.8205cqw;
  height: 100%;
}

.lucky-wheel-header img {
  width: 5.1282cqw;
  height: 5.1282cqw;
}

.lucky-wheel-header strong {
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-none);
}

.lucky-wheel-stage {
  position: relative;
  height: 97.9487cqw;
  min-height: 382px;
  overflow: hidden;
  background: var(--ui-surface-black);
}

.lucky-wheel-aperture {
  position: absolute;
  left: 0;
  top: -8.2051cqw;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.lucky-wheel-bg {
  position: absolute;
  left: 0;
  top: 3.0769cqw;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.lucky-wheel-light {
  position: absolute;
  left: 18.9744cqw;
  top: 28.2051cqw;
  z-index: 4;
  width: 61.0256cqw;
  height: 61.0256cqw;
  opacity: .98;
  pointer-events: none;
}

.lucky-wheel-disc {
  position: absolute;
  left: 23.3333cqw;
  top: 31.7949cqw;
  z-index: 5;
  width: 53.3333cqw;
  height: 53.3333cqw;
  border: 0;
  border-radius: 50%;
  background: #1a1a2e;
  box-shadow: none;
}

.lucky-wheel-disc::before {
  display: none;
}

.lucky-wheel-disc span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #171b31;
}

.lucky-wheel-start {
  position: absolute;
  left: 50%;
  top: 43.3333cqw;
  z-index: 7;
  width: auto;
  height: 30.2564cqw;
  object-fit: contain;
  transform: translateX(-50%);
}

.lucky-wheel-count {
  position: absolute;
  left: 0;
  right: 0;
  top: 56.9231cqw;
  z-index: 8;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-auth-heading);
  font-weight: var(--ui-font-weight-black);
  line-height: var(--ui-line-height-none);
  text-align: center;
}

.lucky-wheel-vouchers {
  padding: 12.0513cqw 5.1282cqw 10.2564cqw;
  background: var(--ui-surface-black);
}

.lucky-wheel-vouchers h2 {
  margin: 0 0 2.8205cqw;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-black);
  line-height: 1.15;
}

.lucky-wheel-vouchers article {
  width: 100%;
  min-height: 13.3333cqw;
  border-radius: 2.3077cqw;
  padding: 3.0769cqw 2.5641cqw;
  color: var(--lite-accent, #00e475);
  background: #181c2b;
}

.lucky-wheel-vouchers p,
.lucky-wheel-vouchers span {
  display: block;
  margin: 0;
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-tight-plus);
}

.sub-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2.0513cqw;
  margin-bottom: 4.1026cqw;
  border-bottom: 1px solid var(--ui-border);
}

.sub-tabs button {
  min-height: 10.2564cqw;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--app-fluid-sm);
}

.sub-tabs button.is-active {
  color: var(--ui-success-profile);
  border-color: var(--ui-success-profile);
}

.sub-tabs.boxed {
  gap: 3.0769cqw;
  border: 0;
}

.sub-tabs.boxed button {
  border: 0;
  border-radius: 1.2821cqw;
  background: var(--app-sub-tab-bg);
}

.sub-tabs.boxed button.is-active {
  color: var(--ui-text-primary);
  background: var(--ui-success-profile);
}

.search-box {
  height: 12.3077cqw;
  min-height: 46px;
  display: grid;
  grid-template-columns: 8.2051cqw 1fr;
  align-items: center;
  gap: 2.0513cqw;
  margin-bottom: 3.0769cqw;
  padding: 0 3.0769cqw;
  border-radius: 2.0513cqw;
  background: var(--ui-surface);
}

.search-box img {
  width: 5.1282cqw;
  height: 5.1282cqw;
}

.search-box input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ui-text-primary);
  background: transparent;
}

.app-shell.route-search .app-main {
  background: var(--ui-surface-route);
}

.search-page {
  min-height: 100%;
  background: var(--ui-surface-route);
}

.mini-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.0513cqw;
}

.mini-game-grid article {
  overflow: hidden;
  border-radius: 1.5385cqw;
  background: var(--ui-surface);
}

.mini-game-grid img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
}

.mini-game-grid span {
  display: block;
  padding: 1.5385cqw;
  color: rgba(255, 255, 255, .84);
  font-size: var(--ui-font-size-cqw-md);
  line-height: var(--ui-line-height-title-ratio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-summary {
  margin: -1.5385cqw 0 2.5641cqw;
  color: var(--color-text-white-40);
  font-size: var(--ui-font-size-cqw-md);
}

.game-category-layout {
  display: grid;
  grid-template-columns: 21.5385cqw 1fr;
  gap: 2.5641cqw;
  min-height: calc(100% - 24.6154cqw);
}

.game-category-side {
  max-height: calc(100vh - 175px);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 2.0513cqw;
  padding-bottom: 4.1026cqw;
}

.game-category-side button {
  min-height: 18.4615cqw;
  border: 0;
  border-radius: 2.0513cqw;
  color: rgba(255, 255, 255, .7);
  background: var(--ui-surface);
  font-size: 2.8205cqw;
}

.game-category-side button.is-active {
  color: var(--lite-accent-bright, #00e982);
  background: #063f31;
}

.game-category-side img,
.game-category-side i {
  width: 8.9744cqw;
  height: 8.9744cqw;
  display: block;
  margin: 0 auto 1.0256cqw;
  border-radius: 50%;
  object-fit: contain;
}

.game-category-side i {
  background: #273044;
}

.game-category-main {
  min-width: 0;
}

.game-category-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-category-empty,
.sport-category-page .l5-empty-state,
.search-page .l5-empty-state {
  min-height: 46.1538cqw;
  display: grid;
  place-items: center;
  gap: 2.0513cqw;
  color: var(--color-text-white-40);
}

.game-category-empty[hidden],
.sport-category-page .l5-empty-state[hidden],
.search-page .l5-empty-state[hidden] {
  display: none;
}

.app-shell.route-game-category .app-main {
  background: var(--ui-surface-panel-lifted);
}

.app-shell.route-game-category {
  background: var(--ui-surface-panel-lifted);
}

.app-shell.route-game-category [data-route-page="game-category"] {
  background: var(--ui-surface-panel-lifted);
}

.game-category-page {
  min-height: 100%;
  padding: 0 10px;
  background: var(--ui-surface-panel-lifted);
}

.game-category-page .subpage-header {
  height: 48px;
  margin: 0;
  grid-template-columns: 40px 1fr 40px;
}

.game-category-page .subpage-header button {
  width: 40px;
  height: 40px;
}

.game-category-page .subpage-header img {
  width: 20px;
  height: 20px;
}

.game-category-page .subpage-header strong {
  color: #f4f6ff;
  font-size: var(--ui-font-size-xl);
}

.game-category-page .search-box {
  height: 40px;
  min-height: 40px;
  grid-template-columns: 1fr 28px;
  gap: 0;
  margin: 9px 0 10px;
  padding: 0 12px;
  border-radius: 5px;
  background: #171c29;
}

.game-category-page .search-box img {
  grid-column: 2;
  grid-row: 1;
  width: 20px;
  height: 20px;
  justify-self: end;
  opacity: .7;
  filter: brightness(0) saturate(100%) invert(55%) sepia(15%) saturate(1240%) hue-rotate(186deg) brightness(92%) contrast(91%);
}

.game-category-page .search-box input {
  grid-column: 1;
  grid-row: 1;
  color: #f4f6ff;
  font-size: var(--ui-font-size-md);
}

.game-category-page .search-box input::placeholder {
  color: #5d6884;
  opacity: 1;
}

.game-category-page .search-box input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.game-category-page .game-category-layout {
  grid-template-columns: 75px 1fr;
  gap: 10px;
  min-height: calc(100vh - 108px);
}

.game-category-page .game-category-side {
  max-height: calc(100vh - 108px);
  gap: 16px;
  padding-bottom: 16px;
}

.game-category-page .game-category-side button {
  width: 75px;
  min-height: 62px;
  padding: 6px 4px 5px;
  border-radius: 10px;
  color: var(--ui-text-primary);
  background: var(--ui-surface-panel-flat);
  font-size: var(--ui-font-size-xs);
  line-height: 1.15;
  transform: translateY(1px);
}

.game-category-page .game-category-side button.is-active {
  color: var(--ui-text-primary);
  background: linear-gradient(180deg, #31aaff 0%, #0e88df 100%);
}

.game-category-page .game-category-side img,
.game-category-page .game-category-side i {
  width: 38px;
  height: 28px;
  margin: 0 auto 5px;
  border-radius: 0;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .38;
}

.game-category-page .game-category-side button.is-active img,
.game-category-page .game-category-side button.is-active i {
  filter: none;
  opacity: 1;
}

.game-category-page .game-category-main {
  min-width: 0;
}

.game-category-page .sub-tabs.boxed {
  height: 27px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 0 0;
  transform: translateY(1px);
}

.game-category-page .sub-tabs.boxed button {
  min-height: 27px;
  padding: 0;
  border: 1px solid #2b3347;
  border-radius: 7px;
  color: #596682;
  background: transparent;
  font-size: var(--ui-font-size-micro);
}

.game-category-page .sub-tabs.boxed button.is-active {
  border-color: var(--lite-accent, #08c76e);
  color: var(--ui-text-primary);
  background: var(--lite-accent, #08c76e);
}

.game-category-page .game-category-grid {
  margin-top: 9px;
}

.game-category-page .game-category-empty {
  min-height: 610px;
  padding-top: 165px;
  place-content: start center;
  gap: 3px;
  color: #6a7596;
  font-size: var(--ui-font-size-lg);
}

.game-category-page .game-category-empty img {
  width: 108px;
  opacity: .18;
}

.game-category-page.is-layout6 {
  min-height: 100%;
  padding: 0 10px 28px;
  background: var(--ui-surface-panel-muted-2);
}

.game-category-page.is-layout6 .subpage-header {
  height: 49px;
  margin: 0 -10px;
  padding: 0 10px;
  background: var(--ui-surface-panel-lifted);
  grid-template-columns: 40px 1fr 40px;
}

.game-category-page.is-layout6 .subpage-header strong {
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-regular);
}

.game-category-page.is-layout6 .game-category-layout6-top {
  position: relative;
  z-index: 3;
  height: 59px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 2px 0 10px;
}

.game-category-page.is-layout6 .layout6-current-platform {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}

.game-category-page.is-layout6 .layout6-current-platform img {
  max-width: 34px;
  max-height: 22px;
  object-fit: contain;
}

.game-category-page.is-layout6 .layout6-current-platform span {
  display: none;
}

.game-category-page.is-layout6 .layout6-menu-button {
  width: 40px;
  height: 40px;
  display: grid;
  grid-template-columns: repeat(2, 12px);
  grid-template-rows: repeat(2, 12px);
  gap: 3px;
  place-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #111621;
}

.game-category-page.is-layout6 .layout6-menu-button span {
  display: block;
  border-radius: 3px;
  background: var(--ui-surface-white);
}

.game-category-page.is-layout6 .layout6-menu {
  position: absolute;
  right: 2px;
  top: 51px;
  width: 192px;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 8px;
  background: #202635;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .42);
}

.game-category-page.is-layout6 .layout6-menu button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--ui-border-subtle);
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--ui-font-size-md);
}

.game-category-page.is-layout6 .layout6-menu button.is-active {
  background: linear-gradient(90deg, var(--lite-accent, #0ca864), var(--lite-accent, #08d072));
}

.game-category-page.is-layout6 .layout6-menu img,
.game-category-page.is-layout6 .layout6-menu i {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.game-category-page.is-layout6 .search-box,
.game-category-page.is-layout6 .game-category-side,
.game-category-page.is-layout6 .sub-tabs.boxed {
  display: none;
}

.game-category-page.is-layout6 .game-category-layout {
  display: block;
  min-height: auto;
}

.game-category-page.is-layout6 .game-category-main {
  min-width: 0;
}

.game-category-page.is-layout6 .game-category-grid {
  grid-template-columns: 117px 116px 117px;
  grid-auto-rows: 152px;
  gap: 10px;
  margin-top: 0;
}

.game-category-page.is-layout6 .game-category-layout6-card {
  width: 100%;
  height: 152px;
  aspect-ratio: auto;
  border-radius: 9px;
  background: var(--ui-surface);
}

.game-category-page.is-layout6 .game-category-layout6-card:nth-child(n+7) {
  transform: translateY(-1px);
}

.game-category-page.is-layout6 .game-category-layout6-card > img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.game-category-page.is-layout6 .game-category-layout6-card.has-source-sprite::after {
  content: none;
}

.game-category-page.is-layout6 .game-category-layout6-card span {
  position: absolute;
  z-index: 2;
  right: 2px;
  top: 2px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
}

.game-category-page.is-layout6 .game-category-layout6-card span img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

body.layout6-handoff-active::after {
  content: "";
  position: fixed;
  left: 0;
  top: 726px;
  z-index: 4;
  width: 390px;
  height: 118px;
  pointer-events: none;
  background: url("/7000/assets/shared/source/layout6/action-bottom-strip.png") 0 0 / 390px 118px no-repeat;
}

.game-category-page.is-layout6 .game-category-empty {
  min-height: 620px;
  padding-top: 210px;
}

.sport-list {
  display: grid;
  gap: 3.0769cqw;
}

.sport-card {
  min-height: 28.7179cqw;
  display: grid;
  grid-template-columns: 28.7179cqw 1fr;
  gap: 3.0769cqw;
  align-items: center;
  padding: 2.5641cqw;
  border-radius: 2.0513cqw;
  background: var(--ui-surface);
}

.sport-card img {
  width: 100%;
  aspect-ratio: 1.55 / 1;
  border-radius: 1.5385cqw;
  object-fit: cover;
}

.sport-card strong,
.sport-card span {
  display: block;
}

.sport-card strong {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-cqw-xl);
}

.sport-card span {
  margin-top: 1.0256cqw;
  color: rgba(255, 255, 255, .6);
  font-size: var(--ui-font-size-cqw-md);
}

.betby-page,
.game-sports-page {
  padding: 0;
  color: var(--ui-text-primary);
  background: var(--ui-surface-route);
}

.betby-renderer {
  display: none;
}

.app-shell.route-betby .app-main,
.app-shell.route-game-sports .app-main,
[data-route-page="betby"].route-slide-page,
[data-route-page="game-sports"].route-slide-page {
  background: var(--ui-surface-route);
}

.app-shell.route-betby .bottom-tabbar,
.app-shell.route-game-sports .bottom-tabbar {
  display: grid;
}

.betby-page .subpage-header,
.game-sports-page .subpage-header {
  height: 50px;
  display: grid;
  grid-template-columns: 120px 1fr 120px;
  align-items: center;
  margin: 0;
  background: #181c29 !important;
}

.betby-page .subpage-header button,
.game-sports-page .subpage-header button {
  width: 100%;
  height: 50px;
  padding: 0 0 0 clamp(28px, 9.2308cqw, 36px);
  border: 0;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-regular);
  text-align: left;
}

.betby-page .subpage-header img,
.game-sports-page .subpage-header img {
  display: none;
}

.betby-page .subpage-header strong,
.game-sports-page .subpage-header strong {
  visibility: hidden;
}

.sports-source-logo {
  justify-self: end;
  padding-right: 18px;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: var(--ui-font-size-balance);
  font-weight: var(--ui-font-weight-black);
  letter-spacing: 0;
  background: linear-gradient(90deg, #fff8d7 0%, #ffc43d 36%, #ff6f17 61%, #ff2a18 78%, #ffffff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 3px rgba(255, 169, 38, .35);
  white-space: nowrap;
}

.betby-balance {
  justify-self: end;
  width: 75px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: var(--ui-text-primary);
  background: var(--app-betby-bg);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-display-sm);
}

.betby-balance small {
  color: var(--app-betby-accent);
  font-size: var(--ui-font-size-xs);
}

.betby-balance b {
  font-weight: var(--ui-font-weight-regular);
}

.game-sports-page iframe {
  width: 100%;
  height: calc(100% - 12.3077cqw);
  min-height: 132.3077cqw;
  border: 0;
  background: #05070c;
}

.game-sports-page iframe:not([src]) {
  display: none;
}

.clip-doll-card {
  display: grid;
  grid-template-columns: 42px 1fr 185px;
  align-items: center;
  gap: 2.5641cqw;
  min-height: 186px;
  padding: 34px 12px 18px;
  border-radius: 16px;
  color: var(--ui-text-primary);
  border: 4px solid transparent;
  background:
    linear-gradient(#050606, #050606) padding-box,
    repeating-linear-gradient(45deg, #ef233c 0 10px, #fff 10px 20px) border-box;
}

.clip-doll-page {
  min-height: 100vh;
  height: 100%;
  padding: 12px 12px 80px;
  background: #050606;
}

[data-route-page].route-slide-page.clip-doll-page {
  background: #050606;
}

.clip-doll-page .subpage-header,
.app-shell.route-subpage [data-route-page].route-slide-page.clip-doll-page .subpage-header,
.app-shell.route-subpage [data-route-page].route-slide-page [data-ui-block="page-clip-doll"] .subpage-header {
  display: none !important;
}

.clip-doll-balance {
  display: flex;
  align-items: baseline;
  grid-column: 1 / 3;
  gap: 1.0256cqw;
}

.clip-doll-balance strong {
  font-size: 32px;
}

.clip-doll-balance span {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ui-text-primary);
  background: radial-gradient(circle at 35% 30%, #ffe278, #d89a03 68%, #8a5b00);
  box-shadow: inset 0 0 0 4px rgba(80, 45, 0, .32);
  font-weight: var(--ui-font-weight-black);
}

.clip-doll-balance small {
  align-self: end;
  margin-left: -8px;
  font-size: 29px;
  font-weight: var(--ui-font-weight-black);
}

.clip-doll-card > p {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  color: #9aa3b2;
  text-align: center;
}

.clip-doll-card .clip-progress {
  grid-column: 1 / -1;
  order: 4;
}

.retirada-btn {
  min-height: 56px;
  border: 0;
  border-radius: 12px;
  color: #dedede;
  background: linear-gradient(180deg, #5b5b5f, #46464a);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-heavy);
  line-height: var(--ui-line-height-form);
}

.retirada-btn.disabled {
  opacity: .72;
}

.clip-progress {
  height: 2.0513cqw;
  opacity: 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
}

.clip-progress span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--lite-accent-bright, #00e982);
}

.clip-flip-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, .85);
}

.clip-flip-popup {
  width: min(calc(100% - 40px), 350px);
  min-height: 321px;
  margin-top: -2px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 17px;
  padding: 24px 16px;
  border: 2px solid rgba(147, 51, 234, .4);
  border-radius: 5.1282cqw;
  background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(147, 51, 234, .3);
  text-align: center;
}

.clip-flip-popup h2 {
  display: flex;
  align-items: center;
  gap: 2.0513cqw;
  margin: 0;
  color: var(--lite-accent-bright, #00ef72);
  font-size: clamp(20px, 5.641cqw, 24px);
  font-weight: var(--ui-font-weight-black);
}

.clip-flip-popup p {
  margin: 0;
  color: #9ca3af;
  font-size: var(--ui-font-size-md);
}

.clip-flip-cards {
  display: flex;
  gap: 3.0769cqw;
  justify-content: center;
}

.clip-flip-card {
  position: relative;
  width: 23.0769cqw;
  max-width: 90px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 3.0769cqw;
  background: transparent;
  box-shadow: none;
}

.clip-flip-card img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.clip-flip-popup small {
  color: #8b8d9b;
  font-size: var(--ui-font-size-md);
}

.claw-machine-lite {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: 8px 8px 0;
  border: 4px solid #A0855B;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #D2B48C 0%, #C4A574 100%);
}

.claw-window {
  position: relative;
  min-height: 97.1795cqw;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  place-items: center;
  align-content: end;
  gap: 5px 1px;
  overflow: hidden;
  padding: 51px 11px 14px;
  border: 3px solid rgba(100, 150, 200, .5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 60, 120, .9) 0%, rgba(40, 80, 140, .85) 30%, rgba(50, 100, 160, .8) 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
  font-size: var(--ui-font-size-icon-md);
}

.claw-window::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .95) 70%, rgba(255, 255, 255, .72) 70% 100%),
    repeating-linear-gradient(90deg, #dc2626 0 43px, #f4f4f4 43px 86px);
  box-shadow: 0 10px 0 rgba(255, 255, 255, .86);
  pointer-events: none;
}

.claw-window span {
  position: relative;
  z-index: 1;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 230, 255, .4);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200, 230, 255, .5) 0%, rgba(150, 200, 250, .35) 40%, rgba(100, 170, 230, .4) 100%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .45), inset -3px -3px 9px rgba(0, 0, 0, .1), 0 7px 16px rgba(100, 150, 200, .28);
  line-height: var(--ui-line-height-none);
}

.claw-machine-lite footer {
  display: grid;
  grid-template-columns: 64px 149px 64px;
  justify-content: center;
  gap: 28px;
  margin-top: 42px;
}

.claw-machine-lite button,
.clip-share button {
  min-height: 11.2821cqw;
  border: 0;
  border-radius: 2.0513cqw;
  color: var(--ui-text-primary);
  background: #063f31;
  font-weight: var(--ui-font-weight-heavy);
}

.claw-machine-lite footer button {
  min-height: 16.4103cqw;
  border-radius: 999px;
  color: rgba(255, 255, 255, .55);
  background: rgba(135, 206, 250, .12);
  font-size: 44px;
  font-weight: var(--ui-font-weight-light);
  line-height: var(--ui-line-height-none);
}

.claw-machine-lite footer button:nth-child(2) {
  min-height: 48px;
  align-self: center;
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: var(--ui-gradient-danger-button);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-semibold);
  opacity: .5;
}

.claw-machine-lite footer button b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  margin-right: 12px;
  padding: 3px 11px;
  border-radius: 8px;
  color: #292000;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  font-size: var(--ui-font-size-xs);
}

.clip-countdown {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .12);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-control);
  text-align: center;
}

.clip-share {
  display: grid;
  gap: 1.5385cqw;
  margin-top: 20px;
  padding: 3.0769cqw;
  border-radius: 2.0513cqw;
  background: var(--ui-surface);
  color: var(--ui-text-menu);
}

.clip-share > span,
.clip-share-row > span {
  display: block;
  overflow: hidden;
  padding: 1.5385cqw;
  color: #aeb6c4;
  font-size: var(--ui-font-size-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-share strong {
  color: #f3e624;
}

.clip-doll-page[data-clip-source="quick-entry"] {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 80px;
  background: #161823;
  overflow-x: hidden;
  overflow-y: auto;
  color: #fff;
  scrollbar-width: none;
}

.clip-doll-page[data-clip-source="quick-entry"]::-webkit-scrollbar {
  display: none;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-card,
.clip-doll-page[data-clip-source="quick-entry"] .claw-machine-lite,
.clip-doll-page[data-clip-source="quick-entry"] .control-panel {
  width: 100%;
  max-width: 384px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-card {
  position: relative;
  min-height: 187px;
  display: block;
  margin: 0 0 16px;
  padding: 4px;
  border: 0;
  border-radius: 16px;
  background: repeating-linear-gradient(45deg, #f00 0 10px, #fff 10px 20px);
  color: #fff;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-card-frame {
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  background: #161823;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-card-content {
  position: relative;
  z-index: 1;
  padding: 20px 12px 14px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-balance {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-balance span {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 3px solid #b8860b;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd700 0%, #daa520 50%, #b8860b 100%);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3), inset 0 2px 4px rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-balance strong {
  font-size: 30px;
  line-height: 1;
  font-weight: 800;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-balance small {
  align-self: center;
  margin-left: -2px;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.clip-doll-page[data-clip-source="quick-entry"] .retirada-btn {
  min-height: 48px;
  min-width: 132px;
  padding: 8px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #9333ea 0%, #7c3aed 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}

.clip-doll-page[data-clip-source="quick-entry"] .retirada-btn.disabled,
.clip-doll-page[data-clip-source="quick-entry"] .retirada-btn:disabled {
  background: linear-gradient(180deg, #6b6b6b 0%, #555 100%);
  opacity: .72;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-progress {
  height: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #4a4a4a;
  opacity: 1;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-progress span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #eab308 0%, #facc15 100%);
  transition: width .35s ease;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-card p {
  margin: 0;
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-doll-card b {
  color: #facc15;
}

.clip-doll-page[data-clip-source="quick-entry"] .claw-machine-lite {
  position: relative;
  overflow: visible;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.clip-machine-body {
  position: relative;
  overflow: hidden;
  border: 4px solid #a0855b;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #d2b48c 0%, #c4a574 100%);
}

.clip-awning {
  height: 40px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.clip-awning span {
  flex: 1;
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
}

.clip-awning span:nth-child(even) {
  background: linear-gradient(180deg, #fff 0%, #f0f0f0 100%);
}

.clip-awning::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 14px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .72) 100%);
}

.clip-doll-page[data-clip-source="quick-entry"] .claw-window {
  position: relative;
  min-height: 280px;
  height: 280px;
  display: block;
  margin: 8px;
  overflow: hidden;
  padding: 0;
  border: 3px solid rgba(100, 150, 200, .5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 60, 120, .9) 0%, rgba(40, 80, 140, .85) 30%, rgba(50, 100, 160, .8) 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
}

.clip-doll-page[data-clip-source="quick-entry"] .claw-window::before {
  content: none;
}

.claw-container {
  position: absolute;
  top: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left .3s ease-out;
}

.claw-rope {
  width: 4px;
  height: 30px;
  background: linear-gradient(180deg, #8b7355 0%, #6b5344 100%);
  transition: height .6s ease-in-out;
}

.claw-mechanism {
  position: relative;
}

.claw-top-connector {
  width: 24px;
  height: 12px;
  margin: 0 auto;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #daa520 0%, #b8860b 100%);
}

.claw-ring {
  width: 40px;
  height: 32px;
  margin: 0 auto;
  border: 2px solid #b8860b;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);
}

.claw-hole {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 20px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  background: rgba(30, 60, 100, .6);
}

.clip-doll-page[data-clip-source="quick-entry"] .doll-item {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 7px 11px rgba(2, 10, 28, .18));
}

.clip-doll-page[data-clip-source="quick-entry"] .doll-item--animated {
  animation: float var(--float-duration, 3s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

.clip-doll-page[data-clip-source="quick-entry"] .doll-item--animated:nth-of-type(odd) {
  animation-delay: calc(var(--float-delay, 0s) - .38s);
}

.clip-doll-page[data-clip-source="quick-entry"] .claw-window .clip-doll-bubble {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(218, 241, 255, .46);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 400% 200%;
  box-shadow:
    inset 0 0 11px rgba(255, 255, 255, .30),
    inset -5px -6px 11px rgba(24, 57, 96, .12),
    0 7px 14px rgba(4, 12, 30, .16);
  line-height: var(--ui-line-height-none);
}

.clip-doll-page[data-clip-source="quick-entry"] .claw-window .clip-doll-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 27% 22%, rgba(255, 255, 255, .72) 0 7%, rgba(255, 255, 255, 0) 8%),
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, .48) 0 15%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(92, 183, 255, 0) 52%, rgba(255, 255, 255, .10));
  pointer-events: none;
  z-index: 2;
}

.clip-doll-page[data-clip-source="quick-entry"] .claw-window .clip-doll-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, .52),
    inset -1px -1px 0 rgba(34, 103, 155, .22);
  pointer-events: none;
  z-index: 3;
}

.clip-doll-page[data-clip-source="quick-entry"] .screw {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .3);
}

.clip-doll-page[data-clip-source="quick-entry"] .screw.left {
  left: 4px;
}

.clip-doll-page[data-clip-source="quick-entry"] .screw.right {
  right: 4px;
}

.clip-doll-page[data-clip-source="quick-entry"] .machine-base {
  height: 16px;
  border: 4px solid #a0855b;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #c4a574 0%, #a0855b 100%);
}

.clip-doll-page[data-clip-source="quick-entry"] .machine-legs {
  display: flex;
  justify-content: space-between;
  padding: 0 48px;
}

.clip-doll-page[data-clip-source="quick-entry"] .machine-legs span {
  width: 24px;
  height: 24px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #c4a574 0%, #8b7355 100%);
}

.clip-doll-page[data-clip-source="quick-entry"] .control-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 16px;
}

.clip-doll-page[data-clip-source="quick-entry"] .arrow-btn {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(135, 206, 250, .5);
  border-radius: 50%;
  background: rgba(135, 206, 250, .25);
  box-shadow: 0 4px 12px rgba(135, 206, 250, .2);
  color: #fff;
}

.clip-doll-page[data-clip-source="quick-entry"] .arrow-btn svg {
  width: 36px;
  height: 36px;
}

.clip-doll-page[data-clip-source="quick-entry"] .grab-btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 12px 24px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

.clip-doll-page[data-clip-source="quick-entry"] .grab-btn:disabled,
.clip-doll-page[data-clip-source="quick-entry"] .arrow-btn:disabled {
  opacity: .5;
}

.clip-doll-page[data-clip-source="quick-entry"] .grab-btn b {
  min-width: 48px;
  margin-right: 12px;
  padding: 4px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color: #7f1d1d;
  font-size: 14px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-countdown {
  margin: 16px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

.clip-doll-page[data-clip-source="quick-entry"] .bottom-section {
  width: 95%;
  max-width: 439px;
  margin-top: 16px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-share {
  display: block;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  margin: 0 0 12px;
  padding: 16px;
  border: 1px solid rgba(75, 85, 99, .5);
  border-radius: 12px;
  background: rgba(31, 41, 55, .8);
}

.clip-doll-page[data-clip-source="quick-entry"] .share-header {
  display: flex;
  align-items: center;
  grid-template-columns: none;
  gap: 8px;
  height: auto;
  margin-bottom: 12px;
  padding: 0;
  opacity: 1;
}

.clip-doll-page[data-clip-source="quick-entry"] .share-icon {
  display: inline-block;
  padding: 0;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}

.clip-doll-page[data-clip-source="quick-entry"] .share-title {
  display: inline-block;
  padding: 0;
  color: #facc15;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-share-row {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-share-row .link-box {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(17, 24, 39, .8);
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-share-row .link-text {
  display: block;
  overflow: hidden;
  padding: 10px 12px;
  color: #9ca3af;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-share-row .copy-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  max-width: 96px;
  min-height: 36px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--lite-accent, #10b981) 0%, var(--lite-accent-deep, #059669) 100%);
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-quick-share {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clip-doll-page[data-clip-source="quick-entry"] .quick-share-label {
  color: #9ca3af;
  font-size: 12px;
}

.clip-doll-page[data-clip-source="quick-entry"] .share-icons {
  display: flex;
  gap: 12px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-quick-share .share-icon-btn {
  width: 36px;
  height: 36px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-quick-share .share-icon-btn:active {
  transform: scale(.9);
  background: rgba(255, 255, 255, .2);
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-quick-share img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.clip-doll-page[data-clip-source="quick-entry"] .tabs-container {
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(75, 85, 99, .5);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(31, 41, 55, .8);
}

.clip-doll-page[data-clip-source="quick-entry"] .tab-item {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 600;
}

.clip-doll-page[data-clip-source="quick-entry"] .tab-item.is-active {
  border-bottom-color: #facc15;
  background: rgba(250, 204, 21, .1);
  color: #facc15;
}

.clip-doll-page[data-clip-source="quick-entry"] .tab-content {
  min-height: 180px;
  padding: 16px;
  border: 1px solid rgba(75, 85, 99, .5);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(31, 41, 55, .8);
}

.clip-doll-page[data-clip-source="quick-entry"] .rules-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.clip-doll-page[data-clip-source="quick-entry"] .rule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(17, 24, 39, .6);
}

.clip-doll-page[data-clip-source="quick-entry"] .rule-icon {
  flex: 0 0 auto;
  font-size: 18px;
}

.clip-doll-page[data-clip-source="quick-entry"] .rule-text {
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.4;
}

.clip-doll-page[data-clip-source="quick-entry"] .record-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.clip-doll-page[data-clip-source="quick-entry"] .record-item p {
  margin: 0;
  color: #9ca3af;
  font-size: 13px;
}

.clip-doll-page[data-clip-source="quick-entry"] .record-item p:first-child {
  color: #fff;
}

.clip-doll-page[data-clip-source="quick-entry"] .record-item p:last-child {
  color: #facc15;
  font-weight: 800;
}

.clip-doll-page[data-clip-source="quick-entry"] .empty-records {
  padding: 40px 0;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .85);
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-overlay[hidden] {
  display: none;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-popup {
  width: min(calc(100% - 40px), 350px);
  min-height: 321px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 17px;
  padding: 24px 16px;
  border: 2px solid rgba(147, 51, 234, .4);
  border-radius: 20px;
  background: linear-gradient(180deg, #2a2a3e 0%, #1a1a2e 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(147, 51, 234, .3);
  text-align: center;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-popup h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--lite-accent-bright, #00ef72);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-popup p,
.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-popup small {
  margin: 0;
  color: #9ca3af;
  font-size: 14px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-cards {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-card {
  position: relative;
  width: 90px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-card span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  background: linear-gradient(180deg, var(--lite-accent, #16a34a), var(--lite-accent-deep, #047857));
  color: #fff;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-card.flipped span {
  opacity: 1;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-card.selected span {
  background: linear-gradient(180deg, #facc15, #f59e0b);
  color: #2f2200;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-reward {
  display: grid;
  gap: 4px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-reward[hidden],
.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-confirm[hidden] {
  display: none;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-reward span {
  color: #e5e7eb;
  font-size: 13px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-reward strong {
  color: #facc15;
  font-size: 22px;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-flip-confirm {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--lite-accent, #22c55e), var(--lite-accent, #16a34a));
  color: #fff;
  font-weight: 900;
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-dialog {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, .62);
}

.clip-doll-page[data-clip-source="quick-entry"] .clip-dialog[hidden] {
  display: none;
}

.clip-dialog-card {
  width: min(100%, 320px);
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid #374151;
  border-radius: 16px;
  background: #1f2937;
  text-align: center;
}

.clip-dialog-card strong {
  color: #fff;
  font-size: 24px;
}

.clip-dialog-card p {
  margin: 0;
  color: #d1d5db;
}

.clip-dialog-card button {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: #9333ea;
  color: #fff;
  font-weight: 800;
}

.support-card,
.message-list article,
.wallet-detail-card,
.wager-card,
.report-list article,
.account-card,
.setting-list,
.account-total,
.security-list,
.spread-id,
.referral-card,
.spread-stats,
.record-top {
  border-radius: 2.0513cqw;
  background: var(--app-report-card-bg);
}

.support-card {
  min-height: 21.5385cqw;
  display: grid;
  grid-template-columns: 16.4103cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 3.0769cqw;
  padding: 4.1026cqw;
  border: 1px solid rgba(255, 255, 255, .09);
}

.support-card + .support-card {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.support-card img {
  width: 13.3333cqw;
  height: 13.3333cqw;
  border-radius: 50%;
  object-fit: contain;
}

.support-card strong,
.account-card strong {
  font-size: var(--app-fluid-xl);
}

.support-card p,
.message-list p,
.account-card span {
  margin: 1.2821cqw 0 0;
  color: var(--ui-text-primary);
  font-size: clamp(13px, 3.3333cqw, 16px);
  line-height: 1.55;
}

.support-card button {
  min-height: 10.2564cqw;
  border: 0;
  border-radius: 2.0513cqw;
  color: var(--ui-text-primary);
  background: var(--ui-success-profile);
  font-weight: var(--ui-font-weight-black);
}

.message-list {
  display: grid;
  gap: 2.0513cqw;
  margin-top: 4.1026cqw;
}

.message-list article {
  padding: 3.0769cqw;
}

.message-list article[role="button"] {
  cursor: pointer;
}

.empty-list {
  min-height: 180px;
  margin-top: 16px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(18, 23, 34, .62);
  color: var(--color-text-gray-700);
  font-size: var(--ui-font-size-md);
}

.wallet-detail-card {
  min-height: 236.5px;
  display: block;
  padding: 24px 20px;
  border: 1px solid #161823;
  border-radius: 16px;
  background: #222535;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 1px 1px rgba(0, 0, 0, .3);
}

.wallet-detail-card header,
.wallet-detail-card div,
.wager-card header,
.wager-card footer,
.report-summary p,
.setting-list p,
.account-total p,
.security-list p,
.security-list button,
.spread-stats p,
.spread-stats header,
.record-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wallet-detail-card header span,
.wager-card b,
.wallet-detail-card b,
.record-top span {
  color: var(--lite-accent-bright, #06e777);
}

.wallet-detail-card header {
  height: 26px;
  margin-bottom: 6px;
}

.wallet-detail-card header span {
  color: var(--lite-accent, #00d563);
  font-size: var(--ui-font-size-sm);
  line-height: 19.5px;
}

.wallet-detail-card header button {
  height: 26px;
  padding: 4px 8px;
  border: 0;
  border-radius: 12px;
  color: var(--ui-primary-2);
  background: rgba(251, 165, 49, .15);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-form);
}

.wallet-detail-card > strong {
  color: #ffe44f;
  display: block;
  height: 60px;
  margin: 0 0 24px;
  padding: 0;
  font-size: 40px;
  font-weight: var(--ui-font-weight-black);
  line-height: 60px;
}

.wallet-detail-card > strong::after {
  content: none;
}

.wallet-detail-card span,
.wager-card span,
.ledger-list small {
  color: #9fa9bc;
}

.wallet-detail-card header span,
.wallet-detail-card div span,
.wager-card footer span,
.ledger-list span small,
.ledger-list strong small {
  color: var(--lite-accent-bright, #00ee83);
}

.wallet-detail-card div {
  align-items: flex-start;
  padding-top: 16px;
  border-top: 1px dashed rgba(0, 0, 0, .28);
}

.wallet-detail-card div p {
  width: 50%;
  display: block;
  margin: 0;
}

.wallet-detail-card div p:last-child {
  text-align: right;
}

.wallet-detail-card div span {
  display: block;
  margin-bottom: 6px;
  color: var(--lite-accent, #00d563);
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-form);
}

.wallet-detail-card div b {
  display: block;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg-plus);
  font-weight: var(--ui-font-weight-heavy);
  line-height: 25.5px;
}

.wallet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0 20px;
}

.wallet-actions button {
  min-height: 14.359cqw;
  border: 0;
  border-radius: 3.0769cqw;
  color: var(--ui-text-primary);
  background: var(--ui-surface);
  font-weight: var(--ui-font-weight-black);
  font-size: var(--ui-font-size-lg);
}

.wallet-actions button:first-child {
  background: #f8a52d;
}

.wager-card {
  display: grid;
  gap: 3.0769cqw;
  padding: 4.359cqw;
  border-radius: 2.8205cqw;
  background: var(--ui-surface-panel-muted);
}

.wager-card i {
  height: 2.0513cqw;
  overflow: hidden;
  border-radius: 999px;
  background: #224d43;
}

.wager-card i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-success-profile);
}

.sub-pills,
.filter-row {
  display: flex;
  gap: 2.0513cqw;
  overflow-x: auto;
  margin: 5.1282cqw 0 3.5897cqw;
}

.sub-pills button,
.filter-row button,
.record-top button {
  min-height: 9.2308cqw;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  padding: 0 4.1026cqw;
  color: var(--ui-success-profile);
  background: var(--ui-surface-panel-muted);
  font-weight: var(--ui-font-weight-black);
}

.recharge-record-page .record-top .record-date-filter > button {
  width: 120px;
  height: 34px;
  min-height: 34px;
  justify-content: center;
  border-color: var(--app-record-filter-border);
  border-radius: 7px;
  background: var(--ui-surface-panel-muted);
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.recharge-record-page .record-top .record-date-filter > button span {
  margin-left: 6px;
  color: var(--ui-success-electric);
}

.record-date-options {
  position: absolute;
  top: 47px;
  left: -2px;
  width: 357px;
  min-height: 109px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  padding: 14px 12px;
  border: 1px solid var(--app-record-filter-border);
  border-radius: 10px;
  background: var(--ui-surface-panel-muted);
}

.record-date-options[hidden] {
  display: none;
}

.record-date-options button {
  width: 160px;
  height: 38px;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  color: var(--ui-success-electric);
  background: transparent;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
}

.record-date-options button.is-active {
  color: var(--ui-text-primary);
  background: var(--app-record-filter-active-bg);
}

.sub-pills button.is-active {
  border-color: var(--ui-success-profile);
}

.ledger-list,
.report-list {
  display: grid;
  gap: 2.0513cqw;
}

.ledger-list article,
.report-list article {
  min-height: 17.9487cqw;
  display: grid;
  grid-template-columns: 11.2821cqw minmax(0, 1fr) auto;
  align-items: center;
  gap: 2.0513cqw;
  padding: 3.0769cqw 0;
  border-bottom: 1px solid var(--app-list-divider);
  background: transparent;
}

.ledger-list article i {
  width: 10.2564cqw;
  height: 10.2564cqw;
  display: grid;
  place-items: center;
  border-radius: 2.5641cqw;
  background: var(--app-ledger-icon-bg);
  font-style: normal;
}

.ledger-list article img {
  width: 5.1282cqw;
  height: 5.1282cqw;
  object-fit: contain;
}

.ledger-list article.source-wallet-tx i {
  color: var(--agent-theme-primary);
  background: #111827;
}

.ledger-list article.source-wallet-tx .tx-icon-spin {
  color: #f6a629;
  background: #383846;
}

.ledger-list article.source-wallet-tx em {
  display: flex;
  gap: 6px;
  font-style: normal;
}

.ledger-list article.source-wallet-tx em b {
  display: inline-grid;
  min-height: 18px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--agent-theme-primary);
  border-radius: 5px;
  color: var(--agent-theme-primary);
  background: rgba(var(--lite-accent-rgb, 5, 215, 106), .12);
  font-size: var(--ui-font-size-micro);
  font-weight: var(--ui-font-weight-regular);
}

.ledger-list article.source-wallet-tx em b.tag-gameplay {
  border-color: #5a75bd;
  color: #cbd9ff;
  background: #3d5eaa;
}

.ledger-list article.source-wallet-tx em b.tag-bet,
.ledger-list article.source-wallet-tx em b:last-child {
  border-color: #d89f17;
  color: #ffd15c;
  background: rgba(216, 159, 23, .28);
}

.ledger-list article.source-wallet-tx em b.tag-transfer,
.ledger-list article.source-wallet-tx em b.tag-success {
  border-color: var(--agent-theme-primary);
  color: var(--agent-theme-primary);
  background: rgba(var(--lite-accent-rgb, 5, 215, 106), .12);
}

.ledger-list article.source-wallet-tx.is-negative strong {
  color: var(--ui-text-primary);
}

.ledger-list span,
.ledger-list strong {
  display: grid;
  gap: 1.0256cqw;
}

.ledger-list strong,
.report-list b {
  color: var(--ui-success-profile);
  font-size: var(--app-fluid-xl);
  text-align: right;
}

.ledger-list span {
  font-weight: var(--ui-font-weight-bold);
}

.ledger-list small {
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-regular);
}

.report-list article {
  min-height: 15.3846cqw;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 3.0769cqw;
  border-bottom: 0;
  background: var(--app-report-card-bg);
}

.report-list span {
  display: block;
  margin-top: 2.0513cqw;
  color: var(--ui-success-profile);
}

.report-summary {
  position: sticky;
  bottom: var(--app-tabbar-height);
  display: grid;
  gap: 2.0513cqw;
  margin: 8.2051cqw -3.0769cqw -6.1538cqw;
  padding: 4.1026cqw;
  background: var(--app-report-summary-bg);
}

.red {
  color: var(--ui-danger-bright) !important;
}

.yellow {
  color: var(--app-status-yellow) !important;
}

.account-card {
  display: grid;
  grid-template-columns: 17.9487cqw minmax(0, 1fr);
  align-items: center;
  gap: 4.1026cqw;
  padding: 4.1026cqw;
  border: 1px solid rgba(255, 255, 255, .12);
}

.account-card img {
  width: 15.3846cqw;
  height: 15.3846cqw;
  border-radius: 50%;
}

.setting-list,
.account-total,
.security-list,
.spread-stats {
  display: grid;
  gap: 0;
  padding: 3.0769cqw;
  margin-top: 3.0769cqw;
}

.setting-list p,
.account-total p,
.security-list p,
.security-list button,
.spread-stats p,
.spread-stats header {
  min-height: 12.3077cqw;
  margin: 0;
  border-bottom: 1px solid var(--ui-border-subtle);
}

.security-list button {
  width: 100%;
  border: 0;
  color: var(--color-text-gray-700);
  background: transparent;
  font: inherit;
  text-align: left;
}

.setting-list button {
  width: 7.1795cqw;
  height: 7.1795cqw;
  border: 0;
  border-radius: 1.2821cqw;
  background: var(--ui-success-profile);
}

.setting-list img {
  width: 4.1026cqw;
  height: 4.1026cqw;
}

.security-list {
  margin-top: 0;
}

.security-page {
  background: #181c29 url("../assets/generated/security-page-source.png") top center / 100% auto no-repeat;
}

.security-page > :not(.page-busy) {
  opacity: 0;
}

.security-list b {
  color: var(--ui-text-primary);
  font-weight: var(--ui-font-weight-medium);
}

.security-verify-page[data-security-type="phone"] .security-form {
  padding-top: 8px;
}

.security-verify-page[data-security-type="phone"] .security-form p {
  margin: 0 0 6px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-form);
}

.security-verify-page[data-security-type="phone"] .security-form small {
  display: block;
  margin-bottom: 23px;
  color: var(--lite-accent-bright, #00e977);
  font-size: var(--ui-font-size-micro);
  line-height: var(--ui-line-height-2xs);
}

.security-verify-page[data-security-type="phone"] label {
  display: none;
}

.security-verify-page[data-security-type="phone"] .security-form button {
  width: 278px;
  height: 36px;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--ui-success-profile);
}

.security-verify-page[data-security-type="phone"] {
  background: #181c29 url("../assets/generated/security-verify-phone-source.png") top center / 100% auto no-repeat;
}

.security-bind-page[data-security-type="phone"] {
  background: #181c29 url("../assets/generated/security-bind-phone-source.png") top center / 100% auto no-repeat;
}

.security-confirm-page[data-security-type="phone"] {
  background: #181c29 url("../assets/generated/security-confirm-phone-source.png") top center / 100% auto no-repeat;
}

.security-verify-page[data-security-type="phone"] > :not(.page-busy),
.security-bind-page[data-security-type="phone"] > :not(.page-busy),
.security-confirm-page[data-security-type="phone"] > :not(.page-busy) {
  opacity: 0 !important;
}

.credit-score-page {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  background: #090f1f url("../assets/generated/credit-score-source-v2.png") top center / 100% auto no-repeat;
  color: var(--ui-text-primary);
}

.credit-score-page > :not(.page-busy) {
  opacity: 0 !important;
}

.credit-score-page::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 390px;
  height: 844px;
  pointer-events: none;
  background: url("../assets/generated/credit-score-source-v2.png") top center / 390px 844px no-repeat;
}

.credit-score-page .subpage-header {
  height: 80px;
  background: #080f1f;
}

.credit-score-page .subpage-header strong {
  color: rgba(255,255,255,.58);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-bold);
}

.credit-score-body {
  padding: 26px 20px 40px;
  background: #1b202c;
}

.credit-score-summary p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px;
}

.credit-score-summary strong {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-display-md);
  font-weight: var(--ui-font-weight-heavy);
  letter-spacing: 0;
  line-height: var(--ui-line-height-display-md);
}

.credit-score-summary b {
  color: var(--lite-accent-bright, #00ec83);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-heavy);
}

.credit-score-summary i {
  display: block;
  height: 14px;
  border-radius: 10px;
  background: var(--lite-accent-bright, #00e977);
}

.credit-score-summary div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 8px;
  color: var(--lite-accent-bright, #00e977);
  font-size: var(--ui-font-size-sm);
}

.credit-score-summary div span {
  text-align: center;
}

.credit-score-summary div span:first-child {
  text-align: left;
}

.credit-score-summary div span:last-child {
  text-align: right;
}

.credit-score-status {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--lite-accent-bright, #00e977);
  border-radius: 8px;
  background: rgba(var(--lite-accent-rgb, 0, 236, 131), .16);
  color: #eefaf3;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-bold);
  line-height: var(--ui-line-height-form);
}

.credit-score-notice {
  margin-top: 20px;
  max-height: 518px;
  overflow: hidden;
  padding: 15px 12px 18px;
  border-radius: 7px;
  background: #343434;
  color: #e8e8e8;
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-sm);
}

.credit-score-notice h2 {
  margin: 0 0 14px;
  color: #ffd867;
  font-size: var(--ui-font-size-section);
  font-weight: var(--ui-font-weight-heavy);
  line-height: var(--ui-line-height-compact);
}

.credit-score-notice p {
  margin: 0 0 12px;
}

.credit-score-notice p:nth-of-type(-n + 2) {
  color: #ffd867;
  font-weight: var(--ui-font-weight-heavy);
}

.spread-id {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin-bottom: 10px;
  font-size: var(--ui-font-size-md);
  line-height: var(--ui-line-height-record);
}

.referral-card {
  display: grid;
  grid-template-columns: 18.4615cqw minmax(0, 1fr);
  column-gap: 3.8462cqw;
  row-gap: 9px;
  padding: 10px 15px;
}

.referral-card h2,
.referral-card .share-row {
  grid-column: 1 / -1;
}

.referral-card h2 {
  margin: 0;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-record);
  padding-bottom: 13px;
  border-bottom: 1px solid #2a2e3f;
}

.qr-wrap {
  width: 75px;
  height: 100px;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: url("../assets/generated/spread-qr-card-source.png") center / 100% 100% no-repeat;
}

.qr-box {
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  padding: 5px;
  background: transparent;
  opacity: 0;
}

.qr-box img {
  width: 65px;
  height: 65px;
  display: block;
  object-fit: cover;
  border-radius: 0;
  background: var(--ui-surface-white);
}

.qr-wrap button {
  width: 100%;
  height: 28px;
  display: block;
  border: 0;
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--ui-font-size-micro);
  line-height: 28px;
  white-space: nowrap;
  opacity: 0;
}

.qr-box:not(:has(img)) {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 1.2821cqw;
  color: #10131d;
  background: repeating-linear-gradient(45deg, #fff 0 5px, #111 5px 10px);
  font-weight: var(--ui-font-weight-black);
}

.spread-link {
  display: grid;
  align-content: start;
  gap: 7px;
}

.spread-link p {
  position: relative;
  min-height: 83.6px;
  margin: 0;
  padding: 5px 35px 5px 5px;
  border: 1px solid var(--ui-border-page-header);
  border-radius: 5px;
  color: var(--ui-text-menu);
  background: var(--ui-surface);
  word-break: break-all;
  font-size: var(--ui-font-size-micro);
  line-height: var(--ui-line-height-xs);
}

.spread-link p::before,
.spread-link p::after {
  content: "";
  position: absolute;
  right: 8px;
  width: 18px;
  height: 18px;
  background: center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.spread-link p::before {
  top: 18px;
  background-image: url("/7000/assets/shared/svg/share.svg");
}

.spread-link p::after {
  bottom: 19px;
  background-image: url("/7000/assets/shared/svg/my-copy.svg");
}

.spread-link p button {
  position: absolute;
  right: 5px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  color: transparent;
  background: transparent;
  font-size: var(--ui-font-size-zero);
}

.spread-link p button:first-of-type {
  top: 15px;
}

.spread-link p button:last-of-type {
  bottom: 16px;
}

.spread-stats a {
  color: var(--app-spread-link);
}

.spread-table-head,
.spread-table-row {
  display: grid;
  align-items: center;
  min-height: 44px;
  text-align: center;
}

.spread-table-head.is-performance,
.spread-table-row.is-performance {
  grid-template-columns: 1.2fr 1.35fr 1fr 1fr 1.05fr;
}

.spread-table-head.is-commission {
  grid-template-columns: 1.2fr .9fr 1.1fr 1.2fr 1fr;
}

.spread-table-head b {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-2xs);
}

.spread-table-row {
  min-height: 44px;
  background: var(--ui-surface-control-soft);
}

.spread-table-row span {
  color: var(--app-spread-value);
  font-size: var(--ui-font-size-2xs);
  line-height: var(--ui-line-height-compact);
}

.source-empty-illustration {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 420px;
  color: #8c92a0;
  font-size: var(--ui-font-size-section);
}

.source-empty-illustration div {
  position: relative;
  width: 86px;
  height: 86px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2b3040, #242936);
  opacity: .9;
}

.source-empty-illustration div::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 16px;
  width: 49px;
  height: 38px;
  border-top: 4px solid var(--ui-surface-subpage-header);
  border-bottom: 4px solid var(--ui-surface-subpage-header);
  box-shadow: 0 14px 0 var(--ui-surface-subpage-header);
  opacity: .82;
}

.source-empty-illustration div::after {
  content: "";
  position: absolute;
  right: -19px;
  top: 28px;
  width: 42px;
  height: 42px;
  border: 7px solid #424757;
  border-radius: 50%;
  box-shadow: 25px 25px 0 -20px #424757;
}

.record-top {
  min-height: 14.359cqw;
  padding: 0 2.0513cqw;
  background: transparent;
}

.recharge-record-page .record-top {
  position: relative;
  align-items: flex-start;
  padding: 7px 18px 0;
}

.recharge-record-page[data-filter-open="true"]::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0 auto auto 0;
  width: 100%;
  height: 226px;
  pointer-events: none;
  background: url("../assets/generated/recharge-record-filter-source-top.png") top center / 100% auto no-repeat;
}

.recharge-record-page .record-top strong {
  margin-top: 9px;
}

.recharge-record-page[data-record-variant="panda19"] {
  min-height: 100%;
  color: #3e4451;
  background: #f4f7ff url("../assets/generated/recharge-record-panda19-source-top.png") left top / 390px 410px no-repeat;
  padding: 0 13px 24px;
}

.recharge-record-page[data-record-variant="panda19"] > :not(.activity-source-loading) {
  opacity: .01;
}

.recharge-record-page[data-record-variant="panda19"] .subpage-header {
  height: 44px;
  grid-template-columns: 42px 1fr 42px;
  margin: 0 -13px 37px;
  background: #eaf1ff;
}

.recharge-record-page[data-record-variant="panda19"] .subpage-header button {
  width: 42px;
  height: 44px;
  padding-left: 15px;
}

.recharge-record-page[data-record-variant="panda19"] .subpage-header img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(55%) sepia(49%) saturate(2681%) hue-rotate(207deg) brightness(100%) contrast(101%);
}

.recharge-record-page[data-record-variant="panda19"] .subpage-header strong {
  color: #3f4450;
  font-size: var(--ui-font-size-balance);
  font-weight: var(--ui-font-weight-bold);
}

.recharge-record-page[data-record-variant="panda19"] .record-top {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  margin-bottom: 10px;
}

.recharge-record-page[data-record-variant="panda19"] .record-top .record-date-filter > button {
  width: 66px;
  height: 32px;
  min-height: 32px;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 3px;
  color: #343943;
  background: #eaf1ff;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-heavy);
}

.recharge-record-page[data-record-variant="panda19"] .record-top .record-date-filter > button span {
  margin-left: 2px;
  color: #343943;
}

.recharge-record-page[data-record-variant="panda19"] .record-top strong {
  margin: 0;
  color: #3f4450;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
  white-space: nowrap;
}

.recharge-record-page[data-record-variant="panda19"] .record-top strong span {
  color: #ff7a00;
  font-weight: var(--ui-font-weight-heavy);
}

.recharge-record-page[data-record-variant="panda19"][data-filter-open="true"]::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0 auto auto 0;
  display: block;
  width: 100%;
  height: 410px;
  pointer-events: none;
  background: url("../assets/generated/recharge-record-panda19-filter-source-top.png") left top / 390px 410px no-repeat;
}

.recharge-record-page[data-record-variant="panda19"] .record-date-options {
  top: 38px;
  left: 0;
  width: 358px;
  min-height: 92px;
  gap: 10px 22px;
  padding: 10px 12px;
  border: 0;
  border-radius: 3px;
  background: var(--ui-surface-white);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}

.recharge-record-page[data-record-variant="panda19"] .record-date-options button {
  width: 154px;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  color: #8292b4;
  background: #e2ebff;
  font-size: var(--ui-font-size-xs);
}

.recharge-record-page[data-record-variant="panda19"] .record-date-options button.is-active {
  color: #4f75ff;
  background: #d8e4ff;
}

.recharge-record-page[data-record-variant="panda19"] .record-list {
  display: grid;
  gap: 10px;
}

.panda19-record-item {
  min-height: 88px;
  padding: 11px 10px 8px;
  border-radius: 3px;
  background: #e7f0ff;
}

.panda19-record-item-main,
.panda19-record-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.panda19-record-item-main h2 {
  margin: 0;
  color: #3c414b;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-heavy);
  line-height: var(--ui-line-height-compact);
}

.panda19-record-item-main p {
  margin: 14px 0 0;
  color: #7f8fb2;
  font-size: var(--ui-font-size-sm);
  line-height: var(--ui-line-height-compact);
}

.panda19-record-item-main strong {
  color: #3c414b;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-heavy);
  line-height: var(--ui-line-height-compact);
  white-space: nowrap;
}

.panda19-record-meta {
  align-items: center;
  margin-top: 0;
}

.panda19-record-meta button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  color: #7f8fb2;
  background: transparent;
  font-size: var(--ui-font-size-xs);
  line-height: var(--ui-line-height-compact);
}

.panda19-record-meta button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panda19-record-meta i {
  color: #9fb0cf;
  font-style: normal;
  font-size: var(--ui-font-size-2xs);
}

.panda19-record-meta em {
  flex: 0 0 auto;
  font-size: var(--ui-font-size-xs);
  font-style: normal;
  line-height: var(--ui-line-height-compact);
}

.panda19-record-meta em.is-success {
  color: var(--lite-accent, #19bb78);
}

.panda19-record-meta em.is-fail {
  color: #ee4639;
}

.panda19-record-meta em.is-pending {
  color: #ff7a00;
}

.record-date-filter {
  position: relative;
  z-index: 3;
}

.record-top strong {
  font-size: var(--app-fluid-lg);
  font-weight: var(--ui-font-weight-medium);
}

.empty-state {
  min-height: 56.4103cqw;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3.0769cqw;
  color: rgba(255, 255, 255, .28);
}

.empty-state img {
  width: 28.2051cqw;
  opacity: .45;
}

.activity-detail-panel {
  width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  background: #151923;
}

.ui-drawer[data-side="right"] .activity-detail-panel {
  width: 100%;
}

.activity-detail-header {
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #202635;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.activity-detail-header .back-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  color: var(--ui-text-primary);
  background: var(--ui-border);
  font-size: var(--ui-font-size-icon-lg);
  line-height: var(--ui-line-height-none);
}

.activity-detail-header small,
.activity-detail-card span {
  display: block;
  color: var(--lite-accent-bright, #8df1b6);
  font-size: var(--ui-font-size-2xs);
  font-weight: var(--ui-font-weight-heavy);
  text-transform: uppercase;
}

.activity-detail-header strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg);
  line-height: var(--ui-line-height-tight-plus);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-detail-body {
  display: grid;
  gap: 12px;
  height: calc(100% - 104px);
  padding: 14px;
  overflow: auto;
}

.activity-detail-card,
.activity-detail-metrics article,
.activity-detail-rank-list article {
  border: 1px solid var(--ui-border-subtle);
  border-radius: 8px;
  background: #1d2330;
}

.activity-detail-card {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.activity-detail-card strong {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xl);
  line-height: var(--ui-line-height-title-ratio);
}

.activity-detail-card p {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: var(--ui-font-size-sm);
  line-height: 1.45;
}

.activity-detail-hero {
  min-height: 142px;
  align-content: end;
  background:
    radial-gradient(circle at 86% 18%, rgba(var(--lite-accent-rgb, 63, 223, 126), .42), transparent 32%),
    linear-gradient(135deg, #21412f, #18202e 70%);
}

.activity-detail-metrics,
.activity-detail-rank-list {
  display: grid;
  gap: 8px;
}

.activity-detail-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.activity-detail-metrics article {
  display: grid;
  gap: 5px;
  padding: 10px;
}

.activity-detail-metrics strong,
.activity-detail-rank-list strong {
  font-size: var(--ui-font-size-section);
}

.activity-detail-rank-list article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.activity-detail-rank-list b {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #102019;
  background: var(--lite-accent, #17d36b);
  font-size: var(--ui-font-size-xs);
}

.activity-detail-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.activity-detail-modes button,
.activity-detail-primary {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  color: #102019;
  background: var(--lite-accent, #18d76d);
  font-weight: var(--ui-font-weight-black);
}

.activity-detail-modes button:not(.is-active) {
  color: var(--ui-text-primary);
  background: #272d3c;
}

.activity-redeem-field {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, .7);
  font-size: var(--ui-font-size-xs);
}

.activity-redeem-field input {
  min-height: 42px;
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ui-text-primary);
  background: #10141d;
}

.activity-detail-status {
  min-height: 46px;
  display: grid;
  align-items: center;
  padding: 0 14px;
  color: rgba(255, 255, 255, .68);
  background: #10141d;
  font-size: var(--ui-font-size-xs);
}

.ui-drawer.is-active .vip-source-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.activity-detail-drawer .activity-detail-panel,
.ui-drawer[data-drawer="tools"] .right-tools-panel,
.l5-search-drawer .l5-search-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  background: var(--ui-surface-panel-muted-2);
}

.l5-search-panel .vip-source-header,
.activity-detail-panel .vip-source-header,
.right-tools-panel .vip-source-header {
  min-height: 64px;
  grid-template-columns: 60px 1fr 92px;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
  background: var(--ui-surface-panel-muted-2);
}

.l5-search-panel .vip-source-back,
.activity-detail-panel .vip-source-back,
.right-tools-panel .vip-source-back {
  min-height: 0;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: var(--ui-font-size-zero);
}

.l5-search-panel .vip-source-logo,
.activity-detail-panel .vip-source-logo,
.right-tools-panel .vip-source-logo {
  justify-self: center;
  width: 142px;
  height: 38px;
  object-fit: contain;
}

.l5-search-panel .vip-source-actions button,
.activity-detail-panel .vip-source-actions button,
.right-tools-panel .vip-source-actions button {
  min-height: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(18, 25, 39, .92);
  box-shadow: inset 0 0 0 1px var(--ui-border-subtle);
}

.l5-search-panel .vip-source-actions img,
.activity-detail-panel .vip-source-actions img,
.right-tools-panel .vip-source-actions img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.l5-search-panel .vip-source-support img,
.activity-detail-panel .vip-source-support img,
.right-tools-panel .vip-source-support img {
  width: 100%;
  height: 100%;
}

.vip-source-actions .vip-source-bonus img,
.l5-search-panel .vip-source-actions .vip-source-bonus img,
.activity-detail-panel .vip-source-actions .vip-source-bonus img,
.right-tools-panel .vip-source-actions .vip-source-bonus img {
  width: 108%;
  height: 108%;
  transform: translateY(-1px);
}

.activity-detail-body,
.right-tools-scroll,
.search-source-scroll {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: auto;
}

.activity-detail-body {
  padding: 14px;
}

.right-tools-scroll {
  display: grid;
  align-content: start;
  gap: 10px;
}

.source-header-meta,
.source-header-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.activity-redeem-drawer .activity-redeem-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  background: var(--app-drawer-bg, var(--ui-surface-panel-muted-2));
}

.activity-redeem-drawer .activity-redeem-drawer-header {
  grid-template-columns: 60px 1fr 92px;
  gap: 8px;
  min-height: 64px;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
  background: var(--color-bg-200, var(--ui-surface-panel-muted-2));
}

.activity-redeem-drawer .activity-redeem-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  overflow: auto;
  background: var(--app-drawer-bg, var(--ui-surface-panel-muted-2));
}

.activity-redeem-drawer .activity-standalone-page {
  min-height: 100%;
  background: transparent;
}

.activity-redeem-drawer .activity-standalone-page > .subpage-header {
  display: none;
}

.activity-convite-drawer .activity-convite-panel,
.activity-clip-doll-drawer .activity-clip-doll-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  background: var(--app-drawer-bg, var(--ui-surface-panel-muted-2));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--ui-duration) ease, opacity var(--ui-duration) ease;
}

.ui-drawer.is-active .activity-convite-panel,
.ui-drawer.is-active .activity-clip-doll-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.activity-convite-drawer .activity-drawer-body,
.activity-clip-doll-drawer .activity-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--app-drawer-bg, var(--ui-surface-panel-muted-2));
}

.rebate-relief-drawer .rebate-relief-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ui-text-primary);
  background: var(--ui-surface-panel-dark);
  transform: translateX(100%);
  transition: transform var(--ui-duration) ease;
}

.rebate-relief-drawer.is-active .rebate-relief-panel {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.rebate-relief-drawer .rebate-relief-drawer-header {
  flex: 0 0 auto;
  min-height: 69px;
  grid-template-columns: 60px 1fr 60px;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
  background: var(--ui-surface-panel-muted-2);
}

.rebate-relief-drawer .activity-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--ui-surface-panel-dark);
}

.rebate-relief-drawer [data-include="./blocks/page-activity-rebate-relief.html"],
.rebate-relief-drawer [data-ui-block="page-activity-rebate-relief"],
.rebate-relief-drawer .activity-rebate-relief-page {
  height: 100%;
  min-height: 0;
}

.rebate-relief-drawer .activity-rebate-relief-content {
  height: auto;
}

.activity-rebate-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.activity-rebate-rate-grid[hidden] {
  display: none;
}

.activity-rebate-rate-grid article {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(var(--lite-accent-rgb, 0, 235, 112), .22);
  border-radius: 8px;
  background: #151925;
}

.activity-rebate-rate-grid span {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: var(--ui-font-size-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-rebate-rate-grid strong {
  color: var(--lite-accent-bright, #2eea75);
  font-size: var(--ui-font-size-lg);
}

.activity-rebate-claim.is-loss {
  background: #242938;
}

.activity-rebate-claim.disabled,
.activity-rebate-claim:disabled {
  color: rgba(255, 255, 255, .6);
  background: #242938;
}

.activity-rebate-sheet {
  position: fixed;
  inset: 0;
  z-index: 12;
}

.activity-rebate-sheet[hidden] {
  display: none;
}

.activity-rebate-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
}

.activity-rebate-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70%;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 18px 18px 0 0;
  background: #101522;
  box-shadow: 0 -18px 42px rgba(0, 0, 0, .35);
}

.activity-rebate-sheet-panel header {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  min-height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.activity-rebate-sheet-panel header strong {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg);
}

.activity-rebate-sheet-panel header button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .08);
  font-size: var(--ui-font-size-md);
}

.activity-rebate-sheet-body {
  overflow: auto;
  padding: 8px 16px 20px;
}

.activity-rebate-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.activity-rebate-sheet-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.activity-rebate-sheet-row b {
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-sm);
}

.activity-rebate-sheet-row small,
.activity-rebate-sheet-empty {
  color: rgba(255, 255, 255, .55);
  font-size: var(--ui-font-size-xs);
}

.activity-rebate-sheet-row strong {
  color: var(--lite-accent-bright, #2eea75);
  font-size: var(--ui-font-size-md);
  white-space: nowrap;
}

.withdraw-amount-row input,
.withdraw-password-row input,
.withdraw-method-form input,
.withdraw-method-form select {
  min-width: 0;
  flex: 1;
  height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--app-form-text);
  font: inherit;
}

.app-shell.route-withdraw-password,
.app-shell.route-withdraw-password-completion,
.app-shell.route-withdraw-real-name {
  background: var(--ui-surface-card-deep);
}

.app-shell.route-withdraw-password {
  --app-drawer-bg: #161823;
  --color-bg-payment-item: #13151f;
  --app-divider-color: #2a2e3f;
  --color-focus: var(--theme-color-900);
  --rounded-small: .3125rem;
  --withdraw-pw-rem: 1rem;
  --withdraw-pw-toolbar-height: 50px;
  --withdraw-pw-page-pad: clamp(13px, 3.2922cqw, 18px);
  --withdraw-pw-box: 2.75rem;
}

.app-shell.route-withdraw-records {
  background: var(--app-withdraw-record-bg);
}

.app-shell.route-withdraw-password .app-main,
.app-shell.route-withdraw-password-completion .app-main,
.app-shell.route-withdraw-real-name .app-main,
.app-shell.route-withdraw-password [data-route-page],
.app-shell.route-withdraw-password-completion [data-route-page],
.app-shell.route-withdraw-real-name [data-route-page] {
  background: var(--ui-surface-card-deep);
}

.app-shell.route-withdraw-records .app-main,
.app-shell.route-withdraw-records [data-route-page] {
  background: var(--app-withdraw-record-bg);
}

.app-shell.route-withdraw-password .app-main,
.app-shell.route-withdraw-password-completion .app-main,
.app-shell.route-withdraw-real-name .app-main,
.app-shell.route-withdraw-records .app-main {
  inset: 0 !important;
  padding: 0 !important;
}

.app-shell.route-withdraw-password [data-route-page],
.app-shell.route-withdraw-password-completion [data-route-page],
.app-shell.route-withdraw-real-name [data-route-page],
.app-shell.route-withdraw-records [data-route-page] {
  min-height: 100%;
}

.source-toolbar {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  height: 50px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  background: var(--ui-surface-card-deep);
  color: var(--ui-text-page);
}

.source-toolbar button {
  width: 54px;
  height: 50px;
  border: 0;
  background: transparent;
}

.source-toolbar button img {
  width: 23px;
  height: 23px;
  filter: brightness(0) invert(1);
}

.source-toolbar strong {
  overflow: hidden;
  color: #f8f8fb;
  font-size: var(--ui-font-size-xl);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-none);
  text-align: center;
  white-space: nowrap;
}

.app-shell.route-withdraw-real-name .source-toolbar strong {
  color: #c7cbd4;
}

.app-shell.route-withdraw-password .withdraw-password-page,
.app-shell.route-withdraw-password-completion .withdraw-password-completion-page,
.app-shell.route-withdraw-real-name .withdraw-real-name-page,
.app-shell.route-withdraw-records .withdraw-records-page {
  min-height: 100%;
  padding: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.app-shell.route-withdraw-password [data-route-page="withdraw-password"] > .withdraw-password-page {
  min-height: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
}

.app-shell.route-withdraw-records .withdraw-records-page {
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.app-shell.route-withdraw-password,
.app-shell.route-withdraw-password .app-main,
.app-shell.route-withdraw-password [data-route-page],
.app-shell.route-withdraw-password .withdraw-password-page,
.app-shell.route-withdraw-password-completion,
.app-shell.route-withdraw-password-completion .app-main,
.app-shell.route-withdraw-password-completion [data-route-page],
.app-shell.route-withdraw-password-completion .withdraw-password-completion-page,
.app-shell.route-withdraw-real-name,
.app-shell.route-withdraw-real-name .app-main,
.app-shell.route-withdraw-real-name [data-route-page],
.app-shell.route-withdraw-real-name .withdraw-real-name-page {
  background: var(--ui-surface-input) !important;
}

.app-shell.route-withdraw-password .pwa-l5-bar,
.app-shell.route-withdraw-password .l5-header,
.app-shell.route-withdraw-password .bottom-tabbar,
.app-shell.route-withdraw-password [data-floating-activity],
.app-shell.route-withdraw-password .l5-support,
.app-shell.route-withdraw-password .l5-side-handle {
  display: none !important;
}

.app-shell.route-withdraw-password .app-main {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
  transform: none !important;
}

.app-shell.route-withdraw-password [data-route-page].route-base-page {
  display: none !important;
}

.app-shell.route-withdraw-password [data-route-page="withdraw-password"] {
  position: absolute !important;
  z-index: 80 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: auto !important;
  transform: none !important;
  transition: none !important;
}

.app-shell.route-withdraw-password [data-route-page="withdraw-password"].has-unified-slide-shell {
  display: block !important;
}

.app-shell.route-withdraw-records,
.app-shell.route-withdraw-records .app-main,
.app-shell.route-withdraw-records [data-route-page],
.app-shell.route-withdraw-records .withdraw-records-page {
  background: var(--app-withdraw-main-bg) !important;
}

.app-shell.route-withdraw-password .source-toolbar,
.app-shell.route-withdraw-password-completion .source-toolbar,
.app-shell.route-withdraw-real-name .source-toolbar,
.app-shell.route-withdraw-records .withdraw-records-toolbar {
  margin: 0 !important;
}

.app-shell.route-withdraw-password .subpage-header,
.app-shell.route-withdraw-password-completion .subpage-header,
.app-shell.route-withdraw-real-name .subpage-header {
  background: var(--ui-surface-input) !important;
}

.app-shell.route-withdraw-records .subpage-header {
  background: var(--app-withdraw-main-bg) !important;
}

.withdraw-password-source-form {
  display: block;
  width: calc(100% - (var(--withdraw-pw-page-pad) * 2));
  margin: var(--withdraw-pw-page-pad) auto 0;
  padding: 0;
  color: var(--ui-text-primary);
}

.withdraw-password-source-form h1 {
  margin: 0 0 24px;
  color: var(--accent-color-yellow, #fba531);
  font-size: var(--withdraw-pw-rem);
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1.5;
}

.withdraw-pin-field {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, var(--withdraw-pw-box));
  justify-content: space-between;
  align-items: start;
  gap: 0;
  width: 100%;
  margin: 0 0 20px;
  padding: 25px 1px 0;
  color: var(--color-text-white-100, #fff);
}

.withdraw-pin-field span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: var(--color-text-white-100, #fff);
  font-size: .75rem;
  font-weight: var(--ui-font-weight-medium);
  line-height: 1rem;
}

.withdraw-pin-field .hidden-input {
  position: absolute;
  inset: 25px 0 auto 0;
  z-index: 2;
  width: 100%;
  height: var(--withdraw-pw-box);
  border: 0;
  outline: 0;
  color: transparent;
  /* This input spans all six visual cells. Its native caret would therefore
     render at the left edge of the overlay instead of inside the active cell. */
  caret-color: transparent;
  background: transparent;
}

.withdraw-pin-field i {
  position: relative;
  width: var(--withdraw-pw-box);
  height: var(--withdraw-pw-box);
  border: 1px solid var(--app-divider-color, #2a2e3f);
  border-radius: var(--rounded-small);
  background: var(--color-bg-payment-item, #13151f);
}

.withdraw-pin-field i.is-filled::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ui-surface-white);
  transform: translate(-50%, -50%);
}

/* The input handler marks exactly one empty visual cell as .is-caret. */
.withdraw-pin-field:focus-within i.is-caret::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: var(--ui-text-primary);
  transform: translate(-50%, -50%);
  animation: withdraw-pin-caret-blink 1s steps(1, end) infinite;
}

@keyframes withdraw-pin-caret-blink {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

.withdraw-pin-field:focus-within i.is-caret,
.withdraw-pin-field:focus-within i:first-of-type:not(.is-filled) {
  border-color: var(--color-focus, var(--theme-color-900));
}

.withdraw-confirm-pin {
  display: grid;
  grid-template-columns: repeat(6, clamp(34px, 9.2308cqw, 42px));
  justify-content: space-between;
  width: 100%;
  margin: 5.1282cqw 0 0;
  padding: 0;
}

.withdraw-confirm-pin .hidden-input {
  inset: 0;
  height: clamp(34px, 9.2308cqw, 42px);
}

.withdraw-confirm-pin i {
  display: block;
  width: clamp(34px, 9.2308cqw, 42px);
  height: clamp(34px, 9.2308cqw, 42px);
}

.withdraw-password-source-form p {
  width: 100%;
  max-width: none;
  margin: 16px 0 28px;
  color: var(--accent-color-yellow, #fba531);
  font-size: .75rem;
  font-weight: var(--ui-font-weight-medium);
  line-height: 1.2;
}

.withdraw-password-source-form > button {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: .625rem;
  color: var(--ui-text-primary);
  background: var(--theme-color-gradient-100);
  font-size: .875rem;
  font-weight: var(--ui-font-weight-semibold);
  line-height: 1.5;
}

.withdraw-realname-source-form {
  display: grid;
  gap: 0;
  padding: 33px 16px 0;
  color: #c7cbd4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.withdraw-realname-source-form h6 {
  margin: 0 0 11px;
  color: #c7cbd4;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--ui-line-height-sm);
}

.withdraw-realname-source-form .realname-text-field {
  position: relative;
  display: block;
  margin: 0 0 16px;
}

.withdraw-realname-source-form .realname-text-field input {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  padding: 0 40px 0 10px;
  color: var(--agent-theme-primary);
  background: var(--ui-surface-panel-flat);
  font-size: var(--ui-font-size-md);
}

.withdraw-realname-source-form .realname-text-field input::placeholder {
  color: var(--agent-theme-primary);
  opacity: 1;
}

.withdraw-realname-source-form [data-real-name-clear] {
  position: absolute;
  right: 0;
  top: 7px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
}

.withdraw-realname-source-form [data-real-name-clear]::before,
.withdraw-realname-source-form [data-real-name-clear]::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 8px;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .62);
}

.withdraw-realname-source-form [data-real-name-clear]::before {
  transform: rotate(45deg);
}

.withdraw-realname-source-form [data-real-name-clear]::after {
  transform: rotate(-45deg);
}

.withdraw-realname-source-form .realname-pin-field {
  margin: 0 0 34px;
  padding-top: 0;
}

.withdraw-realname-source-form .realname-pin-field .hidden-input {
  inset: 0 0 auto 0;
}

.withdraw-realname-source-form > button {
  justify-self: center;
  width: 262px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  color: var(--ui-text-primary);
  background: var(--agent-theme-primary);
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-regular);
}

.realname-source-loading {
  position: absolute;
  left: 50%;
  top: 412px;
  width: 24px;
  height: 24px;
  border: 4px dotted var(--lite-accent, #05d76a);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: .95;
}

.withdraw-password-complete-source {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 77px 16px 0;
  color: var(--ui-text-page);
}

.withdraw-password-complete-source img {
  width: 55px;
  height: 55px;
  margin-bottom: 17px;
}

.withdraw-password-complete-source strong {
  margin-bottom: 17px;
  font-size: var(--ui-font-size-lg);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-password-complete-source p {
  width: 100%;
  margin: 0 0 45px;
  color: var(--ui-text-page);
  font-size: var(--ui-font-size-lg);
  line-height: 23px;
}

.withdraw-password-complete-source div {
  display: grid;
  grid-template-columns: 165px 165px;
  gap: 20px;
}

.withdraw-password-complete-source button {
  height: 40px;
  border-radius: 8px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-xs);
  line-height: 13px;
}

.withdraw-password-complete-source button:first-child {
  border: 0;
  background: var(--agent-theme-primary);
}

.withdraw-password-complete-source button:last-child {
  border: 1px solid var(--agent-theme-primary);
  background: transparent;
}

.withdraw-password-row,
.withdraw-method-form label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 10px 18px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--app-withdraw-field-bg);
  color: var(--color-text-gray-700);
}

.withdraw-account-list,
.withdraw-links,
.withdraw-record-tabs,
.record-list,
.withdraw-method-list,
.withdraw-method-form,
.audit-detail-card {
  margin: 12px 18px;
}

.withdraw-account-empty[hidden],
.withdraw-account-list[hidden],
.record-list[hidden],
.cashier-empty[hidden] {
  display: none !important;
}

.withdraw-account-list {
  display: grid;
  gap: 8px;
}

.withdraw-account-list button,
.withdraw-links button,
.withdraw-record-tabs button,
.withdraw-method-form button {
  border: 0;
  border-radius: 8px;
  color: var(--ui-text-soft-white);
  background: rgba(255, 255, 255, .09);
}

.withdraw-account-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
}

.withdraw-account-list button.is-selected {
  outline: 1px solid rgba(var(--lite-accent-rgb, 64, 222, 133), .65);
  background: rgba(var(--lite-accent-rgb, 64, 222, 133), .14);
}

.withdraw-account-list small,
.record-list span,
.withdraw-method-list span,
.audit-detail-card span {
  display: block;
  color: rgba(255, 255, 255, .58);
  font-size: var(--ui-font-size-xs);
}

.withdraw-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.withdraw-record-tabs {
  display: flex;
  align-self: stretch;
  height: 54px;
  margin: 0;
  min-width: 0;
}

.withdraw-links button,
.withdraw-method-form button {
  min-height: 36px;
  padding: 0 8px;
  font-size: var(--ui-font-size-xs);
}

.withdraw-records-toolbar {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: stretch;
  height: 54px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--app-withdraw-record-bg);
}

.withdraw-records-toolbar > button {
  width: 54px;
  height: 54px;
  border: 0;
  background: transparent;
}

.withdraw-records-toolbar > button img {
  width: 23px;
  height: 23px;
  filter: brightness(0) invert(1);
}

.withdraw-record-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  color: var(--agent-theme-primary);
  background: transparent;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
  line-height: var(--app-withdraw-tab-line-height);
  white-space: nowrap;
}

.withdraw-record-tabs button:first-child {
  width: 129px;
}

.withdraw-record-tabs button:last-child {
  width: 145px;
}

.withdraw-record-tabs button.is-active {
  color: var(--ui-text-page);
}

.withdraw-record-tabs button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 2px;
  background: var(--agent-theme-primary);
}

.withdraw-records-page .record-top {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 34px;
  margin: 22px 18px 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.withdraw-records-page .record-top button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  border: 1px solid var(--agent-theme-primary);
  border-radius: 8px;
  color: var(--ui-text-soft-white);
  background: transparent;
  font-size: var(--ui-font-size-section);
}

.withdraw-records-page .record-top button span {
  color: var(--agent-theme-primary);
  font-size: var(--ui-font-size-balance);
  line-height: var(--ui-line-height-none);
}

.withdraw-records-page .record-top strong {
  color: var(--ui-text-page);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
  text-align: right;
}

.withdraw-records-page .record-top strong span {
  color: var(--agent-theme-primary);
}

.withdraw-records-page .withdraw-audit-total {
  color: var(--ui-text-page);
  font-size: var(--ui-font-size-md);
  white-space: nowrap;
}

.withdraw-records-page .withdraw-audit-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-self: end;
  width: 122px;
  height: 26px;
  padding: 0 10px 0 14px;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 10px;
  color: var(--ui-text-page);
  background: transparent;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-records-page .withdraw-audit-select span {
  color: var(--ui-text-soft-muted) !important;
}

.withdraw-records-page .record-top:has(.withdraw-audit-total) {
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 10px;
}

.withdraw-records-page .record-date-options {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 109px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: url("../assets/generated/withdraw-subview-filter-source.png") center / 100% 100% no-repeat;
}

.withdraw-records-page .record-date-options[hidden] {
  display: none !important;
}

.withdraw-records-page .record-date-options button {
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  color: var(--agent-theme-primary);
  background: transparent;
  font-size: var(--ui-font-size-md);
  opacity: 0;
}

.withdraw-records-page .record-date-options button.is-active {
  color: var(--ui-text-primary);
  background: var(--agent-theme-primary);
}

.withdraw-records-page .record-list {
  margin-top: 20px;
}

.withdraw-records-page .empty-state {
  margin-top: 124px;
}

.withdraw-records-page[data-withdraw-record-tab="audit"] .empty-state {
  margin-top: 80px;
}

.withdraw-records-page .empty-state img {
  width: 120px;
  height: 130px;
  opacity: 1;
}

.withdraw-records-page .empty-state span {
  margin-top: 0;
  color: #90949d;
  font-size: var(--ui-font-size-md);
  opacity: 0;
}

.record-list {
  display: grid;
  gap: 8px;
}

.record-list article,
.withdraw-method-list article,
.audit-detail-card p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .075);
  color: var(--ui-text-soft-white);
}

.withdraw-audit-page {
  background: var(--ui-surface-card-deep);
}

.withdraw-audit-page .audit-detail-card {
  margin: 16px 16px 0;
  overflow: hidden;
  border-radius: 6px;
  background: #151923;
}

.withdraw-audit-page .audit-detail-card p {
  min-height: 45px;
  margin: 0;
  padding: 0 16px;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: transparent;
  color: var(--ui-text-page);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-audit-page .audit-detail-card p:last-child {
  border-bottom: 0;
}

.withdraw-audit-page .audit-detail-card span,
.withdraw-audit-page .audit-detail-card b {
  color: var(--ui-text-page);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-regular);
}

.withdraw-limit-game-page {
  background: var(--ui-surface-card-deep);
}

.withdraw-limit-game-page .limit-game-source-line {
  height: 1px;
  margin: 67px 10px 0;
  background: #293145;
}

.withdraw-limit-game-page .record-list {
  margin: 0;
}

.withdraw-limit-game-page .empty-state {
  min-height: 0;
  margin-top: 178px;
  gap: 6px;
}

.withdraw-limit-game-page .empty-state img {
  width: 120px;
  opacity: .42;
}

.withdraw-limit-game-page .empty-state span {
  color: #90949d;
  font-size: var(--ui-font-size-lg);
}

.withdraw-method-list button {
  min-width: 72px;
  min-height: 32px;
  border: 0;
  border-radius: 8px;
  color: var(--app-control-dark-text);
  background: var(--agent-theme-primary-strong);
  font-weight: var(--ui-font-weight-bold);
}

.app-shell .recharge-record-page[data-record-variant="panda19"] .subpage-header {
  position: relative;
  top: auto;
  display: grid !important;
  height: 44px;
  margin: 0 -13px 37px;
  background: #eaf1ff !important;
}

.app-shell.route-recharge-record-panda19 .app-main,
.app-shell.route-recharge-record-panda19 [data-route-page],
.app-shell.route-recharge-record-panda19 .recharge-record-page[data-record-variant="panda19"] {
  background: #f4f7ff !important;
}

.app-shell.route-recharge-record-panda19 {
  min-height: 100vh;
  background: #f4f7ff !important;
}

.app-shell.route-recharge-record-panda19 .recharge-record-page[data-record-variant="panda19"] {
  min-height: 100vh;
  background: #f4f7ff url("../assets/generated/recharge-record-panda19-source-top.png") left top / 390px 410px no-repeat !important;
}

.app-shell.route-recharge-record-panda19 .app-main {
  inset: 0;
  padding-bottom: 0;
}

.app-shell.route-recharge-record-panda19 .bottom-tabbar,
.app-shell.route-recharge-record-panda19 .pwa-l5-bar,
.app-shell.route-recharge-record-panda19 .l5-header,
.app-shell.route-recharge-record-panda19 [data-floating-activity],
.app-shell.route-recharge-record-panda19 .l5-support,
.app-shell.route-recharge-record-panda19 .l5-side-handle {
  display: none !important;
}

.app-shell .recharge-record-page[data-record-variant="panda19"] .record-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.app-shell .recharge-record-page[data-record-variant="panda19"] .record-list article.panda19-record-item {
  display: block;
  min-height: 88px;
  padding: 11px 10px 8px;
  border-radius: 3px;
  background: #e7f0ff;
  color: #3c414b;
}

.app-shell .recharge-record-page[data-record-variant="panda19"] .record-list span {
  display: inline;
  color: inherit;
  font-size: inherit;
}

.app-shell.route-recharge-record-panda19 .recharge-record-page[data-record-variant="panda19"].is-source-loading {
  background: #171b27 !important;
}

.app-shell.route-recharge-record-panda19 .recharge-record-page[data-record-variant="panda19"].is-source-loading > :not(.activity-source-loading) {
  display: none !important;
}

.app-shell.route-recharge-record-panda19 .recharge-record-page[data-record-variant="panda19"].is-source-loading .activity-source-loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ui-surface-card-deep);
  z-index: 1000;
}

body.panda19-source-loading::before,
body.panda19-source-loading::after {
  content: "";
  position: fixed;
  z-index: 2147483646;
  pointer-events: none;
}

body.panda19-source-loading::before {
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ui-surface-card-deep);
}

body.panda19-source-loading::after {
  left: 50%;
  top: 50%;
  width: 170px;
  height: 56px;
  background: url("https://d1vz3dyxe3sv5v.cloudfront.net/upload/2026/06/27/820732276408453.png") center / contain no-repeat;
  transform: translate(-50%, -50%);
}

.withdraw-method-form {
  padding: 12px 0 16px;
  border-radius: 8px;
  background: var(--app-withdraw-method-panel-bg);
}

.withdraw-method-form h2 {
  margin: 0 18px 8px;
  color: var(--ui-text-primary);
  font-size: var(--ui-font-size-lg);
}

.withdraw-method-form button {
  display: block;
  width: calc(100% - 36px);
  min-height: 42px;
  margin: 14px 18px 0;
  color: var(--app-control-dark-text);
  background: var(--agent-theme-primary-strong);
  font-weight: var(--ui-font-weight-bold);
}

.dynamic-detail-card {
  display: grid;
  gap: 12px;
  margin: 14px 18px;
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .075);
  color: var(--ui-text-soft-white);
}

.dynamic-detail-card small,
.dynamic-detail-card em,
.security-form p {
  margin: 0;
  color: var(--color-text-white-40);
  font-size: var(--ui-font-size-xs);
  font-style: normal;
  line-height: 1.5;
}

.dynamic-detail-card h2 {
  margin: 0;
  font-size: var(--ui-font-size-balance);
  line-height: var(--ui-line-height-tight-plus);
}

.dynamic-detail-card p {
  margin: 0;
  color: var(--ui-text-menu);
  line-height: 1.55;
}

.dynamic-detail-card button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  color: var(--app-control-dark-text);
  background: var(--agent-theme-primary-strong);
  font-weight: var(--ui-font-weight-heavy);
}

.dynamic-route-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ui-border-subtle);
  color: var(--app-dynamic-meta-text);
  font-size: var(--ui-font-size-xs);
}

.dynamic-route-meta b {
  max-width: 64%;
  overflow-wrap: anywhere;
  color: var(--ui-text-primary);
  text-align: right;
}