:root {
  --p: #A134F1;
  --p-hover: #8B1FE0;
  --p-2: #7B61FF;
  --p-3: #C084FC;
  --p-soft: #A134F11a;
  --p-line: #A134F138;
  --p-shadow: #A134F126;
  --bg: #F4F6FA;
  --bg-2: #ffffff;
  --bg-sub: #F4F6FA;
  --bg-tab: #ffffff;
  --text: #424653;
  --text-2: #1f285a;
  --text-3: #7e88ad;
  --muted: #7e88ad;
  --line: #d7ddeb;
  --card: #ffffff;
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 13px;
  --font-md: 14px;
  --font-lg: 15px;
  --font-xl: 16px;
  --font-2xl: 17px;
  --topbar-h: 45px;
  --tabbar-h: 62px;
  --max-width: 488px;
  --container-pad: 12px;
  --radius: 14px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --space-3: 10px;
}

html, body, #app {
  height: 100% !important;
  overflow: hidden !important;
  background: #eef0f8 !important;
  color: #424653 !important;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif !important;
}

.shell {
  background: #eef0f8 !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.shell {
  justify-content: center !important;
}

.main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #f4f6fa !important;
  color: #424653 !important;
  box-shadow: none;
}

.main > .page {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box !important;
  padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}

.logo-img {
  height: 40px !important;
  width: auto !important;
  max-width: 168px !important;
  object-fit: contain !important;
}

.bg, .blob, .lines {
  opacity: 0.35 !important;
}

.topbar {
  position: sticky !important;
  top: 0;
  z-index: 50 !important;
  pointer-events: auto !important;
}

.home .topbar {
  height: 45px !important;
  padding: 0 12px !important;
  background: #f4f6fa !important;
  border-bottom: 0 !important;
  grid-template-columns: 1fr auto 1fr !important;
}

.home .topbar .left {
  position: relative !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.back-btn {
  z-index: 6 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.bg,
.bg * {
  pointer-events: none !important;
}

.topbar::after {
  display: none !important;
}

.home .topbar .title {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: #0b1028 !important;
}

.topbar .logo,
.topbar .logo-img,
.mine-logo {
  width: 33px !important;
  height: 33px !important;
  max-width: 33px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  justify-self: start;
}

.discover .head-logo {
  width: 148px !important;
  height: 42px !important;
  max-width: 148px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border-radius: 0 !important;
  background: transparent !important;
  justify-self: start;
}

.logo-box {
  width: 168px !important;
  height: 48px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

.topbar .download {
  height: 25px !important;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #A134F1;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-self: end;
}

.topbar .download .download-img {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.topbar .download::after {
  content: "立即下载APP";
}

.topbar .lang-btn {
  height: 26px;
  min-width: 32px;
  margin-right: 6px;
  border-radius: 999px;
  background: #fff;
  color: #A134F1;
  font-size: 12px;
  font-weight: 700;
}

.home .container {
  padding: 8px 12px 16px !important;
}

.login-card {
  margin-top: 10px !important;
  border-bottom: 0 !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 16px rgba(80, 90, 140, 0.06);
}

.balance {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0;
}

.currency {
  font-size: 16px !important;
}

.vip {
  display: inline-block;
  width: 118px;
  height: 32px;
  margin-left: 6px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent center / contain no-repeat !important;
  color: transparent !important;
  font-size: 10px !important;
  overflow: hidden;
  vertical-align: middle;
}

.vip-badge {
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}

.quick-grid {
  gap: 4px !important;
}

.quick-icon {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  filter: none !important;
}

.quick-label {
  font-size: 11px !important;
  color: #1f285a !important;
  font-weight: 500 !important;
}

.home .login-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
}

.home .login-left {
  flex: 0 0 auto !important;
}

.home .login-card .quick-grid {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  justify-content: space-between !important;
  gap: 0 !important;
}

.home .quick-item {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.home .cats-sticky,
.home .cats-card {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  background: #f4f6fa !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  top: auto !important;
  overflow: visible !important;
  z-index: 40 !important;
}

.home .cats-sticky.hb-pin,
.home .cats-card.hb-pin {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(100vw, 488px) !important;
  z-index: 80 !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: #f4f6fa !important;
}

.cats-card {
  margin-top: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.cats {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 58px !important;
  padding: 2px 0 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  background: #f4f6fa !important;
  scrollbar-width: none !important;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  position: relative !important;
  z-index: 8 !important;
}

.cats::-webkit-scrollbar {
  display: none !important;
}

.cats-sticky {
  position: relative !important;
  z-index: 8 !important;
}

.cat {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 68px !important;
  height: auto !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
}

.cat-img-wrapper {
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.cat.active .cat-img-wrapper {
  background: transparent !important;
}

.cat-img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 16px !important;
  filter: none !important;
  opacity: 1 !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
}

.cat-label,
.cat.active .cat-label {
  display: none !important;
}

.cat.active .cat-img {
  box-shadow: none !important;
  transform: none !important;
}

.hb-cat-lab {
  display: none !important;
}

.feed-card .brand-logo {
  object-fit: contain !important;
  background: transparent !important;
}

.cat.active .hb-cat-lab {
  color: #A134F1;
  font-weight: 700;
}

#hb-avatars {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 18, 40, 0.45);
}

#hb-avatars.is-open {
  display: flex;
}

.hb-avatar-card {
  width: min(420px, 100%);
  margin: 0 12px 24px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
}

.hb-avatar-card h3 {
  margin: 0 0 12px;
  text-align: center;
  font-size: 16px;
}

.hb-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.hb-avatar-grid button {
  border: 0;
  padding: 0;
  background: transparent;
}

.hb-avatar-grid img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.hb-avatar-close {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: #f2f3f8;
  font-weight: 700;
}

#hb-home-edit {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 18, 40, 0.45);
}

#hb-home-edit.is-open {
  display: flex;
}

.hb-home-text {
  display: block;
  width: 100%;
  min-height: 96px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #e6e8f0;
  border-radius: 12px;
  resize: vertical;
  font: inherit;
}

.hb-home-save {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: #A134F1;
  color: #fff;
  font-weight: 700;
}

.home {
  background: #f4f6fa !important;
  padding-bottom: 16px !important;
}

.container,
.providers {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  background: #f4f6fa !important;
}

.providers {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 8px !important;
  padding-bottom: 12px !important;
  position: relative !important;
  z-index: 1 !important;
}

.provider-card {
  margin: 0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 3px 8px rgba(75, 106, 184, 0.18);
  overflow: hidden;
}

.home .provider-card .p-img,
.home .p-img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1380 / 480 !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #f4f7ff !important;
}

.hb-cat-holder {
  display: block;
  width: 100%;
  overflow: visible;
}

.home .providers {
  padding-top: 10px !important;
  position: relative;
  z-index: 1;
}

.home .providers .provider-card:first-child {
  margin-top: 0 !important;
}

.tab.hb-tab-back .lab {
  color: #7a35f0 !important;
  font-weight: 700 !important;
}

.home .game-info-overlay,
.home .game-title {
  display: none !important;
}

.loginwindow .brand-logo {
  width: min(240px, 68vw) !important;
  height: 72px !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}

.home .provider-card {
  position: relative !important;
}

.hb-hall-ribbon {
  position: absolute;
  z-index: 4;
  left: 12px;
  top: 8px;
  padding: 2px 10px 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7a18, #ff3b30);
  color: #fff;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
  box-shadow: none;
}

.hb-hall-face {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  bottom: 0;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 40%;
  box-sizing: border-box;
  padding: 22px 6px 8px;
  background: transparent;
  pointer-events: none;
  text-align: center;
}

.hb-hall-badge {
  width: 40px;
  height: 40px;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.hb-hall-logo {
  width: 40px;
  height: 40px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

.hb-hall-badge.is-text .hb-hall-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #7a35f0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.hb-hall-copy {
  flex: none;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.hb-hall-copy strong {
  display: block;
  margin-top: 6px;
  color: #1a1a1a;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 800;
  text-align: center;
  text-shadow: none;
}

.hb-hall-copy em {
  display: block;
  margin-top: 2px;
  color: #7a8496;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.4px;
  font-weight: 600;
  text-align: center;
}

#hb-top {
  display: none !important;
}

.back-to-top {
  right: max(12px, calc((100vw - 488px) / 2 + 12px)) !important;
  left: auto !important;
  z-index: 80 !important;
}

.hb-hall-return {
  display: block;
  width: 100%;
  height: 42px;
  margin: 4px 0 8px;
  border: 0;
  border-radius: 999px;
  background: #7a35f0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

#hb-top.is-on {
  display: block;
}

.hb-hall-enter {
  margin-top: 8px;
  margin-left: 0;
  flex: none;
  align-self: center;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 28px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7b3ff2, #9b62ff);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  white-space: nowrap;
}

.hb-offer-desc {
  margin: 0;
  padding: 8px 12px 0;
  color: #5c647a;
  font-size: 13px;
  line-height: 1.55;
}

.hb-offer-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px 12px;
}

.hb-offer-actions button {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f3f0fa;
  color: #5c647a;
  font-size: 13px;
  font-weight: 700;
}

.hb-offer-actions .primary {
  background: linear-gradient(90deg, #7a35f0, #b06bff);
  color: #fff;
}

.hb-offer-actions .primary:disabled {
  background: #d9dbe3;
  color: #fff;
}

.float {
  top: auto !important;
  bottom: 78px !important;
  right: 8px !important;
  transform: none !important;
  gap: 6px !important;
}

.float-hb span,
.float-item.secondary span,
.hb-jackpot span {
  display: none !important;
}

.float-hb .float-icon-img,
.float-item.secondary .hb-fico,
.float-item.primary .hb-fico {
  width: 70px !important;
  height: auto !important;
  max-height: 78px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}

.hb-close-img {
  height: 28px;
  width: auto;
  display: block;
}

.float-item {
  width: 64px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #636072 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  animation: none !important;
}

.hb-fico {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  margin: 0 auto 2px;
}

.float-item.secondary svg,
.float-hb svg,
.float-icon {
  display: none !important;
}

.float-item.primary svg {
  display: block !important;
  width: 28px;
  height: 28px;
}

.hb-jackpot {
  color: #636072 !important;
  border: 0;
  background: transparent !important;
  line-height: 1.15;
}

.float-icon-img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain;
}

.float-close {
  height: auto !important;
  padding: 0 !important;
  font-size: 0 !important;
  background: transparent !important;
  border: 0;
}

.tabbar {
  position: fixed !important;
  left: 0 !important;
  bottom: 0 !important;
  transform: none;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  padding: 6px 8px calc(4px + env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 -3px 8px rgba(75, 106, 184, 0.12);
  gap: 0 !important;
  z-index: 40;
}

@media (min-width: 769px) {
  html, body, #app, .shell {
    background: #eef0f8 !important;
  }

  .main {
    width: 488px !important;
    max-width: 488px !important;
    box-shadow: 0 0 40px rgba(75, 106, 184, 0.18);
  }

  .tabbar {
    left: 50% !important;
    transform: translateX(-50%);
    width: 488px !important;
  }

  .float {
    right: calc((100vw - 488px) / 2 + 8px) !important;
  }
}

@media (max-width: 768px) {
  html, body, #app, .shell {
    background: #f4f6fa !important;
  }
}

.tab {
  color: #636072 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}

.tab.active {
  color: #9231f5 !important;
  font-weight: 700 !important;
}

.tab .ico-img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  filter: none !important;
}

.offers,
.mine,
.page-sub {
  background: #F4F6FA !important;
}

.offers .act,
.offers .img {
  border-radius: 14px;
}

.offers .img,
.activity .a-img,
.activity-list-page .act-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}

