/* ============================================================
   LoveSpark Dating Script — Main Stylesheet
   ============================================================ */

:root {
  --rose:         #e85d75;
  --rose-dark:    #c94060;
  --rose-light:   #f9c0cb;
  --rose-pale:    #fff0ec;
  --brand:        #2e160a;
  --brand-mid:    #4a2510;
  --brand-light:  #7a4025;
  --brand-pale:   #f5ede8;
  --text:         #1a1a2e;
  --text-muted:   #6b7280;
  --border:       #e8d5cc;
  --white:        #ffffff;
  --bg:           #fdf8f5;
  --card-shadow:  0 2px 16px rgba(46,22,10,.08);
  --radius:       14px;
  --radius-sm:    8px;
  --transition:   all .2s ease;
  --font-display: Arial, Helvetica, sans-serif;
  --font-body:    Arial, Helvetica, sans-serif;
}

/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { text-decoration: none; color: inherit; }
main { flex: 1; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }


.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.brand-heart { color: var(--rose); font-size: 1.2rem; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
/* nav-link styles moved to search section */
.nav-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--rose);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid white;
}
.nav-links-guest { display: flex; align-items: center; gap: 10px; }

/* ── Nav Search Bar ─────────────────────────────────────── */
.nav-search {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
  flex: 1;
  max-width: 340px;
  transition: var(--transition);
}
.nav-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(46,22,10,.1);
  background: white;
}
.nav-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: .875rem;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.nav-search-input::placeholder { color: var(--text-muted); }
.nav-search-btn {
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  transition: color .2s;
}
.nav-search-btn:hover { color: var(--rose); }
.nav-search-btn svg { width: 16px; height: 16px; }
.nav-search-guest { max-width: 260px; }

/* ── Nav links with labels ──────────────────────────────── */
.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: var(--transition);
  position: relative;
  min-width: 52px;
}
.nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-link span { font-size: .65rem; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.nav-link:hover { color: var(--rose); background: var(--rose-pale); }
.nav-link.active { color: var(--rose); background: var(--rose-pale); }
.btn-ghost {
  padding: 8px 18px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  transition: var(--transition);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-pale); }
.btn-nav-primary {
  padding: 8px 20px;
  border-radius: 99px;
  background: var(--rose);
  color: white;
  font-size: .875rem;
  font-weight: 600;
  transition: var(--transition);
}
.btn-nav-primary:hover { background: var(--rose-dark); transform: translateY(-1px); }

/* ── Nav User ───────────────────────────────────────────── */
.nav-user { position: relative; flex-shrink: 0; z-index: 9001; }
.nav-avatar-wrap {
  position: relative;
  cursor: pointer;
  width: 38px;
  height: 38px;
}
.nav-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rose-light);
}
.online-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid white;
}
.user-dropdown {
  display: none;
  position: fixed;
  top: 64px;
  right: 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  min-width: 220px;
  width: 240px;
  max-height: 380px;
  z-index: 999999;
  overflow: hidden;
  flex-direction: column;
}
.user-dropdown.open {
  display: flex !important;
}
.user-dropdown .dropdown-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.user-dropdown .dropdown-footer {
  border-top: 1px solid var(--border);
  background: white;
  flex-shrink: 0;
}
.user-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: .875rem;
  color: var(--text);
  transition: background .15s;
}
.user-dropdown a:hover { background: var(--rose-pale); color: var(--rose); }
.user-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.user-dropdown .logout-link:hover { color: #ef4444; background: #fff5f5; }
.coin-link { font-weight: 600; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 99px;
  font-size: .875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-mid); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(46,22,10,.3); color: white; }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 14px; font-size: .8rem; }
.btn-lg { padding: 13px 32px; font-size: 1rem; }

/* ── Forms ───────────────────────────────────────────────── */
.form-control, .form-select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--text);
  background: white;
  transition: var(--transition);
  appearance: none;
}
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(46,22,10,.1);
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; color: var(--text); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
textarea.form-control { resize: vertical; min-height: 100px; }
.is-invalid { border-color: #ef4444 !important; }
.invalid-feedback { color: #ef4444; font-size: .8rem; margin-top: 4px; display: block; }
.form-hint { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; display: block; }
.form-hint a { color: var(--rose); }
.required { color: var(--rose); }

/* ── Auth Pages ──────────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 50px 1rem 2rem;
  background: linear-gradient(135deg, #fdf5f0 0%, #f5e0d0 100%);
}
.auth-card {
  background: white;
  border-radius: 20px;
  padding: 2.5rem;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 16px 48px rgba(46,22,10,.12);
}
.auth-logo {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.auth-card h2 { font-family: var(--font-display); font-size: 1.6rem; text-align: center; margin-bottom: .4rem; }
.auth-subtitle { text-align: center; color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.auth-links { text-align: center; margin-top: 1.25rem; font-size: .875rem; color: var(--text-muted); }
.auth-links a { color: var(--brand); font-weight: 600; }
.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .875rem; }
.alert-error   { background: #fee2e2; color: #991b1b; }
.alert-success { background: #d1fae5; color: #065f46; }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #1a1a2e 0%, #3d1533 100%);
  padding: 5rem 0 4rem;
  text-align: center;
}
.hero-content { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; color: white; line-height: 1.15; margin-bottom: 1rem; }
.hero-subtitle { color: rgba(255,255,255,.72); font-size: 1.1rem; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: .875rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-stats { display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; }
.hero-stat-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: white; display: block; }
.hero-stat-label { font-size: .78rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .07em; }
.text-rose { color: var(--rose); }

/* ── Sections ────────────────────────────────────────────── */
.features-section { padding: 4rem 0; background: white; }
.members-section  { padding: 4rem 0; }
.cta-section      { padding: 4rem 0; background: linear-gradient(135deg,#1a1a2e,#3d1533); color: white; text-align: center; }
.cta-section h2   { font-family: var(--font-display); font-size: 2rem; color: white; margin-bottom: .75rem; }
.cta-section p    { color: rgba(255,255,255,.72); margin-bottom: 1.5rem; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.section-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.feature-card { background: var(--rose-pale); border-radius: var(--radius); padding: 1.75rem; text-align: center; }
.feature-icon { font-size: 2.5rem; margin-bottom: .875rem; }
.feature-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .5rem; }
.feature-card p { color: var(--text-muted); font-size: .9rem; }

/* ── Member Cards ─────────────────────────────────────────── */
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.member-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  cursor: pointer;
  border: 1px solid var(--border);
}
.member-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(232,93,117,.15); }
.member-photo {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--rose-pale);
}
.member-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.member-card:hover .member-photo img { transform: scale(1.05); }
.member-info { padding: 10px 12px; }
.member-name { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-meta { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.online-dot {
  position: absolute;
  top: 8px; left: 8px;
  width: 10px; height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 2px rgba(34,197,94,.3);
}
.member-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
  display: flex;
  gap: 6px;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
}
.member-card:hover .member-actions { opacity: 1; }
.action-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.9);
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}
.action-btn:hover { background: white; transform: scale(1.15); }
.action-btn.liked { color: var(--brand); }
.vip-badge, .premium-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-size: .65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
}
.vip-badge     { background: #fbbf24; color: #78350f; }
.premium-badge { background: var(--rose); color: white; }

/* ── Dashboard ───────────────────────────────────────────── */
.dashboard-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.widget { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 18px; border: 1px solid var(--border); }
.widget-title { font-weight: 700; font-size: .875rem; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mini-user-list { display: flex; flex-direction: column; gap: 2px; }
.mini-user { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: background .15s; }
.mini-user:hover { background: var(--rose-pale); }
.mini-user img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mini-user-name { font-size: .82rem; font-weight: 600; }
.mini-user-meta { font-size: .72rem; color: var(--text-muted); }
.stat-card { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 16px; text-align: center; text-decoration: none; color: inherit; border: 1px solid var(--border); display: block; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232,93,117,.12); }
.stat-icon { font-size: 1.5rem; }
.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--rose); font-family: var(--font-display); }
.stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── Profile Page ────────────────────────────────────────── */
.profile-page { background: var(--bg); }

/* Cover removed */

/* Inner container */
.profile-page-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px 48px; }

