/* 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-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
   ============================================================ */

/* Lock auth pages to one screen — no body scroll */

.auth-mobile {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

html:has(.auth-mobile),
body:has(.auth-mobile) {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

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

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

/* Layout handled by LoginPage.vue scoped styles — only decorative rules here */

/* Language selector in footer — keep links visible, only hide old language rows if present */

/* Login hero: left-aligned brand text */

.login-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 0 4px;
  text-align: left;
  position: relative;
  z-index: 1;
}

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

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

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

/* Glass card — transparent, no background */

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

.login-card h2,
.login-card-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #eeeef3;
  text-align: left;
  margin-bottom: 20px;
  display: none; /* 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: 12px !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: flex-start !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 — decorative rules only, layout in scoped styles */

.login-footer,
.register-footer,
.forgot-footer {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  text-align: left;
}

/* Links row — left-aligned on login */

.login-mobile .login-footer .footer-row {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: wrap;
  margin: 0 !important;
  padding: 0 !important;
}

/* Links row — right-aligned on register/forgot */

.register-mobile .register-footer .footer-row,
.forgot-mobile .forgot-footer .footer-row {
  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 .footer-separator,
.register-mobile .register-footer .footer-row .footer-separator,
.forgot-mobile .forgot-footer .footer-row .footer-separator { display: none !important; }

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

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

.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 ---- */

/* Layout handled by RegisterPage.vue scoped styles — only decorative rules here */

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

.register-mobile .register-field .van-cell {
  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;
}

.register-mobile .register-field .van-cell: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 ---- */

/* Field styling — solid dark background, visible text */

.forgot-mobile .forgot-field .van-cell,
.forgot-mobile .forgot-field .van-field {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(167,139,250,0.15) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin-bottom: 4px !important;
}

.forgot-mobile .forgot-field .van-cell:focus-within,
.forgot-mobile .forgot-field .van-field:focus-within {
  border-color: #a78bfa !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.forgot-mobile .forgot-field .van-field__label {
  color: rgba(238,238,243,0.7) !important;
  font-size: 12px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

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

.forgot-mobile .forgot-field .van-field__control::placeholder {
  color: rgba(238,238,243,0.3) !important;
}

.forgot-mobile .forgot-card {
  background: #0e0e18 !important;
  position: relative;
  z-index: 2;
}

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

.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 — layout handled by MemberLayout.vue scoped styles
   ============================================================ */

.member-shell { background: var(--kk-bg, #07070d) !important; }

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

.member-shell::after { background: none !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;
}

/* Uniform avatars — consistent 3:4 portrait ratio */

.photo-button {
  padding: 0 !important;
  border-radius: 14px !important;
  aspect-ratio: 3/4 !important;
  height: auto !important;
}

.photo-button img {
  border-radius: 14px !important;
  background: #1a1a2c !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !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/1 !important;
  height: auto !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;
}

/* Auth pages: white inputs override global dark van-cell */

.login-mobile .van-cell,
.login-card .van-cell {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #1a1a1a !important;
  border-radius: 10px !important;
}

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

.login-mobile .van-field__label,
.login-card .van-field__label {
  color: #666 !important;
}

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

.login-mobile .van-field__control::placeholder,
.login-card .van-field__control::placeholder {
  color: #999 !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) {
  /* Auth page hero: slightly larger on desktop */
  .login-hero h1 { font-size: 36px !important; }
  .login-hero p { font-size: 15px !important; }
  .login-card h2,
  .login-card-head h2 { font-size: 28px !important; }

  .member-content { max-width: 900px !important; margin: 0 auto !important; }

  .discover-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 16px !important; }
  .photo-button { height: auto !important; aspect-ratio: 3/4 !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) {
  .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; }
}

/* End of dark-theme-v2.css */