.offers .cap {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.app-tabs__inner {
  gap: 8px !important;
  padding: 8px 12px !important;
}

.app-tabs__tab {
  background: #fff !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #636072 !important;
}

.app-tabs__tab.is-active {
  background: #A134F1 !important;
  color: #fff !important;
}

.app-tabs__tab.is-active::after {
  display: none !important;
}

.mine .asset-card {
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  min-height: 64px !important;
  padding: 0 36px !important;
  box-shadow: none !important;
}

.asset-card > span {
  font-size: 14px !important;
}

.asset-value {
  font-size: 22px !important;
}

.discover-head {
  height: 52px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

.discover-row {
  background: #fff !important;
  border-radius: 16px !important;
  min-height: 64px;
}

.discover-list {
  width: min(100% - 24px, 420px) !important;
  gap: 10px !important;
}

.level-pill {
  height: auto !important;
  padding: 2px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.level-pill .pill-ico {
  width: 148px !important;
  height: 64px !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 8px !important;
}

.level-pill span {
  display: none !important;
}

.mine {
  background: #f4f6fa !important;
}

.shortcut-grid {
  background: #f4f6fa !important;
  min-height: 0 !important;
  padding: 10px 0 26px !important;
}

.shortcut {
  color: #0b1028 !important;
  gap: 5px !important;
}

.shortcut img {
  width: 44px !important;
  height: 44px !important;
  padding: 7px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  background: #f3e8ff !important;
  border-radius: 14px !important;
}

.shortcut span {
  margin-top: 5px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #0b1028 !important;
}

.feature-strip {
  min-height: 0 !important;
  padding: 8px 20px 0 !important;
  background: #fff !important;
}

.feature-btn img {
  width: auto !important;
  height: 39px !important;
  max-width: 156px !important;
  object-fit: contain !important;
}

.mine-list {
  background: #f4f6fa !important;
  border-top: 0 !important;
  margin: 0 15px !important;
}

.mine-row {
  min-height: 55px !important;
  color: #0b1028 !important;
  border-bottom: 1px solid #d7ddeb !important;
}

.mine-row .row-icon img {
  width: 28px !important;
  height: 28px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  animation: none !important;
  background: #f3e8ff !important;
  border-radius: 8px !important;
}

.row-label {
  margin-left: 11px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0b1028 !important;
}

.asset-card {
  min-height: 55px !important;
  padding: 0 16px !important;
}

.asset-card > span {
  font-size: 15px !important;
  font-weight: 500 !important;
}

.mine .vip-badge {
  width: auto !important;
  height: 16px !important;
  object-fit: contain !important;
}

.float {
  overflow: visible !important;
  width: 72px !important;
  align-items: center !important;
  z-index: 90 !important;
  pointer-events: auto !important;
  right: 6px !important;
}

.float-item {
  width: 68px !important;
  overflow: visible !important;
}

.hb-float-pic {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  display: block !important;
}

@media (min-width: 769px) {
  .float {
    right: calc((100vw - 488px) / 2 + 8px) !important;
  }
}

.float-item.float-hb,
.float-item.primary,
.float-item.secondary,
.float-item.hb-rank,
.float-item.hb-jackpot {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  width: 68px !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.discover-head {
  display: grid !important;
  grid-template-columns: 148px 1fr !important;
  align-items: center !important;
  padding: 0 12px !important;
}

.offers {
  background: #f4f6fa !important;
}

.offers .app-tabs {
  background: #f4f6fa !important;
  padding: 8px 12px 0 !important;
}

.offers .app-tabs__tab {
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #636072 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 14px !important;
}

.offers .app-tabs__tab.is-active {
  background: #9231f5 !important;
  color: #fff !important;
}

.offers .act,
.activity-card,
.act-card {
  cursor: pointer;
  overflow: visible !important;
  background: #fff !important;
  border-radius: 12px !important;
}

.offers .img,
.activity .a-img,
.activity-list-page .act-img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #fff !important;
}

.activity-list-page .act-desc {
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  color: #424653 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.activity,
.activity-list-page {
  background: #f4f6fa !important;
  height: 100svh !important;
  overflow: auto !important;
}

.hb-hall-host {
  position: relative;
}

.activity .activity-list,
.activity-list-page .list,
.offers .list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  overflow: visible !important;
  gap: 12px !important;
}

.activity .activity-card,
.activity-list-page .act-card,
.offers .act {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
}

.hb-act-tag {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 8px;
  padding: 0 8px;
  border-radius: 4px 10px 10px 4px;
  background: #ff4b4b;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.hb-hall-arrow {
  position: absolute;
  top: 42%;
  z-index: 4;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #9231f5;
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  box-shadow: 0 6px 14px rgba(146, 49, 245, 0.28);
}

.hb-hall-prev { left: 8px; }
.hb-hall-next { right: 8px; }

#hb-act-detail {
  display: none;
  position: fixed;
  z-index: 220;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(488px, 100vw);
  transform: translateX(-50%);
  background: #f4f6fa;
  flex-direction: column;
}

#hb-act-detail.is-open {
  display: flex;
}

.hb-act-head {
  height: 48px;
  display: grid;
  place-items: center;
  background: #fff;
  position: relative;
  flex: none;
}

.hb-act-title {
  margin: 0;
  font-size: 17px;
  color: #0b1028;
}

.hb-act-back {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
}

.hb-act-back::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-left: 2px solid #1c2b46;
  border-bottom: 2px solid #1c2b46;
  transform: rotate(45deg);
}

.hb-act-scroll {
  flex: 1;
  overflow: auto;
  padding: 12px;
}

.hb-act-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
}

.hb-act-body {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  color: #424653;
  font-size: 14px;
  line-height: 1.7;
}

.hb-act-body .hb-page-copy img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 8px 0;
}

.hb-act-req {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.hb-act-req h3 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
  color: #0b1028;
}

.hb-act-req div {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f4f6fa;
}

.hb-act-req span {
  display: block;
  color: #8b93a6;
  font-size: 12px;
}

.hb-act-req b {
  display: block;
  margin-top: 2px;
  color: #9231f5;
  font-size: 16px;
}

.hb-act-foot {
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
}

.hb-act-foot button {
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #9231f5;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.cat {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #636072 !important;
}

.cat.active {
  color: #9231f5 !important;
}

.mine-header {
  height: 50px !important;
  padding: 0 16px !important;
  grid-template-columns: 1fr auto 1fr !important;
}

.mine-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.mine .avatar-shell,
.mine .avatar-shell img,
.mine .avatar-fallback {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
}

.mine .profile-name {
  font-size: 21px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

.mine .profile-sign {
  margin-top: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

.mine .person-box {
  height: auto !important;
  aspect-ratio: 1500 / 488 !important;
  background-size: 100% 100% !important;
}

.mine .asset-value {
  font-size: 25px !important;
  font-weight: 500 !important;
  color: #fff !important;
}

.mine .hero-top {
  min-height: 220px !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center 18% !important;
}

.vip2 {
  background: #f3f4fa !important;
}

.vip2 .topbar {
  height: 50px !important;
  background: #fff !important;
}

.vip2 .title,
.vip2 h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #0b1028 !important;
}

.vip2 .hero-img {
  width: min(325px, calc(100% - 28px)) !important;
  height: 147px !important;
  margin: 12px auto 0 !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
}

.vip2 .wrap {
  background: #fff !important;
  border-radius: 20px 20px 0 0 !important;
  margin-top: 12px !important;
  padding: 16px 14px 28px !important;
}

.vip2 .levels-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 8px !important;
}

.vip2 .level-pill {
  flex: 0 0 auto !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #f4f0ff !important;
  color: #636072 !important;
  border: 0 !important;
}