/* Top row: avatar + identity + actions */
.profile-top-row {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  display: block;
  background: var(--rose-pale);
}
.profile-online-badge {
  position: absolute;
  bottom: 8px; left: 50%; transform: translateX(-50%);
  background: #22c55e;
  color: white;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.profile-avatar-edit {
  position: absolute;
  bottom: 6px; right: 0;
  width: 28px; height: 28px;
  background: var(--rose);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .8rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  color: white;
}
.profile-identity { flex: 1; min-width: 0; padding-top: 0; }
.profile-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.profile-plan-badge {
  background: #fbbf24;
  color: #78350f;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--font-body);
}
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-actions {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0;
  flex-shrink: 0;
}
.profile-actions .btn { padding: 9px 18px; font-size: .85rem; }
.btn-liked { background: var(--rose) !important; color: white !important; }
.btn-faved { background: var(--rose-pale) !important; color: var(--rose) !important; }
.btn-danger-soft { color: #ef4444 !important; border-color: #fee2e2 !important; }
.btn-danger-soft:hover { background: #fee2e2 !important; }

/* Body layout */
.profile-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}
.profile-main { display: flex; flex-direction: column; gap: 1rem; }
.profile-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.profile-section {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
}
.section-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .875rem;
  color: var(--text);
}
.profile-bio { line-height: 1.8; color: var(--text-muted); font-size: .9rem; }

/* Interests */
.interests-row { display: flex; flex-wrap: wrap; gap: 8px; }
.interest-tag {
  background: var(--rose-pale);
  color: var(--rose);
  padding: 4px 14px;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 500;
}

/* Profile photos */
.profile-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.profile-photo-item {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--rose-pale);
}
.profile-photo-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.profile-photo-item:hover img { transform: scale(1.06); }

/* Gifts */
.gifts-row { display: flex; flex-wrap: wrap; gap: 10px; }
.gift-item  { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.gift-emoji { font-size: 1.75rem; }
.gift-from  { font-size: .7rem; color: var(--text-muted); }

/* Send gift */
.send-gifts-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.send-gift-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--rose-pale);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  cursor: pointer;
  transition: var(--transition);
  min-width: 72px;
  font-family: var(--font-body);
}
.send-gift-btn:hover { border-color: var(--rose); background: white; }
.gift-name { font-size: .72rem; font-weight: 600; }
.gift-cost { font-size: .68rem; color: var(--rose); }

/* Stats row */
.profile-stats { display: flex; gap: 0; }
.profile-stat {
  flex: 1;
  text-align: center;
  padding: .5rem;
  border-right: 1px solid var(--border);
}
.profile-stat:last-child { border-right: none; }
.pstat-val   { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--rose); }
.pstat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img  { max-width: 90vw; max-height: 90vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 20px; font-size: 2rem; color: white; cursor: pointer; opacity: .7; transition: opacity .2s; }
.lightbox-close:hover { opacity: 1; }

@media (max-width: 860px) {
  .profile-body { grid-template-columns: 1fr; }
  .profile-top-row { flex-direction: column; align-items: flex-start; }
  .profile-identity, .profile-actions { padding-top: 0; } /* already 0 */
  .profile-cover-wrap { height: 180px; }
  .profile-page-inner { padding: 0 16px 32px; }
}
.profile-cover { height: 260px; background: linear-gradient(135deg, var(--rose), var(--rose-dark)); position: relative; overflow: hidden; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-wrap { position: absolute; bottom: -44px; left: 32px; }
.profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid white; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.profile-content { padding-top: 56px; }
.profile-name { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; }
.profile-section { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 20px; border: 1px solid var(--border); }
.section-heading { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-item { background: var(--rose-pale); border-radius: var(--radius-sm); padding: 10px 12px; }
.info-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 2px; }
.info-value { font-size: .875rem; font-weight: 500; }
.info-section-heading { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--rose); margin:1rem 0 .4rem; padding-bottom:.3rem; border-bottom:1px solid var(--rose-pale); grid-column:1/-1; }
.info-section-heading:first-child { margin-top:0; }
.meta-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--rose-pale); color: var(--rose); border-radius: 99px; padding: 4px 12px; font-size: .8rem; font-weight: 500; }
.profile-tagline { color: var(--text-muted); font-size: .95rem; margin-top: 4px; }

/* ── Messages ────────────────────────────────────────────── */
.messages-page { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 426px); min-height: 500px; overflow: hidden; max-width: 1200px; margin: 0 auto; width: 100%; }
.messages-sidebar { border-right: 1px solid var(--border); overflow-y: auto; background: white; display: flex; flex-direction: column; }
.messages-sidebar-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.messages-sidebar-header h2 { font-size: 1.1rem; font-weight: 700; }
.conversations-list { flex: 1; overflow-y: auto; }
.conversation-item { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.25rem; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); transition: background .15s; }
.conversation-item:hover, .conversation-item.active { background: var(--rose-pale); }
.conv-avatar { position: relative; flex-shrink: 0; }
.conv-avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.conv-info { flex: 1; min-width: 0; }
.conv-name { font-size: .875rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.conv-preview { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-time { font-size: .72rem; color: var(--text-muted); }
.unread-badge { background: var(--rose); color: white; font-size: .65rem; font-weight: 700; padding: 1px 5px; border-radius: 99px; }
.no-convs { padding: 2rem; text-align: center; color: var(--text-muted); font-size: .9rem; }
.no-convs a { color: var(--rose); }
.messages-main { display: flex; flex-direction: column; overflow: hidden; background: #f9f5f6; }
.messages-header { background: white; border-bottom: 1px solid var(--border); padding: .875rem 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.messages-person { display: flex; align-items: center; gap: .75rem; }
.messages-person img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.messages-person-name { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--text); display: block; }
.messages-person-status { font-size: .75rem; color: var(--text-muted); }
.messages-person-status.online { color: #22c55e; }
.messages-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.message-bubble { max-width: 65%; }
.message-bubble.sent { align-self: flex-end; }
.message-bubble.received { align-self: flex-start; }
.bubble-content { padding: .7rem 1rem; border-radius: 16px; font-size: .9rem; line-height: 1.5; }
.message-bubble.sent .bubble-content { background: var(--rose); color: white; border-bottom-right-radius: 4px; }
.message-bubble.received .bubble-content { background: white; border-bottom-left-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.bubble-meta { font-size: .7rem; color: var(--text-muted); margin-top: 3px; }
.message-bubble.sent .bubble-meta { text-align: right; }
.messages-footer { background: white; border-top: 1px solid var(--border); padding: .875rem 1.25rem; }
.message-input-wrap { display: flex; gap: .625rem; align-items: flex-end; }
.message-input { flex: 1; padding: .65rem 1rem; border: 1.5px solid var(--border); border-radius: 24px; font-size: .9rem; resize: none; max-height: 120px; overflow-y: auto; }
.message-input:focus { outline: none; border-color: var(--rose); }
.send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--rose); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.send-btn svg { width: 18px; height: 18px; fill: white; }
.send-btn:hover { background: var(--rose-dark); }
.messages-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--text-muted); text-align: center; padding: 2rem; }
.messages-empty .empty-icon { font-size: 3rem; }
.messages-empty h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--text); }

/* ── Search ──────────────────────────────────────────────── */
.search-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; width: 100%; padding: 2rem 28px; }
.search-filters { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.5rem; position: sticky; top: 80px; border: 1px solid var(--border); }
.filters-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.filters-header h3 { font-size: .95rem; font-weight: 700; }
.clear-filters { font-size: .8rem; color: var(--rose); }
.filter-group { margin-bottom: .875rem; }
.filter-group label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: .3rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.filter-group.checkboxes { display: flex; flex-direction: column; gap: .4rem; }
.filter-group.checkboxes label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--text); cursor: pointer; font-weight: 400; text-transform: none; letter-spacing: 0; }
.range-inputs { display: flex; align-items: center; gap: .5rem; }
.range-inputs span { color: var(--text-muted); }
.results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.results-header h2 { font-family: var(--font-display); font-size: 1.4rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 2rem; padding: 1.5rem 0; }
.page-btn { display: inline-block; padding: .4rem 1rem; background: white; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); font-size: .875rem; transition: var(--transition); }
.page-btn:hover { background: var(--rose-pale); border-color: var(--rose); color: var(--rose); }
.page-info { font-size: .875rem; color: var(--text-muted); padding: 0 .5rem; }

