:root {
  --green: #20a77b;
  --green-dark: #087d60;
  --green-soft: #eaf9f4;
  --green-pale: #f3fcf9;
  --text: #20252b;
  --muted: #767d84;
  --subtle: #a0a6aa;
  --line: #e3e7e5;
  --bg: #f6f7f7;
  --surface: #ffffff;
  --red: #e94e4e;
  --orange: #f5a000;
  --shadow: 0 0.0800rem 0.2800rem rgba(23, 76, 61, .08);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-width: 6.4000rem; min-height: 100%; background: var(--bg); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.portal-view {
  min-height: 100svh;
  padding-bottom: calc(1.4000rem + env(safe-area-inset-bottom));
  background: var(--bg);
}

.site-header {
  height: calc(1.2200rem + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  position: sticky;
  z-index: 30;
  top: 0;
  padding: env(safe-area-inset-top) 0.2600rem 0;
  border-bottom: 0.0200rem solid var(--line);
  background: rgba(255,255,255,.97);
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.1600rem;
  padding: 0;
  border: 0;
  color: var(--green-dark);
  background: transparent;
}
.brand-symbol {
  width: 0.7800rem;
  height: 0.7800rem;
  display: grid;
  place-items: center;
  border-radius: 0.2200rem;
  color: #fff;
  background: linear-gradient(145deg, #087d60, #2ab78a);
  box-shadow: 0 0.1000rem 0.2400rem rgba(32,167,123,.21);
  font-size: 0.3800rem;
  font-weight: 900;
}
.brand-name strong, .brand-name small { display: block; text-align: left; }
.brand-name strong { color: #14221e; font-size: 0.3600rem; letter-spacing: .07em; }
.brand-name small { margin-top: 0.0400rem; color: #82928c; font-size: 0.1400rem; letter-spacing: .15em; }
.search-button {
  width: 0.9200rem;
  display: grid;
  justify-items: center;
  gap: 0.0200rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  color: #4f5558;
  background: transparent;
  font-size: 0.2200rem;
}
.search-button i {
  width: 0.3600rem;
  height: 0.3600rem;
  display: block;
  position: relative;
  border: 0.0600rem solid var(--green);
  border-radius: 50%;
}
.search-button i::after {
  content: "";
  width: 0.1600rem;
  height: 0.0600rem;
  position: absolute;
  right: -0.1400rem;
  bottom: -0.0800rem;
  border-radius: 0.0400rem;
  background: var(--green);
  transform: rotate(48deg);
}
.header-back {
  width: 0.6800rem;
  height: 0.8400rem;
  margin-left: -0.1600rem;
  padding: 0;
  border: 0;
  color: #68716d;
  background: transparent;
  font-size: 0.7200rem;
  line-height: 1;
}

.portal-content {
  width: 100%;
  max-width: 12.4000rem;
  min-height: calc(100svh - 2.6200rem);
  margin: 0 auto;
  background: var(--bg);
}

.hero-banner {
  height: 2.8600rem;
  overflow: hidden;
  position: relative;
  margin: 0.2400rem 0.2800rem 0;
  border-radius: 0.2200rem;
  color: var(--green-dark);
  background: #e9fff8;
  box-shadow: var(--shadow);
}
.hero-image {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  inset: 0;
  object-fit: cover;
}
.hero-banner::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,.04) 68%);
  pointer-events: none;
}
.hero-copy {
  max-width: 60%;
  position: relative;
  z-index: 2;
  padding: 0.3800rem 0 0 0.3800rem;
}
.hero-copy small { display: block; font-size: 0.1600rem; letter-spacing: .2em; font-weight: 800; }
.hero-copy strong { display: block; margin-top: 0.1600rem; font-size: 0.5000rem; line-height: 1.05; letter-spacing: .02em; }
.hero-copy p { margin: 0.1600rem 0 0; color: #2a7963; font-size: 0.2000rem; font-weight: 700; }
.carousel-dots {
  display: flex;
  gap: 0.1000rem;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0.1200rem;
  transform: translateX(-50%);
}
.carousel-dots i { width: 0.1200rem; height: 0.1200rem; border-radius: 50%; background: rgba(255,255,255,.65); }
.carousel-dots i.active { width: 0.3000rem; border-radius: 0.0800rem; background: #fff; }
.notice-bar {
  height: 0.8800rem;
  display: grid;
  grid-template-columns: 0.6400rem minmax(0, 1fr) 0.7600rem;
  align-items: center;
  gap: 0.1000rem;
  padding: 0 0.1400rem 0 0.1800rem;
  border-bottom: 0.0200rem solid var(--line);
  color: #656b69;
  background: #fff;
  font-size: 0.2000rem;
}
.notice-speaker {
  width: 0.5800rem;
  height: 0.5800rem;
  display: grid;
  place-items: center;
  color: #5f6563;
  font-style: normal;
}
.notice-speaker svg {
  width: 0.5600rem;
  height: 0.5600rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.notice-speaker .speaker-body { fill: currentColor; stroke-width: 1; }
.notice-speaker .wave-one { animation: noticeWave 1.15s ease-in-out infinite; }
.notice-speaker .wave-two { animation: noticeWave 1.15s .2s ease-in-out infinite; }
.notice-viewport {
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.notice-message {
  min-width: max-content;
  display: inline-block;
  padding-left: 100%;
  color: #3f4643;
  font-size: 0.2500rem;
  font-weight: 600;
  animation: noticeMarquee 9s linear infinite;
  will-change: transform;
}
.notice-mail {
  width: 0.6400rem;
  height: 0.6200rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--green);
  background: transparent;
}
.notice-mail svg {
  width: 0.6200rem;
  height: 0.6200rem;
  fill: currentColor;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-width: 1.3;
}
@keyframes noticeWave {
  0%, 100% { opacity: .15; transform: translateX(-0.0200rem); }
  50% { opacity: 1; transform: translateX(0.0200rem); }
}
@keyframes noticeMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.jackpot-banner {
  height: 2.2400rem;
  overflow: hidden;
  position: relative;
  border-bottom: 0.0200rem solid var(--line);
  background: linear-gradient(135deg, #fff8cf, #f7fff9);
}
.jackpot-banner > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  animation: jackpotPan 8s ease-in-out infinite alternate;
  transform: scale(1.02);
}
.jackpot-banner::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,231,75,.95) 0 0.0600rem, transparent 0.0800rem),
    radial-gradient(circle at 32% 76%, rgba(255,214,31,.85) 0 0.0400rem, transparent 0.0600rem),
    radial-gradient(circle at 68% 25%, rgba(255,241,125,.9) 0 0.0600rem, transparent 0.0800rem),
    radial-gradient(circle at 82% 72%, rgba(255,206,32,.85) 0 0.0400rem, transparent 0.0600rem);
  animation: jackpotCoins 2.6s ease-in-out infinite alternate;
  pointer-events: none;
}
.jackpot-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.22) 48%, rgba(255,255,255,.02));
  pointer-events: none;
}
.jackpot-copy {
  width: 49%;
  display: grid;
  justify-items: center;
  position: absolute;
  z-index: 2;
  left: 26%;
  top: 0.2600rem;
  color: #006f58;
  text-align: center;
}
.jackpot-copy small {
  color: #b87900;
  font-size: 0.2000rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.jackpot-copy strong {
  display: block;
  margin-top: 0.1600rem;
  padding: 0.0600rem 0.1800rem;
  border: 0.0600rem solid #13aa80;
  border-radius: 0.3800rem;
  color: #ffe63a;
  background: #18a87e;
  box-shadow: 0 0.0600rem 0 #08745a;
  font-size: 0.4200rem;
  line-height: 1.2;
  text-shadow: 0 0.0400rem 0 rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;
  animation: jackpotGlow 1.6s ease-in-out infinite alternate;
}
.jackpot-copy strong::after {
  content: "";
  width: 38%;
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -55%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: skewX(-18deg);
  animation: jackpotShine 2.4s linear infinite;
}
.jackpot-copy strong.tick { animation: jackpotTick .28s ease-out, jackpotGlow 1.6s ease-in-out infinite alternate; }
.jackpot-copy span {
  margin-top: 0.0800rem;
  color: #777;
  font-size: 0.1600rem;
}

@keyframes jackpotPan {
  from { transform: scale(1.02) translateX(-0.0400rem); }
  to { transform: scale(1.07) translateX(0.0600rem); }
}
@keyframes jackpotCoins {
  from { opacity: .35; transform: translateY(0.0800rem); }
  to { opacity: 1; transform: translateY(-0.1000rem); }
}
@keyframes jackpotGlow {
  from { box-shadow: 0 0.0600rem 0 #08745a, 0 0 0.1000rem rgba(255,230,58,.35); }
  to { box-shadow: 0 0.0600rem 0 #08745a, 0 0 0.3000rem rgba(255,230,58,.95); }
}
@keyframes jackpotShine {
  0% { left: -55%; }
  55%, 100% { left: 125%; }
}
@keyframes jackpotTick {
  0% { transform: scale(1); }
  45% { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.home-actions {
  display: grid;
  position: relative;
  z-index: 12;
  grid-template-columns: 39% minmax(0, 1fr);
  min-height: 1.5200rem;
  border-bottom: 0.0200rem solid var(--line);
  background: #fff;
}
.account-strip {
  min-width: 0;
  min-height: 1.5200rem;
  display: grid;
  position: relative;
  align-content: center;
  padding: 0.1600rem;
  background: #fff;
}
.account-strip.guest {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1400rem;
}
.account-strip.signed-in {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.0800rem;
  padding-left: 0.2600rem;
}
.account-strip button {
  border: 0;
  background: transparent;
}
.account-summary {
  min-width: 0;
  display: flex;
  align-items: center;
}
.account-name {
  min-width: 0;
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 0.1200rem;
  padding: 0;
  color: #555;
  text-align: left;
}
.account-chevron {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 0.1200rem solid #999;
  border-right: 0.1000rem solid transparent;
  border-left: 0.1000rem solid transparent;
  transition: transform .18s ease;
}
.account-name.expanded .account-chevron { transform: rotate(180deg); }
.account-name strong { overflow: hidden; font-size: 0.2400rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.account-copy {
  width: 0.4800rem;
  height: 0.4800rem;
  display: grid;
  flex: 0 0 0.4800rem;
  padding: 0.0400rem;
  place-items: center;
  color: var(--green);
}
.account-copy svg {
  width: 0.3600rem;
  height: 0.3600rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.account-balance {
  display: grid;
  grid-template-columns: 0.3600rem minmax(0.8000rem, max-content) 0.3600rem;
  align-items: center;
  column-gap: 0.0800rem;
  justify-self: start;
  height: 0.5800rem;
  min-height: 0.5800rem;
  padding: 0 0.0800rem 0 0.0600rem;
  border: 0.0200rem solid #dfe9e5;
  border-radius: 0.2800rem;
  box-sizing: border-box;
  background: #fff;
  line-height: 1;
}
.account-balance > * {
  align-self: center;
}
.account-balance .tether-icon {
  width: 0.3600rem;
  height: 0.3600rem;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.account-balance .tether-icon img {
  width: 0.3200rem;
  height: 0.3200rem;
  display: block;
  object-fit: contain;
}
.account-balance .balance-value {
  width: auto;
  min-width: 0.8000rem;
  height: 0.5000rem;
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  padding: 0 0.0200rem 0.0400rem;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #f09a00;
  background: transparent;
  cursor: pointer;
}
.account-balance .balance-value::after {
  height: 0.0200rem;
  position: absolute;
  right: 0.0400rem;
  bottom: 0.0400rem;
  left: 0.0400rem;
  background: #d7a52e;
  content: "";
}
.account-balance .balance-value strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f09a00;
  font-size: 0.3000rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateY(-0.0200rem);
}
.account-balance .balance-char {
  display: inline-block;
  min-width: .56em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.account-balance .balance-char.decimal-point {
  min-width: .3em;
}
.account-balance .balance-char.integer-ahead-decimal {
  min-width: .56em;
}
.account-balance .balance-value:active { opacity: .72; }
.account-balance .balance-refresh {
  width: 0.3600rem;
  height: 0.3600rem;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: var(--green);
}
.account-balance .balance-refresh-control {
  width: 0.3600rem;
  height: 0.3600rem;
  display: grid;
  place-items: center;
  font-style: normal;
}
.account-balance .balance-refresh-control::after {
  display: block;
  color: currentColor;
  content: "↻";
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 0.4000rem;
  font-weight: 700;
  line-height: 0.3600rem;
  transform-origin: 50% 50%;
}
.account-balance .balance-refresh:disabled { opacity: 1; }
.account-balance .balance-refresh.refreshing .balance-refresh-control::after {
  animation: balanceRefreshSpin .42s ease-in-out;
}
@keyframes balanceRefreshSpin {
  to { transform: rotate(360deg); }
}
.account-popover {
  width: 4.5000rem;
  position: absolute;
  z-index: 40;
  left: 0.2000rem;
  top: 0.6600rem;
  padding: 0.3000rem 0.2600rem 0.3400rem;
  border: 0.0200rem solid #dfe5e2;
  border-radius: 0.2000rem;
  background: #fff;
  box-shadow: 0 0.2000rem 0.4800rem rgba(34,63,54,.15);
}
.account-popover[hidden] { display: none; }
.account-popover p {
  margin: 0 0 0.3400rem;
  color: #333;
  font-size: 0.2400rem;
}
.account-popover-user,
.account-popover-id {
  min-width: 0;
  display: flex;
  align-items: center;
}
.account-popover-user {
  gap: 0.1600rem;
  color: var(--green);
}
.account-popover-user svg {
  width: 0.4400rem;
  height: 0.4400rem;
  flex: 0 0 0.4400rem;
  fill: currentColor;
}
.account-popover-user strong {
  overflow: hidden;
  font-size: 0.2600rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-popover-id {
  gap: 0.1600rem;
  margin-top: 0.3600rem;
  color: #a1a5a3;
}
.account-popover-id span { font-size: 0.2400rem; }
.account-popover-id strong {
  overflow: hidden;
  font-size: 0.2400rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-login, .account-register {
  width: 100%;
  height: 0.6800rem;
  padding: 0 0.1000rem;
  border: 0.0200rem solid var(--green) !important;
  border-radius: 0.1200rem;
  color: var(--green-dark);
  font-size: 0.2400rem;
  white-space: nowrap;
}
.account-register { color: #fff !important; background: var(--green) !important; }

.utility-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  min-width: 0;
  min-height: 1.5600rem;
  padding: 0.1800rem 0.0600rem 0.1600rem;
  background: #fff;
}
.utility-item {
  display: grid;
  grid-template-rows: 0.6200rem 0.5600rem;
  align-content: start;
  justify-items: center;
  gap: 0.0800rem;
  min-width: 0;
  min-height: 1.2600rem;
  padding: 0;
  border: 0;
  color: #555;
  background: transparent;
  font-size: 0.2200rem;
}
.utility-item i {
  width: 0.6400rem;
  height: 0.6200rem;
  display: grid;
  place-items: center;
  color: var(--green);
  font-style: normal;
}
.utility-item .utility-icon svg {
  width: 0.6000rem;
  height: 0.6000rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}
.utility-item .utility-icon img {
  width: 0.6000rem;
  height: 0.5200rem;
  display: block;
  object-fit: contain;
}
.utility-item > span {
  width: 100%;
  min-width: 0;
  height: 0.5600rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0.0400rem;
  line-height: 0.2800rem;
  text-align: center;
  overflow-wrap: normal;
}
.utility-item[data-action="app"] > span {
  max-width: 1.1600rem;
}
.utility-item:last-child .utility-icon svg {
  fill: currentColor;
  stroke-width: 0;
}
.utility-item.account-action {
  height: 0.6800rem;
  align-self: center;
  border: 0.0200rem solid var(--green);
  border-radius: 0.1400rem;
  color: var(--green-dark);
  font-size: 0.2400rem;
}
.utility-item.account-action.filled {
  border-color: var(--green);
  color: #fff;
  background: var(--green);
  box-shadow: 0 0 0 0.1000rem rgba(32,167,123,.1);
}
.utility-item.account-action i { display: none; }

.lobby-layout {
  display: grid;
  grid-template-columns: 2.3800rem minmax(0, 1fr);
  min-height: 6.0000rem;
  background: #fff;
}
.side-categories {
  padding: 0.1400rem 0.2000rem 0.2800rem;
  background: #fbfdfc;
}
.side-categories button {
  width: 100%;
  height: 0.9000rem;
  display: flex;
  align-items: center;
  gap: 0.2000rem;
  margin: 0.1200rem 0;
  padding: 0 0.2000rem;
  border: 0;
  border-radius: 0.1400rem;
  color: #818987;
  background: linear-gradient(90deg, #f2fbf8, #fff);
  box-shadow: 0 0.0600rem 0.1800rem rgba(15,117,87,.06);
  font-size: 0.2600rem;
}
.side-categories .category-icon {
  width: 0.5000rem;
  display: grid;
  flex: 0 0 0.5000rem;
  place-items: center;
  font-style: normal;
  font-size: 0.3800rem;
  line-height: 1;
  filter: saturate(1.08);
}
.side-categories .category-slots {
  color: #f2bd28;
  font-family: Arial, sans-serif;
  font-size: 0.2400rem;
  font-weight: 900;
  letter-spacing: -0.0200rem;
  text-shadow: 0 0.0200rem 0 #fff1a7;
}
.side-categories .category-blockchain { color: #21b88b; font-size: 0.3400rem; }
.side-categories button.active {
  color: var(--green-dark);
  background: linear-gradient(90deg, #eefaf6, #fff);
  box-shadow: 0 0.0600rem 0.2200rem rgba(15,117,87,.11);
}
.side-categories button.active::after {
  width: 0.0600rem;
  height: 0.4400rem;
  margin-left: auto;
  border-radius: 0.0400rem;
  background: var(--green);
  content: "";
}
.lobby-main { min-width: 0; padding: 0 0.1600rem 0.3200rem; }
.lobby-tabs {
  height: 0.9600rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 0.0200rem solid var(--line);
}
.lobby-tabs button {
  position: relative;
  border: 0;
  color: #424846;
  background: transparent;
  font-size: 0.2400rem;
}
.lobby-tabs button.active { color: var(--green-dark); }
.lobby-tabs button.active::after {
  content: "";
  height: 0.0400rem;
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: 0;
  background: var(--green);
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2600rem 0.1800rem;
  padding-top: 0.2400rem;
}
.game-item {
  min-width: 0;
  padding: 0;
  border: 0;
  color: #626866;
  background: transparent;
  font-size: 0.2000rem;
}
.game-thumb {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  border-radius: 0.2000rem;
  overflow: hidden;
  position: relative;
  background: #eaf7f3;
  box-shadow: 0 0.0800rem 0.2200rem rgba(17,70,55,.12);
}
.game-thumb img {
  width: 300%;
  height: 200%;
  max-width: none;
  position: absolute;
  object-fit: fill;
}
.sprite-1 img { left: 0; top: 0; }
.sprite-2 img { left: -100%; top: 0; }
.sprite-3 img { left: -200%; top: 0; }
.sprite-4 img { left: 0; top: -100%; }
.sprite-5 img { left: -100%; top: -100%; }
.sprite-6 img { left: -200%; top: -100%; }
.game-item strong { display: block; margin-top: 0.1200rem; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.offer-navigation {
  display: grid;
  grid-template-columns: 0.8400rem minmax(0, 1fr);
  border-bottom: 0.0200rem solid var(--line);
  background: #fff;
}
.offer-back {
  border: 0;
  color: #68706d;
  background: #fff;
  font-size: 0.6000rem;
  font-weight: 300;
}
.offer-top-tabs {
  height: 0.9800rem;
  display: flex;
  overflow-x: auto;
  background: #fff;
  scrollbar-width: none;
}
.offer-top-tabs::-webkit-scrollbar { display: none; }
.offer-top-tabs button {
  flex: 0 0 auto;
  min-width: 1.2000rem;
  position: relative;
  padding: 0 0.2600rem;
  border: 0;
  color: #1e2422;
  background: transparent;
  font-size: 0.2400rem;
}
.offer-top-tabs button.active { color: var(--green-dark); }
.offer-top-tabs button.active::after {
  content: "";
  height: 0.0400rem;
  position: absolute;
  left: 0.3600rem;
  right: 0.3600rem;
  bottom: 0;
  background: var(--green);
}
.offer-layout {
  display: grid;
  grid-template-columns: 2.3200rem minmax(0, 1fr);
  min-height: calc(100svh - 3.6000rem);
  padding-top: 0.0800rem;
  background: #fff;
}
.offer-side { padding: 0 0.2000rem; }
.offer-side button {
  width: 100%;
  height: 0.9000rem;
  display: flex;
  align-items: center;
  gap: 0.1800rem;
  margin: 0.1400rem 0;
  padding: 0 0.1800rem;
  border: 0;
  border-radius: 0.1400rem;
  color: #929997;
  background: linear-gradient(90deg, #effaf7, #fff);
  box-shadow: 0 0.0600rem 0.1800rem rgba(15,117,87,.06);
  font-size: 0.2400rem;
}
.offer-side button i { width: 0.4000rem; font-style: normal; font-size: 0.3000rem; }
.offer-side button.active { color: #fff; background: linear-gradient(135deg, #10966f, #2dba8d); }
.offer-main { min-width: 0; padding: 0.1800rem 0.2000rem 0.4000rem 0; }
.offer-banner {
  min-height: 2.6000rem;
  overflow: hidden;
  position: relative;
  padding: 0.3200rem;
  border-radius: 0.1400rem;
  color: var(--green-dark);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.42) 57%, rgba(255,255,255,.04)),
    url("/assets/portal/images/bojie-hero-v1.webp");
  background-position: center;
  background-size: cover;
}
.offer-banner strong { display: block; max-width: 58%; font-size: 0.3800rem; line-height: 1.25; }
.offer-banner p { max-width: 58%; margin: 0.1400rem 0 0; font-size: 0.1800rem; font-weight: 700; }
.offer-cards { margin-top: 0.1800rem; }
.offer-card { padding: 0.2600rem; border-bottom: 0.0200rem solid var(--line); background: #fff; }
.offer-card strong { color: var(--green-dark); font-size: 0.2400rem; }
.offer-card p { margin: 0.1200rem 0 0; color: var(--muted); font-size: 0.2000rem; line-height: 1.55; }
.offer-card small { display: block; margin-top: 0.1400rem; color: var(--subtle); font-size: 0.1600rem; }
.offer-actions { display: flex; gap: 0.1600rem; margin: 0.3200rem 0.2000rem; }
.outline-small {
  height: 0.6800rem;
  padding: 0 0.2000rem;
  border: 0.0200rem solid var(--green);
  border-radius: 0.1200rem;
  color: var(--green-dark);
  background: #fff;
  font-size: 0.2000rem;
}

.profile-head {
  min-height: 2.5800rem;
  position: relative;
  padding: 0.8000rem 0.2800rem 0.2200rem;
  background:
    radial-gradient(circle at 72% 2%, transparent 0 1.2600rem, rgba(255,255,255,.62) 1.2800rem 1.3000rem, transparent 1.3200rem),
    radial-gradient(circle at 35% -30%, transparent 0 2.0800rem, rgba(255,255,255,.42) 2.1000rem 2.1200rem, transparent 2.1400rem),
    linear-gradient(145deg, #e4f0ff, #f8fcff 68%, #fff);
}
.profile-back {
  width: 0.6400rem;
  height: 0.6400rem;
  position: absolute;
  left: 0.0800rem;
  top: 0.0800rem;
  padding: 0;
  border: 0;
  color: #68706d;
  background: transparent;
  font-size: 0.6000rem;
  font-weight: 300;
  line-height: 0.6000rem;
}
.profile-login-row { display: flex; align-items: center; gap: 0.2000rem; }
.profile-avatar-button,
.profile-info-avatar-button {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.profile-avatar {
  width: 1.0400rem;
  height: 1.0400rem;
  display: grid;
  position: relative;
  overflow: visible;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #dfe3e4;
  font-size: 0.4400rem;
  font-weight: 800;
}
.profile-avatar svg { width: 0.9800rem; height: 0.9800rem; fill: #fff; stroke: #fff; stroke-width: 1.4; }
.profile-avatar-user {
  overflow: visible;
  background: linear-gradient(135deg, #6fc4ff, #4768e4 55%, #24b38a);
  box-shadow: 0 0.0800rem 0.2400rem rgba(39,100,170,.22);
}
.profile-avatar-user.avatar-hero {
  background-image: url("/assets/portal/images/bojie-games-v1.webp");
  background-position: 0 0;
  background-size: 300% 200%;
}
.profile-avatar-user.avatar-hero .avatar-initial { visibility: hidden; }
.profile-avatar-user.avatar-blue { background: linear-gradient(145deg, #63a6ff, #3e58d7); }
.profile-avatar-user.avatar-green { background: linear-gradient(145deg, #55d3aa, #087d60); }
.profile-avatar-user.avatar-purple { background: linear-gradient(145deg, #b684ff, #7048d6); }
.profile-avatar-user.avatar-coral { background: linear-gradient(145deg, #ffad8f, #df5062); }
.profile-avatar-user.avatar-aqua { background: linear-gradient(145deg, #69e1e3, #148ca7); }
.profile-avatar-user.avatar-gold { background: linear-gradient(145deg, #ffd972, #c88719); }
.profile-avatar-user.avatar-rose { background: linear-gradient(145deg, #ff9ec6, #b84d94); }
.profile-avatar-user.avatar-night { background: linear-gradient(145deg, #6379b8, #202848); }
.profile-avatar-user.avatar-mint { background: linear-gradient(145deg, #a3edc9, #2a9a79); }
.profile-avatar-user.avatar-violet { background: linear-gradient(145deg, #9d8bff, #5a3ab8); }
.profile-avatar-user.avatar-orange { background: linear-gradient(145deg, #ffc36b, #dc6f25); }
.avatar-initial { color: #fff; font-size: 0.4200rem; font-weight: 800; }
.avatar-edit-mark {
  width: 0.4000rem;
  height: 0.4000rem;
  display: grid;
  position: absolute;
  right: -0.0600rem;
  bottom: -0.0200rem;
  z-index: 2;
  overflow: hidden;
  place-items: center;
  border: 0.0400rem solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-style: normal;
}
.avatar-edit-mark svg { width: 0.2400rem; height: 0.2400rem; fill: none; stroke: currentColor; stroke-width: 2; }
.avatar-vip {
  position: absolute;
  right: -0.0600rem;
  bottom: -0.1000rem;
  z-index: 3;
  padding: 0.0200rem 0.0800rem;
  border-radius: 0.0800rem;
  color: #fff;
  background: #05bd34;
  font-size: 0.1800rem;
  font-style: italic;
  font-weight: 800;
  line-height: 0.2800rem;
}
.profile-identity { min-width: 0; flex: 1; }
.profile-identity strong, .profile-identity small { display: block; }
.profile-identity strong { font-size: 0.2800rem; font-weight: 500; }
.profile-identity small { margin-top: 0.0800rem; color: #3f4643; font-size: 0.2200rem; }
.profile-balance { display: flex; align-items: center; gap: 0.1200rem; margin-top: 0.0800rem; }
.profile-balance i {
  width: 0.4200rem;
  height: 0.4200rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 0.1600rem;
  font-style: normal;
}
.profile-balance b { padding-bottom: 0.0400rem; border-bottom: 0.0200rem solid #333; font-size: 0.2800rem; font-weight: 500; }
.profile-balance span { color: var(--green); font-size: 0.3600rem; }
.profile-head-actions { display: flex; position: absolute; right: 0.1800rem; top: 0.1600rem; gap: 0.2000rem; }
.profile-head-actions button { width: 0.5600rem; height: 0.5600rem; display: grid; place-items: center; padding: 0; border: 0; color: var(--green); background: transparent; }
.profile-head-actions svg { width: 0.5000rem; height: 0.5000rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }
.profile-head-actions button:last-child svg { fill: currentColor; stroke: none; }
.profile-head-actions .message-dot { fill: #fff; stroke: none; }
.profile-account-lines { align-self: stretch; display: grid; align-content: center; }
.profile-account-line { min-width: 0; display: flex; align-items: center; gap: 0.1000rem; }
.profile-account-line + .profile-account-line { margin-top: 0.0600rem; }
.profile-account-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.2600rem; }
.profile-id-line { color: #111; font-size: 0.2500rem; }
.profile-id-line > span { white-space: nowrap; }
.profile-id-line > span b { font-size: 0.3200rem; font-weight: 500; }
.profile-copy-button {
  width: 0.4000rem;
  height: 0.4000rem;
  display: grid;
  flex: 0 0 0.4000rem;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--green);
  background: transparent;
}
.profile-copy-button svg { width: 0.3600rem; height: 0.3600rem; fill: none; stroke: currentColor; stroke-width: 2; }
.profile-divider { width: 0.0200rem; height: 0.3600rem; margin: 0 0.0600rem; background: #d9dfdc; }
.profile-balance-link {
  height: 0.4600rem;
  display: flex;
  align-items: center;
  gap: 0.1000rem;
  padding: 0;
  border: 0;
  color: #111;
  background: transparent;
}
.profile-tether { width: 0.3800rem; height: 0.3800rem; display: grid; place-items: center; }
.profile-tether img { width: 0.3400rem; height: 0.3400rem; display: block; }
.profile-balance-link > b {
  min-width: 0.7600rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.0200rem 0.0600rem;
  border-bottom: 0.0200rem solid #222;
  font-size: 0.3200rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.profile-balance-digits .balance-char {
  display: inline-block;
  min-width: .56em;
  text-align: center;
}
.profile-balance-digits .balance-char.decimal-point { min-width: .3em; }
.profile-balance-digits .balance-char.integer-ahead-decimal { min-width: .56em; }
.profile-balance-refresh {
  width: 0.4200rem;
  height: 0.4200rem;
  display: grid;
  flex: 0 0 0.4200rem;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--green);
  background: transparent;
}
.profile-balance-refresh .balance-refresh-control { width: 0.4000rem; height: 0.4000rem; display: grid; place-items: center; font-style: normal; }
.profile-balance-refresh .balance-refresh-control::after { content: "↻"; font-size: 0.4200rem; font-weight: 700; line-height: 0.4000rem; }
.profile-balance-refresh.refreshing .balance-refresh-control::after { animation: balanceRefreshSpin .42s ease-in-out; }
.profile-buttons { display: flex; gap: 0.2000rem; margin-left: auto; }
.profile-buttons button {
  width: 1.3400rem;
  height: 0.6800rem;
  border: 0.0200rem solid var(--green);
  border-radius: 0.1200rem;
  color: var(--green-dark);
  background: #fff;
  font-size: 0.2200rem;
}
.profile-buttons button:first-child { color: #fff; background: var(--green); }
.profile-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 1.2800rem;
  padding: 0.0400rem 0.2600rem 0.1800rem;
  background: linear-gradient(145deg, #f4f9ff, #fff);
}
.profile-quick button {
  display: grid;
  position: relative;
  justify-items: center;
  gap: 0.0800rem;
  padding: 0;
  border: 0;
  color: #232927;
  background: transparent;
  font-size: 0.2200rem;
}
.profile-quick i { width: 0.7200rem; height: 0.6400rem; color: var(--green); font-style: normal; }
.profile-quick i svg { width: 0.6000rem; height: 0.6000rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.profile-quick .quick-deposit i { color: #377fe2; }
.profile-quick em {
  position: absolute;
  left: 57%;
  top: -0.1000rem;
  padding: 0.0400rem 0.1000rem;
  border-radius: 0.0400rem 0.1000rem 0.1000rem 0.0400rem;
  color: #fff;
  background: #05bd34;
  font-size: 0.1600rem;
  font-style: normal;
  white-space: nowrap;
}
.profile-quick em::before { content: ""; position: absolute; left: -0.0800rem; top: 0.0800rem; border-top: 0.0800rem solid transparent; border-right: 0.1000rem solid #05bd34; border-bottom: 0.0800rem solid transparent; }
.vip-card {
  width: calc(100% - 0.6400rem);
  min-height: 2.6600rem;
  display: grid;
  grid-template-columns: 1.2800rem 1.9200rem minmax(0, 1fr) 0.4000rem;
  grid-template-rows: 1fr 0.6800rem;
  align-items: center;
  gap: 0 0.1400rem;
  position: relative;
  margin: 0 0.3200rem 0.2000rem;
  padding: 0.2400rem 0.2800rem 0.1600rem;
  overflow: hidden;
  border: 0;
  border-radius: 0.2000rem;
  color: #fff;
  background:
    repeating-radial-gradient(circle at 8% 50%, transparent 0 0.2400rem, rgba(255,255,255,.13) 0.2600rem 0.2800rem),
    linear-gradient(135deg, #25aa80, #22a27b);
  text-align: left;
}
.vip-medal {
  width: 1.1600rem;
  height: 1.1600rem;
  display: block;
  grid-column: 1;
  grid-row: 1;
}
.vip-emblem {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
}
.vip-emblem-circle,
.vip-emblem-laurel {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  object-fit: contain;
  pointer-events: none;
}
.vip-emblem.vip-level-11 .vip-emblem-circle {
  filter: hue-rotate(-20deg) saturate(1.35) brightness(1.06);
}
.vip-emblem.vip-level-12 .vip-emblem-circle {
  filter: hue-rotate(-31deg) saturate(1.5) brightness(1.09);
}
.vip-emblem.vip-level-13 .vip-emblem-circle {
  filter: hue-rotate(-42deg) saturate(1.65) brightness(1.12);
}
.vip-emblem-number {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  color: #e3bf46;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24%;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0.0200rem 0 #785e10, 0 0 0.0800rem rgba(255,244,168,.7);
}
.vip-emblem-stars {
  width: 82%;
  position: absolute;
  z-index: 4;
  top: 8%;
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 0 0.0200rem;
  transform: translateX(-50%);
  color: #f1c75a;
  line-height: .72;
  text-align: center;
  text-shadow: 0 0.0200rem 0 #7b5309, 0 0 0.0400rem #fff4a1;
  pointer-events: none;
}
.vip-emblem-stars i { font-size: 0.1400rem; font-style: normal; }
.vip-emblem.hero .vip-emblem-stars { top: 7%; gap: 0 0.0400rem; }
.vip-emblem.hero .vip-emblem-stars i { font-size: 0.2000rem; }
.vip-emblem.profile .vip-emblem-stars i { font-size: 0.1200rem; }
.vip-emblem.small .vip-emblem-stars { top: 6%; width: 90%; gap: 0; }
.vip-emblem.small .vip-emblem-stars i { font-size: 0.0800rem; }
.vip-emblem.profile { width: 1.1600rem; height: 1.1600rem; }
.vip-emblem.small { width: 0.8000rem; height: 0.8000rem; }
.vip-emblem.hero { width: 2.2400rem; height: 2.2400rem; }
.vip-card > strong { grid-column: 2; grid-row: 1; font-size: 0.4400rem; font-style: italic; }
.vip-copy { display: grid; grid-column: 3; grid-row: 1; gap: 0.3800rem; font-size: 0.2200rem; }
.vip-copy small { color: #d9f3e9; font-size: 0.1800rem; }
.vip-copy b { color: #fff; }
.vip-arrow { grid-column: 4; grid-row: 1; font-size: 0.5600rem; font-style: normal; opacity: .7; }
.vip-progress { display: grid; grid-column: 1 / 3; grid-row: 2; align-self: center; font-size: 0.1800rem; }
.vip-progress > span { height: 0.2000rem; overflow: hidden; border: 0.0200rem solid rgba(255,255,255,.6); border-radius: 0.1200rem; }
.vip-progress > span i { width: 4%; height: 100%; display: block; background: #fff; }
.vip-progress em { justify-self: center; margin-top: -0.0200rem; font-style: normal; }

.vip-system-page {
  min-height: calc(100vh - 2.2400rem);
  padding: 0.2400rem 0 0.4800rem;
  background: #f2f8f5;
}
.vip-current-card {
  min-height: 2.8800rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.4400rem;
  position: relative;
  margin: 0 0.2400rem 0.2600rem;
  padding: 0.4800rem 0.2000rem 0.2400rem 0.3200rem;
  overflow: hidden;
  border-radius: 0.2000rem;
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.95), transparent 27%),
    linear-gradient(135deg, #eef6ff 0%, #eaf3ff 55%, #effaf5 100%);
}
.vip-current-card::before,
.vip-current-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 0.0200rem solid rgba(58,111,169,.08);
}
.vip-current-card::before { width: 4.2000rem; height: 4.2000rem; left: -1.6000rem; bottom: -2.9000rem; }
.vip-current-card::after { width: 5.2000rem; height: 5.2000rem; right: -2.4000rem; top: -2.7000rem; }
.vip-current-label {
  position: absolute;
  left: 0;
  top: 0.1000rem;
  padding: 0.0400rem 0.1600rem;
  border-radius: 0 0.2000rem 0.2000rem 0;
  color: #5c7193;
  background: #dbe5f3;
  font-size: 0.2000rem;
}
.vip-current-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: start;
  align-items: center;
  position: relative;
  z-index: 1;
  padding-top: 0.0400rem;
}
.vip-current-copy > strong {
  color: #486a9e;
  font-family: Arial, sans-serif;
  font-size: 0.6200rem;
  font-style: italic;
}
.vip-current-copy > button,
.vip-current-copy > span {
  justify-self: start;
  margin-left: 0.1600rem;
  padding: 0.1000rem 0.1800rem;
  border: 0;
  border-radius: 0.2400rem;
  color: #426493;
  background: #fff;
  font-size: 0.2000rem;
}
.vip-current-progress {
  height: 0.1800rem;
  grid-column: 1;
  margin-top: -0.0200rem;
  overflow: hidden;
  border-radius: 0.1000rem;
  background: #cfdaea;
}
.vip-current-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #4167c6, #75a8ff);
}
.vip-current-copy > em {
  grid-column: 1;
  justify-self: start;
  margin-top: -0.1400rem;
  padding: 0 0.0800rem;
  border-radius: 0.0800rem;
  color: #fff;
  background: #5276ba;
  font-size: 0.1600rem;
  font-style: normal;
}
.vip-current-copy > b {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: center;
  margin-left: 0.1600rem;
  color: #5774a8;
  font-size: 0.2800rem;
  font-style: italic;
}
.vip-current-copy > p {
  grid-column: 1 / 3;
  margin: 0.2000rem 0 0;
  color: #486a9e;
  font-size: 0.2200rem;
}
.vip-current-card > .vip-emblem {
  z-index: 1;
  justify-self: end;
  align-self: center;
}
.vip-rewards-card {
  overflow: hidden;
  border-radius: 0.2400rem 0.2400rem 0 0;
  background: #fff;
}
.vip-rewards-card > h1 {
  margin: 0;
  padding: 0.2800rem 0.2400rem 0.1600rem;
  text-align: center;
  font-size: 0.3800rem;
}
.vip-rewards-card > h1 span { color: #9ba19f; }
.vip-reward-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 0.0200rem solid #e3e7e5;
}
.vip-reward-tabs button {
  height: 0.9800rem;
  position: relative;
  border: 0;
  color: #171b1a;
  background: #fff;
  font-size: 0.3000rem;
}
.vip-reward-tabs button.active { color: var(--green); font-weight: 700; }
.vip-reward-tabs button.active::after {
  width: 1.2800rem;
  height: 0.0400rem;
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--green);
}
.vip-list-heading {
  min-height: 0.9000rem;
  display: grid;
  grid-template-columns: 1.2800rem 1fr;
  align-items: center;
  margin: 0.2400rem 0.2400rem 0;
  border: 0.0200rem solid #dce3e0;
  border-radius: 0.1800rem 0.1800rem 0 0;
  text-align: center;
  font-size: 0.2600rem;
}
.vip-list-heading span:first-child { height: 100%; display: grid; place-items: center; border-right: 0.0200rem solid #dce3e0; }
.vip-level-list {
  margin: 0 0.2400rem;
  overflow: hidden;
  border: 0.0200rem solid #dce3e0;
  border-top: 0;
  border-radius: 0 0 0.1800rem 0.1800rem;
}
.vip-level-row { border-top: 0.0200rem solid #dce3e0; }
.vip-level-row:first-child { border-top: 0; }
.vip-level-row.expanded { background: #f0f9f6; }
.vip-level-summary {
  width: 100%;
  min-height: 1.4000rem;
  display: grid;
  grid-template-columns: 1.2800rem minmax(0, 1fr) 1.5200rem;
  align-items: center;
  padding: 0;
  border: 0;
  color: #202524;
  background: transparent;
  text-align: left;
}
.vip-level-badge {
  min-height: 1.4000rem;
  display: grid;
  align-content: center;
  justify-items: center;
  border-right: 0.0200rem solid #dce3e0;
}
.vip-level-badge b { margin-top: -0.0400rem; font-size: 0.2400rem; }
.vip-level-total { padding: 0 0.1400rem; font-size: 0.2600rem; }
.vip-level-total strong,
.vip-level-reward-title strong,
.vip-benefit-line em { color: #ff9200; font-style: normal; }
.vip-level-toggle {
  justify-self: end;
  padding-right: 0.2000rem;
  color: var(--green);
  font-size: 0.2400rem;
}
.vip-level-toggle i {
  width: 0.1800rem;
  height: 0.1800rem;
  display: inline-block;
  margin-left: 0.0800rem;
  transform: rotate(45deg);
  border-right: 0.0200rem solid #949b98;
  border-bottom: 0.0200rem solid #949b98;
  vertical-align: 0.0400rem;
}
.vip-level-row.expanded .vip-level-toggle i {
  transform: rotate(225deg);
  vertical-align: -0.0600rem;
}
.vip-level-details {
  margin-left: 1.2800rem;
  padding: 0.0800rem 0.1600rem 0.2400rem;
  border-left: 0.0200rem solid #dce3e0;
}
.vip-level-reward-title { min-height: 0.7000rem; display: flex; align-items: center; font-size: 0.2600rem; }
.vip-level-reward-title strong { margin-left: 0.0800rem; }
.vip-benefit-line {
  min-height: 1.1400rem;
  display: grid;
  grid-template-columns: 0.8000rem minmax(0, 1fr) 1.4400rem;
  align-items: center;
  gap: 0.1000rem;
}
.vip-benefit-line > span { min-width: 0; display: grid; gap: 0.0200rem; }
.vip-benefit-line strong { font-size: 0.2600rem; font-weight: 500; }
.vip-benefit-line small { color: #7f8c88; font-size: 0.1800rem; }
.vip-benefit-line button {
  height: 0.6800rem;
  border: 0;
  border-radius: 0.1000rem;
  color: #fff;
  background: var(--green);
  font-size: 0.2200rem;
}
.vip-benefit-icon {
  width: 0.8000rem;
  height: 0.8000rem;
  display: grid;
  place-items: center;
}
.vip-benefit-icon img { width: 0.8000rem; height: 0.8000rem; display: block; object-fit: contain; }
.vip-privilege-line { grid-template-columns: 0.8000rem minmax(0, 1fr); }
.vip-privilege-line > span { grid-template-columns: 1fr 1fr; }
.vip-privilege-line strong { grid-column: 1 / 3; }
.vip-rules {
  min-height: 8.2000rem;
  padding: 0.3600rem 0.4000rem;
  color: #4c5552;
  font-size: 0.2400rem;
  line-height: 1.8;
}
.vip-rules h2 { margin: 0 0 0.2000rem; color: #202524; font-size: 0.3200rem; }
.vip-rules ol { margin: 0; padding: 0; list-style: none; }
.vip-rules li { margin: 0 0 0.2400rem; }
.vip-rules li b { color: #1d2522; font-size: 0.2600rem; }
.vip-rules li p { margin: 0.0400rem 0 0; }
.profile-menu { margin-top: 0.2000rem; background: #fff; }
.profile-menu + .profile-menu { margin-top: 0.2000rem; }
.profile-menu button, .profile-info-row {
  width: 100%;
  min-height: 1.0400rem;
  display: flex;
  align-items: center;
  gap: 0.2400rem;
  padding: 0 0.4000rem;
  border: 0;
  border-bottom: 0.0200rem solid #f0f2f1;
  color: #252a28;
  background: #fff;
  text-align: left;
  font-size: 0.2600rem;
}
.profile-menu button:last-child, .profile-info-row:last-child { border-bottom: 0; }
.profile-menu button i { width: 0.5400rem; height: 0.5400rem; display: grid; flex: 0 0 0.5400rem; place-items: center; color: var(--green); font-style: normal; }
.profile-menu button i svg { width: 0.5000rem; height: 0.5000rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.profile-menu button i.menu-red { color: #ff4b45; }
.profile-menu button i.menu-orange { color: #ff9f00; }
.profile-menu button span, .profile-info-row strong { margin-left: auto; color: #9aa09e; font-weight: 400; }
.profile-menu button span.green-note { color: #05bd34; }
.profile-menu button::after { content: "›"; color: #999; font-size: 0.4200rem; }
.profile-menu button.danger { color: var(--red); }
.profile-menu button.danger i { color: var(--green); }
.profile-info { margin-top: 0.2000rem; background: #fff; }
.profile-info-row span { color: var(--muted); }
.profile-info-row strong { color: #1b2723; }

.profile-detail-view {
  padding-bottom: 1.4400rem;
  background: #f8f8f8;
}
.profile-info-page {
  min-height: 100svh;
  padding-bottom: 1.4400rem;
  color: #202322;
  background: #f8f8f8;
}
.profile-info-header {
  height: 1.1600rem;
  display: grid;
  grid-template-columns: 0.8400rem 1fr 0.8400rem;
  align-items: center;
  border-bottom: 0.0200rem solid #dedede;
  background: #fff;
}
.profile-info-header button {
  width: 0.8400rem;
  height: 1.1600rem;
  padding: 0;
  border: 0;
  color: #6e7471;
  background: transparent;
  font-size: 0.6200rem;
  font-weight: 300;
}
.profile-info-header h1 {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: 0.4200rem;
  font-weight: 500;
}
.profile-info-form { padding: 0.2400rem 0.2000rem 1.6000rem; }
.profile-info-hero {
  min-height: 1.5200rem;
  display: flex;
  align-items: center;
  gap: 0.2600rem;
  margin-bottom: 0.1800rem;
}
.profile-info-avatar-button { flex: 0 0 1.1600rem; }
.profile-info-avatar-button .profile-avatar { width: 1.1600rem; height: 1.1600rem; }
.profile-info-avatar-button .avatar-edit-mark { top: -0.0600rem; bottom: auto; }
.profile-info-summary { min-width: 0; display: grid; gap: 0.1400rem; color: #999; font-size: 0.2600rem; }
.profile-info-summary > div { display: flex; align-items: center; gap: 0.0800rem; }
.profile-info-summary label { display: flex; align-items: center; gap: 0.1200rem; }
.profile-info-summary label input {
  width: 3.0000rem;
  min-width: 0;
  padding: 0.0400rem 0;
  border: 0;
  border-bottom: 0.0200rem solid transparent;
  outline: 0;
  color: #7e8582;
  background: transparent;
  font-size: 0.2600rem;
}
.profile-info-summary label input:focus { border-bottom-color: var(--green); color: #222; }
.profile-info-summary label > svg { width: 0.3600rem; height: 0.3600rem; fill: none; stroke: var(--green); stroke-width: 2; }
.profile-info-form > h2 {
  margin: 0.2400rem 0 0.1600rem;
  font-size: 0.3000rem;
  font-weight: 500;
}
.profile-info-form > h2 small { color: #999; font-size: 0.2400rem; font-weight: 400; }
.profile-form-row {
  width: 100%;
  min-height: 0.9400rem;
  display: flex;
  align-items: center;
  gap: 0.1600rem;
  margin-top: 0.2400rem;
  padding: 0 0.2400rem;
  border: 0.0200rem solid #d5d5d5;
  border-radius: 0.1600rem;
  background: #fff;
}
.profile-form-row + .profile-form-row { margin-top: 0.2600rem; }
.profile-form-row input {
  min-width: 0;
  flex: 1;
  height: 0.8600rem;
  padding: 0;
  border: 0;
  outline: 0;
  color: #444;
  background: transparent;
  font-size: 0.2600rem;
}
.profile-form-row input::placeholder { color: #aaa; }
.profile-form-row.static input { color: #222; }
.profile-field-icon {
  width: 0.5600rem;
  height: 0.5600rem;
  display: grid;
  position: relative;
  flex: 0 0 0.5600rem;
  place-items: center;
  color: #999;
  font-style: normal;
}
.profile-field-icon svg { width: 0.5400rem; height: 0.5400rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-field-icon.account svg { fill: #999; stroke: #999; }
.profile-field-icon.email {
  border-radius: 0.0800rem;
  color: #fff;
  background: #aaa;
}
.profile-field-icon.email svg { width: 0.4400rem; height: 0.4400rem; }
.profile-field-icon.whatsapp { color: #fff; }
.profile-field-icon.whatsapp::before {
  width: 0.5600rem;
  height: 0.5600rem;
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: #22cc6a;
  content: "";
}
.profile-field-icon.whatsapp svg { z-index: 1; width: 0.4800rem; height: 0.4800rem; stroke: #fff; }
.profile-field-icon.telegram { color: #fff; }
.profile-field-icon.telegram::before {
  width: 0.5600rem;
  height: 0.5600rem;
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: #1e9bd7;
  content: "";
}
.profile-field-icon.telegram svg { z-index: 1; width: 0.4800rem; height: 0.4800rem; stroke: #fff; }
.profile-field-icon.birthday { color: var(--green); }
.row-action { flex: 0 0 auto; color: var(--green); font-size: 0.2600rem; }
.row-chevron { flex: 0 0 auto; color: #999; font-size: 0.4600rem; }
.birthday-tip { margin: 0.1400rem 0 0; color: #ff8a00; font-size: 0.2200rem; line-height: 1.5; }
.profile-info-actions {
  height: 1.4000rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2800rem;
  position: fixed;
  z-index: 45;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100%;
  max-width: 10.2000rem;
  padding: 0.2000rem;
  border-top: 0.0200rem solid #e6e6e6;
  background: #fff;
  transform: translateX(-50%);
}
.profile-info-actions button {
  height: 0.9400rem;
  border: 0.0200rem solid var(--green);
  border-radius: 0.1600rem;
  color: var(--green);
  background: #fff;
  font-size: 0.3400rem;
}
.profile-info-actions button[type="submit"] { color: #fff; background: var(--green); }
.avatar-picker-dialog h2 { margin: 0 0 0.3600rem; text-align: center; font-size: 0.3600rem; }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.2600rem; }
.avatar-choice {
  display: grid;
  place-items: center;
  padding: 0.1400rem;
  border: 0.0400rem solid transparent;
  border-radius: 0.2400rem;
  background: #f5f7f6;
}
.avatar-choice.active { border-color: var(--green); background: var(--green-soft); }
.avatar-choice .profile-avatar { width: 1.0400rem; height: 1.0400rem; }

.page-shell { padding: 0.2800rem; }
.page-heading {
  min-height: 1.0400rem;
  display: grid;
  grid-template-columns: 0.6800rem minmax(0, 1fr);
  align-items: start;
  gap: 0.1000rem;
  margin: -0.1200rem 0 0.2000rem;
}
.page-back {
  width: 0.6800rem;
  height: 0.8400rem;
  padding: 0;
  border: 0;
  color: #68706d;
  background: transparent;
  font-size: 0.6200rem;
  font-weight: 300;
  line-height: 0.7600rem;
}
.page-title { margin: 0.0400rem 0 0; }
.page-title h1 { margin: 0; font-size: 0.4000rem; }
.page-title p { margin: 0.1200rem 0 0; color: var(--muted); font-size: 0.2000rem; }
.panel { overflow: hidden; border: 0.0200rem solid var(--line); border-radius: 0.2000rem; background: #fff; }
.form-panel { padding: 0.3400rem; }
.form-panel h2 { margin: 0; font-size: 0.3000rem; }
.form-panel > p { margin: 0.1200rem 0 0.3000rem; color: var(--muted); font-size: 0.2000rem; }
.field { display: grid; gap: 0.1200rem; margin-top: 0.2600rem; color: #444; font-size: 0.2200rem; }
.field input, .field textarea {
  width: 100%;
  border: 0.0200rem solid #d9dddb;
  border-radius: 0.1400rem;
  outline: 0;
  background: #fff;
}
.field input { height: 0.8600rem; padding: 0 0.2200rem; }
.field textarea { min-height: 1.4400rem; padding: 0.2000rem 0.2200rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--green); box-shadow: 0 0 0 0.0600rem rgba(32,167,123,.08); }
.input-unit { position: relative; }
.input-unit input { padding-right: 1.0800rem; }
.input-unit span { position: absolute; right: 0.2200rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.1800rem; }
.primary-button {
  width: 100%;
  height: 0.9000rem;
  margin-top: 0.3400rem;
  border: 0;
  border-radius: 0.1400rem;
  color: #fff;
  background: var(--green);
  box-shadow: 0 0.1400rem 0.3000rem rgba(32,167,123,.17);
  font-size: 0.2600rem;
  font-weight: 700;
}
.primary-button:disabled { opacity: .55; }
.notice { margin-top: 0.2600rem; padding: 0.2000rem; border-radius: 0.1400rem; color: #69716e; background: #f5faf8; font-size: 0.1800rem; line-height: 1.6; }
.record-section { margin-top: 0.2400rem; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0.0400rem 0.1800rem; }
.section-title h2 { margin: 0; font-size: 0.2800rem; }
.section-title button { padding: 0; border: 0; color: var(--green-dark); background: transparent; font-size: 0.2000rem; }
.record-row {
  display: flex;
  align-items: center;
  gap: 0.2000rem;
  padding: 0.2600rem;
  border-bottom: 0.0200rem solid var(--line);
}
.record-row:last-child { border-bottom: 0; }
.record-icon { width: 0.7000rem; height: 0.7000rem; display: grid; place-items: center; border-radius: 0.1600rem; color: var(--green-dark); background: var(--green-soft); font-size: 0.2000rem; font-weight: 800; }
.record-row.withdraw .record-icon { color: #8d52bd; background: #f4edfb; }
.record-main { min-width: 0; flex: 1; }
.record-main strong, .record-main small { display: block; }
.record-main strong { font-size: 0.2200rem; }
.record-main small { margin-top: 0.0800rem; overflow: hidden; color: var(--subtle); font-size: 0.1600rem; text-overflow: ellipsis; white-space: nowrap; }
.record-side { text-align: right; }
.record-side strong { display: block; font-size: 0.2000rem; }
.status { display: inline-block; margin-top: 0.0800rem; padding: 0.0400rem 0.1200rem; border-radius: 0.1600rem; font-size: 0.1400rem; font-weight: 800; }
.status.PENDING { color: #a66b00; background: #fff5d9; }
.status.APPROVED { color: #0b9c49; background: #e9faef; }
.status.REJECTED, .status.CANCELLED { color: var(--red); background: #ffeded; }
.filter-tabs { display: flex; gap: 0.1400rem; margin-bottom: 0.2000rem; overflow-x: auto; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tabs button { flex: 0 0 auto; height: 0.5800rem; padding: 0 0.2600rem; border: 0.0200rem solid var(--line); border-radius: 0.3000rem; color: #555; background: #fff; font-size: 0.1800rem; }
.filter-tabs button.active { border-color: var(--green); color: #fff; background: var(--green); }
.empty { padding: 0.6800rem 0.2400rem; color: var(--subtle); text-align: center; font-size: 0.2000rem; }

.bottom-nav {
  height: calc(1.5200rem + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.0800rem 0.1000rem env(safe-area-inset-bottom);
  border-top: 0.0200rem solid var(--line);
  background: rgba(255,255,255,.98);
}
.bottom-nav button {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.0200rem;
  padding: 0;
  border: 0;
  color: #999e9c;
  background: transparent;
  font-size: 0.2800rem;
  line-height: 1;
}
.bottom-nav .nav-icon {
  width: 0.7600rem;
  height: 0.7600rem;
  display: grid;
  position: relative;
  place-items: center;
  font-style: normal;
}
.bottom-nav .nav-icon svg {
  width: 0.6400rem;
  height: 0.6400rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}
.bottom-nav .nav-home svg { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.bottom-nav .nav-withdraw svg {
  width: 0.5200rem;
  height: 0.5200rem;
  stroke-width: 2;
}
.bottom-nav .nav-badge {
  min-width: 0.9400rem;
  height: 0.3800rem;
  display: grid;
  position: absolute;
  z-index: 2;
  left: 0.4600rem;
  top: -0.0800rem;
  place-items: center;
  padding: 0 0.0800rem;
  border-radius: 0.0400rem 0.1000rem 0.1000rem 0.0400rem;
  color: #fff;
  background: #08bd35;
  box-shadow: 0 0.0200rem 0.0600rem rgba(0, 130, 35, .18);
  font-size: 0.2200rem;
  font-style: normal;
  line-height: 0.3800rem;
  white-space: nowrap;
}
.bottom-nav .nav-badge::before {
  width: 0;
  height: 0;
  position: absolute;
  left: -0.1000rem;
  top: 0.1000rem;
  border-top: 0.1000rem solid transparent;
  border-right: 0.1200rem solid #08bd35;
  border-bottom: 0.1000rem solid transparent;
  content: "";
}
.bottom-nav button.active { color: var(--green); }

.dialog {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0.3600rem;
  background: rgba(15,22,20,.5);
  backdrop-filter: blur(0.1000rem);
}
.dialog-card {
  width: min(100%, 9.4000rem);
  max-height: 90svh;
  overflow: auto;
  position: relative;
  padding: 0.4400rem 0.3600rem;
  border-radius: 0.2400rem;
  background: #fff;
  box-shadow: 0 0.4800rem 1.4000rem rgba(0,0,0,.24);
}
.dialog-close {
  width: 0.7600rem;
  height: 0.7600rem;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 5;
  right: 0.1800rem;
  top: 0.1600rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #8b918f;
  background: rgba(255,255,255,.88);
  font-size: 0.4800rem;
}
.auth-modal { max-height: calc(100svh - 2.6000rem); overflow-y: auto; padding: 0.0400rem 0.0200rem 0.0800rem; scrollbar-width: thin; }
.modal-brand { min-height: 1.2400rem; display: flex; align-items: center; justify-content: center; gap: 0.1600rem; color: var(--green-dark); }
.modal-brand-mark {
  width: 0.8600rem;
  height: 0.8600rem;
  display: grid;
  place-items: center;
  border-radius: 50% 42% 50% 38%;
  color: #fff;
  background: linear-gradient(135deg, #0b765c, #2ab486);
  box-shadow: inset 0 -0.0800rem 0 rgba(0,0,0,.08);
  font-size: 0.4400rem;
  font-weight: 900;
  transform: skewX(-7deg);
}
.modal-brand strong { font-size: 0.4400rem; }
.modal-brand small { display: block; margin-top: 0.0400rem; color: #578779; font-size: 0.1600rem; text-align: center; letter-spacing: .12em; }
.modal-banner {
  aspect-ratio: 2.35 / 1;
  margin-top: 0.0800rem;
  overflow: hidden;
  border-radius: 0.0400rem;
}
.modal-banner img { width: 100%; height: 100%; display: block; object-fit: cover; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0.2000rem; border-bottom: 0.0200rem solid var(--line); }
.auth-tabs button { height: 1.0000rem; position: relative; border: 0; color: #222; background: transparent; font-size: 0.3000rem; }
.auth-tabs button.active { color: var(--green-dark); }
.auth-tabs button.active::after { content: ""; height: 0.0400rem; position: absolute; left: 27%; right: 27%; bottom: 0; background: var(--green); }
.auth-form { padding-top: 0.2000rem; }
.auth-caption { margin: 0 0 0.1400rem; color: #3e4542; font-size: 0.2200rem; }
.auth-input {
  height: 0.9800rem;
  display: flex;
  align-items: center;
  margin-top: 0.2200rem;
  padding: 0 0.1800rem;
  border: 0.0200rem solid #ccd1cf;
  border-radius: 0.1200rem;
  background: #fff;
}
.auth-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 0.0600rem rgba(32,167,123,.09); }
.auth-input i { width: 0.5000rem; display: grid; place-items: center; color: #999f9c; font-style: normal; }
.auth-input i svg { width: 0.4200rem; height: 0.4200rem; fill: #999f9c; stroke: #999f9c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.auth-input b { margin: 0 0.0800rem 0 0.0200rem; color: #e34a4a; font-size: 0.2400rem; font-weight: 500; }
.auth-input input { flex: 1; height: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: #323735; background: transparent; font-size: 0.2600rem; }
.password-toggle { width: 0.6800rem; height: 0.6800rem; padding: 0; border: 0; color: #d5d8d7; background: transparent; font-size: 0.3600rem; }
.password-toggle.visible { color: var(--green); }
.password-rules { display: flex; flex-wrap: wrap; gap: 0.1000rem 0.2600rem; margin-top: 0.1600rem; color: #e54b4b; font-size: 0.1800rem; }
.password-rules span.valid { color: #10a368; }
.remember-row { display: flex; align-items: center; gap: 0.1400rem; margin-top: 0.2600rem; font-size: 0.2200rem; }
.remember-row input { width: 0.3800rem; height: 0.3800rem; margin: 0; accent-color: #0cbe36; }
.terms-row { color: #3f4643; }
.terms-row::first-letter { color: var(--green); }
.form-error { margin: 0.1800rem 0 0; color: var(--red); font-size: 0.2000rem; }
.auth-links { display: flex; justify-content: space-around; margin-top: 0.2400rem; }
.auth-links button { padding: 0; border: 0; color: var(--green-dark); background: transparent; font-size: 0.2000rem; }
.auth-modal .primary-button {
  height: 1.0000rem;
  border-radius: 0.1400rem;
  box-shadow: 0 0 0 0.1600rem rgba(32,167,123,.1);
  font-size: 0.3000rem;
}
.dialog-card h2 { margin: 0; font-size: 0.3600rem; }
.dialog-card > div > p { color: var(--muted); font-size: 0.2000rem; line-height: 1.6; }
.toast {
  max-width: calc(100% - 0.6800rem);
  position: fixed;
  z-index: 200;
  left: 50%;
  top: calc(0.3200rem + env(safe-area-inset-top));
  padding: 0.2000rem 0.2800rem;
  border-radius: 0.1400rem;
  opacity: 0;
  transform: translate(-50%, -0.2800rem);
  color: #fff;
  background: #17231f;
  box-shadow: 0 0.2000rem 0.4800rem rgba(0,0,0,.18);
  font-size: 0.2000rem;
  transition: .2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 360px) {
  .home-actions { grid-template-columns: 41% minmax(0, 1fr); }
  .account-strip { padding-left: 0.1000rem; padding-right: 0.1000rem; }
  .lobby-layout { grid-template-columns: 1.9600rem minmax(0, 1fr); }
  .side-categories { padding-left: 0.1400rem; padding-right: 0.1400rem; }
  .utility-bar { padding-left: 0.1000rem; padding-right: 0.1000rem; }
  .utility-item { font-size: 0.2000rem; }
  .offer-layout { grid-template-columns: 2.1200rem minmax(0, 1fr); }
}

@media (min-width: 620px) {
  .portal-view { width: 10.2000rem; margin: 0 auto; box-shadow: 0 0 0.7600rem rgba(20,50,42,.11); }
  .bottom-nav { width: 10.2000rem; left: 50%; right: auto; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .jackpot-banner > img,
  .jackpot-banner::before,
  .jackpot-copy strong,
  .jackpot-copy strong::after {
    animation: none !important;
  }
  .notice-speaker .sound-wave,
  .notice-message {
    animation: none !important;
  }
  .notice-message { padding-left: 0; }
}

.auth-dialog-card {
  max-height: none;
  overflow: visible;
  padding: 0.3200rem 0.4000rem 0.3600rem;
  border-radius: 0.2600rem;
}
.auth-dialog-card > .dialog-close {
  width: 0.8400rem;
  height: 0.8400rem;
  right: 50%;
  top: calc(100% + 0.3600rem);
  border: 0.0600rem solid #fff;
  color: #fff;
  background: rgba(80,86,84,.8);
  font-size: 0.5400rem;
  line-height: 1;
  transform: translateX(50%);
}
.info-dialog, .security-dialog, .search-dialog { padding-top: 0.1000rem; }
.info-dialog p, .security-dialog > p { color: var(--muted); font-size: 0.2200rem; line-height: 1.75; }

/* Language selector and reference-style 24-entry more menu */
.language-dialog-card {
  width: min(calc(100% - 0.9200rem), 7.8000rem);
  overflow: visible;
  padding: 0;
}
.language-dialog-card > .dialog-close,
.more-menu-dialog-card > .dialog-close {
  width: 0.8400rem;
  height: 0.8400rem;
  right: 50%;
  top: calc(100% + 0.3600rem);
  border: 0.0600rem solid #fff;
  color: #fff;
  background: rgba(80,86,84,.82);
  font-size: 0.5400rem;
  transform: translateX(50%);
}
.language-dialog h2 {
  height: 1.1400rem;
  display: grid;
  place-items: center;
  border-bottom: 0.0200rem solid var(--line);
  font-size: 0.3400rem;
  font-weight: 500;
}
.language-options { padding: 0.1400rem 0.2800rem 0.1600rem; }
.language-options button {
  width: 100%;
  height: 1.0400rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 0.0200rem;
  border: 0;
  border-bottom: 0.0200rem solid var(--line);
  color: #242927;
  background: #fff;
  font-size: 0.2600rem;
  text-align: left;
}
.language-options button:last-child { border-bottom: 0; }
.language-options i {
  width: 0.3800rem;
  height: 0.3800rem;
  display: grid;
  place-items: center;
  border: 0.0200rem solid #d9dddb;
  border-radius: 50%;
  background: #fff;
}
.language-options i.selected {
  border-color: var(--green);
  background: var(--green);
}
.language-options i.selected::after {
  width: 0.1600rem;
  height: 0.0800rem;
  margin-top: -0.0400rem;
  border-bottom: 0.0400rem solid #fff;
  border-left: 0.0400rem solid #fff;
  content: "";
  transform: rotate(-45deg);
}
.more-menu-dialog-card {
  width: min(calc(100vw - 0.4000rem), 7.3000rem);
  max-height: calc(100svh - var(--more-menu-top, 8.4000rem) - 0.2400rem);
  overflow: auto;
  padding: 0.3000rem 0.1600rem 0.2800rem;
  border-radius: 0.1200rem;
  box-shadow: 0 0.1600rem 0.4400rem rgba(27,45,39,.22);
}
.dialog.more-menu-overlay {
  display: block;
  padding: var(--more-menu-top, 8.4000rem) var(--more-menu-right, 0.2000rem) 0.2000rem 0.2000rem;
  background: rgba(32,37,35,.24);
  backdrop-filter: none;
}
.more-menu-dialog-card {
  margin-left: auto;
}
.more-menu-dialog-card > .dialog-close {
  display: none;
}
.more-feature-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.2800rem 0.0400rem;
}
.more-feature-grid button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.0800rem;
  padding: 0 0.0200rem;
  border: 0;
  color: #6f7472;
  background: transparent;
  font-size: 0.2200rem;
}
.more-feature-grid button i {
  width: 0.6800rem;
  height: 0.6000rem;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--green);
  font-style: normal;
}
.more-feature-grid button img {
  width: 0.6000rem;
  height: 0.5200rem;
  display: block;
  object-fit: contain;
}
.more-feature-grid button[data-more-feature="lucky-wheel"] img {
  width: 0.5600rem;
  height: 0.5600rem;
  border-radius: 50%;
  animation: luckyWheelSpin 2.4s linear infinite;
  filter: drop-shadow(0 0 0.0600rem rgba(255,196,0,.7));
}
.more-feature-grid button[data-more-feature="lucky-wheel"] i::before {
  width: 0.0600rem;
  height: 0.3400rem;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  border-radius: 0.0800rem;
  background: linear-gradient(to bottom, #fff8a7 0 20%, #ffe100 42%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 0.1000rem #fff, 0 0 0.1600rem #ffd500;
  content: "";
  transform-origin: 50% 0.3000rem;
  animation: luckyPointerSweep 1.25s linear infinite;
}
.more-feature-grid button[data-more-feature="lucky-wheel"] i::after {
  width: 0.1000rem;
  height: 0.1000rem;
  position: absolute;
  z-index: 3;
  left: calc(50% - 0.0500rem);
  top: 0.2600rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.1400rem #fff69a;
  content: "";
}
@keyframes luckyWheelSpin {
  to { transform: rotate(360deg); }
}
@keyframes luckyPointerSweep {
  to { transform: rotate(360deg); }
}
.more-feature-svg,
.more-feature-svg svg {
  width: 0.6000rem;
  height: 0.5600rem;
  display: block;
}
.more-feature-svg svg { fill: #31b58d; stroke: #178a6b; stroke-width: 1.2; }
.more-feature-grid button span {
  max-width: 100%;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}

/* Backend-configurable more-feature pages */
.feature-page {
  min-height: calc(100svh - 1.4000rem);
  padding-bottom: 1.6400rem;
  background: #f6f7f7;
}
.feature-page > main { padding: 0.2400rem; }
.feature-status-card {
  min-height: 1.8400rem;
  display: grid;
  grid-template-columns: 0.9200rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2000rem;
  padding: 0.2800rem;
  border-radius: 0.2400rem;
  background: #fff;
  box-shadow: var(--shadow);
}
.feature-status-card > i {
  width: 0.8800rem;
  height: 0.8800rem;
  display: grid;
  place-items: center;
  border-radius: 0.2400rem;
  background: var(--green-pale);
  font-style: normal;
}
.feature-status-card > i img { width: 0.7600rem; height: 0.6800rem; object-fit: contain; }
.feature-status-card > i .more-feature-svg,
.feature-status-card > i .more-feature-svg svg { width: 0.6800rem; height: 0.6800rem; }
.feature-status-card strong,
.feature-status-card p { display: block; }
.feature-status-card strong { font-size: 0.3000rem; }
.feature-status-card p { margin: 0.1000rem 0 0; color: #858b88; font-size: 0.2200rem; line-height: 1.5; }
.feature-status-card > span {
  padding: 0.0800rem 0.1400rem;
  border-radius: 0.2000rem;
  color: #999;
  background: #f1f2f2;
  font-size: 0.1800rem;
  white-space: nowrap;
}
.feature-status-card > span.enabled { color: #07825f; background: #e8f8f2; }
.feature-primary-link,
.feature-action-card .primary-button {
  height: 0.9200rem;
  display: grid;
  place-items: center;
  margin-top: 0.2400rem;
  border-radius: 0.1600rem;
  color: #fff;
  background: var(--green);
  font-size: 0.2800rem;
  font-weight: 700;
  text-decoration: none;
}
.feature-list-card,
.feature-games-card,
.feature-action-card {
  margin-top: 0.2400rem;
  padding: 0.2600rem;
  border-radius: 0.2400rem;
  background: #fff;
  box-shadow: var(--shadow);
}
.feature-list-card h2 { margin: 0 0 0.1600rem; font-size: 0.3000rem; }
.feature-list-card article {
  min-height: 1.2000rem;
  display: flex;
  align-items: center;
  gap: 0.2000rem;
  border-bottom: 0.0200rem solid var(--line);
}
.feature-list-card article:last-child { border-bottom: 0; }
.feature-list-card article > i {
  width: 0.7200rem;
  height: 0.7200rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #0b8b68, #32bd93);
  font-style: normal;
  font-weight: 800;
}
.feature-list-card article div { min-width: 0; flex: 1; }
.feature-list-card article strong,
.feature-list-card article small { display: block; }
.feature-list-card article small { margin-top: 0.0800rem; color: #999; font-size: 0.1800rem; }
.feature-list-card article > span { color: var(--green-dark); font-size: 0.2000rem; }
.feature-action-card > strong { font-size: 0.3000rem; }
.feature-action-card > p { color: #777; font-size: 0.2200rem; line-height: 1.6; }
.feature-share-url {
  overflow: hidden;
  padding: 0.2000rem;
  border-radius: 0.1400rem;
  background: #f5f7f6;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feature-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2800rem 0.2000rem;
}
.feature-game-grid button {
  min-width: 0;
  padding: 0;
  border: 0;
  color: #555;
  background: transparent;
  text-align: center;
}
.feature-game-grid strong,
.feature-game-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feature-game-grid strong { margin-top: 0.1200rem; font-size: 0.2200rem; }
.feature-game-grid small { margin-top: 0.0600rem; color: #999; font-size: 0.1600rem; }
.notice-dialog-list { display: grid; gap: 0.1800rem; margin-top: 0.2600rem; }
.notice-dialog-list article { padding: 0.2400rem; border: 0.0200rem solid var(--line); border-radius: 0.1800rem; background: #f9fcfb; }
.notice-dialog-list strong, .notice-dialog-list span { display: block; }
.notice-dialog-list strong { color: var(--green-dark); font-size: 0.2400rem; }
.notice-dialog-list span { margin-top: 0.1200rem; color: #59615e; font-size: 0.2000rem; line-height: 1.65; }
.search-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2600rem 0.1800rem;
  margin-top: 0.2800rem;
}
.search-results button {
  min-width: 0;
  padding: 0;
  border: 0;
  color: #555;
  background: transparent;
  font-size: 0.2000rem;
}
.search-results .game-thumb { aspect-ratio: 1; }
.search-results strong {
  display: block;
  margin-top: 0.1200rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-grid > .empty { grid-column: 1 / -1; }

/* Finance centre */
.finance-page,
.withdraw-pin-page {
  min-height: calc(100svh - 1.5200rem);
  padding-bottom: 1.7600rem;
  color: #202522;
  background: #f7f7f7;
}
.finance-topbar,
.simple-title {
  height: 1.2200rem;
  display: grid;
  position: sticky;
  z-index: 25;
  top: 0;
  align-items: stretch;
  border-bottom: 0.0200rem solid #ddd;
  background: rgba(255,255,255,.98);
}
.finance-topbar { grid-template-columns: 0.7600rem minmax(0, 1fr) 0.8400rem; }
.finance-topbar nav {
  min-width: 0;
  display: grid;
  grid-auto-columns: minmax(1.5600rem, 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  scrollbar-width: none;
}
.finance-topbar nav::-webkit-scrollbar { display: none; }
.finance-topbar button,
.simple-title button {
  border: 0;
  background: transparent;
}
.finance-back,
.simple-title button {
  color: #666d6a;
  font-family: Arial, sans-serif;
  font-size: 0.6800rem;
  font-weight: 300;
}
.finance-topbar nav button {
  min-width: 1.5600rem;
  position: relative;
  padding: 0.0400rem 0.1200rem 0;
  color: #171b19;
  font-size: 0.3000rem;
  white-space: nowrap;
}
.finance-topbar nav button.active { color: var(--green); }
.finance-topbar nav button.active::after {
  height: 0.0400rem;
  position: absolute;
  right: 18%;
  bottom: 0;
  left: 18%;
  border-radius: 0.0400rem;
  background: var(--green);
  content: "";
}
.finance-service {
  display: grid;
  place-items: center;
  color: var(--green);
}
.finance-service svg { width: 0.5400rem; height: 0.5400rem; fill: none; stroke: currentColor; stroke-width: 2.2; }
.balance-recovery-card,
.recovery-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.0800rem 0.2000rem;
  margin: 0.2800rem 0.2000rem;
  padding: 0.2000rem 0.2400rem 0.1800rem;
  border-radius: 0.2000rem;
  background: #fff;
  box-shadow: 0 0.0400rem 0.2000rem rgba(0,0,0,.06);
}
.balance-recovery-card div,
.recovery-card div,
.withdraw-balance {
  display: flex;
  align-items: baseline;
  gap: 0.1000rem;
  color: #969b99;
  font-size: 0.3200rem;
}
.balance-recovery-card strong,
.recovery-card strong,
.withdraw-balance strong {
  color: #f4a000;
  font-size: 0.4000rem;
}
.balance-recovery-card i,
.recovery-card i,
.withdraw-balance span {
  color: var(--green);
  font-size: 0.4200rem;
  font-style: normal;
}
.balance-recovery-card button,
.recovery-card button {
  padding: 0;
  border: 0;
  color: var(--green);
  background: transparent;
  font-size: 0.3200rem;
}
.recovery-card button {
  height: 0.7200rem;
  padding: 0 0.3000rem;
  border-radius: 0.1400rem;
  color: #fff;
  background: var(--green);
  font-size: 0.2600rem;
}
.balance-recovery-card p,
.recovery-card p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.1200rem 0.1600rem;
  border-radius: 0.1800rem;
  color: #8c8f8e;
  background: #fff5e5;
  font-size: 0.2400rem;
  line-height: 1.45;
}
.recovery-card p { padding: 0; background: transparent; }
.finance-filters,
.withdraw-history-filters {
  display: flex;
  gap: 0.1600rem;
  padding: 0 0.2000rem 0.2000rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.finance-filters::-webkit-scrollbar,
.withdraw-history-filters::-webkit-scrollbar { display: none; }
.finance-select {
  min-width: 1.8000rem;
  height: 0.7200rem;
  flex: 0 0 auto;
  padding: 0 0.5600rem 0 0.2600rem;
  border: 0.0200rem solid #ddd;
  border-radius: 0.4000rem;
  color: #858987;
  background: #fff;
  font-size: 0.2400rem;
  outline: 0;
}
.finance-list {
  margin: 0 0.2000rem;
  overflow: hidden;
  border-radius: 0.2000rem;
  background: #fff;
}
.finance-row,
.bet-row,
.provider-balance,
.payout-account-row {
  min-height: 1.2800rem;
  display: flex;
  align-items: center;
  gap: 0.2200rem;
  padding: 0.2200rem 0.2600rem;
  border-bottom: 0.0200rem solid #eceeed;
}
.finance-row:last-child,
.bet-row:last-child,
.provider-balance:last-child,
.payout-account-row:last-child { border-bottom: 0; }
.finance-row > i {
  width: 0.7200rem;
  height: 0.7200rem;
  display: grid;
  flex: 0 0 0.7200rem;
  place-items: center;
  border-radius: 0.1800rem;
  color: var(--green);
  background: var(--green-soft);
  font-size: 0.2200rem;
  font-style: normal;
  font-weight: 800;
}
.finance-row > i.negative { color: #8e53bd; background: #f3eafa; }
.finance-row > div,
.bet-row > div,
.provider-balance > div,
.payout-account-row > div { min-width: 0; flex: 1; }
.finance-row strong,
.finance-row small,
.bet-row strong,
.bet-row small,
.provider-balance strong,
.provider-balance small,
.payout-account-row strong,
.payout-account-row small { display: block; }
.finance-row strong,
.bet-row strong,
.provider-balance strong,
.payout-account-row strong { font-size: 0.2600rem; }
.finance-row small,
.bet-row small,
.provider-balance small,
.payout-account-row small {
  margin-top: 0.1000rem;
  overflow: hidden;
  color: #999e9c;
  font-size: 0.2000rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-row > span { font-size: 0.2400rem; font-weight: 700; white-space: nowrap; }
.positive { color: #00b735 !important; }
.negative { color: #f04239 !important; }
.ledger-totals {
  min-height: 1.5200rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 1.5200rem;
  left: 0;
  gap: 0.1600rem;
  padding: 0.1800rem 0.2200rem;
  border-top: 0.0200rem solid #ddd;
  background: #fff;
  color: #999;
  font-size: 0.2400rem;
}
.ledger-totals span { display: flex; justify-content: space-between; padding-right: 0.3600rem; }
.ledger-totals b { color: #ff9b00; font-weight: 500; }
.finance-empty {
  min-height: 9.5000rem;
  display: grid;
  align-content: center;
  justify-items: center;
  color: #999e9c;
}
.finance-empty svg { width: 2.4000rem; fill: #eff1f0; stroke: #f6f7f7; stroke-width: 2; }
.finance-empty p { margin: 0.2400rem 0 0; font-size: 0.3000rem; }
.finance-empty button { padding: 0; border: 0; color: var(--green); background: transparent; }
.bet-row > span { color: #777; font-size: 0.2200rem; }
.bet-row > b { min-width: 1.3000rem; text-align: right; font-size: 0.2400rem; }
.report-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.2400rem 0.4800rem;
  padding: 0.3200rem 0.3000rem;
  background: #fff;
}
.report-summary span,
.report-summary strong { display: block; }
.report-summary span { color: #999; font-size: 0.2800rem; }
.report-summary strong { margin-top: 0.1000rem; color: #222; font-size: 0.3200rem; font-weight: 500; }
.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3000rem;
  color: #999;
  font-size: 0.2200rem;
}
.report-note { margin: 0 0.3000rem; color: #777; font-size: 0.2400rem; }
.recovery-search {
  display: grid;
  grid-template-columns: 2.0400rem minmax(0, 1fr);
  gap: 0.2400rem;
  margin: 0 0.2000rem 0.2400rem;
}
.recovery-search > button {
  height: 0.9600rem;
  border: 0;
  border-radius: 0.1800rem;
  color: #fff;
  background: linear-gradient(135deg, #35c69b, #1ca978);
  font-size: 0.3000rem;
}
.recovery-search label { position: relative; }
.recovery-search input {
  width: 100%;
  height: 0.7600rem;
  margin-top: 0.1000rem;
  padding: 0 0.8400rem 0 0.3000rem;
  border: 0.0200rem solid #ddd;
  border-radius: 0.4200rem;
  outline: 0;
}
.recovery-search label span { position: absolute; right: 0.3200rem; top: 0.2000rem; color: var(--green); font-size: 0.4600rem; }
.provider-balance { margin: 0 0.2000rem; background: #fff; }
.provider-balance > span { color: #f2a000; font-weight: 700; }
.provider-balance > button {
  padding: 0.1400rem 0.2200rem;
  border: 0.0200rem solid var(--green);
  border-radius: 0.1400rem;
  color: var(--green);
  background: #fff;
}

/* Withdrawal password and payout centre */
.simple-title { grid-template-columns: 0.9600rem minmax(0, 1fr) 0.9600rem; }
.simple-title h1 {
  grid-column: 2;
  align-self: center;
  margin: 0;
  text-align: center;
  font-size: 0.4200rem;
  font-weight: 500;
}
.pin-security-message {
  margin: 0.2800rem 0.2000rem;
  color: #00bf1f;
  text-align: center;
  font-size: 0.2800rem;
}
.withdraw-pin-page > label {
  display: block;
  margin: 0.2400rem 0.2200rem 0.1600rem;
  font-size: 0.3200rem;
}
.pin-boxes {
  width: calc(100% - 0.4400rem);
  height: 1.3800rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0 0.2200rem;
  padding: 0;
  overflow: hidden;
  border: 0.0200rem solid #cfd2d1;
  border-radius: 0.2000rem;
  background: #fff;
}
.pin-boxes i {
  display: grid;
  place-items: center;
  border-right: 0.0200rem solid #cfd2d1;
  font-size: 0.3600rem;
  font-style: normal;
}
.pin-boxes i:last-child { border-right: 0; }
.pin-boxes.active { border-color: var(--green); box-shadow: 0 0 0 0.0200rem rgba(32,167,123,.18); }
.pin-warning {
  margin: 0.2600rem 0.2200rem;
  color: #ff463e;
  font-size: 0.2600rem;
  line-height: 1.5;
}
.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 1.5200rem;
  left: 0;
  gap: 0.1400rem;
  padding: 0.1600rem;
  background: #dedede;
}
.pin-keypad button {
  height: 1.1000rem;
  border: 0;
  border-radius: 0.1200rem;
  background: #fff;
  font-size: 0.5200rem;
}
.pin-keypad .keypad-spacer,
.pin-keypad [data-pin-delete] { background: transparent; font-size: 0.4000rem; }
.pin-submit {
  position: fixed;
  z-index: 31;
  right: 0;
  bottom: calc(1.5200rem + 5.0400rem);
  left: 0;
  padding: 0.2400rem 0.2200rem;
  border-top: 0.0200rem solid #ddd;
  background: #fff;
}
.pin-submit button {
  width: 100%;
  height: 0.9800rem;
  border: 0;
  border-radius: 0.1600rem;
  color: #fff;
  background: var(--green);
  font-size: 0.3400rem;
}
.pin-submit button:disabled { background: #a9acab; }
.payout-count {
  margin: 0.2800rem 0.2000rem;
  padding: 0.3400rem 0.3000rem;
  border-radius: 0.1800rem;
  background: #fff;
  font-size: 0.2600rem;
}
.payout-count span { margin-left: 0.0800rem; color: var(--green); font-size: 0.4000rem; }
.payout-types { padding: 0.2800rem 0.2400rem; border-top: 0.0200rem solid #eee; background: #fff; }
.payout-types > button {
  width: 100%;
  min-height: 0.9400rem;
  display: grid;
  grid-template-columns: 0.7000rem minmax(0, 1fr) auto 0.4400rem;
  align-items: center;
  gap: 0.1600rem;
  padding: 0.0800rem 0.2000rem;
  border: 0.0200rem solid #ddd;
  border-radius: 0.1800rem;
  color: #333;
  background: #fff;
  text-align: left;
}
.payout-types i,
.payout-account-row > i {
  width: 0.6800rem;
  height: 0.6800rem;
  display: grid;
  place-items: center;
  border-radius: 0.1600rem;
  color: #fff;
  background: #f4a000;
  font-style: normal;
}
.payout-types span { color: var(--green); }
.payout-types b { color: #999; font-size: 0.5000rem; font-weight: 300; }
.payout-account-list { margin: 0 0.2400rem; background: #fff; }
.payout-account-row > button { border: 0; color: var(--red); background: transparent; font-size: 0.2400rem; }
.payout-dialog select,
.payout-dialog textarea { width: 100%; border: 0.0200rem solid #d9dddb; border-radius: 0.1400rem; background: #fff; }
.payout-dialog select { height: 0.8600rem; padding: 0 0.2000rem; }
.withdraw-balance {
  height: 1.0200rem;
  padding: 0 0.2400rem;
  border-bottom: 0.0200rem solid #ddd;
  background: #fff;
  font-size: 0.2600rem;
}
.withdraw-balance strong { font-size: 0.3200rem; }
.withdraw-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.1600rem;
  padding: 0.4000rem 0.2400rem;
  background: #fff;
}
.withdraw-mode-tabs button {
  height: 1.0200rem;
  position: relative;
  border: 0.0200rem solid #ddd;
  border-radius: 0.1800rem;
  color: var(--green);
  background: #fff;
  font-size: 0.3000rem;
}
.withdraw-mode-tabs button.active { border-color: var(--green); }
.withdraw-mode-tabs em {
  position: absolute;
  top: -0.2800rem;
  left: 0.4000rem;
  color: #05bc29;
  font-size: 0.2200rem;
  font-style: normal;
}
.withdraw-application { padding: 0.2800rem 0.2400rem 0.5000rem; background: #f7f7f7; }
.withdraw-application > label {
  display: grid;
  gap: 0.1400rem;
  margin-top: 0.2400rem;
  font-size: 0.3000rem;
}
.withdraw-application select,
.withdraw-application > label > input {
  width: 100%;
  height: 0.9600rem;
  padding: 0 0.2400rem;
  border: 0.0200rem solid #d2d4d3;
  border-radius: 0.1600rem;
  background: #fff;
  outline: 0;
}
.add-payout-link {
  width: 100%;
  height: 0.9800rem;
  display: flex;
  align-items: center;
  gap: 0.2000rem;
  padding: 0 0.2600rem;
  border: 0.0200rem solid #ccc;
  border-radius: 0.1800rem;
  color: #a1a4a3;
  background: #fff;
  text-align: left;
}
.add-payout-link i { color: var(--green); font-size: 0.4400rem; font-style: normal; }
.add-payout-link span { margin-left: auto; font-size: 0.4800rem; }
.amount-entry { display: grid; grid-template-columns: 0.8400rem minmax(0, 1fr) 1.0000rem; align-items: center; border: 0.0200rem solid #ccc; border-radius: 0.1400rem; background: #fff; }
.amount-entry b { text-align: center; font-weight: 500; }
.amount-entry input { height: 0.9400rem; min-width: 0; padding: 0; border: 0; outline: 0; }
.amount-entry button { border: 0; color: var(--green); background: transparent; }
.withdraw-submit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2800rem; margin-top: 0.5600rem; }
.withdraw-submit-grid button {
  height: 1.0800rem;
  position: relative;
  border: 0.0200rem solid var(--green);
  border-radius: 0.1800rem;
  color: var(--green);
  background: #fff;
  font-size: 0.3200rem;
}
.withdraw-submit-grid button[type="submit"] { border-color: #aaa; color: #fff; background: #aaa; }
.withdraw-submit-grid button[type="submit"]:not(:disabled) { border-color: var(--green); background: var(--green); }
.withdraw-submit-grid em {
  position: absolute;
  top: -0.2400rem;
  left: 0;
  padding: 0.0400rem 0.1200rem;
  border-radius: 0.1000rem 0.1000rem 0 0;
  color: #fff;
  background: #08b92e;
  font-size: 0.2000rem;
  font-style: normal;
}
.conversion-info { padding: 0.2800rem 0.2400rem; border-top: 0.0200rem solid #ddd; background: #fff; font-size: 0.2600rem; }
.fee-free { margin: 0.1600rem 0 0.3000rem; color: #999; font-size: 0.2400rem; }
.promotion-tiers {
  padding: 0.2000rem 0.1600rem;
  border: 0.0200rem solid #ffd685;
  border-radius: 0.2200rem;
  background: #fffaf0;
}
.promotion-tiers header { display: flex; align-items: center; justify-content: space-between; }
.promotion-tiers header strong { font-size: 0.2600rem; }
.promotion-tiers header span { color: #fa4a31; font-size: 0.2200rem; }
.promotion-tiers header b { padding: 0.0400rem 0.0800rem; border: 0.0200rem solid #fa4a31; background: #fff; font-weight: 500; }
.promotion-tiers > p { color: #888; text-align: center; font-size: 0.2200rem; }
.promotion-tiers > div { max-height: 5.2000rem; overflow-y: auto; }
.promotion-tiers > div > span {
  min-height: 0.8800rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.1200rem;
  padding: 0 0.2400rem;
  border-radius: 0.1800rem;
  color: #999;
  background: #fff;
  font-size: 0.2200rem;
}
.promotion-tiers > div b { font-weight: 600; }
.promotion-tiers > div em { font-style: normal; }
.withdraw-history-filters { align-items: flex-start; padding-top: 0.2800rem; }
.withdraw-history-filters > span {
  min-width: 2.1000rem;
  margin-left: auto;
  color: #999;
  text-align: right;
  font-size: 0.2200rem;
  line-height: 1.5;
}
.withdraw-history-filters b { color: #111; font-size: 0.2400rem; font-weight: 500; }

/* Message centre */
.message-center-page {
  min-height: 100svh;
  padding-bottom: calc(0.4000rem + env(safe-area-inset-bottom));
  color: #171b19;
  background: #f7f7f7;
}
.message-center-header {
  height: calc(1.1400rem + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 0.9600rem 1fr 0.9600rem;
  align-items: end;
  padding-top: env(safe-area-inset-top);
  border-bottom: 0.0200rem solid #dedede;
  background: #fff;
}
.message-center-header h1 {
  align-self: center;
  margin: 0;
  text-align: center;
  font-size: 0.4200rem;
  font-weight: 500;
}
.message-center-header button {
  width: 0.9600rem;
  height: 1.1200rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #707674;
  background: transparent;
  font-size: 0.6600rem;
  line-height: 1;
}
.message-center-header button svg {
  width: 0.5000rem;
  height: 0.5000rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.message-center-tabs {
  height: 0.9400rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 0.0200rem solid #ddd;
  background: #fff;
}
.message-center-tabs button {
  min-width: 0;
  position: relative;
  padding: 0 0.0400rem;
  border: 0;
  color: #151918;
  background: transparent;
  font-size: 0.2800rem;
  white-space: nowrap;
}
.message-center-tabs button.active { color: var(--green); }
.message-center-tabs button.active::after {
  content: "";
  height: 0.0400rem;
  position: absolute;
  right: 22%;
  bottom: 0;
  left: 22%;
  background: var(--green);
}
#messageCenterPanel { min-height: calc(100svh - 2.1000rem); }
.message-empty {
  min-height: 9.6000rem;
  display: grid;
  align-content: center;
  justify-items: center;
  color: #999f9c;
}
.message-empty i {
  width: 2.4000rem;
  height: 2.4000rem;
  color: #eceeed;
  font-style: normal;
}
.message-empty svg {
  width: 100%;
  height: 100%;
  fill: #f1f2f2;
  stroke: #e8ebea;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.message-empty span { margin-top: 0.2000rem; font-size: 0.3200rem; }
.message-filters,
.announcement-toolbar {
  display: flex;
  align-items: center;
  gap: 0.2200rem;
  padding: 0.2600rem 0.2200rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.message-filters::-webkit-scrollbar,
.announcement-toolbar::-webkit-scrollbar { display: none; }
.message-filters label,
.announcement-toolbar label {
  height: 0.6800rem;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  overflow: hidden;
  border: 0.0200rem solid #dfe2e1;
  border-radius: 0.3600rem;
  background: #fff;
}
.message-filters select,
.announcement-toolbar select {
  height: 100%;
  padding: 0 0.5800rem 0 0.2600rem;
  border: 0;
  outline: 0;
  color: #979c9a;
  background: transparent;
  font-size: 0.2400rem;
}
.message-filters .message-search,
.announcement-toolbar .message-search {
  width: 3.3000rem;
  display: flex;
  flex: 0 0 3.3000rem;
  flex-direction: row-reverse;
  padding: 0 0.2000rem;
  color: var(--green);
}
.message-search svg {
  width: 0.4000rem;
  height: 0.4000rem;
  flex: 0 0 0.4000rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2.4;
}
.message-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #333;
  background: transparent;
  font-size: 0.2400rem;
}
.message-card-list { display: grid; gap: 0.2400rem; padding: 0 0.2000rem 0.3600rem; }
.message-notification-card,
.message-announcement-card {
  min-height: 1.4400rem;
  display: grid;
  grid-template-columns: 0.6800rem minmax(0, 1fr) 0.4000rem;
  align-items: center;
  gap: 0.1400rem;
  padding: 0.2000rem 0.2000rem 0.2000rem 0.2400rem;
  border: 0;
  border-radius: 0.1800rem;
  color: #101413;
  background: #fff;
  box-shadow: 0 0.0600rem 0.2000rem rgba(34,54,47,.07);
  text-align: left;
}
.message-notification-card > i,
.message-announcement-card > i {
  width: 0.5000rem;
  height: 0.5000rem;
  color: #45c39f;
  font-style: normal;
}
.message-notification-card > i svg,
.message-announcement-card > i svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.message-notification-card > span,
.message-announcement-card > span { min-width: 0; }
.message-notification-card small,
.message-notification-card strong,
.message-notification-card b,
.message-notification-card time,
.message-announcement-card strong,
.message-announcement-card b,
.message-announcement-card time { display: block; }
.message-notification-card small { color: #8e9693; font-size: 0.2000rem; }
.message-notification-card small em {
  margin-left: 0.1000rem;
  padding: 0.0200rem 0.0800rem;
  border-radius: 0.1000rem;
  color: #fff;
  background: #f05a55;
  font-style: normal;
}
.message-notification-card strong,
.message-announcement-card strong {
  margin-top: 0.0400rem;
  overflow: hidden;
  font-size: 0.2600rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-notification-card b,
.message-announcement-card b {
  margin-top: 0.0600rem;
  overflow: hidden;
  color: #696f6d;
  font-size: 0.2200rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-notification-card time,
.message-announcement-card time {
  margin-top: 0.1000rem;
  color: #a4aaa8;
  font-size: 0.1800rem;
}
.message-notification-card mark,
.message-announcement-card mark {
  color: #929896;
  background: transparent;
  font-size: 0.5200rem;
  font-weight: 300;
}
.message-notification-card.unread { box-shadow: inset 0.0600rem 0 var(--green), 0 0.0600rem 0.2000rem rgba(34,54,47,.07); }
.announcement-cards .message-announcement-card { min-height: 1.7600rem; }
.announcement-cards .message-announcement-card b {
  max-height: 0.6800rem;
  line-height: 1.55;
  white-space: normal;
}
.message-service-card {
  overflow: hidden;
  margin: 0.2800rem 0.1800rem;
  border-radius: 0.2000rem;
  background: #fff;
  box-shadow: 0 0.0800rem 0.2400rem rgba(34,54,47,.08);
}
.message-service-card > h2 { margin: 0; padding: 0.3400rem 0.2600rem 0; font-size: 0.3200rem; }
.message-service-card > p { margin: 0.1200rem 0.2600rem 0.2600rem; color: #969c9a; font-size: 0.2400rem; }
.message-service-card > button {
  height: 0.8200rem;
  display: flex;
  align-items: center;
  gap: 0.1600rem;
  margin: 0 0.2600rem 0.4800rem;
  padding: 0 0.2400rem;
  border: 0.0200rem solid var(--green);
  border-radius: 0.1200rem;
  color: var(--green);
  background: #fff;
  font-size: 0.2400rem;
}
.service-avatar {
  width: 0.4400rem;
  height: 0.4400rem;
  color: var(--green);
}
.service-avatar svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.message-service-card > h3 {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.1400rem;
  margin: 0 0.2600rem;
  padding-bottom: 0.1600rem;
  border-bottom: 0.0600rem solid var(--green);
  color: var(--green);
  font-size: 0.2800rem;
  font-weight: 500;
}
.message-service-card > h3 svg { width: 0.4400rem; height: 0.4400rem; fill: #39b6df; stroke: #fff; stroke-width: 1; }
.telegram-service-row {
  min-height: 2.1000rem;
  display: grid;
  grid-template-columns: 0.8600rem minmax(0, 1fr) 1.5600rem;
  align-items: center;
  gap: 0.1600rem;
  padding: 0.2400rem 0.2600rem;
  border-top: 0.0200rem solid #e5e7e6;
}
.telegram-service-row > i { width: 0.8400rem; height: 0.8400rem; color: #39b6df; }
.telegram-service-row > i svg { width: 100%; height: 100%; fill: currentColor; stroke: #fff; stroke-width: 1; }
.telegram-service-row span { min-width: 0; }
.telegram-service-row small,
.telegram-service-row strong,
.telegram-service-row em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.telegram-service-row small { color: #929896; font-size: 0.2200rem; }
.telegram-service-row small b { color: #343a38; font-size: 0.2600rem; }
.telegram-service-row strong { margin-top: 0.0400rem; color: #3c4340; font-size: 0.2600rem; }
.telegram-service-row em { margin-top: 0.0800rem; color: #a0a5a3; font-size: 0.2000rem; font-style: normal; }
.telegram-service-row button {
  height: 0.6800rem;
  border: 0;
  border-radius: 0.1200rem;
  color: #fff;
  background: var(--green);
  font-size: 0.2200rem;
}
.feedback-switch { display: flex; gap: 0.2400rem; padding: 0.2800rem 0.2000rem; }
.feedback-switch button {
  height: 0.7800rem;
  padding: 0 0.3600rem;
  border: 0.0200rem solid #dfe3e1;
  border-radius: 0.4000rem;
  color: #666d6a;
  background: #fff;
  font-size: 0.2400rem;
}
.feedback-switch button.active { border-color: var(--green); color: #fff; background: var(--green); }
.reward-feedback-form {
  padding: 0.2800rem 0.2600rem calc(1.5200rem + env(safe-area-inset-bottom));
  border-radius: 0.2000rem 0.2000rem 0 0;
  background: #fff;
}
.reward-feedback-form > label { display: block; margin-bottom: 0.3400rem; font-size: 0.2600rem; }
.reward-feedback-form > label > b { color: #e43f3f; font-weight: 500; }
.reward-feedback-form > label > small { color: #909694; font-size: 0.2200rem; }
.reward-feedback-form select,
.reward-feedback-form textarea {
  width: 100%;
  display: block;
  margin-top: 0.1800rem;
  border: 0.0200rem solid #d7dad9;
  border-radius: 0.1200rem;
  outline: 0;
  color: #424846;
  background: #fff;
  font-size: 0.2400rem;
}
.reward-feedback-form select { height: 0.9200rem; padding: 0 0.2400rem; }
.reward-feedback-form textarea { height: 2.8400rem; resize: vertical; padding: 0.2600rem; line-height: 1.55; }
.reward-feedback-form > label > em { display: block; margin-top: 0.1000rem; color: #9da3a1; text-align: right; font-size: 0.2000rem; font-style: normal; }
.feedback-upload > strong { font-size: 0.2600rem; font-weight: 500; }
.feedback-upload > strong small { color: #989e9c; font-size: 0.2200rem; font-weight: 400; }
.feedback-upload label {
  width: 1.6400rem;
  height: 1.6400rem;
  display: grid;
  place-items: center;
  margin-top: 0.2000rem;
  border: 0.0200rem solid #dfe2e1;
  color: #e4e6e5;
}
.feedback-upload input { display: none; }
.feedback-upload label span { font-size: 0.7200rem; font-weight: 200; }
.feedback-upload p { color: #999f9d; font-size: 0.2000rem; line-height: 1.6; }
.feedback-reward { margin-top: 0.5200rem; }
.feedback-reward h3 { margin: 0; font-size: 0.2800rem; font-weight: 500; }
.feedback-reward p { margin: 0.1400rem 0 0; color: #858c89; font-size: 0.2200rem; line-height: 1.65; }
.feedback-submit {
  width: min(9.8400rem, calc(100% - 0.3600rem));
  height: 0.9600rem;
  position: fixed;
  z-index: 30;
  right: auto;
  bottom: calc(0.1800rem + env(safe-area-inset-bottom));
  left: 50%;
  border: 0;
  border-radius: 0.1400rem;
  color: #fff;
  background: var(--green);
  box-shadow: 0 0.1200rem 0.3200rem rgba(32,167,123,.2);
  font-size: 0.2600rem;
  transform: translateX(-50%);
}
.feedback-submit:disabled { opacity: .55; }
.feedback-history { display: grid; gap: 0.2000rem; padding: 0 0.2000rem 0.4000rem; }
.feedback-history article { padding: 0.2800rem; border-radius: 0.1800rem; background: #fff; box-shadow: 0 0.0600rem 0.2000rem rgba(34,54,47,.07); }
.feedback-history article > div { display: flex; align-items: center; justify-content: space-between; gap: 0.2000rem; }
.feedback-history strong { font-size: 0.2600rem; }
.feedback-history em { padding: 0.0600rem 0.1400rem; border-radius: 0.2000rem; color: var(--green); background: var(--green-soft); font-size: 0.1800rem; font-style: normal; }
.feedback-history p { margin: 0.1800rem 0; color: #616865; font-size: 0.2200rem; line-height: 1.55; }
.feedback-history blockquote { margin: 0.1600rem 0; padding: 0.1600rem; border-left: 0.0600rem solid var(--green); color: #59615e; background: #f3faf7; font-size: 0.2000rem; }
.feedback-history time { color: #9ea4a2; font-size: 0.1800rem; }

@media (min-width: 620px) {
  .ledger-totals,
  .pin-keypad,
  .pin-submit {
    width: 10.2000rem;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* v0.11.0 — 750 design draft / 7.5rem reference layout */
html {
  width: 7.5rem;
  min-width: 0;
  min-height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  background: #e8ebea;
}

body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Helvetica,
    "Segoe UI",
    Arial,
    Roboto,
    "PingFang SC",
    miui,
    "Hiragino Sans GB",
    "Microsoft Yahei",
    sans-serif;
  font-size: .24rem;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.portal-view,
.portal-content {
  width: 7.5rem;
  max-width: none;
  margin: 0;
}

.bottom-nav,
.profile-info-actions,
.ledger-totals,
.pin-keypad,
.pin-submit {
  width: 7.5rem;
  max-width: none;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.dialog {
  width: 7.5rem;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* Exact type scale audited from the reference H5: 18 / 20 / 22 / 24. */
.profile-quick button em,
.bottom-nav .nav-badge,
.vip-current-label,
.status,
.feedback-history em {
  font-size: .18rem;
}

.profile-buttons button,
.utility-item.account-action,
.language-options button,
.filter-tabs button {
  font-size: .20rem;
}

.utility-item,
.utility-item > span,
.profile-quick button span,
.more-feature-grid button,
.side-categories button,
.profile-balance-link,
.vip-benefit-line small {
  font-size: .22rem;
}

.profile-login-row,
.profile-identity strong,
.profile-menu button,
.bottom-nav button,
.profile-info-row,
.profile-form-row input,
.profile-info-summary,
.message-tabs button {
  font-size: .24rem;
  font-weight: 400;
}

.profile-menu button {
  min-height: .82rem;
  gap: .24rem;
  padding: 0 .42rem;
}

.profile-menu button i {
  width: .48rem;
  height: .48rem;
  flex-basis: .48rem;
}

.profile-menu button i svg {
  width: .46rem;
  height: .46rem;
}

.profile-menu button::after {
  font-size: .38rem;
}

/* Reference utility row: icons never move when a translated label wraps. */
.utility-bar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}

.utility-item {
  grid-template-rows: .62rem .56rem;
  align-content: start;
  min-width: 0;
}

.utility-item i,
.utility-item .utility-icon svg {
  width: .60rem;
  height: .52rem;
}

.utility-item .utility-icon img {
  width: .60rem;
  height: .52rem;
}

.utility-item > span {
  height: .56rem;
  align-items: flex-start;
  line-height: .26rem;
}

/* Five-column service menu, using the audited 30 × 26 icon box. */
.more-menu-dialog-card {
  width: 7.10rem;
}

.more-feature-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: .04rem;
  row-gap: .28rem;
}

.more-feature-grid button {
  gap: .08rem;
  line-height: .28rem;
}

.more-feature-grid button i,
.more-feature-grid button img {
  width: .60rem;
  height: .52rem;
}

/* Reference avatar picker: 586 design px, four columns, 100 px avatars. */
.avatar-picker-dialog {
  display: flex;
  flex-direction: column;
  min-height: 8rem;
}

.avatar-picker-dialog h2 {
  height: .88rem;
  display: grid;
  place-items: center;
  margin: 0 0 .30rem;
  font-size: .28rem;
  font-weight: 500;
}

.avatar-picker-grid {
  width: 5.86rem;
  max-height: 5.21rem;
  display: grid;
  grid-template-columns: repeat(4, 1rem);
  gap: .44rem .62rem;
  margin: 0 auto;
  overflow: auto;
  scrollbar-width: none;
}

.avatar-picker-grid::-webkit-scrollbar {
  display: none;
}

.avatar-choice {
  width: 1rem;
  height: 1rem;
  display: grid;
  position: relative;
  place-items: center;
  padding: 0;
  border: .02rem solid transparent;
  border-radius: 50%;
  background: transparent;
}

.avatar-choice.active {
  border-color: var(--green);
  background: transparent;
}

.avatar-choice.active::after {
  width: .273rem;
  height: .273rem;
  display: grid;
  position: absolute;
  right: -.04rem;
  bottom: -.02rem;
  place-items: center;
  border: .03rem solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  content: "✓";
  font-size: .16rem;
  font-weight: 700;
  line-height: 1;
}

.avatar-choice .profile-avatar {
  width: .94rem;
  height: .94rem;
  box-shadow: none;
}

@media (min-width: 620px) {
  .portal-view,
  .bottom-nav,
  .profile-info-actions,
  .ledger-totals,
  .pin-keypad,
  .pin-submit {
    width: 7.5rem;
  }
}

/* inherited compact reference-size base */
.portal-view {
  position: relative;
  padding-bottom: calc(1.30rem + env(safe-area-inset-bottom));
  border-right: .015rem solid #dfe4e2;
  border-left: .015rem solid #dfe4e2;
  box-shadow: 0 0 .28rem rgba(36, 58, 51, .10);
}

.bottom-nav {
  height: calc(1.30rem + env(safe-area-inset-bottom));
  padding: .04rem .10rem env(safe-area-inset-bottom);
  border-right: .015rem solid #dfe4e2;
  border-left: .015rem solid #dfe4e2;
}

.bottom-nav .nav-icon {
  width: .62rem;
  height: .62rem;
}

.bottom-nav .nav-icon svg {
  width: .52rem;
  height: .52rem;
}

.bottom-nav .nav-withdraw svg {
  width: .48rem;
  height: .48rem;
}

.more-menu-dialog-card {
  width: 5.42rem;
  padding: .26rem .12rem .24rem;
  border: .015rem solid #d9dfdc;
  border-radius: .10rem;
  background: #fff;
  box-shadow:
    0 .05rem .12rem rgba(20, 47, 39, .10),
    0 .14rem .36rem rgba(20, 47, 39, .16);
}

.more-feature-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 0;
  row-gap: .24rem;
}

.more-feature-grid button {
  min-height: .86rem;
  gap: .06rem;
  padding: 0;
  font-size: .20rem;
  line-height: .24rem;
}

.more-feature-grid button i {
  width: .60rem;
  height: .52rem;
}

.more-feature-grid button img,
.more-feature-svg,
.more-feature-svg svg {
  width: .60rem;
  height: .52rem;
}

/*
 * The reference wheel is a fixed circular disc with a moving glint.
 * Its source is a tiny black-background JPG, so screen blending removes
 * the black canvas without enlarging the file or rotating the whole image.
 */
.more-feature-grid button[data-more-feature="lucky-wheel"] i {
  width: .62rem;
  height: .62rem;
  isolation: isolate;
}

.more-feature-grid button[data-more-feature="lucky-wheel"] img {
  width: .60rem;
  height: .60rem;
  border-radius: 50%;
  animation: none;
  clip-path: circle(49% at 50% 50%);
  filter: saturate(1.16) drop-shadow(0 0 .035rem rgba(255, 194, 0, .72));
  mix-blend-mode: screen;
}

.more-feature-grid button[data-more-feature="lucky-wheel"] i::before {
  width: .64rem;
  height: .64rem;
  position: absolute;
  z-index: 2;
  inset: -.01rem;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 79%,
    rgba(255, 230, 96, .16) 83%,
    rgba(255, 252, 206, .96) 88%,
    #fff 90%,
    rgba(255, 214, 41, .56) 93%,
    transparent 98% 100%
  );
  box-shadow: none;
  content: "";
  transform-origin: 50% 50%;
  animation: luckyPointerSweep 1.18s linear infinite;
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - .075rem),
    #000 calc(100% - .070rem)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - .075rem),
    #000 calc(100% - .070rem)
  );
}

.more-feature-grid button[data-more-feature="lucky-wheel"] i::after {
  width: .07rem;
  height: .07rem;
  z-index: 3;
  left: calc(50% - .035rem);
  top: calc(50% - .035rem);
  background: #fff5a5;
  box-shadow: 0 0 .08rem #fff, 0 0 .12rem #ffd600;
}


/* BOJIE v0.14.48 — bottom navigation SVG icon refinement */
.bottom-nav button {
  gap: 0.04rem;
}
.bottom-nav .nav-icon {
  width: 0.42rem;
  height: 0.42rem;
}
.bottom-nav .nav-icon svg {
  width: 100%;
  height: 100%;
}
.bottom-nav .nav-home,
.bottom-nav .nav-promo,
.bottom-nav .nav-login,
.bottom-nav .nav-register,
.bottom-nav .nav-profile {
  color: #a2a2a2;
}
.bottom-nav button.active .nav-home,
.bottom-nav button.active .nav-promo,
.bottom-nav button.active .nav-login,
.bottom-nav button.active .nav-register,
.bottom-nav button.active .nav-profile,
.bottom-nav button.active .nav-deposit,
.bottom-nav button.active .nav-withdraw {
  color: #22a77a;
}
.bottom-nav .nav-register svg,
.bottom-nav .nav-profile svg,
.bottom-nav .nav-login svg,
.bottom-nav .nav-promo svg,
.bottom-nav .nav-deposit svg,
.bottom-nav .nav-withdraw svg {
  fill: none;
  stroke: currentColor;
}
.bottom-nav button span {
  font-size: 0.16rem;
  line-height: 1.1;
  font-weight: 400;
}
.bottom-nav button.guest-login-nav.active,
.bottom-nav button.guest-register-nav.active {
  color: #22a77a;
}


/* BOJIE v0.14.48 — enlarge and clarify home-page icons and typography */
.site-header {
  height: calc(1.3000rem + env(safe-area-inset-top));
  padding-left: 0.2000rem;
  padding-right: 0.1600rem;
}
.brand-symbol {
  width: 0.8600rem;
  height: 0.8600rem;
  font-size: 0.4200rem;
}
.brand-name strong {
  font-size: 0.4200rem;
  letter-spacing: .04em;
}
.brand-name small {
  font-size: 0.1650rem;
  letter-spacing: .08em;
}
.search-button {
  width: 1.0200rem;
  font-size: 0.2400rem;
  color: #4b5651;
}
.search-button i {
  width: 0.4200rem;
  height: 0.4200rem;
  border-width: 0.0550rem;
}
.search-button i::after {
  width: 0.1750rem;
  height: 0.0550rem;
  right: -0.1450rem;
  bottom: -0.0750rem;
}
.notice-bar {
  height: 0.9400rem;
  font-size: 0.2200rem;
}
.notice-message {
  font-size: 0.2750rem;
}
.utility-bar {
  min-height: 1.7000rem;
  padding: 0.2000rem 0.0800rem 0.1900rem;
}
.utility-item {
  grid-template-rows: 0.7000rem 0.6200rem;
  gap: 0.1000rem;
  min-height: 1.4200rem;
  font-size: 0.2450rem;
}
.utility-item i {
  width: 0.7000rem;
  height: 0.6800rem;
}
.utility-item .utility-icon svg {
  width: 0.6600rem;
  height: 0.6600rem;
  stroke-width: 2.55;
}
.utility-item .utility-icon img {
  width: 0.6600rem;
  height: 0.5600rem;
}
.utility-item > span {
  height: 0.6200rem;
  line-height: 0.3000rem;
  font-size: 0.2450rem;
  color: #545a58;
}
.utility-item.account-action {
  height: 0.7200rem;
  border-radius: 0.1500rem;
  font-size: 0.2600rem;
}
.lobby-layout {
  grid-template-columns: 2.4800rem minmax(0, 1fr);
}
.side-categories {
  padding: 0.1600rem 0.2000rem 0.3000rem;
}
.side-categories button {
  height: 0.9800rem;
  gap: 0.2200rem;
  margin: 0.1400rem 0;
  border-radius: 0.1600rem;
  font-size: 0.2800rem;
}
.side-categories .category-icon {
  width: 0.5400rem;
  flex-basis: 0.5400rem;
  font-size: 0.4100rem;
}
.side-categories .category-slots {
  font-size: 0.2600rem;
}
.side-categories .category-blockchain {
  font-size: 0.3600rem;
}
.lobby-main {
  padding: 0 0.1800rem 0.3400rem;
}
.lobby-tabs {
  height: 1.0000rem;
}
.lobby-tabs button {
  font-size: 0.2650rem;
  color: #353b39;
}
.game-grid {
  gap: 0.2800rem 0.2000rem;
  padding-top: 0.2600rem;
}
.game-item {
  font-size: 0.2200rem;
}
.game-item strong {
  margin-top: 0.1400rem;
  font-size: 0.2200rem;
  color: #5d6361;
}
.bottom-nav {
  min-height: calc(1.1200rem + env(safe-area-inset-bottom));
}
.bottom-nav button {
  gap: 0.0600rem;
  padding-top: 0.1200rem;
  padding-bottom: calc(0.0700rem + env(safe-area-inset-bottom));
}
.bottom-nav .nav-icon {
  width: 0.4800rem;
  height: 0.4800rem;
}
.bottom-nav button span {
  font-size: 0.1800rem;
  color: inherit;
}
.bottom-nav button {
  font-size: 0.1800rem;
}

/* v0.14.48: final home scale rules are in reference-sync.css. */


/* BOJIE v0.14.48 — reference lobby search AVIF image */
.search-button {
  width: .82rem !important;
  min-width: .82rem !important;
  height: .82rem !important;
  display: grid !important;
  grid-template-rows: .49rem .25rem !important;
  align-content: center !important;
  justify-items: center !important;
  gap: .015rem !important;
  margin-left: auto !important;
  padding: 0 !important;
  border: 0 !important;
  color: #555 !important;
  background: transparent !important;
  font-size: .22rem !important;
  line-height: .24rem !important;
}
.search-button .lobby-search-image {
  width: .54rem !important;
  height: .4725rem !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.search-button .lobby-search-image[data-status="loading"] {
  border-radius: .08rem !important;
  background: linear-gradient(90deg, #edf7f4, #f8fbfa, #edf7f4) !important;
  background-size: 200% 100% !important;
  animation: bojieSearchSkeletonV01419 1.1s linear infinite !important;
}
.search-button > span {
  display: block !important;
  color: #555 !important;
  font-size: .22rem !important;
  font-weight: 400 !important;
  line-height: .24rem !important;
  white-space: nowrap !important;
}
.search-button > i,
.search-button > i::after {
  display: none !important;
  content: none !important;
}
@keyframes bojieSearchSkeletonV01419 {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}


/* BOJIE v0.14.48 — reference search + notice AVIF icon alignment */
.search-button {
  width: 0.88rem !important;
  min-width: 0.88rem !important;
  height: 0.84rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.03rem !important;
  margin-left: auto !important;
  padding: 0.02rem 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #8f5c1f !important;
  text-align: center !important;
}
.search-button .lobby-search-image {
  width: 0.577rem !important;
  height: 0.515rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
}
.search-button > span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #8f5c1f !important;
  font-size: 0.215rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  transform: none !important;
}
.search-button > i,
.search-button > i::after {
  display: none !important;
  content: none !important;
}
.notice-bar {
  height: 0.68rem !important;
  display: grid !important;
  grid-template-columns: 0.40rem minmax(0,1fr) 0.60rem !important;
  align-items: center !important;
  column-gap: 0.12rem !important;
  padding: 0 0.14rem !important;
}
/* legacy speaker hide rule removed in v0.14.48 */
.notice-speaker-image {
  width: 0.392rem !important;
  height: 0.350rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}
.notice-viewport {
  min-width: 0 !important;
  overflow: hidden !important;
}
.notice-message {
  display: block !important;
  font-size: 0.185rem !important;
  line-height: 0.24rem !important;
  color: #666 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.notice-mail {
  width: 0.60rem !important;
  height: 0.52rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.notice-mail svg {
  display: none !important;
}
.notice-mail-image {
  width: 0.62rem !important;
  height: 0.536rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* BOJIE v0.14.48 — custom BJ brand header logo */
.brand-logo {
  width: 1.7000rem !important;
  min-width: 1.7000rem !important;
  height: 0.4200rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.brand-logo .custom-logo {
  width: 1.6200rem !important;
  height: 0.4000rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  image-rendering: auto !important;
}
.brand-symbol,
.brand-name {
  display: none !important;
}


/* BOJIE v0.14.48 — bundled local header icons (no remote hotlink dependency) */
.search-button .lobby-search-image,
.notice-speaker-image,
.notice-mail-image {
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}


/* BOJIE v0.14.48 — enlarge top-left BJ brand logo for clarity */
.site-header {
  height: calc(1.44rem + env(safe-area-inset-top)) !important;
  align-items: center !important;
}
.brand-logo {
  width: 3.34rem !important;
  min-width: 3.34rem !important;
  height: 0.86rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.brand-logo .custom-logo {
  width: 3.24rem !important;
  height: 0.80rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
}


/* BOJIE v0.14.48 — local animated speaker AVIF */
.notice-speaker-image {
  image-rendering: auto !important;
}


/* BOJIE v0.14.48 — sharp large SVG brand logo */
.brand-logo {
  width: 3.82rem !important;
  min-width: 3.82rem !important;
  height: 0.94rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
.brand-logo .custom-logo {
  width: 3.72rem !important;
  height: 0.91rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  image-rendering: auto !important;
}


/* BOJIE v0.14.48 — reference animated speaker, larger notice text, aligned two-line logo */
.site-header {
  height: calc(1.46rem + env(safe-area-inset-top)) !important;
}
.brand-logo {
  width: 4.14rem !important;
  min-width: 4.14rem !important;
  height: 1.02rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
.brand-logo .custom-logo {
  width: 4.02rem !important;
  height: 0.98rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: left center !important;
  image-rendering: auto !important;
}
.notice-bar {
  height: 0.78rem !important;
  grid-template-columns: 0.42rem minmax(0, 1fr) 0.62rem !important;
  column-gap: 0.13rem !important;
  padding: 0 0.14rem !important;
  background: #fff !important;
}
.notice-speaker-image {
  width: 0.38rem !important;
  height: 0.35rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
  image-rendering: auto !important;
}
.notice-message {
  font-size: 0.265rem !important;
  line-height: 0.34rem !important;
  font-weight: 600 !important;
  color: #626765 !important;
  letter-spacing: 0 !important;
}
.notice-mail {
  width: 0.62rem !important;
  height: 0.56rem !important;
}
.notice-mail-image {
  width: 0.60rem !important;
  height: 0.525rem !important;
}


/* BOJIE v0.14.48 — notice icon sizing and spacing refinement */
.notice-bar {
  height: 0.78rem !important;
  display: grid !important;
  grid-template-columns: 0.50rem minmax(0,1fr) 0.50rem !important;
  align-items: center !important;
  column-gap: 0.06rem !important;
  padding: 0 0.10rem !important;
  background: #fff !important;
}
.notice-speaker-image {
  width: 0.44rem !important;
  height: 0.40rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
}
.notice-viewport {
  min-width: 0 !important;
}
.notice-message {
  font-size: 0.29rem !important;
  line-height: 0.36rem !important;
  font-weight: 600 !important;
  color: #6a6a6a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.notice-mail {
  width: 0.50rem !important;
  height: 0.44rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
}
.notice-mail-image {
  width: 0.45rem !important;
  height: 0.39rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* BOJIE v0.14.48 — notice speaker SVG and tighter icon spacing */
.notice-bar {
  height: 0.78rem !important;
  display: grid !important;
  grid-template-columns: 0.36rem minmax(0,1fr) 0.40rem !important;
  align-items: center !important;
  column-gap: 0.05rem !important;
  padding: 0 0.08rem !important;
  background: #fff !important;
}
.notice-speaker {
  width: 0.31rem !important;
  height: 0.31rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #777 !important;
}
.notice-speaker-svg {
  width: 0.29rem !important;
  height: 0.27rem !important;
  overflow: visible;
}
.notice-speaker-svg .speaker-body {
  fill: currentColor;
}
.notice-speaker-svg .speaker-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: .95;
}
.notice-speaker-svg .wave1 {
  animation: noticeSpeakerWave1 1.9s infinite ease-in-out;
}
.notice-speaker-svg .wave2 {
  animation: noticeSpeakerWave2 1.9s infinite ease-in-out;
}
@keyframes noticeSpeakerWave1 {
  0%, 100% { opacity: .25; }
  25%, 65% { opacity: 1; }
  80% { opacity: .45; }
}
@keyframes noticeSpeakerWave2 {
  0%, 20% { opacity: .15; }
  35%, 75% { opacity: .95; }
  100% { opacity: .15; }
}
.notice-viewport {
  min-width: 0 !important;
  overflow: hidden !important;
}
.notice-message {
  font-size: 0.29rem !important;
  line-height: 0.36rem !important;
  font-weight: 600 !important;
  color: #6a6a6a !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.notice-mail {
  width: 0.36rem !important;
  height: 0.31rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0 !important;
}
.notice-mail-image {
  width: 0.30rem !important;
  height: 0.26rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
}


/* BOJIE v0.14.48 — notice bar size rebalance to match reference */
.notice-bar {
  height: 0.62rem !important;
  min-height: 0.62rem !important;
  display: grid !important;
  grid-template-columns: 0.34rem minmax(0,1fr) 0.42rem !important;
  align-items: center !important;
  column-gap: 0.06rem !important;
  padding: 0 0.10rem !important;
  overflow: hidden !important;
  background: #fff !important;
}
.notice-speaker {
  width: 0.34rem !important;
  height: 0.30rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #6f6f6f !important;
}
.notice-speaker-svg {
  width: 0.32rem !important;
  height: 0.29rem !important;
}
.notice-speaker-svg .speaker-wave {
  stroke-width: 2.3 !important;
}
.notice-speaker-svg .wave1 {
  animation-duration: 2.45s !important;
}
.notice-speaker-svg .wave2 {
  animation-duration: 2.45s !important;
}
.notice-viewport {
  min-width: 0 !important;
  overflow: hidden !important;
}
.notice-message {
  display: block !important;
  max-width: 100% !important;
  font-size: 0.22rem !important;
  line-height: 0.28rem !important;
  font-weight: 600 !important;
  color: #696969 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.notice-mail {
  width: 0.42rem !important;
  height: 0.32rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.notice-mail-image {
  width: 0.36rem !important;
  height: 0.31rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* BOJIE v0.14.48 — final notice bar layout and icon visibility fix */
.notice-bar {
  height: 0.60rem !important;
  min-height: 0.60rem !important;
  display: grid !important;
  grid-template-columns: 0.30rem minmax(0,1fr) 0.38rem !important;
  align-items: center !important;
  column-gap: 0.06rem !important;
  padding: 0 0.12rem !important;
  overflow: hidden !important;
  background: #fff !important;
}
.notice-speaker {
  width: 0.30rem !important;
  height: 0.26rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #777777 !important;
}
.notice-speaker-svg {
  width: 0.28rem !important;
  height: 0.24rem !important;
  display: block !important;
  overflow: visible !important;
}
.notice-speaker-svg .speaker-body { fill: currentColor !important; }
.notice-speaker-svg .speaker-wave {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
}
.notice-speaker-svg .wave1 { animation: noticeSpeakerWave1 2.55s infinite ease-in-out !important; }
.notice-speaker-svg .wave2 { animation: noticeSpeakerWave2 2.55s infinite ease-in-out !important; }
.notice-viewport {
  min-width: 0 !important;
  overflow: hidden !important;
}
.notice-message {
  display: block !important;
  max-width: 100% !important;
  font-size: 0.18rem !important;
  line-height: 0.24rem !important;
  font-weight: 600 !important;
  color: #666666 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.notice-mail {
  width: 0.38rem !important;
  height: 0.28rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.notice-mail-image {
  width: 0.30rem !important;
  height: 0.26rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  image-rendering: auto !important;
}


/* BOJIE v0.14.48 — horizontal notice text shortening and larger side icons */
.notice-bar {
  height: 0.60rem !important;
  min-height: 0.60rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.06rem !important;
  padding: 0 0.12rem !important;
  overflow: hidden !important;
  background: #fff !important;
}
.notice-speaker {
  flex: 0 0 0.42rem !important;
  width: 0.42rem !important;
  height: 0.34rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #757575 !important;
}
.notice-speaker-svg {
  width: 0.38rem !important;
  height: 0.33rem !important;
  display: block !important;
  overflow: visible !important;
}
.notice-speaker-svg .speaker-body { fill: currentColor !important; }
.notice-speaker-svg .speaker-wave {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.7 !important;
  stroke-linecap: round !important;
  opacity: .96 !important;
}
.notice-speaker-svg .wave1 { animation: noticeSpeakerWave1 2.7s infinite ease-in-out !important; }
.notice-speaker-svg .wave2 { animation: noticeSpeakerWave2 2.7s infinite ease-in-out !important; }
.notice-viewport {
  flex: 0 1 calc(100% - 1.06rem) !important;
  max-width: calc(100% - 1.06rem) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.notice-message {
  display: block !important;
  max-width: 100% !important;
  font-size: 0.18rem !important;
  line-height: 0.24rem !important;
  font-weight: 600 !important;
  color: #686868 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.notice-mail {
  flex: 0 0 0.46rem !important;
  width: 0.46rem !important;
  height: 0.36rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.notice-mail-image {
  width: 0.39rem !important;
  height: 0.34rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* BOJIE v0.14.48 — clearer visible speaker icon and shorter announcement width */
.notice-bar {
  height: 0.60rem !important;
  min-height: 0.60rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.05rem !important;
  padding: 0 0.12rem !important;
  overflow: hidden !important;
  background: #fff !important;
}
.notice-speaker {
  flex: 0 0 0.46rem !important;
  width: 0.46rem !important;
  height: 0.36rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #767676 !important;
}
.notice-speaker-svg {
  width: 0.42rem !important;
  height: 0.36rem !important;
  display: block !important;
  overflow: visible !important;
}
.notice-speaker-svg .speaker-body {
  fill: currentColor !important;
}
.notice-speaker-svg .speaker-wave {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.98 !important;
}
.notice-speaker-svg .wave1 { animation: noticeSpeakerWave1 2.85s infinite ease-in-out !important; }
.notice-speaker-svg .wave2 { animation: noticeSpeakerWave2 2.85s infinite ease-in-out !important; }
.notice-viewport {
  flex: 0 1 calc(100% - 1.16rem) !important;
  max-width: calc(100% - 1.16rem) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.notice-message {
  display: block !important;
  max-width: 100% !important;
  font-size: 0.18rem !important;
  line-height: 0.24rem !important;
  font-weight: 600 !important;
  color: #6a6a6a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.notice-mail {
  flex: 0 0 0.48rem !important;
  width: 0.48rem !important;
  height: 0.36rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.notice-mail-image {
  width: 0.40rem !important;
  height: 0.34rem !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* BOJIE v0.14.48 — rebuilt fixed notice structure */
.notice-bar {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 27px minmax(0, 1fr) 36px !important;
  align-items: center !important;
  column-gap: 6px !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.notice-bar > .notice-speaker {
  box-sizing: border-box !important;
  width: 27px !important;
  height: 26px !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #777 !important;
  position: relative !important;
  z-index: 2 !important;
}
.notice-bar > .notice-speaker > svg.notice-speaker-svg {
  width: 23px !important;
  height: 22px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  flex: none !important;
}
.notice-bar > .notice-speaker > svg.notice-speaker-svg .speaker-body {
  fill: currentColor !important;
  stroke: none !important;
}
.notice-bar > .notice-speaker > svg.notice-speaker-svg .speaker-wave {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.notice-bar > .notice-speaker > svg.notice-speaker-svg .wave1 {
  animation: bojieNoticeWaveOne 2.7s infinite ease-in-out !important;
}
.notice-bar > .notice-speaker > svg.notice-speaker-svg .wave2 {
  animation: bojieNoticeWaveTwo 2.7s infinite ease-in-out !important;
}
@keyframes bojieNoticeWaveOne {
  0%, 100% { opacity: .25; }
  28%, 72% { opacity: 1; }
}
@keyframes bojieNoticeWaveTwo {
  0%, 18%, 100% { opacity: .08; }
  40%, 76% { opacity: 1; }
}
.notice-bar > .notice-viewport {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
}
.notice-bar > .notice-viewport > .notice-message {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #666 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  letter-spacing: 0 !important;
}
.notice-bar > button.notice-mail {
  box-sizing: border-box !important;
  width: 36px !important;
  height: 30px !important;
  min-width: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.notice-bar > button.notice-mail > img.notice-mail-image {
  width: 30px !important;
  height: 26px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* BOJIE v0.14.48 — centered notice row with medium-speed animated speaker */
.notice-bar {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.notice-bar > .notice-speaker {
  flex: 0 0 28px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #707070 !important;
  transform: none !important;
}
.notice-bar > .notice-speaker > .notice-speaker-svg {
  width: 24px !important;
  height: 20px !important;
  display: block !important;
  overflow: visible !important;
  transform: none !important;
}
.notice-bar > .notice-speaker > .notice-speaker-svg .speaker-body {
  fill: currentColor !important;
  stroke: none !important;
}
.notice-bar > .notice-speaker > .notice-speaker-svg .speaker-wave {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.notice-bar > .notice-speaker > .notice-speaker-svg .wave1 {
  animation: bojieNoticeWaveOne34 1.8s infinite ease-in-out !important;
}
.notice-bar > .notice-speaker > .notice-speaker-svg .wave2 {
  animation: bojieNoticeWaveTwo34 1.8s infinite ease-in-out !important;
}
@keyframes bojieNoticeWaveOne34 {
  0%, 100% { opacity: .18; }
  30%, 70% { opacity: 1; }
}
@keyframes bojieNoticeWaveTwo34 {
  0%, 15%, 100% { opacity: .08; }
  40%, 75% { opacity: .95; }
}
.notice-bar > .notice-viewport {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.notice-bar > .notice-viewport > .notice-message {
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #666 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  transform: none !important;
}
.notice-bar > button.notice-mail {
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
}
.notice-bar > button.notice-mail > img.notice-mail-image {
  width: 30px !important;
  height: 26px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
}


/* BOJIE v0.14.48 — isolated final notice row: visible text, aligned icons, real motion */
.bojie-notice-bar-v35 {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 7px;
  padding: 0 9px;
  overflow: hidden;
  border-bottom: 1px solid #eceeed;
  background: #fff;
}
.bojie-notice-speaker-v35 {
  box-sizing: border-box;
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  color: #6f7170;
}
.bojie-notice-speaker-svg-v35 {
  width: 27px;
  height: 21px;
  display: block;
  overflow: visible;
  transform: none;
}
.bojie-speaker-body-v35 {
  fill: currentColor;
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: bojieSpeakerBodyV35 2.15s infinite ease-in-out;
}
.bojie-speaker-wave-v35 {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: left center;
}
.bojie-wave-one-v35 {
  animation: bojieSpeakerWaveOneV35 2.15s infinite ease-in-out;
}
.bojie-wave-two-v35 {
  animation: bojieSpeakerWaveTwoV35 2.15s .16s infinite ease-in-out;
}
@keyframes bojieSpeakerBodyV35 {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(-1px); }
  65% { transform: translateX(0); }
}
@keyframes bojieSpeakerWaveOneV35 {
  0%, 100% { opacity: .24; transform: translateX(-1px) scaleX(.88); }
  34%, 72% { opacity: 1; transform: translateX(0) scaleX(1); }
}
@keyframes bojieSpeakerWaveTwoV35 {
  0%, 18%, 100% { opacity: .08; transform: translateX(-2px) scaleX(.78); }
  42%, 76% { opacity: .95; transform: translateX(0) scaleX(1); }
}
.bojie-notice-viewport-v35 {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.bojie-notice-message-v35 {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: none;
  transform: none;
}
.bojie-notice-mail-v35 {
  box-sizing: border-box;
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.bojie-notice-mail-image-v35 {
  width: 30px;
  height: 26px;
  display: block;
  object-fit: contain;
  object-position: center;
}
/* Keep the requested speaker motion even when the OS asks to reduce unrelated page motion. */
@media (prefers-reduced-motion: reduce) {
  .bojie-speaker-body-v35 { animation: bojieSpeakerBodyV35 2.15s infinite ease-in-out !important; }
  .bojie-wave-one-v35 { animation: bojieSpeakerWaveOneV35 2.15s infinite ease-in-out !important; }
  .bojie-wave-two-v35 { animation: bojieSpeakerWaveTwoV35 2.15s .16s infinite ease-in-out !important; }
}


/* BOJIE v0.14.48 — uploaded speaker file bundled as local animated AVIF */
.bojie-notice-bar-v36 {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 7px;
  padding: 0 9px;
  overflow: hidden;
  border-bottom: 1px solid #eceeed;
  background: #fff;
}
.bojie-notice-speaker-v36 {
  box-sizing: border-box;
  width: 30px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.bojie-notice-speaker-image-v36 {
  width: 27px;
  height: 25px;
  display: block;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}
.bojie-notice-viewport-v36 {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.bojie-notice-message-v36 {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: none;
  transform: none;
}
.bojie-notice-mail-v36 {
  box-sizing: border-box;
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.bojie-notice-mail-image-v36 {
  width: 30px;
  height: 26px;
  display: block;
  object-fit: contain;
  object-position: center;
}


/* BOJIE v0.14.48 — exact 19x18 AVIF speaker + sequential RTL notice marquee */
.bojie-notice-bar-v37 {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 36px;
  align-items: center;
  column-gap: 6px;
  padding: 0 9px;
  overflow: hidden;
  border-bottom: 1px solid #eceeed;
  background: #fff;
}
.bojie-notice-speaker-v37 {
  box-sizing: border-box;
  width: 25px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.bojie-notice-speaker-image-v37 {
  width: 19px;
  height: 18px;
  min-width: 19px;
  min-height: 18px;
  display: block;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}
.bojie-notice-viewport-v37 {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 40px;
  position: relative;
  overflow: hidden;
}
.bojie-notice-message-v37 {
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(100%, -50%, 0);
  will-change: transform;
  backface-visibility: hidden;
}
.bojie-notice-mail-v37 {
  box-sizing: border-box;
  width: 36px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.bojie-notice-mail-image-v37 {
  width: 30px;
  height: 26px;
  display: block;
  object-fit: contain;
  object-position: center;
}


/* BOJIE v0.14.48 — wider marquee lane without moving side icons */
.bojie-notice-viewport-v37 {
  width: calc(100% + 8px) !important;
  margin-left: -4px !important;
  margin-right: -4px !important;
  overflow: hidden !important;
}
.bojie-notice-speaker-v37,
.bojie-notice-mail-v37 {
  position: relative !important;
  z-index: 2 !important;
}
.bojie-notice-message-v37 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* BOJIE v0.14.48 — longer notice lane, faster marquee, black search caption */
.bojie-notice-viewport-v37 {
  width: calc(100% + 12px) !important;
  margin-left: -6px !important;
  margin-right: -6px !important;
  overflow: hidden !important;
}
.bojie-notice-speaker-v37,
.bojie-notice-mail-v37 {
  position: relative !important;
  z-index: 2 !important;
}
.search-button > span {
  color: #111 !important;
}


/* BOJIE v0.14.48 — notice text and icons follow the page zoom-lock */
.bojie-notice-bar-v37 {
  height: .81rem !important;
  min-height: .81rem !important;
  grid-template-columns: .51rem minmax(0, 1fr) .73rem !important;
  column-gap: .12rem !important;
  padding: 0 .18rem !important;
  border-bottom-width: .02rem !important;
}
.bojie-notice-speaker-v37 {
  width: .51rem !important;
  height: .49rem !important;
}
.bojie-notice-speaker-image-v37 {
  width: .385rem !important;
  height: .365rem !important;
  min-width: .385rem !important;
  min-height: .365rem !important;
}
.bojie-notice-viewport-v37 {
  width: calc(100% + .243rem) !important;
  height: .81rem !important;
  margin-left: -.122rem !important;
  margin-right: -.122rem !important;
}
.bojie-notice-message-v37 {
  font-size: .284rem !important;
  line-height: .405rem !important;
}
.bojie-notice-mail-v37 {
  width: .73rem !important;
  height: .608rem !important;
}
.bojie-notice-mail-image-v37 {
  width: .608rem !important;
  height: .527rem !important;
}


/* BOJIE v0.14.48 — unified centered popup, reminder and selection-card system */
#dialog.dialog,
#dialog.dialog.auth-dialog-overlay,
#dialog.dialog.more-menu-overlay {
  box-sizing: border-box !important;
  width: 7.5rem !important;
  height: 100svh !important;
  min-height: 100vh !important;
  position: fixed !important;
  z-index: 1200 !important;
  inset: 0 auto auto 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .28rem !important;
  overflow: hidden !important;
  background: rgba(17, 27, 24, .48) !important;
  backdrop-filter: blur(.035rem) !important;
  -webkit-backdrop-filter: blur(.035rem) !important;
  transform: translateX(-50%) !important;
}
#dialog.dialog[hidden] {
  display: none !important;
}
#dialog > #dialogCard.dialog-card,
#dialog > #dialogCard.language-dialog-card,
#dialog > #dialogCard.more-menu-dialog-card,
#dialog > #dialogCard.avatar-picker-dialog-card,
#dialog > #dialogCard.forgot-password-dialog-card,
#dialog > #dialogCard.confirm-dialog-card {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
}
#dialog > #dialogCard.dialog-card:not(.auth-dialog-card):not(.language-dialog-card):not(.more-menu-dialog-card):not(.avatar-picker-dialog-card) {
  max-height: calc(100svh - .84rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#dialog > #dialogCard.more-menu-dialog-card {
  width: 5.43rem !important;
  height: min(5.97rem, calc(100svh - 1rem)) !important;
  max-height: min(5.97rem, calc(100svh - 1rem)) !important;
  overflow: visible !important;
}
#dialog > #dialogCard.more-menu-dialog-card::before {
  display: none !important;
  content: none !important;
}
#dialog > #dialogCard.more-menu-dialog-card .more-menu-dialog {
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#dialog > #dialogCard.language-dialog-card,
#dialog > #dialogCard.auth-dialog-card {
  max-height: calc(100svh - 1.16rem) !important;
}
#dialog > #dialogCard.avatar-picker-dialog-card {
  max-height: calc(100svh - .84rem) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
#dialog > #dialogCard .avatar-picker-dialog {
  min-height: 0 !important;
}

/* Header account selector is also a centered card instead of a top dropdown. */
.account-popover:not([hidden]) {
  width: min(4.5rem, calc(100vw - .72rem)) !important;
  max-height: calc(100svh - 1.2rem) !important;
  position: fixed !important;
  z-index: 1100 !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 .14rem .42rem rgba(20, 42, 35, .24) !important;
}

/* All lightweight success/error reminders appear in the viewport center. */
.toast {
  width: max-content !important;
  max-width: calc(100% - .72rem) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  margin: 0 !important;
  text-align: center !important;
  transform: translate(-50%, -50%) scale(.94) !important;
  transform-origin: 50% 50% !important;
}
.toast.show {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Existing independent overlays are explicitly centered as well. */
.bojie-captcha-overlay,
.user-agreement-overlay {
  align-items: center !important;
  justify-content: center !important;
}
.bojie-captcha-card,
.user-agreement-card {
  margin: auto !important;
}

/* Replaces the browser-native confirm box with a centered branded card. */
.confirm-dialog-card {
  width: min(5.42rem, calc(100% - .28rem)) !important;
  padding: .34rem .30rem .28rem !important;
  border-radius: .18rem !important;
  background: #fff !important;
  box-shadow: 0 .14rem .42rem rgba(0, 0, 0, .22) !important;
}
.confirm-dialog {
  text-align: center !important;
}
.confirm-dialog h2 {
  margin: 0 !important;
  color: #303633 !important;
  font-size: .30rem !important;
  font-weight: 600 !important;
  line-height: .42rem !important;
}
.confirm-dialog p {
  margin: .22rem 0 .30rem !important;
  color: #707774 !important;
  font-size: .23rem !important;
  line-height: .36rem !important;
}
.confirm-dialog-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .18rem !important;
}
.confirm-dialog-actions button {
  height: .70rem !important;
  padding: 0 .18rem !important;
  border-radius: .12rem !important;
  font-family: inherit !important;
  font-size: .24rem !important;
  font-weight: 600 !important;
}
.confirm-cancel-button {
  border: .015rem solid #d8dddb !important;
  color: #5e6562 !important;
  background: #fff !important;
}
.confirm-accept-button {
  border: .015rem solid #20a77f !important;
  color: #fff !important;
  background: #20a77f !important;
}
.confirm-accept-button.danger {
  border-color: #dc5555 !important;
  background: #dc5555 !important;
}
.confirm-dialog-actions button:disabled {
  opacity: .64 !important;
  cursor: wait !important;
}

@media (max-height: 560px) {
  #dialog.dialog,
  #dialog.dialog.auth-dialog-overlay,
  #dialog.dialog.more-menu-overlay {
    padding: .16rem !important;
  }
  #dialog > #dialogCard.dialog-card {
    max-height: calc(100svh - .36rem) !important;
  }
}


/* BOJIE v0.14.48 — restore the original anchored More menu only */
#dialog.dialog.more-menu-overlay {
  box-sizing: border-box !important;
  width: 7.5rem !important;
  height: 100svh !important;
  min-height: 100vh !important;
  position: fixed !important;
  z-index: 1200 !important;
  inset: 0 auto auto 50% !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: var(--more-menu-top, 8.4rem) var(--more-menu-right, .20rem) .20rem .20rem !important;
  overflow: hidden !important;
  background: rgba(32, 37, 35, .24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateX(-50%) !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}
#dialog > #dialogCard.more-menu-dialog-card {
  box-sizing: border-box !important;
  width: 5.43rem !important;
  max-width: calc(100% - .28rem) !important;
  height: min(5.97rem, calc(100svh - var(--more-menu-top, 3rem) - .22rem)) !important;
  max-height: min(5.97rem, calc(100svh - var(--more-menu-top, 3rem) - .22rem)) !important;
  position: relative !important;
  inset: auto !important;
  margin: 0 0 0 auto !important;
  padding: .18rem .11rem .16rem !important;
  border: .015rem solid #d9dfdc !important;
  border-radius: .10rem !important;
  overflow: visible !important;
  background: #fff !important;
  box-shadow: 0 .05rem .13rem rgba(20,47,39,.10), 0 .14rem .36rem rgba(20,47,39,.16) !important;
  transform: none !important;
  transform-origin: top right !important;
  overscroll-behavior: contain !important;
  touch-action: none !important;
  scrollbar-width: none !important;
}
#dialog > #dialogCard.more-menu-dialog-card::before {
  width: 0 !important;
  height: 0 !important;
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  top: -.17rem !important;
  right: .38rem !important;
  border-right: .16rem solid transparent !important;
  border-bottom: .18rem solid #fff !important;
  border-left: .16rem solid transparent !important;
  filter: drop-shadow(0 -.015rem .01rem rgba(35,62,53,.16)) !important;
  content: "" !important;
}
#dialog > #dialogCard.more-menu-dialog-card > .dialog-close {
  display: none !important;
}
#dialog > #dialogCard.more-menu-dialog-card .more-menu-dialog {
  height: 100% !important;
  max-height: 100% !important;
  position: relative !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: none !important;
}
#dialog > #dialogCard.more-menu-dialog-card .more-menu-dialog::-webkit-scrollbar {
  display: none !important;
}
@media (max-height: 620px) {
  #dialog > #dialogCard.more-menu-dialog-card .more-menu-dialog {
    max-height: calc(100svh - var(--more-menu-top, 2.8rem) - .46rem) !important;
  }
}
@media (max-height: 560px) {
  #dialog.dialog.more-menu-overlay {
    padding: var(--more-menu-top, 2.8rem) var(--more-menu-right, .16rem) .16rem .16rem !important;
  }
}


/* BOJIE v0.14.48 — auth compact-header geometry is finalized in reference-sync.css. */