/* BOJIE v0.14.48 — reference profile geometry + native animated AVIF wheel */
:root {
  --reference-green: #26a17b;
  --reference-green-deep: #178e6e;
  --reference-body-bg: #f8f8f8;
  --reference-line: #eceeed;
}

html.dialog-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.dialog-open {
  width: 7.5rem;
  position: fixed !important;
  top: var(--dialog-scroll-offset, 0) !important;
  left: 50%;
  overflow: hidden !important;
  overscroll-behavior: none;
  transform: translateX(-50%);
}

/* Exact public asset shapes captured from the reference lobby. */
.utility-item .utility-icon img {
  width: .52rem;
  height: .46rem;
  display: block;
  border-radius: 50% !important;
  object-fit: cover;
}

.utility-item[data-action="more"] .utility-icon img {
  width: .49rem;
  height: .45rem;
}

.side-categories .category-icon {
  width: .43rem;
  height: .38rem;
  display: grid;
  flex: 0 0 .43rem;
  place-items: center;
  color: inherit;
  font-size: 0;
}

.side-categories .category-icon img {
  width: .39rem;
  height: .35rem;
  display: block;
  border-radius: 50% !important;
  object-fit: cover;
}

/* The guest identity is a neutral system placeholder, never a user avatar. */
.guest-profile-head {
  min-height: 1.42rem;
  padding: .18rem .24rem .12rem;
  background:
    linear-gradient(90deg, rgba(229,240,255,.94), rgba(250,253,255,.92)),
    url('/assets/portal/images/reference/profile/top-bg.avif') center/cover no-repeat;
}

.guest-profile-head .profile-login-row {
  min-height: .98rem;
  padding-top: 0;
}

.guest-profile-avatar {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  overflow: hidden;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guest-profile-avatar img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  display: block;
  border-radius: 50% !important;
  object-fit: cover;
}

.guest-profile-head .profile-identity strong {
  color: #303434;
  font-size: .22rem;
  font-weight: 400;
}

.guest-profile-head .profile-buttons {
  display: flex;
  gap: .18rem;
  margin-left: auto;
}

.guest-profile-head .profile-buttons button {
  min-width: 1.05rem;
  height: .50rem;
  padding: 0 .18rem;
  border: .015rem solid var(--reference-green);
  border-radius: .08rem;
  color: var(--reference-green);
  background: #fff;
  font-size: .19rem;
}

.guest-profile-head .profile-buttons button:first-child {
  color: #fff;
  background: var(--reference-green);
}