/* ── Settings ────────────────────────────────────────────── */
.settings-layout { display: grid; grid-template-columns: 210px 1fr; gap: 2rem; align-items: start; }
.settings-nav { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; position: sticky; top: 80px; border: 1px solid var(--border); }
.settings-nav-item { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.1rem; color: var(--text); font-size: .875rem; border-left: 3px solid transparent; transition: var(--transition); }
.settings-nav-item:hover { background: var(--rose-pale); color: var(--rose); }
.settings-nav-item.active { background: var(--rose-pale); color: var(--rose); border-left-color: var(--rose); font-weight: 600; }
.settings-content { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2rem; border: 1px solid var(--border); max-width: 1200px; }
.settings-content h2 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 1.5rem; }
.settings-section { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.settings-section:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.settings-section h3 { font-size:.95rem; font-weight:700; color:var(--rose); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1.1rem; padding-bottom:.5rem; border-bottom:2px solid var(--rose-pale); }
.toggle-list { display: flex; flex-direction: column; }
.toggle-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.toggle-item:last-child { border-bottom: none; }
.toggle-item div p { font-size: .85rem; color: var(--text-muted); margin-top: .15rem; }
.toggle-checkbox { appearance: none; width: 44px; height: 24px; background: #e5e7eb; border-radius: 999px; cursor: pointer; position: relative; transition: background .2s; flex-shrink: 0; }
.toggle-checkbox::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.toggle-checkbox:checked { background: var(--rose); }
.toggle-checkbox:checked::after { transform: translateX(20px); }
.danger-zone { border: 1px solid #fee2e2; border-radius: var(--radius-sm); padding: 1.25rem; background: #fff5f5; }
.btn-danger { background: #ef4444; color: white; border: none; }
.btn-danger:hover { background: #dc2626; color: white; }

/* ── Notifications ───────────────────────────────────────── */
.notifications-list { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: hidden; border: 1px solid var(--border); }
.notification-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); transition: background .15s; }
.notification-item:last-child { border-bottom: none; }
.notification-item.unread { background: #fff8fa; }
.notification-item:hover { background: var(--rose-pale); }
.notif-icon { font-size: 1.3rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--rose-pale); border-radius: 50%; flex-shrink: 0; }
.notif-body { flex: 1; }
.notif-text { font-size: .875rem; font-weight: 500; }
.notification-item.unread .notif-text { font-weight: 600; }
.notif-time { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }
.notif-link { font-size: .82rem; color: var(--rose); font-weight: 500; white-space: nowrap; }

/* ── Pricing ─────────────────────────────────────────────── */
.premium-hero { text-align: center; padding: 3rem 0 2rem; }
.premium-hero h1 { font-family: var(--font-display); font-size: 2.2rem; margin-bottom: .5rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.pricing-card { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 2rem 1.5rem; text-align: center; position: relative; border: 2px solid transparent; transition: var(--transition); }
.pricing-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(232,93,117,.15); }
.pricing-card.featured { border-color: var(--rose); }
.popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--rose); color: white; font-size: .72rem; font-weight: 700; padding: .2rem .875rem; border-radius: 99px; white-space: nowrap; }
.plan-name { font-size: 1rem; font-weight: 700; margin-bottom: .875rem; }
.price-amount { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--rose); }
.price-per { font-size: .8rem; color: var(--text-muted); }
.plan-features { list-style: none; margin: 1.25rem 0; text-align: left; }
.plan-features li { padding: .35rem 0; font-size: .85rem; border-bottom: 1px solid var(--border); }
.plan-features li:last-child { border-bottom: none; }
.modal { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
.modal-content { position: relative; background: white; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.2); max-width: 440px; width: 90%; z-index: 1; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-size: 1.1rem; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal-body { padding: 1.5rem; }
.payment-note { font-size: .8rem; color: var(--text-muted); text-align: center; margin-top: .75rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Discover / Swipe ────────────────────────────────────── */
.page-discover {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf5f0 0%, #f5e0d0 100%);
  padding: 2rem 1rem;
}
.discover-container { text-align: center; width: 100%; max-width: 400px; }
.discover-header { margin-bottom: 1.5rem; }
.discover-header h1 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin-bottom: .25rem; }
.discover-header p { color: var(--text-muted); font-size: .9rem; }

/* Deck wrapper */
.swipe-deck {
  position: relative;
  width: 320px;
  height: 480px;
  margin: 0 auto 1.75rem;
}

/* Each card */
.swipe-card {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  overflow: hidden;
  cursor: grab;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  user-select: none;
  touch-action: none;
  background: #f0e0e5;
}
.swipe-card:active { cursor: grabbing; }

/* The photo — full cover, single img tag */
.swipe-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}

/* Dark gradient over bottom of card */
.swipe-card-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(10,0,5,.88) 0%, rgba(10,0,5,.3) 60%, transparent 100%);
  pointer-events: none;
}

