/**
 * Leyu design system — single consolidated stylesheet.
 * Formerly: tokens/base/utilities/components/layout/shell/legacy + pages/*.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ========== TOKENS ========== */
/**
 * Leyu Design Tokens — single source of truth for colors, typography, spacing.
 */
:root {
  /* Brand */
  --leyu-primary: #02B457;
  --leyu-primary-light: #57FFAE;
  --leyu-primary-dark: #009A47;
  --leyu-accent-cyan: #00D07D;

  /* Legacy greens mapped to brand (do not use in new code) */
  --leyu-legacy-green-a: #00c05b;
  --leyu-legacy-green-b: #28a745;

  /* Semantic */
  --leyu-success: var(--leyu-primary);
  --leyu-danger: #FF6B6B;
  --leyu-warning: #F6A200;
  --leyu-info: #007bff;
  --leyu-text: #1a1a1a;
  --leyu-text-secondary: #333333;
  --leyu-text-muted: #4b5563;
  --leyu-text-subtle: #6b7280;
  --leyu-bg: #FFFFFF;
  --leyu-bg-subtle: #F8F9FA;
  --leyu-bg-muted: #f6f6f6;
  --leyu-bg-input: #e0fadd;
  --leyu-border: #EEEEEE;
  --leyu-border-light: #eee;

  /* Typography */
  --leyu-font: 'Poppins', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --leyu-font-size-xs: 10px;
  --leyu-font-size-sm: 12px;
  --leyu-font-size-base: 14px;
  --leyu-font-size-md: 16px;
  --leyu-font-size-lg: 18px;
  --leyu-font-weight-normal: 400;
  --leyu-font-weight-medium: 500;
  --leyu-font-weight-semibold: 600;
  --leyu-font-weight-bold: 700;
  --leyu-line-height-tight: 1.2;
  --leyu-line-height-normal: 1.5;
  --leyu-letter-spacing: 0.24px;

  /* Layout */
  --leyu-bp-desktop: 1025px;
  --leyu-bp-mobile-max: 1024px;
  --leyu-mobile-nav-height: 72px;
  --leyu-container-max: 1200px;
  --leyu-radius-sm: 8px;
  --leyu-radius-md: 12px;
  --leyu-radius-lg: 20px;
  --leyu-radius-pill: 999px;

  /* Spacing */
  --leyu-space-xs: 8px;
  --leyu-space-sm: 12px;
  --leyu-space-md: 16px;
  --leyu-space-lg: 24px;
  --leyu-space-xl: 32px;

  /* Shadows */
  --leyu-shadow-sm: 0 2px 8px rgba(2, 180, 87, 0.08);
  --leyu-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Motion */
  --leyu-transition-fast: 0.2s cubic-bezier(0.32, 0.72, 0, 1);
  --leyu-transition-base: 0.25s ease;
}

/* ========== BASE ========== */
/**
 * Leyu base styles — typography, body, form resets.
 */

@viewport {
  width: device-width;
  initial-scale: 1.0;
}

html,
body {
  overscroll-behavior: none;
}

body {
  font-family: var(--leyu-font);
  color: var(--leyu-text);
  background-color: var(--leyu-bg);
  padding-top: 0;
  overflow-x: hidden;
}

hr {
  margin: 0;
}

label,
.title,
.content {
  font-size: var(--leyu-font-size-lg);
  font-weight: var(--leyu-font-weight-normal);
  letter-spacing: var(--leyu-letter-spacing);
  margin-bottom: 10px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="file"]::file-selector-button {
  display: none;
}

.loading-bar {
  display: inline-block;
  width: 80px;
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg,
      rgba(200, 200, 200, 0.2) 0%,
      rgba(150, 150, 150, 0.4) 50%,
      rgba(200, 200, 200, 0.2) 100%);
  background-size: 200% 100%;
  animation: leyu-loading-bar-anim 5s linear infinite;
}

@keyframes leyu-loading-bar-anim {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-bar {
    animation: none;
  }
}

/* ========== UTILITIES ========== */
/**
 * Leyu utility classes — responsive visibility, mobile shell helpers.
 */
.leyu-desktop-only {
  display: none !important;
}

@media (min-width: 1025px) {
  .leyu-mobile-only {
    display: none !important;
  }

  .leyu-desktop-only {
    display: block !important;
  }

  .leyu-desktop-only.d-flex,
  .leyu-desktop-only.flex,
  .d-flex.leyu-desktop-only {
    display: flex !important;
  }
}

.leyu-mobile-page {
  padding-bottom: calc(var(--leyu-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 1024px) {

  .leyu-mobile-page,
  .figma-mobile-skin,
  .inner_container.figma-mobile-skin {
    padding-bottom: calc(var(--leyu-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .mobile-content,
  .mobile-contact-container,
  .mobile-infocenter-container,
  .referer-container,
  .deposit-container,
  .leyu-mobile-container {
    max-width: 100%;
    padding-left: var(--leyu-space-md);
    padding-right: var(--leyu-space-md);
  }
}

/* Global loading overlay (header #loading) */
#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#loading img {
  width: 60%;
  max-width: 250px;
  height: auto;
  animation: leyu-drotate 3s linear infinite;
}

@keyframes leyu-drotate {
  0% {
    transform: rotateY(0deg);
    filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 0.3));
  }

  100% {
    transform: rotateY(360deg);
    filter: drop-shadow(0 0 0.1rem rgba(255, 255, 0, 1));
  }
}

/* Human verification overlay (Turnstile) */
#human-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.human-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: leyu-human-spin 0.8s linear infinite;
}

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

.leyu-turnstile-hidden {
  display: none;
}

/* ========== COMPONENTS ========== */
/**
 * Leyu shared components — buttons, forms, cards, nav pills, section headers.
 */

/* --- Section header --- */
.leyu-section-header,
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--leyu-space-md);
  font-size: var(--leyu-font-size-md);
  color: var(--leyu-text);
  border-bottom: 1px solid var(--leyu-border);
  margin-bottom: var(--leyu-space-sm);
}

.leyu-section-title,
.section-header .section-title {
  font-weight: var(--leyu-font-weight-medium);
  font-size: var(--leyu-font-size-md);
  color: var(--leyu-text);
  margin-bottom: 0;
}

.leyu-section-title h2,
.section-title h2 {
  font-size: var(--leyu-font-size-lg);
  font-weight: var(--leyu-font-weight-semibold);
  margin: 0;
}

/* --- Buttons --- */
.leyu-btn-primary,
.btn_submit,
.btn_search,
.btn_load {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--leyu-radius-lg);
  color: var(--leyu-bg);
  background-color: var(--leyu-primary);
  font-family: var(--leyu-font);
  font-weight: var(--leyu-font-weight-medium);
  padding: 10px 20px;
  transition: background-color var(--leyu-transition-base),
    transform var(--leyu-transition-fast);
  cursor: pointer;
}

.leyu-btn-primary:hover,
.btn_submit:hover,
.btn_search:hover {
  background-color: var(--leyu-primary-dark);
  color: var(--leyu-bg);
}

.leyu-btn-primary:active,
.btn_submit:active,
.btn_search:active,
.btn_load:active {
  transform: scale(0.98);
}

.leyu-btn-primary:focus-visible,
.btn_submit:focus-visible {
  outline: 2px solid var(--leyu-primary-light);
  outline-offset: 2px;
}

/* --- Form controls --- */
.leyu-input,
.form-control {
  padding: 12px 15px;
  font-size: var(--leyu-font-size-base);
  font-family: var(--leyu-font);
  color: var(--leyu-text);
  background-color: var(--leyu-bg-input);
  border-radius: var(--leyu-radius-md);
  border: 1px solid transparent;
  transition: border-color var(--leyu-transition-base),
    box-shadow var(--leyu-transition-base);
}

.leyu-input:focus,
.form-control:focus {
  color: var(--leyu-text);
  background-color: var(--leyu-bg-input);
  border-color: var(--leyu-primary);
  box-shadow: 0 0 0 3px rgba(2, 180, 87, 0.15);
  outline: none;
}

.leyu-input:disabled,
.form-control:disabled,
.form-control[readonly] {
  color: var(--leyu-text-muted);
  background-color: var(--leyu-bg-input);
  opacity: 0.85;
}

.form-group {
  margin-bottom: 20px;
}

.form-select {
  font-size: var(--leyu-font-size-base);
  letter-spacing: 0.28px;
  color: var(--leyu-text);
  padding: 12px 15px;
  background-color: var(--leyu-bg-input);
  border: none;
  border-radius: var(--leyu-radius-md);
  font-family: var(--leyu-font);
}

.form_subtext {
  color: var(--leyu-text-subtle);
  font-size: var(--leyu-font-size-base);
  font-weight: var(--leyu-font-weight-normal);
  letter-spacing: var(--leyu-letter-spacing);
  margin-top: 5px;
}

.error_message {
  font-size: var(--leyu-font-size-base);
  font-weight: var(--leyu-font-weight-normal);
  color: var(--leyu-danger);
}

/* --- Card --- */
.leyu-card {
  background: var(--leyu-bg);
  border: 1px solid var(--leyu-border);
  border-radius: var(--leyu-radius-md);
  box-shadow: var(--leyu-shadow-sm);
  padding: var(--leyu-space-md);
  transition: box-shadow var(--leyu-transition-base), transform var(--leyu-transition-fast);
}

.leyu-card:hover {
  box-shadow: var(--leyu-shadow-md);
}

/* --- Nav pill --- */
.leyu-nav-pill,
.nav-pill-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--leyu-radius-pill);
  font-size: var(--leyu-font-size-sm);
  font-family: var(--leyu-font);
  transition: transform var(--leyu-transition-fast),
    background-color var(--leyu-transition-fast),
    color var(--leyu-transition-fast);
}

.leyu-nav-pill.active,
.nav-pill-mobile.active {
  background-color: var(--leyu-primary);
  color: var(--leyu-bg);
}

@media (max-width: 1024px) {

  .leyu-nav-pill:active,
  .nav-pill-mobile:active {
    transform: scale(0.97);
  }
}

/* --- Badge --- */
.leyu-badge,
.bonus-badge {
  background-color: #ffeaea;
  color: var(--leyu-danger);
  font-size: var(--leyu-font-size-xs);
  padding: 2px 8px;
  border-radius: var(--leyu-radius-sm);
}

/* --- Payment grid item --- */
.leyu-pay-item,
.payment-item {
  background: var(--leyu-bg);
  border: 1px solid var(--leyu-border-light);
  border-radius: var(--leyu-radius-md);
  padding: 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 80px;
  transition: border-color var(--leyu-transition-base),
    background-color var(--leyu-transition-base);
}

.leyu-pay-item.active,
.payment-item.active {
  border-color: var(--leyu-primary);
  background-color: rgba(2, 180, 87, 0.06);
}

.payment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 10px 15px 10px;
}

/* --- Data table shell --- */
.leyu-table-wrap {
  overflow-x: auto;
  width: 100%;
}

.leyu-table-wrap table {
  width: 100%;
}

.leyu-table-wrap td,
.leyu-table-wrap th {
  word-break: break-word;
  vertical-align: middle;
}

/* --- Auth card (shared auth pages) --- */
#auth_section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 90px;
}

