/* ==========================================================================
   移动优先系统 – F168 响应式架构 (MOBILE FIRST - F168 Responsive)
   - 基础样式 = 移动设备屏幕。使用 @media (min-width: …) 适配平板/桌面端。
   - 断点: 576px (SM), 768px (MD), 992px (LG), 1200px (XL).
   ========================================================================== */

/* Token phụ từ theme (--f168-accent / --f168-accent-secondary trong theme_tokens) — thay hex cam cứng */
:root {
  --f168-accent-07: color-mix(in srgb, var(--f168-accent) 7%, transparent);
  --f168-accent-12: color-mix(in srgb, var(--f168-accent) 12%, white);
  --f168-accent-14: color-mix(in srgb, var(--f168-accent) 14%, white);
  --f168-accent-22: color-mix(in srgb, var(--f168-accent) 22%, white);
  --f168-accent-35t: color-mix(in srgb, var(--f168-accent) 35%, transparent);
  --f168-accent-25t: color-mix(in srgb, var(--f168-accent) 25%, transparent);
  --f168-accent-grad-mid: color-mix(in srgb, var(--f168-accent) 42%, white);
}

/* 覆盖 Bootstrap .py-3：减少上下边距 (默认 1rem) (Override Bootstrap .py-3) */
.py-3 {
  padding-top: 0.1rem !important;
  padding-bottom: 0.1rem !important;
}

/* 正常状态下的页眉背景 (Header background normal state) */
.header {
  background-color: #070b28;
}

/* 用户控制面板页面：无页眉，白色背景，仅内容 + 固定页脚 (User dashboard: white background, content + fixed footer) */
.page-body--white {
  min-height: 100vh;
  background-color: transparent;
}

/* ==========================================================================
   个人中心 – 设计参考 (Design layout)
   ========================================================================== */
.mine-page {
  --mine-primary: var(--f168-accent);
  --mine-primary-dark: var(--f168-accent-secondary);
  --mine-home-bg: #FFFFFF;
  --mine-bg: #FFFFFF;
  --mine-profile-bg: #EEEEEE;
  --mine-text: #000000;
  --mine-text-secondary: var(--f168-text-muted);
  --mine-border: #E3E3E3;
  --mine-gold: #d4a84b;
  min-height: 100vh;
  background-color: var(--mine-bg);
  background-image: url("../images/profile/style_1_topbg.avif");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 1rem);
}

/* 1. 顶部栏 – 透明背景以显示 mine-page 图像 */
.mine-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px;
  background: transparent;

}

.mine-topbar__back {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.mine-topbar__btn--back {
  transition: transform 0.2s ease;
}

.mine-topbar__btn--back:hover {
  transform: translateX(-2px);
}

.mine-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 40px;
  color: var(--mine-text-secondary);
  font-size: 1.35rem;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.mine-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mine-topbar__right .mine-topbar__btn {
  font-size: 1.62rem;
  color: var(--mine-primary);
}

.mine-topbar__btn--menu {
  position: relative;
}

.mine-topbar__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: #EA4E3D;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. 用户资料区块 – 背景透明以显示顶图 */
.mine-profile-section {
  background: transparent;
  padding: 0rem 1rem 0rem 1rem;
}

.mine-profile-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.8rem;
}

.mine-profile-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mine-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.mine-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #e0e0e0;
  background-image: url("../images/profile/img_ntx6.avif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: rgba(0, 0, 0, 0.4);
}

.mine-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mine-primary);
  color: #fff;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mine-profile-info {
  flex: 1;
  min-width: 0;
}

.mine-username {
  font-size: 13px;
  font-weight: 500;
  color: var(--mine-text);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mine-username .la-caret-down {
  font-size: 0.75rem;
  color: var(--mine-text-secondary);
}

.mine-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 4px;
  border: none;
  outline: none;
}

.mine-id {
  font-size: 17px;
  color: var(--mine-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  outline: none;
}

.mine-id:focus,
.mine-id-row:focus {
  outline: none;
  border: none;
}

.mine-profile-section .mine-icon-link:focus,
.mine-profile-section .mine-icon-link.mine-copy:focus {
  outline: none;
  border: none;
}

.mine-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mine-text-secondary);
  font-size: 1rem;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

.mine-icon-link.mine-copy {
  color: var(--mine-primary);
}

.mine-balance-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mine-balance-star {
  color: #EA4E3D;
  font-size: 1.1rem;
}

.mine-balance-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--mine-text);
  text-decoration: underline;
}

/* 3. Quick action buttons */
.mine-quick-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.mine-quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  padding: 10px 8px;

  border-radius: 8px;
  text-decoration: none;
  color: var(--mine-text);
  font-size: 0.8125rem;

  transition: background 0.15s;
}



.mine-quick-btn__icon {
  position: relative;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.mine-quick-btn__icon--withdraw {
  color: var(--mine-primary);
}

.mine-quick-btn__icon--withdraw svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mine-quick-btn__icon--deposit {
  color: #4A90D9;
}

.mine-quick-btn__icon-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.mine-quick-btn__icon--deposit .mine-quick-btn__gif {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mine-quick-btn__badge--top-center {
  position: absolute;
  top: -2px;
  right: -15px;
  min-width: 26px;
  height: 16px;
  padding: 0 5px;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  background: #EA4E3D;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.mine-quick-btn__icon--profit {
  color: var(--f168-accent);
}

.mine-quick-btn__icon--profit .mine-quick-btn__icon-wrap {
  color: var(--f168-accent);
}

.mine-quick-btn__icon--profit svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: var(--f168-accent);
  fill: currentColor;
}

.mine-quick-btn__badge {
  position: absolute;
  top: -4px;
  right: -14px;
  min-width: 28px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mine-quick-btn__badge--green {
  background: #04BE02;
}

.mine-quick-btn__badge--yellow {
  background: var(--f168-accent);
  color: var(--f168-text-dark);
}

/* 盈利徽章：黄色字体，背景accent_2 (如 ui-badge ref) */
.mine-quick-btn__badge--accent {
  background: var(--skin__accent_2, #ea4e3d);
  color: rgb(255, 255, 0);
}

.mine-quick-btn__text {
  text-align: center;
  font-weight: 500;
}

/* 4. VIP卡 (F168示例: avif背景, 双层徽章, 进度条, 黑色字体) */
.mine-vip-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1px 1rem;
  padding: 0.5rem;
  min-height: 5rem;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
  overflow: hidden;
  background: var(--mine-primary);
}

.mine-vip-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
}

.mine-vip-card__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.mine-vip-level {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mine-vip-level__image {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.mine-vip-level__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mine-vip-level__text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  z-index: 2;
}

.mine-vip-current {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  font-style: italic;
}

.mine-vip-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.mine-vip-process__item {
  display: block;
  width: 100%;
}

.mine-vip-process__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10px;
  min-width: 150px;
  background-color: rgba(0, 0, 0, .1);

  max-width: 100%;
  margin: 0 auto;
  /* background: #fff; */
  border: 1px solid #e7a85a;
  border-radius: 40px;
  overflow: visible;
}

.mine-vip-process__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--mine-primary);
  border-radius: 3px;
  transition: width 0.2s;
  z-index: 0;
}

.mine-vip-process__label {
  position: relative;
  z-index: 1;
  padding: 0 4px;
  font-size: 0.65rem;
  color: #000;
  text-align: center;
}

.mine-vip-card__middle {
  position: relative;
  z-index: 1;
  flex: 0 0 8px;
}

.mine-vip-card__right {
  position: relative;
  z-index: 1;
  text-align: right;
  padding-right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.mine-vip-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px 4px;
}

.mine-vip-promo__text {
  font-size: 0.65rem;
  color: #000;
}

.mine-vip-promo__amount {
  font-size: 0.75rem;
  font-weight: 700;
  color: #000;
}

.mine-vip-req {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.mine-vip-req__row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.6rem;
  color: #000;
}

.mine-vip-req__label u {
  text-decoration: underline;
}

.mine-vip-req__amount {
  font-weight: 500;
}

.mine-vip-card__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--f168-text-dark);
  width: 1em;
  height: 1em;
}

.mine-vip-card__arrow svg {
  width: 100%;
  height: 100%;
}

/* 5. Menu list */
.mine-list {

  background: var(--mine-home-bg);

  overflow: hidden;
}

.mine-list__item {
  display: flex;
  align-items: center;
  padding: 12px 1rem;
  text-decoration: none;
  color: var(--mine-text);
  font-size: 14px;

  transition: background 0.15s;
  gap: 12px;
}

.mine-list__item:last-child {
  border-bottom: none;
}

.mine-list__item:hover,
.mine-list__item:focus {
  background: var(--mine-bg);
}

.mine-list__icon {
  width: 23px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mine-list__icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.mine-list__icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.mine-list__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mine-list__item>.mine-list__label {
  flex: 1;
  min-width: 0;
}

.mine-list__label {
  font-weight: 400;
}

.mine-list__desc {
  font-size: 0.75rem;
  color: var(--mine-text-secondary);
  line-height: 1.3;
}

.mine-list__tag {
  font-size: 0.8125rem;
  color: var(--mine-primary);
  font-weight: 500;
  flex-shrink: 0;
}

.mine-list__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 0.8rem;
  color: var(--mine-text-secondary);
  flex-shrink: 0;
  transform: scaleX(-1);
}

.mine-list__arrow svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .mine-page {
    max-width: 28rem;
    margin: 0 auto;
  }

  .mine-vip-card {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 2rem);
  }
}

/* ==========================================================================
   安全页面 – 独立的 class/id，改动不影响 mine-page
   ========================================================================== */
.sec-page {
  --sec-primary: var(--f168-accent);
  --sec-primary-dark: var(--f168-accent-secondary);
  --sec-bg: #f8f8f8;
  --sec-text: #000000;
  --sec-text-secondary: var(--f168-text-muted);
  --sec-border: #E3E3E3;
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 1rem;
}

.sec-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
}

.sec-topbar__back {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.sec-topbar__btn--back {
  transition: transform 0.2s ease;
}

.sec-topbar__btn--back:hover {
  transform: translateX(-2px);
}

.sec-topbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--sec-text-secondary);
  font-size: 1.35rem;
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

.sec-topbar__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--sec-text);
  flex: 1;
  text-align: center;
  line-height: 48px;
}

.sec-topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sec-topbar__right .sec-topbar__btn {
  font-size: 1.62rem;
  color: var(--sec-primary);
}

.sec-content {
  padding: 0.8rem;
}

/* 安全菜单 – 列表项类似 F168 */
.sec-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.sec-menu__list+.sec-menu__list {
  margin-top: 12px;
}

.sec-menu__item {
  position: relative;
  border-bottom: 1px solid var(--sec-border);
  min-height: 56px;
}

.sec-menu__list .sec-menu__item:last-child {
  border-bottom: none;
}

.sec-menu__item--disabled {
  padding: 0 5px;
  display: flex;
  align-items: center;
  min-height: 56px;
  gap: 2px;
}

.sec-menu__link {
  display: flex;
  align-items: center;
  padding: 0 5px;
  min-height: 56px;
  gap: 2px;
  color: var(--sec-text);
  text-decoration: none;
  transition: background 0.2s;
}

.sec-menu__link:hover {
  background: rgba(0, 0, 0, .03);
}

.sec-menu__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.sec-menu__icon--gray {
  color: #6b7280;
}

.sec-menu__icon--orange {
  color: var(--sec-primary);
}

.sec-menu__icon--blue {
  color: #3b82f6;
}

.sec-menu__icon--green {
  color: #22c55e;
}

.sec-menu__icon--red {
  color: #ef4444;
}

.sec-menu__label-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-menu__label-wrap--dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

.sec-menu__label {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--sec-text);
}

.sec-menu__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.sec-menu__suffix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #a8a8a8;
}

.sec-menu__suffix span {
  color: #a8a8a8;
}

.sec-menu__suffix span.sec-menu__suffix-text--set {
  color: var(--sec-primary);
}

.sec-menu__account {
  font-weight: 500;
  color: var(--sec-text);
}

.sec-menu__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--sec-primary);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 6px;
}

.sec-menu__copy:hover {
  background: rgba(252, 139, 0, .1);
}

.sec-menu__bind--unverify span {
  color: var(--f168-text-accent);
}

.sec-menu__arrow {
  font-size: 0.875rem;
  color: #9ca3af;
}

/* 设置提款密码 – 仅在 .sec-page--set-withdraw-code 下使用 */
.sec-page--set-withdraw-code .sec-content {
  padding: 0.8rem;
}

.sec-page--set-withdraw-code .sec-form__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  padding: 1rem 0.8rem;
}

.sec-page--set-withdraw-code .sec-form__tip {
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #22c55e;
}

.sec-page--set-withdraw-code .sec-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.sec-page--set-withdraw-code .sec-form__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--sec-text);
}

.sec-page--set-withdraw-code .sec-form__eye-wrap {
  flex-shrink: 0;
}

.sec-page--set-withdraw-code .sec-form__eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 6px;
}

.sec-page--set-withdraw-code .sec-form__eye:hover {
  color: var(--sec-text-secondary);
  background: rgba(0, 0, 0, .05);
}

.sec-page--set-withdraw-code .sec-form__password-wrap {
  margin-bottom: 1rem;
}

.sec-page--set-withdraw-code .sec-password-cells {
  display: flex;
  gap: 0;
  border: 1px solid var(--sec-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.sec-page--set-withdraw-code .sec-password-cell {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 2.75rem;
  border: none;
  border-right: 1px solid var(--sec-border);
  padding: 0;
  font-size: 1.25rem;
  text-align: center;
  color: var(--sec-text);
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.sec-page--set-withdraw-code .sec-password-cell:last-child {
  border-right: none;
}

.sec-page--set-withdraw-code .sec-password-cell:focus {
  outline: none;
  background: rgba(252, 139, 0, .06);
  box-shadow: inset 0 0 0 2px var(--sec-primary);
}

.sec-page--set-withdraw-code .sec-form__warn {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
}

.sec-page--set-withdraw-code .sec-form__warn-icon {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: #ef4444;
}

.sec-page--set-withdraw-code .sec-form__warn-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #ef4444;
}

.sec-page--set-withdraw-code .sec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: 10px;
  border: 1px solid var(--sec-border);
  background: #fff;
  color: var(--sec-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sec-page--set-withdraw-code .sec-btn--block {
  display: flex;
  width: 100%;
}

.sec-page--set-withdraw-code .sec-btn--default:hover {
  background: #f5f5f5;
  border-color: #d1d5db;
}

.sec-page--set-withdraw-code .sec-btn--primary {
  background: var(--sec-primary);
  border-color: var(--sec-primary);
  color: #fff;
}

.sec-page--set-withdraw-code .sec-btn--primary:hover {
  background: var(--sec-primary-dark);
  border-color: var(--sec-primary-dark);
  color: #fff;
}

/* 修改密码 – 结构与安全页面表单相同 */
.sec-page--change-password .sec-content {
  padding: 0.8rem;
}

.sec-page--change-password .sec-form__card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  padding: 1rem 0.8rem;
}

.sec-page--change-password .sec-form__row {
  margin-bottom: 0.5rem;
}

.sec-page--change-password .sec-form__label {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--sec-text);
}

.sec-page--change-password .sec-form__input-wrap {
  margin-bottom: 1rem;
}

/* Input group: prefix (lock) + input + suffix (eye) – F168 style */
.sec-page--change-password .sec-form__input-group {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2.75rem;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 10px;
  overflow: hidden;
}

.sec-page--change-password .sec-form__input-group:focus-within {
  background: #fff;
  border-color: var(--sec-primary);
  box-shadow: 0 0 0 2px rgba(252, 139, 0, 0.2);
}

.sec-page--change-password .sec-form__input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  flex-shrink: 0;
  color: #9ca3af;
  font-size: 1rem;
}

.sec-page--change-password .sec-form__input-group .sec-form__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 0.5rem;
  border: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.sec-page--change-password .sec-form__input-group .sec-form__input:focus {
  border: none;
  box-shadow: none;
}

.sec-page--change-password .sec-form__input-suffix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 0.5rem;
}

.sec-page--change-password .sec-form__eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  color: #6b7280;
  cursor: pointer;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}

.sec-page--change-password .sec-form__eye:hover {
  color: var(--sec-text);
}

.sec-page--change-password .sec-form__eye svg {
  width: 1.1em;
  height: 1.1em;
}