.vip2 .level-pill .pill-ico {
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

.vip2 .level-pill span,
.vip2 .pill-txt {
  display: inline !important;
  font-size: 12px !important;
  color: inherit !important;
}

.vip2 .level-pill.active {
  background: linear-gradient(90deg, #d22bfc, #ae5fff) !important;
  color: #fff !important;
}

.vip2 .vip-card {
  width: min(325px, 100%) !important;
  min-height: 147px !important;
  height: auto !important;
  margin: 8px auto 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vip2 .card-decoration {
  display: none !important;
}

.vip2 .vip-name {
  font-size: 22px !important;
  font-weight: 700 !important;
}

.vip2 .perks-list,
.vip2 .rules {
  background: #fff !important;
}

.vip2 .p-label,
.vip2 .rules-title {
  color: #0b1028 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.mine .hero-top::after,
.mine .person-box::after {
  display: none !important;
  background: none !important;
}

.mine .download-btn img,
.mine .creative-mark {
  filter: none !important;
}

.mine .asset-card {
  background: linear-gradient(90deg, #b06bff, #7a3cff) !important;
  color: #fff !important;
  border-radius: 18px !important;
  margin: -36px 14px 8px !important;
  position: relative !important;
  z-index: 3 !important;
  box-shadow: 0 8px 18px rgba(122, 60, 255, 0.28) !important;
}

.mine .asset-card > span,
.mine .asset-value,
.mine .asset-card button {
  color: #fff !important;
}

.mine .shortcut-grid,
.mine .feature-strip {
  background: #fff !important;
}

.mine .mine-list,
.mine .mine-row {
  background: #f4f6fa !important;
}

.mine .feature-strip {
  margin-top: 0 !important;
  border-radius: 18px 18px 0 0 !important;
}

.hb-act-facts {
  margin: 0 0 10px;
  color: #A134F1;
  font-size: 13px;
  font-weight: 700;
}

html,
body,
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.hb-wheel .wheel-page {
  --p: var(--hb-wheel, #A134F1);
  --p-2: var(--hb-wheel, #A134F1);
  --p-3: var(--hb-wheel, #A134F1);
  --p-hover: var(--hb-wheel, #A134F1);
  background: var(--hb-wheel-bg, #F7F4FF) !important;
  color: var(--hb-wheel-text, #1d2548) !important;
}

body.hb-wheel .wheel-bg__glow--1,
body.hb-wheel .wheel-bg__glow--2 {
  background: var(--hb-wheel, #A134F1) !important;
  opacity: 0.28;
}

body.hb-wheel .wheel-page .topbar {
  background: var(--hb-wheel, #A134F1) !important;
  border-bottom-color: transparent !important;
}

body.hb-wheel .wheel-page .topbar .title,
body.hb-wheel .wheel-page .topbar .back-btn,
body.hb-wheel .wheel-page .topbar svg {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.hb-wheel .wheel-page .hero__title {
  background: none !important;
  color: var(--hb-wheel-text, #1d2548) !important;
  -webkit-text-fill-color: var(--hb-wheel-text, #1d2548) !important;
}

body.hb-wheel .wheel-page .hero__time,
body.hb-wheel .wheel-page .stat-pill__label,
body.hb-wheel .wheel-page .rules-title,
body.hb-wheel .wheel-page .rules-content,
body.hb-wheel .wheel-page .rules-content * {
  color: var(--hb-wheel-text, #1d2548) !important;
  -webkit-text-fill-color: var(--hb-wheel-text, #1d2548) !important;
}

body.hb-wheel .wheel-page .stat-pill__val {
  color: var(--hb-wheel, #A134F1) !important;
  -webkit-text-fill-color: var(--hb-wheel, #A134F1) !important;
  text-shadow: none !important;
}

body.hb-wheel .wheel-page .stat-pill,
body.hb-wheel .wheel-page .rules-card {
  background: #fff !important;
  border: 1px solid color-mix(in srgb, var(--hb-wheel, #A134F1) 22%, #fff) !important;
}

body.hb-wheel .wheel-page .wheel-tab {
  color: var(--hb-wheel-text, #1d2548) !important;
  -webkit-text-fill-color: var(--hb-wheel-text, #1d2548) !important;
  background: #fff !important;
  border-color: color-mix(in srgb, var(--hb-wheel, #A134F1) 35%, #fff) !important;
}

body.hb-wheel .wheel-page .wheel-tab.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--hb-wheel, #A134F1) !important;
  border-color: transparent !important;
}

body.hb-wheel .wheel-page .winner-marquee {
  background: #fff !important;
  border-color: color-mix(in srgb, var(--hb-wheel, #A134F1) 35%, #fff) !important;
  box-shadow: none !important;
}

body.hb-wheel .wheel-page .winner-marquee__badge {
  background: var(--hb-wheel, #A134F1) !important;
  color: #fff !important;
}

body.hb-wheel .wheel-page .winner-marquee__item {
  color: var(--hb-wheel-text, #1d2548) !important;
  -webkit-text-fill-color: var(--hb-wheel-text, #1d2548) !important;
  text-shadow: none !important;
}

body.hb-wheel .wheel-page .record-btn {
  color: var(--hb-wheel-text, #1d2548) !important;
  -webkit-text-fill-color: var(--hb-wheel-text, #1d2548) !important;
  background: #fff !important;
  border-color: var(--hb-wheel, #A134F1) !important;
}

body.hb-wheel .wheel-page .draw-btn {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--hb-wheel, #A134F1) !important;
  border: none !important;
}

body.hb-wheel .wheel-page .prize-name {
  color: #1d2548 !important;
  -webkit-text-fill-color: #1d2548 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff;
}

body.hb-wheel .wheel-page .center-text {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

#hb-rank {
  display: none;
  position: fixed;
  z-index: 360;
  inset: 0;
  margin: 0 auto;
  width: min(100vw, 488px);
  overflow: auto;
  background: var(--hb-rank-bg, #f4f6fa);
  color: var(--hb-rank-text, #1d2548);
  flex-direction: column;
}

#hb-rank.is-open {
  display: flex;
}

#hb-rank header {
  height: 48px;
  display: grid;
  grid-template-columns: 48px 1fr 72px;
  align-items: center;
  background: #fff;
  color: var(--hb-rank-text, #1d2548);
}

#hb-rank .hb-rank-rulebtn {
  border: 0;
  background: transparent;
  color: #424653;
  font-size: 13px;
}

#hb-rank .hb-rank-hero {
  margin: 12px;
  padding: 18px 14px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #7a35f2, #c65bff);
  color: #fff;
  text-align: center;
}

#hb-rank .hb-rank-hero-title {
  display: block;
  font-size: 22px;
  font-weight: 800;
}

#hb-rank .hb-rank-count {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 13px;
}

#hb-rank .hb-rank-boards,
#hb-rank .hb-rank-weeks {
  display: flex;
  gap: 8px;
  padding: 0 12px 8px;
}

#hb-rank .hb-rank-boards button,
#hb-rank .hb-rank-weeks button {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #636072;
  font-weight: 700;
}

#hb-rank .hb-rank-boards button.on,
#hb-rank .hb-rank-weeks button.on {
  background: #9231f5;
  color: #fff;
}

#hb-rank .hb-rank-list article {
  display: grid;
  grid-template-columns: 72px 1fr 1fr 72px;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 10px;
  background: #fff;
  color: #424653;
}

#hb-rank .hb-rank-list article.r1 { background: linear-gradient(90deg, #ffe7a3, #fff); }
#hb-rank .hb-rank-list article.r2 { background: linear-gradient(90deg, #ffd0c2, #fff); }
#hb-rank .hb-rank-list article.r3 { background: linear-gradient(90deg, #d7dcff, #fff); }

#hb-rank .hb-rank-list article i {
  color: #e23b4a;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

#hb-rank .hb-rank-me {
  position: sticky;
  bottom: 0;
  margin: 8px 0 0;
  border-radius: 0;
  background: #7a35f2;
  color: #fff;
  text-align: center;
  font-weight: 700;
}

#hb-rank h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}

#hb-rank .hb-rank-back {
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231d2548' d='M15.5 5.5 9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

#hb-rank .hb-rank-sub,
#hb-rank .hb-rank-rule,
#hb-rank .hb-rank-empty {
  margin: 0;
  padding: 10px 16px;
  color: var(--hb-rank-text, #1d2548);
  font-size: 13px;
}

#hb-rank .hb-rank-list {
  flex: 1;
  overflow: auto;
  padding: 0 12px 16px;
}

#hb-rank .hb-rank-me,
#hb-rank .hb-rank-rule-btn {
  margin: 0 16px 8px;
}

#hb-rank .hb-rank-me {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  color: #1d2548;
  font-size: 13px;
}

#hb-rank .hb-rank-rule-btn {
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #A134F1;
  color: #fff;
  font-weight: 700;
}

#hb-rank .hb-rank-rule,
#hb-rank .hb-rank-usage,
#hb-rank .hb-rank-settle {
  display: block;
  white-space: pre-wrap;
}

#hb-rank .hb-rank-podium {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px 0;
}

#hb-rank .hb-podium {
  flex: 1;
  min-height: 92px;
  padding: 10px 6px;
  border-radius: 14px 14px 0 0;
  background: #fff;
  text-align: center;
}

#hb-rank .hb-podium.r1 {
  min-height: 118px;
  background: linear-gradient(180deg, #f3e8ff, #fff);
}

#hb-rank .hb-podium b,
#hb-rank .hb-podium strong,
#hb-rank .hb-podium span,
#hb-rank .hb-podium em {
  display: block;
}

#hb-rank .hb-podium b {
  width: 28px;
  height: 28px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: var(--hb-rank, #A134F1);
  color: #fff;
  line-height: 28px;
}

#hb-rank .hb-podium span,
#hb-rank .hb-podium em {
  color: #7e88ad;
  font-size: 12px;
  font-style: normal;
}

#hb-rank .hb-rank-note {
  margin: 8px 12px 24px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}

#hb-rank .hb-rank-note h3 {
  margin: 8px 0 4px;
  font-size: 15px;
}

#hb-rank .hb-rank-list {
  flex: none;
}

.hb-offer-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 12px 0;
}

.hb-offer-tabs button {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #636072;
  font-weight: 700;
}

.hb-offer-tabs button.on {
  background: #9231f5;
  color: #fff;
}

.offers.is-hall .hb-offer-desc {
  display: none !important;
}

.offers.is-hall .hb-offer-actions {
  display: flex !important;
  position: relative;
  z-index: 5;
}

#hb-hbpop {
  display: none;
  position: fixed;
  z-index: 400;
  inset: 0;
  background: rgba(18, 16, 28, 0.55);
  align-items: flex-end;
  justify-content: center;
}

#hb-hbpop.is-open {
  display: flex;
}

.hb-hbpop-card {
  width: min(100vw, 488px);
  max-height: 86vh;
  overflow: auto;
  padding: 16px 16px 22px;
  border-radius: 18px 18px 0 0;
  background: #fff;
  color: #1d2548;
}

.hb-hbpop-card h3 {
  margin: 0 28px 8px 0;
  font-size: 18px;
}

.hb-hbpop-x {
  float: right;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 22px;
}

.hb-hbpop-lead,
.hb-hbpop-me,
.hb-hbpop-tip {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
}

.hb-hbpop-days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.hb-hb-day {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f4f6fa;
}

.hb-hb-day.on {
  background: #f3e8ff;
}

.hb-hb-day b,
.hb-hb-day span {
  display: block;
}

.hb-hb-day span {
  margin-top: 2px;
  color: #7e88ad;
  font-size: 12px;
}

.hb-hbpop-go {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #7a35f0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.hb-hbpop-go:disabled {
  background: #c8c4d4;
}

.hongbao .hb-hb-extra {
  margin: 8px 16px 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.hongbao .hb-hb-extra button {
  margin-left: 8px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: #ffe08a;
  color: #7a2a12;
  font-size: 13px;
  font-weight: 700;
}

#hb-rank .hb-rank-head,
#hb-rank article {
  display: grid;
  grid-template-columns: 42px 1.2fr 1fr 0.8fr;
  gap: 6px;
  align-items: center;
}

#hb-rank .hb-rank-head {
  padding: 8px 12px;
  color: #7e88ad;
  font-size: 12px;
}

#hb-rank article {
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}

#hb-rank article b {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--hb-rank, #A134F1);
  color: #fff;
  display: grid;
  place-items: center;
}

#hb-rank article strong,
#hb-rank article span,
#hb-rank article em {
  display: block;
  font-style: normal;
  color: var(--hb-rank-text, #1d2548);
}

#hb-rank article span,
#hb-rank article em,
#hb-rank article i {
  color: #7e88ad;
  font-size: 12px;
  font-style: normal;
}

#hb-rank article i small {
  display: block;
  color: #A134F1;
}

.hb-vip-detail-btn {
  display: block;
  margin: 8px auto 0;
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #A134F1;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

#hb-vip-detail {
  display: none;
  position: fixed;
  z-index: 360;
  inset: 0;
  margin: 0 auto;
  width: min(100vw, 488px);
  background: #f4f6fa;
  color: #1d2548;
  flex-direction: column;
}

#hb-vip-detail.is-open {
  display: flex;
}

#hb-vip-detail header {
  height: 48px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: #fff;
}

#hb-vip-detail h2,
#hb-vip-detail h3 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}

#hb-vip-detail h3 {
  margin: 14px 0 6px;
  text-align: left;
  font-size: 15px;
}

#hb-vip-detail .hb-vip-back {
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231d2548' d='M15.5 5.5 9 12l6.5 6.5-1.4 1.4L6.2 12l7.9-7.9z'/%3E%3C/svg%3E") center / 22px no-repeat;
}

#hb-vip-detail header {
  grid-template-columns: 48px 1fr 64px;
}

#hb-vip-detail .hb-vip-rule {
  border: 0;
  background: transparent;
  color: #424653;
  font-size: 14px;
}

#hb-vip-detail .hb-vip-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 12px 0;
}

#hb-vip-detail .hb-vip-tabs button {
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

#hb-vip-detail .hb-vip-tabs button img {
  width: 100%;
  height: 32px;
  object-fit: contain;
}

#hb-vip-detail .hb-vip-tabs button.on {
  outline: 2px solid #9231f5;
}

#hb-vip-detail .hb-vip-privgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

#hb-vip-detail .hb-vip-privgrid div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8f8fb;
}

#hb-vip-detail .hb-vip-privgrid b {
  color: #9231f5;
  font-size: 16px;
}

#hb-vip-detail .hb-vip-privgrid span {
  margin-top: 4px;
  color: #424653;
  font-size: 12px;
}

.hb-invite-members p,
.hb-agent-panel p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
}

.hb-invite-qrbox {
  margin: 12px 16px 0;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
}

.hb-invite-qr {
  width: 168px;
  height: 168px;
  object-fit: contain;
  background: #fff;
}

.hb-invite-url {
  margin: 8px 0;
  color: #424653;
  font-size: 13px;
  word-break: break-all;
  line-height: 1.5;
  word-break: break-all;
}

.hb-invite-copy {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #9231f5;
  color: #fff;
  font-weight: 700;
}

.hb-agent-go {
  width: 100%;
  height: 36px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: #9231f5;
  color: #fff;
  font-weight: 700;
}

#hb-vip-detail .hb-vip-body,
#hb-vip-detail .hb-vip-scroll {
  flex: 1;
  overflow: auto;
  padding: 8px 16px 88px;
  font-size: 13px;
  line-height: 1.6;
}

#hb-vip-detail .hb-vip-rebate {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 12px;
}

#hb-vip-detail .hb-vip-rebate li {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #eef0f8;
}

#hb-vip-detail .hb-vip-rebate b {
  color: #A134F1;
  margin-left: auto;
}

#hb-vip-detail .hb-vip-rebate em {
  margin-left: 8px;
  color: #8b93a6;
  font-style: normal;
}

#hb-vip-detail .hb-vip-claim {
  margin-left: 8px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: #A134F1;
  color: #fff;
  font-size: 13px;
}

#hb-vip-detail .hb-vip-date {
  height: 28px;
  border: 1px solid #eadfff;
  border-radius: 8px;
  padding: 0 8px;
}

.discover {
  background: #f3f4fa !important;
}

.discover-row {
  height: 70px !important;
  min-height: 70px !important;
  border-radius: 12px !important;
}

.discover .row-icon {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  background: #fff !important;
}