.auth_card {
  width: 480px;
  max-width: 100%;
  border-radius: 15px;
  padding: 40px;
  background-color: #1A191E;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

.auth_card_title {
  color: var(--leyu-bg);
  font-size: 22px;
  font-weight: var(--leyu-font-weight-semibold);
  letter-spacing: 0.44px;
}

.forget_pass {
  color: var(--leyu-text-muted);
  font-size: var(--leyu-font-size-base);
  cursor: pointer;
  margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {

  .leyu-btn-primary,
  .btn_submit,
  .leyu-nav-pill,
  .nav-pill-mobile {
    transition: none;
  }
}

/* Header quick-action sprite strip (legacy language icon wrapper still uses this) */
.menu-sprite-icon {
  width: 28px;
  height: 28px;
  background-image: var(--leyu-img-deposit-desktop);
  background-repeat: no-repeat;
  background-size: auto 100%;
  display: inline-block;
  margin-bottom: 2px;
}

.icon-deposit {
  background-position: 0% 0;
}

.icon-transfer {
  background-position: 24% 0;
}

.icon-withdraw {
  background-position: 49% 0;
}

.icon-cs {
  background-position: 73% 0;
}

/* Desktop quick-action icons (deposit / transfer / withdraw / CS) */
.leyu-qa-ico {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.leyu-qa-ico-default {
  display: block;
  width: 24px;
  height: 24px;
  background-color: #aebddd;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.15s ease;
}

.leyu-qa-mask-deposit {
  -webkit-mask-image: var(--leyu-img-qa-deposit);
  mask-image: var(--leyu-img-qa-deposit);
}

.leyu-qa-mask-transfer {
  -webkit-mask-image: var(--leyu-img-qa-transfer);
  mask-image: var(--leyu-img-qa-transfer);
}

.leyu-qa-mask-withdraw {
  -webkit-mask-image: var(--leyu-img-qa-withdraw);
  mask-image: var(--leyu-img-qa-withdraw);
}

.leyu-qa-mask-cs {
  -webkit-mask-image: var(--leyu-img-qa-cs);
  mask-image: var(--leyu-img-qa-cs);
}

.leyu-qa-ico-active {
  display: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.leyu-qa-action:hover .leyu-qa-ico-default,
.leyu-qa-action:active .leyu-qa-ico-default {
  background-color: var(--leyu-accent-cyan);
}

.leyu-qa-action:hover>span:last-child,
.leyu-qa-action:active>span:last-child,
.leyu-qa-action:hover .d-quick-action-txt,
.leyu-qa-action:active .d-quick-action-txt {
  color: var(--leyu-accent-cyan);
}

.leyu-qa-action.active.leyu-qa-has-active-img .leyu-qa-ico-default {
  display: none;
}

.leyu-qa-action.active.leyu-qa-has-active-img .leyu-qa-ico-active {
  display: block;
}

.leyu-qa-action.active:not(.leyu-qa-has-active-img) .leyu-qa-ico-default {
  background-color: var(--leyu-accent-cyan);
}

.leyu-qa-action.active>span:last-child,
.leyu-qa-action.active .d-quick-action-txt {
  color: var(--leyu-accent-cyan);
  font-weight: 700;
}

/* ========== LAYOUT + DESKTOP HEADER ========== */
/**
 * Leyu layout — containers, hero, navbar shell, bottom nav touch targets.
 */
.main_container {
  position: relative;
  width: 100%;
}

.inner_container {
  height: 100%;
  min-height: 900px;
  padding-left: 0;
}

.container-centered,
.leyu-container {
  max-width: var(--leyu-container-max);
  margin: 0 auto;
  padding: 0 15px;
}

.hero-section {
  width: 100%;
  position: relative;
  padding: 0;
  margin-top: 0;
}

.announcement-bar {
  border-bottom: 1px solid var(--leyu-border);
  padding: 10px 0;
  color: var(--leyu-text);
}

/* Bottom navbar mobile shell */
@media (max-width: 1024px) {
  #m_game_section {
    display: block;
  }

  #bottom_navbar {
    display: flex !important;
  }

  body.leyu-hide-top-nav {
    padding-top: 0 !important;
  }

  body.leyu-hide-top-nav .top_navbar,
  body.leyu-hide-top-nav .fixed-top {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  #m_game_section {
    display: none !important;
  }
}

.bottom_navbar_item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Scroll to top — align with 12win / 89 */
.to-top-btn {
  position: fixed;
  right: 16px;
  bottom: 72px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
  z-index: 1000;
  filter: drop-shadow(0 4px 12px rgba(2, 180, 87, 0.35));
}

.to-top-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.to-top-btn:hover {
  filter: drop-shadow(0 6px 16px rgba(2, 180, 87, 0.45)) brightness(1.04);
}

.to-top-btn:focus-visible {
  outline: 2px solid rgba(2, 180, 87, 0.55);
  outline-offset: 3px;
}

.to-top-icon {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
}

@media (min-width: 1025px) {
  .to-top-btn {
    bottom: 28px;
    right: 24px;
  }
}

@media (max-width: 1024px) {
  .to-top-btn {
    bottom: calc(var(--leyu-mobile-nav-height, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

.bottom_navbar_item span {
  font-size: var(--leyu-font-size-sm);
  font-weight: var(--leyu-font-weight-normal);
  margin-top: 5px;
  opacity: 0.4;
}

.bottom_navbar_img {
  width: 25px;
}

/* Mobile page: hide desktop chrome pattern used across member/payment pages */
@media (max-width: 1024px) {

  .leyu-mobile-fullscreen body,
  .deposit-container,
  .withdraw-container,
  .transfer-container {
    min-height: 100vh;
  }

  .deposit-container,
  .leyu-mobile-page-bg {
    background-color: var(--leyu-bg-subtle);
    font-family: var(--leyu-font);
  }
}

@media (min-width: 1025px) {
  .desktop-dashboard-container {
    display: block;
  }

  .mobile-contact-container,
  .mobile-infocenter-container {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .desktop-dashboard-container {
    display: none !important;
  }
}

/* ---------- Desktop header (dense, not space-between void) ---------- */
@media (min-width: 1025px) {
  .leyu-desktop-header-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px 24px;
    padding: 8px clamp(16px, 2.5vw, 32px);
    background-color: #f5fcfc;
    border-bottom: 1px solid #e1e1e1;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    z-index: 1060;
  }

  .leyu-desktop-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .leyu-desktop-logo img {
    height: 42px;
    width: auto;
    display: block;
  }

  .leyu-desktop-header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
  }

  .leyu-nav-link {
    text-decoration: none;
    color: #555;
    white-space: nowrap;
    padding: 4px 2px;
  }

  .leyu-nav-link:hover,
  .leyu-nav-link.is-active {
    color: var(--leyu-primary);
  }

  .leyu-nav-dropdown {
    position: static;
  }

  .leyu-nav-dropdown--simple {
    position: relative;
  }

  .leyu-nav-dropdown--simple .leyu-nav-simple-menu,
  .leyu-nav-dropdown--simple > .dropdown-menu {
    position: absolute !important;
    width: auto;
    min-width: 180px;
    left: 0;
    right: auto;
    top: 100%;
    margin-top: 8px;
    padding: 8px 0;
    background: #fff !important;
    border: 1px solid #e8eee9 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 1060;
  }

  .leyu-nav-simple-menu .dropdown-item {
    padding: 10px 16px;
    font-size: 14px;
    color: #444;
  }

  .leyu-nav-simple-menu .dropdown-item:hover,
  .leyu-nav-simple-menu .dropdown-item.active {
    background: #f0fdf4;
    color: var(--leyu-primary-dark, #2e7d32);
  }

  /* Full-width mega menu anchored under the header bar (requires data-bs-display="static") */
  .leyu-nav-dropdown-menu,
  .leyu-nav-dropdown .dropdown-menu {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    padding: 0;
    color: var(--leyu-text);
    z-index: 1050;
    box-shadow: none !important;
  }

  .leyu-nav-mega-panel {
    width: 100%;
    padding: 28px clamp(24px, 5vw, 125px) 36px;
    box-sizing: border-box;
    background-image: linear-gradient(180deg,
        #e5fff4 0%,
        #fbfffc 12%,
        #ffffff 73%,
        #f1fff4 98%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  }

  .leyu-nav-mega-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 27px;
    align-items: flex-start;
    max-width: 1190px;
  }

  .leyu-nav-mega-empty {
    width: 100%;
    text-align: center;
    color: #949ab6;
    font-size: 14px;
    padding: 24px 0;
  }

  .leyu-nav-mega-card {
    width: 277px;
    height: 94px;
    flex: 0 0 277px;
    cursor: pointer;
    border: 0.34px solid rgba(241, 237, 237, 0.7);
    border-radius: 11px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    background-image: linear-gradient(-68deg,
        rgb(229, 255, 236) 0%,
        rgb(238, 254, 243) 74%,
        rgb(243, 250, 255) 108%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .leyu-nav-mega-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(15, 168, 76, 0.12);
  }

  .leyu-nav-mega-card.is-maintain {
    cursor: not-allowed;
    opacity: 0.85;
  }

  .leyu-nav-mega-card.is-maintain:hover {
    transform: none;
    box-shadow: none;
  }

  .leyu-nav-mega-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
  }

  .leyu-nav-mega-card-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }

  .leyu-nav-mega-card-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Mega card: keep original maintain badge, force center */
  .leyu-nav-dropdown-menu .leyu-nav-mega-card-inner.game_disabled::after,
  .leyu-nav-dropdown .dropdown-menu .leyu-nav-mega-card-inner.game_disabled::after,
  .leyu-nav-dropdown-menu .leyu-nav-mega-card-inner.game_under_maintainance::after,
  .leyu-nav-dropdown .dropdown-menu .leyu-nav-mega-card-inner.game_under_maintainance::after {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
  }

  .leyu-desktop-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
  }

  .leyu-desktop-quick-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .leyu-header-action {
    text-decoration: none;
    color: #000;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .leyu-header-action span {
    font-size: 11px;
    color: #666;
    transition: color 0.15s ease;
  }

  .leyu-header-lang {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    color: inherit;
  }

  .leyu-header-action .leyu-header-lang-icon {
    background-image: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9aa3b5;
    font-size: 26px;
    line-height: 1;
  }

  .leyu-header-action .leyu-header-lang-icon .fa-globe {
    font-size: 26px;
    line-height: 1;
    width: auto;
    height: auto;
  }

  .leyu-header-lang:hover .leyu-header-lang-icon {
    color: var(--leyu-primary);
  }

  .leyu-header-lang:hover>span:last-child {
    color: var(--leyu-primary);
  }

  .leyu-header-lang:focus-visible {
    outline: 2px solid var(--leyu-primary);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .leyu-desktop-user-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    border-left: 1px solid #ddd;
  }

  .leyu-desktop-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
  }

  .leyu-desktop-user-meta {
    font-size: 12px;
    color: #666;
  }

  .leyu-desktop-username {
    font-weight: 700;
    color: #000;
    margin-right: 5px;
  }

  .leyu-desktop-vip-pill {
    background: #ccc;
    color: #fff;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 10px;
  }

  .leyu-desktop-balance-row {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .leyu-desktop-ccy {
    font-size: 10px;
    color: #000;
    font-weight: 700;
  }

  #menu_balance_display {
    font-weight: 800;
    color: #000;
  }

  #menu_balance_toggle_icon {
    cursor: pointer;
  }

  .leyu-desktop-refresh {
    width: 12px;
    cursor: pointer;
  }

  .leyu-desktop-perm-url {
    color: #000;
    font-size: 10px;
    white-space: nowrap;
  }

  .leyu-desktop-guest {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }

  .leyu-desktop-guest-auth {
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }

  .leyu-desktop-guest-auth a {
    text-decoration: none;
    color: #000;
  }

  .leyu-desktop-guest-auth span {
    margin: 0 4px;
    color: #666;
  }
}

/* ========== MEMBER DESKTOP SHELL ========== */
/**
 * Leyu shared member desktop shell — single source for 2/3-col layout,
 * left sidebar, profile card, quick actions, menu list, right rail.
 * Column tracks stay identical on every member page:
 *   left 240px | main 1fr | right 260px
 * 2-col pages (no .desktop-sidebar-right): main spans tracks 2–3.
 * Page CSS must not redefine these.
 */

@media (min-width: 1025px) {

  .desktop-dashboard-container,
  .desktop-vip-container {
    display: block;
    min-height: 100vh;
    padding: 20px 16px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: var(--leyu-font);
    font-size: var(--leyu-font-size-base);
    color: var(--leyu-text);
    overflow-x: clip;
  }

  .desktop-layout,
  .desktop-vip-layout {
    --leyu-desk-col-left: 240px;
    --leyu-desk-col-right: 260px;
    --leyu-desk-col-gap: 16px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--leyu-desk-col-left) minmax(0, 1fr) var(--leyu-desk-col-right);
    gap: var(--leyu-desk-col-gap);
    align-items: start;
    min-width: 0;
  }

  /* 2-col pages: keep same tracks; main uses the right rail space */
  .desktop-layout:not(:has(.desktop-sidebar-right)) .desktop-main-content,
  .desktop-vip-layout:not(:has(.desktop-sidebar-right)) .desktop-main-content {
    grid-column: 2 / -1;
  }

  .desktop-sidebar-left {
    grid-column: 1;
    width: 100%;
    max-width: var(--leyu-desk-col-left, 240px);
    position: sticky;
    top: 12px;
    align-self: start;
    background: var(--leyu-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .desktop-profile-card {
    background: transparent;
    border-radius: 0;
    padding: 20px 18px 16px;
    text-align: left;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid #eef0f2;
  }

  .d-profile-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 16px;
    text-align: left;
  }

  .d-profile-info {
    text-align: left;
    min-width: 0;
  }

  .d-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
    margin-bottom: 0;
    object-fit: cover;
    flex-shrink: 0;
  }

  .d-username {
    font-weight: 700;
    color: var(--leyu-text);
    margin-bottom: 4px;
    font-size: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }

  .d-vip-badge {
    background: #9ca3af;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
  }

  .d-join-date {
    font-size: 12px;
    color: var(--leyu-text-secondary);
    line-height: 1.35;
  }

  /* sprite icons: defined once in components.css (.menu-sprite-icon) */

  .d-quick-actions {
    display: flex;
    justify-content: space-around;
    padding-top: 14px;
    border-top: 1px solid #eef0f2;
  }

  .leyu-quick-action {
    text-decoration: none;
    color: var(--leyu-text);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .d-quick-action-txt {
    font-size: 12px;
    color: var(--leyu-text-secondary);
    display: block;
    margin-top: 5px;
    font-weight: 500;
    transition: color 0.15s ease;
  }

  .d-quick-actions a.active .d-quick-action-txt,
  .leyu-quick-action.active .d-quick-action-txt,
  .d-quick-action-txt.active {
    color: var(--leyu-accent-cyan);
    font-weight: 700;
  }

  .desktop-menu-list {
    padding: 8px 0 12px;
  }

  .d-menu-item {
    display: flex;
    align-items: center;
    padding: 11px 18px;
    color: var(--leyu-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    border-left: 3px solid transparent;
  }

  .d-menu-item i {
    width: 25px;
    text-align: center;
    margin-right: 10px;
    color: var(--leyu-text-secondary);
  }

  .d-menu-item:hover,
  .d-menu-item.active {
    background: #E6FFF2;
    color: var(--leyu-primary-dark);
    border-radius: 50px;
    margin: 6px 10px;
    padding: 10px 12px;
    border-left-color: transparent;
    font-weight: 600;
  }

  .d-menu-item img,
  .d-menu-icon {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.2s;
  }

  .d-menu-item:hover img,
  .d-menu-item.active img,
  .d-menu-item:hover .d-menu-icon,
  .d-menu-item.active .d-menu-icon {
    filter: none;
  }

  .d-menu-item:hover i,
  .d-menu-item.active i {
    color: var(--leyu-primary-dark);
  }

  .d-divider {
    height: 1px;
    background: #eef0f2;
    margin: 6px 18px;
  }

  .d-badge {
    background: #e53935;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
  }

  .desktop-main-content {
    grid-column: 2;
    background: transparent;
    min-width: 0;
  }

  .desktop-main-content .d-content-card {
    background: var(--leyu-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    min-height: 0;
  }

  /* Only notification inbox keeps a tall card */
  .desktop-main-content .d-content-card:has(.d-msg-header) {
    min-height: 600px;
    display: flex;
    flex-direction: column;
  }

  .desktop-main-content .transaction-empty-state-desktop,
  .desktop-main-content .empty_state_desktop,
  .desktop-main-content .bet_record_empty_state,
  .desktop-main-content .transaction_empty_state {
    min-height: 140px;
    padding: 28px 16px;
  }

  .d-section-title {
    font-size: 22px;
    color: var(--leyu-text);
    margin-bottom: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }

  .desktop-sidebar-right {
    grid-column: 3;
    width: 100%;
    max-width: var(--leyu-desk-col-right, 260px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .desktop-sidebar-right>*,
  .desktop-sidebar-right .d-widget-card {
    background: var(--leyu-bg);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }

  .desktop-sidebar-right .d-widget-header span,
  .desktop-sidebar-right .d-more-link,
  .desktop-sidebar-right a {
    color: var(--leyu-text-secondary);
  }

  .desktop-sidebar-right .d-widget-header span {
    color: var(--leyu-text);
    font-weight: 700;
  }

  .desktop-sidebar-right .d-empty-state,
  .desktop-sidebar-right .d-empty-state span {
    color: var(--leyu-text-muted);
  }
}

@media (max-width: 1024px) {

  .desktop-dashboard-container,
  .desktop-vip-container {
    display: none !important;
  }
}

/* ========== LEGACY BRIDGE ========== */
/**
 * Legacy class → Leyu token bridge (transition period).
 * Maps old hardcoded greens and duplicate patterns to design tokens.
 */

/* Legacy green aliases */
.auth-btn,
.payment-item.active,
.btn-success-custom,
.deposit-submit-btn,
[class*="auth-btn"] {
  --bridge-primary: var(--leyu-primary);
}

/* Map common inline legacy colors */
.auth-btn,
.auth-banner .auth-btn {
  background-color: var(--leyu-primary) !important;
}

.payment-item.active {
  border-color: var(--leyu-primary) !important;
  background-color: rgba(2, 180, 87, 0.06) !important;
}

/* Section title unification — page-level overrides lose to token-based default */
.section-header .section-title,
.leyu-section-header .leyu-section-title,
.section-title {
  color: var(--leyu-text);
  font-weight: var(--leyu-font-weight-medium);
}

/* Legacy auth banner */
.auth-banner {
  background-color: #f5faff;
  color: #8da5bc;
}

.auth-banner .auth-btn {
  color: var(--leyu-bg);
  border: none;
  border-radius: var(--leyu-radius-pill);
  background-color: var(--leyu-primary);
}

/* Bootstrap success override where pages used #28a745 */
.btn-success,
.bg-success {
  --bs-success: var(--leyu-primary);
}

/* Font stack override for pages using system fonts */
.deposit-container,
.feedback-container,
.referer-container,
.mobile-contact-container {
  font-family: var(--leyu-font);
}

/* Legacy payment greens */
[style*="#00c05b"],
[style*="#28a745"] {
  /* inline styles cannot be overridden; bridge applies via class replacements in page CSS */
}

.leyu-auth-banner {
  background-color: #f5faff;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--leyu-font-size-sm);
  color: #8da5bc;
}

.leyu-auth-banner .leyu-auth-btn {
  background-color: var(--leyu-primary);
  color: var(--leyu-bg);
  border: none;
  padding: 5px 10px;
  border-radius: var(--leyu-radius-pill);
  font-size: var(--leyu-font-size-sm);
}

/* ========== MAIN.CSS LEGACY BRIDGE ========== */
/**
 * main.css legacy theme overrides — map old theme-* classes to Leyu tokens.
 */
.theme-two,
.theme-two-bg {
  color: var(--leyu-primary) !important;
}

.theme-two-bg {
  background: var(--leyu-primary) !important;
}

.text--primary {
  color: var(--leyu-primary) !important;
}

.btn-success,
.bg-success {
  background-color: var(--leyu-primary) !important;
  border-color: var(--leyu-primary-dark) !important;
}

.btn-success:hover {
  background-color: var(--leyu-primary-dark) !important;
}

/* ========== PAGE: INDEX ========== */
/** Leyu page styles: index.css */

/* --- page: index --- */
/* padding-left:100% 让文字从容器右缘立刻进入；避免长文从自身宽度外滚入导致久等 */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

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

/* Banner Drop Shadow */
.hero-section .carousel-image {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}

.banner_desktop .carousel-image,
.banner_mobile .carousel-image {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

#banner_section .carousel-indicators,
.banner_desktop .carousel-indicators,
.banner_mobile .carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: 2;
  margin: 0;
}

/* --- Home news ticker --- */
.mobile-news {
  display: none;
}

.pc-news {
  display: block;
}

.news-container {
  border-top: 2px solid #FEDEA0;
  border-bottom: 2px solid #FEDEA0;
  background: linear-gradient(90deg,
      rgb(0 0 0) -3.83%,
      #B38922 9.63%,
      #B38922 89.42%,
      rgb(0 0 0) 108.19%);
  overflow: hidden;
  height: 28px;
  display: flex;
  align-items: center;
  margin-top: 30px;
  text-align: center;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.news-list li {
  height: 28px;
  line-height: 28px;
  color: #FFF;
  font-family: var(--leyu-font);
  font-size: var(--leyu-font-size-sm);
  font-weight: var(--leyu-font-weight-medium);
  white-space: nowrap;
  padding: 0 40px;
}

.pc-news .news-wrapper {
  display: inline-block;
  white-space: nowrap;
  animation: leyu-scroll-left 50s linear infinite;
}

.ticker-track {
  display: flex;
  gap: 100px;
}

@keyframes leyu-scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes leyu-scroll-up {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

.icon-speaker {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  vertical-align: middle;
}

.icon-speaker svg {
  width: 15px;
  height: 13px;
}

@media (max-width: 1024px) {
  .mobile-news {
    display: flex !important;
    animation: leyu-scroll-up 10s linear infinite !important;
  }

  .mobile-news .news-list {
    display: block;
  }

  .pc-news {
    display: none !important;
  }
}

/* ========== PAGE: AUTH ========== */
/** Leyu page styles: auth.css */

/* --- page: change_pass --- */
body:has(.settings-page) {
  padding-top: 0 !important;
  background-color: #e6fff2;
  font-family: var(--leyu-font);
}

body:has(.settings-page) .top_navbar,
body:has(.settings-page) .fixed-top {
  display: none;
}

.settings-page {
  min-height: 100vh;
  background-color: #e6fff2;
}

/* Header Styles - Exact Match */
.settings-header {
  position: relative;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-bottom: 1px solid #e6f2e6;
  font-size: 12px;
  color: #303442;
}

.settings-header-title {
  font-weight: 300;
}

.settings-back {
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303442;
  text-decoration: none;
  font-size: 14px;
}

.settings-back i {
  font-size: 12px;
}

.settings-section {
  padding-top: 12px;
}

.settings-card {
  background-color: #e6fff2;
  /* Although setting.php has #e6fff2, rows are white. 
       This container just holds them. */
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 50px;
  background-color: #ffffff;
  font-size: 14px;
  color: #303442;
}

.settings-row+.settings-row {
  border-top: 1px solid #f2f2f2;
}

.settings-label {
  font-weight: 300;
  white-space: nowrap;
  margin-right: 10px;
}

/* Input in row style */
.row-input {
  border: none;
  background: transparent;
  text-align: right;
  width: 100%;
  outline: none;
  color: #303442;
  font-size: 14px;
}

.row-input::placeholder {
  color: #c9cddb;
}

/* Submit Btn */
.btn-submit-row {
  margin-top: 20px;
  padding: 0 14px;
}

.btn-submit-custom {
  background: linear-gradient(90deg, #1db858, #3ae483);
  color: white;
  border: none;
  width: 100%;
  padding: 10px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(29, 184, 88, 0.3);
}

/* --- page: join --- */
body:has(.join-container) {
  padding-top: 0px !important;
}

body:has(.join-container) .top_navbar,
body:has(.join-container) .fixed-top {
  display: none;
}

.join-container {
  min-height: 100vh;
  background: radial-gradient(circle at 50% 50%, #ccf4df 0%, #bdf2d5 100%);
  /* Green gradient based on typical theme */
  padding-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.join-header {
  text-align: center;
  padding: 50px 0;
  color: #000000;
}

.join-header h1 {
  font-size: 32px;
  color: #2b5545;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.join-header .subtitle {
  font-size: 14px;
  color: #555;
  letter-spacing: 1px;
}

.join-hero-img {
  width: 80%;
  max-width: 400px;
  margin: 0 auto 30px;
  display: block;
}

/* Cards Section */
.join-cards {
  padding: 0 20px;
}

.join-card {
  background: #fff;
  border-radius: 15px;
  padding: 15px 20px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.join-card-content {
  display: flex;
  align-items: center;
}

.join-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e6f7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
  margin-right: 15px;
  font-size: 20px;
}

.join-card-text h3 {
  font-size: 16px;
  color: #000000;
  margin: 0;
  font-weight: bold;
}

.join-card-text p {
  font-size: 12px;
  color: #000000;
  margin: 2px 0 0;
}

.join-card-btn {
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}

.btn-outline {
  border: 1px solid #00b955;
  color: #00b955;
}

.btn-solid {
  background: #00b955;
  color: #fff;
}

/* Bottom Fixed Button */
.join-bottom-fixed {
  margin: 30px 20px 0;
  padding-bottom: 80px;
}

.join-main-btn {
  width: 100%;
  background: #00b955;
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(0, 185, 85, 0.3);
}

.nav-header {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.nav-header a {
  color: #555;
  text-decoration: none;
  font-size: 18px;
}

.nav-title {
  font-size: 16px;
  font-weight: 500;
}

.join-mobile {
  display: block;
}

.join-desktop {
  display: none;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #ffffff;
}

.join-desktop img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 1025px) {
  .join-mobile {
    display: none;
  }

  .join-desktop {
    display: flex;
  }
}

/* --- page: login --- */
body:has(.auth_card_glass) {
  padding-top: 0px !important;
}

body:has(.auth_card_glass) .top_navbar,
body:has(.auth_card_glass) .fixed-top,
body:has(.auth_card_glass) #bottom_navbar {
  display: none !important;
}

/* Custom Login Reskin — scoped so global body rules don't paint every page */
body:has(.auth_card_glass) {
  background: var(--leyu-img-auth-bg) no-repeat center center fixed !important;
  background-size: cover !important;
  font-family: var(--leyu-font);
}

/* --- Shared Auth Styles --- */
#auth_section,
#m_auth_section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

/* Logo */
.register-logo {
  display: block;
  margin: 0 auto 0px;
  max-width: 200px;
  height: auto;
}

/* Glassmorphism Card */
.auth_card_glass {
  padding: 10px 8px 16px 10px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  position: relative;
  overflow: hidden;
  border-radius: 35px;
  border: 0.724px solid rgba(136, 140, 152, 0.40);
  background: linear-gradient(180deg, rgba(120, 120, 120, 0.10) 0%, rgba(70, 70, 70, 0.10) 52.1%, rgba(31, 31, 31, 0.10) 100%);
  backdrop-filter: blur(3.618481159210205px);
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Input Groups */
.input-group-glass {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  margin-bottom: 15px;
  border: none;
  display: flex;
  align-items: center;
  padding: 5px 15px;
}

.input-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
  opacity: 0.8;
}

.icon-user {
  background-image: var(--leyu-img-auth-user);
}

.icon-pass {
  background-image: var(--leyu-img-auth-pass);
}

.form-control-glass {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  box-shadow: none !important;
  padding: 10px 0;
  height: auto;
  width: 100%;
}

.form-control-glass::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-control-glass:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* Extras Row (Remember Me / Forgot Pass) */
.extras-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  padding: 0 5px;
}

.remember-me {
  display: flex;
  align-items: center;
}

/* Custom Radio/Checkbox Visual */
.custom-radio {
  width: 16px;
  height: 16px;
  border: 2px solid #00a0ff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  position: relative;
}

.custom-radio.checked {
  background-color: #00a0ff;
}

.custom-radio.checked::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.extras-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.extras-link:hover {
  color: #fff;
}

/* Login Button - Green Gradient */
.btn-login-green {
  background: linear-gradient(90deg, #1db858, #3ae483);
  border: none;
  border-radius: 25px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
  width: 100%;
  box-shadow: 0 4px 15px rgba(29, 184, 88, 0.4);
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-login-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 184, 88, 0.5);
}

/* Bottom Nav Links */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-nav-item {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: color 0.3s;
}

.bottom-nav-item:hover {
  color: #fff;
}

.bottom-nav-item i {
  font-size: 20px;
  margin-bottom: 5px;
}

/* Hide PC section on mobile, hide Mobile section on PC */
@media (min-width: 1025px) {
  #m_auth_section {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  #auth_section {
    display: none !important;
  }
}

/* --- page: register --- */
body:has(.auth_card_glass) {
  padding-top: 0px !important;
}

body:has(.auth_card_glass) .top_navbar,
body:has(.auth_card_glass) .fixed-top,
body:has(.auth_card_glass) #bottom_navbar {
  display: none !important;
}

/* Custom Register Reskin — scoped so global body rules don't paint every page */
body:has(.auth_card_glass) {
  background: var(--leyu-img-auth-bg) no-repeat center center fixed !important;
  background-size: cover !important;
  font-family: var(--leyu-font);
}

/* --- Shared Auth Styles --- */
#auth_section,
#m_auth_section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

/* Logo */
.register-logo {
  display: block;
  margin: 0 auto 0px;
  max-width: 200px;
  height: auto;
}

/* Glassmorphism Card */
.auth_card_glass {
  padding: 10px 8px 16px 10px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  position: relative;
  overflow: hidden;
  border-radius: 35px;
  border: 0.724px solid rgba(136, 140, 152, 0.40);
  background: linear-gradient(180deg, rgba(120, 120, 120, 0.10) 0%, rgba(70, 70, 70, 0.10) 52.1%, rgba(31, 31, 31, 0.10) 100%);
  backdrop-filter: blur(3.618481159210205px);
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Input Groups */
.input-group-glass {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  margin-bottom: 15px;
  border: none;
  display: flex;
  align-items: center;
  padding: 5px 15px;
}

.input-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
  opacity: 0.8;
}

.register_form,
.m_register_form {
  border-radius: 29px;
  background: linear-gradient(180deg, rgba(230, 255, 242, 0.10) 0%, rgba(18, 113, 77, 0.30) 52.1%, rgba(54, 94, 11, 0.30) 100%);
  backdrop-filter: blur(10.855443954467773px);
  padding: 49px 13px 50px 14px;
}

.icon-user {
  background-image: var(--leyu-img-auth-user);
}

.icon-pass {
  background-image: var(--leyu-img-auth-pass);
}

/* Fallback for refcode if no specific icon, reuse user or generic */
.icon-ref {
  /* Using FontAwesome as fallback or similar icon */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Register form: icons + country dropdown use brand green */
.register_form .input-icon,
.m_register_form .input-icon {
  color: #00d084;
  opacity: 1;
}

.register_form .input-icon i,
.m_register_form .input-icon i,
.register_form .icon-ref,
.m_register_form .icon-ref {
  color: #00d084;
}

.register_form .icon-user,
.register_form .icon-pass,
.m_register_form .icon-user,
.m_register_form .icon-pass {
  filter: brightness(0) saturate(100%) invert(72%) sepia(52%) saturate(1200%) hue-rotate(105deg) brightness(95%) contrast(101%);
  opacity: 1;
}

.form-control-glass {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  box-shadow: none !important;
  padding: 10px 0;
  height: auto;
  width: 100%;
}

.form-control-glass::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-control-glass:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* TNC Checkbox */
.tnc-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.tnc-checkbox {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

.tnc-link {
  color: #00d084;
  text-decoration: none;
  margin-left: 5px;
}

/* Register Button - Green Gradient */
.btn-register-green {
  background: linear-gradient(90deg, #1db858, #3ae483);
  border: none;
  border-radius: 25px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
  width: 100%;
  box-shadow: 0 4px 15px rgba(29, 184, 88, 0.4);
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-register-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(29, 184, 88, 0.5);
}

.btn-register-green:disabled {
  background: #555;
  box-shadow: none;
  color: #000000;
  cursor: not-allowed;
}

/* Bottom Nav Links */
.bottom-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-nav-item {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: color 0.3s;
}

.bottom-nav-item:hover {
  color: #fff;
}

.bottom-nav-item i {
  font-size: 20px;
  margin-bottom: 5px;
}

/* Hide PC section on mobile, hide Mobile section on PC */
@media (min-width: 1025px) {
  #m_auth_section {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  #auth_section {
    display: none !important;
  }
}

/* --- auth flow: forgot / reset / otp / success --- */
#forgotPass_section {
  background-color: var(--leyu-bg);
  min-height: 100vh;
  padding-top: 40px;
  background-image: none !important;
}

.forgotPass_form,
.resetPass_form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.forgotPass_card {
  background: var(--leyu-bg);
  padding: 20px;
  box-shadow: none;
  border: none;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.forgotPass_card_title {
  color: var(--leyu-text);
  font-size: 24px;
  font-weight: var(--leyu-font-weight-semibold);
  text-align: center;
  margin-bottom: 10px;
}

.forgotPass_card_subtitle {
  color: var(--leyu-text-muted);
  font-size: var(--leyu-font-size-base);
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.5;
}

.forgotPass_card_bottom_btn {
  margin-top: auto;
}

#forgotPass_section hr {
  display: none;
}

#forgotPass_section .form-group label {
  display: block;
  color: var(--leyu-text);
  font-size: var(--leyu-font-size-base);
  font-weight: var(--leyu-font-weight-medium);
  margin-bottom: 8px;
}

#forgotPass_section .form-control,
#forgotPass_section .form-select,
.desktop-forgot-card .form-control,
.desktop-forgot-card .form-select {
  background-color: #f7f8fa;
  border: 1px solid transparent;
  border-radius: var(--leyu-radius-sm);
  color: var(--leyu-text);
  font-size: var(--leyu-font-size-base);
  padding: 12px 15px;
  height: auto;
  box-shadow: none;
  font-family: var(--leyu-font);
}

#forgotPass_section .form-control:focus,
#forgotPass_section .form-select:focus,
.desktop-forgot-card .form-control:focus,
.desktop-forgot-card .form-select:focus {
  background-color: var(--leyu-bg);
  border-color: var(--leyu-primary);
  box-shadow: 0 0 0 2px rgba(2, 180, 87, 0.12);
}

#forgotPass_section .input-group {
  background-color: #f7f8fa;
  border-radius: var(--leyu-radius-sm);
  padding: 0;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
}

#forgotPass_section .input-group .form-select,
#forgotPass_section .input-group .form-control {
  background-color: transparent;
  border: none;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

#forgotPass_section .input-group .form-select {
  width: auto;
  padding-right: 30px;
  margin-right: 0;
}

.otp-inputs {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
}

.otp-input {
  width: 45px;
  height: 45px;
  text-align: center;
  font-size: 20px;
  border: 1px solid var(--leyu-border);
  background-color: #f7f8fa;
  border-radius: var(--leyu-radius-sm);
  color: var(--leyu-text);
  padding: 0;
}

.otp-input:focus {
  border-color: var(--leyu-primary);
  background-color: var(--leyu-bg);
  outline: none;
}

.otp-resend {
  text-align: right;
  margin-top: 10px;
}

.btn-otp {
  color: var(--leyu-primary);
  cursor: pointer;
  font-size: var(--leyu-font-size-base);
}

.btn-otp.disabled {
  color: var(--leyu-text);
  cursor: default;
}

.success-icon-container {
  width: 80px;
  height: 80px;
  background-color: var(--leyu-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto;
  color: var(--leyu-bg);
  font-size: 40px;
}

@media (min-width: 1025px) {
  .forgot-password-page-body {
    background-color: #f0fbf5 !important;
  }

  .desktop-forgot-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .desktop-forgot-card {
    background: var(--leyu-bg);
    border-radius: var(--leyu-radius-md);
    box-shadow: var(--leyu-shadow-md);
    padding: 40px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .stepper-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    padding: 0 10px;
  }

  .stepper-item {
    flex: 1;
    height: 4px;
    background-color: #f0f0f0;
    margin: 0 2px;
    border-radius: 2px;
  }

  .stepper-item.active {
    background-color: var(--leyu-primary);
  }

  .desktop-card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: var(--leyu-font-size-base);
    color: var(--leyu-text);
  }

  .desktop-card-footer a {
    color: #555;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .desktop-card-footer a:hover {
    color: var(--leyu-primary);
  }
}

@media (max-width: 1024px) {
  #forgotPass_section {
    width: 100%;
  }

  .forgotPass_card {
    width: 100%;
    height: 100%;
    padding: 30px;
  }

  .forgotPass_card_title {
    font-size: var(--leyu-font-size-md);
  }

  .forgotPass_card_bottom_btn {
    margin-top: 15px;
  }
}

/* ========== PAGE: CONTENT ========== */
/** Leyu page styles: content.css */

/* --- page: app --- */
.app_download_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  background-color: #28282F;
  margin-left: 8px;
  margin-right: 8px;
}

.app_download_btn:hover {
  color: #000;
  background-color: #FFC500;
}

.app_download_content {
  display: flex;
  align-items: center;
}

.app_download_link_img {
  width: 25px;
  height: 25px;
}

.app_download_link_text {
  font-size: 14px;
  margin-bottom: 0;
  margin-left: 12px;
}

.acc_copy_btn {
  font-size: 14px;
  font-weight: 500;
  color: #000;
  background-color: #FFC500;
}

.acc_copy_btn::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  white-space: nowrap;
}

.acc_copy_btn.tooltip-visible::after {
  opacity: 1;
  visibility: visible;
}

/* --- page: customer_service --- */
body {
  padding-top: 0 !important;
  font-size: 12px;
  font-family: var(--leyu-font);
  font-weight: 100;
}

.navbar {
  display: none;
}

.customer_service_container {
  background-color: #E6FFF2;
  min-height: 100vh;
}

.cs_iframe_container {
  width: 100%;
  height: calc(100vh - 60px);
  border: none;
  background-color: #fff;
}

/* 桌面端隐藏顶部标题 */
@media (min-width: 1025px) {
  .cs_top_header {
    display: none;
  }

  .cs_iframe_container {
    height: 100vh;
  }
}

.cs_no_service {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #E6FFF2;
  color: #303442;
  font-size: 16px;
}

.cs_top_header {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

.cs_top_header_title {
  color: #303442;
  text-align: center;
  margin-bottom: 0;
  line-height: 25px;
}

.cs_top_header_feedback {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  color: #7981A4;
  text-align: right;
  text-decoration: none;
  line-height: 25px;
}

.cs_user_profile {
  background-color: #fff;
  padding: 14px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.cs_user_profile_avatar {
  width: 54px;
  object-fit: cover;
  margin-right: 10px;
}

.cs_user_profile_info_name {
  font-size: 16px;
  color: #303442;
  margin-bottom: 0;
}

.cs_user_profile_info_text {
  color: #7981A4;
  margin-bottom: 0;
}

.cs_chat {
  width: 100%;
  object-fit: cover;
}

.cs_anchor {
  padding: 20px 14px;
}

.cs_anchor_icon {
  width: 24px;
  object-fit: cover;
  margin-right: 4px;
}

.cs_anchor_title {
  color: #414655;
  font-size: 16px;
  margin-bottom: 0;
  line-height: normal;
}

.cs_anchor_more {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.cs_anchor_more i {
  font-size: 12px;
  color: #8995B9;
}

.cs_anchor_more_text {
  color: #616783;
  line-height: normal;
  margin-bottom: 0;
  margin-right: 4px;
}

.cs_anchor_more_icon {
  width: 20px;
  object-fit: cover;
  margin-right: 4px;
  border-radius: 50%;
}

.cs_anchor_list {
  margin-top: 18px;
}

.cs_anchor_item {
  background-color: #fff;
  border-radius: 12px;
  padding: 8px 24px;
  display: flex;
}

.cs_anchor_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
}

.cs_anchor_info_name {
  color: #414655;
  line-height: 14px;
  margin-bottom: 0;
}

.cs_anchor_item_icon {
  width: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.cs_anchor_item_hr {
  background: #D2E7FF;
  width: 1px;
  height: 40px;
  align-self: stretch;
  margin-left: 10px;
  margin-right: 10px;
}

.cs_anchor_item_content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.cs_anchor_item_content_title {
  color: #414655;
  line-height: normal;
  margin-bottom: 10px;
}

.cs_anchor_item_content_icon {
  width: 15px;
  height: 15px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 4px;
}

.cs_anchor_item_content_text {
  color: #303442;
  line-height: normal;
  margin-bottom: 0;
}

.cs_card {
  background: linear-gradient(90deg, #A1F2C5 0%, #D4FBE0 100%);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  margin-top: 10px;
}

.cs_card_content {
  display: flex;
  flex-direction: column;
}

.cs_card_title {
  font-size: 15px;
  color: #525252;
  font-weight: bold;
  margin-bottom: 2px;
}

.cs_card_subtitle {
  font-size: 11px;
  color: #9CA3AF;
  margin-bottom: 0;
}

.cs_card_icon {
  font-size: 24px;
  color: #6B7280;
}

/* --- page: feedback --- */
body:has(.feedback-container) {
  padding-top: 0px !important;
}

body:has(.feedback-container) .top_navbar,
body:has(.feedback-container) .fixed-top {
  display: none;
}

/* Mobile Styles */
.feedback-container {
  padding: 20px;
  background-color: #f5fdf9;
  /* Light green background */
  min-height: 100vh;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 18px;
  color: #000000;
  margin-bottom: 20px;
}

.feedback-header .title {
  color: #000000;
  font-weight: 500;
}

.feedback-header .history-link {
  color: #000000;
  text-decoration: none;
  font-size: 14px;
}

.feedback-form-group {
  margin-bottom: 20px;
  background: #e6fcf0;
  padding: 15px;
  border-radius: 8px;
}

.feedback-label {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.feedback-label .required {
  color: #ff4d4f;
  margin-left: 4px;
}

.feedback-select-container {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.feedback-select {
  width: 100%;
  padding: 15px;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #000000;
  appearance: none;
  outline: none;
}

.select-arrow {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

.feedback-textarea {
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  font-size: 14px;
  color: #000000;
  min-height: 150px;
  outline: none;
}

.textarea-container {
  position: relative;
}

.char-count {
  text-align: right;
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.upload-container {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #f0f4f8;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.upload-icon {
  font-size: 24px;
  color: #1890ff;
  /* Blue icon like existing image */
}

.upload-hint {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}

.submit-btn {
  background: #00b955;
  /* Green button */
  color: #fff;
  width: 100%;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 30px;
  cursor: pointer;
}

.instruction-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  body {
    padding-bottom: 60px !important;
  }


}

@media (min-width: 1025px) {

  .mobile-contact-container,
  .mobile-contact-container .bottom-nav {
    display: none !important;
  }


}

:root {
  --primary-green: #e0fadd;
  --dark-green-bg: #1e4a2a;
  --card-bg-gradient: linear-gradient(135deg, #245833 0%, #15381e 100%);
  --text-dark: #000000;
  --text-light: #fff;
  --accent-gold: #f0deb4;
}

@media (min-width: 1025px) {
  body {
    background-color: var(--primary-green);
    font-family: var(--leyu-font);
    margin: 0;
  }













  /* Content Card */
  .d-content-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .d-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #E6FFF2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .d-card-header span {
    font-size: 16px;
    color: #000000;
  }

  .d-card-body {
    padding: 20px;
  }

  .d-form-row {
    margin-bottom: 20px;
  }

  .d-form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
  }

  /* Right Sidebar Widgets */
  .d-widget-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-widget-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
  }

  .d-widget-header span {
    font-size: 14px;
    color: var(--leyu-primary-dark);
    font-weight: bold;
    border-bottom: 3px solid var(--leyu-primary-dark);
    padding-bottom: 5px;
    padding-left: 8px;
  }

  .d-widget-header.no-border span {
    border-bottom: none;
  }

  .d-more-link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }

  .d-widget-body {
    padding: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .d-empty-state {
    color: #666;
    font-size: 12px;
    text-align: center;
  }
}

/* --- page: infocenter --- */
body:has(.infocenter-container) {
  background: #f4fffa;
  font-family: var(--leyu-font);
  margin: 0;
}

body:has(.infocenter-container) .top_navbar,
body:has(.infocenter-container) .fixed-top,
body:has(.infocenter-container) #bottom_navbar {
  display: none !important;
}

.infocenter-container {
  padding: 0;
  min-height: 100vh;
  background: #f4fffa;
}

/* Shared: category + accordion */
.ic-category {
  width: 100%;
}

.ic-category + .ic-category {
  margin-top: 28px;
}

.ic-category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ic-category-title {
  margin: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #2b3143;
  white-space: nowrap;
}

.ic-category-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.ic-category-line {
  flex: 1;
  min-width: 0;
  height: 1px;
  background: #e2e5ee;
}

.ic-submenu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  position: sticky;
  top: 12px;
  z-index: 5;
  padding: 4px 0 8px;
  background: linear-gradient(#fff 70%, rgba(255, 255, 255, 0));
}

.ic-submenu-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0.8px solid #e2e5ee;
  background: #fff;
  color: #6c7ba8;
  font-size: 13px;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ic-submenu-tab-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.ic-submenu-tab:hover {
  border-color: #02b457;
  color: #02b457;
  text-decoration: none;
}

.ic-submenu-tab.active {
  background: #02b457;
  border-color: #02b457;
  color: #fff;
}

.ic-submenu-tab.active:hover {
  color: #fff;
}

.ic-groups {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ic-category {
  scroll-margin-top: 100px;
}

.ic-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}

.ic-accordion-list--flat {
  padding-top: 0;
}

.ic-accordion {
  background: #fff;
  border: 0.8px solid #f0f2f8;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(152, 161, 182, 0.04);
  overflow: hidden;
}

.ic-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.ic-accordion-btn:focus {
  outline: none;
  box-shadow: none;
}

.ic-accordion-title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 22.5px;
  color: #2b3143;
}

.ic-accordion-btn:not(.collapsed) .ic-accordion-title {
  color: #02b457;
  font-weight: 400;
}

.ic-accordion-chevron {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  position: relative;
}

.ic-accordion-chevron::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #a7b0cb;
  border-bottom: 1.5px solid #a7b0cb;
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.ic-accordion-btn:not(.collapsed) .ic-accordion-chevron::before {
  top: 8px;
  border-color: #02b457;
  transform: rotate(-135deg);
}

.ic-accordion-body {
  padding: 14px 20px 20px;
  border-top: 0.8px solid #f0fdf6;
  font-size: 14px;
  line-height: 25.2px;
  color: #6c7ba8;
  word-break: break-word;
}

.ic-accordion-body p {
  margin: 0 0 0.5em;
}

.ic-accordion-body p:last-child {
  margin-bottom: 0;
}

.ic-desktop-pane,
.ic-mobile-pane {
  display: none;
}

.ic-desktop-pane.active,
.ic-mobile-pane.active {
  display: block;
}

/* Mobile */
@media (max-width: 1024px) {
  body:has(.infocenter-container) {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }

  .infocenter-container {
    background: #f7f7f7;
  }

  .infocenter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #f5f5f5;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .infocenter-header .back-btn {
    font-size: 20px;
    color: #000;
    text-decoration: none;
    border: none;
    background: none;
    padding: 0;
  }

  .infocenter-header .page-title {
    font-size: 18px;
    color: #000;
    font-weight: 500;
  }

  .ic-mobile-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f7f7f7;
  }

  .ic-mobile-tabs::-webkit-scrollbar {
    display: none;
  }

  .ic-mobile-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    border: 0.8px solid #e2e5ee;
    background: #fff;
    box-shadow: 0 2px 6px rgba(152, 161, 182, 0.06);
    color: #6c7ba8;
    font-size: 13px;
    font-weight: 300;
    line-height: 19.5px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }

  .ic-menu-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
  }

  .ic-mobile-tab:hover,
  .ic-mobile-tab:focus {
    color: #6c7ba8;
    text-decoration: none;
  }

  .ic-mobile-tab.active {
    background: #02b457;
    border-color: #02b457;
    color: #fff;
  }

  .ic-mobile-tab.active .ic-menu-icon {
    filter: brightness(0) invert(1);
  }

  .ic-mobile-tab.active:hover,
  .ic-mobile-tab.active:focus {
    color: #fff;
  }

  .ic-mobile-body {
    padding: 8px 16px 24px;
  }

  .ic-submenu-tabs {
    top: 56px;
    background: linear-gradient(#f7f7f7 70%, rgba(247, 247, 247, 0));
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ic-submenu-tabs::-webkit-scrollbar {
    display: none;
  }

  .ic-category {
    scroll-margin-top: 120px;
  }

  .ic-category-title {
    font-size: 15px;
  }

  .ic-accordion-btn {
    padding: 14px 16px;
  }

  .ic-accordion-body {
    padding: 12px 16px 16px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .mobile-infocenter-container {
    display: none !important;
  }

  body:has(.infocenter-container) {
    padding-top: 0;
  }

  .infocenter-container .desktop-dashboard-container {
    background: transparent;
  }

  .ic-desktop-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }

  .ic-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px 12px 18px;
    border: none;
    border-left: 2.4px solid transparent;
    background: transparent;
    color: #6c7ba8;
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .ic-nav-item .ic-menu-icon {
    width: 20px;
    height: 20px;
  }

  .ic-nav-item:hover {
    color: #02b457;
    text-decoration: none;
  }

  .ic-nav-item.active {
    background: #f0fdf6;
    border-left-color: #02b457;
    color: #02b457;
  }

  .ic-nav-item.active:hover {
    color: #02b457;
  }

  .ic-desktop-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 20px 28px 28px;
    min-height: 0;
  }
}
/* --- page: promote --- */
/* Default / Mobile Styles */
body:has(.promotion-nav-mobile) {
  padding-top: 0px !important;
  background-color: #f8f9fa;
}

body:has(.promotion-nav-mobile) .top_navbar,
body:has(.promotion-nav-mobile) .fixed-top {
  display: none !important;
}

/* Mobile Header */
.mobile-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.mobile-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #000000;
}

/* Mobile Nav */
.promotion-nav-mobile {
  position: sticky;
  top: 57px;
  /* Height of header approx */
  z-index: 999;
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 15px;
  background: #fff;
  /* Keep white for clean look */
  /* border-bottom: 1px solid #eee; */
  -ms-overflow-style: none;
  scrollbar-width: none;
  gap: 10px;
}

.promotion-nav-mobile::-webkit-scrollbar {
  display: none;
}

.nav-pill-mobile {
  padding: 6px 16px;
  border-radius: 20px;
  background: #f5f5f5;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-pill-mobile.active {
  background: var(--leyu-primary-dark);
  /* Green user uses */
  color: #fff;
  font-weight: 500;
}

/* Mobile Content */
.mobile-content {
  padding: 15px;
  padding-bottom: 80px;
  /* Space for bottom nav if any */
}

.mobile-card {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  background: #fff;
  padding: 12px 15px;
}

.mobile-card img {
  width: 100%;
  display: block;
}

.promotion-title-text {
  display: block;
  color: #000000;
  font-size: 15px;
  font-weight: 600;
}

@media (min-width: 1025px) {
  body {
    background-color: #f4f5f7;
  }

  /* Hide Mobile Elements */
  .mobile-header,
  .promotion-nav-mobile {
    display: none !important;
  }

  .desktop-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
    display: flex;
    gap: 16px;
  }

  .desktop-inner-flex {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  /* Sidebar — match member shell left rail (240px) */
  .desktop-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 16px;
    padding: 20px 0;
    height: fit-content;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  }

  .sidebar-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    transition: all 0.2s;
    position: relative;
  }

  .sidebar-item:hover {
    color: var(--leyu-primary-dark);
    background: #f0fdf4;
  }

  .sidebar-item.active {
    color: var(--leyu-primary-dark);
    background: #fff;
    font-weight: bold;
  }

  .sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 4px;
    background: var(--leyu-primary-dark);
    border-radius: 0 4px 4px 0;
  }

  .sidebar-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
  }

  /* Main Desktop Content */
  .desktop-main {
    flex-grow: 1;
  }

  .desktop-banner {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  .desktop-banner img {
    width: 100%;
    display: block;
  }

  .promo-grid {
    /* display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 20px; */
    /* User image shows list view essentially on desktop too, just detailed cards */
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .promo-card-desktop-simple {
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  }

  .promotion-title-text-desktop {
    font-size: 16px;
  }

  .promo-card-desktop {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    display: flex;
    height: 140px;
    /* Fixed height for consistency */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    position: relative;
    align-items: center;
    background: linear-gradient(90deg, #FDFBFB 0%, #F4F7F6 100%);
  }

  /* Decor for card */
  .card-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f7f9fc;
    /* Fallback */
    z-index: 1;
  }

  .card-content-left {
    position: relative;
    z-index: 2;
    padding: 20px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .card-tag {
    background: #FF8F6B;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px 0 10px 0;
    /* Irregular shape */
    font-size: 10px;
    margin-bottom: 8px;
    position: absolute;
    top: 0;
    left: 20px;
  }

  .card-date {
    font-size: 12px;
    color: #000000;
    margin-bottom: 5px;
  }

  .card-title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
  }

  .card-btn {
    background: linear-gradient(90deg, #62b1f6 0%, #4facfe 100%);
    color: #fff;
    border: none;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(79, 172, 254, 0.3);
  }

  .card-img-right {
    position: relative;
    z-index: 2;
    width: 200px;
    /* Fixed width area for image */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
  }

  .card-img-right img {
    max-height: 90%;
    max-width: 100%;
    object-fit: contain;
  }
}

/* --- page: referer --- */
body:has(.referer-container) {
  background: #f5f5f5;
  padding-top: 0 !important;
  font-family: var(--leyu-font);
}

body:has(.referer-container) .top_navbar,
body:has(.referer-container) .fixed-top,
body:has(.referer-container) #bottom_navbar {
  display: none !important;
}

/* Header from transfer.php */
.custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 10px 2px;
  color: #000000;
}

.custom-header .title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .5px;
}

.custom-header .right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9aa0a6;
}

.custom-header .left i {
  font-size: 16px;
  color: #444
}

.referer-container {
  padding-bottom: 80px;
}

/* === Header / Hero Section === */
.referer-hero {
  position: relative;
  width: 100%;
  background: #EAFDF5;
  /* Fallback light green */
  overflow: hidden;
}

/* === Navigation Tabs (Optional if in header) === */
.ref-nav {
  display: flex;
  background: #fff;
  padding: 0 10px;
  border-bottom: 1px solid #eee;
}

/* Mobile: show tabs when rebate settings produce multiple categories */
.referer-container .ref-nav {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.referer-container .ref-nav-item {
  flex: 1 0 auto;
  min-width: 88px;
  white-space: nowrap;
  font-size: 13px;
}

.ref-nav-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
  position: relative;
}

.ref-nav-item.active {
  color: #000;
  font-weight: 600;
}

.ref-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: #000000;
}

/* === Stats Cards === */
.stats-row {
  display: flex;
  gap: 10px;
  padding: 15px;
  margin-top: -15px;
  /* Overlap banner if needed, or just normal */
  position: relative;
  z-index: 2;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 15px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row;
  /* Changed to row */
  align-items: center;
  justify-content: flex-start;
  /* Align start */
  gap: 8px;
  /* Gap between icon and text */
  text-align: left;
}

.stat-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

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

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
}

.stat-label {
  font-size: 11px;
  color: #000000;
}

/* === Invite Link Section === */
.invite-section {
  margin: 15px;
  background: #D1FAE5;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.invite-header {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
}

.qr-code-wrap {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.qr-code-img {
  width: 120px;
  height: 120px;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.link-box {
  display: flex;
  align-items: center;
  background: transparent;
}

.link-url {
  font-size: 12px;
  color: #555;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-copy {
  background: var(--leyu-primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
}

/* === Content Sections === */
.content-box {
  background: #fff;
  margin: 15px;
  padding: 20px;
  border-radius: 12px;
}

.section-title {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 400;
}

.section-content {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

.data-table {
  width: 100%;
  font-size: 12px;
  margin-top: 15px;
  color: #666;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  color: #000000;
  font-weight: 400;
}

.data-table td {
  padding: 10px 0;
  border-bottom: 1px solid #f9f9f9;
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.text-right {
  text-align: right;
}

/* Rules */
.rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: #555;
}

.rules-list li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.highlight-red {
  color: #ff4d4f;
}

@media (min-width: 1025px) {
  body {
    background-color: #f4f5f7;
  }

  .desktop-wrapper-outer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
    box-sizing: border-box;
  }

  /* Keep in sync with promote block / member shell left rail */
  .desktop-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 16px;
    padding: 20px 0;
    height: fit-content;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  }

  .sidebar-item {
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #666;
    font-size: 15px;
    transition: all 0.2s;
    position: relative;
  }

  .sidebar-item:hover {
    color: var(--leyu-primary-dark);
    background: #f0fdf4;
  }

  .sidebar-item.active {
    color: var(--leyu-primary-dark);
    background: #fff;
    font-weight: bold;
  }

  .sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 25px;
    width: 4px;
    background: var(--leyu-primary-dark);
    border-radius: 0 4px 4px 0;
  }

  .desktop-main {
    flex-grow: 1;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    min-height: 0;
  }

  .desktop-banner {
    margin-bottom: 20px;
  }

  .desktop-banner img {
    width: 100%;
    border-radius: 16px;
    display: block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }

  /* Adjusted styles for desktop content reuse */
  .desktop-main .stats-row {
    margin-top: 0;
    padding: 0 0 25px 0;
    gap: 20px;
  }

  .desktop-main .stat-card {
    box-shadow: none;
    border: 1px solid #eee;
    padding: 20px;
  }

  .desktop-main .invite-section {
    margin: 0 0 30px 0;
    padding: 20px;
  }

  .desktop-main .content-box {
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
  }

  .desktop-main .section-title {
    font-size: 14px;
  }
}

/* --- page: setmobile --- */
body:has(.mobile-container) {
  background: #f0fcf8;
  font-family: var(--leyu-font);
  margin: 0;
  padding-top: 0px !important;
}

body:has(.mobile-container) .top_navbar,
body:has(.mobile-container) .fixed-top,
body:has(.mobile-container) #bottom_navbar {
  display: none !important;
}

.mobile-container {
  padding: 0;
  min-height: 100vh;
  background: #f0fcf8;
}

/* Header */
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  position: relative;
}

.mobile-header .back-btn {
  font-size: 20px;
  color: #000000;
  text-decoration: none;
}

