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

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

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

#app { background: transparent; }

::selection {
  background: #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 {
  background:
    var(--kkdating-auth-bg-collage) center center / cover no-repeat,
    linear-gradient(180deg, rgba(7,7,13,.65), rgba(7,7,13,.8) 48%, rgba(7,7,13,.92)) !important;
}

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

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

/* Language selector — HIDDEN in footer, replaced by injected dropdown */
.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;
}

/* Injected language dropdown wrapper — top-right */
.lang-dropdown-wrapper {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
}

.lang-dropdown-btn {
  background: rgba(14, 14, 24, .85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(167, 139, 250, .25) !important;
  color: #c4b5fd !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all .2s;
  font-family: 'Inter', -apple-system, sans-serif;
}

.lang-dropdown-btn:hover {
  border-color: rgba(167, 139, 250, .4) !important;
  background: rgba(14, 14, 24, .95) !important;
}

.lang-dropdown-btn::after {
  content: '';
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 4px solid transparent !important;
  border-right: 4px solid transparent !important;
  border-top: 5px solid #7e7e90 !important;
  margin-left: 4px;
  transition: border-top-color .2s;
}

.lang-dropdown-wrapper.open .lang-dropdown-btn::after {
  border-top-color: #a78bfa !important;
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: rgba(14, 14, 24, .97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(167, 139, 250, .2) !important;
  border-radius: 12px !important;
  padding: 4px 0 !important;
  min-width: 140px;
  display: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .6) !important;
}

.lang-dropdown-wrapper.open .lang-dropdown-menu {
  display: block;
}

.lang-dropdown-item {
  padding: 10px 16px !important;
  color: #7e7e90 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all .15s;
  white-space: nowrap;
}

.lang-dropdown-item:hover {
  background: rgba(167, 139, 250, .1) !important;
  color: #c4b5fd !important;
}

.lang-dropdown-item.active {
  color: #a78bfa !important;
  font-weight: 700 !important;
}

/* Login hero: SHOW on all screens, hide 1:1 logo */
.login-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 24px 8px 20px !important;
  width: 100% !important;
  max-width: 420px !important;
  margin-right: 0 !important;
  position: relative;
  z-index: 1;
}

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

.login-hero h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #eeeef3 !important;
  letter-spacing: .02em !important;
  text-align: right !important;
  line-height: 1.2 !important;
  margin-bottom: 4px !important;
}

.login-hero p {
  color: #7e7e90 !important;
  font-size: 13px !important;
  text-align: right !important;
  font-weight: 500 !important;
  letter-spacing: .01em;
}

.auth-mobile .login-card.glass-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 0 24px 0 20px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 0 !important;
}

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

/* Login form fields: individual cards, no border-bottom list */
[data-v-c9058dbc] .van-cell {
  background: rgba(14, 14, 24, .6) !important;
  border: none !important;
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  padding: 14px 16px !important;
  transition: background .2s;
}

[data-v-c9058dbc] .van-cell:focus-within { background: rgba(26, 26, 44, .8) !important; }

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

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

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

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

.login-links {
  color: #7e7e90 !important;
  margin-top: 16px !important;
  gap: 20px !important;
  font-size: 13px !important;
  justify-content: flex-end !important;
}

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

/* Footer — right-aligned under login form */
.login-footer,
.register-footer,
.forgot-footer {
  position: relative;
  z-index: 1;
  margin-top: 24px !important;
  padding: 0 24px 0 20px !important;
  background: transparent !important;
  border: none !important;
  max-width: 420px;
  width: 100%;
}

/* 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;
  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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Header: center brand, actions at edges */
.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;
}

/* Reorder header: back→left, brand→center, actions→right */
.member-brand {
  order: 2 !important;
  flex: 1 !important;
  min-width: 0 !important;
  justify-content: center !important;
}

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

.member-back-button {
  order: 1 !important;
  color: #c4b5fd !important;
  background: rgba(26, 26, 44, .5) !important;
  border: none !important;
  border-radius: 10px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 10px !important;
  font-size: 0 !important;
}

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

.member-logo {
  background: rgba(26, 26, 44, .5) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  width: 34px !important;
  height: 34px !important;
}

.member-title {
  color: #eeeef3 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  font-size: 15px !important;
  text-align: center !important;
}

.member-subtitle {
  color: #7e7e90 !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: .1em;
  text-align: center !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 {
  padding: 12px 12px 80px !important;
  min-height: auto !important;
}

/* Tabbar — 3-column icon-only on mobile, minimal */
.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 {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* Stagger: odd cards shorter, even cards taller */
.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 { top: 24px; right: 24px; }

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