/* --------------------------------------------------------------------
   SafarCircle � UI Refresh Phase 4
   Final pass to close gaps vs. mockups:
   � Caravan Feed dual-greeting header (Salam, {name} + The Caravan Feed)
   � Feed-post action bar (heart / comment / share / bookmark)
   � Multi-FAB on Circles (Create a Post / Start a New Circle)
   � Drop-a-Salam terracotta CTA on user-home
   � Cream-toned login auth surface
   � Circles grid card text & metadata polish
   � Map traveller ring avatars + city sheet bottom card
   -------------------------------------------------------------------- */

/* Dark fallback � prevents any see-through flash when the auth background
   crossfades or when the app first loads before images are ready.          */
body { background: #1a0a04; }

/* --- Caravan Feed header --- */
.caravan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.2rem 0;
}
.caravan-head .ch-greet {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--text);
  font-weight: 700;
}
.caravan-head .ch-actions { display: flex; align-items: center; gap: 0.6rem; }
.caravan-head .ch-bell {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.caravan-head .ch-bell:hover { color: var(--gold); border-color: rgba(212,168,83,0.4); }
.caravan-head .ch-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #213168, #0F1A42) center/cover no-repeat;
  border: 2px solid var(--gold);
}
.caravan-sub {
  font-family: var(--serif);
  font-size: 1.55rem;
  color: var(--text);
  margin: 0.2rem 0.2rem 0.9rem;
}

/* --- Feed post action bar (heart / comment / share / bookmark) --- */
.feed-post-actions {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.55rem 1rem 0.95rem;
  color: var(--text-dim);
}
.feed-post-actions .fpa-btn {
  background: transparent; border: none;
  width: 30px; height: 30px;
  min-width: 30px;
  display: flex; align-items: center; justify-content: center;
  color: inherit; cursor: pointer;
  transition: color .15s ease, transform .12s ease;
}
.feed-post-actions .fpa-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.feed-post-actions .fpa-btn:hover { color: var(--gold); transform: scale(1.08); }
.feed-post-actions .fpa-btn.fpa-like.active { color: #E26A6A; }
.feed-post-actions .fpa-btn.fpa-like.active svg { fill: #E26A6A; }
.feed-post-actions .fpa-btn.fpa-save.active { color: var(--gold); }
.feed-post-actions .fpa-btn.fpa-save.active svg { fill: var(--gold); }
.feed-post-actions .fpa-spacer { flex: 1; }

/* Inject author line into feed post body */
.feed-post-author {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 0.1rem;
}

/* Bookmark inline beside title */
.feed-post-title-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
}
.feed-post-title-row .fpt-save {
  background: transparent; border: none; cursor: pointer;
  color: var(--gold);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
}

/* --- Multi-FAB on Circles panel --- */
.circles-fab-wrap {
  position: fixed;
  right: 1rem;
  bottom: calc(var(--nav-total-h) + 1rem);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.6rem;
  z-index: 70;
}
.circles-fab-wrap .cfab-main {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%);
  color: #fff; border: none;
  font-size: 1.55rem; font-weight: 700;
  box-shadow: 0 12px 32px rgba(224, 80, 112, 0.45);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.circles-fab-wrap.open .cfab-main { transform: rotate(45deg); }
.circles-fab-wrap .cfab-children {
  display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.circles-fab-wrap.open .cfab-children { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.circles-fab-wrap .cfab-child {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(15,25,60,0.96);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(212,168,83,0.4);
  color: var(--gold-lt);
  padding: 0.65rem 1.05rem;
  border-radius: 999px;
  font-weight: 600; font-size: 0.9rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.circles-fab-wrap .cfab-child .cf-ic {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold);
  color: #1B2349;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}

/* Circles grid title polish � use same sans title style as chat header */
#panel-circles .section-head h2 {
  font-family: inherit !important;
  font-size: 1.4rem !important;
  font-weight: 700;
  color: #1C0E08;
  letter-spacing: -0.01em;
  margin: 0;
}
.circle-card-v2 .cc-meta { font-weight: 600; }

/* --- Drop a Salam CTA � appended to user-home (panel-messages, home tab) --- */
/* drop-salam-cta button � hidden (disabled by user request) */
.drop-salam-cta { display: none !important; }

/* --- Auth: lighter cream variant (login) --- */
#screen-login .auth-wrap, #screen-register .auth-wrap, #screen-forgot-password .auth-wrap {
  background: transparent;
}
.auth-body p.text-muted { color: var(--text-dim); }

/* Caravan feed image-poster overlay matching mockup (city pill) */
.feed-post-card .feed-post-hero .pin-tag svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Small refinement: filter pill rows on messages search (Food/Mosques chips) */
.chat-cat-row {
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding: 0.4rem 0.1rem 0.6rem;
}
.chat-cat-row::-webkit-scrollbar { display: none; }
.chat-cat {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  white-space: nowrap;
}

/* Hide the old plain msg-tabs row when Caravan header rendered above it */
.msg-tabs.sc-hidden { display: none !important; }

/* --------------------------------------------------------------------
   SPLASH / LOADER � Terracotta Hero Redesign
   Matches the brand splash: warm terracotta bg � two-ring gold logo �
   white serif title � "Connect with Muslim travelers" tagline �
   faded city overlay � silhouette people strip at the bottom.
   -------------------------------------------------------------------- */

/* -- App Loader full-screen overhaul -- */
#screen-loader .app-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12vh;
  gap: 0;
  z-index: 100;
  background-color: #d4c8b8;
}
/* Blurred background image — pseudo-element so it doesn't blur the logo */
#screen-loader .app-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/img/group image loading.jpg');
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(8px) brightness(1.4);
}
/* Very light overlay — logo still pops on bright bg */
#screen-loader .app-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* Terracotta colour overlay � solid tint over the photo */
.app-loader-city-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.20);
  mix-blend-mode: multiply;
  z-index: 1;
}

/* Subtle dark vignette at the bottom for text legibility */
.app-loader-people-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(to top,
    rgba(40,12,4,0.45) 0%,
    transparent 100%);
  z-index: 2;
}

/* Content wrapper — centered on screen */
#screen-loader .app-loader-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2rem;
}

/* Rings SVG */
.app-loader-rings-svg {
  margin-bottom: 1.8rem;
}
.sc-rings-img {
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  width: 95px;
  height: auto;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
  animation: scRingsReveal 0.8s cubic-bezier(0.22,1,0.36,1) both;
  margin: 0 auto 6px;
  padding: 0;
  box-sizing: border-box;
}
.sc-rings-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: max-content;
}
.sc-logo-brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.06em;
  margin: 0.4rem 0 0.1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
  white-space: nowrap;
  animation: scRingsReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
.sc-logo-tagline {
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1.6rem;
  white-space: nowrap;
  animation: scRingsReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}
.app-loader-rings-svg .sc-rings-img {
  width: min(72vw, 300px);
}
@keyframes scRingsReveal {
  from { opacity: 0; transform: scale(0.85) translateY(12px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* Title */
#screen-loader .app-loader-name {
  font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
  font-size: clamp(2rem, 7vw, 2.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  line-height: 1.05;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
  animation: scRingsReveal 0.85s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}

/* Tagline */
.app-loader-tagline {
  margin: 0.7rem 0 0;
  color: rgba(255,255,255,0.86);
  font-size: clamp(0.88rem, 3.5vw, 1rem);
  line-height: 1.55;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  animation: scRingsReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both;
}

/* Hide old loader elements */
#screen-loader .app-loader-logo,
#screen-loader .app-loader-tag,
#screen-loader .app-loader-ring,
#screen-loader .app-loader-spinner { display: none !important; }

/* -- Splash screen � same terracotta palette -- */
#screen-splash .splash-bg {
  background: linear-gradient(168deg, #D6336C 0%, #B82050 48%, #8B1A40 100%) !important;
}

/* Faint dome overlay on splash too */
.splash-city-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 55% at 60% 28%, rgba(255,230,190,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0,0,0,0.35) 0%, transparent 70%);
  z-index: 1;
}

/* People strip on splash */
.splash-people-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 44%;
  background: linear-gradient(to top,
    rgba(60,10,20,0.72) 0%,
    rgba(60,10,20,0.38) 42%,
    transparent 80%);
  z-index: 2;
}

/* Rings logo on splash */
.splash-rings-logo { margin-bottom: 1.4rem; }
.sc-rings-splash {
  width: min(48vw, 190px);
  height: auto;
  filter: drop-shadow(0 5px 18px rgba(0,0,0,0.28));
  animation: scRingsReveal 0.8s cubic-bezier(0.22,1,0.36,1) both;
}

/* Splash text overrides */
#screen-splash .splash-content { z-index: 5; position: relative; }
#screen-splash .splash-title {
  color: #FFFFFF !important;
  font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif !important;
  font-size: clamp(2rem, 8vw, 3rem) !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.22) !important;
}
/* Replace old tagline styling */
.splash-tagline {
  color: rgba(255,255,255,0.88);
  font-size: clamp(0.88rem, 3.5vw, 1rem);
  line-height: 1.55;
  margin: 0.5rem 0 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Hide replaced elements */
#screen-splash .arabic-sub,
#screen-splash .splash-sub,
#screen-splash .geo-pattern { display: none !important; }

/* Onboarding panel on terracotta */
#screen-splash .onboarding {
  background: linear-gradient(to top, rgba(60,10,20,0.97) 65%, transparent) !important;
  z-index: 6;
}
#screen-splash .onboarding p    { color: rgba(255,255,255,0.92) !important; }
#screen-splash .onboarding-dots .dot { background: rgba(255,255,255,0.30) !important; }
#screen-splash .onboarding-dots .dot.active { background: #D4A840 !important; }
#screen-splash .btn-ghost {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* Light-theme override � keep photo background, not the old gradient */
:root[data-theme="light"] #screen-loader .app-loader {
  background-color: #8B1A40 !important;
  background-image: url('/img/group image loading.jpg') !important;
  background-position: center bottom !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* --------------------------------------------------------------------
   AUTH LANDING + LOGIN / REGISTER � Blurred-photo sheet redesign
   Matches the mockup: warm sandy blurred bg � terracotta rings hero �
   white serif headline � cream bottom sheet � terracotta CTA.
   -------------------------------------------------------------------- */

/* -- Shared blurred background for login / register / forgot -- */
.sc-auth-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('/img/solo image.jpg') center center / cover no-repeat fixed;
  filter: blur(18px) brightness(0.75) saturate(1.0);
  transform: scale(1.08);
  pointer-events: none;
}

/* Splash screen: photo background with terracotta colour overlay � no blur */
#screen-splash .sc-auth-bg {`n  filter: blur(18px) brightness(0.75) saturate(1.0);`n  transform: scale(1.08);`n  inset: 0;`n}}
/* Light white tint — barely visible */
#screen-splash .sc-auth-bg::after {`n  content: """";`n  position: absolute;`n  inset: 0;`n  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.40) 100%);`n  mix-blend-mode: normal;`n}

#screen-splash .sc-logo-brand-name,
#screen-splash .sc-logo-tagline {
  display: none !important;
}

/* Screens fully transparent so photo fills edge-to-edge */
#screen-splash,
#screen-login,
#screen-register,
#screen-forgot-password {
  background: transparent !important;
}

/* -- Auth landing hero (splash screen only) — matches loader position -- */
#screen-splash {
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Position the background correctly inside fixed screen-splash */
#screen-splash .sc-auth-bg {
  position: absolute;
  z-index: 0;
}

.sc-auth-hero {
  position: absolute;
  top: max(0.8rem, env(safe-area-inset-top, 0.8rem));
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2rem;
  background: none;
}

/* Terracotta rings SVG */
.sc-rings-hero {
  width: auto;
  margin-bottom: 0.9rem;
  animation: scRingsReveal 0.85s cubic-bezier(0.22,1,0.36,1) both;
}
/* White backdrop circle behind logo — removed; loader-style logo used instead */
.sc-rings-hero {
  position: relative;
}
.sc-rings-hero::before {
  display: none;
}
/* Match loader logo exactly */
.sc-rings-hero svg,
.sc-rings-hero img,
#screen-splash .sc-rings-hero img {
  width: 160px;
  height: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
  border-radius: 0;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Hide duplicate brand text on loader — the new loader logo image contains it */
.app-loader-brand-name,
.app-loader-content > .app-loader-tagline { display: none !important; }

/* Large white serif headline — pops on dark background */
.sc-auth-headline {
  font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
  font-size: clamp(1.8rem, 6.8vw, 2.7rem);
  font-weight: 700;
  line-height: 1.12;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  margin: 0 0 1.1rem;
  animation: scRingsReveal 0.9s cubic-bezier(0.22,1,0.36,1) 0.08s both;
}

/* Light subtitle — readable on dark bg */
.sc-auth-sub {
  font-size: clamp(0.78rem, 3.1vw, 0.92rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  animation: scRingsReveal 0.95s cubic-bezier(0.22,1,0.36,1) 0.16s both;
}

/* -- Bottom auth sheet (cream curved panel) -- */
.sc-auth-sheet {
  position: relative;
  z-index: 3;
  background: #FAF7F2;
  border-radius: 26px 26px 0 0;
  padding: 1.4rem 2rem calc(3rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(40,15,5,0.22);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  animation: scSheetReveal 0.7s cubic-bezier(0.22,1,0.36,1) 0.25s both;
}
@keyframes scSheetReveal {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* sc-sheet-pill */
.sc-sheet-pill {
  width: 42px;
  height: 4px;
  background: rgba(0,0,0,0.14);
  border-radius: 999px;
  margin: 0 auto 0.5rem;
  flex-shrink: 0;
}

/* "Find My Circle" CTA � terracotta pill button */
.btn-find-circle {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%);
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(224, 80, 112, 0.40);
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.btn-find-circle:hover  { background: linear-gradient(135deg, #F47080 0%, #E86278 50%, #D85570 100%); }
.btn-find-circle:active { transform: scale(0.98); box-shadow: 0 3px 12px rgba(224, 80, 112, 0.30); }

/* Outline (Log In) variant */
.btn-find-circle--outline {
  background: transparent;
  color: #E05070;
  border: 2px solid #E05070;
  box-shadow: none;
}
.btn-find-circle--outline:hover  { background: rgba(184,96,74,0.07); }
.btn-find-circle--outline:active  { box-shadow: none; }

/* "Already a member? Log In" secondary link */
.btn-auth-secondary {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: #6B4838;
  font-size: 0.92rem;
  text-align: center;
  cursor: pointer;
  padding: 0.3rem;
  font-family: inherit;
}
.btn-auth-secondary strong { color: #B8604A; font-weight: 700; }
.btn-auth-secondary:hover strong { text-decoration: underline; }

/* Suppress the old splash CSS that's replaced */
#screen-splash .splash-bg,
#screen-splash .splash-content,
#screen-splash .splash-title,
#screen-splash .splash-tagline,
#screen-splash .splash-sub,
#screen-splash .splash-city-overlay,
#screen-splash .splash-people-overlay,
#screen-splash .geo-pattern,
#screen-splash .onboarding { display: none !important; }

/* Suppress the FMC overlay (its content is now the permanent splash design) */
#screen-splash .fmc-overlay { display: none !important; }

/* -- Login / Register / Forgot: sheet-style layout on warm bg -- */
#screen-login,
#screen-register,
#screen-forgot-password {
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Auth-wrap becomes a cream bottom sheet */
#screen-login .auth-wrap,
#screen-register .auth-wrap,
#screen-forgot-password .auth-wrap {
  flex: 0 0 auto;
  z-index: 2;
  background: #FAF7F2 !important;
  border-radius: 26px 26px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(40,15,5,0.22) !important;
  max-height: 88vh;
  overflow-y: auto;
  padding-bottom: calc(2.4rem + env(safe-area-inset-bottom, 0px));
}
#screen-login .auth-wrap::before,
#screen-register .auth-wrap::before,
#screen-forgot-password .auth-wrap::before {
  content: '';
  display: block;
  width: 42px;
  height: 4px;
  background: rgba(0,0,0,0.14);
  border-radius: 999px;
  margin: 14px auto 0;
}

/* Rings logo in auth header */
.auth-rings-logo {
  height: 36px;
  width: auto;
  display: block;
  opacity: 0.92;
  filter: brightness(0.92) drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

/* Auth header inside the sheet */
#screen-login .auth-header,
#screen-register .auth-header,
#screen-forgot-password .auth-header {
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  background: transparent !important;
}

/* Back button icon colour on cream bg */
#screen-login .auth-header .btn-icon,
#screen-register .auth-header .btn-icon,
#screen-forgot-password .auth-header .btn-icon {
  color: #3A2018 !important;
}
#screen-login .auth-header .btn-icon svg path,
#screen-register .auth-header .btn-icon svg path,
#screen-forgot-password .auth-header .btn-icon svg path {
  stroke: #3A2018 !important;
}

/* Auth body text � dark on cream */
#screen-login .auth-body h2,
#screen-register .auth-body h2,
#screen-forgot-password .auth-body h2 {
  font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif !important;
  font-size: 1.9rem !important;
  color: #2A1810 !important;
}
#screen-login .auth-body p.text-muted,
#screen-register .auth-body p.text-muted,
#screen-forgot-password .auth-body p.text-muted {
  color: #1a1a1a !important;
}

/* Labels, links � dark on cream */
#screen-login .auth-body label,
#screen-register .auth-body label {
  color: #3A2018 !important;
}
#screen-login .link-btn,
#screen-login .auth-body a,
#screen-register .link-btn,
#screen-register .auth-body a {
  color: #B8604A !important;
}

/* --------------------------------------------------------------------
   MAP PAGE � Light Theme Redesign
   Matches mockup: clean cream search/filters, light bottom nav,
   traveler bottom sheet, hidden top bar on map.
   -------------------------------------------------------------------- */

/* Hide the top bar when on the map, circles, messages, or chat panel */
#screen-app:has(#panel-map.active) .top-bar,
#screen-app:has(#panel-circles.active) .top-bar,
#screen-app:has(#panel-messages.active) .top-bar,
#screen-app:has(#panel-chat.active) .top-bar {
  display: none !important;
}

/* -- Circles panel � photo grid layout -- */
#panel-circles { background: #ffffff !important; }

/* -- Circle detail � warm cream to match circles panel -- */
#panel-circle-detail { background: #FAF7F2; }
#screen-app:has(#panel-circle-detail.active) .top-bar {
  background: rgba(250,247,242,0.97) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}
#screen-app:has(#panel-circle-detail.active) .top-bar #btnBack svg { stroke: #1A0A14 !important; }
#screen-app:has(#panel-circle-detail.active) .top-bar #topTitle { color: #1C0E08 !important; }

.circles-panel-head {
  padding: 18px 20px 10px;
  background: #ffffff !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.circles-panel-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #1C0E08;
  margin: 0;
  letter-spacing: -0.02em;
}
.circles-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px calc(90px + env(safe-area-inset-bottom, 0px));
}
.circles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.circles-grid .skeleton-list,
.circles-grid > p { grid-column: 1 / -1; }

.circle-photo-card {
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.circle-photo-card:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.circle-photo-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.10) 55%, transparent 100%);
}
.circle-photo-card-name {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 10px;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* Pink gradient create FAB */
.circles-fab {
  position: absolute;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 18px);
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(224, 80, 112, 0.45);
  cursor: pointer;
  z-index: 50;
  flex-shrink: 0;
}
.circles-fab:hover { background: linear-gradient(135deg, #F47080 0%, #E86278 50%, #D85570 100%); }
.circles-fab:active { transform: scale(0.94); }
.circles-fab svg { width: 28px; height: 28px; stroke: #fff; }

/* -- Profile panel � premium light theme -- */
#screen-app:has(#panel-profile.active) .top-bar { display: none !important; }

#panel-profile { background: #ffffff !important; }
#panel-profile #profileContent { background: #ffffff !important; }

/* Settings gear � absolute top-right, floats over cover */
#panel-profile .profile-settings-wrap {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 30;
}
#panel-profile .profile-settings-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(10px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 14px rgba(0,0,0,0.14);
  color: #1A0A14;
}
#panel-profile .profile-settings-btn:hover { background: rgba(255,255,255,0.98); }

.profile-settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 36px rgba(0,0,0,0.15);
  border: 1px solid rgba(0,0,0,0.07);
  min-width: 192px;
  overflow: hidden;
  z-index: 200;
}
.profile-settings-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  background: none;
  border: none;
  color: #1C0E08;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.profile-settings-menu button:hover { background: #F5EFE8; }
.profile-settings-menu button.danger { color: #C0392B; font-weight: 600; }
.psm-divider { height: 1px; background: rgba(0,0,0,0.07); margin: 4px 0; }

/* Cover photo */
.prof-cover-section {
  width: 100%;
  height: 210px;
  background: linear-gradient(135deg, #D4787A 0%, #8B1A40 60%, #1C0E08 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}
.prof-cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.40) 100%);
}

/* #profileContent: zero padding so cover goes edge-to-edge */
#panel-profile #profileContent {
  padding: 0 !important;
  padding-bottom: calc(var(--nav-total-h) + 2rem) !important;
}

/* Avatar overlaps bottom of cover section */
.prof-body {
  position: relative;
  background: #ffffff !important;
  padding: 60px 20px 32px;
  flex: 1;
  /* NO overflow-y � scrolling is handled by #profileContent */
}
.prof-avatar-circle {
  position: absolute;
  top: -48px;
  left: 20px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #e8e8e8;
  border: 4px solid #FAF7F2;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.prof-avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prof-av-initials {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Name block */
.prof-name {
  font-size: 1.85rem;
  font-weight: 800;
  color: #1C0E08;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 3px;
}
.prof-username {
  font-size: 0.84rem;
  color: #8B6B7A;
  margin-bottom: 6px;
}
.prof-meta {
  font-size: 0.82rem;
  color: #8B6B7A;
  margin-bottom: 10px;
  text-transform: capitalize;
}
.prof-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

/* Stats row � clean passport-style dividers */
.prof-stats {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  margin-bottom: 14px;
  overflow: hidden;
}
.prof-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 14px;
  gap: 5px;
}
.prof-stat-sep {
  width: 1px;
  background: rgba(0,0,0,0.08);
  flex-shrink: 0;
  align-self: stretch;
}
.prof-stat-val {
  font-size: 1.65rem;
  font-weight: 800;
  color: #1C0E08;
  line-height: 1;
  letter-spacing: -0.03em;
}
.prof-stat-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  color: #8B6B7A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* XP bar overrides for profile */
#profileContent .xp-bar-track { background: rgba(0,0,0,0.08) !important; border-radius: 8px; }
#profileContent .xp-bar-fill  { background: linear-gradient(to right, #D4787A, #D6336C) !important; border-radius: 8px; }
#profileContent .xp-bar-label { color: #8B6B7A !important; font-size: 0.77rem !important; }
#profileContent .xp-bar-wrap  { margin-bottom: 16px !important; }

/* Bio */
.prof-bio {
  font-size: 0.9rem;
  color: #6B2040;
  line-height: 1.65;
  margin-bottom: 18px;
}

/* Action row */
.prof-action-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.prof-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 12px;
  background: #fff;
  border: 1.5px solid rgba(214,51,108,0.28);
  border-radius: 14px;
  color: #D6336C;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  font-family: inherit;
  transition: background 0.14s, border-color 0.14s;
}
.prof-action-btn:hover { background: #FDF0F6; border-color: #D6336C; }
.prof-action-btn:active { transform: scale(0.97); }

/* Admin compact button */
.prof-admin-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 14px;
  background: rgba(214,51,108,0.08);
  border: 1.5px solid rgba(214,51,108,0.20);
  border-radius: 14px;
  color: #D6336C;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.prof-admin-btn:hover { background: rgba(214,51,108,0.14); }

/* Posts section */
.prof-posts-section { margin-top: 6px; }
.prof-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1C0E08;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

/* -- Messages list panel � solid white theme -- */
#panel-messages {
  background: #ffffff !important;
}
#panel-messages .msg-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#panel-messages .chats-header {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
  padding-top: 0.5rem !important;
}
#panel-messages .chats-title {
  color: #1C0E08 !important;
}
#panel-messages .chats-icon-btn {
  color: #6B2040 !important;
}
#panel-messages .chats-icon-btn:hover { background: rgba(0,0,0,0.05) !important; }
#panel-messages .chats-search-row input {
  background: #fff !important;
  border: 1.5px solid rgba(214,51,108,0.25) !important;
  border-radius: 22px !important;
  color: #1C0E08 !important;
  padding: 12px 16px !important;
  min-height: 44px !important;
  height: auto !important;
  outline: none !important;
  box-shadow: none !important;
}
#panel-messages .chats-search-row input:focus,
#panel-messages .chats-search-row input:focus-visible {
  border-color: rgba(214,51,108,0.25) !important;
  outline: none !important;
  box-shadow: none !important;
}
#panel-messages .chats-search-row input::placeholder { color: rgba(0,0,0,0.35) !important; }
#panel-messages .conversation-item {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
  border-radius: 16px !important;
  margin: 0.15rem 0 !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
#panel-messages .conversation-item:hover { background: #F5F5F5 !important; }
#panel-messages .conv-name {
  color: #1C0E08 !important;
  font-weight: 600 !important;
}
#panel-messages .conv-time { color: #8B8B8B !important; }
#panel-messages .conv-last { color: #8B6B7A !important; }
#panel-messages .conv-avatar-wrap .conv-avatar,
#panel-messages .group-avatar {
  /* colour handled per-person by JS _avatarGrad() � do NOT override with !important here */
  color: #fff !important;
}

/* -- Chat panel � light cream theme -- */
#panel-chat {
  background: #FAF7F2 !important;
}

/* Topbar: white, back arrow + avatar + name + 3-dot */
#panel-chat .chat-topbar {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  padding: 10px 12px 10px 8px !important;
  min-height: 64px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}
#panel-chat .chat-topbar-back { color: #1A0A14 !important; }
#panel-chat .chat-topbar-back:hover { background: rgba(0,0,0,0.05) !important; }
#panel-chat .chat-topbar-avatar {
  background: #f0ebe4 !important;
  border: 2px solid #fff !important;
  color: #1a1a1a !important;
  box-shadow: 0 0 0 2px #ddd !important;
}
#panel-chat .chat-topbar-name {
  color: #1C0E08 !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
}
#panel-chat .chat-topbar-sub {
  color: #5FAD7A !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}
#panel-chat .chat-topbar-icon-btn { color: #6B2040 !important; }
#panel-chat .chat-topbar-icon-btn:hover { background: rgba(0,0,0,0.05) !important; }

/* Messages area � solid white */
#panel-chat {
  background: #ffffff !important;
}
#panel-chat .chat-messages {
  background-color: #ffffff !important;
  background-image: none !important;
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 14px !important;
  position: relative !important;
}

/* Outgoing bubbles � light blue accent */
#panel-chat .msg-bubble.msg-out {
  background: #D9EEFF !important;
  color: #0B3D5E !important;
  border: none !important;
  border-radius: 18px 4px 18px 18px !important;
  box-shadow: 0 1px 6px rgba(43,109,150,0.18) !important;
}
#panel-chat .msg-bubble.msg-out .msg-time { color: rgba(11,61,94,0.75) !important; }

/* Incoming bubbles � white with warm shadow */
#panel-chat .msg-bubble.msg-in {
  background: #fff !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: 4px 18px 18px 18px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.10) !important;
}
#panel-chat .msg-bubble.msg-in .msg-time { color: #8B6B7A !important; }

/* Input bar � white bottom bar */
#panel-chat .chat-input-bar {
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}
#panel-chat .chat-input-wrap {
  background: transparent !important;
  backdrop-filter: none !important;
  border-top: none !important;
  padding: 0 !important;
}
#panel-chat .chat-input-bar textarea {
  background: #FAF7F2 !important;
  border: 1.5px solid rgba(0,0,0,0.15) !important;
  border-radius: 22px !important;
  color: #1C0E08 !important;
  padding: 10px 16px !important;
  font-size: 0.92rem !important;
  overflow-y: hidden !important;
  resize: none !important;
}
#panel-chat .chat-input-bar textarea::placeholder { color: rgba(0,0,0,0.35) !important; }
#panel-chat .chat-input-bar textarea:focus { border-color: #E05070 !important; outline: none !important; }

/* Attach + send buttons */
#panel-chat .chat-attach-btn { color: #1a1a1a !important; }
#panel-chat .send-btn {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
  box-shadow: 0 3px 12px rgba(224, 80, 112, 0.35) !important;
}

/* Conv dropdown menu */
#panel-chat .chat-conv-menu {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #1a1a1a !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08) !important;
}
#panel-chat .chat-conv-menu-item { color: #1a1a1a !important; }
#panel-chat .chat-conv-menu-item:hover { background: rgba(0,0,0,0.04) !important; }
#panel-chat .chat-menu-danger { color: #C0392B !important; }
#panel-chat .chat-menu-section-label { color: #999 !important; }

/* -- Map search bar � cream/white -- */
#panel-map .map-search {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#panel-map .map-search input {
  color: #1A0A14 !important;
  background: transparent;
}
#panel-map .map-search input::placeholder { color: rgba(0,0,0,0.35); }
#panel-map .search-icon { stroke: #B09080 !important; }

/* -- Filter pills � outlined light style -- */
#panel-map .filter-pill {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid rgba(0, 0, 0, 0.14) !important;
  color: #1A0A14 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#panel-map .filter-pill.active {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
  border-color: #E05070 !important;
  color: #fff !important;
  box-shadow: 0 1px 8px rgba(224, 80, 112, 0.25);
}
#panel-map .filter-pill-ai {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
  border-color: #E05070 !important;
  color: white !important;
}

