/* KK Dating - Main Stylesheet
 *
 * All styles consolidated into dark-theme-v2.css:
 *   - Custom theme variables + Vant dark overrides + auth page styles
 *   - Dark-theme patches (kk-dark-fixes, kk-image-fixes, etc.)
 *   - Login header UI (kk-login-header, kk-login-header-avatar)
 *   - Login input colors + selection fixes
 *   - Member sidebar layout
 *   - UI polish + enhancements (global * transition removed)
 */

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

/* ---------- ROOT VARIABLES ---------- */

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

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

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

  --kkdating-auth-bg-collage: url(/local-assets/auth/member-auth-bg.jpg);

  --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 { /* overridden below by kk-login-selection-fix */
  background: #a78bfa;
  color: #14141f;
}

::-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,
.auth-mobile::before,
.mobile-shell.auth-mobile:before,
.mobile-shell.auth-mobile::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background:
    var(--kkdating-auth-bg-collage) center center / cover no-repeat !important;
  z-index: 0;
}

/* Dark overlay on top of background image */

.mobile-shell.auth-mobile::after,
.auth-mobile::after {
  content: '' !important;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,7,13,.45) 0%, rgba(7,7,13,.7) 60%, rgba(7,7,13,.88) 100%) !important;
  z-index: 0;
}

/* ---- LOGIN ---- */

.login-mobile {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative;
  overflow: visible !important;
}

/* Language selector — HIDDEN in footer, header has LangSwitcher */

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

/* Login hero: centered brand text */

.login-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 24px 12px !important;
  width: 100% !important;
  position: relative;
  z-index: 1;
  text-align: center;
}

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

.login-hero h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: .02em !important;
  text-align: center !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.login-hero p {
  color: rgba(255,255,255,.65) !important;
  font-size: 14px !important;
  text-align: center !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
}

/* Glass card — transparent, no background */

.auth-mobile .login-card.glass-card,
.login-card {
  width: 100% !important;
  max-width: 400px !important;
  padding: 28px 24px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

.login-card h2,
.login-card-head h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700;
  color: #eeeef3 !important;
  text-align: center;
  margin-bottom: 20px !important;
  display: none !important; /* hide — hero already has brand */
}

/* Login form fields: white background inputs */

.login-card .van-cell,
.login-mobile .van-cell {
  background: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  border-radius: 10px !important;
  margin-bottom: 10px !important;
  padding: 12px 16px !important;
  transition: background .2s;
}

.login-card .van-cell:focus-within,
.login-mobile .van-cell:focus-within {
  background: #fff !important;
}

.login-card .van-field__label,
.login-mobile .van-field__label {
  color: #666 !important;
  font-size: 12px !important;
  font-weight: 600;
}

.login-card .van-field__control,
.login-mobile .van-field__control {
  color: #1a1a1a !important;
  font-size: 15px;
}

.login-card .van-field__control::placeholder,
.login-mobile .van-field__control::placeholder {
  color: #999 !important;
}

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

.login-submit .van-button {
  background: linear-gradient(135deg, #ec4899, #db2777) !important;
  border: none !important;
  border-radius: 12px !important;
  height: 48px !important;
  box-shadow: 0 8px 24px rgba(236,72,153,.3) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .02em;
}

/* Login links — with visible separator */

.login-links {
  color: rgba(255,255,255,.5) !important;
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 13px !important;
}

.login-links a {
  color: rgba(255,255,255,.7) !important;
  font-weight: 500;
  transition: color .2s;
  padding: 4px 0;
}

.login-links a:hover { color: #ec4899 !important; }

.login-split {
  display: inline-block !important;
  width: 1px !important;
  height: 14px !important;
  background: rgba(255,255,255,.2) !important;
  margin: 0 14px !important;
}

/* Footer — centered under login card */

.login-footer,
.register-footer,
.forgot-footer {
  position: relative;
  z-index: 1;
  margin-top: 20px !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: none !important;
  max-width: 400px;
  width: 100%;
  text-align: center;
}

/* Links row — right-aligned text style on ALL auth pages */

.login-mobile .login-footer .footer-row:nth-child(2),
.register-mobile .register-footer .footer-row:nth-child(2),
.forgot-mobile .forgot-footer .footer-row:nth-child(2) {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
}

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

.login-mobile .login-footer .footer-row:nth-child(2) .footer-link,
.register-mobile .register-footer .footer-row:nth-child(2) .footer-link,
.forgot-mobile .forgot-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,
.register-mobile .register-footer .footer-row:nth-child(2) .footer-link:hover,
.forgot-mobile .forgot-footer .footer-row:nth-child(2) .footer-link:hover { color: #a78bfa !important; }

.login-mobile .login-footer .footer-copy,
.register-mobile .register-footer .footer-copy,
.forgot-mobile .forgot-footer .footer-copy {
  margin-top: 6px !important;
  color: #2a2a3a !important;
  font-size: 9px !important;
  text-align: right !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;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  gap: 0 !important;
  position: relative;
  overflow: visible !important;
}

.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;
}

.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;
}

.van-cell.register-field:focus-within { border-bottom-color: #a78bfa !important; }

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

.register-field .van-field__control { color: #eeeef3 !important; font-size: 14px; }

.register-field .van-field__control::placeholder { color: #3a3a50 !important; }

.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; }

.login-links { margin-top: 20px !important; }

.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;
  flex-direction: column !important;
  padding: 0 !important;
  position: relative;
  overflow: visible !important;
}

.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; }

.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;
}