.app-tabs > div,
.offers .app-tabs__inner {
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
}

@media (min-width: 769px) {
  .shell {
    display: flex !important;
    justify-content: center !important;
  }

  .main {
    width: 488px !important;
    max-width: 488px !important;
    flex: 0 0 488px !important;
  }

  .tabbar {
    left: 50% !important;
    width: 488px !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 768px) {
  .main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
  }

  .tabbar {
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
  }

  .float {
    right: 6px !important;
  }
}

.game-list-page {
  background: #f4f6fa !important;
}

.game-list-page .container {
  padding: 0 0 16px !important;
}

.game-list-page .providers {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 10px !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 8px 12px 20px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.game-list-page .p {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.game-list-page .p-img {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  object-position: center center !important;
  flex: none !important;
  background: #eef1f8 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.game-list-page .game-info-overlay {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: static !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  background: none !important;
  margin: 0 !important;
  padding: 8px 0 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.game-list-page .game-info-overlay::before {
  display: none !important;
}

.game-list-page .game-title {
  display: block !important;
  position: static !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  color: #424653 !important;
  font-size: 16px !important;
  line-height: 44px !important;
  height: 44px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.game-modal {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
  background: #0b1028 !important;
  z-index: 300 !important;
}

.game-modal .game-header {
  height: 44px !important;
  background: #fff !important;
  color: #0b1028 !important;
}

.game-modal .title {
  color: #0b1028 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.game-modal .close-btn {
  color: #9231f5 !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 15px !important;
}

.game-modal .game-iframe {
  width: 100% !important;
  height: calc(100% - 44px) !important;
  border: 0 !important;
  background: #fff !important;
}

body.hb-float-ready .float,
body.hb-quiet #hb-float-dock,
body:not(.hb-home) #hb-float-dock,
body:not(.hb-home) .float {
  display: none !important;
}

#hb-float-dock {
  position: fixed;
  right: 8px;
  bottom: 78px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

#hb-float-dock button {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

#hb-float-dock img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

#hb-float-dock button[data-open="close"] {
  width: auto;
  height: 28px;
}

#hb-float-dock button[data-open="close"] img {
  width: auto;
  height: 28px;
}

@media (min-width: 769px) {
  #hb-float-dock {
    right: calc((100vw - 488px) / 2 + 8px);
  }
}

.hb-game-tools {
  padding: 8px 12px 0;
  background: #fff;
}

.hb-game-tabs {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  border-bottom: 1px solid #eee;
}

.hb-game-tabs button {
  flex: 1 0 auto;
  min-width: 64px;
  white-space: nowrap;
  height: 42px;
  border: 0;
  background: transparent;
  color: #8b93a6;
  font-size: 15px;
  font-weight: 600;
}

.hb-game-tabs button.on {
  color: #7b3ff2;
  box-shadow: inset 0 -3px 0 #7b3ff2;
}

.hb-game-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 0 4px 8px;
}

.hb-game-search input {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #f4f6fa;
  padding: 0 12px;
  font-size: 13px;
  color: #424653;
}

.hb-game-search button {
  border: 0;
  background: transparent;
  color: #7b3ff2;
  font-size: 15px;
  font-weight: 600;
}

.game-list-page .p {
  position: relative !important;
}

.game-list-page .p.hb-off {
  display: none !important;
}

.game-list-page .game-info-overlay {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  width: 100% !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 8px 0 0 !important;
  overflow: visible !important;
}

.game-list-page .hb-star {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer;
  z-index: 6 !important;
  pointer-events: auto !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.game-list-page .hb-star svg {
  width: 24px !important;
  height: 24px !important;
  display: block;
}

.game-list-page .hb-star path {
  fill: none;
  stroke: #9aa3b5;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.game-list-page .hb-star.on path {
  fill: #f5b301;
  stroke: #f5b301;
}

.mine .asset-card {
  margin: 8px 16px 0 !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, #c65bff, #7a35f2) !important;
  box-shadow: 0 8px 16px rgba(122, 53, 242, 0.28) !important;
  color: #fff !important;
}

.mine .shortcut-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  background: #fff !important;
}

.mine .feature-strip {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  background: #fff !important;
}

.wallet-card,
.wallet .balance-section {
  background: linear-gradient(90deg, #c65bff, #7a35f2) !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: #fff !important;
}

.wallet .balance-label,
.wallet .balance-value,
.wallet .yen-badge,
.wallet .balance-row,
.wallet .balance-row span {
  color: #fff !important;
}

.wallet .quick-actions,
.transfer .log-tabs,
.security .menu-card,
.profile .profile-list,
.invite-page .invite-content {
  background: #f4f6fa;
}

.wallet .quick-actions {
  display: flex !important;
  justify-content: space-around !important;
  padding: 14px 8px !important;
}

.transfer .container,
.security .container,
.wallet .container,
.vip2 .wrap {
  gap: 12px;
}

.hb-sec-extra {
  margin: 12px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.hb-sec-extra a {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid #eef0f6;
  color: #1d2548;
  font-size: 15px;
  text-decoration: none;
}

.hb-sec-extra a:last-child {
  border-bottom: 0;
}

#hb-settings {
  display: none;
  position: fixed;
  z-index: 220;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 488px);
  transform: translateX(-50%);
  background: #f3f4f8;
  overflow: auto;
}

.hb-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #eef0f6;
  color: #1d2548;
  font-size: 16px;
}

.hb-switch {
  width: 46px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #d5d8e2;
  position: relative;
  padding: 0;
}

.hb-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.hb-switch.on {
  background: #8d4cf6;
}

.hb-switch.on::after {
  left: 20px;
}

#hb-settings .hb-set-list button {
  justify-content: flex-start;
  position: relative;
}

#hb-settings .hb-set-list button i {
  position: absolute;
  right: 16px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #c5cad8;
  border-right: 2px solid #c5cad8;
  transform: rotate(45deg);
}

.hb-set-name {
  margin-left: 0;
}

#hb-enter {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 488px);
  transform: translateX(-50%);
  z-index: 460;
}

#hb-enter.is-open {
  display: block;
}

.hb-enter-mask {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
}

.hb-enter-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(320px, calc(100vw - 48px));
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
}

.hb-enter-card::before {
  content: "";
  display: block;
  height: 4px;
  background: #9231f5;
}

.hb-enter-card h3 {
  margin: 22px 16px 8px;
  font-size: 18px;
  color: #1d2548;
}

.hb-enter-sub,
.hb-enter-balance {
  margin: 0 16px;
  color: #8b93a7;
  font-size: 13px;
}

.hb-enter-balance {
  margin-top: 16px;
  background: #f4f6fa;
  border-radius: 8px;
  line-height: 36px;
}

.hb-enter-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 16px 0;
  padding: 0 8px 0 12px;
  height: 42px;
  border-radius: 8px;
  background: #f7f8fb;
}

.hb-enter-line span {
  color: #1d2548;
}

.hb-enter-line input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
}

.hb-enter-in,
.hb-enter-go {
  border: 0;
  background: #9231f5;
  color: #fff;
}

.hb-enter-in {
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
}

.hb-enter-main {
  display: flex;
  justify-content: space-between;
  margin: 12px 16px 0;
  font-size: 13px;
  color: #e11d48;
}

.hb-enter-all,
.hb-enter-cancel {
  border: 0;
  background: transparent;
  color: #636072;
}

.hb-enter-msg {
  min-height: 18px;
  margin: 8px 16px 0;
  color: #9231f5;
  font-size: 12px;
}

.hb-enter-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 12px;
  border-top: 1px solid #eef0f6;
}

.hb-enter-foot button {
  height: 48px;
  font-size: 16px;
}

.hb-enter-go {
  background: transparent;
  color: #9231f5;
  border-left: 1px solid #eef0f6;
}

#hb-play {
  display: none;
  position: fixed;
  z-index: 340;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 488px);
  transform: translateX(-50%);
  background: #000;
  flex-direction: column;
}

#hb-play.is-open {
  display: flex;
}

#hb-play:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#hb-play,
#hb-play.is-pc {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  transform: none;
  overflow: hidden;
}

.hb-play-loading {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  font-size: 15px;
}

#hb-play.is-loading .hb-play-loading {
  display: flex;
}

.hb-play-logo {
  position: absolute;
  left: 12px;
  top: 18px;
  right: auto;
  bottom: auto;
  z-index: 12;
  width: 52px;
  height: 52px;
  padding: 3px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #4c1d95;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(20, 16, 40, 0.35);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#hb-play.is-drag iframe {
  pointer-events: none !important;
}

#hb-play.is-drag .hb-play-logo {
  cursor: grabbing;
}

.hb-play-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hb-play-sheet {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  box-sizing: border-box;
  max-height: 72%;
  padding: 0 10px 16px;
  overflow: auto;
}

#hb-play.is-menu .hb-play-sheet {
  display: block;
}

.hb-play-sheet-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.hb-play-sheet-card button,
.hb-play-cancel {
  display: block;
  width: 100%;
  height: 54px;
  border: 0;
  background: #fff;
  color: #1c2340;
  font-size: 17px;
}

.hb-play-sheet-card button {
  border-bottom: 1px solid #eef0f6;
}

.hb-play-sheet-card button:last-child {
  border-bottom: 0;
}

.hb-play-cancel {
  margin-top: 8px;
  border-radius: 14px;
}

#hb-play iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #000;
}

#hb-settings.is-open {
  display: flex;
  flex-direction: column;
}

#hb-settings header {
  height: 50px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: #fff;
}

#hb-settings h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  color: #1d2548;
}

.hb-set-back {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
}

.hb-set-back::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 16px;
  border-left: 2px solid #1d2548;
  border-bottom: 2px solid #1d2548;
  transform: rotate(45deg);
}

.hb-set-list {
  margin: 12px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.hb-set-list a,
.hb-set-list button[data-act] {
  display: flex;
  width: 100%;
  height: 52px;
  align-items: center;
  padding: 0 36px 0 16px;
  border: 0;
  border-bottom: 1px solid #eef0f6;
  background: #fff;
  color: #1d2548;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}

#hb-settings .hb-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  height: auto;
  padding: 0 16px;
  box-sizing: border-box;
}

#hb-settings .hb-set-row > span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-size: 15px;
  line-height: 52px;
}

#hb-settings .hb-switch {
  flex: 0 0 46px;
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

#hb-settings .hb-set-name {
  margin-left: auto;
  margin-right: 8px;
  color: #8b93a6;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.hb-set-about {
  margin: 8px 16px 16px;
  color: #5d6784;
  font-size: 13px;
  line-height: 1.6;
}

.hb-set-about h3 {
  margin: 10px 0 4px;
  color: #1d2548;
  font-size: 14px;
}

.hb-agency-copy,
.hb-invite-member {
  margin: 12px 16px;
  color: #5d6784;
  font-size: 13px;
  line-height: 1.6;
}

.hb-invite-member {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid #eef0f6;
}

.hb-gift-fallback {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 20px;
}

.hb-gift-card {
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}

.hb-gift-card button {
  margin-top: 8px;
  border: 0;
  border-radius: 16px;
  padding: 6px 12px;
  background: #A134F1;
  color: #fff;
}

.vip2 .perk-item,
.vip2 .rule {
  min-height: 48px;
  border-bottom: 1px solid #eef0f6;
}

.invite-page .primary-btn {
  background: #a134f1 !important;
  border-radius: 999px !important;
  color: #fff !important;
}

.mine {
  background: #f4f6fa !important;
  color: #1d2548 !important;
}

.mine .hero-top {
  height: auto !important;
  min-height: 220px !important;
  padding-bottom: 24px !important;
  background-size: cover !important;
  background-position: center 18% !important;
  background-repeat: no-repeat !important;
}

.mine .hero-top::after,
.mine .person-box::after {
  display: none !important;
  content: none !important;
}

.mine .mine-logo,
.mine .download-btn img,
.mine .shortcut img,
.mine .feature-btn img,
.mine .row-icon img,
.mine .creative-mark,
.mine .vip-badge {
  filter: none !important;
}