/* 密码强度 – 4 条 */
.sec-page--change-password .sec-form__strength {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sec-page--change-password .sec-form__strength-label {
  font-size: 0.875rem;
  color: var(--sec-text);
  flex-shrink: 0;
}

.sec-page--change-password .sec-form__strength-bars {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.sec-page--change-password .sec-form__strength-bar {
  flex: 1;
  height: 6px;
  min-width: 0;
  background: #e5e7eb;
  border-radius: 3px;
  transition: background 0.2s;
}

.sec-page--change-password .sec-form__strength-bar.is-filled {
  background: var(--sec-primary);
}

.sec-page--change-password .sec-form__input {
  display: block;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--sec-text);
  background: #fff;
  border: 1px solid var(--sec-border);
  border-radius: 10px;
  -webkit-appearance: none;
  appearance: none;
}

.sec-page--change-password .sec-form__input:focus {
  outline: none;
  border-color: var(--sec-primary);
  box-shadow: 0 0 0 2px rgba(252, 139, 0, 0.2);
}

.sec-page--change-password .sec-form__input::placeholder {
  color: #9ca3af;
}

.sec-page--change-password .sec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.9375rem;
  font-weight: 400;
  border-radius: 10px;
  border: 1px solid var(--sec-border);
  background: #fff;
  color: var(--sec-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.sec-page--change-password .sec-btn--block {
  display: flex;
  width: 100%;
}

.sec-page--change-password .sec-btn--primary {
  background: var(--sec-primary);
  border-color: var(--sec-primary);
  color: #fff;
}

.sec-page--change-password .sec-btn--primary:hover {
  background: var(--sec-primary-dark);
  border-color: var(--sec-primary-dark);
  color: #fff;
}

@media (min-width: 768px) {
  .sec-page {
    max-width: 28rem;
    margin: 0 auto;
  }
}

/* ==========================================================================
   页眉 F168 – 居中 Logo，左侧菜单图标，右侧 VIP 图标，背景 430×52
   ========================================================================== */
.header-f168 .header-f168__bar {
  position: relative;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header-f168__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.header-f168__container {
  position: relative;
  z-index: 1;
}

.header-f168__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 7px 0px;
}

.header-f168__section {
  display: flex;
  align-items: center;
}

.header-f168__section--left {
  flex: 1;
  justify-content: flex-start;
  min-width: 33px;
}

.header-f168__section--center {
  flex: 0 0 auto;
  justify-content: center;
}

.header-f168__section--right {
  flex: 1;
  justify-content: flex-end;
  min-width: 33px;
}

.header-f168__menu-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-f168__menu-icon,
.header-f168__vip-icon {
  display: block;
  width: 33px;
  height: 29px;
  object-fit: contain;
}

.header-f168__logo {
  display: flex;
  align-items: center;
  max-height: 36px;
}

.header-f168__logo img {
  max-width: 120px;
  max-height: 35px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.header-f168__vip {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* 在栏下方的折叠菜单 (navbar) */
.header-f168__collapse {
  position: relative;
  z-index: 1;
  background-color: rgba(7, 11, 40, 0.95);
}

@media (min-width: 1200px) {
  .header-f168__logo img {
    max-width: 240px;
    max-height: 42px;
  }
}

/* Copy Animation */
.base-color {
  color: hsl(var(--main)) !important;
}

.copyInput {
  display: inline-block;
  line-height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.copied::after {
  position: absolute;
  top: 8px;
  right: 12%;
  width: 100px;
  display: block;
  content: "COPIED";
  font-size: 1em;
  padding: 5px 5px;
  color: #fff;
  background-color: var(--f168-accent);
  border-radius: 3px;
  opacity: 0;
  will-change: opacity, transform;
  animation: showcopied 1.5s ease;
}

@keyframes showcopied {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }

  50% {
    opacity: 0.7;
    transform: translateX(40%);
  }

  70% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
  }
}

/* 移动优先：基础 = 移动端 (全宽，贴底) */
.cookies-card {
  width: 100%;
  padding: 15px;
  font-size: 14px;
  color: #fdfdfd;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999999;
  transition: all 0.5s;
  background: #261a0f;
  border-radius: 5px;
}

@media (min-width: 768px) {
  .cookies-card {
    width: 520px;
    padding: 30px;
    font-size: inherit;
    bottom: 15px;
    left: 15px;
    border-radius: 5px;
  }
}

.cookies-card.hide {
  bottom: -500px !important;
}

.radius--10px {
  border-radius: 10px;
}

.cookies-card__icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #6e6f70;
  color: #fff;
  font-size: 32px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.cookies-card__content {
  margin-bottom: 0;
}

.cookies-btn {
  color: #363636;
  text-decoration: none;
  padding: 10px 35px;
  margin: 3px 5px;
  display: inline-block;
  border-radius: 999px;
}

.cookies-btn:hover {
  color: #363636;
}


.hover-input-popup {
  position: relative;
}

.input-popup {
  display: none;
}

.hover-input-popup .input-popup {
  display: block;
  position: absolute;
  bottom: 130%;
  left: 50%;
  width: 280px;
  background-color: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.input-popup::after {
  position: absolute;
  content: "";
  bottom: -19px;
  left: 50%;
  margin-left: -5px;
  border-width: 10px 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #1a1a1a transparent;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.input-popup p {
  padding-left: 20px;
  position: relative;
}

.input-popup p::before {
  position: absolute;
  content: "";
  font-family: "Line Awesome Free";
  font-weight: 900;
  left: 0;
  top: 4px;
  line-height: 1;
  font-size: 18px;
}

.input-popup p.error {
  text-decoration: line-through;
}

.input-popup p.error::before {
  content: "\f057";
  color: #ea5455;
}

.input-popup p.success::before {
  content: "\f058";
  color: #28c76f;
}

/* 移动优先：手机端显示过滤按钮，隐藏过滤面板；768px及以上相反 */
.show-filter {
  display: block;
}

.responsive-filter-card {
  display: none;
  transition: none;
}

@media (min-width: 768px) {
  .show-filter {
    display: none;
  }

  .responsive-filter-card {
    display: block;
  }
}

/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
  border: 0 !important;
  margin-top: 8px !important;
  border-radius: 5px !important;
  box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05),
    6px 4px 19px rgb(115 103 240 / 20%);
}

.select2-search--dropdown {
  padding: 10px 10px !important;
  border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: #ced4da !important;
  padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
  padding: 12px 14px !important;
  border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
  text-align: center !important;
  padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
  background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
  position: absolute;
  right: 10px;
  top: 0;
  content: "\f107";
  font-family: "Line Awesome Free";
  font-weight: 900;
  transition: 0.3s;
}

.select2-container--default .select2-selection--single {
  border-color: #ced4da !important;
  border-width: 2px !important;
  border-radius: 0.375rem !important;
  padding: 0.375rem 0.75rem !important;
  height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 8px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
  transform: rotate(-180deg);
}

.select2-results__option:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #f1f1f1 !important;
  color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: #ed1569 !important;
  box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
  outline: 0 !important;
}

.select2-dropdown .country-flag {
  width: 25px;
  height: 25px;
  border-radius: 8px;
}

.select2-dropdown .gateway-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
  font-size: 12px;
  margin-bottom: 0px !important;
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
  border-color: hsl(var(--base)) !important;
  border-radius: 0.375rem !important;
}

.gateway-card {
  padding: 15px;
}

.payment-card-title {
  padding: 13px 25px;
  text-align: center;
  background-color: #ed1569;
  border-radius: 5px;
  border: 0;
  margin-bottom: 0px;
  color: #fff;
}

.payment-system-list {
  --thumb-width: 100px;
  --thumb-height: 40px;
  --radio-size: 12px;
  --border-color: #cccccf59;
  --hover-border-color: #ed1569;
  background-color: transparent;
  border-radius: 5px;
  height: 100%;
}

.payment-system-list.is-scrollable {
  max-height: min(388px, 70vh);
  overflow-x: auto;
  padding-block: 4px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
  width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
  background-color: #ed1569;
  border-radius: 10px;
}

.payment-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 18px;
  border: 1px solid #fff;
  border-top-color: var(--border-color);
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.payment-item:first-child {
  border-top-color: #fff;
  border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
  border-left: 3px solid var(--hover-border-color);
  border-radius: 0px;
}

.payment-item__check {
  border: 3px solid;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border: 3px solid #ed1569;
}

.payment-item__info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: calc(100% - var(--thumb-width));
}

.payment-item__check {
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid #ed1569;
  display: inline-block;
  border-radius: 100%;
}

.payment-item__name {
  padding-left: 10px;
  width: calc(100% - var(--radio-size));
  transition: all 0.3s;
}

.payment-item__thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  text-align: right;
  padding-left: 10px;

  &:has(.text) {
    width: fit-content;
  }
}

.payment-item__thumb img {
  max-width: var(--thumb-width);
  max-height: var(--thumb-height);
  object-fit: cover;
  border-radius: 5px;
}

.deposit-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.deposit-info__title {
  max-width: 50%;
  margin-bottom: 0px;
  text-align: left;
}

.deposit-info__input {
  max-width: 50%;
  text-align: right;
  width: 100%;
}

.deposit-info__input-select {
  border: 1px solid var(--border-color);
  width: 100%;
  border-radius: 5px;
  padding-block: 6px;
}

.deposit-info__input-group {
  border: 1px solid var(--border-color);
  border-radius: 5px;

  .deposit-info__input-group-text {
    align-self: center;
    padding-left: 5px;
  }
}

.deposit-info__input-group .form--control {
  padding: 5px;
  border: 0;
  height: 35px;
  text-align: right;
  background: unset;
}

.deposit-info__input-group .form--control:focus {
  box-shadow: unset;
  border: none;
  background: unset;
}

.info-text .text,
.deposit-info__input .text {
  font-size: 14px;
}

.deposit-info__title .text.has-icon {
  display: flex;
  align-items: center;
  gap: 5px;
}

.total-amount {
  border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
  font-weight: 500;
}

.payment-item__btn {
  border: 0;
  border-block: 1px solid var(--border-color);
  border-bottom: 0;
  background: transparent;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  font-weight: 500;
}

.payment-item:hover+.payment-item__btn {
  border-top-color: #fff;
}

.payment-item__btn p,
span {
  color: #1e1c1c;
}

button .spinner-border {
  --bs-spinner-width: 1.5rem;
  --bs-spinner-height: 1.5rem;
}

label.required:after {
  content: "*";
  color: #dc3545 !important;
  margin-left: 2px;
}

.header .nav-right a {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 10px;
  border-radius: 4px;
}

.btn--dark:hover {
  color: #363636 !important;
  background-color: #ea5455 !important;
  box-shadow: 0 0 10px 2px #ea54558c !important;
}

/* ========== 存款弹窗 (存款) - F168 示例 ========== */
/* 顶端留空3倍 (大 padding-top)，底部贴紧 (bottom sheet) */
.deposit-popup-overlay {
  --dpop-primary: var(--f168-accent);
  --dpop-primary-dark: var(--f168-accent-secondary);
  --dpop-bg: #fff;
  --dpop-border: #e8e8e8;
  --dpop-text: var(--f168-text-dark);
  --dpop-text-muted: var(--f168-text-muted);
  --dpop-radius: 14px;
  --dpop-top-gap: 36px;
  /* 顶部空出3倍 (12px * 3) */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 0 0;
  padding-top: var(--dpop-top-gap);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.deposit-popup-overlay[data-hidden="0"] {
  opacity: 1;
  visibility: visible;
}

.deposit-popup-overlay[data-hidden="0"] .deposit-popup {
  display: flex;
  flex-direction: column;
  animation: depositPopupSlideUp 0.3s ease;
}

@keyframes depositPopupSlideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.deposit-popup {
  width: 100%;
  max-width: 522px;
  max-height: calc(100vh - var(--dpop-top-gap));
  overflow: hidden;
  display: none;
  flex-direction: column;
  background: var(--dpop-bg);
  border-radius: var(--dpop-radius) var(--dpop-radius) 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}

.deposit-popup__content {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* 页眉 + 余额列 + 标签 固定在顶部，不滚动 */
.deposit-popup__header,
.deposit-popup__balance-row,
.deposit-popup__tabs {
  flex-shrink: 0;
}

/* 余额行：左侧“支付方式” + 右侧余额组 (胶囊样式，参考 F168) */
.deposit-popup__balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dpop-border);
  background: var(--dpop-bg);
  gap: 12px;
}

.deposit-popup__balance-row-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dpop-text);
  flex-shrink: 0;
}

.deposit-popup__currency-info-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 2px 6px;
  background: #fff;
  border: 1px solid rgba(245, 166, 35, 0.45);
  border-radius: 25px;
  min-width: 0;
}

.deposit-popup__currency-icon-wrap {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.15);
}

.deposit-popup__currency-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.deposit-popup__currency-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.deposit-popup__currency-count {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--dpop-primary);
  border-bottom: 1px solid rgba(245, 166, 35, 0.6);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.deposit-popup__currency-refresh {
  background: none;
  border: none;
  color: var(--dpop-primary);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.deposit-popup__currency-refresh i {
  font-size: 1.1rem;
}

.deposit-popup__currency-refresh:hover {
  transform: rotate(180deg);
}

.deposit-popup__currency-refresh i.la-spin {
  animation: deposit-popup-spin 0.8s linear infinite;
}

@keyframes deposit-popup-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 仅下方部分（支付方式、优惠、金额、页脚）可滚动 */
.deposit-popup__inner {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.deposit-popup__inner::-webkit-scrollbar {
  display: none;
}

/* Header */
.deposit-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 0px solid var(--dpop-border);
  background: var(--dpop-bg);
  flex-shrink: 0;
}

.deposit-popup__back {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--dpop-text);
  font-size: 2.8rem;
  cursor: pointer;
  padding: 0;
}

.deposit-popup__back i,
.deposit-popup__back .las {
  font-size: 2.8rem !important;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: left;
}

.deposit-popup__back i::before,
.deposit-popup__back .las::before {
  font-size: 0.5em;
}

.deposit-popup__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--dpop-text);
}

.deposit-popup__header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deposit-popup__header-icon {
  color: var(--dpop-text-muted);
  font-size: 1.2rem;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.deposit-popup__header-icon--svg {
  color: var(--dpop-primary);
  font-size: 1.4rem;
}

.deposit-popup__header-icon--svg svg {
  width: 1em;
  height: 1em;
  display: block;
}

.deposit-popup__balance {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--dpop-text);
}

.deposit-popup__balance-star {
  color: var(--dpop-primary);
}

.deposit-popup__balance-refresh {
  border: 0;
  background: transparent;
  color: var(--dpop-primary);
  padding: 2px;
  cursor: pointer;
  font-size: 0.95rem;
}

.deposit-popup__gift-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, var(--f168-accent-14), #fff);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: var(--dpop-text);
}

.deposit-popup__gift-badge-text {
  color: #ea4e3d;
  font-weight: 700;
}

/* Tabs */
.deposit-popup__tabs {
  padding: 20px 16px 0px;
  border-bottom: 1px solid var(--dpop-border);
}

.deposit-popup__tab-list {
  display: flex;
  gap: 0;
}

.deposit-popup__tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  border: 0;
  background: transparent;
  font-size: 0.9rem;
  color: var(--dpop-text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.deposit-popup__tab-badge {
  position: absolute;
  top: -0.6rem;
  right: 30px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.deposit-popup__tab-badge__gift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: -4px;
  position: relative;
  z-index: 2;
}

.deposit-popup__tab-badge__gift img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}

.deposit-popup__tab-badge--on-method {
  top: -12px;
  right: 6px;
}

.deposit-popup__tab-badge__content {
  display: inline-flex;
  align-items: center;
  padding: 0px 5px;
  border-radius: 999px;
  background-color: var(--f168-accent);
  font-size: 0.75rem;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}

.deposit-popup__tab i {
  font-size: 1.1rem;
}

.deposit-popup__tab .deposit-popup__tab-icon {
  font-size: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-accent);
}

.deposit-popup__tab .deposit-popup__tab-icon svg {
  width: 1em;
  height: 1em;
}

.deposit-popup__tab--active {
  font-weight: 500;
  border-bottom-color: var(--dpop-primary);
}

.deposit-popup__tab--active>span:last-child {
  color: var(--f168-text-accent);
}

/* Section */
.deposit-popup__section {
  padding: 14px 16px;
}

.deposit-popup__section-title {
  margin: 0 0 10px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dpop-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.deposit-popup__section-title i {
  color: var(--dpop-primary);
}

/* Payment methods grid */
.deposit-popup__methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.deposit-popup__methods--main {
  margin-bottom: 0;
}

.deposit-popup__sub-methods {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e0e0e0;
}

.deposit-popup__sub-methods-panel.d-none {
  display: none !important;
}

.deposit-popup__methods--sub {
  grid-template-columns: repeat(3, 1fr);
}

.deposit-popup__method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--dpop-border);
  border-radius: 8px;
  background: var(--dpop-bg);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  position: relative;
  min-height: 45px;
}

.deposit-popup__methods--main .deposit-popup__method {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 0px 10px;
  text-align: left;
}

.deposit-popup__methods--main .deposit-popup__method-icon {
  flex-shrink: 0;
}

.deposit-popup__methods--main .deposit-popup__method-name {
  flex: 1;
  text-align: center;
}

.deposit-popup__method:hover {
  background: #f9f9f9;
  border-color: var(--dpop-primary);
}

.deposit-popup__method--active {
  background: rgba(245, 166, 35, 0.1);
  border-color: var(--dpop-primary);
  color: var(--dpop-primary);
}

.deposit-popup__method-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--dpop-text-muted);
}

.deposit-popup__method-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.deposit-popup__method-icon--orange {
  color: var(--dpop-primary);
}

.deposit-popup__method-icon--blue {
  color: #4A90D9;
}

.deposit-popup__method-icon--momo,
.deposit-popup__method-icon--zalo,
.deposit-popup__method-icon--viettel {
  font-size: 0.75rem;
  font-weight: 700;
}

.deposit-popup__method-icon--momo {
  color: #ae2070;
}

.deposit-popup__method-icon--zalo {
  color: #0068ff;
}

.deposit-popup__method-icon--viettel {
  color: #ed1c24;
}

.deposit-popup__method-icon--usdt {
  color: #26a17b;
  font-weight: 700;
  font-size: 1.1rem;
}

.deposit-popup__method-icon--btc {
  color: var(--f168-text-accent);
  font-weight: 700;
}

.deposit-popup__method-icon--eth {
  color: #627eea;
  font-weight: 700;
  font-size: 1.05rem;
}

.deposit-popup__method-icon--usdc {
  color: #2775ca;
  font-weight: 700;
  font-size: 1.1rem;
}

.deposit-popup__method-badge--red .deposit-popup__tab-badge__content {
  background-color: #dc2626;
}

.deposit-popup__method-badge--green .deposit-popup__tab-badge__content {
  background-color: #16a34a;
}

.deposit-popup__method-name {
  font-size: 0.8rem;
  color: var(--dpop-text);
  text-align: center;
  line-height: 1.2;
}

.deposit-popup__method--active .deposit-popup__method-name {
  color: var(--dpop-primary);
  font-weight: 400;
}

.deposit-popup__method--badge {
  padding-top: 18px;
}

.deposit-popup__method-badge {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.6rem;
  color: #fff;
  background: #ea4e3d;
  padding: 2px 6px;
  border-radius: 4px;
}

.deposit-popup__methods--crypto .deposit-popup__method {
  position: relative;
}

/* 优惠 (F168样式) */
.deposit-popup__offers {
  background: var(--f168-accent-12);
  border-radius: var(--dpop-radius);
  padding: 12px 2px;
}

.deposit-popup__offers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.deposit-popup__offers-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.deposit-popup__offers-title-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.deposit-popup__offers-title-text {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dpop-text);
}

.deposit-popup__offer-list-wrap {
  overflow-y: auto;
}

.deposit-popup__offer-list-wrap--collapsed {
  max-height: 196px;
  overflow: hidden;
}

.deposit-popup__offer-list-wrap--collapsed .deposit-popup__offer-item:nth-child(n+5) {
  display: none;
}

.deposit-popup__offer-list-wrap:not(.deposit-popup__offer-list-wrap--collapsed) {
  max-height: 320px;
}

.deposit-popup__offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.deposit-popup__offer-item {
  margin-bottom: 5px;
  border-radius: 6px;
  overflow: hidden;
}

.deposit-popup__offer-item--selected {
  background: rgba(255, 170, 9, 0.08);
}

.deposit-popup__offer-item--disabled {
  opacity: 0.45;
}

.deposit-popup__offer-item--disabled .deposit-popup__offer-row {
  cursor: not-allowed;
}

.deposit-popup__offer-item--disabled .deposit-popup__offer-check,
.deposit-popup__offer-item--disabled .deposit-popup__offer-radio,
.deposit-popup__offer-item--disabled .deposit-popup__offer-check-ui {
  pointer-events: none;
}