.mobile-header .page-title {
  font-size: 18px;
  color: #000000;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Form Content */
.form-content {
  padding: 20px;
  background: #fff;
  margin-top: 15px;
  border-radius: 20px;
  margin: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.input-wrapper {
  background: #f5f7fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 5px 15px;
  border: 1px solid transparent;
  transition: all 0.3s;
}

.input-wrapper:focus-within {
  background: #fff;
  border-color: #1cb565;
  box-shadow: 0 0 0 3px rgba(28, 181, 101, 0.1);
}

.country-select {
  border: none;
  background: transparent;
  font-size: 15px;
  color: #000000;
  font-weight: 500;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  outline: none;
}

.input-wrapper .sms-country-cc-select,
.input-wrapper .country-select.sms-country-cc-select {
  border: none;
  background: transparent;
  font-size: 15px;
  color: #000000;
  font-weight: 500;
  margin-right: 10px;
  padding: 0 10px 0 0;
  border-right: 1px solid #ddd;
  border-radius: 0;
  outline: none;
  width: auto;
  min-width: 4.5rem;
  max-width: 7.5rem;
  box-shadow: none;
  flex: 0 0 auto;
}

.input-wrapper .sms-country-cc-static,
.input-wrapper .country-select.sms-country-cc-static {
  font-size: 15px;
  color: #000000;
  font-weight: 500;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #ddd;
  white-space: nowrap;
  flex: 0 0 auto;
}

.forgotPass_form .input-group .sms-country-cc-select,
.forgotPass_form .input-group .form-select.sms-country-cc-select {
  max-width: 7.5rem;
  flex: 0 0 auto;
}

.forgotPass_form .input-group .sms-country-cc-static {
  display: inline-flex;
  align-items: center;
  padding: 0 0.75rem;
  white-space: nowrap;
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-right: 0;
  border-radius: 0.375rem 0 0 0.375rem;
}

.form-input {
  border: none;
  background: transparent;
  width: 100%;
  padding: 10px 0;
  font-size: 15px;
  color: #000000;
  outline: none;
}

.form-input::placeholder {
  color: #666;
}

.btn-submit {
  background: linear-gradient(90deg, #1cb565 0%, #0ebb60 100%);
  color: #fff;
  border: none;
  width: 100%;
  padding: 14px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
  box-shadow: 0 5px 15px rgba(28, 181, 101, 0.3);
  cursor: pointer;
}

.btn-submit:active {
  transform: scale(0.98);
}

/* Modal Styling */
.modal-content {
  background-color: #fff !important;
  /* Force white background */
  border-radius: 20px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.modal-header {
  border-bottom: none;
  padding: 20px 20px 10px;
}

.modal-body {
  padding: 0 25px 25px;
}

.btn_close {
  background: #f5f5f5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  text-decoration: none;
}

.otp_title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 5px;
}

.otp_content {
  color: #000000;
  font-size: 12px;
  margin-bottom: 25px;
}

.otp-field {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.otp-field input {
  width: 45px;
  height: 50px;
  font-size: 24px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #f9f9f9;
  text-align: center;
  outline: none;
  font-weight: bold;
  color: #000000;
}

.otp-field input:focus {
  border-color: #1cb565;
  background: #fff;
}

.btn_reset {
  background: #1cb565;
  color: #fff;
  border-radius: 25px;
  padding: 12px 30px;
  width: 100%;
  border: none;
}

.btn_reset:disabled {
  background: #ccc;
}

.help-link {
  text-align: center;
  margin-top: 25px;
}

.help-link a {
  color: #1cb565;
  text-decoration: none;
  font-size: 13px;
}

/* --- page: sponsor --- */
body {
  padding-top: 0 !important;
  font-size: 12px;
  font-family: var(--leyu-font);
  font-weight: 100;
}

.navbar {
  display: none;
}

.customer_service_container {
  background-color: #E6FFF2;
}

.sp_top_header {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

.sp_top_header_title {
  color: #303442;
  text-align: center;
  margin-bottom: 0;
  line-height: 25px;
}

.sp_sponsor_list {
  padding: 8px 12px;
}

.sp_sponsor_item {
  position: relative;
  width: 100%;
  margin-bottom: 5px;
}

.sp_sponsor_item_img {
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.sp_sponsor_item_badge {
  position: absolute;
  left: 5%;
  bottom: 0;
  display: flex;
  align-items: center;
}

.sp_sponsor_item_badge_img {
  width: 38px;
  object-fit: cover;
  margin-right: 4px;
}

.sp_sponsor_item_badge_text {
  color: #7981A4;
  line-height: 16px;
  margin-bottom: 0;
}

/* --- page: tnc --- */
/* 覆盖全局背景 - using the light green tint from setmobile */
body {
  background: #f0fcf8 !important;
  font-family: var(--leyu-font);
}

#tnc_section {
  padding: 0;
}

/* Card styling similar to setmobile.php .form-content */
#tnc_section .tnc-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  margin-top: 15px;
  margin-bottom: 20px;
}

#tnc_section .tnc-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

#tnc_section .tnc-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  /* A light green background for the icon to match theme, or keep yellow if desired. 
           Using a subtle green to match #1cb565 theme usually. */
  background: rgba(28, 181, 101, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

#tnc_section .tnc-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

#tnc_section .tnc-header-text {
  color: #000000;
}

#tnc_section .tnc-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #000000;
}

#tnc_section .tnc-subtitle {
  font-size: 0.85rem;
  color: #555;
  margin-top: 2px;
}

#tnc_section .tnc-card-body {
  max-height: 65vh;
  overflow-y: auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  /* Darker grey for text readability on white */
}

#tnc_section .tnc-card-body p {
  margin-bottom: .85rem;
}

#tnc_section .tnc-card-body ul,
#tnc_section .tnc-card-body ol {
  padding-left: 1.2rem;
  margin-bottom: .85rem;
}

/* Scrollbar styling for light theme */
#tnc_section .tnc-card-body::-webkit-scrollbar {
  width: 6px;
}

#tnc_section .tnc-card-body::-webkit-scrollbar-track {
  background: transparent;
}

#tnc_section .tnc-card-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 999px;
}

#tnc_section .tnc-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* --- page: promote_detail --- */
.event_detail_top_title {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  margin-left: 5px;
}

.event_detail_top_title a {
  color: var(--leyu-bg);
  text-decoration: none;
}

.event_detail_title {
  font-size: var(--leyu-font-size-md);
  font-weight: var(--leyu-font-weight-normal);
  letter-spacing: 0.32px;
  margin-bottom: 0;
  margin-left: 15px;
}

.event_detail_image img {
  width: 100%;
  border-radius: var(--leyu-radius-lg);
  margin-bottom: 30px;
}

.event_detail_content {
  font-size: var(--leyu-font-size-lg);
  font-weight: var(--leyu-font-weight-normal);
}

/* --- page: hall --- */
#hall_section {
  padding: 40px;
  overflow: hidden;
  border-radius: var(--leyu-radius-lg);
  width: 100%;
  height: 100%;
  margin-left: 0;
}

.hall_top_content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  margin-left: 5px;
}

#hall_section a {
  text-decoration: none;
  color: var(--leyu-text);
}

.hall_title {
  font-size: var(--leyu-font-size-md);
  font-weight: var(--leyu-font-weight-semibold);
  letter-spacing: 0.32px;
  margin-bottom: 0;
  margin-left: 15px;
}

.game_item {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.game_item img {
  border-radius: 18px;
}

.game_item span {
  font-size: var(--leyu-font-size-md);
  margin-top: 10px;
  letter-spacing: 0;
  opacity: 0.35;
  text-align: center;
}

.game_disabled img {
  filter: brightness(0.8);
}

.game_disabled::after {
  content: '';
  position: absolute;
  height: 30px;
  width: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.game_item_mobile {
  position: relative;
  text-align: center;
}

.game_logo_mobile {
  width: 100%;
  border-radius: 10px;
}

.game_item_mobile span {
  font-size: var(--leyu-font-size-sm);
  display: block;
  margin-top: 5px;
}

/* --- page: info_centre --- */
@keyframes leyu-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes leyu-fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

#info_centre_section {
  padding: 40px;
  overflow: hidden;
  background-color: #1A191E;
  border-radius: var(--leyu-radius-lg);
  width: calc(100% - 330px);
  height: 100%;
  margin-left: 0;
}

.info_menu_container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 4px 8px;
  background-color: #000;
  border-radius: var(--leyu-radius-sm);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.info_menu_container::-webkit-scrollbar {
  display: none;
}

.info_menu_container a {
  text-decoration: none;
}

.info_menu {
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--leyu-font-weight-normal);
  padding: 12px 16px;
  white-space: nowrap;
}

.info_menu span {
  border-bottom: 1px solid transparent;
  color: #8b99a3;
  padding-bottom: 4px;
}

.info_menu.active span {
  font-weight: var(--leyu-font-weight-medium);
  border-bottom: 2px solid #b7a100;
  color: var(--leyu-bg);
}

.info_submenu_container {
  display: flex;
  margin-top: 20px;
  margin-bottom: 15px;
}

.info_submenu {
  color: #8b99a3;
  cursor: pointer;
  margin-right: 8px;
  white-space: nowrap;
}

.info_submenu span {
  font-size: 13px;
  padding: 8px 18px;
}

.info_submenu.active span {
  font-weight: var(--leyu-font-weight-medium);
  color: var(--leyu-text);
  background: var(--leyu-warning);
  border-radius: 45px;
}

.info_details_container {
  padding: 12px 0;
}

.info_details_container .accordion-button::after {
  flex-shrink: 0;
  filter: invert(1);
}

.info_details_container .accordion-item {
  font-size: var(--leyu-font-size-lg);
  color: var(--leyu-bg);
  background-color: #212529;
  margin-bottom: 15px;
}

.info_details_container .accordion-button {
  font-size: var(--leyu-font-size-lg);
  font-weight: var(--leyu-font-weight-medium);
  color: var(--leyu-bg);
  background: #000;
  padding: 8px 14px;
  white-space: normal;
  word-break: break-word;
}

.info_tab_pane,
.info_details_tab_pane {
  display: none;
  opacity: 0;
  color: var(--leyu-bg);
  animation: leyu-fadeOut 0.5s forwards;
}

.info_tab_pane.active,
.info_details_tab_pane.active {
  display: block;
  animation: leyu-fadeIn 0.5s forwards;
}

.info_centre_img_content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
}

.info_centre_img {
  width: 25px;
  height: auto;
}

/* --- page: launchgame --- */
.leyu-launchgame-exit {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--leyu-bg);
  border-radius: 5px;
  left: 20px;
  top: 20px;
  width: 70px;
  height: 25px;
  position: fixed;
  z-index: 9999999;
  text-align: center;
  font-size: 22px;
  color: var(--leyu-bg);
  font-family: sans-serif;
  padding-top: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.leyu-launchgame-frame {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 999999;
}

.leyu-launchgame-expired {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

@media (max-width: 1024px) {
  .event_detail_top_title {
    font-size: var(--leyu-font-size-lg);
    margin-bottom: 15px;
  }

  .event_detail_title {
    font-size: var(--leyu-font-size-lg);
  }

  .event_detail_image img {
    margin-bottom: 15px;
  }

  #hall_section {
    width: 100%;
    padding: 20px;
  }

  .hall_top_content {
    font-size: var(--leyu-font-size-lg);
    margin-bottom: 15px;
    margin-left: 0;
  }

  .hall_top_content a {
    color: var(--leyu-bg);
  }

  .hall_title {
    font-size: var(--leyu-font-size-lg);
  }

  #hall_section .col-4 {
    padding-left: 5px;
    padding-right: 5px;
  }

  #info_centre_section {
    width: 100%;
    overflow: hidden;
    padding: 12px;
  }
}

/* ========== PAGE: MEMBER ========== */
/** Leyu page styles: member.css */

/* --- page: bonus_center --- */
/* =========================================
     COMPONENT STYLES (Mobile Classes from Transaction Record)
     ========================================= */
@media (max-width: 1024px) {

  body:has(.transaction_container) .top_navbar,
  body:has(.transaction_container) .fixed-top {
    display: none;
  }

  body:has(.transaction_container) {
    padding-top: 0px !important;
  }
}

.transaction_top_header {
  position: relative;
  width: 100%;
  background-color: #92eba7;
  /* Header green background from image */
  height: 44px;
  /* Taller header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: none;
  z-index: 10;
}

.transaction_top_header_title {
  color: #303442;
  text-align: center;
  margin: 0;
  line-height: 25px;
  font-size: 16px;
  /* Larger title */
  font-weight: 500;
}