.van-cell.forgot-field:focus-within { border-bottom-color: #a78bfa !important; }

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

.forgot-field .van-field__control { color: #eeeef3 !important; }

.forgot-field .van-field__control::placeholder { color: #3a3a50 !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;
}

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

.login-links a { color: #a78bfa !important; font-weight: 600; }

/* ---- RESET PASSWORD ---- */

.login-mobile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
}

.login-card {
  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 { color: #7e7e90 !important; }

h1 { color: #eeeef3 !important; font-family: 'Playfair Display', Georgia, serif; }

p { color: #7e7e90 !important; }

.login-links,  .login-links a { color: #a78bfa !important; }

/* ============================================================
   MEMBER SHELL — center-aligned header, slim tabbar
   ============================================================ */

.member-shell::before { background: #07070d !important; }

.member-shell::after { background: none !important; }

/* Header: logo left, avatar + lang + bell right */

.member-header {
  background: rgba(10, 10, 18, .92) !important;
  border-bottom: 1px solid #1f1f30 !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
}

.member-brand {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

.member-logo {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  width: 36px !important;
  height: 36px !important;
}

.member-logo img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: contain;
}

.member-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
}

.member-user-menu-button {
  background: rgba(26, 26, 44, .5) !important;
  border: none !important;
  border-radius: 10px !important;
  height: 34px !important;
  padding: 0 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  cursor: pointer !important;
}

.member-user-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

.member-user-avatar-fallback {
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #a78bfa !important;
}

.member-user-arrow {
  color: #7e7e90 !important;
  font-size: 10px !important;
}

.member-header-actions {
  margin-left: 0 !important;
}

.member-icon-button {
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .5) !important;
  border: none !important;
  border-radius: 10px !important;
  width: 34px !important;
  height: 34px !important;
}

.member-language-button {
  border: none !important;
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .5) !important;
  border-radius: 10px !important;
  height: 34px !important;
  font-size: 11px !important;
}

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

/* Content area — wider padding, no min-height calc */

.member-content { /* overridden below by sidebar */
  padding: 12px 12px 80px !important;
  min-height: auto !important;
}

/* Tabbar — 3-column icon-only on mobile, minimal */

/* .member-tabbar rules below — overridden by sidebar which hides tabbar entirely */

/* .member-tabbar — overridden below: sidebar hides tabbar entirely */

.member-tabbar {
  border: none !important;
  background: rgba(10, 10, 18, .96) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .3) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 0 !important;
  height: 52px !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  transform: none !important;
  padding: 6px 8px !important;
}

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

/* Hide tab ::before glow bg */

.member-tabbar-item::before {
  display: none !important;
}

.member-tabbar-item.active { color: #a78bfa !important; transform: none !important; }

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

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

.tab-icon { width: 22px !important; height: 22px !important; }

.tab-label { font-size: 9px !important; }

.member-dot { background: #a78bfa !important; }

/* Notice card — top-left toast style */

.member-notice-card {
  top: 56px !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  min-width: 0 !important;
  border-radius: 16px !important;
  border-color: #1f1f30 !important;
  background: rgba(14, 14, 24, .97) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(20px) !important;
  transform: none !important;
}

.notice-avatar { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 12px !important; }

.notice-action { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 999px !important; }

.notice-close { color: #4e4e60 !important; background: rgba(26, 26, 44, .5) !important; border-radius: 8px !important; }

.notice-head strong { color: #eeeef3 !important; }

.notice-head span { color: #4e4e60 !important; }

.notice-main p { color: #7e7e90 !important; }

/* ============================================================
   HOME / DISCOVER — staggered grid, sticky search
   ============================================================ */

.home-shell {
  background: #07070d !important;
  gap: 8px !important;
  padding: 0 0 16px !important;
}

/* Notification: full-width top bar */

.notification-strip {
  background: rgba(167, 139, 250, .08) !important;
  border: none !important;
  border-radius: 0 !important;
  color: #c4b5fd !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
}

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

/* Search: sticky below notification */

.search-panel {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #07070d !important;
  padding: 8px 12px !important;
}

.search-panel .van-search__content {
  border: none !important;
  background: rgba(26, 26, 44, .6) !important;
  box-shadow: none !important;
  border-radius: 12px !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: none !important;
  border-radius: 12px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}

/* Discover grid — tight 2-col, staggered heights */

.discover-grid {
  gap: 8px !important;
  padding: 0 12px !important;
}

.discover-card {
  position: relative !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* Stagger: odd cards shorter, even cards taller — overridden below by uniform grid */

.discover-card:nth-child(odd) .photo-button { height: 180px !important; }

.discover-card:nth-child(even) .photo-button { height: 240px !important; }

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

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

/* Card info — overlaid at bottom of photo */

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

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

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

/* Actions — single row of icon buttons overlaid */

.card-actions {
  position: absolute !important;
  bottom: 30px;
  left: 0;
  right: 0;
  padding: 0 6px !important;
  background: transparent !important;
  gap: 4px !important;
}

.card-actions button {
  color: #7e7e90 !important;
  background: rgba(7, 7, 13, .6) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 8px !important;
  backdrop-filter: blur(6px);
  height: 24px !important;
  font-size: 10px !important;
  min-width: 24px !important;
  padding: 0 6px !important;
}

.card-actions button:first-child {
  color: #fff !important;
  background: rgba(124, 58, 237, .7) !important;
  box-shadow: none !important;
  border: none !important;
}

/* Pagination — inline row, no card bg */

.member-pagination {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  margin: 4px 12px 0 !important;
}

.page-step {
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .6) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  min-width: 60px !important;
  height: 32px !important;
}

.page-number { color: #7e7e90 !important; background: rgba(26, 26, 44, .4) !important; width: 30px !important; height: 30px !important; }

.page-number.active {
  color: #fff !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: none !important;
}

.page-summary { color: #4e4e60 !important; font-size: 11px !important; }

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

.page-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 4px 0 !important;
}

.sheet-title { color: #eeeef3 !important; }

.gift-close { color: #4e4e60 !important; background: rgba(26, 26, 44, .5) !important; border-radius: 8px !important; }

.gift-item { border-color: #1f1f30 !important; color: #c4b5fd !important; background: rgba(20, 20, 32, .5) !important; border-radius: 14px !important; }

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

/* ============================================================
   PROFILE PAGE — centered avatar hero, horizontal stats
   ============================================================ */

.profile-shell { background: #07070d !important; gap: 12px !important; }

.profile-hero {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 16px 12px 0 !important;
}

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

/* Center the hero: avatar on top, name below */

.hero-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

.hero-profile {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;
}

.avatar-wrap { width: 80px !important; }

.avatar-button { width: 80px !important; height: 80px !important; }

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

.avatar-placeholder { width: 72px !important; height: 72px !important; font-size: 28px !important; }

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

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

.camera-badge {
  width: 28px !important; height: 28px !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

.hero-copy { align-items: center !important; }

.hero-name-row { justify-content: center !important; }

.hero-name-row h2 { color: #eeeef3 !important; font-size: 22px !important; text-align: center !important; }

.member-level-chip {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, .1) !important;
  box-shadow: none !important;
  height: 20px !important;
  font-size: 10px !important;
}

/* Stats: horizontal row of compact pills */

.hero-stats {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

.hero-stat-card {
  border: none !important;
  background: rgba(26, 26, 44, .4) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  min-height: 48px !important;
  padding: 6px 8px !important;
  gap: 2px !important;
}

.hero-stat-card-wide {
  grid-column: auto !important;
  grid-template-columns: auto minmax(0,1fr) !important;
}

.stat-label { color: #7e7e90 !important; font-size: 9px !important; }

.hero-stat-card strong { color: #eeeef3 !important; font-size: 14px !important; }

/* First recharge — horizontal slim card */

.first-recharge-card {
  background: rgba(124, 58, 237, .12) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  padding: 12px !important;
  border: 1px solid rgba(167, 139, 250, .15) !important;
}

.first-recharge-card::after { display: none !important; }

.first-recharge-badge { width: 48px !important; height: 48px !important; border-radius: 12px !important; background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; box-shadow: none !important; }

.first-recharge-main { flex: 1 !important; min-width: 0 !important; }

.first-recharge-copy strong { color: #eeeef3 !important; font-size: 16px !important; }

.first-recharge-price { color: #c4b5fd !important; }

.first-recharge-copy p { color: rgba(238, 238, 243, .5) !important; }

.first-recharge-action {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  min-width: auto !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
}

/* Menu — compact icon+label grid, 2 columns */

.profile-menu-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
}

.menu-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}

.menu-item {
  background: rgba(26, 26, 44, .4) !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 10px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.menu-item:active { background: rgba(26, 26, 44, .6) !important; }

.menu-left { flex-direction: column !important; align-items: center !important; gap: 4px !important; }

.menu-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; }

.menu-copy { align-items: center !important; gap: 0 !important; }

.menu-copy strong { font-size: 12px !important; }

.menu-copy span { display: none !important; }

.menu-arrow { display: none !important; }

/* ============================================================
   USER DETAIL PAGE — vertical profile, horizontal gallery
   ============================================================ */

.user-detail-shell { background: #07070d !important; gap: 10px !important; padding: 8px 12px 26px !important; }

/* Detail toolbar / header */

.detail-toolbar {
  background: rgba(10, 10, 18, .96) !important;
  border-bottom: 1px solid #1f1f30 !important;
  backdrop-filter: blur(20px) !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}

.detail-toolbar .back-button,
.detail-toolbar .round-button {
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .6) !important;
  border-radius: 10px !important;
}

.detail-toolbar strong { color: #eeeef3 !important; font-size: 15px !important; }

/* Profile card: vertical center */

.profile-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
}

.avatar-frame {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important;
  width: 72px !important;
  height: 72px !important;
  padding: 4px !important;
}

.profile-copy { align-items: center !important; }

.profile-copy h1 { color: #eeeef3 !important; font-size: 22px !important; text-align: center !important; }

/* Info grid: horizontal scroll instead of wrap */

.profile-info-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 6px !important;
}

.profile-info-card,
.profile-info-card--wide {
  border: none !important;
  background: rgba(26, 26, 44, .4) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 6px 8px !important;
  grid-template-columns: 24px minmax(0,1fr) !important;
  gap: 6px !important;
  min-height: auto !important;
}

.info-icon { width: 24px !important; height: 24px !important; border-radius: 6px !important; }

.info-copy span { font-size: 9px !important; }

.info-copy strong { font-size: 11px !important; }

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

.section-row h2, .about-panel h2 { color: #eeeef3 !important; font-size: 14px !important; }

.section-row > span { color: #a78bfa !important; font-size: 11px !important; }

/* Gallery: horizontal scroll */

.gallery-grid {
  grid-template-columns: repeat(6, 80px) !important;
  gap: 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  grid-auto-flow: column !important;
}

.gallery-panel {
  background: rgba(14, 14, 24, .6) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 14px !important;
  padding: 12px !important;
}

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

.empty-panel,
.detail-empty {
  background: transparent !important;
  color: #4e4e60 !important;
  box-shadow: none !important;
  min-height: 60px !important;
}

.empty-cover { background: #1a1a2c !important; border-radius: 10px !important; }

.about-panel p { color: #7e7e90 !important; font-size: 12px !important; }

.moment-card {
  background: rgba(26, 26, 44, .4) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 12px !important;
  grid-template-columns: 90px minmax(0,1fr) !important;
}

.moment-cover { background: #1a1a2c !important; }

.moment-text { color: #eeeef3 !important; font-size: 11px !important; }

.moment-foot { color: #7e7e90 !important; font-size: 10px !important; }

.love-count { color: #a78bfa !important; }

.round-button {
  background: rgba(26, 26, 44, .5) !important;
  color: #a78bfa !important;
  box-shadow: none !important;
  border: none !important;
  width: 34px !important;
  height: 34px !important;
}

.edit-display-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  min-height: 32px !important;
  font-size: 11px !important;
}

/* ============================================================
   MESSAGES / INBOX — horizontal scroll filters, compact rows
   ============================================================ */

.inbox-shell { background: #07070d !important; gap: 6px !important; padding-bottom: 80px !important; }

/* Hero: dark glass card, hide decorative glow */

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

.hero-glow, .hero-glow-left, .hero-glow-right { display: none !important; }

.hero-main { color: #eeeef3 !important; }

.hero-unread { color: #a78bfa !important; font-size: 11px !important; }

.hero-stats { gap: 6px !important; }

.hero-stat {
  background: rgba(26, 26, 44, .4) !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 6px 8px !important;
  color: #eeeef3 !important;
  font-size: 12px !important;
}

.hero-stat span { color: #7e7e90 !important; font-size: 9px !important; }

.hero-stat strong { color: #eeeef3 !important; }

/* Toolbar: horizontal scroll instead of 5-col grid */

.inbox-toolbar { padding: 4px 0 0 !important; }

.toolbar-grid {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  grid-template-columns: none !important;
  gap: 6px !important;
  padding: 0 12px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
}

.toolbar-grid::-webkit-scrollbar { display: none !important; }

.toolbar-pill {
  background: rgba(14, 14, 24, .8) !important;
  color: #7e7e90 !important;
  box-shadow: none !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
}

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

.toolbar-pill em {
  background: rgba(167, 139, 250, .2) !important;
  color: #a78bfa !important;
  font-size: 9px !important;
}

.toolbar-pill.active em { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }

.notice-strip {
  background: rgba(124, 58, 237, .08) !important;
  color: #c4b5fd !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.notice-dot { background: #a78bfa !important; }

.notice-action {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
}

/* Message list: no big border-radius, flat edges */

.glass-card.inbox-list-card {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 12px !important;
}

.section-head { padding: 0 12px !important; margin-bottom: 6px !important; }

.section-title { color: #eeeef3 !important; font-size: 14px !important; font-weight: 700 !important; }

.section-subtitle { color: #7e7e90 !important; font-size: 11px !important; }

.message-list {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Compact rows: smaller avatars, tighter spacing */

.message-row {
  background: rgba(14, 14, 24, .6) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 10px 10px !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
  border-bottom: none !important;
}

.message-row:active { background: rgba(26, 26, 44, .7) !important; }

.message-row.locked {
  background: rgba(124, 58, 237, .06) !important;
  border: 1px solid rgba(167, 139, 250, .12) !important;
}

/* Smaller avatars in inbox */

.avatar-box { flex: 0 0 auto !important; }

.avatar-image, .avatar-fallback {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

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

.unread-badge {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  min-width: 16px !important;
  height: 16px !important;
  font-size: 9px !important;
  top: -3px !important;
  right: -3px !important;
}

.online-status-dot { width: 8px !important; height: 8px !important; }

.online-status-dot.online { background: #34d399 !important; }

.online-status-dot.offline { background: #4e4e60 !important; }

.message-main { flex: 1 !important; min-width: 0 !important; }

.message-title-row {
  justify-content: space-between !important;
  gap: 6px !important;
}

.message-name { color: #eeeef3 !important; font-size: 13px !important; font-weight: 600 !important; }

.message-time { color: #4e4e60 !important; font-size: 10px !important; white-space: nowrap !important; }

.message-preview { color: #7e7e90 !important; font-size: 11px !important; }

.message-tags { gap: 4px !important; margin-top: 3px !important; }

.mini-tag { font-size: 9px !important; padding: 1px 6px !important; border-radius: 6px !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; font-size: 10px !important; }

.row-actions { gap: 4px !important; }

.delete-conversation-button {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, .08) !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
}

.return-gift-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
}

/* Locked card: vertical center */

.locked-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid rgba(167, 139, 250, .15) !important;
  color: #c4b5fd !important;
  border-radius: 14px !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 20px 16px !important;
  gap: 8px !important;
}

.locked-avatar {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
}

.locked-card strong { color: #eeeef3 !important; font-size: 14px !important; }

.locked-card p { color: #7e7e90 !important; font-size: 12px !important; }

.locked-card button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  padding: 8px 20px !important;
}

/* ============================================================
   IM / CHAT — no arrows, pill bubbles, compact header
   ============================================================ */

.chat-shell { background: #07070d !important; color: #eeeef3 !important; }

/* Header: compact, centered title */

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

.back-button {
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .6) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 0 !important;
}

.back-button .van-icon { font-size: 14px !important; }

.chat-title strong { color: #eeeef3 !important; font-size: 14px !important; }

.tag-pill {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, .12) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
}

.tag-pill.rose { color: #f472b6 !important; background: rgba(244, 114, 182, .12) !important; }

.chat-icons button {
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .6) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
}

/* Contact strip: horizontal scroll */

.contact-strip {
  background: rgba(10, 10, 18, .96) !important;
  border-bottom: 1px solid #1f1f30 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  padding: 4px 8px !important;
  gap: 4px !important;
  scrollbar-width: none !important;
}

.contact-strip::-webkit-scrollbar { display: none !important; }

.contact-strip button {
  border-color: #1f1f30 !important;
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .5) !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
}

/* Chat body: darker */

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

/* Avatars: square-rounded, smaller */

.message-avatar {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}

.message-item { gap: 6px !important; }

/* Bubbles: fully pill-shaped, no arrow triangles */

.bubble {
  background: rgba(26, 26, 44, .85) !important;
  color: #eeeef3 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  padding: 8px 14px !important;
  border: 1px solid #1f1f30 !important;
}

/* Kill the ::before arrow triangles */

.bubble::before,
.message-item.mine .bubble::before {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}

/* Mine bubbles: purple gradient pill */

.message-item.mine .bubble {
  background: linear-gradient(135deg, rgba(124, 58, 237, .45), rgba(167, 139, 250, .35)) !important;
  color: #eeeef3 !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  border: 1px solid rgba(167, 139, 250, .2) !important;
}

.message-name { color: #7e7e90 !important; font-size: 11px !important; }

.message-meta { color: #4e4e60 !important; font-size: 9px !important; }

.translation-box {
  background: rgba(26, 26, 44, .5) !important;
  color: #7e7e90 !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}

.translate-icon-button {
  color: #a78bfa !important;
  background: rgba(26, 26, 44, .6) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  width: 26px !important;
  height: 26px !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;
  font-size: 11px !important;
}

/* Composer preview: compact */

.composer-preview {
  background: rgba(10, 10, 18, .96) !important;
  color: #c4b5fd !important;
  border-top: 1px solid #1f1f30 !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

.composer-preview button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
}

/* Composer: tools row above input */

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

.composer-input {
  background: rgba(26, 26, 44, .6) !important;
  border-radius: 20px !important;
  border: 1px solid #1f1f30 !important;
  overflow: hidden;
}

.composer-input .van-cell { background: transparent !important; }

.send-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 12px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  font-size: 0 !important;
}

.tool-icon { color: #7e7e90 !important; font-size: 16px !important; }

/* Panels */

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

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

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

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

.comment-item { background: rgba(26, 26, 44, .5) !important; border-radius: 10px !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;
  border-radius: 10px !important;
}

/* Video player dark */

.media-video-player { border-radius: 14px !important; background: #1a1a2c !important; }

.media-video-controls {
  background: linear-gradient(transparent, rgba(7, 7, 13, .8)) !important;
  padding: 18px 6px 5px !important;
}

.video-control-button { color: #7e7e90 !important; }

.video-time-label { color: #4e4e60 !important; font-size: 10px !important; }

.video-progress-bar { background: rgba(26, 26, 44, .5) !important; }

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

/* ============================================================
   ZONE — compact cards, square photos, icon-only actions
   ============================================================ */

.zone-shell { background: #07070d !important; gap: 8px !important; padding-bottom: 80px !important; }

/* Toolbar: no search, just publish + compact filter */

.zone-toolbar {
  padding: 4px 12px 0 !important;
  gap: 6px !important;
}

.zone-toolbar .van-search { flex: 1 !important; }

.zone-toolbar .van-search__content {
  border: 1px solid #1f1f30 !important;
  background: rgba(14, 14, 24, .9) !important;
  box-shadow: none !important;
  border-radius: 12px !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: none !important;
  border-radius: 12px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}

.toolbar-publish-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .3) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  height: 36px !important;
}

/* Summary: inline text */

.panel-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
}

.zone-summary { color: #7e7e90 !important; font-size: 11px !important; }

/* Zone cards: flat, compact, no big border-radius */

.zone-list { gap: 6px !important; padding: 0 12px !important; margin-top: 0 !important; }

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

/* Card head: smaller avatar */

.zone-head {
  padding: 10px 10px 6px !important;
  gap: 8px !important;
}

.zone-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

.zone-user { color: #eeeef3 !important; font-size: 13px !important; font-weight: 600 !important; }

.zone-author { color: #7e7e90 !important; font-size: 11px !important; }

.zone-time { color: #4e4e60 !important; font-size: 10px !important; }

.zone-text-row { padding: 0 10px !important; gap: 6px !important; }

.zone-text { color: #eeeef3 !important; font-size: 13px !important; }

.inline-zone-text { color: #eeeef3 !important; font-size: 13px !important; }

.zone-text.muted { color: #4e4e60 !important; }

.translation-box { background: rgba(26, 26, 44, .5) !important; color: #7e7e90 !important; border-radius: 8px !important; font-size: 11px !important; }

.inline-translate-button {
  border-color: rgba(167, 139, 250, .2) !important;
  color: #a78bfa !important;
  background: rgba(26, 26, 44, .5) !important;
  border-radius: 8px !important;
  font-size: 10px !important;
  padding: 3px 8px !important;
}

/* Photo grid: square tiles, tighter */

.photo-grid {
  gap: 2px !important;
  padding: 6px 10px !important;
}

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

.photo-button img { border-radius: 10px !important; }

/* Action pills: icon-only compact */

.zone-actions {
  gap: 4px !important;
  padding: 4px 10px 0 !important;
}

.action-pill {
  border-color: transparent !important;
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .4) !important;
  border-radius: 10px !important;
  padding: 5px 8px !important;
  font-size: 11px !important;
  gap: 3px !important;
}

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

.action-pill .action-icon { width: 16px !important; height: 16px !important; }

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

/* Comment sheet */

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

.comment-form { background: transparent !important; border-top: 1px solid #1f1f30 !important; padding: 8px !important; }

.comment-form .van-cell { background: rgba(26, 26, 44, .6) !important; border-radius: 12px !important; }

.comment-form .van-button { background: linear-gradient(135deg, #a78bfa, #7c3aed) !important; border-radius: 10px !important; }

.zone-comment-popup { background: #12121e !important; border-radius: 20px 20px 0 0 !important; }

.zone-pagination { border: none !important; background: transparent !important; box-shadow: none !important; padding: 8px 12px !important; }

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

.comment-user { color: #c4b5fd !important; }

.comment-text { color: #7e7e90 !important; }

/* ============================================================
   WALLET — single-line records, pill tabs
   ============================================================ */

.wallet-shell { background: #07070d !important; gap: 8px !important; padding-bottom: 80px !important; }

/* Tabs: pill-style instead of underline */

.wallet-shell .van-tabs__nav {
  background: transparent !important;
}

.wallet-shell .van-tab {
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .4) !important;
  border-radius: 10px !important;
  margin: 0 3px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

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

.wallet-shell .van-tabs__line { display: none !important; }

/* Record card: transparent, no border */

.wallet-record-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
}

.wallet-record-card h3 { color: #eeeef3 !important; font-size: 14px !important; }

.subtitle { color: #7e7e90 !important; font-size: 11px !important; }

/* Record list: compact */

.record-list { gap: 4px !important; margin-top: 8px !important; }

/* Record items: single-line compact row */

.record-item {
  background: rgba(14, 14, 24, .6) !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  align-items: center !important;
  border: none !important;
}

/* Smaller media icon */

.record-media {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  font-size: 14px !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-main { flex: 1 !important; min-width: 0 !important; }

.record-title-row {
  justify-content: space-between !important;
  gap: 8px !important;
  align-items: center !important;
}

.record-title-row strong { color: #eeeef3 !important; font-size: 12px !important; }

.record-amount {
  color: #a78bfa !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.record-amount.income { color: #34d399 !important; }

.record-main p { color: #7e7e90 !important; font-size: 11px !important; margin: 0 !important; }

.record-meta { color: #4e4e60 !important; font-size: 9px !important; gap: 4px !important; margin-top: 2px !important; }

/* Section head */

.section-head { padding: 0 12px !important; margin-bottom: 6px !important; }

/* ============================================================
   EDIT / SETTINGS / PASSWORD / PUBLISH / ABOUT / RECHARGE
   ============================================================ */

.edit-shell, .password-shell, .publish-shell, .about-shell, .recharge-shell { background: #07070d !important; gap: 8px !important; padding-bottom: 80px !important; }

/* Cards: borderless, transparent */

.edit-card, .publish-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 12px !important;
}

.edit-shell .van-cell, .password-shell .van-cell, .publish-shell .van-cell {
  background: rgba(14, 14, 24, .6) !important;
  border-bottom: none !important;
  border-radius: 14px !important;
  color: #eeeef3 !important;
  margin-bottom: 4px !important;
  padding: 10px 12px !important;
}

.edit-shell .van-cell:focus-within, .password-shell .van-cell:focus-within {
  border-bottom: none !important;
  background: rgba(26, 26, 44, .8) !important;
}

/* Password page: dark card */

.password-card {
  background: rgba(14, 14, 24, .97) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 16px !important;
  padding: 16px 12px !important;
}

/* Avatar card on edit page */

.avatar-card {
  background: rgba(14, 14, 24, .6) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 16px !important;
}

.avatar-actions { gap: 6px !important; }

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

.avatar-upload-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 10px !important;
  color: #fff !important;
}

.ghost-button {
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .4) !important;
  border-radius: 10px !important;
}

.ghost-button.danger {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, .08) !important;
  border: 1px solid rgba(239, 68, 68, .2) !important;
}

.field-grid { gap: 4px !important; }

.field-label-row { color: #7e7e90 !important; font-size: 10px !important; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.native-date-input { background: rgba(26, 26, 44, .4) !important; border: 1px solid #1f1f30 !important; border-radius: 10px !important; color: #eeeef3 !important; }

.form-section-title {
  color: #7e7e90 !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

.gender-options { gap: 6px !important; }

.gender-options button {
  border: 1px solid #1f1f30 !important;
  background: rgba(26, 26, 44, .4) !important;
  color: #7e7e90 !important;
  border-radius: 10px !important;
}

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

.switch-grid { gap: 4px !important; }

.select-field {
  background: rgba(14, 14, 24, .6) !important;
  border-radius: 14px !important;
}

/* About tabs: pill-style */

.about-shell .van-tabs__nav { background: transparent !important; }

.about-shell .van-tab {
  color: #7e7e90 !important;
  background: rgba(26, 26, 44, .4) !important;
  border-radius: 10px !important;
  margin: 0 3px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

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

.about-shell .van-tabs__line { display: none !important; }

.about-tabs { padding: 0 12px !important; }

.about-kicker {
  color: #a78bfa !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}

.about-card, .about-panel {
  background: rgba(14, 14, 24, .6) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin: 0 12px 6px !important;
  box-shadow: none !important;
}

.about-head h2 { color: #eeeef3 !important; font-size: 14px !important; }

.about-content { color: #7e7e90 !important; font-size: 12px !important; line-height: 1.5 !important; }

/* Recharge: dark header, compact preset grid */

.recharge-header {
  background: rgba(14, 14, 24, .97) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 16px 12px !important;
}

.recharge-shell .back-button {
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .6) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
}

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

/* Recharge plans */

.preset-list { gap: 6px !important; }

.preset-list button {
  padding: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: rgba(14, 14, 24, .6) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 14px !important;
  color: #eeeef3 !important;
}

.plan-media {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 12px !important;
}

.plan-title-row strong { color: #eeeef3 !important; }

.plan-price { color: #a78bfa !important; font-weight: 800 !important; }

.plan-copy span { color: #7e7e90 !important; font-size: 11px !important; }

.plan-ribbon {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 10px !important;
}

.selected-glow {
  background: rgba(167, 139, 250, .08) !important;
  border-color: rgba(167, 139, 250, .3) !important;
}

.custom-amount {
  background: rgba(14, 14, 24, .6) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 14px !important;
}

.custom-input-wrap {
  background: rgba(26, 26, 44, .4) !important;
  border-radius: 12px !important;
}

.service-card {
  background: rgba(14, 14, 24, .6) !important;
  border: 1px solid #1f1f30 !important;
  border-radius: 14px !important;
}

.summary-line { color: #7e7e90 !important; font-size: 12px !important; }

.stripe-container { background: rgba(14, 14, 24, .97) !important; border-radius: 14px !important; }

.first-recharge-tip {
  background: rgba(124, 58, 237, .08) !important;
  color: #c4b5fd !important;
  border-radius: 12px !important;
}

.save-row .van-button, .save-action .van-button {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  border: none !important;
  border-radius: 16px !important;
  height: 48px !important;
  font-size: 14px !important;
  box-shadow: 0 8px 24px rgba(124, 58, 237, .3) !important;
}

.page-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 12px !important;
}

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

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

/* Settings / Gifts / Relations */

.panel-card .van-cell {
  background: rgba(14, 14, 24, .6) !important;
  border-bottom: none !important;
  border-radius: 14px !important;
  color: #eeeef3 !important;
  margin-bottom: 4px !important;
}

.section-title { color: #eeeef3 !important; font-size: 14px !important; }

.settings-group {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.glass-card.settings-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Zone comment popup */

.zone-comment-popup {
  background: #12121e !important;
  border-radius: 20px 20px 0 0 !important;
}

/* Loading panel */

.loading-panel {
  background: transparent !important;
  color: #4e4e60 !important;
}

/* Meet Display */

.home-display-shell { background: #07070d !important; }

.display-page-header {
  background: rgba(10, 10, 18, .96) !important;
  border-color: #1f1f30 !important;
}

.display-card {
  background: rgba(14, 14, 24, .97) !important;
  border-color: #1f1f30 !important;
  border-radius: 16px !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 minmax(380px, 420px) !important;
    min-height: 100vh;
    align-items: center !important;
  }

  .login-mobile > * {
    grid-column: 2 !important;
  }

  .login-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    padding: 0 !important;
    max-width: none !important;
  }

  .login-hero h1 { font-size: 36px !important; }
  .login-hero p { font-size: 15px !important; }

  .login-card { max-width: none !important; margin: 0 !important; padding: 0 !important; }

  .login-card h2,
  .login-card-head h2 { font-size: 28px !important; }

  .login-footer, .register-footer, .forgot-footer { max-width: none !important; padding: 0 !important; }

  /* .lang-dropdown-wrapper removed — LangSwitcher.vue handles this natively */

  .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-content { max-width: 900px !important; margin: 0 auto !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; }

  .profile-shell { max-width: 900px !important; margin: 0 auto !important; }
  .hero-stats { grid-template-columns: repeat(4, 1fr) !important; max-width: 600px !important; margin: 0 auto !important; }

  .toolbar-grid { flex-wrap: wrap !important; justify-content: center !important; padding: 0 16px !important; }

  .message-list { padding: 0 16px !important; }

  .zone-shell { max-width: 900px !important; margin: 0 auto !important; }
  .zone-list { max-width: 900px !important; }

  .wallet-shell { max-width: 900px !important; margin: 0 auto !important; }

  .chat-body { max-width: 900px !important; margin: 0 auto !important; }
  .message-stack { max-width: 420px !important; }
}

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

  .menu-list { grid-template-columns: repeat(2, 1fr) !important; }

  .toolbar-grid { padding: 0 8px !important; }
  .toolbar-pill { padding: 5px 10px !important; font-size: 11px !important; }

  .message-row { padding: 8px !important; }
  .avatar-image, .avatar-fallback { width: 34px !important; height: 34px !important; }

  .discover-card:nth-child(odd) .photo-button { height: 140px !important; }
  .discover-card:nth-child(even) .photo-button { height: 180px !important; }
}

/* ============================================================
   MERGED PATCHES — consolidated from 8 patch files
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   SECTION: Login Page Header & UI (from kk-login-header.css)
   ───────────────────────────────────────────────────────────── */

/* ── CSS Variables (kk-header shared) ────────────────────── */

:root {
  --kk-brand: #e07864;
  --kk-brand-deep: #cf604f;
  --kk-brand-soft: rgba(224,120,100,0.12);
  --kk-glow: 0 8px 24px rgba(224,120,100,0.35);
  --kk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kk-page-bg: #07070d;
}

/* ── Body background safeguard ──────────────────────────── */

html, body {
  background: var(--kk-page-bg) !important;
  background-color: var(--kk-page-bg) !important;
}

.kk-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Page Header ─────────────────────────────────────────── */

@keyframes kkHeaderIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kk-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--kk-ease);
}

.kk-header-brand:active {
  transform: scale(0.96);
}

.kk-header-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(224,120,100,0.3);
}

.kk-header-title {
  font-family: 'Inter', 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Header Language Switcher ────────────────────────────── */

.kk-header-lang {
  position: relative;
}

.kk-header-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.kk-header-lang-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}

.kk-header-lang-btn:active {
  transform: scale(0.96);
}

.kk-header-lang-btn .lang-arrow {
  font-size: 8px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s;
}

.kk-header-lang.open .kk-header-lang-btn .lang-arrow {
  transform: rotate(180deg);
}

.kk-header-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  border-radius: 12px;
  padding: 6px;
  background: rgba(20,16,10,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: none;
  z-index: 200;
}

.kk-header-lang.open .kk-header-lang-menu {
  display: block;
  animation: kkFadeIn 0.15s ease;
}

.kk-header-lang-item {
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kk-header-lang-item:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.kk-header-lang-item.active {
  color: #e07864;
  font-weight: 800;
  background: rgba(224,120,100,0.12);
}

@keyframes kkFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Background Decorative Gradient Orbs ────────────────── */

.login-mobile {
  position: relative;
  animation: kkPageIn 0.6s var(--kk-ease);
}

@keyframes kkPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.kk-orbs::before,
body.kk-orbs::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.28;
  pointer-events: none;
  animation: kkFloat 18s ease-in-out infinite;
  z-index: 0;
}

body.kk-orbs::before {
  width: 380px;
  height: 380px;
  top: -100px;
  right: -120px;
  background: radial-gradient(circle, rgba(224,120,100,0.55), transparent 70%);
}

body.kk-orbs::after {
  width: 440px;
  height: 440px;
  bottom: -180px;
  left: -140px;
  background: radial-gradient(circle, rgba(167,139,250,0.45), transparent 70%);
  animation-delay: -9s;
}

@keyframes kkFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(20px, -30px) scale(1.05); }
  66%      { transform: translate(-20px, 25px) scale(0.95); }
}

/* Make sure content sits above the orbs */

.login-mobile > * {
  position: relative;
  z-index: 1;
}

/* Reduce the heavy dark overlay on the auth collage */

.auth-mobile::before,
.auth-mobile::before,
.mobile-shell.auth-mobile::before {
  background:
    var(--kkdating-auth-bg-collage, none) center center / cover no-repeat,
    linear-gradient(180deg, rgba(7,7,13,0.15) 0%, rgba(7,7,13,0.35) 100%) !important;
}

.auth-mobile::after,
.auth-mobile::after {
  background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, rgba(0,0,0,0.15) 100%) !important;
}

/* ── Hero / Brand Text ─────────────────────────────────── */

.login-hero {
  gap: 8px !important;
  text-align: center;
  animation: kkHeroIn 0.7s 0.1s var(--kk-ease) backwards;
}

@keyframes kkHeroIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kk-brand-h1 {
  font-family: 'Playfair Display', 'Inter', serif;
  font-size: 30px !important;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #f9d6cf 50%, #e07864 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 24px rgba(224,120,100,0.2);
  margin: 0 !important;
  line-height: 1.1 !important;
}

.kk-tagline {
  font-size: 14px !important;
  font-weight: 500;
  color: rgba(255,255,255,0.7) !important;
  max-width: 320px;
  margin: 0 auto !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em;
}

/* Override the original hero styles */

.login-hero h1 {
  font-size: 30px !important;
}

.login-hero p {
  font-size: 14px !important;
  max-width: 320px;
}

/* ── Login Card (kk-login-header override) ─────────────── */

.login-card {
  padding: 24px 22px 18px !important;
  border-radius: 20px !important;
  background: rgba(20,16,10,0.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
  position: relative;
  overflow: hidden;
  animation: kkCardIn 0.7s 0.2s var(--kk-ease) backwards;
}

@keyframes kkCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle accent bar at the top of the card */

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,120,100,0.6), transparent);
  pointer-events: none;
}

.login-card-head h2,
.login-card h2 {
  display: none !important;
}

.login-card-head h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ── Form Fields (kk-login-header override) ─────────────── */

.van-cell {
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  background: rgba(255,255,255,0.95) !important;
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
  border: 1.5px solid transparent;
  padding: 14px 16px !important;
  display: flex;
  align-items: center;
}

.van-cell:focus-within {
  box-shadow: 0 0 0 3px rgba(224,120,100,0.25);
  background: #fff !important;
  border-color: rgba(224,120,100,0.4);
}

/* Form field icons via CSS pseudo-elements */

.van-cell:first-of-type::before,
 .van-cell:nth-of-type(2)::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.van-cell:first-of-type::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e07864' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

.van-cell:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e07864' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}

.van-cell:focus-within::before {
  opacity: 1;
}

.van-cell input {
  font-size: 15px !important;
  font-weight: 500;
  color: #1a1a1a;
}

.van-cell input::placeholder {
  color: rgba(0,0,0,0.4);
  font-weight: 500;
}

/* Error state for form fields */

.van-cell--error,
 .van-field--error {
  border-color: rgba(255, 80, 80, 0.5) !important;
  background: rgba(255, 235, 235, 0.96) !important;
  box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.15) !important;
  animation: kkShake 0.4s var(--kk-ease);
}

@keyframes kkShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ── Submit Button (kk-login-header override) ────────────── */

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

.login-submit .van-button {
  border-radius: 14px !important;
  height: 50px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ec4899, #db2777) !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(236,72,153,0.4) !important;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s !important;
  position: relative;
  overflow: hidden;
}

.login-submit .van-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s var(--kk-ease);
}

.login-submit .van-button:hover::after {
  left: 100%;
}

.login-submit .van-button:hover {
  box-shadow: 0 12px 32px rgba(236,72,153,0.5) !important;
  filter: brightness(1.05);
}

.login-submit .van-button:active {
  transform: scale(0.98);
}

/* Loading state for submit button */

.login-submit .van-button--loading {
  background: linear-gradient(135deg, #db2777, #be185d) !important;
  cursor: wait;
  pointer-events: none;
}

.login-submit .van-button--loading .van-button__text {
  opacity: 0.6;
}

/* ── Links Section (kk-login-header override) ────────────── */

.login-links {
  gap: 18px !important;
  margin-top: 18px !important;
  font-size: 13px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.login-links .footer-link,
.login-links a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: color 0.2s, transform 0.2s;
  text-decoration: none;
  position: relative;
}

.login-links .footer-link:hover,
.login-links a:hover {
  color: #e07864 !important;
}

/* ── Footer Cleanup (kk-login-header) ───────────────────── */

.kk-header-lang-shown .auth-footer .footer-row:first-child,
.kk-header-lang-shown .login-footer .footer-row:first-child {
  position: absolute !important;
  left: -99999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.auth-footer .footer-row:last-child,
.login-footer .footer-row:last-child {
  margin-bottom: 0 !important;
}

.footer-copy {
  font-size: 10px !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.04em;
}

/* ── Desktop Overrides (kk-login-header) ─────────────────── */

@media (min-width: 900px) {
  .kk-page-header {
    height: 60px;
    padding: 0 28px;
    background: #07070d;
  }

  .kk-header-title {
    font-size: 20px;
  }

  .kk-header-lang-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }

  .login-mobile {
    padding-top: 200px !important;
  }

  /* On desktop, orbs are larger and gentler */
  body.kk-orbs::before {
    width: 500px;
    height: 500px;
    top: -180px;
    right: -160px;
  }

  body.kk-orbs::after {
    width: 560px;
    height: 560px;
    bottom: -200px;
    left: -180px;
  }

  .login-card {
    padding: 32px 32px 28px !important;
    border-radius: 24px !important;
  }

  .login-card-head h2 {
    font-size: 26px !important;
  }

  .kk-brand-h1 {
    font-size: 36px !important;
  }

  .kk-tagline {
    font-size: 15px !important;
  }

  /*
   * Re-define the grid with three explicit named areas so the
   * hero lands ABOVE the card.
   */
  .login-mobile {
    grid-template-areas: "hero" "card" "footer" !important;
    grid-template-rows: minmax(96px, auto) minmax(0, 1fr) auto !important;
    row-gap: 24px !important;
  }

  .login-hero {
    grid-area: hero !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .login-card {
    grid-area: card !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .login-footer {
    grid-area: footer !important;
    grid-row: 3 !important;
    grid-column: 2 !important;
  }

  /* Move the title hero above the form */
  .login-hero {
    order: -1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    align-items: center !important;
  }

  .login-hero .kk-brand-h1,
  .login-hero h1 {
    text-align: center !important;
  }

  .login-hero .kk-tagline,
  .login-hero p {
    text-align: center !important;
  }

  .auth-mobile::before,
  .auth-mobile::before,
  .mobile-shell.auth-mobile::before {
    background:
      var(--kkdating-auth-bg-collage, none) center center / cover no-repeat,
      linear-gradient(180deg, rgba(7,7,13,0.2) 0%, rgba(7,7,13,0.4) 100%) !important;
  }
}

/* ── Reduced Motion (kk-login-header) ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.kk-orbs::before,
  body.kk-orbs::after,
  .kk-page-header,
  .login-card,
  .login-hero {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Header Avatar Dropdown (from kk-login-header-avatar.css)
   ───────────────────────────────────────────────────────────── */

.kk-header-user {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.kk-header-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  height: 34px;
  padding-left: 3px;
  padding-right: 8px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}

.kk-header-user-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.35);
}

.kk-header-user-btn:active {
  transform: scale(0.96);
}

.kk-header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #1f1f2a;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.kk-header-avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e07864, #cf604f);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.kk-header-avatar-arrow {
  font-size: 8px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s;
}

.kk-header-user.open .kk-header-avatar-arrow {
  transform: rotate(180deg);
}

.kk-header-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  border-radius: 12px;
  padding: 6px;
  background: rgba(20,16,10,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: none;
  z-index: 200;
}

.kk-header-user.open .kk-header-user-menu {
  display: block;
  animation: kkFadeIn 0.15s ease;
}

.kk-header-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.kk-header-user-item:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.kk-header-user-item .item-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0.85;
}

.kk-header-user-item.logout {
  color: #fca5a5;
}

.kk-header-user-item.logout:hover {
  background: rgba(239,68,68,0.15);
  color: #fff;
}

.kk-header-user-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Login Input Colors (from kk-login-input-color.css)
   NOTE: Light-theme global vars (lines 132-144 of original) removed
   ───────────────────────────────────────────────────────────── */

/* ---- Scoped to login page (highest priority) ---- */

.van-cell {
  background: rgba(14, 14, 24, .78) !important;
}

.van-field__label {
  color: #c4b5fd !important;
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.van-field__label--required::before {
  color: #f5a3a0 !important;
}

.van-field__control {
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  -webkit-text-fill-color: #ffffff;
}

.van-field__control::placeholder {
  color: #8b8ba8 !important;
  font-weight: 500;
  opacity: 1;
}

.van-field__control:-webkit-autofill,
 .van-field__control:-webkit-autofill:hover,
 .van-field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(26, 26, 44, .95) inset !important;
  caret-color: #ffffff;
}

.van-field__right-icon,
 .van-field__button {
  color: #c4b5fd !important;
}

/* Toast / error text inside the login form */

.van-toast,
 .van-field__error-message {
  color: #ffb4b4 !important;
  font-weight: 600;
}

/* ---- SCOPED ::selection on the actual control element ---- */

.van-field__control::selection,
 .van-field__control *::selection,
 .van-field__control::-webkit-selection,
 .van-field__control *::-webkit-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

.van-field__control::-moz-selection,
 .van-field__control *::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

/* When the input itself is the active focused element */

.van-cell input::selection,
 .van-cell textarea::selection,
 .van-cell input::-webkit-selection,
 .van-cell textarea::-webkit-selection,
input.van-field__control::selection,
input.van-field__control::-webkit-selection,
textarea.van-field__control::selection,
textarea.van-field__control::-webkit-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
}

.van-cell input::-moz-selection,
 .van-cell textarea::-moz-selection,
input.van-field__control::-moz-selection,
textarea.van-field__control::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
}

/* Enforce on the cell itself */

.van-cell::selection,
 .van-cell *::selection,
 .van-cell::-webkit-selection,
 .van-cell *::-webkit-selection,
 .van-cell::-moz-selection,
 .van-cell *::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
}

/* ---- Global ::selection override (every page) ---- */

.van-field__control::selection,
.van-field__control *::selection,
.van-field__control::-webkit-selection,
.van-field__control *::-webkit-selection,
.van-cell input::selection,
.van-cell textarea::selection,
.van-cell input::-webkit-selection,
.van-cell textarea::-webkit-selection,
input.van-field__control::selection,
input.van-field__control::-webkit-selection,
textarea.van-field__control::selection,
textarea.van-field__control::-webkit-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

.van-field__control::-moz-selection,
.van-field__control *::-moz-selection,
.van-cell input::-moz-selection,
.van-cell textarea::-moz-selection,
input.van-field__control::-moz-selection,
textarea.van-field__control::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Selection Fix (from kk-login-selection-fix.css)
   Overrides the purple ::selection with orange (#ff6b00)
   ───────────────────────────────────────────────────────────── */

::selection,
::-moz-selection,
::-webkit-selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* Scoped wildcards */

::selection,
 *::selection,
 ::-moz-selection,
 *::-moz-selection,
 ::-webkit-selection,
 *::-webkit-selection,
html ::selection,
body ::selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* Element-level */

.van-field__control::selection,
.van-field__control::-moz-selection,
.van-field__control::-webkit-selection,
.van-cell input::selection,
.van-cell input::-moz-selection,
.van-cell input::-webkit-selection,
.van-cell textarea::selection,
.van-cell textarea::-moz-selection,
.van-cell textarea::-webkit-selection,
input.van-field__control::selection,
input.van-field__control::-moz-selection,
input.van-field__control::-webkit-selection,
textarea.van-field__control::selection,
textarea.van-field__control::-moz-selection,
textarea.van-field__control::-webkit-selection,
input::selection,
input::-moz-selection,
input::-webkit-selection,
textarea::selection,
textarea::-moz-selection,
textarea::-webkit-selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* Scoped element-level — highest priority */

.van-field__control::selection,
 .van-field__control *::selection,
 .van-field__control::-moz-selection,
 .van-field__control *::-moz-selection,
 .van-field__control::-webkit-selection,
 .van-field__control *::-webkit-selection,
 .van-cell input::selection,
 .van-cell input::-moz-selection,
 .van-cell input::-webkit-selection,
 .van-cell textarea::selection,
 .van-cell textarea::-moz-selection,
 .van-cell textarea::-webkit-selection,
 input.van-field__control::selection,
 input.van-field__control::-moz-selection,
 input.van-field__control::-webkit-selection,
 textarea.van-field__control::selection,
 textarea.van-field__control::-moz-selection,
 textarea.van-field__control::-webkit-selection,
 input::selection,
 input::-moz-selection,
 input::-webkit-selection,
 textarea::selection,
 textarea::-moz-selection,
 textarea::-webkit-selection,
 .van-cell::selection,
 .van-cell *::selection,
 .van-cell::-moz-selection,
 .van-cell *::-moz-selection,
 .van-cell::-webkit-selection,
 .van-cell *::-webkit-selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Dark Theme Fixes (from kk-dark-fixes.css)
   ───────────────────────────────────────────────────────────── */

/* 1. Vant empty-state card (solid white panel) */

.van-empty,
.van-empty__image,
.van-empty__description,
.van-empty__bottom {
  background: transparent !important;
}

.van-empty__description p {
  color: var(--kkdating-text, #eeeef3) !important;
}

.van-empty__bottom {
  color: var(--kkdating-text, #eeeef3);
}

.van-empty__image svg,
.van-empty__image img {
  filter: invert(1) brightness(1.4);
  opacity: 0.5;
}

/* 2. /recharge amount input */

.recharge-shell {
  color: var(--kkdating-text, #eeeef3);
}

.recharge-shell .custom-input-wrap {
  color: var(--kkdating-text, #eeeef3);
}

.recharge-shell .custom-input-wrap input {
  color: var(--kkdating-text, #eeeef3) !important;
  -webkit-text-fill-color: var(--kkdating-text, #eeeef3);
  caret-color: var(--kkdating-primary, #a78bfa);
}

.recharge-shell .custom-input-wrap input::placeholder {
  color: rgba(238, 238, 243, 0.45);
}

/* 3. /recharge header (title + intro) */

.recharge-shell .recharge-header strong,
.recharge-shell .recharge-header p {
  color: var(--kkdating-text, #eeeef3) !important;
}

.recharge-shell .recharge-header p {
  color: rgba(238, 238, 243, 0.72) !important;
}

/* 4. .custom-input-wrap as LABEL */

.recharge-shell label.custom-input-wrap,
.recharge-shell .custom-input-wrap.van-field__label,
.recharge-shell .van-field__label.custom-input-wrap {
  color: var(--kkdating-text, #eeeef3) !important;
  -webkit-text-fill-color: var(--kkdating-text, #eeeef3);
}

/* 5. /recharge accent marks inside plan copy */

.recharge-shell mark.highlight-blue {
  color: #93c5fd !important;
  background: rgba(96, 165, 250, 0.18) !important;
  border-radius: 4px;
  padding: 0 4px;
}

.recharge-shell mark.highlight-green {
  color: #86efac !important;
  background: rgba(74, 222, 128, 0.18) !important;
  border-radius: 4px;
  padding: 0 4px;
}

.recharge-shell mark.highlight-gold {
  color: #fde68a !important;
  background: rgba(250, 204, 21, 0.22) !important;
  border-radius: 4px;
  padding: 0 4px;
}

/* 6. .plan-ticket / .plan-ribbon */

.recharge-shell .plan-ticket {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
  color: #1f1300 !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.recharge-shell .plan-ribbon {
  background: linear-gradient(135deg, #a78bfa, #6366f1) !important;
  color: #ffffff !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* 7. .back-button (Vant left arrow) */

.recharge-shell .back-button,
.recharge-shell .back-button i,
.recharge-shell .back-button .van-icon {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 8. .service-card SECTION */

.recharge-shell .service-card,
.recharge-shell section.service-card {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 9. p.plan-copy */

.recharge-shell p.plan-copy {
  color: rgba(238, 238, 243, 0.78) !important;
}

/* 10. Global STRONG / H1 / H2 / H3 / H4 (page titles) */

body strong,
body h1,
body h2,
body h3,
body h4 {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 11. .van-radio__label--disabled */

.van-radio__label--disabled,
.van-radio--disabled .van-radio__label {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 12. /home-display empty photo / bio zones */

.home-display-shell [class*="photo-zone"],
.home-display-shell [class*="bio-zone"],
.home-display-shell [class*="empty-zone"],
.home-display-shell [class*="upload-zone"],
.home-display-shell .van-uploader__upload,
.home-display-shell .van-empty,
.meet-display-shell [class*="photo-zone"],
.meet-display-shell [class*="bio-zone"],
.meet-display-shell [class*="empty-zone"],
.meet-display-shell [class*="upload-zone"],
.meet-display-shell .van-uploader__upload,
.meet-display-shell .van-empty {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* 12b. .empty-photo-panel / .empty-text-panel */

.home-display-shell .empty-photo-panel,
.home-display-shell .empty-text-panel,
.meet-display-shell .empty-photo-panel,
.meet-display-shell .empty-text-panel {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* 12c. bare <label> on /profile/edit + /profile/password */

.page-shell.edit-shell label,
.page-shell.password-shell label {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 13. /zone/publish image-uploader placeholder */

.zone-publish-shell .van-uploader__upload,
.zone-publish-shell [class*="upload"],
.zone-publish-shell [class*="upload-zone"] {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* 14. /zone/publish plain button */

.zone-publish-shell .van-button--plain,
.zone-publish-shell button.van-button--plain {
  background: transparent !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

/* 15. /about tabs (overrides about-shell .van-tab--active from base) */

.about-shell .van-tabs__nav,
.about-shell .van-tab,
.about-shell .van-tab__text,
.about-shell .van-tab--active .van-tab__text {
  background: transparent !important;
  color: var(--kkdating-text, #eeeef3) !important;
}

.about-shell .van-tab--active {
  background: var(--kkdating-primary, #a78bfa) !important;
  color: #0b0b16 !important;
}

.about-shell .van-tab--active .van-tab__text {
  color: #0b0b16 !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Member Sidebar (from kk-member-sidebar.css)
   Replaces bottom tabbar with top menu bar + desktop sidebar
   ───────────────────────────────────────────────────────────── */

:root {
  --kk-sidebar-w: 232px;
  --kk-topbar-h: 56px;
}

/* 1. Hide the original bottom tabbar entirely */

.member-tabbar,
[class*="member-tabbar"] {
  display: none !important;
}

/* Don't reserve vertical space for the tabbar */

.member-shell {
  padding-bottom: 0 !important;
}

/* 2. Top menu bar */

.kk-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: var(--kk-topbar-h);
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(14, 14, 24, .96), rgba(14, 14, 24, .88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(124, 58, 237, .25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.kk-topbar-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: #b9b3c8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  background: transparent;
  border-radius: 12px;
  transition: color .2s, background .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}

.kk-topbar-item:hover {
  color: #ffffff;
  background: rgba(167, 139, 250, .12);
}

.kk-topbar-item.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(124, 58, 237, .18));
  box-shadow: inset 0 -2px 0 rgba(196, 181, 253, .9);
}

.kk-topbar-item .kk-tb-ic {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.kk-topbar-spacer { flex: 1; }

.member-content {
  padding-top: 0 !important;
}

/* 3. Sidebar (desktop only) */

.kk-sidebar {
  display: none;
}

@media (min-width: 900px) {
  .kk-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--kk-sidebar-w);
    flex: 0 0 var(--kk-sidebar-w);
    padding: 18px 12px;
    gap: 4px;
    background: rgba(14, 14, 24, .82);
    border-right: 1px solid rgba(124, 58, 237, .22);
    min-height: calc(100vh - var(--kk-topbar-h));
    box-sizing: border-box;
    position: sticky;
    top: var(--kk-topbar-h);
    align-self: flex-start;
  }

  .kk-member-body {
    width: 100%;
    display: flex;
    align-items: stretch;
    align-content: stretch;
    min-height: 0;
  }

  .kk-member-body > .member-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(900px - var(--kk-sidebar-w));
    margin: 0 auto;
  }
}

.kk-sidebar-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #7c7493;
  padding: 10px 12px 6px;
}

.kk-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: #c8c0db;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}

.kk-sidebar-item:hover {
  background: rgba(167, 139, 250, .12);
  color: #ffffff;
}

.kk-sidebar-item.active {
  background: linear-gradient(135deg, rgba(167, 139, 250, .28), rgba(124, 58, 237, .22));
  color: #ffffff;
  box-shadow: inset 3px 0 0 #c4b5fd;
}

.kk-sidebar-item .kk-sb-ic {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 22px;
  color: inherit;
}

.kk-sidebar-item .kk-sb-lbl {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kk-sidebar-item .kk-sb-arrow {
  width: 14px;
  height: 14px;
  opacity: .55;
  font-size: 12px;
  line-height: 1;
}

.kk-sidebar-item.kk-tone-gold   .kk-sb-ic { color: #f5cf6e; }

.kk-sidebar-item.kk-tone-rose   .kk-sb-ic { color: #f5a3a0; }

.kk-sidebar-item.kk-tone-blue   .kk-sb-ic { color: #93c5fd; }

.kk-sidebar-item.kk-tone-slate  .kk-sb-ic { color: #a3a3b8; }

.kk-sidebar-item.kk-tone-violet .kk-sb-ic { color: #c4b5fd; }

.kk-sidebar-item.kk-tone-mint   .kk-sb-ic { color: #86efac; }

.kk-sidebar-item.kk-tone-danger .kk-sb-ic { color: #fca5a5; }

.kk-sidebar-item.kk-tone-danger { color: #f5b5b0; }

.kk-sidebar-item.kk-tone-danger:hover { color: #ffd0cd; }

.kk-sidebar-divider {
  height: 1px;
  background: rgba(124, 58, 237, .18);
  margin: 8px 6px;
}

/* 4. Member-shell padding (no tabbar) */

.member-shell {
  padding-bottom: 0 !important;
}

/* 5. Hide /profile submenu (sidebar carries those items) */

.profile-menu,
[class*="profile-menu"],
.profile-actions,
[class*="profile-actions"] {
  display: none !important;
}

/* 6. Mobile (no sidebar) -- keep topbar only */

@media (max-width: 899px) {
  .kk-topbar {
    padding: 0 8px;
  }
  .kk-topbar-item {
    padding: 0 10px;
    font-size: 13px;
  }
  .kk-topbar-item .kk-tb-ic { font-size: 16px; }
  .kk-topbar-item .kk-tb-txt { display: inline; }
}

/* 7. Force body visible when SPA toggles tabbar-visible class */

body.kkdating-member-tabbar-visible {
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Image Fixes / Uniform Grid (from kk-image-fixes.css)
   Overrides staggered heights with uniform 220px
   ───────────────────────────────────────────────────────────── */

.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.discover-card {
  min-width: 0;
}

/* Kill the alternating heights and the base 200px — uniform */

.discover-card .photo-button,
.discover-card:nth-child(2n+1) .photo-button,
.discover-card:nth-child(2n)   .photo-button,
.photo-button {
  height: 220px !important;
  aspect-ratio: auto !important;
  width: 100% !important;
}

.discover-card .photo-button img,
.photo-button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: UI Enhancements (from ui-enhancements.css)
   NOTE: Global `* { transition: all 0.2s ease }` removed (performance hazard)
   ───────────────────────────────────────────────────────────── */

/* ---- Input Fields Enhancement ---- */

.van-field {
  position: relative;
  transition: all 0.3s ease;
}

.van-field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.van-field:focus-within::after {
  width: 100%;
}

.van-field:focus-within {
  background: rgba(167, 139, 250, 0.05) !important;
  border-radius: 8px;
}

.van-field__control {
  transition: all 0.3s ease;
}

.van-field__control:focus {
  transform: translateY(-1px);
}

/* ---- Button Enhancement ---- */

.van-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.van-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.van-button:active::before {
  width: 300px;
  height: 300px;
}

.van-button--primary {
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

.van-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(167, 139, 250, 0.4);
}

.van-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
}

/* ---- Card Enhancement ---- */

.van-cell,
.register-card,
.login-card,
.forgot-card {
  transition: all 0.3s ease;
}

.van-cell:hover {
  background: rgba(167, 139, 250, 0.03);
}

/* ---- Auth Pages Enhancement ---- */

.auth-brand {
  transition: all 0.3s ease;
}

.auth-brand:hover {
  transform: scale(1.05);
}

.auth-brand-icon {
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(167, 139, 250, 0.3));
}

.auth-brand:hover .auth-brand-icon {
  filter: drop-shadow(0 4px 12px rgba(167, 139, 250, 0.5));
  transform: rotate(5deg);
}

/* ---- Link Enhancement ---- */

a,
.router-link {
  position: relative;
  transition: all 0.3s ease;
}

a::after,
.router-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  transition: width 0.3s ease;
}

a:hover::after,
.router-link:hover::after {
  width: 100%;
}

/* ---- Popup Enhancement ---- */

.van-popup {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Loading States ---- */

.van-button--loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.van-button--loading::before {
  display: none;
}

/* ---- Success/Error States ---- */

.van-field--error {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* ---- Tab Bar Enhancement ---- */

.van-tabbar-item {
  transition: all 0.3s ease;
}

.van-tabbar-item--active {
  transform: translateY(-4px);
}

.van-tabbar-item__icon {
  transition: all 0.3s ease;
}

.van-tabbar-item--active .van-tabbar-item__icon {
  transform: scale(1.2);
}

/* ---- Avatar Enhancement ---- */

.member-avatar,
.user-avatar {
  transition: all 0.3s ease;
  border: 3px solid transparent;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) border-box;
}

.member-avatar:hover,
.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.4);
}

/* ---- List Items Enhancement ---- */

.van-cell::after {
  transition: all 0.3s ease;
}

.van-cell:active::after {
  background: rgba(167, 139, 250, 0.1);
}

/* ---- Search Bar Enhancement ---- */

.van-search {
  transition: all 0.3s ease;
}

.van-search:focus-within {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);
}

/* ---- Badge Enhancement ---- */

.van-badge {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ---- Empty State Enhancement ---- */

.van-empty {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Message Bubbles ---- */

.message-bubble {
  transition: all 0.3s ease;
}

.message-bubble:hover {
  transform: translateX(4px);
}

/* ---- Wallet Cards ---- */

.wallet-card,
.balance-card {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wallet-card::before,
.balance-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
}

.wallet-card:hover::before,
.balance-card:hover::before {
  left: 100%;
}

/* ---- Settings List ---- */

.settings-item {
  transition: all 0.3s ease;
  position: relative;
}

.settings-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 60%;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
  transform: translateY(-50%);
  transition: width 0.3s ease;
  border-radius: 0 4px 4px 0;
}

.settings-item:hover::before {
  width: 4px;
}

.settings-item:hover {
  padding-left: 20px;
}

/* ---- Moment Cards ---- */

.moment-card {
  transition: all 0.3s ease;
}

.moment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.2);
}

/* ---- Loading Spinner ---- */

.loading-spinner {
  animation: spin 1s linear infinite;
}

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

/* ---- Notification Dot ---- */

.notification-dot {
  animation: notificationPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}

@keyframes notificationPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* ---- Smooth Page Transitions ---- */

.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* ---- Tooltip Enhancement ---- */

.tooltip {
  animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Skeleton Loading ---- */

.skeleton {
  background: linear-gradient(90deg, #1f1f30 25%, #2a2a3e 50%, #1f1f30 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* ---- Ripple Effect ---- */

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* ---- Floating Action Button ---- */

.fab {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

.fab:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5);
}

.fab:active {
  transform: scale(0.95);
}

/* ---- Progress Bar ---- */

.progress-bar {
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ---- Dark Mode Specific ---- */

@media (prefers-color-scheme: dark) {
  .van-field:focus-within {
    background: rgba(167, 139, 250, 0.08) !important;
  }
  
  .van-cell:hover {
    background: rgba(167, 139, 250, 0.05);
  }
}

/* ---- Mobile Optimization ---- */

@media (max-width: 768px) {
  .van-button--primary:hover {
    transform: none;
  }
  
  .van-button--primary:active {
    transform: scale(0.98);
  }
  
  .moment-card:hover {
    transform: none;
  }
}

/* ---- Accessibility ---- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================
   MERGED PATCHES — consolidated from 8 patch files
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   SECTION: Login Page Header & UI (from kk-login-header.css)
   ───────────────────────────────────────────────────────────── */

/* ── CSS Variables (kk-header shared) ────────────────────── */

:root {
  --kk-brand: #e07864;
  --kk-brand-deep: #cf604f;
  --kk-brand-soft: rgba(224,120,100,0.12);
  --kk-glow: 0 8px 24px rgba(224,120,100,0.35);
  --kk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --kk-page-bg: #07070d;
}

/* ── Body background safeguard ──────────────────────────── */

html, body {
  background: var(--kk-page-bg) !important;
  background-color: var(--kk-page-bg) !important;
}

.kk-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Page Header ─────────────────────────────────────────── */

@keyframes kkHeaderIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kk-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s var(--kk-ease);
}

.kk-header-brand:active {
  transform: scale(0.96);
}

.kk-header-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(224,120,100,0.3);
}

.kk-header-title {
  font-family: 'Inter', 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ── Header Language Switcher ────────────────────────────── */

.kk-header-lang {
  position: relative;
}

.kk-header-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 0 14px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.kk-header-lang-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}

.kk-header-lang-btn:active {
  transform: scale(0.96);
}

.kk-header-lang-btn .lang-arrow {
  font-size: 8px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s;
}

.kk-header-lang.open .kk-header-lang-btn .lang-arrow {
  transform: rotate(180deg);
}

.kk-header-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  border-radius: 12px;
  padding: 6px;
  background: rgba(20,16,10,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: none;
  z-index: 200;
}

.kk-header-lang.open .kk-header-lang-menu {
  display: block;
  animation: kkFadeIn 0.15s ease;
}

.kk-header-lang-item {
  padding: 8px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.kk-header-lang-item:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.kk-header-lang-item.active {
  color: #e07864;
  font-weight: 800;
  background: rgba(224,120,100,0.12);
}

@keyframes kkFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Background Decorative Gradient Orbs ────────────────── */

.login-mobile {
  position: relative;
  animation: kkPageIn 0.6s var(--kk-ease);
}

@keyframes kkPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.kk-orbs::before,
body.kk-orbs::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.28;
  pointer-events: none;
  animation: kkFloat 18s ease-in-out infinite;
  z-index: 0;
}

body.kk-orbs::before {
  width: 380px;
  height: 380px;
  top: -100px;
  right: -120px;
  background: radial-gradient(circle, rgba(224,120,100,0.55), transparent 70%);
}

body.kk-orbs::after {
  width: 440px;
  height: 440px;
  bottom: -180px;
  left: -140px;
  background: radial-gradient(circle, rgba(167,139,250,0.45), transparent 70%);
  animation-delay: -9s;
}

@keyframes kkFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(20px, -30px) scale(1.05); }
  66%      { transform: translate(-20px, 25px) scale(0.95); }
}

/* Make sure content sits above the orbs */

.login-mobile > * {
  position: relative;
  z-index: 1;
}

/* Reduce the heavy dark overlay on the auth collage */

.auth-mobile::before,
.auth-mobile::before,
.mobile-shell.auth-mobile::before {
  background:
    var(--kkdating-auth-bg-collage, none) center center / cover no-repeat,
    linear-gradient(180deg, rgba(7,7,13,0.15) 0%, rgba(7,7,13,0.35) 100%) !important;
}

.auth-mobile::after,
.auth-mobile::after {
  background: linear-gradient(180deg, rgba(124,58,237,0.06) 0%, rgba(0,0,0,0.15) 100%) !important;
}

/* ── Hero / Brand Text ─────────────────────────────────── */

.login-hero {
  gap: 8px !important;
  text-align: center;
  animation: kkHeroIn 0.7s 0.1s var(--kk-ease) backwards;
}

@keyframes kkHeroIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kk-brand-h1 {
  font-family: 'Playfair Display', 'Inter', serif;
  font-size: 30px !important;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #f9d6cf 50%, #e07864 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 24px rgba(224,120,100,0.2);
  margin: 0 !important;
  line-height: 1.1 !important;
}

.kk-tagline {
  font-size: 14px !important;
  font-weight: 500;
  color: rgba(255,255,255,0.7) !important;
  max-width: 320px;
  margin: 0 auto !important;
  line-height: 1.5 !important;
  letter-spacing: 0.01em;
}

/* Override the original hero styles */

.login-hero h1 {
  font-size: 30px !important;
}

.login-hero p {
  font-size: 14px !important;
  max-width: 320px;
}

/* ── Login Card (kk-login-header override) ─────────────── */

.login-card {
  padding: 24px 22px 18px !important;
  border-radius: 20px !important;
  background: rgba(20,16,10,0.55) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
  position: relative;
  overflow: hidden;
  animation: kkCardIn 0.7s 0.2s var(--kk-ease) backwards;
}

@keyframes kkCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Subtle accent bar at the top of the card */

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,120,100,0.6), transparent);
  pointer-events: none;
}

.login-card-head h2,
.login-card h2 {
  display: none !important;
}

.login-card-head h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -0.01em;
  text-align: center;
}

/* ── Form Fields (kk-login-header override) ─────────────── */

.van-cell {
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  background: rgba(255,255,255,0.95) !important;
  transition: box-shadow 0.2s, transform 0.2s, background 0.2s;
  border: 1.5px solid transparent;
  padding: 14px 16px !important;
  display: flex;
  align-items: center;
}

.van-cell:focus-within {
  box-shadow: 0 0 0 3px rgba(224,120,100,0.25);
  background: #fff !important;
  border-color: rgba(224,120,100,0.4);
}

/* Form field icons via CSS pseudo-elements */

.van-cell:first-of-type::before,
 .van-cell:nth-of-type(2)::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.van-cell:first-of-type::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e07864' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

.van-cell:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e07864' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
}

.van-cell:focus-within::before {
  opacity: 1;
}

.van-cell input {
  font-size: 15px !important;
  font-weight: 500;
  color: #1a1a1a;
}

.van-cell input::placeholder {
  color: rgba(0,0,0,0.4);
  font-weight: 500;
}

/* Error state for form fields */

.van-cell--error,
 .van-field--error {
  border-color: rgba(255, 80, 80, 0.5) !important;
  background: rgba(255, 235, 235, 0.96) !important;
  box-shadow: 0 0 0 2px rgba(255, 80, 80, 0.15) !important;
  animation: kkShake 0.4s var(--kk-ease);
}

@keyframes kkShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  75%      { transform: translateX(6px); }
}

/* ── Submit Button (kk-login-header override) ────────────── */

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

.login-submit .van-button {
  border-radius: 14px !important;
  height: 50px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ec4899, #db2777) !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(236,72,153,0.4) !important;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s !important;
  position: relative;
  overflow: hidden;
}

.login-submit .van-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s var(--kk-ease);
}

.login-submit .van-button:hover::after {
  left: 100%;
}

.login-submit .van-button:hover {
  box-shadow: 0 12px 32px rgba(236,72,153,0.5) !important;
  filter: brightness(1.05);
}

.login-submit .van-button:active {
  transform: scale(0.98);
}

/* Loading state for submit button */

.login-submit .van-button--loading {
  background: linear-gradient(135deg, #db2777, #be185d) !important;
  cursor: wait;
  pointer-events: none;
}

.login-submit .van-button--loading .van-button__text {
  opacity: 0.6;
}

/* ── Links Section (kk-login-header override) ────────────── */

.login-links {
  gap: 18px !important;
  margin-top: 18px !important;
  font-size: 13px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.login-links .footer-link,
.login-links a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: color 0.2s, transform 0.2s;
  text-decoration: none;
  position: relative;
}

.login-links .footer-link:hover,
.login-links a:hover {
  color: #e07864 !important;
}

/* ── Footer Cleanup (kk-login-header) ───────────────────── */

.kk-header-lang-shown .auth-footer .footer-row:first-child,
.kk-header-lang-shown .login-footer .footer-row:first-child {
  position: absolute !important;
  left: -99999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.auth-footer .footer-row:last-child,
.login-footer .footer-row:last-child {
  margin-bottom: 0 !important;
}

.footer-copy {
  font-size: 10px !important;
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.04em;
}

/* ── Desktop Overrides (kk-login-header) ─────────────────── */

@media (min-width: 900px) {
  .kk-page-header {
    height: 60px;
    padding: 0 28px;
    background: #07070d;
  }

  .kk-header-title {
    font-size: 20px;
  }

  .kk-header-lang-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
  }

  .login-mobile {
    padding-top: 200px !important;
  }

  /* On desktop, orbs are larger and gentler */
  body.kk-orbs::before {
    width: 500px;
    height: 500px;
    top: -180px;
    right: -160px;
  }

  body.kk-orbs::after {
    width: 560px;
    height: 560px;
    bottom: -200px;
    left: -180px;
  }

  .login-card {
    padding: 32px 32px 28px !important;
    border-radius: 24px !important;
  }

  .login-card-head h2 {
    font-size: 26px !important;
  }

  .kk-brand-h1 {
    font-size: 36px !important;
  }

  .kk-tagline {
    font-size: 15px !important;
  }

  /*
   * Re-define the grid with three explicit named areas so the
   * hero lands ABOVE the card.
   */
  .login-mobile {
    grid-template-areas: "hero" "card" "footer" !important;
    grid-template-rows: minmax(96px, auto) minmax(0, 1fr) auto !important;
    row-gap: 24px !important;
  }

  .login-hero {
    grid-area: hero !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .login-card {
    grid-area: card !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .login-footer {
    grid-area: footer !important;
    grid-row: 3 !important;
    grid-column: 2 !important;
  }

  /* Move the title hero above the form */
  .login-hero {
    order: -1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    align-items: center !important;
  }

  .login-hero .kk-brand-h1,
  .login-hero h1 {
    text-align: center !important;
  }

  .login-hero .kk-tagline,
  .login-hero p {
    text-align: center !important;
  }

  .auth-mobile::before,
  .auth-mobile::before,
  .mobile-shell.auth-mobile::before {
    background:
      var(--kkdating-auth-bg-collage, none) center center / cover no-repeat,
      linear-gradient(180deg, rgba(7,7,13,0.2) 0%, rgba(7,7,13,0.4) 100%) !important;
  }
}

/* ── Reduced Motion (kk-login-header) ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.kk-orbs::before,
  body.kk-orbs::after,
  .kk-page-header,
  .login-card,
  .login-hero {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Header Avatar Dropdown (from kk-login-header-avatar.css)
   ───────────────────────────────────────────────────────────── */

.kk-header-user {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}

.kk-header-user-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  height: 34px;
  padding-left: 3px;
  padding-right: 8px;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  color: #fff;
}

.kk-header-user-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.35);
}

.kk-header-user-btn:active {
  transform: scale(0.96);
}

.kk-header-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #1f1f2a;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.kk-header-avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e07864, #cf604f);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.kk-header-avatar-arrow {
  font-size: 8px;
  margin-left: 2px;
  opacity: 0.7;
  transition: transform 0.2s;
}

.kk-header-user.open .kk-header-avatar-arrow {
  transform: rotate(180deg);
}

.kk-header-user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  border-radius: 12px;
  padding: 6px;
  background: rgba(20,16,10,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: none;
  z-index: 200;
}

.kk-header-user.open .kk-header-user-menu {
  display: block;
  animation: kkFadeIn 0.15s ease;
}

.kk-header-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.kk-header-user-item:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.kk-header-user-item .item-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0.85;
}

.kk-header-user-item.logout {
  color: #fca5a5;
}

.kk-header-user-item.logout:hover {
  background: rgba(239,68,68,0.15);
  color: #fff;
}

.kk-header-user-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255,255,255,0.08);
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Login Input Colors (from kk-login-input-color.css)
   NOTE: Light-theme global vars (lines 132-144 of original) REMOVED
   ───────────────────────────────────────────────────────────── */

/* ---- Scoped to login page (highest priority) ---- */

.van-cell {
  background: rgba(14, 14, 24, .78) !important;
}

.van-field__label {
  color: #c4b5fd !important;
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.van-field__label--required::before {
  color: #f5a3a0 !important;
}

.van-field__control {
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 600;
  -webkit-text-fill-color: #ffffff;
}

.van-field__control::placeholder {
  color: #8b8ba8 !important;
  font-weight: 500;
  opacity: 1;
}

.van-field__control:-webkit-autofill,
 .van-field__control:-webkit-autofill:hover,
 .van-field__control:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(26, 26, 44, .95) inset !important;
  caret-color: #ffffff;
}

.van-field__right-icon,
 .van-field__button {
  color: #c4b5fd !important;
}

/* Toast / error text inside the login form */

.van-toast,
 .van-field__error-message {
  color: #ffb4b4 !important;
  font-weight: 600;
}

/* ---- SCOPED ::selection on the actual control element ---- */

.van-field__control::selection,
 .van-field__control *::selection,
 .van-field__control::-webkit-selection,
 .van-field__control *::-webkit-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

.van-field__control::-moz-selection,
 .van-field__control *::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

/* When the input itself is the active focused element */

.van-cell input::selection,
 .van-cell textarea::selection,
 .van-cell input::-webkit-selection,
 .van-cell textarea::-webkit-selection,
input.van-field__control::selection,
input.van-field__control::-webkit-selection,
textarea.van-field__control::selection,
textarea.van-field__control::-webkit-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
}

.van-cell input::-moz-selection,
 .van-cell textarea::-moz-selection,
input.van-field__control::-moz-selection,
textarea.van-field__control::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
}

/* Enforce on the cell itself */

.van-cell::selection,
 .van-cell *::selection,
 .van-cell::-webkit-selection,
 .van-cell *::-webkit-selection,
 .van-cell::-moz-selection,
 .van-cell *::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
}

/* ---- Global ::selection override (every page) ---- */

.van-field__control::selection,
.van-field__control *::selection,
.van-field__control::-webkit-selection,
.van-field__control *::-webkit-selection,
.van-cell input::selection,
.van-cell textarea::selection,
.van-cell input::-webkit-selection,
.van-cell textarea::-webkit-selection,
input.van-field__control::selection,
input.van-field__control::-webkit-selection,
textarea.van-field__control::selection,
textarea.van-field__control::-webkit-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

.van-field__control::-moz-selection,
.van-field__control *::-moz-selection,
.van-cell input::-moz-selection,
.van-cell textarea::-moz-selection,
input.van-field__control::-moz-selection,
textarea.van-field__control::-moz-selection {
  background: #a78bfa !important;
  background-color: #a78bfa !important;
  color: #14141f !important;
  -webkit-text-fill-color: #14141f !important;
  text-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Selection Fix (from kk-login-selection-fix.css)
   Overrides the purple ::selection with orange (#ff6b00)
   ───────────────────────────────────────────────────────────── */

::selection,
::-moz-selection,
::-webkit-selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* Scoped wildcards */

::selection,
 *::selection,
 ::-moz-selection,
 *::-moz-selection,
 ::-webkit-selection,
 *::-webkit-selection,
html ::selection,
body ::selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* Element-level */

.van-field__control::selection,
.van-field__control::-moz-selection,
.van-field__control::-webkit-selection,
.van-cell input::selection,
.van-cell input::-moz-selection,
.van-cell input::-webkit-selection,
.van-cell textarea::selection,
.van-cell textarea::-moz-selection,
.van-cell textarea::-webkit-selection,
input.van-field__control::selection,
input.van-field__control::-moz-selection,
input.van-field__control::-webkit-selection,
textarea.van-field__control::selection,
textarea.van-field__control::-moz-selection,
textarea.van-field__control::-webkit-selection,
input::selection,
input::-moz-selection,
input::-webkit-selection,
textarea::selection,
textarea::-moz-selection,
textarea::-webkit-selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* Scoped element-level — highest priority */

.van-field__control::selection,
 .van-field__control *::selection,
 .van-field__control::-moz-selection,
 .van-field__control *::-moz-selection,
 .van-field__control::-webkit-selection,
 .van-field__control *::-webkit-selection,
 .van-cell input::selection,
 .van-cell input::-moz-selection,
 .van-cell input::-webkit-selection,
 .van-cell textarea::selection,
 .van-cell textarea::-moz-selection,
 .van-cell textarea::-webkit-selection,
 input.van-field__control::selection,
 input.van-field__control::-moz-selection,
 input.van-field__control::-webkit-selection,
 textarea.van-field__control::selection,
 textarea.van-field__control::-moz-selection,
 textarea.van-field__control::-webkit-selection,
 input::selection,
 input::-moz-selection,
 input::-webkit-selection,
 textarea::selection,
 textarea::-moz-selection,
 textarea::-webkit-selection,
 .van-cell::selection,
 .van-cell *::selection,
 .van-cell::-moz-selection,
 .van-cell *::-moz-selection,
 .van-cell::-webkit-selection,
 .van-cell *::-webkit-selection {
  background: #ff6b00 !important;
  background-color: #ff6b00 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Dark Theme Fixes (from kk-dark-fixes.css)
   ───────────────────────────────────────────────────────────── */

/* 1. Vant empty-state card (solid white panel) */

.van-empty,
.van-empty__image,
.van-empty__description,
.van-empty__bottom {
  background: transparent !important;
}

.van-empty__description p {
  color: var(--kkdating-text, #eeeef3) !important;
}

.van-empty__bottom {
  color: var(--kkdating-text, #eeeef3);
}

.van-empty__image svg,
.van-empty__image img {
  filter: invert(1) brightness(1.4);
  opacity: 0.5;
}

/* 2. /recharge amount input */

.recharge-shell {
  color: var(--kkdating-text, #eeeef3);
}

.recharge-shell .custom-input-wrap {
  color: var(--kkdating-text, #eeeef3);
}

.recharge-shell .custom-input-wrap input {
  color: var(--kkdating-text, #eeeef3) !important;
  -webkit-text-fill-color: var(--kkdating-text, #eeeef3);
  caret-color: var(--kkdating-primary, #a78bfa);
}

.recharge-shell .custom-input-wrap input::placeholder {
  color: rgba(238, 238, 243, 0.45);
}

/* 3. /recharge header (title + intro) */

.recharge-shell .recharge-header strong,
.recharge-shell .recharge-header p {
  color: var(--kkdating-text, #eeeef3) !important;
}

.recharge-shell .recharge-header p {
  color: rgba(238, 238, 243, 0.72) !important;
}

/* 4. .custom-input-wrap as LABEL */

.recharge-shell label.custom-input-wrap,
.recharge-shell .custom-input-wrap.van-field__label,
.recharge-shell .van-field__label.custom-input-wrap {
  color: var(--kkdating-text, #eeeef3) !important;
  -webkit-text-fill-color: var(--kkdating-text, #eeeef3);
}

/* 5. /recharge accent marks inside plan copy */

.recharge-shell mark.highlight-blue {
  color: #93c5fd !important;
  background: rgba(96, 165, 250, 0.18) !important;
  border-radius: 4px;
  padding: 0 4px;
}

.recharge-shell mark.highlight-green {
  color: #86efac !important;
  background: rgba(74, 222, 128, 0.18) !important;
  border-radius: 4px;
  padding: 0 4px;
}

.recharge-shell mark.highlight-gold {
  color: #fde68a !important;
  background: rgba(250, 204, 21, 0.22) !important;
  border-radius: 4px;
  padding: 0 4px;
}

/* 6. .plan-ticket / .plan-ribbon */

.recharge-shell .plan-ticket {
  background: linear-gradient(135deg, #fbbf24, #f97316) !important;
  color: #1f1300 !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.recharge-shell .plan-ribbon {
  background: linear-gradient(135deg, #a78bfa, #6366f1) !important;
  color: #ffffff !important;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* 7. .back-button (Vant left arrow) */

.recharge-shell .back-button,
.recharge-shell .back-button i,
.recharge-shell .back-button .van-icon {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 8. .service-card SECTION */

.recharge-shell .service-card,
.recharge-shell section.service-card {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 9. p.plan-copy */

.recharge-shell p.plan-copy {
  color: rgba(238, 238, 243, 0.78) !important;
}

/* 10. Global STRONG / H1 / H2 / H3 / H4 (page titles) */

body strong,
body h1,
body h2,
body h3,
body h4 {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 11. .van-radio__label--disabled */

.van-radio__label--disabled,
.van-radio--disabled .van-radio__label {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 12. /home-display empty photo / bio zones */

.home-display-shell [class*="photo-zone"],
.home-display-shell [class*="bio-zone"],
.home-display-shell [class*="empty-zone"],
.home-display-shell [class*="upload-zone"],
.home-display-shell .van-uploader__upload,
.home-display-shell .van-empty,
.meet-display-shell [class*="photo-zone"],
.meet-display-shell [class*="bio-zone"],
.meet-display-shell [class*="empty-zone"],
.meet-display-shell [class*="upload-zone"],
.meet-display-shell .van-uploader__upload,
.meet-display-shell .van-empty {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* 12b. .empty-photo-panel / .empty-text-panel */

.home-display-shell .empty-photo-panel,
.home-display-shell .empty-text-panel,
.meet-display-shell .empty-photo-panel,
.meet-display-shell .empty-text-panel {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* 12c. bare <label> on /profile/edit + /profile/password */

.page-shell.edit-shell label,
.page-shell.password-shell label {
  color: var(--kkdating-text, #eeeef3) !important;
}

/* 13. /zone/publish image-uploader placeholder */

.zone-publish-shell .van-uploader__upload,
.zone-publish-shell [class*="upload"],
.zone-publish-shell [class*="upload-zone"] {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border: 1px dashed rgba(167, 139, 250, 0.3) !important;
}

/* 14. /zone/publish plain button */

.zone-publish-shell .van-button--plain,
.zone-publish-shell button.van-button--plain {
  background: transparent !important;
  color: var(--kkdating-text, #eeeef3) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

/* 15. /about tabs (overrides about-shell .van-tab--active from base) */

.about-shell .van-tabs__nav,
.about-shell .van-tab,
.about-shell .van-tab__text,
.about-shell .van-tab--active .van-tab__text {
  background: transparent !important;
  color: var(--kkdating-text, #eeeef3) !important;
}

.about-shell .van-tab--active {
  background: var(--kkdating-primary, #a78bfa) !important;
  color: #0b0b16 !important;
}

.about-shell .van-tab--active .van-tab__text {
  color: #0b0b16 !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Member Sidebar (from kk-member-sidebar.css)
   Replaces bottom tabbar with top menu bar + desktop sidebar
   ───────────────────────────────────────────────────────────── */

:root {
  --kk-sidebar-w: 232px;
  --kk-topbar-h: 56px;
}

/* 1. Hide the original bottom tabbar entirely */

.member-tabbar,
[class*="member-tabbar"] {
  display: none !important;
}

/* Don't reserve vertical space for the tabbar */

.member-shell {
  padding-bottom: 0 !important;
}

/* 2. Top menu bar */

.kk-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: var(--kk-topbar-h);
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(14, 14, 24, .96), rgba(14, 14, 24, .88));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(124, 58, 237, .25);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.kk-topbar-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  color: #b9b3c8;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  background: transparent;
  border-radius: 12px;
  transition: color .2s, background .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}

.kk-topbar-item:hover {
  color: #ffffff;
  background: rgba(167, 139, 250, .12);
}

.kk-topbar-item.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(167, 139, 250, .25), rgba(124, 58, 237, .18));
  box-shadow: inset 0 -2px 0 rgba(196, 181, 253, .9);
}

.kk-topbar-item .kk-tb-ic {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.kk-topbar-spacer { flex: 1; }

.member-content {
  padding-top: 0 !important;
}

/* 3. Sidebar (desktop only) */

.kk-sidebar {
  display: none;
}

@media (min-width: 900px) {
  .kk-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--kk-sidebar-w);
    flex: 0 0 var(--kk-sidebar-w);
    padding: 18px 12px;
    gap: 4px;
    background: rgba(14, 14, 24, .82);
    border-right: 1px solid rgba(124, 58, 237, .22);
    min-height: calc(100vh - var(--kk-topbar-h));
    box-sizing: border-box;
    position: sticky;
    top: var(--kk-topbar-h);
    align-self: flex-start;
  }

  .kk-member-body {
    width: 100%;
    display: flex;
    align-items: stretch;
    align-content: stretch;
    min-height: 0;
  }

  .kk-member-body > .member-content {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(900px - var(--kk-sidebar-w));
    margin: 0 auto;
  }
}

.kk-sidebar-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #7c7493;
  padding: 10px 12px 6px;
}

.kk-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: #c8c0db;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
  -webkit-tap-highlight-color: transparent;
}

.kk-sidebar-item:hover {
  background: rgba(167, 139, 250, .12);
  color: #ffffff;
}

.kk-sidebar-item.active {
  background: linear-gradient(135deg, rgba(167, 139, 250, .28), rgba(124, 58, 237, .22));
  color: #ffffff;
  box-shadow: inset 3px 0 0 #c4b5fd;
}

.kk-sidebar-item .kk-sb-ic {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 22px;
  color: inherit;
}

.kk-sidebar-item .kk-sb-lbl {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kk-sidebar-item .kk-sb-arrow {
  width: 14px;
  height: 14px;
  opacity: .55;
  font-size: 12px;
  line-height: 1;
}

.kk-sidebar-item.kk-tone-gold   .kk-sb-ic { color: #f5cf6e; }

.kk-sidebar-item.kk-tone-rose   .kk-sb-ic { color: #f5a3a0; }

.kk-sidebar-item.kk-tone-blue   .kk-sb-ic { color: #93c5fd; }

.kk-sidebar-item.kk-tone-slate  .kk-sb-ic { color: #a3a3b8; }

.kk-sidebar-item.kk-tone-violet .kk-sb-ic { color: #c4b5fd; }

.kk-sidebar-item.kk-tone-mint   .kk-sb-ic { color: #86efac; }

.kk-sidebar-item.kk-tone-danger .kk-sb-ic { color: #fca5a5; }

.kk-sidebar-item.kk-tone-danger { color: #f5b5b0; }

.kk-sidebar-item.kk-tone-danger:hover { color: #ffd0cd; }

.kk-sidebar-divider {
  height: 1px;
  background: rgba(124, 58, 237, .18);
  margin: 8px 6px;
}

/* 4. Member-shell padding (no tabbar) */

.member-shell {
  padding-bottom: 0 !important;
}

/* 5. Hide /profile submenu (sidebar carries those items) */

.profile-menu,
[class*="profile-menu"],
.profile-actions,
[class*="profile-actions"] {
  display: none !important;
}

/* 6. Mobile (no sidebar) -- keep topbar only */

@media (max-width: 899px) {
  .kk-topbar {
    padding: 0 8px;
  }
  .kk-topbar-item {
    padding: 0 10px;
    font-size: 13px;
  }
  .kk-topbar-item .kk-tb-ic { font-size: 16px; }
  .kk-topbar-item .kk-tb-txt { display: inline; }
}

/* 7. Force body visible when SPA toggles tabbar-visible class */

body.kkdating-member-tabbar-visible {
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: Image Fixes / Uniform Grid (from kk-image-fixes.css)
   Overrides staggered heights with uniform 220px
   ───────────────────────────────────────────────────────────── */

.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.discover-card {
  min-width: 0;
}

/* Kill the alternating heights and the base 200px — uniform */

.discover-card .photo-button,
.discover-card:nth-child(2n+1) .photo-button,
.discover-card:nth-child(2n)   .photo-button,
.photo-button {
  height: 220px !important;
  aspect-ratio: auto !important;
  width: 100% !important;
}

.discover-card .photo-button img,
.photo-button img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────
   SECTION: UI Enhancements (from ui-enhancements.css)
   NOTE: Global `* { transition: all 0.2s ease }` REMOVED (performance hazard)
   ───────────────────────────────────────────────────────────── */

/* ---- Input Fields Enhancement ---- */

.van-field {
  position: relative;
  transition: all 0.3s ease;
}

.van-field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.van-field:focus-within::after {
  width: 100%;
}

.van-field:focus-within {
  background: rgba(167, 139, 250, 0.05) !important;
  border-radius: 8px;
}

.van-field__control {
  transition: all 0.3s ease;
}

.van-field__control:focus {
  transform: translateY(-1px);
}

/* ---- Button Enhancement ---- */

.van-button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.van-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.van-button:active::before {
  width: 300px;
  height: 300px;
}

.van-button--primary {
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

.van-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(167, 139, 250, 0.4);
}

.van-button--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
}

/* ---- Card Enhancement ---- */

.van-cell,
.register-card,
.login-card,
.forgot-card {
  transition: all 0.3s ease;
}

.van-cell:hover {
  background: rgba(167, 139, 250, 0.03);
}

/* ---- Auth Pages Enhancement ---- */

.auth-brand {
  transition: all 0.3s ease;
}

.auth-brand:hover {
  transform: scale(1.05);
}

.auth-brand-icon {
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(167, 139, 250, 0.3));
}

.auth-brand:hover .auth-brand-icon {
  filter: drop-shadow(0 4px 12px rgba(167, 139, 250, 0.5));
  transform: rotate(5deg);
}

/* ---- Link Enhancement ---- */

a,
.router-link {
  position: relative;
  transition: all 0.3s ease;
}

a::after,
.router-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  transition: width 0.3s ease;
}

a:hover::after,
.router-link:hover::after {
  width: 100%;
}

/* ---- Popup Enhancement ---- */

.van-popup {
  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Loading States ---- */

.van-button--loading {
  opacity: 0.7;
  cursor: not-allowed;
}

.van-button--loading::before {
  display: none;
}

/* ---- Success/Error States ---- */

.van-field--error {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* ---- Tab Bar Enhancement ---- */

.van-tabbar-item {
  transition: all 0.3s ease;
}

.van-tabbar-item--active {
  transform: translateY(-4px);
}

.van-tabbar-item__icon {
  transition: all 0.3s ease;
}

.van-tabbar-item--active .van-tabbar-item__icon {
  transform: scale(1.2);
}

/* ---- Avatar Enhancement ---- */

.member-avatar,
.user-avatar {
  transition: all 0.3s ease;
  border: 3px solid transparent;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) border-box;
}

.member-avatar:hover,
.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(167, 139, 250, 0.4);
}

/* ---- List Items Enhancement ---- */

.van-cell::after {
  transition: all 0.3s ease;
}

.van-cell:active::after {
  background: rgba(167, 139, 250, 0.1);
}

/* ---- Search Bar Enhancement ---- */

.van-search {
  transition: all 0.3s ease;
}

.van-search:focus-within {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);
}

/* ---- Badge Enhancement ---- */

.van-badge {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ---- Empty State Enhancement ---- */

.van-empty {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Message Bubbles ---- */

.message-bubble {
  transition: all 0.3s ease;
}

.message-bubble:hover {
  transform: translateX(4px);
}

/* ---- Wallet Cards ---- */

.wallet-card,
.balance-card {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wallet-card::before,
.balance-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
}

.wallet-card:hover::before,
.balance-card:hover::before {
  left: 100%;
}

/* ---- Settings List ---- */

.settings-item {
  transition: all 0.3s ease;
  position: relative;
}

.settings-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 60%;
  background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%);
  transform: translateY(-50%);
  transition: width 0.3s ease;
  border-radius: 0 4px 4px 0;
}

.settings-item:hover::before {
  width: 4px;
}

.settings-item:hover {
  padding-left: 20px;
}

/* ---- Moment Cards ---- */

.moment-card {
  transition: all 0.3s ease;
}

.moment-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.2);
}

/* ---- Loading Spinner ---- */

.loading-spinner {
  animation: spin 1s linear infinite;
}

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

/* ---- Notification Dot ---- */

.notification-dot {
  animation: notificationPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}

@keyframes notificationPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

/* ---- Smooth Page Transitions ---- */

.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateX(20px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

/* ---- Tooltip Enhancement ---- */

.tooltip {
  animation: tooltipFadeIn 0.2s ease;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Skeleton Loading ---- */

.skeleton {
  background: linear-gradient(90deg, #1f1f30 25%, #2a2a3e 50%, #1f1f30 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

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

/* ---- Ripple Effect ---- */

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(167, 139, 250, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* ---- Floating Action Button ---- */

.fab {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

.fab:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(167, 139, 250, 0.5);
}

.fab:active {
  transform: scale(0.95);
}

/* ---- Progress Bar ---- */

.progress-bar {
  position: relative;
  overflow: hidden;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ---- Dark Mode Specific ---- */

@media (prefers-color-scheme: dark) {
  .van-field:focus-within {
    background: rgba(167, 139, 250, 0.08) !important;
  }
  
  .van-cell:hover {
    background: rgba(167, 139, 250, 0.05);
  }
}

/* ---- Mobile Optimization ---- */

@media (max-width: 768px) {
  .van-button--primary:hover {
    transform: none;
  }
  
  .van-button--primary:active {
    transform: scale(0.98);
  }
  
  .moment-card:hover {
    transform: none;
  }
}

/* ---- Accessibility: prefers-reduced-motion ---- */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}