.deposit-popup__offer-row {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 0;
  min-height: 44px;
  cursor: pointer;
}

.deposit-popup__offer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  position: relative;
  padding-left: 4px;
}

.deposit-popup__offer-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--f168-accent);
  border-radius: 0 2px 2px 0;
}

.deposit-popup__offer-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.deposit-popup__offer-label-txt,
.deposit-popup__offer-give {
  font-size: 0.7rem;
  color: var(--dpop-text);
}

.deposit-popup__offer-left-txt {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.deposit-popup__offer-currency {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--f168-text-accent);
}

.deposit-popup__offer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.deposit-popup__offer-condition {
  font-size: 0.7rem;
  color: var(--dpop-text-muted);
  text-align: right;
}

.deposit-popup__offer-min {
  font-weight: 600;
  color: var(--dpop-text);
}

.deposit-popup__offer-check {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.deposit-popup__offer-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.deposit-popup__offer-check-ui {
  width: 22px;
  height: 22px;
  border: 2px solid var(--dpop-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: border-color 0.2s, background 0.2s;
}

.deposit-popup__offer-check-ui svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.deposit-popup__offer-radio:checked+.deposit-popup__offer-check-ui {
  border-color: var(--dpop-primary);
  background: var(--dpop-primary);
}

.deposit-popup__offer-radio:checked+.deposit-popup__offer-check-ui svg {
  opacity: 1;
}

.deposit-popup__more {
  margin-top: 0;
  padding: 10px 0 4px;
  border: 0;
  background: transparent;
  color: var(--dpop-primary);
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  position: relative;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.deposit-popup__more-icon {
  transition: transform 0.2s;
}

.deposit-popup__more[aria-expanded="true"] .deposit-popup__more-icon {
  transform: rotate(180deg);
}

/* Amount */
.deposit-popup__amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.deposit-popup__amount-btn {
  padding: 10px 8px;
  border: 1px solid var(--dpop-border);
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 0.85rem;
  color: var(--dpop-text);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.deposit-popup__amount-btn:hover,
.deposit-popup__amount-btn:focus {
  background: rgba(245, 166, 35, 0.15);
  border-color: var(--dpop-primary);
}

.deposit-popup__amount-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--dpop-border);
  border-radius: var(--dpop-radius);
  background: #f5f5f5;
  padding: 10px 14px;
  margin-bottom: 6px;
}

.deposit-popup__amount-input-icon {
  color: var(--dpop-primary);
  font-size: 1.2rem;
  margin-right: 10px;
}

.deposit-popup__amount-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
  outline: none;
}

.deposit-popup__amount-input::placeholder {
  color: var(--dpop-text-muted);
}

.deposit-popup__amount-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--dpop-text-muted);
}

.deposit-popup__amount-rate-label {
  color: var(--dpop-text-muted);
}

.deposit-popup__amount-rate-value {
  font-weight: 600;
  color: var(--dpop-text);
}

/* 页脚 CTA - 与内容一同正常滚动 */
.deposit-popup__footer {
  padding: 0px;
  flex-shrink: 0;
}

.deposit-popup__cta {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--dpop-radius);
  background: var(--dpop-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
  border: 0;
  cursor: pointer;
}

.deposit-popup__cta:hover {
  background: var(--dpop-primary-dark);
  color: #fff;
}

.deposit-popup__cta--loading,
.deposit-popup__cta[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.75;
  cursor: wait;
}

/* Marquee / Announcement section */
.announce-wrap {
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  padding: 0px 10px 0px 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  margin: 0;
}

.ann-icon {
  max-width: 24px;
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ann-icon i {
  font-size: 18px;
}

.ann-icon-img {
  max-width: 22px;
  height: auto;
}

.ann-bar {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  height: 20px;
  /* Adjust based on font size + line height */
}

.ann-bar-inner {
  position: absolute;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  padding: 0;
  top: 0;
  animation: marquee 15s linear infinite;
}

@keyframes marquee {
  0% {
    left: 100%;
    transform: translateX(0);
  }

  100% {
    left: 0%;
    transform: translateX(-100%);
  }
}

/* 右侧区块：通知背景 172x38 + 文本 + 红点 */
.ann-right {
  flex-shrink: 0;
  width: 80px;
  height: auto;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-left: 10px;
  cursor: pointer;
  right: -5px;
}

.ann-right-text {
  color: var(--f168-text-accent);
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 48px;
}

.ann-right-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ea4e3d;
  display: block;
}

/* ============================================
   User Section
   ============================================ */
.user-section {
  padding: 0;
}

/* 移动优先：基础 = 移动端 (更小的 gap/padding) */
.user-section__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0px;
}

/* --- LEFT: Guest buttons --- */
.user-section__guest-btns {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.user-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s;
  white-space: nowrap;
}

.user-section__btn--login {
  background: transparent;
  color: hsl(var(--main));
  border: 1px solid hsl(var(--main));
}

.user-section__btn--login:hover {
  background: hsl(var(--main));
  color: #fff;
}

.user-section__btn--register {
  background: hsl(var(--main));
  color: #fff;
  border: 1px solid hsl(var(--main));
}

.user-section__btn--register:hover {
  opacity: 0.85;
  color: #fff;
}

/* --- LEFT: Authenticated user --- */
.user-section__auth {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}

.user-section__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.user-section__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-section__info {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
}

.user-section__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-section__vip {
  flex-shrink: 0;
}

.user-section__vip-badge {
  position: relative;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-section__vip-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.user-section__vip-level {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 2px #000, 0 1px 3px #000, 0 0 4px rgba(0, 0, 0, 0.8);
  line-height: 1;
}

.user-section__vip-level span {
  color: #ffffff;
  transform: scale(var(--vip-level-scale, 1));
  font-size: 15px;
}

.user-section__username {
  font-size: 13px;
  font-weight: 400;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  text-decoration: none;
}

.user-section__username:hover {
  color: #000000;
  text-decoration: underline;
}

.user-section__copy-btn {
  background: none;
  border: none;
  color: hsl(var(--main));
  cursor: pointer;
  padding: 0;
  font-size: 32px;
  line-height: 1;
  transition: opacity 0.2s;
}

.user-section__copy-btn i {
  font-size: 18px !important;
}

.user-section__copy-btn:hover {
  opacity: 0.7;
}

.user-section__balance-row {
  display: flex;
  align-items: center;
}

.user-section__currency-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px 2px 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border-radius: 25px;
  border: 1px solid #e3e3e3;

}

.user-section__currency-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  object-fit: contain;
}

.user-section__currency-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.user-section__balance {
  font-size: 14px;
  font-weight: 500;
  color: var(--f168-text-muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
  border-bottom: 0.1rem solid var(--f168-text-muted);
}

.user-section__refresh-btn {
  background: none;
  border: none;
  color: hsl(var(--main));
  cursor: pointer;
  padding: 2px;
  font-size: 32px;
  line-height: 1;
  transition: transform 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-section__refresh-btn i {
  font-size: 19px !important;
}

.user-section__refresh-btn:hover {
  transform: rotate(180deg);
}

.user-section__refresh-btn i.la-spin {
  animation: user-section-spin 0.8s linear infinite;
}

@keyframes user-section-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* --- RIGHT: Nav items --- */
.user-section__right {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.user-section__right::-webkit-scrollbar {
  display: none;
}

.user-section__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
  min-width: 48px;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.user-section__nav-item:hover {
  opacity: 0.8;
  color: #fff;
}

.user-section__nav-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-section__nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.user-section__nav-icon i {
  font-size: 32px;
  color: hsl(var(--main));
}

.user-section__nav-title {
  margin-top: 4px;
  font-size: 11.5px;
  text-align: center;
  line-height: 1.2;
  color: var(--f168-text-dark);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 576px) {
  .user-section__wrap {
    gap: 1rem;
    padding: 12px 16px;
  }

  .user-section__btn {
    min-width: 100px;
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
  }

  .user-section__username {
    max-width: 120px;
  }

  .user-section__nav-item {
    min-width: 56px;
    max-width: 70px;
  }

  .user-section__nav-icon {
    width: 44px;
    height: 44px;
  }

  .user-section__nav-title {
    font-size: 11px;
  }
}

/* ============================================
   Footbox1 - 2 个等宽列（左：频道图标，右：图片）
   ============================================ */
.footbox1 {
  padding: 1rem 0;
}

/* 移动优先：基础 = 手机端（较小的间距/内边距/字体/图标） */
.footbox1__wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.footbox1__item {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex: 1;
  min-width: 0;
}

.footbox1__item--right {
  padding-left: 0.5rem;
}

.footbox1__title {
  font-weight: 700;
  font-size: 0.75rem;
  margin: 0 0 0.25rem;
  color: #fff;
}

.footbox1__channel-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footbox1__channel-item {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.footbox1__channel-item a,
.footbox1__channel-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footbox1__channel-item a {
  text-decoration: none;
}

.footbox1__right-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.footbox1__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

@media (min-width: 576px) {
  .footbox1__wrap {
    gap: 1rem;
  }

  .footbox1__item--right {
    padding-left: 1rem;
  }

  .footbox1__title {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
  }

  .footbox1__channel-list {
    gap: 0.5rem 0.75rem;
  }

  .footbox1__channel-item {
    width: 36px;
    height: 36px;
  }
}

/* ============================================
   Footbox2 - 两个等宽列，每列：标题 + 1张图片
   ============================================ */
.footbox2 {
  padding: 0 0 1rem;
}

/* Mobile first: base = mobile */
.footbox2__wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.footbox2__item {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex: 1;
  min-width: 0;
}

.footbox2__item--right {
  padding-left: 0.5rem;
}

.footbox2__title {
  font-weight: 700;
  font-size: 0.75rem;
  margin: 0 0 0.25rem;
  color: #fff;
}

.footbox2__img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.footbox2__item--left .footbox2__img {
  max-width: 100%;
}

.footbox2__item--right .footbox2__img {
  width: 70%;
}

@media (min-width: 576px) {
  .footbox2__wrap {
    gap: 1rem;
  }

  .footbox2__item--right {
    padding-left: 1rem;
  }

  .footbox2__title {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
  }
}

/* Footer Fix - Bottom bar (all screen sizes) */
.footer-fix-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1020;
  background: var(--section-bg, #0f0d0a);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: block;
}

/* 底部留空防止 footbox1 / 页脚被系统固定操作栏覆盖 */
.page-wrapper {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* 没有底部操作栏的页面 (如 cat-slot)：去掉底部留白 */
.page-wrapper-no-footer-bar {
  padding-bottom: 0;
}

/* ---------- 活动 / 优惠页面 (F168：顶部主内容，左侧次级导航) ---------- */
.event-page {
  min-height: 100vh;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-page__wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ========== 用户提款页 (类似活动页头的3个选项卡) ========== */
.withdraw-page {
  min-height: 100vh;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.withdraw-page__wrap {
  --mine-primary: var(--f168-accent);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.withdraw-page__wrap .event-header__section--right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.withdraw-page__wrap .event-header__back:hover {
  color: var(--mine-primary);
}

/* 提款页面的客服按钮 */
.withdraw-page__wrap .event-header__section--right .mine-topbar__btn {
  color: var(--mine-primary);
  font-size: 2rem;
  /* 比 1.62rem 增加 50% */
}

.withdraw-page__wrap .event-header__section--right .mine-topbar__btn:hover {
  opacity: 0.9;
  color: var(--mine-primary);
}

/* a标签样式的标签: 与活动页的 .event-tab 按钮相同 */
.withdraw-page__wrap .event-tabs-row--main a.event-tab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
}

.withdraw-page__wrap .event-tabs-row--main a.event-tab:link,
.withdraw-page__wrap .event-tabs-row--main a.event-tab:visited {
  color: var(--skin__neutral_2, var(--f168-text-muted));
}

.withdraw-page__wrap .event-tabs-row--main a.event-tab:hover {
  color: var(--skin__lead, var(--f168-text-dark));
}

.withdraw-page__wrap .event-tabs-row--main a.event-tab.active,
.withdraw-page__wrap .event-tabs-row--main a.event-tab.active:link,
.withdraw-page__wrap .event-tabs-row--main a.event-tab.active:visited,
.report-page__wrap .event-tabs-row--main a.event-tab.active,
.report-page__wrap .event-tabs-row--main a.event-tab.active:link,
.report-page__wrap .event-tabs-row--main a.event-tab.active:visited {
  color: var(--mine-primary);
  font-weight: 400;
  border-bottom: 2px solid var(--mine-primary);
  margin-bottom: -1px;
}

.withdraw-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1rem 1.5rem;
}

.withdraw-panel {
  max-width: 480px;
  margin: 0 auto;
}

.withdraw-balance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.withdraw-balance__label {
  color: var(--f168-text-muted);
  font-size: 0.9375rem;
}

.withdraw-balance__value {
  color: var(--mine-primary);
  font-weight: 500;
  font-size: 1.rem;
}

.withdraw-balance__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mine-primary);
  margin-left: 0.25rem;
  font-size: 1.3em;
  /* 大小增加 30% */
}

.withdraw-balance__refresh:hover {
  opacity: 0.9;
}

.withdraw-method-type {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.withdraw-method-type__btn {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: var(--f168-text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.withdraw-method-type__btn:hover {
  border-color: #ccc;
  color: var(--f168-text-dark);
}

.withdraw-method-type__btn.active {
  border-color: var(--mine-primary);
  color: var(--mine-primary);
}

/* 两个独立的白色区块 (参考 lobby-form-item + 图像) */
.withdraw-form-item {
  margin-bottom: 0.75rem;
}

.withdraw-form-item--amount .withdraw-account-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  box-sizing: border-box;
}

.withdraw-add-account-btn {
  font: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  background: #fff;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 1px solid #e8e8e8;
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}

.withdraw-add-account-btn:hover {
  background: #fafafa;
  border-color: #e0e0e0;
}

.withdraw-add-account-btn__left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.withdraw-add-account-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mine-primary);
  font-size: 2em;
  /* icon x2 */
}

.withdraw-add-account-btn__text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--f168-text-muted);
}

.withdraw-add-account-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #b0b0b0;
  font-size: 1em;
  /* icon x2 */
}

.withdraw-account-input-wrap {
  color: #999;
  font-size: 0.875rem;
  text-decoration: none;
}

.withdraw-account-input-wrap:hover {
  color: #999;
}

.withdraw-account-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 0.875rem;
  color: #999;
  pointer-events: none;
}

.withdraw-form-item--amount .withdraw-account-block__methods {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.withdraw-account-block__methods {
  padding: 0;
}

.withdraw-method-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.withdraw-method-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
}

.withdraw-method-item:hover,
.withdraw-method-item:has(.withdraw-method-item__input:checked) {
  background: #f9f9f9;
  border-color: #eee;
}

.withdraw-method-item__input {
  margin: 0;
}

.withdraw-method-item__name {
  font-size: 0.875rem;
}

.withdraw-amount-row__label {
  display: block;
  font-size: 0.875rem;
  color: var(--f168-text-muted);
  margin-bottom: 0.35rem;
}

.withdraw-amount-row__input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.withdraw-amount-row__sym {
  padding: 0.5rem 0.75rem;
  background: #f5f5f5;
  color: var(--f168-text-muted);
  font-size: 0.875rem;
}

.withdraw-amount-row__input {
  flex: 1;
  border: none;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  min-width: 0;
}

.withdraw-amount-row__limit {
  margin-top: 0.35rem;
}

.withdraw-actions {
  display: flex;
  gap: 0.75rem;
}

.withdraw-actions__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  font-size: 0.9375rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s;
}

.withdraw-actions__btn--earn {
  background: #fff;
  border: 1px solid var(--mine-primary);
  color: var(--mine-primary);
}

.withdraw-actions__btn--earn:hover {
  opacity: 0.9;
}

.withdraw-actions__badge {
  position: absolute;
  top: -1em;
  left: 0;
  background: #e74c3c;
  color: #fff;
  font-size: 0.6875rem;
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
}

.withdraw-actions__btn--confirm {
  background: #e0e0e0;
  color: #fff;
  cursor: not-allowed;
}

.withdraw-actions__btn--confirm:not(:disabled) {
  background: var(--mine-primary);
  cursor: pointer;
}

.withdraw-actions__btn--confirm:not(:disabled):hover {
  opacity: 0.9;
}

/* F168 提款表单（已绑定银行卡时） – 0_WithdrawChunk */
._form_wkump_45 {
  padding: 0.5rem 0 0;
}

._account-select-gap_13crb_45 {
  margin-top: 0.25rem;
}

._accountSelectWrapper_13crb_49 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

._accountSelectWrapper_13crb_49>.withdraw-account-select-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

._accountSelectWrapper_13crb_49 .ui-select__reference--large.ui-select-single {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--skin__border, #e8e8e8);
  border-radius: 0.35rem;
  background: var(--skin__bg_2, #fff);
}

._accountSelectWrapper_13crb_49 .ui-select-single__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  color: var(--skin__lead, var(--f168-text-dark));
}

._accountSelectWrapper_13crb_49 .ui-select-single__suffix {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--skin__neutral_2, #999);
}

._accountSelectWrapper_13crb_49>._accountIcon_13crb_62 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

._accountSelectWrapper_13crb_49 ._icon_13crb_65 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mine-primary);
  font-size: 1.25rem;
}

._accountSelectWrapper_13crb_49 ._accountOption_13crb_74 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}

._accountSelectWrapper_13crb_49 ._logo_13crb_95 {
  width: 2rem;
  height: 2rem;
  border-radius: 0.35rem;
  object-fit: contain;
  flex-shrink: 0;
}

._accountSelectWrapper_13crb_49 ._name_13crb_74 {
  font-weight: 600;
  color: var(--skin__lead, var(--f168-text-dark));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 8rem;
}

._accountSelectWrapper_13crb_49 ._accountOption_13crb_74 span[dir="ltr"] {
  color: var(--skin__neutral_2, var(--f168-text-muted));
  font-size: 0.875rem;
}

._amountInputWrapper_1t1kf_45 {
  margin-top: 0.75rem;
}

._amountInputWrapper_1t1kf_45 ._inputWrapper_1t1kf_45 {
  width: 100%;
  position: relative;
}