/* -- Bottom nav � light warm theme -- */
.bottom-nav {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06) !important;
}
.nav-btn {
  color: #1a1a1a !important;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}
.nav-btn:active {
  background: transparent !important;
  opacity: 1 !important;
}
.nav-btn svg {
  stroke: #1a1a1a !important;
  width: 24px !important;
  height: 24px !important;
}
.nav-btn::after { display: none !important; }
.nav-btn.active { color: #E05070 !important; }
.nav-btn.active svg { stroke: #E05070 !important; }

/* Active pill background behind icon */
.nav-btn.active::before {
  content: '';
  position: absolute;
  inset: auto;
  width: 50px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.nav-btn svg { position: relative; z-index: 1; }

/* Circles icon — slightly larger */
.nav-btn[data-nav="circles"] svg {
  width: 30px !important;
  height: 30px !important;
}

/* -- Override the special explore centre button � make it plain -- */
.nav-btn-explore {
  flex: 1 !important;
  color: #1a1a1a !important;
}
.nav-btn-explore::after { display: none !important; }
.nav-btn-explore::before { display: none !important; }
.nav-btn-explore.active::before {
  display: block !important;
}
.nav-explore-inner {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: contents;
}
.nav-explore-inner svg {
  stroke: #1a1a1a !important;
  width: 24px !important;
  height: 24px !important;
}
.nav-btn-explore.active .nav-explore-inner svg {
  stroke: #E05070 !important;
}

/* -- Traveler bottom sheet -- */
.traveler-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FAF7F2;
  border-radius: 22px 22px 0 0;
  padding: 0.5rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.14);
  z-index: 500;
  transform: translateY(105%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.traveler-sheet.ts-open {
  transform: translateY(0);
}
.ts-drag-handle {
  width: 40px; height: 4px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  margin: 0 auto 1.1rem;
}
.ts-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.ts-avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid rgba(180, 96, 64, 0.25);
  flex-shrink: 0;
  background: #E8D8CC;
}
.ts-avatar-placeholder {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #E8D8CC;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}
.ts-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #1C0E08;
  line-height: 1.1;
}
.ts-meta {
  font-size: 0.85rem;
  color: #7A5040;
  margin-top: 0.2rem;
}
.ts-bio {
  font-size: 0.88rem;
  color: #3C2018;
  line-height: 1.55;
  margin: 0 0 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ts-interests {
  font-size: 0.85rem;
  color: #3C2018;
  margin-bottom: 1.1rem;
}
.ts-interests strong { font-weight: 700; }
.ts-salam-btn {
  display: block;
  width: 100%;
  background: #D6336C;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.18s;
}
.ts-salam-btn:hover { background: #A05030; }
.ts-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 12, 4, 0.14);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ts-backdrop.ts-open {
  opacity: 1;
  pointer-events: auto;
}

/* -- Live Nearby drawer � white theme -- */
.live-nearby {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Flush to bottom nav bar � removes the 1.5rem gap from app-refresh-3.css */
  bottom: var(--nav-total-h) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.live-nearby .ln-handle { background: rgba(0, 0, 0, 0.15) !important; }
.live-nearby .ln-pill {
  background: rgba(214, 51, 108, 0.10) !important;
  color: #D6336C !important;
  border-color: rgba(214, 51, 108, 0.3) !important;
}
.live-nearby .ln-pill::before {
  background: #D6336C !important;
  box-shadow: 0 0 0 4px rgba(214, 51, 108, 0.2) !important;
}
.live-nearby .ln-row {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(0, 0, 0, 0.07) !important;
}
.live-nearby .ln-avatar {
  background: linear-gradient(135deg, #F0C8D8, #E8B0C8) !important;
  border-color: #D4787A !important;
  color: #8B1A40 !important;
}
.live-nearby .ln-name { color: #1C0E08 !important; }
.live-nearby .ln-sub  { color: #6B2040 !important; }
.live-nearby .ln-act {
  border-color: rgba(214, 51, 108, 0.45) !important;
  color: #D6336C !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0.35rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.live-nearby .ln-act-icon {
  width: 18px !important;
  height: 18px !important;
}
.live-nearby .ln-loading {
  text-align: center;
  padding: 1rem 0.5rem;
  color: #8B6B7A;
  font-size: 0.82rem;
}
.live-nearby .ln-dist {
  color: #8B6B7A;
  font-weight: 500;
}
.live-nearby .ln-avatar-img {
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* -- Map right-side controls: single fixed column -- */
.map-controls-right {
  position: fixed;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 410;          /* above live-nearby (405) */
  pointer-events: none;  /* pass through to map when controls aren't hovered */
}
.map-controls-right > * { pointer-events: auto; }

/* Zoom control inside the column � no more absolute positioning */
#panel-map .map-zoom-ctrl {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 12px;
  padding: 3px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  gap: 0.15rem;
}
#panel-map .map-zoom-btn {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
  color: #1a1a1a !important;
  backdrop-filter: none !important;
}
#panel-map .map-zoom-btn:hover  { background: #f5f5f5 !important; }
#panel-map .map-zoom-btn:active { background: #e8e8e8 !important; }

/* Location FAB inside the column */
#panel-map .map-controls-right .fab-secondary {
  order: -1 !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
  color: #1A0A14 !important;
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
}
#panel-map .map-controls-right .map-zoom-ctrl {
  order: 0 !important;
}
.fab-secondary svg { stroke: #6B2040 !important; }

/* FAB radial wrap inside the column � not fixed anymore */
.fab-radial-wrap {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  width: 52px !important;
  height: 52px !important;
}
.fab-radial-wrap .fab-toggle {
  position: absolute !important;
  inset: 0 !important;
}

/* FAB primary (+ create meetup) � terracotta */
.fab-primary {
  background: linear-gradient(135deg, #F06070 0%, #E05070 60%, #C04060 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(224, 80, 112, 0.40) !important;
  bottom: auto !important;
  right: auto !important;
}

/* -- FAB category items � premium SVG style, expand upward -- */
.fab-radial-item {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14) !important;
  width: 62px !important;
  height: 62px !important;
  margin-top: -31px !important;
  margin-left: -31px !important;
  border-radius: 14px !important;
  z-index: 415 !important;
}
.fab-radial-item.fri-custom {
  border-color: rgba(180, 96, 64, 0.35) !important;
}
.fri-icon {
  width: 22px !important;
  height: 22px !important;
  stroke: #6B2040 !important;
  flex-shrink: 0;
}
.fab-radial-item.fri-custom .fri-icon { stroke: #D6336C !important; }
.fab-radial-item .fri-label {
  font-size: 7.5px !important;
  font-weight: 700 !important;
  color: #7A5040 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.fab-radial-item.fri-custom .fri-label { color: #D6336C !important; }

/* Category items expand LEFT in a horizontal row */
.fab-radial-wrap.fab-open .fab-radial-item:nth-child(1) {
  transform: translate(-350px, 0px) scale(1) !important; transition-delay: 0.00s;
}
.fab-radial-wrap.fab-open .fab-radial-item:nth-child(2) {
  transform: translate(-280px, 0px) scale(1) !important; transition-delay: 0.04s;
}
.fab-radial-wrap.fab-open .fab-radial-item:nth-child(3) {
  transform: translate(-210px, 0px) scale(1) !important; transition-delay: 0.08s;
}
.fab-radial-wrap.fab-open .fab-radial-item:nth-child(4) {
  transform: translate(-140px, 0px) scale(1) !important; transition-delay: 0.12s;
}
.fab-radial-wrap.fab-open .fab-radial-item:nth-child(5) {
  transform: translate( -70px, 0px) scale(1) !important; transition-delay: 0.16s;
}

/* Submit buttons use logo pink */
#screen-login .btn-primary,
#screen-register .btn-primary,
#screen-forgot-password .btn-primary {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 20px rgba(224, 80, 112, 0.35) !important;
}
#screen-login .btn-primary:hover,
#screen-register .btn-primary:hover,
#screen-forgot-password .btn-primary:hover {
  background: linear-gradient(135deg, #F47080 0%, #E86278 50%, #D85570 100%) !important;
}

/* "Create an Account" outline button */
#screen-login .btn-outline {
  background: #fff !important;
  border-color: #E05070 !important;
  color: #E05070 !important;
}

/* Step progress bar */
#screen-register .step-fill {
  background: linear-gradient(90deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
}

/* Input fields � cream surface */
#screen-login .field input,
#screen-login .field select,
#screen-register .field input,
#screen-register .field select,
#screen-forgot-password .field input {
  background: #FFFFFF !important;
  border-color: rgba(184,96,74,0.2) !important;
  color: #2A1810 !important;
}
#screen-login .field input:focus,
#screen-register .field input:focus,
#screen-forgot-password .field input:focus {
  border-color: #B8604A !important;
  box-shadow: 0 0 0 3px rgba(184,96,74,0.14) !important;
}

/* Auth divider line */
#screen-login .auth-divider { color: #9A7060 !important; }
#screen-login .auth-divider::before,
#screen-login .auth-divider::after { background: rgba(184,96,74,0.2) !important; }

/* Hide the hero logo in body (replaced by the warm bg rings visual) */
#screen-login #authLogoHeroLogin,
#screen-register #authLogoHeroReg { display: none !important; }

/* Slide-up animation for auth screens */
#screen-login .auth-wrap,
#screen-register .auth-wrap,
#screen-forgot-password .auth-wrap {
  animation: scSheetReveal 0.55s cubic-bezier(0.22,1,0.36,1) both;
}


/* ----------------------------------------------
   HOME FEED + USER PROFILE VIEW + PREMIUM CARDS
   v=20260529.11
   ---------------------------------------------- */

/* -- Loading screen logo -- */
.app-loader-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  margin-top: 2rem;
  padding-left: 0.4rem;
  position: relative;
}
/* White glow circle behind loader logo — removed */
.app-loader-logo-wrap::before { display: none; }
.app-loader-logo-img {
  width: 300px;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.15));
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.app-loader-brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.06em;
  margin: 0.5rem 0 0.1rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
  white-space: nowrap;
}
.app-loader-tagline {
  font-size: 0.6rem;
  font-weight: 400;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}

/* -- Login / auth logo -- */
.auth-logo-img {
  width: 88px !important;
  height: auto !important;
  border-radius: 14px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Floating hero logo above the cream auth sheet */
.auth-hero-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Occupies the space above the cream sheet � sit in the blurred bg area */
  height: 12vh;
  min-height: 64px;
  z-index: 3;
  pointer-events: none;
}
.auth-hero-logo-img {
  width: min(120px, 28vw);
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35));
}

/* -- Hide system top-bar when user-profile panel active -- */
#screen-app:has(#panel-user-profile.active) .top-bar {
  display: none !important;
}

/* -- Caravan feed header -- */
.caravan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 20px 4px;
  background: #FAF7F2;
  flex-shrink: 0;
}
.caravan-head .ch-greet {
  font-size: 2rem;
  font-weight: 800;
  color: #1C0E08;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.caravan-head .ch-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  margin-top: 4px;
}
.caravan-head .ch-bell {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B2040;
  cursor: pointer;
}
.caravan-head .ch-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8e8e8;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  overflow: hidden;
  cursor: pointer;
}
.caravan-sub {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1C0E08;
  padding: 6px 20px 0;
  letter-spacing: -0.01em;
  background: #FAF7F2;
  flex-shrink: 0;
}

/* -- Feed tab pills: Following / Discover -- */
.caravan-feed-tabs {
  display: flex;
  gap: 8px;
  padding: 14px 20px 8px;
  background: #FAF7F2;
  flex-shrink: 0;
}
.cft-tab {
  flex: 1;
  padding: 10px 0;
  border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,0.08);
  background: #fff;
  color: #8B6B7A;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.cft-tab.cft-tab--active {
  background: #D6336C;
  border-color: #D6336C;
  color: #fff;
}

