/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; max-width: 100vw; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #fff;
  background-image: url('/images/homeban/bg-beach2.jpg');
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color:#666;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
  pointer-events: none;
  z-index: 0;
}

/* Remove background for specific pre-login pages */
/* Target pages with these specific sections using :has() selector */
body:has(.about-hero):not(.dashboard-body),
body:has(.about-detail):not(.dashboard-body),
body:has(.referral-hero):not(.dashboard-body):has(main > section.referral-hero),
body:has(.faq-hero):not(.dashboard-body) {
  background: #fff !important;
  background-image: none !important;
}

body:has(.about-hero):not(.dashboard-body)::before,
body:has(.about-detail):not(.dashboard-body)::before,
body:has(.referral-hero):not(.dashboard-body):has(main > section.referral-hero)::before,
body:has(.faq-hero):not(.dashboard-body)::before {
  display: none !important;
}

/* Fallback: Add no-bg-page class to body tag in HTML if :has() is not supported */
body.no-bg-page {
  background: #fff !important;
  background-image: none !important;
}

body.no-bg-page::before {
  display: none !important;
}

/* Remove background for specific dashboard pages */
body.dashboard-body[data-view="about"],
body.dashboard-body[data-view="membership"],
body.dashboard-body[data-view="team"],
body.dashboard-body[data-view="faqs"] {
  background: #fff;
  background-image: none;
}

body.dashboard-body[data-view="about"]::before,
body.dashboard-body[data-view="membership"]::before,
body.dashboard-body[data-view="team"]::before,
body.dashboard-body[data-view="faqs"]::before {
  display: none;
}

/* Ensure all dashboard pages show background except specific ones */
body.dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"]) {
  background: transparent !important;
  background-image: url('/images/homeban/bg-beach2.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

body.dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"])::before {
  display: block !important;
}

/* ---------- Promo bar ---------- */
.promo-bar{
  height: 44px;
  background:#000;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  padding: 0 16px;
  font-size: 13px;
}
.promo-text{ opacity: .95; }
.promo-link{
  color:#ffb000;
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}
.promo-link:hover{ text-decoration: underline; }

/* Mobile: Reduce promo bar size */
@media (max-width: 980px){
  .promo-bar{
    height: auto;
    min-height: 32px;
    padding: 6px 10px;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  
  .promo-text{
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    flex: 1 1 100%;
    order: 1;
  }
  
  .promo-link{
    font-size: 10px;
    padding: 2px 0;
    order: 2;
    white-space: nowrap;
  }
}

@media (max-width: 560px){
  .promo-bar{
    min-height: 28px;
    padding: 5px 8px;
    gap: 6px;
    font-size: 10px;
  }
  
  .promo-text{
    font-size: 9px;
    line-height: 1.2;
  }
  
  .promo-link{
    font-size: 9px;
  }
}

/* ---------- Header ---------- */
.site-header{
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(238, 238, 238, 0.8);
  position: relative;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.header-inner{
  height: 78px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color:#666;
  font-weight: 800;
}
.brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:#ffd400;
  display:grid;
  place-items:center;
  font-weight: 900;
}
.brand-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}
.brand-name{ font-size: 18px; letter-spacing: .2px; }

.nav{
  display:flex;
  align-items:center;
  gap: 34px;
}
.nav-link{
  text-decoration:none;
  color:#666;
  font-size: 14px;
  opacity: .9;
}
.nav-link:hover{ opacity: 1; }
.nav-link.active{ font-weight: 700; }

.header-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  position: relative;
  z-index: 101;
}

/* Pre-login header: fluid scaling - nav size follows viewport */
.site-header .nav-link{
  font-size: clamp(10px, 1.2vw + 10px, 14px);
  padding: clamp(2px, 0.4vw + 2px, 6px) clamp(4px, 1vw + 4px, 12px);
}
.site-header .nav{
  gap: clamp(6px, 1.2vw + 6px, 34px);
}

/* Ensure main content is above background */
main, .content-section, .dashboard-body .content {
  position: relative;
  z-index: 1;
}

/* Ensure cards and content blocks have proper background */
.dashboard-body .workspace-card,
.dashboard-body .content-card,
.dashboard-body .tier-card,
.dashboard-body .about-feature-card,
.dashboard-body .faq-accordion-card,
.site-header,
.dashboard-body .topbar {
  position: relative;
  z-index: 10;
}

/* Ensure modals and overlays are above everything */
.modal,
.dashboard-body .modal-overlay {
  position: relative;
  z-index: 1000;
}

/* ============================================================
   🎨 DASHBOARD - Clean, Professional Design (Like Pre-Login)
   ============================================================ */
.dashboard-body{
  /* Design Tokens - Match Pre-Login Style */
  --dash-bg: #fff;
  --dash-card: #ffffff;
  --dash-border: #eee;
  --dash-muted: #666;
  --dash-dark: #666;
  --dash-accent: #1d4ed8;
  --dash-accent-soft: rgba(29, 78, 216, 0.1);
  
  /* Layout Variables */
  --topbar-height: 78px;
  --sidebar-expanded: 240px;
  --sidebar-collapsed: 70px;
  --sidebar-current: var(--sidebar-expanded);
  --sidebar-base: var(--sidebar-collapsed);
  
  /* Transitions */
  --transition: 0.2s ease;
  
  /* Base Styles - Flexbox Layout (More Reliable) */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--dash-dark);
  position: relative;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Set background for dashboard pages - transparent for pages with travel background, white for specific pages */
.dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"]) {
  background: transparent !important;
}

.dashboard-body[data-view="about"],
.dashboard-body[data-view="membership"],
.dashboard-body[data-view="team"],
.dashboard-body[data-view="faqs"] {
  background: var(--dash-bg) !important;
}


/* Desktop baseline: fixed sidebar width never shifts content */
@media (min-width: 901px){
  .dashboard-body{
    --sidebar-base: var(--sidebar-collapsed);
  }

  .dashboard-body .content,
  .dashboard-body main.content{
    padding-left: calc(22px + var(--sidebar-base));
    margin-left: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .dashboard-body .topbar .header-inner{
    padding-left: calc(22px + var(--sidebar-base));
    margin-left: 0 !important;
  }

  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner{
    padding-left: calc(22px + var(--sidebar-base));
  }

  .dashboard-body .page-image-strip{
    margin-left: -22px;
    margin-right: -22px;
    width: calc(100% + 44px);
    max-width: calc(100vw - var(--sidebar-base));
  }
}

.dashboard-body.sidebar-collapsed{
  --sidebar-current: var(--sidebar-collapsed);
}

/* ============================================================
   📱 SIDEBAR - Clean & Simple
   ============================================================ */
.dashboard-body .sidebar{
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid var(--dash-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: var(--topbar-height);
  bottom: 0;
  width: var(--sidebar-current);
  height: calc(100vh - var(--topbar-height));
  z-index: 9;
  transition: width var(--transition);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.dashboard-body.sidebar-collapsed .sidebar{
  width: var(--sidebar-current);
}

.dashboard-body.sidebar-peek .sidebar{
  width: var(--sidebar-expanded);
}

.dashboard-body .sidebar-top{
  display: none;
}

.dashboard-body .sidebar-toggle-in,
.dashboard-body #sidebar-toggle{
  display: grid;
  place-items: center;
  visibility: visible;
  opacity: 1;
}

.dashboard-body .sidebar .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--dash-dark);
}

.dashboard-body .sidebar .brand-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--dash-accent);
  color: #666;
  display: grid;
  place-items: center;
  font-weight: 800;
}
.dashboard-body .sidebar .brand-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* Icon Button - Clean Style */
.dashboard-body .icon-button{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  visibility: visible;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color: #666;
}

.dashboard-body .icon-button.sidebar-toggle-in,
.dashboard-body .icon-button#sidebar-toggle {
  display: grid;
  visibility: visible;
  opacity: 1;
}

.dashboard-body .icon-button:hover{
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.dashboard-body .sidebar-toggle-in,
.dashboard-body #sidebar-toggle{
  display: grid;
}

/* Sidebar Navigation - Clean Style */
.dashboard-body .sidebar .nav{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px;
  flex: 1;
  align-items: stretch;
}

.dashboard-body.sidebar-collapsed .sidebar .nav{
  padding: 16px 8px;
  align-items: stretch;
}

.dashboard-body .sidebar .nav-link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #666;
  font-weight: 600;
  font-size: 14px;
  transition: background-color var(--transition);
  min-height: 44px;
  text-align: left;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 100%;
}

.dashboard-body .sidebar .nav-link .nav-text{
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  flex: 1;
}

.dashboard-body.sidebar-collapsed .sidebar .nav-link{
  justify-content: flex-start;
  padding: 12px;
  gap: 0;
  padding-left: 12px;
  width: 100%;
}

.dashboard-body.sidebar-collapsed .sidebar .nav-icon{
  margin: 0;
  margin-left: 0;
}

.dashboard-body .sidebar .nav-link:hover{
  background: rgba(0, 0, 0, 0.05);
}

.dashboard-body .sidebar .nav-link:hover .nav-icon{
  filter: grayscale(0%) brightness(0.6);
  color: #666;
}

.dashboard-body .sidebar .nav-link.active{
  background: rgba(0, 0, 0, 0.06);
  color: #666;
  font-weight: 700;
}

.dashboard-body .sidebar .nav-link.active .nav-icon{
  color: #666;
  filter: grayscale(0%) brightness(0.6);
}

.dashboard-body .nav-icon{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #666;
  flex-shrink: 0;
  min-width: 24px;
  transition: color var(--transition), filter var(--transition);
  filter: grayscale(100%) brightness(0.5);
}

.dashboard-body .nav-text{
  white-space: nowrap;
  transition: opacity var(--transition), max-width var(--transition), visibility var(--transition);
  font-size: 14px;
  color: #666;
  text-align: left;
  opacity: 1;
  max-width: 200px;
  overflow: hidden;
  display: inline-block;
  margin-left: 0;
  padding-left: 0;
  visibility: visible;
}

.dashboard-body.sidebar-collapsed .nav-text{
  opacity: 0;
  max-width: 0;
  width: 0;
  margin: 0;
  padding: 0;
  visibility: hidden;
  display: none;
}

.dashboard-body.sidebar-peek .nav-text{
  opacity: 1;
  max-width: 200px;
  width: auto;
  visibility: visible;
  display: inline-block;
}

/* ============================================================
   🔝 TOPBAR - Clean Header Like Pre-Login
   ============================================================ */
.dashboard-body .topbar{
  background: #fff;
  border-bottom: 1px solid var(--dash-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--topbar-height);
  height: var(--topbar-height);
  padding: 0;
  width: 100%;
}

.dashboard-body .topbar.header-hidden .header-inner{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity var(--transition), transform var(--transition);
}

.dashboard-body .topbar.header-hidden .topbar-left{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* 移动端 display:contents 时，需显式隐藏 nav 和 header-actions，往下滑消失、往上滑出现 */
@media (max-width: 980px){
  .dashboard-body .topbar.header-hidden .top.nav,
  .dashboard-body .topbar.header-hidden .header-actions{
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .dashboard-body .topbar.header-hidden .top.nav{
    max-height: 0;
    padding-top: 0;
    margin-top: 0;
    overflow: hidden;
    border-top-width: 0;
  }
}

.dashboard-body .topbar .header-inner{
  max-width: 1320px;
  width: 100%;
  padding: 0 22px;
  padding-left: calc(22px + var(--sidebar-current));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex: 1;
  margin: 0 auto;
  margin-left: 0;
  transition: padding-left var(--transition), opacity var(--transition), transform var(--transition);
  position: relative;
  z-index: 31;
  box-sizing: border-box;
}

.dashboard-body.sidebar-collapsed .topbar .header-inner{
  padding-left: calc(22px + var(--sidebar-current));
}

.dashboard-body .top.nav{
  display: flex;
  align-items: center;
  gap: 34px;
  position: relative;
  z-index: 32;
}

.dashboard-body .top-link{
  text-decoration: none;
  color: #666;
  font-size: 14px;
  opacity: 0.9;
  transition: opacity var(--transition);
  position: relative;
  z-index: 33;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}

.dashboard-body .top-link:hover{
  opacity: 1;
}

.dashboard-body .top-link.active{
  font-weight: 700;
  opacity: 1;
}

.dashboard-body .topbar-left{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 22px;
  flex-shrink: 0;
  z-index: 31;
  position: relative;
}

.dashboard-body .topbar .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #666;
  font-weight: 800;
}

.dashboard-body .topbar .brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffd400;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.dashboard-body .topbar .brand-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.dashboard-body .topbar .brand-name{
  font-size: 18px;
  letter-spacing: 0.2px;
}

.dashboard-body .topbar .icon-button{
  flex-shrink: 0;
  border: 1px solid var(--dash-border);
  background: #fff;
}

.dashboard-body .topbar .icon-button#sidebar-toggle{
  position: relative;
  z-index: 32;
}

.dashboard-body .topbar .icon-button#sidebar-toggle:hover{
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.dashboard-body .header-actions--spacer{
  flex: 1;
}