/* Info text at bottom */
.swipe-card-info {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.25rem 1.25rem 1.4rem;
  pointer-events: none;
}
.swipe-card-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin-bottom: .25rem;
}
.swipe-card-meta { color: rgba(255,255,255,.78); font-size: .82rem; margin-bottom: .3rem; }
.swipe-card-bio  { color: rgba(255,255,255,.65); font-size: .78rem; line-height: 1.4; }
.swipe-online    { font-size: .72rem; color: #4ade80; margin-left: .4rem; font-weight: 600; font-family: var(--font-body); }

/* Like / pass labels */
.swipe-label {
  position: absolute;
  top: 22px;
  padding: 5px 14px;
  border-radius: 8px;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s;
  transform: rotate(-8deg);
}
.like-label { left: 18px;  background: rgba(34,197,94,.92);  color: white; border: 2.5px solid #22c55e; transform: rotate(-8deg); }
.pass-label { right: 18px; background: rgba(239,68,68,.92);   color: white; border: 2.5px solid #ef4444; transform: rotate(8deg); }

/* Swipe action buttons */
.swipe-buttons { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; }
.swipe-btn {
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
}
.swipe-btn:hover { transform: scale(1.12); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.pass-btn { width: 56px; height: 56px; background: white; color: #ef4444; font-size: 1.2rem; }
.like-btn { width: 70px; height: 70px; background: var(--rose); color: white;  font-size: 1.5rem; box-shadow: 0 4px 20px rgba(232,93,117,.4); }
.info-btn { width: 48px; height: 48px; background: white; color: var(--rose); font-size: 1rem; }
.swipe-counter { font-size: .82rem; color: var(--text-muted); }

/* Match overlay */
.match-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.match-content {
  background: white;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.match-avatars { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 1.25rem 0; }
.match-avatars img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.match-spark  { font-size: 2rem; }
.match-actions { display: flex; gap: .75rem; justify-content: center; margin-top: 1.5rem; }

/* ── Photos ──────────────────────────────────────────────── */
.photos-section { margin-bottom: 2rem; }
.photos-section h3 { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }
.avatar-upload-area { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; }
.current-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 3px solid var(--rose-light); }
.upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: var(--transition); margin-bottom: 1.5rem; }
.upload-area:hover { border-color: var(--rose); background: var(--rose-pale); }
.upload-icon { font-size: 2.5rem; margin-bottom: .75rem; }
.upload-link { color: var(--rose); cursor: pointer; text-decoration: underline; }
.upload-hint { font-size: .8rem; color: var(--text-muted); margin-top: .5rem; }
.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
.photo-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; gap: .5rem; opacity: 0; transition: var(--transition); }
.photo-item:hover .photo-overlay { opacity: 1; }
.photo-action { background: rgba(255,255,255,.9); border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.photo-status { position: absolute; bottom: 0; left: 0; right: 0; padding: .3rem; text-align: center; font-size: .7rem; font-weight: 600; }
.photo-status.pending { background: rgba(251,191,36,.9); color: #78350f; }
.photo-status.rejected { background: rgba(239,68,68,.9); color: white; }

/* ── Coins ───────────────────────────────────────────────── */
.coins-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.coin-card { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.75rem 1.25rem; text-align: center; position: relative; border: 2px solid transparent; transition: var(--transition); }
.coin-card.featured { border-color: var(--rose); }
.coin-card:hover { transform: translateY(-3px); }
.coin-amount { font-size: 1.2rem; font-weight: 700; margin-bottom: .4rem; }
.coin-price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--rose); margin-bottom: .4rem; }
.coin-bonus { background: #fef3c7; color: #92400e; font-size: .78rem; font-weight: 700; padding: .2rem .7rem; border-radius: 99px; display: inline-block; margin-bottom: .875rem; }
.coins-info { background: white; border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.5rem; border: 1px solid var(--border); }
.coins-info h3 { font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }
.coins-info ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.coins-info li { font-size: .9rem; }

/* ── Admin Panel ─────────────────────────────────────────── */
.stat-cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card .stat-label { font-size:.8rem; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; }
.stat-card .stat-value { font-size:2rem; font-weight:700; margin:.25rem 0; }
.stat-card .stat-change { font-size:.8rem; color:#10b981; }
.data-table { width:100%; background:white; border-radius:var(--radius); overflow:hidden; box-shadow:var(--card-shadow); }
.data-table table { width:100%; border-collapse:collapse; }
.data-table th { background:var(--rose-pale); padding:12px 16px; text-align:left; font-size:13px; font-weight:600; color:var(--rose); white-space:nowrap; }
.data-table td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; }
.data-table tr:last-child td { border:none; }
.data-table tr:hover td { background:#fafafa; }

/* ── Misc Utils ──────────────────────────────────────────── */
.container-narrow { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.page-inner { max-width: 1200px; margin: 0 auto; padding: 2rem 28px; }
.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: .25rem; }
.page-header p { color: var(--text-muted); }
.badge { display: inline-block; background: var(--rose); color: white; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 99px; margin-left: .4rem; }
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.empty-state h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .5rem; color: var(--text); }
.visit-time, .match-date { font-size: .75rem; color: var(--text-muted); display: block; margin-top: .2rem; }
.flash { padding: .875rem 1.25rem; border-radius: var(--radius-sm); margin: 1rem 28px; display: flex; align-items: center; justify-content: space-between; font-size: .9rem; }
.flash button { background: none; border: none; cursor: pointer; opacity: .6; font-size: 1.2rem; }
.flash button:hover { opacity: 1; }
.flash-success { background: #d1fae5; color: #065f46; }
.flash-error   { background: #fee2e2; color: #991b1b; }
.text-muted { color: var(--text-muted); }
.text-rose  { color: var(--rose); }
.site-footer { background: #2e160a; border-top: none; padding: 2rem 0 3rem; margin-top: auto; }
.footer-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .875rem; text-align: center; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.1rem; }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: .875rem; color: #ffffff; transition: color .2s; }
.footer-links a:hover { color: #e3e1e1; }
.footer-copy { font-size: .8rem; color: rgba(255,255,255,.55); text-align: center; }
.main-content { min-height: calc(100vh - 64px); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; padding: .75rem; }
  .settings-nav-item { border-left: none; border-bottom: 2px solid transparent; border-radius: var(--radius-sm); padding: .5rem .875rem; }
  .settings-nav-item.active { border-bottom-color: var(--rose); }
  .search-layout { grid-template-columns: 1fr; }
  .search-filters { position: static; }
  .messages-page { grid-template-columns: 1fr; }
  .messages-sidebar { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .members-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links .nav-link:nth-child(n+5) { display: none; }
  .dashboard-layout { padding: 16px; }
  .page-inner { padding: 1rem; }
  .auth-card { padding: 1.75rem 1.25rem; }
  .sidebar { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
}

/* ── Dashboard Search Bar ───────────────────────────────── */
.dashboard-search {
  display: flex;
  gap: 0;
  margin-bottom: 24px;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1.5px solid var(--border);
  background: white;
  transition: var(--transition);
}
.dashboard-search:focus-within {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(232,93,117,.12);
}
.dashboard-search-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 13px 20px;
  font-size: .95rem;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.dashboard-search-input::placeholder { color: var(--text-muted); }
.dashboard-search-btn {
  background: var(--brand);
  color: white;
  border: none;
  padding: 13px 24px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background .2s;
  font-family: var(--font-body);
}
.dashboard-search-btn:hover { background: var(--brand-mid); }

/* Navbar height adjustment for labeled links */

.nav-container { padding: 10px 24px; }
.nav-links { gap: 2px; }

/* ── Language Switcher ──────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 2px 4px;
  flex-shrink: 0;
  align-self: center;
  height: 32px;
}
.lang-btn {
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 99px;
  color: var(--text-muted);
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}
.lang-btn:hover  { color: var(--rose); background: var(--rose-pale); }
.lang-btn.active { background: var(--rose); color: white !important; }




/* Background image layer */
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.02); /* slight zoom so edges don't show on resize */
}

/* Dark overlay for text contrast */
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26,10,18,.45) 0%,
    rgba(26,10,18,.35) 50%,
    rgba(26,10,18,.65) 100%
  );
}

/* ── Three-column inner ──────────────────────────────────── */
.page-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  align-items: center;
  gap: 1.5rem;
}

/* ── Logo (left column) ──────────────────────────────────── */
.page-hero-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
.page-hero-logo:hover .page-hero-icon { transform: scale(1.08); }

/* Icon circle */
.page-hero-icon {
  width: 58px;
  height: 58px;
  background: var(--rose);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(232,93,117,.25), 0 4px 20px rgba(232,93,117,.4);
  transition: transform .25s ease;
}
.page-hero-heart-icon {
  font-size: 1.6rem;
  color: white;
  line-height: 1;
  display: block;
  animation: heroHeartbeat 3s ease-in-out infinite;
}
@keyframes heroHeartbeat {
  0%,100% { transform: scale(1);    }
  15%      { transform: scale(1.22); }
  30%      { transform: scale(1);    }
  45%      { transform: scale(1.12); }
  60%      { transform: scale(1);    }
}

/* Wordmark */
.page-hero-wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.page-hero-brand-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: white;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.page-hero-tagline {
  font-size: .72rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Centre title ────────────────────────────────────────── */
.page-hero-center {
  text-align: center;
}
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.page-hero-meta {
  margin-top: .5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .02em;
}

/* ── Right: user pill / guest buttons ────────────────────── */
.page-hero-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Logged-in user pill */
.page-hero-user-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  padding: 7px 16px 7px 7px;
  text-decoration: none;
  transition: background .2s;
}
.page-hero-user-pill:hover { background: rgba(255,255,255,.18); }
.page-hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(232,93,117,.6);
  flex-shrink: 0;
}
.page-hero-user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-hero-username {
  font-size: .875rem;
  font-weight: 600;
  color: white;
  line-height: 1;
}
.page-hero-plan {
  font-size: .68rem;
  color: rgba(255,255,255,.5);
  text-transform: capitalize;
  line-height: 1;
}

/* Guest buttons */
.page-hero-guest-btns {
  display: flex;
  gap: 10px;
}
.page-hero-btn-join {
  background: var(--rose);
  color: white;
  border-radius: 99px;
  padding: 9px 22px;
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(232,93,117,.4);
}
.page-hero-btn-join:hover {
  background: var(--rose-dark);
  transform: translateY(-2px);
  color: white;
}
.page-hero-btn-sign {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 99px;
  padding: 9px 20px;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.page-hero-btn-sign:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color: white;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-hero { height: 360px; }
  .page-hero-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .page-hero-center {
    grid-column: 1 / -1;
    order: -1;
    text-align: center;
  }
  .page-hero-right { justify-content: flex-end; }
}
@media (max-width: 600px) {
  .page-hero { height: auto; min-height: 300px; padding: 2.5rem 0; }
  .page-hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0 20px;
    gap: 1.25rem;
  }
  .page-hero-logo { justify-content: center; }
  .page-hero-center { order: -1; }
  .page-hero-right { justify-content: center; }
  .page-hero-title { font-size: 1.5rem; }
  .page-hero-brand-name { font-size: 1.4rem; }
  .page-hero-icon { width: 48px; height: 48px; }
  .page-hero-heart-icon { font-size: 1.3rem; }
}


/* BG image — <img> tag fills the hero like a background */
.site-hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.02);
  z-index: 0;
  display: block;
}

/* Overlay */
.site-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(26,10,18,.55) 0%,
    rgba(26,10,18,.3)  45%,
    rgba(26,10,18,.7)  100%
  );
  z-index: 1;
}

/* Navbar inside hero — transparent, white text */

.nav-brand-hero { color: white !important; }
.nav-brand-hero .brand-heart { color: var(--rose); }
.nav-link-hero {
  color: rgba(255,255,255,.75) !important;
}
.nav-link-hero:hover, .nav-link-hero.active {
  color: white !important;
  background: rgba(255,255,255,.12) !important;
}
.nav-search-hero {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.2) !important;
  color: white !important;
}
.nav-search-hero::placeholder { color: rgba(255,255,255,.5) !important; }
.nav-search-hero:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: var(--rose) !important;
}
.nav-search-btn-hero { color: rgba(255,255,255,.7) !important; }
.nav-search-btn-hero:hover { color: white !important; }
.btn-ghost-hero {
  color: white !important;
  border-color: rgba(255,255,255,.35) !important;
}
.btn-ghost-hero:hover {
  background: rgba(255,255,255,.12) !important;
  color: white !important;
}
.lang-switcher-hero { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.15) !important; }
.lang-switcher-hero .lang-btn { color: rgba(255,255,255,.65) !important; }
.lang-switcher-hero .lang-btn.active { background: none !important; color: white !important; font-weight: 800 !important; text-decoration: underline !important; text-underline-offset: 3px !important; }
.lang-switcher-hero .lang-btn:hover { color: white !important; background: rgba(255,255,255,.15) !important; }

/* nav-right-group: lang + avatar together */
.nav-right-group {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-shrink: 0;
}

/* Hero content row */
.site-hero-content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px;
  gap: 1.5rem;
}

/* Logo */
.site-hero-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.site-hero-logo:hover .site-hero-icon { transform: scale(1.08); }
.site-hero-icon {
  width: 60px; height: 60px;
  background: var(--rose);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 5px rgba(232,93,117,.22), 0 6px 24px rgba(232,93,117,.4);
  transition: transform .25s;
}
.site-hero-heart {
  font-size: 1.7rem; color: white; line-height: 1; display: block;
  animation: heroHeartbeat 3s ease-in-out infinite;
}
@keyframes heroHeartbeat {
  0%,100% { transform: scale(1);    }
  15%      { transform: scale(1.22); }
  30%      { transform: scale(1);    }
  45%      { transform: scale(1.12); }
  60%      { transform: scale(1);    }
}
.site-hero-wordmark { display: flex; flex-direction: column; gap: 4px; }
.site-hero-brand {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.site-hero-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}

/* Centre title */
.site-hero-title-wrap { text-align: center; }
.site-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  color: white;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.site-hero-meta {
  margin-top: .5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
}