.mine-header {
  height: 52px !important;
  padding: 0 14px !important;
}

.mine .mine-logo {
  width: 39px !important;
  height: 39px !important;
  max-width: 39px !important;
  border-radius: 10px !important;
}

.mine .mine-title {
  color: #fff !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.mine .download-btn {
  width: auto !important;
  height: 29px !important;
  background: transparent !important;
}

.mine .download-btn img {
  width: auto !important;
  height: 29px !important;
}

.mine .profile-hero {
  grid-template-columns: 70px 1fr 12px !important;
  gap: 15px !important;
  min-height: 115px !important;
  padding: 8px 18px 16px 32px !important;
  align-items: center !important;
}

.mine .avatar-shell,
.mine .avatar-shell img,
.mine .avatar-fallback {
  width: 70px !important;
  height: 70px !important;
}

.mine .profile-name {
  color: #fff !important;
  font-size: 21px !important;
  font-weight: 500 !important;
}

.mine .profile-sign {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 7px !important;
}

.mine .vip-badge {
  height: 20px !important;
  width: auto !important;
  background: transparent !important;
  background-color: transparent !important;
}

.mine .mine-body {
  margin-top: -28px !important;
  padding: 0 0 24px !important;
}

.mine .person-box {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  aspect-ratio: 1500 / 488 !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

.mine .asset-card {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  flex: 0 0 45% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 41px !important;
  color: #fff !important;
}

.mine .asset-card > span,
.mine .asset-value,
.mine .asset-card button,
.mine .asset-value span {
  color: #fff !important;
}

.mine .asset-card > span {
  font-size: 18px !important;
  font-weight: 500 !important;
}

.mine .asset-value {
  font-size: 25px !important;
  font-weight: 500 !important;
}

.mine .feature-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 12px 6px !important;
  background: transparent !important;
}

.mine .feature-btn,
.mine .feature-btn:first-child,
.mine .feature-btn:last-child {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
}

.mine .feature-btn img {
  width: auto !important;
  height: 46px !important;
  max-width: 168px !important;
  margin: 0 !important;
}

.mine .feature-btn img[alt="VIP特权"] {
  transform: translateX(-16px);
}

.mine .feature-btn img[alt="邀请好友"] {
  transform: translateX(16px);
}

.mine .mine-panel {
  background: #f4f6fa !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mine .shortcut-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  background: #f4f6fa !important;
  min-height: 0 !important;
  padding: 12px 6px 30px !important;
  gap: 0 !important;
}

.mine .shortcut {
  color: #1d2548 !important;
  gap: 6px !important;
}

.mine .shortcut img {
  width: 48px !important;
  height: 53px !important;
  object-fit: contain !important;
}

.mine .shortcut span {
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0b1028 !important;
}

.mine .mine-list {
  background: #f4f6fa !important;
  border-top: 0 !important;
  margin: 0 16px !important;
}

.mine .mine-row {
  min-height: 64px !important;
  padding: 0 18px !important;
  background: #f4f6fa !important;
  color: #0b1028 !important;
  border-bottom: 1px solid #d7ddeb !important;
}

.mine .mine-row .row-icon img {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

.mine .row-label {
  margin-left: 13px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #0b1028 !important;
}

.mine .creative-mark {
  width: auto !important;
  height: 35px !important;
  max-width: 168px !important;
}

.home .topbar {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  align-items: center !important;
  overflow: visible !important;
  padding: 0 8px !important;
}

.home .topbar .right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
}

.home .topbar .lang-btn,
.home .topbar .download {
  margin-right: 0 !important;
  flex: 0 0 auto;
}

.home .topbar .download {
  height: 26px !important;
  padding: 0 8px !important;
  font-size: 12px !important;
}

.hb-notice-btn {
  height: 26px;
  padding: 0 8px 0 6px;
  border: 0;
  border-radius: 999px;
  background: #f4e9ff;
  color: #7b3ff2;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.hb-notice-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.home .container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.home .wrap,
.home .sw,
.home .swiper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.home .wrap {
  padding: 8px 12px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home .swiper-wrapper {
  width: 100% !important;
}

.home .swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.home .slide,
.home .slide .img {
  width: 100% !important;
  height: 140px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

.home .swiper-pagination {
  bottom: 6px !important;
  line-height: 0 !important;
}

.home .swiper-pagination-bullet {
  width: 14px !important;
  height: 3px !important;
  margin: 0 3px !important;
  border-radius: 2px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  opacity: 1 !important;
}

.home .swiper-pagination-bullet-active {
  width: 18px !important;
  background: #A134F1 !important;
}

.notice {
  margin: 8px 12px 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 3px 8px rgba(75, 106, 184, 0.18) !important;
}

.notice .speaker {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 28px !important;
  height: 28px !important;
}

.notice .speaker-ico {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  filter: none !important;
  background: transparent !important;
}

.login-row {
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.login-left {
  min-width: 0;
}

.user-info-top {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.login-card .username {
  color: #1d2548 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.login-card .vip-badge {
  width: 78px !important;
  height: 22px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent center / contain no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  font-style: normal !important;
  line-height: 0 !important;
}

.login-card .user-info-bottom {
  margin-top: 4px !important;
  color: #1d2548 !important;
}

.login-card .balance,
.login-card .currency {
  color: #1d2548 !important;
}

.login-card .quick-grid {
  flex: 1;
  justify-content: flex-end !important;
}

.login-card .user-info-bottom .refresh-btn,
.home .refresh-btn {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  flex: none !important;
  padding: 0 !important;
  margin-left: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1d2548 !important;
  background: transparent center / 18px 18px no-repeat !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.login-card .refresh-btn svg,
.home .refresh-btn svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 1 !important;
  stroke: #1d2548 !important;
  color: #1d2548 !important;
}

.mine .refresh-btn {
  width: 22px !important;
  height: 22px !important;
  background: url("/uploads/frontend/hall/refresh.webp") center / 18px 18px no-repeat !important;
  color: transparent !important;
}

.mine .refresh-btn svg,
.mine .refresh-btn img {
  opacity: 0 !important;
}

.home .refresh-btn.spinning,
.mine .refresh-btn.is-spinning {
  animation: hb-spin 0.7s linear infinite;
}

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

.notice-center {
  background: #fff !important;
  color: #101827 !important;
}

.notice-center .notice-head {
  height: 52px;
  background: #fff;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  border-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.notice-center .notice-head h1 {
  grid-column: 2;
  width: auto;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}

.notice-center .back-btn {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  grid-column: 1;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: 6px;
  transform: none !important;
}

.notice-center .notice-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 44px;
  background: #fff;
  border-bottom: 1px solid #eef1f6;
  position: sticky;
  top: 52px;
  z-index: 4;
}

.notice-center .notice-tab {
  height: 44px;
  border: 0;
  background: transparent;
  color: #111;
  font-size: 15px;
  font-weight: 700;
  position: relative;
}

.notice-center .notice-tab.active {
  color: #7b3ff2;
}

.notice-center .notice-tab.active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 2px;
  border-radius: 99px;
  background: #7b3ff2;
}

.notice-center .notice-item {
  width: 100%;
  min-height: 118px;
  display: grid;
  gap: 8px;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf0f5;
  padding: 22px 16px 16px 28px;
  position: relative;
}

.notice-center .blue-line {
  width: 5px;
  height: 72px;
  border-radius: 0 3px 3px 0;
  background: #2e91ff;
  position: absolute;
  top: 24px;
  left: 0;
}

.notice-center .notice-title {
  color: #0b0f19;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.notice-center .notice-summary {
  color: #3c4659;
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-center .notice-time {
  color: #98a2b3;
  font-size: 13px;
}

.notice-center .notice-detail-drawer {
  background: #fff;
  color: #0b1028;
}

.invite-page {
  background: #f4f6fa !important;
  color: #0b1028 !important;
}

.invite-page .bonus-card,
.invite-page .records-section__head,
.invite-page .overview-item {
  background: #fff;
  border-radius: 14px;
}

.invite-page .bonus-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}

.invite-page .bonus-banner {
  width: 100%;
  display: block;
  border-radius: 14px 14px 0 0;
}

.invite-page .bonus-action {
  height: 34px;
  margin: 10px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #a134f1;
  color: #fff;
  font-size: 13px;
}

.invite-page .invite-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  background: #fff !important;
  border-top: 1px solid #efe7ff;
}

.invite-page .invite-tabs button,
.invite-page .tab-label {
  color: #636072 !important;
}

.invite-page .invite-tabs .on,
.invite-page .invite-tabs .active,
.invite-page .invite-tabs button.active .tab-label {
  color: #A134F1 !important;
}

.vip2 {
  background: #f4f6fa !important;
  color: #1d2548 !important;
}

.vip2 .hero,
.vip2 .vip-card,
.vip2 .wrap {
  color: #1d2548;
}

.vip2 .levels-grid {
  display: flex !important;
  gap: 8px;
  overflow-x: auto;
}

.vip2 .vip-name,
.vip2 .rules-title,
.vip2 .p-label,
.vip2 .k,
.vip2 .t-cell {
  color: #1d2548 !important;
}

.vip2 .p-value,
.vip2 .v {
  color: #A134F1 !important;
}

.hb-vip-note {
  color: #7e88ad;
  font-size: 12px;
}

#hb-float-dock.is-collapsed .hb-float-list {
  display: none;
}

#hb-float-dock .hb-float-toggle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(80, 40, 140, 0.28);
  padding: 8px;
}

#hb-float-dock .hb-float-toggle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#hb-float-dock .hb-float-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#hb-float-dock .hb-float-list button {
  width: 64px;
  height: auto;
}

#hb-float-dock .hb-float-list img {
  width: 52px;
  height: 52px;
  margin: 0 auto;
}

#hb-float-dock .hb-float-list em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  line-height: 1.2;
  color: #4c2a86;
  text-align: center;
}

.mine .mine-row,
.mine .shortcut,
.mine .feature-btn {
  cursor: pointer;
  position: relative;
  z-index: 4;
  pointer-events: auto !important;
}

.vip2 .table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.vip2 .t-head,
.vip2 .t-row {
  width: max-content;
  min-width: 520px;
}

.vip2 {
  padding-bottom: 88px !important;
}

#hb-vip-detail {
  left: 50%;
  right: auto;
  width: min(100vw, 488px);
  transform: translateX(-50%);
}

#hb-vip-detail .hb-vip-hero {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

#hb-vip-detail .hb-vip-line {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 12px;
}

#hb-vip-detail .hb-vip-line span,
#hb-vip-detail .hb-vip-line b {
  display: block;
}

#hb-vip-detail .hb-vip-line b {
  margin: 4px 0;
  color: #A134F1;
  font-weight: 700;
}

#hb-vip-detail .hb-vip-line i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #efe8ff;
  overflow: hidden;
}

#hb-vip-detail .hb-vip-line em {
  display: block;
  height: 100%;
  background: #A134F1;
}

#hb-vip-detail .hb-vip-progress > p {
  margin: 0 0 8px;
  color: #636072;
}

#hb-vip-detail .hb-vip-detail-btn {
  display: block;
  width: 100%;
  height: 42px;
  margin: 14px 0;
  border: 0;
  border-radius: 21px;
  background: #A134F1;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

#hb-vip-detail .hb-vip-scroll {
  overflow-x: hidden;
}

#hb-vip-detail .hb-vip-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  background: #fff;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

#hb-vip-detail table {
  min-width: 760px;
  border-collapse: collapse;
  width: 100%;
}

#hb-vip-detail th,
#hb-vip-detail td {
  padding: 8px 10px;
  border-bottom: 1px solid #eef0f8;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
}

#hb-vip-detail th {
  background: #f7f3ff;
  color: #4c2a86;
}

.hb-invite-extra {
  margin: 0 0 12px;
  padding: 14px;
  background: #fff;
  border-radius: 16px;
  color: #1d2548;
}