/* -- Premium post cards -- */
.sc-post-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  margin: 0 0 16px;
}
.sc-post-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sc-post-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sc-post-loc-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(180,80,40,0.92);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(4px);
}
.sc-post-loc-badge--top {
  position: static;
  display: inline-flex;
  margin: 12px 16px 0;
}
.sc-post-hero-actions {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
}
.sc-hero-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #6B2040;
}
.sc-post-body {
  padding: 14px 16px 12px;
}
.sc-post-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 10px;
}
.sc-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  overflow: hidden;
  flex-shrink: 0;
}
.sc-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sc-post-author-info { flex: 1; min-width: 0; }
.sc-post-author-name {
  display: block;
  font-weight: 700;
  color: #1C0E08;
  font-size: 0.95rem;
  line-height: 1.2;
}
.sc-post-author-handle { font-size: 0.78rem; color: #8B6B7A; }
.sc-post-time { font-size: 0.75rem; color: #8B6B7A; white-space: nowrap; flex-shrink: 0; }
.sc-post-text {
  font-size: 0.9rem;
  color: #3A2010;
  line-height: 1.65;
  margin: 0 0 12px;
}
.sc-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
  flex-wrap: wrap;
}
.sc-action-btn {
  flex: 0 0 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  color: #1a1a1a;
  font-size: 0 !important;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.sc-action-btn svg,
.sc-action-btn .like-heart {
  width: 18px;
  height: 18px;
  display: block;
}
.sc-action-btn .like-heart { margin: 0 !important; }
.sc-action-btn .like-count { display: none !important; }
.sc-action-btn:hover { background: rgba(0,0,0,0.04) !important; color: #D6336C !important; }
.sc-action-btn--liked { color: #E26A6A !important; }
.sc-action-btn--danger { color: #C0392B !important; }

.sc-action-btn .like-heart,
.sc-action-btn .like-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sc-follow-btn {
  padding: 5px 12px;
  border-radius: 20px;
  background: none;
  border: 1.5px solid rgba(214,51,108,0.3);
  color: #D6336C;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
  transition: all 0.15s;
}
.sc-follow-btn--active { background: #D6336C; color: #fff; border-color: #D6336C; }
.sc-vis-badge {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
  color: #8B6B7A;
}

/* -- User profile view panel -- */
#panel-user-profile {
  background: #ffffff !important;
}
.up-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  z-index: 20;
}
.up-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1C0E08;
  flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.up-topbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1C0E08;
  letter-spacing: -0.01em;
}
#panel-user-profile #userProfileContent {
  padding-top: 56px !important;
  padding-bottom: calc(var(--nav-total-h, 90px) + 2rem) !important;
}

/* Cover + body for user-profile view */
.up-cover-section {
  height: 180px;
  background: linear-gradient(150deg, #2D0A14 0%, #D4787A 50%, #F0B8C8 100%);
  flex-shrink: 0;
}
.up-body {
  background: #ffffff !important;
  border-radius: 28px 28px 0 0;
  margin-top: -28px;
  padding: 0 20px 24px;
  position: relative;
  min-height: 200px;
}
.up-avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e8e8e8;
  border: 4px solid #FAF7F2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
  overflow: hidden;
  margin: -40px 0 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.up-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.up-av-initials { font-size: 1.6rem; font-weight: 800; }
.up-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #1C0E08;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.up-username {
  font-size: 0.85rem;
  color: #8B6B7A;
  font-weight: 500;
  margin-bottom: 14px;
}
.up-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.up-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.up-stat-val { font-size: 1.15rem; font-weight: 800; color: #1C0E08; }
.up-stat-lbl { font-size: 0.72rem; color: #8B6B7A; font-weight: 500; }
.up-stat-sep { width: 1px; height: 28px; background: rgba(0,0,0,0.08); flex-shrink: 0; }
.up-action-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.up-action-btn {
  flex: 1;
  padding: 11px 10px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(214,51,108,0.28);
  color: #D6336C;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s;
  min-width: 80px;
}
.up-action-btn--gold { background: #D6336C; color: #fff; border-color: #D6336C; }
.up-action-btn--outline { border-color: rgba(214,51,108,0.5); }
.up-action-btn:disabled { opacity: 0.55; cursor: default; }
.up-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.up-posts-section { margin-top: 4px; }

/* ----------------------------------------------------------------------
   GLOBAL WARM CHROME
   Overrides the dark-navy top-bar / screen-app from app-refresh.css
   so the default (warm cream) theme looks correct on ALL panels.
   Blue/green share the same warm cream, so they inherit this too.
   Dark / light themes restore their own look immediately after.
   ---------------------------------------------------------------------- */

/* System top bar � white for primary app pages */
.top-bar, #screen-app > .top-bar, .top-bar.sticky-top {
  background: #ffffff !important;
  backdrop-filter: saturate(1.4) blur(20px) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(20px) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
}
.top-logo { color: #1C0E08 !important; }
.top-logo .gold, .top-logo > span { color: #D6336C !important; }
.top-title { color: #1C0E08 !important; }
#btnBack svg { stroke: #1A0A14 !important; }
.top-bar .btn-icon {
  color: #1C0E08 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.top-bar .btn-icon:hover { background: transparent !important; }
.top-bar .avatar-sm {
  border-color: #D6336C !important;
  background: #e8e8e8 !important;
}

/* Screen app background � warm cream */
#screen-app { background: #ffffff !important; }

/* -- Messages panel: fix dark search-row wrapper + icon btn backgrounds -- */
#panel-messages .chats-search-row {
  background: #EDE6DC !important;
  border: 1.5px solid rgba(214,51,108,0.2) !important;
}
#panel-messages .chats-icon-btn { background: transparent !important; }

/* -- Feed posts inside messages panel � white cards, warm text -- */
#panel-messages .feed-post-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
}
#panel-messages .feed-post-body h3  { color: #1C0E08 !important; }
#panel-messages .feed-post-meta     { color: #8B6B7A !important; }
#panel-messages .feed-post-author   { color: #8B6B7A !important; }
#panel-messages .feed-post-tag {
  background: rgba(214,51,108,0.1) !important;
  color: #8B4530 !important;
  border-color: rgba(214,51,108,0.25) !important;
}
#panel-messages .feed-action-btn         { color: #1a1a1a !important; }
#panel-messages .feed-action-btn svg     { stroke: #8B6B7A !important; }
#panel-messages .feed-action-btn:hover   { background: #F5EFE8 !important; color: #6B2040 !important; }
#panel-messages .feed-action-btn:hover svg { stroke: #6B2040 !important; }

/* ----------------------------------------------------------------------
   DARK THEME � restore fully dark chrome
   ---------------------------------------------------------------------- */
:root[data-theme="dark"] .top-bar,
:root[data-theme="dark"] #screen-app > .top-bar,
:root[data-theme="dark"] .top-bar.sticky-top {
  background: rgba(0,0,0,0.98) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 1px 16px rgba(0,0,0,0.6) !important;
}
:root[data-theme="dark"] .top-logo                  { color: #F0F4FF !important; }
:root[data-theme="dark"] .top-logo .gold,
:root[data-theme="dark"] .top-logo > span           { color: var(--gold) !important; }
:root[data-theme="dark"] .top-title                 { color: #F0F4FF !important; }
:root[data-theme="dark"] #btnBack svg               { stroke: #F0F4FF !important; }
:root[data-theme="dark"] .top-bar .btn-icon         { color: rgba(240,244,255,0.7) !important; }
:root[data-theme="dark"] .top-bar .avatar-sm        { background: linear-gradient(135deg, #213168, #0F1A42) !important; border-color: var(--gold) !important; }
:root[data-theme="dark"] #screen-app                { background: var(--bg) !important; }
:root[data-theme="dark"] .caravan-head              { background: var(--surface) !important; }
:root[data-theme="dark"] .caravan-head .ch-greet    { color: var(--text) !important; }
:root[data-theme="dark"] .caravan-head .ch-sub      { color: var(--muted) !important; }
:root[data-theme="dark"] .circles-panel-head        { background: var(--surface) !important; }
:root[data-theme="dark"] .circles-panel-title       { color: var(--text) !important; }
:root[data-theme="dark"] .bottom-nav {
  background: rgba(10,10,10,0.98) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .nav-btn                   { color: #1a1a1a !important; }
:root[data-theme="dark"] .nav-btn svg               { stroke: #1a1a1a !important; }
:root[data-theme="dark"] .nav-btn.active            { color: #E05070 !important; }
:root[data-theme="dark"] .nav-btn.active svg        { stroke: #E05070 !important; }
:root[data-theme="dark"] .nav-btn.active::before    { background: rgba(255, 255, 255, 0.08) !important; }
:root[data-theme="dark"] #panel-messages .chats-search-row  { background: var(--surface) !important; border-color: var(--border) !important; }
:root[data-theme="dark"] #panel-messages .feed-post-card    { background: var(--card) !important; border-color: var(--border) !important; }
:root[data-theme="dark"] #panel-messages .feed-post-body h3 { color: var(--text) !important; }
:root[data-theme="dark"] #panel-messages .feed-post-meta    { color: var(--muted) !important; }
:root[data-theme="dark"] #panel-messages .feed-action-btn   { color: var(--muted) !important; }
:root[data-theme="dark"] #panel-messages .feed-action-btn svg { stroke: var(--muted) !important; }
/* sc-post-card dark override (card is hardcoded #fff in base rule) */
:root[data-theme="dark"] .sc-post-card {
  background: var(--card) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}
:root[data-theme="dark"] .sc-post-body { color: var(--text) !important; }
:root[data-theme="dark"] .sc-post-body p,
:root[data-theme="dark"] .sc-post-body h3,
:root[data-theme="dark"] .sc-post-body h4 { color: var(--text) !important; }
:root[data-theme="dark"] .sc-post-author-name { color: var(--text) !important; }
:root[data-theme="dark"] .sc-post-meta { color: var(--muted) !important; }

/* circle-detail top bar for dark */
:root[data-theme="dark"] #screen-app:has(#panel-circle-detail.active) .top-bar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] #screen-app:has(#panel-circle-detail.active) .top-bar #btnBack svg { stroke: var(--text) !important; }
:root[data-theme="dark"] #screen-app:has(#panel-circle-detail.active) .top-bar #topTitle    { color: var(--text) !important; }

/* ----------------------------------------------------------------------
   LIGHT THEME � clean white chrome
   ---------------------------------------------------------------------- */
:root[data-theme="light"] .top-bar,
:root[data-theme="light"] #screen-app > .top-bar {
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
:root[data-theme="light"] .top-logo      { color: var(--text) !important; }
:root[data-theme="light"] .top-logo .gold, :root[data-theme="light"] .top-logo > span { color: var(--primary) !important; }
:root[data-theme="light"] .top-title     { color: var(--text) !important; }
:root[data-theme="light"] #btnBack svg   { stroke: var(--text) !important; }
:root[data-theme="light"] .top-bar .btn-icon { color: #1C0E08 !important; }
:root[data-theme="light"] #screen-app    { background: var(--bg) !important; }

/* ----------------------------------------------------------------------
   BLUE THEME � blue nav accents, warm cream panels
   ---------------------------------------------------------------------- */
:root[data-theme="blue"] .nav-btn.active             { color: #E05070 !important; }
:root[data-theme="blue"] .nav-btn.active svg         { stroke: #E05070 !important; }
:root[data-theme="blue"] .nav-btn.active::before     { background: rgba(255, 255, 255, 0.9) !important; }
:root[data-theme="blue"] #screen-login .btn-primary,
:root[data-theme="blue"] #screen-register .btn-primary,
:root[data-theme="blue"] #screen-forgot-password .btn-primary {
  background: #2563EB !important;
  box-shadow: 0 6px 20px rgba(37,99,235,0.32) !important;
}
:root[data-theme="blue"] #screen-login .btn-primary:hover,
:root[data-theme="blue"] #screen-register .btn-primary:hover { background: #3B82F6 !important; }
:root[data-theme="blue"] .circles-fab-wrap .cfab-main {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
  box-shadow: 0 12px 32px rgba(224, 80, 112, 0.40) !important;
}
:root[data-theme="blue"] .prof-action-btn { border-color: rgba(37,99,235,0.25) !important; color: #2563EB !important; }
:root[data-theme="blue"] .circles-fab { background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important; }

/* -- Search & location dropdowns � theme-aware ------------------------------ */
:root:not([data-theme="dark"]) .map-search-results,
:root:not([data-theme="dark"]) .location-search-results {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
:root:not([data-theme="dark"]) .map-search-result,
:root:not([data-theme="dark"]) .location-search-result {
  color: var(--text) !important;
  border-bottom-color: var(--border) !important;
}
:root:not([data-theme="dark"]) .map-search-result:hover,
:root:not([data-theme="dark"]) .location-search-result:hover {
  background: var(--surface) !important;
}
:root:not([data-theme="dark"]) .location-search-result-title,
:root:not([data-theme="dark"]) .map-search-result-title { color: var(--text) !important; }
:root:not([data-theme="dark"]) .map-search-result-sub { color: var(--muted) !important; }

/* ----------------------------------------------------------------------
   GREEN THEME � green nav accents, warm cream panels
   ---------------------------------------------------------------------- */
:root[data-theme="green"] .nav-btn.active             { color: #E05070 !important; }
:root[data-theme="green"] .nav-btn.active svg         { stroke: #E05070 !important; }
:root[data-theme="green"] .nav-btn.active::before     { background: rgba(255, 255, 255, 0.9) !important; }
:root[data-theme="green"] #screen-login .btn-primary,
:root[data-theme="green"] #screen-register .btn-primary,
:root[data-theme="green"] #screen-forgot-password .btn-primary {
  background: #059669 !important;
  box-shadow: 0 6px 20px rgba(5,150,105,0.32) !important;
}
:root[data-theme="green"] #screen-login .btn-primary:hover,
:root[data-theme="green"] #screen-register .btn-primary:hover { background: #10B981 !important; }
:root[data-theme="green"] .circles-fab-wrap .cfab-main {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
  box-shadow: 0 12px 32px rgba(224, 80, 112, 0.40) !important;
}
:root[data-theme="green"] .prof-action-btn { border-color: rgba(5,150,105,0.25) !important; color: #059669 !important; }
:root[data-theme="green"] .circles-fab { background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important; }

/* ----------------------------------------------------------------------
   LIGHT-THEME HOVER STATES
   Elements that use rgba(255,255,255,0.06-0.08) hover backgrounds look
   invisible on cream/white surfaces. Scope those to dark-only and give
   light/default/blue/green a dark-translucent hover instead.
   ---------------------------------------------------------------------- */

/* Chat topbar buttons */
:root:not([data-theme="dark"]) .chat-topbar-back:hover          { background: rgba(0,0,0,0.06) !important; }
:root:not([data-theme="dark"]) .chat-topbar-icon-btn:hover      { background: rgba(0,0,0,0.06) !important; }
:root:not([data-theme="dark"]) .chat-topbar-info:active         { background: rgba(0,0,0,0.04) !important; }
:root:not([data-theme="dark"]) .chat-search-close:hover         { background: rgba(0,0,0,0.06) !important; color: var(--text) !important; }
:root:not([data-theme="dark"]) .chat-font-size-btn:hover:not(.chat-font-size-active) { background: rgba(0,0,0,0.06) !important; }
:root:not([data-theme="dark"]) .chat-attach-btn:hover           { background: rgba(0,0,0,0.06) !important; }
:root:not([data-theme="dark"]) .chat-conv-menu-item:hover       { background: rgba(0,0,0,0.05) !important; }

/* pp-wizard textarea (faint white-translucent ? cream surface) */
:root:not([data-theme="dark"]) .pp-wizard textarea {
  background: rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--text) !important;
}
:root:not([data-theme="dark"]) .pp-wizard {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* -- DEFAULT theme: ensure #homeComposePanel text is readable -- */
:root[data-theme="default"] #homeComposePanel { color: #1C0E08 !important; }
:root[data-theme="default"] .feed-create-prompt { color: #8B6B7A !important; }

/* Dark theme: keep white-translucent hovers */
:root[data-theme="dark"] .chat-topbar-back:hover         { background: rgba(255,255,255,0.08) !important; }
:root[data-theme="dark"] .chat-topbar-icon-btn:hover     { background: rgba(255,255,255,0.08) !important; }
:root[data-theme="dark"] .chat-topbar-info:active        { background: rgba(255,255,255,0.05) !important; }
:root[data-theme="dark"] .chat-search-close:hover        { background: rgba(255,255,255,0.08) !important; }
:root[data-theme="dark"] .chat-font-size-btn:hover:not(.chat-font-size-active) { background: rgba(255,255,255,0.08) !important; }
:root[data-theme="dark"] .chat-attach-btn:hover          { background: rgba(255,255,255,0.08) !important; }
:root[data-theme="dark"] .chat-conv-menu-item:hover      { background: rgba(255,255,255,0.06) !important; }

/* ----------------------------------------------------------------------
   THEME-AWARE PANELS � notifications, friend-requests, contacts add
   Ensures warm-cream background + correct text in all non-dark themes.
   ---------------------------------------------------------------------- */

/* Notifications panel */
:root:not([data-theme="dark"]) #panel-notifications {
  background: var(--bg) !important;
  color: var(--text) !important;
}
:root:not([data-theme="dark"]) #panel-notifications .section-head h2 { color: var(--text) !important; }
:root:not([data-theme="dark"]) #panel-notifications .link-btn         { color: var(--primary) !important; }
:root:not([data-theme="dark"]) #panel-notifications .notif-card,
:root:not([data-theme="dark"]) #panel-notifications .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
:root:not([data-theme="dark"]) #panel-notifications .notif-card-inner { background: var(--card) !important; }
:root:not([data-theme="dark"]) #panel-notifications .card-title       { color: var(--text) !important; }
:root:not([data-theme="dark"]) #panel-notifications .card-sub,
:root:not([data-theme="dark"]) #panel-notifications .card-time        { color: var(--muted) !important; }
:root:not([data-theme="dark"]) #panel-notifications .card-icon {
  background: rgba(214,51,108,0.1) !important;
  border-color: rgba(214,51,108,0.2) !important;
}

/* Friend requests panel */
:root:not([data-theme="dark"]) #panel-friend-requests {
  background: var(--bg) !important;
  color: var(--text) !important;
}
:root:not([data-theme="dark"]) #panel-friend-requests .section-head h2 { color: var(--text) !important; }
:root:not([data-theme="dark"]) #panel-friend-requests .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
:root:not([data-theme="dark"]) #panel-friend-requests .card-title       { color: var(--text) !important; }
:root:not([data-theme="dark"]) #panel-friend-requests .card-sub,
:root:not([data-theme="dark"]) #panel-friend-requests .card-time        { color: var(--muted) !important; }
:root:not([data-theme="dark"]) #panel-friend-requests .card-icon {
  background: rgba(214,51,108,0.1) !important;
  border-color: rgba(214,51,108,0.2) !important;
}
:root:not([data-theme="dark"]) #panel-friend-requests .text-muted       { color: var(--muted) !important; }

/* Contacts add search area inside messages panel */
:root:not([data-theme="dark"]) #chatsAddContact {
  background: var(--bg) !important;
}
:root:not([data-theme="dark"]) #chatsContactSearchInput {
  background: var(--card) !important;
  border-color: rgba(214,51,108,0.25) !important;
  color: var(--text) !important;
}
:root:not([data-theme="dark"]) #chatsContactSearchInput::placeholder { color: var(--muted) !important; }
:root:not([data-theme="dark"]) #chatsContactResults .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
:root:not([data-theme="dark"]) #chatsContactResults .card-title { color: var(--text) !important; }
:root:not([data-theme="dark"]) #chatsContactResults .card-sub   { color: var(--muted) !important; }

/* -- Fix .card press state � was hardcoded navy (#222840) -- */
:root:not([data-theme="dark"]) .card:active { background: var(--surface) !important; }
:root[data-theme="dark"]       .card:active { background: #222840 !important; }

/* -- card-icon: use primary tint in non-dark themes -- */
:root:not([data-theme="dark"]) .card-icon {
  background: rgba(214,51,108,0.1) !important;
  border-color: rgba(214,51,108,0.2) !important;
}

/* -- Circle detail cover: remove top padding so cover image fills from top -- */
#panel-circle-detail .panel-scroll { padding-top: 0 !important; }

/* ----------------------------------------------------------------------
   PROFILE ACTION BUTTONS � dark theme support
   The buttons have hardcoded #fff background which is jarring on dark navy.
   ---------------------------------------------------------------------- */
:root[data-theme="dark"] .prof-action-btn {
  background: var(--card) !important;
  border-color: rgba(12,168,168,0.30) !important;
  color: #0CA8A8 !important;
}
:root[data-theme="dark"] .prof-action-btn:hover { background: rgba(12,168,168,0.08) !important; }

/* -- Profile settings menu: dark-theme override -- */
:root[data-theme="dark"] .profile-settings-menu {
  background: #1A3550 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
:root[data-theme="dark"] .profile-settings-menu button { color: #e7eef6 !important; }
:root[data-theme="dark"] .profile-settings-menu button:hover { background: rgba(255,255,255,0.07) !important; }
:root[data-theme="dark"] .psm-divider { background: rgba(255,255,255,0.08) !important; }

/* ----------------------------------------------------------------------
   ADMIN PANEL � text contrast fix for default (warm cream) theme.
   var(--muted) in warm cream = #8B6B7A on white card = ~2.9:1 (too low).
   Boost to #6B4030 (�4.8:1) for legibility.
   ---------------------------------------------------------------------- */
:root[data-theme="default"] .admin-user-meta,
:root[data-theme="default"] .admin-stat .l,
:root[data-theme="default"] .admin-audit-row { color: #6B4030 !important; }
:root[data-theme="default"] .admin-tab:not(.active) { color: #7A4A30 !important; }
:root[data-theme="default"] .admin-tab.active { color: var(--primary) !important; }
:root[data-theme="default"] .admin-user-name { color: #1C0E08 !important; }
:root[data-theme="default"] .admin-setting-title { color: #1C0E08 !important; }
:root[data-theme="default"] .admin-setting-sub { color: #7A4A30 !important; }
:root[data-theme="default"] .admin-filters input,
:root[data-theme="default"] .admin-filters select {
  background: #FFFFFF !important;
  color: #1C0E08 !important;
  border-color: rgba(214,51,108,0.2) !important;
}

/* Edit profile � ensure label text is readable in default theme */
:root[data-theme="default"] #panel-edit-profile .field label { color: #7A4A30 !important; }
:root[data-theme="default"] #panel-edit-profile .ep-panel-header h2 { color: #1C0E08 !important; }

/* ----------------------------------------------------------------------
   CENTRED FAB CATEGORY PICKER
   Replaces the old corner-radial with a centred circle overlay.
   5 categories arranged radially (72� apart) around screen centre.
   ---------------------------------------------------------------------- */
.fab-center-overlay {
  position: fixed; inset: 0; z-index: 398;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background 0.25s ease;
}
.fab-center-overlay.fcm-open {
  background: rgba(0,0,0,0.60);
  pointer-events: auto;
}

/* Container that is the pivot point for the 5 items */
.fab-center-ring {
  position: relative; width: 0; height: 0;
  pointer-events: none;
}

/* Each item starts collapsed at the pivot (scale 0) */
.fcr-item {
  position: absolute;
  width: 76px; height: 76px;
  top: -38px; left: -38px;        /* centred on the pivot */
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
  cursor: pointer; pointer-events: auto;
  transform: scale(0); opacity: 0;
  transition: transform 0.36s cubic-bezier(0.34,1.56,0.64,1),
              opacity   0.22s ease;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="default"] .fcr-item,
:root[data-theme="blue"]    .fcr-item,
:root[data-theme="green"]   .fcr-item { background: #FFFFFF !important; border-color: rgba(214,51,108,0.22) !important; }
:root[data-theme="dark"]    .fcr-item { background: #1A3550 !important; border-color: rgba(255,255,255,0.12) !important; }

.fcr-emoji { font-size: 26px; line-height: 1; }
.fcr-label {
  font-size: 9px; font-weight: 700;
  color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1;
}
:root[data-theme="default"] .fcr-label { color: #8B6B7A !important; }
:root[data-theme="dark"]    .fcr-label { color: #94a3b8 !important; }

.fcr-item:active { filter: brightness(0.9); transform: scale(0.94) !important; }

/* Item 5 (Other / custom) gets gold accent */
.fcr-item-custom { border-color: var(--gold) !important; }
.fcr-item-custom .fcr-label { color: var(--gold) !important; }

/*
  5 items at 72� each, starting from top (-90�), r = 125px:
  1: 270�  ? translate(0,     -125px)
  2: 342�  ? translate(119px, -39px)
  3:  54�  ? translate(74px,   101px)
  4: 126�  ? translate(-74px,  101px)
  5: 198�  ? translate(-119px,-39px)
*/
.fab-center-overlay.fcm-open .fcr-item-1 { transform: translate(0px,    -125px) scale(1); opacity: 1; transition-delay: 0.00s; }
.fab-center-overlay.fcm-open .fcr-item-2 { transform: translate(119px,  -39px)  scale(1); opacity: 1; transition-delay: 0.05s; }
.fab-center-overlay.fcm-open .fcr-item-3 { transform: translate(74px,   101px)  scale(1); opacity: 1; transition-delay: 0.10s; }
.fab-center-overlay.fcm-open .fcr-item-4 { transform: translate(-74px,  101px)  scale(1); opacity: 1; transition-delay: 0.15s; }
.fab-center-overlay.fcm-open .fcr-item-5 { transform: translate(-119px, -39px)  scale(1); opacity: 1; transition-delay: 0.20s; }

/* Closing: reverse � items collapse back to centre */
.fab-center-overlay:not(.fcm-open) .fcr-item { transform: scale(0); opacity: 0; }

/* FAB toggle button rotates �45� when overlay is open */
.fab-toggle.fab-is-open { transform: rotate(45deg) scale(1.07); }

/* Hide the old corner radial items (keep only the toggle button) */
.fab-radial-item { display: none !important; }

/* -------------------------------------------------------------------
   BATCH UPDATE v20260530 ? Live Nearby ? Messages ? Chat ? Trip Planner
   ? Login Backgrounds ? Theme ? Map Circles
-------------------------------------------------------------------- */

/* -- Live Nearby: only pill visible when collapsed, flush with nav -- */
.live-nearby {
  bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: calc(var(--nav-total-h, 68px) + 0.5rem) !important;
}
/* Collapsed: show only handle + pill (~52px total) */
.live-nearby.collapsed {
  transform: translateY(calc(100% - 52px)) !important;
}
/* Hide the list entirely when collapsed so "Finding travelers..." never peeks */
.live-nearby.collapsed .ln-list { display: none !important; }

/* -- WhatsApp-style conversation list -- */
#conversationsList { background: #ffffff !important; }
#conversationsList .conversation-item {
  border-radius: 16px !important;
  border-bottom: none !important;
  background: #ffffff !important;
  padding: 0.95rem 1rem !important;
  margin: 0.35rem 0 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
}
#conversationsList .conversation-item:hover { background: #ffffff !important; }
#conversationsList.card-list { gap: 0.35rem !important; padding: 0.5rem !important; margin-top: 0 !important; }
/* Time + tick on same row */
.conv-time-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
/* Delivery tick */
.conv-tick {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.6;
}
.conv-tick-read { color: #34B7F1 !important; opacity: 1 !important; }

/* -- Chat background image -- */
.chat-messages {
  background-color: #ffffff !important;
  background-image: none !important;
  background-size: initial !important;
  background-position: initial !important;
  background-attachment: initial !important;
  position: relative;
}
.chat-messages::before {
  background: transparent !important;
}
/* Tint overlay adapts to theme */
.chat-messages::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme="default"] .chat-messages::before { background: rgba(250,247,242,0.84); }
:root[data-theme="blue"]    .chat-messages::before { background: rgba(230,240,255,0.84); }
:root[data-theme="green"]   .chat-messages::before { background: rgba(230,248,238,0.84); }
:root[data-theme="dark"]    .chat-messages::before { background: rgba(10,24,24,0.88); }
:root[data-theme="light"]   .chat-messages::before { background: rgba(245,248,255,0.84); }
/* Ensure message bubbles sit above tint */
.chat-messages > * { position: relative; z-index: 1; }

/* -- Login & splash: rotating background controlled by JS -- */
.sc-auth-bg-slide {
  position: fixed; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  transition: opacity 1.2s ease;
  filter: blur(2px) brightness(0.85);
  transform: scale(1.05);
  pointer-events: none;
}
#screen-splash .sc-auth-bg-slide { filter: none; transform: none; }
#screen-splash .sc-auth-bg-slide::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(155,75,45,0.72);
  mix-blend-mode: multiply;
}

/* -- Create Meetup heading visibility in default theme -- */
:root[data-theme="default"] #panel-create-meetup h2,
:root[data-theme="default"] #panel-create-meetup .panel-head h2 {
  color: var(--text, #1C0E08);
  opacity: 1;
}

/* -- Map: Circles filter -- */
.filter-pill[data-layer="circles"] { order: 3; }
.filter-pill[data-layer="all"] { order: 0; }

/* -- Map controls z-index: ensure FAB center overlay above location button -- */
.fab-center-overlay { z-index: 4000 !important; }
.map-controls-right { z-index: 399 !important; }

/* -- Trip Planner Modal -- */
.tp-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.58);
  display: flex; align-items: flex-end; justify-content: center;
  animation: tpFadeIn 0.22s ease;
}
.tp-modal.hidden { display: none; }
@keyframes tpFadeIn { from { opacity: 0; } to { opacity: 1; } }

.tp-sheet {
  background: var(--card, #fff);
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 500px;
  padding: 1.4rem 1.4rem calc(2rem + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1rem;
  animation: tpSlideUp 0.3s cubic-bezier(0.22,1,0.36,1);
}
@keyframes tpSlideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.tp-header {
  display: flex; align-items: center; justify-content: space-between;
}
.tp-back-btn, .tp-close-btn {
  background: none; border: none; font-size: 1.3rem; cursor: pointer;
  color: var(--muted); width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.tp-back-btn:hover, .tp-close-btn:hover { background: var(--surface); }
.tp-step-dots { display: flex; gap: 5px; align-items: center; }
.tp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border); transition: all 0.2s; }
.tp-dot-active { width: 20px; border-radius: 3px; background: var(--primary); }

.tp-body {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0.4rem;
}
.tp-q-icon { font-size: 2.4rem; line-height: 1; }
.tp-q-title { font-size: 1.2rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.tp-q-sub { font-size: 0.85rem; color: var(--muted); margin: 0; }

.tp-chips {
  display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center;
  margin-top: 0.6rem; width: 100%;
  max-height: 46vh; overflow-y: auto;
}
.tp-chip {
  display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 0.65rem 0.8rem;
  min-width: 76px; flex: 0 1 calc(33.3% - 0.55rem);
  cursor: pointer; transition: all 0.15s; color: var(--text);
  font-family: inherit;
}
.tp-chip:hover { border-color: var(--primary); }
.tp-chip-selected {
  border-color: var(--primary) !important;
  background: rgba(var(--primary-rgb, 184 96 64) / 0.12) !important;
  color: var(--primary) !important;
}
.tp-chip-emoji { font-size: 1.45rem; }
.tp-chip-label { font-size: 0.72rem; font-weight: 600; text-align: center; line-height: 1.2; }

.tp-footer {
  display: flex; gap: 0.7rem; align-items: center; margin-top: 0.25rem; flex-shrink: 0;
}
.tp-skip-btn {
  background: none; border: none; color: var(--muted);
  font-size: 0.88rem; cursor: pointer; padding: 0.5rem 0.75rem;
  border-radius: 8px; font-family: inherit;
}
.tp-skip-btn:hover { background: var(--surface); }
.tp-next-btn {
  flex: 1; background: var(--primary); color: #fff;
  border: none; border-radius: 14px;
  padding: 0.9rem 1.5rem; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.2s; font-family: inherit;
}
.tp-next-btn:disabled { opacity: 0.4; cursor: default; }
.tp-next-btn:not(:disabled):hover { opacity: 0.9; }

.tp-section-label {
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0.6rem 0 0.3rem; text-align: left; width: 100%;
}
.tp-result-card {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 0.6rem 0.8rem;
  cursor: pointer; width: 100%; transition: background 0.15s; text-align: left;
}
.tp-result-card:hover { background: var(--card); }
.tp-result-img {
  width: 46px; height: 46px; border-radius: 11px;
  background-size: cover; background-position: center;
  flex-shrink: 0; background-color: var(--border);
}
.tp-result-img-meetup {
  background: linear-gradient(135deg, var(--primary), #E4956A);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.tp-result-name { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.tp-result-sub { font-size: 0.74rem; color: var(--muted); }
.tp-loading { display: flex; justify-content: center; padding: 2.5rem; }
.tp-empty { padding: 1.5rem 0; color: var(--muted); font-size: 0.88rem; text-align: center; width: 100%; }

/* -- Theme: blue primary-rgb -- */
:root[data-theme="blue"]  { --primary-rgb: 37 99 235; }
:root[data-theme="green"] { --primary-rgb: 5 150 105; }
:root[data-theme="dark"]  { --primary-rgb: 12 168 168; }
:root[data-theme="default"] { --primary-rgb: 184 96 64; }

/* -- Spinner ring (reusable) -- */
.spinner-ring {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  animation: spinRing 0.75s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------
   DISCOVER HOME PAGE � full redesign matching the screenshot
   ------------------------------------------------------------------- */

/* Container: no extra padding, stretches under the panel-scroll */
.discover-home {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* -- Hero / Location bar ---------------------------------------- */
.disc-hero {
  position: relative;
  background: var(--surface, #FAF7F2);
  padding: 14px 14px 10px;
  min-height: 60px;
}
.disc-hero-overlay { display: none; }
.disc-hero-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
}
/* hero brand block */
.disc-hero-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
}
.disc-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.disc-hero-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.disc-hero-appname {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text, #1c1008);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.disc-hero-tagline {
  font-size: 0.65rem;
  color: var(--muted, #8B7355);
  font-weight: 400;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
[data-theme="dark"] .disc-hero-appname { color: #f0e8d8; }
[data-theme="dark"] .disc-hero-tagline { color: rgba(240,232,216,0.6); }
/* hidden legacy location / weather */
.disc-location-btn { display: none !important; }
.disc-weather { display: none !important; }
.disc-hero-actions {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.disc-hero-btn {
  position: relative;
  background: var(--surface2, #f0e9e4);
  border: 1px solid var(--border, rgba(214,51,108,0.15));
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text, #1c1008); cursor: pointer;
}
[data-theme="dark"] .disc-hero-btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); color: #f0e8d8; }
.disc-hero-btn:hover { background: var(--surface3, #e8ddd6); }
#panel-home .disc-hero-btn,
.discover-home .disc-hero-btn {
  color: #1C0E08 !important;
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.12) !important;
}
#panel-home .disc-hero-btn:hover,
.discover-home .disc-hero-btn:hover { background: #F8F8F8 !important; }
#panel-home .disc-hero-btn svg,
.discover-home .disc-hero-btn svg { stroke: #1C0E08 !important; filter: none !important; }
.disc-notif-dot {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px;
  background: #EF4444; border-radius: 50%;
  border: 1.5px solid #fff;
}
.disc-notif-dot.hidden { display: none !important; }

/* -- Sections spacing ------------------------------------------- */
.disc-section {
  background: var(--surface, #fff);
  padding: 12px 14px;
  margin: 0 10px 10px;
  border-radius: 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  /* No overflow:hidden here � stories section needs rings to be unclipped */
}
[data-theme="dark"] .disc-section {
  background: var(--surface, #111827);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* -- Create post card ------------------------------------------- */
.disc-create-wrap {
  padding: 0;
  margin: 0 10px 4px;
  border-radius: 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  background: var(--surface, #fff);
  overflow: hidden;
}
[data-theme="dark"] .disc-create-wrap { background: var(--surface, #111827); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.disc-create-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2, #f8f4f0);
  border: 1px solid var(--border, rgba(214,51,108,0.15));
  border-radius: 24px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
[data-theme="dark"] .disc-create-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
}
.disc-create-card:hover { background: var(--surface3, #f0e9e4); }
[data-theme="dark"] .disc-create-card:hover { background: rgba(255,255,255,0.12); }
.disc-create-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary, #D6336C);
  color: #fff; font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; user-select: none;
}
.disc-create-prompt {
  color: var(--muted, #a08070);
  font-size: 0.9rem;
  flex: 1; user-select: none;
}
[data-theme="dark"] .disc-create-prompt { color: rgba(255,255,255,0.45); }
.disc-create-types {
  display: flex; align-items: center; justify-content: space-around;
  padding: 10px 14px 12px;
  background: var(--surface, #fff);
  border-top: 1px solid var(--border, rgba(0,0,0,0.06));
}
[data-theme="dark"] .disc-create-types { border-top-color: rgba(255,255,255,0.07); }
.disc-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--text, #2a1408);
  font-size: 0.72rem; font-weight: 500;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background 0.12s;
}
[data-theme="dark"] .disc-type-btn { color: rgba(255,255,255,0.85); }
.disc-type-btn:hover { background: var(--surface2, #f0e9e4); }
[data-theme="dark"] .disc-type-btn:hover { background: rgba(255,255,255,0.1); }
.dct-icon {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dct-pink   { background: rgba(236,72,153,0.15); color: #EC4899; }
.dct-orange { background: rgba(249,115,22,0.15); color: #F97316; }
.dct-purple { background: rgba(139,92,246,0.15); color: #8B5CF6; }
.dct-blue   { background: rgba(59,130,246,0.15); color: #3B82F6; }
[data-theme="dark"] .dct-pink   { background: rgba(236,72,153,0.2); }
[data-theme="dark"] .dct-orange { background: rgba(249,115,22,0.2); }
[data-theme="dark"] .dct-purple { background: rgba(139,92,246,0.2); }
[data-theme="dark"] .dct-blue   { background: rgba(59,130,246,0.2); }

/* -- Quick actions grid ----------------------------------------- */
.disc-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface, #fff);
}
[data-theme="dark"] .disc-actions-grid { background: var(--surface, #111827); }
.dag-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface2, #faf5f2);
  border: 1px solid var(--border, rgba(0,0,0,0.06));
  border-radius: 14px;
  padding: 12px 8px 10px;
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--text, #2a1408);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.12s, box-shadow 0.12s;
}
[data-theme="dark"] .dag-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.9);
}
.dag-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
[data-theme="dark"] .dag-btn:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.35); }
.dag-btn:active { transform: scale(0.96); }
.dag-icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.dag-pink   { background: linear-gradient(135deg,#F472B6,#EC4899); color: #fff; }
.dag-orange { background: linear-gradient(135deg,#FB923C,#F97316); color: #fff; }
.dag-purple { background: linear-gradient(135deg,#A78BFA,#8B5CF6); color: #fff; }
.dag-blue   { background: linear-gradient(135deg,#60A5FA,#3B82F6); color: #fff; }
.dag-green  { background: linear-gradient(135deg,#34D399,#059669); color: #fff; }
.dag-dark   { background: linear-gradient(135deg,#6B7280,#374151); color: #fff; }
[data-theme="default"] .dag-dark { background: linear-gradient(135deg,#C8956A,#D6336C); }
.dag-label { font-size: 0.7rem; font-weight: 600; line-height: 1.2; }

/* -- Stories row ------------------------------------------------ */
.disc-stories-wrap {
  padding: 12px 0 12px;
  background: var(--surface, #fff);
  /* Note: overflow must NOT be hidden � rings extend beyond padding and clip otherwise */
}
[data-theme="dark"] .disc-stories-wrap { background: var(--surface, #111827); }
:root[data-theme="mixed"] .disc-stories-wrap,
:root[data-theme="mixed"] #feedList.feed-tab-list,
:root[data-theme="mixed"] .disc-card,
:root[data-theme="mixed"] .disc-create-wrap,
:root[data-theme="mixed"] .disc-create-card,
:root[data-theme="mixed"] .disc-section {
  background: #ffffff !important;
}
:root.hide-safar-moments .disc-stories-wrap,
:root.hide-safar-moments .disc-stories-scroll {
  display: none !important;
}
:root[data-theme="mixed"] .disc-card {
  color: var(--text, #111827) !important;
}
:root[data-theme="mixed"] .disc-hero,
:root[data-theme="mixed"] #panel-messages .panel-scroll.disc-feed-active,
:root[data-theme="mixed"] .disc-feed-active .disc-section,
:root[data-theme="mixed"] .disc-feed-active .disc-feed-tabs {
  background: #ffffff !important;
  color: #1C0E08 !important;
}
:root[data-theme="mixed"] .disc-hero-btn {
  color: #1C0E08 !important;
}
.disc-stories-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}
.disc-stories-title {
  font-size: 0.88rem; font-weight: 700; color: var(--text, #2a1408);
}
[data-theme="dark"] .disc-stories-title { color: rgba(255,255,255,0.9); }
.disc-stories-all {
  background: none; border: none; cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  color: var(--primary, #D6336C);
}
.disc-stories-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: visible;
  padding: 4px 4px 8px;
  scrollbar-width: none;
}
.disc-stories-scroll::-webkit-scrollbar { display: none; }
.disc-story {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-size: 0.68rem; color: var(--text-muted, #a08070);
  font-weight: 500; width: 64px;
}
[data-theme="dark"] .disc-story { color: rgba(255,255,255,0.65); }
.disc-story-ring {
  width: 56px; height: 56px; border-radius: 50%;
  padding: 2.5px;
  display: flex; align-items: center; justify-content: center;
}
.disc-ring-unseen {
  background: var(--primary, #B8604A);
}
:root[data-theme="blue"]  .disc-ring-unseen { background: #2563EB; }
:root[data-theme="green"] .disc-ring-unseen { background: #059669; }
:root[data-theme="dark"]  .disc-ring-unseen { background: var(--primary, #0CA8A8); }
.disc-ring-add {
  background: var(--border, rgba(214,51,108,0.25));
  border: 2px dashed var(--primary, #D6336C);
}
.disc-story-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--surface2, #f0e9e4);
  border: 2.5px solid var(--surface, #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
  color: var(--primary, #D6336C);
  overflow: hidden;
}
[data-theme="dark"] .disc-story-inner {
  background: var(--surface2, #1f2937);
  border-color: var(--surface, #111827);
  color: var(--primary, #0CA8A8);
}
.disc-story-add .disc-story-inner {
  background: var(--surface, #fff);
  color: var(--primary, #D6336C);
}
[data-theme="dark"] .disc-story-add .disc-story-inner { background: var(--surface2, #1f2937); }

/* -- Feed sub-tabs ---------------------------------------------- */
.disc-feed-tabs {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 10px 14px 8px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
  position: sticky; top: 0; z-index: 10;
}
[data-theme="dark"] .disc-feed-tabs {
  background: var(--surface, #111827);
  border-bottom-color: rgba(255,255,255,0.07);
}
.disc-feed-tabs::-webkit-scrollbar { display: none; }
.disc-feed-tab {
  flex-shrink: 0;
  background: var(--surface2, #f0e9e4);
  border: none; border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8rem; font-weight: 500;
  color: var(--muted, #a08070);
  cursor: pointer; white-space: nowrap;
  transition: background 0.14s, color 0.14s;
  position: relative;
}
[data-theme="dark"] .disc-feed-tab {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.5);
}
.disc-feed-tab:hover { background: var(--border, rgba(214,51,108,0.12)); }
[data-theme="dark"] .disc-feed-tab:hover { background: rgba(255,255,255,0.12); }
.disc-feed-tab-active,
.disc-feed-tab.disc-feed-tab-active {
  background: var(--primary, #D6336C) !important;
  color: #fff !important;
  font-weight: 700;
}
[data-theme="dark"] .disc-feed-tab-active,
[data-theme="dark"] .disc-feed-tab.disc-feed-tab-active {
  background: var(--primary, #0CA8A8) !important;
}
.disc-tab-dot {
  display: inline-block; width: 6px; height: 6px;
  background: #EF4444; border-radius: 50%;
  margin-left: 3px; vertical-align: middle;
}

/* -- Discover rich post cards ----------------------------------- */
#feedList.feed-tab-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 0 80px;
  background: var(--bg, #faf5f2);
}
[data-theme="dark"] #feedList.feed-tab-list { background: var(--bg, #0A1818); }
.disc-card {
  background: var(--surface, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
  margin: 0 8px;
}
[data-theme="dark"] .disc-card {
  background: var(--surface, #111827);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Card header */
.disc-card-head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 8px;
}
.disc-card-av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary, #D6336C);
  color: #fff; font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; cursor: pointer;
}
.disc-card-meta { flex: 1; min-width: 0; cursor: pointer; }
.disc-card-name {
  font-size: 0.88rem; font-weight: 700;
  color: var(--text, #2a1408);
  display: flex; align-items: center; gap: 3px;
  flex-wrap: wrap;
}
[data-theme="dark"] .disc-card-name { color: #fff; }
.disc-verified { flex-shrink: 0; }
.disc-card-loc {
  font-size: 0.72rem; color: var(--muted, #a08070);
  margin-top: 2px; display: flex; align-items: center; gap: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .disc-card-loc { color: rgba(255,255,255,0.5); }
.disc-card-head-right {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
/* Type badges */
.disc-card-badge {
  font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.disc-badge-meetup { background: rgba(139,92,246,0.15); color: #7C3AED; }
[data-theme="dark"] .disc-badge-meetup { background: rgba(139,92,246,0.25); color: #A78BFA; }
.disc-badge-ask    { background: rgba(59,130,246,0.15); color: #2563EB; }
[data-theme="dark"] .disc-badge-ask    { background: rgba(59,130,246,0.25); color: #60A5FA; }
.disc-badge-photo  { background: rgba(249,115,22,0.15); color: #EA580C; }
[data-theme="dark"] .disc-badge-photo  { background: rgba(249,115,22,0.25); color: #FB923C; }
.disc-card-menu-btn {
  background: none; border: none; cursor: pointer;
  color: var(--muted, #a08070); padding: 2px 4px; border-radius: 6px;
  display: flex; align-items: center;
}
.disc-card-menu-btn:hover { background: var(--surface2, #f0e9e4); }
[data-theme="dark"] .disc-card-menu-btn { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .disc-card-menu-btn:hover { background: rgba(255,255,255,0.1); }

/* Card body: text + image */
.disc-card-body { padding: 0 12px; }
.disc-card-body-split {
  display: grid;
  grid-template-columns: 1fr 38%;
  gap: 10px;
  align-items: start;
}
.disc-card-text {
  font-size: 0.875rem; line-height: 1.55;
  color: var(--text, #2a1408);
  padding: 6px 0;
}
[data-theme="dark"] .disc-card-text { color: rgba(255,255,255,0.88); }
.disc-card-text-left { padding-top: 4px; }
.disc-card-img-wrap {
  border-radius: 12px; overflow: hidden;
  position: relative; aspect-ratio: 4/5;
}
.disc-card-img-full {
  aspect-ratio: 16/9;
  border-radius: 0; margin: 0 -12px;
  width: calc(100% + 24px);
}
.disc-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tags row */
.disc-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 12px 6px;
}
.disc-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface2, #f0e9e4);
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 0.7rem; color: var(--muted, #a08070); font-weight: 500;
}
[data-theme="dark"] .disc-tag {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}

/* Engagement stats bar */
.disc-card-stats {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px 6px;
  font-size: 0.75rem; color: var(--muted, #a08070);
  border-top: 1px solid var(--border, rgba(0,0,0,0.05));
}
[data-theme="dark"] .disc-card-stats {
  border-top-color: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.45);
}
.disc-eng-avatars {
  display: flex; align-items: center;
}
.disc-eng-av {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--primary, #D6336C); color: #fff;
  font-size: 0.55rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--surface, #fff);
  margin-right: -4px;
}
[data-theme="dark"] .disc-eng-av { border-color: var(--surface, #111827); }
.disc-stat-num { font-weight: 600; color: var(--text, #2a1408); }
[data-theme="dark"] .disc-stat-num { color: rgba(255,255,255,0.75); }
.disc-stat-sep { opacity: 0.4; }
.disc-stat-going { color: #059669; font-weight: 600; }
[data-theme="dark"] .disc-stat-going { color: #34D399; }

/* Action buttons row */
.disc-card-actions {
  display: flex; align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border, rgba(0,0,0,0.05));
}
[data-theme="dark"] .disc-card-actions { border-top-color: rgba(255,255,255,0.07); }
.disc-act-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 0;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  font-size: 0 !important; font-weight: 500;
  color: var(--muted, #a08070);
  padding: 0 !important;
  min-width: 44px;
  min-height: 44px;
  transition: background 0.12s, color 0.12s;
  border-radius: 50%;
}
.disc-act-btn svg { width: 18px; height: 18px; }
.disc-act-btn .like-count { display: none !important; }
[data-theme="dark"] .disc-act-btn { color: rgba(255,255,255,0.5); }
.disc-act-btn:hover { background: rgba(0,0,0,0.04) !important; color: var(--text, #2a1408) !important; }
.disc-act-share { margin-left: 0 !important; }
[data-theme="dark"] .disc-act-btn:hover { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.9) !important; }
.disc-act-liked,
.disc-act-btn.disc-act-liked { color: #E26A6A !important; }
[data-theme="dark"] .disc-act-btn + .disc-act-btn { border-left: none !important; }
/* first and last radius */
.disc-card-actions .disc-act-btn:first-child { border-bottom-left-radius: 16px; }
.disc-card-actions .disc-act-btn:last-child  { border-bottom-right-radius: 16px; }
/* Share button pushed to the right */
.disc-act-share { flex: 0 0 auto !important; margin-left: 0 !important; border-left: none !important; }

/* -- Remove the old panel-messages msg-tabs when feed is active -- */
/* The tabs bar stays hidden in navFeed() � no extra change needed */

/* -- feedList should fill screen -------------------------------- */
#panel-messages .panel-scroll {
  background: #ffffff !important;
}
[data-theme="dark"] #panel-messages .panel-scroll { background: #ffffff !important; }
#feedList.feed-tab-list,
#panel-messages .panel-scroll.disc-feed-active {
  background: #ffffff !important;
}

/* ------------------------------------------------------------------
   GLASSMORPHISM � Discover panel background + frosted cards
   ------------------------------------------------------------------ */

/* When the feed tab is active the OUTER panel (#panel-messages) holds the bg.
   background-attachment:fixed inside overflow:scroll fails on iOS/WebKit,
   so we apply it via :has() on the non-scrolling panel container instead.
   See batch v20260601.3 section below for the :has() rules. */
#panel-messages .panel-scroll.disc-feed-active {
  background: #ffffff !important;
}
[data-theme="dark"] #panel-messages .panel-scroll.disc-feed-active,
[data-theme="blue"] #panel-messages .panel-scroll.disc-feed-active,
[data-theme="green"] #panel-messages .panel-scroll.disc-feed-active {
  background: #ffffff !important;
}

/* Override hero bg so it blends with new scroll bg */
.disc-feed-active .disc-hero {
  background: #ffffff !important;
  padding-bottom: 10px;
}
.disc-feed-active .disc-hero-overlay { display: none; }

/* Glass base � applied to all discover section cards as bubble cards */
.disc-feed-active .disc-section,
.disc-feed-active .disc-stories-wrap,
.disc-feed-active .disc-actions-grid {
  background: var(--surface, #fff) !important;
  border: none !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.07) !important;
  border-radius: 18px !important;
  margin: 0 10px 4px !important;
  overflow: hidden !important;
}
/* Stories wrap must NOT clip rings � override overflow only */
.disc-feed-active .disc-stories-wrap {
  overflow: visible !important;
}
/* disc-create-types is INNER to disc-create-wrap � NO side margin, fills full bubble width */
.disc-feed-active .disc-create-types {
  margin: 0 !important;
  border-radius: 0 !important;
}
[data-theme="dark"] .disc-feed-active .disc-section,
[data-theme="dark"] .disc-feed-active .disc-stories-wrap,
[data-theme="dark"] .disc-feed-active .disc-actions-grid {
  background: var(--surface, #1a2832) !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}

/* Feed tabs sticky strip � solid */
.disc-feed-active .disc-feed-tabs {
  background: var(--surface, #fff) !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .disc-feed-active .disc-feed-tabs {
  background: var(--surface, #111827) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Post cards � solid surface */
.disc-feed-active .disc-card {
  background: var(--surface, #fff) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .disc-feed-active .disc-card {
  background: rgba(15,28,40,0.78) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow:
    0 4px 28px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Create card glass */
.disc-feed-active .disc-create-card {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] .disc-feed-active .disc-create-card {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* Quick action tiles � glass */
.disc-feed-active .dag-btn {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
}
[data-theme="dark"] .disc-feed-active .dag-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
.disc-feed-active .dag-btn:hover {
  background: rgba(255,255,255,0.82) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12) !important;
}
[data-theme="dark"] .disc-feed-active .dag-btn:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* Story circles ring � enhance */
.disc-feed-active .disc-story-ring {
  background: #000 !important;
}
.disc-feed-active .disc-story-inner {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

/* Feed list bg transparent over scroll pane */
.disc-feed-active #feedList.feed-tab-list {
  background: transparent !important;
}

/* ------------------------------------------------------------------
   BATCH v20260601.3  �  Complete UI Polish Pass
   Inter � Discover bg � Layout � Messages � Chat � Nav � Themes
   ------------------------------------------------------------------ */

/* --- 1. Global font � Inter (Instagram-style modern sans) ------- */
body, h1, h2, h3, h4, h5, h6, p, span, div, button, input,
select, textarea, label, li, a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Keep brand serifs on logo / splash headings only */
.caravan-head .ch-greet, .caravan-sub,
.app-loader-name, #screen-loader .app-loader-name,
.sc-auth-headline, .splash-title,
.prof-name, .ts-name {
  font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif !important;
}

/* 2. Discover feed panel background - warm earthy, no photo */
#panel-messages:has(.disc-feed-active) { background: #ffffff !important; }
:root[data-theme="mixed"] #panel-messages:has(.disc-feed-active) { background: #ffffff !important; }
[data-theme="dark"] #panel-messages:has(.disc-feed-active) { background: #0A1010 !important; }

#panel-messages .panel-scroll.disc-feed-active { background: #ffffff !important; }
#feedList.feed-tab-list { background: #ffffff !important; }
.disc-card,
#panel-home .disc-card,
#panel-home .disc-section,
#panel-home .disc-create-card,
#panel-home .disc-create-wrap,
#panel-home .disc-feed-tab,
#panel-home .disc-hero { background: #ffffff !important; }
.disc-card { background: #ffffff !important; }

/* --- 3. Bubble-style discover sections --- */
.discover-home { padding: 0 !important; }
.disc-section  { border-radius: 18px !important; margin: 0 10px 4px !important; }
.disc-create-wrap { padding: 0 !important; margin: 6px 10px 4px !important; border-radius: 18px !important; overflow: hidden !important; }
.disc-create-types { border-radius: 0 !important; margin: 0 !important; }
.disc-create-card  { border-radius: 0 !important; }

/* Post cards � bubble cards with margins (not edge-to-edge) */
.disc-card {
  margin: 0 8px 8px !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  overflow: hidden !important;
}
[data-theme="dark"] .disc-card {
  margin: 0 8px 8px !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  border-color: rgba(255,255,255,0.07) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}

/* --- 4. Actions grid ? horizontal scroll row (like stories) ------ */
.disc-actions-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  gap: 8px !important;
  padding: 10px 14px 12px !important;
  background: transparent !important;
}
.disc-actions-grid::-webkit-scrollbar { display: none !important; }
.dag-btn {
  flex: 0 0 auto !important;
  width: 68px !important;
  min-width: 68px !important;
  padding: 10px 6px 8px !important;
  border-radius: 16px !important;
}
.dag-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
.dag-label { font-size: 0.64rem !important; line-height: 1.2 !important; }

/* --- 5. Scale down discover page (everything was too big) -------- */
.disc-hero { min-height: 50px !important; padding: 10px 14px 14px !important; }
.disc-story-ring { width: 50px !important; height: 50px !important; }
.disc-story { width: 56px !important; font-size: 0.62rem !important; }
.disc-stories-scroll { gap: 10px !important; }
.disc-card-head { padding: 10px 12px 6px !important; }
.disc-card-av   { width: 34px !important; height: 34px !important; }
.disc-card-name { font-size: 0.84rem !important; }
.disc-card-meta { font-size: 0.72rem !important; }
.disc-card-text { font-size: 0.82rem !important; line-height: 1.5 !important; }
.disc-act-btn   { font-size: 0 !important; padding: 0 !important; }
.disc-feed-tab  { font-size: 0.78rem !important; padding: 5px 12px !important; }

/* --- 6. homeComposePanel � white/light in non-dark themes -------- */
:root:not([data-theme="dark"]) #homeComposePanel,
:root:not([data-theme="dark"]) .home-compose-panel,
:root:not([data-theme="dark"]) .messages-home-composer {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  color: #1C0E08 !important;
}
:root:not([data-theme="dark"]) #msgHomePostBody,
:root:not([data-theme="dark"]) #homeComposePanel textarea {
  background: #FFFFFF !important;
  color: #1C0E08 !important;
  border-color: rgba(0,0,0,0.06) !important;
}
:root:not([data-theme="dark"]) #msgHomePostBody::placeholder,
:root:not([data-theme="dark"]) #homeComposePanel textarea::placeholder { color: rgba(0,0,0,0.35) !important; }

/* Dark mode compose: text must be visible against dark card */
:root[data-theme="dark"] #homeComposePanel,
:root[data-theme="dark"] .home-compose-panel { background: var(--card) !important; color: var(--text) !important; }
:root[data-theme="dark"] #msgHomePostBody { color: var(--text) !important; background: transparent !important; }
:root[data-theme="dark"] #msgHomePostBody::placeholder { color: var(--muted) !important; }

/* --- 7. Community feed / messagesHome � light in non-dark -------- */
:root:not([data-theme="dark"]) #messagesHome,
:root:not([data-theme="dark"]) .messages-home-wrap {
  background: transparent !important;
  color: #1C0E08 !important;
}
:root:not([data-theme="dark"]) #messagesHome .section-head h3,
:root:not([data-theme="dark"]) #messagesHome .section-head h2,
:root:not([data-theme="dark"]) #messagesHome .section-title { color: #1C0E08 !important; }
:root:not([data-theme="dark"]) #messagesHome .card {
  background: #FFFFFF !important;
  color: #1C0E08 !important;
  border-color: rgba(0,0,0,0.07) !important;
}
:root:not([data-theme="dark"]) #messagesHome .text-muted { color: #8B6B7A !important; }

/* --- 8. Companions panel � light in non-dark --------------------- */
:root:not([data-theme="dark"]) #panel-companions { background: var(--bg) !important; color: var(--text) !important; }
:root:not([data-theme="dark"]) #panel-companions .card { background: var(--card) !important; color: var(--text) !important; border-color: var(--border) !important; }
:root:not([data-theme="dark"]) #panel-companions .card-title { color: var(--text) !important; }
:root:not([data-theme="dark"]) #panel-companions .card-sub,
:root:not([data-theme="dark"]) #panel-companions .text-muted { color: var(--muted) !important; }

/* --- 9. Messages / chats panel � remove padding ----------------- */
#panel-messages > .panel-scroll { padding: 0 !important; }

/* Chats header: minimal transparent bar, less gap */
#panel-messages .chats-header {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 14px 16px 8px !important;
}
:root:not([data-theme="dark"]) #panel-messages .chats-header {
  background: rgba(255,255,255,0.88) !important;
}
:root[data-theme="dark"] #panel-messages .chats-header { background: rgba(10,24,24,0.88) !important; }
.chats-header-top { margin-bottom: 6px !important; }
.chats-title { font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }

/* --- 10. Search row � single clean pill, no double border -------- */
#panel-messages .chats-search-row {
  background: rgba(0,0,0,0.07) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 9px 14px !important;
  gap: 8px !important;
  margin: 0 0 2px !important;
  display: flex !important;
  align-items: center !important;
}
:root[data-theme="dark"] #panel-messages .chats-search-row { background: rgba(255,255,255,0.09) !important; border: none !important; }
#panel-messages .chats-search-row svg { opacity: 0.45; flex-shrink: 0; }
#panel-messages .chats-search-row input,
#chatsSearchInput {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-size: 0.88rem !important;
  flex: 1 !important;
  padding: 0 !important;
  font-family: inherit !important;
}
:root:not([data-theme="dark"]) #chatsSearchInput,
:root:not([data-theme="dark"]) #panel-messages .chats-search-row input { color: #1C0E08 !important; }
:root:not([data-theme="dark"]) #chatsSearchInput::placeholder,
:root:not([data-theme="dark"]) #panel-messages .chats-search-row input::placeholder { color: rgba(0,0,0,0.35) !important; }

/* --- 11. Conversation list � no separator lines ------------------ */
#conversationsList.card-list { gap: 0.35rem !important; padding: 0.5rem !important; margin-top: 0 !important; }
#conversationsList .conversation-item {
  border-bottom: none !important;
  border-radius: 16px !important;
  margin: 0.35rem 0 !important;
  padding: 0.95rem 1rem !important;
  background: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
}
#conversationsList .conversation-item:hover { background: #F5F5F5 !important; }
:root[data-theme="dark"] #conversationsList .conversation-item:hover { background: rgba(255,255,255,0.05) !important; }

/* --- 12. Chat page � much more faded background ------------------ */
:root[data-theme="default"] .chat-messages::before { background: rgba(250,247,242,0.93) !important; }
:root[data-theme="light"]   .chat-messages::before { background: rgba(248,246,242,0.93) !important; }
:root[data-theme="blue"]    .chat-messages::before { background: rgba(230,240,255,0.93) !important; }
:root[data-theme="green"]   .chat-messages::before { background: rgba(230,248,238,0.93) !important; }
:root[data-theme="dark"]    .chat-messages::before { background: rgba(10,24,24,0.94) !important; }

/* Chat messages background for any theme not explicitly covered */
:root:not([data-theme="dark"]) .chat-messages::before {
  background: transparent !important;
}

/* --- 13. Chat bottom gradient � fade image at bottom of chat ----- */
/* Achieved via a gradient ::before on chat-input-bar bleeding upward */
#panel-chat .chat-input-bar {
  position: relative !important;
  z-index: 2 !important;
}
#panel-chat .chat-input-bar::before {
  content: '';
  position: absolute;
  top: -64px;
  left: 0;
  right: 0;
  height: 64px;
  pointer-events: none;
  z-index: 1;
}
:root[data-theme="default"] #panel-chat .chat-input-bar::before,
:root[data-theme="light"]   #panel-chat .chat-input-bar::before {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.97)) !important;
}
:root[data-theme="blue"]  #panel-chat .chat-input-bar::before {
  background: linear-gradient(to bottom, transparent, rgba(230,240,255,0.97)) !important;
}
:root[data-theme="green"] #panel-chat .chat-input-bar::before {
  background: linear-gradient(to bottom, transparent, rgba(230,248,238,0.97)) !important;
}
:root[data-theme="dark"]  #panel-chat .chat-input-bar::before {
  background: linear-gradient(to bottom, transparent, rgba(10,24,24,0.98)) !important;
}
:root:not([data-theme="dark"]) #panel-chat .chat-input-bar::before {
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.97)) !important;
}

/* --- 14. Bottom nav � labels + centre FAB ------------------------- */
.bottom-nav {
  height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 0 !important;
  align-items: stretch !important;
}
.nav-btn {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 6px 4px 4px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}
.nav-btn svg { width: 22px !important; height: 22px !important; }
.nav-label {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  color: inherit !important;
  font-family: 'Inter', sans-serif !important;
}

/* Centre FAB button */
.nav-btn-fab {
  flex: 0 0 60px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}
.nav-btn-fab::before { display: none !important; }
.nav-fab-inner {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #F97316 0%, #EC4899 55%, #8B5CF6 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 18px rgba(236,72,153,0.45), 0 1px 4px rgba(0,0,0,0.12) !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.nav-btn-fab:active .nav-fab-inner { transform: scale(0.94) !important; }
:root[data-theme="dark"] .nav-fab-inner {
  background: linear-gradient(135deg, #0EA5E9 0%, #3B82F6 55%, #8B5CF6 100%) !important;
  box-shadow: 0 4px 18px rgba(59,130,246,0.45), 0 1px 4px rgba(0,0,0,0.3) !important;
}
/* -- end v20260601.3 -- */

/* ---------------------------------------------------------------------------
   v20260601.4 � Notification Dropdown, Inline Comments, Companions Redesign,
                 Messages Badge, Scrollbar Polish, Nav FAB Warm Brown,
                 Background Fading, Messages Panel Fixes
   --------------------------------------------------------------------------- */

/* -- 1. NAV FAB � Warm Terracotta (light mode) -------------------------- */
.nav-fab-inner {
  background: linear-gradient(135deg, #D6336C 0%, #D6336C 60%, #B32050 100%) !important;
  box-shadow: 0 4px 18px rgba(214,51,108,0.42), 0 2px 6px rgba(0,0,0,0.18) !important;
}

/* -- 2. HOME PAGE � More faded hero overlay ----------------------------- */
#panel-home .disc-hero::before,
#panel-home .disc-hero-bg::before,
#panel-home::before {
  opacity: 0 !important;
  background: transparent !important;
}

/* Force homepage feed and banner surfaces white */
#screen-app:has(#panel-messages.active),
#screen-app:has(#panel-home.active),
#screen-app:has(#panel-chat.active),
#screen-app:has(#panel-user-profile.active) {
  background: #ffffff !important;
}
#screen-app .top-bar,
#screen-app .top-bar.sticky-top,
#screen-app:has(#panel-messages.active) .top-bar,
#screen-app:has(#panel-home.active) .top-bar,
#screen-app:has(#panel-chat.active) .top-bar,
#screen-app:has(#panel-user-profile.active) .top-bar,
#screen-app:has(#panel-messages.active) .top-bar.sticky-top,
#screen-app:has(#panel-home.active) .top-bar.sticky-top,
#screen-app:has(#panel-chat.active) .top-bar.sticky-top,
#screen-app:has(#panel-user-profile.active) .top-bar.sticky-top,
#screen-app:has(#panel-messages.active) #screen-app > .top-bar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
#panel-messages,
#panel-messages .panel-scroll,
#panel-messages .panel-scroll.disc-feed-active,
#panel-messages .disc-card,
#panel-messages .feed-post-card,
#panel-messages .disc-card .disc-card-head,
#panel-messages .disc-card .disc-card-body,
#feedList.feed-tab-list,
#panel-home .disc-card,
#panel-home .disc-section,
#panel-home .disc-create-card,
#panel-home .disc-create-wrap,
#panel-home .disc-feed-tab,
#panel-home .disc-hero,
#panel-home .disc-hero-bg,
#panel-home .disc-hero::before,
#panel-home .disc-hero-bg::before,
#panel-messages .feed-post-card,
#panel-messages .feed-post-card .feed-post-hero,
#panel-messages .feed-post-card .feed-post-body {
  background: #ffffff !important;
  background-image: none !important;
}
#panel-messages .panel-scroll.disc-feed-active { background: #ffffff !important; }
#feedList.feed-tab-list { background: #ffffff !important; }
#panel-messages .feed-post-card { background: #ffffff !important; border-color: rgba(0,0,0,0.05) !important; }
#panel-messages .disc-card { background: #ffffff !important; border-color: rgba(0,0,0,0.05) !important; }
#panel-messages .disc-card-actions { background: #ffffff !important; }
#panel-messages .disc-hero { background: #ffffff !important; }

/* -- 3. SCROLLBAR � Invisible overlay scrollbar ------------------------- */
.panel-scroll::-webkit-scrollbar,
#feedList::-webkit-scrollbar,
.disc-comments-list::-webkit-scrollbar,
.comp-scroll::-webkit-scrollbar,
.nd-list::-webkit-scrollbar,
.conv-list::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}
.panel-scroll::-webkit-scrollbar-track,
.comp-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
.panel-scroll { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.12) transparent; }

/* -- 4. MESSAGES � Top badge + hero icon -------------------------------- */
.top-msg-btn {
  position: relative;
  margin-right: 2px;
}
.top-msg-btn svg { stroke: var(--fg,#1a1a1a); opacity: 0.78; }

/* -- 5. NOTIFICATION DROPDOWN ------------------------------------------- */
.notif-dropdown {
  position: fixed;
  top: 56px;           /* just below the header */
  right: 10px;
  width: min(380px, calc(100vw - 20px));
  max-height: 72vh;
  background: #ffffff !important;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.14),
    0 2px 10px rgba(214,51,108,0.08);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ndSlideIn 0.18s ease-out;
}
@keyframes ndSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.notif-dropdown.hidden { display: none !important; }

.notif-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(214,51,108,0.1);
  flex-shrink: 0;
}
.notif-dropdown-title {
  font-family: 'Inter', var(--font), sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg, #1a1a1a);
}
.notif-dropdown-see-all {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary, #D6336C);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s;
}
.notif-dropdown-see-all:hover { background: rgba(214,51,108,0.08); }

.notif-dropdown-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.1) transparent;
}
.notif-dropdown-list::-webkit-scrollbar { width: 3px; }
.notif-dropdown-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }

.nd-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.035);
}
.nd-item:last-child { border-bottom: none; }
.nd-item:hover { background: rgba(214,51,108,0.05); }
.nd-item.nd-unread { background: rgba(214,51,108,0.06); }
.nd-item.nd-unread:hover { background: rgba(214,51,108,0.1); }

.nd-icon-wrap {
  flex-shrink: 0;
  width: 38px; height: 38px;
  background: rgba(214,51,108,0.1);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.nd-body { flex: 1; min-width: 0; }
.nd-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--fg, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nd-msg {
  font-size: 0.78rem;
  color: var(--muted, #999999);
  margin-top: 2px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nd-time {
  font-size: 0.72rem;
  color: var(--primary, #D6336C);
  margin-top: 4px;
  font-weight: 500;
}
.nd-dot {
  width: 8px; height: 8px;
  background: var(--primary, #D6336C);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* -- Notification swipe actions -- */
.nd-swipe-wrap {
  position: relative;
  overflow: hidden;
}
.nd-swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.nd-swipe-wrap.swiped .nd-swipe-actions {
  transform: translateX(0);
}
.nd-swipe-actions button {
  width: 64px;
  border: none;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s;
}
.nd-swipe-actions button:active { filter: brightness(0.85); }
.nd-swipe-read  { background: #E05070; }
.nd-swipe-del   { background: #c0392b; }
.nd-swipe-accept { background: #16a34a; }
.nd-swipe-reject { background: #e67e22; }
.nd-swipe-item {
  position: relative;
  z-index: 1;
  background: inherit;
  transition: transform 0.2s ease;
}
.nd-swipe-wrap.swiped .nd-swipe-item {
  transform: translateX(-128px);
}
.notif-dropdown-footer {
  padding: 8px 18px 12px;
  border-top: 1px solid rgba(214,51,108,0.1);
  text-align: center;
  flex-shrink: 0;
}
.notif-dropdown-footer .link-btn {
  font-size: 0.78rem;
  color: var(--muted, #999999);
  background: none; border: none; cursor: pointer;
}

/* Dark mode notification dropdown */
:root[data-theme="dark"] .notif-dropdown {
  background: rgba(32,24,18,0.96);
  border-color: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .nd-item.nd-unread { background: rgba(214,51,108,0.14); }
:root[data-theme="dark"] .nd-title { color: #f5ede4; }

/* -- 6. INLINE POST COMMENTS -------------------------------------------- */
.disc-comment-section {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1), padding 0.2s;
  padding: 0 16px;
  border-top: 0 solid rgba(214,51,108,0.1);
}
.disc-comment-section.disc-comment-open {
  max-height: 600px;
  padding: 10px 16px 12px;
  border-top-width: 1px;
}

.disc-comments-list {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.disc-comment-empty {
  font-size: 0.8rem;
  color: var(--muted, #999999);
  text-align: center;
  padding: 8px 0;
  font-style: italic;
}
.disc-comment-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.disc-comment-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--primary-soft, #f3e8df);
  overflow: hidden;
  background-position: center;
}
.disc-comment-bubble {
  background: rgba(214,51,108,0.05);
  border-radius: 0 14px 14px 14px;
  padding: 7px 11px 5px;
  flex: 1;
  min-width: 0;
}
.disc-comment-name {
  font-weight: 700;
  font-size: 0.78rem;
  color: #1a1a1a;
  display: block;
  margin-bottom: 1px;
}
.disc-comment-text {
  font-size: 0.83rem;
  color: #1a1a1a;
  line-height: 1.4;
  word-break: break-word;
}
.disc-comment-time {
  font-size: 0.68rem;
  color: #999;
  margin-top: 3px;
  display: flex; align-items: center; gap: 8px;
}
.disc-comment-actions {
  display: flex; gap: 3px; margin-left: auto;
}
.disc-comment-actions button {
  background: none; border: none; font-size: 0.7rem;
  color: #999; cursor: pointer; padding: 1px 4px;
  font-family: inherit;
}
.disc-comment-actions button:hover { color: #D6336C; }
.disc-comment-actions button.liked { color: #E26A6A; }

.disc-comment-input-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.disc-comment-av-self {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--primary, #D6336C);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.disc-comment-input {
  flex: 1;
  background: rgba(214,51,108,0.05);
  border: 1.5px solid rgba(214,51,108,0.18);
  border-radius: 22px;
  padding: 8px 14px;
  font-size: 0.84rem;
  font-family: 'Inter', var(--font), sans-serif;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.15s;
}
.disc-comment-input:focus { border-color: var(--primary, #D6336C); }
.disc-comment-input::placeholder { color: rgba(0,0,0,0.35); }
.disc-comment-send {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%);
  color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.12s;
}
.disc-comment-send:hover { opacity: 0.88; transform: scale(1.06); }
.disc-comment-send:active { transform: scale(0.94); }

/* Dark mode comments */
:root[data-theme="dark"] .disc-comment-bubble { background: rgba(255,255,255,0.07); }
:root[data-theme="dark"] .disc-comment-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #f5ede4;
}
:root[data-theme="dark"] .disc-comment-name,
:root[data-theme="dark"] .disc-comment-text { color: #f5ede4; }

/* -- 7. COMPANIONS PAGE REDESIGN ---------------------------------------- */
.comp-panel {
  position: relative;
  overflow: hidden;
}
.comp-panel::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('/img/photo_2026-05-29_20-55-02.jpg') center/cover no-repeat;
  z-index: -2;
  pointer-events: none;
}
.comp-panel::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(252,248,244,0.76) 0%, rgba(252,248,244,0.92) 60%, rgba(252,248,244,0.98) 100%);
  z-index: -1;
  pointer-events: none;
}
:root[data-theme="dark"] .comp-panel::after {
  background: linear-gradient(180deg, rgba(14,10,7,0.80) 0%, rgba(14,10,7,0.93) 100%);
}

.comp-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  padding-bottom: 90px;
}

/* Hero header */
.comp-hero {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  margin: 0 0 0 0;
  border-radius: 0 0 24px 24px;
}
.comp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/photo_2026-05-29_20-55-42.jpg') center 30%/cover no-repeat;
}
.comp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14,10,7,0.82) 0%, rgba(14,10,7,0.42) 60%, transparent 100%);
}
.comp-hero-content {
  position: relative;
  z-index: 1;
  padding: 24px 20px 22px;
  width: 100%;
}
.comp-hero-title {
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.comp-hero-sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.82);
  margin: 0 0 16px;
  line-height: 1.4;
}
.comp-post-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: 50px;
}

/* Sections */
.comp-section { padding: 16px 14px 4px; }
.comp-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.comp-section-title {
  font-family: 'Inter', var(--font), sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg, #1a1a1a);
}
.comp-section-count {
  font-size: 0.75rem;
  background: rgba(214,51,108,0.12);
  color: var(--primary, #D6336C);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}
.comp-list { display: flex; flex-direction: column; gap: 10px; }

/* Companion card */
.comp-card {
  background: rgba(255,253,250,0.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(214,51,108,0.1);
  border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  transition: transform 0.15s, box-shadow 0.15s;
}
.comp-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
:root[data-theme="dark"] .comp-card {
  background: rgba(32,24,18,0.88);
  border-color: rgba(255,255,255,0.07);
}
.comp-card-top { display: flex; align-items: flex-start; gap: 12px; }
.comp-card-av {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--primary-soft, #f3e8df);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.comp-card-info { flex: 1; min-width: 0; }
.comp-card-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--fg, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.comp-card-dest,
.comp-card-dates {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted, #999999);
  margin-top: 3px;
}
:root[data-theme="dark"] .comp-card-name { color: #f5ede4; }
.comp-connect-btn {
  flex-shrink: 0;
  background: var(--primary, #D6336C);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.comp-connect-btn:hover { opacity: 0.85; }
.comp-card-desc {
  font-size: 0.82rem;
  color: var(--muted, #999999);
  margin: 9px 0 0;
  line-height: 1.45;
}
.comp-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.comp-badge {
  background: rgba(214,51,108,0.1);
  color: var(--primary, #D6336C);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 600;
}

/* Composer */
.comp-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,253,250,0.9);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(214,51,108,0.12);
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.comp-composer:hover { border-color: rgba(214,51,108,0.3); }
.comp-composer-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary, #D6336C);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.comp-composer-input {
  flex: 1;
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--muted, #999999);
  text-align: left;
  cursor: pointer;
  font-family: 'Inter', var(--font), sans-serif;
  padding: 0;
}
.comp-composer-full {
  background: rgba(255,253,250,0.95);
  border: 1.5px solid rgba(214,51,108,0.18);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.comp-textarea {
  width: 100%;
  min-height: 80px;
  background: rgba(214,51,108,0.05);
  border: 1.5px solid rgba(214,51,108,0.15);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 0.88rem;
  color: var(--fg, #1a1a1a);
  resize: vertical;
  outline: none;
}
.comp-textarea:focus { border-color: var(--primary, #D6336C); }
.comp-img-input {
  width: 100%;
  background: rgba(214,51,108,0.05);
  border: 1.5px solid rgba(214,51,108,0.12);
  border-radius: 10px;
  padding: 9px 12px;
  margin-top: 8px;
  font-size: 0.84rem;
  color: var(--fg, #1a1a1a);
  font-family: 'Inter', var(--font), sans-serif;
  outline: none;
}
.comp-img-input:focus { border-color: var(--primary, #D6336C); }
.comp-composer-full.hidden { display: none !important; }
:root[data-theme="dark"] .comp-composer { background: rgba(32,24,18,0.85); }
:root[data-theme="dark"] .comp-composer-full { background: rgba(32,24,18,0.9); }
:root[data-theme="dark"] .comp-textarea,
:root[data-theme="dark"] .comp-img-input { color: #f5ede4; }

/* -- 8. MESSAGES PANEL � chats touch top, faded BG --------------------- */
/* Remove any gap at the very top of the messages panel */
#panel-messages .conv-list-section,
#panel-messages .msg-tabs-row,
#panel-messages .msg-home-top,
#panel-messages > .panel-scroll > *:first-child,
#panel-messages .panel-scroll > div:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* -- 9. MESSAGES PANEL BACKGROUND � even more faded -------------------- */
#panel-messages::before {
  opacity: 0.96 !important;
}
#panel-chat::before {
  opacity: 0.96 !important;
}

/* -- 10. DISCOVER MSG DOT (hero message button badge) ------------------ */
.disc-hero-msg-btn { position: relative; }
.disc-notif-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  background: #E53E3E;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
}
.disc-notif-dot.hidden { display: none !important; }

/* -- 11. MESSAGES � Remove top padding in chats list area -------------- */
#panel-messages .panel-scroll { padding-top: 0 !important; }

/* -- 12. FEED TABS ? POST GAP � eliminate the 8px remnant ------------- */
#feedList { padding-top: 0 !important; }
.disc-feed-tabs + #feedList,
.disc-feed-tabs ~ #feedList { margin-top: 0 !important; }

/* Utility */
.btn-full { width: 100%; }

/* -- end v20260601.4 -- */

/* -- v20260601.4-b � "More" bottom sheet -------------------------------- */
.disc-more-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.disc-more-sheet {
  background: rgba(255,253,250,0.97);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 14px 20px 36px;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.14);
  animation: slideUpSheet 0.22s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideUpSheet {
  from { transform: translateY(80px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.disc-more-handle {
  width: 36px; height: 4px;
  background: rgba(0,0,0,0.14);
  border-radius: 3px;
  margin: 0 auto 14px;
}
.disc-more-title {
  font-family: 'Inter', var(--font), sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--fg, #1a1a1a);
  margin-bottom: 18px;
}
.disc-more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.disc-more-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: rgba(214,51,108,0.04);
  border: 1.5px solid rgba(214,51,108,0.09);
  border-radius: 16px;
  padding: 14px 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
  text-decoration: none;
}
.disc-more-btn:hover { background: rgba(214,51,108,0.09); transform: scale(1.03); }
.disc-more-btn:active { transform: scale(0.96); }
.disc-more-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.disc-more-btn span {
  font-family: 'Inter', var(--font), sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--fg, #1a1a1a);
  text-align: center;
}
:root[data-theme="dark"] .disc-more-sheet { background: rgba(24,18,12,0.97); }
:root[data-theme="dark"] .disc-more-btn { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }
:root[data-theme="dark"] .disc-more-btn span { color: #f5ede4; }
/* -- end v20260601.4-b -- */

/* ---------------------------------------------------------------------------
   v20260601.5 � Gap Fix, Transparency, Camera Capture, Ask/Meetup Wizards,
                 Dark-Mode Post Fix, Loading Screen, Circles?Chat
   --------------------------------------------------------------------------- */

/* -- 1. GAP FIX: discover-home min-height:100% pushed feedList off-screen -- */
.discover-home,
#feedCreateBar {
  min-height: auto !important;
}

/* -- 2. Panel background shows travel image through transparent cards ------- */
#panel-messages .panel-scroll.disc-feed-active {
  background: var(--surface, #FAF7F2) !important;
}

/* 3. FeedList background */
#feedList.feed-tab-list {
  background: var(--bg, #F5F1EC) !important;
  padding: 4px 0 100px !important;
}

/* -- 4. Semi-transparent post cards (very subtle, background barely shows) -- */
.disc-card {
  background: rgba(255, 253, 250, 0.91) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
:root[data-theme="dark"] .disc-card {
  background: rgba(14, 20, 38, 0.91) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* -- 5. Transparent compose card + disc sections too ----------------------- */
.disc-section {
  background: var(--surface, #fff) !important;
  border-radius: 18px !important;
  /* No overflow:hidden � stories rings must not be clipped */
}
.disc-stories-wrap {
  overflow: visible !important;
}
.disc-create-card {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
.disc-create-types {
  background: rgba(255, 253, 250, 0.82) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
:root[data-theme="dark"] .disc-section {
  background: var(--surface, #111827) !important;
}
:root[data-theme="dark"] .disc-create-card {
  background: rgba(15, 22, 42, 0.88) !important;
}
:root[data-theme="dark"] .disc-create-types {
  background: rgba(10, 16, 32, 0.82) !important;
}

/* -- 6. Reduce Photo/Video/Ask/Meetup row height -------------------------- */
.disc-create-types {
  padding: 5px 8px 7px !important;
  gap: 4px !important;
}
.disc-type-btn {
  padding: 5px 2px !important;
  font-size: 0.71rem !important;
  gap: 4px !important;
}
.dct-icon {
  width: 32px !important;
  height: 32px !important;
}
.dct-icon svg {
  width: 13px !important;
  height: 13px !important;
}

/* -- 7. Fix dark posts in light-mode Meetups / Any tab -------------------- */
:root:not([data-theme="dark"]) .disc-card {
  color: var(--fg, #1a1a1a) !important;
}
:root:not([data-theme="dark"]) .disc-post-body,
:root:not([data-theme="dark"]) .disc-card-title,
:root:not([data-theme="dark"]) .disc-card-text,
:root:not([data-theme="dark"]) .disc-post-author-name,
:root:not([data-theme="dark"]) .disc-card-name {
  color: var(--fg, #1a1a1a) !important;
}

/* -- 8. Nav FAB + icon � ensure white and warm terracotta ------------------- */
.nav-fab-inner {
  /* overridden by end-of-file rules — logo img replaces SVG */
  color: #ffffff !important;
}
:root[data-theme="dark"] .nav-fab-inner {
  background: linear-gradient(135deg, #0EA5E9 0%, #3B82F6 55%, #8B5CF6 100%) !important;
  box-shadow: 0 4px 18px rgba(59,130,246,0.45), 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* -- 9. Ask Wizard modal --------------------------------------------------- */
.ask-wizard-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.22s ease;
}
.ask-wizard-sheet {
  background: var(--surface, #fff);
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 520px;
  padding: 0 0 max(env(safe-area-inset-bottom), 20px);
  box-shadow: 0 -6px 40px rgba(0,0,0,0.18);
  animation: slideUp 0.28s cubic-bezier(0.34,1.16,0.64,1);
}
.ask-wizard-handle {
  width: 38px; height: 4px;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  margin: 10px auto 0;
}
.ask-wizard-head {
  padding: 14px 20px 6px;
  display: flex; align-items: center; gap: 10px;
}
.ask-wizard-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; flex-shrink: 0;
}
.ask-wizard-title {
  font-size: 1.08rem; font-weight: 700; color: var(--fg);
}
.ask-wizard-sub {
  font-size: 0.8rem; color: var(--muted); margin-top: 1px;
}
.ask-wizard-topics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 8px 16px 4px;
}
.ask-topic-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 6px;
  background: var(--surface2, #f5f0ec);
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer; transition: all 0.18s ease;
  font-size: 0.73rem; font-weight: 600; color: var(--fg);
}
.ask-topic-btn:hover, .ask-topic-btn.active {
  border-color: var(--primary, #D6336C);
  background: rgba(214,51,108,0.10);
  color: var(--primary, #D6336C);
}
.ask-topic-icon {
  font-size: 1.5rem; line-height: 1;
}
.ask-wizard-textarea {
  margin: 8px 16px 0;
  width: calc(100% - 32px);
  box-sizing: border-box;
  background: var(--surface2, #f5f0ec);
  border: 1.5px solid var(--border, #e8ddd5);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 0.92rem; color: var(--fg);
  resize: none; outline: none;
  font-family: inherit; min-height: 72px;
  transition: border-color 0.18s;
}
.ask-wizard-textarea:focus { border-color: var(--primary, #D6336C); }
.ask-wizard-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 0;
}
.ask-wizard-location {
  flex: 1; display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--muted); overflow: hidden;
}
.ask-wizard-submit {
  background: var(--primary, #D6336C);
  color: #fff; border: none; border-radius: 22px;
  padding: 10px 20px; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.18s;
  flex-shrink: 0;
}
.ask-wizard-submit:hover { opacity: 0.88; }

/* -- 10. Meetup Category Sheet --------------------------------------------- */
.meetup-cat-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.22s ease;
}
.meetup-cat-sheet {
  background: var(--surface, #fff);
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 520px;
  padding: 0 0 max(env(safe-area-inset-bottom), 24px);
  box-shadow: 0 -6px 40px rgba(0,0,0,0.18);
  animation: slideUp 0.28s cubic-bezier(0.34,1.16,0.64,1);
}
.meetup-cat-handle {
  width: 38px; height: 4px;
  background: rgba(0,0,0,0.15);
  border-radius: 4px;
  margin: 10px auto 0;
}
.meetup-cat-head {
  padding: 14px 20px 8px;
  display: flex; align-items: center; gap: 10px;
}
.meetup-cat-head-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #F97316, #EC4899);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.25rem; flex-shrink: 0;
}
.meetup-cat-head-text { font-size: 1.05rem; font-weight: 700; color: var(--fg); }
.meetup-cat-head-sub { font-size: 0.78rem; color: var(--muted); margin-top: 1px; }
.meetup-cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 6px 14px 16px;
}
.meetup-cat-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px 8px;
  border: 2px solid var(--border, #e8ddd5);
  border-radius: 16px;
  background: var(--surface2, #faf5f2);
  cursor: pointer; transition: all 0.18s ease;
  font-size: 0.76rem; font-weight: 700; color: var(--fg);
  text-align: center; line-height: 1.2;
}
.meetup-cat-btn:hover {
  border-color: var(--primary, #D6336C);
  background: rgba(214,51,108,0.09);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(214,51,108,0.18);
}
.meetup-cat-btn:active { transform: scale(0.96); }
.meetup-cat-emoji { font-size: 1.9rem; line-height: 1; }

/* dark mode for wizards */
:root[data-theme="dark"] .ask-wizard-sheet,
:root[data-theme="dark"] .meetup-cat-sheet {
  background: #111827;
}
:root[data-theme="dark"] .ask-topic-btn,
:root[data-theme="dark"] .meetup-cat-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #f0e8e0;
}
:root[data-theme="dark"] .ask-wizard-textarea {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: #f0e8e0;
}
/* -- end v20260601.5 -- */

/* ------------------------------------------------------
   v20260601.6 � New Post Compose Sheet + Companions fix
------------------------------------------------------ */

/* 1. Hide profile avatar circle in companions panel header */
body[data-panel="companions"] #topAvatar,
body[data-panel="companions"] #topAvatar + span {
  display: none !important;
}

/* 2. Quick Compose � beautiful warm bottom sheet */
.qc-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(60,35,10,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: qcFadeIn 0.2s ease;
}
@keyframes qcFadeIn { from { opacity: 0 } to { opacity: 1 } }

.qc-sheet {
  width: 100%; max-width: 520px;
  background: #FFFBF7;
  border-radius: 22px 22px 0 0;
  padding: 0 0 max(env(safe-area-inset-bottom), 14px);
  box-shadow: 0 -6px 40px rgba(60,10,20,0.18), 0 -1px 0 rgba(214,51,108,0.12);
  animation: qcSlideUp 0.28s cubic-bezier(0.34,1.15,0.64,1);
}
@keyframes qcSlideUp {
  from { transform: translateY(100%); opacity: 0.7 }
  to   { transform: translateY(0);    opacity: 1   }
}

.qc-handle {
  width: 38px; height: 4px;
  background: rgba(214,51,108,0.25);
  border-radius: 2px;
  margin: 10px auto 0;
}

.qc-header {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(214,51,108,0.12);
}

.qc-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(214,51,108,0.22);
}

.qc-header-info { flex: 1; min-width: 0; }
.qc-user-name {
  font-size: 0.92rem; font-weight: 700;
  color: #1a1a1a; line-height: 1.2; margin-bottom: 6px;
}

.qc-audience-pills {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.qc-aud-pill {
  padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600;
  border: 1.5px solid rgba(0,0,0,0.15);
  background: transparent; color: #1a1a1a;
  cursor: pointer; transition: all 0.15s ease; white-space: nowrap;
}
.qc-aud-pill.qc-aud-active {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(224, 80, 112, 0.35);
}

.qc-close-btn {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,0.05); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #1a1a1a;
  transition: background 0.15s;
}
.qc-close-btn:hover { background: rgba(0,0,0,0.08); }

.qc-textarea {
  display: block; width: 100%; box-sizing: border-box;
  padding: 14px 16px; margin: 0;
  background: transparent; border: none; outline: none;
  resize: none; font-size: 1rem; line-height: 1.55;
  color: #1a1a1a; font-family: inherit;
  min-height: 110px;
}
.qc-textarea::placeholder { color: rgba(0,0,0,0.30); }

.qc-img-remove {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.55); color: #fff; border: none;
  border-radius: 50%; width: 26px; height: 26px;
  cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.qc-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 4px;
  border-top: 1px solid rgba(214,51,108,0.12);
}

.qc-tools { display: flex; gap: 2px; }
.qc-tool-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 12px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer;
  color: #1a1a1a; font-size: 0.67rem; font-weight: 600;
  transition: background 0.15s;
}
.qc-tool-btn:hover { background: rgba(0,0,0,0.05); }
.qc-tool-btn svg { stroke: #1a1a1a; }

.qc-post-btn {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%);
  color: #fff; border: none; border-radius: 50px;
  padding: 10px 22px; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.01em;
  box-shadow: 0 4px 16px rgba(224, 80, 112, 0.40);
  transition: opacity 0.15s, transform 0.15s;
}
.qc-post-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.qc-post-btn:active { transform: scale(0.97); opacity: 1; }
.qc-post-btn svg { stroke: #fff; flex-shrink: 0; }

/* Dark mode for compose sheet */
:root[data-theme="dark"] .qc-sheet {
  background: #1A1208;
}
:root[data-theme="dark"] .qc-textarea { color: #F0E8DF; }
:root[data-theme="dark"] .qc-user-name { color: #F0E8DF; }
:root[data-theme="dark"] .qc-aud-pill { color: #D4878A; border-color: rgba(214,51,108,0.4); }
:root[data-theme="dark"] .qc-tool-btn { color: #D4878A; }
:root[data-theme="dark"] .qc-close-btn { color: #D4878A; background: rgba(214,51,108,0.15); }
:root[data-theme="dark"] .qc-handle { background: rgba(214,51,108,0.35); }
/* Fix: pre-existing .qc-sheet{transform:translateY(100%)} from old meetup wizard
   My overlay uses .qc-overlay (not .qc-modal), so the old reset never fires.
   Override here, scoped to only the new overlay. */
.qc-overlay .qc-sheet {
  transform: none !important;
  background: #FFFBF7 !important;
}
:root[data-theme="dark"] .qc-overlay .qc-sheet {
  background: #1A1208 !important;
}
/* -- end v20260601.6 -- */

/* --------------------------------------------------------------------------
   v20260602.1 � Comprehensive UI Enhancement
   Companion wizard � Messages fixes � Profile redesign � Home tweaks
   -------------------------------------------------------------------------- */

/* -- Companion search bar ----------------------------------------------- */
.comp-search-wrap { padding: 12px 14px 4px; }
.comp-search-pill {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid rgba(214,51,108,0.18);
  border-radius: 30px; padding: 10px 14px;
  box-shadow: 0 2px 14px rgba(214,51,108,0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.comp-search-pill:focus-within {
  border-color: rgba(214,51,108,0.55);
  box-shadow: 0 4px 20px rgba(214,51,108,0.16);
}
.comp-search-pill > svg { flex-shrink: 0; color: #D6336C; opacity: 0.7; }
.comp-search-pill input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 0.87rem; color: #1A1A1A; font-family: inherit;
}
.comp-search-pill input::placeholder { color: rgba(0,0,0,0.35); }
.comp-search-clear {
  flex-shrink: 0; width: 22px; height: 22px;
  background: rgba(214,51,108,0.12); border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #D6336C; transition: background 0.15s; padding: 0;
}
.comp-search-clear:hover { background: rgba(214,51,108,0.28); }
.comp-search-clear.hidden { display: none !important; }

/* -- Post Request button (hero style) ---------------------------------- */
.comp-post-btn-new {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: #D6336C;
  border: 2px solid rgba(255,255,255,0.7); border-radius: 30px;
  padding: 10px 24px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.comp-post-btn-new:hover { background: rgba(255,255,255,0.92); transform: scale(1.02); box-shadow: 0 4px 20px rgba(0,0,0,0.22); }
.comp-post-btn-new:active { transform: scale(0.98); }

/* -- Companion Wizard overlay + sheet ---------------------------------- */
.comp-wiz-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(28,14,8,0.52); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity 0.25s;
}
.comp-wiz-overlay.comp-wiz-in { opacity: 1; }
.comp-wiz-overlay > .comp-wiz-sheet {
  transform: translateY(60px);
  transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1);
}
.comp-wiz-overlay.comp-wiz-in > .comp-wiz-sheet { transform: translateY(0); }
.comp-wiz-sheet {
  width: 100%; max-width: 540px;
  background: #FFFBF7; border-radius: 24px 24px 0 0;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}
.cw-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(214,51,108,0.22); margin: 10px auto 0;
}
.cw-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 4px;
}
.cw-title { font-size: 1rem; font-weight: 700; color: #1C0E08; }
.cw-back-btn, .cw-close-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: #F5EDE4; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #7A5C3E; transition: background 0.15s; flex-shrink: 0;
}
.cw-back-btn:hover, .cw-close-btn:hover { background: #EDE0D4; }
.cw-progress-bar {
  height: 3px; background: #F0E8E0; margin: 8px 16px 0;
  border-radius: 2px; overflow: hidden;
}
.cw-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #D6336C, #B32050);
  border-radius: 2px; transition: width 0.32s ease;
}
.cw-step-indicator {
  text-align: center; font-size: 0.68rem; color: #C4A882;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 4px 0 0;
}
.cw-content { padding: 12px 20px 8px; min-height: 180px; }
.cw-step-label { font-size: 1.12rem; font-weight: 700; color: #1C0E08; margin-bottom: 4px; }
.cw-step-sub { font-size: 0.8rem; color: #7A5C3E; margin-bottom: 16px; }
.cw-dest-wrap {
  display: flex; align-items: center; gap: 10px;
  background: #FAF7F2; border: 1.5px solid rgba(214,51,108,0.22);
  border-radius: 14px; padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cw-dest-wrap:focus-within { border-color: #D6336C; box-shadow: 0 0 0 3px rgba(214,51,108,0.1); }
.cw-dest-wrap > svg { color: #D6336C; flex-shrink: 0; }
.cw-dest-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 0.98rem; color: #1C0E08; font-family: inherit;
}
.cw-dest-input::placeholder { color: rgba(0,0,0,0.35); }
.cw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #FAF7F2; border: 1.5px solid #E8DDD4;
  border-radius: 30px; padding: 8px 14px;
  font-size: 0.83rem; color: #3D2A1C; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.cw-chip-icon { font-size: 1.05rem; }
.cw-chip.active {
  background: linear-gradient(135deg, #D6336C, #B32050);
  border-color: #B32050; color: #fff;
  box-shadow: 0 2px 8px rgba(214,51,108,0.28);
}
.cw-chip:not(.active):hover { border-color: #D6336C; background: #FFF0F6; }
.cw-budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cw-budget-btn {
  background: #FAF7F2; border: 1.5px solid #E8DDD4;
  border-radius: 16px; padding: 14px 10px;
  text-align: center; cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.cw-budget-icon { font-size: 1.7rem; display: block; margin-bottom: 5px; }
.cw-budget-label { font-size: 0.87rem; font-weight: 600; color: #1C0E08; }
.cw-budget-desc { font-size: 0.7rem; color: #9A7A60; margin-top: 2px; }
.cw-budget-btn.active {
  background: linear-gradient(135deg, #D6336C, #B32050);
  border-color: #B32050;
  box-shadow: 0 3px 12px rgba(214,51,108,0.28);
}
.cw-budget-btn.active .cw-budget-label,
.cw-budget-btn.active .cw-budget-desc { color: #fff; }
.cw-budget-btn:not(.active):hover { border-color: #D6336C; background: #FFF0F6; }

/* v20260530.7 - Seal messages/chat bottom background bleed */
#panel-messages .panel-scroll,
#panel-chat {
  background: #ffffff !important;
}

/* Ensure feed glass class never makes non-feed tabs look transparent */
#panel-messages .panel-scroll {
  background: #ffffff !important;
}

/* Keep chat list flush and opaque down to input area */
#panel-chat .chat-messages {
  background-color: #F5F0EA !important;
  background-image: none !important;
}

/* Remove decorative fixed wallpaper layer from messages list area */
#panel-messages .panel-scroll::before {
  content: none !important;
  display: none !important;
}

/* Remove deliberate transparent fade that reveals the wallpaper at the bottom */
#panel-chat .chat-input-bar::before {
  display: none !important;
}

/* Input bar and safe-area strip must stay fully opaque */
#panel-chat .chat-input-bar {
  background: #FAF7F2 !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,0.06) !important;
}

/* Guarantee the messages list starts tight under its header */
#conversationsList.card-list {
  margin-top: 0 !important;
}
.cw-date-row { display: flex; gap: 10px; margin-top: 16px; }
.cw-date-field { flex: 1; }
.cw-date-lbl {
  display: block; font-size: 0.68rem; color: #9A7A60;
  margin-bottom: 4px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.cw-date-input {
  width: 100%; box-sizing: border-box;
  background: #FAF7F2; border: 1.5px solid #E8DDD4;
  border-radius: 10px; padding: 8px 10px;
  font-size: 0.84rem; color: #1C0E08; font-family: inherit; outline: none;
}
.cw-date-input:focus { border-color: #D6336C; }
.cw-actions { padding: 8px 20px 20px; }
.cw-next-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 8px; background: linear-gradient(135deg, #D6336C, #B32050);
  color: #fff; border: none; border-radius: 16px;
  padding: 14px 20px; font-size: 0.93rem; font-weight: 700;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 4px 20px rgba(214,51,108,0.32);
  transition: transform 0.1s, box-shadow 0.15s;
}
.cw-next-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(214,51,108,0.42); }
.cw-next-btn:active:not(:disabled) { transform: scale(0.98); }
.cw-next-btn.disabled, .cw-next-btn:disabled { opacity: 0.48; cursor: not-allowed; }

/* -- Reduce quick-action grid height ------------------------------------ */
.dag-btn { padding: 8px 6px 7px !important; }
.dag-icon { width: 38px !important; height: 38px !important; }
.dag-label { font-size: 0.67rem !important; }

/* -- Reduce photo/video/ask row height ---------------------------------- */
.disc-create-types { padding: 5px 12px !important; }
.dct-icon { width: 27px !important; height: 27px !important; }
.disc-type-btn { font-size: 0.67rem !important; padding: 3px 4px !important; }

/* -- Home hero action buttons � subtle visibility boost ----------------- */
.disc-hero-actions {
  background: rgba(0,0,0,0.16) !important;
  border-radius: 30px !important;
  padding: 3px 5px !important;
}
.disc-hero-btn { text-shadow: 0 1px 4px rgba(0,0,0,0.45) !important; }
.disc-hero-btn svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) !important; }

/* -- Messages panel � faint background image ---------------------------- */
#panel-messages .panel-scroll { position: relative !important; }
#panel-messages .panel-scroll::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: none !important;
}
/* Extend conversation list to nav bar � remove white gap */
#conversationsList.card-list {
  padding-bottom: calc(var(--nav-total-h, 72px) + 16px) !important;
  min-height: calc(100vh - 180px) !important;
}

/* -- Messages header flush ---------------------------------------------- */
#panel-messages .chats-header {
  padding-top: max(env(safe-area-inset-top, 0px), 12px) !important;
  border-bottom: 1px solid rgba(214,51,108,0.1) !important;
}

/* -- Profile page enhancements ------------------------------------------ */
.prof-cover-section { height: 240px !important; }
.prof-body { padding-top: 64px !important; }
#panel-profile .prof-cover-section:not([style*="url("]) {
  background: #ffffff !important;
}
.prof-stats {
  border: 1.5px solid rgba(214,51,108,0.14) !important;
  box-shadow: 0 4px 24px rgba(214,51,108,0.09) !important;
  position: relative !important; overflow: hidden !important;
}
.prof-stats::after {
  content: ''; display: block;
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #D6336C, #E8858A);
  border-radius: 3px 3px 0 0;
}
.prof-stat-val { color: #D6336C !important; }
.prof-action-btn:hover, .prof-action-btn:focus {
  background: linear-gradient(135deg, #FFF0F6, #FFE8D6) !important;
  border-color: #D6336C !important;
}
.prof-xp-fill { background: linear-gradient(90deg, #D6336C, #E8858A) !important; }
.prof-name { font-size: 1.22rem !important; font-weight: 800 !important; letter-spacing: -0.01em !important; }
.prof-handle { color: #9A7A60 !important; }
.prof-avatar-circle {
  border-width: 3px !important;
  border-color: #FFFBF7 !important;
  box-shadow: 0 4px 18px rgba(214,51,108,0.22) !important;
}

/* -- end v20260602.1 -- */

/* --------------------------------------------------------------------------
   v20260603.1 � Session 2 Overhaul
   -------------------------------------------------------------------------- */

/* -- 1. Remove top-right profile avatar button globally ----------------- */
#screen-app .top-right > .btn-icon:last-child {
  display: none !important;
}

/* -- 2. Circles panel header � tighter spacing -------------------------- */
.circles-panel-head {
  padding: 10px 16px 6px !important;
}

/* -- 3. Home hero � better icon visibility + less padding --------------- */
.disc-hero {
  padding: 6px 14px 8px !important;
  min-height: 44px !important;
}
.disc-hero-actions {
  background: rgba(0,0,0,0.40) !important;
  border-radius: 30px !important;
  padding: 4px 8px !important;
  gap: 4px !important;
}
.disc-hero-btn {
  background: transparent !important;
  border: none !important;
  width: 32px !important; height: 32px !important;
  color: #fff !important;
}
.disc-hero-btn svg {
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7)) !important;
}
.disc-notif-dot { top: 3px !important; right: 3px !important; }

/* -- 4. Home panels � reduce size of create-post row and quick actions -- */
/* Outer bubble: no side padding, overflow:hidden + border-radius clips inner content */
.disc-create-types { padding: 3px 0 8px !important; gap: 0 !important; }
.disc-type-btn { font-size: 0.63rem !important; padding: 2px 2px !important; gap: 2px !important; }
.dct-icon { width: 23px !important; height: 23px !important; }
.disc-create-wrap { padding: 0 !important; margin: 6px 10px 4px !important; border-radius: 18px !important; background: var(--surface, #fff) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important; overflow: hidden !important; }
.disc-create-card { padding: 10px 12px !important; margin-bottom: 0 !important; }
.disc-actions-grid { padding: 6px 12px 4px !important; }
.dag-btn { padding: 6px 4px 5px !important; }
.dag-icon { width: 33px !important; height: 33px !important; }
.dag-label { font-size: 0.60rem !important; }

/* Between disc sections � tighter spacing */
.disc-section { margin: 0 10px 4px !important; }

/* -- 5. Feed filters ? first post � less gap ---------------------------- */
.disc-feed-tabs { margin-bottom: 2px !important; padding-bottom: 0 !important; }
/* feedList top padding set at the end of file to avoid duplication */

/* -- 6. Chat list � reduce item height, remove gap above list ----------- */
.conversation-item { padding: 7px 14px !important; }
.conv-avatar-wrap { width: 42px !important; height: 42px !important; flex-shrink: 0 !important; }
.group-avatar { width: 42px !important; height: 42px !important; border-radius: 50% !important; font-size: 0.85rem !important; }
#chatsHeader { margin-bottom: 0 !important; }
#panel-messages .panel-scroll { gap: 0 !important; }
/* Remove extra top space in the conversations scroll area */
#conversationsList.card-list { padding-top: 0 !important; }

/* -- 7. Hero background crossfade layers -------------------------------- */
.disc-hero-bg-layer {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  transition: opacity 1.2s ease-in-out;
}

/* -- 8. Profile v2 � premium redesign ---------------------------------- */
.profv2-wrap {
  display: flex; flex-direction: column;
  min-height: 100%;
  background: #ffffff !important;
  padding-bottom: calc(var(--nav-total-h, 72px) + 16px);
}
.profv2-cover {
  position: relative;
  height: 170px;
  background: #ffffff !important;
  background-size: cover; background-position: center top;
  flex-shrink: 0;
}
.profv2-cover-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.45) 100%);
}
.profv2-settings-btn {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
}
.profv2-settings-menu {
  position: absolute; top: 56px; right: 12px; z-index: 10;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(28,14,8,0.18);
  padding: 6px 0;
  min-width: 190px;
  overflow: hidden;
}
.profv2-settings-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 18px;
  background: none; border: none;
  text-align: left; font-size: 0.9rem; color: #1C0E08;
  cursor: pointer; font-weight: 500;
}
.profv2-settings-menu button:hover { background: #FFF0F6; }
.profv2-settings-menu .prof-menu-danger { color: #DC2626 !important; }
.profv2-menu-divider { height: 1px; background: rgba(214,51,108,0.12); margin: 3px 0; }

/* Avatar */
.profv2-avatar-wrap {
  position: relative;
  margin: -44px 20px 0 20px;
  width: 86px; height: 86px;
  border-radius: 50%;
  border: 3px solid #FFFBF7;
  box-shadow: 0 4px 18px rgba(214,51,108,0.28);
  overflow: visible;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 2;
}
.profv2-avatar {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, #D6336C, #B32050);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.profv2-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profv2-avatar .prof-av-initials { font-size: 1.8rem; font-weight: 800; color: #fff; }
.profv2-avatar-edit {
  position: absolute; bottom: -2px; right: -2px;
  width: 24px; height: 24px;
  background: #D6336C;
  border-radius: 50%; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
}

/* Identity block */
.profv2-identity {
  padding: 10px 20px 4px;
}
.profv2-name {
  font-size: 1.3rem; font-weight: 800;
  color: #1C0E08; letter-spacing: -0.02em;
  line-height: 1.2;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.profv2-handle { color: #888; font-size: 0.85rem; margin-top: 1px; }
.profv2-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.profv2-section-label {
  font-size: 0.72rem; font-weight: 700; color: #999;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 10px; margin-bottom: 2px;
}
.profv2-bio {
  font-size: 0.88rem; line-height: 1.5;
  color: #1a1a1a;
}
.profv2-info-grid {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.profv2-info-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; color: #444;
}
.profv2-info-icon { font-size: 0.9rem; flex-shrink: 0; }

/* Stats card */
.profv2-stats-card {
  margin: 10px 14px 4px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(214,51,108,0.13);
  border-radius: 16px;
  display: flex; align-items: center;
  padding: 12px 6px;
  box-shadow: 0 2px 12px rgba(214,51,108,0.08);
}
.profv2-stat {
  flex: 1; text-align: center;
  border-right: 1px solid rgba(214,51,108,0.12);
  padding: 0 4px;
}
.profv2-stat:last-child { border-right: none; }
.profv2-stat-val {
  font-size: 1.2rem; font-weight: 800; color: #D6336C;
  line-height: 1;
}
.profv2-stat-lbl { font-size: 0.66rem; color: #888; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }

/* XP bar */
.profv2-xp-wrap { padding: 4px 14px 0; }

/* Quick action tiles */
.profv2-tiles-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 8px 14px 2px;
}
.profv2-tile {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(214,51,108,0.12);
  border-radius: 14px;
  padding: 12px 6px 10px;
  text-align: center;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: background 0.15s;
}
.profv2-tile:hover, .profv2-tile:active { background: #FFF0F6; }
.profv2-tile-icon { font-size: 1.4rem; line-height: 1; }
.profv2-tile-lbl { font-size: 0.65rem; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.profv2-tile-val { font-size: 0.9rem; font-weight: 800; color: #1C0E08; }

/* Section headers */
.profv2-section { margin: 10px 14px 4px; }
.profv2-section-hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.profv2-section-title { font-size: 0.95rem; font-weight: 700; color: #1C0E08; }
.profv2-section-link { font-size: 0.8rem; color: #D6336C; font-weight: 600; cursor: pointer; background: none; border: none; }

/* Posts section */
.profv2-posts-wrap { margin: 6px 14px 10px; }

/* -- 9. Trips Instagram grid -------------------------------------------- */
.trips-page-wrap { display: flex; flex-direction: column; min-height: 100%; }
.trips-page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 10px;
  background: #FAF7F2; flex-shrink: 0;
}
.trips-page-title { font-size: 1.6rem; font-weight: 800; color: #1C0E08; }
.trips-ai-fab {
  background: linear-gradient(135deg, #D6336C, #E8858A);
  color: #fff; border: none; border-radius: 22px;
  padding: 8px 16px; font-size: 0.82rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 3px 14px rgba(214,51,108,0.35);
}
.trips-insta-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 6px 14px 16px;
}
.trip-insta-card {
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(28,14,8,0.12);
  cursor: pointer;
  aspect-ratio: 4/5;
  position: relative;
}
.trip-insta-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  background-color: #D6336C;
  transition: transform 0.2s;
}
.trip-insta-card:active .trip-insta-img { transform: scale(0.97); }
.trip-insta-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.12) 55%, transparent 100%);
}
.trip-insta-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 12px 12px;
  color: #fff;
}
.trip-insta-dest {
  font-size: 0.92rem; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.trip-insta-dates {
  font-size: 0.72rem; opacity: 0.88; margin-top: 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.trips-empty-state {
  text-align: center; padding: 60px 30px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.trips-empty-icon { font-size: 3.5rem; }
.trips-empty-title { font-size: 1.15rem; font-weight: 700; color: #1C0E08; }
.trips-empty-sub { font-size: 0.88rem; color: #9A7A60; line-height: 1.4; }
.trips-empty-btn {
  background: linear-gradient(135deg, #D6336C, #E8858A);
  color: #fff; border: none; border-radius: 22px;
  padding: 11px 24px; font-size: 0.9rem; font-weight: 700;
  cursor: pointer; margin-top: 6px;
  box-shadow: 0 3px 14px rgba(214,51,108,0.35);
}

/* -- end v20260603.1 -- */

/* -- v20260531.2 � UI polish: nav icons only, hide camera, hide action grid, feed tabs, bg fix, tick -- */

/* Nav bar � icons only, no labels */
.nav-label { display: none !important; }
/* Increase nav icon size slightly now labels are gone */
.nav-btn svg { width: 24px !important; height: 24px !important; }

/* Profile page � hide camera/edit overlay on avatar */
.profv2-avatar-edit { display: none !important; }

/* Home page � hide the quick-actions grid (Meet People / Create Meetup / Explore Nearby) */
.disc-actions-grid { display: none !important; }

/* Home page � hide the feed filter sub-tabs (For You / Nearby / Following / Meetups / Questions) */
#discFeedTabs { display: none !important; }

/* Home page � remove forced plain-white background; let theme --bg show */
#panel-messages { background: var(--bg, #FAF7F2) !important; }
#panel-messages .panel-scroll { background: var(--bg, #FAF7F2) !important; }

/* Force homepage discover feed surfaces white after theme overrides */
#panel-messages,
#panel-messages .panel-scroll,
#panel-messages .panel-scroll.disc-feed-active,
#feedList.feed-tab-list,
#panel-messages .feed-post-card,
#panel-home,
#panel-home .disc-hero,
#panel-home .disc-hero-bg,
#panel-home .disc-hero::before,
#panel-home .disc-hero-bg::before,
#panel-home::before,
#panel-messages .discover-home,
#panel-messages .discover-home .disc-hero,
#panel-messages .discover-home .disc-hero-bg,
#panel-messages .discover-home .disc-hero::before,
#panel-messages .discover-home .disc-hero-bg::before,
#panel-messages .discover-home .disc-hero-bg-layer,
#panel-messages .discover-home .disc-hero-overlay {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}
:root[data-theme="mixed"] #screen-app,
:root[data-theme="mixed"] #panel-messages,
:root[data-theme="mixed"] #panel-messages .panel-scroll,
:root[data-theme="mixed"] #panel-messages .panel-scroll.disc-feed-active,
:root[data-theme="mixed"] #panel-messages .feed-post-card,
:root[data-theme="mixed"] #panel-home,
:root[data-theme="mixed"] #panel-home .disc-hero,
:root[data-theme="mixed"] #panel-home .disc-hero-bg,
:root[data-theme="mixed"] #panel-home .disc-hero::before,
:root[data-theme="mixed"] #panel-home .disc-hero-bg::before,
:root[data-theme="mixed"] #panel-home::before {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}
#screen-app:has(#panel-messages.active) .top-bar,
#screen-app:has(#panel-messages.active) .top-bar.sticky-top,
#screen-app:has(#panel-messages.active) #screen-app > .top-bar {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Conv-tick � single tick is already sized correctly; double-tick second path colour */
.conv-tick { display: inline-flex; align-items: center; margin-right: 2px; color: var(--muted); }
.conv-tick-read { color: #2563EB; }
.conv-tick-read .conv-tick-second { color: #2563EB; }

/* -- Call overlay -- */
.call-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(1.04);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.call-overlay.call-overlay-in { opacity: 1; transform: scale(1); }
.call-overlay.call-overlay-out { opacity: 0; transform: scale(0.96); }
.call-bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #1a0a04 0%, #1A0A14 60%, #0d0605 100%);
}
.call-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.6rem; padding: 2.5rem 1.5rem 3rem; width: 100%;
}
.call-status-lbl {
  font-size: 0.85rem; color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.call-avatar {
  width: 88px; height: 88px; border-radius: 50%;
  color: #fff; font-size: 2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.5);
  margin: 0.5rem 0;
}
.call-name {
  font-size: 1.5rem; font-weight: 600; color: #fff;
  letter-spacing: 0.01em;
}
.call-timer {
  font-size: 0.95rem; color: rgba(255,255,255,0.75);
  font-variant-numeric: tabular-nums; letter-spacing: 0.05em;
}
.call-pulse { display: flex; gap: 8px; height: 20px; align-items: center; margin: 0.4rem 0; }
.call-pulse span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  animation: callPulse 1.2s ease-in-out infinite;
}
.call-pulse span:nth-child(2) { animation-delay: 0.2s; }
.call-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes callPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.4; }
  50%       { transform: scale(1.2); opacity: 1;   }
}
.call-actions {
  display: flex; gap: 2rem; margin-top: 2.5rem; align-items: flex-end;
}
.call-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
  width: 58px; height: 58px; cursor: pointer;
  color: #fff; font-size: 0.7rem; transition: background 0.2s;
  justify-content: center;
}
.call-action-btn span { font-size: 0.68rem; margin-top: 2px; }
.call-action-btn:hover { background: rgba(255,255,255,0.22); }
.call-action-btn.call-action-active { background: rgba(255,255,255,0.35); }
.call-end-btn {
  background: #e53e3e !important;
  width: 66px; height: 66px; border-radius: 50% !important;
}
.call-end-btn:hover { background: #c53030 !important; }
/* Chat call button styling */
#chatCallBtn { color: var(--primary, #D6336C) !important; }
/* Incoming call � accept green, reject red */
.call-accept-btn { background: #22c55e !important; }
.call-accept-btn:hover { background: #16a34a !important; }
.call-reject-btn { background: #e53e3e !important; }
.call-reject-btn:hover { background: #c53030 !important; }
/* -- end v20260531.2 -- */

/* -- v20260604.1 � circles fab brown, verified tick, pin menu, font consistency, trip planner extras -- */

/* Circles FAB: pink gradient */
.circles-fab { background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important; box-shadow: 0 4px 20px rgba(224, 80, 112, 0.45) !important; }
.circles-fab:hover { background: linear-gradient(135deg, #F47080 0%, #E86278 50%, #D85570 100%) !important; }

/* Verified brown tick next to name */
.profv2-verified-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #16a34a;
  color: #fff;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 800;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

/* Conversation context menu */
.conv-ctx-menu {
  background: var(--card, #fff);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  overflow: hidden;
  min-width: 180px;
  animation: fadeIn 0.12s ease;
}
.conv-ctx-menu button {
  display: block;
  width: 100%;
  padding: 13px 18px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border, #f0ece8);
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--text);
}
.conv-ctx-menu button:last-child { border-bottom: none; }
.conv-ctx-menu button.danger { color: var(--danger, #e53e3e); }
.conv-ctx-menu button:hover { background: var(--surface, #fdf9f6); }

/* Conversation 3-dot dropdown — always white */
.chat-conv-menu {
  background: #fff !important;
}
.chat-conv-menu-item {
  color: #1a1a1a !important;
}
:root[data-theme="dark"] .chat-conv-menu {
  background: #1e1e1e !important;
}
:root[data-theme="dark"] .chat-conv-menu-item {
  color: #e0e0e0 !important;
}

/* Chat overflow (3-dot) menu — positioned via JS */
.chat-more-menu {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
  overflow: hidden;
  min-width: 210px;
  animation: fadeIn 0.12s ease;
}
.chat-more-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 18px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #f0ece8;
  font-size: 0.95rem;
  cursor: pointer;
  color: #1a1a1a;
}
.chat-more-menu button:last-child { border-bottom: none; }
.chat-more-menu button:hover { background: #fdf9f6; }
:root[data-theme="dark"] .chat-more-menu {
  background: #1e1e1e;
}
:root[data-theme="dark"] .chat-more-menu button {
  color: #e0e0e0;
  border-color: #333;
}
:root[data-theme="dark"] .chat-more-menu button:hover {
  background: #2a2a2a;
}

/* Inline add-contact search panel — dark mode override (inline styles are light) */
:root[data-theme="dark"] #chatsAddContact {
  background: #1e1e1e !important;
}
:root[data-theme="dark"] #chatsContactSearchInput {
  background: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Contact search results — always white cards */
#chatsContactResults .card {
  background: #fff !important;
  border: 1px solid #e0dcd5 !important;
  color: #1a1a1a !important;
}
#chatsContactResults .card:hover {
  background: #fdf9f6 !important;
}
:root[data-theme="dark"] #chatsContactResults .card {
  background: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}
:root[data-theme="dark"] #chatsContactResults .card:hover {
  background: #333 !important;
}

/* Pinned conversation indicator */
.conv-pin-icon { font-size: 0.75rem; margin-right: 3px; opacity: 0.7; }

/* Page/panel headings: use consistent sans title style */
.circles-panel-title,
.trips-page-title,
.panel-title,
.profv2-name,
#msgHomeTitle {
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  letter-spacing: -0.01em !important;
}

.circles-panel-title {
  font-weight: 800 !important;
  font-size: 1.5rem !important;
}

/* Trip planner: Other text input, search input */
.tp-other-input-wrap {
  width: 100%;
  margin-top: 10px;
  padding: 0 2px;
}
.tp-other-input-wrap.hidden { display: none; }
.tp-other-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border, #e8e0d8);
  border-radius: 10px;
  font-size: 0.95rem;
  background: var(--card, #fff);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}
.tp-other-input:focus { border-color: var(--primary, #D6336C); }

/* -- end v20260604.1 -- */

/* -- v20260604.2 � full theme propagation: dark profile, splash tint, buttons, fill-page -- */

/* --- Base: ensure --primary-rgb exists for all themes --- */
:root                         { --primary-rgb: 12 168 168; }
:root[data-theme="light"]     { --primary-rgb: 12 168 168; --text-dim: #5A6A80; --gold-lt: #B8872E; --border-soft: rgba(0,0,0,0.10); --surface-alt: #EEF2F8; }
:root[data-theme="dark"]      { --primary-rgb: 12 168 168; --text-dim: #7A8BA8; --gold-lt: #E0B860; --border-soft: rgba(255,255,255,0.07); --surface-alt: #1E2435; }
:root[data-theme="default"]   { --primary-rgb: 214 51 108; --text-dim: #1a1a1a; --gold-lt: #B8872E; --border-soft: rgba(214,51,108,0.14); --surface-alt: #EDE5DA; }
:root[data-theme="mixed"]     { --primary-rgb: 13 148 136; --text-dim: #4B5563; --gold-lt: #FDA4AF; --border-soft: rgba(13,148,136,0.12); --surface-alt: #CCFBF1; }
:root[data-theme="blue"]      { --primary-rgb: 37 99 235;  --text-dim: #4A5A7A; --gold-lt: #B8872E; --border-soft: rgba(37,99,235,0.12); --surface-alt: #EEF2FF; }
:root[data-theme="green"]     { --primary-rgb: 5 150 105;  --text-dim: #3A5A48; --gold-lt: #B8872E; --border-soft: rgba(5,150,105,0.12); --surface-alt: #ECFDF5; }

/* --- Loader/splash: tint overlay matches active theme --- */
.app-loader-city-overlay {
  background: rgba(var(--primary-rgb), 0.66) !important;
}
#screen-splash .sc-auth-bg::after {`n  content: """";`n  position: absolute;`n  inset: 0;`n  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.40) 100%);`n  mix-blend-mode: normal;`n}
#screen-splash .splash-bg {
  background: linear-gradient(168deg,
    rgb(var(--primary-rgb)) 0%,
    rgba(var(--primary-rgb), 0.75) 55%,
    rgba(0,0,0,0.60) 100%) !important;
}
/* splash onboarding CTA color */
#screen-splash .onboarding { background: linear-gradient(to top, rgba(var(--primary-rgb),0.97) 60%, transparent) !important; }
#screen-splash .onboarding-dots .dot.active { background: rgb(var(--primary-rgb)) !important; }

/* --- Global primary-themed buttons (non-login) --- */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lt, color-mix(in srgb, var(--primary) 80%, white)) 100%) !important;
  color: #fff !important;
}
.btn-primary:hover { filter: brightness(1.1) !important; }

/* Up-action (other user profile) buttons: use theme primary */
.up-action-btn {
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.3) !important;
}
.up-action-btn--gold {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* --- Other-user profile: fill page, no side padding --- */
.up-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.up-avatar-circle { margin-left: 16px !important; }
.up-name, .up-username { padding: 0 16px; }
.up-stats { margin: 0 0 0 !important; border-radius: 0 !important; }
.up-action-row { padding: 0 16px !important; }
.up-posts-section { padding: 0 16px !important; }
.up-section-title { padding: 0; }

/* --- Other-user profile: dark theme --- */
#panel-user-profile { background: var(--bg) !important; }
.up-topbar {
  background: rgba(var(--primary-rgb), 0.06) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.up-back-btn { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; }
.up-topbar-title { color: var(--text) !important; }
.up-body { background: var(--bg) !important; }
.up-name { color: var(--text) !important; }
.up-username { color: var(--muted) !important; }
.up-stats { background: var(--card) !important; box-shadow: 0 1px 0 var(--border) !important; }
.up-stat-val { color: var(--text) !important; }
.up-stat-lbl { color: var(--muted) !important; }
.up-stat-sep { background: var(--border) !important; }
.up-section-title { color: var(--text) !important; }
.up-avatar-circle { border-color: var(--bg) !important; }
.up-cover-section {
  background: linear-gradient(150deg,
    rgba(var(--primary-rgb), 0.8) 0%,
    rgba(var(--primary-rgb), 0.45) 55%,
    rgba(0,0,0,0.55) 100%) !important;
}

/* --- Own profile (profv2): dark theme + theme-colour --- */
.profv2-wrap { background: var(--bg) !important; }
.profv2-name { color: var(--text) !important; }
.profv2-handle { color: var(--muted) !important; }
.profv2-bio { color: var(--text) !important; }
.profv2-stats-card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.07) !important;
}
.profv2-stat-val { color: var(--primary) !important; }
.profv2-stat-lbl { color: var(--muted) !important; }
.profv2-stat { border-color: var(--border) !important; }
/* Settings gear menu */
.profv2-settings-menu {
  background: var(--card) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28) !important;
}
.profv2-settings-menu button { color: var(--text) !important; }
.profv2-settings-menu button:hover { background: var(--surface) !important; }
.profv2-menu-divider { background: var(--border) !important; }
/* Avatar border matches bg */
.profv2-avatar-wrap { border-color: var(--bg) !important; }
/* Cover: theme gradient */
.profv2-cover {
  background: linear-gradient(160deg,
    rgba(var(--primary-rgb), 0.9) 0%,
    rgba(var(--primary-rgb), 0.55) 50%,
    rgba(0,0,0,0.65) 100%) !important;
}

/* Tiles (quick action tiles on profile) */
.profv2-tiles-row .prof-tile { background: var(--card) !important; border-color: var(--border) !important; color: var(--text) !important; }
.profv2-tiles-row .prof-tile-lbl { color: var(--muted) !important; }

/* XP bar */
.profv2-xp-bar-fill { background: var(--primary) !important; }
.profv2-xp-bar { background: var(--surface) !important; }

/* Posts on own profile */
.profv2-posts-section { background: var(--bg) !important; }

/* --- Other theme-aware interactive elements --- */
/* Floating action button primary color */
.fab-toggle-btn, #fabToggleBtn { background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important; box-shadow: 0 4px 16px rgba(224, 80, 112, 0.40) !important; }

/* Tab active indicator */
.msg-tab.active, .feed-tab.active, .circle-tab.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
}

/* Form focus rings */
input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15) !important;
}

/* Chips (trip planner / circle wizard) active */
.tp-chip.selected, .qc-chip.selected, .chip.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* -- end v20260604.2 -- */

/* -- v20260604.3 � full theme propagation: nav FAB, dark/blue/green everywhere -- */

/* -- 1. NAV CENTER PLUS BUTTON � follows theme color --- */
.nav-fab-inner {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-lt, color-mix(in srgb, var(--primary) 80%, white)) 60%, var(--primary-dk, color-mix(in srgb, var(--primary) 80%, black)) 100%) !important;
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.50), 0 2px 6px rgba(0,0,0,0.22) !important;
  color: #fff !important;
}
.nav-fab-inner svg { stroke: #fff !important; fill: none !important; }

/* Specific theme gradients (for browsers that don't support color-mix) */
:root[data-theme="default"] .nav-fab-inner { background: linear-gradient(135deg, #D6336C 0%, #D6336C 60%, #B32050 100%) !important; box-shadow: 0 4px 20px rgba(214,51,108,0.50), 0 2px 6px rgba(0,0,0,0.22) !important; }
:root[data-theme="dark"]    .nav-fab-inner { background: linear-gradient(135deg, #0EA5E9 0%, #0CA8A8 55%, #0A7A7A 100%) !important; box-shadow: 0 4px 18px rgba(12,168,168,0.50), 0 1px 4px rgba(0,0,0,0.3) !important; }
:root[data-theme="blue"]    .nav-fab-inner { background: linear-gradient(135deg, #3B82F6 0%, #2563EB 60%, #1D4ED8 100%) !important; box-shadow: 0 4px 18px rgba(37,99,235,0.55), 0 1px 4px rgba(0,0,0,0.2) !important; }
:root[data-theme="green"]   .nav-fab-inner { background: linear-gradient(135deg, #10B981 0%, #059669 60%, #047857 100%) !important; box-shadow: 0 4px 18px rgba(5,150,105,0.55), 0 1px 4px rgba(0,0,0,0.18) !important; }
:root[data-theme="light"]   .nav-fab-inner { background: linear-gradient(135deg, #0CA8A8 0%, #0A8A8A 100%) !important; box-shadow: 0 4px 18px rgba(12,168,168,0.45), 0 1px 4px rgba(0,0,0,0.15) !important; }

/* -- 2. LOADER / SPLASH � theme tint over background image --- */
/* Dark: keep photo, light dark tint so image still shows through */
:root[data-theme="dark"] .app-loader-city-overlay {
  background: rgba(0,0,0,0.42) !important;
}
:root[data-theme="dark"] .app-loader-people-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%) !important;
}
/* Blue/green/light: photo bg kept, tint is the theme primary */
:root[data-theme="blue"] .app-loader-city-overlay  { background: rgba(37,99,235,0.62) !important; }
:root[data-theme="green"] .app-loader-city-overlay { background: rgba(5,150,105,0.62) !important; }
:root[data-theme="light"] .app-loader-city-overlay { background: rgba(12,168,168,0.55) !important; }

/* Splash tint per theme */
:root[data-theme="dark"] #screen-splash .sc-auth-bg::after  { background: rgba(0,0,0,0.42) !important; }
:root[data-theme="blue"] #screen-splash .sc-auth-bg::after  { background: rgba(37,99,235,0.66) !important; }
:root[data-theme="green"] #screen-splash .sc-auth-bg::after {`n  content: """";`n  position: absolute;`n  inset: 0;`n  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.40) 100%);`n  mix-blend-mode: normal;`n}
:root[data-theme="default"] #screen-splash .sc-auth-bg::after {`n  content: """";`n  position: absolute;`n  inset: 0;`n  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.40) 100%);`n  mix-blend-mode: normal;`n}

/* Splash gradient bg per theme */
:root[data-theme="dark"]  #screen-splash .splash-bg { background: linear-gradient(168deg, #050505 0%, #0A1818 60%, #000 100%) !important; }
:root[data-theme="blue"]  #screen-splash .splash-bg { background: linear-gradient(168deg, #3B82F6 0%, #1D4ED8 55%, #1e3a8a 100%) !important; }
:root[data-theme="green"] #screen-splash .splash-bg { background: linear-gradient(168deg, #10B981 0%, #047857 55%, #064e3b 100%) !important; }

/* Onboarding CTA strip per theme */
:root[data-theme="dark"]  #screen-splash .onboarding { background: linear-gradient(to top, rgba(0,0,0,0.98) 65%, transparent) !important; }
:root[data-theme="blue"]  #screen-splash .onboarding { background: linear-gradient(to top, rgba(29,78,216,0.97) 65%, transparent) !important; }
:root[data-theme="green"] #screen-splash .onboarding { background: linear-gradient(to top, rgba(4,120,87,0.97) 65%, transparent) !important; }
:root[data-theme="dark"]  #screen-splash .onboarding-dots .dot.active { background: #0CA8A8 !important; }
:root[data-theme="blue"]  #screen-splash .onboarding-dots .dot.active { background: #93C5FD !important; }
:root[data-theme="green"] #screen-splash .onboarding-dots .dot.active { background: #6EE7B7 !important; }

/* -- 3. HOMEPAGE HERO � no background photo for any theme, solid surface --- */
.disc-hero {
  background: var(--surface) !important;
}
.disc-hero-bg-layer { opacity: 0 !important; display: none !important; }
/* Tinted overlay: use primary colour so text contrast works on solid bg */
.disc-hero-overlay {
  background: linear-gradient(170deg, rgba(var(--primary-rgb),0.12) 0%, rgba(0,0,0,0.04) 100%) !important;
}
/* Location + action buttons: readable on solid surface */
.disc-location-btn {
  background: rgba(0,0,0,0.14) !important;
  border-color: rgba(0,0,0,0.18) !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.disc-location-btn svg { stroke: #fff !important; }
/* Right-side action buttons keep white icons */
.disc-hero-btn {
  background: rgba(0,0,0,0.22) !important;
  border-color: rgba(0,0,0,0.14) !important;
  color: #fff !important;
}
.disc-hero-btn svg { stroke: #fff !important; }
.disc-hero-actions { background: rgba(0,0,0,0.18) !important; }

/* -- 4. PANELS / CARDS � blue theme --- */
:root[data-theme="blue"] .card,
:root[data-theme="blue"] .modal-content,
:root[data-theme="blue"] .panel { background: var(--card); color: var(--text); }
:root[data-theme="blue"] .section-head,
:root[data-theme="blue"] .section-title { color: var(--text) !important; }
/* Subtle blue surface tint on interactive items */
:root[data-theme="blue"] .chip:not(.selected),
:root[data-theme="blue"] .tp-chip:not(.selected),
:root[data-theme="blue"] .qc-chip:not(.selected) {
  border-color: rgba(37,99,235,0.22) !important;
  color: var(--text);
}
:root[data-theme="blue"] .chip.selected,
:root[data-theme="blue"] .tp-chip.selected,
:root[data-theme="blue"] .qc-chip.selected {
  background: #2563EB !important; color: #fff !important; border-color: #2563EB !important;
}
:root[data-theme="blue"] .btn-primary { background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important; box-shadow: 0 3px 12px rgba(37,99,235,0.32) !important; }
:root[data-theme="blue"] .up-action-btn--gold { background: #2563EB !important; border-color: #2563EB !important; }
:root[data-theme="blue"] .up-action-btn { color: #2563EB !important; border-color: rgba(37,99,235,0.3) !important; }
:root[data-theme="blue"] .circles-fab { background: #2563EB !important; box-shadow: 0 4px 20px rgba(37,99,235,0.45) !important; }
:root[data-theme="blue"] .circles-fab:hover { background: #1D4ED8 !important; }
:root[data-theme="blue"] .profv2-stat-val { color: #2563EB !important; }
:root[data-theme="blue"] .profv2-cover { background: linear-gradient(160deg, rgba(59,130,246,0.9) 0%, rgba(37,99,235,0.55) 50%, rgba(0,0,0,0.65) 100%) !important; }
:root[data-theme="blue"] .up-cover-section { background: linear-gradient(150deg, rgba(37,99,235,0.8) 0%, rgba(59,130,246,0.45) 55%, rgba(0,0,0,0.5) 100%) !important; }
/* Blue: card borders get a subtle blue tint */
:root[data-theme="blue"] .card { border-color: rgba(37,99,235,0.10) !important; }
:root[data-theme="blue"] .conv-unread { background: #2563EB !important; }
:root[data-theme="blue"] .profv2-verified-tick { background: #2563EB !important; }

/* -- 5. PANELS / CARDS � green theme --- */
:root[data-theme="green"] .card,
:root[data-theme="green"] .modal-content,
:root[data-theme="green"] .panel { background: var(--card); color: var(--text); }
:root[data-theme="green"] .chip:not(.selected),
:root[data-theme="green"] .tp-chip:not(.selected),
:root[data-theme="green"] .qc-chip:not(.selected) {
  border-color: rgba(5,150,105,0.22) !important;
}
:root[data-theme="green"] .chip.selected,
:root[data-theme="green"] .tp-chip.selected,
:root[data-theme="green"] .qc-chip.selected {
  background: #059669 !important; color: #fff !important; border-color: #059669 !important;
}
:root[data-theme="green"] .btn-primary { background: linear-gradient(135deg, #10B981, #047857) !important; box-shadow: 0 3px 12px rgba(5,150,105,0.32) !important; }
:root[data-theme="green"] .up-action-btn--gold { background: #059669 !important; border-color: #059669 !important; }
:root[data-theme="green"] .up-action-btn { color: #059669 !important; border-color: rgba(5,150,105,0.3) !important; }
:root[data-theme="green"] .profv2-stat-val { color: #059669 !important; }
:root[data-theme="green"] .profv2-cover { background: linear-gradient(160deg, rgba(16,185,129,0.9) 0%, rgba(5,150,105,0.55) 50%, rgba(0,0,0,0.65) 100%) !important; }
:root[data-theme="green"] .up-cover-section { background: linear-gradient(150deg, rgba(5,150,105,0.8) 0%, rgba(16,185,129,0.45) 55%, rgba(0,0,0,0.5) 100%) !important; }
:root[data-theme="green"] .card { border-color: rgba(5,150,105,0.10) !important; }
:root[data-theme="green"] .conv-unread { background: #059669 !important; }
:root[data-theme="green"] .profv2-verified-tick { background: #059669 !important; }

/* -- 6. WIZARD PANELS � theme-colored headers and accents --- */
:root[data-theme="blue"] .qc-header,
:root[data-theme="blue"] .tp-header,
:root[data-theme="blue"] .wizard-header { background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important; }
:root[data-theme="green"] .qc-header,
:root[data-theme="green"] .tp-header,
:root[data-theme="green"] .wizard-header { background: linear-gradient(135deg, #10B981, #047857) !important; }
:root[data-theme="dark"] .qc-header,
:root[data-theme="dark"] .tp-header,
:root[data-theme="dark"] .wizard-header { background: linear-gradient(135deg, #0EA5E9, #0CA8A8) !important; }

/* -- 7. INPUT FOCUS RINGS per theme --- */
:root[data-theme="blue"] input:focus, :root[data-theme="blue"] textarea:focus, :root[data-theme="blue"] select:focus { border-color: #2563EB !important; box-shadow: 0 0 0 3px rgba(37,99,235,0.15) !important; }
:root[data-theme="green"] input:focus, :root[data-theme="green"] textarea:focus, :root[data-theme="green"] select:focus { border-color: #059669 !important; box-shadow: 0 0 0 3px rgba(5,150,105,0.15) !important; }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { border-color: #0CA8A8 !important; box-shadow: 0 0 0 3px rgba(12,168,168,0.18) !important; }

/* -- 8. MESSAGE BUBBLES --- */
:root[data-theme="blue"] .msg-out { background: #2563EB !important; }
:root[data-theme="green"] .msg-out { background: #059669 !important; }
:root[data-theme="dark"] .msg-out { background: #0CA8A8 !important; }
:root[data-theme="blue"] .send-btn { background: #2563EB !important; }
:root[data-theme="green"] .send-btn { background: #059669 !important; }

/* -- 9. ACTIVE NAV TAB indicator --- */
:root[data-theme="blue"] .nav-btn.active { color: #E05070 !important; }
:root[data-theme="blue"] .nav-btn.active svg { stroke: #E05070 !important; }
:root[data-theme="blue"] .nav-btn.active::before { background: rgba(255, 255, 255, 0.9) !important; }
:root[data-theme="green"] .nav-btn.active { color: #E05070 !important; }
:root[data-theme="green"] .nav-btn.active svg { stroke: #E05070 !important; }
:root[data-theme="green"] .nav-btn.active::before { background: rgba(255, 255, 255, 0.9) !important; }

/* -- end v20260604.3 -- */

/* -- v20260604.4 � avatar flash fix, wizard header neutral, admin filter readability -- */

/* -- 1. AVATAR FLASH FIX ---------------------------------------------------- */
/* profv2 profile avatar: neutral placeholder while image loads */
.profv2-avatar {
  background: var(--surface) !important;
}
/* Only apply gradient when showing initials (no photo) */
.profv2-avatar:has(> .prof-av-initials) {
  background: linear-gradient(135deg, var(--primary, #D6336C), color-mix(in srgb, var(--primary, #D6336C) 65%, #000)) !important;
}
/* Fallback for browsers without :has() � initials colour via explicit class */
.profv2-avatar.prof-av-initials-mode {
  background: linear-gradient(135deg, var(--primary, #D6336C), color-mix(in srgb, var(--primary, #D6336C) 65%, #000)) !important;
}

/* Top bar avatar: remove the !important gradient so JS background override works.
   The JS _updateTopAvatar() now uses setProperty(..., 'important') to show the photo.
   When no photo, the default gradient below applies. */
.top-bar .avatar-sm {
  border-color: #ddd !important;
  background: #f0ebe4;  /* no !important � JS can override */
}
:root[data-theme="dark"] .top-bar .avatar-sm {
  background: #1e2430;  /* no !important � JS can override */
  border-color: var(--gold) !important;
}
:root[data-theme="blue"] .top-bar .avatar-sm {
  background: #e8edf5;
  border-color: #bcc8e0 !important;
}
:root[data-theme="green"] .top-bar .avatar-sm {
  background: #e4f0ea;
  border-color: #a8d4bc !important;
}

/* -- 2. WIZARD HEADER � stay neutral (same as card background) --------------- */
/* Override the blue/green/dark solid gradients added in v20260604.3.
   The dots + close button area should match the sheet/card background. */
:root[data-theme="blue"] .qc-header,
:root[data-theme="blue"] .tp-header,
:root[data-theme="blue"] .wizard-header,
:root[data-theme="green"] .qc-header,
:root[data-theme="green"] .tp-header,
:root[data-theme="green"] .wizard-header,
:root[data-theme="dark"] .qc-header,
:root[data-theme="dark"] .tp-header,
:root[data-theme="dark"] .wizard-header {
  background: none !important;
}

/* -- 3. ADMIN FILTERS � readable across all themes --------------------------- */
.admin-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem;
}
.admin-filters input,
.admin-filters select {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 0.45rem 0.7rem !important;
  font-size: 0.85rem !important;
  font-family: inherit !important;
  flex: 1; min-width: 120px;
  outline: none;
  appearance: auto;
  -webkit-appearance: auto;
}
.admin-filters input::placeholder { color: var(--muted) !important; }
.admin-filters select option {
  background: var(--card);
  color: var(--text);
}
.admin-filters input:focus,
.admin-filters select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.14) !important;
}

/* -- end v20260604.4 -- */

/* -- v20260604.5 � profile cover fix, chat colours, homepage padding, create-account theme -- */

/* Profile cover: force white when no cover image is set. 
   Preserve inline cover-image backgrounds when .has-cover is present. */
.profv2-cover:not(.has-cover) {
  background: #ffffff !important;
  background-image: none !important;
}
.profv2-cover.has-cover {
  background-image: var(--cover-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: transparent !important;
}
:root[data-theme="blue"]  .profv2-cover:not(.has-cover),
:root[data-theme="green"] .profv2-cover:not(.has-cover),
:root[data-theme="dark"]  .profv2-cover:not(.has-cover) {
  background: #ffffff !important;
  background-image: none !important;
}
/* Remove the old unconditional overrides that were beating inline styles */
/* (Retained for compatibility, but no-cover profiles now default to white.) */

/* Homepage: tighten Safar Moments + posts section spacing */
.disc-stories-wrap { padding: 6px 0 !important; margin-bottom: 2px !important; }
.disc-section       { margin-bottom: 4px !important; }

/* Create-account / Find-a-circle button: follow active theme */
:root[data-theme="dark"] .btn-find-circle {
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000 30%)) !important;
  box-shadow: 0 6px 24px rgba(var(--primary-rgb), 0.38) !important;
}
:root[data-theme="blue"] .btn-find-circle:not(.btn-find-circle--outline) {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8) !important;
  box-shadow: 0 6px 24px rgba(59,130,246,0.38) !important;
}
:root[data-theme="green"] .btn-find-circle:not(.btn-find-circle--outline) {
  background: linear-gradient(135deg, #10B981, #047857) !important;
  box-shadow: 0 6px 24px rgba(16,185,129,0.38) !important;
}
:root[data-theme="light"] .btn-find-circle:not(.btn-find-circle--outline) {
  background: linear-gradient(135deg, #B8604A, #8B3E26) !important;
}

/* Create Account button on login screen � keep original cream/default colour on all themes */

/* Chat initials: use a varied palette so different people get different colours */
.conv-avatar-initials[data-hue] { background: hsl(calc(var(--hue,0)*1deg), 55%, 45%) !important; }

/* -- end v20260604.5 -- */

/* --------------------------------------------------------------
   POST DETAIL MODAL
-------------------------------------------------------------- */
.post-detail-overlay {
  position: fixed; inset: 0; z-index: 1800;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end;
}
.post-detail-sheet {
  width: 100%; max-height: 92vh;
  background: var(--surface, #FAF7F2);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pdSlideUp 0.25s ease;
}
@keyframes pdSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
[data-theme="dark"] .post-detail-sheet { background: var(--surface, #111827); }
.post-detail-drag {
  width: 40px; height: 4px; border-radius: 2px;
  background: var(--border, rgba(0,0,0,0.15));
  margin: 10px auto 0;
  flex-shrink: 0;
}
.post-detail-topbar {
  display: flex; align-items: center;
  padding: 10px 16px 10px;
  flex-shrink: 0;
}
.post-detail-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted, #888); padding: 4px;
  display: flex; align-items: center;
}
.post-detail-title {
  flex: 1; text-align: center;
  font-size: 0.95rem; font-weight: 700;
  color: var(--text, #1c1008);
  margin-right: 28px;
}
[data-theme="dark"] .post-detail-title { color: #f0e8d8; }
.post-detail-scroll {
  flex: 1; overflow-y: auto; padding: 0 0 env(safe-area-inset-bottom, 16px);
}
.post-detail-card {
  background: var(--surface, #FAF7F2);
  padding: 0 14px 10px;
}
.post-detail-card .disc-card-head { padding: 10px 0 6px; }
.post-detail-card .disc-card-img { max-height: none; border-radius: 12px; }
.post-detail-actions {
  display: flex; align-items: center;
  border-top: 1px solid var(--border, rgba(0,0,0,0.07));
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
  margin: 0;
}
.post-detail-comments-wrap {
  padding: 14px 14px 10px;
}
.post-detail-comments-title {
  font-size: 0.85rem; font-weight: 700;
  color: var(--muted, #8B7355);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.post-detail-comment-input {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border, rgba(0,0,0,0.07));
  margin-top: 10px;
}

/* -- Group chat per-message reactions --------------------------- */
.msg-reactions {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0 4px 0;
  opacity: 1;
  pointer-events: auto;
}
.msg-reaction-btn {
  background: var(--surface2, #f0e9e4);
  border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted, #8B7355);
  cursor: pointer;
  display: flex; align-items: center; gap: 3px;
}
[data-theme="dark"] .msg-reaction-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
}
.msg-reaction-btn:hover { background: var(--surface3, #e8ddd6); color: var(--text, #1c1008); }
.msg-reaction-btn--active { background: rgba(226,106,106,0.15) !important; color: #E26A6A !important; border-color: rgba(226,106,106,0.35) !important; }
.msg-out .msg-reactions { justify-content: flex-end; }
.msg-in  .msg-reactions { justify-content: flex-start; }

/* -- Inline reply box within a message bubble -- */
.msg-reply-box {
  display: none;
  margin-top: 6px; padding: 8px;
  background: rgba(0,0,0,0.03);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  animation: scPanelReveal 0.2s ease both;
}
.msg-reply-box.active { display: block; }
.msg-reply-box textarea {
  width: 100%; min-height: 32px; max-height: 80px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px; padding: 6px 10px;
  font-size: 0.82rem; font-family: inherit;
  background: #fff; color: #1a1a1a; resize: none;
  outline: none; box-sizing: border-box;
}
.msg-reply-box textarea:focus { border-color: #D6336C; box-shadow: 0 0 0 2px rgba(214,51,108,0.12); }
.msg-reply-box-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
}
.msg-reply-box-actions button {
  padding: 4px 12px; border-radius: 14px; border: none;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.msg-reply-box-send {
  background: #D6336C; color: #fff;
}
.msg-reply-box-cancel {
  background: rgba(0,0,0,0.06); color: #666;
}

/* -- Sub-message (thread reply) under parent message -- */
.msg-sub-replies {
  margin-top: 6px; padding-left: 12px;
  border-left: 2px solid #D6336C;
}
.msg-sub-reply {
  padding: 4px 8px; margin: 3px 0;
  border-radius: 10px;
  font-size: 0.8rem; line-height: 1.4;
}
.msg-sub-reply .sub-sender { font-weight: 600; font-size: 0.73rem; color: #D6336C; margin-bottom: 1px; }
.msg-sub-reply .sub-body { color: #1a1a1a; }
.msg-sub-reply .sub-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.msg-sub-reply .sub-time { font-size: 0.65rem; color: #999; }
.msg-sub-reply .sub-actions { display: flex; gap: 4px; }
.msg-sub-reply .sub-actions button {
  background: none; border: none; font-size: 0.7rem;
  color: #999; cursor: pointer; padding: 2px 4px;
}
.msg-sub-reply .sub-actions button:hover { color: #D6336C; }
.msg-sub-reply .sub-actions button.liked { color: #E26A6A; }

/* Dark theme overrides for reply box & sub-messages */
[data-theme="dark"] .msg-reply-box { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .msg-reply-box textarea { background: rgba(255,255,255,0.08); color: #e0e0e0; border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .msg-reply-box-cancel { background: rgba(255,255,255,0.08); color: #aaa; }
[data-theme="dark"] .msg-sub-reply .sub-body { color: #e0e0e0; }
[data-theme="dark"] .msg-sub-reply .sub-time { color: #888; }
.msg-sub-reply .sub-actions button.liked { color: #E26A6A; }

/* -- Hero: clean header styling overrides --------------------- */
.disc-hero {
  border-bottom: none;
}
[data-theme="dark"] .disc-hero { border-bottom: none; background: var(--surface, #111827); }

/* Feed list padding for bubble cards */
#feedList.feed-tab-list { gap: 0 !important; padding: 8px 0 96px !important; }

/* Profile content fade-in � makes skeleton?profile transition feel intentional */
.profv2-wrap {
  animation: profFadeIn 0.18s ease-out;
}
@keyframes profFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------
   PASSPORT SHEET
-------------------------------------------------------------- */
.passport-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--primary, #B8604A), color-mix(in srgb, var(--primary, #B8604A) 60%, #000));
  border-radius: 16px;
  padding: 18px 16px;
  margin-bottom: 16px;
}
:root[data-theme="blue"]  .passport-card { background: linear-gradient(135deg, #2563EB, #1e40af); }
:root[data-theme="green"] .passport-card { background: linear-gradient(135deg, #059669, #065f46); }
:root[data-theme="dark"]  .passport-card { background: linear-gradient(135deg, #0CA8A8, #065f7c); }
.passport-av {
  width: 56px; height: 56px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.passport-card-info { flex: 1; }
.passport-name { font-size: 1rem; font-weight: 700; color: #1a1a1a; }
.passport-tier-badge { font-size: 0.85rem; font-weight: 600; color: #1a1a1a; margin-top: 3px; background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%); padding: 2px 10px; border-radius: 12px; display: inline-block; }
.passport-xp-section { margin-bottom: 16px; }
.passport-section-lbl {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted, #8B7355); margin-bottom: 8px;
}
[data-theme="dark"] .passport-section-lbl { color: rgba(255,255,255,0.5); }
.passport-stats-row {
  display: flex; gap: 8px;
  background: var(--surface2, #f0e9e4);
  border-radius: 12px; padding: 12px 8px; margin-bottom: 4px;
}
[data-theme="dark"] .passport-stats-row { background: rgba(255,255,255,0.07); }
.passport-stat-item { flex: 1; text-align: center; }
.passport-stat-val { font-size: 1.1rem; font-weight: 800; color: #1a1a1a; background: #fff; padding: 4px 8px; border-radius: 6px; }
[data-theme="dark"] .passport-stat-val { color: #1a1a1a; background: #fff; }
.passport-stat-lbl { font-size: 0.65rem; color: var(--muted, #8B7355); margin-top: 2px; }
.passport-tier-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 4px; gap: 4px;
}
.passport-tier-step {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-size: 0.65rem; color: var(--muted, #999999); flex: 1;
  text-align: center;
}
.passport-tier-active { color: var(--text, #1c1008); font-weight: 600; }
[data-theme="dark"] .passport-tier-active { color: #f0e8d8; }
.passport-tier-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: #fff; flex-shrink: 0;
}

/* -- Circles search bar --------------------------------------- */
.circles-panel-head {
  display: flex; align-items: center; justify-content: space-between;
}
.circles-search-btn {
  background: rgba(0,0,0,0.06); border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text, #1c1008); flex-shrink: 0;
  transition: background 0.15s;
}
.circles-search-btn:hover { background: rgba(0,0,0,0.12); }
[data-theme="dark"] .circles-search-btn { background: rgba(255,255,255,0.1); color: #f0e8d8; }
[data-theme="dark"] .circles-search-btn:hover { background: rgba(255,255,255,0.18); }
.circles-search-row {
  padding: 0 16px 10px;
  background: #F5EFE8;
  flex-shrink: 0;
}
[data-theme="dark"] .circles-search-row { background: var(--surface, #111827); }
.circles-search-row.hidden { display: none; }
.circles-search-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 14px;
  border: 1.5px solid var(--border, rgba(214,51,108,0.2));
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1c1008);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}
.circles-search-input:focus { border-color: var(--primary, #B8604A); }
[data-theme="dark"] .circles-search-input { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: #f0e8d8; }

/* Feed tabs: tight header strip flush between stories and first post */
.disc-feed-tabs {
  margin: 2px 0 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--surface, #fff) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07)) !important;
}
[data-theme="dark"] .disc-feed-tabs { background: var(--surface, #111827) !important; box-shadow: none !important; }

/* Feed list starts right below tabs */
#feedList.feed-tab-list { padding: 4px 0 96px !important; }
#feedList, .disc-feed-list { padding-top: 4px !important; }

/* --------------------------------------------------------------
   CIRCLE CHAT FEED  (Messages ? Circles tab)
   -------------------------------------------------------------- */
#circleChatFeed {
  padding: 0.75rem 0.75rem 1rem;
}

/* -- Circle group header row -- */
.ccf-group {
  margin-bottom: 1.25rem;
}
.ccf-group-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.1rem 0.55rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.65rem;
}
.ccf-group-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.13);
}
.ccf-group-initials {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.13);
}
.ccf-group-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccf-group-meta {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}
.ccf-group-chevron {
  color: var(--muted);
  opacity: 0.55;
  flex-shrink: 0;
}

/* -- Individual post card -- */
.ccf-post {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0.65rem;
  transition: box-shadow 0.15s ease;
}
.ccf-post:last-child { margin-bottom: 0; }
.ccf-post:hover { box-shadow: 0 3px 14px rgba(0,0,0,0.09); }

.ccf-post-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem 0.35rem;
}
.ccf-post-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.ccf-post-author {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccf-post-time {
  font-size: 0.7rem;
  color: var(--muted);
  flex-shrink: 0;
}

.ccf-post-body {
  padding: 0 0.75rem 0.45rem;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ccf-post-img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  display: block;
}

.ccf-post-actions {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  opacity: 1;
  visibility: visible;
}
.ccf-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.5rem 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #1a1a1a;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
  border-right: 1px solid var(--border);
}
.ccf-action-btn:last-child { border-right: none; }
.ccf-action-btn:hover { background: var(--bg); color: var(--text); }
.ccf-action-btn:active { background: rgba(0,0,0,0.05); }
.ccf-action-btn.liked { color: #e25454; }
.ccf-action-btn.liked svg { fill: #e25454; stroke: #e25454; }
.ccf-action-btn svg { flex-shrink: 0; }
.ccf-like-count { font-size: 0.78rem; font-weight: 600; min-width: 8px; }

/* -- Empty/loading states -- */
.ccf-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}
.ccf-skeleton {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  height: 130px;
  margin-bottom: 0.65rem;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Light theme overrides */
[data-theme="light"] .ccf-post { background: #fff; border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .ccf-post-author { color: #1C0E08; }
[data-theme="light"] .ccf-post-body { color: #1A0A14; }
[data-theme="light"] .ccf-action-btn { color: #8B6B7A; }
[data-theme="light"] .ccf-action-btn:hover { background: #F5F0EA; color: #1C0E08; }
[data-theme="light"] .ccf-group-name { color: #1C0E08; }
[data-theme="light"] .ccf-group-header { border-bottom-color: rgba(0,0,0,0.07); }

/* -----------------------------------------------------------
   MIXED THEME � Safe Adventure (Teal + Coral + Lavender)
   Primary: #0D9488  Accent/Gold: #FB7185  Lavender: #A78BFA
   Background: #FAFAF8  Text: #111827
   ----------------------------------------------------------- */

/* -- NAV FAB -- */
:root[data-theme="mixed"] .nav-fab-inner {
  background: linear-gradient(135deg, #14B8A6 0%, #0D9488 60%, #0F766E 100%) !important;
  box-shadow: 0 4px 18px rgba(13,148,136,0.50), 0 1px 4px rgba(0,0,0,0.15) !important;
}

/* -- TOP BAR -- */
:root[data-theme="mixed"] .top-bar,
:root[data-theme="mixed"] #screen-app > .top-bar,
:root[data-theme="mixed"] .top-bar.sticky-top {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
:root[data-theme="mixed"] .top-logo               { color: #1C0E08 !important; }
:root[data-theme="mixed"] .top-logo .gold,
:root[data-theme="mixed"] .top-logo > span         { color: #D6336C !important; }
:root[data-theme="mixed"] .top-bar .btn-icon      { color: #6B2040 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
:root[data-theme="mixed"] .top-title               { color: #111827 !important; }
:root[data-theme="mixed"] #btnBack svg             { stroke: #111827 !important; }
:root[data-theme="mixed"] .top-bar .btn-icon       { color: #6B2040 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
:root[data-theme="mixed"] .top-bar .avatar-sm {
  background: linear-gradient(135deg, #14B8A6, #0D9488);
  border-color: #0D9488 !important;
}

/* -- BOTTOM NAV -- */
:root[data-theme="mixed"] .bottom-nav {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(13,148,136,0.12) !important;
}
:root[data-theme="mixed"] .nav-btn               { color: #1a1a1a !important; }
:root[data-theme="mixed"] .nav-btn svg           { stroke: #1a1a1a !important; }
:root[data-theme="mixed"] .nav-btn.active        { color: #0D9488 !important; }
:root[data-theme="mixed"] .nav-btn.active svg    { stroke: #0D9488 !important; }
:root[data-theme="mixed"] .nav-btn.active::before { background: rgba(13,148,136,0.10) !important; }

/* -- APP BACKGROUND -- */
:root[data-theme="mixed"] #screen-app { background: #ffffff !important; }

/* -- CARAVAN / CIRCLES HEADERS -- */
:root[data-theme="mixed"] .caravan-head           { background: #F0FDFA !important; }
:root[data-theme="mixed"] .caravan-head .ch-greet { color: #111827 !important; }
:root[data-theme="mixed"] .caravan-head .ch-sub   { color: #6B7280 !important; }
:root[data-theme="mixed"] .circles-panel-head     { background: #F0FDFA !important; }
:root[data-theme="mixed"] .circles-panel-title    { color: #111827 !important; }

/* -- CARDS / PANELS / MODALS -- */
:root[data-theme="mixed"] .card,
:root[data-theme="mixed"] .modal-content,
:root[data-theme="mixed"] .panel { background: var(--card); color: var(--text); }
:root[data-theme="mixed"] .card { border-color: rgba(13,148,136,0.10) !important; }
:root[data-theme="mixed"] .sc-post-card {
  background: var(--card) !important;
  border-color: rgba(13,148,136,0.08) !important;
}
:root[data-theme="mixed"] .sc-post-body,
:root[data-theme="mixed"] .sc-post-body p,
:root[data-theme="mixed"] .sc-post-body h3,
:root[data-theme="mixed"] .sc-post-body h4 { color: #111827 !important; }
:root[data-theme="mixed"] .sc-post-author-name { color: #111827 !important; }
:root[data-theme="mixed"] .sc-post-meta { color: #6B7280 !important; }

/* -- MESSAGES PANEL -- */
:root[data-theme="mixed"] #panel-messages .chats-search-row { background: #FFFFFF !important; border-color: rgba(13,148,136,0.14) !important; }
:root[data-theme="mixed"] #panel-messages .feed-post-card   { background: #FFFFFF !important; border-color: rgba(13,148,136,0.08) !important; }
:root[data-theme="mixed"] #panel-messages .feed-post-body h3 { color: #111827 !important; }
:root[data-theme="mixed"] #panel-messages .feed-post-meta   { color: #6B7280 !important; }
:root[data-theme="mixed"] #panel-messages .feed-action-btn  { color: #6B7280 !important; }
:root[data-theme="mixed"] #panel-messages .feed-action-btn svg { stroke: #6B7280 !important; }

/* -- PROFILE (own) -- */
:root[data-theme="mixed"] .profv2-wrap        { background: #FAFAF8 !important; }
:root[data-theme="mixed"] .profv2-name        { color: #111827 !important; }
:root[data-theme="mixed"] .profv2-handle      { color: #6B7280 !important; }
:root[data-theme="mixed"] .profv2-bio         { color: #111827 !important; }
:root[data-theme="mixed"] .profv2-stats-card  {
  background: #FFFFFF !important;
  border-color: rgba(13,148,136,0.12) !important;
  box-shadow: 0 2px 12px rgba(13,148,136,0.07) !important;
}
:root[data-theme="mixed"] .profv2-stat-val    { color: #0D9488 !important; }
:root[data-theme="mixed"] .profv2-stat-lbl    { color: #6B7280 !important; }
:root[data-theme="mixed"] .profv2-stat        { border-color: rgba(13,148,136,0.10) !important; }
:root[data-theme="mixed"] .profv2-xp-bar-fill { background: #0D9488 !important; }
:root[data-theme="mixed"] .profv2-xp-bar      { background: #E5E7EB !important; }
:root[data-theme="mixed"] .profv2-verified-tick { background: #0D9488 !important; }
:root[data-theme="mixed"] .profv2-avatar-wrap { border-color: #FAFAF8 !important; }
:root[data-theme="mixed"] .profv2-cover.has-cover {
  background: linear-gradient(160deg, rgba(13,148,136,0.92) 0%, rgba(20,184,166,0.55) 50%, rgba(0,0,0,0.60) 100%) !important;
}
:root[data-theme="mixed"] .profv2-settings-menu { background: #FFFFFF !important; box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important; }
:root[data-theme="mixed"] .profv2-settings-menu button { color: #111827 !important; }
:root[data-theme="mixed"] .profv2-settings-menu button:hover { background: #F0FDFA !important; }
:root[data-theme="mixed"] .profv2-menu-divider { background: rgba(13,148,136,0.10) !important; }
:root[data-theme="mixed"] .profv2-tiles-row .prof-tile { background: #FFFFFF !important; border-color: rgba(13,148,136,0.10) !important; color: #111827 !important; }
:root[data-theme="mixed"] .profv2-tiles-row .prof-tile-lbl { color: #6B7280 !important; }
:root[data-theme="mixed"] .profv2-posts-section { background: #FAFAF8 !important; }

/* -- OTHER USER PROFILE -- */
:root[data-theme="mixed"] #panel-user-profile { background: #ffffff !important; }
:root[data-theme="mixed"] .up-body { background: #ffffff !important; }
:root[data-theme="mixed"] .up-topbar {
  background: rgba(13,148,136,0.06) !important;
  border-bottom: 1px solid rgba(13,148,136,0.12) !important;
}
:root[data-theme="mixed"] .up-back-btn   { background: #FFFFFF !important; border-color: rgba(13,148,136,0.14) !important; color: #111827 !important; }
:root[data-theme="mixed"] .up-topbar-title { color: #111827 !important; }
:root[data-theme="mixed"] .up-body       { background: #FAFAF8 !important; }
:root[data-theme="mixed"] .up-name       { color: #111827 !important; }
:root[data-theme="mixed"] .up-username   { color: #6B7280 !important; }
:root[data-theme="mixed"] .up-stats      { background: #FFFFFF !important; box-shadow: 0 1px 0 rgba(13,148,136,0.10) !important; }
:root[data-theme="mixed"] .up-stat-val   { color: #111827 !important; }
:root[data-theme="mixed"] .up-stat-lbl   { color: #6B7280 !important; }
:root[data-theme="mixed"] .up-stat-sep   { background: rgba(13,148,136,0.10) !important; }
:root[data-theme="mixed"] .up-section-title { color: #111827 !important; }
:root[data-theme="mixed"] .up-avatar-circle { border-color: #FAFAF8 !important; }
:root[data-theme="mixed"] .up-cover-section {
  background: linear-gradient(150deg, rgba(13,148,136,0.85) 0%, rgba(20,184,166,0.45) 55%, rgba(0,0,0,0.50) 100%) !important;
}
:root[data-theme="mixed"] .up-action-btn { color: #0D9488 !important; border-color: rgba(13,148,136,0.28) !important; }
:root[data-theme="mixed"] .up-action-btn--gold { background: #0D9488 !important; border-color: #0D9488 !important; color: #fff !important; }

/* -- CIRCLE DETAIL -- */
:root[data-theme="mixed"] #screen-app:has(#panel-circle-detail.active) .top-bar {
  background: #F0FDFA !important;
  border-bottom: 1px solid rgba(13,148,136,0.12) !important;
}
:root[data-theme="mixed"] #screen-app:has(#panel-circle-detail.active) .top-bar #btnBack svg { stroke: #111827 !important; }

/* -- BUTTONS -- */
:root[data-theme="mixed"] .btn-primary { background: linear-gradient(135deg, #14B8A6, #0D9488) !important; box-shadow: 0 3px 12px rgba(13,148,136,0.30) !important; color: #fff !important; }
:root[data-theme="mixed"] .circles-fab { background: #0D9488 !important; box-shadow: 0 4px 20px rgba(13,148,136,0.42) !important; }
:root[data-theme="mixed"] .circles-fab:hover { background: #0F766E !important; }

/* -- CHIPS -- */
:root[data-theme="mixed"] .chip:not(.selected),
:root[data-theme="mixed"] .tp-chip:not(.selected),
:root[data-theme="mixed"] .qc-chip:not(.selected) {
  border-color: rgba(13,148,136,0.22) !important;
  color: var(--text);
}
:root[data-theme="mixed"] .chip.selected,
:root[data-theme="mixed"] .tp-chip.selected,
:root[data-theme="mixed"] .qc-chip.selected {
  background: #0D9488 !important; color: #fff !important; border-color: #0D9488 !important;
}

/* -- INPUT FOCUS -- */
:root[data-theme="mixed"] input:focus,
:root[data-theme="mixed"] textarea:focus,
:root[data-theme="mixed"] select:focus {
  border-color: #0D9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15) !important;
}

/* -- TABS -- */
:root[data-theme="mixed"] .msg-tab.active,
:root[data-theme="mixed"] .feed-tab.active,
:root[data-theme="mixed"] .circle-tab.active {
  color: #0D9488 !important;
  border-bottom-color: #0D9488 !important;
}

/* -- MESSAGE BUBBLES -- */
:root[data-theme="mixed"] .msg-out { background: #0D9488 !important; }
:root[data-theme="mixed"] .send-btn { background: #0D9488 !important; }

/* -- UNREAD BADGE -- */
:root[data-theme="mixed"] .conv-unread { background: #0D9488 !important; }

/* -- LOADER & SPLASH -- */
:root[data-theme="mixed"] .app-loader-city-overlay { background: rgba(13,148,136,0.58) !important; }
:root[data-theme="mixed"] #screen-splash .sc-auth-bg::after {`n  content: """";`n  position: absolute;`n  inset: 0;`n  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.40) 100%);`n  mix-blend-mode: normal;`n}
:root[data-theme="mixed"] #screen-splash .splash-bg { background: linear-gradient(168deg, #14B8A6 0%, #0D9488 55%, #065F46 100%) !important; }
:root[data-theme="mixed"] #screen-splash .onboarding { background: linear-gradient(to top, rgba(13,148,136,0.97) 65%, transparent) !important; }
:root[data-theme="mixed"] #screen-splash .onboarding-dots .dot.active { background: #CCFBF1 !important; }
:root[data-theme="mixed"] #screen-loader .app-loader { background: #FAFAF8 !important; }

/* -- LOADER: loading screen tint -- */
:root[data-theme="mixed"] .app-loader-city-overlay { background: rgba(13,148,136,0.50) !important; }
:root[data-theme="mixed"] .app-loader-people-overlay { background: linear-gradient(to top, rgba(13,148,136,0.40) 0%, transparent 100%) !important; }

/* -- PASSPORT HERO (digital passport) � Mixed -- */
:root[data-theme="mixed"] .passport-hero {
  background: linear-gradient(160deg, #CCFBF1 0%, #FAFAF8 100%) !important;
  border-color: rgba(13,148,136,0.20) !important;
}
:root[data-theme="mixed"] .passport-stamp {
  background: radial-gradient(circle at 30% 30%, #D1FAF0 0%, #FAFAF8 100%) !important;
  border-color: #0D9488 !important;
  color: #111827 !important;
}

/* -- TRAVELER SHEET -- */
:root[data-theme="mixed"] .ts-sheet { background: #FAFAF8 !important; }
:root[data-theme="mixed"] .ts-backdrop { background: rgba(13,148,136,0.14) !important; }

/* -- LIGHT ccf posts (feed/circles posts feed) -- */
[data-theme="mixed"] .ccf-post { background: #fff; border-color: rgba(13,148,136,0.08); }
[data-theme="mixed"] .ccf-post-author { color: #111827; }
[data-theme="mixed"] .ccf-post-body { color: #1F2937; }
[data-theme="mixed"] .ccf-action-btn { color: #6B7280; }
[data-theme="mixed"] .ccf-action-btn:hover { background: #F0FDFA; color: #111827; }
[data-theme="mixed"] .ccf-group-name { color: #111827; }
[data-theme="mixed"] .ccf-group-header { border-bottom-color: rgba(13,148,136,0.08); }

/* -- AUTH SPLASH BUTTONS + SHEET � Mixed -- */
:root[data-theme="mixed"] .btn-find-circle {
  background: #0D9488 !important;
  box-shadow: 0 6px 24px rgba(13,148,136,0.35) !important;
}
:root[data-theme="mixed"] .btn-find-circle:hover { background: #14B8A6 !important; }
:root[data-theme="mixed"] .btn-find-circle--outline {
  background: transparent !important;
  color: #0D9488 !important;
  border-color: #0D9488 !important;
  box-shadow: none !important;
}
:root[data-theme="mixed"] .btn-find-circle--outline:hover { background: rgba(13,148,136,0.07) !important; }
:root[data-theme="mixed"] .sc-auth-sheet { background: #F0FDFA !important; box-shadow: 0 -8px 40px rgba(13,148,136,0.14) !important; }
:root[data-theme="mixed"] .btn-auth-secondary { color: #6B7280 !important; }
:root[data-theme="mixed"] .btn-auth-secondary a { color: #0D9488 !important; }

/* -- AUTH SPLASH BUTTONS + SHEET � Mixed -- */
:root[data-theme="mixed"] .btn-find-circle {
  background: #0D9488 !important;
  box-shadow: 0 6px 24px rgba(13,148,136,0.35) !important;
}
:root[data-theme="mixed"] .btn-find-circle:hover { background: #14B8A6 !important; }
:root[data-theme="mixed"] .btn-find-circle--outline {
  background: transparent !important;
  color: #0D9488 !important;
  border-color: #0D9488 !important;
  box-shadow: none !important;
}
:root[data-theme="mixed"] .btn-find-circle--outline:hover { background: rgba(13,148,136,0.07) !important; }
:root[data-theme="mixed"] .sc-auth-sheet { background: #F0FDFA !important; box-shadow: 0 -8px 40px rgba(13,148,136,0.14) !important; }
:root[data-theme="mixed"] .btn-auth-secondary { color: #6B7280 !important; }
:root[data-theme="mixed"] .btn-auth-secondary a { color: #0D9488 !important; }

/* -- AUTH LOGIN / REGISTER / FORGOT � Mixed theme overrides -- */
:root[data-theme="mixed"] #screen-login .btn-primary,
:root[data-theme="mixed"] #screen-register .btn-primary,
:root[data-theme="mixed"] #screen-forgot-password .btn-primary {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  border-color: #0D9488 !important;
  box-shadow: 0 6px 20px rgba(13,148,136,0.32) !important;
}
:root[data-theme="mixed"] #screen-login .btn-primary:hover,
:root[data-theme="mixed"] #screen-register .btn-primary:hover,
:root[data-theme="mixed"] #screen-forgot-password .btn-primary:hover {
  background: #14B8A6 !important;
}
:root[data-theme="mixed"] #screen-login .btn-outline,
:root[data-theme="mixed"] #screen-register .btn-outline {
  border-color: #0D9488 !important;
  color: #0D9488 !important;
  background: transparent !important;
}
:root[data-theme="mixed"] #screen-login .auth-wrap,
:root[data-theme="mixed"] #screen-register .auth-wrap,
:root[data-theme="mixed"] #screen-forgot-password .auth-wrap {
  background: #F0FDFA !important;
  box-shadow: 0 -8px 40px rgba(13,148,136,0.14) !important;
}
:root[data-theme="mixed"] #screen-login .auth-body h2,
:root[data-theme="mixed"] #screen-register .auth-body h2,
:root[data-theme="mixed"] #screen-forgot-password .auth-body h2 { color: #111827 !important; }
:root[data-theme="mixed"] #screen-login .auth-body p.text-muted,
:root[data-theme="mixed"] #screen-register .auth-body p.text-muted,
:root[data-theme="mixed"] #screen-forgot-password .auth-body p.text-muted { color: #6B7280 !important; }
:root[data-theme="mixed"] #screen-login .auth-body label,
:root[data-theme="mixed"] #screen-register .auth-body label { color: #374151 !important; }
:root[data-theme="mixed"] #screen-login .auth-header .btn-icon,
:root[data-theme="mixed"] #screen-register .auth-header .btn-icon,
:root[data-theme="mixed"] #screen-forgot-password .auth-header .btn-icon { color: #111827 !important; }
:root[data-theme="mixed"] #screen-login .auth-header .btn-icon svg path,
:root[data-theme="mixed"] #screen-register .auth-header .btn-icon svg path,
:root[data-theme="mixed"] #screen-forgot-password .auth-header .btn-icon svg path { stroke: #111827 !important; }
:root[data-theme="mixed"] #screen-login .link-btn,
:root[data-theme="mixed"] #screen-login .auth-body a,
:root[data-theme="mixed"] #screen-register .link-btn,
:root[data-theme="mixed"] #screen-register .auth-body a { color: #0D9488 !important; }
:root[data-theme="mixed"] #screen-login .auth-divider { color: #6B7280 !important; }
:root[data-theme="mixed"] #screen-login .auth-divider::before,
:root[data-theme="mixed"] #screen-login .auth-divider::after { background: rgba(13,148,136,0.2) !important; }
:root[data-theme="mixed"] #screen-register .auth-divider { color: #6B7280 !important; }
:root[data-theme="mixed"] #screen-register .auth-divider::before,
:root[data-theme="mixed"] #screen-register .auth-divider::after { background: rgba(13,148,136,0.2) !important; }
:root[data-theme="mixed"] #screen-register .step-fill { background: linear-gradient(90deg, #0D9488, #14B8A6) !important; }

/* -- AUTH LOGIN / REGISTER / FORGOT � Mixed theme overrides -- */
:root[data-theme="mixed"] #screen-login .btn-primary,
:root[data-theme="mixed"] #screen-register .btn-primary,
:root[data-theme="mixed"] #screen-forgot-password .btn-primary {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  border-color: #0D9488 !important;
  box-shadow: 0 6px 20px rgba(13,148,136,0.32) !important;
}
:root[data-theme="mixed"] #screen-login .btn-primary:hover,
:root[data-theme="mixed"] #screen-register .btn-primary:hover,
:root[data-theme="mixed"] #screen-forgot-password .btn-primary:hover {
  background: #14B8A6 !important;
}
:root[data-theme="mixed"] #screen-login .btn-outline,
:root[data-theme="mixed"] #screen-register .btn-outline {
  border-color: #0D9488 !important;
  color: #0D9488 !important;
  background: transparent !important;
}
:root[data-theme="mixed"] #screen-login .auth-wrap,
:root[data-theme="mixed"] #screen-register .auth-wrap,
:root[data-theme="mixed"] #screen-forgot-password .auth-wrap {
  background: #F0FDFA !important;
  box-shadow: 0 -8px 40px rgba(13,148,136,0.14) !important;
}
:root[data-theme="mixed"] #screen-login .auth-body h2,
:root[data-theme="mixed"] #screen-register .auth-body h2,
:root[data-theme="mixed"] #screen-forgot-password .auth-body h2 { color: #111827 !important; }
:root[data-theme="mixed"] #screen-login .auth-body p.text-muted,
:root[data-theme="mixed"] #screen-register .auth-body p.text-muted,
:root[data-theme="mixed"] #screen-forgot-password .auth-body p.text-muted { color: #6B7280 !important; }
:root[data-theme="mixed"] #screen-login .auth-body label,
:root[data-theme="mixed"] #screen-register .auth-body label { color: #374151 !important; }
:root[data-theme="mixed"] #screen-login .auth-header .btn-icon,
:root[data-theme="mixed"] #screen-register .auth-header .btn-icon,
:root[data-theme="mixed"] #screen-forgot-password .auth-header .btn-icon { color: #111827 !important; }
:root[data-theme="mixed"] #screen-login .auth-header .btn-icon svg path,
:root[data-theme="mixed"] #screen-register .auth-header .btn-icon svg path,
:root[data-theme="mixed"] #screen-forgot-password .auth-header .btn-icon svg path { stroke: #111827 !important; }
:root[data-theme="mixed"] #screen-login .link-btn,
:root[data-theme="mixed"] #screen-login .auth-body a,
:root[data-theme="mixed"] #screen-register .link-btn,
:root[data-theme="mixed"] #screen-register .auth-body a { color: #0D9488 !important; }
:root[data-theme="mixed"] #screen-login .auth-divider { color: #6B7280 !important; }
:root[data-theme="mixed"] #screen-login .auth-divider::before,
:root[data-theme="mixed"] #screen-login .auth-divider::after { background: rgba(13,148,136,0.2) !important; }
:root[data-theme="mixed"] #screen-register .auth-divider { color: #6B7280 !important; }
:root[data-theme="mixed"] #screen-register .auth-divider::before,
:root[data-theme="mixed"] #screen-register .auth-divider::after { background: rgba(13,148,136,0.2) !important; }
:root[data-theme="mixed"] #screen-register .step-fill { background: linear-gradient(90deg, #0D9488, #14B8A6) !important; }

/* ----------------------------------------------------------------------
   MIXED THEME � BATCH 5: Circles panel bg, pill/chip/tab active states,
   map filter pill, admin stat numbers
   ---------------------------------------------------------------------- */

/* -- Circles panel background (overrides #panel-circles { bg: #F5EFE8 !important }) -- */
:root[data-theme="mixed"] #panel-circles { background: #F0FDFA !important; }

/* -- Active pill / chip / tab states � teal instead of gold gradient -- */
:root[data-theme="mixed"] .pill.active,
:root[data-theme="mixed"] .filter-pill.active,
:root[data-theme="mixed"] .sc-chip.active,
:root[data-theme="mixed"] .tag-btn.active,
:root[data-theme="mixed"] .admin-tab.active {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  color: #fff !important;
  border-color: #0D9488 !important;
  box-shadow: 0 2px 12px rgba(13,148,136,0.28) !important;
}

/* -- Map filter pill � teal active, teal border on hover -- */
:root[data-theme="mixed"] #panel-map .filter-pill.active {
  background: rgba(13,148,136,0.12) !important;
  border-color: #0D9488 !important;
  color: #0D9488 !important;
  box-shadow: 0 1px 6px rgba(13,148,136,0.18) !important;
}

/* -- Admin stat value numbers � teal instead of gold/coral -- */
:root[data-theme="mixed"] .admin-stat .v { color: #0D9488 !important; }

/* -- Admin panel header gradient -- */
:root[data-theme="mixed"] .admin-hero { background: linear-gradient(135deg, #0D9488, #14B8A6) !important; }

/* -- Admin theme swatch active border � teal for Mixed (overrides var(--gold)) -- */
:root[data-theme="mixed"] .admin-theme-swatch.active {
  border-color: #0D9488 !important;
  color: #0D9488 !important;
  background: rgba(13,148,136,0.08) !important;
}

/* ----------------------------------------------------------------------
   MIXED THEME � BATCH 6: Chat/DM conversation panel � teal override
   All selectors use :root[data-theme="mixed"] #panel-chat ... to beat
   the existing #panel-chat ID-selector rules with !important
   ---------------------------------------------------------------------- */
:root[data-theme="mixed"] #panel-chat,
:root[data-theme="mixed"] #panel-messages .panel-scroll { background: #ffffff !important; }

:root[data-theme="mixed"] #panel-chat .chat-messages {
  background-color: #ffffff !important;
  background-image: none !important;
}

:root[data-theme="mixed"] #panel-chat .msg-bubble.msg-out {
  background: #D9EEFF !important;
  color: #0B3D5E !important;
  box-shadow: 0 1px 6px rgba(43,109,150,0.18) !important;
}
:root[data-theme="mixed"] #panel-chat .msg-bubble.msg-out .msg-time { color: rgba(11,61,94,0.75) !important; }

:root[data-theme="mixed"] #panel-chat .msg-bubble.msg-in {
  background: #fff !important;
  color: #111827 !important;
}
:root[data-theme="mixed"] #panel-chat .msg-bubble.msg-in .msg-time { color: #6B7280 !important; }

:root[data-theme="mixed"] #panel-chat .send-btn {
  background: linear-gradient(135deg, #F06070 0%, #E05070 50%, #D04060 100%) !important;
  box-shadow: 0 3px 12px rgba(224, 80, 112, 0.35) !important;
}
:root[data-theme="mixed"] #panel-chat .send-btn:hover { box-shadow: 0 5px 16px rgba(13,148,136,0.5) !important; }

:root[data-theme="mixed"] #panel-chat .chat-topbar { background: #ffffff !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
:root[data-theme="mixed"] #panel-chat .chat-topbar-avatar {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  box-shadow: #0D9488 0 0 0 2px !important;
}
:root[data-theme="mixed"] #panel-chat .chat-topbar-name { color: #111827 !important; }
:root[data-theme="mixed"] #panel-chat .chat-topbar-back { color: #111827 !important; }
:root[data-theme="mixed"] #panel-chat .chat-topbar-icon-btn { color: #374151 !important; }

:root[data-theme="mixed"] #panel-chat .chat-input-bar { background: #ffffff !important; }
:root[data-theme="mixed"] #panel-chat .chat-input-bar::before {
  background: linear-gradient(transparent, rgba(250,250,248,0.97)) !important;
}
:root[data-theme="mixed"] #panel-chat .chat-input-bar textarea {
  background: #ffffff !important;
  border: 1.5px solid rgba(13,148,136,0.22) !important;
  color: #111827 !important;
}
:root[data-theme="mixed"] #panel-chat .chat-input-bar textarea::placeholder { color: #9CA3AF !important; }
:root[data-theme="mixed"] #panel-chat .chat-input-bar textarea:focus {
  border-color: #0D9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
  outline: none !important;
}
:root[data-theme="mixed"] #panel-chat .chat-attach-btn { color: #6B7280 !important; }

/* ----------------------------------------------------------------------
   MIXED THEME � BATCH 7: Circle detail panel bg + btn-gold teal override
   ---------------------------------------------------------------------- */

/* -- Circle detail panel background -- */
:root[data-theme="mixed"] #panel-circle-detail { background: #F0FDFA !important; }

/* -- btn-gold / btn-gold-sm ? teal in Mixed theme -- */
:root[data-theme="mixed"] .btn-gold,
:root[data-theme="mixed"] .btn-gold-sm {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  color: #fff !important;
  box-shadow: 0 3px 14px rgba(13,148,136,0.3) !important;
}
:root[data-theme="mixed"] .btn-gold:hover,
:root[data-theme="mixed"] .btn-gold-sm:hover {
  box-shadow: 0 5px 20px rgba(13,148,136,0.45) !important;
  filter: brightness(1.05) !important;
}

/* -- passport-cta btn-gold-pill ? teal -- */
:root[data-theme="mixed"] .passport-cta .btn-gold-pill {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  color: #fff !important;
  box-shadow: 0 3px 14px rgba(13,148,136,0.3) !important;
}

/* --- Universal CTA button style (match login button terracotta) --- */
.btn-primary,
.btn-gold,
.btn-gold-sm,
.btn-full,
.up-action-btn--gold,
.fab-primary,
.circles-fab,
.send-btn,
.nav-fab-inner,
.comp-post-btn-new,
.passport-cta .btn-gold-pill {
  background: linear-gradient(135deg, #F06070 0%, #E05070 60%, #C04060 100%) !important;
  color: #fff !important;
  border-color: #E05070 !important;
  box-shadow: 0 4px 18px rgba(224, 80, 112, 0.40) !important;
}
.btn-primary:hover,
.btn-gold:hover,
.btn-gold-sm:hover,
.btn-full:hover,
.up-action-btn--gold:hover,
.fab-primary:hover,
.circles-fab:hover,
.send-btn:hover,
.nav-fab-inner:hover,
.comp-post-btn-new:hover,
.passport-cta .btn-gold-pill:hover {
  filter: brightness(1.06) !important;
}

/* explicit icon-action reset for homepage post buttons */
.sc-action-btn,
.disc-act-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  color: #1a1a1a !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------
   NAV CENTRE LOGO BUTTON — replaces old plus-icon FAB with the
   SafarCircle logo, slightly larger, protruding above the nav bar
   with a smooth curved integration.
   --------------------------------------------------------------- */

/* Subtle glow/curve behind the logo button — centred */
.bottom-nav::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 32px;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255,255,255,0.35) 0%,
    rgba(250,247,242,0.18) 50%,
    transparent 75%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50% 50% 0 0;
}

/* Centre button slot — wider, overflow visible so logo can protrude */
.nav-btn-fab {
  flex: 0 0 68px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  z-index: 5 !important;
}
.nav-btn-fab::before,
.nav-btn-fab::after { display: none !important; }

/* The logo circle — centred in nav bar */
.nav-fab-inner {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

/* Logo image fills the entire circle */
.nav-fab-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

/* Active state */
.nav-btn-fab:active .nav-fab-inner {
  transform: scale(0.93) !important;
}

/* Override ALL theme-specific .nav-fab-inner backgrounds — logo fills circle */
.nav-btn-fab .nav-fab-inner,
:root[data-theme="default"] .nav-btn-fab .nav-fab-inner,
:root[data-theme="dark"] .nav-btn-fab .nav-fab-inner,
:root[data-theme="blue"] .nav-btn-fab .nav-fab-inner,
:root[data-theme="green"] .nav-btn-fab .nav-fab-inner,
:root[data-theme="light"] .nav-btn-fab .nav-fab-inner,
:root[data-theme="mixed"] .nav-btn-fab .nav-fab-inner {
  background: transparent !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* -- Top-bar logo — pink circle icon, no text -- */
.top-bar-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}
/* Hide old text-only logo span */
#topLogo { display: none !important; }

/* Top bar hidden by default — shown by JS for non-messages panels */
#topBar { display: none; }

/* Notification bell in home composer */
#homeNotifBtn { position: relative; color: var(--text); }
#homeNotifBadge { position: absolute; top: -4px; right: -4px; }

.sc-action-btn:hover,
.disc-act-btn:hover {
  background: rgba(0,0,0,0.04) !important;
  color: #D6336C !important;
}
.btn-outline,
#screen-login .btn-outline,
#screen-register .btn-outline,
#screen-forgot-password .btn-outline {
  border-color: #E05070 !important;
  color: #E05070 !important;
}

/* ------------------------------------------------------
   BATCH 8 � MIXED THEME: XP modal + Digital Passport + Traveler Sheet
   ------------------------------------------------------ */

/* -- XP / Passport & XP modal -- */
:root[data-theme="mixed"] .xp-bar-fill {
  background: linear-gradient(90deg, #0D9488, #14B8A6) !important;
}
:root[data-theme="mixed"] .passport-stats-row {
  background: rgba(13,148,136,0.08) !important;
  border-color: rgba(13,148,136,0.2) !important;
}

/* -- Digital Passport modal -- */
:root[data-theme="mixed"] .passport-stats {
  background: rgba(13,148,136,0.08) !important;
  border-color: rgba(13,148,136,0.2) !important;
}
:root[data-theme="mixed"] .ps-val {
  color: #0D9488 !important;
}
:root[data-theme="mixed"] .passport-name > span:last-child {
  color: #0D9488 !important;
  background: rgba(13,148,136,0.1) !important;
}
:root[data-theme="mixed"] .passport-hero::before {
  background:
    radial-gradient(60% 50% at 10% 0%, rgba(13,148,136,0.12) 0%, transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(20,184,166,0.1) 0%, transparent 60%) !important;
}
:root[data-theme="mixed"] .passport-stat-val {
  color: #0D9488 !important;
}

/* -- Traveler Sheet -- */
:root[data-theme="mixed"] .traveler-sheet {
  background: #ffffff !important;
}
:root[data-theme="mixed"] .ts-avatar {
  border-color: rgba(13,148,136,0.3) !important;
}
:root[data-theme="mixed"] .ts-avatar-placeholder {
  background: rgba(13,148,136,0.1) !important;
}
:root[data-theme="mixed"] .ts-name {
  color: #111827 !important;
}
:root[data-theme="mixed"] .ts-meta {
  color: #6B7280 !important;
}
:root[data-theme="mixed"] .ts-bio {
  color: #374151 !important;
}
:root[data-theme="mixed"] .ts-interests {
  color: #374151 !important;
}
:root[data-theme="mixed"] .ts-salam-btn {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
}
:root[data-theme="mixed"] .ts-salam-btn:hover {
  background: #0D9488 !important;
}

/* ----------------------------------------------------------------------
   MIXED THEME � BATCH 9: My Trips panel � teal override
   ---------------------------------------------------------------------- */

/* -- Trips page header background -- */
:root[data-theme="mixed"] .trips-page-header {
  background: #F0FDFA !important;
  border-bottom: 1px solid rgba(13,148,136,0.12) !important;
}
:root[data-theme="mixed"] .trips-page-title {
  color: #111827 !important;
}

/* -- AI Planner FAB button -- */
:root[data-theme="mixed"] .trips-ai-fab {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  box-shadow: 0 3px 14px rgba(13,148,136,0.35) !important;
}
:root[data-theme="mixed"] .trips-ai-fab:hover {
  box-shadow: 0 5px 20px rgba(13,148,136,0.50) !important;
  filter: brightness(1.05) !important;
}

/* -- Empty state -- */
:root[data-theme="mixed"] .trips-empty-title {
  color: #111827 !important;
}
:root[data-theme="mixed"] .trips-empty-sub {
  color: #6B7280 !important;
}
:root[data-theme="mixed"] .trips-empty-btn {
  background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
  box-shadow: 0 3px 14px rgba(13,148,136,0.35) !important;
}
:root[data-theme="mixed"] .trips-empty-btn:hover {
  box-shadow: 0 5px 20px rgba(13,148,136,0.50) !important;
  filter: brightness(1.05) !important;
}

/* -- Trip card image placeholder color -- */
:root[data-theme="mixed"] .trip-insta-img {
  background-color: #14B8A6 !important;
}

/* ----------------------------------------------------------------------
   MIXED THEME � BATCH 10: FAB radial menu "Other" item + meetup cat btn
   ---------------------------------------------------------------------- */

/* -- FAB center ring items � white bg, teal border in Mixed -- */
:root[data-theme="mixed"] .fcr-item {
  background: #FFFFFF !important;
  border-color: rgba(13,148,136,0.22) !important;
}
:root[data-theme="mixed"] .fcr-item-custom {
  border-color: #0D9488 !important;
}
:root[data-theme="mixed"] .fcr-item-custom .fcr-label {
  color: #0D9488 !important;
}
:root[data-theme="mixed"] .fcr-label {
  color: #6B7280 !important;
}

/* -- Meetup category button hover � teal instead of terracotta -- */
:root[data-theme="mixed"] .meetup-cat-btn:hover {
  border-color: #0D9488 !important;
  background: rgba(13,148,136,0.09) !important;
  box-shadow: 0 4px 12px rgba(13,148,136,0.18) !important;
}

/* -- Force homepage / discover top surfaces white and remove brown tint overlays -- */
#screen-app > .top-bar,
#screen-app .top-bar.sticky-top,
#panel-messages .msg-tabs,
#panel-messages .cat-pills,
#panel-messages .discover-home .disc-hero,
#panel-messages .discover-home .disc-hero-bg,
#panel-messages .discover-home .disc-hero::before,
#panel-messages .discover-home .disc-hero-bg::before,
#panel-messages .discover-home .disc-hero-bg-layer,
#panel-messages .discover-home .disc-create-wrap,
#panel-messages .discover-home .disc-create-card,
#panel-messages .discover-home .disc-section,
#panel-messages .discover-home .disc-create-types,
#panel-messages .discover-home .disc-feed-tab {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(0,0,0,0.08) !important;
}
#panel-messages .discover-home .disc-hero-actions {
  background: transparent !important;
}
#panel-messages .discover-home .disc-hero-btn {
  color: #1C0E08 !important;
  background: transparent !important;
  border: none !important;
}
#panel-messages .discover-home .disc-hero-btn svg {
  filter: none !important;
}

/* ----------------------------------------------------------------------
   FINAL WHITE SURFACE OVERRIDES
   ---------------------------------------------------------------------- */
#panel-messages .discover-home,
#panel-messages .discover-home .disc-hero,
#panel-messages .discover-home .disc-hero-bg,
#panel-messages .discover-home .disc-hero::before,
#panel-messages .discover-home .disc-hero-bg::before,
#panel-messages .discover-home .disc-hero-bg-layer,
#panel-messages .discover-home .disc-hero-overlay,
#panel-messages .discover-home .disc-hero-actions,
#panel-messages .discover-home .disc-hero-btn {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}
#panel-messages .panel-scroll::before {
  background: none !important;
}

/* Sweep: convert remaining light cream surfaces to white */
#screen-login .auth-wrap,
#screen-register .auth-wrap,
#screen-forgot-password .auth-wrap,
#panel-home,
#panel-circle-detail,
#panel-chat,
#panel-chat .chat-input-bar,
#panel-chat .chat-input-bar textarea,
#panel-chat .chat-messages,
#panel-messages,
#panel-messages .panel-scroll,
#panel-messages .panel-scroll.disc-feed-active,
#panel-home .disc-hero,
#panel-home .disc-card,
#panel-home .disc-section,
#panel-home .disc-create-card,
#panel-home .disc-create-wrap,
#panel-home .disc-feed-tab,
#panel-home .caravan-head,
#panel-home .caravan-sub,
#panel-home .caravan-feed-tabs,
#panel-circle-detail .top-bar,
#screen-app:has(#panel-circle-detail.active) .top-bar,
#panel-circles,
#panel-profile .prof-body,
#panel-profile .profv2-wrap,
#panel-profile .profv2-posts-section,
#panel-profile .profv2-settings-menu,
.cw-dest-wrap,
.cw-chip,
.cw-budget-btn,
.cw-date-input,
.traveler-sheet,
.bottom-nav,
.trips-page-header,
.post-detail-sheet,
.post-detail-card {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Keep the splash screen bottom auth sheet cream so the brown tinted hero remains intact */
#screen-splash .sc-auth-sheet {
  background: #FAF7F2 !important;
  box-shadow: 0 -8px 40px rgba(40,15,5,0.22) !important;
}

:root[data-theme="default"] .chat-messages::before,
:root[data-theme="light"] .chat-messages::before {
  background: rgba(255,255,255,0.93) !important;
}

#panel-profile,
#panel-profile #profileContent,
#panel-profile .prof-cover-section,
#panel-profile .prof-cover-section:not([style*="url(")]),
.profv2-wrap,
#panel-profile .profv2-cover:not(.has-cover),
.profv2-cover:not(.has-cover),
.profv2-cover:not(.has-cover) .profv2-cover-scrim,
.profv2-posts-section {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* -- Fix: keep the bottom nav above the Live Nearby drawer on map page */
.bottom-nav {
  z-index: 420 !important;
}

/* ═══ MESSAGES PANEL: FORCE WHITE BACKGROUNDS (override any dark navy leak) ═══ */
#panel-messages .msg-tabs {
  background: #fff !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
}
#panel-messages .msg-tab {
  color: #6C7A93 !important;
}
#panel-messages .msg-tab.active {
  color: #D6336C !important;
  border-bottom-color: #D6336C !important;
}
#panel-messages .cat-pills {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
#panel-messages .cat-pill {
  color: #6C7A93 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
#panel-messages .cat-pill.active {
  background: #D6336C !important;
  color: #fff !important;
  border-color: #D6336C !important;
}
#panel-messages .panel-scroll {
  background: #fff !important;
}
#panel-messages .card-list {
  background: #fff !important;
}
#panel-messages .card {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #1a1a1a !important;
}
#panel-messages .card:hover {
  background: #fdf9f6 !important;
}
#panel-messages .skeleton-list {
  background: #f5f5f5 !important;
}

/* Dark mode */
:root[data-theme="dark"] #panel-messages,
:root[data-theme="dark"] #panel-messages .msg-tabs,
:root[data-theme="dark"] #panel-messages .cat-pills,
:root[data-theme="dark"] #panel-messages .panel-scroll,
:root[data-theme="dark"] #panel-messages .card-list,
:root[data-theme="dark"] #panel-messages .card,
:root[data-theme="dark"] #panel-messages .chats-header {
  background: #1a1a2e !important;
}
:root[data-theme="dark"] #panel-messages .card {
  border-color: #2a2a3e !important;
  color: #e0e0e0 !important;
}
:root[data-theme="dark"] #panel-messages .card:hover {
  background: #222240 !important;
}
:root[data-theme="dark"] #panel-messages .msg-tab {
  color: #8899aa !important;
}
:root[data-theme="dark"] #panel-messages .cat-pill {
  color: #8899aa !important;
  border-color: rgba(255,255,255,0.12) !important;
}
:root[data-theme="dark"] #panel-messages .cat-pill.active {
  background: #D6336C !important;
  color: #fff !important;
}
:root[data-theme="dark"] #panel-messages .chats-title,
:root[data-theme="dark"] #panel-messages .conv-name {
  color: #e0e0e0 !important;
}
:root[data-theme="dark"] #panel-messages .chats-icon-btn {
  color: #aaa !important;
}