.transaction_top_header_back {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.transaction_top_header_back img {
  height: 16px;
  width: auto;
}

.header_right_link {
  position: absolute;
  right: 15px;
  color: #666;
  font-size: 12px;
  text-decoration: none;
}

.transaction_container {
  background-color: #f7fcf9;
  min-height: 100vh;
  position: relative;
  width: 100%;
  /* max-width constraint handled by layout or media queries if needed */
}

/* Bonus Specific Styles */
.bonus_top_banner {
  padding: 10px 15px;
  display: flex;
  gap: 10px;
  background: linear-gradient(180deg, #92eba7 0%, #a7f0ba 50%, #f7fcf9 100%);
  /* Green fade background */
}

.bonus_card {
  flex: 1;
  height: 60px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bonus_card.rebate {
  background: linear-gradient(90deg, #e3fdf5 0%, #ffe6fa 100%);
  /* Light cyan/pink gradient */
  background: linear-gradient(to right, #d4fcff, #eefcff);
  /* Adjusted to look more like image */
}

.bonus_card.coupon,
.bonus_card.redpacket {
  background: linear-gradient(to right, #ffe8e5, #fff2f0);
}

.bonus_card.referral {
  background: linear-gradient(to right, #e8f5e9, #f1f8e9);
}

.bonus_card.referral .bonus_card_icon {
  background: #43a047;
}

.bonus_top_banner {
  flex-wrap: wrap;
}

.leyu-ref-state-block {
  margin: 20px 15px;
  padding: 28px 16px;
  background: #fff;
  border-radius: 8px;
  text-align: center;
}

.leyu-ref-state-block.desktop {
  margin: 0;
  padding: 40px 16px;
}

.leyu-ref-state-text {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

.leyu-ref-bonus-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 15px 20px;
}

.leyu-ref-bonus-item {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.leyu-ref-bonus-main {
  min-width: 0;
  flex: 1;
}

.leyu-ref-bonus-name {
  font-weight: 600;
  color: #222;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leyu-ref-bonus-time {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

.leyu-ref-bonus-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: #555;
}

.leyu-ref-bonus-amt {
  font-weight: 600;
  color: #2e7d32;
}

.leyu-ref-bonus-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.leyu-ref-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
}

.leyu-ref-badge-paid {
  background: #e8f5e9;
  color: #2e7d32;
}

.leyu-ref-badge-pending {
  background: #fff8e1;
  color: #f57c00;
}

.leyu-ref-badge-other {
  background: #f5f5f5;
  color: #666;
}

.leyu-ref-claim-btn {
  border: none;
  background: #43a047;
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
}

.leyu-ref-claim-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.leyu-ref-go-claim-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #43a047;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

.leyu-ref-panel {
  padding: 0 15px 24px;
}

.leyu-ref-panel.desktop {
  padding: 0;
}

.leyu-ref-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 8px 0 12px;
  color: #222;
}

.leyu-ref-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.leyu-ref-stat-cards.compact {
  margin-bottom: 12px;
}

.leyu-ref-stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.leyu-ref-stat-label {
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
}

.leyu-ref-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: #2e7d32;
}

.leyu-ref-share-card,
.leyu-ref-section {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.leyu-ref-share-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.leyu-ref-qr img {
  width: 120px;
  height: 120px;
  display: block;
  border: 1px solid #eee;
  border-radius: 8px;
}

.leyu-ref-share-fields {
  flex: 1;
  min-width: 220px;
}

.leyu-ref-field-label {
  display: block;
  font-size: 13px;
  color: #555;
  margin: 8px 0 6px;
}

.leyu-ref-copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.leyu-ref-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d9e8dd;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  background: #f8fffa;
}

.leyu-ref-copy-btn,
.leyu-ref-search-btn {
  border: none;
  background: #43a047;
  color: #fff;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.leyu-ref-social {
  margin-top: 12px;
}

.leyu-ref-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none !important;
  color: #fff !important;
  font-size: 13px;
}

.leyu-ref-share-btn.whatsapp {
  background: #25d366;
}

.leyu-ref-share-btn.telegram {
  background: #2aabee;
}

.leyu-ref-section-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #222;
}

.leyu-ref-section-sub {
  font-size: 12px;
  color: #555;
  margin: 0 0 10px;
}

.leyu-ref-tree {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.leyu-ref-tree-line {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  cursor: pointer;
}

.leyu-ref-tree .icon_disabled {
  opacity: 0.35;
}

.leyu-ref-tree-empty {
  color: #666;
  font-size: 13px;
}

.leyu-ref-meta {
  font-size: 11px;
  color: #666;
  text-transform: uppercase;
}

.leyu-ref-bonus-metrics em {
  font-style: normal;
  color: #666;
  margin-right: 4px;
}

.leyu-ref-dash {
  color: #666;
}

.leyu-ref-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.leyu-ref-date {
  border: 1px solid #d9e8dd;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}

.leyu-ref-table {
  font-size: 13px;
}

.leyu-ref-stat-cards--6 {
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 720px) {
  .leyu-ref-stat-cards--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.leyu-ref-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 15px;
  margin-top: -15px;
  position: relative;
  z-index: 2;
}

@media (min-width: 720px) {
  .leyu-ref-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.desktop-main .leyu-ref-stats-grid {
  margin-top: 0;
  padding: 0 0 20px;
}

.leyu-ref-gen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 15px 12px;
}

.desktop-main .leyu-ref-gen-chips,
.leyu-ref-panel .leyu-ref-gen-chips {
  padding-left: 0;
  padding-right: 0;
}

.leyu-ref-gen-chip {
  display: inline-block;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

.leyu-ref-inline-rules,
.leyu-ref-tab-body {
  margin: 0 15px 20px;
  background: #fff;
  border-radius: 8px;
  padding: 14px;
}

.desktop-main .leyu-ref-inline-rules,
.desktop-main .leyu-ref-tab-body {
  margin: 0 0 20px;
}

.leyu-ref-howto-list {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}

.leyu-ref-program-card {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.leyu-ref-program-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.leyu-ref-program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.leyu-ref-algo-text {
  font-size: 13px;
  color: #555;
  line-height: 1.55;
  margin: 0 0 10px;
}

.leyu-ref-turnover-note,
.leyu-ref-turnover-footnote {
  font-size: 12px;
  color: #666;
  line-height: 1.55;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #f7faf8;
  border-radius: 6px;
  border-left: 3px solid #43a047;
}

.leyu-ref-turnover-footnote {
  margin-top: 10px;
  margin-bottom: 0;
  background: #fffaf0;
  border-left-color: #f0a202;
}

.leyu-ref-rules-empty {
  font-size: 13px;
  color: #888;
  padding: 8px 0;
}

.leyu-ref-rules-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.leyu-ref-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 480px;
}

.leyu-ref-rules-table th,
.leyu-ref-rules-table td {
  padding: 8px 6px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  color: #444;
  white-space: nowrap;
}

.leyu-ref-rules-table th {
  color: #222;
  font-weight: 600;
}

.leyu-ref-qr-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #666;
  text-align: center;
}

.leyu-ref-claim-wrap {
  padding-top: 8px;
}

.leyu-ref-tutorial-btn {
  border: none;
  background: transparent;
  color: #9aa0a6;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}

.leyu-ref-tutorial-btn.desktop {
  color: #555;
  font-size: 14px;
}

.leyu-ref-desktop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.desktop-main .ref-nav {
  display: flex;
  margin-bottom: 16px;
  border-bottom: 1px solid #eee;
  padding: 0;
  background: transparent;
}

.leyu-ref-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.leyu-ref-modal[hidden] {
  display: none !important;
}

.leyu-ref-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.leyu-ref-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}

@media (min-width: 1025px) {
  .leyu-ref-modal {
    align-items: center;
  }

  .leyu-ref-modal-panel {
    border-radius: 12px;
    max-height: 80vh;
  }
}

.leyu-ref-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.leyu-ref-modal-head h2 {
  margin: 0;
  font-size: 17px;
  color: #222;
}

.leyu-ref-modal-close {
  border: none;
  background: #f3f3f3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}

body.leyu-ref-modal-open {
  overflow: hidden;
}

/* 红包独立页 / 列表 */
.leyu-rp-page .leyu-rp-panel {
  margin-top: 12px;
}

.leyu-rp-panel {
  margin: 12px 0 8px;
  padding: 0 15px 16px;
}

.leyu-rp-active-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #fff8e6;
  border: 1px solid #ffe0a3;
  border-radius: 8px;
  font-size: 13px;
  color: #5c4a1f;
  line-height: 1.45;
}

.leyu-rp-active-notice>i {
  color: #e53935;
  margin-top: 2px;
}

.leyu-rp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leyu-rp-item {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.leyu-rp-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.leyu-rp-txn {
  font-weight: 600;
  color: #222;
  font-size: 13px;
  word-break: break-all;
}

.leyu-rp-item-right {
  text-align: right;
  flex-shrink: 0;
}

.leyu-rp-amt {
  font-weight: 700;
  color: #e53935;
  font-size: 16px;
  margin-bottom: 4px;
}

.leyu-rp-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  color: #555;
}

.leyu-rp-item-meta em {
  font-style: normal;
  color: #666;
  margin-right: 2px;
}

.leyu-rp-table .leyu-ref-badge {
  white-space: nowrap;
}

/* 对齐 12win USD #referral_bonus_section .m-ref-bonus-empty */
.leyu-ref-bonus-empty,
.m-ref-bonus-empty {
  text-align: center;
  padding: 22px 14px;
  color: #5a6b5e;
  font-size: 14px;
  line-height: 1.45;
  background: #f7fcf9;
  border: 1px dashed #c5e0cc;
  border-radius: 10px;
  margin: 0;
}

.leyu-ref-bonus-empty .m-ref-bonus-empty-text,
.m-ref-bonus-empty .m-ref-bonus-empty-text {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.leyu-ref-records-list {
  padding: 0;
  min-height: auto;
  max-height: none;
  overflow: visible;
}

.leyu-ref-record-item.transaction_record_item {
  height: auto;
  min-height: 118px;
  padding-bottom: 12px;
  overflow: visible;
}

.leyu-ref-record-item .transaction_record_header {
  background-color: rgba(229, 245, 232, 0.7);
}

.leyu-ref-record-item .transaction_record_body {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin: 52px 15px 0;
}

.leyu-ref-record-item .transaction_record_status {
  top: 14px;
}

.leyu-ref-record-meta {
  position: relative;
  margin: 8px 15px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 11px;
  color: #666;
  z-index: 1;
}

.leyu-ref-records-empty {
  min-height: 220px;
  padding: 30px 10px;
}

.leyu-ref-section--records .leyu-ref-filter-row.desktop {
  margin: 0 0 12px;
  gap: 12px;
}

.leyu-ref-desktop-table-wrap {
  margin: 0 -14px -14px;
  overflow-x: auto;
}

.leyu-ref-desktop-table-wrap .transaction-table-desktop {
  width: 100%;
}

.bonus_desktop_wrap .leyu-ref-section--records .filter-label {
  color: #666;
  font-size: 13px;
}

.bonus_card_icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bonus_card.rebate .bonus_card_icon {
  background: #2b99ff;
  /* Blue circle */
}

.bonus_card.coupon .bonus_card_icon,
.bonus_card.redpacket .bonus_card_icon {
  background: #e53935;
}

.bonus_card_icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.bonus_card_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bonus_card_title {
  font-size: 12px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 2px;
}

.bonus_card_subtitle {
  font-size: 9px;
  color: #666;
  white-space: nowrap;
  scale: 0.9;
  transform-origin: left center;
}

/* Filter Section */
.bonus_filter_row {
  display: flex;
  padding: 5px 15px;
  gap: 10px;
}

.bonus_filter_btn {
  background: #fff;
  border-radius: 15px;
  padding: 4px 12px;
  font-size: 11px;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bonus_filter_btn i,
.bonus_filter_btn img {
  font-size: 8px;
  width: 8px;
  height: 8px;
}

/* Summary Section (Date & Stats) */
.bonus_summary_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background: #fff;
  margin-top: 10px;
}

.bonus_date_selector {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bonus_stats {
  display: flex;
  gap: 20px;
}

.bonus_stat_item {
  text-align: right;
}

.bonus_stat_label {
  font-size: 10px;
  color: #000000;
}

.bonus_stat_value {
  font-size: 12px;
  color: #000000;
  font-weight: 700;
}

/* Content Area & Empty State */
.bonus_content {
  padding: 20px 15px;
  min-height: 400px;
  /* Ensure space for empty state */
  display: flex;
  flex-direction: column;
}

.transaction_empty_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  flex: 1;
}

.transaction_empty_illustration {
  width: 140px;
  height: 140px;
  margin-bottom: 20px;
}

.transaction_empty_illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.transaction_empty_text {
  color: #c0c4cc;
  font-size: 13px;
}

/* Media Queries for Desktop hiding */
@media (min-width: 1025px) {
  .transaction_container {
    display: none;
    /* Hide mobile specific stuff on desktop if we had desktop layout, but here we only implement mobile view for now as per request */
  }

  /* If desktop view is needed, we would implement .desktop-layout here */
}

.bonus_desktop_wrap,
.mission_desktop_wrap {
  display: none;
}

@media (min-width: 1025px) {

  .bonus_desktop_wrap,
  .mission_desktop_wrap {
    display: block !important;
  }

  body {
    background-color: #F5FAF8 !important;
  }

  /* Reset for desktop structure */


  .leyu-bc-desktop {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .leyu-bc-top-banner {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 70px;
    padding: 12.8px 16.8px;
    border-radius: 12px;
    border: 1px solid #fff;
    background: linear-gradient(180deg, #ddf7e3 0%, #fff 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
  }

  .leyu-bc-top-entry {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 4px 8px;
    text-decoration: none !important;
    color: inherit;
  }

  .leyu-bc-top-icon {
    width: 33px;
    height: 36px;
    object-fit: contain;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .leyu-bc-top-title {
    font-size: 18px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    margin-right: 9px;
  }

  .leyu-bc-top-sep {
    width: 1px;
    height: 15px;
    background: #e4e6ed;
    margin-right: 8px;
    flex-shrink: 0;
  }

  .leyu-bc-top-sub {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: #616783;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .leyu-bc-top-claim {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    font-size: 14px;
    color: #02b457;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .leyu-bc-top-claim img {
    width: 12px;
    height: 12px;
    display: block;
  }

  .leyu-bc-top-divider {
    width: 1px;
    align-self: stretch;
    margin: 0 8px;
    background: linear-gradient(180deg, rgba(218, 222, 236, 0), #dadeec 50%, rgba(218, 222, 236, 0));
    flex-shrink: 0;
  }

  .leyu-bc-rules-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }

  .leyu-bc-rules-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    color: #566286;
    line-height: 1;
    text-decoration: none !important;
  }

  .leyu-bc-rules-link img {
    width: 24px;
    height: 24px;
    display: block;
  }

  .leyu-bc-card {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(152, 161, 182, 0.04);
  }

  .leyu-bc-share-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
  }

  .leyu-bc-share-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  .leyu-bc-qr {
    width: 197px;
    height: 197px;
    border-radius: 8px;
    overflow: hidden;
  }

  .leyu-bc-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .leyu-bc-code-box {
    display: flex;
    align-items: center;
    width: 232px;
    height: 36px;
    padding: 0 8px 0 9px;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
  }

  .leyu-bc-code-label {
    font-size: 11px;
    color: #778393;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .leyu-bc-code-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 11px;
    color: #333;
    outline: none;
    padding: 0 6px 0 0;
  }

  .leyu-bc-code-copy {
    flex-shrink: 0;
    border: none;
    background: #e7f9f2;
    color: #19b474;
    border-radius: 4px;
    height: 20px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    line-height: 20px;
  }

  .leyu-bc-share-hint {
    margin: 0;
    font-size: 11px;
    color: #778393;
    text-align: center;
    white-space: nowrap;
  }

  .leyu-bc-share-vdiv {
    width: 1px;
    height: 290px;
    background: #e5e9ed;
    flex-shrink: 0;
  }

  .leyu-bc-share-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .leyu-bc-mini-stats {
    display: flex;
    gap: 12px;
  }

  .leyu-bc-mini-stat {
    position: relative;
    width: 185px;
    height: 72px;
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    padding: 14px;
    box-sizing: border-box;
  }

  .leyu-bc-mini-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
  }

  .leyu-bc-mini-stat--green::before { background: #19b474; }
  .leyu-bc-mini-stat--orange::before { background: #fb9730; }

  .leyu-bc-mini-label {
    font-size: 12px;
    color: #778393;
    margin-bottom: 6px;
  }

  .leyu-bc-mini-val {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
  }

  .leyu-bc-mini-stat--green .leyu-bc-mini-val { color: #19b474; }
  .leyu-bc-mini-stat--orange .leyu-bc-mini-val { color: #fb9730; }

  .leyu-bc-field-label {
    display: block;
    font-size: 12px;
    color: #778393;
    margin-bottom: 6px;
  }

  .leyu-bc-invite {
    max-width: 652px;
    padding-top: 11px;
    border-top: 1px solid #e5e9ed;
  }

  .leyu-bc-invite-row {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .leyu-bc-invite-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    background: #f8f9fa;
    padding: 0 11px;
    font-size: 12px;
    color: #778393;
    outline: none;
  }

  .leyu-bc-invite-copy {
    width: 78px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: #19b474;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
  }

  .leyu-bc-share-btns {
    display: flex;
    gap: 7px;
  }

  .leyu-bc-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #fff !important;
    text-decoration: none !important;
  }

  .leyu-bc-share-btn.whatsapp { background: #2ac566; }
  .leyu-bc-share-btn.telegram { background: #219be8; }

  .leyu-bc-rules-panel { padding: 20px 24px; }
  .leyu-bc-rules-panel[hidden] { display: none !important; }

  .leyu-bc-section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    color: #2b3143;
    line-height: 25px;
  }

  .leyu-bc-stats-card { padding: 16px 24px; }

  .leyu-bc-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 15px;
  }

  .leyu-bc-stat {
    background: #f8f9fa;
    border-radius: 10px;
    min-height: 73.5px;
    padding: 14px 10px 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .leyu-bc-stat-val {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 27px;
  }

  .leyu-bc-stat-label {
    font-size: 11px;
    color: #000;
    line-height: 16.5px;
    margin-top: 2px;
  }

  .leyu-bc-bonus-list {
    background: #f8f9fa;
    min-height: 70px;
    display: flex;
    flex-direction: column;
  }

  .leyu-bc-bonus-list .leyu-ref-bonus-list,
  .leyu-bc-bonus-list .m-ref-bonus-empty,
  .leyu-bc-bonus-list .leyu-ref-bonus-empty {
    padding: 16px;
    margin: 0;
    background: transparent;
    box-shadow: none;
  }

  .leyu-bc-bonus-list .leyu-ref-bonus-empty-text,
  .leyu-bc-bonus-list .m-ref-bonus-empty-text {
    text-align: center;
    color: #a3b0c1;
    font-size: 13px;
  }

  .leyu-bc-downline-card {
    padding: 20px;
    min-height: 280px;
  }

  .leyu-bc-downline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  .leyu-bc-downline-filter {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .leyu-bc-date {
    height: 32px;
    border: 1px solid #e5e9ed;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 13px;
    color: #303442;
    background: #fff;
  }

  .leyu-bc-search-btn {
    height: 32px;
    border: none;
    border-radius: 6px;
    padding: 0 14px;
    background: #19b474;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
  }

  .leyu-bc-table-wrap {
    width: 100%;
    overflow-x: auto;
  }

  .leyu-bc-table {
    width: 100%;
    border-collapse: collapse;
  }

  .leyu-bc-table thead { background: #f8f9fa; }

  .leyu-bc-table th {
    padding: 12px 8px 12px 24px;
    font-size: 12px;
    font-weight: 400;
    color: #6c7ba8;
    text-align: left;
    white-space: nowrap;
  }

  .leyu-bc-table td {
    padding: 12px 8px 12px 24px;
    font-size: 14px;
    color: #303442;
    border-bottom: 1px solid #eef1f6;
    white-space: nowrap;
  }

  .leyu-bc-table-empty {
    text-align: center;
    color: #a3b0c1;
    font-size: 13px;
    padding: 28px 0;
  }

  .leyu-bc-amt.positive { color: #0fa84c; }
  .leyu-bc-amt.negative { color: #e53935; }

  .leyu-bc-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 4px 11px;
    border-radius: 11px;
    font-size: 12px;
    color: #fff;
    line-height: 1;
  }

  .leyu-bc-status.active { background: #0fa84c; }
  .leyu-bc-status.inactive { background: #9aa3b5; }

  .bonus_top_block_desktop {
    padding: 0;
    margin-bottom: 20px;
  }

  .desktop_page_title {
    font-size: 24px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
  }

  .desktop_bonus_cards {
    display: flex;
    gap: 20px;
  }

  .d-bonus-card {
    flex: 1;
    height: 100px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: transform 0.2s;
    background: #fff;
    position: relative;
    overflow: hidden;
  }

  .d-bonus-card:hover {
    transform: translateY(-2px);
  }

  .d-bonus-card.rebate {
    background: linear-gradient(135deg, #e0f7fa 0%, #e1bee7 100%);
  }

  .d-bonus-card.coupon,
  .d-bonus-card.redpacket {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  }

  .d-bonus-card.referral {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  }

  .d-bonus-card.referral .d-bonus-card-icon {
    background: #43a047;
  }

  .desktop_bonus_cards .leyu-ref-bonus-list {
    padding: 0;
  }

  .d-bonus-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 24px;
    color: #fff;
    z-index: 1;
  }

  .d-bonus-card.rebate .d-bonus-card-icon {
    background: #2979ff;
  }

  .d-bonus-card.coupon .d-bonus-card-icon,
  .d-bonus-card.redpacket .d-bonus-card-icon {
    background: #e53935;
  }

  .leyu-rp-panel.desktop {
    padding: 0;
  }

  .leyu-rp-panel.desktop .leyu-ref-section-title {
    margin-top: 0;
  }

  .d-bonus-card-text {
    flex: 1;
    z-index: 1;
  }

  .d-bonus-card-text .title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 4px;
  }

  .d-bonus-card-text .subtitle {
    font-size: 13px;
    color: #666;
  }

  .d-bonus-card-arrow {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
  }

  /* Content Card & Filters */
  .d-content-card {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .d-card-body {
    padding: 20px;
  }

  .record_filter_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
  }

  .record_status_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-right: auto;
  }

  .record_status_btn {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .record_status_btn:hover,
  .record_status_btn.active {
    border-color: var(--leyu-primary-dark);
    color: var(--leyu-primary-dark);
    background: #f0fdf4;
  }

  .record_date_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .record_date_input {
    padding: 6px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    font-size: 13px;
    width: 140px;
  }

  .record_quick_btn {
    padding: 5px 12px;
    border: 1px solid #e8e8e8;
    background: #fff;
    color: #000000;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }

  .empty_state_desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    min-height: 140px;
  }

  .empty_state_desktop .empty_img {
    width: 140px;
    height: 140px;
    margin-bottom: 16px;
  }

  .empty_state_desktop .empty_img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .empty_state_desktop .empty_text {
    color: #000000;
    font-size: 14px;
  }
}

/* --- page: contactus --- */
@media (max-width: 1024px) {
  body:has(.mobile-contact-container) {
    padding-top: 0px !important;
    padding-bottom: 60px !important;
  }

  body:has(.mobile-contact-container) .top_navbar,
  body:has(.mobile-contact-container) .fixed-top {
    display: none;
  }

  /* Hide desktop container on mobile */

}

@media (min-width: 1025px) {

  .mobile-contact-container,
  .mobile-contact-container .bottom-nav {
    display: none !important;
  }


}

:root {
  --primary-green: #e0fadd;
  --dark-green-bg: #1e4a2a;
  --card-bg-gradient: linear-gradient(135deg, #245833 0%, #15381e 100%);
  --text-dark: #000000;
  --text-light: #fff;
  --accent-gold: #f0deb4;
}

body {
  background-color: var(--primary-green);
  font-family: var(--leyu-font);
  margin: 0;
}

@media (min-width: 1025px) {












  /* Content Card */
  .d-content-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .d-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #E6FFF2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .d-card-header span {
    font-size: 16px;
    color: #000000;
  }

  .d-card-body {
    padding: 20px;
  }

  .d-form-row {
    margin-bottom: 20px;
  }

  .d-form-row label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
  }

  /* Right Sidebar Widgets */
  .d-widget-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-widget-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
  }

  .d-widget-header span {
    font-size: 14px;
    color: var(--leyu-primary-dark);
    font-weight: bold;
    border-bottom: 3px solid var(--leyu-primary-dark);
    padding-bottom: 5px;
    padding-left: 8px;
  }

  .d-widget-header.no-border span {
    border-bottom: none;
  }

  .d-more-link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }

  .d-widget-body {
    padding: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .d-empty-state {
    color: #666;
    font-size: 12px;
    text-align: center;
  }
}

/* --- page: dashboard --- */
@media (max-width: 1024px) {
  body:has(.dashboard-container) {
    padding-top: 0px !important;
    padding-bottom: 60px !important;
  }

  body:has(.dashboard-container) .top_navbar,
  body:has(.dashboard-container) .fixed-top {
    display: none;
  }
}

@media (min-width: 1025px) {

  .dashboard-container,
  .dashboard-container .bottom-nav {
    display: none !important;
  }
}

:root {
  --primary-green: #e0fadd;
  --dark-green-bg: #1e4a2a;
  --card-bg-gradient: linear-gradient(135deg, #245833 0%, #15381e 100%);
  --text-dark: #000000;
  --text-light: #fff;
  --accent-gold: #f0deb4;
}

body {
  background-color: var(--primary-green);
  font-family: var(--leyu-font);
  margin: 0;
}

.dashboard-container {
  padding: 15px;
}

/* Header */
.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-info .username {
  font-weight: bold;
  color: #555;
  font-size: 16px;
}

.user-info .join-day {
  font-size: 12px;
  color: #555;
}

.header-icons i {
  font-size: 20px;
  color: #00897b;
  margin-left: 15px;
}

.mobile-top-notify {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #333;
  text-decoration: none;
  line-height: 1;
}

.mobile-top-notify i,
.header-icons .mobile-top-notify i {
  font-size: 22px;
  color: #333;
  margin-left: 0;
  line-height: 1;
}

.mobile-top-notify-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  box-sizing: border-box;
}

/* VIP/Asset Card */
.asset-card {
  background: var(--card-bg-gradient);
  border-radius: 20px;
  padding: 15px;
  color: var(--text-light);
  box-shadow: 0 4px 15px rgba(21, 56, 30, 0.3);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.balance-info {
  display: flex;
  flex-direction: column;
}

.balance-hidden {
  font-size: 20px;
  color: #EBD3A8E5;
  font-weight: bold;
  letter-spacing: 2px;
}

.balance-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.toggle-eye {
  font-size: 14px;
  margin-left: 5px;
  cursor: pointer;
}

.action-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.action-btn {
  background: transparent;
  padding: 5px 15px;
  border-radius: 8px;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid rgba(235, 211, 168, 0.90);
  color: #EBD3A8E5 !important;
}

.vip-progress-section {
  margin-top: 10px;
}

.vip-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.vip-details-link {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.vip-track-container {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d4a053;
  /* Gold color for VIP text */
  font-size: 12px;
  font-weight: bold;
}

.progress-track {
  background: rgba(0, 0, 0, 0.3);
  height: 8px;
  /* Slightly thicker */
  border-radius: 4px;
  flex: 1;
  position: relative;
}

.progress-bar {
  background: linear-gradient(90deg, #d4a053, #f5d79b);
  height: 100%;
  border-radius: 4px;
  width: 30%;
  /* Example width */
}

/* Feature Icons in Card */
.card-features {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  gap: 5px;
  /* Reduced gap */
}

.feature-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 4px 2px;
  /* reduced padding */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* reduced gap */
  flex: 1;
  color: #aeaeae;
  font-size: 10px;
  /* Smaller text */
  text-decoration: none;
  white-space: nowrap;
  /* Prevent wrapping */
}

.feature-icon-circle {
  width: 16px;
  /* Smaller icon circle */
  height: 16px;
  background: #d4a053;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  /* Smaller icon font */
}

/* Menu Card Container */
.menu-card-container {
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 20px;
  overflow: hidden;
  background: #fff;
}

/* Bonus Banner (Card Header) */
.bonus-banner {
  padding: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
}

.bonus-content {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bonus-btn {
  background: #dbfadd;
  color: #2e7d32;
  border: 1px solid #2e7d32;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 12px;
  margin-right: 15px;
}

/* Grid Menu (Card Body) */
.grid-menu {
  background: #fff;
  /* border-radius: 20px; Removed */
  padding: 20px 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 10px;
  margin-bottom: 0;
  /* Updated */
  box-shadow: none;
  /* Removed */
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}

.grid-icon {
  width: 35px;
  height: 35px;
  /* Placeholder for images */
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-icon img {
  width: 100%;
  height: auto;
}

/* Invite Banner */
.invite-banner {
  background: #fff;
  border-radius: 20px;
  padding: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.invite-text h4 {
  color: #000000;
  margin: 0 0 5px 0;
  font-size: 16px;
}

.invite-text p {
  color: #000000;
  margin: 0;
  font-size: 10px;
}

.invite-img img {
  height: 60px;
}

/* List Menu */
.list-menu {
  background: #fff;
  border-radius: 20px;
  padding: 0;
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.list-item {
  padding: 15px 20px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #555;
  cursor: pointer;
}

.list-item:last-child {
  border-bottom: none;
}

.list-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.list-icon {
  font-size: 18px;
  color: #0d6efd;
  /* Adjust colors per icon */
  width: 24px;
  text-align: center;
}

/* Auth bottom-nav lives inside the glass card — no solid bar fill */
.auth_card_glass .bottom-nav {
  display: flex !important;
  background: transparent;
  box-shadow: none;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #000000;
  font-size: 10px;
  text-decoration: none;
}

.nav-item.active {
  color: var(--leyu-primary-dark);
}

.nav-icon {
  font-size: 20px;
}

.outline-icon {
  -webkit-text-stroke: 1.5px #209dff;
  /* 描边颜色 */
  color: transparent;
  /* 中间镂空 */
}











@media (min-width: 1025px) {




  .d-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #666;
    font-size: 12px;
  }

  .d-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* circle */
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--leyu-primary-dark);
    /* Brand color */
  }

  /* Main Content */




  /* Security Level Card */
  .d-security-level-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-security-status {
    font-size: 14px;
    color: #000000;
    margin-bottom: 10px;
  }

  .d-security-tip {
    font-size: 12px;
    color: #000000;
    margin-bottom: 20px;
  }

  .d-auth-steps {
    display: flex;
    gap: 30px;
  }

  .d-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #000000;
  }

  .d-step-item.active {
    color: #000000;
  }

  .d-step-item .step-icon {
    font-size: 20px;
    color: #666;
  }

  .d-step-item.active .step-icon {
    color: var(--leyu-primary-dark);
  }

  /* Content Card */
  .d-content-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .d-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #E6FFF2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .d-card-header span {
    font-size: 16px;
    color: #000000;
  }

  .d-alert-light {
    background: #E6FFF2;
    color: var(--leyu-primary-dark);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .d-card-body {
    padding: 20px;
  }

  /* Form Rows */
  .d-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .d-form-row label {
    width: 80px;
    font-size: 14px;
    color: #666;
  }

  .d-form-row--name .d-text-value {
    flex: 1;
    min-width: 0;
  }

  .d-form-row--name .d-btn-action {
    margin-left: auto;
    flex-shrink: 0;
  }

  .d-gender-toggle {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
  }

  .d-toggle-btn {
    padding: 5px 20px;
    border: none;
    background: #fff;
    color: #666;
    cursor: pointer;
    font-size: 14px;
  }

  .d-toggle-btn.active {
    background: #fff;
    color: var(--leyu-primary-dark);
    border: 1px solid var(--leyu-primary-dark);
    margin: -1px;
    position: relative;
    z-index: 1;
  }

  .d-date-input {
    position: relative;
    width: 300px;
  }

  .d-date-input input {
    width: 100%;
    padding: 8px 36px 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    background: #fff;
  }

  .d-date-input input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
  }

  .d-date-input input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
  }

  .d-date-input i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;
    pointer-events: none;
  }

  .d-form-actions {
    padding-top: 10px;
    padding-left: 80px;
  }

  .d-submit-btn {
    background: #eee;
    color: #000000;
    border: none;
    padding: 8px 30px;
    border-radius: 4px;
    cursor: not-allowed;
  }

  .d-submit-btn.active {
    background: var(--leyu-primary-dark);
    color: #fff;
    cursor: pointer;
  }

  /* Security Items */
  .d-security-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f9f9f9;
  }

  .d-security-item:last-child {
    border-bottom: none;
  }

  .d-sec-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background: #f0f0f0;
    color: #000000;
  }

  .d-sec-icon-circle.green {
    border-radius: 50%;
    background: linear-gradient(315deg, #02B457 10.62%, #57FFAE 102.8%);
  }

  .d-sec-info {
    flex: 1;
  }

  .d-sec-label {
    font-size: 14px;
    color: #000000;
  }

  .d-sec-value {
    font-size: 14px;
    color: #000000;
  }

  .d-sec-value.text-muted {
    color: #000000;
  }

  .d-btn-action {
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--leyu-primary-dark);
    color: var(--leyu-primary-dark);
    background: transparent;
  }

  .d-btn-action:hover {
    background: var(--leyu-primary-dark);
    color: #fff;
  }

  .d-btn-action.is-locked,
  .d-btn-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: #9aa3b5;
    color: #9aa3b5;
    background: transparent;
  }

  .d-btn-action.is-locked:hover,
  .d-btn-action:disabled:hover {
    background: transparent;
    color: #9aa3b5;
  }

  /* Right Sidebar Widgets */
  .d-widget-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-widget-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
  }

  .d-widget-header span {
    font-size: 14px;
    color: var(--leyu-primary-dark);
    font-weight: bold;
    border-bottom: 3px solid var(--leyu-primary-dark);
    padding-bottom: 5px;
    padding-left: 8px;
  }

  .d-widget-header.no-border span {
    border-bottom: none;
  }

  .d-more-link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }

  .d-widget-body {
    padding: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .d-empty-state {
    color: #666;
    font-size: 12px;
    text-align: center;
  }
}



/* --- page: mission_center --- */
@media (max-width: 1024px) {

  body:has(.mission_container) .top_navbar,
  body:has(.mission_container) .fixed-top {
    display: none;
  }

  body:has(.mission_container) {
    padding-top: 0px !important;
  }
}

@media (min-width: 1025px) {
  .mission_header {
    display: none !important;
  }

  .mission_mobile {
    display: none !important;
  }

  body:has(.mission_container) {
    padding-top: 0 !important;
  }
}





/* Base Container */
.mission_container {
  min-height: 100vh;
  background-color: #F5FAF8;
  /* Light greenish bg */
  font-family: var(--leyu-font);
  position: relative;
}

/* Top Header */
.mission_header {
  position: relative;
  width: 100%;
  background-color: #fff;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: none;
  z-index: 10;
  border-bottom: 1px solid #f0f0f0;
}

.mission_header_title {
  color: #000000;
  text-align: center;
  margin: 0;
  line-height: 25px;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
  left: 0;
  right: 0;
}

.mission_back {
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  z-index: 20;
}

.mission_back span {
  font-size: 20px;
  color: #000000;
}

/* Banner Section */
.mission_banner {
  position: relative;
  background: linear-gradient(180deg, #E0F7EB 0%, #FFFFFF 100%);
  padding-top: 20px;
  padding-bottom: 15px;
  /* Space for the card overlap if needed, or just padding */
  text-align: center;
}

/* Placeholder for Piggy Bank Image */
.piggy_bank_img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.banner_actions {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.banner_btn {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px 0 0 12px;
  padding: 4px 8px 4px 12px;
  font-size: 10px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 2px;
  backdrop-filter: blur(4px);
  text-decoration: none;
  width: fit-content;
  margin-left: auto;
}

/* Stats Card */
.stats_card {
  background: #fff;
  margin: 0 12px;
  border-radius: 12px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  position: relative;
  margin-top: -10px;
  /* Overlap if needed, but image shows it below banner content */
}

.stat_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}

.stat_item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #eee;
}

.stat_item:not(:first-child) {
  padding-left: 15px;
}

.stat_label {
  font-size: 11px;
  color: #000000;
}

.stat_value {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
}

.stat_value.highlight {
  color: #007AFF;
  /* Blue color matching the image for Interest */
}

/* Content Area */
.content_area {
  margin: 12px;
  background: #fff;
  border-radius: 12px;
  min-height: 400px;
  padding: 15px;
}

.section_title {
  font-size: 14px;
  color: #000000;
  font-weight: bold;
  margin-bottom: 20px;
}

/* Empty State */
.empty_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}

.empty_img {
  width: 120px;
  height: 120px;
  background-color: #f5f5f5;
  /* Placeholder */
  border-radius: 50%;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Replace with actual image */
  background-image: var(--leyu-img-empty-box);
  /* Hypothetical path */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Fallback if image missing */
.empty_img_placeholder {
  width: 100px;
  height: 80px;
  background: #e0e0e0;
  border-radius: 8px;
  position: relative;
}

.empty_img_placeholder::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 10px;
  width: 80px;
  height: 20px;
  background: #d0d0d0;
  border-radius: 50%;
}

.empty_text {
  color: #666;
  font-size: 12px;
}

/* Decoration: Piggy Bank Image approximation if no asset */
.piggy_wrapper {
  display: flex;
  justify-content: center;
}

/* ========== 电脑版 Desktop ========== */
@media (min-width: 1025px) {
  .mission_container {
    background-color: #F5FAF8;
    padding-bottom: 40px;
  }

  /* shell: desktop-dashboard / menu / sidebar → MEMBER DESKTOP SHELL section above */

  .mission_desktop_wrap .mission_top_block {
    background: linear-gradient(180deg, #E0F7EB 0%, #fff 100%);
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 20px;
  }

  .mission_desktop_wrap .mission_top_title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 6px 0;
  }

  .mission_desktop_wrap .mission_top_desc {
    font-size: 13px;
    color: #666;
    margin: 0 0 20px 0;
  }

  .mission_desktop_wrap .mission_stats_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }

  .mission_desktop_wrap .mission_stats_inner {
    display: flex;
    flex: 1;
    min-width: 200px;
    gap: 24px;
  }

  .mission_desktop_wrap .mission_stat_item {
    flex: 1;
  }

  .mission_desktop_wrap .mission_stat_label {
    font-size: 12px;
    color: #000000;
    margin-bottom: 4px;
  }

  .mission_desktop_wrap .mission_stat_value {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
  }

  .mission_desktop_wrap .mission_stat_value.highlight {
    color: #007AFF;
  }

  .mission_desktop_wrap .mission_rule_link {
    color: var(--leyu-primary-dark);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
  }

  .mission_desktop_wrap .mission_rule_link:hover {
    text-decoration: underline;
    color: #0d8a40;
  }

  .mission_desktop_wrap .d-content-card {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .mission_desktop_wrap .d-card-body {
    padding: 20px;
  }

  .mission_desktop_wrap .d-card-title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin: 0 0 16px 0;
  }

  .mission_desktop_wrap .record_filter_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }

  .mission_desktop_wrap .record_status_btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mission_desktop_wrap .record_status_btn {
    padding: 6px 14px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .mission_desktop_wrap .record_status_btn:hover,
  .mission_desktop_wrap .record_status_btn.active {
    border-color: var(--leyu-primary-dark);
    color: var(--leyu-primary-dark);
    background: #f0fdf4;
  }

  .mission_desktop_wrap .record_date_row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mission_desktop_wrap .record_date_input {
    padding: 6px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    font-size: 13px;
    width: 140px;
  }

  .mission_desktop_wrap .record_quick_btn {
    padding: 5px 12px;
    border: 1px solid #e8e8e8;
    background: #fff;
    color: #000000;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
  }

  .mission_desktop_wrap .record_quick_btn:hover,
  .mission_desktop_wrap .record_quick_btn.active {
    border-color: var(--leyu-primary-dark);
    color: var(--leyu-primary-dark);
  }

  .mission_desktop_wrap .empty_state_desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
  }

  .mission_desktop_wrap .empty_state_desktop .empty_img {
    width: 140px;
    height: 140px;
    margin-bottom: 16px;
    border-radius: 0;
    background: transparent;
  }

  .mission_desktop_wrap .empty_state_desktop .empty_text {
    color: #000000;
    font-size: 14px;
  }
}

/* --- page: notification --- */
/* Mobile Styles (Default) */
body:has(.mobile-notification-container) {
  padding-top: 0 !important;
  background: #f5f6fa;
  font-family: var(--leyu-font);
}

body:has(.mobile-notification-container) .top_navbar,
body:has(.mobile-notification-container) .fixed-top,
body:has(.mobile-notification-container) #bottom_navbar {
  display: none !important;
}

.notification-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  border-bottom: 1px solid #eee;
}

.back-btn {
  font-size: 20px;
  color: #000000;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

.header-right {
  font-size: 20px;
  color: #000000;
}

.nav-tabs-custom {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.nav-item {
  position: relative;
  text-align: center;
  color: #000000;
  font-size: 15px;
  padding-bottom: 5px;
  cursor: pointer;
}

.nav-item.active {
  color: #2ecc71;
  /* Green theme */
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #2ecc71;
  border-radius: 2px;
}

.badge-count {
  position: absolute;
  top: -5px;
  right: -8px;
  background: #ff3b30;
  color: white;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.2;
}

.notification-content {
  margin-top: 100px;
  /* Adjust based on header height */
  padding-bottom: 60px;
}

.msg-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
}

.msg-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f9f9f9;
  position: relative;
}

.msg-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  font-size: 24px;
  color: #fff;
}

/* Icon styles */
.icon-system {
  background: #e3f2fd;
  color: #42a5f5;
}

.icon-manager {
  background: #e1f5fe;
  color: #29b6f6;
}

/* Light blue */
.icon-wallet {
  background: #e8eaf6;
  color: #5c6bc0;
}

.icon-gift {
  background: #fbe9e7;
  color: #ff7043;
}

/* Orange/Red */

.msg-body {
  flex: 1;
  overflow: hidden;
}

.msg-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.msg-title {
  font-size: 16px;
  color: #000000;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.msg-time {
  font-size: 12px;
  color: #000000;
}

.msg-desc {
  font-size: 13px;
  color: #000000;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  line-height: 1.45;
  padding-right: 14px;
}

.unread-dot {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #ff3b30;
  border-radius: 50%;
}

.msg-item.is-marking,
.d-msg-item.is-marking {
  pointer-events: none;
  opacity: 0.72;
}

.msg-read-spin {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid #d7d7d7;
  border-top-color: #2bb673;
  border-radius: 50%;
  animation: leyu-msg-spin 0.7s linear infinite;
}

.d-msg-item .msg-read-spin {
  position: static;
  margin: 0 0 0 10px;
  flex-shrink: 0;
}

.d-msg-action-btn.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

.d-msg-action-btn .msg-read-spin-inline {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border: 2px solid #d7d7d7;
  border-top-color: #2bb673;
  border-radius: 50%;
  vertical-align: -1px;
  animation: leyu-msg-spin 0.7s linear infinite;
}

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

.system-notice-item {
  background: #f9fbfd;
  align-items: center;
}

.system-notice-text {
  color: #666;
}

@media (min-width: 1025px) {
  .mobile-notification-container {
    display: none !important;
  }

  body {
    background-color: #e0fadd;
    /* Primary Green from Dashboard */
  }













  /* Right Sidebar Widgets */
  .d-widget-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-widget-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
  }

  .d-widget-header span {
    font-size: 14px;
    color: var(--leyu-primary-dark);
    font-weight: bold;
    border-bottom: 3px solid var(--leyu-primary-dark);
    padding-bottom: 5px;
    padding-left: 8px;
  }

  .d-more-link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }

  .d-widget-body {
    padding: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .d-empty-state {
    color: #666;
    font-size: 12px;
    text-align: center;
  }

  /* Main Content — default hug content; notification list may be taller */
  .d-content-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
    min-height: 0;
  }

  .d-content-card:has(.d-msg-header) {
    min-height: 600px;
    display: flex;
    flex-direction: column;
  }

  .d-msg-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .d-msg-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .d-msg-title {
    font-size: 20px;
    color: #000000;
  }

  .d-msg-actions {
    display: flex;
    gap: 15px;
  }

  .d-msg-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
  }

  .d-msg-action-btn:hover {
    color: var(--leyu-primary-dark);
  }

  .d-msg-tabs {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid transparent;
    /* Container has no border, tabs might */
  }

  .d-msg-tab {
    position: relative;
    padding-bottom: 10px;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    transition: color 0.2s;
  }

  .d-msg-tab.active {
    color: var(--leyu-primary-dark);
    font-weight: bold;
  }

  .d-msg-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    /* Align with container bottom */
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--leyu-primary-dark);
    border-radius: 2px;
  }

  .d-msg-badge {
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 2px;
    vertical-align: super;
  }

  /* Desktop Message List */
  .d-msg-list {
    flex: 1;
  }

  .d-msg-item {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    transition: background 0.2s;
  }

  .d-msg-item:hover {
    background: #f9fbfd;
  }

  .d-msg-item.unread .d-msg-content-title {
    font-weight: bold;
    color: #000;
  }

  .d-msg-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
  }

  .d-msg-content {
    flex: 1;
  }

  .d-msg-content-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  .d-msg-content-title {
    font-size: 14px;
    color: #000000;
  }

  .d-msg-content-time {
    font-size: 12px;
    color: #000000;
  }

  .d-msg-content-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .d-pagination {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .d-page-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
  }

  .d-page-btn.active {
    background: var(--leyu-primary-dark);
    color: #fff;
    border-color: var(--leyu-primary-dark);
  }

  .d-page-btn:hover:not(.active) {
    background: #f5f5f5;
  }
}

/* --- page: setting --- */
body:has(.settings-page) {
  padding-top: 0 !important;
  background-color: #e6fff2;
  font-family: var(--leyu-font);
}

body:has(.settings-page) .top_navbar,
body:has(.settings-page) .fixed-top {
  display: none;
}

.settings-page {
  min-height: 100vh;
  background-color: #e6fff2;
}

.settings-header {
  position: relative;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-bottom: 1px solid #e6f2e6;
  font-size: 12px;
  color: #303442;
}

.settings-header-title {
  font-weight: 300;
}

.settings-back {
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303442;
  text-decoration: none;
  font-size: 14px;
}

.settings-back i {
  font-size: 12px;
}

.settings-section {
  padding-top: 12px;
}

.settings-card {
  background-color: #e6fff2;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 50px;
  background-color: #ffffff;
  font-size: 14px;
  color: #303442;
}

.settings-row+.settings-row:not(.settings-logout) {
  border-top: 1px solid #f2f2f2;
}

.settings-label {
  font-weight: 300;
}

.settings-toggle {
  position: relative;
  width: 36px;
  height: 22px;
  border-radius: 31px;
  border: none;
  background-color: #e8f3ff;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.settings-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: #ffffff;
  transition: transform 0.2s ease;
}

.settings-toggle.is-on {
  background-color: #4cd964;
}

.settings-toggle.is-on .settings-toggle-thumb {
  transform: translateX(14px);
}

.settings-link {
  cursor: pointer;
}

.settings-link-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-status {
  font-size: 14px;
  color: #c9cddb;
}

.settings-arrow {
  font-size: 14px;
  color: #c9cddb;
}

.settings-logout-container {
  margin-top: 12px;
}

.settings-logout {
  justify-content: center;
}

.settings-logout-link {
  text-decoration: none;
  color: #303442;
  font-size: 14px;
}

/* --- page: vip --- */
/* Hide mobile version */
@media (max-width: 1024px) {
  .vip_container {
    display: none !important;
  }
}

/* Desktop version - show only on desktop */
@media (min-width: 1025px) {
  .vip_container {
    display: none !important;
  }


}



body {
  padding-top: 0 !important;
  font-size: 12px;
  font-family: var(--leyu-font);
  font-weight: 100;
  background-color: #f7fcf9;
  /* Very light mint background */
}

.vip_container {
  padding-bottom: 40px;
  min-height: 100vh;
  background-color: #f7fcf9;
}