/* Reference popover: 267.95px on a 369.94px canvas = 5.43rem. */
.dialog.more-menu-overlay {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.more-menu-dialog-card {
  width: 5.43rem !important;
  max-width: calc(100% - .28rem);
  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;
  padding: .18rem .11rem .16rem !important;
  border: .015rem solid #d9dfdc !important;
  border-radius: .10rem !important;
  overflow: visible !important;
  overscroll-behavior: contain;
  touch-action: none;
  background: #fff !important;
  box-shadow: 0 .05rem .13rem rgba(20,47,39,.10), 0 .14rem .36rem rgba(20,47,39,.16) !important;
  scrollbar-width: none;
}


.more-menu-dialog-card::before {
  width: 0;
  height: 0;
  position: absolute;
  z-index: 4;
  top: -.17rem;
  right: .38rem;
  border-right: .16rem solid transparent;
  border-bottom: .18rem solid #fff;
  border-left: .16rem solid transparent;
  filter: drop-shadow(0 -.015rem .01rem rgba(35,62,53,.16));
  content: "";
}


.more-menu-dialog {
  height: 100%;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
}

.more-menu-dialog::-webkit-scrollbar { display: none; }

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

.more-feature-grid button {
  min-width: 0;
  min-height: .77rem !important;
  display: grid;
  grid-template-rows: .48rem minmax(.30rem, auto);
  place-items: center;
  gap: .04rem !important;
  padding: 0 !important;
  color: #5f6462;
  font-size: .17rem !important;
  line-height: .21rem !important;
}

.more-feature-grid button i {
  width: .60rem !important;
  height: .52rem !important;
  display: grid;
  position: relative;
  place-items: center;
}

.more-feature-grid button img {
  width: .54rem !important;
  height: .47rem !important;
  display: block;
  object-fit: contain !important;
}

.more-feature-grid button[data-more-feature="free-play"] img {
  width: .52rem !important;
  height: .52rem !important;
}

.more-feature-grid button[data-more-feature="lucky-wheel"] i,
.more-feature-grid button[data-more-feature="lucky-wheel"] img {
  width: .58rem !important;
  height: .58rem !important;
}

.more-feature-grid button span {
  max-width: 1rem !important;
  min-height: .30rem !important;
  display: block;
  overflow: visible;
  text-align: center;
  white-space: normal;
}

.more-menu-scroll-hint {
  width: .44rem;
  height: .22rem;
  position: sticky;
  z-index: 5;
  bottom: -.12rem;
  left: calc(50% - .22rem);
  color: #a8aeac;
  text-align: center;
  background: rgba(255,255,255,.96);
  font-size: .24rem;
  line-height: .18rem;
  pointer-events: none;
}

.more-menu-scroll-hint[hidden] { display: none; }

/* Reference-like shared subpage shell. */
.reference-subpage,
.demo-lobby-page {
  min-height: calc(100svh - 1.02rem);
  padding-bottom: .32rem;
  background: #f7f8f8;
}

.reference-page-header {
  height: .76rem;
  display: grid;
  grid-template-columns: .66rem 1fr .92rem;
  position: sticky;
  z-index: 12;
  top: 0;
  align-items: center;
  border-bottom: .01rem solid var(--reference-line);
  background: rgba(255,255,255,.98);
}

.reference-page-header > button {
  width: .66rem;
  height: .76rem;
  padding: 0;
  border: 0;
  color: #4d5451;
  background: transparent;
  font-size: .43rem;
  font-weight: 300;
}

.reference-page-header h1 {
  margin: 0;
  color: #222725;
  text-align: center;
  font-size: .23rem;
  font-weight: 500;
}

.reference-page-header > span {
  padding-right: .18rem;
  color: var(--reference-green);
  text-align: right;
  font-size: .16rem;
}

/* Guest-safe demo lobby. */
.demo-lobby-page {
  background: linear-gradient(180deg, #edf9f5 0, #f7f8f8 3.2rem);
}

.demo-balance-card {
  min-height: 1.80rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: .20rem;
  padding: .22rem .28rem;
  border-radius: .14rem;
  color: #fff;
  background: linear-gradient(135deg, #16a57a, #42c7a0);
  box-shadow: 0 .07rem .22rem rgba(24,150,111,.22);
}

.demo-balance-card small { font-size: .18rem; opacity: .84; }
.demo-balance-card strong { margin-top: .03rem; font-family: Avenir, Arial, sans-serif; font-size: .44rem; }
.demo-balance-card em { margin-top: .08rem; font-size: .14rem; font-style: normal; opacity: .84; }

.demo-game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .18rem;
  padding: 0 .20rem;
}

.demo-game-card {
  min-height: 1.92rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .06rem;
  border: 0;
  border-radius: .13rem;
  background: #fff;
  box-shadow: 0 .03rem .13rem rgba(35,67,57,.09);
}

.demo-game-icon { width: .74rem; height: .74rem; display: grid; place-items: center; }
.demo-game-icon img { max-width: .72rem; max-height: .72rem; object-fit: contain; }
.demo-game-card strong { color: #333937; font-size: .20rem; }
.demo-game-card small { color: #909693; font-size: .15rem; }

.demo-console {
  min-height: 1.08rem;
  margin: .20rem;
  padding: .20rem;
  border: .01rem solid #e1e7e4;
  border-radius: .10rem;
  background: #fff;
}
.demo-console strong { font-size: .20rem; }
.demo-console p { margin: .08rem 0 0; color: #7e8582; font-size: .16rem; line-height: 1.55; }

/* Device sessions. */
.device-current-card,
.device-session-list,
.interest-rule-card,
.share-link-card,
.share-steps {
  margin: .16rem .18rem 0;
  border-radius: .10rem;
  background: #fff;
  box-shadow: 0 .02rem .08rem rgba(34,58,50,.06);
}

.device-current-card {
  min-height: 1.34rem;
  display: grid;
  grid-template-columns: .64rem 1fr .60rem;
  align-items: center;
  gap: .14rem;
  padding: .20rem;
}
.device-current-card > i,
.device-session-list article > i { width: .50rem; height: .50rem; display: grid; place-items: center; color: var(--reference-green); }
.device-current-card svg,
.device-session-list svg { width: .46rem; height: .46rem; }
.device-current-card strong,
.device-session-list strong { font-size: .19rem; }
.device-current-card small,
.device-session-list small { display: block; margin-top: .04rem; color: #858c89; font-size: .15rem; }
.device-current-card p { max-width: 4.3rem; margin: .06rem 0 0; overflow: hidden; color: #a0a5a3; font-size: .12rem; text-overflow: ellipsis; white-space: nowrap; }
.device-current-card em { color: var(--reference-green); font-size: .15rem; font-style: normal; }
.device-session-list { padding: .18rem .20rem; }
.device-session-list h2 { margin: 0 0 .12rem; font-size: .19rem; }
.device-session-list article { min-height: .82rem; display: grid; grid-template-columns: .54rem 1fr .66rem; align-items: center; gap: .12rem; border-top: .01rem solid #eff1f0; }
.device-session-list article button { height: .38rem; border: .01rem solid #e16868; border-radius: .06rem; color: #d84e4e; background: #fff; font-size: .14rem; }

/* Interest / claim / share. */
.interest-page { background: linear-gradient(#e8fbf6 0, #f7f8f8 3.3rem); }
.interest-hero-card {
  min-height: 2.64rem;
  margin: .20rem;
  padding: .28rem;
  border-radius: .14rem;
  color: #fff;
  background: linear-gradient(135deg, #1cab82, #4ac8a4);
  box-shadow: 0 .08rem .24rem rgba(25,160,119,.20);
}
.interest-hero-card > small { font-size: .17rem; opacity: .84; }
.interest-hero-card > strong { display: block; margin-top: .04rem; font-family: Avenir, Arial, sans-serif; font-size: .46rem; }
.interest-hero-card > div { display: flex; align-items: center; justify-content: space-between; margin-top: .10rem; font-size: .17rem; }
.interest-hero-card > div b { font-size: .32rem; }
.interest-hero-card nav { display: grid; grid-template-columns: 1fr 1fr; gap: .16rem; margin-top: .22rem; }
.interest-hero-card nav button { height: .48rem; border: .01rem solid rgba(255,255,255,.64); border-radius: .08rem; color: #fff; background: rgba(255,255,255,.12); font-size: .18rem; }
.interest-stats { min-height: 1.08rem; display: grid; grid-template-columns: 1fr 1fr .84rem; align-items: center; margin: 0 .20rem; padding: .16rem .20rem; border-radius: .10rem; background: #fff; }
.interest-stats div small { display: block; color: #929895; font-size: .14rem; }
.interest-stats div strong { display: block; margin-top: .05rem; font-size: .19rem; }
.interest-stats button { height: .42rem; border: 0; border-radius: .07rem; color: #fff; background: var(--reference-green); font-size: .16rem; }
.interest-rule-card { padding: .22rem; }
.interest-rule-card h2 { margin: 0; font-size: .20rem; }
.interest-rule-card p { margin: .12rem 0 0; color: #747c79; font-size: .16rem; line-height: 1.65; }
.interest-transfer-dialog h2 { margin: 0 0 .10rem; text-align: center; font-size: .23rem; }
.interest-transfer-dialog p { color: #858b89; text-align: center; font-size: .16rem; }
.interest-transfer-dialog label { display: grid; gap: .08rem; font-size: .16rem; }
.interest-transfer-dialog input { height: .52rem; padding: 0 .14rem; border: .01rem solid #dfe3e1; border-radius: .07rem; font-size: .18rem; }

.claim-tabs { height: .66rem; display: grid; grid-template-columns: repeat(4,1fr); border-bottom: .01rem solid #e5e8e7; background: #fff; }
.claim-tabs button { position: relative; border: 0; color: #656c69; background: transparent; font-size: .17rem; }
.claim-tabs button.active { color: var(--reference-green); }
.claim-tabs button.active::after { height: .025rem; position: absolute; right: .30rem; bottom: 0; left: .30rem; border-radius: .02rem; background: var(--reference-green); content: ""; }
.claim-empty { min-height: 4.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #929896; }
.claim-empty img { width: 1.05rem; height: 1.05rem; opacity: .62; }
.claim-empty strong { margin-top: .16rem; font-size: .19rem; font-weight: 400; }
.claim-empty p { margin: .08rem .40rem; text-align: center; font-size: .15rem; line-height: 1.55; }

.share-center-page { background: linear-gradient(#eafaf5 0, #f7f8f8 4rem); }
.share-hero { min-height: 2.12rem; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: .20rem; border-radius: .14rem; color: #fff; background: linear-gradient(135deg,#159b73,#45c69f); }
.share-hero > i { width: .72rem; height: .64rem; display: grid; place-items: center; }
.share-hero img { width: .72rem; height: .64rem; object-fit: contain; filter: brightness(0) invert(1); }
.share-hero strong { margin-top: .08rem; font-size: .25rem; }
.share-hero p { margin: .08rem .28rem 0; text-align: center; font-size: .15rem; line-height: 1.5; opacity: .86; }
.share-link-card { padding: .22rem; }
.share-link-card small { color: #858c89; font-size: .15rem; }
.share-link-card p { margin: .10rem 0; padding: .12rem; overflow-wrap: anywhere; border-radius: .07rem; color: #4b5551; background: #f3f7f5; font-size: .15rem; }
.share-link-card button { width: 100%; height: .48rem; border: 0; border-radius: .07rem; color: #fff; background: var(--reference-green); font-size: .18rem; }
.share-steps { padding: .20rem; }
.share-steps h2 { margin: 0 0 .12rem; font-size: .20rem; }
.share-steps div { min-height: .58rem; display: flex; align-items: center; gap: .14rem; border-top: .01rem solid #eef1ef; font-size: .17rem; }
.share-steps div i { width: .30rem; height: .30rem; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--reference-green); font-size: .14rem; font-style: normal; }

@media (max-height: 620px) {
  .more-menu-dialog {
    max-height: calc(100svh - var(--more-menu-top, 2.8rem) - .46rem) !important;
  }
}


/* Original project profile now uses the exact captured asset set. */
.profile-quick i img {
  width: .55rem;
  height: .49rem;
  display: block;
  border-radius: 50% !important;
  object-fit: cover;
}

.profile-quick .quick-deposit i img {
  width: .60rem;
  height: .55rem;
}

.profile-menu button > i img {
  width: .45rem;
  height: .45rem;
  display: block;
  border-radius: 50% !important;
  object-fit: cover;
}

.profile-head-actions button img {
  width: .40rem;
  height: .40rem;
  display: block;
  border-radius: 50% !important;
  object-fit: cover;
}
.more-menu-scroll-hint.at-end {
  opacity: .42;
}

/* v0.14.48 — use the original animated AVIF directly at the reference rendered size (45 × 45). */
.more-feature-grid button[data-more-feature="lucky-wheel"] {
  overflow: visible !important;
}

.more-feature-grid button[data-more-feature="lucky-wheel"] i {
  width: 45px !important;
  height: 45px !important;
  display: grid !important;
  position: relative !important;
  place-items: center !important;
  overflow: visible !important;
  isolation: auto !important;
}

.more-feature-grid button[data-more-feature="lucky-wheel"] img {
  width: 45px !important;
  height: 45px !important;
  max-width: 45px !important;
  max-height: 45px !important;
  display: block !important;
  position: static !important;
  z-index: auto !important;
  border: 0 !important;
  border-radius: 50% !important;
  object-fit: contain !important;
  clip-path: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  image-rendering: auto;
}

/* The AVIF already contains its own 40-frame glow/orbit animation. */
.more-feature-grid button[data-more-feature="lucky-wheel"] i::before,
.more-feature-grid button[data-more-feature="lucky-wheel"] i::after {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  content: none !important;
  animation: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* BOJIE v0.14.48 — exact guest “我的” layout captured at the default 750 × 1334 canvas. */
.guest-profile-view {
  --guest-profile-green: #20a77b;
  --guest-profile-row-height: .82rem;
  padding-bottom: calc(1.12rem + env(safe-area-inset-bottom)) !important;
  background: #f8f8f8 !important;
}

.guest-profile-view .portal-content {
  min-height: calc(100svh - 1.12rem - env(safe-area-inset-bottom)) !important;
  background:
    url('/assets/portal/images/reference/profile/top-bg.avif') top center / 100% 3.04rem no-repeat,
    linear-gradient(135deg, #dfeefe 0%, #eef5fc 64%, #ffffff 100%) top center / 100% 3.04rem no-repeat,
    #f8f8f8 !important;
}

.guest-profile-view .guest-profile-head {
  height: 1.70rem !important;
  min-height: 1.70rem !important;
  position: relative;
  padding: .69rem .16rem 0 !important;
  background: transparent !important;
}

.guest-profile-view .guest-profile-head .profile-back {
  width: .40rem !important;
  height: .40rem !important;
  display: grid !important;
  position: absolute !important;
  left: .10rem !important;
  top: .18rem !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  color: transparent !important;
  background: transparent !important;
  font-size: 0 !important;
}

.guest-profile-view .guest-profile-head .profile-back::before {
  width: .16rem;
  height: .16rem;
  border-bottom: .025rem solid #69736f;
  border-left: .025rem solid #69736f;
  content: "";
  transform: rotate(45deg);
}

.guest-profile-view .guest-profile-head .profile-login-row {
  height: 46px !important;
  min-height: 46px !important;
  align-items: center !important;
  gap: .14rem !important;
  padding: 0 !important;
}

.guest-profile-view .guest-profile-avatar {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guest-profile-view .guest-profile-avatar img {
  width: 46px !important;
  height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  display: block !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.guest-profile-view .guest-profile-head .profile-identity {
  flex: 1 1 auto;
}

.guest-profile-view .guest-profile-head .profile-identity strong {
  color: #303838 !important;
  font-size: .28rem !important;
  font-weight: 400 !important;
  line-height: 1.2;
  white-space: nowrap;
}

.guest-profile-view .guest-profile-head .profile-buttons {
  display: flex !important;
  flex: 0 0 auto;
  gap: .20rem !important;
  margin-left: auto !important;
}

.guest-profile-view .guest-profile-head .profile-buttons button {
  width: 1.21rem !important;
  min-width: 1.21rem !important;
  height: .52rem !important;
  padding: 0 !important;
  border: .015rem solid var(--guest-profile-green) !important;
  border-radius: .10rem !important;
  color: var(--guest-profile-green) !important;
  background: rgba(255, 255, 255, .72) !important;
  font-size: .26rem !important;
  font-weight: 400 !important;
}

.guest-profile-view .guest-profile-head .profile-buttons button:first-child {
  color: #fff !important;
  background: var(--guest-profile-green) !important;
}

.guest-profile-view .profile-quick {
  height: 1.34rem !important;
  min-height: 1.34rem !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  padding: .11rem 0 .05rem !important;
  background: transparent !important;
}

.guest-profile-view .profile-quick button {
  height: 100% !important;
  min-height: 0 !important;
  align-content: center !important;
  gap: .04rem !important;
  color: #27302e !important;
  font-size: .24rem !important;
  line-height: 1.1 !important;
}

.guest-profile-view .profile-quick i {
  width: .50rem !important;
  height: .48rem !important;
  display: grid !important;
  place-items: center !important;
}

.guest-profile-view .profile-quick i img {
  width: .50rem !important;
  height: .48rem !important;
  display: block;
  object-fit: contain;
}

.guest-profile-view .profile-quick button span {
  font-size: .24rem !important;
  line-height: .28rem !important;
}

.guest-profile-view .profile-quick em {
  left: 55% !important;
  top: .12rem !important;
  height: .31rem;
  padding: 0 .07rem !important;
  border-radius: .04rem .08rem .08rem .04rem !important;
  font-size: .18rem !important;
  line-height: .31rem;
}

.guest-profile-view .profile-quick em::before {
  left: -.07rem !important;
  top: .075rem !important;
  border-top-width: .075rem !important;
  border-right-width: .08rem !important;
  border-bottom-width: .075rem !important;
}

.guest-profile-view .profile-menu {
  margin-top: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}

.guest-profile-view .profile-menu-primary {
  min-height: 1.80rem !important;
}

.guest-profile-view .profile-menu-secondary {
  min-height: 6.82rem !important;
  margin-top: .20rem !important;
  padding-top: .14rem !important;
}

.guest-profile-view .profile-menu button {
  height: var(--guest-profile-row-height) !important;
  min-height: var(--guest-profile-row-height) !important;
  gap: .22rem !important;
  padding: .08rem .48rem 0 .40rem !important;
  border-bottom: .01rem solid #f4f5f5 !important;
  color: #25302f !important;
  background: #fff !important;
  font-size: .26rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.guest-profile-view .profile-menu button i {
  width: .42rem !important;
  height: .42rem !important;
  flex: 0 0 .42rem !important;
}

.guest-profile-view .profile-menu button i img,
.guest-profile-view .profile-menu button i svg {
  width: .40rem !important;
  height: .40rem !important;
}

.guest-profile-view .profile-menu button span {
  margin-left: auto !important;
  color: #999f9d !important;
  font-size: .24rem !important;
  font-weight: 400 !important;
  white-space: nowrap;
  transform: translate(.16rem, .04rem);
}

.guest-profile-view .profile-menu button span.green-note,
.guest-profile-view .profile-menu-primary button:first-child span,
.guest-profile-view .profile-menu-secondary button:first-child span {
  color: #17aa7d !important;
}

.guest-profile-view .profile-menu button::after {
  width: .16rem;
  height: .16rem;
  flex: 0 0 .16rem;
  margin-left: .04rem;
  border-top: .025rem solid #9da3a1;
  border-right: .025rem solid #9da3a1;
  color: transparent !important;
  content: "" !important;
  transform: rotate(45deg);
}

.guest-profile-view .bottom-nav {
  height: calc(1.18rem + env(safe-area-inset-bottom)) !important;
  padding: .035rem 0 env(safe-area-inset-bottom) !important;
  border-top: .01rem solid #e4e6e5 !important;
}

.guest-profile-view .bottom-nav button {
  gap: .02rem !important;
  color: #9ba19f !important;
  font-size: .27rem !important;
  line-height: .27rem !important;
  align-items: center !important;
  justify-content: center !important;
}

.guest-profile-view .bottom-nav button > span:last-child {
  font-size: .27rem !important;
  line-height: .27rem !important;
}


.guest-profile-view .bottom-nav button.active {
  color: var(--guest-profile-green) !important;
}

.guest-profile-view .bottom-nav .nav-icon {
  width: .60rem !important;
  height: .60rem !important;
  flex: 0 0 .60rem !important;
}


.guest-profile-view .bottom-nav .nav-icon svg {
  width: .58rem !important;
  height: .58rem !important;
  stroke-width: 1.8 !important;
}


.guest-profile-view .bottom-nav .nav-profile svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4 !important;
}


/* BOJIE v0.14.48 — complete reference auth modal, Telegram row, and pulsing primary action layer. */
.dialog.auth-dialog-overlay {
  place-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 24px 18px 76px !important;
  background: rgba(55, 61, 59, .60) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  overscroll-behavior: contain;
}

.auth-dialog-overlay .auth-dialog-card {
  width: min(450px, calc(100vw - 36px)) !important;
  max-width: 450px !important;
  max-height: none !important;
  overflow: visible !important;
  margin: auto !important;
  padding: 14px 20px 16px !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  transform: translateY(-4px);
  transform-origin: 50% 50%;
}

.auth-dialog-overlay.auth-register-active .auth-dialog-card {
  transform: translateY(-18px);
}

.auth-dialog-overlay .auth-dialog-card > .dialog-close {
  width: 40px !important;
  height: 40px !important;
  right: 50% !important;
  top: calc(100% + 18px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 0 2px !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(85, 91, 89, .84) !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif !important;
  font-size: 30px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transform: translateX(50%) !important;
}

.auth-dialog-overlay .auth-modal {
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  scrollbar-width: none;
}

.auth-dialog-overlay .auth-modal::-webkit-scrollbar { display: none; }

.auth-dialog-overlay .modal-brand {
  min-height: 52px !important;
  gap: 7px !important;
  color: #168f71 !important;
}

.auth-dialog-overlay .modal-brand-mark {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% 42% 50% 38% !important;
  font-size: 23px !important;
  line-height: 42px !important;
}

.auth-dialog-overlay .modal-brand strong {
  display: block;
  color: #168f71 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 23px !important;
}

.auth-dialog-overlay .modal-brand small {
  margin-top: 0 !important;
  color: #4e8576 !important;
  font-size: 10px !important;
  line-height: 12px !important;
  letter-spacing: .08em !important;
}

.auth-dialog-overlay .modal-banner {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 410 / 176 !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.auth-dialog-overlay .modal-banner img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

.auth-dialog-overlay .auth-tabs {
  height: 52px !important;
  margin-top: 8px !important;
  border-bottom: 1px solid #dfe2e1 !important;
}

.auth-dialog-overlay .auth-tabs button {
  height: 52px !important;
  padding: 0 !important;
  color: #202322 !important;
  background: transparent !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 52px !important;
  transform: none !important;
}

.auth-dialog-overlay .auth-tabs button.active {
  color: #18a67f !important;
}

.auth-dialog-overlay .auth-tabs button.active::after {
  height: 3px !important;
  right: 25% !important;
  bottom: -1px !important;
  left: 25% !important;
  border-radius: 2px !important;
  background: #1eaa83 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.auth-dialog-overlay .auth-form {
  padding-top: 8px !important;
}

.auth-dialog-overlay .auth-caption {
  margin: 0 0 6px !important;
  color: #444a48 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}

.auth-dialog-overlay .auth-input {
  height: 45px !important;
  margin-top: 10px !important;
  padding: 0 11px !important;
  border: 1px solid #c8ccca !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.auth-dialog-overlay .auth-caption + .auth-input {
  margin-top: 0 !important;
}

.auth-dialog-overlay .auth-input:focus-within {
  border-color: #27a987 !important;
  box-shadow: 0 0 0 2px rgba(39, 169, 135, .08) !important;
}

.auth-dialog-overlay .auth-input i {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  flex: 0 0 24px !important;
  place-items: center !important;
  color: #9fa4a2 !important;
}

.auth-dialog-overlay .auth-input i svg {
  width: 22px !important;
  height: 22px !important;
  fill: #9fa4a2 !important;
  stroke: #9fa4a2 !important;
  stroke-width: 1.55 !important;
}

.auth-dialog-overlay .auth-input b {
  margin: 0 5px 0 1px !important;
  color: #e04b47 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.auth-dialog-overlay .auth-input input {
  height: 43px !important;
  color: #333837 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 43px !important;
}

.auth-dialog-overlay .auth-input input::placeholder {
  color: #a8acab !important;
  opacity: 1 !important;
}

.auth-dialog-overlay .auth-telegram-input {
  margin-top: 10px !important;
}

.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  margin-right: 7px !important;
  color: #149fd6 !important;
}

.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: #149fd6 !important;
  stroke: #fff !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.1 !important;
}

.auth-dialog-overlay .password-toggle {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  flex: 0 0 32px !important;
  place-items: center !important;
  color: #d9dcdb !important;
  font-size: 0 !important;
}

.auth-dialog-overlay .password-toggle svg {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 1.8 !important;
}

.auth-dialog-overlay .password-toggle.visible { color: #22a782 !important; }
.auth-dialog-overlay .password-toggle.visible .eye-slash { display: none; }

.auth-dialog-overlay .password-strength {
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 6px !important;
  color: #414644 !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.auth-dialog-overlay .password-strength > span {
  margin-right: 1px !important;
  white-space: nowrap !important;
}

.auth-dialog-overlay .password-strength > i {
  width: 48px !important;
  height: 7px !important;
  display: block !important;
  flex: 1 1 48px !important;
  max-width: 48px !important;
  border-radius: 5px !important;
  background: #e0e2e1 !important;
}

.auth-dialog-overlay .password-strength > i.active { background: #20ad84 !important; }

.auth-dialog-overlay .password-strength > b {
  margin-left: 0 !important;
  color: #ee4d46 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}

.auth-dialog-overlay .password-strength > b.valid { color: #18a777 !important; }

.auth-dialog-overlay .password-rules {
  min-height: 16px !important;
  gap: 5px 13px !important;
  margin-top: 3px !important;
  color: #ee4d46 !important;
  font-size: 12px !important;
  line-height: 16px !important;
}

.auth-dialog-overlay .password-rules span.valid { color: #18a777 !important; }

.auth-dialog-overlay .remember-row {
  min-height: 20px !important;
  gap: 7px !important;
  margin-top: 16px !important;
  color: #343a38 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
}

.auth-dialog-overlay .remember-row input {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  margin: 0 !important;
  accent-color: #08bd2d !important;
}

.auth-dialog-overlay .terms-row {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #dfe2e1 !important;
}

.auth-dialog-overlay .terms-row::first-letter { color: inherit !important; }

.auth-dialog-overlay .form-error {
  margin: 5px 0 0 !important;
  color: #df413f !important;
  font-size: 13px !important;
  line-height: 16px !important;
}

.auth-dialog-overlay .auth-modal .primary-button {
  height: 46px !important;
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
  overflow: visible !important;
  margin-top: 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 46px !important;
  transform: none !important;
}

.auth-dialog-overlay .auth-modal .primary-button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: #26a984;
  box-shadow: 0 0 0 8px rgba(38, 169, 132, .10);
  content: "";
  transform-origin: 50% 50%;
  animation: authPrimaryLayerPulseV0138 1.08s ease-in-out infinite;
}

.auth-dialog-overlay .auth-modal .primary-button:disabled::before {
  opacity: .58;
  animation: none !important;
}

@keyframes authPrimaryLayerPulseV0138 {
  0%, 100% { opacity: .88; transform: scale(.965, .90); }
  50% { opacity: 1; transform: scale(1.018, 1.04); }
}

.auth-dialog-overlay .auth-links {
  min-height: 18px !important;
  margin-top: 10px !important;
  justify-content: space-around !important;
}

.auth-dialog-overlay .auth-links button {
  color: #078f70 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
}

@media (max-width: 390px) {
  .dialog.auth-dialog-overlay { padding-right: 12px !important; padding-left: 12px !important; }
  .auth-dialog-overlay .auth-dialog-card {
    width: min(450px, calc(100vw - 24px)) !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
  .auth-dialog-overlay .password-strength { gap: 4px !important; }
  .auth-dialog-overlay .password-strength > i { min-width: 25px !important; }
  .auth-dialog-overlay .password-rules { gap: 4px 8px !important; }
}

@media (max-height: 820px) {
  .dialog.auth-dialog-overlay {
    place-items: start center !important;
    padding-top: 12px !important;
    padding-bottom: 72px !important;
  }
  .auth-dialog-overlay .auth-dialog-card,
  .auth-dialog-overlay.auth-register-active .auth-dialog-card {
    transform: none !important;
  }
  .auth-dialog-overlay .auth-modal {
    max-height: calc(100svh - 104px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-color: #dadedd transparent;
    scrollbar-width: thin;
  }
  .auth-dialog-overlay .auth-modal::-webkit-scrollbar { display: block; width: 3px; }
  .auth-dialog-overlay .auth-modal::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: #d9dddc;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-dialog-overlay .auth-modal .primary-button::before {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* BOJIE v0.14.48 — fixed-height reference auth shell, internal form scrolling, and 8–16 password rules. */
.dialog.auth-dialog-overlay {
  place-items: center !important;
  overflow: hidden !important;
  padding: 18px 18px 76px !important;
}

.auth-dialog-overlay .auth-dialog-card,
.auth-dialog-overlay.auth-register-active .auth-dialog-card {
  width: min(450px, calc(100vw - 36px)) !important;
  max-width: 450px !important;
  max-height: calc(100svh - 112px) !important;
  overflow: visible !important;
  margin: 0 !important;
  transform: none !important;
}

.auth-dialog-overlay.auth-register-active .auth-dialog-card {
  height: min(738px, calc(100svh - 112px)) !important;
}

.auth-dialog-overlay .auth-modal {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.auth-dialog-overlay .modal-brand,
.auth-dialog-overlay .modal-banner,
.auth-dialog-overlay .auth-tabs {
  flex: 0 0 auto !important;
}

.auth-dialog-overlay .modal-banner {
  height: 176px !important;
  aspect-ratio: auto !important;
}

.auth-dialog-overlay .auth-form:not([hidden]) {
  min-height: 0 !important;
  display: block !important;
  flex: 1 1 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 5px !important;
  overscroll-behavior: contain;
  scrollbar-color: #d8dcda transparent;
  scrollbar-width: thin;
}

.auth-dialog-overlay .auth-form[hidden] { display: none !important; }
.auth-dialog-overlay .auth-form::-webkit-scrollbar { width: 3px; }
.auth-dialog-overlay .auth-form::-webkit-scrollbar-track { background: transparent; }
.auth-dialog-overlay .auth-form::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #d8dcda;
}

.auth-dialog-overlay .password-strength {
  gap: 6px !important;
  font-size: 12px !important;
}

.auth-dialog-overlay .password-strength > b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
}

.auth-dialog-overlay .password-strength > b::before {
  width: 15px;
  height: 15px;
  display: inline-grid;
  flex: 0 0 15px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #ed5148;
  content: "×";
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
}

.auth-dialog-overlay .password-strength > b.valid::before {
  background: #1bac7f;
  content: "✓";
}

.auth-dialog-overlay .password-rules {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px 14px !important;
  font-size: 12px !important;
}

.auth-dialog-overlay .password-rules span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.auth-dialog-overlay .password-rules span > i {
  width: 15px;
  height: 15px;
  display: inline-grid;
  flex: 0 0 15px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #ed5148;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
}

.auth-dialog-overlay .password-rules span.valid > i {
  background: #1bac7f;
}
.auth-dialog-overlay .password-rules span.valid > i::before { content: "✓"; }
.auth-dialog-overlay .password-rules span.valid > i { font-size: 0; }
.auth-dialog-overlay .password-rules span.valid > i::before { font-size: 11px; }

.auth-dialog-overlay .auth-inline-error {
  min-height: 17px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 4px 0 0 !important;
  color: #ed5148 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
}
.auth-dialog-overlay .auth-inline-error[hidden] { display: none !important; }
.auth-dialog-overlay .auth-inline-error > i {
  width: 16px;
  height: 16px;
  display: inline-grid;
  flex: 0 0 16px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #ed5148;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.auth-dialog-overlay .auth-modal .primary-button::before {
  animation-name: authPrimaryLayerPulseV0139 !important;
  animation-duration: 1.12s !important;
}

@keyframes authPrimaryLayerPulseV0139 {
  0%, 100% { opacity: .88; transform: scale(.978, .94); }
  50% { opacity: 1; transform: scale(1.012, 1.035); }
}

@media (max-width: 390px) {
  .auth-dialog-overlay.auth-register-active .auth-dialog-card {
    height: min(738px, calc(100svh - 104px)) !important;
  }
  .auth-dialog-overlay .modal-banner { height: auto !important; aspect-ratio: 410 / 176 !important; }
}

@media (max-height: 820px) {
  .dialog.auth-dialog-overlay {
    place-items: center !important;
    overflow: hidden !important;
    padding-top: 12px !important;
    padding-bottom: 68px !important;
  }
  .auth-dialog-overlay .auth-modal {
    max-height: none !important;
    overflow: hidden !important;
  }
}

/* Keep the fixed card content box constrained so only the active form scrolls. */
.auth-dialog-overlay .auth-dialog-card > #dialogBody {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.auth-dialog-overlay .auth-form:not([hidden]) {
  flex: 1 1 0 !important;
}

/* ========================================================================
   BOJIE v0.14.48 — captured 8T reference geometry + desktop zoom lock
   Reference capture: 7.5rem = 363.756 CSS px at baseline browser zoom.
   All critical dimensions below are rem-based so browser zoom compensation
   in layout-scale.js keeps the physical UI stable from 100% through 300%.
   ======================================================================== */

:root {
  --auth-card-width: 6.90rem;
  --auth-register-card-height: 12.38rem;
  --auth-login-card-height: 9.57rem;
  --auth-input-height: .70rem;
  --auth-form-width: 6.30rem;
  --auth-green: #26a17b;
  --auth-red: #ed5148;
}

/* Previously fixed-pixel reference assets now participate in the zoom lock.
   At the captured 48.5008px root size these still render as 45px / 46px. */
.more-feature-grid button[data-more-feature="lucky-wheel"] i,
.more-feature-grid button[data-more-feature="lucky-wheel"] img {
  width: .928rem !important;
  height: .928rem !important;
  max-width: .928rem !important;
  max-height: .928rem !important;
}

.guest-profile-view .guest-profile-head .profile-login-row {
  height: .948rem !important;
  min-height: .948rem !important;
}

.guest-profile-avatar,
.guest-profile-avatar img,
.guest-profile-view .guest-profile-avatar,
.guest-profile-view .guest-profile-avatar img {
  width: .948rem !important;
  height: .948rem !important;
  max-width: .948rem !important;
  max-height: .948rem !important;
}

.guest-profile-avatar,
.guest-profile-view .guest-profile-avatar {
  flex: 0 0 .948rem !important;
}

/* The overlay is exactly the H5 canvas, not the desktop browser viewport. */
.dialog.auth-dialog-overlay {
  width: 7.5rem !important;
  height: 100svh !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  inset: 0 auto auto 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: rgba(36, 41, 39, .52) !important;
  backdrop-filter: blur(.08rem) !important;
  -webkit-backdrop-filter: blur(.08rem) !important;
  transform: translateX(-50%) !important;
  overscroll-behavior: none !important;
}

.auth-dialog-overlay .auth-dialog-card,
.auth-dialog-overlay.auth-register-active .auth-dialog-card,
.auth-dialog-overlay.auth-login-active .auth-dialog-card {
  width: var(--auth-card-width) !important;
  min-width: var(--auth-card-width) !important;
  max-width: var(--auth-card-width) !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: .20rem !important;
  background: #fff !important;
  box-shadow: 0 .05rem .18rem rgba(0, 0, 0, .12) !important;
  transform: none !important;
}

.auth-dialog-overlay.auth-register-active .auth-dialog-card {
  height: var(--auth-register-card-height) !important;
}

.auth-dialog-overlay.auth-login-active .auth-dialog-card {
  height: var(--auth-login-card-height) !important;
}

.auth-dialog-overlay .auth-dialog-card > #dialogBody {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.auth-dialog-overlay .auth-modal {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: inherit !important;
  background: #fff !important;
}

/* Captured header geometry: 1rem logo strip + .2rem gap + 2.69rem banner. */
.auth-dialog-overlay .modal-brand {
  width: 100% !important;
  height: 1rem !important;
  min-height: 1rem !important;
  display: flex !important;
  flex: 0 0 1rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .10rem !important;
  padding: 0 !important;
  color: #078c6c !important;
  background: #fff !important;
}

.auth-dialog-overlay .modal-brand-mark {
  width: .72rem !important;
  height: .72rem !important;
  display: grid !important;
  flex: 0 0 .72rem !important;
  place-items: center !important;
  border-radius: 50% 44% 50% 42% !important;
  color: #fff !important;
  background: linear-gradient(145deg, #07845f, #21a77f) !important;
  box-shadow: inset 0 -.04rem 0 rgba(0, 0, 0, .08) !important;
  font-size: .38rem !important;
  font-weight: 800 !important;
  line-height: .72rem !important;
  transform: skewX(-6deg) !important;
}

.auth-dialog-overlay .modal-brand > span:last-child {
  display: block !important;
  min-width: 0 !important;
}

.auth-dialog-overlay .modal-brand strong {
  display: block !important;
  color: #078c6c !important;
  font-size: .30rem !important;
  font-weight: 700 !important;
  line-height: .34rem !important;
  white-space: nowrap !important;
}

.auth-dialog-overlay .modal-brand small {
  display: block !important;
  margin: .01rem 0 0 !important;
  color: #50877a !important;
  font-size: .14rem !important;
  font-weight: 400 !important;
  line-height: .18rem !important;
  letter-spacing: .02em !important;
  text-align: center !important;
}

.auth-dialog-overlay .modal-banner {
  width: var(--auth-form-width) !important;
  height: 2.69rem !important;
  min-height: 2.69rem !important;
  flex: 0 0 2.69rem !important;
  margin: .20rem .30rem 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
  background: #f3faf7 !important;
}

.auth-dialog-overlay .modal-banner img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

.auth-dialog-overlay .auth-tabs {
  width: 100% !important;
  height: .95rem !important;
  min-height: .95rem !important;
  display: grid !important;
  flex: 0 0 .95rem !important;
  grid-template-columns: 1fr 1fr !important;
  margin: .20rem 0 0 !important;
  border-bottom: .01rem solid #dfe2e1 !important;
  background: #fff !important;
}

.auth-dialog-overlay .auth-tabs button {
  height: .80rem !important;
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  color: #181b1a !important;
  background: transparent !important;
  font-size: .26rem !important;
  font-weight: 400 !important;
  line-height: .80rem !important;
  transform: none !important;
}

.auth-dialog-overlay .auth-tabs button.active {
  color: #079775 !important;
}

.auth-dialog-overlay .auth-tabs button.active::after {
  width: 1.21rem !important;
  height: .04rem !important;
  position: absolute !important;
  right: auto !important;
  bottom: -.01rem !important;
  left: 50% !important;
  border-radius: .02rem !important;
  background: #20a77b !important;
  content: "" !important;
  opacity: 1 !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}

.auth-dialog-overlay .auth-form,
.auth-dialog-overlay .auth-form:not([hidden]) {
  width: 100% !important;
  min-height: 0 !important;
  display: block !important;
  flex: 1 1 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: .16rem .30rem .12rem !important;
  scrollbar-color: #d5d9d7 transparent !important;
  scrollbar-width: thin !important;
  overscroll-behavior: contain !important;
}

.auth-dialog-overlay .auth-form[hidden] {
  display: none !important;
}

.auth-dialog-overlay .auth-form::-webkit-scrollbar {
  width: .04rem !important;
}
.auth-dialog-overlay .auth-form::-webkit-scrollbar-track {
  background: transparent !important;
}
.auth-dialog-overlay .auth-form::-webkit-scrollbar-thumb {
  border-radius: .04rem !important;
  background: #d5d9d7 !important;
}

.auth-dialog-overlay .auth-caption {
  min-height: .36rem !important;
  margin: 0 !important;
  color: #343937 !important;
  font-size: .22rem !important;
  font-weight: 400 !important;
  line-height: .36rem !important;
}

.auth-dialog-overlay .auth-input {
  width: 100% !important;
  height: var(--auth-input-height) !important;
  min-height: var(--auth-input-height) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: .18rem 0 0 !important;
  padding: 0 .20rem !important;
  border: .01rem solid #c9cdcb !important;
  border-radius: .10rem !important;
  background: #fff !important;
  box-shadow: none !important;
}

.auth-dialog-overlay .auth-caption + .auth-input {
  margin-top: 0 !important;
}

.auth-dialog-overlay .auth-input:focus-within {
  border-color: #1fa77e !important;
  box-shadow: 0 0 0 .02rem rgba(31, 167, 126, .08) !important;
}

.auth-dialog-overlay .auth-input i {
  width: .40rem !important;
  height: .40rem !important;
  display: grid !important;
  flex: 0 0 .40rem !important;
  place-items: center !important;
  color: #a1a7a4 !important;
}

.auth-dialog-overlay .auth-input i svg {
  width: .30rem !important;
  height: .30rem !important;
  fill: #a1a7a4 !important;
  stroke: #a1a7a4 !important;
  stroke-width: 1.5 !important;
}

.auth-dialog-overlay .auth-input b {
  margin: 0 .06rem 0 0 !important;
  color: #e54b47 !important;
  font-size: .24rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.auth-dialog-overlay .auth-input input {
  height: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  color: #333836 !important;
  background: transparent !important;
  font-size: .24rem !important;
  font-weight: 400 !important;
  line-height: var(--auth-input-height) !important;
}

.auth-dialog-overlay .auth-input input::placeholder {
  color: #a9aeac !important;
  opacity: 1 !important;
}

.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon {
  color: #12a7dd !important;
}
.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon svg {
  fill: #12a7dd !important;
  stroke: #fff !important;
}

.auth-dialog-overlay .password-toggle {
  width: .52rem !important;
  height: .52rem !important;
  display: grid !important;
  flex: 0 0 .52rem !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  color: #dfe2e1 !important;
  background: transparent !important;
}
.auth-dialog-overlay .password-toggle svg {
  width: .36rem !important;
  height: .36rem !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

.auth-dialog-overlay .auth-inline-error,
.auth-dialog-overlay .form-error {
  min-height: .34rem !important;
  margin: .04rem 0 0 !important;
  color: var(--auth-red) !important;
  font-size: .22rem !important;
  font-weight: 400 !important;
  line-height: .34rem !important;
}
.auth-dialog-overlay .auth-inline-error[hidden],
.auth-dialog-overlay .form-error[hidden] {
  display: none !important;
}
.auth-dialog-overlay .auth-inline-error > i {
  width: .30rem !important;
  height: .30rem !important;
  display: inline-grid !important;
  flex: 0 0 .30rem !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--auth-red) !important;
  font-size: .20rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: .30rem !important;
}

.auth-dialog-overlay .password-strength {
  min-height: .32rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .10rem !important;
  margin: .08rem 0 0 !important;
  color: #313634 !important;
  font-size: .20rem !important;
  line-height: .32rem !important;
}

.auth-dialog-overlay .password-strength > span {
  flex: 0 0 auto !important;
  margin-right: .02rem !important;
}

.auth-dialog-overlay .password-strength > i {
  width: .84rem !important;
  height: .12rem !important;
  display: block !important;
  flex: 1 1 .84rem !important;
  max-width: .84rem !important;
  border-radius: .08rem !important;
  background: #e0e2e1 !important;
}
.auth-dialog-overlay .password-strength > i.active {
  background: #20ad84 !important;
}

.auth-dialog-overlay .password-strength > b {
  display: inline-flex !important;
  align-items: center !important;
  gap: .06rem !important;
  margin: 0 !important;
  color: var(--auth-red) !important;
  font-size: .20rem !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
}
.auth-dialog-overlay .password-strength > b::before,
.auth-dialog-overlay .password-rules span > i {
  width: .28rem !important;
  height: .28rem !important;
  display: inline-grid !important;
  flex: 0 0 .28rem !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--auth-red) !important;
  content: "×" !important;
  font-family: Arial, sans-serif !important;
  font-size: .20rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: .28rem !important;
}
.auth-dialog-overlay .password-strength > b.valid,
.auth-dialog-overlay .password-rules span.valid {
  color: #18a777 !important;
}
.auth-dialog-overlay .password-strength > b.valid::before,
.auth-dialog-overlay .password-rules span.valid > i {
  background: #18a777 !important;
  content: "✓" !important;
}
.auth-dialog-overlay .password-rules span.valid > i::before {
  content: none !important;
}

.auth-dialog-overlay .password-rules {
  min-height: .32rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .04rem .22rem !important;
  margin: .02rem 0 0 !important;
  color: var(--auth-red) !important;
  font-size: .20rem !important;
  line-height: .32rem !important;
}
.auth-dialog-overlay .password-rules span {
  display: inline-flex !important;
  align-items: center !important;
  gap: .06rem !important;
}

.auth-dialog-overlay .remember-row {
  min-height: .40rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .10rem !important;
  margin: .18rem 0 0 !important;
  color: #343a38 !important;
  font-size: .22rem !important;
  font-weight: 400 !important;
  line-height: .40rem !important;
}
.auth-dialog-overlay .remember-row input {
  width: .34rem !important;
  height: .34rem !important;
  flex: 0 0 .34rem !important;
  margin: 0 !important;
  accent-color: #08bd2d !important;
}
.auth-dialog-overlay .terms-row {
  margin-top: .18rem !important;
  padding-top: .16rem !important;
  border-top: .01rem solid #dfe2e1 !important;
}

.auth-dialog-overlay .auth-modal .primary-button {
  width: 100% !important;
  height: .71rem !important;
  min-height: .71rem !important;
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
  overflow: visible !important;
  margin: .14rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: .14rem !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .24rem !important;
  font-weight: 500 !important;
  line-height: .71rem !important;
  transform: none !important;
}

/* Exact captured 1.5-second pulse: the green layer grows and emits a ring;
   the button text itself does not transform. */
.auth-dialog-overlay .auth-modal .primary-button::before {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: var(--auth-green) !important;
  content: "" !important;
  transform-origin: 50% 50% !important;
  animation:
    authReferenceLayerScaleV0142 1.5s linear infinite,
    authReferenceLayerHaloV0142 1.5s linear infinite !important;
}

@keyframes authReferenceLayerScaleV0142 {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes authReferenceLayerHaloV0142 {
  0% { box-shadow: 0 0 0 0 rgb(38, 161, 123); }
  70% { box-shadow: 0 0 0 .20rem rgba(0, 255, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 102, 0); }
}

.auth-dialog-overlay .auth-modal .primary-button:disabled::before {
  opacity: .58 !important;
  animation: none !important;
}

.auth-dialog-overlay .auth-links {
  min-height: .52rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  margin: 0 !important;
}
.auth-dialog-overlay .auth-links button {
  padding: 0 !important;
  border: 0 !important;
  color: #078f70 !important;
  background: transparent !important;
  font-size: .22rem !important;
  font-weight: 400 !important;
  line-height: .32rem !important;
}

.auth-dialog-overlay .auth-dialog-card > .dialog-close {
  width: .58rem !important;
  height: .58rem !important;
  display: grid !important;
  position: absolute !important;
  z-index: 5 !important;
  right: 50% !important;
  top: calc(100% + .30rem) !important;
  place-items: center !important;
  padding: 0 0 .02rem !important;
  border: .04rem solid #fff !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(80, 86, 84, .34) !important;
  box-shadow: none !important;
  font-family: Arial, sans-serif !important;
  font-size: .40rem !important;
  font-weight: 400 !important;
  line-height: .50rem !important;
  transform: translateX(50%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .auth-dialog-overlay .auth-modal .primary-button::before {
    transform: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
}

/* Center the complete popup (card + occupied close-control area), not only the
   white card. This is the last 0.40rem needed to keep the close control fully
   visible at the captured 647px viewport and at 200% / 300% browser zoom. */
.auth-dialog-overlay .auth-dialog-card,
.auth-dialog-overlay.auth-register-active .auth-dialog-card,
.auth-dialog-overlay.auth-login-active .auth-dialog-card {
  transform: translateY(-.40rem) scale(var(--bojie-auth-low-zoom-scale, 1)) !important;
}

/* Sub-pixel safety at 300% browser zoom: preserve the captured visual spacing
   while removing a rounding-only 2–3 CSS-pixel form overflow. */
.auth-dialog-overlay .terms-row {
  margin-top: .14rem !important;
  padding-top: .12rem !important;
}
.auth-dialog-overlay .auth-modal .primary-button {
  margin-top: .10rem !important;
}
.auth-dialog-overlay .auth-links {
  min-height: .46rem !important;
}


/* ========================================================================
   BOJIE v0.14.48 — reference utility typography + zoom-stable Telegram icon
   Probe values at the reference baseline: utility icon 27.64×24.25px,
   utility label 10.67px, Telegram prefix 14.55px inside a 19.40px slot.
   ======================================================================== */

:root,
body,
button,
input,
textarea,
select {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    "Segoe UI", Arial, Roboto, "PingFang SC", miui, "Hiragino Sans GB",
    "Microsoft Yahei", sans-serif;
  font-synthesis: none;
}

/* Do not let tiny text rasterization imitate an italic face. */
.home-actions .account-strip,
.home-actions .account-strip button,
.utility-bar,
.utility-item,
.utility-item > span {
  font-style: normal !important;
  font-variant: normal !important;
  text-decoration: none !important;
  transform: none !important;
}

/* Exact reference utility row proportions. */
.home-actions {
  min-height: .92rem !important;
}
.utility-bar {
  min-height: .92rem !important;
  align-items: start !important;
  padding: .08rem .02rem .04rem !important;
}
.utility-item {
  min-height: .83rem !important;
  grid-template-rows: .50rem .22rem !important;
  align-content: start !important;
  gap: .06rem !important;
  padding: 0 !important;
  color: #666 !important;
  font-size: .22rem !important;
  font-weight: 400 !important;
  line-height: .22rem !important;
}
.utility-item i,
.utility-item .utility-icon {
  width: .57rem !important;
  height: .50rem !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  margin: 0 auto !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.utility-item .utility-icon img,
.utility-item .utility-icon svg,
.utility-item[data-action="more"] .utility-icon img {
  width: .57rem !important;
  height: .50rem !important;
  max-width: .57rem !important;
  max-height: .50rem !important;
  display: block !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  transform: none !important;
}
.utility-item > span {
  width: 100% !important;
  height: .22rem !important;
  min-height: .22rem !important;
  display: block !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #666 !important;
  font-size: .22rem !important;
  font-weight: 400 !important;
  line-height: .22rem !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Exact reference Telegram prefix. It is rem-based, so the desktop zoom lock
   keeps it visually unchanged from 100% through 300% browser zoom. */
.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon {
  width: .30rem !important;
  height: .30rem !important;
  min-width: .30rem !important;
  min-height: .30rem !important;
  max-width: .30rem !important;
  max-height: .30rem !important;
  display: grid !important;
  flex: 0 0 .30rem !important;
  place-items: center !important;
  overflow: hidden !important;
  margin: 0 .10rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}
.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon svg {
  width: .30rem !important;
  height: .30rem !important;
  min-width: .30rem !important;
  min-height: .30rem !important;
  max-width: .30rem !important;
  max-height: .30rem !important;
  display: block !important;
  overflow: hidden !important;
  fill: none !important;
  stroke: none !important;
  transform: none !important;
}
.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon svg path:first-child {
  fill: #039be5 !important;
}
.auth-dialog-overlay .auth-telegram-input .auth-telegram-icon svg path:last-child {
  fill: #fff !important;
}

/* Use the combined low-zoom + short-viewport fit scale from layout-scale.js. */
.auth-dialog-overlay .auth-dialog-card,
.auth-dialog-overlay.auth-register-active .auth-dialog-card,
.auth-dialog-overlay.auth-login-active .auth-dialog-card {
  transform: translateY(-.40rem) scale(var(--bojie-auth-scale, 1)) !important;
}

/* ========================================================================
   BOJIE v0.14.48 — auth secondary-link vertical centering
   Keep the primary button and card geometry unchanged. Only move the small
   support / demo / forgot-password labels down into the visual midpoint
   between the main action button and the white card bottom edge.
   ======================================================================== */
.auth-dialog-overlay #registerForm .auth-links {
  transform: translateY(.39rem) !important;
}
.auth-dialog-overlay #loginForm .auth-links {
  transform: translateY(.29rem) !important;
}
.auth-dialog-overlay #registerForm .auth-links button,
.auth-dialog-overlay #loginForm .auth-links button {
  transform: none !important;
}

/* ========================================================================
   BOJIE v0.14.48 — authentication progress dots + server-verified drag CAPTCHA
   ======================================================================== */
.auth-dialog-overlay .auth-modal .primary-button.auth-button-processing {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .06rem !important;
  color: #fff !important;
  cursor: wait !important;
  opacity: 1 !important;
}
.auth-dialog-overlay .auth-modal .primary-button.auth-button-processing::before {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.auth-processing-label {
  display: inline-block !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  transform: none !important;
}
.auth-processing-dots {
  min-width: .30rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .035rem !important;
  transform: none !important;
}
.auth-processing-dots > i {
  width: .055rem !important;
  height: .055rem !important;
  display: block !important;
  border-radius: 50% !important;
  background: #fff !important;
  opacity: .24 !important;
  animation: bojieAuthDotV0143 .96s ease-in-out infinite !important;
}
.auth-processing-dots > i:nth-child(2) { animation-delay: .16s !important; }
.auth-processing-dots > i:nth-child(3) { animation-delay: .32s !important; }
@keyframes bojieAuthDotV0143 {
  0%, 72%, 100% { opacity: .22; transform: scale(.82); }
  28% { opacity: 1; transform: scale(1); }
}

.bojie-captcha-overlay {
  width: 7.5rem;
  height: 100svh;
  min-height: 100vh;
  display: flex;
  position: fixed;
  z-index: 12000;
  inset: 0 auto auto 50%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  background: rgba(33, 38, 36, .60);
  backdrop-filter: blur(.035rem);
  -webkit-backdrop-filter: blur(.035rem);
  transform: translateX(-50%);
  touch-action: none;
}
.bojie-captcha-card {
  width: 5.55rem;
  min-height: 5.18rem;
  position: relative;
  overflow: hidden;
  padding: .28rem .28rem 0;
  border: .01rem solid rgba(18, 69, 54, .15);
  border-radius: .08rem;
  background: #fff;
  box-shadow: 0 .10rem .36rem rgba(0, 0, 0, .30);
  transform-origin: 50% 50%;
}
.bojie-captcha-card.attention { animation: bojieCaptchaAttentionV0143 .30s ease; }
@keyframes bojieCaptchaAttentionV0143 {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-.06rem); }
  65% { transform: translateX(.06rem); }
}
.bojie-captcha-card h3 {
  height: .42rem;
  margin: 0 0 .18rem;
  color: #4e5653;
  font-size: .21rem;
  font-style: normal;
  font-weight: 500;
  line-height: .42rem;
  text-align: center;
}
.bojie-captcha-board {
  width: 4.99rem;
  height: 2.495rem;
  position: relative;
  overflow: hidden;
  border: .01rem solid #d8dcda;
  border-radius: .07rem;
  background: #dce7e2;
  box-shadow: inset 0 0 0 .08rem #f4f5f4;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.bojie-captcha-background {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.bojie-captcha-piece {
  width: .655rem;
  height: .655rem;
  position: absolute;
  z-index: 3;
  top: .90rem;
  left: .38rem;
  cursor: grab;
  filter: drop-shadow(0 .03rem .04rem rgba(0, 0, 0, .34));
  object-fit: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter .16s ease, opacity .16s ease, transform .16s ease;
}
.bojie-captcha-piece.dragging {
  cursor: grabbing;
  filter: drop-shadow(0 .06rem .08rem rgba(0, 0, 0, .45));
  transform: scale(1.06);
  transition: none;
}
.bojie-captcha-piece.verifying { opacity: .72; }
.bojie-captcha-piece.verified {
  filter: drop-shadow(0 0 .08rem rgba(14, 188, 125, .85));
  transform: scale(1.08);
}
.bojie-captcha-piece.mismatch { animation: bojieCaptchaMismatchV0143 .42s ease; }
@keyframes bojieCaptchaMismatchV0143 {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-.08rem); }
  60% { transform: translateX(.08rem); }
}
.bojie-captcha-status {
  min-width: 1.35rem;
  min-height: .36rem;
  display: none;
  position: absolute;
  z-index: 5;
  right: .10rem;
  bottom: .10rem;
  align-items: center;
  justify-content: center;
  padding: 0 .12rem;
  border-radius: .18rem;
  color: #fff;
  background: rgba(41, 47, 45, .78);
  font-size: .17rem;
  line-height: .36rem;
  pointer-events: none;
}
.bojie-captcha-status:not(:empty) { display: flex; }
.bojie-captcha-status.success { background: rgba(10, 158, 106, .92); }
.bojie-captcha-status.error { background: rgba(224, 73, 65, .94); }
.bojie-captcha-tip {
  height: .42rem;
  margin: .08rem 0 0;
  color: #777e7b;
  font-size: .17rem;
  line-height: .42rem;
  text-align: center;
}
.bojie-captcha-footer {
  height: .78rem;
  display: grid;
  grid-template-columns: .48rem .58rem 1fr .78rem;
  align-items: center;
  gap: .08rem;
  margin: 0 -.28rem;
  padding: 0 .18rem;
  border-top: .01rem solid #e1e4e2;
  background: #fff;
}
.bojie-captcha-language {
  color: #303735;
  font-size: .17rem;
  font-weight: 700;
  text-align: center;
}
.bojie-captcha-refresh,
.bojie-captcha-close {
  height: .48rem;
  padding: 0;
  border: 0;
  border-radius: .04rem;
  font-family: inherit;
}
.bojie-captcha-refresh {
  color: #65706c;
  background: transparent;
  font-size: .38rem;
  font-weight: 300;
  line-height: .48rem;
}
.bojie-captcha-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .07rem;
  color: #6c7571;
  font-size: .15rem;
  white-space: nowrap;
}
.bojie-captcha-brand > i {
  width: .38rem;
  height: .38rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #14a981;
  box-shadow: 0 0 0 .04rem rgba(20, 169, 129, .16);
  font-size: .20rem;
  font-style: normal;
  font-weight: 700;
}
.bojie-captcha-close {
  color: #fff;
  background: #4d5250;
  font-size: .17rem;
}
.bojie-captcha-refresh:hover,
.bojie-captcha-close:hover { filter: brightness(1.06); }
.bojie-captcha-refresh:focus-visible,
.bojie-captcha-close:focus-visible,
.bojie-captcha-piece:focus-visible {
  outline: .03rem solid rgba(11, 158, 116, .45);
  outline-offset: .02rem;
}
@media (max-height: 560px) {
  .bojie-captcha-card { transform: scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-processing-dots > i,
  .bojie-captcha-piece,
  .bojie-captcha-card { animation: none !important; }
}


/* BOJIE v0.14.48 — clickable user agreement + standardized password state icons */
.auth-dialog-overlay .agreement-link {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #17ab83 !important;
  font: inherit !important;
  line-height: inherit !important;
  cursor: pointer !important;
}
.auth-dialog-overlay .agreement-link:hover,
.auth-dialog-overlay .agreement-link:focus-visible {
  color: #11956f !important;
  text-decoration: underline !important;
  outline: none !important;
}
.auth-dialog-overlay .terms-row span { display: inline !important; }
.user-agreement-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .24rem !important;
  background: rgba(17, 29, 27, .42) !important;
  backdrop-filter: blur(.04rem) !important;
}
.user-agreement-card {
  width: min(6.3rem, calc(100vw - .48rem)) !important;
  max-height: min(9.6rem, calc(100vh - 1.2rem)) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: .34rem .28rem .26rem !important;
  border-radius: .22rem !important;
  background: #fff !important;
  box-shadow: 0 .16rem .44rem rgba(0,0,0,.18) !important;
}
.user-agreement-card h2 {
  margin: 0 0 .24rem !important;
  color: #333 !important;
  text-align: center !important;
  font-size: .32rem !important;
  font-weight: 600 !important;
  line-height: .42rem !important;
}
.user-agreement-body {
  overflow: auto !important;
  padding-right: .04rem !important;
}
.user-agreement-body p {
  margin: 0 0 .18rem !important;
  color: #555 !important;
  font-size: .24rem !important;
  line-height: .38rem !important;
}
.user-agreement-card .primary-button {
  width: 100% !important;
  height: .72rem !important;
  margin-top: .18rem !important;
  border: 0 !important;
  border-radius: .14rem !important;
  color: #fff !important;
  background: #20ad84 !important;
  font-size: .28rem !important;
  font-weight: 600 !important;
}
.auth-dialog-overlay .password-rules span > i {
  font-style: normal !important;
  font-size: .20rem !important;
  text-indent: 0 !important;
}
.auth-dialog-overlay .password-rules span.valid > i {
  background: #18a777 !important;
}
.auth-dialog-overlay .password-rules span.valid > i::before {
  content: none !important;
}
.auth-dialog-overlay .password-rules span:not(.valid) > i {
  background: var(--auth-red) !important;
}


/* BOJIE v0.14.48 — reference-style password status icons.
   State classes only switch accent background; the white X/check is a centered SVG,
   avoiding slanted font glyphs on different Windows/browser font renderers. */
.auth-dialog-overlay .password-rules span > i {
  width: .28rem !important;
  height: .28rem !important;
  display: inline-block !important;
  flex: 0 0 .28rem !important;
  border-radius: 50% !important;
  color: transparent !important;
  background-color: var(--auth-red) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4L12 12M12 4L4 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 62% 62% !important;
  font-size: 0 !important;
  font-style: normal !important;
  line-height: 0 !important;
  transform: none !important;
}
.auth-dialog-overlay .password-rules span > i::before,
.auth-dialog-overlay .password-rules span > i::after {
  display: none !important;
  content: none !important;
}
.auth-dialog-overlay .password-rules span.valid > i {
  background-color: #18a777 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 8.1L6.5 11.2L12.8 4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 68% 68% !important;
}
.auth-dialog-overlay .password-strength > b {
  position: relative !important;
}
.auth-dialog-overlay .password-strength > b::before {
  color: transparent !important;
  background-color: var(--auth-red) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4L12 12M12 4L4 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 62% 62% !important;
  content: "" !important;
  font-size: 0 !important;
  font-style: normal !important;
  line-height: 0 !important;
  transform: none !important;
}
.auth-dialog-overlay .password-strength > b.valid::before {
  background-color: #18a777 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.1 8.1L6.5 11.2L12.8 4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 68% 68% !important;
}


/* BOJIE v0.14.48 — visible inline SVG password-state marks.
   The previous data-URI background could disappear under some Chromium/CSP render paths.
   Both marks now live in the DOM; state classes only switch which SVG is displayed. */
.auth-dialog-overlay .password-status-icon,
.auth-dialog-overlay .password-rules span > .password-status-icon,
.auth-dialog-overlay .password-strength > b > .password-status-icon {
  width: .28rem !important;
  height: .28rem !important;
  min-width: .28rem !important;
  min-height: .28rem !important;
  display: inline-grid !important;
  flex: 0 0 .28rem !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--auth-red) !important;
  background-image: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}
.auth-dialog-overlay .password-status-icon::before,
.auth-dialog-overlay .password-status-icon::after,
.auth-dialog-overlay .password-strength > b::before,
.auth-dialog-overlay .password-strength > b::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
.auth-dialog-overlay .password-status-icon svg {
  width: 68% !important;
  height: 68% !important;
  display: block !important;
  position: absolute !important;
  inset: 16% !important;
  overflow: visible !important;
  color: #fff !important;
  stroke: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
.auth-dialog-overlay .password-status-icon .status-error { display: block !important; }
.auth-dialog-overlay .password-status-icon .status-valid { display: none !important; }
.auth-dialog-overlay .password-rules span.valid > .password-status-icon,
.auth-dialog-overlay .password-strength > b.valid > .password-status-icon {
  background: #18a777 !important;
  background-image: none !important;
}
.auth-dialog-overlay .password-rules span.valid > .password-status-icon .status-error,
.auth-dialog-overlay .password-strength > b.valid > .password-status-icon .status-error {
  display: none !important;
}
.auth-dialog-overlay .password-rules span.valid > .password-status-icon .status-valid,
.auth-dialog-overlay .password-strength > b.valid > .password-status-icon .status-valid {
  display: block !important;
}
.auth-dialog-overlay .password-strength > b {
  display: inline-flex !important;
  align-items: center !important;
  gap: .06rem !important;
}
.auth-dialog-overlay .password-strength-copy {
  display: inline-block !important;
  color: inherit !important;
  white-space: nowrap !important;
}


/* BOJIE v0.14.48 — reference-style one-click clear buttons for auth fields. */
.auth-dialog-overlay .auth-clear-button {
  width: .44rem !important;
  height: .44rem !important;
  min-width: .44rem !important;
  min-height: .44rem !important;
  display: none !important;
  flex: 0 0 .44rem !important;
  place-items: center !important;
  margin: 0 .02rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #9ea3a1 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}
.auth-dialog-overlay .auth-clear-button[hidden],
.auth-dialog-overlay .auth-clear-button:not(.is-visible) {
  display: none !important;
}
.auth-dialog-overlay .auth-clear-button.is-visible:not([hidden]) {
  display: grid !important;
}
.auth-dialog-overlay .auth-clear-button svg {
  width: .36rem !important;
  height: .36rem !important;
  display: block !important;
  overflow: visible !important;
}
.auth-dialog-overlay .auth-clear-button svg circle {
  fill: currentColor !important;
  stroke: none !important;
}
.auth-dialog-overlay .auth-clear-button svg path {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
}
.auth-dialog-overlay .auth-clear-button:hover,
.auth-dialog-overlay .auth-clear-button:focus-visible {
  color: #858b88 !important;
  outline: none !important;
}
.auth-dialog-overlay .auth-clear-button:active {
  transform: scale(.94) !important;
}
.auth-dialog-overlay .auth-input.has-clear-value input {
  min-width: 0 !important;
}


/* BOJIE v0.14.48 — suppress browser credential suggestions on auth fields. */
.auth-dialog-overlay .auth-form [data-auth-field][readonly] {
  cursor: text !important;
}
.auth-dialog-overlay .auth-form [data-auth-field]::-webkit-credentials-auto-fill-button,
.auth-dialog-overlay .auth-form [data-auth-field]::-webkit-contacts-auto-fill-button {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
}
.auth-dialog-overlay .auth-form [data-auth-field]:-webkit-autofill,
.auth-dialog-overlay .auth-form [data-auth-field]:-webkit-autofill:hover,
.auth-dialog-overlay .auth-form [data-auth-field]:-webkit-autofill:focus {
  -webkit-text-fill-color: #313634 !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 9999s ease-out 0s !important;
}


/* BOJIE v0.14.48 — auth character whitelist */
.auth-dialog-overlay input[data-character-rule="account"],
.auth-dialog-overlay input[data-character-rule="password"] {
  ime-mode: disabled;
}


/* BOJIE v0.14.48 — Telegram account real-time validation */
.auth-dialog-overlay .auth-telegram-error {
  margin-top: .06rem !important;
}
.auth-dialog-overlay .auth-telegram-input.invalid {
  border-color: #ef5448 !important;
}
.auth-dialog-overlay input[data-character-rule="telegram"] {
  ime-mode: disabled;
}


/* BOJIE v0.14.48 — four-level password strength: uppercase + lowercase + number + symbol. */


/* BOJIE v0.14.48 — confirmation validation appears only after interaction or submit. */
.auth-dialog-overlay .auth-input.invalid {
  border-color: #f04b43 !important;
}
.auth-dialog-overlay .auth-input.invalid:focus-within {
  border-color: #f04b43 !important;
  box-shadow: 0 0 0 .01rem rgba(240,75,67,.12) !important;
}


/* BOJIE v0.14.48 — reference-style solid SVG icons for auth input fields. */
.auth-dialog-overlay .auth-input .auth-field-icon {
  width: .40rem !important;
  height: .40rem !important;
  display: grid !important;
  flex: 0 0 .40rem !important;
  place-items: center !important;
  color: #9fa5a2 !important;
  line-height: 1 !important;
}
.auth-dialog-overlay .auth-input .auth-field-icon-svg {
  width: .34rem !important;
  height: .34rem !important;
  display: block !important;
  overflow: visible !important;
  fill: currentColor !important;
  stroke: none !important;
  stroke-width: 0 !important;
  shape-rendering: geometricPrecision !important;
}
.auth-dialog-overlay .auth-input .auth-field-icon-lock .auth-field-icon-svg {
  width: .32rem !important;
  height: .32rem !important;
}


/* BOJIE v0.14.48 — real user-agreement acceptance validation */
.auth-dialog-overlay .auth-terms-error {
  margin: .02rem 0 0 !important;
}
.auth-dialog-overlay .terms-row.invalid {
  color: #f04f45 !important;
}
.auth-dialog-overlay .terms-row.invalid input[type="checkbox"] {
  outline: .02rem solid #f04f45 !important;
  outline-offset: .02rem !important;
}
.auth-dialog-overlay .terms-row.invalid .agreement-link {
  color: #17ab83 !important;
}




/* ========================================================================
   BOJIE v0.14.48 — EFFECTIVE home UI enlargement.
   This block is intentionally last and uses !important because
   reference-sync.css previously overrode styles.css with smaller probe values.
   ======================================================================== */

/* Header / logo / search */
.site-header {
  height: calc(1.34rem + env(safe-area-inset-top)) !important;
  padding-right: .18rem !important;
  padding-left: .20rem !important;
}
.brand-logo { gap: .13rem !important; }
.brand-symbol {
  width: .84rem !important;
  height: .84rem !important;
  border-radius: .22rem !important;
  font-size: .42rem !important;
}
.brand-name strong {
  font-size: .39rem !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  line-height: .41rem !important;
}
.brand-name small {
  margin-top: .02rem !important;
  font-size: .16rem !important;
  letter-spacing: .07em !important;
  line-height: .19rem !important;
}
.search-button {
  width: .96rem !important;
  gap: .04rem !important;
  color: #4e5552 !important;
  font-size: .23rem !important;
  line-height: .25rem !important;
}
.search-button i {
  width: .42rem !important;
  height: .42rem !important;
  border-width: .055rem !important;
}
.search-button i::after {
  width: .18rem !important;
  height: .055rem !important;
  right: -.15rem !important;
  bottom: -.08rem !important;
}

/* Notice line */
.notice-bar {
  height: .92rem !important;
  grid-template-columns: .66rem minmax(0, 1fr) .70rem !important;
  font-size: .225rem !important;
}
.notice-speaker,
.notice-speaker svg {
  width: .58rem !important;
  height: .58rem !important;
}
.notice-message {
  font-size: .255rem !important;
  line-height: .30rem !important;
}
.notice-mail {
  width: .66rem !important;
  height: .64rem !important;
}

/* Login/register + support/app/language/more row */
.home-actions {
  min-height: 1.10rem !important;
}
.utility-bar {
  min-height: 1.10rem !important;
  align-items: start !important;
  padding: .10rem .03rem .07rem !important;
}
.utility-item {
  min-height: .98rem !important;
  grid-template-rows: .61rem .27rem !important;
  gap: .07rem !important;
  color: #585e5b !important;
  font-size: .245rem !important;
  line-height: .27rem !important;
}
.utility-item i,
.utility-item .utility-icon {
  width: .68rem !important;
  height: .61rem !important;
}
.utility-item .utility-icon img,
.utility-item .utility-icon svg,
.utility-item[data-action="more"] .utility-icon img {
  width: .68rem !important;
  height: .61rem !important;
  max-width: .68rem !important;
  max-height: .61rem !important;
}
.utility-item > span {
  height: .27rem !important;
  min-height: .27rem !important;
  color: #585e5b !important;
  font-size: .245rem !important;
  line-height: .27rem !important;
}
.utility-item.account-action {
  height: .74rem !important;
  min-height: .74rem !important;
  border-radius: .13rem !important;
  font-size: .255rem !important;
}

/* Lobby category rail */
.lobby-layout {
  grid-template-columns: 2.18rem minmax(0, 1fr) !important;
}
.side-categories {
  padding: .15rem .13rem .30rem !important;
}
.side-categories button {
  height: .96rem !important;
  gap: .17rem !important;
  margin: .12rem 0 !important;
  padding: 0 .14rem !important;
  border-radius: .15rem !important;
  font-size: .275rem !important;
  line-height: .30rem !important;
}
.side-categories .category-icon {
  width: .51rem !important;
  height: .46rem !important;
  flex: 0 0 .51rem !important;
}
.side-categories .category-icon img {
  width: .47rem !important;
  height: .43rem !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
.side-categories .category-slots {
  font-size: .265rem !important;
}
.side-categories .category-blockchain {
  font-size: .36rem !important;
}

/* Tabs and games */
.lobby-main { padding: 0 .15rem .34rem 0 !important; }
.lobby-tabs { height: 1.02rem !important; }
.lobby-tabs button {
  color: #353a38 !important;
  font-size: .27rem !important;
  font-weight: 400 !important;
}
.lobby-tabs button.active::after {
  height: .04rem !important;
  left: 25% !important;
  right: 25% !important;
}
.game-grid {
  gap: .28rem .18rem !important;
  padding-top: .25rem !important;
}
.game-item {
  color: #555c59 !important;
  font-size: .225rem !important;
}
.game-thumb {
  border-radius: .17rem !important;
}
.game-item strong {
  margin-top: .13rem !important;
  color: #555c59 !important;
  font-size: .225rem !important;
  font-weight: 400 !important;
  line-height: .28rem !important;
}

/* Bottom navigation */
.bottom-nav {
  min-height: calc(1.24rem + env(safe-area-inset-bottom)) !important;
}

.bottom-nav button {
  gap: .07rem !important;
  padding-top: .095rem !important;
  padding-bottom: calc(.085rem + env(safe-area-inset-bottom)) !important;
  font-size: .225rem !important;
  line-height: .25rem !important;
  align-items: center !important;
  justify-content: center !important;
}

.bottom-nav .nav-icon {
  width: .60rem !important;
  height: .60rem !important;
  flex: 0 0 .60rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.bottom-nav .nav-icon svg {
  width: .60rem !important;
  height: .60rem !important;
}

.bottom-nav button > span:last-child {
  font-size: .225rem !important;
  line-height: .25rem !important;
  display: block !important;
  text-align: center !important;
}



/* 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 — guest-accessible message center notifications */
.guest-notification-list .guest-public-notification {
  cursor: default;
}
.guest-notification-list .guest-public-notification mark {
  color: #a9afac;
}


/* 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 — preserve full register content and scale the whole card
   The register card keeps its complete reference height. Short or zoomed
   viewports now shrink the entire card (including the external close button)
   instead of clipping the form or forcing the bottom links off-screen.
   ======================================================================== */
:root {
  --auth-register-card-height: 12.38rem;
}
.auth-dialog-overlay #registerForm .auth-links {
  transform: translateY(.39rem) !important;
}
.auth-dialog-overlay .auth-form,
.auth-dialog-overlay .auth-form:not([hidden]) {
  overflow-y: hidden !important;
}


/* ========================================================================
   BOJIE v0.14.48 — compact logo/banner occupancy with full form visibility
   Reduce only the top branding and campaign-image blocks. The form keeps the
   same effective vertical room as v0.14.45, while the whole card becomes
   shorter and remains fully visible under browser zoom compensation.
   ======================================================================== */
:root {
  --auth-register-card-height: 11.24rem;
}
.auth-dialog-overlay.auth-register-active .auth-dialog-card {
  height: var(--auth-register-card-height) !important;
}
.auth-dialog-overlay .modal-brand {
  height: .72rem !important;
  min-height: .72rem !important;
  flex: 0 0 .72rem !important;
  gap: .08rem !important;
}
.auth-dialog-overlay .modal-brand-mark {
  width: .56rem !important;
  height: .56rem !important;
  flex: 0 0 .56rem !important;
  font-size: .30rem !important;
  line-height: .56rem !important;
}
.auth-dialog-overlay .modal-brand strong {
  font-size: .27rem !important;
  line-height: .29rem !important;
}
.auth-dialog-overlay .modal-brand small {
  margin-top: 0 !important;
  font-size: .11rem !important;
  line-height: .14rem !important;
}
.auth-dialog-overlay .modal-banner {
  width: var(--auth-form-width) !important;
  height: 2.18rem !important;
  min-height: 2.18rem !important;
  flex: 0 0 2.18rem !important;
  margin: .08rem .30rem 0 !important;
}
.auth-dialog-overlay .modal-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.auth-dialog-overlay .auth-tabs {
  height: .82rem !important;
  min-height: .82rem !important;
  flex: 0 0 .82rem !important;
  margin: .10rem 0 0 !important;
}
.auth-dialog-overlay .auth-tabs button {
  height: .70rem !important;
  line-height: .70rem !important;
}
.auth-dialog-overlay .auth-form,
.auth-dialog-overlay .auth-form:not([hidden]) {
  overflow-y: hidden !important;
}


/* ========================================================================
   BOJIE v0.14.48 — larger bottom nav icons and labels with centered alignment
   Make the bottom navigation icon and text a little larger and ensure the
   vertical alignment between icon and label stays centered and natural.
   ======================================================================== */
.bottom-nav button,
.guest-profile-view .bottom-nav button {
  flex-direction: column !important;
}


/* BOJIE v0.14.48 — localized authentication/API error messages; no layout changes */