.withdraw-amount-f168 {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--skin__border, #e8e8e8);
  border-radius: 0.35rem;
  background: var(--skin__bg_2, #fff);
  min-height: 2.75rem;
  padding: 0 0.5rem;
}

.withdraw-amount-f168 ._prefix_1t1kf_61 {
  color: var(--skin__lead, var(--f168-text-dark));
  font-size: 0.9375rem;
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.withdraw-amount-f168 .amount-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.withdraw-amount-f168 .amount-input::placeholder {
  font-weight: 400;
  color: var(--skin__neutral_2, #999);
}

.withdraw-amount-f168 ._allAmount_1t1kf_55 {
  color: var(--mine-primary);
  background: none;
  border: none;
  padding: 0.35rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  flex-shrink: 0;
}

._exchangeDetails_wkump_63 {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--skin__lead, var(--f168-text-dark));
}

._bindAccountSplitLine_wkump_73 {
  height: 1px;
  background: var(--skin__border, #e8e8e8);
  margin: 0.75rem 0;
}

._withdrawalPwdBox_ant3d_45 {
  width: 100%;
  margin-bottom: 0.5rem;
}

._withdrawalPwdBox_ant3d_45 ._label_ant3d_48 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

._withdrawalPwdBox_ant3d_45 ._text_ant3d_54 {
  color: var(--skin__lead, var(--f168-text-dark));
  font-size: 0.9375rem;
}

._withdrawalPwdBox_ant3d_45 .withdraw-pwd-toggle {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: var(--skin__neutral_2, var(--f168-text-muted));
  display: inline-flex;
}

.withdraw-pwd-cells-wrap {
  margin-top: 0.25rem;
}

.withdraw-pwd-cells-wrap .withdraw-pwd-cells {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 1px solid var(--skin__border, #e8e8e8);
  border-radius: 0.35rem;
  overflow: hidden;
  background: var(--skin__bg_2, #fff);
}

.withdraw-pwd-cells-wrap .ui-password-input__item {
  flex: 1;
  min-width: 0;
  border: none;
  border-right: 1px solid var(--skin__border, #e8e8e8);
  margin: 0;
  padding: 0;
}

.withdraw-pwd-cells-wrap .ui-password-input__item:last-child {
  border-right: none;
}

.withdraw-pwd-cells-wrap .withdraw-pwd-cell {
  width: 100%;
  height: 2.75rem;
  border: none;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0;
  background: none;
}

._kindTips_wkump_78 {
  color: var(--skin__lead, var(--f168-text-dark));
  font-size: 0.875rem;
  word-wrap: break-word;
  margin-bottom: 0.75rem;
}

._kindTips_wkump_78 span:first-child {
  font-weight: 600;
  margin-right: 0.25rem;
}

._btnGroup_wkump_83 {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

._btnGroup_wkump_83 ._interest_wkump_95 {
  flex: 1;
  position: relative;
}

._btnGroup_wkump_83 ._apply-withdraw-form-btn_wkump_125 {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 0.35rem;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  background: #e0e0e0;
  color: #fff;
}

._btnGroup_wkump_83 ._apply-withdraw-form-btn_wkump_125:not(:disabled) {
  background: var(--mine-primary);
}

._btnGroup_wkump_83 ._apply-withdraw-form-btn_wkump_125:not(:disabled):hover {
  opacity: 0.9;
}

/* 收款账户面板 (withdraw#accounts) – 参照 F168 _bindAccount 样式 */
.withdraw-accounts-wrap {
  padding: 0;
  --skin__filter_active: var(--mine-primary, var(--f168-accent));
  --skin__web_filter_gou: #fff;
  --skin__border: #e8e8e8;
  --skin__lead: var(--f168-text-dark);
  --skin__neutral_2: var(--f168-text-muted);
  --skin__bg_2: #fff;
}

.withdraw-accounts-title {
  margin-bottom: 1rem;
}

.withdraw-accounts-title__left {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--f168-text-dark);
}

.withdraw-accounts-title__count {
  color: var(--f168-text-muted);
  font-weight: 400;
}

.withdraw-accounts-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--mine-primary);
  cursor: pointer;
  font-size: 1.3em;
}

.withdraw-accounts-refresh:hover {
  opacity: 0.9;
}

/* 收款账户列表 (F168 ReceiveAccount) – 用户已有银行账户时显示 */
._accountList_1aae1_81 {
  margin-bottom: 1rem;
}

._cell_1arji_45 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--skin__border);
  border-radius: 0.35rem;
  padding: 0.5rem 0.75rem 0.4rem;
  margin-top: 0.5rem;
  min-height: 3.25rem;
  background: var(--skin__bg_2);
}

._cell_1arji_45._defAccount_1arji_55 {
  border-color: var(--skin__filter_active);
  position: relative;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 {
  position: absolute;
  height: 1.25rem;
  width: 1.25rem;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._corner-bg_1arji_74 {
  position: absolute;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: 0;
  color: var(--skin__filter_active);
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._corner-bg_1arji_74 svg {
  height: 100%;
  width: 100%;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._gou_1arji_66 {
  position: absolute;
  right: 0.1rem;
  bottom: -0.1rem;
  color: var(--skin__web_filter_gou);
  height: 0.5rem;
  width: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

._cell_1arji_45._defAccount_1arji_55 ._corner_1arji_59 ._gou_1arji_66 svg {
  width: 100%;
  height: 100%;
}

._cell_1arji_45 ._left_1arji_86 {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1;
}

._cell_1arji_45 ._left_1arji_86 ._logo_1arji_90 {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.4rem;
  margin-right: 0.6rem;
  flex-shrink: 0;
  object-fit: contain;
  background: #f5f5f5;
}

._cell_1arji_45 ._left_1arji_86 ._logo_1arji_90--placeholder {
  display: block;
  background: var(--skin__neutral_2, #999);
  opacity: 0.5;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 {
  min-width: 0;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 ._channelName_1arji_96 {
  color: var(--skin__lead);
  max-width: 12rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 0 0.15rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 ._l_1arji_86 {
  display: flex;
  align-items: center;
  color: var(--skin__neutral_2);
  margin: 0;
  font-size: 0.8125rem;
}

._cell_1arji_45 ._left_1arji_86 ._info_1arji_96 ._l_1arji_86 ._l-text_1arji_113 {
  max-width: 10rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  direction: ltr;
}

._cell_1arji_45 ._right_1arji_125 {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  height: 2.25rem;
  line-height: 1.5;
  padding-left: 0.5rem;
  flex-shrink: 0;
}

._cell_1arji_45 ._right_1arji_125 ._deleBox_1arji_159 {
  width: 1.25rem;
  height: 1.25rem;
}

.withdraw-accounts-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.withdraw-account-cell {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
}

.withdraw-account-cell__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  min-height: 56px;
}

.withdraw-account-cell__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.withdraw-account-cell__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.withdraw-account-cell__logo--bank {
  color: #1677ff;
}

.withdraw-account-cell__logo--crypto {
  color: var(--mine-primary);
}

.withdraw-account-cell__logo-img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.withdraw-account-cell__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--f168-text-dark);
}

.withdraw-account-cell__right {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  color: var(--mine-primary);
  font-size: 0.9375rem;
}

.withdraw-account-cell__action {
  color: var(--mine-primary);
}

.withdraw-account-cell__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  transform: rotate(180deg);
}

/* 添加银行账户弹窗 (屏幕中间，F168样式) */
.withdraw-bank-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: auto;
}

.withdraw-bank-modal-overlay[hidden] {
  display: none !important;
}

.withdraw-bank-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 25rem;
  margin: auto;
}

.withdraw-bank-modal__main {
  background: var(--skin__bg_2, #fff);
  border-radius: 0.5rem;
  overflow: visible;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

.withdraw-bank-modal__header {
  padding: 0.75rem 1rem 0.5rem;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--skin__lead, var(--f168-text-dark));
}

.withdraw-bank-modal__content {
  padding: 0 1rem 1rem;
  overflow: visible;
}

.withdraw-bank-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.withdraw-bank-modal__remark {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--skin__neutral_2, var(--f168-text-muted));
}

.withdraw-bank-modal-field {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--skin__bg_1, #f5f5f5);
  border: 1px solid var(--skin__border, #e8e8e8);
  border-radius: 0.35rem;
  gap: 0.5rem;
}

.withdraw-bank-modal-form .withdraw-bank-modal-field:not(:first-of-type) {
  background: transparent;

}

.withdraw-bank-modal-field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  font-size: 1.625rem;
  color: var(--skin__neutral_2, var(--f168-text-muted));
}

.withdraw-bank-modal-field__input,
.withdraw-bank-modal-field__select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--skin__lead, var(--f168-text-dark));
}

.withdraw-bank-modal-field__input::placeholder {
  color: var(--skin__neutral_3, #999);
}

.withdraw-bank-modal-field__input:disabled {
  color: var(--skin__neutral_2, var(--f168-text-muted));
  cursor: not-allowed;
}

.withdraw-bank-modal-field__select {
  padding: 0.5rem 1.5rem 0.5rem 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

.withdraw-bank-modal-field--select {
  position: relative;
  flex-wrap: wrap;
}

.withdraw-bank-modal-field__trigger {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--skin__neutral_3, #999);
  cursor: pointer;
  text-align: left;
}

.withdraw-bank-modal-field__trigger[aria-expanded="true"] {
  color: var(--skin__lead, var(--f168-text-dark));
}

.withdraw-bank-modal-field__trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.withdraw-bank-modal-field__trigger-text.has-value {
  color: var(--skin__lead, var(--f168-text-dark));
}

.withdraw-bank-modal-field__trigger-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--skin__neutral_2, var(--f168-text-muted));
  transition: transform 0.2s;
}

.withdraw-bank-modal-field__trigger-arrow svg {
  display: block;
}

.withdraw-bank-modal-field__trigger[aria-expanded="true"] .withdraw-bank-modal-field__trigger-arrow {
  transform: rotate(180deg);
}

.withdraw-bank-modal-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 2100;
  background: var(--skin__bg_2, #fff);
  border: 1px solid var(--skin__border, #e8e8e8);
  border-radius: 0.35rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
  max-height: 20rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.withdraw-bank-modal-dropdown__search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: var(--skin__bg_1, #f5f5f5);
  border-bottom: 1px solid var(--skin__border, #e8e8e8);
  flex-shrink: 0;
}

.withdraw-bank-modal-dropdown__search-wrap:focus-within {
  border-bottom-color: var(--mine-primary, var(--f168-accent));
  box-shadow: 0 1px 0 0 var(--mine-primary, var(--f168-accent));
}

.withdraw-bank-modal-dropdown__search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--skin__neutral_2, var(--f168-text-muted));
  flex-shrink: 0;
}

.withdraw-bank-modal-dropdown__search {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--skin__lead, var(--f168-text-dark));
}

.withdraw-bank-modal-dropdown__search::placeholder {
  color: var(--skin__neutral_3, #999);
}

.withdraw-bank-modal-dropdown__scroll {
  overflow-y: auto;
  max-height: 17rem;
  padding: 0.25rem 0;
}

.withdraw-bank-modal-dropdown__option.hidden {
  display: none;
}

.withdraw-bank-modal-dropdown__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--skin__lead, var(--f168-text-dark));
  cursor: pointer;
  transition: background 0.15s;
}

.withdraw-bank-modal-dropdown__option:hover,
.withdraw-bank-modal-dropdown__option[aria-selected="true"] {
  background: var(--skin__bg_1, #f5f5f5);
}

.withdraw-bank-modal-dropdown__option-logo {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.withdraw-bank-modal__paste {
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: var(--mine-primary, var(--f168-accent));
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.withdraw-bank-modal__paste:hover {
  opacity: 0.9;
}

.withdraw-bank-modal__warn {
  margin: 0.5rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--skin__neutral_2, var(--f168-text-muted));
  line-height: 1.4;
}

.withdraw-bank-notice__text {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--skin__neutral_1, var(--f168-text-dark));
}

.withdraw-bank-modal__submit {
  width: 100%;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--mine-primary, var(--f168-accent));
  border: none;
  border-radius: 0.35rem;
  cursor: pointer;
}

.withdraw-bank-modal__submit:hover {
  opacity: 0.92;
}

.withdraw-bank-modal-close-box {
  display: flex;
  justify-content: center;
  padding-top: 0.75rem;
}

.withdraw-bank-modal-close-box__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: #fff;
  background: var(--skin__neutral_2, #999);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.2s;
}

.withdraw-bank-modal-close-box__btn:hover {
  opacity: 0.9;
}

.withdraw-bank-modal-close-box__btn svg {
  width: 1.25em;
  height: 1.25em;
}

/* 提款预览弹窗：透明边距区域 */
#withdraw-preview-modal .withdraw-preview-modal-dialog .withdraw-bank-modal__main,
#withdraw-preview-modal .withdraw-preview-modal-body {
  background: transparent;
}

/* F168 风格页眉: lobby-base-header, 左后退键 + 单行横向滚动标签 */
.event-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.5rem;
  /* ~36px，相当于基准40px下的.9rem */
  min-height: 44px;
  background: var(--skin__bg_2, #fff);
  border-bottom: 1px solid var(--skin__border, #e0e0e0);
  flex-shrink: 0;
  width: 100%;
}

.event-header__section {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.event-header__section--left {
  min-width: 2.75rem;
}

.event-header__section--center {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  justify-content: center;
}

.event-header__section--right {
  min-width: 2rem;
}

.event-header__back {
  width: 2.75rem;
  height: 100%;
  padding-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--skin__neutral_1, var(--f168-text-dark));
  text-decoration: none;
  transition: opacity 0.2s, color 0.2s;
}

.event-header__back:hover {
  color: var(--skin__primary, var(--f168-accent-secondary));
  opacity: 0.9;
}

.event-header__back-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
  transition: transform 0.3s linear;
}

.event-header__back-icon svg {
  display: block;
}

.event-tabs-wrap {
  width: 100%;
  overflow: hidden;
}

/* 主标签：单行横向滚动 */
.event-tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.event-tabs-row--main.event-tabs-row--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0.5rem;
  gap: 20px;
}

.event-tabs-row--main.event-tabs-row--scroll::-webkit-scrollbar {
  display: none;
}

/* 主标签：激活态的橙色渐变 (F168)，线条/下划线样式 */
.event-tab {
  padding: 8px 2px;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--f168-text-dark);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.2s;
  position: relative;
}

.event-tabs-row--main .event-tab {
  padding: 0 0.1rem;
  height: 3.3rem;
  line-height: 2.25rem;
  color: var(--skin__neutral_2, var(--f168-text-muted));
}

.event-tabs-row--main .event-tab:hover {
  color: var(--skin__lead, var(--f168-text-dark));
}

.event-tabs-row--main .event-tab.active {
  color: var(--skin__primary, var(--f168-accent-secondary));
  font-weight: 400;
  border-bottom: 2px solid var(--skin__primary, var(--f168-accent-secondary));
  margin-bottom: -1px;
}

/* 子标签 (侧边栏) 依然应用边框 + 渐变 */
.event-tab--sub {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.event-tab:hover {
  background: transparent;
}

.event-tab--sub:hover {
  background: #f5f5f5;
  border-color: #ddd;
}

.event-tab.active {
  background: transparent;
  border: none;
}

.event-tab--sub.active {
  background: linear-gradient(180deg, var(--f168-accent-secondary) 0%, var(--f168-accent-secondary) 100%);
  border-color: var(--f168-text-accent);
  color: #fff;
  font-weight: 600;
  border-radius: 0.5rem;
}

/* 主区：左侧栏 + 右主区 */
.event-body {
  display: flex;
  flex: 1;
  min-height: 0;
  margin: 0px 10px;
}

/* 侧栏：左侧垂直标签 – F168 样式 (1_PromotionChunk / sidebar-common-tab) */
.event-sidebar {
  flex-shrink: 0;
  width: 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 58px;
  align-self: flex-start;
}

.event-sidebar-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: 8px;
}

.event-tabs-row--sub {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
}

/* 标签包装器：1.5rem x 0.7rem (F168 _sidebar-common-tab-wrapper) */
.event-sidebar-tab-wrapper {
  width: 90px;
  height: 42px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.event-sidebar-tab-wrapper:last-of-type {
  margin-bottom: 12px;
}

.event-tab--sub {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: block;
}

/* 标签项：F168 _sidebar-common-tab-item – 效果来自 1_PromotionChunk (阴影 .03rem .07rem) */
.event-sidebar-tab-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 6px 0 3px;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #fff;
  background-size: 100% 100%;
  color: var(--skin__leftnav_def, var(--f168-text-muted));
  font-size: 13px;
  line-height: 1.2;
  word-break: break-word;
  box-shadow: 0 3px 7px 0 var(--skin__web_left_bg_shadow, rgba(0, 0, 0, 0.06));
  transition: background .2s, color .2s, box-shadow .2s;
}

.event-sidebar-tab-item:hover {
  background-color: #fafafa;
  box-shadow: 0 3px 7px 0 var(--skin__web_left_bg_shadow, rgba(0, 0, 0, 0.08));
}

/* 激活态: F168 _sidebar-common-tab-item._is-active – 活动阴影 + 左导航激活颜色 */
.event-sidebar-tab-item.is-active {
  background: linear-gradient(180deg, var(--f168-accent-secondary) 0%, var(--f168-accent-secondary) 100%);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 3px 7px 0 var(--skin__web_left_bg_shadow_active, rgba(158, 184, 255, 0.35));
}

/* Icon box: F168 _sidebar-common-tab-item-icon-box – .48rem x .36rem, flex center */
.event-sidebar-tab-item-icon-box {
  width: 28px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0px;
}

.event-sidebar-tab-item-icon-box .event-sidebar-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.event-sidebar-tab-item.is-active .event-sidebar-icon {
  color: #fff;
}