/* Right: user pill */
.site-hero-user-wrap { display: flex; justify-content: flex-end; }
.site-hero-user-pill {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  padding: 7px 16px 7px 7px;
  text-decoration: none;
  transition: background .2s;
}
.site-hero-user-pill:hover { background: rgba(255,255,255,.18); }
.site-hero-avatar {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(232,93,117,.6);
}
.site-hero-uname { font-size: .875rem; font-weight: 600; color: white; line-height: 1; }
.site-hero-uplan { font-size: .68rem; color: rgba(255,255,255,.5); line-height: 1; }
.site-hero-guest { display: flex; gap: 10px; }

/* Responsive */
@media (max-width: 900px) {
  .site-hero { height: 380px; }
  .site-hero-content {
    grid-template-columns: 1fr 1fr;
  }
  .site-hero-title-wrap {
    grid-column: 1 / -1;
    order: -1;
  }
}
@media (max-width: 600px) {
  .site-hero { height: auto; min-height: 180px; max-height: 426px; }
  .site-hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0 20px;
    gap: 1rem;
  }
  .site-hero-logo { justify-content: center; }
  .site-hero-title-wrap { order: -1; }
  .site-hero-user-wrap { justify-content: center; }
  .site-hero-title { font-size: 1.5rem; }
  .site-hero-brand { font-size: 1.4rem; }
}

/* main-content no longer needs top padding for sticky navbar */
.main-content { min-height: 50vh; }

/* ═══════════════════════════════════════════════════════════
   SITE HERO  —  full-width 450px background-image header
   ═══════════════════════════════════════════════════════════ */

/* ── Hero wrapper ─────────────────────────────────────────── */
.site-hero {
  position: relative;
  width: 100%;
  height: 426px;
  max-height: 426px;
  overflow: visible; /* allow dropdown to escape */
  display: flex;
  flex-direction: column;
  background-color: #2e160a;
}
/* Clip bg image but not the nav dropdown */
.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* ── Background image ─────────────────────────────────────── */
.site-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  z-index: 0;
}

/* ── Dark overlay ─────────────────────────────────────────── */
/* removed */

/* ── Navbar — sits on top of image ───────────────────────── */
.site-nav {
  position: relative;
  z-index: 1000;
  flex-shrink: 0;
  height: 60px;
}
.site-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Nav icon links */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: flex-start;
}
.site-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: white;
  text-decoration: none;
  transition: all .18s;
  position: relative;
  min-width: 52px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.site-nav-link svg  { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.site-nav-link span { font-size: .62rem; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.site-nav-link:hover { color: white; background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.28); }
.site-nav-link.active { color: white; background: rgba(46,22,10,.75); border-color: rgba(255,255,255,.25); }
.site-nav-link.active svg { stroke: #e8c5b0; filter: drop-shadow(0 1px 3px rgba(232,93,117,.6)); }

/* Nav right group */
.site-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Avatar in navbar */
.nav-avatar-hero {
  border: 2px solid rgba(255,255,255,.4) !important;
}

/* Guest nav buttons */
.site-nav-ghost {
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 99px;
  padding: 7px 18px;
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .18s;
}
.site-nav-ghost:hover { background: rgba(255,255,255,.12); color: white; border-color: rgba(255,255,255,.6); }
.site-nav-join {
  background: var(--rose);
  color: white;
  border-radius: 99px;
  padding: 7px 20px;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .18s;
  box-shadow: 0 3px 12px rgba(232,93,117,.4);
}
.site-nav-join:hover { background: var(--brand-mid); transform: translateY(-1px); color: white; }

/* Lang switcher over hero */

/* ── Hero body — page title + user pill ───────────────────── */
.site-hero-body {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px 20px;
}

/* Page title (centred) */
/* removed */

/* User pill (right) */
.site-hero-userpill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 99px;
  padding: 8px 18px 8px 8px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .2s;
}
.site-hero-userpill:hover { background: rgba(255,255,255,.2); }
.site-hero-userpill img {
  width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--rose-light);
}
.site-hero-uname { font-size: .875rem; font-weight: 600; color: white; line-height: 1.2; }
.site-hero-uplan { font-size: .70rem; color: rgba(255,255,255,.5); text-transform: capitalize; }

/* Heartbeat animation on hero icon if used */
@keyframes heroHeartbeat {
  0%,100% { transform: scale(1);    }
  15%      { transform: scale(1.22); }
  30%      { transform: scale(1);    }
  45%      { transform: scale(1.10); }
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 860px) {
  .site-hero { height: auto; min-height: 180px; max-height: 426px; }
  .site-nav-link span { display: none; }
  .site-nav-link { min-width: 40px; padding: 8px; }
}
@media (max-width: 600px) {
  .site-hero { height: auto; min-height: 180px; max-height: 426px; }
  .site-hero-body { padding: 0 20px; flex-direction: column; text-align: center; }
  .site-hero-title { font-size: 1.6rem; }
  .site-nav-inner { padding: 0 16px; }
  .site-hero-userpill { align-self: center; }
}

/* ── Keep old navbar styles for any pages that may still reference .navbar ── */
.navbar, .navbar-guest {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive fixes
   ═══════════════════════════════════════════════════════════ */

/* ── Touch targets ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Ensure all tap targets are at least 44px */
  .btn, .nav-link, .site-nav-link, .lang-btn,
  .action-btn, .send-btn, .page-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .btn { padding: 10px 18px; }
}

/* ── Hero / Navbar ──────────────────────────────────────── */
@media (max-width: 768px) {
  .site-hero { height: auto; min-height: 200px; max-height: 426px; }

  .site-nav-inner {
    padding: 0 12px;
    gap: .5rem;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .site-nav-links {
    display: none !important;
  }
  #nav-hamburger {
    display: flex !important;
  }
  .site-nav-link {
    padding: 8px 8px;
    min-width: 40px;
  }
  .site-nav-link span { display: none; }

  /* Hide search bar in navbar on mobile */
  .nav-search { display: none; }

  .site-hero-body {
    padding: 0 16px 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
  }
  .site-hero-userpill { padding: 6px 12px 6px 6px; }
  .site-hero-avatar   { width: 36px; height: 36px; }
}

/* ── Dashboard ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 16px;
  }
  .sidebar {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 12px;
  }
  /* Stats row — 2×2 on mobile */
  .dashboard-layout > div > div[style*="grid-template-columns:repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 400px) {
  .sidebar { grid-template-columns: 1fr; }
}

/* ── Search page ────────────────────────────────────────── */
@media (max-width: 768px) {
  .search-layout {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 12px;
  }
  .search-filters { position: static; }

  /* Collapsible filter on mobile */
  .search-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    background: var(--rose-pale);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    color: var(--rose);
    margin-bottom: .75rem;
  }
  .search-filters-body { display: none; }
  .search-filters-body.open { display: block; }
}

/* ── Messages ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .messages-page {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 200px);
  }
  /* Show sidebar if no conversation selected, show chat if selected */
  .messages-page.has-conversation .messages-sidebar { display: none; }
  .messages-page:not(.has-conversation) .messages-main { display: none; }

  /* Back button for mobile chat */
  .messages-back-btn {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    color: var(--rose);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
  }
  .messages-body { max-height: 60vh; }
}
.messages-back-btn { display: none; }

/* ── Profile page ───────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-page-inner { padding: 0 12px 24px; }

  .profile-top-row {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
  }
  .profile-identity { text-align: center; }
  .profile-chips    { justify-content: center; }
  .profile-actions  { justify-content: center; flex-wrap: wrap; }
  .profile-actions .btn { font-size: .8rem; padding: 8px 14px; }

  .profile-body {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .profile-sidebar { order: -1; } /* Show stats above bio on mobile */
  .profile-stats   { gap: 0; }

  .info-grid { grid-template-columns: 1fr; }
  .profile-photos-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Settings ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .settings-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .settings-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: .625rem;
  }
  .settings-nav-item {
    border-left: none;
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: .8rem;
    border-bottom: 2px solid transparent;
  }
  .settings-nav-item.active {
    border-bottom-color: var(--rose);
    border-left-color: transparent;
  }
  .settings-content { padding: 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Auth pages ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .auth-card  { padding: 1.5rem 1rem; margin: 0 8px; }
  .form-row   { grid-template-columns: 1fr; }
}

/* ── Discover / Swipe ───────────────────────────────────── */
@media (max-width: 480px) {
  .swipe-deck { width: 290px; height: 420px; }
  .swipe-buttons { gap: 1rem; }
  .like-btn  { width: 58px; height: 58px; font-size: 1.3rem; }
  .pass-btn  { width: 48px; height: 48px; }
  .info-btn  { width: 40px; height: 40px; }
}

/* ── Members grid ───────────────────────────────────────── */
@media (max-width: 480px) {
  .members-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .member-card  { font-size: .8rem; }
}

/* ── Footer ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
  }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }
}

/* ── Premium / Coins ────────────────────────────────────── */
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .coins-grid   { grid-template-columns: repeat(2, 1fr); }
  .page-inner   { padding: 1rem .75rem; }
}