.hb-invite-extra h3 {
  margin: 12px 0 6px;
  font-size: 15px;
}

.hb-invite-extra h3:first-child {
  margin-top: 0;
}

.hb-invite-link,
.hb-invite-note,
.hb-invite-rule {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #424653;
  word-break: break-all;
}

.hb-invite-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.hb-invite-actions button {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: #A134F1;
  color: #fff;
  font-size: 14px;
}

.invite-page .invite-tabs {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
}

.discover-head {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  height: 56px !important;
  z-index: 3 !important;
  background: #fff !important;
}

.discover .head-logo,
.discover-head .head-logo,
.discover-head img {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 112px !important;
  height: 38px !important;
  max-width: 112px !important;
  z-index: 5 !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.discover-head span,
.discover-head .title {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

.hb-disc-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px 2px;
}

.hb-disc-cats button {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #424653;
  font-size: 12px;
  padding: 8px 6px;
}

.hb-disc-cats img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.hb-invite-steps,
.hb-agency {
  margin: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
}

.hb-page-banner {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.hb-step-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.hb-step-row span {
  text-align: center;
  font-size: 12px;
  color: #424653;
  line-height: 1.5;
}

.hb-page-copy {
  margin-top: 12px;
  color: #424653;
  font-size: 14px;
  line-height: 1.7;
}

.hb-page-guide,
.hb-deposit-rules,
.hb-money-copy {
  margin: 12px;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  color: #1d2548;
}

.hb-money-copy h3 {
  margin: 12px 0 4px;
  font-size: 15px;
  color: #10172a;
}

.hb-money-copy h3:first-child { margin-top: 0; }

.hb-money-copy p,
.hb-money-copy .hb-page-copy {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.7;
  color: #424653;
}

.hb-money-copy[hidden] { display: none !important; }

.hb-page-guide h3,
.hb-deposit-rules h3 {
  margin: 10px 0 8px;
  font-size: 16px;
}

.hb-use-block {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid #f0f1f5;
}

.hb-use-block ul,
.hb-deposit-rules p {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hb-use-block li,
.hb-deposit-rules p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #424653;
}

.hb-deposit-rules p b,
.hb-deposit-rules p span,
.hb-deposit-rules p em {
  display: block;
}

.hb-deposit-rules p em,
.hb-deposit-note {
  color: #8a90a2;
  font-style: normal;
}

#hb-shop {
  display: none;
  position: fixed;
  z-index: 372;
  inset: 0;
  margin: 0 auto;
  width: min(100vw, 488px);
  overflow: auto;
  background: #f4f6fa;
  color: #1d2548;
  flex-direction: column;
}

#hb-shop.is-open { display: flex; }

#hb-shop header {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 52px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #edf1f8;
}

#hb-shop header h2 {
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #10172a;
}

#hb-shop .hb-shop-back {
  width: 44px;
  height: 44px;
  margin-left: 4px;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231c2b46' d='M15.4 4.6 8 12l7.4 7.4-1.4 1.4L5.2 12 14 3.2z'/%3E%3C/svg%3E") center / 18px no-repeat;
}

#hb-shop .hb-shop-copy {
  margin: 12px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  color: #32394c;
  font-size: 13px;
  line-height: 1.7;
}

#hb-shop .hb-shop-copy h3 {
  margin: 10px 0 4px;
  font-size: 15px;
  color: #10172a;
}

#hb-shop .hb-shop-copy h3:first-child,
#hb-shop .hb-shop-summary { margin-top: 0; }

#hb-shop .hb-shop-list { padding-bottom: 16px; }

.invite-page .hb-invite-rules {
  margin: 12px 16px 8px;
  padding: 14px;
  background: #fff;
  border-radius: 12px;
  color: #32394c;
  font-size: 13px;
  line-height: 1.7;
}

.invite-page .hb-invite-rules h3 {
  margin: 10px 0 4px;
  font-size: 15px;
  color: #111827;
}

.invite-page .hb-invite-rules h3:first-child { margin-top: 0; }

.invite-page .hb-invite-qrbox {
  margin: 8px 16px 16px;
}

#hb-shop .hb-shop-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 0 12px 8px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
}

#hb-shop .hb-shop-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }

#hb-shop .hb-shop-item b,
#hb-shop .hb-shop-item span { display: block; }

#hb-shop .hb-shop-item span { margin-top: 4px; color: #8a90a2; font-size: 12px; }

#hb-shop .hb-shop-item button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: #a134f1;
  color: #fff;
}

.hb-sign-state p,
.hb-withdraw-limit p { display: block; margin-top: 4px; }

.self-media-page .hb-m-row,
.self-media-page .hb-m-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.self-media-page .reward-list .hb-m-row {
  grid-template-columns: 72px 1fr 64px 48px;
}

.self-media-page .hb-m-card img,
.self-media-page .hb-m-row img {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}

.self-media-page .hb-m-card b,
.self-media-page .hb-m-card p,
.self-media-page .hb-m-row span,
.self-media-page .hb-m-row b,
.self-media-page .hb-m-row strong {
  display: block;
  font-size: 13px;
}

.self-media-page .hb-m-card i {
  display: inline-block;
  margin-right: 6px;
  color: #8a90a2;
  font-style: normal;
  font-size: 12px;
}

.hb-step-row b {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: #a134f1;
  color: #fff;
  line-height: 22px;
  font-size: 12px;
}

.hb-agency-services button,
.hb-service-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: #f4f6fa;
  color: #1d2548;
}

.hb-agency-services img,
.hb-service-list img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.invite-page .invite-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 64px !important;
  width: min(100vw, 488px) !important;
  height: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  overflow: visible !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

.invite-page .support-btn {
  display: none !important;
}

.hb-app-qr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.hb-app-qr figure {
  margin: 0;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  text-align: center;
}

.hb-app-qr img {
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.hb-app-qr figcaption,
.hb-app-qr a {
  display: block;
  margin-top: 6px;
  color: #424653;
  font-size: 13px;
}

.agency-welcome .contact-card {
  pointer-events: auto !important;
  cursor: pointer;
}

.agency-welcome .contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agency-welcome .hb-live-contact {
  pointer-events: auto !important;
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  border: 0;
  text-align: left;
}

.agency-welcome .hb-live-contact img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
}

.invite-page {
  padding-bottom: 128px !important;
}

#hb-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 520;
  max-width: 80vw;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(18, 16, 28, 0.88);
  color: #fff;
  font-size: 14px;
  display: none;
}

#hb-toast.is-on {
  display: block;
}

.hb-agent-box {
  margin: 16px 12px 24px;
  padding: 14px;
  background: #fff;
  border-radius: 16px;
}

.hb-agent-box input,
.hb-agent-box textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: #f4f6fa;
  padding: 10px 12px;
}

.hb-agent-submit {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  background: #9231f5;
  color: #fff;
  font-weight: 700;
}

.hb-agent-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 12px;
}

.hb-agent-tabs button {
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: #f4f6fa;
  color: #636072;
}

.hb-agent-tabs button.on {
  background: #9231f5;
  color: #fff;
}

.hb-agent-panel {
  margin-top: 10px;
  color: #424653;
  line-height: 1.7;
}

#hb-service {
  position: fixed;
  inset: 0;
  z-index: 480;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 10, 24, 0.45);
}

#hb-service.is-open {
  display: flex;
}

.hb-service-card {
  width: min(100%, 488px);
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

.hb-service-card h3 {
  margin: 0 0 8px;
  text-align: center;
  font-size: 16px;
}

.hb-service-close {
  width: 100%;
  height: 40px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: #9231f5;
  color: #fff;
}

.shell,
.shell * {
  scrollbar-width: none !important;
}

.shell *::-webkit-scrollbar,
.shell::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

#hb-vip-detail .hb-vip-table-wrap,
.vip2 .table {
  scrollbar-width: thin !important;
  scrollbar-color: #8b5cf6 #efe8fb !important;
}

#hb-vip-detail .hb-vip-table-wrap::-webkit-scrollbar,
.vip2 .table::-webkit-scrollbar {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background: #efe8fb !important;
}

#hb-vip-detail .hb-vip-table-wrap::-webkit-scrollbar-thumb,
.vip2 .table::-webkit-scrollbar-thumb {
  display: block !important;
  background: #8b5cf6 !important;
  border-radius: 999px !important;
}

#hb-vip-detail .hb-vip-table-wrap::-webkit-scrollbar-track,
.vip2 .table::-webkit-scrollbar-track {
  display: block !important;
  background: #efe8fb !important;
  border-radius: 999px !important;
}

#hb-rank[data-ui="rank2"] {
  overflow: hidden;
  background: linear-gradient(180deg, #e6e9fe 42%, #b9afe8);
  color: #212227;
}

#hb-rank[data-ui="rank2"] header {
  flex: none;
  height: 46px;
  grid-template-columns: 44px 1fr 78px;
  background: #fff;
  z-index: 3;
}

#hb-rank[data-ui="rank2"] h2 {
  font-size: 18px;
  font-weight: 600;
  color: #0b1028;
}

#hb-rank[data-ui="rank2"] .hb-rank-rulebtn {
  font-size: 14px;
  color: #31323b;
  padding: 0;
}

#hb-rank[data-ui="rank2"] .hb-rank-main {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}

#hb-rank[data-ui="rank2"] .hb-rank-banner {
  height: 214px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

#hb-rank[data-ui="rank2"] .hb-rank-banner img {
  width: 112%;
  max-width: none;
  height: 214px;
  object-fit: cover;
  object-position: center top;
}

#hb-rank[data-ui="rank2"] .hb-rank-count {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 48px);
  margin: -28px auto 8px;
  padding: 0 16px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #cf65f8, #a047e6);
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  white-space: nowrap;
}

#hb-rank[data-ui="rank2"] .hb-rank-count b {
  font-weight: 500;
}

#hb-rank[data-ui="rank2"] .hb-rank-tab {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 44px;
  margin: 0 0 -8px 28px;
}

#hb-rank[data-ui="rank2"] .hb-rank-tab > img {
  width: 100%;
  height: 44px;
  object-fit: fill;
  display: block;
}

#hb-rank[data-ui="rank2"] .hb-rank-tab span {
  position: absolute;
  inset: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a3b00;
  font-size: 16px;
  font-weight: 700;
}

#hb-rank[data-ui="rank2"] .hb-rank-tab .chev {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  object-fit: contain;
}

#hb-rank[data-ui="rank2"] .hb-rank-tab .chev.r {
  transform: scaleX(-1);
}

#hb-rank[data-ui="rank2"] .hb-rank-card {
  position: relative;
  z-index: 1;
  margin: 0 10px 12px;
  padding: 8px 8px 10px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: linear-gradient(180deg, #dee4fc, #fff 46px);
}

#hb-rank[data-ui="rank2"] .hb-rank-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  margin: 4px 8px 8px;
  padding: 0 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: linear-gradient(90deg, #d367f9, #933de1);
  box-shadow: 0 2px 8px rgba(143, 104, 197, 0.41);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

#hb-rank[data-ui="rank2"] .hb-rank-notice {
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0 6px 4px;
  padding: 0 10px;
  border-radius: 10px;
  background: #f4f1ff;
  overflow: hidden;
}

#hb-rank[data-ui="rank2"] .hb-rank-notice > img {
  width: 18px;
  height: 18px;
  flex: none;
  margin-right: 8px;
}

#hb-rank[data-ui="rank2"] .hb-rank-marquee {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

#hb-rank[data-ui="rank2"] .hb-rank-marquee span {
  display: inline-block;
  padding-left: 100%;
  color: #424653;
  font-size: 13px;
  animation: hb-rank-marquee 18s linear infinite;
}

@keyframes hb-rank-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

#hb-rank[data-ui="rank2"] .hb-rank-weeks {
  display: flex;
  gap: 18px;
  padding: 8px 16px 0;
}