/* 管理员分类图标：普通 vs 活跃 (2张图，根据选项卡状态切换) */
.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon {
  width: 100%;
  height: 100%;
  max-width: 28px;
  max-height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--normal {
  display: block;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--active {
  display: none;
}

.event-sidebar-tab-item.is-active .event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--normal {
  display: none;
}

.event-sidebar-tab-item.is-active .event-sidebar-tab-item-icon-box .event-sidebar-tab-icon--active {
  display: block;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.event-sidebar-tab-item-icon-box .event-sidebar-tab-icon-placeholder .event-sidebar-icon {
  width: 1em;
  height: 1em;
}

/* 标签名：F168 _sidebar-common-tab-name – 居中，最多两行，紧凑字体 */
.event-sidebar-tab-name {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0 auto;
  display: -webkit-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  font-size: 11px;
  line-height: 1.2;
  word-break: break-word;
  font-weight: 400;
}

.event-sidebar-tab-item.is-active .event-sidebar-tab-name {
  color: #ffffff;
}

/* 侧拉菜单下方的两个按钮：已领取 + 刷新 */
.event-extra-button {
  width: 80px;
  margin: 0 auto 12px;
  padding: 0 0 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}

/* .event-extra-button 里的按钮：橙色字，橙色边框 */
.event-extra-button .event-btn-received,
.event-extra-button .event-btn-refresh {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--f168-accent-secondary);
  color: var(--f168-accent-secondary);
  background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}

.event-extra-button .event-btn-received .ui-button__text,
.event-extra-button .event-btn-received .ui-button__content,
.event-extra-button .event-btn-refresh .event-btn-refresh-content,
.event-extra-button .event-btn-refresh .event-btn-refresh-text,
.event-extra-button .event-btn-refresh .event-btn-refresh-icon,
.event-extra-button .event-btn-refresh .event-btn-refresh-icon svg {
  color: inherit;
  fill: currentColor;
}

.event-extra-button .event-btn-received:hover,
.event-extra-button .event-btn-refresh:hover {
  background: rgba(230, 126, 34, 0.1);
  color: var(--f168-text-accent);
  border-color: var(--f168-text-accent);
}

/* 已领取按钮 – 结构遵循 ui-button__content + ui-button__text (F168样式) */
.event-btn-received .ui-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.event-btn-received .ui-button__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.event-btn-refresh-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.event-btn-refresh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.event-btn-refresh-icon svg {
  width: 1em;
  height: 1em;
}

.event-btn-refresh-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

/* 主区块：优惠列表，垂直滚动 */
.event-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0px;
  background: #fff;
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-card {
  position: relative;
  background: #fff;



  flex-shrink: 0;

}

/* 热门丝带（左上角，红色） */
.event-card__hot {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-radius: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.event-card__inner {
  display: block;
  color: inherit;
  text-decoration: none;
  padding-top: 4px;
}

.event-card__thumb {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.event-card__placeholder {
  display: block;
  padding: 24px 20px;
  background: linear-gradient(180deg, #f8f8f8 0%, #eee 100%);
  border: 1px dashed #ddd;
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  text-align: center;
}

.event-card__code {
  font-size: var(--text-xs);
  color: var(--f168-text-muted);
  margin: 0 0 6px 0;
}

.event-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: #000;
  margin: 0 0 6px 0;
  line-height: 1.35;
}

.event-card__desc {
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  margin: 0;
  line-height: 1.4;
}

.event-card__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.event-card--clickable {
  cursor: pointer;
}

.event-card--clickable .event-card__inner {
  display: block;
}

.event-card--link .event-card__inner {
  display: block;
  text-decoration: none;
  color: inherit;
}

.event-list__empty {
  padding: 24px 16px;
  text-align: center;
  margin: 0;
}

/* 优惠详情弹窗 */
.event-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.event-modal[hidden] {
  display: none;
}

.event-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.event-modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.event-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.event-modal__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  padding-right: 36px;
}

.event-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--f168-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 6px;
}

.event-modal__close:hover {
  background: #f0f0f0;
  color: #000;
}

.event-modal__close::before {
  content: "\00d7";
}

.event-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--f168-text-dark);
}

.event-modal__body img {
  max-width: 100%;
  height: auto;
}

/* 活动详情页面：优惠政策详情 */
.eventdetail-page .event-detail-title-header {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-height: 44px;
}

.eventdetail-page .event-header__section--center .event-tabs-wrap {
  display: flex;
  
  
  height: 100%;
}

.eventdetail-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.eventdetail-main {
  flex: 1;
  min-width: 0;
  padding: 16px 12px 24px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.eventdetail-page .eventdetail-main {
  background-color: #f3f3f3;
  padding: 12px 8px 20px;
}

@media (min-width: 576px) {
  .eventdetail-page .eventdetail-main {
    padding: 16px 12px 24px;
  }
}

.eventdetail-page .eventdetail-article {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 7px 0 var(--skin__web_left_bg_shadow, rgba(0, 0, 0, 0.12));
  overflow: visible;
  min-width: 0;
}

.eventdetail-article__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: #111;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.eventdetail-article__thumb {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.eventdetail-article__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.eventdetail-page {
  overflow-x: clip;
}

.eventdetail-article__body {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--f168-text-muted);
  padding: 14px 10px 16px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.eventdetail-article__rich {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Khung bảng: viewport cuộn ngang + thanh kéo luôn hiện khi tràn */
.eventdetail-article__body .eventdetail-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 10px 0 14px;
  box-sizing: border-box;
  border: 1px solid #d8e4f8;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(22, 120, 255, 0.08);
  overflow: hidden;
  direction: ltr;
}