/* ── Dashboard search bar ───────────────────────────────── */
@media (max-width: 600px) {
  .dashboard-search { border-radius: var(--radius-sm); }
  .dashboard-search-input { font-size: .85rem; padding: 11px 14px; }
  .dashboard-search-btn   { padding: 11px 16px; font-size: .8rem; }
  .dashboard-search-btn span { display: none; }
}

/* ── Modals ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-content { border-radius: var(--radius) var(--radius) 0 0; margin-top: auto; width: 100%; max-width: 100%; }
  .modal { align-items: flex-end; }
}

/* ── Prevent horizontal scroll ──────────────────────────── */
html { overflow-x: hidden; }
body { overflow-x: hidden; position: relative; }
.site-footer { overflow-x: hidden; }

/* ── Typography scaling ─────────────────────────────────── */
@media (max-width: 480px) {
  .section-title  { font-size: 1.2rem; }
  .profile-name   { font-size: 1.4rem; }
  .page-header h1 { font-size: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   MESSAGING UPGRADE — typing, reactions, images, emoji
   ═══════════════════════════════════════════════════════════ */

/* Sidebar header */
.messages-sidebar-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.messages-sidebar-header h2 { font-size: 1.1rem; font-weight: 700; }
.msg-new-btn {
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.msg-new-btn:hover { background: var(--rose-pale); }

/* Conversation search */
.conv-search-wrap {
  padding: .625rem 1rem;
  border-bottom: 1px solid var(--border);
}
.conv-search-input {
  width: 100%;
  padding: 7px 12px;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  font-size: .82rem;
  background: var(--bg);
  outline: none;
}
.conv-search-input:focus { border-color: var(--rose); }

/* Chat header actions */
.chat-header-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}

/* Avatar beside bubble */
.bubble-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  align-self: flex-end;
  margin-right: .4rem;
}
.message-bubble.sent .bubble-avatar { display: none; }

/* Bubble improvements */
.message-bubble {
  display: flex;
  align-items: flex-end;
  gap: 0;
  max-width: 72%;
  position: relative;
}
.message-bubble.sent  { flex-direction: row-reverse; align-self: flex-end; }
.message-bubble.received { align-self: flex-start; }

.bubble-wrap { display: flex; flex-direction: column; gap: 3px; }

.bubble-footer {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: 0 4px;
}
.message-bubble.sent  .bubble-footer { justify-content: flex-end; }
.message-bubble.received .bubble-footer { justify-content: flex-start; }

/* Read receipts */
.read-receipt {
  font-size: .68rem;
  color: var(--text-muted);
  line-height: 1;
}
.read-receipt[style*="color: var(--rose)"],
.read-receipt.read { color: var(--rose) !important; }

/* Image bubbles */
.bubble-image {
  padding: 3px !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  cursor: pointer;
}
.bubble-image img {
  max-width: 220px;
  max-height: 280px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
}

/* Date separator */
.msg-date-sep {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 1rem 0;
  color: var(--text-muted);
  font-size: .75rem;
}
.msg-date-sep::before,
.msg-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Typing indicator */
.typing-indicator {
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  align-self: flex-start;
}
.typing-dots {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 12px 16px !important;
}
.typing-dots span {
  width: 7px; height: 7px;
  background: var(--text-muted);
  border-radius: 50%;
  display: block;
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); opacity: .4; }
  30%          { transform: translateY(-6px); opacity: 1; }
}

/* Reaction on bubble */
.bubble-reaction {
  font-size: 1rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 1px 6px;
  position: absolute;
  bottom: -10px;
  right: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
  cursor: pointer;
  z-index: 1;
}
.message-bubble.received .bubble-reaction { right: auto; left: 0; }

/* Reaction picker */
.reaction-picker {
  position: fixed;
  background: white;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 1000;
  gap: 4px;
}
.reaction-picker button {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 50%;
  transition: transform .15s, background .15s;
}
.reaction-picker button:hover { transform: scale(1.3); background: var(--rose-pale); }

/* React button on hover */
.react-btn {
  background: none;
  border: none;
  font-size: .85rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
  padding: 4px;
  align-self: center;
}
.message-bubble:hover .react-btn { opacity: .6; }
.react-btn:hover { opacity: 1 !important; }

/* Input area upgrades */
.attach-btn {
  cursor: pointer;
  font-size: 1.1rem;
  padding: 6px 8px;
  border-radius: 50%;
  transition: background .15s;
  flex-shrink: 0;
  line-height: 1;
}
.attach-btn:hover { background: var(--rose-pale); }

/* Emoji picker */
.emoji-picker-wrap { position: relative; flex-shrink: 0; }
.emoji-trigger-btn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 50%;
  transition: background .15s;
}
.emoji-trigger-btn:hover { background: var(--rose-pale); }
.emoji-quick-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: -10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  z-index: 100;
  flex-wrap: wrap;
  width: 220px;
  gap: 2px;
}
.emoji-quick-picker button {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.emoji-quick-picker button:hover { background: var(--rose-pale); }

/* Image preview before send */
.img-preview-wrap {
  padding: .625rem 1.25rem .25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-top: 1px solid var(--border);
}
.img-preview-wrap img {
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.img-preview-remove {
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: .75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 1.75rem; cursor: pointer; opacity: .7; }
.lightbox-close:hover { opacity: 1; }

/* Mobile adjustments */
@media (max-width: 600px) {
  .message-bubble { max-width: 85%; }
  .bubble-image img { max-width: 180px; }
  .reaction-picker { left: 50% !important; transform: translateX(-50%); }
  .chat-header-actions .btn { display: none; }
  .chat-header-actions button { font-size: 1rem; }
}

/* ── Conversation search improvements ───────────────────── */
.conv-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.conv-search-icon {
  position: absolute;
  left: 10px;
  font-size: .85rem;
  pointer-events: none;
  opacity: .5;
}
.conv-search-input {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.conv-search-clear {
  position: absolute;
  right: 8px;
  background: var(--text-muted);
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: .65rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.conv-search-clear:hover { background: var(--rose); }

/* ── Hero logo ───────────────────────────────────────────── */
.site-hero-logo-wrap {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 1200px;
  width: 100%;
  padding: 0 28px;
  z-index: 6;
  pointer-events: none;
}
.site-hero-logo-wrap a {
  pointer-events: all;
  display: inline-block;
}
.site-hero-logo-img {
  max-height: 80px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
@media (max-width: 768px) {
  .site-hero-logo-wrap {
    top: 70px;
    padding: 0 16px;
  }
  .site-hero-logo-img { max-height: 55px; }
}

/* ═══════════════════════════════════════════════════════════
   MONETISATION
   ═══════════════════════════════════════════════════════════ */

/* Coin balance bar */
.coin-balance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--card-shadow);
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.coin-balance-inner {
  display: flex;
  align-items: center;
  gap: .875rem;
}
.coin-balance-icon { font-size: 2rem; }
.coin-balance-num  { font-size: 1.75rem; font-weight: 800; font-family: var(--font-display); color: var(--rose); line-height: 1; }
.coin-balance-lbl  { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* Feature spend grid */
.features-spend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.feature-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  position: relative;
}
.feature-card.feature-active {
  border-color: var(--rose);
  background: linear-gradient(135deg, #fff 0%, #fff8f9 100%);
}
.feature-card.feature-locked {
  opacity: .85;
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.feature-icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.feature-info { flex: 1; min-width: 0; }
.feature-name { font-weight: 700; font-size: .975rem; margin-bottom: 3px; }
.feature-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.feature-status { font-size: .75rem; font-weight: 600; margin-top: .375rem; color: var(--text-muted); }
.feature-status.active { color: #16a34a; }
.feature-action { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; }

/* Coins grid extra */
.coin-per { font-size: .72rem; color: var(--text-muted); margin-bottom: .75rem; }

/* Coins use grid */
.coins-use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem;
  margin-top: .875rem;
  font-size: .875rem;
  color: var(--text-body);
}
.coins-use-grid div {
  background: var(--rose-pale);
  border-radius: var(--radius-sm);
  padding: .5rem .875rem;
}

/* Likes page — blurred cards */
.member-card-blur-wrap { position: relative; }
.blurred-img { filter: blur(14px); transform: scale(1.05); }
.blur-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.15);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Premium gate banner */
.premium-gate-banner {
  background: linear-gradient(135deg, var(--rose), #c94060);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
  color: white;
}
.premium-gate-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 0 auto;
}
.premium-gate-inner h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; }
.premium-gate-inner p  { font-size: .875rem; opacity: .9; }
.premium-gate-inner .btn { background: white; color: var(--brand); border-color: white; }
.premium-gate-inner .btn:hover { background: var(--rose-pale); }

/* Member card actions */
.member-card-actions {
  display: flex;
  gap: .375rem;
  padding: .625rem;
  border-top: 1px solid var(--border);
}
.member-card-actions .btn { flex: 1; font-size: .78rem; padding: 7px 10px; }

/* Responsive */
@media (max-width: 600px) {
  .features-spend-grid { grid-template-columns: 1fr; }
  .feature-card { flex-wrap: wrap; }
  .feature-action { width: 100%; flex-direction: row; justify-content: flex-start; }
  .coin-balance-bar { padding: 1rem; }
}

/* ── Dashboard feature buttons ───────────────────────────── */
.dash-feature-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 8px 16px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: var(--transition);
  white-space: nowrap;
}
.dash-feature-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-1px);
}
.dash-feature-btn.featured {
  background: var(--brand);
  color: white;
  border-color: transparent;
}
.dash-feature-btn.featured:hover {
  background: var(--brand-mid);
  color: white;
  transform: translateY(-1px);
}

/* Coin nav link */
.site-nav-link span { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   ENGAGEMENT — Streak & Notifications
   ═══════════════════════════════════════════════════════════ */

/* ── Streak popup overlay ────────────────────────────────── */
.streak-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn .3s ease;
}
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }

.streak-popup {
  background: white;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: slideUp .35s ease;
}
@keyframes slideUp { from { transform:translateY(40px);opacity:0 } to { transform:translateY(0);opacity:1 } }

.streak-fire {
  font-size: 4rem;
  margin-bottom: .5rem;
  display: block;
  animation: bounce 1s infinite alternate;
}
@keyframes bounce { from { transform:scale(1) } to { transform:scale(1.15) } }

.streak-day {
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--rose);
  margin: 0;
}
.streak-sub {
  color: var(--text-muted);
  margin: .25rem 0 1.5rem;
  font-size: .9rem;
}

/* Streak milestone bar */
.streak-bar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.streak-mark { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.streak-mark-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  background: white;
}
.streak-mark.reached .streak-mark-dot {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.streak-mark.current .streak-mark-dot {
  box-shadow: 0 0 0 4px rgba(232,93,117,.2);
  transform: scale(1.15);
}
.streak-mark-lbl { font-size: .65rem; color: var(--text-muted); }

/* ── Streak sidebar widget ───────────────────────────────── */
.streak-card {
  background: linear-gradient(135deg, #fff8f9, white);
  border: 1.5px solid #f0d0d8 !important;
}
.streak-widget-top {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.streak-widget-icon { font-size: 1.75rem; }
.streak-widget-num  { font-weight: 800; font-size: 1rem; color: var(--rose); }
.streak-widget-sub  { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

/* ── Notification bell badge ─────────────────────────────── */
.notif-bell-wrap { position: relative; }
.notif-bell-badge {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--rose);
  color: white;
  font-size: .65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ═══════════════════════════════════════════════════════════
   PLATFORM FEATURES
   ═══════════════════════════════════════════════════════════ */

/* ── Social login buttons ────────────────────────────────── */
.social-divider {
  display: flex; align-items: center; gap: .875rem;
  margin: 1.25rem 0; color: var(--text-muted); font-size: .82rem;
}
.social-divider::before, .social-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.social-login-btns {
  display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: 1rem;
}
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; text-decoration: none; color: #374151;
  background: white; transition: var(--transition);
}
.social-btn:hover { border-color: #9ca3af; background: var(--bg); }

/* ── Blog ─────────────────────────────────────────────────── */
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem; margin-top: 1.5rem;
}
.blog-card {
  background: white; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--card-shadow); text-decoration: none; color: inherit;
  transition: var(--transition); display: flex; flex-direction: column;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.blog-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.blog-card-placeholder {
  height: 180px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; background: var(--rose-pale);
}
.blog-card-body { padding: 1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat   { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rose); margin-bottom: .375rem; }
.blog-card-title { font-weight: 700; font-size: 1rem; line-height: 1.4; margin-bottom: .5rem; flex: 1; }
.blog-card-excerpt { font-size: .82rem; color: var(--text-muted); line-height: 1.5; margin-bottom: .875rem; }
.blog-card-footer { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--text-muted); }

.blog-post-meta  { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.blog-author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-author-name { font-weight: 700; font-size: .875rem; }
.blog-post-date  { font-size: .78rem; color: var(--text-muted); }
.blog-post-title { font-family: var(--font-display); font-size: 2.25rem; line-height: 1.25; margin-bottom: 1.5rem; }
.blog-post-body  { font-size: 1rem; line-height: 1.8; color: #374151; }
.blog-post-body h2 { font-family: var(--font-display); margin: 2rem 0 1rem; }
.blog-post-body p  { margin-bottom: 1.25rem; }
.blog-post-body img { max-width: 100%; border-radius: var(--radius-sm); }
.blog-share { display: flex; align-items: center; gap: .625rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.share-btn  { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rose-pale); color: var(--rose); border: none; cursor: pointer; font-weight: 700; font-size: .85rem; text-decoration: none; transition: var(--transition); }
.share-btn:hover { background: var(--rose); color: white; }

/* ── Referral ─────────────────────────────────────────────── */
.referral-hero { text-align: center; padding: 2rem 0; }
.referral-hero-icon { font-size: 3.5rem; margin-bottom: .75rem; }
.referral-hero h1 { font-family: var(--font-display); font-size: 2rem; margin-bottom: .5rem; }
.referral-hero p  { color: var(--text-muted); max-width: 480px; margin: 0 auto 1.5rem; }

.referral-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.referral-stat  { background: white; border-radius: var(--radius); padding: 1.25rem; text-align: center; box-shadow: var(--card-shadow); }
.referral-stat-num { font-size: 1.5rem; font-weight: 800; font-family: var(--font-display); color: var(--rose); margin-bottom: .25rem; }
.referral-stat-lbl { font-size: .75rem; color: var(--text-muted); }

.referral-link-card h3 { margin-bottom: .25rem; }
.referral-link-wrap { display: flex; gap: .625rem; margin-bottom: 1rem; }
.referral-link-input { flex: 1; padding: .65rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: .875rem; background: var(--bg); }
.referral-share-btns { display: flex; gap: .625rem; flex-wrap: wrap; }
.share-social-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .625rem 1rem; border-radius: 99px; font-size: .82rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid var(--border); color: #374151; background: white;
  cursor: pointer; transition: var(--transition);
}
.share-social-btn:hover { border-color: var(--rose); color: var(--rose); }
.share-social-btn.whatsapp:hover  { border-color: #25D366; color: #25D366; }
.share-social-btn.facebook:hover  { border-color: #1877F2; color: #1877F2; }
.share-social-btn.twitter:hover   { border-color: #000; color: #000; }

.referral-steps { display: flex; flex-direction: column; gap: 1rem; }
.referral-step  { display: flex; align-items: flex-start; gap: 1rem; }
.referral-step-num {
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand);
  color: white; font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: .9rem;
}

/* ── Profile share button ────────────────────────────────── */
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr; }
  .referral-stats { grid-template-columns: 1fr; }
  .referral-link-wrap { flex-direction: column; }
  .social-login-btns { grid-template-columns: 1fr; }
}

/* ── User menu modal links ───────────────────────────────── */
.umenu-link {
  display: block;
  width: 100%;
  padding: .75rem 1.25rem;
  font-size: .875rem;
  color: var(--text);
  text-decoration: none;
  transition: background .12s;
  box-sizing: border-box;
  white-space: nowrap;
}
.umenu-link:hover { background: var(--rose-pale); color: var(--rose); }

/* ═══════════════════════════════════════════════════════════
   AI MATCHING
   ═══════════════════════════════════════════════════════════ */

.ai-matches-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;
}
.ai-matches-header h1 { font-size: 1.75rem; margin-bottom: .25rem; }
.ai-matches-header p  { color: var(--text-muted); }

.ai-api-notice {
  background: #fef3c7; border: 1px solid #fde68a;
  border-radius: var(--radius-sm); padding: .75rem 1rem;
  font-size: .8rem; color: #92400e; max-width: 380px;
}
.ai-api-notice a { color: #92400e; font-weight: 700; }

.ai-matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.ai-match-card {
  background: white; border-radius: var(--radius);
  box-shadow: var(--card-shadow); border: 1px solid var(--border);
  padding: 1.25rem; display: flex; flex-direction: column; gap: .875rem;
  position: relative; transition: var(--transition);
}
.ai-match-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }

/* Score badge */
.ai-score-badge {
  position: absolute; top: 1rem; right: 1rem;
  display: flex; flex-direction: column; align-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  justify-content: center; border: 2.5px solid;
}
.ai-score-badge.score-excellent { background: #f0fdf4; border-color: #16a34a; color: #16a34a; }
.ai-score-badge.score-good      { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.ai-score-badge.score-moderate  { background: #fff7ed; border-color: #d97706; color: #d97706; }
.ai-score-badge.score-low       { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
.ai-score-badge .score-excellent { background: #f0fdf4; }
.ai-score-num  { font-size: .95rem; font-weight: 800; line-height: 1; }
.ai-score-lbl  { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* Avatar */
.ai-match-avatar-wrap { position: relative; display: inline-block; width: 72px; }
.ai-match-avatar      { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--border); }
.ai-premium-badge     { position: absolute; bottom: 0; right: 0; background: #f59e0b; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: .65rem; }

/* Info */
.ai-match-info    { display: flex; flex-direction: column; gap: .25rem; }
.ai-match-name    { font-weight: 700; font-size: 1rem; color: var(--text); display: flex; align-items: baseline; gap: .5rem; }
.ai-match-age     { font-weight: 400; font-size: .82rem; color: var(--text-muted); }
.ai-match-location, .ai-match-occ { font-size: .78rem; color: var(--text-muted); }
.ai-match-bio     { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

/* Reasons */
.ai-reasons { background: var(--bg); border-radius: var(--radius-sm); padding: .75rem; }
.ai-reasons-empty { text-align: center; color: var(--text-muted); font-size: .8rem; }
.ai-summary { font-size: .8rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
.ai-reason-list { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .5rem; }
.ai-reason { font-size: .75rem; display: flex; align-items: center; gap: .375rem; }
.ai-reason-positive { color: #16a34a; }
.ai-reason-negative { color: #dc2626; }
.ai-reason-neutral  { color: #6b7280; }
.ai-tip   { font-size: .73rem; color: var(--brand); font-style: italic; border-top: 1px solid var(--border); padding-top: .375rem; margin-top: .375rem; }

/* Actions */
.ai-match-actions { display: flex; gap: .5rem; margin-top: auto; }

/* ═══════════════════════════════════════════════════════════
   MOBILE POLISH — comprehensive pass
   ═══════════════════════════════════════════════════════════ */

/* ── Support page ───────────────────────────────────────── */
@media (max-width: 768px) {
  .support-grid,
  div[style*="grid-template-columns:1fr 380px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── AI Matches grid ─────────────────────────────────────── */
@media (max-width: 480px) {
  .ai-matches-grid { grid-template-columns: 1fr; }
  .ai-matches-header { flex-direction: column; }
}

/* ── Notifications page ──────────────────────────────────── */
@media (max-width: 600px) {
  .notif-item { flex-wrap: wrap; gap: .5rem; }
}

/* ── Blog page ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr !important; }
}

/* ── Visitors / Likes / Matches ──────────────────────────── */
@media (max-width: 480px) {
  .visitors-grid,
  .likes-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Privacy / Terms pages ───────────────────────────────── */
@media (max-width: 600px) {
  .page-inner { padding: 1rem .75rem 2rem !important; }
  .page-inner h1 { font-size: 1.5rem; }
}

/* ── Coins page features grid ────────────────────────────── */
@media (max-width: 600px) {
  .features-spend-grid { grid-template-columns: 1fr !important; }
  .feature-card { flex-direction: row; align-items: flex-start; gap: .875rem; }
}

/* ── Profile actions wrap on mobile ─────────────────────── */
@media (max-width: 480px) {
  .profile-actions { gap: .375rem; }
  .profile-actions .btn { padding: 7px 10px; font-size: .75rem; }
  .chat-header-actions .btn { font-size: .75rem; padding: 6px 10px; }
}

/* ── Referral page ───────────────────────────────────────── */
@media (max-width: 600px) {
  .referral-steps { flex-direction: column; }
}

/* ── Video modal full screen on mobile ───────────────────── */
@media (max-width: 600px) {
  #videoModal > div {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* ── Verify photo page ───────────────────────────────────── */
@media (max-width: 600px) {
  div[style*="display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap"] {
    flex-direction: column;
  }
}

/* ── Admin tickets / blog on mobile ──────────────────────── */
@media (max-width: 768px) {
  div[style*="grid-template-columns:75% 1fr"],
  div[style*="grid-template-columns:25% 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Range inputs ────────────────────────────────────────── */
@media (max-width: 480px) {
  .range-inputs { flex-direction: column; gap: .5rem; }
  .range-inputs span { display: none; }
}

/* ── Form rows in small screens ──────────────────────────── */
@media (max-width: 400px) {
  .form-row,
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="display:grid;grid-template-columns:2fr 2fr 3fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Messages input area ─────────────────────────────────── */
@media (max-width: 480px) {
  .message-input-wrap { gap: .375rem; }
  .attach-btn, .emoji-trigger-btn { font-size: 1.1rem; padding: 4px; }
  .send-btn { min-width: 40px; min-height: 40px; }
}

/* ── Swipe cards touch friendly ─────────────────────────── */
@media (max-width: 390px) {
  .swipe-deck { width: 270px; height: 400px; }
  .like-btn   { width: 52px; height: 52px; font-size: 1.2rem; }
}

/* ── Hero text on very small screens ─────────────────────── */
@media (max-width: 360px) {
  .site-hero-title { font-size: 1.3rem; }
  .site-nav-link   { min-width: 34px; padding: 6px; }
}

/* ── Prevent text overflow everywhere ────────────────────── */
.member-card-name,
.conv-name,
.ai-match-name,
.profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ── Smooth scrolling on iOS ─────────────────────────────── */
.messages-body,
.conversations-list,
.messages-sidebar { -webkit-overflow-scrolling: touch; }

/* ── Fix tap highlight ───────────────────────────────────── */
a, button { -webkit-tap-highlight-color: transparent; }

/* ── Input zoom prevention on iOS (font-size >= 16px) ────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea { font-size: 16px !important; }
}

@keyframes slideInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }

/* ── Dark Mode ───────────────────────────────────────────── */
html.dark-mode, body.dark-mode {
  --bg:         #111827;
  --bg2:        #1f2937;
  --border:     #374151;
  --text:       #f9fafb;
  --text-muted: #9ca3af;
  background:   #111827 !important;
  color:        #f9fafb !important;
}
/* All white/light backgrounds → dark */
html.dark-mode body, body.dark-mode .page-inner,
body.dark-mode main,
body.dark-mode .card,
body.dark-mode .sidebar-card,
body.dark-mode .settings-layout,
body.dark-mode .settings-content,
body.dark-mode .settings-section,
body.dark-mode .profile-card,
body.dark-mode .member-card,
body.dark-mode .message-bubble.received .bubble-content,
body.dark-mode .messages-sidebar,
body.dark-mode .messages-main,
body.dark-mode .conversations-list,
body.dark-mode .conversation-item,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .notification-item,
body.dark-mode .discover-card,
body.dark-mode .quiz-card,
body.dark-mode .profile-section,
body.dark-mode .badge-card,
body.dark-mode [style*="background:white"],
body.dark-mode [style*="background:#fff"] { background: #1f2937 !important; border-color: #374151 !important; color: #f9fafb !important; }
/* Inputs */
body.dark-mode .form-control,
body.dark-mode input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.dark-mode select,
body.dark-mode textarea { background: #374151 !important; color: #f9fafb !important; border-color: #4b5563 !important; }
body.dark-mode .form-control::placeholder { color: #9ca3af !important; }
/* Text colours */
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,
body.dark-mode h4,body.dark-mode p,body.dark-mode label,
body.dark-mode span:not(.badge):not(.online-dot),
body.dark-mode a:not(.btn):not(.site-nav-link) { color: #f9fafb !important; }
body.dark-mode .text-muted,
body.dark-mode [style*="color:#6b7280"],
body.dark-mode [style*="color: #6b7280"],
body.dark-mode [style*="color:#9ca3af"] { color: #9ca3af !important; }
/* Borders & dividers */
body.dark-mode hr { border-color: #374151 !important; }
/* Messages */
body.dark-mode .messages-body { background: #111827 !important; }
body.dark-mode .message-input-wrap { background: #1f2937 !important; border-color: #374151 !important; }
body.dark-mode .message-input { background: #374151 !important; color: #f9fafb !important; }
/* Toggle button */
body.dark-mode #dark-mode-btn { background: #2e160a !important; }
/* Tables */
body.dark-mode table, body.dark-mode tr, body.dark-mode td, body.dark-mode th { background: #1f2937 !important; color: #f9fafb !important; border-color: #374151 !important; }
/* Alerts/notices */
body.dark-mode .alert { border-color: #374151 !important; }

@media (max-width: 600px) {
}


@media (max-width: 600px) {
  .site-nav-join { gap: .25rem; }
  .site-nav-join .btn { font-size: .75rem; padding: .4rem .75rem; }
}


@media (max-width: 600px) {
}

/* affiliate-mobile */
@media(max-width:768px){
  #lp-aff-grid { grid-template-columns: 1fr !important; }
}
.page-discover .site-hero,
body:has(.page-discover) .site-hero { height: 60px !important; min-height: 60px !important; }
body:has(.page-discover) .site-hero-bg,
body:has(.page-discover) .site-hero-logo-wrap,
body:has(.page-discover) .site-hero-body { display: none !important; }