/* =============================================
   CUPIDIC DARK LUXURY — FULL LAYOUT + THEME OVERHAUL
   ============================================= */

/* ---------- ROOT VARIABLES ---------- */
:root {
  --onhct-bg: #07070d;
  --onhct-card: rgba(14, 14, 24, .97);
  --onhct-card-strong: #12121e;
  --onhct-primary: #a78bfa;
  --onhct-primary-soft: rgba(167, 139, 250, .1);
  --onhct-accent: #c4b5fd;
  --onhct-accent-soft: rgba(196, 181, 253, .08);
  --onhct-text: #eeeef3;
  --onhct-muted: #7e7e90;
  --onhct-subtle: #4e4e60;
  --onhct-border: #1f1f30;
  --onhct-border-soft: rgba(31, 31, 48, .6);

  --onhct-gradient-primary: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --onhct-gradient-cool: linear-gradient(135deg, #67e8f9 0%, #22d3ee 100%);
  --onhct-gradient-warm: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --onhct-gradient-pink: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
  --onhct-gradient-mint: linear-gradient(135deg, #34d399 0%, #10b981 100%);

  --onhct-shadow-sm: 0 2px 6px rgba(0, 0, 0, .5);
  --onhct-shadow-md: 0 8px 24px rgba(0, 0, 0, .6);
  --onhct-shadow-lg: 0 20px 50px rgba(0, 0, 0, .7);
  --onhct-shadow-glow: 0 14px 40px rgba(124, 58, 237, .2);
  --onhct-shadow: var(--onhct-shadow-md);

  --van-text-color: #eeeef3;
  --van-text-color-2: #7e7e90;
  --van-text-color-3: #4e4e60;
  --van-border-color: #1f1f30;
  --van-background: #07070d;
  --van-background-2: #12121e;
  --van-background-3: #1a1a2c;
  --van-active-color: #1f1f30;
}

/* ---------- GLOBAL ---------- */
html, body {
  background: #07070d !important;
  color: #eeeef3;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

#app { background: transparent; }

::selection {
  background: rgba(167, 139, 250, .25);
  color: #eeeef3;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #07070d; }
::-webkit-scrollbar-thumb { background: #1f1f30; border-radius: 3px; }

/* ============================================================
   AUTH PAGES — collage bg, glass card, luxury
   ============================================================ */

.auth-mobile::before,
.mobile-shell.auth-mobile::before {
  background:
    var(--onhct-auth-bg-collage) center center / cover no-repeat,
    linear-gradient(180deg, rgba(7,7,13,.65), rgba(7,7,13,.8) 48%, rgba(7,7,13,.92)) !important;
}

.auth-mobile::after,
.mobile-shell.auth-mobile::after {
  background: linear-gradient(180deg, rgba(124,58,237,.04), rgba(0,0,0,.3)) !important;
}

/* ---- LOGIN ---- */
.login-mobile {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 20px !important;
  gap: 0 !important;
  position: relative;
}

.login-mobile .login-footer .footer-row:first-child {
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 100 !important;
}

.login-mobile .login-footer .footer-row:first-child .footer-link {
  background: rgba(14, 14, 24, .85) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 20px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
  color: #7e7e90 !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(8px) !important;
}

.login-mobile .login-footer .footer-row:first-child .footer-link:hover,
.login-mobile .login-footer .footer-row:first-child .footer-link.active {
  color: #a78bfa !important;
  border-color: rgba(167,139,250,.3) !important;
  background: rgba(14, 14, 24, .95) !important;
}

.login-mobile .login-footer .footer-row:first-child .footer-separator {
  display: none !important;
}

.login-hero { display: none !important; }

.auth-mobile .login-card.glass-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 120px rgba(124, 58, 237, .06) !important;
  backdrop-filter: blur(24px) !important;
}

.login-card {
  width: 100%;
  max-width: 380px;
  padding: 36px 28px 28px !important;
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 120px rgba(124, 58, 237, .06) !important;
  backdrop-filter: blur(24px) !important;
  position: relative;
  z-index: 1;
}

.login-card-head h2 {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 36px !important;
  font-weight: 900;
  letter-spacing: .02em;
  text-align: center;
}

[data-v-c9058dbc] .van-cell {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #1f1f30 !important;
  border-radius: 0 !important;
  margin-bottom: 0;
  padding: 14px 0 10px !important;
  transition: border-color .2s;
}

[data-v-c9058dbc] .van-cell:focus-within { border-bottom-color: #a78bfa !important; }

[data-v-c9058dbc] .van-field__label {
  color: #7e7e90 !important;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

[data-v-c9058dbc] .van-field__control { color: #eeeef3 !important; font-size: 15px; }
[data-v-c9058dbc] .van-field__control::placeholder { color: #3a3a50 !important; }

.login-submit { margin-top: 32px !important; }

.login-submit .van-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border: none !important;
  border-radius: 16px !important;
  height: 52px !important;
  box-shadow: 0 12px 36px rgba(124, 58, 237, .3) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .04em;
}

.login-links {
  color: #7e7e90 !important;
  margin-top: 24px !important;
  gap: 20px !important;
  font-size: 13px !important;
}

.login-links a { color: #a78bfa !important; font-weight: 600; transition: color .2s; }
.login-links a:hover { color: #c4b5fd !important; }
.login-split { display: none !important; }

/* Footer */
.login-footer {
  position: relative;
  z-index: 1;
  margin-top: 40px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.login-mobile .login-footer .footer-row:nth-child(2) {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
}

.login-mobile .login-footer .footer-row:nth-child(2) .footer-separator { display: none !important; }

.login-mobile .login-footer .footer-row:nth-child(2) .footer-link {
  color: #4e4e60 !important;
  font-size: 11px !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.login-mobile .login-footer .footer-row:nth-child(2) .footer-link:hover { color: #a78bfa !important; }

.login-mobile .login-footer .footer-copy {
  margin-top: 8px !important;
  color: #2a2a3a !important;
  font-size: 9px !important;
  text-align: center !important;
  letter-spacing: .04em;
}

.footer-link { color: #4e4e60 !important; font-size: 11px !important; font-weight: 600; transition: color .2s; }
.footer-link:hover, .footer-link.active { color: #a78bfa !important; }
.footer-separator { color: #1f1f30 !important; }
.footer-copy { color: #3a3a50 !important; font-size: 10px !important; }

/* ---- REGISTER ---- */
.register-mobile {
  min-height: 100vh;
  padding: 0 !important;
  gap: 0 !important;
  position: relative;
}

.register-card {
  width: 100%;
  max-width: 480px !important;
  padding: 32px 24px 28px !important;
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 100px rgba(124, 58, 237, .06) !important;
  backdrop-filter: blur(24px) !important;
  position: relative;
  z-index: 1;
}

.register-card h1 {
  color: #eeeef3 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 22px !important;
  letter-spacing: .01em;
  margin-bottom: 6px !important;
}

.avatar-mark {
  background: rgba(30, 30, 46, .8) !important;
  box-shadow: none !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  color: #a78bfa !important;
}

.avatar-mark span {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 50% !important;
}

.section-label {
  color: #7e7e90 !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  padding-bottom: 4px;
  border-bottom: 1px solid #1f1f30;
  margin-top: 20px !important;
}

[data-v-999ba876] .van-cell.register-field {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #1f1f30 !important;
  border-radius: 0 !important;
  padding: 12px 0 8px !important;
  transition: border-color .2s;
}

[data-v-999ba876] .van-cell.register-field:focus-within { border-bottom-color: #a78bfa !important; }

[data-v-999ba876] .register-field .van-field__label {
  color: #7e7e90 !important;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

[data-v-999ba876] .register-field .van-field__control { color: #eeeef3 !important; font-size: 14px; }
[data-v-999ba876] .register-field .van-field__control::placeholder { color: #3a3a50 !important; }
[data-v-999ba876] .register-field .van-field__right-icon { color: #7e7e90 !important; }

.quick-country-row { margin-top: 8px !important; gap: 8px !important; }

.quick-country-row button {
  border: 1px solid #1f1f30 !important;
  border-radius: 10px !important;
  color: #7e7e90 !important;
  background: rgba(20, 20, 32, .6) !important;
  font-size: 12px !important;
  font-weight: 700;
  transition: all .2s;
}

.quick-country-row button:hover { border-color: #a78bfa !important; color: #c4b5fd !important; }

.quick-country-row button.active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
}

.email-code-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700;
}

.email-field-wrap span { color: #4e4e60 !important; font-size: 10px !important; }

.submit-wrap { margin-top: 28px !important; }

.submit-wrap .van-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border: none !important;
  border-radius: 16px !important;
  height: 52px !important;
  box-shadow: 0 12px 36px rgba(124, 58, 237, .3) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.register-dots { display: none !important; }

[data-v-999ba876] .login-links { margin-top: 20px !important; }
[data-v-999ba876] .login-links a { color: #a78bfa !important; font-weight: 600; }

.option-sheet {
  background: #12121e !important;
  border-radius: 24px 24px 0 0 !important;
}

.sheet-head strong { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; }
.sheet-head button { color: #7e7e90 !important; background: rgba(26, 26, 44, .8) !important; border-radius: 50% !important; }

.option-list button {
  border-color: #1f1f30 !important;
  background: rgba(20, 20, 32, .6) !important;
  color: #c4b5fd !important;
  border-radius: 12px !important;
  transition: all .2s;
}

.option-list button:hover { border-color: #a78bfa !important; }

.option-list button.active {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .25) !important;
}

/* ---- FORGOT PASSWORD ---- */
.forgot-mobile {
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  position: relative;
}

.forgot-card {
  width: 100%;
  max-width: 380px !important;
  padding: 36px 28px 28px !important;
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 100px rgba(124, 58, 237, .06) !important;
  position: relative;
  z-index: 1;
}

.forgot-card h1 { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 24px !important; }
.forgot-card p { color: #7e7e90 !important; font-size: 13px !important; }

.forgot-mark {
  background: rgba(26, 26, 44, .8) !important;
  box-shadow: none !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 50% !important;
  color: #a78bfa !important;
}

.forgot-mark span { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 50% !important; }

[data-v-ee70ce5c] .van-cell.forgot-field {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #1f1f30 !important;
  border-radius: 0 !important;
  padding: 12px 0 8px !important;
  transition: border-color .2s;
}

[data-v-ee70ce5c] .van-cell.forgot-field:focus-within { border-bottom-color: #a78bfa !important; }

[data-v-ee70ce5c] .forgot-field .van-field__label {
  color: #7e7e90 !important;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

[data-v-ee70ce5c] .forgot-field .van-field__control { color: #eeeef3 !important; }
[data-v-ee70ce5c] .forgot-field .van-field__control::placeholder { color: #3a3a50 !important; }

[data-v-ee70ce5c] .submit-wrap .van-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border: none !important;
  border-radius: 16px !important;
  height: 52px !important;
  box-shadow: 0 12px 36px rgba(124, 58, 237, .3) !important;
}

.notice-card {
  border-color: #1f1f30 !important;
  background: rgba(26, 26, 44, .6) !important;
  color: #7e7e90 !important;
  border-radius: 14px !important;
}

[data-v-ee70ce5c] .login-links a { color: #a78bfa !important; font-weight: 600; }

/* ---- RESET PASSWORD ---- */
.login-mobile[data-v-fa606153] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
}

.login-card[data-v-fa606153] {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 28px !important;
  max-width: 380px !important;
  padding: 36px 28px !important;
}

.login-badge[data-v-fa606153] { color: #7e7e90 !important; }
[data-v-fa606153] h1 { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; }
[data-v-fa606153] p { color: #7e7e90 !important; }
[data-v-fa606153] .login-links, [data-v-fa606153] .login-links a { color: #a78bfa !important; }

/* ============================================================
   MEMBER SHELL — minimal header, floating tabbar
   ============================================================ */
.member-shell::before { background: #07070d !important; }
.member-shell::after { background: none !important; }

.member-header {
  background: rgba(10, 10, 18, .88) !important;
  border-bottom: none !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  padding: 10px 14px !important;
  gap: 10px !important;
}

.member-title {
  color: #eeeef3 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  font-size: 16px !important;
}

.member-subtitle {
  color: #a78bfa !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.member-back-button {
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .7) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 12px !important;
  height: 36px !important;
  font-size: 13px !important;
}

.member-logo {
  background: rgba(26, 26, 44, .7) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .15) !important;
  border-radius: 14px !important;
  width: 36px !important;
  height: 36px !important;
}

.member-icon-button {
  color: #a78bfa !important;
  background: rgba(26, 26, 44, .7) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 12px !important;
  width: 36px !important;
  height: 36px !important;
}

.member-language-button {
  border-color: #1f1f30 !important;
  color: #7e7e90 !important;
  border-radius: 12px !important;
  height: 36px !important;
  font-size: 12px !important;
}

.member-language-button em { color: #a78bfa !important; }

/* Tabbar — slim floating pill */
.member-tabbar {
  border: 1px solid #1f1f30 !important;
  background: rgba(10, 10, 18, .94) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 60px rgba(124, 58, 237, .04) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  border-radius: 24px !important;
  height: 56px !important;
  bottom: 14px !important;
  padding: 5px !important;
}

.member-tabbar-item {
  color: #4e4e60 !important;
  border-radius: 18px !important;
  gap: 2px !important;
}

.member-tabbar-item::before {
  background: rgba(26, 26, 44, .6) !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}

.member-tabbar-item.active { color: #c4b5fd !important; }

.member-tabbar-item.active .tab-icon {
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .4) !important;
  border-radius: 10px !important;
  width: 24px !important;
  height: 24px !important;
}

.member-tabbar-item.active .tab-label { color: #c4b5fd !important; font-weight: 700 !important; }

.tab-icon { width: 24px !important; height: 24px !important; }
.tab-label { font-size: 10px !important; }

.member-dot { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }

/* Notice card */
.member-notice-card {
  border-color: #1f1f30 !important;
  background: rgba(10, 10, 18, .96) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .6) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 20px !important;
}

.notice-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 14px !important; }
.notice-action { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 999px !important; }
.notice-close { color: #7e7e90 !important; background: rgba(26, 26, 44, .7) !important; }
.notice-head strong { color: #eeeef3 !important; }
.notice-head span { color: #4e4e60 !important; }
.notice-main p { color: #7e7e90 !important; }

/* ============================================================
   HOME / DISCOVER — card-only grid, no bordered containers
   ============================================================ */
.home-shell {
  background: #07070d !important;
  gap: 12px !important;
}

.notification-strip {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 14px !important;
  color: #c4b5fd !important;
  box-shadow: none !important;
  margin: 0 0 2px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}

.notification-strip button { color: #a78bfa !important; }

.search-panel .van-search__content {
  border: 1px solid #1f1f30 !important;
  background: rgba(14, 14, 24, .9) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}

.search-panel .van-field__control { color: #eeeef3 !important; }
.search-panel .van-field__control::placeholder { color: #4e4e60 !important; }

.search-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
  border-radius: 14px !important;
}

/* Discover cards — tall photo, overlay name, floating action buttons */
.discover-card {
  border: none !important;
  background: transparent !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
  border-radius: 18px !important;
  overflow: hidden;
}

.photo-button {
  height: 240px !important;
  padding: 0 !important;
  border-radius: 18px !important;
}

.photo-button img {
  border-radius: 18px !important;
  background: #1a1a2c !important;
}

.card-body {
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px 10px 8px !important;
  background: linear-gradient(transparent, rgba(7, 7, 13, .92)) !important;
  border-radius: 0 !important;
}

.card-name-button strong {
  color: #eeeef3 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
  font-size: 13px !important;
}

.card-name-button strong em { color: #7e7e90 !important; }

.card-actions {
  position: absolute !important;
  bottom: 34px;
  left: 0;
  right: 0;
  padding: 0 8px !important;
  background: transparent !important;
}

.card-actions button {
  color: #7e7e90 !important;
  background: rgba(14, 14, 24, .75) !important;
  box-shadow: none !important;
  border: 1px solid #1f1f3050 !important;
  border-radius: 8px !important;
  backdrop-filter: blur(8px);
  height: 26px !important;
  font-size: 11px !important;
}

.card-actions button:first-child {
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important;
  border: none !important;
}

/* Pagination */
.member-pagination {
  border: 1px solid #1f1f30 !important;
  background: rgba(10, 10, 18, .97) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  padding: 10px !important;
}

.page-step {
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .7) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}

.page-number { color: #7e7e90 !important; background: rgba(26, 26, 44, .5) !important; }

.page-number.active {
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important;
}

.page-summary { color: #4e4e60 !important; }
.page-summary strong { color: #c4b5fd !important; }

.sheet-title { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; }
.gift-close { color: #7e7e90 !important; background: rgba(26, 26, 44, .7) !important; border-radius: 50% !important; }
.gift-item { border-color: #1f1f30 !important; color: #c4b5fd !important; background: rgba(20, 20, 32, .5) !important; border-radius: 16px !important; }
.gift-item span { color: #a78bfa !important; }

/* ============================================================
   PROFILE PAGE — avatar-centered layout, card grid
   ============================================================ */
.profile-shell { background: #07070d !important; }

.profile-hero {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
  border-radius: 20px !important;
  padding: 20px !important;
}

.profile-hero::before { display: none !important; }

.avatar-ring {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
  padding: 5px !important;
}

.avatar-placeholder {
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .2) !important;
}

.avatar-placeholder-male { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; }
.avatar-placeholder-female { background: linear-gradient(135deg, #f472b6, #ec4899) !important; }

.camera-badge {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 6px 14px rgba(124, 58, 237, .4) !important;
}

.hero-name-row h2 { color: #eeeef3 !important; }

.member-level-chip {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .2) !important;
}

.hero-stat-card {
  border-color: #1f1f30 !important;
  background: rgba(14, 14, 24, .8) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}

.hero-stat-card-wide { border-radius: 14px !important; }
.stat-label { color: #7e7e90 !important; }
.hero-stat-card strong { color: #eeeef3 !important; }

.first-recharge-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, .3), rgba(88, 28, 135, .5)) !important;
  box-shadow: 0 12px 28px rgba(124, 58, 237, .2) !important;
  border-radius: 20px !important;
}

.first-recharge-card::after { background: linear-gradient(110deg, rgba(255,255,255,.08), transparent 34%) !important; }
.first-recharge-badge { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; }
.first-recharge-copy strong { color: #eeeef3 !important; }
.first-recharge-price { color: #c4b5fd !important; }
.first-recharge-copy p { color: rgba(238, 238, 243, .6) !important; }

.first-recharge-action {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
}

.profile-menu-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  padding: 14px !important;
}

.menu-item {
  background: rgba(20, 20, 32, .5) !important;
  border-radius: 14px !important;
  border: none !important;
  transition: background .2s;
}

.menu-item:active { background: rgba(26, 26, 44, .8) !important; }
.menu-icon { border-radius: 12px !important; }
.menu-copy strong { color: #eeeef3 !important; }
.menu-copy span { color: #7e7e90 !important; }
.menu-arrow { color: #4e4e60 !important; }

/* ============================================================
   USER DETAIL PAGE — dark cards, info grid
   ============================================================ */
.user-detail-shell { background: #07070d !important; }

.profile-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.avatar-frame {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
}

.profile-copy h1 { color: #eeeef3 !important; }

.profile-info-card {
  border-color: #1f1f30 !important;
  background: rgba(14, 14, 24, .8) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}

.info-copy span { color: #7e7e90 !important; }
.info-copy strong { color: #eeeef3 !important; }

.detail-panel {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.section-row h2, .about-panel h2 { color: #eeeef3 !important; }
.section-row > span { color: #a78bfa !important; }

.gallery-tile { background: #1a1a2c !important; box-shadow: none !important; border-radius: 12px !important; }

.empty-panel {
  background: rgba(14, 14, 24, .5) !important;
  color: #4e4e60 !important;
  box-shadow: none !important;
}

.about-panel p { color: #7e7e90 !important; }

.moment-card {
  background: rgba(14, 14, 24, .8) !important;
  box-shadow: none !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 16px !important;
}

.moment-cover { background: #1a1a2c !important; }
.moment-text { color: #eeeef3 !important; }
.moment-foot { color: #7e7e90 !important; }
.love-count { color: #a78bfa !important; }

.round-button {
  background: rgba(14, 14, 24, .97) !important;
  color: #a78bfa !important;
  box-shadow: none !important;
  border: 1px solid #1f1f30 !important;
}

.edit-display-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
}

/* ============================================================
   MESSAGES / INBOX — dark list, pill filters
   ============================================================ */
.inbox-shell { background: #07070d !important; }

.toolbar-pill {
  background: rgba(14, 14, 24, .8) !important;
  color: #7e7e90 !important;
  box-shadow: none !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 14px !important;
}

.toolbar-pill.active {
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
  border-color: transparent !important;
}

.toolbar-pill em { background: rgba(167, 139, 250, .3) !important; color: #a78bfa !important; }
.toolbar-pill.active em { background: rgba(255, 255, 255, .25) !important; color: #fff !important; }

.notice-strip {
  background: rgba(14, 14, 24, .97) !important;
  color: #c4b5fd !important;
  border: 1px solid #1f1f30 !important;
}

.notice-dot { background: #a78bfa !important; }
.notice-action { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; color: #fff !important; }

.message-list {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.message-row {
  background: transparent !important;
  border-bottom: 1px solid #1f1f30 !important;
}

.message-row:active { background: rgba(26, 26, 44, .5) !important; }
.message-row.locked { background: rgba(124, 58, 237, .05) !important; }

.avatar-fallback { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }

.unread-badge { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }
.online-status-dot.online { background: #34d399 !important; }
.online-status-dot.offline { background: #ef4444 !important; }

.message-name { color: #eeeef3 !important; }
.message-time { color: #4e4e60 !important; }
.message-preview { color: #7e7e90 !important; }

.mini-tag.gold { color: #a78bfa !important; background: rgba(167, 139, 250, .12) !important; }
.mini-tag.rose { color: #f472b6 !important; background: rgba(244, 114, 182, .12) !important; }
.mini-tag.warn { color: #fbbf24 !important; background: rgba(251, 191, 36, .12) !important; }

.row-arrow { color: #4e4e60 !important; }

.delete-conversation-button {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, .1) !important;
}

.return-gift-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
}

.locked-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  color: #c4b5fd !important;
  border-radius: 20px !important;
}

.locked-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }
.locked-card strong { color: #eeeef3 !important; }
.locked-card p { color: #7e7e90 !important; }
.locked-card button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }

/* ============================================================
   IM / CHAT — dark messenger style
   ============================================================ */
.chat-shell { background: #0a0a14 !important; color: #eeeef3 !important; }

.chat-header {
  background: rgba(10, 10, 18, .95) !important;
  border-bottom: 1px solid #1f1f30 !important;
  backdrop-filter: blur(20px) !important;
}

.back-button {
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .6) !important;
}

.chat-title strong { color: #eeeef3 !important; }
.tag-pill { color: #a78bfa !important; background: rgba(167, 139, 250, .15) !important; }
.tag-pill.rose { color: #f472b6 !important; background: rgba(244, 114, 182, .15) !important; }

.chat-icons button {
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .6) !important;
}

.contact-strip {
  background: rgba(10, 10, 18, .95) !important;
  border-bottom: 1px solid #1f1f30 !important;
}

.contact-strip button {
  border-color: #1f1f30 !important;
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .6) !important;
}

.chat-body { background: #07070d !important; }

.message-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; }

.bubble {
  background: rgba(26, 26, 44, .9) !important;
  color: #eeeef3 !important;
  box-shadow: none !important;
  border-radius: 16px 16px 16px 4px !important;
}

.bubble::before { background: rgba(26, 26, 44, .9) !important; }

.message-item.mine .bubble {
  background: linear-gradient(135deg, rgba(124, 58, 237, .5), rgba(167, 139, 250, .4)) !important;
  color: #eeeef3 !important;
  box-shadow: none !important;
}

.message-item.mine .bubble::before { background: rgba(124, 58, 237, .5) !important; }

.message-name { color: #7e7e90 !important; }
.message-meta { color: #4e4e60 !important; }

.translation-box {
  background: rgba(26, 26, 44, .6) !important;
  color: #7e7e90 !important;
  border-radius: 10px !important;
}

.translate-icon-button {
  color: #a78bfa !important;
  background: rgba(26, 26, 44, .6) !important;
  box-shadow: none !important;
}

.gift-message-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  color: #eeeef3 !important;
  border-radius: 14px !important;
}

.gift-message-card span { color: #a78bfa !important; }

.system-line { color: #4e4e60 !important; }

.composer-preview {
  background: rgba(14, 14, 24, .97) !important;
  color: #c4b5fd !important;
  border-top: 1px solid #1f1f30 !important;
}

.composer-preview button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }

.composer {
  background: rgba(10, 10, 18, .98) !important;
  border-top: 1px solid #1f1f30 !important;
}

.composer-input { background: rgba(26, 26, 44, .6) !important; border-radius: 999px !important; overflow: hidden; }
.composer-input .van-cell { background: transparent !important; }

.send-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }
.tool-icon { color: #7e7e90 !important; }

.emoji-panel, .tool-panel, .packet-panel {
  background: #12121e !important;
  border-top: 1px solid #1f1f30 !important;
}

.tool-card {
  background: rgba(26, 26, 44, .6) !important;
  color: #eeeef3 !important;
  border-radius: 12px !important;
}

.tool-card.active { color: #fff !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }

.comment-sheet { background: #12121e !important; }
.comment-item { background: rgba(26, 26, 44, .5) !important; border-radius: 12px !important; }
.comment-user { color: #c4b5fd !important; }
.comment-text { color: #7e7e90 !important; }

.video-review-panel {
  background: rgba(10, 10, 18, .98) !important;
  border-top: 1px solid #1f1f30 !important;
}

.upload-progress {
  background: rgba(14, 14, 24, .97) !important;
  border-top: 1px solid #1f1f30 !important;
  color: #c4b5fd !important;
}

.history-loader button {
  background: rgba(26, 26, 44, .7) !important;
  border-color: #1f1f30 !important;
  color: #c4b5fd !important;
  box-shadow: none !important;
}

/* ============================================================
   ZONE — dark social feed
   ============================================================ */
.zone-shell { background: #07070d !important; }

.zone-toolbar .van-search__content {
  border: 1px solid #1f1f30 !important;
  background: rgba(14, 14, 24, .9) !important;
  box-shadow: none !important;
}

.zone-toolbar .van-field__control { color: #eeeef3 !important; }
.zone-toolbar .van-field__control::placeholder { color: #4e4e60 !important; }

.search-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
}

.toolbar-publish-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .3) !important;
}

.panel-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}

.zone-summary { color: #7e7e90 !important; }

.zone-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}

.zone-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; }
.zone-user { color: #eeeef3 !important; }
.zone-text { color: #eeeef3 !important; }
.zone-text.muted { color: #4e4e60 !important; }

.translation-box { background: rgba(26, 26, 44, .6) !important; color: #7e7e90 !important; }

.inline-translate-button {
  border-color: rgba(167, 139, 250, .3) !important;
  color: #a78bfa !important;
  background: rgba(26, 26, 44, .6) !important;
}

.photo-button { background: #1a1a2c !important; border-radius: 12px !important; }

.action-pill {
  border-color: #1f1f30 !important;
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .5) !important;
  border-radius: 999px !important;
}

.action-pill.active {
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-color: transparent !important;
}

.gift-action {
  color: #a78bfa !important;
  border-color: rgba(167, 139, 250, .3) !important;
  background: rgba(26, 26, 44, .5) !important;
}

.comment-sheet { background: #12121e !important; }
.comment-item { background: rgba(26, 26, 44, .5) !important; }
.comment-user { color: #c4b5fd !important; }
.comment-text { color: #7e7e90 !important; }

/* ============================================================
   WALLET — dark records, purple accents
   ============================================================ */
.wallet-shell { background: #07070d !important; }

.wallet-record-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
}

.wallet-record-card h3 { color: #eeeef3 !important; }
.subtitle { color: #7e7e90 !important; }

.wallet-shell .van-tab--active { color: #a78bfa !important; }
.wallet-shell .van-tabs__line { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }

.record-item {
  background: rgba(26, 26, 44, .5) !important;
  border-radius: 14px !important;
}

.record-media { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 12px !important; }
.record-media.gold { background: linear-gradient(135deg, #fbbf24, #f97316) !important; }
.record-media.mint { background: linear-gradient(135deg, #34d399, #10b981) !important; }
.record-media.blue { background: linear-gradient(135deg, #60a5fa, #2563eb) !important; }

.record-title-row strong { color: #eeeef3 !important; }
.record-amount { color: #a78bfa !important; }
.record-amount.income { color: #34d399 !important; }
.record-main p { color: #7e7e90 !important; }
.record-meta { color: #4e4e60 !important; }

/* ============================================================
   EDIT / SETTINGS / PASSWORD / PUBLISH / ABOUT / RECHARGE
   ============================================================ */
.edit-shell, .password-shell, .publish-shell, .about-shell, .recharge-shell { background: #07070d !important; }

.edit-card, .page-header, .publish-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

.edit-shell .van-cell, .password-shell .van-cell, .publish-shell .van-cell {
  background: transparent !important;
  border-bottom: 1px solid #1f1f30 !important;
  border-radius: 0 !important;
  color: #eeeef3 !important;
}

.edit-shell .van-cell:focus-within, .password-shell .van-cell:focus-within { border-bottom-color: #a78bfa !important; }

.about-shell .van-tab--active { color: #a78bfa !important; }
.about-shell .van-tabs__line { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }

.about-card, .about-panel {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 20px !important;
}

.about-head h2 { color: #eeeef3 !important; }
.about-content { color: #7e7e90 !important; }

.recharge-shell .van-cell, .preset-list button {
  background: rgba(14, 14, 24, .97) !important;
  border-color: #1f1f30 !important;
  color: #eeeef3 !important;
  border-radius: 14px !important;
}

.save-row .van-button, .save-action .van-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border: none !important;
  border-radius: 16px !important;
}

.field-card { background: rgba(14, 14, 24, .8) !important; border-color: #1f1f30 !important; border-radius: 14px !important; }
.switch-card { background: rgba(14, 14, 24, .8) !important; border-color: #1f1f30 !important; border-radius: 14px !important; }

/* Settings / Gifts / Relations */
.panel-card .van-cell {
  background: transparent !important;
  border-bottom: 1px solid #1f1f3050 !important;
  color: #eeeef3 !important;
}

.section-title { color: #eeeef3 !important; }
.settings-group { background: rgba(14, 14, 24, .97) !important; border-color: #1f1f30 !important; border-radius: 20px !important; }

/* Meet Display */
.home-display-shell { background: #07070d !important; }
.display-page-header { background: rgba(10, 10, 18, .88) !important; border-color: #1f1f30 !important; }
.display-card { background: rgba(14, 14, 24, .97) !important; border-color: #1f1f30 !important; border-radius: 20px !important; }

/* ============================================================
   GLOBAL VANT OVERRIDES
   ============================================================ */
.van-cell { background: rgba(14, 14, 24, .97) !important; color: #eeeef3 !important; }
.van-cell__title { color: #eeeef3 !important; }
.van-cell__value { color: #7e7e90 !important; }
.van-cell__label { color: #4e4e60 !important; }
.van-field__control { color: #eeeef3 !important; }
.van-field__control::placeholder { color: #3a3a50 !important; }
.van-field__label { color: #7e7e90 !important; }
.van-field__right-icon { color: #7e7e90 !important; }
.van-field__left-icon { color: #7e7e90 !important; }

.van-button--primary {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-color: transparent !important;
}

.van-button--default {
  background: rgba(26, 26, 44, .7) !important;
  border-color: #1f1f30 !important;
  color: #c4b5fd !important;
}

.van-popup { background: #12121e !important; }
.van-popup--bottom { background: #12121e !important; }
.van-overlay { background: rgba(0, 0, 0, .75) !important; }

.van-action-sheet { background: #12121e !important; }
.van-action-sheet__item { color: #eeeef3 !important; }
.van-action-sheet__cancel { color: #7e7e90 !important; background: rgba(14, 14, 24, .97) !important; }

.van-picker { background: #12121e !important; }
.van-picker__toolbar { background: #1a1a2c !important; }
.van-picker__title { color: #eeeef3 !important; }
.van-picker__confirm { color: #a78bfa !important; }
.van-picker__cancel { color: #7e7e90 !important; }
.van-picker-column__item { color: #4e4e60 !important; }
.van-picker-column__item--selected { color: #eeeef3 !important; }

.van-dialog { background: #12121e !important; border-radius: 24px !important; }
.van-dialog__header { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; }
.van-dialog__message { color: #7e7e90 !important; }
.van-dialog__confirm { color: #a78bfa !important; }
.van-dialog__cancel { color: #7e7e90 !important; }

.van-toast { background: rgba(14, 14, 24, .97) !important; color: #eeeef3 !important; }

.van-search__content { background: rgba(14, 14, 24, .9) !important; border-radius: 14px !important; }

.van-nav-bar { background: rgba(10, 10, 18, .88) !important; }
.van-nav-bar__title { color: #eeeef3 !important; font-weight: 700 !important; }
.van-nav-bar__left .van-icon, .van-nav-bar__right .van-icon { color: #a78bfa !important; }

.van-tabbar { background: rgba(10, 10, 18, .94) !important; }
.van-tab { color: #4e4e60 !important; }
.van-tab--active { color: #a78bfa !important; }
.van-tabs__line { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; }
.van-tabs__nav { background: rgba(10, 10, 18, .94) !important; }
.van-loading__text { color: #7e7e90 !important; }
.van-empty__description { color: #4e4e60 !important; }
.van-image-preview { background: rgba(0, 0, 0, .95) !important; }

/* ============================================================
   RESPONSIVE DESKTOP
   ============================================================ */
@media (min-width: 900px) {
  .login-mobile {
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 480px !important;
    min-height: 100vh;
  }

  .login-hero {
    display: flex !important;
    position: relative;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(167, 139, 250, .04));
  }

  .login-card { max-width: 400px !important; margin: auto; border-radius: 32px !important; }

  .register-mobile { padding: clamp(32px, 5vh, 56px) clamp(48px, 8vw, 120px) 20px !important; }
  .forgot-mobile { padding: clamp(32px, 5vh, 56px) clamp(48px, 8vw, 120px) 20px !important; }

  .member-tabbar { width: min(calc(100% - 48px), 900px) !important; }

  .discover-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; }
  .photo-button { height: 260px !important; }
}

@media (max-width: 360px) {
  .login-card { padding: 28px 20px !important; }
  .register-card { padding: 24px 16px !important; }
}