/* --- Top Hero Section with Curve --- */
.vip_hero_section {
  position: relative;
  background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
  /* Fallback */
  background: linear-gradient(180deg, #A7F0C8 0%, #C8FCEA 100%);
  /* Mint Green Gradient */
  padding-bottom: 40px;
  /* Space for the curve */
  overflow: visible;
}

/* The Curve */
.vip_hero_curve {
  position: absolute;
  bottom: -1px;
  /* Overlap slightly to avoid gaps */
  left: 0;
  width: 100%;
  line-height: 0;
  direction: ltr;
}

.vip_hero_curve svg {
  display: block;
  width: 100%;
  height: 48px;
  /* Curve Height */
  fill: #f7fcf9;
  /* Matches body background */
}

/* Top Header */
.vip_top_header {
  position: relative;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  z-index: 10;
}

.vip_top_header_title {
  color: #4A6356;
  text-align: center;
  margin: 0;
  line-height: normal;
  font-size: 16px;
  font-weight: 500;
}

.vip_top_header_back {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.vip_top_header_back img {
  width: 10px;
  height: auto;
}

/* User Info Section */
.vip_user_info {
  padding: 10px 20px 30px;
  /* Extra bottom padding for curve area */
  position: relative;
  z-index: 5;
}

.vip_user_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.vip_user_left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vip_user_avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

.vip_user_info_text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vip_username {
  color: #303442;
  font-size: 15px;
  font-weight: 500;
  margin: 0;
}

.vip_level_badge_row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.vip_level_badge {
  background: linear-gradient(90deg, #CEA2FD 0%, #A673E8 100%);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.2;
  display: inline-block;
}

.vip_level_badge.silver {
  background: #B6C3D6;
  /* Example color for VIP0/Grey */
}

.vip_user_right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vip_medal_icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* Drop shadow for depth */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.vip_detail_button_container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  /* Push it down a bit */
  position: absolute;
  bottom: -18px;
  /* Halfway on the curve boundary style */
  left: 0;
  z-index: 20;
}

.vip_detail_button {
  background: var(--leyu-primary-dark);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 24px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(15, 168, 76, 0.3);
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Progress Section */
.vip_progress_section {
  margin-top: 25px;
}

.vip_progress_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.vip_progress_percentage {
  font-size: 12px;
  color: #303442;
  font-weight: 500;
}

.vip_progress_bar_container {
  position: relative;
  width: 100%;
  height: 8px;
  /* Thinner */
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

/* To handle the ends showing labels inside/outside */
.vip_progress_track_start,
.vip_progress_track_end {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--leyu-primary-dark);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  z-index: 2;
}

.vip_progress_track_start {
  left: 0;
  background: var(--leyu-primary-dark);
  /* Active Color */
}

.vip_progress_track_end {
  right: 0;
  background: #ccc;
  /* Inactive color */
  color: #fff;
}

/* Custom Progress Bar for Layout like image */
.vip_progress_custom_wrap {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.6);
  width: 100%;
  border-radius: 3px;
  margin: 10px 0;
}

.vip_progress_custom_fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #2D9CDB;
  /* Blue fill from image example, or theme green */
  background: linear-gradient(90deg, #1890FF 0%, #3CA5FF 100%);
  border-radius: 3px;
  max-width: 100%;
}

.vip_progress_indicator {
  position: absolute;
  right: -8px;
  /* Center circle on end of bar */
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #3CA5FF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Badges on the track */
.vip_track_badge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  z-index: 2;
}

.vip_track_badge.current {
  left: -5px;
  background: var(--leyu-primary-dark);
}

.vip_track_badge.next {
  right: -5px;
  background: #ccc;
}

.vip_progress_text {
  font-size: 10px;
  color: #555;
  margin-top: 5px;
}

/* VIP Level Navigation - Floating Tabs style */
.vip_level_nav {
  padding: 30px 15px 10px;
  /* Top padding to clear the button */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  text-align: center;
}

.vip_level_nav::-webkit-scrollbar {
  display: none;
}

.vip_level_nav_items {
  display: inline-flex;
  gap: 30px;
  padding: 0 10px;
  width: fit-content;
  /* Fix: Shrink to fit content so line doesn't extend */
  min-width: 100%;
  /* Ensure it spans at least full width if content is small? No, actually we want it centered if small. */
  /* If we want it centered when small: */
  /* width: fit-content; margin: 0 auto; */
  /* But if we want scroll when large: */
  /* If I set min-width: 100%, and content is smaller, line extends. */
  /* So just width: fit-content; and let parent center it. */
  justify-content: center;
  /* Center items if they are wider than container? No, flex-start usually. */
  /* Actually for fit-content, justify-content doesn't matter much unless min-width is used. */
  justify-content: flex-start;

  position: relative;
  border-bottom: none;
  align-items: center;
  height: 40px;
  margin: 0 auto;
  /* Center the container itself */
}

/* The connecting line */
.vip_level_nav_items::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  /* Start at center of first item approx (10px pad + 10px half item?) */
  right: 20px;
  /* End at center of last item approx */
  /* Actually, simply making it fit content helps, but strict "center to center" line needs inset */
  /* Items have 10px padding and ~44px width. Center is ~32px from edge. */
  /* Container padding is 10px. */
  /* So center of first item is at 10px + (Width/2). */
  /* If we just use left: 10px right: 10px, it spans the full "block" of items. */
  /* Let's try to match the "tail end" comment precisely. */
  /* "Lv8 at end of line". */
  height: 2px;
  background-color: #E6EAF3;
  z-index: 0;
}

.vip_level_nav_item {
  background: #F4F6F9;
  border: none;
  font-size: 13px;
  color: #8C96A9;
  font-weight: 500;
  cursor: pointer;
  /* Fixed dimensions for perfect centering */
  height: 28px;
  min-width: 44px;
  /* Ensure uniform width roughly */
  padding: 0 10px;
  display: flex;
  /* Use flex to center text inside the button */
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 14px;
  flex-shrink: 0;
  z-index: 1;
}

.vip_level_nav_item.active {
  color: #fff;
  background-color: #B6C3D6;
  background: #D5DCE5;
  color: #303442;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  /* Ensure active item has same height to maintain alignment */
  height: 28px;
}

/* VIP Level Cards */
.vip_level_cards {
  padding: 0 15px;
  margin-bottom: 20px;
}

.vip_level_cards_row {
  display: flex;
  gap: 10px;
  overflow-x: hidden;
  padding-bottom: 5px;
  position: relative;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.vip_level_cards_row::-webkit-scrollbar {
  display: none;
}

/* 卡片容器 */
.vip_level_cards {
  overflow: hidden;
  position: relative;
}

.vip_level_card {
  flex: 0 0 100%;
  /* Show one card fully or adjust width */
  max-width: calc(100% - 20px);
  min-width: calc(100% - 20px);
  /* Leave peek */
  background: linear-gradient(135deg, #A4F1C7 0%, #8FE1B6 100%);
  /* Green card */
  border-radius: 12px;
  padding: 20px;
  position: relative;
  box-shadow: 0 4px 15px rgba(164, 241, 199, 0.4);
  min-height: 140px;
  color: #303442;
  scroll-snap-align: start;
}

.vip_level_card_title {
  font-size: 28px;
  font-weight: 300;
  margin: 0 0 20px 0;
  color: #000000;
}

.vip_level_card_info {
  display: flex;
  justify-content: space-around;
}

.vip_level_card_info_item {
  text-align: center;
}

.vip_level_card_info_value {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 2px;
}

.vip_level_card_info_label {
  font-size: 11px;
  color: #555;
}

.vip_level_card_medal {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* Section Titles */
.section_title_row {
  display: flex;
  align-items: center;
  margin: 15px 15px 10px;
  gap: 5px;
}

.section_bar {
  width: 3px;
  height: 14px;
  background-color: #1890FF;
  border-radius: 2px;
}

.section_title {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

/* Core Privileges Icons */
.vip_privileges_row {
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 20px;
  gap: 8px;
}

.vip_privilege_col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  width: 0;
}

.vip_priv_icon_wrap {
  width: 40px;
  height: 40px;
  /* Placeholder for icon size */
  display: flex;
  align-items: center;
  justify-content: center;
}

.vip_priv_icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vip_priv_val {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding: 0 2px;
}

.vip_priv_label {
  font-size: 10px;
  color: #000000;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding: 0 2px;
}

/* VIP Promotion Section */
.vip_promo_stats_row {
  display: flex;
  padding: 0 15px;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 20px;
}

.vip_promo_stat {
  flex: 1;
}

.vip_promo_val {
  font-size: 16px;
  font-weight: 500;
  color: #666;
  margin-bottom: 4px;
}

.vip_promo_lbl {
  font-size: 10px;
  color: #666;
}

.vip_venue_select_area {
  margin: 0 15px 20px;
  background: #E8FDF3;
  /* Light green area */
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vip_venue_label {
  color: #000000;
  font-size: 12px;
}

.vip_venue_input {
  border: none;
  background: #fff;
  flex: 1;
  margin: 0 10px;
  border-radius: 4px;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.vip_venue_btn {
  background: #5DDEA5;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 15px;
  font-size: 12px;
  cursor: pointer;
}

/* Bottom Link */
.vip_bottom_link {
  background-color: #E8FDF3;
  padding: 30px;
  text-align: center;
  color: #5DDEA5;
  font-size: 12px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.vip_bottom_link a {
  color: #5DDEA5;
  text-decoration: none;
}

.vip_container .vip_group_header {
  color: #000000;
}

.vip_container .vip_group_label {
  color: #000000;
}

.vip_container .vip_group_value {
  color: #666;
}

@media (min-width: 1025px) {
  :root {
    --primary-green: #e0fadd;
    --dark-green-bg: #1e4a2a;
    --card-bg-gradient: linear-gradient(135deg, #245833 0%, #15381e 100%);
    --text-dark: #000000;
    --text-light: #fff;
    --accent-gold: #f0deb4;
  }

  body {
    background-color: var(--primary-green);
    font-family: var(--leyu-font);
  }





  .d-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #666;
    font-size: 12px;
  }

  .d-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--leyu-primary-dark);
  }

  /* Main Content */











}

@media (max-width: 1024px) {


  .vip_container {
    display: block !important;
  }

  body:has(.vip_container) {
    padding-top: 0px !important;
    padding-bottom: 60px !important;
  }

  body:has(.vip_container) .top_navbar,
  body:has(.vip_container) .fixed-top {
    display: none;
  }
}

@media (min-width: 1025px) {
  .vip_container {
    display: none !important;
  }
}

.desktop-vip-content .new-vip-section {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  margin-bottom: 30px;
}

.desktop-vip-content .vip-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 20px 0;
  margin-bottom: 20px;
}

.desktop-vip-content .vip-header-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.desktop-vip-content .vip-badge-lg-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.desktop-vip-content .vip-badge-lg-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.desktop-vip-content .vip-badge-level-text {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 800;
  color: #555;
}

.desktop-vip-content .vip-text-info h2 {
  font-size: 24px;
  color: #334155;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.desktop-vip-content .vip-text-info p {
  font-size: 14px;
  color: #94A3B8;
  margin: 0;
}

.desktop-vip-content .btn-vip-detail {
  background: #10B981;
  color: white;
  border: none;
  padding: 10px 30px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.4);
}

.desktop-vip-content .btn-vip-detail:hover {
  background: #059669;
}

/* Timeline */
.desktop-vip-content .vip-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 20px;
}

.desktop-vip-content .vip-timeline-bg {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: repeating-linear-gradient(45deg, #F1F5F9, #F1F5F9 5px, #fff 5px, #fff 10px);
  z-index: 0;
  border-radius: 4px;
}

.desktop-vip-content .vip-timeline-item {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
}

.desktop-vip-content .vip-tm-label {
  font-size: 12px;
  color: #64748B;
  font-weight: bold;
  display: block;
}

.desktop-vip-content .vip-tm-bubble {
  background: #1890FF;
  color: white;
  padding: 8px 12px;
  border-radius: 50% 50% 50% 0;
  /* Teardrop shape */
  transform: rotate(-45deg);
  /* Design trick for bubble */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -23px;
  box-shadow: 0 4px 10px rgba(24, 144, 255, 0.3);
}

.desktop-vip-content .vip-tm-bubble span {
  transform: rotate(45deg);
  /* Counter rotate text */
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}

.vip-progress-card {
  border-radius: 8px;
  padding: 25px 30px;
}

.vip-progress-cardbody {
  border-radius: 8px;
  padding: 25px 30px;
  background: #F0FDF4;
}

/* Progress Card */
.desktop-vip-content {
  border-radius: 8px;
}

.desktop-vip-content .vip-next-info {
  color: #15803d;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: 500;
}

.desktop-vip-content .vip-pg-row {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #64748B;
  font-size: 14px;
}

.desktop-vip-content .vip-pg-bar {
  flex: 1;
  height: 10px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.desktop-vip-content .vip-pg-fill {
  height: 100%;
  background: #e2e8f0;
  /* Empty part color? No, design shows grey bg, filled part green */
}

.desktop-vip-content .vip-pg-bar {
  background: #eee;
}

.desktop-vip-content .vip-pg-fill {
  background: linear-gradient(90deg, #10B981, #34D399);
}

.desktop-vip-content .vip-pg-text {
  color: #10B981;
  font-weight: 500;
}

.vip-privileges-container {
  background: #fff;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
}

.vip-priv-title {
  font-size: 18px;
  color: #334155;
  font-weight: bold;
  margin-bottom: 30px;
}

.vip-priv-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  text-align: center;
  align-items: start;
}

.vip-privileges-container .vip-priv-title:not(:first-of-type) {
  margin-top: 24px;
}

.vip-priv-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.vip-priv-icon-wrap {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.vip-priv-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vip-priv-value {
  font-size: 20px;
  font-weight: 800;
  color: #334155;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding: 0 2px;
  line-height: 1.2;
}

.vip-priv-label {
  font-size: 14px;
  color: #64748B;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding: 0 2px;
  line-height: 1.2;
}

/* --- page: vip2 --- */
:root {
  --vip-primary: #34D182;
  --vip-dark: #1A1A1A;
  --vip-bg: #F5F7FA;
}

body {
  background-color: var(--vip-bg);
  font-family: var(--leyu-font);
}

.vip-container {
  padding-bottom: 80px;
}

/* Header Section */
.vip-header {
  position: relative;
  background: var(--leyu-img-vip-header-bg) no-repeat top center;
  background-size: cover;
  padding: 20px;
  color: white;
  height: 300px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.vip-nav {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.vip-back-btn {
  color: #000000;
  font-size: 1.2rem;
  text-decoration: none;
}

.vip-title {
  flex-grow: 1;
  text-align: center;
  color: #000000;
  /* Dark text on light part of header if applicable, or check design */
  font-size: 1.1rem;
  font-weight: 500;
  margin-right: 20px;
  /* Balance back button */
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-wrapper {
  position: relative;
  margin-right: 15px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.current-vip-badge {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: #C0A4FC;
  color: white;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid #fff;
}

.user-name {
  font-size: 1rem;
  font-weight: bold;
  color: #000000;
}

.medal-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
}

/* Progress Bar */
.vip-progress-section {
  margin-top: 50px;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 5px;
}

.progress-container {
  position: relative;
  background: #e0e0e0;
  height: 8px;
  border-radius: 4px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.progress-bar-fill {
  background: var(--vip-primary);
  height: 100%;
  border-radius: 4px;
  position: relative;
}

.progress-marker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
}

.marker-start {
  left: -15px;
}

.marker-end {
  right: -15px;
}

.current-marker {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 2;
}

.vip-detail-btn {
  background: var(--vip-primary);
  color: white;
  border: none;
  padding: 8px 30px;
  border-radius: 20px;
  display: block;
  margin: 20px auto 0;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(52, 209, 130, 0.3);
}

/* Level Carousel */
.level-tabs {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 10px;
}

.level-tab {
  background: #fff;
  border-radius: 15px;
  padding: 5px 15px;
  font-size: 0.8rem;
  color: #000000;
  margin: 0 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.level-tab.active {
  background: #F0F2FF;
  color: #6f42c1;
  font-weight: bold;
}

/* VIP Card Slider */
.vip-slider {
  margin-bottom: 30px;
}

.vip-card {
  background: var(--leyu-img-vip-card-bg) no-repeat center center;
  background-size: cover;
  border-radius: 15px;
  padding: 20px;
  color: white;
  /* Or dark depending on design */
  margin: 0 10px;
  position: relative;
  min-height: 160px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(52, 209, 130, 0.3);
}

.vip-card h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #000000;
  font-weight: 300;
}

.vip-card-info {
  display: flex;
  justify-content: space-between;
}

.vip-card-stat {
  text-align: center;
}

.vip-card-val {
  font-size: 1.1rem;
  font-weight: bold;
  color: #000000;
}

.vip-card-label {
  font-size: 0.7rem;
  color: #555;
}

.vip-card-medal {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 40px;
}

/* Benefits Grid */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  padding: 0 15px;
  margin-bottom: 30px;
  text-align: center;
}

.benefit-item img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.benefit-val {
  font-weight: bold;
  font-size: 1.1rem;
  color: #000000;
}

.benefit-label {
  font-size: 0.7rem;
  color: #000000;
}

/* Upgrade Info List */
.upgrade-list-title {
  font-size: 0.9rem;
  color: #000000;
  margin-left: 15px;
  margin-bottom: 15px;
  border-left: 3px solid #007bff;
  padding-left: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 15px;
  margin-bottom: 20px;
  text-align: center;
}

.info-item {
  margin-bottom: 20px;
}

.info-val {
  font-size: 1.2rem;
  color: #000000;
  font-weight: 300;
}

.info-val span {
  font-size: 0.9rem;
}

.info-label {
  font-size: 0.8rem;
  color: #000000;
}

/* Footer Action */
.vip-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #E8FAF2;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  z-index: 1000;
  border-top: 1px solid #d4f2e3;
}

.venue-selector {
  background: #fff;
  border-radius: 20px;
  padding: 8px 15px;
  font-size: 0.9rem;
  color: #000000;
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.receive-btn {
  background: var(--vip-primary);
  color: white;
  border: none;
  padding: 8px 25px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
}

.vip-details-close {
  text-align: center;
  color: var(--vip-primary);
  font-size: 0.9rem;
  padding: 10px;
  cursor: pointer;
}

/* ========== PAGE: RECORDS ========== */
/** Leyu page styles: records.css */


/* --- page: bet_record --- */
body {
  padding-top: 0 !important;
  font-size: 12px;
  font-family: var(--leyu-font);
  font-weight: 100;
  background-color: #E6FFF2;
}

.navbar {
  display: none;
}

.bet_record_container {
  background-color: #E6FFF2;
  position: relative;
  width: 100%;
  padding-bottom: 40px;
}

/* Top Header */
.bet_record_top_header {
  position: relative;
  width: 100%;
  background-color: #fff;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.bet_record_top_header_title {
  color: #303442;
  text-align: center;
  margin: 0;
  line-height: 25px;
  font-size: 10px;
  font-weight: 100;
}

.bet_record_top_header_back {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.bet_record_top_header_back img {
  width: 18.18%;
  height: 32.73%;
  object-fit: contain;
}

/* Tabs Section */
.bet_record_tabs_container {
  background-color: #fff;
  padding: 5px 9px;
  height: 27px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.bet_record_tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 0;
  height: 18px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bet_record_tabs::-webkit-scrollbar {
  display: none;
}

.bet_record_tab {
  background-color: #f8f9fa;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 4px 9px;
  font-size: 8px;
  color: #616783;
  font-weight: 100;
  white-space: nowrap;
  cursor: pointer;
  line-height: normal;
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bet_record_tab.active {
  background-color: #f4f9ff;
  border: 1px solid var(--leyu-primary-dark);
  color: var(--leyu-primary-dark);
  border-radius: 12px;
}

.bet_record_tab.active::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 2px;
  width: 2px;
  height: 12px;
  background-color: #f8f9fa;
  border-radius: 23.38px;
}

.bet_record_filter {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1001;
}

.bet_record_filter_inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
}

.bet_record_filter_text {
  color: #303442;
  font-size: 8px;
  font-weight: 100;
  line-height: normal;
  margin: 0;
}

.bet_record_filter_icon {
  width: 7px;
  height: 7px;
  object-fit: contain;
}

/* Filter Dropdown Menu */
.bet_record_filter_dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px;
  min-width: 200px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1002;
  display: none;
}

.bet_record_filter_dropdown.show {
  display: block;
}

.bet_record_filter_dropdown_item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  color: #303442;
  font-weight: 400;
  margin-bottom: 2px;
  transition: background-color 0.2s;
  background: transparent;
  border: none;
  text-align: left;
  appearance: none;
}

.bet_record_filter_dropdown_item:hover {
  background-color: #f8f9fa;
}

.bet_record_filter_dropdown_item.active {
  background-color: #f4f9ff;
  color: var(--leyu-primary-dark);
  font-weight: 500;
}

/* Content Area */
.bet_record_content {
  background-color: #E6FFF2;
  padding: 0;
  position: relative;
  min-height: calc(100vh - 53px);
}

/* Date Selector Container */
.bet_record_date_header {
  border-bottom: 1px solid #f2f2f6;
  padding: 0;
  height: 36px;
  display: flex;
  align-items: center;
  position: relative;
}

.bet_record_date_selector {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding-left: 8px;
  height: 17px;
  margin-top: 2.5px;
  position: relative;
}

.bet_record_date_text {
  color: #303442;
  font-size: 11px;
  font-weight: 100;
  line-height: normal;
  margin: 0;
}

.bet_record_date_arrow {
  font-size: 7px;
  display: inline-block;
  color: #303442;
}

/* Hidden date input */
.bet_record_date_input {
  position: absolute;
  opacity: 0;
  left: 8px;
  top: 6px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Records List */
.bet_record_list {
  padding: 10px 14px;
}

.bet_record_card {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 2px 1px 4px 0px rgba(168, 164, 164, 0.1);
}

.bet_record_card_header {
  border-bottom: 1px solid #0000001A;
  padding-bottom: 10px;
  position: relative;
}

.bet_record_status {
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 10.5px;
  position: absolute;
  top: 0;
  right: 0;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0;
  line-height: normal;
}

.bet_record_status.success {
  background-color: var(--leyu-primary-dark);
}

.bet_record_status.pending {
  background-color: #9ca3af;
}

.bet_record_status.fail {
  background-color: #ef4444;
}

.bet_record_card_header_title {
  color: #303442;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  line-height: normal;
}

.bet_record_card_content {
  padding: 15px 0;
}

.bet_record_card_content_item {
  display: flex;
  flex-direction: column;
}

.bet_record_card_content_item_label {
  color: #303442;
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 5px 0;
  line-height: normal;
}

.bet_record_card_content_item_label.payout_label {
  font-weight: 500;
  text-align: right;
}

.bet_record_card_content_item_label.payout_label.win {
  color: var(--leyu-primary-dark);
}

.bet_record_card_content_item_label.payout_label.lose {
  color: #ef4444;
}

.bet_record_card_content_item_text {
  color: #303442;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  line-height: normal;
}

.bet_record_card_content_item_text.payout_value {
  text-align: right;
}

.bet_record_card_content_item_text.payout_value.win {
  color: var(--leyu-primary-dark);
}

.bet_record_card_content_item_text.payout_value.lose {
  color: #ef4444;
}

.bet_record_content_text {
  color: #303442;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  line-height: normal;
}

.bet_record_card_footer {
  border-top: 1px solid #0000001A;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bet_record_card_footer_text {
  color: rgba(48, 52, 66, 0.5);
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  line-height: normal;
}

.bet_record_order_number_container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bet_record_order_number_text {
  color: rgba(48, 52, 66, 0.5);
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  line-height: normal;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet_record_copy_icon {
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
  color: rgba(48, 52, 66, 0.5);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bet_record_copy_icon:hover {
  opacity: 1;
}

/* Empty State */
.bet_record_empty_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 20px 20px;
  min-height: 400px;
}

.bet_record_empty_illustration {
  width: 140px;
  height: 140px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bet_record_empty_illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bet_record_empty_text {
  color: #afb3c8;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  margin: 0;
}

/* Desktop Layout Styles */


@media (min-width: 1025px) {
  .bet_record_container {
    display: none !important;
  }



  body {
    background-color: #E6FFF2;
    font-family: var(--leyu-font);
  }











  /* Main Content */


  .d-content-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .d-card-body {
    padding: 20px;
  }

  /* Filter Card */
  .filter-card {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
  }

  .filter-header {
    margin-bottom: 20px;
  }

  .filter-title {
    font-size: 18px;
    color: #000000;
    margin-bottom: 5px;
    font-weight: normal;
  }

  .filter-subtitle {
    font-size: 12px;
    color: #666;
  }

  .filter-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .filter-row {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .filter-label {
    font-size: 14px;
    color: #000000;
    min-width: 40px;
    text-align: right;
  }

  .filter-select {
    padding: 8px 12px;
    border: 1px solid #E6FFF2;
    border-radius: 4px;
    min-width: 200px;
    color: #000000;
    outline: none;
    background: #fff;
    cursor: pointer;
  }

  .filter-select:hover,
  .filter-select:focus {
    border-color: var(--leyu-primary-dark);
  }

  .filter-date-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
  }

  .filter-date-input {
    padding: 8px 12px;
    border: 1px solid #E6FFF2;
    border-radius: 4px;
    width: 220px;
    color: #000000;
    background: #fff;
  }

  .filter-quick-btn {
    padding: 6px 15px;
    border: 1px solid #E6FFF2;
    background: #fff;
    color: #000000;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
  }

  .filter-quick-btn:hover,
  .filter-quick-btn.active {
    border-color: #E6FFF2;
    color: var(--leyu-primary-dark);
  }

  .filter-actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
  }

  .btn-search {
    background: var(--leyu-primary-dark);
    color: white;
    border: none;
    padding: 8px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
  }

  .btn-search:hover {
    background: #0d8f41;
  }

  .btn-reset {
    background: #fff;
    color: #000000;
    border: 1px solid #E6FFF2;
    padding: 8px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  .btn-reset:hover {
    background: #f9f9f9;
    color: var(--leyu-primary-dark);
  }

  /* Desktop Table */
  .transaction-table-desktop {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }

  .transaction-table-desktop th {
    background-color: #f5fcf7;
    color: #000000;
    font-weight: normal;
    padding: 15px;
    text-align: center;
    font-size: 13px;
  }

  .transaction-table-desktop td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    color: #000000;
    text-align: center;
  }

  .transaction-table-desktop tr:last-child td {
    border-bottom: none;
  }

  .status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    display: inline-block;
  }

  .status-badge.success {
    background: #E6FFF2;
    color: var(--leyu-primary-dark);
  }

  .status-badge.pending {
    background: #FFF8E6;
    color: #FFA500;
  }

  .status-badge.fail {
    background: #FFE6E6;
    color: #FF0000;
  }

  .status-badge.fail-gray {
    background: #F0F0F0;
    color: #000000;
  }

  .amount-text.positive {
    color: var(--leyu-primary-dark);
    font-weight: 500;
  }

  .amount-text.negative {
    color: #f73d3d;
    font-weight: 500;
  }

  .transaction-empty-state-desktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    min-height: 140px;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

.pagination {
  display: flex;
  list-style: none;
  gap: 8px;
  padding: 0;
  margin: 0;
  align-items: center;
}

.pagination li>a,
.pagination li>span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  /* Reduced side padding slightly to fit numbers well */
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #666;
  text-decoration: none;
  background: #fff;
  font-size: 13px;
  transition: all 0.2s;
}

/* Specific text buttons (First, Last, Next, Previous) */
.pagination li>a[aria-label],
.pagination li>span[aria-hidden] {
  padding: 0 10px;
  min-width: auto;
  /* Allow text to dictate width */
}

.pagination li.active>a,
.pagination li.active>span {
  background-color: #00bf6f;
  /* Theme Green */
  color: #fff;
  border-color: #00bf6f;
}

.pagination li>a:hover:not(.active) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
  color: #00bf6f;
}

.pagination li.disabled>a,
.pagination li.disabled>span {
  color: #666;
  pointer-events: none;
  background-color: #fafafa;
  border-color: #eee;
}

/* --- page: rebate --- */
body:has(.rebate-container) {
  background: #e0fcf3;
  font-family: var(--leyu-font);
  margin: 0;
  padding-top: 0px !important;
}

body:has(.rebate-container) .top_navbar,
body:has(.rebate-container) .fixed-top,
body:has(.rebate-container) #bottom_navbar {
  display: none !important;
}

.rebate-container {
  padding: 0;
  min-height: 100vh;
  background: var(--leyu-img-rebate-bg) no-repeat center top;
  background-size: 100% 100%;
  position: relative;
  overflow-x: hidden;
}

/* Header */
.rebate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  position: relative;
  z-index: 10;
  height: 60px;
}

.rebate-header .back-btn {
  font-size: 20px;
  color: #000000;
  text-decoration: none;
}

.rebate-header .page-title {
  font-size: 18px;
  color: #000000;
  font-weight: 500;
  letter-spacing: 1px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Actions moved outside header */
.header-actions {
  position: absolute;
  top: 65px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  z-index: 9;
}

.header-actions .action-pill {
  background: #f4f9ff;
  border-radius: 10px 0 0 10px;
  padding: 2px 6px 2px 8px;
  font-size: 11px;
  color: #303442;
  display: flex;
  align-items: center;
  text-decoration: none;
  min-width: 72px;
  justify-content: flex-end;
  gap: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.header-actions .action-pill i {
  margin-left: 0;
  font-size: 11px;
  color: #303442;
}

/* Mobile wallet summary cards (Figma) */
.rebate-m-wallet-row {
  display: flex;
  gap: 12px;
  padding: 0 20px;
  margin: 0 0 16px;
}

.rebate-m-wallet-card {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  min-width: 0;
}

.rebate-m-wallet-label {
  font-size: 14px;
  font-weight: 700;
  color: #2b3143;
  line-height: 20px;
}

.rebate-m-wallet-value {
  font-size: 20px;
  font-weight: 800;
  color: #020202;
  line-height: 1.3;
  margin-top: 2px;
}

.rebate-m-wallet-value--green {
  color: #02b457;
}

.rebate-m-history-card .history-header {
  margin-bottom: 14px;
}

.rebate-m-more-btn {
  border: none;
  background: transparent;
  color: #7981a4;
  font-size: 12px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.rebate-m-more-btn i {
  font-size: 12px;
}

.rebate-m-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.rebate-m-item:last-child {
  border-bottom: none;
}

.rebate-m-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}

.rebate-m-item-type {
  font-size: 12px;
  font-weight: 500;
  color: #303442;
  margin-bottom: 6px;
}

.rebate-m-item-amount {
  font-size: 16px;
  font-weight: 600;
  color: #0fa84c;
  line-height: 1.2;
}

.rebate-m-item-date {
  font-size: 10px;
  color: rgba(48, 52, 66, 0.5);
  white-space: nowrap;
  padding-top: 2px;
}

.rebate-m-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}

.rebate-m-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  font-size: 10px;
  color: rgba(48, 52, 66, 0.5);
}

.rebate-m-item-meta .rebate-order-number {
  color: #989aa1;
  flex: 0 0 auto;
}

.rebate-m-item-meta .rebate-order-separator {
  width: 1px;
  height: 10px;
  background: #e0e0e0;
  margin: 0;
  flex: 0 0 auto;
}

.rebate-m-item-meta .rebate-order-id {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
  color: rgba(48, 52, 66, 0.5);
  font-family: inherit;
}

.rebate-m-item-meta .rebate-copy-icon {
  font-size: 10px;
  color: #989aa1;
  cursor: pointer;
  flex: 0 0 auto;
}

.rebate-m-item-action .btn-settle-now {
  background: #0fa84c;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 11px;
  font-size: 10px;
  height: 21px;
  min-width: 51px;
  line-height: 1;
  white-space: nowrap;
}

.rebate-m-item-action .btn-settled {
  background: rgba(15, 168, 76, 0.5);
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 11px;
  font-size: 10px;
  height: 21px;
  min-width: 51px;
  opacity: 1;
  line-height: 1;
}

.rebate-m-rules-card {
  background: #fff;
  margin: 0 15px 24px;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.rebate-m-rules-card .tips-title {
  font-size: 16px;
  color: #2b3143;
  margin-bottom: 12px;
  border-bottom: 0.8px dashed #d9d9d9;
  padding-bottom: 10px;
}

.rebate-m-rules-card .tips-list {
  font-size: 12px;
  color: #566286;
  line-height: 1.7;
}

/* Tighten mobile claim button to Figma */
@media (max-width: 1024px) {
  .rebate-container .main-circle-wrapper {
    width: 220px;
    height: 220px;
    margin-top: 20px;
    margin-bottom: 12px;
  }

  .rebate-container .main-circle-wrapper .circle-content {
    width: 180px;
    height: 180px;
  }

  .rebate-container .rebate-orbit-glow {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
  }

  .rebate-container .rebate-orbit-ring--1 {
    width: 186px;
    height: 186px;
    margin: -93px 0 0 -93px;
  }

  .rebate-container .rebate-orbit-ring--2 {
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
  }

  .rebate-container .rebate-orbit-ring--3 {
    width: 214px;
    height: 214px;
    margin: -107px 0 0 -107px;
  }

  .rebate-container .claim-btn-wrapper {
    margin-bottom: 16px;
    padding: 0 42px;
  }

  .rebate-container .claim-btn {
    height: 40px;
    padding: 0;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 3px 8px rgba(164, 255, 220, 0.55);
  }

  .rebate-container .history-card {
    margin: 0 20px 16px;
    border-radius: 6px;
    padding: 14px 12px;
    min-height: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .rebate-container .circle-content .label {
    font-size: 14px;
    margin-top: 8px;
    margin-bottom: 2px;
  }

  .rebate-container .circle-content .sub-label {
    font-size: 10px;
    margin-bottom: 6px;
  }

  .rebate-container .circle-content .amount {
    font-size: 22px;
  }
}

/* Main Circle */
.main-circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 50px;
  position: relative;
  width: 330px;
  height: 330px;
  margin-left: auto;
  margin-right: auto;
}

/* Soft space liquid wrap around circle */
.rebate-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.rebate-orbit-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 290px;
  height: 290px;
  margin: -145px 0 0 -145px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(80, 230, 170, 0.48) 0%,
      rgba(28, 181, 101, 0.28) 38%,
      rgba(28, 181, 101, 0.08) 62%,
      rgba(28, 181, 101, 0) 78%);
  animation: rebate-orbit-breathe 4.2s ease-in-out infinite;
}

.rebate-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 0 16px rgba(100, 240, 200, 0.35),
    inset 0 0 12px rgba(255, 255, 255, 0.18);
}

.rebate-orbit-ring--1 {
  width: 278px;
  height: 278px;
  margin: -139px 0 0 -139px;
  animation: rebate-orbit-ring-spin 18s linear infinite;
  border-color: rgba(120, 240, 200, 0.55);
  border-width: 2px;
}

.rebate-orbit-ring--2 {
  width: 298px;
  height: 298px;
  margin: -149px 0 0 -149px;
  border-style: dashed;
  border-width: 2px;
  border-color: rgba(28, 181, 101, 0.42);
  animation: rebate-orbit-ring-spin 28s linear infinite reverse;
  opacity: 0.9;
}

.rebate-orbit-ring--3 {
  width: 318px;
  height: 318px;
  margin: -159px 0 0 -159px;
  border-style: dotted;
  border-width: 2px;
  border-color: rgba(140, 240, 210, 0.48);
  animation: rebate-orbit-ring-spin 22s linear infinite;
  opacity: 0.85;
}

.rebate-orbit-track {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  --orbit-r: 143px;
  animation: rebate-orbit-ring-spin 18s linear infinite;
}

.rebate-orbit-track--1 {
  --orbit-r: 138px;
  animation-duration: 12s;
}

.rebate-orbit-track--2 {
  --orbit-r: 151px;
  animation-duration: 18s;
  animation-direction: reverse;
}

.rebate-orbit-track--3 {
  --orbit-r: 128px;
  animation-duration: 10s;
}

.rebate-orbit-track--4 {
  --orbit-r: 160px;
  animation-duration: 22s;
  animation-direction: reverse;
}

.rebate-orbit-track--5 {
  --orbit-r: 119px;
  animation-duration: 15s;
}

.rebate-orbit-blob {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 20px;
  margin: -10px 0 0 -8px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(120, 235, 190, 0.75) 38%,
      rgba(28, 181, 101, 0.55) 100%);
  box-shadow:
    0 0 14px rgba(80, 230, 170, 0.7),
    0 0 4px rgba(255, 255, 255, 0.8),
    inset 0 0 5px rgba(255, 255, 255, 0.7);
  filter: blur(0.15px);
  transform: rotate(var(--a, 0deg)) translateY(calc(var(--orbit-r, 143px) * -1)) rotate(calc(var(--a, 0deg) * -1));
  animation: rebate-orbit-blob-morph 3.2s ease-in-out infinite;
  transform-origin: center center;
  opacity: 0.95;
}

.rebate-orbit-blob--md {
  width: 22px;
  height: 26px;
  margin: -13px 0 0 -11px;
  opacity: 1;
  animation-duration: 3.6s;
}

.rebate-orbit-blob--sm {
  width: 11px;
  height: 13px;
  margin: -6.5px 0 0 -5.5px;
  opacity: 0.88;
  animation-duration: 3.9s;
}

.rebate-orbit-blob--xs {
  width: 8px;
  height: 9px;
  margin: -4.5px 0 0 -4px;
  opacity: 0.78;
  animation-duration: 4.4s;
}

@keyframes rebate-orbit-breathe {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes rebate-orbit-ring-spin {
  from {
    transform: rotate(0deg);
  }

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

@keyframes rebate-orbit-blob-morph {

  0%,
  100% {
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    filter: blur(0.2px);
  }

  50% {
    border-radius: 42% 58% 55% 45% / 48% 55% 45% 52%;
    filter: blur(0.35px);
  }
}

.circle-content {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.92) 0%, rgba(230, 255, 245, 0.55) 55%, rgba(200, 245, 225, 0.25) 100%);
  box-shadow:
    0 0 34px rgba(80, 230, 170, 0.55),
    0 0 60px rgba(28, 181, 101, 0.28),
    inset 0 2px 10px rgba(255, 255, 255, 1),
    inset 0 -14px 36px rgba(28, 181, 101, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  backdrop-filter: blur(2px);
  border: 2px solid rgba(255, 255, 255, 0.7);
}

/* Rebate liquid dynamics (stronger liquid + rising bubbles) */
.circle-content> :not(.rebate-liquid):not(.rebate-bubbles) {
  position: relative;
  z-index: 2;
}

.rebate-liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--rebate-liquid-fill, 42%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.rebate-liquid-body {
  position: absolute;
  inset: 42px 0 0 0;
  background: linear-gradient(180deg,
      rgba(40, 200, 120, 0.38) 0%,
      rgba(14, 187, 96, 0.55) 45%,
      rgba(10, 150, 75, 0.68) 100%);
}

.rebate-liquid-waves {
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 78px;
  overflow: visible;
  pointer-events: none;
}

.rebate-liquid-wave-bob {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
}

.rebate-liquid-wave-bob--1 {
  animation: rebate-liquid-wave-y 2.4s ease-in-out infinite;
}

.rebate-liquid-wave-bob--2 {
  animation: rebate-liquid-wave-y 3.1s ease-in-out infinite reverse;
  animation-delay: -0.6s;
}

.rebate-liquid-wave-bob--3 {
  animation: rebate-liquid-wave-y 2.7s ease-in-out infinite;
  animation-delay: -1.1s;
}

.rebate-liquid-wave-bob--4 {
  animation: rebate-liquid-wave-y 3.5s ease-in-out infinite reverse;
  animation-delay: -0.3s;
}

.rebate-liquid-wave-bob--5 {
  animation: rebate-liquid-wave-y 2.2s ease-in-out infinite;
  animation-delay: -1.6s;
}

.rebate-liquid-wave-bob--6 {
  animation: rebate-liquid-wave-y 3.8s ease-in-out infinite reverse;
  animation-delay: -2s;
}

.rebate-liquid-wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 100%;
  display: block;
  will-change: transform;
}

.rebate-liquid-wave path {
  fill: rgba(28, 181, 101, 0.45);
}

.rebate-liquid-wave--1 {
  animation: rebate-liquid-wave-x 5.5s linear infinite;
}

.rebate-liquid-wave--1 path {
  fill: rgba(28, 181, 101, 0.55);
}

.rebate-liquid-wave--2 {
  top: 6px;
  animation: rebate-liquid-wave-x-rev 7.2s linear infinite;
  opacity: 0.88;
}

.rebate-liquid-wave--2 path {
  fill: rgba(60, 210, 140, 0.48);
}

.rebate-liquid-wave--3 {
  top: 12px;
  animation: rebate-liquid-wave-x 8.8s linear infinite;
  animation-delay: -2s;
  opacity: 0.78;
}

.rebate-liquid-wave--3 path {
  fill: rgba(120, 230, 180, 0.45);
}

.rebate-liquid-wave--4 {
  top: 4px;
  animation: rebate-liquid-wave-x-rev 6.4s linear infinite;
  animation-delay: -1.2s;
  opacity: 0.72;
}

.rebate-liquid-wave--4 path {
  fill: rgba(20, 170, 95, 0.42);
}

.rebate-liquid-wave--5 {
  top: 16px;
  animation: rebate-liquid-wave-x 9.6s linear infinite;
  animation-delay: -3.5s;
  opacity: 0.7;
}

.rebate-liquid-wave--5 path {
  fill: rgba(160, 245, 210, 0.5);
}

.rebate-liquid-wave--6 {
  top: 10px;
  animation: rebate-liquid-wave-x-rev 10.5s linear infinite;
  animation-delay: -4s;
  opacity: 0.6;
}

.rebate-liquid-wave--6 path {
  fill: rgba(90, 220, 160, 0.4);
}

@keyframes rebate-liquid-wave-x {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes rebate-liquid-wave-x-rev {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rebate-liquid-wave-y {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  25% {
    transform: translate3d(0, -10px, 0);
  }

  50% {
    transform: translate3d(0, 6px, 0);
  }

  75% {
    transform: translate3d(0, -7px, 0);
  }
}

/* Rising bubbles — hourglass-like continuous stream */
.rebate-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
}

.rebate-bubble {
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(180, 255, 220, 0.7) 42%,
      rgba(28, 181, 101, 0.35) 100%);
  box-shadow:
    0 0 8px rgba(120, 240, 200, 0.65),
    inset 0 0 2px rgba(255, 255, 255, 0.9);
  opacity: 0;
  animation: rebate-bubble-rise 3.6s ease-in infinite;
}

.rebate-bubble:nth-child(1) {
  left: 48%;
  width: 9px;
  height: 9px;
  animation-duration: 3.2s;
  animation-delay: 0s;
}

.rebate-bubble:nth-child(2) {
  left: 52%;
  width: 12px;
  height: 12px;
  animation-duration: 3.8s;
  animation-delay: 0.35s;
}

.rebate-bubble:nth-child(3) {
  left: 44%;
  width: 8px;
  height: 8px;
  animation-duration: 3.4s;
  animation-delay: 0.7s;
}

.rebate-bubble:nth-child(4) {
  left: 56%;
  width: 11px;
  height: 11px;
  animation-duration: 4s;
  animation-delay: 1.05s;
}

.rebate-bubble:nth-child(5) {
  left: 50%;
  width: 13px;
  height: 13px;
  animation-duration: 3.5s;
  animation-delay: 1.4s;
}

.rebate-bubble:nth-child(6) {
  left: 40%;
  width: 7px;
  height: 7px;
  animation-duration: 4.1s;
  animation-delay: 0.5s;
}

.rebate-bubble:nth-child(7) {
  left: 60%;
  width: 9px;
  height: 9px;
  animation-duration: 3.3s;
  animation-delay: 1.85s;
}

.rebate-bubble:nth-child(8) {
  left: 46%;
  width: 6px;
  height: 6px;
  animation-duration: 4.3s;
  animation-delay: 2.2s;
}

.rebate-bubble:nth-child(9) {
  left: 54%;
  width: 10px;
  height: 10px;
  animation-duration: 3.6s;
  animation-delay: 2.55s;
}

.rebate-bubble:nth-child(10) {
  left: 49%;
  width: 8px;
  height: 8px;
  animation-duration: 3.9s;
  animation-delay: 1.15s;
}

@keyframes rebate-bubble-rise {
  0% {
    transform: translate3d(0, 8px, 0) scale(0.5);
    opacity: 0;
  }

  10% {
    opacity: 0.95;
  }

  55% {
    transform: translate3d(5px, -120px, 0) scale(1);
    opacity: 0.8;
  }

  85% {
    opacity: 0.4;
  }

  100% {
    transform: translate3d(-4px, -220px, 0) scale(1.15);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .rebate-liquid-wave,
  .rebate-liquid-wave-bob,
  .rebate-bubble,
  .rebate-orbit-glow,
  .rebate-orbit-ring,
  .rebate-orbit-track,
  .rebate-orbit-blob {
    animation: none;
  }

  .rebate-bubble {
    opacity: 0;
  }

  .rebate-liquid {
    transition: none;
  }
}

/* Top highlight of the bubble */
.circle-content::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 60px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

.circle-content .label {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 5px;
  margin-top: 20px;
}

.circle-content .sub-label {
  font-size: 11px;
  color: #555;
  margin-bottom: 15px;
  transform: scale(0.9);
}

.circle-content .amount {
  font-size: 40px;
  font-weight: bold;
  color: #00c060;
  font-family: 'Roboto', sans-serif;
  text-shadow: 0 2px 5px rgba(0, 192, 96, 0.1);
}

/* Claim Button */
.claim-btn-wrapper {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 30px;
}

.claim-btn {
  background: #1cb565;
  background: linear-gradient(90deg, #1cb565 0%, #0ebb60 100%);
  color: white;
  border: none;
  padding: 14px 0;
  width: 100%;
  border-radius: 30px;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow: 0 5px 15px rgba(28, 181, 101, 0.25);
  cursor: pointer;
  transition: transform 0.1s;
}

.claim-btn:active {
  transform: scale(0.98);
}

/* History Card */
.history-card {
  background: #fff;
  margin: 0 15px 20px 15px;
  border-radius: 10px;
  padding: 20px;
  min-height: 350px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
}

.history-title {
  font-size: 15px;
  color: #555;
  font-weight: 500;
}

.view-more {
  font-size: 12px;
  color: #666;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}

.empty-state-img {
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  background: var(--leyu-img-rebate-nodata) no-repeat center center;
  background-size: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.empty-state-img::before {
  display: none;
}

.empty-text {
  color: #d1d1d1;
  font-size: 13px;
  letter-spacing: 1px;
}

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

.rebate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f9f9f9;
}

.rebate-item:last-child {
  border-bottom: none;
}

.r-info div:first-child {
  font-size: 14px;
  color: #000000;
}

.r-info div:last-child {
  font-size: 12px;
  color: #000000;
  margin-top: 4px;
}

.r-amount {
  font-size: 16px;
  font-weight: bold;
  color: #1cb565;
}

/* New Rebate Item Styles */
.rebate-item {
  display: block !important;
  /* Override flex */
  padding: 15px 0 !important;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.rebate-row-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.rebate-title {
  font-size: 15px;
  color: #000000;
  font-weight: 600;
}

.rebate-date {
  font-size: 12px;
  color: #666;
}

.rebate-amount-highlight {
  font-size: 24px;
  color: var(--leyu-primary);
  font-weight: bold;
  margin: 5px 0 10px 0;
  font-family: 'Roboto', sans-serif;
}

.rebate-row-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rebate-order {
  font-size: 11px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.order-idx {
  color: #666;
}

.btn-settle {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  color: #fff;
  font-weight: 500;
}

.btn-settle.active {
  background: var(--leyu-primary);
  box-shadow: 0 2px 6px rgba(0, 192, 91, 0.3);
}

.btn-settle.disabled {
  background: #8bdba8;
  cursor: default;
}

/* Redeem Button - Green Theme */
.btn-redeem {
  border-radius: 10px;
  background: var(--leyu-primary);
  background: linear-gradient(90deg, #1cb565 0%, #0ebb60 100%);
  color: white;
  font-size: 12px;
  padding: 6px 14px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 192, 91, 0.3);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-redeem:hover {
  background: linear-gradient(90deg, #0ebb60 0%, #0c9e50 100%);
  box-shadow: 0 3px 8px rgba(0, 192, 91, 0.4);
  transform: translateY(-1px);
}

.btn-redeem:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 192, 91, 0.3);
}

.btn-redeem img {
  filter: brightness(0) invert(1);
}

/* Desktop Mode Styles & Media Queries */
@media (max-width: 1024px) {


  .rebate-container {
    display: block !important;
  }
}

@media (min-width: 1025px) {
  .rebate-container {
    display: none !important;
  }



  body {
    background-color: #E6FFF2;
    font-family: var(--leyu-font);
  }
}

/* Desktop Components (Copied from transaction_record.php) */










.d-content-card {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

.d-card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #E6FFF2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d-card-body {
  padding: 20px;
}

/* Reuse Circle Styles for Desktop but scoped if needed, or rely on global class */
.desktop-main-content .main-circle-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  transform: scale(0.8);
}

/* Filter Card */
.filter-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.filter-header {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 18px;
  color: #000000;
  margin-bottom: 5px;
  font-weight: normal;
}

.filter-subtitle {
  font-size: 12px;
  color: #666;
}

.filter-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.filter-label {
  font-size: 14px;
  color: #000000;
  min-width: 40px;
  text-align: right;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #E6FFF2;
  border-radius: 4px;
  min-width: 200px;
  color: #000000;
  outline: none;
  background: #fff;
  cursor: pointer;
}

.filter-date-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.filter-date-input {
  padding: 8px 12px;
  border: 1px solid #E6FFF2;
  border-radius: 4px;
  width: 220px;
  color: #000000;
  background: #fff;
}

.filter-quick-btn {
  padding: 6px 15px;
  border: 1px solid #E6FFF2;
  background: #fff;
  color: #000000;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.filter-quick-btn:hover,
.filter-quick-btn.active {
  border-color: #E6FFF2;
  color: var(--leyu-primary-dark);
}

.filter-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.btn-search {
  background: var(--leyu-primary-dark);
  color: white;
  border: none;
  padding: 8px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-search:hover {
  background: #0d8f41;
}

.btn-reset {
  background: #fff;
  color: #000000;
  border: 1px solid #E6FFF2;
  padding: 8px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

/* Table Styles */
.transaction-table-desktop {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.transaction-table-desktop th {
  background-color: #f5fcf7;
  color: #000000;
  font-weight: normal;
  padding: 15px;
  text-align: center;
  font-size: 13px;
}

.transaction-table-desktop td {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  color: #000000;
  text-align: center;
}

.transaction-table-desktop tr:last-child td {
  border-bottom: none;
}

/* Rebate records: responsive filter + table */
.rebate-filter-card {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.rebate-filter-row {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
  column-gap: 12px;
}

.rebate-filter-dates {
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
  gap: 8px;
}

.rebate-filter-dates .filter-date-input {
  width: auto;
  min-width: 140px;
  max-width: 220px;
  flex: 1 1 150px;
  box-sizing: border-box;
}

.rebate-filter-tilde {
  color: #000000;
  flex: 0 0 auto;
}

.rebate-filter-quicks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.rebate-filter-quicks .filter-quick-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rebate-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  flex: 0 0 auto;
}

.rebate-filter-actions .btn-search,
.rebate-filter-actions .btn-reset {
  white-space: nowrap;
}

.rebate-records-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.rebate-records-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rebate-records-table-wrap .transaction-table-desktop {
  min-width: 640px;
}

@media (max-width: 1400px) {
  .rebate-filter-dates .filter-date-input {
    max-width: 180px;
    min-width: 130px;
  }

  .rebate-filter-actions .btn-search,
  .rebate-filter-actions .btn-reset {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1200px) {
  .rebate-filter-row .filter-label {
    width: 100%;
    text-align: left;
    min-width: 0;
  }

  .rebate-filter-dates {
    flex: 1 1 100%;
  }

  .rebate-filter-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  display: inline-block;
}

.status-badge.success {
  background: #E6FFF2;
  color: var(--leyu-primary-dark);
}

.status-badge.pending {
  background: #FFF8E6;
  color: #FFA500;
}

.btn-details {
  color: #666;
  text-decoration: none;
  font-size: 12px;
  border: 1px solid #ddd;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-details:hover {
  border-color: var(--leyu-primary-dark);
  color: var(--leyu-primary-dark);
}

/* Desktop Empty State */
.transaction-empty-state-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  min-height: 140px;
}

.rebate-records-table-wrap .transaction-empty-state-desktop {
  padding: 28px 16px;
  min-height: 120px;
}

.transaction-empty-text-desktop {
  color: #afb3c8;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  margin: 0;
}

/* Pagination Styles */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

.pagination {
  display: flex;
  list-style: none;
  gap: 8px;
  padding: 0;
  margin: 0;
  align-items: center;
}

.pagination li>a,
.pagination li>span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #666;
  text-decoration: none;
  background: #fff;
  font-size: 13px;
  transition: all 0.2s;
}

.pagination li>a[aria-label],
.pagination li>span[aria-hidden] {
  padding: 0 10px;
  min-width: auto;
}

.pagination li.active>a,
.pagination li.active>span {
  background-color: #00bf6f;
  color: #fff;
  border-color: #00bf6f;
}

.pagination li>a:hover:not(.active) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
  color: #00bf6f;
}

.pagination li.disabled>a,
.pagination li.disabled>span {
  color: #666;
  pointer-events: none;
  background-color: #fafafa;
  border-color: #eee;
}

/* New Desktop Banner Styles */
.rebate-banner-card {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px 16px;
}

.banner-content-flex {
  background-image: var(--leyu-img-rebate-bg);
  background-size: cover;
  background-position: top;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 24px;
  border-radius: 12px;
  padding: 16px 28px;
  box-sizing: border-box;
}

.banner-left-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.banner-title-text {
  font-size: 28px;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.banner-subtitle-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 30px;
}

.tips-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 40px;
  flex: 1;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.tips-card--bottom {
  max-width: none;
  width: 100%;
  box-shadow: none;
  padding: 8px 0 0;
  border-radius: 0;
}

.rebate-tips-bottom-card {
  border-radius: 12px;
  overflow: hidden;
  padding: 14px 20px 16px;
  margin-bottom: 0;
}

.rebate-tips-bottom-card .tips-card--bottom {
  padding: 0;
}

.rebate-tips-bottom-card .tips-title {
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.rebate-tips-bottom-card .tips-list {
  line-height: 1.55;
}

.rebate-tips-bottom-card .tips-list div {
  margin-bottom: 4px;
}

.rebate-top-card {
  margin-bottom: 12px !important;
}

.rebate-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.rebate-vip-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #02b457;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}

.rebate-vip-link:hover {
  color: #0c9e50;
}

.rebate-vip-link-arrow {
  font-size: 14px;
  line-height: 1;
}

.rebate-wallet-card {
  background: #fff;
  border-radius: 12px;
  padding: 18px 22px;
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 16px rgba(152, 161, 182, 0.06);
}

.rebate-wallet-row {
  border-bottom: 0.8px dashed #d9d9d9;
  padding-bottom: 12px;
  margin-bottom: 2px;
}

.rebate-wallet-row--last {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.rebate-wallet-label {
  font-size: 18px;
  font-weight: 700;
  color: #2b3143;
  line-height: 20px;
  margin-bottom: 4px;
}

.rebate-wallet-value {
  font-size: 24px;
  font-weight: 800;
  color: #020202;
  line-height: 1.4;
}

.rebate-wallet-value--green {
  color: #02b457;
}

.rebate-summary-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #02b457;
  border-radius: 12px;
  padding: 11px 21px;
  margin: 8px 0 12px;
  background: #fff;
}

.rebate-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #02b457;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  flex: 0 0 auto;
}

.rebate-summary-text {
  color: #414a65;
  font-size: 14px;
  line-height: 20px;
}

.rebate-summary-text em,
.rebate-summary-text strong {
  font-style: normal;
  color: #02b457;
  font-weight: 700;
}

.rebate-records-table .rebate-td-date {
  line-height: 1.2;
}

.rebate-records-table .rebate-date-day {
  display: block;
  color: #303442;
  font-size: 14px;
}

.rebate-records-table .rebate-date-time {
  display: block;
  color: rgba(48, 52, 66, 0.7);
  font-size: 10px;
}

.rebate-records-table .rebate-td-order {
  font-size: 10px;
  color: #303442;
  word-break: break-all;
  max-width: 160px;
}

.rebate-records-table .rebate-td-amount {
  color: #0fa84c;
  font-weight: 600;
}

.rebate-records-table .btn-settle-now,
.desktop-main-content .btn-settle-now {
  background: #0fa84c;
  color: #fff;
  border: none;
  padding: 4px 11px;
  border-radius: 11px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
}

.rebate-records-table .btn-settle-now:hover,
.desktop-main-content .btn-settle-now:hover {
  background: #0c9e50;
}

.rebate-records-table .btn-settled,
.desktop-main-content .btn-settled {
  background: #0fa84c;
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: 11px;
  font-size: 12px;
  opacity: 0.5;
  cursor: default;
  min-width: 68px;
}

.rebate-filter-quicks {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-left: 12px;
  border-radius: 4px;
  overflow: hidden;
}

.rebate-filter-quicks .filter-quick-btn {
  border-radius: 0;
  border: 1px solid #f0f2f6;
  margin: 0;
  min-width: 64px;
  height: 40px;
  padding: 0 8px;
  background: #fff;
  color: #414a65;
}

.rebate-filter-quicks .filter-quick-btn + .filter-quick-btn {
  border-left: none;
}

.rebate-filter-quicks .filter-quick-btn.active,
.rebate-filter-quicks .filter-quick-btn:hover {
  border-color: #02b457;
  color: #02b457;
  background: #fff;
  z-index: 1;
}

.rebate-filter-card .filter-select {
  border-color: #f0f2f6;
  border-radius: 8px;
  min-width: 220px;
  height: 45px;
}

/* Transfer modal — Figma 1304:424 */
.rebate-transfer-modal {
  max-width: 540px;
}

.rebate-transfer-modal-content {
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(217, 233, 244, 0.35);
  padding: 48px;
}

.rebate-transfer-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.rebate-transfer-modal-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  line-height: 34px;
}

.rebate-transfer-modal-close {
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  color: #000;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rebate-transfer-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rebate-transfer-input-wrap {
  width: 100%;
}

.rebate-transfer-input {
  width: 100%;
  height: 44px;
  border: 1px solid #e4e6ed;
  border-radius: 9px;
  padding: 12px;
  font-size: 16px;
  color: #414a65;
  background: #fff;
  box-shadow: none;
}

.rebate-transfer-input::placeholder {
  color: #7981a4;
  font-weight: 350;
}

.rebate-transfer-input:focus {
  border-color: #02b457;
  outline: none;
  box-shadow: 0 0 0 2px rgba(2, 180, 87, 0.12);
}

.rebate-transfer-note {
  margin: 0;
  color: #7981a4;
  font-size: 12px;
  line-height: 22px;
}

.rebate-transfer-turnover {
  margin: 0;
  color: #7981a4;
  font-size: 12px;
  line-height: 22px;
}

.rebate-transfer-turnover #turnover_required {
  color: #02b457;
  font-weight: 700;
}

.rebate-transfer-wallet-hint {
  color: #7981a4;
}

.rebate-transfer-wallet-hint em {
  font-style: normal;
  color: #414a65;
  font-weight: 600;
}

.rebate-transfer-submit {
  width: 100%;
  height: 46px;
  margin-top: 6px;
  border: none;
  border-radius: 12px;
  background: #02b457;
  color: #fff;
  font-size: 16px;
  line-height: 25px;
  cursor: pointer;
  font-weight: 500;
}

.rebate-transfer-submit:hover {
  background: #0c9e50;
}

.rebate-transfer-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 576px) {
  .rebate-transfer-modal-content {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .rebate-transfer-modal-title {
    font-size: 20px;
  }
}

.tips-title {
  font-size: 18px;
  color: #666;
  margin-bottom: 15px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 15px;
}

.tips-list {
  font-size: 13px;
  color: #666;
  line-height: 1.8;
}

.tips-list div {
  position: relative;
  padding-left: 10px;
  margin-bottom: 5px;
}

.tips-list div::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #000000;
}

.rebate-tips-list .rebate-tips-heading {
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
  padding-left: 0;
}

.rebate-tips-list .rebate-tips-heading::before {
  content: none;
}

.red-text {
  color: #ff3b30;
  font-weight: bold;
}

/* Scale circle up slightly for desktop */
.banner-left-col .main-circle-wrapper {
  transform: scale(1.1);
  margin: 20px 0;
}

.banner-left-col .claim-btn {
  width: 140px;
  font-size: 14px;
  padding: 8px 0;
  margin-top: 10px;
  box-shadow: 0 4px 10px rgba(28, 181, 101, 0.3);
}

.banner-left-col .claim-btn:hover {
  transform: scale(1.05);
  background: linear-gradient(90deg, #0ebb60 0%, #0c9e50 100%);
}

.banner-left-col .circle-content {
  justify-content: center;
  gap: 5px;
}

/* Mobile Date Selector Styles */
.rebate-date-selector {
  display: none;
  /* Hidden by default */
  align-items: center;
  gap: 3px;
  cursor: pointer;
  position: relative;
}

/* Show date selector only on mobile */
@media (max-width: 1024px) {
  .rebate-date-selector {
    display: flex;
  }
}

.rebate-date-text {
  color: #303442;
  font-size: 11px;
  font-weight: 100;
  line-height: normal;
  margin: 0;
}

.rebate-date-input {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Mobile rebate details styles */
@media (max-width: 767.98px) {
  .rebate-details-container {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 0;
  }

  .rebate-mobile {
    display: block;
  }

  .rebate-mobile-title {
    font-size: 15px;
    color: #000000;
    font-weight: 500;
    margin-bottom: 8px;
  }

  .rebate-mobile-amount {
    font-size: 20px;
    font-weight: bold;
    color: var(--leyu-primary);
    margin-bottom: 10px;
  }

  .rebate-mobile-order {
    font-size: 12px;
    color: #000000;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  .rebate-order-number {
    color: #000000;
  }

  .rebate-order-separator {
    margin: 0 4px;
  }

  .rebate-order-label {
    color: #000000;
  }

  .rebate-order-id {
    color: #666;
    font-family: monospace;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rebate-copy-icon {
    font-size: 12px;
    color: #000000;
    cursor: pointer;
    margin-left: 4px;
    transition: color 0.2s;
  }

  .rebate-copy-icon:hover {
    color: var(--leyu-primary);
  }

  .rebate-mobile-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
  }

  .rebate-mobile-date {
    font-size: 12px;
    color: #000000;
  }

  .rebate-mobile-action {
    display: flex;
    align-items: center;
  }

  .btn-settle-now {
    background: var(--leyu-primary);
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
  }

  .btn-settle-now:hover {
    background: #0c9e50;
  }

  .btn-settle-now:active {
    transform: scale(0.98);
  }

  .btn-settled {
    background: #e0e0e0;
    color: #000000;
    border: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    cursor: default;
    font-weight: 500;
  }
}

/* --- page: transaction_record --- */
/* =========================================
     COMPONENT STYLES (Mobile Classes)
     ========================================= */
.transaction_top_header {
  position: relative;
  width: 100%;
  background-color: #fff;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.transaction_top_header_title {
  color: #303442;
  text-align: center;
  margin: 0;
  line-height: 25px;
  font-size: 10px;
  font-weight: 100;
}

.transaction_top_header_back {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.transaction_top_header_back img {
  width: 18.18%;
  height: 32.73%;
  object-fit: contain;
}

.transaction_tabs_container {
  background-color: #fff;
  padding: 5px 9px;
  height: 28px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}

/* Desktop Pagination Styles */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

.pagination {
  display: flex;
  list-style: none;
  gap: 8px;
  padding: 0;
  margin: 0;
  align-items: center;
}

.pagination li>a,
.pagination li>span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #666;
  text-decoration: none;
  background: #fff;
  font-size: 13px;
  transition: all 0.2s;
}

.pagination li>a[aria-label],
.pagination li>span[aria-hidden] {
  padding: 0 10px;
  min-width: auto;
}

.pagination li.active>a,
.pagination li.active>span {
  background-color: #00bf6f;
  color: #fff;
  border-color: #00bf6f;
}

.pagination li>a:hover:not(.active) {
  background-color: #f5f5f5;
  border-color: #d0d0d0;
  color: #00bf6f;
}

.pagination li.disabled>a,
.pagination li.disabled>span {
  color: #666;
  pointer-events: none;
  background-color: #fafafa;
  border-color: #eee;
}

.transaction_tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  overflow-x: auto;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.transaction_tabs::-webkit-scrollbar {
  display: none;
}

.transaction_tab {
  background-color: #f8f9fa;
  border: 1px solid transparent;
  border-radius: 24px;
  padding: 4px 9px;
  font-size: 8px;
  color: #616783;
  font-weight: 100;
  white-space: nowrap;
  cursor: pointer;
  line-height: normal;
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transaction_tab.active {
  background-color: #f4f9ff;
  border: 1px solid var(--leyu-primary-dark);
  color: var(--leyu-primary-dark);
  border-radius: 12px;
}

.transaction_tab.active::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 2px;
  width: 2px;
  height: 12px;
  background-color: #f8f9fa;
  border-radius: 23.38px;
}

.transaction_filter {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1001;
}

.transaction_filter_inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
}

.transaction_filter_text {
  color: #303442;
  font-size: 8px;
  font-weight: 100;
  line-height: normal;
  margin: 0;
}

.transaction_filter_icon {
  width: 7px;
  height: 7px;
  object-fit: contain;
}

.transaction_filter_dropdown {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px;
  min-width: 200px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 1002;
  display: none;
}

.transaction_filter_dropdown.show {
  display: block;
}

.transaction_filter_dropdown_item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 12px;
  color: #303442;
  font-weight: 400;
  margin-bottom: 2px;
  transition: background-color 0.2s;
  background-color: transparent;
  border: none;
  text-align: left;
  width: 100%;
}

.transaction_filter_dropdown_item:hover {
  background-color: #f8f9fa;
}

.transaction_filter_dropdown_item.active {
  background-color: #f4f9ff;
  color: var(--leyu-primary-dark);
  font-weight: 500;
}

.transaction_content {
  background-color: #E6FFF2;
  padding: 0;
  position: relative;
  min-height: calc(100vh - 54px);
  z-index: 1;
}

.transaction_date_container {
  position: absolute;
  top: 0;
  left: 10px;
  right: 18px;
  bottom: 41px;
  border-radius: 12px;
  overflow: hidden;
  background-color: transparent;
}

.transaction_date_header {
  border-bottom: 0.5px solid #f2f2f6;
  padding: 12px 8px 8px 8px;
  background-color: transparent;
  height: 36px;
  display: flex;
  align-items: center;
}

.transaction_date_selector {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  position: relative;
}

.transaction_date_text {
  color: #303442;
  font-size: 11px;
  font-weight: 100;
  line-height: normal;
  margin: 0;
}

.transaction_date_arrow {
  font-size: 7px;
  display: inline-block;
  color: #303442;
}

.transaction_date_input {
  position: absolute;
  opacity: 0;
  left: 8px;
  top: 6px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.transaction_records_list {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 9px 0 9px;
  background-color: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.transaction_records_list::-webkit-scrollbar {
  display: none;
}

.transaction_record_item {
  height: 98px;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  margin-bottom: 18px;
  box-shadow: 2px 1px 4px 0px rgba(168, 164, 164, 0.1), 7px 3px 7px 0px rgba(168, 164, 164, 0.09), 15px 7px 10px 0px rgba(168, 164, 164, 0.05), 27px 12px 12px 0px rgba(168, 164, 164, 0.01), 43px 18px 13px 0px rgba(168, 164, 164, 0);
}

.transaction_record_bg {
  position: absolute;
  background-color: #fdfdfd;
  border-radius: 4px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.transaction_record_header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  border-radius: 4px 4px 0 0;
  backdrop-filter: blur(3.15px);
}

.transaction_record_header.success {
  background-color: rgba(229, 245, 232, 0.7);
}

.transaction_record_header.pending {
  background-color: rgba(254, 243, 223, 0.7);
}

.transaction_record_header.fail {
  background-color: rgba(255, 214, 214, 0.7);
}

.transaction_record_header.fail-gray {
  background-color: rgba(214, 214, 214, 0.7);
}

.transaction_record_top {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.transaction_record_info {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}

.transaction_record_number {
  color: #303442;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
  border-right: 1px solid #0000001A;
  padding-right: 5px;
}

.transaction_record_datetime {
  color: #303442;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
  padding-left: 10px;
}

.transaction_record_id_container {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.transaction_record_id {
  color: #303442;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 89px;
}

.transaction_record_copy {
  width: 13px;
  height: 13px;
  cursor: pointer;
  margin-left: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.transaction_record_copy i {
  font-size: 11px;
  color: #303442;
}

.transaction_record_detail {
  color: #303442;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  text-decoration: underline;
  cursor: pointer;
  margin: 0;
}

.transaction_record_body {
  position: absolute;
  top: 60px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.transaction_record_left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.transaction_record_icon {
  width: 24px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.transaction_record_icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.transaction_record_type {
  color: #303442;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
}

.transaction_record_amount {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
  margin-right: 70px;
}

.transaction_record_amount.positive {
  color: var(--leyu-primary-dark);
}

.transaction_record_amount.negative {
  color: #f73d3d;
}

.transaction_record_amount.pending {
  color: #9aa0a6;
}

.transaction_record_status {
  position: absolute;
  right: 15px;
  top: 62px;
  height: 21px;
  padding: 4px 10px;
  border-radius: 10.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.transaction_record_status.success {
  background-color: var(--leyu-primary-dark);
}

.transaction_record_status.pending {
  background-color: #fef3df;
}

.transaction_record_status.fail {
  background-color: #ffd6d6;
}

.transaction_record_status.fail-gray {
  background-color: #d6d6d6;
}

.transaction_record_status_text {
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  white-space: nowrap;
}

.transaction_record_status.success .transaction_record_status_text {
  color: #fff;
}

.transaction_record_status.pending .transaction_record_status_text {
  color: #ff9500;
}

.transaction_record_status.fail .transaction_record_status_text {
  color: #f73d3d;
}

.transaction_record_status.fail-gray .transaction_record_status_text {
  color: #666666;
}

.transaction_empty_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 20px 20px;
  min-height: 400px;
}

.transaction_empty_illustration {
  width: 140px;
  height: 140px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transaction_empty_illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.transaction_empty_text {
  color: #afb3c8;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  margin: 0;
}

.transaction_container {
  background-color: #E6FFF2;
  min-height: 100vh;
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  /* display is handled by media query */
}

/* =========================================
     COMPONENT STYLES (Desktop Classes)
     ========================================= */










/* Main Content */




/* Transaction Record Content Card */
.d-content-card {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

.d-card-header {
  padding: 15px 20px;
  border-bottom: 1px solid #E6FFF2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.d-card-header span {
  font-size: 16px;
  color: #000000;
}

.d-card-body {
  padding: 20px;
}

/* Filter Card */
.filter-card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.filter-header {
  margin-bottom: 20px;
}

.filter-title {
  font-size: 18px;
  color: #000000;
  margin-bottom: 5px;
  font-weight: normal;
}

.filter-subtitle {
  font-size: 12px;
  color: #666;
}

.filter-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

.filter-label {
  font-size: 14px;
  color: #000000;
  min-width: 40px;
  /* Fixed width for alignment */
  text-align: right;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #E6FFF2;
  border-radius: 4px;
  min-width: 200px;
  color: #000000;
  outline: none;
  background: #fff;
  cursor: pointer;
}

.filter-select:hover,
.filter-select:focus {
  border-color: var(--leyu-primary-dark);
}

.filter-date-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.filter-date-input {
  padding: 8px 12px;
  border: 1px solid #E6FFF2;
  border-radius: 4px;
  width: 220px;
  color: #000000;
  background: #fff;
}

.filter-quick-btn {
  padding: 6px 15px;
  border: 1px solid #E6FFF2;
  background: #fff;
  color: #000000;
  border-radius: 2px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}

.filter-quick-btn:hover,
.filter-quick-btn.active {
  border-color: #E6FFF2;
  color: var(--leyu-primary-dark);
}

.filter-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.btn-search {
  background: var(--leyu-primary-dark);
  color: white;
  border: none;
  padding: 8px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-search:hover {
  background: #0d8f41;
}

.btn-reset {
  background: #fff;
  color: #000000;
  border: 1px solid #E6FFF2;
  padding: 8px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-reset:hover {
  background: #f9f9f9;
  color: var(--leyu-primary-dark);
}

/* Table Styles */
.transaction-table-desktop {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.transaction-table-desktop th {
  background-color: #f5fcf7;
  /* Light green header bg */
  color: #000000;
  font-weight: normal;
  padding: 15px;
  text-align: center;
  font-size: 13px;
}

.transaction-table-desktop td {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  color: #000000;
  text-align: center;
}

.transaction-table-desktop tr:last-child td {
  border-bottom: none;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  display: inline-block;
}

.status-badge.success {
  background: #E6FFF2;
  color: var(--leyu-primary-dark);
}

.status-badge.pending {
  background: #FFF8E6;
  color: #FFA500;
}

.status-badge.fail {
  background: #FFE6E6;
  color: #FF0000;
}

.status-badge.fail-gray {
  background: #F0F0F0;
  color: #000000;
}

.amount-text.positive {
  color: var(--leyu-primary-dark);
  font-weight: 500;
}

.amount-text.negative {
  color: #f73d3d;
  font-weight: 500;
}

.amount-text.pending {
  color: #9aa0a6;
  font-weight: 500;
}

.btn-details {
  color: #666;
  text-decoration: none;
  font-size: 12px;
  border: 1px solid #ddd;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-details:hover {
  border-color: var(--leyu-primary-dark);
  color: var(--leyu-primary-dark);
}

.transaction-empty-state-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  min-height: 140px;
}

/* Hide scrollbars for container */


/* =========================================
     4. LAYOUT & VISIBILITY CONTROL
     ========================================= */

/* Mobile Mode */
@media (max-width: 1024px) {
  body {
    padding-top: 0 !important;
    font-size: 12px;
    font-family: var(--leyu-font);
    font-weight: 100;
    background-color: #E6FFF2;
  }

  .navbar {
    display: none !important;
  }

  /* Hide Desktop Container */


  /* Show Mobile Container */
  .transaction_container {
    display: block !important;
  }
}

/* Desktop Mode */
@media (min-width: 1025px) {
  body {
    background-color: #E6FFF2;
    font-family: var(--leyu-font);
  }

  /* Hide Mobile Container */
  .transaction_container {
    display: none !important;
  }

  /* Show Desktop Container */

}

/* ========== PAGE: PAYMENT ========== */
/** Leyu page styles: payment.css */

/* --- page: bank_account --- */
/* Global Resets matching transaction_record */
body:has(.bank-container) {
  margin: 0;
  padding-top: 0px !important;
  font-family: var(--leyu-font);
}

body:has(.bank-container) .top_navbar,
body:has(.bank-container) .fixed-top,
body:has(.bank-container) #bottom_navbar {
  display: none !important;
}

/* Mobile Default (can be overridden by media query) */
.bank-container {
  padding: 0;
  min-height: 100vh;
  background: #f0fcf8;
  display: flex;
  flex-direction: column;
}

/* Mobile Header */
.bank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  position: relative;
  z-index: 10;
}

.bank-header .back-btn {
  font-size: 20px;
  color: #666;
  text-decoration: none;
}

.bank-header .page-title {
  font-size: 16px;
  color: #000000;
  font-weight: 500;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile Content Area */
.bank-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  width: 100%;
}

/* Mobile Illustration */
.empty-card-illustration {
  width: 280px;
  height: 200px;
  position: relative;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.illust-bg-circle {
  width: 220px;
  height: 220px;
  background: #e0fcf3;
  border-radius: 50%;
  position: absolute;
  filter: blur(20px);
  opacity: 0.6;
  z-index: 0;
}

.illust-card-back {
  width: 160px;
  height: 100px;
  background: linear-gradient(135deg, #ddd 0%, #fff 100%);
  border-radius: 10px;
  position: absolute;
  top: 30px;
  left: 40px;
  transform: rotate(-5deg);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.illust-card-back::before {
  content: '';
  width: 100%;
  height: 20px;
  background: #000000;
  position: absolute;
  top: 20px;
  left: 0;
}

.illust-card-front {
  width: 180px;
  height: 110px;
  background: linear-gradient(135deg, #eef1f5 0%, #fff 100%);
  border-radius: 10px;
  position: absolute;
  top: 60px;
  left: 80px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 2;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-chip {
  width: 30px;
  height: 20px;
  background: #e0e0e0;
  border-radius: 4px;
}

.card-strip {
  width: 60%;
  height: 8px;
  background: #fff;
  border-radius: 4px;
  margin-top: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.plus-bubble {
  width: 32px;
  height: 32px;
  background: #2dabff;
  border-radius: 50%;
  position: absolute;
  right: 40px;
  top: 40px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(45, 171, 255, 0.4);
  border: 2px solid #fff;
}

/* Mobile Add Button */
.add-action-btn {
  width: 90%;
  max-width: 345px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  color: #d0d0d0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  margin-top: 20px;
}

.add-action-btn i {
  font-size: 18px;
  color: #555;
  /* Plus icon dark grey */
}

.check-text {
  font-size: 12px;
  color: #000000;
  margin-top: 10px;
  text-align: center;
}

/* Common Card Styles (Mobile & Desktop) */
.bank-card {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 20px;
  color: #000000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 100%;
  max-width: 420px;
  border: 1px solid #e1f5ec;
  overflow: hidden;
}

.bank-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 208, 125, 0.2);
  border-color: #00D07D;
}

.bank-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: skewX(-25deg);
  transition: 0.5s;
  pointer-events: none;
}

.bank-card:hover::before {
  left: 100%;
  transition: 0.7s;
}

.bank-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
}

.bank-name {
  font-size: 16px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: 0.5px;
}

.card-chip-icon {
  width: 40px;
  height: 28px;
  background: linear-gradient(135deg, #e0ccca 0%, #c4a4a4 100%);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.card-chip-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.card-chip-icon::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.bank-card-number {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 22px;
  color: #000000;
  letter-spacing: 3px;
  margin-bottom: 25px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
}

.bank-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.bank-holder-label {
  font-size: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.bank-holder-value {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
}

.delete-btn-corner {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-size: 14px;
  transition: all 0.2s;
  z-index: 5;
}

.delete-btn-corner:hover {
  background: #ffebee;
  color: #ff4d4f;
}

.desktop-bank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 25px;
}

.desktop-bank-card-container {
  /* Wrapper for bank cards on desktop if needed */
}

/* Make styling more robust for desktop */
.desktop-dashboard-container .bank-card {
  max-width: 100%;
  /* Fill grid cell */
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.desktop-add-bank-card {
  background: #f8fcfb;
  border: 2px dashed #d1e8df;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  cursor: pointer;
  transition: all 0.2s;
  height: 100%;
  box-sizing: border-box;
  /* Ensure border doesn't add to width */
}

.desktop-add-bank-card:hover {
  background: #eafff6;
  border-color: var(--leyu-primary-dark);
}

.desktop-add-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 15px;
  color: var(--leyu-primary-dark);
  font-size: 24px;
}

.desktop-add-text {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

/* Media Queries for Visibility */
@media (max-width: 1024px) {

  /* Mobile Mode */
  body {
    background-color: #f0fcf8;
    font-family: var(--leyu-font);
  }



  .bank-container {
    display: flex !important;
  }
}

@media (min-width: 1025px) {

  /* Desktop Mode */
  body {
    background-color: #E6FFF2;
    /* Match transaction record bg */
    font-family: var(--leyu-font);
  }



  .bank-container {
    display: none !important;
  }
}

/* --- page: crypto_topup --- */
@media (max-width: 1024px) {
  #auth_section.crypto-topup-page.txn-figma-auth-wrap {
    display: block !important;
  }

  /*
     * 與 custom_css 內 .inner_container.figma-mobile-skin 一致：底欄 #bottom_navbar 為 fixed，
     * 內容區須預留高度，否則最後一塊卡片會被遮擋。
     */
  #auth_section.crypto-pay.crypto-topup-page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }
}

/* 與 custom_css Figma 皮膚一致：手機 12win-main-mb.jpg、桌面 12win-main-web.png（#auth_section 須自帶圖，否則實心底會擋住 body 底圖） */
#auth_section.crypto-pay.crypto-topup-page {
  position: relative;
  height: auto !important;
  min-height: 56vh;
  overflow: visible;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

@media (max-width: 1024px) {
  #auth_section.crypto-pay.crypto-topup-page {
    background-color: #f6f6f6;
    background-image: var(--leyu-img-crypto-skin-mb);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: scroll;
  }
}

@media (min-width: 1025px) {
  #auth_section.crypto-pay.crypto-topup-page {
    background-color: transparent;
    background-image: none;
  }

  /*
     * 桌面 main_container(z-index:1) 高於 body::before(fixed)，僅設 body 底圖在本頁仍看不到；
     * 對齊 custom_css ≥1025 body::before / body::after
     */
  #auth_section.crypto-pay.crypto-topup-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--leyu-img-crypto-skin-web);
    background-repeat: no-repeat;
    background-position: 9.93% 4.62%;
    background-size: 119.86% 109.24%;
    background-attachment: fixed;
  }

  #auth_section.crypto-pay.crypto-topup-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(ellipse 105% 55% at 50% 100%, rgba(232, 180, 150, 0.42) 0%, transparent 58%),
      linear-gradient(180deg, transparent 52%, rgba(255, 244, 235, 0.55) 100%);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    background-attachment: fixed;
  }
}

@media (max-width: 1024px) {

  /* 輕遮罩保留可讀性，不蓋過主底圖 */
  #auth_section.crypto-pay.crypto-topup-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(254, 222, 160, 0.45) 0%, transparent 58%);
  }
}

.crypto-pay.crypto-topup-page {
  --cp-text: #2d1c15;
  --cp-muted: #6a5560;
  --cp-border: #e8ddd8;
  --cp-accent: #c8845f;
  --cp-accent-soft: rgba(200, 132, 95, 0.13);
  --cp-salmon: #e8a888;
  --cp-warn-bg: #fef3c7;
  --cp-warn-text: #92400e;
  --cp-warn-border: #f59e0b;
  --cp-page-bg: transparent;
  font-family: var(--leyu-font);
  color: var(--cp-text);
  background: transparent;
  min-height: 48vh;
}

.crypto-pay-inner {
  position: relative;
  z-index: 1;
}

.crypto-pay-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cp-accent);
  text-decoration: none;
  margin-bottom: 28px;
}

.crypto-pay-back:hover {
  color: #a96d46;
  text-decoration: none;
}

.crypto-pay-back .bi {
  font-size: 16px;
  line-height: 1;
}

.crypto-pay-heading {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0.08em;
  line-height: 1.05;
  margin: 0 0 28px;
  text-transform: uppercase;
  background: linear-gradient(92deg, #b8693f 0%, #e8a888 42%, #9d5f3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.crypto-pay-card {
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 14px;
  padding: 24px;
}

.crypto-pay-card+.crypto-pay-card {
  margin-top: 16px;
}

.crypto-pay-card-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 16px;
  color: var(--cp-text);
}

.crypto-pay-scan-title {
  text-align: center;
  margin-bottom: 20px;
}

.crypto-pay-qr {
  width: 220px;
  height: 220px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: #f0ebe8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.crypto-pay-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.crypto-pay-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}

.crypto-pay-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.crypto-pay-chip--net {
  background: var(--cp-accent-soft);
  border: 1px solid var(--cp-accent);
  color: var(--cp-text);
}

.crypto-pay-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.crypto-pay-chip--time {
  background: var(--cp-warn-bg);
  color: var(--cp-warn-text);
}

.crypto-pay-chip--time .bi {
  font-size: 13px;
  line-height: 1;
}

.crypto-pay-addr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.crypto-pay-addr-field {
  flex: 1 1 160px;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(45, 28, 21, 0.04);
}

/* 全站 .deposit_data_text 預設 #f5f5f5（深色卡）；此須強制深色字以免淺底上看不見 */
.crypto-pay.crypto-topup-page .crypto-pay-addr-field .deposit_data_text {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #1a110d !important;
  -webkit-text-fill-color: #1a110d;
  letter-spacing: 0.01em;
}

.crypto-pay-copy-btn {
  position: relative;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  background: linear-gradient(145deg, #c9916a 0%, #b06f45 48%, #8f5535 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.crypto-pay-copy-btn:hover {
  filter: brightness(1.05);
  color: #fff;
}

.crypto-pay-copy-btn .bi {
  font-size: 15px;
}

.crypto-pay-copy-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: #2d1c15;
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.crypto-pay-copy-btn.tooltip-visible::after {
  opacity: 1;
  visibility: visible;
}

.crypto-pay-notice {
  background: var(--cp-warn-bg);
  border: 1px solid var(--cp-warn-border);
  border-radius: 14px;
  padding: 20px;
  color: var(--cp-warn-text);
}

.crypto-pay-notice-title {
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 10px;
}

.crypto-pay-notice ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 12px;
  line-height: 1.45;
}

.crypto-pay-notice li+li {
  margin-top: 4px;
}

.crypto-pay-side-card {
  box-shadow: 0 2px 10.5px rgba(0, 0, 0, 0.06);
}

.crypto-pay-kv {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.crypto-pay-kv+.crypto-pay-kv {
  margin-top: 12px;
}

.crypto-pay-kv--ref {
  font-size: 12px;
}

.crypto-pay-kv-label {
  color: var(--cp-muted);
  font-weight: 400;
  flex-shrink: 0;
}

.crypto-pay-kv-value {
  text-align: right;
  font-weight: 500;
  color: var(--cp-text);
  word-break: break-word;
}

.crypto-pay-kv-value--amt {
  font-weight: 700;
}

.crypto-pay-divider {
  height: 1px;
  background: var(--cp-border);
  margin: 14px 0;
}

.crypto-pay-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.crypto-pay-total-label {
  font-weight: 600;
  font-size: 14px;
}

.crypto-pay-total-val {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--cp-salmon);
  line-height: 1;
}

.crypto-pay-status-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border-radius: 12px;
  border: 1.5px solid var(--cp-accent);
  background: transparent;
  color: var(--cp-accent);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.crypto-pay-status-btn:hover {
  background: rgba(200, 132, 95, 0.08);
  color: #a96d46;
  text-decoration: none;
}

.crypto-pay-status-btn .bi {
  font-size: 16px;
}

.crypto-pay-noqr {
  text-align: center;
  font-size: 13px;
  color: var(--cp-muted);
  margin: 0;
}

/* --- page: deposit --- */
/* Mobile-only Styles */
@media (max-width: 1024px) {
  body:has(.deposit-container) {
    padding-top: 0 !important;
  }

  body:has(.deposit-container) .top_navbar,
  body:has(.deposit-container) .fixed-top,
  body:has(.deposit-container) #bottom_navbar {
    display: none !important;
  }

  .deposit-container {
    padding: 0;
    background-color: #f8f9fa;
    /* Light gray background */
    min-height: 100vh;
    font-family: var(--leyu-font);
  }

  /* Auth Banner */
  .auth-banner {
    background-color: #f5faff;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #8da5bc;
  }

  .auth-icon {
    color: #007bff;
    margin-right: 5px;
  }

  .auth-btn {
    background-color: var(--leyu-primary);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 12px;
  }

  /* Section Headers */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    font-size: 16px;
    color: #000000;
  }

  .section-title {
    font-weight: 500;
    font-size: 16px;
    color: #000000;
  }

  .bonus-badge {
    background-color: #ffeaea;
    color: #ff6b6b;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
  }

  /* Payment Grid */
  .payment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 10px 15px 10px;
  }

  .payment-item {
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 80px;
  }

  .payment-item.active {
    border-color: var(--leyu-primary);
    background-color: #f0fff4;
  }

  .payment-item img {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
    object-fit: contain;
  }

  .payment-name {
    font-size: 11px;
    color: #666;
    text-align: center;
    line-height: 1.2;
  }

  .recommend-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4d4f;
    color: white;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 8px 0 8px 0;
    z-index: 10;
  }

  .bonus-tag {
    font-size: 8px;
    color: #ff6b6b;
    transform: scale(0.9);
  }

  .select-check {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background-color: var(--leyu-primary);
    border-radius: 10px 0 10px 0;
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Banner */
  .promo-banner {
    padding: 0 15px;
    margin-bottom: 15px;
  }

  .promo-banner img {
    width: 100%;
    border-radius: 10px;
    display: block;
  }

  /* Crypto Selection */
  .crypto-section {
    padding: 0 15px;
  }

  .crypto-header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
  }

  .crypto-link {
    color: #007bff;
    font-size: 12px;
    text-decoration: none;
  }

  .crypto-options {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
  }

  .crypto-btn {
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 25px;
    font-size: 14px;
    color: #666;
    background: white;
    position: relative;
    display: flex;
    align-items: center;
  }

  .crypto-btn.active {
    border-color: var(--leyu-primary);
    color: var(--leyu-primary);
  }

  .crypto-btn img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  /* QR Code */
  .qr-section {
    text-align: center;
    padding: 20px 15px;
  }

  .qr-code {
    width: 150px;
    height: 150px;
    margin: 0 auto 15px auto;
    border: 1px solid #eee;
    padding: 5px;
    background: white;
  }

  .qr-code img {
    width: 100%;
    height: 100%;
  }

  .wallet-address {
    font-size: 13px;
    color: #000000;
    margin-bottom: 10px;
    word-break: break-all;
    padding: 0 30px;
  }

  .copy-btn {
    color: #007bff;
    border: 1px solid #007bff;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
    margin-left: 5px;
    display: inline-block;
  }

  .scan-tip-box {
    background-color: #e6ffed;
    color: #555;
    padding: 10px;
    margin: 10px 15px;
    border-radius: 5px;
    font-size: 12px;
    text-align: center;
  }

  .rate-info {
    font-size: 12px;
    color: #000000;
    text-align: center;
    margin-bottom: 5px;
  }

  /* Action Button */
  .action-btn-container {
    padding: 15px;
  }

  .one-click-btn {
    background-color: #e6fffa;
    color: #00b8d4;
    border: none;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
  }

  .one-click-btn img {
    height: 24px;
    margin-right: 10px;
  }

  /* Footer Note */
  .footer-note {
    background-color: #e6fffa;
    margin: 0 15px 20px 15px;
    border-radius: 10px;
    padding: 15px 15px 60px 15px;
    /* Extra padding bottom for floating buttons if needed */
    position: relative;
  }

  .note-title {
    color: #ff6b6b;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .note-content {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .footer-actions {
    display: flex;
    gap: 15px;
  }

  .footer-action-btn {
    flex: 1;
    background: white;
    border-radius: 25px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    color: #666;
    font-size: 14px;
    text-decoration: none;
  }

  .footer-action-btn img {
    width: 20px;
    margin-right: 8px;
  }

  .custom-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    font-size: 16px;
    color: #000000;
  }

  /* Deposit cascade form (Leyu light skin) */
  .deposit-container .deposit-inline-error {
    display: none;
    margin: 0 15px 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff5f5;
    color: #c62828;
    font-size: 13px;
  }

  .deposit-container .deposit_acc_field,
  .deposit-container .deposit-form-panel {
    display: block;
  }

  /* Figma 1496:4597 — 账户信息卡：is_qr 时左图右文，否则仅详情 */
  .deposit-container .deposit-acc-box {
    margin: 0 15px 12px;
    padding: 16px 18px;
    border-radius: 4px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }

  .deposit-container .deposit_qr_wrap {
    flex-shrink: 0;
  }

  .deposit-container .deposit-qr-box {
    width: 120px;
    height: 120px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
  }

  .deposit-container .deposit_qr_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .deposit-container .deposit-acc-divider {
    display: none;
    width: 1px;
    align-self: stretch;
    min-height: 120px;
    background: #e4e6ed;
    flex-shrink: 0;
  }

  .deposit-container .deposit-acc-panel.is-qr .deposit-acc-divider {
    display: block;
  }

  .deposit-container .deposit_acc_content {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }

  .deposit-container .deposit_acc_details {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 17px;
    padding: 0;
    border-bottom: 0;
  }

  .deposit-container .deposit_data_title,
  .deposit-container .deposit_acc_title {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 17px;
    color: #7981a4;
    margin: 0;
    padding: 0 8px 0 0;
    font-weight: 400;
  }

  .deposit-container .deposit_acc_title::before {
    display: none;
  }

  .deposit-container .deposit_data_text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 17px;
    color: #303442;
    text-align: right;
    word-break: break-all;
    font-weight: 400;
  }

  .deposit-container .btn_copy_deposit_data.deposit-copy-icon {
    flex-shrink: 0;
    width: 20px;
    min-width: 20px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .deposit-container .deposit-copy-glyph {
    position: relative;
    width: 11px;
    height: 11px;
    display: inline-block;
  }

  .deposit-container .deposit-copy-glyph::before,
  .deposit-container .deposit-copy-glyph::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid #18c35c;
    border-radius: 1.9px;
    box-sizing: border-box;
  }

  .deposit-container .deposit-copy-glyph::before {
    left: 2px;
    top: 0;
  }

  .deposit-container .deposit-copy-glyph::after {
    left: 0;
    top: 2px;
    background: #f8f9fa;
  }

  @media (max-width: 420px) {
    .deposit-container .deposit-acc-panel.is-qr .deposit-acc-box {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

    .deposit-container .deposit-acc-panel.is-qr .deposit-acc-divider {
      display: none;
    }

    .deposit-container .deposit-qr-box {
      margin: 0 auto;
    }
  }

  .deposit-container .deposit-amount-wrap {
    padding: 0 15px 10px;
  }

  .deposit-container .deposit-amt-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 4px 12px;
  }

  .deposit-container .deposit-amt-input {
    border: 0;
    box-shadow: none;
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    background: transparent;
  }

  .deposit-container .deposit-amt-input:focus {
    outline: none;
    box-shadow: none;
  }

  .deposit-container .deposit-amt-ccy {
    font-size: 13px;
    font-weight: 600;
    color: var(--leyu-primary-dark, #009A47);
    white-space: nowrap;
  }

  .deposit-container .deposit-limit-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #555;
  }

  .deposit-container .deposit-amount-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .deposit-container .badge_amount {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #333;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
  }

  .deposit-container .badge_amount:hover,
  .deposit-container .badge_amount:active {
    border-color: var(--leyu-primary, #02B457);
    color: var(--leyu-primary-dark, #009A47);
    background: #f0fff4;
  }

  .deposit-container .deposit_crypto_conversion {
    margin: 0 15px 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f5faf7;
    border: 1px solid #d7efe3;
  }

  .deposit-container .deposit-crypto-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    margin-bottom: 8px;
  }

  .deposit-container .deposit-crypto-k {
    color: #666;
  }

  .deposit-container .deposit-crypto-v {
    color: #1a1a1a;
    font-weight: 600;
    text-align: right;
  }

  .deposit-container .deposit-crypto-limit-hint {
    margin: 0;
    font-size: 12px;
    color: #555;
  }

  .deposit-container .deposit-upload-block,
  .deposit-container .deposit-promote-block {
    padding: 0 15px 12px;
  }

  .deposit-container .deposit-upload-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
  }

  .deposit-container .deposit-file-input,
  .deposit-container .deposit-promote-ui {
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
  }

  .deposit-container .one-click-btn.deposit-submit-btn {
    background: var(--leyu-primary, #02B457);
    color: #fff;
  }

  .deposit-container .deposit-promote-optional {
    font-weight: 400;
    color: #555;
    font-size: 12px;
    margin-left: 4px;
  }

  .deposit-container .deposit-promo-item {
    min-height: 80px;
    height: auto;
  }

  .deposit-container .deposit-promo-meta {
    font-size: 10px !important;
    color: #555 !important;
    margin-top: 2px;
  }
}

html,
body {
  overflow-x: clip;
}

body {
  background-color: var(--primary-green);
  font-family: var(--leyu-font);
}

.desktop-main-content {
  min-width: 0;
}













/* Main Content Styling */




.desktop-main-content .d-deposit-panel {
  padding: 22px 24px 24px;
  min-width: 0;
  overflow: hidden;
}

.d-deposit-panel .deposit-inline-error {
  display: none;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff5f5;
  color: #c62828;
  font-size: 13px;
}

.d-deposit-panel .deposit_acc_field,
.d-deposit-panel .deposit-form-panel {
  display: block;
  margin-bottom: 18px;
}

.d-deposit-panel .deposit-acc-desktop-box {
  align-items: center;
  background: #f8f9fa;
  border-radius: 4px;
  padding: 24px 72px;
  gap: 45px;
}

.d-deposit-panel .deposit_acc_content {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 8px;
}

.d-deposit-panel .d-info-row {
  align-items: center;
  margin-bottom: 0;
  min-height: 17px;
  gap: 0;
}

.d-deposit-panel .d-info-label {
  width: auto;
  padding-right: 8px;
  color: #7981a4;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
}

.d-deposit-panel .d-info-value {
  flex: 1;
  justify-content: flex-end;
  text-align: right;
  color: #303442;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
}

.d-deposit-panel .btn_copy_deposit_data.d-copy-btn.deposit-copy-icon {
  width: 20px;
  min-width: 20px;
  height: 16px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.d-deposit-panel .deposit-acc-divider {
  display: none;
  width: 1px;
  align-self: stretch;
  min-height: 120px;
  background: #e4e6ed;
  flex-shrink: 0;
}

.d-deposit-panel .deposit-acc-panel.is-qr .deposit-acc-divider {
  display: block;
}

.d-deposit-panel .deposit-qr-box,
.d-deposit-panel .d-qr-box {
  width: 120px;
  height: 120px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}

.d-deposit-panel .d-qr-img,
.d-deposit-panel .deposit_qr_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.d-deposit-panel .deposit-copy-glyph {
  position: relative;
  width: 11px;
  height: 11px;
  display: inline-block;
}

.d-deposit-panel .deposit-copy-glyph::before,
.d-deposit-panel .deposit-copy-glyph::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid #18c35c;
  border-radius: 1.9px;
  box-sizing: border-box;
}

.d-deposit-panel .deposit-copy-glyph::before {
  left: 2px;
  top: 0;
}

.d-deposit-panel .deposit-copy-glyph::after {
  left: 0;
  top: 2px;
  background: #f8f9fa;
}

.d-deposit-panel .deposit-amount-wrap {
  margin-bottom: 14px;
}

.d-deposit-panel .deposit-amt-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 6px 14px;
  max-width: 420px;
}

.d-deposit-panel .deposit-amt-input {
  border: 0;
  box-shadow: none;
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  font-size: 20px;
  font-weight: 600;
  background: transparent;
}

.d-deposit-panel .deposit-amt-input:focus {
  outline: none;
  box-shadow: none;
}

.d-deposit-panel .deposit-amt-ccy {
  font-size: 13px;
  font-weight: 600;
  color: var(--leyu-primary-dark, #009A47);
}

.d-deposit-panel .deposit-limit-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}

.d-deposit-panel .deposit-amount-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.d-deposit-panel .badge_amount {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #333;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

.d-deposit-panel .badge_amount:hover {
  border-color: var(--leyu-primary, #02B457);
  color: var(--leyu-primary-dark, #009A47);
  background: #f0fff4;
}

.d-deposit-panel .deposit_crypto_conversion {
  max-width: 420px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f5faf7;
  border: 1px solid #d7efe3;
}

.d-deposit-panel .deposit-crypto-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 8px;
}

.d-deposit-panel .deposit-crypto-k {
  color: #666;
}

.d-deposit-panel .deposit-crypto-v {
  color: #1a1a1a;
  font-weight: 600;
}

.d-deposit-panel .deposit-crypto-limit-hint {
  margin: 0;
  font-size: 12px;
  color: #555;
}

.d-deposit-panel .deposit-upload-block,
.d-deposit-panel .deposit-promote-block {
  max-width: 420px;
  margin-bottom: 14px;
}

.d-deposit-panel .deposit-upload-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1a1a;
}

.d-deposit-panel .deposit-file-input,
.d-deposit-panel .deposit-promote-ui {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.d-deposit-panel .one-click-btn.deposit-submit-btn {
  background: var(--leyu-primary, #02B457);
  color: #fff;
  max-width: 420px;
}

.d-deposit-panel .deposit-promote-optional {
  font-weight: 400;
  color: #555;
  font-size: 12px;
  margin-left: 4px;
}

.d-deposit-panel .deposit-promo-card {
  min-width: 128px;
  max-width: 160px;
}

.d-deposit-panel .deposit-promo-meta {
  font-size: 11px !important;
  color: #555 !important;
  font-weight: 400 !important;
  margin-top: 2px;
}

.d-tutorial-link {
  font-size: 14px;
  color: var(--leyu-text, #1a1a1a);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.d-payment-wrapper {
  margin-bottom: 22px;
}

.d-payment-label {
  font-size: 14px;
  color: var(--leyu-text, #1a1a1a);
  margin-bottom: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.d-payment-label .bonus-badge {
  margin-left: 0;
}

.d-payment-label .crypto-link {
  margin-left: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--leyu-primary-dark, #009A47);
  text-decoration: none;
}

.d-payment-grid,
.d-crypto-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
}

.d-crypto-row {
  margin-bottom: 18px;
}

/* Unified selectable surface: payment / coin / protocol */
.d-select-card {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  color: var(--leyu-text, #1a1a1a);
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.d-select-card:hover {
  border-color: rgba(2, 180, 87, 0.35);
}

.d-select-card.active {
  border-color: var(--leyu-primary, #02B457);
  background: #f0fff4;
  color: var(--leyu-primary-dark, #009A47);
  font-weight: 600;
}

.d-select-card.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: var(--leyu-primary, #02B457) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 12px;
  border-radius: 8px 0 0 0;
}

.d-payment-card {
  width: 128px;
  min-height: 68px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.d-pay-icon {
  height: 24px;
  object-fit: contain;
  margin-bottom: 4px;
}

.d-pay-name {
  font-size: 12px;
  color: inherit;
  font-weight: inherit;
  text-align: center;
  line-height: 1.25;
}

.d-promo-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff5722;
  color: #fff;
  font-size: 10px;
  padding: 0 6px;
  border-radius: 0 10px 0 6px;
  line-height: 16px;
  z-index: 1;
}

.d-crypto-btn {
  min-width: 112px;
  min-height: 44px;
  padding: 10px 28px 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}

.d-crypto-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.d-qr-container {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 24px 72px;
  display: flex;
  align-items: center;
  gap: 45px;
  min-width: 0;
}

.d-qr-box {
  background: #fff;
  padding: 0;
  border: 0;
  border-radius: 5px;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  overflow: hidden;
}

.d-qr-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.d-address-info {
  flex: 1;
  min-width: 0;
}

.d-info-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  align-items: flex-start;
}

.d-info-label {
  width: 72px;
  flex-shrink: 0;
  color: var(--leyu-text-secondary, #333);
  font-weight: 500;
}

.d-info-value {
  color: var(--leyu-text, #1a1a1a);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  word-break: break-all;
}

.d-info-tip {
  color: var(--leyu-text-secondary, #333);
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.d-alert-light {
  background: #e6fafa;
  padding: 10px 12px;
  border-radius: 8px;
  color: #c2185b;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}

.d-ebpay-banner {
  margin-top: 16px;
  background: #f5f7fa;
  padding: 14px 16px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.d-ebpay-title {
  font-weight: 700;
  color: var(--leyu-text, #1a1a1a);
  font-size: 14px;
}

.d-ebpay-desc {
  font-size: 12px;
  color: var(--leyu-primary-dark, #009A47);
  margin-top: 2px;
  font-weight: 500;
}

.d-ebpay-btn {
  background: var(--leyu-primary, #02B457);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.d-copy-link,
.d-rate-refresh {
  color: var(--leyu-primary-dark, #009A47);
  cursor: pointer;
  flex-shrink: 0;
}

.d-rate-refresh {
  font-size: 12px;
}

/* Footer Tips for Desktop - NOW IN RIGHT COL */
.d-footer-tips {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  font-size: 13px;
  color: var(--leyu-text-secondary, #333);
  line-height: 1.8;
  margin-top: 0;
}

.d-tips-header {
  color: var(--leyu-text, #1a1a1a);
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 15px;
}

.d-tips-list {
  font-size: 13px;
  color: var(--leyu-text-secondary, #333);
  line-height: 2;
}

.d-tips-list a.d-tips-item {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.d-tips-list a.d-tips-item:hover {
  color: var(--leyu-primary-dark, #009A47);
}

.d-tips-more {
  margin-top: 10px;
  color: var(--leyu-primary-dark, #009A47);
  cursor: pointer;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}

.btn-green-lg {
  background: var(--leyu-primary);
  color: #fff;
  border: none;
  padding: 10px 40px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 20px;
}

/* Right Sidebar Widgets */
.d-widget-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-bottom: 0;
  overflow: hidden;
}

.d-widget-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eef0f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.d-widget-header span {
  font-size: 15px;
  color: var(--leyu-text, #1a1a1a);
  font-weight: 700;
}

.d-widget-body {
  padding: 20px;
  min-height: 150px;
}

.d-empty-text {
  color: var(--leyu-text-muted, #4b5563);
  font-size: 13px;
  text-align: center;
  margin-top: 40px;
}

.d-more-link-sm {
  font-size: 12px;
  color: var(--leyu-text-secondary, #333);
  text-decoration: none;
  font-weight: 500;
}
}

/* --- page: transfer --- */
/* Base Styles (Mobile Default) */
body:has(.mobile-transfer-wrapper) {
  background: #F6FFF8;
  padding-top: 0 !important;
  font-family: var(--leyu-font);
}

/* Mobile specific hiding */
@media (max-width: 1024px) {


  body:has(.mobile-transfer-wrapper) .top_navbar,
  body:has(.mobile-transfer-wrapper) .fixed-top,
  body:has(.mobile-transfer-wrapper) #bottom_navbar {
    display: none !important;
  }
}

/* Desktop specific hiding */
@media (min-width: 1025px) {
  .mobile-transfer-wrapper {
    display: none !important;
  }

  body:has(.d-transfer-panel) {
    /* Reset mobile body styles for desktop transfer layout */
    padding-top: 0 !important;
    /* Managed by layout */
    background-color: #e0fadd;
    /* Desktop BG */
  }
}

/* Transfer Card Styles (Used in both Mobile and Desktop Content) */
.transfer-card {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(116, 219, 137, .12);
  background: #E6FFF2;
}

.wallet-head {
  position: relative;
  padding: 18px 16px 16px 16px;
  background: linear-gradient(105deg, #ABEACF 1.23%, #C7FFD0 100%);
  border-radius: 10px 10px 25px 25px;
}

.wallet-head .main-balance-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}

.wallet-head .main-balance-value {
  font-size: 28px;
  font-weight: 700;
  color: #111;
  line-height: 1;
  margin-bottom: 14px;
}

.recycle-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #4b5563;
  font-size: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.recycle-btn .icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, .04);
}

.recycle-btn .icon i {
  font-size: 12px;
  color: #4b5563
}

.sub-wallets {
  display: flex;
  gap: 48px;
}

.sub-wallet-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sub-wallet-label {
  font-size: 12px;
  color: #6b7280;
}

.sub-wallet-value {
  font-size: 13px;
  font-weight: 600;
  color: #111;
}

.wallet-body {
  background: #E6FFF2;
  padding: 10px 12px 16px 12px;
}

.controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 10px 4px;
  color: #9aa0a6;
  font-size: 13px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ddd;
  transition: .25s;
  border-radius: 999px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  transition: .25s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

input:checked+.slider {
  background: var(--leyu-primary);
}

input:checked+.slider:before {
  transform: translateX(20px);
}

.divider {
  height: 1px;
  background: rgba(0, 0, 0, .04);
  margin: 0 4px 10px 4px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  padding: 0 2px 2px 2px;
}

.game-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #6b7280;
  font-size: 13px;
  padding: 18px 0;
}

.game-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 12px 6px 10px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(26, 26, 26, 0.08);
  min-height: 110px;
  box-sizing: border-box;
}

.game-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.game-name {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  line-height: 1.1;
}

.game-balance {
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.game-balance.has-funds {
  color: #0fa84c;
}

.game-balance.maintenance {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 500;
}

.venue-sync-out-btn {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 2px;
  border: 1px solid rgba(217, 119, 6, 0.35);
  background: #fffbeb;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  color: #b45309;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}

.venue-sync-out-btn:hover {
  background: #fef3c7;
  border-color: rgba(217, 119, 6, 0.5);
}

.venue-sync-out-btn:disabled,
.venue-sync-out-btn.is-busy {
  opacity: 0.65;
  cursor: wait;
}

.venue-sync-out-btn.is-hidden,
.venue-sync-out-btn[hidden] {
  display: none !important;
}

.mobile-transfer-wrapper .controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.m-refresh-bal-btn {
  appearance: none;
  -webkit-appearance: none;
  margin-left: auto;
  border: 1px solid rgba(2, 180, 87, 0.22);
  background: #fff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  color: #0fa84c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.m-refresh-bal-btn:disabled,
.m-refresh-bal-btn.is-busy {
  opacity: 0.65;
  cursor: wait;
}

/* Mobile Container Specifics */
.mobile-transfer-wrapper .transfer-container {
  padding: 12px 14px;
  padding-bottom: 86px;
  background: #fff;
}

.mobile-transfer-wrapper .custom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 10px 2px;
  color: #000000;
}

.mobile-transfer-wrapper .custom-header .title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .5px;
}

.mobile-transfer-wrapper .custom-header .right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9aa0a6;
}

.mobile-transfer-wrapper .custom-header .left i {
  font-size: 16px;
  color: #444
}

.mobile-transfer-wrapper .auto-transfer-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .05);
  z-index: 100;
}

.mobile-transfer-wrapper .auto-transfer-label {
  font-size: 16px;
  color: #000000;
  font-weight: 400;
}

@media (min-width: 1025px) {




  .d-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #666;
    font-size: 12px;
  }









  /* Right Sidebar Widgets */
  .d-widget-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-widget-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
  }

  .d-widget-header span {
    font-size: 14px;
    color: var(--leyu-primary-dark);
    font-weight: bold;
    border-bottom: 3px solid var(--leyu-primary-dark);
    padding-bottom: 5px;
    padding-left: 8px;
  }

  .d-widget-header.no-border span {
    border-bottom: none;
  }

  .d-more-link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }

  .d-widget-body {
    padding: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .d-empty-state {
    color: #666;
    font-size: 12px;
    text-align: center;
  }

  /* Layout Fixes for Desktop Transfer Content */
  .desktop-main-content .d-content-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    min-height: 0;
  }

  .desktop-main-content .d-content-card:has(.d-msg-header) {
    min-height: 600px;
  }

  .desktop-main-content .d-transfer-panel {
    padding: 20px 24px 8px;
  }

  .desktop-main-content .d-auto-transfer-card {
    margin-top: 16px;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .desktop-main-content .d-auto-transfer-card .auto-transfer-label {
    font-size: 15px;
    color: #1f2937;
    font-weight: 500;
  }

  .d-wallet-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 8px;
  }

  .d-wallet-card {
    position: relative;
    border-radius: 14px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 118px;
    background: #fff;
    border: 1px solid rgba(2, 180, 87, 0.12);
    box-sizing: border-box;
    transition:
      transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.3s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .d-wallet-card:hover {
    transform: translateY(-2px);
    border-color: rgba(2, 180, 87, 0.22);
    box-shadow: 0 8px 20px rgba(2, 180, 87, 0.08);
  }

  .d-wallet-card.is-primary {
    background: linear-gradient(135deg, #e8fff2 0%, #ffffff 72%);
    border-color: rgba(2, 180, 87, 0.24);
    box-shadow: inset 3px 0 0 var(--leyu-primary, #02B457);
  }

  .d-wallet-card.is-primary:hover {
    box-shadow:
      inset 3px 0 0 var(--leyu-primary, #02B457),
      0 10px 24px rgba(2, 180, 87, 0.12);
  }

  .d-wallet-bg {
    background: transparent;
  }

  .d-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    min-height: 28px;
  }

  .d-card-label {
    font-size: 13px;
    color: var(--leyu-text, #1a1a1a);
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .d-recycle-btn-small {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(2, 180, 87, 0.18);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    color: var(--leyu-primary-dark, #0fa84c);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(2, 180, 87, 0.10);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition:
      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    flex-shrink: 0;
    line-height: 1.2;
  }

  .d-recycle-btn-small i {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .d-recycle-btn-small:hover {
    background: #f0fdf6;
    border-color: rgba(2, 180, 87, 0.36);
    box-shadow: 0 4px 12px rgba(2, 180, 87, 0.16);
    transform: translateY(-1px);
  }

  .d-recycle-btn-small:hover i {
    transform: rotate(180deg);
  }

  .d-recycle-btn-small:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 2px rgba(2, 180, 87, 0.10);
    background: #e8faf0;
  }

  .d-recycle-btn-small:focus-visible {
    outline: 2px solid rgba(2, 180, 87, 0.55);
    outline-offset: 2px;
  }

  .d-card-amount {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }

  /* Transfer Form Section */
  .d-transfer-form-section {
    padding: 30px;
  }

  .d-form-row {
    display: flex;
    align-items: flex-end;
    /* Align bottom to match inputs */
    gap: 20px;
    margin-bottom: 25px;
  }

  .d-input-group {
    flex: 1;
  }

  .d-input-group label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }

  .d-select {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #eee;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 15px;
    color: #000000;
    outline: none;
    cursor: pointer;
  }

  .d-exchange-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f0f0;
    color: #000000;
    margin-bottom: 4px;
    /* Visual alignment */
    cursor: pointer;
    transition: .2s;
  }

  .d-exchange-icon:hover {
    background: #E6FFF2;
    color: var(--leyu-primary-dark);
  }

  .d-amount-wrapper {
    position: relative;
  }

  .d-amount-input {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    padding-right: 60px;
    /* Space for MAX */
    border: 1px solid #eee;
    /* Default border */
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    color: var(--leyu-primary-dark);
    /* Green text for amount */
    outline: none;
    transition: border-color 0.2s;
  }

  .d-amount-input:focus {
    border-color: var(--leyu-primary-dark);
  }

  .d-max-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--leyu-primary-dark);
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
  }

  .d-submit-btn {
    width: 100%;
    height: 50px;
    background: var(--leyu-primary-dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: .2s;
  }

  .d-submit-btn:hover {
    background: #0d9643;
  }

  /* Game Grid Desktop Overrides */
  .d-game-grid-section {
    padding: 16px 0 12px;
    border-top: 1px solid #eef2f0;
    margin-top: 12px;
  }

  .d-grid-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .d-grid-controls-label {
    font-size: 13px;
    color: var(--leyu-text-secondary, #333);
    font-weight: 500;
  }

  .d-refresh-bal-btn {
    appearance: none;
    -webkit-appearance: none;
    margin-left: auto;
    border: 1px solid rgba(2, 180, 87, 0.22);
    background: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    color: var(--leyu-primary-dark, #0fa84c);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(2, 180, 87, 0.08);
    transition:
      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .d-refresh-bal-btn:hover {
    background: #f0fdf6;
    border-color: rgba(2, 180, 87, 0.4);
    transform: translateY(-1px);
  }

  .d-refresh-bal-btn:disabled,
  .d-refresh-bal-btn.is-busy {
    opacity: 0.65;
    cursor: wait;
    transform: none;
  }

  .d-refresh-bal-btn.is-busy i,
  .m-refresh-bal-btn.is-busy i {
    animation: leyu-spin 0.8s linear infinite;
  }

  .d-game-val.is-loading,
  .game-balance.is-loading {
    min-height: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

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

  .d-grid-controls .switch {
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .d-grid-controls .switch:hover {
    transform: scale(1.04);
  }

  .d-grid-controls .switch:active {
    transform: scale(0.98);
  }

  .d-game-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--leyu-text-muted, #4b5563);
    font-size: 13px;
    padding: 28px 0;
  }

  .d-game-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }

  @keyframes leyu-venue-in {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }

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

  @keyframes leyu-funds-soft {

    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(2, 180, 87, 0);
    }

    50% {
      box-shadow: 0 0 0 3px rgba(2, 180, 87, 0.08);
    }
  }

  .d-game-card {
    position: relative;
    background: #fff;
    padding: 16px 10px 14px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(26, 26, 26, 0.08);
    box-shadow: 0 1px 0 rgba(26, 26, 26, 0.02);
    transition:
      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.28s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 148px;
    box-sizing: border-box;
    cursor: default;
    animation: leyu-venue-in 0.42s cubic-bezier(0.32, 0.72, 0, 1) both;
    animation-delay: calc(var(--i, 0) * 28ms);
    overflow: hidden;
  }

  .d-game-icon {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    object-fit: contain;
    display: block;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .d-game-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    line-height: 1.2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 1.2em;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    padding: 0 2px;
  }

  .d-game-card:hover .d-game-icon {
    transform: scale(1.06);
  }

  .d-game-card:hover {
    transform: translateY(-3px);
    background: #f4fbf7;
    border-color: rgba(2, 180, 87, 0.32);
    box-shadow: 0 8px 18px rgba(2, 180, 87, 0.10);
  }

  .d-game-card:active {
    transform: translateY(-1px) scale(0.985);
    box-shadow: 0 3px 8px rgba(2, 180, 87, 0.08);
    background: #eaf8f0;
  }

  .d-game-card:focus-visible {
    outline: 2px solid rgba(2, 180, 87, 0.55);
    outline-offset: 2px;
    border-color: rgba(2, 180, 87, 0.4);
  }

  /* Same base surface; status via text / badge only */
  .d-game-card.is-maintenance {
    background: #fff;
    border-color: rgba(26, 26, 26, 0.08);
  }

  .d-game-card.is-maintenance:hover {
    background: #fafafa;
    border-color: rgba(26, 26, 26, 0.14);
    box-shadow: 0 6px 14px rgba(26, 26, 26, 0.06);
  }

  .d-game-card.has-funds {
    background: #fff;
    border-color: rgba(2, 180, 87, 0.20);
  }

  .d-game-card.has-funds:hover {
    background: #f0fdf6;
    border-color: rgba(2, 180, 87, 0.42);
  }

  @media (prefers-reduced-motion: no-preference) {
    .d-game-card.has-funds {
      animation:
        leyu-venue-in 0.42s cubic-bezier(0.32, 0.72, 0, 1) both,
        leyu-funds-soft 2.8s ease-in-out 0.6s 1;
      animation-delay: calc(var(--i, 0) * 28ms), calc(0.55s + var(--i, 0) * 28ms);
    }
  }

  .d-game-val {
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    transition:
      color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .d-game-card:hover .d-game-val {
    transform: translateY(-1px);
  }

  .d-game-val.has-funds {
    color: var(--leyu-primary-dark, #0fa84c);
  }

  .d-game-card .venue-sync-out-btn {
    margin-top: 0;
  }

  .d-game-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    transition:
      background-color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      border-color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      color 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .d-game-card.is-maintenance:hover .d-game-badge {
    background: #eef0f2;
    border-color: #dfe3e8;
    color: #4b5563;
  }

  .desktop-main-content .d-auto-transfer-card {
    transition:
      border-color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      box-shadow 0.28s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .desktop-main-content .d-auto-transfer-card:hover {
    box-shadow: 0 6px 16px rgba(2, 180, 87, 0.08);
    transform: translateY(-1px);
  }

  .desktop-main-content .d-auto-transfer-card .switch:hover {
    transform: scale(1.04);
  }

  .desktop-main-content .d-auto-transfer-card .switch {
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  @media (prefers-reduced-motion: reduce) {

    .d-wallet-card,
    .d-recycle-btn-small,
    .d-game-card,
    .d-game-val,
    .d-game-badge,
    .d-grid-controls .switch,
    .desktop-main-content .d-auto-transfer-card,
    .desktop-main-content .d-auto-transfer-card .switch {
      transition: none !important;
      animation: none !important;
    }

    .d-wallet-card:hover,
    .d-game-card:hover,
    .d-game-card:active,
    .d-recycle-btn-small:hover,
    .d-recycle-btn-small:active,
    .desktop-main-content .d-auto-transfer-card:hover {
      transform: none;
    }

    .d-recycle-btn-small:hover i {
      transform: none;
    }
  }
}



/* --- page: withdraw --- */
/* 与 deposit / transfer 一致：仅手机端隐藏全局 nav / bottom bar */
@media (max-width: 1024px) {
  body:has(.withdraw-container) {
    padding-top: 0 !important;
    background-color: #f7f8fa;
  }

  body:has(.withdraw-container) .top_navbar,
  body:has(.withdraw-container) .fixed-top,
  body:has(.withdraw-container) #bottom_navbar {
    display: none !important;
  }

  .withdraw-container {
    display: block;
    padding: 0;
    min-height: 100vh;
    font-family: var(--leyu-font);
  }
}

/* 桌面分辨率显示桌面版，隐藏手机布局 */
@media (min-width: 1025px) {
  .withdraw-container {
    display: none !important;
  }
}

/* Custom Header */
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #fff;
  font-size: 16px;
  color: #000000;
}

.header-tabs {
  display: flex;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 3px;
}

.header-tab {
  padding: 5px 15px;
  font-size: 12px;
  border-radius: 17px;
  color: #000000;
  text-decoration: none;
}

.header-tab.active {
  background: #fff;
  color: #000000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Withdrawal Card */
.withdraw-card {
  background: linear-gradient(135deg, #a8e6cf 0%, #dcedc1 100%);
  margin: 15px;
  border-radius: 15px;
  padding: 20px;
  color: #000000;
  position: relative;
  overflow: hidden;
}

.withdraw-card::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.main-balance-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.main-balance-amount {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 20px;
}

.sub-balances {
  display: flex;
  gap: 40px;
}

.sub-balance-item {
  display: flex;
  flex-direction: column;
}

.sub-balance-label {
  font-size: 12px;
  color: #555;
  margin-bottom: 3px;
}

.sub-balance-amount {
  font-size: 16px;
  font-weight: 500;
  color: #000;
}

.recycle-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.3);
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

/* Toggle Section */
.toggle-section {
  display: flex;
  align-items: center;
  padding: 0 20px 15px 20px;
  font-size: 13px;
  color: #000000;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  margin-right: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: var(--leyu-primary);
}

input:checked+.slider:before {
  transform: translateX(18px);
}

/* Banner */
.promo-banner {
  margin: 0 15px 20px 15px;
  border-radius: 10px;
  overflow: hidden;
}

.promo-banner img {
  width: 100%;
  display: block;
}

/* Withdrawal Methods */
.method-section-title {
  padding: 0 15px 10px 15px;
  font-size: 15px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 5px;
}

.method-grid {
  display: flex;
  gap: 15px;
  padding: 0 15px 20px 15px;
  justify-content: space-between;
}

.method-item {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.method-item.active {
  border-color: var(--leyu-primary);
  background-color: #f0fff4;
}

.method-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.method-name {
  font-size: 13px;
  color: #666;
}

.recommended-badge {
  /* Based on design, no specific badge on methods visible in screenshot, but good to have if needed */
}

/* Footer Buttons */
.footer-buttons {
  padding: 0 15px;
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.footer-btn {
  flex: 1;
  background: #fff;
  border-radius: 25px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  gap: 8px;
}

.footer-btn img {
  width: 24px;
  height: 24px;
}

.footer-tip {
  padding: 15px;
  text-align: center;
  color: #000000;
  font-size: 12px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Carousel Indicators (Mock) — withdraw promo banner only, not homepage carousel */
.promo-banner+.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: -15px;
  margin-bottom: 15px;
  position: relative;
  z-index: 10;
}

.indicator-dot {
  width: 20px;
  height: 4px;
  background: #a8e6cf;
  border-radius: 2px;
}

.indicator-dot.active {
  background: #007bff;
}

/* 左侧快捷菜单 sprite 图标，沿用 dashboard 样式 */








@media (min-width: 1025px) {




  .d-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #666;
    font-size: 12px;
  }

  .d-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--leyu-primary-dark);
  }

  /* Main Content */




  /* Security Level Card */
  .d-security-level-card {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-security-status {
    font-size: 14px;
    color: #000000;
    margin-bottom: 10px;
  }

  .d-security-tip {
    font-size: 12px;
    color: #000000;
    margin-bottom: 20px;
  }

  .d-auth-steps {
    display: flex;
    gap: 30px;
  }

  .d-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #000000;
  }

  .d-step-item.active {
    color: #000000;
  }

  .d-step-item .step-icon {
    font-size: 20px;
    color: #666;
  }

  .d-step-item.active .step-icon {
    color: var(--leyu-primary-dark);
  }

  /* Content Card */
  .d-content-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .d-card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #E6FFF2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .d-card-header span {
    font-size: 16px;
    color: #000000;
  }

  .d-alert-light {
    background: #E6FFF2;
    color: var(--leyu-primary-dark);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .d-card-body {
    padding: 20px;
  }

  /* Form Rows */
  .d-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .d-form-row label {
    width: 80px;
    font-size: 14px;
    color: #666;
  }

  .d-form-row--name .d-text-value {
    flex: 1;
    min-width: 0;
  }

  .d-form-row--name .d-btn-action {
    margin-left: auto;
    flex-shrink: 0;
  }

  .d-gender-toggle {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
  }

  .d-toggle-btn {
    padding: 5px 20px;
    border: none;
    background: #fff;
    color: #666;
    cursor: pointer;
    font-size: 14px;
  }

  .d-toggle-btn.active {
    background: #fff;
    color: var(--leyu-primary-dark);
    border: 1px solid var(--leyu-primary-dark);
    margin: -1px;
    position: relative;
    z-index: 1;
  }

  .d-date-input {
    position: relative;
    width: 300px;
  }

  .d-date-input input {
    width: 100%;
    padding: 8px 36px 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    background: #fff;
  }

  .d-date-input input:disabled {
    background: #f5f5f5;
    cursor: not-allowed;
  }

  .d-date-input input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    cursor: pointer;
  }

  .d-date-input i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #000000;
    pointer-events: none;
  }

  .d-form-actions {
    padding-top: 10px;
    padding-left: 80px;
  }

  .d-submit-btn {
    background: #eee;
    color: #000000;
    border: none;
    padding: 8px 30px;
    border-radius: 4px;
    cursor: not-allowed;
  }

  .d-submit-btn.active {
    background: var(--leyu-primary-dark);
    color: #fff;
    cursor: pointer;
  }

  /* Security Items */
  .d-security-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f9f9f9;
  }

  .d-security-item:last-child {
    border-bottom: none;
  }

  .d-sec-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background: #f0f0f0;
    color: #000000;
  }

  .d-sec-icon-circle.green {
    border-radius: 50%;
    background: linear-gradient(315deg, #02B457 10.62%, #57FFAE 102.8%);
  }

  .d-sec-info {
    flex: 1;
  }

  .d-sec-label {
    font-size: 14px;
    color: #000000;
  }

  .d-sec-value {
    font-size: 14px;
    color: #000000;
  }

  .d-sec-value.text-muted {
    color: #000000;
  }

  .d-btn-action {
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--leyu-primary-dark);
    color: var(--leyu-primary-dark);
    background: transparent;
  }

  .d-btn-action:hover {
    background: var(--leyu-primary-dark);
    color: #fff;
  }

  .d-btn-action.is-locked,
  .d-btn-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: #9aa3b5;
    color: #9aa3b5;
    background: transparent;
  }

  .d-btn-action.is-locked:hover,
  .d-btn-action:disabled:hover {
    background: transparent;
    color: #9aa3b5;
  }

  /* Right Sidebar Widgets */
  .d-widget-card {
    background: #fff;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .d-widget-header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
  }

  .d-widget-header span {
    font-size: 14px;
    color: var(--leyu-primary-dark);
    font-weight: bold;
    border-bottom: 3px solid var(--leyu-primary-dark);
    padding-bottom: 5px;
    padding-left: 8px;
  }

  .d-widget-header.no-border span {
    border-bottom: none;
  }

  .d-more-link {
    font-size: 12px;
    color: #000000;
    text-decoration: none;
  }

  .d-widget-body {
    padding: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .d-empty-state {
    color: #666;
    font-size: 12px;
    text-align: center;
  }

  /* Withdraw center layout */
  .wd-main-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 20px;
  }

  .wd-wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .wd-wallet-title {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
  }

  .wd-wallet-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .wd-wallet-box {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 0 0 1px #e6f5eb;
  }

  .wd-wallet-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
  }

  .wd-wallet-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--leyu-primary-dark);
  }

  .wd-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 0 0 1px #f0f2f5;
  }

  .wd-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 12px;
  }

  .wd-methods-row {
    display: flex;
    gap: 12px;
  }

  .wd-pill {
    flex: 0 0 200px;
    border-radius: 10px;
    border: 1px solid #dfe5ec;
    padding: 10px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .wd-pill.active {
    border-color: var(--leyu-primary-dark);
    box-shadow: 0 0 0 1px #0fa84c1a;
    background: #f4fff8;
  }

  .wd-pill-main {
    font-size: 14px;
    color: #000000;
    margin-bottom: 4px;
  }

  .wd-pill-sub {
    font-size: 12px;
    color: #8f9bb3;
  }

  .wd-virtual-list {
    display: flex;
    gap: 12px;
  }

  .wd-virtual-card.add {
    flex: 0 0 260px;
    border-radius: 10px;
    border: 1px dashed #c3d5c9;
    background: #f8fff9;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .wd-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5f6eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--leyu-primary-dark);
    font-size: 18px;
    margin-bottom: 8px;
  }

  .wd-add-text {
    font-size: 14px;
    color: #000000;
    margin-bottom: 4px;
  }

  .wd-add-sub {
    font-size: 12px;
    color: #000000;
  }
}

/* --- page: transaction (receipt) --- */
#txn_receipt_section.txn-receipt-figma {
  position: relative;
  min-height: 56vh;
  padding: var(--leyu-space-lg) var(--leyu-space-md) calc(var(--leyu-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--leyu-space-lg));
  font-family: var(--leyu-font);
  color: var(--leyu-text);
}

@media (max-width: 1024px) {
  #txn_receipt_section.txn-receipt-figma {
    background-color: var(--leyu-bg-muted);
    background-image: var(--leyu-img-crypto-skin-mb);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  }
}

@media (min-width: 1025px) {
  #txn_receipt_section.txn-receipt-figma::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--leyu-img-crypto-skin-web);
    background-repeat: no-repeat;
    background-position: 9.93% 4.62%;
    background-size: 119.86% 109.24%;
    background-attachment: fixed;
  }
}

.txn-receipt-figma__layout {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
}

.txn-receipt-figma__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--leyu-font-size-base);
  font-weight: var(--leyu-font-weight-medium);
  color: var(--leyu-primary);
  text-decoration: none;
  margin-bottom: var(--leyu-space-lg);
}

.txn-receipt-figma__back:hover {
  color: var(--leyu-primary-dark);
  text-decoration: none;
}

.txn-receipt-figma__card {
  background: var(--leyu-bg);
  border: 1px solid var(--leyu-border);
  border-radius: var(--leyu-radius-md);
  padding: var(--leyu-space-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.txn-receipt-figma__title {
  font-size: var(--leyu-font-size-md);
  font-weight: var(--leyu-font-weight-semibold);
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0;
}

.txn-receipt-figma__rule {
  height: 1px;
  background: var(--leyu-border);
  margin: var(--leyu-space-md) 0;
}

.txn-receipt-figma__status {
  display: flex;
  align-items: flex-start;
  gap: var(--leyu-space-sm);
  padding: var(--leyu-space-xs) 0;
}

.txn-receipt-figma__status-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.txn-receipt-figma__status--ok .txn-receipt-figma__status-icon {
  color: var(--leyu-primary);
}

.txn-receipt-figma__status--fail .txn-receipt-figma__status-icon {
  color: var(--leyu-danger);
}

.txn-receipt-figma__status--pending .txn-receipt-figma__status-icon {
  color: var(--leyu-warning);
}

.txn-receipt-figma__status-text {
  margin: 0;
  font-size: var(--leyu-font-size-base);
  line-height: var(--leyu-line-height-normal);
  color: var(--leyu-text);
}

.txn-receipt-figma__rows {
  display: flex;
  flex-direction: column;
  gap: var(--leyu-space-sm);
}

.txn-receipt-figma__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--leyu-space-md);
  font-size: var(--leyu-font-size-base);
}

.txn-receipt-figma__k {
  color: var(--leyu-text-muted);
  flex-shrink: 0;
}

.txn-receipt-figma__k--bold {
  font-weight: var(--leyu-font-weight-semibold);
  color: var(--leyu-text);
}

.txn-receipt-figma__v {
  text-align: right;
  color: var(--leyu-text);
  word-break: break-word;
}

.txn-receipt-figma__v--bold {
  font-weight: var(--leyu-font-weight-semibold);
}

.txn-receipt-figma__v--medium {
  font-weight: var(--leyu-font-weight-medium);
}

.txn-receipt-figma__v--ref {
  font-size: var(--leyu-font-size-sm);
}

.txn-receipt-figma__accent {
  color: var(--leyu-primary);
}

.txn-receipt-figma__subhead {
  font-weight: var(--leyu-font-weight-semibold);
  font-size: var(--leyu-font-size-base);
  margin: 0 0 var(--leyu-space-xs);
  color: var(--leyu-text);
}

.txn-receipt-figma__foot {
  font-size: var(--leyu-font-size-sm);
  color: var(--leyu-text-muted);
  line-height: var(--leyu-line-height-normal);
  margin: 0;
  text-align: center;
}

/* ========== Desktop game hub (Leyu light mint + Salgon layout) ========== */
.top-games-section.leyu-desktop-only {
  background: #F8FEFA;
  color: #1a1a1a;
}

.leyu-desk-hub-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

.leyu-desk-hub-container>.section-title {
  text-align: center;
  margin-bottom: 28px;
}

.leyu-desk-hub-section:not(.is-active) {
  display: none !important;
}

.leyu-desk-hub-section.is-active {
  display: block !important;
}

.leyu-desk-figma-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}

.leyu-desk-cat-tab {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 25px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
  background: linear-gradient(180deg, #FFF 5.67%, #E5FFEC 73.94%, #FFF 100%);
  border: 1px solid #eee;
  box-shadow: -5px -6px 10px 0 rgba(255, 255, 255, 0.70), 5px 6px 10px 0 rgba(180, 194, 227, 0.50);
  cursor: pointer;
  font-family: inherit;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.leyu-desk-cat-tab__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.leyu-desk-cat-tab__icon--active {
  display: none;
}

.leyu-desk-cat-tab.is-active .leyu-desk-cat-tab__icon--normal {
  display: none;
}

.leyu-desk-cat-tab.is-active .leyu-desk-cat-tab__icon--active {
  display: block;
}

.leyu-desk-cat-tab__label {
  line-height: 1.2;
}

.leyu-desk-cat-tab:hover {
  color: #1a1a1a;
  background: linear-gradient(180deg, #FFF 5.67%, #D8FFE6 73.94%, #FFF 100%);
}

.leyu-desk-cat-tab.is-active {
  color: #fff;
  background: linear-gradient(354deg, var(--leyu-primary) 1.96%, var(--leyu-primary-light) 98.3%);
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(2, 180, 87, 0.28);
}

.leyu-desk-pills-scroll {
  min-width: 0;
  flex: 1 1 auto;
}

.leyu-desk-pills-inner {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.leyu-desk-pills-inner::-webkit-scrollbar {
  height: 4px;
}

.leyu-desk-pills-inner::-webkit-scrollbar-thumb {
  background: rgba(2, 180, 87, 0.28);
  border-radius: 4px;
}

.leyu-desk-search-wrap {
  position: relative;
  min-width: 200px;
  max-width: 280px;
  flex: 0 0 240px;
}

.leyu-desk-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: rgba(53, 64, 96, 0.45);
  pointer-events: none;
}

.leyu-desk-search-input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  border-radius: 999px;
  border: 1px solid #e5eaf2;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(180, 194, 227, 0.35);
}

.leyu-desk-search-input::placeholder {
  color: rgba(53, 64, 96, 0.45);
}

.leyu-desk-provider-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1200px) {
  .leyu-desk-provider-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.leyu-desk-provider-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e8eef5;
  box-shadow: 0 4px 12px rgba(180, 194, 227, 0.28);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.leyu-desk-provider-card:hover:not(.leyu-desk-provider-card--disabled) {
  background: #f7fffa;
  border-color: rgba(2, 180, 87, 0.35);
}

.leyu-desk-provider-card--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.leyu-desk-provider-logo-wrap {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f6fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.leyu-desk-provider-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% center;
}

.leyu-desk-provider-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #354060;
}

.leyu-desk-provider-card.is-active {
  border-color: rgba(2, 180, 87, 0.75);
  background: linear-gradient(180deg, #fff 0%, #e8fff2 100%);
  box-shadow: 0 0 0 1px rgba(2, 180, 87, 0.28), 0 6px 14px rgba(2, 180, 87, 0.18);
}

.leyu-desk-provider-card.is-active .leyu-desk-provider-name {
  color: var(--leyu-primary-dark);
}

.leyu-desk-provider-games-panel:not(.is-active) {
  display: none !important;
}

.leyu-desk-figma-game-grid-wrap[data-leyu-search-active="1"] .leyu-desk-figma-game-cell.leyu-desk-search-cell-hide {
  display: none !important;
}

.leyu-desk-figma-game-grid-wrap[data-leyu-search-active="1"] .leyu-desk-game-pagination {
  display: none !important;
}

.leyu-desk-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 254, 250, 0.72);
  border-radius: 12px;
}

.leyu-desk-loading-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(2, 180, 87, 0.2);
  border-top-color: var(--leyu-primary);
  animation: leyu-desk-spin 0.75s linear infinite;
}

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

.leyu-desk-figma-game-grid {
  display: grid;
  column-gap: 12px;
  row-gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1200px) {
  .leyu-desk-figma-game-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .leyu-desk-figma-game-grid {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

.leyu-desk-figma-game-cell {
  min-width: 0;
}

.leyu-figma-game-thumb.game_item {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  background: #eef3f8;
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(180, 194, 227, 0.35);
}

.leyu-figma-game-thumb .game_art_bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.leyu-desk-game-hub .game_tag {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(2, 180, 87, 0.92);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
}

.leyu-desk-figma-game-cell .leyu-game-card-title {
  margin-top: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #354060;
  line-height: 1.25;
  text-align: center;
}

.leyu-desk-provider-games-empty,
.leyu-desk-hall-lazy-placeholder {
  color: #8a93a8 !important;
}

.leyu-desk-game-pagination {
  margin-top: 2.25rem;
  gap: 8px;
}

.leyu-desk-pg-nav {
  box-sizing: border-box;
  height: 30px;
  min-width: 28px;
  padding: 1px;
  border: 1px solid var(--leyu-primary);
  border-radius: 4px;
  background: transparent;
  color: var(--leyu-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.leyu-desk-pg-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.leyu-desk-pg-nav:not(:disabled):hover {
  background: rgba(2, 180, 87, 0.12);
}

.leyu-desk-pg-pages {
  gap: 8px;
}

.leyu-desk-pg-num {
  box-sizing: border-box;
  height: 30px;
  min-width: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 4px;
  background: #eef3f8;
  color: #555e76;
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
  flex-shrink: 0;
}

.leyu-desk-pg-num.is-active {
  background: linear-gradient(354deg, var(--leyu-primary) 1.96%, var(--leyu-primary-light) 98.3%);
  color: #fff;
}

.leyu-desk-pg-num:not(.is-active):hover {
  color: var(--leyu-primary-dark);
}

.leyu-desk-pg-ellipsis {
  color: #8a93a8;
  font-size: 12px;
  line-height: 30px;
  padding: 0 2px;
  user-select: none;
  flex-shrink: 0;
}

.leyu-desk-provider-games-empty {
  min-height: 80px;
}

/* Register phone (SMS module country code) + OTP modal */
.register-phone-wrap .register-cc-select,
.register-phone-wrap .sms-country-cc-select {
  border: none;
  background: transparent;
  color: #00d084;
  font-weight: 500;
  margin-right: 8px;
  padding: 0 8px 0 0;
  border-right: 1px solid rgba(0, 208, 132, 0.45);
  border-radius: 0;
  outline: none;
  width: auto;
  min-width: 4.5rem;
  max-width: 7.5rem;
  box-shadow: none;
  flex: 0 0 auto;
}

.register-phone-wrap .register-cc-select option,
.register-phone-wrap .sms-country-cc-select option {
  color: #222;
  background: #fff;
}

.register-phone-wrap .sms-country-cc-static {
  color: #00d084;
  font-weight: 500;
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid rgba(0, 208, 132, 0.45);
  white-space: nowrap;
  flex: 0 0 auto;
}

.register-phone-wrap .register-phone-input {
  flex: 1 1 auto;
  min-width: 0;
}

#reg_otp_inputs .reg-otp-d {
  width: 2.5rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

#reg_otp_resend_link.is-active {
  color: #1cb565;
  pointer-events: auto;
}

#reg_otp_resend_link:not(.is-active) {
  color: #666;
  pointer-events: none;
}

/* Hall GSC GE gametype filter */
.hall-gametype-filter__label {
  font-size: 13px;
  color: #666;
}

.hall-gametype-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hall-gametype-tab {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  color: #333;
}

.hall-gametype-tab.is-active {
  border-color: #1cb565;
  background: #1cb565;
  color: #fff;
}

/* Desktop dashboard right widgets: recent bets + bank manage */
@media (min-width: 992px) {
  .desktop-sidebar-right .d-widget-body.has-list {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 8px 12px 14px;
  }

  .d-widget-bet-item + .d-widget-bet-item,
  .d-widget-bank-row + .d-widget-bank-row {
    border-top: 1px solid #f2f2f2;
  }

  .d-widget-bet-item {
    padding: 10px 4px;
  }

  .d-widget-bet-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
  }

  .d-widget-bet-title {
    font-size: 12px;
    font-weight: 600;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .d-widget-bet-wl {
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
  }

  .d-widget-bet-wl.win {
    color: #0fa84c;
  }

  .d-widget-bet-wl.lose {
    color: #e54d4d;
  }

  .d-widget-bet-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: #999;
  }

  .d-widget-bet-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .d-widget-bank-row {
    padding: 10px 4px;
  }

  .d-widget-bank-name {
    font-size: 13px;
    font-weight: 600;
    color: #222;
  }

  .d-widget-bank-acc {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12px;
    color: #555;
  }

  .d-widget-bank-view {
    border: 0;
    background: transparent;
    color: #999;
    padding: 0;
    line-height: 1;
    cursor: pointer;
  }

  .d-widget-bank-holder {
    margin-top: 4px;
    font-size: 11px;
    color: #999;
  }

  .d-widget-bank-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: #666;
    text-decoration: none;
  }

  .d-widget-add-link {
    cursor: pointer;
  }
}

/* ========== Profile / Mobile bank slide cards (Figma 1498:5022) ========== */
.d-profile-bank-card {
  box-shadow: 0 4px 8px rgba(152, 161, 182, 0.04);
}

.d-profile-bank-card .d-card-body {
  padding: 16px 24px;
}

.d-profile-bank-title {
  font-size: 16px;
  line-height: 28px;
  color: #2b3143;
  margin-bottom: 12px;
  font-weight: 400;
}

.d-profile-bank-count {
  font-weight: 400;
}

.d-profile-bank-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.d-profile-bank-track::-webkit-scrollbar {
  height: 4px;
}

.d-profile-bank-track::-webkit-scrollbar-thumb {
  background: rgba(108, 123, 168, 0.35);
  border-radius: 4px;
}

.d-profile-bank-add,
.d-profile-bank-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  animation: dProfileBankIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--bank-stagger, 0) * 60ms);
}

.d-profile-bank-add {
  width: 226px;
  min-height: 102px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(to top, #d0d2db, #e6e9f3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
}

.d-profile-bank-add:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 18px rgba(108, 123, 168, 0.18);
}

.d-profile-bank-add:active {
  transform: scale(0.97, 1.03);
}

.d-profile-bank-add-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.d-profile-bank-add-icon {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

.d-profile-bank-add-text {
  font-size: 14px;
  line-height: 22px;
  color: #6c7ba8;
}

.d-profile-bank-add-sub {
  margin-top: 8px;
  font-size: 12px;
  line-height: 19px;
  color: #6c7ba8;
}

.d-profile-bank-item {
  width: 180px;
  position: relative;
}

.d-profile-bank-chip-card {
  position: relative;
  width: 100%;
  height: 100px;
  border-radius: 8px;
  border: 0.5px solid #e1f5ec;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 240ms ease;
}

.d-profile-bank-chip-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}

.d-profile-bank-item.is-banking .d-profile-bank-chip-card {
  background: linear-gradient(134deg, #f7ffed 0%, #71e79a 100%);
}

.d-profile-bank-item.is-crypto .d-profile-bank-chip-card {
  background: linear-gradient(134deg, #fdfff8 0%, #dbffdc 100%);
}

.d-profile-bank-chip-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 208, 125, 0.18);
}

.d-profile-bank-chip-card:hover::before {
  animation: dProfileBankShine 700ms ease forwards;
}

.d-profile-bank-del {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 6px;
  background: #e8e8e8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.d-profile-bank-del img {
  width: 7px;
  height: 7px;
  display: block;
}

.d-profile-bank-del:hover {
  background: #ffebee;
  transform: scale(1.15);
}

.d-profile-bank-chip-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.d-profile-bank-name {
  font-size: 8px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: 0.24px;
  line-height: 12px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d-profile-bank-chip {
  width: 19px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 2px;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  background: linear-gradient(134deg, #e0ccca 0%, #c4a4a4 100%);
  position: relative;
}

.d-profile-bank-chip::before,
.d-profile-bank-chip::after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
}

.d-profile-bank-chip::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
}

.d-profile-bank-chip::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
}

.d-profile-bank-acc {
  font-family: Consolas, Monaco, monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: #000;
  text-shadow: 0.5px 0.5px 0 #fff;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d-profile-bank-chip-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.d-profile-bank-holder-label {
  font-size: 5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #555;
  line-height: 7px;
}

.d-profile-bank-holder-value {
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
  color: #555;
  line-height: 10px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d-profile-bank-uni {
  width: 12px;
  height: 12px;
  display: block;
  flex: 0 0 auto;
  opacity: 0.85;
}

.d-profile-bank-item.is-new .d-profile-bank-chip-card {
  animation: dProfileBankPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dProfileBankIn {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes dProfileBankShine {
  to {
    transform: translateX(140%) skewX(-20deg);
  }
}

@keyframes dProfileBankPop {
  0% {
    transform: scale(0.9);
    opacity: 0.4;
  }
  70% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mobile bankaccount: vertical slide track */
@media (max-width: 1024px) {
  .bank-content--slide {
    padding-bottom: 24px;
  }

  .mobile-bank-slide-title {
    margin-bottom: 12px;
  }

  .mobile-bank-track {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(62vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px 12px;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-bank-track .d-profile-bank-add,
  .mobile-bank-track .d-profile-bank-item {
    width: 100%;
    max-width: 100%;
    scroll-snap-align: start;
    animation-name: dProfileBankInY;
  }

  .mobile-bank-track .d-profile-bank-chip-card {
    height: 110px;
    padding: 14px 16px;
  }

  .mobile-bank-track .d-profile-bank-name {
    font-size: 12px;
    line-height: 18px;
    max-width: 70%;
  }

  .mobile-bank-track .d-profile-bank-acc {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .mobile-bank-track .d-profile-bank-holder-label {
    font-size: 10px;
    line-height: 14px;
  }

  .mobile-bank-track .d-profile-bank-holder-value {
    font-size: 13px;
    line-height: 18px;
    max-width: 200px;
  }

  .mobile-bank-track .d-profile-bank-chip {
    width: 28px;
    height: 20px;
  }

  .mobile-bank-track .d-profile-bank-del {
    width: 20px;
    height: 20px;
    top: 8px;
    right: 8px;
    border-radius: 10px;
  }

  .mobile-bank-track .d-profile-bank-del img {
    width: 10px;
    height: 10px;
  }

  .mobile-bank-track .d-profile-bank-uni {
    width: 20px;
    height: 20px;
  }

  .mobile-bank-track .d-profile-bank-add {
    min-height: 96px;
  }
}

@keyframes dProfileBankInY {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .d-profile-bank-add,
  .d-profile-bank-item,
  .d-profile-bank-chip-card,
  .d-profile-bank-del,
  .d-profile-bank-item.is-new .d-profile-bank-chip-card {
    animation: none !important;
    transition: none !important;
  }

  .d-profile-bank-chip-card::before {
    display: none;
  }
}

/* Desktop bankaccount page: banking vs crypto tone */
.bank-card.is-banking {
  background: linear-gradient(134deg, #f7ffed 0%, #71e79a 100%);
}

.bank-card.is-crypto {
  background: linear-gradient(134deg, #fdfff8 0%, #dbffdc 100%);
}