.dashboard-body .topbar-profile{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.dashboard-body .topbar-avatar-circle{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

/* ============================================================
   📄 CONTENT AREA - Professional Layout, Perfect Width
   ============================================================ */
.dashboard-body .content,
.dashboard-body main.content{
  flex: 1 0 auto;
  padding: 30px 22px 40px;
  padding-left: calc(22px + var(--sidebar-current));
  margin-top: var(--topbar-height);
  margin-left: 0;
  margin-right: 0;
  transition: padding-left var(--transition);
  text-align: left;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-height));
}

.dashboard-body.sidebar-collapsed .content,
.dashboard-body.sidebar-collapsed main.content{
  padding-left: calc(22px + var(--sidebar-current));
  width: 100%;
  max-width: 100%;
}

/* Content Alignment - Force Left Alignment */
.dashboard-body .content * {
  text-align: left;
}

.dashboard-body .content > * {
  margin-left: 0;
  margin-right: auto;
}

/* Ensure all containers are left-aligned */
.dashboard-body .content-header,
.dashboard-body .dashboard-hero,
.dashboard-body .workspace-grid,
.dashboard-body .hero-card,
.dashboard-body .hero-actions,
.dashboard-body .workspace-card,
.dashboard-body .content-card {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* Force left alignment for all text elements */
.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body p,
.dashboard-body span,
.dashboard-body div {
  text-align: left;
}

/* Grid and flex containers */
.dashboard-body .workspace-grid,
.dashboard-body .dashboard-hero,
.dashboard-body .hero-grid {
  justify-items: start;
  align-items: start;
}

/* Button Alignment - All Left-Aligned */
.dashboard-body button,
.dashboard-body .btn,
.dashboard-body a.btn {
  text-align: left;
  justify-content: flex-start;
}

/* FAQ toggle: keep + centered (override button left-align) */
.dashboard-body .faq-toggle {
  text-align: center;
  justify-content: center;
}

.dashboard-body .hero-actions .btn-dark,
.dashboard-body .hero-actions .btn-outline-light {
  text-align: left;
  justify-content: flex-start;
}

.dashboard-body .dashboard-footer,
.dashboard-body .site-footer{
  width: 100%;
  margin-left: 0;
  margin-top: auto;
  margin-right: 0;
  padding-left: var(--sidebar-current);
  transition: padding-left var(--transition);
  background: #000 !important;
  color: #fff !important;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-top: 74px;
  padding-bottom: 52px;
  padding-right: 0;
  flex-shrink: 0;
  order: 999;
}

.dashboard-body .site-footer:not(.dashboard-footer){
  padding-top: 74px;
  padding-bottom: 52px;
  padding-left: var(--sidebar-current);
  padding-right: 0;
}

.dashboard-body.sidebar-collapsed .dashboard-footer,
.dashboard-body.sidebar-collapsed .site-footer{
  padding-left: var(--sidebar-current);
  width: 100%;
}

/* Desktop: override footer padding to use fixed sidebar-base and ensure full width coverage */
@media (min-width: 901px){
  .dashboard-body .dashboard-footer,
  .dashboard-body .site-footer{
    padding-left: calc(22px + var(--sidebar-base)) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-1 * var(--sidebar-base)) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    left: 0 !important;
    position: relative !important;
  }
}

/* Desktop: content/header/footer use FIXED offset (sidebar-base) so sidebar expand overlays, does not push */
@media (min-width: 901px){
  .dashboard-body .content,
  .dashboard-body main.content{
    padding-left: calc(22px + var(--sidebar-base)) !important;
  }
  .dashboard-body .topbar .header-inner{
    padding-left: calc(22px + var(--sidebar-base)) !important;
  }
  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner,
  .dashboard-body .dashboard-footer,
  .dashboard-body .site-footer{
    padding-left: calc(22px + var(--sidebar-base)) !important;
  }
  .dashboard-body .dashboard-footer,
  .dashboard-body .site-footer{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-1 * var(--sidebar-base)) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    left: 0 !important;
    position: relative !important;
  }
  .dashboard-body .page-image-strip{
    margin-left: -22px !important;
    margin-right: -22px !important;
    width: calc(100% + 44px) !important;
    max-width: calc(100vw - var(--sidebar-base)) !important;
  }
  /* Ensure content sections inside main.content are centered */
  .dashboard-body .about-hero,
  .dashboard-body .membership-wrap,
  .dashboard-body .faq-hero,
  .dashboard-body .referral-hero,
  .dashboard-body .about-detail,
  .dashboard-body .about-image,
  .dashboard-body .faq-accordion-wrap,
  .dashboard-body .referral-media,
  .dashboard-body .how-section,
  .dashboard-body .how-inner{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

.dashboard-body .content-header{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  text-align: left;
  max-width: 100%;
  width: 100%;
}

.dashboard-body .content-header h1{
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dashboard-body .content-header p{
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  max-width: 640px;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.dashboard-body .dashboard-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 22px;
  margin-bottom: 26px;
  align-items: stretch;
  max-width: 100%;
  width: 100%;
}

.dashboard-body .hero-card{
  background: #fff;
  color: #666;
  border-radius: 18px;
  padding: 24px;
  border: 1px solid var(--dash-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: grid;
  gap: 12px;
  align-content: start;
}

.dashboard-body .hero-card h2{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #666;
}

.dashboard-body .hero-card p{
  margin: 0;
  color: #666;
  font-size: 14px;
  max-width: 420px;
}

.dashboard-body .hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.dashboard-body .hero-actions a{
  min-width: 160px;
  text-align: left;
  justify-content: flex-start;
}

.dashboard-body .hero-actions .btn-dark{
  background: #111;
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--transition);
}

.dashboard-body .hero-actions .btn-dark:hover{
  opacity: 0.9;
}

.dashboard-body .hero-actions .btn-outline-light{
  background: transparent;
  color: #666;
  border: 1px solid var(--dash-border);
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--transition);
}

.dashboard-body .hero-actions .btn-outline-light:hover{
  background: rgba(0, 0, 0, 0.05);
}

.dashboard-body .hero-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-body .hero-photo{
  border-radius: 18px;
  min-height: 160px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
  position: relative;
  overflow: hidden;
}

.dashboard-body .hero-photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.05), rgba(15, 23, 42, 0.35));
}

.dashboard-body .hero-photo--primary{
  background-image: url("/images/homeban/banner2.jpg");
}

.dashboard-body .hero-photo--secondary{
  background-image: url("/images/top/top1.jpg");
}

.dashboard-body .hero-photo--tertiary{
  background-image: url("/images/top/top2.jpg");
}

.dashboard-body .hero-photo--quaternary{
  background-image: url("/images/homeban/banner3.jpg");
}

.dashboard-body .content-card{
  background: var(--dash-card);
  border-radius: 20px;
  padding: 24px;
  border: 1px solid var(--dash-border);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.dashboard-body .content-card,
.dashboard-body .hero-card,
.dashboard-body .summary-card{
  backdrop-filter: blur(12px);
}

/* Contact Us - Chat-style layout (standalone, no nav) */
.contact-page-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #3a3d42;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}
.contact-chat-main {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: #3a3d42;
  padding: 40px 32px;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}
.contact-chat-card {
  max-width: 520px;
  text-align: left;
}
.contact-chat-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.contact-chat-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}
.contact-chat-greeting {
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}
.contact-chat-lead {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}
.contact-chat-text {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.contact-chat-text:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .contact-chat-main {
    padding: 24px 20px;
  }
  .contact-chat-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }
  .contact-chat-greeting {
    font-size: 28px;
  }
  .contact-chat-lead,
  .contact-chat-text {
    font-size: 14px;
  }
}

.dashboard-body .muted{
  color: var(--dash-muted);
}

.dashboard-body .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.7);
}

.dashboard-body .pill.secure{
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  color: #166534;
}

.dashboard-body .pill.note{
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1e3a8a;
}

.dashboard-body .inline-message{
  margin-top: 14px;
  color: var(--dash-muted);
  font-size: 14px;
}

.dashboard-body .inline-message.success-message{
  color: #15803d;
}

.dashboard-body .auth-form{
  display: grid;
  gap: 14px;
}