#hb-rank[data-ui="rank2"] .hb-rank-weeks button {
  flex: none;
  width: auto;
  height: auto;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #424653;
  font-size: 14px;
  font-weight: 500;
}

#hb-rank[data-ui="rank2"] .hb-rank-weeks button i {
  display: block;
  height: 3px;
  margin-top: 6px;
  border-radius: 999px;
  background: transparent;
}

#hb-rank[data-ui="rank2"] .hb-rank-weeks button.on {
  background: transparent;
  color: #212227;
  font-weight: 700;
}

#hb-rank[data-ui="rank2"] .hb-rank-weeks button.on i {
  background: linear-gradient(90deg, #d166f8, #9740e3);
}

#hb-rank[data-ui="rank2"] .hb-rank-list {
  flex: none;
  overflow: visible;
  padding: 0 8px;
}

#hb-rank[data-ui="rank2"] .hb-rank-head,
#hb-rank[data-ui="rank2"] .hb-rank-row,
#hb-rank[data-ui="rank2"] .hb-rank-foot {
  display: grid;
  grid-template-columns: 72px 1fr 1.15fr 64px;
  align-items: center;
}

#hb-rank[data-ui="rank2"] .hb-rank-head {
  height: 40px;
  border-top: 1px solid #e7eafe;
  color: #4c4a5d;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

#hb-rank[data-ui="rank2"] .hb-rank-row {
  height: 36px;
  color: #0b1028;
  font-size: 13px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

#hb-rank[data-ui="rank2"] .hb-rank-row.hot {
  height: 52px;
  font-size: 14px;
  font-weight: 600;
}

#hb-rank[data-ui="rank2"] .hb-rank-row .rk {
  height: 100%;
  background: center / 42px 42px no-repeat;
  line-height: 36px;
}

#hb-rank[data-ui="rank2"] .hb-rank-row.hot .rk {
  line-height: 52px;
  color: transparent;
}

#hb-rank[data-ui="rank2"] .hb-rank-row .nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hb-rank[data-ui="rank2"] .hb-rank-row .bet {
  font-weight: 700;
  color: #2d2f38;
}

#hb-rank[data-ui="rank2"] .hb-rank-row .pz {
  font-weight: 700;
  color: #e92e48;
  font-size: 15px;
}

#hb-rank[data-ui="rank2"] .hb-rank-look {
  display: block;
  width: 132px;
  height: 36px;
  margin: 10px auto 4px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #d367f9, #933de1);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

#hb-rank[data-ui="rank2"] .hb-rank-foot {
  flex: none;
  height: 48px;
  margin: 0;
  padding: 0 18px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #e370fe, #933de1);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

#hb-rank[data-ui="rank2"] .hb-rank-foot b {
  font-size: 16px;
}

#hb-rank[data-ui="rank2"] .hb-rank-foot.is-flash {
  filter: brightness(1.15);
}

#hb-rank[data-ui="rank2"] .hb-rank-empty {
  padding: 24px 12px;
  text-align: center;
  color: #636072;
}

#hb-rank[data-ui="rank2"] .hb-rank-mask {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
}

#hb-rank[data-ui="rank2"].is-rule .hb-rank-mask {
  display: flex;
}

#hb-rank[data-ui="rank2"] .hb-rank-dialog {
  width: 85%;
  height: 60%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

#hb-rank[data-ui="rank2"] .hb-rank-dialog > i {
  width: 108px;
  height: 4px;
  margin: 0 auto;
  background: #a134f1;
}

#hb-rank[data-ui="rank2"] .hb-rank-dialog h3 {
  margin: 16px 0 12px;
  text-align: center;
  font-size: 17px;
  color: #21232d;
}

#hb-rank[data-ui="rank2"] .hb-rank-dialog .hb-rank-rule {
  flex: 1;
  overflow: auto;
  margin: 0;
  padding: 0 22px 12px;
  color: #424653;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
}

#hb-rank[data-ui="rank2"] .hb-rank-ok {
  flex: none;
  height: 48px;
  border: 0;
  background: #fff;
  color: #a134f1;
  font-size: 16px;
}

@keyframes hall-scroll-fb6bea03{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - 2px))}}

#hb-jack .jackpot-page{color:#1d2548;background:#ebecf5;min-height:100svh}
#hb-jack .head-area{box-sizing:border-box;background:#fff;justify-content:space-between;align-items:center;width:100%;height:52px;padding:0 18px;display:flex}
#hb-jack .left-slot,#hb-jack .right-menu{background:0 0;border:0;padding:0}
#hb-jack .left-slot{text-align:left;flex:1}
#hb-jack .top-back{border-bottom:3px solid #424653;border-left:3px solid #424653;width:8px;height:15px;display:inline-block;transform:rotate(45deg)}
#hb-jack .head-text{text-align:center;color:#424653;width:65%;font-size:20px;font-weight:700}
#hb-jack .right-menu{text-align:right;color:#424653;flex:1;font-size:14px}
#hb-jack .jackpot-layout{flex-direction:column;width:100%;min-height:calc(100svh - 52px);display:flex}
#hb-jack .jackpot-main{scrollbar-width:none;-ms-overflow-style:none;flex:1;min-height:0;display:flex;overflow:visible}
#hb-jack .jackpot-main::-webkit-scrollbar{display:none}
#hb-jack .rank-view,#hb-jack .record-view{flex:1;min-height:100%}
#hb-jack .rank-view{background:#512e22;flex-direction:column;padding-bottom:24px;display:flex}
#hb-jack .record-view{background:#512e22;flex-direction:column;display:flex}
#hb-jack .hero-wrap{aspect-ratio:554/432;width:100%;position:relative;overflow:hidden}
#hb-jack .hero-image{object-fit:cover;object-position:center top;width:100%;height:100%;display:block}
#hb-jack .table-wrap-record{background-position:top;background-size:100% 100%;flex-shrink:0;justify-content:center;width:100%;height:300px;display:flex}
#hb-jack .tab-container{box-sizing:border-box;background-size:100% 100%;align-items:center;width:204px;height:38px;margin:20px auto 0;padding:5px;display:flex}
#hb-jack .hero-wrap .tab-container{margin-top:20px;position:absolute;top:0;left:50%;transform:translate(-50%)}
#hb-jack .table-wrap-record .tab-container{margin-top:18px}
#hb-jack .tab-item{text-align:center;color:#bb7c3d;background:0 0;border:0;width:97px;height:27px;font-size:12px;font-weight:700;line-height:27px}
#hb-jack .tab-item.active{color:#fff;background-image:linear-gradient(#ff653a 0%,#ff2d12 45%,#b71806 100%);border-radius:999px;box-shadow:inset 0 1px #ffe8afa6,0 2px 6px #7618074d}
#hb-jack .jackpot-hall{background-size:100% 100%;width:calc(100% - 28px);height:158px;margin:-72px 14px 4px;position:relative;overflow:visible}
#hb-jack .jackpot-hall-content{box-sizing:border-box;width:100%;height:96px;padding:3px 7px;position:absolute;top:50px;left:0;overflow:hidden}
#hb-jack .hall-list{width:100%;height:100%;overflow:hidden}
#hb-jack .hall-list-track{flex-direction:column;gap:4px;width:100%;animation:14s linear infinite hall-scroll-fb6bea03;display:flex}
#hb-jack .hall-row{box-sizing:border-box;background:linear-gradient(#831238f5 0%,#5b003af5 100%);border-radius:999px;align-items:center;height:18px;margin:0 2px;padding:0 6px 0 3px;display:flex}
#hb-jack .hall-sort,#hb-jack .hall-user,#hb-jack .hall-game,#hb-jack .hall-level,#hb-jack .hall-amount{white-space:nowrap;line-height:1}
#hb-jack .hall-sort{text-align:center;color:#ffd95c;width:24px;font-size:11px;font-weight:700}
#hb-jack .hall-user{text-align:center;color:#fff8f2;width:54px;font-size:11px}
#hb-jack .hall-game{text-align:center;color:#b9ff37;width:82px;font-size:11px;font-weight:700}
#hb-jack .hall-level{text-align:center;color:#ffee69;width:48px;font-size:11px;font-weight:700}
#hb-jack .hall-amount{text-align:right;color:#ffd84a;flex:1;font-size:10px;font-weight:700}
#hb-jack .hall-empty{color:#fff;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;font-size:17px;font-weight:700;display:flex}
#hb-jack .hall-empty:after{content:"";background:#230817db;border-radius:999px;width:122px;height:14px;margin-top:32px;box-shadow:inset 0 1px 2px #00000047}
#hb-jack .jackpot-sort{box-sizing:border-box;background:linear-gradient(#ef1a11 0%,#c9150d 100%);border:4px solid #fff58d;border-radius:18px;width:calc(100% - 24px);margin:2px 12px 0;padding:11px 18px 18px;box-shadow:inset 0 1px #ffdb5180,0 2px #76230d57}
#hb-jack .sort-title{align-items:center;height:36px;font-size:17px;line-height:1;display:flex}
#hb-jack .sort-title-text1,#hb-jack .sort-title-text2,#hb-jack .sort-title-text3,#hb-jack .sort-title-text4,#hb-jack .sort-title-text5{color:#ffbb3d;text-align:center;text-shadow:0 1px #751c084d;font-weight:900}
#hb-jack .sort-title-text1,#hb-jack .sort-title-text2{width:18%}
#hb-jack .sort-title-text3,#hb-jack .sort-title-text5{width:20%}
#hb-jack .sort-title-text4{width:25%}
#hb-jack .sort-content{background:#fff;justify-content:center;align-items:center;min-height:552px;display:flex}
#hb-jack .sort-content-rank{box-sizing:border-box;min-height:auto;padding:0;display:block;overflow:visible}
#hb-jack .rank-content-list{flex-direction:column;gap:0;display:flex}
#hb-jack .rank-list-row{box-sizing:border-box;border-bottom:0;align-items:center;min-height:60px;padding:0 5px;display:flex}
#hb-jack .rank-list-row:nth-child(odd){background:#eee9ff}
#hb-jack .rank-list-row:nth-child(2n){background:#fff9ee}
#hb-jack .sort-title-text1-tab,#hb-jack .sort-title-text2-tab,#hb-jack .sort-title-text3-tab,#hb-jack .sort-title-text4-tab,#hb-jack .sort-title-text5-tab{text-align:center;justify-content:center;align-items:center;min-height:60px;display:flex}
#hb-jack .sort-title-text1-tab,#hb-jack .sort-title-text2-tab{width:18%}
#hb-jack .sort-title-text3-tab,#hb-jack .sort-title-text5-tab{width:20%}
#hb-jack .sort-title-text4-tab{color:#101018;flex-direction:column;gap:2px;width:25%;font-size:13px;font-weight:900;line-height:1.12}
#hb-jack .sort-title-text2-tab{color:#050509;font-size:14px;font-weight:900}
#hb-jack .sort-title-text3-tab{color:#09090d;padding:0 2px;font-size:14px;font-weight:900;line-height:1.2}
#hb-jack .sort-title-text5-tab{color:#ff1717;letter-spacing:.2px;font-size:17px;font-weight:900}
#hb-jack .rank-number{color:#303241;font-size:16px;font-weight:700}
#hb-jack .rank-badge{color:#fff;border-radius:50% 50% 44% 44%;justify-content:center;align-items:center;width:38px;height:33px;font-size:0;font-weight:800;display:flex;position:relative;transform:rotate(45deg);box-shadow:inset 0 2px #ffffffb3,inset 0 -3px #5f250738,0 2px 5px #50190a33}
#hb-jack .rank-badge:before{content:"";background:#ffffff57;border:2px solid #ffeda7d9;border-radius:50%;position:absolute;inset:6px}
#hb-jack .rank-badge:after{content:"";border-radius:0 0 18px 18px;width:25px;height:12px;position:absolute;bottom:-6px;left:6px;transform:rotate(-45deg)}
#hb-jack .rank-badge-1{background:linear-gradient(135deg,#fff07a 0%,#ff9d28 28%,#fa2a18 62%,#a90908 100%)}
#hb-jack .rank-badge-2{background:linear-gradient(135deg,#fff1a0 0%,#67c8ff 28%,#256fff 62%,#1941bb 100%)}
#hb-jack .rank-badge-3{background:linear-gradient(135deg,#fff0a4 0%,#a7f170 28%,#4fc448 62%,#23801f 100%)}
#hb-jack .rank-badge-1:after{background:linear-gradient(#ffe36b 0%,#ff6b1f 100%)}
#hb-jack .rank-badge-2:after{background:linear-gradient(#ffdc66 0%,#3c8cff 100%)}
#hb-jack .rank-badge-3:after{background:linear-gradient(#ffdf69 0%,#53c83d 100%)}
#hb-jack .sort-empty{flex-direction:column;align-items:center;display:flex}
#hb-jack .empty-img{width:157px;height:157px}
#hb-jack .jackpot-record{box-sizing:border-box;background:#c51910;border:3px solid #fff59b;border-radius:17px;flex:1;width:calc(100% - 26px);min-height:calc(100svh - 434px);margin:0 13px 18px;padding:5px 15px 18px;position:relative;overflow:visible}
#hb-jack .jackpot-record-top{width:180px;height:50px;position:absolute;top:-32px;left:50%;overflow:hidden;transform:translate(-50%)}
#hb-jack .jackpot-record-icon{width:100%;height:100%}
#hb-jack .rank-title{align-items:center;width:100%;height:42px;display:flex}
#hb-jack .jackpot-record-title{margin-top:15px}
#hb-jack .rank-title-text1,#hb-jack .rank-title-text2,#hb-jack .rank-title-text3,#hb-jack .rank-title-text4{justify-content:center;align-items:center;display:flex}
#hb-jack .rank-title-text1,#hb-jack .rank-title-text3{width:30%}
#hb-jack .rank-title-text2,#hb-jack .rank-title-text4{width:20%}
#hb-jack .rank-title img{width:auto;height:20px;display:block}
#hb-jack .sort-content-record{padding-top:10px;overflow-y:auto}
#hb-jack .record-empty{flex-direction:column;justify-content:center;align-items:center;min-height:640px;display:flex}
#hb-jack .record-empty-img{width:116px;height:116px}
#hb-jack .record-empty-text{color:#ffffffeb;margin-top:14px;font-size:20px;font-weight:700}
#hb-jack .record-row{box-sizing:border-box;background:#6b100a;border-radius:10px;align-items:center;min-height:44px;margin-bottom:10px;padding:0 4px;display:flex}
#hb-jack .record-row .rank-title-text1-tab,#hb-jack .record-row .rank-title-text2-tab,#hb-jack .record-row .rank-title-text3-tab,#hb-jack .record-row .rank-title-text4-tab{justify-content:center;align-items:center;min-height:40px;display:flex}
#hb-jack .record-row .rank-title-text1-tab,#hb-jack .record-row .rank-title-text3-tab{width:30%}
#hb-jack .record-row .rank-title-text2-tab,#hb-jack .record-row .rank-title-text4-tab{width:20%}
#hb-jack .record-row .rank-title-text1-tab{color:#fff7d3;font-size:14px;font-weight:700}
#hb-jack .record-row .rank-title-text2-tab,#hb-jack .record-row .rank-title-text3-tab{color:#ebcd28;font-size:14px;font-weight:700}
#hb-jack .record-row .rank-title-text4-tab{color:#ffeb4f;font-size:14px;font-weight:700}
#hb-jack .record-user{text-align:center;width:100%;line-height:1.25}
#hb-jack .record-user strong{white-space:nowrap;font-weight:700}
#hb-jack .jackpot-footer{z-index:10;background-size:100% 100%;border-top:2px solid #ffe44f;border-radius:10px 10px 0 0;flex-shrink:0;justify-content:space-between;align-items:center;height:78px;display:flex;overflow:hidden}
#hb-jack .jackpot-footer-left{justify-content:center;align-items:center;width:104px;height:100%;display:flex}
#hb-jack .jackpot-footer-left-item{width:82px;height:64px;overflow:hidden}
#hb-jack .jackpot-footer-left-item-icon{width:100%;height:100%}
#hb-jack .jackpot-footer-right{box-sizing:border-box;flex-direction:column;justify-content:center;width:calc(100% - 104px);height:100%;padding-right:8px;display:flex}
#hb-jack .jackpot-footer-right-tit,#hb-jack .jackpot-footer-right-num{align-items:center;width:100%;display:flex}
#hb-jack .jackpot-footer-right-tit{color:#fff6e1}
#hb-jack .jackpot-footer-right-num{color:#ffe947;margin-top:8px}
#hb-jack .jackpot-footer-right-tit-text0,#hb-jack .jackpot-footer-right-tit-num0{text-align:center;width:25%}
#hb-jack .jackpot-footer-right-tit-text1,#hb-jack .jackpot-footer-right-tit-num1,#hb-jack .jackpot-footer-right-tit-text2,#hb-jack .jackpot-footer-right-tit-num2{text-align:center;width:18%}
#hb-jack .jackpot-footer-right-tit-text3,#hb-jack .jackpot-footer-right-tit-num3{text-align:center;width:39%}
#hb-jack .jackpot-footer-right-tit div{white-space:nowrap;font-size:11px;font-weight:900}
#hb-jack .jackpot-footer-right-num div{white-space:nowrap;font-size:14px;font-weight:900}
#hb-jack .money-prefix{color:#fde730;margin-right:2px}
@media (width<=393px){
#hb-jack .jackpot-sort{padding-inline:14px}
#hb-jack .sort-title{font-size:15px}
#hb-jack .sort-content{min-height:500px}
#hb-jack .sort-content-rank{min-height:300px}
#hb-jack .sort-title-text2-tab,#hb-jack .sort-title-text3-tab,#hb-jack .sort-title-text4-tab{font-size:12px}
#hb-jack .sort-title-text5-tab{font-size:16px}
#hb-jack .jackpot-footer-left{width:92px}
#hb-jack .jackpot-footer-left-item{width:74px;height:58px}
#hb-jack .jackpot-footer-right{width:calc(100% - 92px);padding-right:6px}
#hb-jack .jackpot-footer-right-tit div{font-size:10px}
#hb-jack .jackpot-footer-right-num div{font-size:13px}
}