.eventdetail-article__body .eventdetail-table-scroll__viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow .eventdetail-table-scroll__viewport {
  overflow-x: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #1678ff #e8f1ff;
  cursor: grab;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow .eventdetail-table-scroll__viewport:active {
  cursor: grabbing;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow .eventdetail-table-scroll__viewport::-webkit-scrollbar {
  height: 12px;
  -webkit-appearance: none;
  appearance: none;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow .eventdetail-table-scroll__viewport::-webkit-scrollbar-track {
  background: #e8f1ff;
  border-top: 1px solid #d0e3ff;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow .eventdetail-table-scroll__viewport::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3d8fff 0%, #1678ff 100%);
  border-radius: 6px;
  border: 2px solid #e8f1ff;
  min-width: 48px;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow .eventdetail-table-scroll__viewport::-webkit-scrollbar-thumb:hover {
  background: #125fcc;
}

.eventdetail-article__body .eventdetail-table-scroll table,
.eventdetail-article__body .eventdetail-table-scroll__viewport table {
  margin: 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.eventdetail-article__body .eventdetail-table-scroll:not(.eventdetail-table-scroll--overflow) table th,
.eventdetail-article__body .eventdetail-table-scroll:not(.eventdetail-table-scroll--overflow) table td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Đo chiều rộng thật — ghi đè width 100% khi JS kiểm tra overflow */
.eventdetail-article__body .eventdetail-table-scroll--measuring table {
  width: max-content !important;
  min-width: 0 !important;
  max-width: none !important;
  table-layout: auto !important;
}

.eventdetail-article__body .eventdetail-table-scroll--measuring table th,
.eventdetail-article__body .eventdetail-table-scroll--measuring table td {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow table,
.eventdetail-article__body .eventdetail-table-scroll table.eventdetail-table-scroll--wide {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow table th,
.eventdetail-article__body .eventdetail-table-scroll--overflow table td {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.eventdetail-article__body .eventdetail-table-scroll--overflow td[rowspan],
.eventdetail-article__body .eventdetail-table-scroll--overflow th[rowspan] {
  min-width: 0;
  max-width: none;
}

/* TinyMCE hay chèn width % inline — bỏ qua trên frontend */
.eventdetail-article__rich table th[style],
.eventdetail-article__rich table td[style] {
  width: auto !important;
  height: auto !important;
}

.eventdetail-article__body img {
  max-width: 100%;
  height: auto;
}

/* Event detail: bảng nội dung — header #1678ff, cuộn ngang khi nhiều cột */
.eventdetail-article__body table {
  width: 100%;
  margin: 10px 0 14px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #2d3748;
  background: #fff;
  border: 1px solid #d8e4f8;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(22, 120, 255, 0.08);
}

.eventdetail-article__body caption {
  caption-side: top;
  padding: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a5568;
  text-align: left;
}

.eventdetail-article__body thead th {
  background: #1678ff;
  color: #fff;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  padding: 9px 10px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.35;
  font-size: 0.76rem;
}

.eventdetail-article__body thead th:last-child {
  border-right: none;
}

.eventdetail-article__body thead tr:first-child th:first-child {
  border-top-left-radius: 7px;
}

.eventdetail-article__body thead tr:first-child th:last-child {
  border-top-right-radius: 7px;
}

.eventdetail-article__body tbody tr:last-child td:first-child,
.eventdetail-article__body tbody tr:last-child th:first-child {
  border-bottom-left-radius: 7px;
}

.eventdetail-article__body tbody tr:last-child td:last-child,
.eventdetail-article__body tbody tr:last-child th:last-child {
  border-bottom-right-radius: 7px;
}

/* Ô rowspan cột cuối: bo góc dưới-phải */
.eventdetail-article__body tbody tr:first-child > td[rowspan]:last-child,
.eventdetail-article__body tbody tr:first-child > th[rowspan]:last-child {
  border-bottom-right-radius: 7px;
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:first-child td:first-child {
  border-top-left-radius: 7px;
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:first-child td:last-child {
  border-top-right-radius: 7px;
}

.eventdetail-article__body tbody th {
  background: #f0f6ff;
  color: #2d3748;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

.eventdetail-article__body td {
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #edf2f7;
  background: #fff;
  color: #4a5568;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1.4;
  font-size: 0.78rem;
}

.eventdetail-article__body tbody td:last-child {
  border-right: 1px solid #edf2f7;
}

/* Ô gộp nội dung dài: cho xuống dòng theo từ */
.eventdetail-article__body td[rowspan],
.eventdetail-article__body th[rowspan] {
  white-space: normal;
  min-width: 6.5rem;
  max-width: 10rem;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
}

.eventdetail-article__body tbody tr:nth-child(even) td {
  background: #f8fafc;
}

.eventdetail-article__body tbody tr:hover td {
  background: #f0f6ff;
}

.eventdetail-article__body tfoot td {
  font-weight: 600;
  background: #f1f5f9;
  color: #2d3748;
  border-top: 2px solid #e2e8f0;
}

/* Bảng không có <thead>: hàng đầu = header xanh */
.eventdetail-article__body table:not(:has(thead)) tbody tr:first-child td {
  background: #1678ff;
  color: #fff;
  font-weight: 600;
  border-color: rgba(255, 255, 255, 0.2);
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:nth-child(n + 2):nth-child(even) td {
  background: #f8fafc;
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:nth-child(n + 2):nth-child(odd) td {
  background: #fff;
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:nth-child(n + 2):hover td {
  background: #f0f6ff;
}

.eventdetail-article__body table:not(:has(thead)) tbody tr:first-child:hover td {
  background: #125fcc;
  color: #fff;
}

@media (min-width: 576px) {
  .eventdetail-article__body {
    padding: 14px 12px 16px;
  }

  .eventdetail-article__body table {
    font-size: 0.8rem;
    border-radius: 10px;
  }

  .eventdetail-article__body .eventdetail-table-scroll {
    border-radius: 10px;
  }

  .eventdetail-article__body thead tr:first-child th:first-child,
  .eventdetail-article__body table:not(:has(thead)) tbody tr:first-child td:first-child {
    border-top-left-radius: 9px;
  }

  .eventdetail-article__body thead tr:first-child th:last-child,
  .eventdetail-article__body table:not(:has(thead)) tbody tr:first-child td:last-child {
    border-top-right-radius: 9px;
  }

  .eventdetail-article__body tbody tr:last-child td:first-child,
  .eventdetail-article__body tbody tr:last-child th:first-child {
    border-bottom-left-radius: 9px;
  }

  .eventdetail-article__body tbody tr:last-child td:last-child,
  .eventdetail-article__body tbody tr:last-child th:last-child,
  .eventdetail-article__body tbody tr:first-child > td[rowspan]:last-child,
  .eventdetail-article__body tbody tr:first-child > th[rowspan]:last-child {
    border-bottom-right-radius: 9px;
  }
}

@media (min-width: 768px) {
  .eventdetail-article__body table {
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .eventdetail-article__body thead th {
    font-size: 0.8rem;
    padding: 10px 12px;
  }

  .eventdetail-article__body td,
  .eventdetail-article__body tbody th {
    font-size: 0.82rem;
    padding: 10px 12px;
  }

  .eventdetail-article__body td[rowspan],
  .eventdetail-article__body th[rowspan] {
    min-width: 7.5rem;
    max-width: 12rem;
  }
}

/* Event detail: danh sách ul / ol / li — dễ đọc, marker rõ */
.eventdetail-article__body ul,
.eventdetail-article__body ol {
  margin: 12px 0 16px;
  padding-left: 1.5em;
  list-style-position: outside;
  color: #4a5568;
}

.eventdetail-article__body ul {
  list-style-type: disc;
}

.eventdetail-article__body ol {
  list-style-type: decimal;
}

.eventdetail-article__body li {
  margin: 0.4em 0;
  padding-left: 0.2em;
  line-height: 1.55;
  word-break: break-word;
}

.eventdetail-article__body li::marker {
  color: #1678ff;
  font-weight: 600;
}

.eventdetail-article__body li > ul,
.eventdetail-article__body li > ol {
  margin: 0.45em 0 0.55em;
}

.eventdetail-article__body ul ul {
  list-style-type: circle;
}

.eventdetail-article__body ul ul ul {
  list-style-type: square;
}

.eventdetail-article__body ol ol {
  list-style-type: lower-alpha;
}

/* Event detail: title tag style (match F168 title-container look) */
.eventdetail-article__body h4,
.eventdetail-article__body h5 {
  --event-detail-title-bg: var(--f168-accent);
  --event-detail-title-text: #fff;
  position: relative;
  display: inline-block;
  left: -17px;
  max-width: calc(100% - 20px);
  margin: 5px 0;
  padding: 2px 12px 2px 18px;
  min-height: 25px;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 600;
  color: var(--event-detail-title-text);
  background-color: var(--event-detail-title-bg);
  border-top-left-radius: 6px;
  overflow: visible;
  word-break: break-word;
}

.eventdetail-article__body h4::before,
.eventdetail-article__body h5::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 5px;
  height: 10px;
  background-color: var(--event-detail-title-bg);
  border-bottom-left-radius: 6px;
}

.eventdetail-article__body h4::after,
.eventdetail-article__body h5::after {
  content: "";
  position: absolute;
  top: 0;
  right: -18px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 19px solid var(--event-detail-title-bg);
}

.footer-fix-bar__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  pointer-events: none;
}

.footer-fix-bar__inner {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding: 8px 4px 8px;
  max-width: 100%;
  gap: 4px;
}

.footer-fix-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 11px;
  transition: color 0.2s;
  min-width: 0;
}

.footer-fix-bar__item:hover,
.footer-fix-bar__item.active {
  color: hsl(var(--main));
}

.footer-fix-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
}

.footer-fix-bar__icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 双图标（默认 + 激活）：激活图标默认隐藏，项被选中时显示 */
.footer-fix-bar__icon .footer-fix-bar__icon-active {
  display: none;
}

.footer-fix-bar__item.active .footer-fix-bar__icon .footer-fix-bar__icon-default {
  display: none;
}

.footer-fix-bar__item.active .footer-fix-bar__icon .footer-fix-bar__icon-active {
  display: block;
}

.footer-fix-bar__icon i {
  font-size: 20px;
}

.footer-fix-bar__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 轮播图横幅：顶部留空 = 固定页眉的高度（防止被遮挡） */
.slide-banner {
  padding-top: 52px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.slide-banner__slider {
  position: relative;
}

/* 在 Slick 初始化前隐藏多余的幻灯片 (防止 FOUC 闪烁) */
.slide-banner__slider:not(.slick-initialized) .slide-banner__slide:not(:first-child) {
  display: none;
}

.slide-banner__slide {
  outline: none;
}

.slide-banner__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.slide-banner__bg {
  display: block;
  width: 100%;
  padding-bottom: 31.25%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide-banner .slick-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide-banner .slick-dots li {
  display: inline-block;
  margin: 0 3px;
  padding: 0;
  line-height: 0;
}

.slide-banner .slick-dots li button {
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  border: 1px solid transparent;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  outline: none;
}

.slide-banner .slick-dots li.slick-active button {
  width: 15px;
  background: #ffffff;
  border: 1px solid rgba(160, 174, 192, 0.5);
  /* 颜色：#a0aec0 50% 透明 */
}

/* 新闻部分 - 品牌历程资讯 (F168风格) */
.news-brand-list {
  padding: 0;
}

.news-brand-list__title {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}

.news-brand-title__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--f168-accent-secondary), var(--f168-accent));
  height: 24px;
  padding: 0 8px 0 10px;
  border-radius: 4px 0 0 4px;
  margin-right: 14px;
  position: relative;
}

.news-brand-title__badge::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 10px solid var(--f168-accent);
}

.news-brand-title__badge em {
  color: #fff;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.news-brand-title__main {
  font-size: 1rem;
  font-weight: 700;
  color: #99a2a8;
}

.news-brand-item {
  position: relative;
  background: linear-gradient(to top, var(--f168-accent) 60%, #e3e3e3);
  padding: 1px 1px 2px 1px;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.news-brand-item__content {
  position: relative;
  background: #fff;
  border-radius: 7px;
  padding: 15px;
  display: block;
  overflow: hidden;
}

.news-brand-item__img {
  float: right;
  width: 100px;
  margin-left: 10px;
  margin-bottom: 5px;
  border-radius: 6px;
  overflow: hidden;
}

.news-brand-item__img img {
  width: 100%;
  height: auto;
  display: block;
}

.news-brand-item__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #99a2a8;
  margin-bottom: 0.3rem;
}

.news-content {
  position: relative;
  font-size: 11px;
  line-height: 1.6;
  color: #999;
  text-align: justify;
}

.news-content__excerpt {
  color: #999;
  display: block;
}

.news-content__excerpt.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.news-expend-btn {
  display: inline;
  color: var(--f168-text-accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
}

/* ========== Ambassador Section (F168 style) ========== */
.ambassador-section {
  background-color: #fff;
}

.ambassador-section__inner {
  margin-bottom: 1rem;
}

.ambassador-section__title {
  font-weight: 600;
  font-size: 15px;
  color: #a8a8a8;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.ambassador-section__image-wrap {
  margin-bottom: 1rem;
  overflow: hidden;
}

.ambassador-section__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.ambassador-section__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ambassador-section__ambassador-info {
  font-size: var(--text-base, 0.875rem);
  color: var(--f168-text-muted);
  flex-shrink: 0;
}

.ambassador-section__name {
  display: block;
  font-weight: 700;
  font-size: var(--text-lg, 1rem);
  color: var(--f168-text-dark);
  margin-bottom: 0.25rem;
}

.ambassador-section__tenure {
  margin: 0;
  font-size: var(--text-base, 0.875rem);
  color: var(--f168-text-muted);
  font-weight: 400;
}

.ambassador-section__signature-wrap {
  flex-shrink: 0;
}

.ambassador-section__signature {
  display: block;
  max-width: 8.5rem;
  height: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .ambassador-section__signature {
    max-width: 13rem;
  }
}

/* ========== Big Win Section (F168 style) ========== */
.big-win-section {
  background-color: #fff;
}

.big-win-section__wrap {
  width: 100%;
  padding: 0 0.5rem;
  border-radius: 0.56rem;
  background-color: var(--skin__bg_1, #fff);
}

.big-win-section__header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.4rem 0 0.2rem;
}

.big-win-section__title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

/* 左右图标：仅设置高度，宽度自动以保持原图比例并防止扭曲 */
.big-win-section__icon {
  height: 1.4rem;
  width: auto;
  max-width: 2rem;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.big-win-section__icon--right {
  transform: scaleX(-1);
}

.big-win-section__title {
  font-weight: 400;
  font-size: var(--text-xl, 1.2rem);
  color: var(--skin__lead, var(--f168-text-muted));
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 15rem;
}

.big-win-section__carousel-wrap {
  padding: 0.5rem 0 0.2rem;
  overflow: hidden;
}

.big-win-section__carousel {
  overflow: hidden;
}

.big-win-section__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: big-win-scroll-left var(--big-win-duration, 5s) linear infinite;
}

@keyframes big-win-scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* 垂直卡片：海报在顶，信息在底（F168 _card-below 样式） */
.big-win-section__card {
  flex-shrink: 0;
  width: 5.2rem;
  padding: 0;
  border-radius: 0.56rem;
  border: 1px solid var(--skin__border, #e2e8f0);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 0.06rem 0.2rem rgba(0, 0, 0, 0.06);
}

/* 顶部海报，全宽，1:1比例 */
.big-win-section__poster {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 0.5rem 0.5rem 0 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--skin__bg_2, #f7fafc);
  flex-shrink: 0;
}

/* 海报下部信息区：居中，带内边距 */
.big-win-section__info {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.35rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.big-win-section__username {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--skin__neutral_2, var(--f168-text-muted));
  width: 100%;
  text-align: center;
}

.big-win-section__win-text {
  color: var(--skin__accent_2, #ea4e3d);
}

.big-win-section__win-box {
  margin-top: -0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}

.big-win-section__currency-icon {
  width: 11px;
  height: 11px;
  object-fit: contain;
  flex-shrink: 0;
}

.big-win-section__net-profit {
  font-size: 0.6rem;
  color: var(--skin__accent_3, var(--f168-accent));
  line-height: 1.25;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.big-win-section__arrow {
  color: var(--skin__accent_3, var(--f168-accent));
  font-size: 1rem;
  margin-left: 0.2rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .big-win-section__wrap {
    padding: 0 1rem;
  }

  .big-win-section__card {
    width: 5.5rem;
  }

  .big-win-section__info {
    padding: 0.45rem 0.4rem 0.55rem;
  }
}

/* ========== 覆盖 Bootstrap .py-5（避免修改 bootstrap.min.css） ========== */
.py-5 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ========== Show Game List Section (F168 style) - Mobile first ========== */
.show-game-list-section {
  background-color: #fff;
}

/* 确保没有 overflow 阻挡 sticky（F168：.ui-tabs__wrap overflow:hidden 但父级必须 visible） */
.show-game-list-section .container,
.show-game-list__wrap {
  overflow: visible;
}

.show-game-list__wrap {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  min-width: 0;
}

/* F168：ui-sticky + position:sticky，支持多端移动优先 */
.show-game-list__sidebar.ui-sticky {
  position: sticky;
  top: 70px;
  align-self: flex-start;
  flex: 0 0 5.2rem;
  /* 手机端：固定 83px */
  width: 5.2rem;
  min-width: 5.2rem;
  z-index: 10;
  margin-top: 10px;
}

.show-game-list__content {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 576px) {

  /* container 540px, 20% = 108px */
  .show-game-list__sidebar.ui-sticky {
    flex: 0 0 20%;
    width: 20%;
    min-width: 5.2rem;
    /* 83px - 手机端保持一致 */
    max-width: 8rem;
  }
}

@media (min-width: 768px) {

  /* container 720px, 20% = 144px */
  .show-game-list__sidebar.ui-sticky {
    min-width: 5.2rem;
    max-width: 9rem;
  }
}

@media (min-width: 992px) {

  /* container 960px, 20% = 192px */
  .show-game-list__sidebar.ui-sticky {
    min-width: 5.2rem;
    max-width: 10rem;
  }
}

@media (min-width: 1200px) {
  .show-game-list__sidebar.ui-sticky {
    max-width: 12rem;
  }
}

@media (min-width: 1360px) {
  .show-game-list__sidebar.ui-sticky {
    max-width: 12.5rem;
  }
}

/* lobby-scroll lobby-scroll--y: 标签过多时侧连垂直滚动 (F168 _main_pjnd2_56 示例) */
.show-game-list__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(100vh - 100px - 2rem);
  /* 100px = 侧连粘性顶部位移 */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.show-game-list__tabs::-webkit-scrollbar {
  width: 4px;
}

.show-game-list__tabs::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.show-game-list__tabs::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.show-game-list__tabs::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.show-game-list__tab-item {
  flex: none;
}

.show-game-list__tab-link {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  background: #f7fafc;
  border-radius: 0.4rem;
  color: var(--f168-text-muted);
  font-size: var(--text-sm, 0.75rem);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.show-game-list__tab-link:hover {
  background: #edf2f7;
  color: var(--f168-text-dark);
}

.show-game-list__tab-item.is-active .show-game-list__tab-link {
  background: linear-gradient(135deg, var(--f168-accent-secondary) 0%, var(--f168-accent) 100%);
  color: #fff;
}

.show-game-list__tab-icon {
  flex-shrink: 0;
  display: inline-block;
  line-height: 0;
}

.show-game-list__tab-icon img {
  width: auto;
  height: auto;
  display: block;
  vertical-align: middle;
}

/* 类型1 (HOT)：图标在上，文字在下，高度 = 类型2的 40% */
.show-game-list__tab-item--type1 .show-game-list__tab-link {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(3.8rem * 0.4);
  padding: 0.35rem 0.3rem;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 0.35rem;
  box-shadow: 0 2px 4px rgba(180, 180, 180, 0.5);
  color: var(--f168-text-dark);
}

.show-game-list__tab-item--type1 .show-game-list__tab-link:hover {
  background-color: #f7fafc;
  border-color: #e3e3e3;
}

.show-game-list__tab-item--type1.is-active .show-game-list__tab-link {
  background-image: linear-gradient(to bottom,var(--f168-accent-secondary), #fff);
  border-color: #e3e3e3;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.show-game-list__tab-item--type1 .show-game-list__tab-icon {
  margin-bottom: 0.15rem;
}

.show-game-list__tab-item--type1 .show-game-list__tab-icon img {
  width: 40px;
  height: auto;
  display: block;
}

.show-game-list__tab-item--type1 .show-game-list__tab-name {
  width: 100%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.625rem;
  line-height: 1.3;
}

/* 类型2 (供应商)：类似类型1，图标更大 */
.show-game-list__tab-item--type2 .show-game-list__tab-link {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 6.8rem;
  padding: 0.4rem 0.3rem;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 0.35rem;
  box-shadow: 0 2px 4px rgba(180, 180, 180, 0.5);
  color: var(--f168-text-dark);
}

.show-game-list__tab-item--type2 .show-game-list__tab-link:hover {
  background-color: #f7fafc;
  border-color: #e3e3e3;
}

.show-game-list__tab-item--type2.is-active .show-game-list__tab-link {
  background-image: linear-gradient(to bottom, var(--f168-accent-secondary), #fff);
  border-color: #e3e3e3;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.show-game-list__tab-item--type2 .show-game-list__tab-icon {
  margin-bottom: 0.35rem;
}

.show-game-list__tab-item--type2 .show-game-list__tab-icon img {
  width: 100px;
  height: auto;
  display: block;
}

.show-game-list__tab-item--type2 .show-game-list__tab-name {
  width: 100%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.65rem;
  line-height: 1.3;
}

/* 类型3：类似类型1，高度 = 类型2的 40% */
.show-game-list__tab-item--type3 .show-game-list__tab-link {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(3.8rem * 0.4);
  padding: 0.35rem 0.3rem;
  background-color: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 0.35rem;
  box-shadow: 0 2px 4px rgba(180, 180, 180, 0.5);
  color: var(--f168-text-dark);
}

.show-game-list__tab-item--type3 .show-game-list__tab-link:hover {
  background-color: #f7fafc;
  border-color: #e3e3e3;
}

.show-game-list__tab-item--type3.is-active .show-game-list__tab-link {
  background-image: linear-gradient(to bottom, var(--f168-accent-secondary), #fff);
  border-color: #e3e3e3;
  color: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.show-game-list__tab-item--type3 .show-game-list__tab-icon {
  margin-bottom: 0.15rem;
}

.show-game-list__tab-item--type3 .show-game-list__tab-icon img {
  width: 40px;
  height: auto;
  display: block;
}

.show-game-list__tab-item--type3 .show-game-list__tab-name {
  width: 100%;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.625rem;
  line-height: 1.3;
}

/* 所有面板垂直堆叠，页面滚动 = 右侧列表滚动 (F168) */
.show-game-list__panel {
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e3e3e3;
  scroll-margin-top: 70px;
  /* 滚动到面板上方时的留白区域 (scrollIntoView) */
}

.show-game-list__panel:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* API 游戏列表：游戏类型 → 供应商 → 游戏列表 */
.api-game-list__provider-tabs .nav-pills .nav-link {
  font-size: 0.875rem;
}

.api-game-list__provider-panel {
  display: none;
}

.api-game-list__provider-panel.is-active {
  display: block;
}

/* 类型 1: HOT - 子标签线条形式 (F168示例: 动态下划线) */
.show-game-list__sub-tabs {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  min-height: 2.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #e2e8f0;
}

.show-game-list__sub-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.5rem;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 500;
  color: var(--f168-text-muted);
  cursor: pointer;
  transition: color 0.2s;
  user-select: none;
}

.show-game-list__sub-tab:hover {
  color: var(--f168-text-dark);
}

.show-game-list__sub-tab.ui-tab--active .show-game-list__sub-tab-title,
.show-game-list__sub-tab .show-game-list__sub-tab-title.is-active {
  color: var(--f168-text-accent);
}

.show-game-list__sub-tab-title {
  text-align: center;
  transition: color 0.2s;
}

/* 激活状态的标签下划线 – 平滑过渡 */
.show-game-list__sub-tabs .ui-tabs__line {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 3px;
  background: linear-gradient(135deg, var(--f168-accent-secondary) 0%, var(--f168-accent) 100%);
  border-radius: 3px 3px 0 0;
  transition: transform 0.3s ease, width 0.3s ease;
  pointer-events: none;
}

.show-game-list__scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
  -webkit-overflow-scrolling: touch;
}


/* 3列 x 6行 – 均匀分布 */
.show-game-list__game-grid.poster-box-core {
  --card-benchmark: 5.2rem;
  --poster-box-core-height: calc(var(--card-benchmark) * 0.39);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 0.75rem;
  width: 100%;
}

.show-game-list__game-card {
  min-width: 0;
}

.show-game-list__game-card,
.show-game-list__provider-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: transform 0.2s;
}

.show-game-list__game-card:hover,
.show-game-list__provider-card:hover {
  transform: translateY(-2px);
}

.poster-box-core__thumb {
  aspect-ratio: 520 / 203;
  overflow: hidden;
}

/* 游戏网格（类型1 – HOT）：游戏图 180x180，正方形显示不拉伸 */
.show-game-list__game-grid .poster-box-core__thumb {
  aspect-ratio: 1 / 1;
  position: relative;
}

.poster-box-core__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 热门图标（左上角） – F168 _game-status-label-img 样式 */
.show-game-list__label-hot {
  --label-icon-width: calc(var(--card-benchmark, 5rem) * 0.51);
  --label-icon-height: calc(var(--card-benchmark, 5rem) * 0.42);
  position: absolute;
  top: -0.06rem;
  left: -0.06rem;
  z-index: 8;
  width: var(--label-icon-width);
  height: var(--label-icon-height);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

/* 收藏图标（右上角） – F168 _circle-star-icon 样式 */
.show-game-list__favorite-icon {
  --circle-star-icon-side: 1.5rem;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 9;
  width: var(--circle-star-icon-side);
  height: var(--circle-star-icon-side);
  border-radius: 50%;
  box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.3);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

.poster-box-core__name {
  display: block;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 400;
  color: var(--f168-text-dark);
  margin-top: 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* 类型 2 & 3：供应商卡片 - 默认为水平模式 (如果有的情况下类型1也使用) */
.show-game-list__provider-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  min-width: min-content;
}

.show-game-list__provider-card {
  flex: 0 0 8rem;
  min-width: 8rem;
}

.poster-box-core--landscape .poster-box-core__thumb {
  aspect-ratio: 520 / 203;
}

/* 类型 2 & 3：单列 (F168样式) */
.show-game-list__scroll-wrap--col {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 类型 2 & 3: 每页 6 项 – 隐藏溢出并允许分页。缺少 min-height 以避免少于 6 项时留白 */
.show-game-list__scroll-wrap--paged {
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-y;
}

.show-game-list__provider-pages {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease;
  will-change: transform;
}

.show-game-list__provider-page {
  /* 每页的尺寸由 blade 行内设置 (flex: 0 0 100/n%; min-width: 100/n%) */
  box-sizing: border-box;
}

.show-game-list__provider-grid--col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
  /* 全宽内容，不限制最大宽度以避免右侧留白 */
}

.show-game-list__provider-grid--col .show-game-list__provider-card {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* 供应商图片：使用 contain 防止右侧被裁切 */
.show-game-list__provider-grid--col .poster-box-core__thumb img {
  object-fit: contain;
  object-position: center;
}

/* 防止内容因 flex 缩小 – 类型 2/3 需要足够宽度以免右边留白 */
.show-game-list__content:has(.show-game-list__type2),
.show-game-list__content:has(.show-game-list__type3) {
  min-width: 12rem;
}

/* 标题条：图标 + 供应商列表上的标题 (类型 2, 3) – F168 样式 */
.show-game-list__headline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 0.75rem;
}

.show-game-list__title {
  display: flex;
  align-items: center;
  color: var(--skin__lead, var(--f168-text-muted));
  min-height: 1.3rem;
}

.show-game-list__title-icon {
  width: 30px;
  height: auto;
  object-fit: contain;
  margin-right: 0.2rem;
  flex-shrink: 0;
}

.show-game-list__title-text {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}

/* Bottom navigation */
/* 底部线：[← | 全部 | →] 条，参照 F168 _switch-pagination 样式 */
.show-game-list__bottomline {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  overflow: hidden;
}

.show-game-list__switch-pagination {
  display: flex;
  align-items: center;
  width: 130px;
  height: 25px;
  float: right;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
}

.show-game-list__switch-pagination .show-game-list__arrow-btn {
  flex-shrink: 0;
  width: 35px;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--f168-text-muted);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.show-game-list__switch-pagination .show-game-list__arrow-btn:hover {
  background: #f7fafc;
  color: var(--f168-text-dark);
}

.show-game-list__all-inside {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--f168-text-muted);
}

a.show-game-list__all-inside {
  text-decoration: none;
  cursor: pointer;
}

a.show-game-list__all-inside:hover {
  color: var(--primary, var(--f168-text-accent));
}

.show-game-list__switch-pagination .show-game-list__arrow-btn--left {
  padding-left: 0;
}

.show-game-list__switch-pagination .show-game-list__arrow-btn--right {
  padding-right: 0;
}

@media (max-width: 767px) {
  .show-game-list__sidebar {
    position: static;
  }

  .show-game-list__content {
    margin-left: 0;
  }

  .show-game-list__tabs {
    max-height: none;
  }
}

@media (min-width: 768px) {
  .show-game-list__wrap {
    gap: 1rem;
  }
}

/* ==========================================================================
   F168 Auth – Login / Register (user/login, user/register)
   ========================================================================== */
.f168-auth-page {
  min-height: 100vh;
  position: relative;
  background: #fff;
  padding: 0 0 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f168-auth-page__bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.f168-auth-page__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 1rem 16px 0;
  box-sizing: border-box;
}

.f168-auth-head {
  position: relative;
  text-align: center;
  padding: 0.5rem 0 1rem;
}

.f168-auth-head__back {
  position: absolute;
  top: 0.5rem;
  left: 0;
  height: 36px;
  width: 36px;
  flex-shrink: 0;
}

.f168-auth-head__back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  color: var(--f168-text-dark);
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform 0.3s linear;
}

.f168-auth-head__back-link:hover {
  color: var(--f168-text-dark);
}

.f168-auth-head__back-link.ui-arrow svg {
  width: 5em;
  height: 5em;
}

.f168-auth-head__logo {
  margin-bottom: 0.75rem;
}

.f168-auth-head__logo a {
  display: inline-block;
}

.f168-auth-head__logo-img {
  max-width: 180px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.f168-auth-head__slogan {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.5rem;
}

.f168-auth-head__slogan-text {
  flex-shrink: 0;
  text-align: left;
}

.f168-auth-head__title {
  font-size: 14px;
  color: var(--f168-text-dark);
  line-height: 1.4;
  margin-bottom: 0.15rem;
  font-weight: 600;
}

.f168-auth-head__slogan section {
  font-size: var(--text-base, 0.875rem);
  font-weight: 400;
  color: var(--f168-text-dark);
}

.f168-auth-head__signature {
  flex-shrink: 0;
}

.f168-auth-head__signature img {
  max-height: 56px;
  width: auto;
  object-fit: contain;
}

.f168-auth-head__signature--placeholder {
  width: 80px;
  height: 28px;
  background: linear-gradient(90deg, transparent 0%, var(--f168-text-dark) 50%, transparent 100%);
  opacity: 0.4;
  border-radius: 2px;
}

/* 选项卡 – 类似 F168：胶囊导航 (圆角 .35rem)，激活状态 ::after，带阴影 */
.f168-auth-tabs.ui-tabs__nav--line {
  display: flex;
  position: relative;
  height: 2.5rem;
  padding: 0;
  margin-bottom: 1.5rem;
  background-color: var(--f168-text-muted);
  border-radius: 9999px;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.f168-auth-tabs .ui-tab--line,
.f168-auth-tabs .f168-auth-tab {
  margin-left: 0;
  margin-right: 0;
}

.f168-auth-tab {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  font-size: var(--text-sm, 0.8125rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
  z-index: 1;
}

.f168-auth-tab:hover {
  color: #fff;
}

.f168-auth-tab__label {
  position: relative;
  z-index: 1;
  color: #fff;
}

/* 激活态：::after 转为橙色胶囊 (F168)，登录或注册选项卡激活时均使用橙色背景 */
.f168-auth-tab.ui-tab--active::after {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: block;
  content: "";
  background-color: hsl(var(--main, 37 100% 50%));
  border-radius: 9999px;
  z-index: 0;
  transition: left 0.25s ease, right 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 登录标签激活态 (登录页) */
.f168-auth-tab.ui-tab--active:first-child::after {
  width: calc(100% + 6px);
  right: -6px;
  left: 0;
  border-radius: 9999px;
}

/* 注册标签激活态 (注册页)：使用 nth-child(2) 因为2个标签后面还有一个 .ui-tabs__line */
.f168-auth-tab.ui-tab--active:nth-child(2)::after {
  width: calc(100% + 6px);
  left: -6px;
  right: 0;
  border-radius: 9999px;
}

.f168-auth-tabs__line {
  display: none;
}

/* Form wrap */
.f168-auth-form-wrap {
  background: #fff;
  border-radius: 16px;
  padding: 0rem;

}

.f168-auth-field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem;
  border: 1px solid var(--f168-accent);
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
}

.f168-auth-field__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: hsl(var(--main));
  font-size: 1.5rem;
}

.f168-auth-field__star-sign {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #e53e3e;
  font-size: 1rem;
  height: 44px;
  padding: 0 2px;
}

.f168-auth-field__input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 1rem 0 0;
  border: 0;
  background: transparent;
  font-size: var(--text-base, 0.875rem);
  color: var(--f168-text-dark);
  outline: none;
}

.f168-auth-field__input::placeholder {
  color: #a0aec0;
}

.f168-auth-field__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--f168-text-muted);
  cursor: pointer;
  font-size: 2.2rem;
}

.f168-auth-field__toggle:hover {
  color: hsl(var(--main));
}

.f168-auth-field--phone .f168-auth-field__prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  flex-shrink: 0;
  color: var(--f168-text-muted);
  font-size: var(--text-sm);
}

.f168-auth-field__flag {
  width: 24px;
  height: auto;
  display: block;
}

.f168-auth-field--phone .f168-auth-field__input {
  padding-left: 0.5rem;
}

.f168-auth-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.f168-auth-checkbox {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #cbd5e0;
  border-radius: 4px;
  background: #fff;
  color: #fff;
  vertical-align: middle;
}

.f168-auth-checkbox:checked {
  background: #04be02;
  border-color: #04be02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.f168-auth-remember label,
.f168-auth-remember__label {
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1em 0.35em;
  min-width: 0;
}

.f168-auth-remember__phrase {
  white-space: nowrap;
  flex-shrink: 0;
}

.f168-auth-remember__label .f168-auth-link,
.f168-auth-remember label .f168-auth-link {
  display: inline;
  white-space: nowrap;
  flex-shrink: 0;
}

/* F168 提交按钮: ui-button (类似 commonChunk/Fragment) */
@keyframes f168-btn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 139, 0, 0.35);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(252, 139, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(252, 139, 0, 0);
  }
}

@keyframes f168-btn-scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.07998);
  }

  100% {
    transform: scale(1);
  }
}

.f168-auth-submit-wrap {
  margin-bottom: 1rem;
}

.f168-auth-form .ui-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  height: 2.75rem;
  padding: 0;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  border-radius: 5rem;
  cursor: pointer;
  transition: opacity 0.2s;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: auto;
  color: #fff;
  background: hsl(var(--main));
  border: 1px solid hsl(var(--main));
  overflow: visible;
  animation: f168-btn-scale 1.5s ease-in-out infinite;
}

.f168-auth-form .ui-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
  border: none;
  pointer-events: none;
  animation: f168-btn-pulse 1.5s ease-in-out infinite;
}

.f168-auth-form .ui-button--primary {
  color: #fff;
  background: hsl(var(--main));
  border-color: hsl(var(--main));
}

.f168-auth-form .ui-button--normal {
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 1rem;
}

.f168-auth-form .ui-button--block {
  display: block;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.f168-auth-form .ui-button:hover {
  opacity: 0.95;
}

.f168-auth-form .ui-button:active {
  opacity: 0.9;
}

.f168-auth-form .ui-button__content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.f168-auth-form .ui-button__text {
  color: #fff;
  word-break: break-word;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.f168-auth-btn {
  display: block;
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  background: hsl(var(--main));
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.05s;
  margin-bottom: 1rem;
}

.f168-auth-btn:hover {
  color: #fff;
  opacity: 0.95;
}

.f168-auth-btn:active {
  transform: scale(0.99);
}

.f168-auth-btn--sm {
  display: inline-block;
  width: auto;
  padding: 0.5rem 1.25rem;
  margin-bottom: 0;
}

.f168-auth-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.25rem;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.f168-auth-links--row {
  justify-content: space-between;
}

.f168-auth-links--quick-entry {
  gap: 7rem;
  margin-top: 1rem;
  justify-content: center;
}

.f168-auth-links--quick-entry .f168-auth-links__item {
  flex: 0 0 auto;
}

.f168-auth-links__item {
  font-size: 13px;
  font-weight: 500;
}

.f168-auth-links__link {
  color: var(--f168-text-accent);
  text-decoration: none;
  display: block;
  font-size: 13px;
  text-align: center;
}

.f168-auth-links__link:hover {
  color: var(--f168-text-accent);
  text-decoration: underline;
}

.f168-auth-links__inner {
  display: inline-block;
  color: var(--f168-text-accent);
  font-size: 13px;
  text-align: center;
}

/* 登录页面: 直接使用 a 标签为列表项 */
.f168-auth-links>a.f168-auth-links__item {
  color: var(--f168-text-accent);
  text-decoration: none;
  font-size: 13px;
  text-align: center;
}

.f168-auth-links>a.f168-auth-links__item:hover {
  color: var(--f168-text-accent);
  text-decoration: underline;
}

.f168-auth-quick {
  text-align: center;
  margin: 1rem 0;
}

.f168-auth-quick__title {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.f168-auth-quick__label {
  position: relative;
  padding: 0 2.9rem;
  font-size: var(--text-xs, 0.75rem);
  color: var(--f168-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.f168-auth-quick__label::before,
.f168-auth-quick__label::after {
  position: absolute;
  top: 50%;
  width: 2.7rem;
  height: 1px;
  background-color: var(--skin__border, #e2e8f0);
  transform: translateY(-50%);
  content: "";
}

.f168-auth-quick__label::before {
  left: 0;
}

.f168-auth-quick__label::after {
  right: 0;
}

[dir="rtl"] .f168-auth-quick__label::before {
  left: auto;
  right: 0;
}

[dir="rtl"] .f168-auth-quick__label::after {
  right: auto;
  left: 0;
}

.f168-auth-quick__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.f168-auth-quick__list[data-align="center"] {
  width: 100%;
}

.f168-auth-quick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.f168-auth-quick__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--skin__border, #e2e8f0);
  background: #fff;
  color: hsl(var(--main));
  font-size: 1.5rem;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px 0 var(--skin__web_left_bg_shadow, rgba(0, 0, 0, 0.06));
}

.f168-auth-quick__icon:hover {
  border-color: hsl(var(--main) / 0.5);
  background: hsl(var(--main) / 0.06);
}

.f168-auth-quick__icon--webauthn {
  color: var(--f168-accent-secondary);
}

.f168-auth-quick__icon--webauthn:hover {
  border-color: var(--f168-accent-secondary);
  background: rgba(230, 126, 34, 0.08);
  color: var(--f168-text-accent);
}

.f168-auth-quick__icon--google {
  color: #4285f4;
}

.f168-auth-quick__icon--google:hover {
  border-color: #4285f4;
  background: rgba(66, 133, 244, 0.1);
}

.f168-auth-quick__icon--disabled {
  cursor: default;
  opacity: 0.65;
  pointer-events: none;
}

.f168-auth-quick__icon--disabled:hover {
  border-color: var(--skin__border, #e2e8f0);
  background: #fff;
}

.f168-auth-quick__icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* single quick icon (e.g. register page) */
.f168-auth-quick--single {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.f168-auth-quick--single .f168-auth-quick__icon {
  box-shadow: 0 2px 6px 0 var(--skin__web_left_bg_shadow, rgba(0, 0, 0, 0.06));
}

/* Password strength */
/* 密码强度：标签 + 4个条形同行显示 (参考 f168 EntryLoginRegisterChunk) */
.f168-auth-strength {
  margin-bottom: 1rem;
}

.f168-auth-strength__row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0;
}

.f168-auth-strength__label {
  font-size: var(--text-xs);
  color: var(--skin__lead, var(--f168-text-muted));
  margin-right: 0.25rem;
  flex-shrink: 0;
}

.f168-auth-strength__bar {
  height: 0.3rem;
  min-width: 0.8rem;
  flex: 1;
  max-width: 2.8rem;
  background: var(--skin__border, #e2e8f0);
  border-radius: 1rem;
  transition: background 0.2s, border-color 0.2s;
  border: 1px solid transparent;
}

.f168-auth-strength__bar--level-1 {
  background: var(--skin__accent_2, #e53e3e) !important;
  border-color: var(--pwd-strength_lump-border-1, transparent);
}

.f168-auth-strength__bar--level-2 {
  background: var(--skin__accent_3, #dd6b20) !important;
  border-color: var(--pwd-strength_lump-border-2, transparent);
}

.f168-auth-strength__bar--level-3 {
  background: hsl(var(--main));
  border-color: var(--pwd-strength_lump-border-3, transparent);
}

.f168-auth-strength__bar--level-4 {
  background: var(--skin__accent_1, #38a169) !important;
  border-color: var(--pwd-strength_lump-border-4, transparent);
}

.f168-auth-note {
  font-size: var(--text-xs);
  color: #c53030;
  margin: -0.5rem 0 1rem;
  padding: 0 0.25rem;
}

.f168-auth-note--image {
  padding: 0;
  margin: 0rem;
}

.f168-auth-note--image .lobby-form-item__explain-text {
  display: block;
}

.f168-auth-note__img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.f168-auth-link {
  color: hsl(var(--main));
  text-decoration: none;
  font-weight: 400;
}

.f168-auth-link:hover {
  text-decoration: underline;
}

.f168-auth-bound {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.f168-auth-bound__line {
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.f168-auth-bound__text {
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  white-space: nowrap;
}

.f168-auth-have-account {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--f168-text-muted);
  margin-bottom: 1rem;
}

.f168-auth-have-account .f168-auth-link {
  margin-left: 0.25rem;
}

.f168-auth-disabled {
  text-align: center;
  padding: 2rem;
  color: var(--f168-text-muted);
}

.f168-auth-disabled__icon {
  font-size: 3rem;
  color: #cbd5e0;
  display: block;
  margin-bottom: 0.5rem;
}

/* Captcha in auth */
.f168-auth-form .form-group {
  margin-bottom: 1rem;
}

/* 页脚：页面底部的全宽图片 */
.f168-auth-footer {
  margin-top: auto;
  width: 100%;
  
}

.f168-auth-footer__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: middle;
}

/* F168 app download banner: pill shape, orange border, yellow icons */
.f168-auth-app-banner {
  position: relative;
  display: flex;
  text-decoration: none;
  color: inherit;
  align-items: center;
  justify-content: center;
  gap: 0rem;
  padding: 0rem;
  margin: 0rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 4.2rem;
  overflow: hidden;
  font-weight: 700;
  font-size: 0.7rem;
  /* 窄屏下 contain 留边时用浅色底，避免与表单白底反差过大 */

}

.f168-auth-app-banner__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 小宽度用 cover 会裁切左右图标；contain 整图缩放入内框 */
  object-fit: contain;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

[dir="rtl"] .f168-auth-app-banner__bg {
  left: auto;
  right: 0;
}

.f168-auth-app-banner__text {
  position: relative;
  z-index: 1;
  text-align: center;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}

.f168-auth-app-banner__title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--f168-accent-secondary);
  line-height: 1.25;
  padding-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 380px) {
  .f168-auth-app-banner__title {
    white-space: normal;
    line-height: 1.2;
  }
}

.f168-auth-app-banner__sub {
  font-size: 0.6rem;
  font-weight: 400;
  color: var(--skin__neutral_1, var(--f168-text-muted));
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 380px) {
  .f168-auth-app-banner__sub {
    white-space: normal;
  }
}

/* 极窄屏：整体略缩小，减轻文字与底图拥挤感 */
@media (max-width: 359.98px) {
  .f168-auth-app-banner {
    min-height: 3.6rem;
  }

  .f168-auth-app-banner__title {
    font-size: 0.62rem;
    padding-bottom: 0.12rem;
  }

  .f168-auth-app-banner__sub {
    font-size: 0.52rem;
    line-height: 1.25;
  }
}

@media (min-width: 576px) {
  .f168-auth-page__inner {
    padding: 1.5rem 1rem 0;
  }

  .f168-auth-head__logo-img {
    max-width: 200px;
  }
}

/* 日期时间 (日期 + 时间前) 以白色显示 */
.date-time-cell {
  color: #fff !important;
}

/* ===== SIDEBAR POPUP (clone f1686s.com left drawer) ===== */

/* 页眉强制悬浮在遮罩层之上，避免变暗 */
.header.header-f168 {
  position: relative;
  z-index: 2003;
  position: fixed;
}

/* Backdrop */
.sidebar-popup__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2002;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-popup__backdrop.is-open {
  display: block;
  animation: sidebarFadeIn 0.22s ease;
}

/* 面板（比页眉高，以便在打开时滑动覆盖） */
.sidebar-popup {
  position: fixed;
  top: 52px;
  left: 0;
  bottom: 0;
  width: 190px;
  max-width: 88vw;
  background: #fff;
  z-index: 2004;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 5px;
  overflow: hidden;
  outline: none;
}

.sidebar-popup.is-open {
  transform: translateX(0);
}

/* 内部滚动（隐藏滚动条，仍可滚动） */
.sidebar-popup__inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 12px 10px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-popup__inner::-webkit-scrollbar {
  display: none;
}

/* Search bar */
.sidebar-popup__search-board {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #fff, var(--f168-accent-12)), linear-gradient(to bottom, #f5f5f5, transparent);
  border-radius: 22px;
  padding: 6px;
  text-decoration: none;
  border: 1px solid #e8eaed;
  margin-bottom: 2px;
  transition: border-color 0.15s;
}

.sidebar-popup__search-board:hover {
  border-color: var(--f168-accent);
}

.sidebar-popup__search-text {
  color: #9ba3af;
  font-size: 0.875rem;
  font-weight: 400;
}

.sidebar-popup__search-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Card wrapper */
.sidebar-popup__card {}

/* Section title */
.sidebar-popup__section-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--f168-text-muted);
  padding: 8px 12px 2px;
}

/* Menu list */
.sidebar-popup__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

/* Menu item */
.sidebar-popup__menu-item {
  position: relative;
}

.sidebar-popup__menu-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px 10px;
  text-decoration: none;
  gap: 1px;
  min-height: 55px;
  transition: background 0.15s;
  border-radius: 8px;
  border: .02rem solid transparent;
  background: linear-gradient(180deg, #fff, var(--f168-accent-12)), linear-gradient(to bottom, #f5f5f5, transparent);

  background-origin: border-box;
  max-height: 17px;
  border: 0.1rem solid #ededed8c;
}

.sidebar-popup__menu-link:hover {
  background: var(--f168-accent-07);
}

.sidebar-popup__menu-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-popup__menu-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sidebar-popup__menu-text {
  text-align: center;
}

.sidebar-popup__menu-text span {
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--f168-text-muted);
  line-height: 1.3;
  word-break: break-word;
}

.sidebar-popup__menu-link:hover .sidebar-popup__menu-text span {
  color: var(--f168-accent);
}

/* 优惠中心（参考 f1686s：2列网格，背景图，白字，88% 徽章） */
.sidebar-popup__promo-list {
  grid-template-columns: 1fr 1fr;
  gap: 7px;


  background: transparent;
}

.sidebar-popup__promo-title {
  grid-column: 1 / -1;
  width: 100%;
  display: block;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--f168-text-dark);

  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.sidebar-popup__promo-item {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  max-height: 70px;
}

.sidebar-popup__promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  z-index: 0;
  border-radius: 10px;
}

.sidebar-popup__promo-link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 8px 6px 10px;
  text-decoration: none;
  gap: 0;
}

.sidebar-popup__promo-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.sidebar-popup__promo-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.sidebar-popup__promo-text {
  margin: 0;
  padding: 0 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff !important;

  word-break: break-word;
}

.sidebar-popup__promo-text span {
  color: inherit;
}

.sidebar-popup__promo-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--f168-accent-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 徽章 (如有需要可用于其他地方) */
.sidebar-popup__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--f168-accent-secondary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 6px;
  z-index: 2;
  line-height: 1.3;
}

/* 其它列表 (VIP, 推荐朋友) */
/* VIP & 推荐朋友: 全宽, 上下排列, 渐变背景, 左图标右文字 */
.sidebar-popup__other-list {
  grid-template-columns: 1fr;
  gap: 5px;
  background: transparent;
  border: none;

}

.sidebar-popup__other-list .sidebar-popup__menu-item {
  margin: 0;
}

.sidebar-popup__other-list .sidebar-popup__menu-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 46px;
  padding: 0px;
  gap: 12px;
  border: 2px solid transparent;
  background: linear-gradient(180deg, #fff, var(--f168-accent-12)), linear-gradient(to bottom, #f5f5f5, transparent);
  border-radius: 10px;
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.sidebar-popup__other-list .sidebar-popup__menu-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin: 0;
}

.sidebar-popup__other-list .sidebar-popup__menu-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.sidebar-popup__other-list .sidebar-popup__menu-text {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.sidebar-popup__other-list .sidebar-popup__menu-text span {
  font-size: 12px;
  font-weight: 400;
  color: #7c7878;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.sidebar-popup__other-list .sidebar-popup__menu-link:hover .sidebar-popup__menu-text span {
  color: var(--f168-accent);
}

/* 品牌大使 (参照 f1686s: 标题 → 图片 → 横向信息列) */
.sidebar-popup__brand {}

.sidebar-popup__brand-title {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--f168-text-dark) !important;
  line-height: 1.5;

  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
}

.sidebar-popup__brand-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  margin-bottom: 10px;
}

.sidebar-popup__brand-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0;
  min-width: 0;
}

.sidebar-popup__brand-details {
  flex-shrink: 0;
  min-width: 0;
}

.sidebar-popup__brand-name {
  display: block !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--f168-text-dark) !important;
  margin: 0 0 2px !important;
  line-height: 1.3;
}

.sidebar-popup__brand-details p {
  font-size: 11px !important;
  color: var(--f168-text-muted) !important;
  margin: 0 !important;
  line-height: 1.4;
}

.sidebar-popup__brand-sign {

  height: auto;
  max-height: 30px;
  object-fit: contain;
  object-position: right center;
  flex-shrink: 0;
  display: block;
}

@keyframes sidebarFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ===== PAGE TRANSITION (View Transitions API) ===== */
@view-transition {
  navigation: auto;
}

/* Forward navigation: old page slides out left, new page slides in from right */
::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 1, 1) both vt-slide-out-left;
}

::view-transition-new(root) {
  animation: 280ms cubic-bezier(0, 0, 0.2, 1) both vt-slide-in-right;
}

/* Back navigation: old page slides out right, new page slides in from left */
html.nav-back::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 1, 1) both vt-slide-out-right;
}

html.nav-back::view-transition-new(root) {
  animation: 280ms cubic-bezier(0, 0, 0.2, 1) both vt-slide-in-left;
}

@keyframes vt-slide-out-left {
  to {
    transform: translateX(-25%);
    opacity: 0;
  }
}

@keyframes vt-slide-in-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes vt-slide-out-right {
  to {
    transform: translateX(100%);
  }
}

@keyframes vt-slide-in-left {
  from {
    transform: translateX(-25%);
    opacity: 0;
  }
}

/* ===== CAT SLOT PAGE (clone subgame lobby) ===== */
.cat-slot-page {
  min-height: 100vh;
  background: #f3f3f3;
  color: #2d2d2d;
}

.cat-slot-page__header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #e2e2e2;
}

.cat-slot-page__back,
.cat-slot-page__header-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.cat-slot-page__back {
  color: #747474;
  font-size: 28px;
  text-decoration: none;
}

.cat-slot-page__title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: #1f1f1f;
}