.dashboard-body .auth-form label{
  display: grid;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.dashboard-body .auth-form input{
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: #fff;
}

.dashboard-body .auth-form input:focus{
  border-color: rgba(37, 99, 235, 0.6);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.dashboard-body .auth-form button,
.dashboard-body .summary-action button{
  border: 0;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  background: #111;
  color: #fff;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.dashboard-body .auth-form button:hover,
.dashboard-body .summary-action button:hover{
  opacity: 0.92;
}

.dashboard-body .auth-form button:disabled,
.dashboard-body .summary-action button:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.dashboard-body .summary-action button{
  width: 100%;
}

.dashboard-body .ghost{
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  color: #666;
  box-shadow: none;
}

.dashboard-body .ghost:hover{
  background: rgba(148, 163, 184, 0.12);
}

/* ============================================================
   📊 WORKSPACE CARDS - Professional, Unified Design, Same Size
   ============================================================ */
.dashboard-body .workspace-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 100%;
  width: 100%;
}

.dashboard-body .workspace-grid--stack{
  grid-template-columns: repeat(3, 1fr);
  max-width: 100%;
}

.dashboard-body .workspace-card{
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  height: 110px;
  min-height: 110px;
  max-height: 110px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  width: 100%;
}

.dashboard-body .workspace-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}


.dashboard-body .workspace-card > div:first-child{
  flex: 1;
  min-width: 0;
}

.dashboard-body .workspace-label{
  margin: 0 0 8px;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}

.dashboard-body .workspace-value{
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  color: #666;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.dashboard-body .workspace-subtitle{
  margin: 0;
  color: #777;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}

.dashboard-body .workspace-icon{
  display: none;
}

.dashboard-body .modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.dashboard-body .modal.show{
  display: flex;
}

.dashboard-body .modal-card{
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  width: min(420px, 90vw);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
}

.dashboard-body .modal-card h3{
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

.dashboard-body .modal-card p{
  margin: 0 0 20px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.dashboard-body .modal-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* Logout modal button styles */
.dashboard-body .modal-actions button.ghost{
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #666;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-body .modal-actions button.ghost:hover{
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.dashboard-body .modal-actions button.ghost:active{
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.dashboard-body .modal-actions #confirm-logout{
  background: #dc2626;
  border: 1px solid #dc2626;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.dashboard-body .modal-actions #confirm-logout:hover{
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
  transform: translateY(-1px);
}

.dashboard-body .modal-actions #confirm-logout:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

.dashboard-body .search-pill,
.dashboard-body .history-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}

.dashboard-body .search-layout{
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.dashboard-body .search-card{
  display: grid;
  gap: 16px;
}

.dashboard-body .photo-carousel{
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 12px;
}

.dashboard-body .carousel-control{
  height: 42px;
  width: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

.dashboard-body .carousel-frame{
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  display: grid;
  place-items: center;
}

.dashboard-body .carousel-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dashboard-body .image-placeholder{
  color: #6b7280;
}

.dashboard-body .booking-header h2{
  margin: 0 0 6px;
}

.dashboard-body .score{
  margin: 0;
  font-weight: 600;
}

.dashboard-body .search-summary{
  display: grid;
  gap: 14px;
}

.dashboard-body .summary-card{
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--dash-border);
  padding: 16px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 10px;
}

.dashboard-body .summary-card h3{
  margin: 0;
  font-size: 16px;
}

.dashboard-body .summary-card p{
  margin: 0;
}
.dashboard-body .summary-card #return-amount{
  color: #16a34a;
  font-weight: 600;
}

.dashboard-body .summary-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.dashboard-body .summary-note{
  margin: 0;
  font-size: 12px;
}

.dashboard-body .summary-timer{
  margin: 0;
  font-size: 13px;
}
.dashboard-body .summary-timer #summary-countdown{
  color: #dc2626;
  font-weight: 600;
}

.dashboard-body .wallet-negative{
  color: #b91c1c;
}

.dashboard-body .page-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  z-index: 3000;
  backdrop-filter: blur(2px);
}

.dashboard-body .page-overlay.show{
  display: flex;
}

.dashboard-body .overlay-card{
  background: #fff;
  border-radius: 18px;
  padding: 24px 28px;
  display: grid;
  gap: 10px;
  text-align: left;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
}

.dashboard-body .spinner{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(15, 23, 42, 0.15);
  border-top-color: #0f172a;
  animation: spin 0.8s linear infinite;
  margin: 0 auto;
}

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

.dashboard-body .booking-tabs,
.dashboard-body .settings-tabs{
  display: inline-flex;
  gap: 12px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.15);
  flex-wrap: wrap;
}

.dashboard-body .booking-tab,
.dashboard-body .settings-tab{
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  color: #475569;
}

.dashboard-body .booking-tab.active,
.dashboard-body .settings-tab.active{
  background: #111827;
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.dashboard-body .booking-table,
.dashboard-body .referral-table{
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.dashboard-body .booking-history-card,
.dashboard-body .transaction-card,
.dashboard-body .withdraw-card,
.dashboard-body .bank-card,
.dashboard-body .referral-card{
  display: grid;
  gap: 18px;
}

.dashboard-body .booking-row,
.dashboard-body .referral-row{
  display: grid;
  grid-template-columns: minmax(160px, 2fr) 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 14px;
  align-items: center;
}

.dashboard-body .referral-row{
  grid-template-columns: 80px minmax(160px, 1.4fr) minmax(120px, 1fr) 0.8fr;
}

.dashboard-body .booking-header-row,
.dashboard-body .referral-row--head{
  background: rgba(15, 23, 42, 0.04);
  font-weight: 700;
}

.dashboard-body .booking-body,
.dashboard-body .transaction-body,
.dashboard-body .referral-rows{
  display: grid;
  gap: 8px;
}

.dashboard-body .booking-hotel,
.dashboard-body .transaction-hotel{
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-body .booking-hotel-name{
  font-weight: 600;
  color: #666;
}

.dashboard-body .booking-value{
  font-weight: 600;
  color: #666;
}

.dashboard-body .booking-thumb,
.dashboard-body .transaction-thumb{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 12px;
  color: #6b7280;
}

.dashboard-body .booking-thumb img,
.dashboard-body .transaction-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-body .booking-status{
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  width: fit-content;
  background: rgba(15, 23, 42, 0.08);
}

.dashboard-body .booking-status--completed{
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
}

.dashboard-body .booking-status--pending{
  background: rgba(59, 130, 246, 0.18);
  color: #1e40af;
}

.dashboard-body .booking-status--expired,
.dashboard-body .booking-status--rejected{
  background: rgba(239, 68, 68, 0.16);
  color: #991b1b;
}

.dashboard-body .booking-date,
.dashboard-body .transaction-date{
  color: #4b5563;
  font-size: 13px;
}

.dashboard-body .transaction-row{
  display: grid;
  grid-template-columns: minmax(160px, 2fr) 0.8fr 1fr;
  gap: 16px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 14px;
  align-items: center;
}

.dashboard-body .transaction-table--withdrawals .transaction-row{
  grid-template-columns: minmax(150px, 2fr) 0.8fr 0.8fr 1fr;
}

.dashboard-body .transaction-table--earnings .transaction-row{
  grid-template-columns: minmax(160px, 2fr) 1.2fr 0.8fr 1fr;
}

.dashboard-body .transaction-table .booking-row{
  grid-template-columns: minmax(150px, 2fr) 1.2fr 0.8fr 1fr;
}

.dashboard-body .transaction-amount,
.dashboard-body .transaction-date,
.dashboard-body .referral-balance{
  text-align: right;
}

.dashboard-body .settings-card{
  display: grid;
  gap: 20px;
}

.dashboard-body .settings-panel{
  display: none;
}

.dashboard-body .settings-panel--active{
  display: grid;
  gap: 18px;
}

.dashboard-body .settings-avatar{
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-body .settings-avatar-circle{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #111827;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
}

.dashboard-body .settings-fields{
  display: grid;
  gap: 16px;
}

.dashboard-body .settings-fields label{
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.dashboard-body .settings-fields input{
  width: 100%;
}

.dashboard-body .settings-copy{
  align-items: start;
}

.dashboard-body .settings-copy-field{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 8px;
}

.dashboard-body .settings-copy-field input{
  width: 100%;
}

.dashboard-body .settings-copy-field .ghost{
  padding: 10px 12px;
  border-radius: 10px;
  height: 44px;
}

.dashboard-body .two-col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-body .settings-fields label input,
.dashboard-body .bank-form input,
.dashboard-body .withdraw-form input{
  height: 44px;
}

.dashboard-body .bank-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.dashboard-body .bank-panel{
  background: rgba(15, 23, 42, 0.03);
  border-radius: 18px;
  padding: 18px;
}

.dashboard-body .bank-panel ul{
  padding-left: 18px;
  margin: 12px 0 0;
  color: #374151;
  font-size: 13px;
  display: grid;
  gap: 6px;
}

.dashboard-body .bank-preview{
  margin-top: 16px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(15, 23, 42, 0.15);
  display: grid;
  gap: 10px;
}

.dashboard-body .bank-preview .row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-body .bank-preview .label{
  font-size: 12px;
  color: var(--dash-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.dashboard-body .bank-preview .hint{
  font-size: 12px;
  color: var(--dash-muted);
}

.dashboard-body .withdraw-card-header,
.dashboard-body .referral-card-header,
.dashboard-body .bank-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dashboard-body .withdraw-status{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-body .withdraw-status-value{
  font-weight: 700;
}

.dashboard-body .content-card.referral-card .referral-table{
  margin-top: 10px;
}

@media (max-width: 1100px){
  .dashboard-body .search-layout,
  .dashboard-body .bank-layout{
    grid-template-columns: 1fr;
  }
  .dashboard-body .dashboard-hero{
    grid-template-columns: 1fr;
  }
  .dashboard-body .content{
    padding: 24px;
  }
}

/* ============================================================
   📱 RESPONSIVE DESIGN - Mobile-First, Perfect on All Screens
   ============================================================ */

/* Tablet & Below (≤ 1024px) */
@media (max-width: 1024px){
  .dashboard-body .topbar .header-inner{
    padding: 0 20px;
  }
  
  .dashboard-body .content{
    padding: 28px 20px 40px;
  }
  
  .dashboard-body .top.nav{
    gap: 24px;
  }
}

/* ============================================================
   📱 MOBILE-FIRST RESPONSIVE DESIGN (≤ 900px)
   Modern, Professional, Touch-Optimized
   Reference: Airbnb, Booking.com mobile patterns
   ============================================================ */

/* Universal Mobile Touch Standards - Apply to ALL screens ≤ 900px */
@media (max-width: 900px){
  /* Ensure ALL interactive elements meet 44x44px touch target standard */
  .dashboard-body a,
  .dashboard-body button,
  .dashboard-body [role="button"],
  .dashboard-body input[type="button"],
  .dashboard-body input[type="submit"]{
    min-height: 44px;
    min-width: 44px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Text links exception - they can be smaller but need padding */
  .dashboard-body a:not(.btn):not(.faq-cta):not(.footer-col a):not(.top-link):not(.nav-link){
    min-height: auto;
    padding: 4px 0;
  }
}

@media (max-width: 900px){
  /* Reset sidebar - Mobile overlay pattern */
  .dashboard-body{
    --sidebar-current: 0px;
    --sidebar-base: 0px;
    --topbar-height: 90px;
    overflow-x: hidden;
  }
  
  /* Mobile: slightly smaller scale for better fit */
  .dashboard-body .content-header h1{
    font-size: 22px;
  }
  .dashboard-body .content-header p,
  .dashboard-body .content p{
    font-size: 13px;
  }
  .dashboard-body .content-card,
  .dashboard-body .hero-card{
    padding: 16px;
    gap: 14px;
  }
  .dashboard-body .hero-card h2{
    font-size: 18px;
  }
  .dashboard-body .hero-card p{
    font-size: 13px;
  }
  .dashboard-body .pill{
    font-size: 11px;
    padding: 4px 10px;
  }
  
  /* Topbar - Fixed, Full Width, Touch-Optimized */
  .dashboard-body .topbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--topbar-height);
    z-index: 100;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .dashboard-body .topbar .header-inner{
    margin-left: 0 !important;
    padding: 0 8px 0 12px !important;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
  }
  
  /* 登录后 topbar：电话版紧凑布局，grid 两行 */
  .dashboard-body .topbar{
    height: auto;
    min-height: 90px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 6px 10px 8px;
    overflow-x: visible;
    gap: 0;
  }
  
  .dashboard-body .topbar .header-inner{
    display: contents;
  }

  /* Logo、品牌名、按钮 - 与 login 前一致 */
  .dashboard-body .topbar .brand-logo{
    width: 28px;
    height: 28px;
  }
  .dashboard-body .topbar .brand-name{
    font-size: 14px;
  }
  .dashboard-body .topbar .icon-button{
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .dashboard-body .topbar .topbar-profile{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1;
    font-size: 12px;
  }
  
  .dashboard-body .topbar-left{
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
  }
  
  .dashboard-body .topbar .header-actions--spacer{
    display: none;
  }
  
  .dashboard-body .topbar .header-actions{
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
  }
  
  /* Nav 第二行，左右留白避免边缘被挤 */
  .dashboard-body .top.nav{
    --top-link-fs: 10px;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    margin-top: 6px;
    padding: 8px 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    justify-content: center;
    overflow: visible;
    box-sizing: border-box;
    order: 0;
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease;
  }
  
  .dashboard-body .top.nav .top-link{
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    padding: 4px 4px !important;
    min-height: 26px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--top-link-fs, 10px) !important;
    font-weight: 500;
    color: #444;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    text-align: center;
  }
  /* 窄屏缩写：原文 font-size:0 隐藏，::before 绝对定位覆盖显示 */
  .dashboard-body .top.nav .top-link[data-top="team"],
  .dashboard-body .top.nav .top-link[data-top="tiers"][href*="membership2"]{
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    position: relative;
  }
  .dashboard-body .top.nav .top-link[data-top="team"]::before,
  .dashboard-body .top.nav .top-link[data-top="tiers"][href*="membership2"]::before{
    content: "Team";
    font-size: var(--top-link-fs, 10px);
    font-weight: inherit;
    color: inherit;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }
  .dashboard-body .top.nav .top-link[data-top="tiers"][href*="membership2"]::before{
    content: "Member";
  }
  
  .dashboard-body .top.nav .top-link:active{
    background: rgba(0, 0, 0, 0.05);
  }
  
  .dashboard-body .top.nav .top-link.active{
    background: rgba(255, 212, 0, 0.15);
    font-weight: 700;
  }
  
  /* Sidebar - Modern Slide-in Overlay */
  .dashboard-body .sidebar{
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 85vw;
    height: calc(100vh - var(--topbar-height));
    transform: translateX(-100%);
    z-index: 99;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .dashboard-body:not(.sidebar-collapsed) .sidebar{
    transform: translateX(0);
  }
  
  /* Backdrop Overlay */
  .dashboard-body::after{
    content: "";
    position: fixed;
    inset: var(--topbar-height) 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  
  .dashboard-body:not(.sidebar-collapsed)::after{
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Prevent Scroll When Sidebar Open */
  .dashboard-body:not(.sidebar-collapsed){
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;
  }
  
  /* Sidebar Navigation - Touch-Optimized - Smaller for mobile */
  .dashboard-body .sidebar .nav{
    padding: 12px 8px;
    gap: 2px;
  }
  
  .dashboard-body .sidebar .nav-link{
    min-height: 40px;
    padding: 8px 10px;
    font-size: 13px;
    gap: 10px;
    border-radius: 8px;
    margin: 1px 4px;
  }
  
  .dashboard-body .nav-icon{
    width: 20px;
    height: 20px;
    font-size: 18px;
  }
  
  .dashboard-body .sidebar .nav-link .nav-text{
    font-size: 13px;
  }
  
  /* Content Area - Full Width, no horizontal page scroll, compact for mobile */
  .dashboard-body .content,
  .dashboard-body main.content{
    padding: 16px 14px 28px;
    padding-left: 14px !important;
    margin-left: 0 !important;
    margin-top: var(--topbar-height);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    min-height: calc(100vh - var(--topbar-height));
    position: relative;
    z-index: 2;
    pointer-events: auto;
    overflow-x: hidden;
  }

  /* Mobile: content should be full width like pre-login */
  .dashboard-body .content > *{
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure all interactive elements in content are clickable (above overlays) */
  .dashboard-body .content a,
  .dashboard-body .content button,
  .dashboard-body .content .btn,
  .dashboard-body .content [role="button"],
  .dashboard-body .content input[type="submit"],
  .dashboard-body .content input[type="button"]{
    position: relative;
    z-index: 5;
    pointer-events: auto;
    touch-action: manipulation;
  }
  
  /* Footer - Full Width, NO sidebar reserved space */
  .dashboard-body .dashboard-footer,
  .dashboard-body .site-footer,
  .dashboard-body .site-footer:not(.dashboard-footer){
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    background: #000 !important;
    color: #fff !important;
    position: relative;
    z-index: 1;
  }
  
  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner{
    padding-left: 16px !important;
    padding-right: 16px;
  }
  
  /* All Clickable Elements - Mobile Standard (44x44px minimum) */
  .dashboard-body button,
  .dashboard-body .btn,
  .dashboard-body a.btn,
  .dashboard-body .icon-button,
  .dashboard-body .faq-toggle,
  .dashboard-body .faq-cta,
  .dashboard-body .topbar-profile{
    min-width: 44px;
    min-height: 44px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .dashboard-body #sidebar-toggle{
    z-index: 102;
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Transaction / Booking tabs - single row, smaller, no wrap */
  .dashboard-body .booking-tabs,
  .dashboard-body .transaction-tabs,
  .dashboard-body .settings-tabs{
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dashboard-body .booking-tabs::-webkit-scrollbar,
  .dashboard-body .transaction-tabs::-webkit-scrollbar,
  .dashboard-body .settings-tabs::-webkit-scrollbar{
    display: none;
  }
  .dashboard-body .booking-tab,
  .dashboard-body .transaction-tab,
  .dashboard-body .settings-tab{
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  /* Transaction / Booking / Referral / Settings - card layout on mobile, no horizontal scroll */
  .dashboard-body .content-card.booking-history-card,
  .dashboard-body .content-card.transaction-card,
  .dashboard-body .content-card.withdraw-card,
  .dashboard-body .content-card.referral-card,
  .dashboard-body .content-card.settings-card{
    min-width: 0;
    width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  /* Settings - stack form on mobile, no overflow */
  .dashboard-body .settings-card .settings-tabs{
    width: 100%;
    max-width: 100%;
  }
  .dashboard-body .settings-fields label,
  .dashboard-body .settings-panel .auth-form label{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .dashboard-body .settings-copy-field{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dashboard-body .settings-copy-field input{
    min-width: 0;
  }
  .dashboard-body .settings-copy-field .ghost{
    width: 100%;
    min-height: 44px;
  }
  .dashboard-body .settings-avatar-circle{
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .dashboard-body .settings-fields,
  .dashboard-body .settings-panel--active{
    gap: 12px;
  }
  .dashboard-body .settings-fields input,
  .dashboard-body .auth-form input{
    padding: 10px 12px;
    font-size: 13px;
  }
  .dashboard-body .auth-form button,
  .dashboard-body #settings-save-profile,
  .dashboard-body .settings-fields button{
    padding: 10px 14px;
    font-size: 13px;
  }
  
  /* Hotel photo carousel - smaller on mobile, buttons overlay on image */
  .dashboard-body .photo-carousel{
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .dashboard-body .carousel-frame{
    min-height: 200px;
    aspect-ratio: 16 / 9;
    width: 100%;
    margin: 0;
    border-radius: 12px;
    position: relative;
  }
  .dashboard-body .carousel-frame img{
    object-position: center center;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .dashboard-body .photo-carousel .carousel-control{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    width: 36px;
    min-width: 36px;
    font-size: 18px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
  }
  .dashboard-body .photo-carousel .carousel-control#photo-prev{
    left: 8px;
    right: auto;
  }
  .dashboard-body .photo-carousel .carousel-control#photo-next{
    left: auto;
    right: 8px;
  }
  .dashboard-body .search-card{
    padding: 0;
    overflow: hidden;
  }
  .dashboard-body .search-card .photo-carousel{
    margin: 0;
    padding: 0 14px;
    width: 100%;
  }
  
  .dashboard-body .search-card .carousel-frame{
    margin: 0;
    width: 100%;
  }
  .dashboard-body .search-card .booking-header{
    padding: 0 14px;
  }
  .dashboard-body .search-card .inline-message{
    padding: 0 14px;
  }
  
  /* Hotel info - center aligned on mobile */
  .dashboard-body .booking-header{
    text-align: center;
  }
  .dashboard-body .booking-header h2,
  .dashboard-body .booking-header .score,
  .dashboard-body .booking-header .muted,
  .dashboard-body .booking-header p{
    text-align: center;
  }
  
  /* Bank form - more spacing on mobile, smaller inputs, less crowded */
  .dashboard-body .two-col{
    gap: 14px;
  }
  .dashboard-body .bank-form input,
  .dashboard-body .settings-fields label input{
    padding: 7px 9px;
    height: 36px;
    font-size: 12px;
  }
  .dashboard-body .bank-form label,
  .dashboard-body .auth-form label{
    font-size: 11px;
    gap: 5px;
    margin-bottom: 0;
  }
  .dashboard-body .bank-form,
  .dashboard-body .auth-form{
    gap: 12px;
  }
  .dashboard-body .booking-table,
  .dashboard-body .transaction-table,
  .dashboard-body .referral-table{
    min-width: 0;
    width: 100%;
  }
  
  /* Hide table header row on mobile (labels shown per card) */
  .dashboard-body .transaction-table .booking-header-row.transaction-header,
  .dashboard-body .booking-table .booking-header-row,
  .dashboard-body .referral-table .referral-row--head{
    display: none;
  }
  
  /* Card layout for transaction/booking/referral rows on mobile */
  .dashboard-body .transaction-body .transaction-row,
  .dashboard-body .booking-body .booking-row,
  .dashboard-body .referral-rows .referral-row{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    text-align: left;
    align-items: stretch;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    font-size: 13px;
  }
  .dashboard-body .transaction-body .transaction-row > div,
  .dashboard-body .booking-body .booking-row > div,
  .dashboard-body .referral-rows .referral-row > div{
    display: block;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .dashboard-body .transaction-body .transaction-row > div::before,
  .dashboard-body .booking-body .booking-row > div::before,
  .dashboard-body .referral-rows .referral-row > div::before{
    font-weight: 600;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .dashboard-body .transaction-table--earnings .transaction-body .transaction-row > div:nth-child(1)::before{ content: "Hotel: "; }
  .dashboard-body .transaction-table--earnings .transaction-body .transaction-row > div:nth-child(2)::before{ content: "Description: "; }
  .dashboard-body .transaction-table--earnings .transaction-body .transaction-row > div:nth-child(3)::before{ content: "Amount: "; }
  .dashboard-body .transaction-table--earnings .transaction-body .transaction-row > div:nth-child(4)::before{ content: "Date: "; }
  .dashboard-body .transaction-table--withdrawals .transaction-body .transaction-row > div:nth-child(1)::before{ content: "Description: "; }
  .dashboard-body .transaction-table--withdrawals .transaction-body .transaction-row > div:nth-child(2)::before{ content: "Status: "; }
  .dashboard-body .transaction-table--withdrawals .transaction-body .transaction-row > div:nth-child(3)::before{ content: "Amount: "; }
  .dashboard-body .transaction-table--withdrawals .transaction-body .transaction-row > div:nth-child(4)::before{ content: "Date: "; }
  .dashboard-body .transaction-table:not(.transaction-table--earnings):not(.transaction-table--withdrawals) .transaction-body .transaction-row > div:nth-child(1)::before{ content: "Description: "; }
  .dashboard-body .transaction-table:not(.transaction-table--earnings):not(.transaction-table--withdrawals) .transaction-body .transaction-row > div:nth-child(2)::before{ content: "Amount: "; }
  .dashboard-body .transaction-table:not(.transaction-table--earnings):not(.transaction-table--withdrawals) .transaction-body .transaction-row > div:nth-child(3)::before{ content: "Date: "; }
  .dashboard-body .booking-table .booking-body .booking-row > div:nth-child(1)::before{ content: "Hotel: "; }
  .dashboard-body .booking-table .booking-body .booking-row > div:nth-child(2)::before{ content: "Status: "; }
  .dashboard-body .booking-table .booking-body .booking-row > div:nth-child(3)::before{ content: "Value: "; }
  .dashboard-body .booking-table .booking-body .booking-row > div:nth-child(4)::before{ content: "Date: "; }
  .dashboard-body .booking-table .booking-body .booking-row > div:nth-child(5)::before{ content: "Details: "; }
  .dashboard-body .referral-rows .referral-row > div:nth-child(1)::before{ content: "No: "; }
  .dashboard-body .referral-rows .referral-row > div:nth-child(2)::before{ content: "Full Name: "; }
  .dashboard-body .referral-rows .referral-row > div:nth-child(3)::before{ content: "Username: "; }
  .dashboard-body .referral-rows .referral-row > div:nth-child(4)::before{ content: "Balance: "; }
  .dashboard-body .transaction-amount,
  .dashboard-body .transaction-date,
  .dashboard-body .referral-balance{
    text-align: left;
  }
  .dashboard-body .transaction-hotel{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .dashboard-body .transaction-thumb{
    width: 40px;
    height: 40px;
  }
  
  /* Cards - Horizontal 2 columns on mobile, uniform size, neat layout */
  .dashboard-body .workspace-grid,
  .dashboard-body .workspace-grid--stack{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
  }
  
  .dashboard-body .workspace-card{
    height: 95px;
    min-height: 95px;
    max-height: 95px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }
  
  .dashboard-body .workspace-card > div:first-child{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
  }
  
  .dashboard-body .workspace-value{
    font-size: 15px;
    margin: 4px 0 2px;
    line-height: 1.2;
    word-break: break-word;
  }
  .dashboard-body .workspace-label{
    font-size: 9px;
    margin: 0 0 4px;
    line-height: 1.2;
  }
  .dashboard-body .workspace-subtitle{
    font-size: 10px;
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .dashboard-body .workspace-icon{
    display: none;
  }
  
  /* Page Image Strip */
  .dashboard-body .page-image-strip{
    margin-left: -16px !important;
    margin-right: -16px !important;
    width: calc(100% + 32px) !important;
    max-width: 100vw !important;
  }

  /* Mobile: force full-width sections like pre-login */
  .dashboard-body .membership-wrap,
  .dashboard-body .about-hero,
  .dashboard-body .about-detail,
  .dashboard-body .referral-hero,
  .dashboard-body .referral-media,
  .dashboard-body .how-section,
  .dashboard-body .faq-hero,
  .dashboard-body .faq-accordion-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Mobile Portrait (≤ 640px) */
@media (max-width: 640px){
  .dashboard-body{
    --topbar-height: 90px;
  }
  
  .dashboard-body .topbar{
    min-height: 90px;
  }
  
  .dashboard-body .sidebar{
    top: var(--topbar-height);
    height: calc(100vh - var(--topbar-height));
    width: 240px;
  }
  
  .dashboard-body .topbar .header-inner{
    padding: 0 8px;
    padding-left: 8px;
  }
  
  .dashboard-body .topbar-left{
    padding-left: 8px;
    gap: 6px;
  }
  
  .dashboard-body .top.nav{
    gap: clamp(2px, 0.5vw, 6px);
    flex-wrap: nowrap;
    overflow: visible;
  }
  
  .dashboard-body .top-link{
    flex: 0 0 auto;
    padding: 3px 4px;
    font-size: 10px;
    white-space: nowrap;
  }
  
  .dashboard-body .content,
  .dashboard-body main.content{
    padding: 20px 12px 32px;
    padding-left: 12px;
  }

  .dashboard-body .content > *{
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  .dashboard-body .content-header h1{
    font-size: 24px;
  }
  
  .dashboard-body .workspace-grid,
  .dashboard-body .workspace-grid--stack{
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  
  .dashboard-body .workspace-card{
    min-height: 110px;
    padding: 18px;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
  }
  
  .dashboard-body .workspace-icon{
    display: none;
  }
  
  /* Mobile: Ensure all clickable elements are accessible */
  .dashboard-body button:not(.faq-toggle),
  .dashboard-body .btn,
  .dashboard-body a.btn,
  .dashboard-body .faq-cta {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .dashboard-body .faq-toggle {
    position: relative;
    z-index: 10;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  
  .dashboard-body .faq-row {
    min-height: 56px;
    padding: 18px 12px;
    position: relative;
    z-index: 1;
  }
  
  .dashboard-body .tier-card {
    min-height: 240px;
    padding: 20px 16px;
    position: relative;
    z-index: 1;
    pointer-events: auto;
  }
  
  .dashboard-body .footer-col a {
    min-height: 36px;
    padding: 6px 0;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .dashboard-body .topbar-profile {
    position: relative;
    z-index: 36;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .dashboard-body .nav-link {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }
  
  .dashboard-body .workspace-value{
    font-size: 18px;
  }
  
  .dashboard-body .hero-actions{
    flex-direction: column;
  }
  
  .dashboard-body .hero-actions a{
    width: 100%;
    min-width: auto;
  }
  
  .dashboard-body .icon-button{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
    position: relative;
    z-index: 40;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .dashboard-body #sidebar-toggle {
    z-index: 41;
  }
  
  .dashboard-body .topbar-profile{
    width: 40px;
    height: 40px;
    min-width: 44px;
    min-height: 44px;
  }
  
  /* About page - Mobile optimized */
  .dashboard-body .about-hero{
    grid-template-columns: 1fr;
    padding: 32px 12px 40px;
    gap: 24px;
  }
  
  .dashboard-body .about-title{
    font-size: 32px;
    line-height: 1.1;
  }
  
  .dashboard-body .about-sub{
    font-size: 14px;
    margin-top: 12px;
  }
  
  .dashboard-body .about-mission{
    font-size: 14px;
    padding-left: 16px;
    margin-top: 20px;
  }
  
  .dashboard-body .about-mission svg{
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: -4px 0 8px;
  }
  
  .dashboard-body .about-image{
    padding: 0 12px;
  }
  
  .dashboard-body .about-image-box{
    height: 240px;
    margin-bottom: -120px;
    border-radius: 12px;
  }
  
  .dashboard-body .about-detail{
    padding: 160px 0 40px;
  }
  
  .dashboard-body .about-detail-inner{
    grid-template-columns: 1fr;
    padding: 0 12px;
    gap: 28px;
  }
  
  .dashboard-body .about-detail-title{
    font-size: 26px;
    line-height: 1.2;
  }
  
  .dashboard-body .about-detail-copy{
    font-size: 14px;
    margin-top: 12px;
  }
  
  .dashboard-body .about-feature-grid{
    padding-top: 24px;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .dashboard-body .about-feature-card{
    padding: 18px;
    min-height: 130px;
  }
  
  .dashboard-body .about-stats{
    padding: 28px 12px 0;
  }
  
  .dashboard-body .about-stats-row{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .dashboard-body .about-stat-number{
    font-size: 28px;
  }
  
  .dashboard-body .about-stat-label{
    font-size: 12px;
    margin-top: 4px;
  }
  
  /* Footer - Mobile optimized */
  .dashboard-body .site-footer,
  .dashboard-body .dashboard-footer{
    padding: 40px 0 32px !important;
    margin-left: 0 !important;
    width: 100% !important;
    background: #000 !important;
    color: #fff !important;
  }
  
  .dashboard-body .footer-inner{
    padding: 0 12px;
  }
  
  .dashboard-body .footer-main{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 24px;
  }
  
  .dashboard-body .footer-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  
  .dashboard-body .footer-chat{
    width: 100%;
    justify-content: flex-start;
  }
  
  .dashboard-body .footer-col a{
    min-height: 44px;
    padding: 8px 0;
  }
}

/* Small Mobile (≤ 480px) */
/* ============================================================
   📱 SMALL MOBILE (≤ 480px) - Ultra Compact, Still Touch-Friendly
   ============================================================ */
@media (max-width: 480px){
  .dashboard-body .content-header h1{
    font-size: 22px;
  }
  
  .dashboard-body .content-header p{
    font-size: 13px;
  }
  
  .dashboard-body .hero-card{
    padding: 18px;
  }
  
  .dashboard-body .hero-card h2{
    font-size: 20px;
  }
  
  /* Navigation - Even More Compact */
  .dashboard-body .top.nav{
    gap: 0;
    padding: 0;
  }
  
  .dashboard-body .top-link{
    font-size: 11px;
    padding: 10px 10px;
    min-height: 44px;
  }
  
  /* Ensure ALL interactive elements meet touch standards */
  .dashboard-body button,
  .dashboard-body .btn,
  .dashboard-body a.btn,
  .dashboard-body .faq-toggle,
  .dashboard-body .faq-cta,
  .dashboard-body .footer-col a,
  .dashboard-body .to-top,
  .dashboard-body .icon-button,
  .dashboard-body .topbar-profile,
  .dashboard-body .nav-link{
    min-width: 44px;
    min-height: 44px;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  .dashboard-body .faq-row{
    min-height: 56px;
    padding: 14px 10px;
  }
  
  .dashboard-body .tier-card{
    padding: 16px 12px;
  }
  
  .dashboard-body .membership-title{
    font-size: 36px;
  }
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration:none;
}
.btn-outline{
  border: 1px solid #ddd;
  color:#666;
  background:#fff;
}
.btn-outline:hover{ border-color:#bbb; }

/* ---------- Search section ---------- */
.search-section{
  padding: 36px 18px 0;
}
.search-card{
  max-width: 1220px;
  margin: 0 auto;
  background:#fff;
  border: 1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
  padding: 22px 22px 20px;
}

.search-tabs{
  display:flex;
  align-items:center;
  gap: 18px;
  padding: 6px 6px 16px;
}
.tab{
  border: 0;
  background: transparent;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  color:#666;
}
.tab.active{
  background:#000;
  color:#fff;
}
.help-pill{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: 8px;
  color:#666;
  font-size: 13px;
}
.help-icon{ opacity: .75; }

/* Search form row */
.search-form{
  display:flex;
  align-items:center;
  gap: 18px;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 18px 18px;
}

.field{
  min-width: 0;
  flex: 1 1 0;
}
.field-label{
  display:block;
  font-size: 12px;
  color:#777;
  margin-bottom: 8px;
  font-weight: 600;
}
.field-control{
  display:flex;
  align-items:center;
  gap: 10px;
}
.field-icon{ opacity: .55; }

.field-input{
  width: 100%;
  border: 0;
  outline: none;
  font-size: 13px;
  color:#666;
  background: transparent;
}

.divider{
  width: 1px;
  height: 48px;
  background:#eee;
}

.search-btn{
  border: 0;
  cursor: pointer;
  background:#000;
  color:#fff;
  border-radius: 999px;
  padding: 16px 22px;
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.search-btn:hover{ opacity: .92; }

.big-gap{ height: 110px; }

/* ---------- Content section ---------- */
.content-section{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px 56px;
}
.content-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
}
.content-text h1{
  margin: 0;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -1.2px;
}
.content-text p{
  margin: 14px 0 0;
  color:#777;
  font-size: 16px;
}

/* 电脑版：Greater Stays 等叠加在背景图上的文字改为白色 */
@media (min-width: 901px){
  .content-text h1{
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  .content-text p{
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}
.content-controls{
  display:flex;
  gap: 10px;
  align-items:center;
  padding-bottom: 6px;
}
.circle-btn{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #eee;
  background:#f2f2f2;
  cursor:pointer;
  font-size: 16px;
  display:grid;
  place-items:center;
}
.circle-btn:hover{ background:#eaeaea; }

/* ---------- Cards row ---------- */
.card-row{
  margin-top: 26px;
  display:flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x mandatory;
}
.card-row::-webkit-scrollbar{ height: 10px; }
.card-row::-webkit-scrollbar-thumb{ background:#e6e6e6; border-radius: 999px; }
.card-row::-webkit-scrollbar-track{ background: transparent; }

.stay-card{
  flex: 0 0 310px;
  height: 240px;
  border-radius: 18px;
  border: 1px solid #eee;
  background:#fff;
  overflow:hidden;
  scroll-snap-align: start;
}
.stay-img{ height: 150px; width: 100%; }
.stay-body{ padding: 14px 14px 0; }

/* ---------- Placeholder shimmer ---------- */
.placeholder{
  background:
    linear-gradient(90deg,
      #f2f2f2 0%,
      #f7f7f7 40%,
      #f2f2f2 80%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
.stay-line{
  height: 14px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.stay-line.short{ width: 60%; }

@keyframes shimmer{
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Popular Destinations ---------- */
.dest-section{
  position: relative;
  background: #fbf7f3;
  border-top: 1px solid #f0ece8;
  padding: 64px 0 88px;
  overflow: hidden;
}
.dest-section::before{
  content:"";
  position:absolute;
  inset:-60px -60px -60px -60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.65), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.55), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.35) 0px,
      rgba(255,255,255,0.35) 2px,
      rgba(255,255,255,0) 24px,
      rgba(255,255,255,0) 44px
    );
  pointer-events:none;
  opacity: .6;
}

.dest-inner{
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
}
.dest-title{
  margin: 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
  text-align: center;
}
.dest-subtitle{
  margin: 10px 0 0;
  text-align: center;
  color: #6f6f6f;
  font-size: 16px;
}
.dest-grid{
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.dest-card{
  background:#fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.dest-img{
  height: 84px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.dest-info{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
}
.dest-name{ font-weight: 800; font-size: 14px; }
.dest-meta{ margin-top: 6px; color: #8a8a8a; font-size: 12px; }
.dest-go{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #ececec;
  background: #f6f6f6;
  cursor: pointer;
  display:grid;
  place-items:center;
  font-size: 14px;
}
.dest-go:hover{ background:#eeeeee; }

/* Floating back-to-top button */
.to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  z-index: 100;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:#222;
  color:#ffd400;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* ---------- Top Rated Hotels ---------- */
.toprated-section{
  position: relative;
  padding: 72px 0 86px;
  overflow: hidden;
  background: #f9ebe4;
  border-top: 1px solid #f0e2db;
}
.toprated-section::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.45), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.35) 0px,
      rgba(255,255,255,0.35) 2px,
      rgba(255,255,255,0) 24px,
      rgba(255,255,255,0) 44px
    );
  opacity: .55;
  pointer-events: none;
}
.toprated-inner{
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
}
.toprated-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
}
.toprated-title{
  margin: 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
}
.toprated-subtitle{
  margin: 10px 0 0;
  color: #6f6f6f;
  font-size: 16px;
}
.view-more{
  margin-top: 18px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background:#000;
  color:#fff;
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.14);
}
.toprated-row{
  margin-top: 30px;
  display:flex;
  gap: 22px;
  overflow-x: auto;
  padding: 10px 4px 14px;
  scroll-snap-type: x mandatory;
}
.toprated-row::-webkit-scrollbar{ height: 10px; }
.toprated-row::-webkit-scrollbar-thumb{ background:#e6d7cf; border-radius: 999px; }
.toprated-row::-webkit-scrollbar-track{ background: transparent; }
.hotel-card{
  flex: 0 0 360px;
  border-radius: 22px;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  overflow: hidden;
  scroll-snap-align: start;
}
.hotel-img{ height: 210px; width: 100%; }
.hotel-body{ position: relative; padding: 18px 18px 16px; }
.hotel-pill{
  position: absolute;
  right: 18px;
  top: -18px;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 8px 10px;
  display:flex;
  align-items:center;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  font-size: 12px;
  color:#666;
}
.placeholder-text{
  display:inline-block;
  height: 14px;
  width: 140px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #f2f2f2 0%, #f7f7f7 40%, #f2f2f2 80%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
}
.placeholder-text.short{ width: 90px; }
.placeholder-text.wide{ width: 220px; }

/* ---------- Why Choose Us ---------- */
.choose-section{
  background:#fff;
  border-top: 1px solid #eee;
  padding: 88px 0 92px;
}
.choose-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items:center;
}
.choose-pill{
  display:inline-flex;
  align-items:center;
  padding: 10px 16px;
  border-radius: 999px;
  background:#f2f3f5;
  color:#666;
  font-weight: 700;
  font-size: 12px;
}
.choose-title{
  margin: 18px 0 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
}
.choose-text{
  margin: 18px 0 0;
  color:#6f6f6f;
  font-size: 16px;
  max-width: 520px;
  line-height: 1.6;
}
.choose-right{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.feature-card{
  border-radius: 22px;
  padding: 22px;
  min-height: 210px;
  border: 1px solid rgba(0,0,0,0.07);
  background:#fff;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  position: relative;
  overflow:hidden;
}
.feature-media{
  width: 86px;
  height: 86px;
  border-radius: 18px;
  margin-bottom: 14px;
}
.feature-title{ margin: 0; font-size: 18px; font-weight: 900; }
.feature-desc{
  margin: 10px 0 0;
  font-size: 13px;
  color:#6f6f6f;
  line-height: 1.5;
  max-width: 240px;
}
.feature-yellow{
  background: #ffef00;
  border-color: rgba(0,0,0,0.06);
  box-shadow: none;
}
.feature-yellow .feature-desc{ color:#3b3b3b; opacity:.85; }
.feature-white{ background:#fff; }
.feature-gray{ background:#eef0f3; box-shadow: none; }
.feature-orange{
  background:#f39a18;
  border-color: rgba(0,0,0,0.05);
  box-shadow: none;
}
.feature-orange .feature-desc{ color:#3b3b3b; opacity:.8; }

/* ---------- Banner Row Section ---------- */
.bannerrow-section{
  background:#fff;
  padding: 28px 0 22px;
}
.bannerrow-inner{
  max-width: none;
  margin: 0;
  padding: 0;
}
.bannerrow-track{
  display:flex;
  gap: 18px;
  overflow-x: auto;
  /* keep the same left/right spacing as your other sections */
  padding: 0 22px 10px;
  scroll-behavior: smooth;

  /* hide scrollbar (all browsers) */
  -ms-overflow-style: none; /* IE/old Edge */
  scrollbar-width: none;    /* Firefox */
}
.bannerrow-track::-webkit-scrollbar{ display:none; } /* Chrome/Safari/Edge */

.banner-card{
  position: relative;
  flex: 0 0 455px;
  height: 250px;
  border-radius: 12px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 32px rgba(0,0,0,0.10);
}
.banner-card .banner-bg{
  position:absolute;
  inset:0;
}
.banner-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05));
}
.banner-overlay.light{
  background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.15));
}
.banner-content{
  position:absolute;
  left: 26px;
  top: 28px;
  right: 26px;
  z-index: 2;
}
.banner-content.right{
  text-align:center;
  left: 40px;
  right: 40px;
}
.banner-kicker{
  font-size: 14px;
  font-weight: 700;
  opacity: .9;
  margin-bottom: 6px;
  color:#666;
}
.banner-card-light{ color:#666; }

.banner-content h3{
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.6px;
  font-weight: 900;
}
.banner-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 18px;
  border-radius: 999px;
  background:#ffef00;
  color:#666;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,0.12);
}
/* ---------- Testimonials Section ---------- */
.testimonials-section{
  background:#dfeeff;
  padding: 76px 0 84px;
  border-top: 1px solid rgba(0,0,0,0.06);
  overflow:hidden;
}
.testimonials-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 34px;
  align-items:flex-start;
  position: relative;
}
.testimonials-inner::before{
  content:"";
  position:absolute;
  left: 38%;
  top: 10px;
  width: 130px;
  height: 90px;
  border: 2px dashed rgba(0,0,0,0.25);
  border-left: none;
  border-bottom: none;
  border-radius: 999px;
  transform: rotate(10deg);
  opacity: .65;
}
.testimonials-inner::after{
  content:"";
  position:absolute;
  left: 46%;
  top: 0px;
  width: 80px;
  height: 60px;
  border: 2px dashed rgba(0,0,0,0.25);
  border-left: none;
  border-bottom: none;
  border-radius: 999px;
  transform: rotate(-15deg);
  opacity: .55;
}

.testi-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12px;
}
.testi-avatars{
  display:inline-flex;
  align-items:center;
}
.testi-avatars span{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:#d8d8d8;
  border: 2px solid #fff;
  margin-left: -6px;
}
.testi-avatars span:first-child{ margin-left: 0; }

.testi-title{
  margin: 18px 0 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 900;
}
.testi-text{
  margin: 18px 0 0;
  color:#6b6b6b;
  font-size: 16px;
  line-height: 1.6;
  max-width: 520px;
}

.testimonials-right{
  display:flex;
  gap: 18px;
  align-items:flex-start;
  overflow-x: auto;
  padding-bottom: 10px;
}
.testimonials-right::-webkit-scrollbar{ height: 10px; }
.testimonials-right::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.10); border-radius: 999px; }
.testimonials-right::-webkit-scrollbar-track{ background: transparent; }

.testi-card{
  flex: 0 0 440px;
  background:#fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 18px 36px rgba(0,0,0,0.08);
  padding: 22px 22px 20px;
}
.testi-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.testi-person{
  display:flex;
  align-items:center;
  gap: 12px;
}
.testi-photo{
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.testi-name{
  font-weight: 900;
  font-size: 14px;
}
.testi-loc{
  margin-top: 4px;
  color:#7a7a7a;
  font-size: 12px;
}
.testi-stars{
  color:#f6b800;
  font-size: 14px;
  letter-spacing: 1px;
}
.testi-quote{
  margin: 0;
  color:#6f6f6f;
  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   ✅ FOOTER (single clean version — matches original size)
   ========================================================= */
.site-footer{
  background:#000 !important;
  color:#fff !important;
  padding: 74px 0 52px; /* bigger like the original */
  width: 100%;
  box-sizing: border-box;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
}

/* Dashboard body footer overrides - Ensure always visible */
.dashboard-body .site-footer:not(.dashboard-footer) {
  margin-left: var(--sidebar-current);
  width: calc(100% - var(--sidebar-current));
  max-width: calc(100vw - var(--sidebar-current));
  box-sizing: border-box;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 1;
  transition: margin-left var(--transition), width var(--transition), max-width var(--transition);
  background: #000 !important;
  color: #fff !important;
  padding: 74px 0 52px;
}

.footer-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  box-sizing: border-box;
}

.dashboard-body .footer-inner{
  padding-left: 22px;
  padding-right: 22px;
}

.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding-bottom: 28px;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}
.footer-brandmark{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background:#ffd400;
  display:grid;
  place-items:center;
  font-weight: 900;
  color:#666;
}
img.footer-brandmark{
  background: none;
  display: block;
  object-fit: contain;
}
.footer-brandname{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .2px;
}

.footer-chat{
  display:flex;
  align-items:center;
  gap: 16px;
  font-size: 14px;
}
.footer-chat-muted{
  color: rgba(255,255,255,0.80);
}
.footer-chat-live{
  color:#ffb000;
  font-weight: 800;
  text-decoration:none;
}
.footer-chat-live:hover{ text-decoration: underline; }

.footer-rule{
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 0;
}
.footer-rule-bottom{
  margin-top: 46px; /* extra space before bottom divider like original */
}

.footer-main{
  display:grid;
  grid-template-columns: 2.2fr 0.9fr 0.9fr;
  gap: 84px;
  padding-top: 36px;   /* extra line separation / bigger footer */
}

.footer-about{
  max-width: 420px;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.75;
}

.footer-col-title{
  font-weight: 800;
  margin-bottom: 14px;
  font-size: 14px;
}

.footer-col a{
  display:block;
  color: rgba(255,255,255,0.60);
  text-decoration:none;
  margin-bottom: 12px;
  padding: 4px 0;
  min-height: 32px;
  font-size: 14px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.footer-col a:hover{ color:#fff; }

.footer-bottom{
  padding-top: 24px;
  color: rgba(255,255,255,0.60);
  font-size: 13px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .dest-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choose-inner{ grid-template-columns: 1fr; }
  .testimonials-inner{ grid-template-columns: 1fr; }
  .testi-text{ max-width: 100%; }

  .footer-main{
    grid-template-columns: 1fr 1fr;
    gap: 42px;
  }
  .footer-about{ grid-column: 1 / -1; max-width: 640px; }
  
  /* Dashboard about page responsive */
  .dashboard-body .about-hero{
    grid-template-columns: 1fr;
    padding: 50px 22px 60px;
    gap: 40px;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
  }
  
  .dashboard-body .about-detail-inner{
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
  }
  
  .dashboard-body .about-image{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .dashboard-body .about-stats{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 980px){
  /* Dashboard topbar: 提前用 grid 两行布局，避免 nav 与 logo 重叠 */
  .dashboard-body{
    --topbar-height: 90px;
  }
  .dashboard-body .topbar{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    flex-direction: unset;
    min-height: 90px;
    padding: 6px 10px 8px;
  }
  .dashboard-body .topbar .header-inner{
    display: contents !important;
  }
  .dashboard-body .topbar-left{
    grid-column: 1;
    grid-row: 1;
  }
  .dashboard-body .topbar .header-actions{
    grid-column: 2;
    grid-row: 1;
  }
  .dashboard-body .top.nav{
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    order: 0;
    margin-top: 4px;
    padding: 6px 10px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  .dashboard-body .topbar .header-actions--spacer{
    display: none;
  }

  /* Header adjustments - show nav links, shrink brand and button */
  .header-inner{
    height: auto;
    min-height: 60px;
    padding: 10px 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .brand{
    gap: 6px;
    flex-shrink: 0;
  }
  
  .brand-mark{
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .brand-name{
    font-size: 14px;
  }
  
  .nav{
    display: flex !important;
    order: 3;
    width: 100%;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  
  .nav-link{
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap;
  }
  
  .header-actions{
    margin-left: auto;
    flex-shrink: 0;
  }
  
  .btn.btn-outline{
    padding: 6px 12px;
    font-size: 12px;
    min-height: 32px;
  }

  /* Pre-login (.site-header): logo 与 nav 尺寸 */
  .site-header .brand-logo{
    width: 28px;
    height: 28px;
  }
  .site-header .header-inner{
    flex-wrap: wrap;
  }
  .site-header .nav{
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  
  /* Search card adjustments */
  .search-section{
    padding: 20px 12px 0;
  }
  
  .search-card{
    padding: 14px 14px 12px;
    border-radius: 14px;
  }
  
  .search-tabs{
    gap: 8px;
    padding: 4px 4px 12px;
    flex-wrap: wrap;
  }
  
  .tab{
    padding: 6px 10px;
    font-size: 11px;
    white-space: nowrap;
  }
  
  .help-pill{
    font-size: 11px;
    gap: 4px;
    margin-left: auto;
  }
  
  .search-form{
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
  }
  
  .field{
    width: 100%;
  }
  
  .field-label{
    font-size: 11px;
    margin-bottom: 6px;
  }
  
  .field-input{
    font-size: 12px;
    height: 38px;
  }
  
  .field-icon{
    font-size: 14px;
  }
  
  .search-btn{
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    margin-top: 4px;
  }
  
  /* Content adjustments */
  .content-text h1{ font-size: 44px; }
  .big-gap{ height: 70px; }
  .divider{ display:none; }

  .dest-title{ font-size: 42px; }
  .toprated-title{ font-size: 42px; }
  .choose-title{ font-size: 42px; }
  .testi-title{ font-size: 42px; }

  .banner-card{ flex-basis: 360px; height: 230px; }
  .banner-content h3{ font-size: 28px; }

  .footer-top{
    flex-direction: column;
    align-items:flex-start;
    gap: 14px;
  }
  
  /* Improve text contrast on mobile for elements on dark background */
  .help-pill{
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  .tab:not(.active){
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
  
  .content-text h1{
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
  
  .content-text p{
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
  .footer-chat{
    width: 100%;
    justify-content:flex-start;
    flex-wrap: wrap;
  }
  
  /* Modal adjustments */
  .modal-overlay{
    padding: 12px;
    align-items: flex-start;
    overflow-y: auto;
  }
  
  .modal-dialog{
    width: 100%;
    max-width: 100%;
    margin: auto;
    padding: 16px;
    border-radius: 16px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  
  .modal-title{
    font-size: 22px;
  }
  
  .modal-subtitle{
    font-size: 12px;
    margin: 6px 0 14px;
  }
  
  .modal-form{
    gap: 10px;
  }
  
  .modal-label{
    font-size: 11px;
    gap: 4px;
  }
  
  .modal-input{
    height: 40px;
    font-size: 14px;
    padding: 0 10px;
  }
  
  .modal-close{
    width: 32px;
    height: 32px;
    top: 10px;
    right: 10px;
    font-size: 14px;
  }
  
  /* Logout modal buttons on mobile */
  .dashboard-body .modal-actions{
    flex-direction: column;
    gap: 8px;
  }
  
  .dashboard-body .modal-actions button.ghost,
  .dashboard-body .modal-actions #confirm-logout{
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
  }
  
  /* Prevent horizontal scroll */
  body{
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  html{
    overflow-x: hidden;
  }
  
  *{
    max-width: 100%;
  }
}
@media (max-width: 560px){
  .dest-grid{ grid-template-columns: 1fr; }
  .choose-right{ grid-template-columns: 1fr; }
  .banner-card{ flex-basis: 320px; height: 210px; }

  .footer-main{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  
  /* Further reduce sizes on very small screens */
  .header-inner{
    padding: 8px 10px;
  }
  
  .brand-mark{
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .brand-name{
    font-size: 12px;
  }
  
  .nav{
    gap: 8px;
  }
  
  .nav-link{
    font-size: 11px;
    padding: 3px 6px;
  }

  /* Pre-login nav: keep one row, shrink to fit */
  .site-header .nav{
    flex-wrap: nowrap;
    gap: 6px;
  }
  .site-header .nav-link{
    font-size: 10px;
    padding: 2px 4px;
  }

  /* 登录后 topbar：窄屏与 login 前一致 */
  .dashboard-body .topbar .brand-logo{
    width: 24px;
    height: 24px;
  }
  .dashboard-body .topbar .brand-name{
    font-size: 12px;
  }
  .dashboard-body .topbar .topbar-profile{
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }
  .dashboard-body .top.nav{
    --top-link-fs: 10px;
    gap: 4px;
    padding: 6px 10px 0;
    margin-top: 4px;
  }
  .dashboard-body .top.nav .top-link{
    font-size: var(--top-link-fs, 10px) !important;
    padding: 3px 4px !important;
    min-height: 22px !important;
  }
  .dashboard-body .top.nav .top-link[data-top="team"]::before,
  .dashboard-body .top.nav .top-link[data-top="tiers"][href*="membership2"]::before{
    font-size: var(--top-link-fs, 10px);
  }
  
  .search-card{
    padding: 12px 10px 10px;
  }
  
  .search-tabs{
    gap: 6px;
  }
  
  .tab{
    padding: 5px 8px;
    font-size: 10px;
  }
  
  .help-pill{
    font-size: 10px;
  }
  
  .modal-dialog{
    padding: 14px;
  }
  
  .modal-title{
    font-size: 20px;
  }
}

.about-hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 22px 80px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

/* Dashboard body about page overrides */
.dashboard-body .about-hero {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

.dashboard-body .about-hero,
.dashboard-body .about-detail-inner,
.dashboard-body .about-image,
.dashboard-body .about-stats {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Desktop: ensure about-hero and other sections don't break out of content padding */
@media (min-width: 901px){
  .dashboard-body .about-hero,
  .dashboard-body .about-detail,
  .dashboard-body .about-image,
  .dashboard-body .about-detail-inner,
  .dashboard-body .about-stats {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Removed duplicate - using responsive version below */

.dashboard-body .site-footer{
  margin-left: 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dashboard-body .about-image{
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  max-width: 1320px;
  box-sizing: border-box;
}

.dashboard-body .about-detail{
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100%;
  max-width: 1320px;
  box-sizing: border-box;
}

.about-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffef00;
  color: #666;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 22px;
  width: fit-content;
}

.about-title {
  margin: 0;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  font-weight: 900;
}

.about-title span {
  font-weight: 900;
}

.about-sub {
  margin-top: 14px;
  color: #777;
  font-size: 16px;
}

.about-mission {
  position: relative;
  padding-left: 28px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
}

.about-mission::before {
  content: "";
  position: absolute;
  left: 0;
  top: -40px;
  width: 160px;
  height: 120px;
  border: 2px dashed rgba(0, 0, 0, 0.35);
  border-left: none;
  border-bottom: none;
  border-radius: 999px;
  transform: rotate(-12deg);
  opacity: 0.9;
}

.about-image {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
  z-index: 2; /* image stays above yellow section */
}

/* Dashboard body about page overrides */
.dashboard-body .about-image {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

.about-image-box {
  height: 520px; /* 🔥 taller image */
  border-radius: 22px;
  border: 1px solid #eee;

  background-image: url("images/about/partner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 🔥 pull image down into yellow section */
  margin-bottom: -260px;

  animation: none;
}

.about-detail {
  background: #f7e58b;
  padding: 320px 0 74px; /* 🔥 extra top padding */
  position: relative;
  z-index: 1;
}

.about-detail-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

/* Dashboard body about page overrides */
.dashboard-body .about-detail-inner {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

.about-detail-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  width: fit-content;
  margin-bottom: 18px;
}

.about-detail-title {
  margin: 0;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 900;
}

.about-detail-copy {
  margin-top: 18px;
  color: rgba(102, 102, 102, 0.78);
  font-size: 16px;
  line-height: 1.75;
  max-width: 640px;
}

.about-detail-copy p {
  margin: 0 0 16px;
}

.about-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-content: start;
  justify-items: stretch;
  padding-top: 84px; /* pushes cards down like screenshot */
}

.about-feature-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 22px 18px 20px;
  text-align: center;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.06);
  min-height: 170px;
  display: grid;
  place-items: center;
  gap: 10px;
}

.about-feature-card.soft-pink { background: rgba(255, 236, 236, 0.85); }
.about-feature-card.soft-blue { background: rgba(220, 244, 255, 0.85); }
.about-feature-card.soft-sky  { background: rgba(220, 234, 255, 0.85); }
.about-feature-card.soft-gray { background: rgba(245, 245, 245, 0.85); }

.about-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-size: 20px;
}

.about-feature-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #666;
}

.about-feature-desc {
  margin: 0;
  color: rgba(102, 102, 102, 0.55);
  font-size: 14px;
  line-height: 1.5;
  max-width: 220px;
}

.about-stats {
  max-width: 1320px;
  margin: 0 auto;
  padding: 42px 22px 0;
}

/* Dashboard body about page overrides */
.dashboard-body .about-stats {
  max-width: 100%;
  margin-left: 0;
  margin-right: auto;
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

.about-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.about-stat {
  text-align: left;
}

.about-stat-number {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: #666;
  margin: 0;
}

.about-stat-label {
  margin-top: 8px;
  color: rgba(102, 102, 102, 0.65);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .about-detail-inner {
    grid-template-columns: 1fr;
  }
  .about-feature-grid {
    padding-top: 10px;
    grid-template-columns: 1fr 1fr;
  }
  .about-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}

@media (max-width: 980px) {
  .about-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 50px 22px 60px;
  }
  .about-title {
    font-size: 44px;
  }
  .about-detail-title {
    font-size: 42px;
  }
  .about-image-box {
    height: 400px;
    margin-bottom: -200px;
  }
  .about-detail {
    padding: 260px 0 60px;
  }
}

@media (max-width: 560px) {
  .about-feature-grid {
    grid-template-columns: 1fr;
  }
  .about-stats-row {
    grid-template-columns: 1fr;
  }
  .about-hero {
    padding: 40px 16px 50px;
    gap: 30px;
  }
  .about-title {
    font-size: 32px;
  }
  .about-sub {
    font-size: 14px;
  }
  .about-mission {
    font-size: 14px;
    padding-left: 20px;
  }
  .about-mission::before {
    width: 120px;
    height: 90px;
    top: -30px;
  }
  .about-image {
    padding: 0 16px;
  }
  .about-image-box {
    height: 300px;
    margin-bottom: -150px;
  }
  .about-detail {
    padding: 200px 0 50px;
  }
  .about-detail-inner {
    padding: 0 16px;
    gap: 30px;
  }
  .about-detail-title {
    font-size: 28px;
  }
  .about-detail-copy {
    font-size: 14px;
  }
  .about-feature-grid {
    padding-top: 30px;
    gap: 16px;
  }
  .about-feature-card {
    padding: 18px;
    min-height: 150px;
  }
  .about-stats {
    padding: 30px 16px 0;
  }
  .about-stats-row {
    gap: 20px;
  }
  .about-stat-number {
    font-size: 36px;
  }
  .page-image-strip {
    padding: 30px 0;
  }
  .image-strip-inner {
    padding: 0 16px;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .image-strip-item {
    height: 120px;
  }
}

.membership-wrap {
  background: #f6f7f2; 
  padding: 64px 0 90px;
  min-height: calc(100vh - 44px - 78px); 
}

.membership-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
}

.dashboard-body .membership-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  width: 100%;
  max-width: 1320px;
  box-sizing: border-box;
}

.dashboard-body .membership-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1320px;
  box-sizing: border-box;
  padding-left: 22px;
  padding-right: 22px;
}

.membership-title {
  margin: 0;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 0.95;
  font-size: 86px;
  color: #666;
}

.membership-title .light {
  font-weight: 500;
  letter-spacing: -1px;
}

.membership-sub {
  margin: 12px 0 0;
  color: #777;
  font-size: 18px;
  font-weight: 700;
}

.membership-rule {
  margin: 34px auto 0;
  height: 4px;
  width: min(820px, 92%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
}

      /* Cards row */
.tiers {
  margin-top: 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  justify-items: stretch;
  width: 100%;
  max-width: 100%;
}

.tier-card {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  touch-action: manipulation;
}

.tier-topline {
  font-size: 12px;
  color: #666;
  font-weight: 800;
  margin-bottom: 8px;
}

.tier-name {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  color: #666;
}

.tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.tier-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 13px;
  font-weight: 700;
}

.check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e8f8ea;
  border: 2px solid #3bb54a;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.check svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1100px) {
  .tiers {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 60px;
  }
  .tier-card {
    max-width: 100%;
    min-height: 260px;
  }
}

@media (max-width: 768px) {
  .tiers {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tier-card {
    min-height: auto;
    padding: 20px 16px;
  }
}

/* Dashboard body tiers - Mobile optimized */
@media (max-width: 640px) {
  .dashboard-body .tiers {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }
  
  .dashboard-body .tier-card {
    min-height: auto;
    padding: 20px 16px;
  }
  
  .dashboard-body .membership-title {
    font-size: 42px;
    line-height: 1.1;
  }
  
  .dashboard-body .membership-sub {
    font-size: 15px;
  }
}

@media (max-width: 980px) {
  .membership-title {
    font-size: 56px;
  }
  .membership-sub {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .membership-title {
    font-size: 42px;
  }
  .membership-sub {
    font-size: 15px;
  }
  
  .membership-wrap {
    padding: 40px 0 60px;
  }
  
  .membership-inner {
    padding: 0 16px;
  }
}


.referral-hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 86px 22px 36px;
  text-align: center;
}

.dashboard-body .referral-hero,
.dashboard-body .referral-media,
.dashboard-body .how-section,
.dashboard-body .how-inner {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  max-width: 1320px;
  width: 100%;
  box-sizing: border-box;
}

.dashboard-body .referral-hero {
  max-width: 1320px;
  padding-left: 22px;
  padding-right: 22px;
}

.dashboard-body .referral-media {
  max-width: 1320px;
  padding-left: 22px;
  padding-right: 22px;
}

.dashboard-body .how-section {
  width: 100%;
  max-width: 1320px;
}

.dashboard-body .how-inner {
  max-width: 1320px;
  padding-left: 22px;
  padding-right: 22px;
}

.referral-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #ffef00;
  color: #666;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.referral-title {
  margin: 28px 0 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 900;
  color: #666;
}

.referral-subtitle {
  margin: 16px 0 0;
  color: #444;
  font-size: 16px;
  font-weight: 600;
}

.referral-media {
  max-width: 1020px;  
  margin: 0 auto;
  padding: 0 22px 64px;
}

.referral-media-box {
  height: 640px;
  border-radius: 18px;
  border: 1px solid #eee;
  overflow: hidden;

  background-image: url("images/referral/affiliate.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  animation: none;
}

.how-section {
  background: #deefff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}

.how-section::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at 30% 30%, rgba(0,0,0,0.08), rgba(0,0,0,0) 60%);
  opacity: 0.35;
  transform: rotate(-8deg);
  pointer-events: none;
  filter: blur(0.2px);
  border-radius: 50%;
}

.how-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
}

.how-title {
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: #666;
}

.how-sub {
  margin: 10px 0 0;
  color: rgba(102, 102, 102, 0.55);
  font-weight: 700;
  font-size: 14px;
}

.how-steps {
  margin-top: 34px;
  display: grid;
  gap: 26px;
  max-width: 720px;
}

.how-step {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: start;
}

.how-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #666;
}

.how-step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #666;
}

.how-step-desc {
  margin: 8px 0 0;
  color: rgba(102, 102, 102, 0.55);
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  max-width: 520px;
}

.how-right {
  position: relative;
  min-height: 260px;
}

.plane-placeholder {
  position: absolute;
  right: 0;
  top: 0;
  width: 360px;
  height: 160px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(102, 102, 102, 0.35);
  letter-spacing: 0.6px;
}

@media (max-width: 1100px) {
  .how-inner {
    grid-template-columns: 1fr;
  }
  .how-right {
    min-height: 120px;
  }
  .plane-placeholder {
    position: relative;
    width: 100%;
    height: 160px;
    margin-top: 14px;
  }
}

@media (max-width: 980px) {
  .referral-hero {
    padding: 70px 18px 28px;
  }
  .referral-title {
    font-size: 42px;
  }
  .referral-media-box {
    height: 380px;
  }
  .how-title {
    font-size: 36px;
  }
}

@media (max-width: 560px) {
  .referral-title {
    font-size: 34px;
  }
  .referral-media-box {
    height: 280px;
    border-radius: 14px;
  }
  .how-title {
    font-size: 30px;
  }
}

/* Dashboard body referral/team-program - Mobile */
@media (max-width: 640px) {
  .dashboard-body .referral-hero {
    padding: 40px 16px 32px;
  }
  
  .dashboard-body .referral-title {
    font-size: 32px;
    margin-top: 20px;
  }
  
  .dashboard-body .referral-subtitle {
    font-size: 14px;
  }
  
  .dashboard-body .referral-media-box {
    height: 240px;
  }
  
  .dashboard-body .how-section {
    padding: 40px 0 50px;
  }
  
  .dashboard-body .how-inner {
    padding: 0 16px;
    grid-template-columns: 1fr;
  }
  
  .dashboard-body .how-title {
    font-size: 28px;
  }
  
  .dashboard-body .how-step {
    grid-template-columns: 44px 1fr;
    gap: 12px;
  }
  
  .dashboard-body .how-badge {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

.faq-hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 86px 22px 54px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

.dashboard-body .faq-hero,
.dashboard-body .faq-accordion-wrap {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  max-width: 1320px;
  width: 100%;
  box-sizing: border-box;
}

.dashboard-body .faq-hero {
  max-width: 1320px;
  padding-left: 22px;
  padding-right: 22px;
}

.dashboard-body .faq-accordion-wrap {
  max-width: 1320px;
  padding-left: 22px;
  padding-right: 22px;
}

.faq-title {
  margin: 0;
  font-size: 56px;
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 900;
  color: #666;
}

.faq-lead {
  margin: 16px 0 0;
  color: #777;
  font-size: 14px;
  line-height: 1.8;
  max-width: 560px;
}

.faq-cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  min-height: 44px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
  width: fit-content;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.faq-cta:hover {
  opacity: 0.92;
}

.faq-cta .arrow {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.faq-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 14px;
  align-items: stretch;
  justify-items: stretch;
}

.faq-tile {
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  background: #f3f3f3; /* fallback only */
}

.faq-tile.small {
  height: 130px;
}
.faq-tile.tall {
  height: 274px;
}

.faq-tile-stack {
  display: grid;
  gap: 14px;
}

@keyframes shimmer {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.faq-trails {
  position: absolute;
  right: -90px;
  top: 10px;
  width: 220px;
  height: 220px;
  pointer-events: none;
  opacity: 0.55;
}

.faq-accordion-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px 90px;
}

.faq-accordion-card {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.08);
}

.faq-row {
  display: grid;
  grid-template-columns: 96px 1fr 72px;
  gap: 10px;
  padding: 26px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  align-items: center;
  position: relative;
  z-index: 1;
  min-height: 60px;
}
.faq-row:first-child {
  border-top: none;
}

.faq-no {
  font-weight: 900;
  font-size: 34px;
  letter-spacing: -0.8px;
  color: #666;
  opacity: 0.95;
}

.faq-q {
  font-weight: 900;
  font-size: 18px;
  color: #666;
  margin: 0;
}

.faq-toggle {
  justify-self: end;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #f3f4f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 22px;
  color: #666;
  user-select: none;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.faq-toggle:hover {
  background: #eceef1;
}

.faq-row.open .faq-toggle {
  background: #000;
  color: #fff;
}

.faq-a {
  grid-column: 2 / 4;
}

.faq-panel {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 260ms ease;
}

.faq-panel-inner {
  padding: 16px 18px 6px 0;
  color: #777;
  font-size: 12px;
  line-height: 1.85;
  max-width: 680px;
}

.faq-panel-inner p {
  margin: 0 0 14px;
}

.faq-panel-inner ol {
  margin: 10px 0 14px 18px;
  padding: 0;
}

.faq-panel-inner li {
  margin: 8px 0;
}

.faq-panel-inner .note-strong {
  margin-top: 12px;
  font-size: 11px;
  color: #777;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.faq-row.open {
  background: #f5f6f8;
}

@media (max-width: 1100px) {
  .faq-hero {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .faq-trails {
    display: none;
  }
}

@media (max-width: 980px) {
  .faq-title {
    font-size: 42px;
  }
  .faq-row {
    grid-template-columns: 76px 1fr 62px;
  }
  .faq-no {
    font-size: 28px;
  }
}

@media (max-width: 560px) {
  .faq-title {
    font-size: 34px;
  }
  .faq-collage {
    grid-template-columns: 1fr;
  }
  .faq-tile.tall {
    height: auto;
    min-height: 200px;
    aspect-ratio: 4/3;
  }
  .faq-tile img {
    object-fit: contain;
    object-position: center;
  }
  .faq-row {
    grid-template-columns: 50px 1fr 50px;
    padding: 16px 12px;
    min-height: 60px;
    align-items: flex-start;
  }
  .faq-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
  }
  .faq-cta {
    padding: 14px 20px;
    min-height: 48px;
    font-size: 13px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .faq-q {
    font-size: 15px;
    line-height: 1.3;
  }
  .footer-col a {
    min-height: 44px;
    padding: 8px 0;
    font-size: 14px;
  }
}

.tab:hover {
  background: #000;
  color: #fff;
}

.tab{
  border: 0;
  background: transparent;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  color:#666;

  transition: background-color 0.3s ease, color 0.3s ease; /* ✅ add this */
}

.card-row {
  scrollbar-width: none;   
}
.card-row::-webkit-scrollbar {
  display: none;  
}

.toprated-row {
  scrollbar-width: none;  
  -ms-overflow-style: none;     
}

.toprated-row::-webkit-scrollbar {
  display: none;        
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers image horizontally */
  text-align: center;
}

.feature-media {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  margin-bottom: 18px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.page-image-strip {
  background: #fff;
  padding: 40px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Dashboard body page-image-strip overrides - will be overridden by desktop media query */
.dashboard-body .page-image-strip {
  margin-left: -22px;
  margin-right: -22px;
  width: calc(100% + 44px);
  max-width: 100%;
  box-sizing: border-box;
  transition: margin var(--transition);
}

.dashboard-body.sidebar-collapsed .page-image-strip {
  margin-left: -22px;
  margin-right: -22px;
  width: calc(100% + 44px);
  max-width: 100%;
}

.image-strip-inner {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  width: 100%;
  padding: 0 24px;
}

.image-strip-item {
  height: 180px;
  background: #e6e6e6;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 1200px) {
  .image-strip-inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .image-strip-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .image-strip-item {
    height: 140px;
  }
}

.stay-img {
  height: 220px;   
  width: 100%;
  overflow: hidden; 
  border-radius: 22px; 
}

.stay-img img {
  width: 100%;
  height: 100%;
  display: block;      
  object-fit: cover;  
  object-position: center; 
}

.dest-img{
  height: 150px;    
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;   
}

.dest-img img {
  width: 100%;
  height: 100%;
  display: block;          
  object-fit: cover;  
  object-position: center;
}

.hotel-img{
  overflow: hidden;
}

.hotel-img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.image-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faq-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills box nicely */
  display: block;
}

/* =========================
   Login Modal (popup)
========================= */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}

.modal-overlay.open,
.modal-overlay:target{
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.modal-dialog{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  padding: 22px;
  position: relative;
  transform: translateY(10px);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

.modal-overlay.open .modal-dialog,
.modal-overlay:target .modal-dialog{
  transform: translateY(0);
  opacity: 1;
}

.modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #f3f4f6;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
}

.modal-title{
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.4px;
}

.modal-subtitle{
  margin: 8px 0 18px;
  color: #777;
  font-size: 13px;
}

.modal-form{
  display: grid;
  gap: 12px;
}

.modal-label{
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: #666;
}

.modal-input{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.12);
  padding: 0 12px;
  outline: none;
}

.modal-input:focus{
  border-color: rgba(0,0,0,0.35);
}

.modal-primary{
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.modal-links{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
}

.modal-links a{
  color: #666;
  text-decoration: none;
  opacity: 0.8;
}

.modal-links a:hover{
  opacity: 1;
  text-decoration: underline;
}

/* prevent background scrolling when modal open */
body.modal-open{
  overflow: hidden;
}

/* ============================================================
   ✨ PRO UI POLISH - Mobile-first, consistent, professional
   ============================================================ */
.dashboard-body{
  --ui-radius: 16px;
  --ui-shadow: 0 8px 24px rgba(0,0,0,0.08);
  --ui-shadow-soft: 0 4px 12px rgba(0,0,0,0.06);
  --ui-border: 1px solid rgba(0,0,0,0.08);
  --ui-text: #666;
  --ui-muted: #6b7280;
}

/* Set background for specific dashboard pages that should have white/grey background */
.dashboard-body[data-view="about"],
.dashboard-body[data-view="membership"],
.dashboard-body[data-view="team"],
.dashboard-body[data-view="faqs"] {
  background: #f7f7f7 !important;
}

.dashboard-body .content{
  gap: 24px;
}

.dashboard-body h1{
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.1;
  color: var(--ui-text);
}

/* Override h1 color for pages with travel background */
.dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"]) h1 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"]) .content-header p {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.dashboard-body h2{
  font-size: clamp(20px, 3.6vw, 32px);
  line-height: 1.2;
  color: var(--ui-text);
}

.dashboard-body p{
  color: var(--ui-muted);
}

/* Cards - consistent visual language */
.dashboard-body .workspace-card,
.dashboard-body .tier-card,
.dashboard-body .about-feature-card,
.dashboard-body .faq-accordion-card{
  border-radius: var(--ui-radius);
  border: var(--ui-border);
  box-shadow: var(--ui-shadow-soft);
  background: #fff;
}

.dashboard-body .workspace-card{
  height: 150px;
  min-height: 150px;
}

.dashboard-body .workspace-grid{
  gap: 18px;
}

/* Footer - full width background with aligned content */
.dashboard-body .dashboard-footer,
.dashboard-body .site-footer{
  margin-left: 0;
  width: 100vw;
  padding-left: 0;
  padding-right: 0;
}

.dashboard-body .site-footer .footer-inner,
.dashboard-body .dashboard-footer .footer-inner{
  padding-left: calc(22px + var(--sidebar-current));
  padding-right: 22px;
  box-sizing: border-box;
}

/* Buttons & links */
.dashboard-body .btn,
.dashboard-body .faq-cta,
.dashboard-body .top-link,
.dashboard-body .nav-link{
  border-radius: 10px;
  font-weight: 600;
}

.dashboard-body .top-link{
  padding: 10px 14px;
}

/* ============================================================
   📱 MOBILE POLISH (≤ 900px)
   ============================================================ */
@media (max-width: 900px){
  .dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"]) {
    background: transparent !important;
  }
  
  .dashboard-body[data-view="about"],
  .dashboard-body[data-view="membership"],
  .dashboard-body[data-view="team"],
  .dashboard-body[data-view="faqs"] {
    background: #f8f8f8 !important;
  }
  
  body {
    background-attachment: scroll;
    /* 手机版：cover 自动裁剪填满屏幕，适配任意尺寸 */
    background-size: cover;
    background-position: center center;
  }
  
  /* 手机版减少叠加层透明度，让背景更清晰，同时保留文字可读性 */
  body::before {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.20) 0%, rgba(15, 23, 42, 0.45) 100%);
  }
  
  /* 手机版 dashboard：cover 自动裁剪填满，适配屏幕 */
  body.dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"]) {
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    background-image: url('/images/homeban/bg-beach2.jpg') !important;
    background-repeat: no-repeat !important;
  }
  
  body.dashboard-body:not([data-view="about"]):not([data-view="membership"]):not([data-view="team"]):not([data-view="faqs"])::before {
    display: block !important;
  }

  .dashboard-body .workspace-card{
    height: auto;
    min-height: 120px;
  }

  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ============================================================
   📱 SMALL MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px){
  .dashboard-body h1{
    font-size: clamp(24px, 7vw, 36px);
  }

  .dashboard-body h2{
    font-size: clamp(18px, 6vw, 28px);
  }

  .dashboard-body .top-link{
    padding: 10px 12px;
    min-height: 44px;
  }

  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ============================================================
   ✅ DASHBOARD = PRE-LOGIN THEME (Match index/about/membership)
   ============================================================ */
.dashboard-body[data-view="about"],
.dashboard-body[data-view="membership"],
.dashboard-body[data-view="team"],
.dashboard-body[data-view="faqs"] {
  background: #fff !important;
  color: #666;
}

.dashboard-body .topbar{
  background: #fff;
  border-bottom: 1px solid #eee;
  box-shadow: none;
}

.dashboard-body .topbar .header-inner{
  height: 78px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  padding-left: calc(22px + var(--sidebar-base));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-sizing: border-box;
}

.dashboard-body .topbar .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #666;
  font-weight: 800;
}

.dashboard-body .topbar .brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:#ffd400;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #666;
}
.dashboard-body .topbar .brand-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.dashboard-body .topbar .brand-name{
  font-size: 18px;
  letter-spacing: .2px;
}

.dashboard-body .top.nav{
  display:flex;
  align-items:center;
  gap: 34px;
}

.dashboard-body .top-link{
  text-decoration:none;
  color:#666;
  font-size: 14px;
  opacity: .9;
  font-weight: 500;
}

.dashboard-body .top-link:hover{ opacity: 1; }
.dashboard-body .top-link.active{ font-weight: 700; }

/* Content aligned like pre-login */
.dashboard-body .content{
  padding: 30px 22px 50px;
  padding-left: calc(22px + var(--sidebar-base));
  max-width: 100%;
}

.dashboard-body .content > *{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.dashboard-body .page-image-strip{
  max-width: none;
  margin-left: -22px;
  margin-right: -22px;
  width: calc(100% + 44px);
  max-width: calc(100vw - var(--sidebar-base));
}

/* Desktop: ensure content padding is fixed */
@media (min-width: 901px){
  .dashboard-body .content{
    padding-left: calc(22px + var(--sidebar-base)) !important;
  }
  .dashboard-body .page-image-strip{
    margin-left: -22px !important;
    margin-right: -22px !important;
    width: calc(100% + 44px) !important;
    max-width: calc(100vw - var(--sidebar-base)) !important;
  }
}

/* Footer aligned like pre-login - will be overridden by desktop media query */
.dashboard-body .site-footer,
.dashboard-body .dashboard-footer{
  background:#000 !important;
  color:#fff !important;
  padding-top: 74px;
  padding-bottom: 52px;
  padding-right: 0;
  padding-left: calc(22px + var(--sidebar-base));
}

.dashboard-body .site-footer .footer-inner,
.dashboard-body .dashboard-footer .footer-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
  padding-left: calc(22px + var(--sidebar-base));
  box-sizing: border-box;
}

/* Desktop: ensure footer-inner padding is fixed */
@media (min-width: 901px){
  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner{
    padding-left: calc(22px + var(--sidebar-base)) !important;
  }
}

/* Buttons match pre-login */
.dashboard-body .btn,
.dashboard-body .faq-cta,
.dashboard-body .hero-actions .btn-dark,
.dashboard-body .hero-actions .btn-outline-light{
  border-radius: 999px;
  font-weight: 600;
}

/* Mobile alignment to match pre-login - no sidebar reserved space, slightly smaller for fit */
@media (max-width: 900px){
  .dashboard-body .topbar .header-inner{
    padding-left: 16px !important;
  }

  .dashboard-body .content,
  .dashboard-body main.content{
    padding: 16px 14px 28px !important;
    padding-left: 14px !important;
  }

  .dashboard-body .content > *{
    max-width: 100%;
  }

  .dashboard-body .page-image-strip{
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
  }

  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner{
    padding-left: 16px !important;
    padding-right: 16px;
  }
}

@media (max-width: 640px){
  .dashboard-body .topbar .header-inner{
    height: 64px;
    padding-left: 12px;
  }

  .dashboard-body .top-link{
    padding: 10px 12px;
    min-height: 44px;
  }

  .dashboard-body .content{
    padding: 16px 12px 28px;
  }

  .dashboard-body .site-footer .footer-inner,
  .dashboard-body .dashboard-footer .footer-inner{
    padding-left: 12px;
    padding-right: 12px;
  }
}