#hb-jack {
  display: none;
  position: fixed;
  z-index: 370;
  inset: 0;
  margin: 0 auto;
  width: min(100vw, 488px);
  background: #ebecf5;
  color: #1d2548;
}
#hb-jack.is-open {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#hb-jack .jackpot-page {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: auto;
}
#hb-jack .rank-view[hidden],
#hb-jack .record-view[hidden] { display: none !important; }
#hb-jack .rank-badge span {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-45deg);
}
#hb-jack .hall-user,
#hb-jack .hall-game,
#hb-jack .hall-level,
#hb-jack .sort-title-text2-tab,
#hb-jack .sort-title-text3-tab,
#hb-jack .record-row .rank-title-text1-tab,
#hb-jack .record-row .rank-title-text3-tab,
#hb-jack .jackpot-footer-right-num div,
#hb-jack .jackpot-footer-right-tit div {
  overflow: hidden;
  text-overflow: ellipsis;
}
#hb-jack .hb-jack-mask {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(20, 6, 4, .55);
  align-items: flex-end;
  justify-content: center;
}
#hb-jack.is-help .hb-jack-mask { display: flex; }
#hb-jack .hb-jack-sheet {
  width: 100%;
  max-height: 78%;
  overflow: auto;
  box-sizing: border-box;
  padding: 18px 16px 22px;
  border-radius: 16px 16px 0 0;
  background: #fff8ee;
  color: #3a2018;
}
#hb-jack .hb-jack-sheet h3 {
  margin: 12px 0 6px;
  color: #c51910;
  font-size: 16px;
}
#hb-jack .hb-jack-sheet p {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 13px;
}
#hb-jack .hb-jack-sheet img {
  width: 100%;
  border-radius: 10px;
  margin: 8px 0;
}
#hb-jack .hb-jack-ok {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  border: 0;
  border-radius: 21px;
  background: linear-gradient(#ff653a, #b71806);
  color: #fff;
  font-weight: 700;
}
.app-modal__panel {
  min-height: 0 !important;
  max-height: min(78vh, calc(100dvh - 24px)) !important;
}
.app-modal__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: min(62vh, calc(100dvh - 120px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.hb-qr-field { margin-top: 12px; }
.hb-qr-field input { margin-top: 8px; }
.hb-qr-field img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 8px;
}
.hb-card-qr {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 6px;
}
#hb-note {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 3000;
  max-width: 80vw;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  font-size: 14px;
  display: none;
}
#hb-note.is-on { display: block; }
#hb-about {
  display: none;
  position: fixed;
  z-index: 230;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 488px);
  transform: translateX(-50%);
  background: #f3f4f8;
  overflow: auto;
}
#hb-about.is-open {
  display: flex;
  flex-direction: column;
}
#hb-about header {
  height: 50px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: #fff;
  position: sticky;
  top: 0;
}
#hb-about h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  color: #1d2548;
}
.hb-about-body {
  margin: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  color: #243044;
  font-size: 14px;
  line-height: 1.7;
}
.hb-about-body h2 {
  text-align: left;
  font-size: 20px;
  margin: 0 0 8px;
}
.hb-about-body h3 {
  margin: 16px 0 6px;
  font-size: 16px;
  color: #1d2548;
}
.hb-about-sum {
  margin: 0;
  color: #667085;
}
.hb-about-body ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
#hb-feedback {
  display: none;
  position: fixed;
  z-index: 230;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100vw, 488px);
  transform: translateX(-50%);
  background: #f3f4f8;
  overflow: auto;
}
#hb-feedback.is-open { display: flex; flex-direction: column; }
#hb-feedback header {
  height: 50px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  background: #fff;
  position: sticky;
  top: 0;
}
#hb-feedback h2 { margin: 0; text-align: center; font-size: 18px; color: #1d2548; }
.hb-fb-body { margin: 12px; }
.hb-fb-body textarea {
  width: 100%;
  min-height: 140px;
  box-sizing: border-box;
  border: 0;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}
.hb-fb-send {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  border: 0;
  border-radius: 22px;
  background: #14c3a8;
  color: #fff;
  font-size: 16px;
}
.hb-fb-list { margin-top: 16px; }
.hb-fb-list article, .hb-fb-empty {
  margin-bottom: 10px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  color: #243044;
  font-size: 14px;
  line-height: 1.6;
}
.hb-fb-list b { display: block; margin-bottom: 4px; color: #14c3a8; }
.hb-fb-list p, .hb-fb-empty { margin: 0; }
body.hb-cs-open,
body.hb-cs-open #app {
  overflow: hidden;
  scrollbar-width: none;
}
body.hb-cs-open::-webkit-scrollbar,
.customer-service-page::-webkit-scrollbar,
.customer-frame::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.customer-service-page {
  overflow: hidden;
  scrollbar-width: none;
}
.customer-frame {
  overflow: hidden;
  scrollbar-width: none;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
}
.hb-wheel-copy img,
.hb-media-copy img,
.hb-agency-copy img,
.hb-invite-rules img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin: 8px 0;
}

.invite-page .hb-rec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 2px;
  border-bottom: 1px solid #e6e8ef;
  font-size: 13px;
  color: #24324a;
}

.invite-page .hb-rec-row b {
  font-weight: 600;
}

.invite-page .hb-rec-row span {
  color: #8b93a7;
}

.invite-page .hb-rec-row em {
  font-style: normal;
  color: #7a3cff;
}

.self-media-page .platform-logo.hb-platform-img {
  width: 78px;
  height: 78px;
  border-radius: 18px;
  overflow: hidden;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  color: transparent;
  font-size: 0;
  box-shadow: none;
}

.self-media-page .platform-logo.hb-platform-img span {
  display: none;
}