.cat-slot-page__section-content {
  padding: 14px 12px 18px;
}

.cat-slot-page__search-layout {
  margin-bottom: 12px;
}

.cat-slot-page__search-bar {
  display: flex;
  align-items: center;
  height: 34px;
  background: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cat-slot-page__search-input {
  flex: 1;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 14px;
  font-size: 14px;
  color: var(--f168-text-dark);
}

.cat-slot-page__search-input::placeholder {
  color: #b9b9b9;
}

.cat-slot-page__search-icon {
  width: 42px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--f168-text-accent);
  font-size: 22px;
}

.cat-slot-page__core-content {
  min-height: calc(100vh - 122px);
}

.cat-slot-page__core-area {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.cat-slot-page__left {
  position: sticky;
  top: 74px;
}

.cat-slot-page__provider-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.cat-slot-page__provider-nav::-webkit-scrollbar {
  display: none;
}

.cat-slot-page__provider-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 70px;
  width: 100%;
  padding: 10px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.cat-slot-page__provider-item.is-active {
  background: linear-gradient(180deg, var(--f168-accent-secondary) 0%, var(--f168-accent) 100%);
  border-color: var(--f168-text-accent);
  box-shadow: 0 6px 16px var(--f168-accent-25t);
}

.cat-slot-page__provider-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  padding: 0 4px;
  font-size: 23px;
  line-height: 1;
  font-weight: 800;
  color: #1e1e1e;
  text-transform: uppercase;
}

.cat-slot-page__provider-item:not(.is-active) .cat-slot-page__provider-logo {
  font-size: 20px;
  color: #393939;
}

.cat-slot-page__provider-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
}

.cat-slot-page__provider-logo-img {
  width: 48px;
  height: 32px;
  object-fit: contain;
  object-position: center;
}

.cat-slot-page__provider-logo--bg,
.cat-slot-page__provider-logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 24px;
  padding: 0 4px;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
  color: #393939;
  text-transform: uppercase;
}

.cat-slot-page__provider-item.is-active .cat-slot-page__provider-logo--fallback {
  color: #111111;
}

.cat-slot-page__provider-logo--bg {
  width: 48px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-indent: -9999px;
  overflow: hidden;
}

.cat-slot-page__provider-name {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  color: #2f2f2f;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-slot-page__provider-item.is-active .cat-slot-page__provider-name {
  color: #111111;
  font-weight: 700;
}

.cat-slot-page__provider-more {
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--f168-text-accent);
  font-size: 22px;
}

.cat-slot-page__right {
  min-width: 0;
}

.cat-slot-page__right-header {
  margin-bottom: 14px;
}

.cat-slot-page__scene-tabs {
  display: flex;
  gap: 10px;
}

.cat-slot-page__scene-tab {
  min-width: 96px;
  height: 38px;
  padding: 0 5px;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  background: #f9f9f9;
  color: var(--f168-text-muted);
  font-size: 14px;
  font-weight: 400;
}

.cat-slot-page__scene-tab.is-active {
  background: linear-gradient(180deg, var(--f168-accent-secondary) 0%, var(--f168-accent) 100%);
  border-color: var(--f168-text-accent);
  color: #111111;
}

.cat-slot-page__right-body {
  min-height: 520px;
}

.cat-slot-page__game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.cat-slot-page__game-card {
  min-width: 0;
}

.cat-slot-page__game-media {
  position: relative;
}

/* 类似主页: poster-box-core__thumb 包含 img + 热门标签 + 收藏图标 */
.cat-slot-page__game-media.poster-box-core__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.cat-slot-page__game-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.cat-slot-page__game-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}

.cat-slot-page__game-name {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  color: #4a4a4a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 热门与收藏图标：类似主页 (show-game-list__label-hot + show-game-list__favorite-icon) */
.cat-slot-page__badge-hot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  border-radius: 12px 0 10px 0;
  background: linear-gradient(180deg, var(--f168-accent-grad-mid) 0%, var(--f168-accent) 100%);
  color: #ffffff;
  font-size: 12px;
  box-shadow: 0 2px 4px var(--f168-accent-35t);
}

.cat-slot-page__game-media .cat-slot-page__badge-hot.show-game-list__label-hot {
  --label-icon-width: calc(var(--card-benchmark, 5rem) * 0.51);
  --label-icon-height: calc(var(--card-benchmark, 5rem) * 0.42);
  top: -0.06rem;
  left: -0.2rem;
  z-index: 8;
  width: var(--label-icon-width);
  height: var(--label-icon-height);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  color: transparent;
}

.cat-slot-page__favorite-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: #b9b9b9;
  font-size: 13px;
}

.cat-slot-page__game-media .cat-slot-page__favorite-btn.show-game-list__favorite-icon {
  top: 0.2rem;
  right: 0.2rem;
  z-index: 9;
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.3);
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: auto;
}

.cat-slot-page__favorite-btn.is-active {
  color: var(--f168-text-accent);
}

.cat-slot-page__game-media .cat-slot-page__favorite-btn.show-game-list__favorite-icon.is-active {
  color: transparent;
  /* 收藏状态: 可使用不同的图片或保留背景图 */
}

.cat-slot-page__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 280px;
  color: var(--f168-text-muted);
  font-size: 14px;
}

.cat-slot-page__empty i {
  font-size: 30px;
  color: var(--f168-text-accent);
}

.cat-slot-page__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.cat-slot-page__footer.is-hidden {
  display: none;
}

.cat-slot-page__pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-slot-page__page-dots {
  color: #9a9a9a;
  font-size: 14px;
}

.cat-slot-page__page-btn,
.cat-slot-page__page-arrow {
  min-width: 34px;
  height: 34px;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #ffffff;
  color: #4d4d4d;
  font-size: 14px;
  transition: all 0.2s ease;
}

.cat-slot-page__page-btn.is-active {
  border-color: var(--f168-text-accent);
  background: linear-gradient(180deg, var(--f168-accent-secondary) 0%, var(--f168-accent) 100%);
  color: #111111;
}

.cat-slot-page__page-arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  .cat-slot-page__core-area {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 8px;
  }

  .cat-slot-page__provider-item {
    min-height: 66px;
    border-radius: 12px;
  }

  .cat-slot-page__provider-logo {
    font-size: 18px;
  }

  .cat-slot-page__provider-name {
    font-size: 11px;
  }

  .cat-slot-page__scene-tab {
    min-width: 82px;
    padding: 0 12px;
    font-size: 13px;
  }

  .cat-slot-page__game-grid {
    gap: 10px;
  }

  .cat-slot-page__game-name {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .cat-slot-page {
    max-width: 980px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  }

  .cat-slot-page__section-content {
    padding: 18px 16px 24px;
  }

  .cat-slot-page__core-area {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 14px;
  }

  .cat-slot-page__provider-item {
    min-height: 76px;
  }

  .cat-slot-page__game-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============================================
   游戏全屏模态框 – 打开游戏时隐藏页眉和页脚
   ============================================ */
body.game-fullscreen-active .header,
body.game-fullscreen-active .header.header-f168,
body.game-fullscreen-active .footer-fix-bar {
  display: none !important;
}

/* 确保游戏模态框位于所有元素的最上层 */
#hotGameLaunchModal,
#apiGameLaunchModal,
#catSlotLaunchModal {
  z-index: 2100 !important;
}

#hotGameLaunchModal+.modal-backdrop,
#apiGameLaunchModal+.modal-backdrop,
#catSlotLaunchModal+.modal-backdrop {
  z-index: 2099 !important;
}

/* ============================================
   游戏浮动按钮 (FAB) – F168 样式
   收起态: 左边缘的小返回箭头
   展开态: 三个纵列按钮 (首页, 充值, 关闭)
   ============================================ */
.game-fab {
  position: fixed;
  top: 30px;
  left: 0;
  transform: none;
  z-index: 99999;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: none;
}

/* 仅当全屏游戏在运行时显示浮动操作按钮 (FAB) */
body.game-fullscreen-active .game-fab {
  display: block;
}

/* --- 收起态：小箭头按钮 --- */
.game-fab__collapsed {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 64px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0 32px 32px 0;
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
  -webkit-tap-highlight-color: transparent;
  /* 通过透明边距增加点击区域 */
  padding: 8px 12px 8px 4px;
  box-sizing: content-box;
}

.game-fab__collapsed:hover {
  background: rgba(0, 0, 0, 0.6);
}

.game-fab__collapsed:active {
  background: rgba(0, 0, 0, 0.7);
}

.game-fab__collapsed svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  opacity: 0.85;
  transform: rotate(180deg);
  transition: transform 0.2s;
}

/* 折叠面板在展开面板出现时隐藏 */
.game-fab.is-expanded .game-fab__collapsed {
  display: none;
}

/* --- 展开态：3个垂直按钮 --- */
.game-fab__expanded {
  display: none;
  flex-direction: column;
  gap: 2px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 0 16px 16px 0;
  padding: 6px 4px 6px 2px;
  animation: gameFabSlideIn 0.2s ease-out;
}

.game-fab.is-expanded .game-fab__expanded {
  display: flex;
}

@keyframes gameFabSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- 展开菜单中的每一项 --- */
.game-fab__drag-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 14px;
  opacity: 0.5;
  pointer-events: none;
}

.game-fab__drag-hint svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.game-fab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.game-fab__item:hover {
  background: rgba(255, 255, 255, 0.15);
}

.game-fab__item:active {
  transform: scale(0.9);
}

.game-fab__item svg {
  width: 24px;
  height: 24px;
  fill: #fff;
}

/* 高亮：主页按钮 */
.game-fab__item--home svg {
  fill: var(--f168-accent);
}

/* 高亮：关闭游戏按钮 (X) */
.game-fab__item--back svg {
  fill: #FF5252;
}

/* 折叠按钮（箭头） */
.game-fab__item--close svg {
  fill: #fff;
}

/* 保留备用的旧 game-modal-close-btn 并将其隐藏 */
.game-modal-close-btn {
  display: none !important;
}

/* Back to Top CSS */
.c-back-to-top {
  position: fixed;
  right: 5px;
  bottom: 85px;
  z-index: 900;
  visibility: hidden;
  opacity: 0.5;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out, transform 0.15s ease-out;
  transform: translateY(20px);
  cursor: pointer;
}

@media (min-width: 480px) {
  .c-back-to-top {
    right: calc(50% - 225px);
  }
}

.c-back-to-top.show {
  visibility: visible;
  opacity: 0.9;
  transform: translateY(0);
}

.c-back-to-top__inner {
  width: 55px;
  height: 55px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #e1e1e1;
}

.c-back-to-top__icon {
  width: 24px;
  height: 24px;
  background: var(--f168-accent);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #212529;
  font-size: 14px;
}

.c-back-to-top__icon svg {
  width: 12px;
  height: auto;
}

.c-back-to-top__text {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
  font-weight: 500;
}

/* ==========================================================================
   回到顶部按钮：滚动时向内缩进
   ========================================================================== */
body.is-scrolling .c-back-to-top.show {
  transform: translateY(0) translateX(70%);
  opacity: 0.6;
}

/* ==========================================================================
   报告页面 – 账户，投注历史，报告，找回余额
   ========================================================================== */

.report-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.report-page__wrap {
  --rp-primary: var(--f168-accent);
  --rp-text: var(--f168-text-dark);
  --rp-text-secondary: var(--f168-text-muted);
  --rp-border: #ebebeb;
  --rp-bg: #fff;
  --rp-deposit: #00c373;
  --rp-withdraw: #ea4e3d;
  --rp-promo: var(--f168-accent);
  background: #f5f5f5;
  min-height: 100vh;
}

.report-body {
  padding: 0;
}

/* ---- 信息卡（余额 + 回收按钮） ---- */
.rp-account__top {
  background: #fff;
  padding: 14px 16px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rp-border);
}

.rp-account__info-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.rp-account__balance-wrap {
  flex: 1;
}

.rp-account__balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rp-account__balance-label {
  font-size: 12px;
  color: var(--rp-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.rp-account__balance-value {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rp-account__balance-num {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--rp-primary);
  letter-spacing: 0.5px;
}

.rp-account__refresh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rp-primary);
  font-size: 1rem;
  animation: rp-spin 2s linear infinite;
}

@keyframes rp-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rp-account__recover-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--rp-primary);
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.rp-account__recover-btn:hover {
  opacity: 0.75;
}

.rp-account__recover-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  transform: scaleX(-1);
}

.rp-account__tips {
  font-size: 12px;
  color: var(--rp-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ---- 过滤器 ---- */
.rp-account__filters {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  /* 始终单行 */
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--rp-border);
  overflow-x: auto;
  /* Scroll ngang */
  overflow-y: visible;
  /* 确保下拉菜单不被垂直剪切 */
  white-space: nowrap;
  scrollbar-width: none;
  /* 隐藏 Firefox 滚动条 */
  -ms-overflow-style: none;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  /* Smooth scroll iOS */
}

.rp-account__filters::-webkit-scrollbar {
  display: none;
}

.rp-filter-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--rp-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--rp-text);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.rp-filter-select:hover {
  border-color: var(--rp-primary);
  color: var(--rp-primary);
}

.rp-filter-select__label {
  font-size: 12px;
}

.rp-filter-select__arrow {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  color: var(--rp-text-secondary);
}

/* ---- Data list / Empty state ---- */
.rp-account__data-list {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-bottom: 0;
  padding: 24px 16px;
}

.rp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.rp-empty-state__img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  opacity: 0.85;
}

.rp-empty-state__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--rp-text-secondary);
}

.rp-empty-state__date {
  font-weight: 500;
  color: var(--rp-text);
}

.rp-empty-state__more {
  color: var(--rp-primary);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

/* ---- 页脚总结 ---- */
.rp-account__footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--rp-border);
  position: sticky;
  bottom: 70px;
  z-index: 10;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.06);
}

.rp-account__footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.rp-account__footer-item+.rp-account__footer-item {
  border-left: 1px solid var(--rp-border);
}

.rp-account__footer-label {
  font-size: 11px;
  color: var(--rp-text-secondary);
}

.rp-account__footer-value {
  font-size: 14px;
  font-weight: 600;
}

.rp-account__footer-value--deposit {
  color: var(--rp-deposit);
}

.rp-account__footer-value--withdraw {
  color: var(--rp-withdraw);
}

.rp-account__footer-value--promo {
  color: var(--rp-promo);
}

/* ---- Dropdown filter wrapper ---- */
.rp-filter-dropdown {
  position: relative;
  flex-shrink: 0;
}

/* 覆盖: 当有行数据时，data-list在table模式下不居中 */
.rp-account__data-list--table {
  display: block;
  padding: 0;
  min-height: 200px;
}

/* ---- Dropdown menu (pill select) ---- */
.rp-filter-menu {
  display: none;
  position: fixed;
  /* 跳出所有 overflow 父级限制 */
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--rp-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 9999;
  /* 层级始终在一切上方 */
  overflow: hidden;
}

.rp-filter-menu.open {
  display: block;
}

.rp-filter-menu__item {
  padding: 11px 16px;
  font-size: 13px;
  color: var(--rp-text);
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid #f5f5f5;
}

.rp-filter-menu__item:last-child {
  border-bottom: none;
}

.rp-filter-menu__item:hover {
  background: var(--f168-accent-12);
  color: var(--rp-primary);
}

.rp-filter-menu__item.active {
  color: var(--rp-primary);
  font-weight: 600;
  background: var(--f168-accent-22);
}

/* ---- Transaction list ---- */
.rp-tx-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rp-tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rp-border);
  background: #fff;
  gap: 12px;
  transition: background 0.12s;
}

.rp-tx-item:last-child {
  border-bottom: none;
}

.rp-tx-item:active {
  background: #fafafa;
}

.rp-tx-item__left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.rp-tx-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.rp-tx-item__icon--deposit {
  background: #e8faf0;
  color: #00c373;
}

.rp-tx-item__icon--withdrawal {
  background: #fff0ee;
  color: #ea4e3d;
}

.rp-tx-item__icon--promotion {
  background: linear-gradient(135deg, var(--f168-accent-22) 0%, var(--f168-accent-grad-mid) 100%);
  color: var(--f168-accent);
  box-shadow: 0 2px 8px var(--f168-accent-35t);
}

.rp-tx-item__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.rp-tx-item__type {
  font-size: 13px;
  font-weight: 600;
  color: var(--rp-text);
}

.rp-tx-item__method {
  font-size: 11px;
  color: var(--rp-text-secondary);
}

.rp-tx-item__trx {
  font-size: 10px;
  color: #aaa;
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.rp-tx-item__date {
  font-size: 11px;
  color: #bbb;
}

.rp-tx-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.rp-tx-item__amount {
  font-size: 15px;
  font-weight: 700;
}

.rp-tx-item__amount--deposit {
  color: #00c373;
}

.rp-tx-item__amount--withdrawal {
  color: #ea4e3d;
}

.rp-tx-item__status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
}

.rp-tx-item__status--success {
  background: #e8faf0;
  color: #00c373;
}

.rp-tx-item__status--pending {
  background: var(--f168-accent-12);
  color: var(--f168-text-accent);
}

.rp-tx-item__status--rejected {
  background: #fff0ee;
  color: #ea4e3d;
}