html,body{height:100%;overflow:hidden;}


.icon-spacer{width:40px;height:40px;display:inline-block;}
/* Neavo MVP v0.3 - WhatsApp-like Settings + Snap-like map feel (no labels) */

:root{
  /* unified modal header (~12% leaner chrome, title size unchanged) */
  --modalHeaderH: 62px;
  --modalHeaderPadY: 8px;
  --modalHeaderTitleSize: 21px;

  /* Neavo design system — radii, controls, popup motion */
  --neavo-radius-popup: 28px;
  --neavo-radius-card: 20px;
  --neavo-radius-control: 16px;
  --neavo-control-h: 48px;
  --neavo-glass-bg: rgba(15, 22, 35, 0.86);
  --neavo-glass-blur: blur(20px);
  --neavo-dur-popup: 240ms;

  /* Neavo unified modal header glass (reference: profile popup .profile-head) */
  --neavoModalHeaderBg:
    radial-gradient(120% 90% at 10% -20%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(80% 60% at 100% 0%, rgba(52,211,153,.08), transparent 45%),
    rgba(8,12,20,.55);
  --neavoModalHeaderIconSize: 38px;
  --neavoModalHeaderIconRadius: 12px;
  /* Premium glass: layered top→bottom highlight + faint accent wash; subtle, never bright. */
  --neavoModalHeaderIconBg:
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.025) 60%, rgba(255,255,255,.015) 100%),
    radial-gradient(120% 90% at 0% 0%, rgba(124,92,255,.10), transparent 55%),
    rgba(255,255,255,.02);
  --neavoModalHeaderIconBorder: 1px solid rgba(255,255,255,.14);
  --neavoModalHeaderIconShadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 1px 1px rgba(0,0,0,.22),
    0 8px 22px rgba(0,0,0,.22);

  /* Map HUD floating chips — range selector + free taps (shared capsule) */
  --neavo-map-chip-top-gap: 2px;
  --neavo-map-chip-h: 34px;
  --neavo-map-chip-pad-x: 16px;
  --neavo-map-chip-radius: 999px;
  --neavo-map-chip-border: 1px solid rgba(255, 255, 255, 0.11);
  --neavo-map-chip-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.025) 55%, rgba(255, 255, 255, 0.015) 100%),
    rgba(18, 24, 38, 0.38);
  --neavo-map-chip-blur: blur(20px) saturate(155%);
  --neavo-map-chip-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 5px 14px rgba(0, 8, 26, 0.26);

  /*
    Global header / nav chrome: soft cinematic transition into content (no harsh hairline).
    Apple / native-app style depth + faint accent wash beneath the chrome.
  */
  --neavoHeaderSepLine: inset 0 -1px 0 rgba(255, 255, 255, 0.032);
  --neavoHeaderSepDepth: 0 14px 38px rgba(0, 2, 14, 0.22);
  --neavoHeaderSepAmbient: 0 0 56px rgba(124, 92, 255, 0.032);
  --neavoHeaderSep: var(--neavoHeaderSepLine), var(--neavoHeaderSepDepth), var(--neavoHeaderSepAmbient);
  /** Legacy: was a 1px border; headers now use var(--neavoHeaderSep) on box-shadow. */
  --neavoModalHeaderBorderBottom: none;

  --bg:#0b0f16;
  --panel:#0f1623;
  --card:#121c2d;
  --muted:rgba(255,255,255,.62);
  --text:rgba(255,255,255,.92);
  --line:rgba(255,255,255,.10);
  --accent:#7c5cff;
  --danger:#ff4d4d;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  /* Modal shells: explicit radius token for clip-path / overflow (avoids asymmetric corner AA) */
  --radius:16px;
  --guestOnbRadius:22px;

  /* Settings + Auth modals: one stable sheet size (matches login shell) */
  --settingsBackdropPad: 18px;
  --settingsSheetH: min(92vh, 760px);

  /* English UI (default) */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Arabic UI — single stack app-wide */
  --font-ar: "Cairo", sans-serif;

  /* Global motion — popups, views, cards, buttons */
  --neavo-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --neavo-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --neavo-dur-fast: 180ms;
  --neavo-dur-med: 280ms;
  --neavo-dur-view: 260ms;
  --neavo-dur-sheet: 380ms;
  --neavo-dur-backdrop: 320ms;

  /* Map chrome: invisible floating nav (map continuous underneath) */
  --neavoTopbarH: 62px;
  --neavoTopFadeExtend: 22px;
  --neavoTopFadeVisH: calc(var(--neavoTopbarH) + var(--neavoTopFadeExtend));
  --neavoTopBannerBelowNav: 8px;
  --neavoTopIconSize: 22px;
  --neavoTopIconSizeXl: 24px;
  --neavoTopLogoH: 28px;
  --neavoTopCapsuleH: 44px;
  --neavoTopCapsulePadX: 9px;
  --neavoTopCapsuleGap: 12px;
  --neavo-top-header-control-size: 34px;
  --neavo-top-header-eye-icon-size: 27px;
  --neavo-top-header-avatar-size: 27px;
  --neavoTopIconPairGap: 8px;
  /* Top header capsule — shell material linked to bottom nav outer pill (see neavo-bottom-nav.css) */
  --neavo-top-capsule-bg: var(--nav-bg);
  --neavo-top-capsule-border: var(--nav-border);
  --neavo-top-capsule-blur: blur(18px) saturate(145%);
  --neavo-top-capsule-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

*{ box-sizing:border-box; }
html,body{height:100%;overflow:hidden;margin:0;}
html{
  font-family: var(--font-ui);
  /* Native-app shell: kill iOS tap flash / callout at the root (see body user-select). */
  -webkit-tap-highlight-color: transparent;
  /* Discourage document-level pinch-zoom where supported (map opts out below). */
  touch-action: manipulation;
}
/* Arabic UI: one font stack everywhere (inherits to modals, map panels, toasts, forms). */
:lang(ar){
  font-family: var(--font-ar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}
body{
  margin:0;
  font-family: inherit;
  background: radial-gradient(1200px 800px at 20% 0%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 700px at 90% 20%, rgba(52,211,153,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  /* App-wide: no arbitrary text selection / long-press selection UI (inputs re-enabled below). */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Page UI: pan/scroll only — no browser pinch-zoom outside the map (see #map). */
  touch-action: pan-x pan-y;
}

/* Only real controls may show text selection, caret, and iOS callout (paste, etc.). */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="color"]):not([type="image"]),
textarea,
select,
option,
[contenteditable="true"],
[contenteditable="plaintext-only"]{
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

.hidden{ display:none !important; }
.invis{ visibility:hidden !important; }

.topbar{
  position:fixed;
  top:0; left:0; right:0;
  height: calc(var(--neavoTopbarH) + env(safe-area-inset-top, 0px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:
    env(safe-area-inset-top, 0px)
    max(16px, env(safe-area-inset-right, 0px))
    0
    max(16px, env(safe-area-inset-left, 0px));
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom:none;
  box-shadow: none;
  z-index:50;
  direction:ltr;
  pointer-events:none;
  isolation:isolate;
}
/* Status-bar slab — subtle, not a heavy black bar */
.topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  height:env(safe-area-inset-top, 0px);
  background:rgba(0, 0, 0, 0.28);
  pointer-events:none;
  z-index:-1;
}
/* Mild top readability gradient — protects logo/controls without a heavy black block */
.topbar::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:100%;
  height: calc(var(--neavoTopFadeVisH) + env(safe-area-inset-top, 0px));
  max-height: calc(var(--neavoTopFadeVisH) + env(safe-area-inset-top, 0px));
  pointer-events:none;
  z-index:-2;
  overflow:hidden;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.38) 0%,
    rgba(0, 0, 0, 0.22) 22%,
    rgba(0, 0, 0, 0.10) 40%,
    rgba(0, 0, 0, 0.04) 58%,
    transparent 78%
  );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.topbar-side{
  display:flex;
  align-items:center;
  gap:var(--neavoTopIconPairGap);
  pointer-events:auto;
  flex:1 1 0;
  min-width:0;
}
.topbar-left{ justify-content:flex-start; }
.topbar-right{ justify-content:flex-end; }
.topbar-brand{
  display:flex;
  align-items:center;
  pointer-events:none;
  min-width:0;
  padding-inline-end:8px;
}
/* Legacy: centered logo slot (unused after header cleanup) */
.topbar-center{
  position:absolute;
  left:50%;
  top:calc(env(safe-area-inset-top, 0px) + (var(--neavoTopbarH) / 2));
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  padding:8px 20px;
  z-index:1;
}
.brand-logo{
  height:var(--neavoTopLogoH);
  width:auto;
  max-width:min(42vw, 148px);
  display:block;
  object-fit:contain;
  opacity:1;
  image-rendering:-webkit-optimize-contrast;
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.10));
}

/* Right glass capsule — same shell material as .neavo-bottom-nav__pill */
.topbar-capsule{
  display:inline-flex;
  align-items:center;
  gap:var(--neavoTopCapsuleGap);
  height:var(--neavoTopCapsuleH);
  padding:0 var(--neavoTopCapsulePadX);
  border-radius:calc(var(--neavoTopCapsuleH) / 2);
  background:var(--neavo-top-capsule-bg);
  border:0.5px solid var(--neavo-top-capsule-border);
  backdrop-filter:var(--neavo-top-capsule-blur);
  -webkit-backdrop-filter:var(--neavo-top-capsule-blur);
  box-shadow:var(--neavo-top-capsule-shadow);
  pointer-events:auto;
  flex-shrink:0;
}
.topbar-capsule-divider{
  width:1px;
  height:20px;
  background:rgba(255, 255, 255, 0.22);
  border-radius:999px;
  flex:0 0 auto;
  pointer-events:none;
  align-self:center;
}


.top-btn{
  height: var(--neavoModalHeaderIconSize);
  width: var(--neavoModalHeaderIconSize);
  border: none;
  background: transparent;
  color: #FFFFFF;
  border-radius: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  padding: 0;
  transition: transform .08s ease, opacity .18s ease;
}
.top-btn:active{ transform: translateY(1px); }
@media (hover:hover){
  .top-btn:hover{
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0.88;
  }
}
.topbar .top-ic-svg{
  width:var(--neavoTopIconSize);
  height:var(--neavoTopIconSize);
  display:block;
  fill:currentColor;
  filter:none;
}
.top-ic-svg{width:20px;height:20px;display:block;fill:currentColor;}
/* Outline / SF-Symbols-style top icons: inner shapes stay un-filled so the stroke shows. */
.topbar .top-ic-svg.top-ic-svg--stroke,
.topbar .top-ic-svg.top-ic-svg--stroke *{
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}
.top-ic-svg.top-ic-svg--stroke,
.top-ic-svg.top-ic-svg--stroke *{
  fill: none;
  stroke: currentColor;
}
.topbar .top-ic-svg.top-ic-svg--xl{
  width:var(--neavoTopIconSizeXl);
  height:var(--neavoTopIconSizeXl);
}
.top-ic-svg.top-ic-svg--xl{
  width: 22px;
  height: 22px;
}
.top-ic{ font-size:18px; line-height:1; }
.topbar .top-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.top-btn--avatar{
  overflow:visible;
}
.top-ic--avatar{
  width:var(--neavo-top-header-avatar-size);
  height:var(--neavo-top-header-avatar-size);
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,0.22);
}
.top-account-avatar-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
}

/* Capsule Eye + avatar — after .topbar .top-ic-svg so icon size is not overridden to 22px */
.topbar-capsule .top-btn,
.topbar-capsule .top-btn--avatar{
  width:var(--neavo-top-header-control-size);
  height:var(--neavo-top-header-control-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
}
.topbar-capsule .top-ic,
.topbar-capsule .inv-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.topbar-capsule .top-ic-svg{
  width:var(--neavo-top-header-eye-icon-size);
  height:var(--neavo-top-header-eye-icon-size);
  flex-shrink:0;
}
.topbar-capsule .top-ic--avatar{
  width:var(--neavo-top-header-avatar-size);
  height:var(--neavo-top-header-avatar-size);
  box-shadow:0 0 0 1px rgba(255,255,255,0.22);
}
.topbar-capsule .top-ic-svg.top-ic-svg--phosphor{
  width:var(--neavo-top-header-eye-icon-size);
  height:var(--neavo-top-header-eye-icon-size);
  fill:currentColor;
  stroke:none;
  flex-shrink:0;
}

/* Guest vs signed-in top header + bottom nav layout */
html.is-guest #neavoBottomNav{
  display:none !important;
}
html.is-guest{
  --neavo-bottom-nav-footprint:0px;
  --neavo-bottom-nav-total:var(--neavo-bottom-hint-offset, 0px);
}
html.is-guest .topbar-auth-signed{
  display:none !important;
}
html.is-authenticated .topbar-auth-guest{
  display:none !important;
}

html[dir="rtl"] .topbar{ direction:ltr; } /* keep header layout stable in RTL */

.top-actions{ display:flex; align-items:center; gap:10px; }

.top-right{ display:flex; align-items:center; gap:10px; }

.top-icon{
  height:40px; min-width:40px;
  border:0;
  background:transparent;
  color:var(--text);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.top-icon:active{ transform: translateY(1px); }
.top-icon .gear, .top-icon .user{ font-size:20px; }

.inv-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.top-btn.is-on{
  border: none;
  background: transparent;
  box-shadow: none;
  color: #FFFFFF;
}

.icon-btn{
  height: var(--neavoModalHeaderIconSize);
  width: var(--neavoModalHeaderIconSize);
  min-width: var(--neavoModalHeaderIconSize);
  border: var(--neavoModalHeaderIconBorder);
  background: var(--neavoModalHeaderIconBg);
  color: var(--text);
  border-radius: var(--neavoModalHeaderIconRadius);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: var(--neavoModalHeaderIconShadow);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  transition: transform .08s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  padding: 0;
}
.icon-btn:active{ transform: translateY(1px); }
@media (hover:hover){
  .icon-btn:hover{
    border-color: rgba(255,255,255,.22);
    box-shadow:
      0 1px 0 rgba(255,255,255,.14) inset,
      0 -1px 0 rgba(0,0,0,.18) inset,
      0 1px 1px rgba(0,0,0,.24),
      0 10px 26px rgba(0,0,0,.26);
  }
}

.icon-btn.is-on{
  border-color: rgba(124,92,255,.35);
  background:
    linear-gradient(180deg, rgba(124,92,255,.18) 0%, rgba(124,92,255,.10) 100%),
    rgba(124,92,255,.06);
  color: var(--accent);
}
.inv-ic svg{
  width:22px; height:22px;
  display:block;
}


.pill-btn{
  height:40px;
  padding:0 14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  pointer-events:none;
}
.logo{
  font-weight:800;
  letter-spacing:.4px;
  font-size:16px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(124,92,255,.16);
  border:1px solid rgba(124,92,255,.30);
}

.main{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding-top:0;
  height:auto;
  overflow:hidden;
  /* iOS: let children use % height against this box (avoid nested 100vh vs fixed main mismatch) */
  min-height:0;
}

/* Map ↔ Nearby: stacked views with shared fade/slide timing */
.main > #mapView,
.main > #listView{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  box-sizing:border-box;
  opacity:1;
  transform:translate3d(0,0,0);
  transition:
    opacity var(--neavo-dur-view) var(--neavo-ease-out),
    transform var(--neavo-dur-view) var(--neavo-ease-out);
  will-change:opacity, transform;
}
.main > #mapView.neavo-view-onstage,
.main > #listView.neavo-view-onstage{
  opacity:1;
  transform:translate3d(0,0,0);
  pointer-events:auto;
}
.main > #mapView.neavo-view-offstage,
.main > #listView.neavo-view-offstage{
  opacity:0;
  transform:translate3d(0,12px,0);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .main > #mapView,
  .main > #listView{
    transition-duration:0.01ms;
  }
}

.view{
  height:100%;
  min-height:0;
  box-sizing:border-box;
}
.map{ width:100%; height:100%; }

.leaflet-container{
  background: #f4f6fb;
}

/* Map only (not #mapWrap chrome): gesture surface for Leaflet + Mapbox — pinch/pan/zoom stays in-engine. */
#map,
#map *{
  touch-action: none !important;
}

/* Indigo night map (matches Neavo palette)
   IMPORTANT: avoid heavy CSS filters on raster tiles, because they can
   wipe out street details (roads/labels) and make tiles look “flat”.
   We tint using overlay layers below (see ::before/::after).
*/
#map.map-indigo .leaflet-container{
  background: #0b1030;
}
.leaflet-control-attribution{
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.7) !important;
}

/* Absolute within #mapView — matches .map-range-control top (fixed broke when map view uses transform). */
#mapView .hud{
  position:absolute;
  top:calc(var(--neavoTopbarH) + env(safe-area-inset-top, 0px) + var(--neavo-map-chip-top-gap));
  right:12px;
  left:auto;
  width:auto;
  pointer-events:none;
  z-index:4000;
  color:rgba(232,237,246,0.95);
}
/* Mirror English (map control left / Free taps right): in RTL map is right, Free taps left */
html[dir="rtl"] #mapView .hud{
  right:auto;
  left:12px;
}
html[dir="rtl"] .hud-row{
  justify-content:flex-start;
}


.hud .badge{ color: #fff; pointer-events:auto; }
.hud-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.badge{
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  border-radius:999px;
}

.list-header{
  padding:14px 18px 6px;
  border-bottom:none;
  box-shadow:none;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.list-header-text{
  flex:1;
  min-width:0;
}

#listView .list-header{ position:sticky; }
#listView .list-actions{
  position:static;
  flex-shrink:0;
  display:flex;
  align-items:center;
  padding:0;
  margin:0;
}
.list-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
}

#listView .list-header .muted.tiny{
  margin-top:2px;
}

/* Card stack lives in .nearby-scroll-inner; #nearbyList is the scroll port only. */
#nearbyList.nearby{
  padding:0;
  display:block;
}
.person{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(165deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.05) 100%);
  border-radius:16px;
  cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 10px 28px rgba(0,6,22,0.32);
  transition:
    opacity 0.16s ease,
    border-color var(--neavo-dur-fast) var(--neavo-ease-out),
    box-shadow var(--neavo-dur-fast) var(--neavo-ease-out),
    transform var(--neavo-dur-fast) var(--neavo-ease-out);
}
@media (hover:hover){
  .person:hover{
    border-color:rgba(255,255,255,.15);
    box-shadow:
      0 1px 0 rgba(255,255,255,.1) inset,
      0 14px 36px rgba(0,8,28,0.38);
  }
}
.person:active{
  transform:scale(0.985);
  opacity:0.94;
}
.person .avatar{
  /* Slightly larger for better visual balance in the card (was 44×44). */
  width:50px; height:50px;
  flex-shrink:0;
  /* Nearby avatars should be perfectly circular */
  border-radius:999px;
  background: rgba(124,92,255,.22);
  border:1px solid rgba(124,92,255,.38);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  /* Subtle ambient glow + soft outer shadow — grounded, premium calm. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 6px 16px rgba(0,0,0,.26),
    0 0 22px rgba(124,92,255,.14);
}

/* Ensure photos in the Nearby list are clipped to a circle */
.person .avatar .avatar-img{ border-radius:999px; }

.avatar{ position:relative; overflow:hidden; }
.avatar .avatar-img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Compensate legacy crop guide padding so user photos fill circles */
.avatar .avatar-img.is-userpic,
.nmkr__face.is-userpic,
#ovAvatarImg.is-userpic,
#meAvatarImg.is-userpic{
  transform: scale(1.19);
  transform-origin: center;
}

.avatar .avatar-initials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:700; }
.avatar .avatar-img.hidden{ display:none; }
.person .meta{
  flex:1 1 auto;
  min-width:0;
}
.person .name{ font-weight:800; }
.person .sub{ color:var(--muted); font-size:12px; margin-top:2px; }
.person .sub.nearby-row-bio-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.person .dist{
  flex-shrink:0;
  color:rgba(245,246,253,0.9);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.01em;
}

.backdrop{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--settingsBackdropPad);
  padding: max(var(--settingsBackdropPad), env(safe-area-inset-top, 0px))
           max(var(--settingsBackdropPad), env(safe-area-inset-right, 0px))
           max(var(--settingsBackdropPad), env(safe-area-inset-bottom, 0px))
           max(var(--settingsBackdropPad), env(safe-area-inset-left, 0px));
  z-index:5000;
}
/* Above Settings / Auth backdrops (same .backdrop z-index; later siblings win — this one must stack on top). */
#deleteAccountConfirmModal.backdrop{
  z-index:5500;
}

.sheet{
  width:min(520px, 100%);
  border-radius: var(--radius);
  background: rgba(15,22,35,.95);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  padding:16px;
}
.sheet h2{ margin:0 0 8px; }
.muted{ color:var(--muted); line-height:1.45; }
.tiny{ font-size:12px; }

.check{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 14px;
}
.check input{ width:18px; height:18px; }

.row{ display:flex; gap:10px; flex-wrap:wrap; }

.btn{
  height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  transition:
    background var(--neavo-dur-fast) var(--neavo-ease-out),
    border-color var(--neavo-dur-fast) var(--neavo-ease-out),
    transform var(--neavo-dur-fast) var(--neavo-ease-out),
    box-shadow var(--neavo-dur-fast) var(--neavo-ease-out),
    opacity var(--neavo-dur-fast) var(--neavo-ease-out);
}
.btn:active:not(:disabled){
  transform:scale(0.98);
}
/* Base primary paint — extended in css/neavo-design-system.css for modal CTAs */
.btn.primary{
  background: rgba(124,92,255,.25);
  border-color: rgba(124,92,255,.45);
}
.btn.danger{
  background: rgba(255,77,77,.18);
  border-color: rgba(255,77,77,.35);
}
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn.full{ width:100%; }

.danger-zone{
  border: 1px solid rgba(255, 80, 80, .22);
}
.danger-zone .card-head{
  margin-bottom:8px;

  color: rgba(255, 160, 160, .95);
}

details.dev{ 
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
}
details.dev summary{
  list-style: none;
  cursor: pointer;
}
details.dev summary::-webkit-details-marker{ display:none; }



.toast{
  position:fixed;
  bottom:22px;
  left:50%;
  transform: translate(-50%, 10px);
  padding:12px 16px;
  border-radius:14px;
  background: rgba(15,22,35,.94);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Keep toasts above all sheets/modals (auth, settings, cropper, etc.) */
  z-index:99999;
  max-width:min(440px, 92vw);
  text-align:center;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  color:rgba(255,255,255,.92);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--neavo-dur-med) var(--neavo-ease-out), transform var(--neavo-dur-med) var(--neavo-ease-out);
}
.toast.toast--visible{
  opacity:1;
  transform: translate(-50%, 0);
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .toast{
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
}

.overlay{
  width:min(560px, 100%);
  border-radius: var(--radius);
  background: rgba(15,22,35,.96);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.overlay-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  border-bottom:none;
  box-shadow: var(--neavoHeaderSep);
  background: rgba(0,0,0,.15);
}
.avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  background: rgba(124,92,255,.22);
  border:1px solid rgba(124,92,255,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
.avatar.circle{ border-radius:999px; }
.avatar.big{
  width:56px; height:56px;
  border-radius:999px;
}
.ov-title{ flex:1; }
.ov-name{ font-size:16px; font-weight:900; }
.ov-meta{ color:var(--muted); font-size:12px; margin-top:2px; }

.overlay-body{ padding:14px; display:flex; flex-direction:column; gap:12px; }
.kv{
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  margin-top:10px;
}
.k{ color:var(--muted); font-size:12px; margin-bottom:6px; }
.v{ font-weight:700; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

.socials{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.socials .sbtn{
  height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.socials .sbtn--phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  font-weight:700;
}
.socials .sbtn--phone .sbtn-ic{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.9);
  line-height:0;
}
.socials .sbtn--phone .sbtn-txt{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  max-width:min(240px, 70vw);
  direction:ltr;
  unicode-bidi:embed;
}

.locked{
  padding:14px;
  border-bottom:none;
  box-shadow:
    inset 0 -1px 0 rgba(255, 90, 90, 0.07),
    0 10px 28px rgba(0, 4, 12, 0.18);
  background: rgba(255,77,77,.10);
}
.locked-title{ font-weight:900; }
.locked-sub{ color:var(--muted); margin:6px 0 10px; font-size:12px; }
.locked-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.locked-actions .btn{ flex:1 1 180px; }

.settings{
  width:min(560px, 100%);
  height: var(--settingsSheetH);
  max-height: var(--settingsSheetH);
  min-height: 0;
  /* Longhand radius: avoids asymmetric corner AA in WebKit/Chromium (flex + RTL + layers). */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  border-radius: var(--radius);
  isolation: isolate;
  background: rgba(15,22,35,.98);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.backdrop > .settings{
  min-width: 0;
}

/* Popup open animation: see css/neavo-design-system.css */

.settings-top{
  position: relative;
  z-index: 5;
  flex-shrink: 0;

  /* Use a 3-column grid so the title is truly centered in both RTL and LTR,
     regardless of the presence/width of left/right buttons. */
  display: grid;
  grid-template-columns: var(--neavoModalHeaderIconSize) 1fr var(--neavoModalHeaderIconSize);
  align-items: center;

  gap: 10px;

  /* unified height + breathing room */
  height: auto;
  min-height: var(--modalHeaderH);
  padding: var(--modalHeaderPadY) 14px;

  border-bottom: none;
  box-shadow: var(--neavoHeaderSep);
  background: var(--neavoModalHeaderBg);
}

.settings-top .settings-title{
  grid-column: 2;
  justify-self: center;
  text-align: center;
  width: 100%;
  margin: 0;
}

.settings-top > .icon-btn:first-child{
  grid-column: 1;
  justify-self: start;
}

.settings-top > .icon-btn:last-child{
  grid-column: 3;
  justify-self: end;
}
.settings-title{ font-size: var(--modalHeaderTitleSize);
font-weight: 800;
text-align: center;
flex: 1;
user-select: none;
  color: rgba(255,255,255,.96);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auth + mobile: single-line titles (size token handles long strings) */
.settings.auth .settings-title{
  display:block;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.settings-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding:12px;
}

.card{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding:12px;
  margin-bottom:12px;
}

.me-row{ display:flex; align-items:center; gap:12px; }
.me-meta{ flex:1; }
.me-name{ font-weight:900; }
.me-sub{ color:var(--muted); font-size:12px; margin-top:2px; }

.list{
  margin:12px 0;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:visible;
}


/* Subscription actions layout */
.page[data-page="subscription"] .sub-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-top:12px;
}
.page[data-page="subscription"] .sub-actions.sub-actions--subscription{
  margin-top: 14px;
  gap: 12px;
}
.page[data-page="subscription"] .sub-actions .btn.full{
  grid-column: 1 / -1;
}
@media (max-width: 420px){
  .page[data-page="subscription"] .sub-actions{
    grid-template-columns: 1fr;
  }
  .page[data-page="subscription"] .sub-actions .btn.full{
    grid-column: auto;
  }
}

/* Subscription feature list (UL) */
.page[data-page="subscription"] ul.list{
  border:none;
  background:transparent;
  padding:0;
  margin:10px 0 0;
  display:block;
  gap:0;
}
.page[data-page="subscription"] ul.list li{
  list-style:none;
  position:relative;
  padding-inline-start:18px;
  margin:8px 0;
}
.page[data-page="subscription"] ul.list li::before{
  content:"•";
  position:absolute;
  inset-inline-start:0;
  top:0;
}

/* Subscription — current plan + Premium promo (persuasive upgrade card) */
.page[data-page="subscription"] .sub-plan-card{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.09);
}
.page[data-page="subscription"] .sub-plan-card .card-head{
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.page[data-page="subscription"] .sub-current-plan-value{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
}

.page[data-page="subscription"] .sub-premium-promo{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(124,92,255,.28);
  background:
    radial-gradient(130% 90% at 85% -15%, rgba(212,175,55,.1), transparent 52%),
    radial-gradient(100% 70% at 0% 105%, rgba(124,92,255,.16), transparent 48%),
    rgba(255,255,255,.04);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 14px 44px rgba(124,92,255,.1);
}
.page[data-page="subscription"] .sub-premium-promo__accent{
  position: absolute;
  width: 160px;
  height: 160px;
  top: -56px;
  inset-inline-end: -48px;
  background: radial-gradient(circle at 40% 40%, rgba(212,175,55,.32), transparent 68%);
  opacity: 0.45;
  pointer-events: none;
}
.page[data-page="subscription"] .sub-premium-promo__accent--2{
  width: 130px;
  height: 130px;
  top: auto;
  bottom: -44px;
  inset-inline-end: auto;
  inset-inline-start: -40px;
  background: radial-gradient(circle at 55% 55%, rgba(124,92,255,.35), transparent 72%);
  opacity: 0.32;
}
.page[data-page="subscription"] .sub-premium-promo.is-active{
  border-color: rgba(212,175,55,.3);
  background:
    radial-gradient(130% 90% at 88% -12%, rgba(212,175,55,.14), transparent 52%),
    radial-gradient(95% 75% at 0% 102%, rgba(124,92,255,.2), transparent 50%),
    rgba(124,92,255,.06);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 16px 52px rgba(124,92,255,.14),
    0 0 40px rgba(212,175,55,.06);
}
.page[data-page="subscription"] .sub-premium-promo.is-active .sub-premium-promo__accent{
  opacity: 0.55;
}
.page[data-page="subscription"] .sub-premium-promo.is-active .sub-premium-promo__accent--2{
  opacity: 0.42;
}
.page[data-page="subscription"] .sub-premium-footnote{
  color: rgba(255,255,255,.48);
  text-align: center;
}
.page[data-page="subscription"] .sub-premium-promo__inner{
  position: relative;
  z-index: 1;
}
.page[data-page="subscription"] .sub-premium-promo__title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,.96);
  margin-bottom: 6px;
}
.page[data-page="subscription"] .sub-premium-promo__sub{
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255,255,255,.58);
}

.page[data-page="subscription"] ul.list.list--checks li.list-check-row::before{
  content: none;
}
.page[data-page="subscription"] ul.list.list--checks li.list-check-row{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-inline-start: 0;
  margin: 11px 0;
}
.page[data-page="subscription"] .list-check-ic{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(212,175,55,.4), rgba(124,92,255,.45));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 2px 8px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page[data-page="subscription"] .list-check-ic::after{
  content: "";
  width: 5px;
  height: 9px;
  border: solid rgba(255,255,255,.93);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
  margin-inline-start: 1px;
}
.page[data-page="subscription"] ul.list.list--checks li.list-check-row span[data-tr]{
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: rgba(255,255,255,.88);
}

.page[data-page="subscription"] .sub-premium-promo__cta{
  width: 100%;
  max-width: 100%;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(124,92,255,.25);
}

/* Account page — layout only; uses same cards/tokens as rest of Settings */
.page[data-page="account"] #accountSignedIn{
  display:flex;
  flex-direction:column;
}
.page[data-page="account"] #accountSignedIn > .card.account-hero-card{
  margin-bottom:16px;
}
.page[data-page="account"] #accountSignedIn > .card.account-info-card{
  margin-bottom:20px;
}
.page[data-page="account"] #accountSignedIn > .card.account-security-card{
  margin-bottom:20px;
}
.page[data-page="account"] #accountSignedIn > .card.account-delete-card{
  margin-bottom:12px;
  margin-top:8px;
}
.page[data-page="account"] .account-hero-card{
  padding:12px 12px 10px;
}
.page[data-page="account"] .account-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:5px;
}
.page[data-page="account"] .account-hero-avatar{
  width:64px;
  height:64px;
  margin:0 auto;
  font-size:18px;
}
.page[data-page="account"] .account-hero-name{
  font-size:17px;
  font-weight:900;
  color:rgba(255,255,255,.94);
  line-height:1.25;
  max-width:100%;
  padding:0 4px;
}
.page[data-page="account"] .account-hero-username{
  font-size:13px;
  line-height:1.3;
  max-width:100%;
  padding:0 4px;
  direction:ltr;
  unicode-bidi:embed;
}
.page[data-page="account"] .account-plan-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:4px;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.88);
}
.page[data-page="account"] .account-plan-badge.is-premium{
  background:rgba(124,92,255,.2);
  border-color:rgba(124,92,255,.42);
  color:rgba(255,255,255,.95);
}
.page[data-page="account"] .account-info-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.page[data-page="account"] .account-info-kv{
  margin:0;
}
.page[data-page="account"] .account-info-kv .k{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:4px;
  letter-spacing:.02em;
}
.page[data-page="account"] .account-info-kv .v{
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  word-break:break-word;
}
.page[data-page="account"] .account-info-note{
  margin:-4px 0 0;
  line-height:1.4;
}
.page[data-page="account"] .account-security-card .card-head{
  margin-bottom:10px;
}
.page[data-page="account"] .account-security-card .item{
  margin-top:0;
}
.page[data-page="account"] .account-pw-box{
  margin-top:12px;
  padding-top:4px;
}
.page[data-page="account"] .account-pw-actions{
  margin-top:12px;
}
.page[data-page="account"] .account-logout-wrap{
  display:flex;
  width:100%;
  margin:8px 0 18px;
  padding:0;
  box-sizing:border-box;
}
/* Premium neutral glass — same language as Save / map controls; not destructive */
.page[data-page="account"] .account-logout-btn{
  width:100%;
  height:42px;
  min-height:42px;
  padding:0 18px;
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.01em;
  color:rgba(248,250,255,0.96);
  border:1px solid rgba(255,255,255,0.16);
  background:
    linear-gradient(165deg, rgba(244,246,253,0.14) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 100%),
    radial-gradient(120% 80% at 50% -24%, rgba(124,92,255,0.09), transparent 58%),
    rgba(255,255,255,0.04);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.14) inset,
    0 10px 28px rgba(0,6,22,0.3);
  transition:
    background var(--neavo-dur-fast) var(--neavo-ease-out),
    border-color var(--neavo-dur-fast) var(--neavo-ease-out),
    transform var(--neavo-dur-fast) var(--neavo-ease-out),
    box-shadow var(--neavo-dur-fast) var(--neavo-ease-out),
    opacity var(--neavo-dur-fast) var(--neavo-ease-out);
}
@media (hover:hover){
  .page[data-page="account"] .account-logout-btn:hover{
    border-color:rgba(255,255,255,0.24);
    background:
      linear-gradient(165deg, rgba(248,251,255,0.18) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%),
      radial-gradient(120% 80% at 50% -24%, rgba(124,92,255,0.12), transparent 58%),
      rgba(255,255,255,0.06);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.16) inset,
      0 -1px 0 rgba(0,0,0,0.14) inset,
      0 14px 32px rgba(0,8,28,0.36);
  }
}
.page[data-page="account"] .account-logout-btn:active:not(:disabled){
  transform:scale(0.98);
  opacity:0.9;
}
.page[data-page="account"] .account-delete-card{
  border-color:rgba(255,77,77,.18);
  background:rgba(255,77,77,.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 8px 24px rgba(0,0,0,0.2);
}
.page[data-page="account"] .account-delete-title{
  color:rgba(255,255,255,.88);
  font-size:14px;
  margin-bottom:8px;
}
.page[data-page="account"] .account-delete-note{
  margin:0 0 12px;
  line-height:1.45;
}
.page[data-page="account"] .account-delete-btn{
  width:100%;
  height:40px;
  min-height:40px;
  font-size:13px;
  font-weight:700;
  background:rgba(255,77,77,.1);
  border-color:rgba(255,77,77,.28);
}
.page[data-page="account"] .account-delete-btn:active{
  transform:translateY(1px);
}

.item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  text-align:right;
}
.item-title{ font-weight:900; }
.item-sub{ display:none; }
.item-arrow{ opacity:.8; font-weight:900; }

.section-title{
  margin:14px 2px 8px;
  color: rgba(255,255,255,.85);
  font-weight:900;
  font-size:13px;
  letter-spacing:.3px;
}

.field{ margin-top:10px; }
.field label{ display:block; color:var(--muted); font-size:12px; margin-bottom:6px; }

/* Social username labels: add platform official logos next to names */
.field.social-field label{
  display:flex;
  align-items:center;
  gap:8px;
}
.app-logo{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  flex: 0 0 18px;
}
.app-logo svg{
  width:14px;
  height:14px;
  display:block;
}
.field input, .field select, .field textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.22);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.field textarea{ resize:vertical; }

/* Profile: gender + DOB — matched height, padding, radius (symmetrical row) */
section.page[data-page="profile"] .grid2--profile-dob{
  align-items:start;
}
section.page[data-page="profile"] .grid2--profile-dob .field--gender-row > label,
section.page[data-page="profile"] .grid2--profile-dob .field--dob > label{
  margin-bottom:6px;
}
section.page[data-page="profile"] .grid2--profile-dob .field--gender-row select,
section.page[data-page="profile"] .grid2--profile-dob .field--dob .dob-field-btn{
  box-sizing:border-box;
  width:100%;
  height:44px;
  min-height:44px;
  max-height:44px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  font-size:15px;
  line-height:1.2;
  outline:none;
}
section.page[data-page="profile"] .grid2--profile-dob .field--dob .dob-field-btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
section.page[data-page="profile"] .grid2--profile-dob .field--dob .dob-field-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
section.page[data-page="profile"] .grid2--profile-dob .dob-field-btn__value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
section.page[data-page="profile"] .grid2--profile-dob .dob-field-btn--empty .dob-field-btn__value{
  color:var(--muted);
  font-weight:400;
}
section.page[data-page="profile"] .grid2--profile-dob .dob-field-btn__ic{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  opacity:.75;
}
section.page[data-page="profile"] .grid2--profile-dob .dob-field-btn__ic svg{
  width:18px;
  height:18px;
  display:block;
}
section.page[data-page="profile"] .grid2--profile-dob .field--dob .profile-dob-age-preview{
  margin:5px 0 0;
  font-size:11px;
  line-height:1.3;
  min-height:1.3em;
  opacity:.85;
}

/* Profile bio: single line + counter (fixed row height) */
section.page[data-page="profile"] .field--bio .bio-input-line{
  width:100%;
  box-sizing:border-box;
  min-height:44px;
  max-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.22);
  color:var(--text);
  font-size:15px;
  line-height:1.2;
  outline:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
section.page[data-page="profile"] .field--bio .bio-char-row{
  display:flex;
  justify-content:flex-end;
  margin-top:4px;
  min-height:1.15em;
}
section.page[data-page="profile"] .field--bio .bio-char-count{
  font-variant-numeric: tabular-nums;
  letter-spacing:.02em;
}

/* DOB bottom sheet + iOS-like scroll wheels */
.dob-wheel-root{
  z-index:7000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 !important;
  background: rgba(0,0,0,.52);
}
.dob-wheel-root.hidden{ display:none !important; }
.dob-wheel-panel{
  width:100%;
  max-width:520px;
  margin:0 auto;
  border-radius:18px 18px 0 0;
  background: linear-gradient(180deg, rgba(22,28,42,.98), rgba(14,18,28,.99));
  border:1px solid rgba(255,255,255,.08);
  border-bottom:none;
  box-shadow: 0 -12px 40px rgba(0,0,0,.45);
  padding:0 0 max(12px, env(safe-area-inset-bottom));
  animation: dobWheelSlideUp .22s ease-out;
}
@keyframes dobWheelSlideUp{
  from{ transform: translateY(18px); opacity:.85; }
  to{ transform: translateY(0); opacity:1; }
}
.dob-wheel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px 8px;
  border-bottom: none;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 12px 32px rgba(0, 2, 10, 0.2);
}
.dob-wheel-done{
  border:none;
  background:transparent;
  color:var(--accent);
  font-size:16px;
  font-weight:600;
  padding:6px 4px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dob-wheel-head-title{
  font-size:15px;
  font-weight:600;
  color:var(--text);
  letter-spacing:.01em;
}
.dob-wheel-frame{
  position:relative;
  padding:4px 0 8px;
}
.dob-wheel-highlight{
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  height:44px;
  margin-top:-22px;
  border-radius:10px;
  background: rgba(124,92,255,.10);
  border:1px solid rgba(124,92,255,.22);
  pointer-events:none;
  z-index:0;
}
.dob-wheel-columns{
  position:relative;
  z-index:1;
  display:flex;
  align-items:stretch;
  gap:0;
  padding:0 4px;
}
.dob-wheel-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.dob-wheel-col--month{
  flex:1.12;
  min-width:5.75rem;
}
.dob-wheel-col--month .dob-wheel-item{
  font-size:16px;
  letter-spacing:.01em;
}
.dob-wheel-col--year{ flex:1.15; }
.dob-wheel-col-label{
  text-align:center;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 2px 4px;
}
.dob-wheel-scroll{
  height:220px;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:pan-y;
}
.dob-wheel-scroll::-webkit-scrollbar{ display:none; }
.dob-wheel-item{
  height:44px;
  min-height:44px;
  scroll-snap-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:500;
  color:rgba(255,255,255,.88);
  user-select:none;
}
.dob-wheel-col + .dob-wheel-col{
  border-left:1px solid rgba(255,255,255,.06);
}

.switch{
  display:flex;
  align-items:center;
  gap:10px;
}
.switch input{ display:none; }
.switch .slider{
  width:48px; height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.08);
  position:relative;
}
.switch .slider::after{
  content:"";
  position:absolute;
  top:3px; right:3px;
  width:22px; height:22px;
  border-radius:50%;
  background: rgba(255,255,255,.75);
  transition: transform .18s ease;
}
.switch input:checked + .slider{
  background: rgba(124,92,255,.28);
  border-color: rgba(124,92,255,.55);
}
.switch input:checked + .slider::after{ transform: translateX(-20px); }
.switch-text{ font-weight:800; }

.bullets{ margin:0; padding-right:18px; color:rgba(255,255,255,.86); }
.bullets li{ margin:8px 0; color:rgba(255,255,255,.86); }

/* Chevron glyph direction is controlled by JS per language (AR/EN).
   Do NOT mirror via CSS; it breaks RTL/LTR expectations. */
/* Back-button chevrons:
   ‹ (U+2039) and › (U+203A) are Bidi_Mirrored, so an RTL run flips them visually
   even when textContent is the right glyph. Force an LTR isolate on the glyph
   container so the JS swap (LTR: ‹ , RTL: ›) renders as authored.
   Layout direction of the surrounding button/header is untouched. */
.chev{
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 1em;
  height: 1em;
  direction:ltr;
  unicode-bidi:isolate;
  color: rgba(255,255,255,.92);
  /* Optical centering: ‹/› glyphs sit slightly off-center inside their em-box */
  transform: translateY(-0.5px);
}
.x{
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 1em;
  height: 1em;
  color: rgba(255,255,255,.92);
}

/* Marker styling for Leaflet divIcon */
.neavo-marker{ background:transparent; border:0; }
.neavo-marker .pin{
  width:38px; height:48px;
  position:relative;
  transform: translateZ(0);
}
.neavo-marker .pin::before{
  content:"";
  position:absolute; left:50%; top:0;
  width:38px; height:38px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(124,92,255,.16), 0 10px 24px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.82);
}
.neavo-marker .pin::after{
  content:"";
  position:absolute; left:50%; top:26px;
  width:0; height:0;
  transform: translateX(-50%);
  border: 11px solid transparent;
  border-top-color: var(--accent);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.neavo-marker .pin-inner{
  position:absolute; left:50%; top:6px;
  width:26px; height:26px;
  transform: translateX(-50%);
  border-radius:50%;
  overflow:hidden;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.neavo-marker .pin-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.neavo-marker .pin-initials{
  font-weight:900;
  font-size:12px;
  letter-spacing:.5px;
  color: rgba(255,255,255,.95);
}

/* Profile avatar circle */
.hidden-file{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.avatar-circle{
  width:88px; height:88px;
  border-radius:999px;
  background: rgba(124,92,255,.22);
  border:1px solid rgba(124,92,255,.38);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:22px;
  margin:0 auto;
  cursor:pointer;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  transition:border-color .22s ease, box-shadow .22s ease, transform .14s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.avatar-circle:hover{
  border-color: rgba(124,92,255,.58);
  box-shadow: 0 0 0 1px rgba(124,92,255,.2), 0 10px 28px rgba(124,92,255,.12);
}
.avatar-circle:active{
  transform: scale(0.97);
}
.avatar-circle:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(124,92,255,.42), 0 8px 24px rgba(124,92,255,.1);
}

.avatar-circle .avatar-img{ width:100%; height:100%; object-fit:cover; border-radius:999px; display:block; }
.avatar-circle .avatar-img.hidden{ display:none; }
.avatar-circle .avatar-initials{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; }
.avatar-circle.has-img{ border-color: rgba(255,255,255,.18); }

/* If a user photo exists, remove colored ring/background so the photo fills edge-to-edge */
.avatar-circle[data-has-photo="1"]{
  background: transparent;
  border: 0;
  box-shadow: 0 2px 14px rgba(0,0,0,.28);
}
.avatar-circle[data-has-photo="1"]:hover{
  box-shadow: 0 0 0 2px rgba(124,92,255,.32), 0 12px 32px rgba(0,0,0,.32);
}
.avatar-circle[data-has-photo="1"]:focus-visible{
  box-shadow: 0 0 0 3px rgba(124,92,255,.45), 0 10px 28px rgba(0,0,0,.3);
}

.profile-avatar-wrap{
  text-align:center;
  position:relative;
  padding: 2px 0 0;
  margin-bottom: 0;
}
.profile-avatar-hint{
  margin: 6px auto 0;
  max-width: 22rem;
  padding: 0 12px;
  font-size: 11px;
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,.42);
  text-align: center;
}

section[data-page="profile"] .profile-avatar-wrap + .divider{
  margin-top: 8px;
  margin-bottom: 10px;
}

.divider{ display:flex; align-items:center; justify-content:center; gap:0; margin:14px 0; color:rgba(255,255,255,.65); font-size:12px; font-weight:800; letter-spacing:.2px; }
.divider:before,.divider:after{
  content:"";
  flex:1;
  height:1px;
  border-radius:2px;
  background:linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.048) 20%,
    rgba(255,255,255,.062) 50%,
    rgba(255,255,255,.048) 80%,
    transparent 100%
  );
  opacity:.85;
}
.divider span{ padding:0 12px; }


.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width:420px){ .grid2{ grid-template-columns:1fr; } }

.card-head{
  margin-bottom:8px;
 font-weight:900; margin-bottom:10px; color:rgba(255,255,255,.92); }

.auth-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.auth-grid .btn{ width:100%; }

#listView{
  background:
    radial-gradient(120% 48% at 50% -12%, rgba(52,78,130,.14), transparent 58%),
    radial-gradient(80% 40% at 100% 0%, rgba(124,92,255,.06), transparent 45%),
    var(--bg);
}

.nearby{
  background: transparent;
}


/* --- Settings v0.6 additions --- */
.me-btn{
  width:100%;
  background:transparent;
  border:0;
  padding:0;
  color:inherit;
  cursor:pointer;
  text-align:right;
}
.btn.danger{
  background: rgba(255,77,77,.14);
  border-color: rgba(255,77,77,.35);
}
.btn.ghost{
  background: rgba(255,255,255,.02);
}

/* Center icon + label in the email chooser button (iOS Safari baseline quirk fix) */
#btnChooserEmail{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height:1;
}
#btnChooserEmail .social-ico{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
#btnChooserEmail .social-label{
  display:block;
  line-height:1;
}
.article-body{
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.7;
}
.article-body h3{
  margin: 10px 0 6px;
  font-size: 14px;
}
.article-body p{ margin: 8px 0; }
.article-body ul{ margin: 8px 0; padding-right: 18px; }


/* --- Auth (Login/Signup) minimal styles --- */
.link-btn{
  width:100%;
  background:transparent;
  border:0;
  padding:10px 8px;
  color: var(--accent);
  font-weight:700;
  cursor:pointer;
}
.link-btn:hover{ opacity:.9; }
.linkish{
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
}
.linkish:hover{ text-decoration: underline; }

.legal-inline{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px;
  line-height:1.6;
}
.legal-inline .legal-text{
  color: rgba(255,255,255,.75);
  font-weight:700;
}


.check-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 14px;
  color: var(--text);
  font-size: 13px;
}
.check-row input{ width:18px; height:18px; }

/* Settings / Auth modal header icons — inherit the unified premium glass via .icon-btn tokens. */
.settings-top .icon-btn{
  /* All visual tokens flow from the base .icon-btn rule; this block only locks size so
     the .settings-top grid columns stay tight even if .icon-btn ever changes width. */
  width: var(--neavoModalHeaderIconSize);
  min-width: var(--neavoModalHeaderIconSize);
  height: var(--neavoModalHeaderIconSize);
}
.settings-top .chev{ font-size: 18px; }
.settings-top .x{ font-size: 20px; }

.auth-view .btn{
  width:100%;
  display:block;
  height:40px;
}
.auth-view .btn.primary{ margin-top:12px; }
.auth-view .link-btn{ text-align:center; padding:8px 8px; }

/* --- Social buttons (Auth / Signup) --- */
.social-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.btn.social-btn{
  height:44px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  position:relative;
  text-align:center;
  padding:0 16px;
}

/* Ensure social button label is perfectly centered on mobile (no baseline drop) */
.btn.social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn.social-btn .social-ico{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.btn.social-btn .social-label{ display:inline-block; }

/* brand-ish tweaks (subtle, still within Neavo theme) */
.btn.social-btn.apple{ background: rgba(255,255,255,.10); }
.btn.social-btn.facebook{ background: rgba(255,255,255,.07); }
.btn.social-btn.google{ background: rgba(255,255,255,.07); }
.btn.social-btn.phone,
.btn.social-btn.email{ background: rgba(255,255,255,.07); }

/* Fix: Center text vertically on mobile (some browsers render inline text lower)
   and keep icon + label perfectly centered like Picsart. */
.btn.social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn.social-btn .social-ico{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  width:22px;
  height:22px;
}

.btn.social-btn .social-label{
  line-height:1;
}

/* =========================
   Neavo Pin Marker (SVG)
========================= */
.neavo-marker{ background:transparent !important; border:0 !important; }
.neavo-marker .pin-svg{
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 0 rgba(0,0,0,0));
}
.neavo-marker:not(.premium-marker) .pin-body{ fill: rgba(255,255,255,.98); stroke: rgba(10,14,30,.55); stroke-width: 1.2; }
.premium-marker .pin-body{ /* fill comes from SVG gradient */ }
.neavo-marker .pin-ring{ fill: rgba(255,255,255,.92); stroke: rgba(10,14,30,.25); stroke-width: 1.2; }
.neavo-marker .pin-fallback{
  fill: rgba(0,0,0,.55);
  font-size: 12px;
  font-weight: 900;
}




/* ===== Map indigo tint overlay ===== */
#map{ position: relative; 
height:100%; width:100%;}
#mapTint{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:none;
  z-index:250; /* above tiles, below markers */
  background:
    radial-gradient(1200px 800px at 20% 15%, rgba(120,120,255,.28), rgba(0,0,0,0)),
    radial-gradient(900px 700px at 80% 70%, rgba(80,90,255,.20), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(38,44,120,.22), rgba(8,10,26,.40));
  mix-blend-mode: screen;
  opacity: .95;
}
#map.map-indigo #mapTint{ display:block; }
/* ===== Premium highlighting (Nearby list + map marker) ===== */
.premium-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Legacy SVG pin markers (unused by nmkr avatars) — no animated glow */
.premium-marker .pin-svg{
  animation: none;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(212,175,55,.22));
}
@keyframes goldGlow{
  0%   { filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(212,175,55,.18)); }
  50%  { filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 16px rgba(255,214,102,.35)); }
  100% { filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(212,175,55,.18)); }
}

/* —— Premium rows: VIP metallic gold; glow contained inside the card (inner light + edge lip, no outer halo box) —— */
.person.premium{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  /* Forces a composited layer so WebKit honours border-radius clipping for filtered pseudo-elements */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  min-height:min-content;
  border:1px solid rgba(220,190,120,.58);
  border-radius:16px;
  /* Hard rounded clip — fixes filtered ::after bleed where overflow+radius alone fail (esp. Safari) */
  clip-path:inset(0 round 16px);
  -webkit-clip-path:inset(0 round 16px);
  box-shadow:
    0 0 0 1px rgba(70,50,28,.45) inset,
    0 1px 0 rgba(255,248,228,.2) inset,
    0 -1px 0 rgba(38,28,16,.55) inset,
    inset 0 0 42px rgba(95,68,38,.14),
    inset 0 14px 48px -18px rgba(200,155,80,.12),
    0 8px 24px rgba(0,0,0,.3);
  background:
    radial-gradient(100% 85% at 50% 16%, rgba(200,155,75,.34), transparent 55%),
    radial-gradient(120% 90% at 8% 102%, rgba(55,40,22,.55), transparent 48%),
    radial-gradient(120% 90% at 98% 102%, rgba(55,40,22,.55), transparent 48%),
    linear-gradient(165deg,
      rgba(42,32,22,.97) 0%,
      rgba(58,44,28,.96) 22%,
      rgba(85,62,36,.94) 48%,
      rgba(52,40,26,.97) 78%,
      rgba(38,28,18,.98) 100%),
    linear-gradient(125deg,
      rgba(180,140,70,.16) 0%,
      rgba(120,85,45,.09) 35%,
      rgba(210,170,95,.14) 52%,
      rgba(95,68,38,.1) 100%),
    rgba(28,22,16,.99);
  color:inherit;
  transition:
    transform .28s cubic-bezier(.25,.82,.25,1),
    box-shadow .35s ease,
    border-color .28s ease;
  animation:premiumCardGlow 6s ease-in-out infinite;
}

/* Same flow as default .name (block + inline text) */
.person.premium .name--premium-row{
  display:block;
  min-width:0;
}
.person.premium .name-text{
  display:inline;
  word-break:break-word;
  color:rgba(255,255,255,.98);
}
.person.premium .premium-badge{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  margin-inline-start:8px;
  padding:2px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.03em;
  line-height:1.35;
  color:rgba(255,248,230,.96);
  border:1px solid rgba(230,200,120,.55);
  background:rgba(28,22,16,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,250,235,.20),
    0 1px 4px rgba(0,0,0,.2);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

.person.premium .dist{
  color:rgba(255,255,255,.96);
}

/* Activity lines: warm gold-brown on metal (reference); keep “active” green */
.person.premium .activity-status--recent{
  color:rgba(210,175,125,.92);
}
.person.premium .activity-status--away{
  color:rgba(185,150,105,.82);
}
.person.premium .activity-status--unknown{
  color:rgba(165,135,95,.72);
}

/* Shine below copy/avatar: explicit stack — base (::before < sweep ::after < flex children) */
.person.premium > *{
  position:relative;
  z-index:3;
}

.person.premium .meta{
  flex:1 1 auto;
  min-width:0;
  min-height:min-content;
  align-self:center;
  overflow:visible;
}
.person.premium .avatar,
.person.premium .dist{
  align-self:center;
}
.person.premium .dist{
  overflow:visible;
}

.person.premium::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(ellipse 165% 95% at 50% -8%, rgba(255,222,165,.16), transparent 58%),
    linear-gradient(180deg, rgba(255,244,226,.09) 0%, transparent 28%),
    radial-gradient(ellipse 85% 55% at 50% -5%, rgba(255,226,182,.08), transparent 62%),
    radial-gradient(ellipse 36% 28% at 0% 0%, rgba(240,198,118,.09), transparent 70%),
    radial-gradient(ellipse 36% 28% at 100% 0%, rgba(240,198,118,.09), transparent 70%),
    linear-gradient(135deg, rgba(255,255,255,.04) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.06) 100%);
}

/*
  Premium gold sweep: blurred angled gradient + screen blend (::after inherits card radius).
  Parent uses clip-path round 16px so filtered/blended paint cannot square off at corners (Safari-safe).
*/
.person.premium::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  z-index:2;
  border-radius:inherit;
  /* Rely on parent overflow + rounding; pseudo overflow interacts badly with filter + Safari clip */
  overflow:visible;
  -webkit-mask-image:none;
  mask-image:none;
  clip-path:none;
  -webkit-clip-path:none;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 11%,
      rgba(186,132,62,0.012) 18%,
      rgba(206,154,74,0.048) 24%,
      rgba(216,164,92,0.15) 32%,
      rgba(226,174,94,0.23) 40%,
      rgba(232,180,94,0.34) 43%,
      rgba(226,174,88,0.46) 47%,
      rgba(218,162,78,0.54) 49%,
      rgba(212,154,70,0.56) 50%,
      rgba(218,162,78,0.54) 51%,
      rgba(226,174,88,0.46) 53%,
      rgba(232,180,94,0.34) 57%,
      rgba(226,174,94,0.23) 60%,
      rgba(216,164,92,0.15) 68%,
      rgba(206,154,74,0.048) 76%,
      rgba(186,132,62,0.012) 82%,
      transparent 89%,
      transparent 100%
    );

  filter:
    blur(14px)
    brightness(1.18);

  mix-blend-mode: screen;

  transform: translateX(-140%) skewX(-14deg);

  animation: premiumGoldSweep 6.5s linear infinite;
}

@keyframes premiumGoldSweep{
  0%{
    transform:translateX(-140%) skewX(-14deg);
    opacity:0;
  }

  /* Narrower seam ramps — full brightness ~99.3% of the cycle */
  0.3%{
    opacity:0.5;
  }
  0.65%{
    opacity:0.84;
  }
  1%{
    opacity:1;
  }

  99.15%{
    opacity:1;
  }

  99.42%{
    opacity:0.46;
  }
  99.68%{
    opacity:0.14;
  }
  99.93%{
    opacity:0.02;
  }

  100%{
    transform:translateX(140%) skewX(-14deg);
    opacity:0;
  }
}

@keyframes premiumCardGlow{
  0%, 100%{
    box-shadow:
      0 0 0 1px rgba(70,50,28,.42) inset,
      0 1px 0 rgba(255,248,228,.17) inset,
      0 -1px 0 rgba(38,28,16,.52) inset,
      inset 0 0 38px rgba(95,72,42,.11),
      inset 0 12px 44px -20px rgba(190,148,72,.09),
      0 8px 22px rgba(0,0,0,.28);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(70,50,28,.46) inset,
      0 1px 0 rgba(255,250,235,.21) inset,
      0 -1px 0 rgba(38,28,16,.55) inset,
      inset 0 0 48px rgba(110,82,48,.13),
      inset 0 16px 52px -18px rgba(205,158,82,.11),
      0 10px 26px rgba(0,0,0,.31);
  }
}

@media (hover:hover){
  .person.premium:hover{
    animation:none;
    transform:translate3d(0,-1px,0);
    border-color:rgba(232,205,138,.72);
    box-shadow:
      0 0 0 1px rgba(72,52,30,.46) inset,
      0 1px 0 rgba(255,250,238,.26) inset,
      0 -1px 0 rgba(36,26,14,.52) inset,
      inset 0 0 52px rgba(108,78,42,.14),
      inset 0 18px 56px -16px rgba(212,165,88,.11),
      0 11px 30px rgba(0,0,0,.34);
  }
}
.person.premium:active{
  animation:none;
  transform:translate3d(0,1px,0);
  transition-duration:.12s;
}

/* Avatar: inward gold lip + compact depth only (no outward gold halo) */
.person.premium .avatar{
  width:50px;
  height:50px;
  flex-shrink:0;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(220,192,118,.52);
  background:rgba(124,92,255,.18);
  box-shadow:
    0 0 0 1px rgba(255,235,208,.14) inset,
    0 -2px 10px rgba(55,38,22,.35) inset,
    0 3px 0 rgba(255,236,214,.08) inset,
    0 5px 14px rgba(0,0,0,.26);
}
.person.premium .avatar .avatar-img,
.person.premium .avatar .avatar-initials{
  border-radius:999px;
}


/* =========================
   Avatar Viewer (Instagram-like)
========================= */
#avatarViewer{
  backdrop-filter: blur(6px);
}
.avatar-viewer{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.avatar-viewer .close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: var(--neavoModalHeaderIconSize);
  height: var(--neavoModalHeaderIconSize);
  border-radius: var(--neavoModalHeaderIconRadius);
  border: var(--neavoModalHeaderIconBorder);
  background: var(--neavoModalHeaderIconBg);
  box-shadow: var(--neavoModalHeaderIconShadow);
  color: rgba(255,255,255,.92);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
html[dir="rtl"] .avatar-viewer .close{
  right: auto;
  left: 16px;
}
.avatar-viewer .big-circle{
  width: min(72vw, 320px);
  height: min(72vw, 320px);
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 32px rgba(0,0,0,.35);
}
.avatar-viewer .big-circle img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none;
}


/* Ensure overlays are always above Leaflet panes */
#profileOverlay.backdrop{ z-index:5200; }
#premiumNudge.backdrop{ z-index:5600; }
#premiumNudge.premium-nudge--over-profile .sheet{
  margin-top:max(0px, env(safe-area-inset-top, 0px));
}

/* Profile popup — floating lower-middle card + dim/blur scrim (not a bottom sheet) */
#profileOverlay.neavo-bottom-sheet{
  align-items:center;
  justify-content:center;
  padding:
    max(52px, calc(env(safe-area-inset-top, 0px) + 36px))
    max(var(--settingsBackdropPad), env(safe-area-inset-right, 0px))
    max(96px, calc(env(safe-area-inset-bottom, 0px) + 72px))
    max(var(--settingsBackdropPad), env(safe-area-inset-left, 0px));
  background:rgba(4,8,18,0);
  -webkit-backdrop-filter:blur(0) saturate(100%);
  backdrop-filter:blur(0) saturate(100%);
  transition:
    background var(--neavo-dur-backdrop) var(--neavo-ease-out),
    backdrop-filter var(--neavo-dur-backdrop) var(--neavo-ease-out),
    -webkit-backdrop-filter var(--neavo-dur-backdrop) var(--neavo-ease-out);
}
#profileOverlay.neavo-bottom-sheet.neavo-sheet-visible{
  background:rgba(4,8,18,.54);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
}
#profileOverlay.neavo-bottom-sheet > .overlay{
  opacity:0;
  transform:translate3d(0,28px,0) scale(0.97);
  transition:
    transform var(--neavo-dur-sheet) var(--neavo-ease-spring),
    opacity var(--neavo-dur-backdrop) var(--neavo-ease-out);
  will-change:transform, opacity;
}
#profileOverlay.neavo-bottom-sheet.neavo-sheet-visible > .overlay{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
@media (prefers-reduced-motion: reduce){
  #profileOverlay.neavo-bottom-sheet,
  #profileOverlay.neavo-bottom-sheet > .overlay{
    transition-duration:0.01ms !important;
  }
  #profileOverlay.neavo-bottom-sheet.neavo-sheet-visible{
    background:rgba(4,8,18,.54);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
  }
}
#avatarViewer.backdrop{ z-index:6000; }
/* Ensure cropper modal always appears above Settings/Profile layers */
#cropperModal.backdrop{ z-index:9999; }
.overlay{ position:relative; z-index:5100; }


/* Indigo Map Tint Overlay
   - ::before darkens slightly to match top bar
   - ::after adds indigo tint
   We avoid blend modes (browser/device differences) and keep roads visible.
*/
#map.map-indigo{ position:relative; }
#map.map-indigo::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.18);
  pointer-events:none;
  z-index: 399;
}
#map.map-indigo::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(34, 48, 120, 0.28); /* indigo tint */
  pointer-events:none;
  z-index: 401;
}



/* =========================
   NEAVO - INDIGO MAP MATCH TOPBAR (FINAL)
   ========================= */

.map-wrap{ position:relative; height:100%; }
#map{ position:absolute; inset:0; 
height:100%; width:100%;}
#mapTint{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:none;
  z-index:250; /* above tiles, below markers */
  /* Use the same base tone as the top bar, but keep roads visible */
  background:
    radial-gradient(900px 700px at 25% 20%, rgba(70,110,255,.18), rgba(0,0,0,0) 60%),
    radial-gradient(800px 700px at 80% 75%, rgba(40,80,210,.14), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, rgba(10,14,22,.20), rgba(10,14,22,.62));
  mix-blend-mode: multiply;
  opacity: 1;
}

#map.map-indigo + #mapTint{ display:block; }

/* Hard-stop any old tile filters that wash out or crush detail */
#map .leaflet-tile,
#map .leaflet-tile-pane{
  filter:none !important;
  -webkit-filter:none !important;
}

/* Match attribution to dark UI */
.leaflet-control-attribution{
  background: rgba(10,14,22,.55) !important;
  color: rgba(255,255,255,.7) !important;
}

/* =========================
   FINAL FIX (NO MARKER TINT)
   Put #mapTint inside Leaflet tilePane and keep it BELOW markerPane.
   ========================= */
#map .leaflet-tile-pane{ position:absolute; }

/* Override any older #mapTint rules above */
#map #mapTint{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  display:none !important;
  z-index: 5 !important; /* within tilePane only */

  /* Same tone as top bar (rgba(10,14,22,.78)) but keep roads visible */
  background:
    radial-gradient(900px 700px at 25% 20%, rgba(70,110,255,.18), rgba(0,0,0,0) 60%),
    radial-gradient(800px 700px at 80% 75%, rgba(40,80,210,.14), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, rgba(10,14,22,.20), rgba(10,14,22,.62));

  mix-blend-mode: multiply !important;
  opacity: 1 !important;
}

#map.map-indigo #mapTint{ display:block !important; }

/* Ensure Leaflet marker pane stays above everything */
#map .leaflet-marker-pane,
#map .leaflet-popup-pane,
#map .leaflet-control-container{
  z-index: 600 !important;
}

/* MAPBOX STABILIZATION START — Mapbox GL host inside #map only (does not alter map-wrap sizing). */
/* Same stacking convention as tint: sits above raster tiles (~200–500); Neavo pins controls/markers above at 600. */
#neavoMapboxTestHost{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 550;
  pointer-events: none;
  box-sizing: border-box;
  /* Subtle edge depth — improves avatar markers vs flat dark basemap (no marker DOM changes). */
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
/* Hide default Mapbox GL logo/attrib widgets (links live in #mapAttribPanel). Blink-safe during init. */
#neavoMapboxTestHost .mapboxgl-ctrl-logo,
#neavoMapboxTestHost .mapboxgl-ctrl-attrib{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* MAPBOX STABILIZATION END */

/* Premium Mapbox: calmer gutter behind GL canvas (leaflet fallback keeps prior #map background rules). */
#map:has(#neavoMapboxTestHost){
  background: #13151d !important;
}


/* =========================
   OPTION A: WHITE MAP FIX
   - Always show a normal light basemap
   - Never apply tints/overlays
   ========================= */
#mapTint{ display:none !important; }
#map.map-indigo::before,
#map.map-indigo::after{ display:none !important; }

/* =========================
   MAP: Calm + Cartoon (tiles only)
   - Light: Voyager + mild warm tile tuning (markers stay crisp)
   ========================= */
#map{ background: #f4f6fb !important; 
height:100%; width:100%;}
#map.map-cartoon .leaflet-tile{
  /* calm, slightly illustrated look */
  filter: saturate(0.65) contrast(1.12) brightness(1.06) sepia(0.12);
}
#map.map-cartoon .leaflet-tile-container{ opacity: 0.98; }

/* =========================
   MARKERS: Global / Premium style
   ========================= */
.leaflet-marker-icon.neavo-marker-wrap{
  background: transparent !important;
  border: 0 !important;
}

.nmkr{
  width: 48px;
  min-height: 64px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 1px;
  box-sizing: border-box;
}

.nmkr__avatar{
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
  display: grid;
  place-items: center;
  position: relative;
  border: 0;
  overflow: hidden; /* clip avatar image to the circle */
}

/* If the marker is showing a real user photo, remove the inner white ring */
.nmkr__avatar.has-pic{
  /* Keep a solid fill so the map/markers behind never show through */
  background: #ffffff;
  border: 0;
}

/* Ring: clean solid outline (~12% thinner than legacy 3px). Free = no glow; premium = soft gold only. */
.nmkr--free .nmkr__avatar{
  outline: 2.5px solid rgba(73, 106, 255, 0.95);
  z-index: 2;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}
.nmkr--premium .nmkr__avatar{
  outline: 2.5px solid #d4af37;
  z-index: 2;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(212, 175, 55, 0.34),
    0 0 10px rgba(196, 162, 72, 0.24),
    0 0 4px rgba(255, 236, 190, 0.28);
}

/* No rotating ring shine/shimmer — solid outline + static halo only (premium outer glow kept above). */
.nmkr.nmkr--free::before,
.nmkr.nmkr--premium::before,
.nmkr.nmkr--free::after,
.nmkr.nmkr--premium::after,
.nmkr--free .nmkr__avatar::before,
.nmkr--free .nmkr__avatar::after,
.nmkr--premium .nmkr__avatar::before,
.nmkr--premium .nmkr__avatar::after{
  display: none !important;
  content: none !important;
  animation: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

.nmkr__face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  box-sizing:border-box;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  display:block;
  -webkit-touch-callout:none !important;
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}

/* Map markers: block iOS selection handles / callout / image drag. Apply to the CLICKABLE marker root
   (Leaflet puts .neavo-marker-wrap on the icon element) and the full subtree — not only .nmkr,
   or Safari will still show selection UI on the outer layer. */
.leaflet-marker-icon.neavo-marker-wrap,
.leaflet-marker-icon.neavo-marker-wrap *,
.leaflet-div-icon.neavo-marker-wrap,
.leaflet-div-icon.neavo-marker-wrap *{
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}
.leaflet-marker-icon.neavo-marker-wrap,
.leaflet-div-icon.neavo-marker-wrap{
  touch-action: manipulation;
}
.leaflet-marker-icon.neavo-marker-wrap .nmkr__face,
.leaflet-div-icon.neavo-marker-wrap .nmkr__face{
  -webkit-user-drag: none !important;
  pointer-events: none !important;
  touch-action: manipulation !important;
}

/* Nearby list avatars — same protections; row tap uses [data-neavo-peer] delegation. */
#nearbyList .person .avatar .avatar-img{
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Profile overlay, settings, avatar viewer — protected photos (tap stays on button/wrap ancestors). */
#profileOverlay .avatar-img,
#settingsModal img.avatar-img,
#avatarViewerImg{
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* initials fallback (shows when image is SVG/avatar anyway, still fine) */
.nmkr__inits{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.0);
  pointer-events: none;
}

/* Status dot: solid, fully opaque; glossy upper-left reflection (not glow) */
.nmkr__dot{
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(73, 106, 255, 1);
  background: rgba(73, 106, 255, 1);
  opacity: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.nmkr__dot::before{
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 5px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 85% 75% at 32% 28%,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.32) 48%,
    rgba(255, 255, 255, 0) 72%
  );
  pointer-events: none;
}

.nmkr--free .nmkr__dot{
  border-color: #5b78ff;
  background: #5b78ff;
  opacity: 1;
}

.nmkr--premium .nmkr__dot{
  border-color: #d4af37;
  background: #d4af37;
  opacity: 1;
}

/* Premium star badge — top-right of avatar ring; does not cover photo */
.nmkr__badge{
  position: absolute;
  top: -3px;
  right: -4px;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
  z-index: 5;
  background: radial-gradient(circle at 30% 30%, #fff2b5, #d4af37 55%, #7a5a12);
  color: #1a1205;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.22),
    0 0 0 0.75px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

/* --- Calm light map: warm Voyager-style balance (labels stay readable, not washed out) --- */
#map.map-calm .base-pane img.leaflet-tile{
  filter: brightness(1.04) contrast(0.99) saturate(0.96) sepia(0.07) hue-rotate(-8deg);
  -webkit-filter: brightness(1.04) contrast(0.99) saturate(0.96) sepia(0.07) hue-rotate(-8deg);
}

/* Roads overlay (when used): subtle ink without killing warmth */
#map.map-calm .roads-pane img.leaflet-tile{
  filter: grayscale(1) contrast(1.12) brightness(0.58);
  -webkit-filter: grayscale(1) contrast(1.12) brightness(0.58);
  mix-blend-mode: multiply;
  opacity: 0.2;
}

/* Label-only tiles: soft, slightly calmer than base (raster still includes small streets at some zooms) */
#map.map-calm .labels-pane img.leaflet-tile{
  filter: brightness(1.03) contrast(0.97) saturate(0.92) sepia(0.06) hue-rotate(-6deg);
  -webkit-filter: brightness(1.03) contrast(0.97) saturate(0.92) sepia(0.06) hue-rotate(-6deg);
}

/* Ensure the map never flashes dark while tiles load */
#map.map-calm.leaflet-container{
  background: #f5f7fb !important;
}


/* =========================
   MAP ATTRIBUTION (Option B)
   Hidden until info tap
========================= */
.leaflet-control-attribution{
  display:none !important; /* we render our own panel */
}
.leaflet-control-zoom{
  z-index: 550;
}

/* Left stack (LTR): recenter → zoom+ → zoom− — navy glass aligned with `.top-btn` modal tokens */
.map-control-stack{
  position:absolute;
  z-index: 555;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: max(14px, calc(6px + env(safe-area-inset-bottom, 0px)));
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap: 8px;
  width: var(--neavoModalHeaderIconSize);
  pointer-events:none;
}
html[dir="rtl"] .map-control-stack{
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
}
.map-control-stack > *{
  pointer-events:auto;
}

.map-stack-svg{
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  color: rgba(236,241,251,0.92);
}

.map-stack-btn__ic{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.map-stack-btn{
  width: var(--neavoModalHeaderIconSize);
  height: var(--neavoModalHeaderIconSize);
  min-width: var(--neavoModalHeaderIconSize);
  min-height: var(--neavoModalHeaderIconSize);
  border-radius: var(--neavoModalHeaderIconRadius);
  border: var(--neavoModalHeaderIconBorder);
  box-shadow: var(--neavoModalHeaderIconShadow);
  background: var(--neavoModalHeaderIconBg);
  color: rgba(240,243,251,0.94);
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  backdrop-filter: blur(11px) saturate(125%);
  -webkit-backdrop-filter: blur(11px) saturate(125%);
  transition: transform 0.11s ease, box-shadow 0.16s ease, opacity 0.18s ease, border-color 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover:hover){
  .map-stack-btn:hover:not(:disabled){
    border-color: rgba(255,255,255,.24);
    box-shadow:
      0 1px 0 rgba(255,255,255,.16) inset,
      0 -1px 0 rgba(0,0,0,.2) inset,
      0 1px 1px rgba(0,0,0,.26),
      0 12px 32px rgba(0,10,42,.52);
    color: #fff;
  }
}
.map-stack-btn:active:not(:disabled){
  transform: scale(0.97);
}
.map-stack-btn:focus-visible{
  outline: 2px solid rgba(124, 92, 255, 0.45);
  outline-offset: 2px;
}
.map-stack-btn:disabled{
  opacity: 0.38;
  cursor: default;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 4px 12px rgba(0,0,0,.15);
}

.map-zoom-slot{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.map-zoom-slot .leaflet-control-zoom{
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
}
.map-zoom-slot .leaflet-control-zoom.leaflet-bar{
  border-radius: 0;
  background: transparent;
}
.map-zoom-slot .leaflet-control-zoom.leaflet-bar a{
  border-bottom: none !important;
}
.map-zoom-slot .leaflet-control-zoom.leaflet-bar a:first-child{
  border-radius: var(--neavoModalHeaderIconRadius) var(--neavoModalHeaderIconRadius) var(--neavoModalHeaderIconRadius) var(--neavoModalHeaderIconRadius) !important;
}
.map-zoom-slot .leaflet-control-zoom.leaflet-bar a:last-child{
  border-radius: var(--neavoModalHeaderIconRadius) var(--neavoModalHeaderIconRadius) var(--neavoModalHeaderIconRadius) var(--neavoModalHeaderIconRadius) !important;
}

.map-zoom-slot .leaflet-control-zoom a{
  float: none !important;
  width: var(--neavoModalHeaderIconSize) !important;
  height: var(--neavoModalHeaderIconSize) !important;
  min-height: var(--neavoModalHeaderIconSize) !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--neavoModalHeaderIconRadius) !important;
  border: var(--neavoModalHeaderIconBorder) !important;
  background: var(--neavoModalHeaderIconBg) !important;
  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;
  box-shadow: var(--neavoModalHeaderIconShadow) !important;
  backdrop-filter: blur(11px) saturate(125%);
  -webkit-backdrop-filter: blur(11px) saturate(125%);
  transition: transform 0.11s ease, border-color 0.16s ease, box-shadow 0.16s ease;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  -webkit-tap-highlight-color: transparent;
}

/* Elegant + / − (replaces textual Leaflet glyphs) */
.map-zoom-slot .leaflet-control-zoom a::before{
  content:"";
  width: 17px;
  height: 17px;
  background: rgba(236,241,251,0.92);
}
.map-zoom-slot .leaflet-control-zoom-in::before{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.map-zoom-slot .leaflet-control-zoom-out::before{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover:hover){
  .map-zoom-slot .leaflet-control-zoom a:hover{
    border-color: rgba(255,255,255,.24) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.16) inset,
      0 -1px 0 rgba(0,0,0,.2) inset,
      0 1px 1px rgba(0,0,0,.26),
      0 12px 32px rgba(0,10,42,.52) !important;
  }
  .map-zoom-slot .leaflet-control-zoom a:hover::before{
    background: rgba(248,251,255,1);
  }
}
.map-zoom-slot .leaflet-control-zoom a:active{
  transform: scale(0.97);
}
.map-zoom-slot .leaflet-control-zoom a.leaflet-disabled{
  opacity: 0.38 !important;
  cursor: default !important;
  pointer-events:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 4px 12px rgba(0,0,0,.15) !important;
}
.map-zoom-slot .leaflet-control-zoom a:focus-visible{
  outline: 2px solid rgba(124, 92, 255, 0.45);
  outline-offset: 2px;
}

.map-attrib-wrap{
  position:absolute;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(14px, calc(6px + env(safe-area-inset-bottom, 0px)));
  z-index:560;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  pointer-events:auto;
}
html[dir="rtl"] .map-attrib-wrap{
  right: auto;
  left: max(12px, env(safe-area-inset-left, 0px));
  align-items:flex-start;
}
.map-attrib-btn{
  /* Compact map-only control — do not reuse modal header chrome size here */
  width: 29px;
  height: 29px;
  min-width: 29px;
  min-height: 29px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(12,14,26,0.42);
  color: rgba(228,236,246,0.82);
  display: grid;
  place-items: center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 1px 2px rgba(0,8,26,0.22);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.11s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.14s ease;
  opacity: 0.92;
}
.map-attrib-btn__ic svg{
  width: 13px;
  height: 13px;
  display: block;
  color: inherit;
}
@media (hover:hover){
  .map-attrib-btn:hover{
    opacity: 1;
    border-color:rgba(255,255,255,.22);
    box-shadow:
      0 1px 0 rgba(255,255,255,.1) inset,
      0 2px 8px rgba(0,10,42,.38);
    color: rgba(244,247,252,0.95);
  }
}
.map-attrib-btn:focus-visible{
  outline: 2px solid rgba(124, 92, 255, 0.45);
  outline-offset: 2px;
}
.map-attrib-btn:active{ transform: scale(0.97); }
.map-attrib-wrap.open .map-attrib-btn{
  border-color: rgba(124,92,255,0.45);
}

.map-attrib-panel{
  max-width: min(298px, calc(100vw - 28px));
  background:
    linear-gradient(165deg, rgba(38,54,94,0.28) 0%, rgba(12,14,28,0.45) 100%),
    rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(230,237,246,0.88);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 18px 45px rgba(0,8,26,0.5);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.map-attrib-panel a{
  color: rgba(200,218,252,0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.map-attrib-panel a:visited{
  color: rgba(200,218,252,0.92);
}


/* ---- Settings: Language radios (non-destructive) ---- */
.radio-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-top:10px;
}
.radio-row input[type="radio"]{
  width:18px;
  height:18px;
}
.radio-meta{ display:flex; flex-direction:column; gap:2px; }
.radio-title{ font-weight:600; }
.radio-sub{ font-size:12px; opacity:0.75; }


/* === Neavo Settings UI fixes (v0_9_4_4 -> v0_9_4_6) === */
#settingsModal .item{ text-align:start; }
#settingsModal .item-title{ flex:1; text-align:start; }
#settingsModal .item-arrow{ margin-inline-start:12px; }
#settingsModal .item-sub{ display:none; } /* remove secondary descriptions */
#settingsModal .page:not([data-page="home"]) > .section-title{ display:none !important; } /* avoid duplicate titles under header */

/* Settings home: two list siblings — merged into one card for signed-in; separate grouped cards for guests */
#settingsModal section[data-page="home"] .settings-home-lists:not(.settings-home-lists--guest){
  margin-block: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#settingsModal section[data-page="home"] .settings-home-lists:not(.settings-home-lists--guest) .list{
  margin: 0;
  border: none;
  border-radius: 0;
}
#settingsModal section[data-page="home"] .settings-home-lists:not(.settings-home-lists--guest) .list + .list{
  /* No border here: the <div class="divider"> between Language and Help is the section separator.
     A border-top on the secondary list stacked flush under Language read as a second line on the Language row (Safari). */
  border-top: none;
}
/* Breathing room: divider sits clearly below Language; avoids the “line stuck to card” overlap. */
#settingsModal section[data-page="home"] .settings-home-lists:not(.settings-home-lists--guest) .settings-home-list-primary{
  padding-bottom: 6px;
}
#settingsModal section[data-page="home"] .settings-home-lists:not(.settings-home-lists--guest) .settings-home-list-secondary{
  padding-top: 14px;
}
/* Guest: same .list buttons as elsewhere; breathing room between Account/Language and legal/about */
#settingsModal section[data-page="home"] .settings-home-lists.settings-home-lists--guest{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block: 12px;
}
#settingsModal section[data-page="home"] .settings-home-lists.settings-home-lists--guest .list{
  margin-block: 0;
}


/* Settings clean spacing */
.field .muted{ margin-top:8px; }
.card .muted{ margin-top:10px; }

/* Settings home: minimal version footer at the very bottom. No box / divider / link affordance. */
#settingsModal section[data-page="home"] .settings-home-footer{
  margin: 28px 0 24px;
  padding: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.32);
  user-select: none;
  pointer-events: none;
  background: transparent;
  border: 0;
}


/* ===== Avatar Cropper ===== */
.cropper-sheet{ max-width: 420px; width: min(92vw, 420px); }
.cropper-sheet .sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  padding: var(--modalHeaderPadY) 12px;
  min-height: var(--modalHeaderH);
  box-sizing: border-box;
  border-bottom: none;
  box-shadow: var(--neavoHeaderSep);
  background: var(--neavoModalHeaderBg);
}
.cropper-sheet .sheet-head h2{
  margin:0;
  font-size: var(--modalHeaderTitleSize);
  font-weight: 800;
  line-height: 1.2;
}
.cropper-sheet .sheet-head .icon-btn{
  width: var(--neavoModalHeaderIconSize);
  min-width: var(--neavoModalHeaderIconSize);
  height: var(--neavoModalHeaderIconSize);
  border-radius: var(--neavoModalHeaderIconRadius);
  border: var(--neavoModalHeaderIconBorder);
  background: var(--neavoModalHeaderIconBg);
  box-shadow: var(--neavoModalHeaderIconShadow);
}
.cropper-body{ display:flex; flex-direction:column; gap:12px; align-items:center; }
#cropCanvas{ width: 320px; height: 320px; border-radius: 16px; background: rgba(255,255,255,0.03); touch-action:none; }
.crop-controls{ width: 320px; display:flex; align-items:center; gap:10px; }
.crop-controls input[type="range"]{ flex:1; }
.row.end{ justify-content:flex-end; }
.gap{ gap:10px; }
.small{ font-size: 12px; }


/* Trial badge (Free taps) — translucent light glass over dark nautical map */
.tap-badge{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    linear-gradient(165deg, rgba(244,246,253,0.16) 0%, rgba(255,255,255,0.08) 100%),
    rgba(255,255,255,0.06);
  color: rgba(240,243,251,0.96);
  font-size:12px;
  line-height:1;
  letter-spacing:0.01em;
  font-weight:600;
  cursor:pointer;
  user-select:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset,
    0 4px 16px rgba(4,12,35,0.35);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
@media (hover:hover){
  .tap-badge:hover{
    border-color:rgba(255,255,255,0.24);
    background:
      linear-gradient(165deg, rgba(246,249,255,0.22) 0%, rgba(255,255,255,0.1) 100%),
      rgba(255,255,255,0.075);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.16) inset,
      0 -1px 0 rgba(0,0,0,0.14) inset,
      0 8px 22px rgba(4,14,42,0.42);
  }
}
.tap-badge:active{ transform:translateY(1px); }
.tap-badge.hidden{ display:none !important; }
.invis{ visibility:hidden !important; }

/* Profile name input row without inner save button */
.page[data-page="profile"] .field .row > input#realNameInput{
  flex:1 1 auto;
}


/* Make settings main avatar perfectly circular */
#meAvatar{ border-radius:999px !important; }
#meAvatar .avatar-img{ border-radius:999px !important; }

/* When the Settings main avatar has a real photo, remove the inner ring */
#meAvatar[data-has-photo="1"]{
  background: transparent !important;
  border: 0 !important;
}


.hud .tap-badge{
  pointer-events:auto;
}

.list-actions{ padding:8px 0 6px; display:flex; gap:8px; align-items:center; }

.list-actions .tap-badge{
  color: rgba(244,246,253,0.98);
}

#mapView{
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  /* Positioning context for .hud + map chrome (absolute), separate from view-transition transform. */
  isolation:isolate;
}
#mapView .map-wrap{
  flex:1 1 auto;
  min-height:0;
  position:relative;
}

/* ---- Guest onboarding (map-visible glass auth gate) ---- */
.guest-onboarding{
  position:absolute;
  inset:0;
  z-index:4500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(12px, env(safe-area-inset-bottom));
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.guest-onboarding.hidden{ display:none !important; }
.guest-onboarding__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(124,92,255,.12), transparent 55%),
    rgba(5,8,18,.52);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.guest-onboarding__frame{
  position:relative;
  width:100%;
  max-width:400px;
  /* Nudge taller again (+40px / slightly looser vh margin) — hide scrollbar on typical mobile; still not full-screen. */
  max-height:min(660px, calc(100vh - 44px - 18px));
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
/* Outer shell: rounded clip + blur (do NOT combine overflow:auto here — breaks corner radius). */
.guest-onboarding__card{
  pointer-events:auto;
  width:100%;
  max-height:min(660px, calc(100vh - 44px - 18px));
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0;
  overflow:hidden;
  border-top-left-radius: var(--guestOnbRadius);
  border-top-right-radius: var(--guestOnbRadius);
  border-bottom-right-radius: var(--guestOnbRadius);
  border-bottom-left-radius: var(--guestOnbRadius);
  border-radius: var(--guestOnbRadius);
  isolation: isolate;
  background:linear-gradient(165deg, rgba(22,26,38,.82), rgba(12,14,22,.76));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.guest-onboarding__card-inner{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:22px 20px 20px;
}
.guest-onboarding__logo{
  display:block;
  height:32px;
  width:auto;
  margin:0 auto 14px;
  opacity:.98;
}
.guest-onboarding__title{
  margin:0 0 8px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  text-align:center;
  color:var(--text);
  line-height:1.2;
}
.guest-onboarding__sub{
  margin:0 0 18px;
  font-size:13px;
  line-height:1.45;
  text-align:center;
  color:rgba(255,255,255,.72);
}
.guest-onboarding__stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.guest-onb-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:10px 14px;
  border-radius:14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.94);
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}
.guest-onb-btn:active{ transform:translateY(1px); }
.guest-onb-btn--social{
  justify-content:flex-start;
  text-align:start;
}
html[dir="rtl"] .guest-onb-btn--social{
  justify-content:flex-start;
  text-align:start;
}
.guest-onb-btn--social:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
}
.guest-onb-btn--emph{
  margin-top:4px;
  background:linear-gradient(135deg, rgba(124,92,255,.5), rgba(88,64,200,.42));
  border-color:rgba(168,140,255,.35);
  box-shadow:0 8px 24px rgba(88,64,200,.22);
}
.guest-onb-btn--emph:hover{
  background:linear-gradient(135deg, rgba(124,92,255,.58), rgba(88,64,200,.5));
  border-color:rgba(190,170,255,.45);
}
.guest-onb-btn--ghost{
  flex-direction:column;
  gap:2px;
  margin-top:2px;
  background:rgba(0,0,0,.2);
  border-color:rgba(255,255,255,.08);
  font-weight:600;
}
.guest-onb-btn--ghost .guest-onboarding__skip-hint{
  font-weight:500;
  font-size:12px;
  color:rgba(255,255,255,.55);
}
.guest-onb-ico{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.92);
}
.guest-onb-ico--google{ color:transparent; }
.guest-onb-ico svg{ display:block; }
html[dir="rtl"] .guest-onboarding__title,
html[dir="rtl"] .guest-onboarding__sub{
  text-align:center;
}
@media (max-width:380px){
  .guest-onboarding__card-inner{ padding:18px 16px 16px; }
  .guest-onboarding__title{ font-size:20px; }
}


/* --- FIX: avatars should fill circle with no inner white ring --- */
.nmkr__avatar{
  background: transparent !important;
  border: 0 !important;
}
#meAvatar{
  background: transparent !important;
  border: 0 !important;
}
/* Settings “me” avatar still uses <img>; map markers use .nmkr__face (background, not an image node). */
#meAvatarImg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.nmkr__avatar .nmkr__face{
  width: 100% !important;
  height: 100% !important;
}

/* Auth modal: height follows content; cap at viewport so nothing is clipped. Body scrolls when content is tall. */
#authModal .settings{
  height: auto;
  /* Generous cap — short Sign In fits without inner scroll; tall views scroll in .settings-body */
  max-height: min(96vh, calc(100dvh - 20px));
  min-height: 0;
}
#authModal .settings-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px;
  padding-bottom: max(12px, calc(10px + env(safe-area-inset-bottom, 0px)));
}

/* Very small / short viewports: a touch more vertical room for the sheet */
@media (max-height: 520px){
  #authModal .settings{
    max-height: min(98vh, calc(100dvh - 12px));
  }
}

/* Sign In: tighter vertical rhythm; body scrolls inside sheet when needed */
#authModal #authLoginView .card{
  padding: 10px 10px 10px;
  margin-bottom: 0;
}
#authModal #authLoginView .field{
  margin-top: 8px;
}
#authModal #authLoginView .field:first-child{
  margin-top: 0;
}
#authModal #authLoginView .btn.primary{
  margin-top: 10px;
}
#authModal #authLoginView .link-btn{
  padding: 6px 8px;
}
#authModal #authLoginView .auth-login-divider{
  margin: 10px 0 !important;
}
#authModal #authLoginView .social-stack{
  gap: 8px;
}
#authModal #authLoginView .btn.social-btn{
  min-height: 42px;
  height: auto;
}

/* Create Account chooser: match Sign In stack spacing */
#authModal #authSignupChooserView .social-stack{
  gap: 8px;
}
#authModal #authSignupChooserView .btn.social-btn{
  min-height: 42px;
  height: auto;
}

/*
  Settings modal: medium “iOS sheet” feel — ~600px floor, capped at 75vh (slightly taller than prior 560px / 72vh).
  height:auto + flex column: short lists leave calm padding in .settings-body (flex-grow).
*/
#settingsModal > .settings{
  flex-shrink: 0;
  align-self: center;
  height: auto;
  /* Final nudge: +40px / +3vh vs prior step — fits typical Settings home without body scrollbar on common phones; still well below full-screen. */
  min-height: 640px;
  max-height: 78vh;
}
/* Privacy Policy / Terms: taller reader — not the 78vh Settings cap above. */
#settingsModal.settings-modal--article > .settings{
  min-height: 0;
  max-height: min(92vh, 760px);
}
/* Settings modal: body scrolls when content exceeds sheet; safe-area bottom padding. */
#settingsModal .settings-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(14px, calc(12px + env(safe-area-inset-bottom, 0px)));
}

/* Inline field validation */
.field-error{
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color: var(--danger);
  display:none;
}
.field-error.show{ display:block; }

#forgotHelper.forgot-helper--error{
  color: var(--danger);
  font-weight: 600;
}
#forgotHelper.forgot-helper--ok{
  color: #5ee89a;
  font-weight: 600;
}

.is-invalid{
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(255,77,77,.20);
}

/* Auth modal: password — eye control inside the input field */
#authModal .input-wrap--password{
  position:relative;
  display:block;
}
#authModal .input-wrap--password input{
  width:100%;
  box-sizing:border-box;
  padding-right:44px;
}
html[dir="rtl"] #authModal .input-wrap--password input{
  padding-right:12px;
  padding-left:44px;
}
#authModal .pwd-toggle{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  min-height:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:10px;
  background:transparent;
  color:rgba(255,255,255,.82);
  cursor:pointer;
  transition:background .15s ease, opacity .12s ease, transform .12s ease;
}
html[dir="rtl"] #authModal .pwd-toggle{
  right:auto;
  left:6px;
}
#authModal .pwd-toggle:hover{
  background:rgba(255,255,255,.08);
}
#authModal .pwd-toggle:active{
  transform:translateY(-50%) scale(.97);
}
#authModal .pwd-toggle:focus-visible{
  outline:none;
  background:rgba(124,92,255,.12);
  box-shadow:0 0 0 2px rgba(124,92,255,.28);
}
#authModal .pwd-toggle .pwd-ico svg{
  display:block;
}
#authModal .field.field--password > .field-error{
  margin-top:6px;
}

#authModal .field input:focus,
#authModal .field select:focus,
#authModal .field textarea:focus{
  border-color: rgba(124,92,255,.55);
  box-shadow: 0 0 0 3px rgba(124,92,255,.22);
}
#authModal .field input.is-invalid:focus{
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(255,77,77,.22);
}

/* Create account: slightly more vertical rhythm vs Sign In */
#authModal #authSignupView .card{
  padding: 16px 14px 18px;
}
#authModal #authSignupView .card-head{
  margin-bottom: 2px;
}
#authModal #authSignupView .field{
  margin-top: 12px;
}
#authModal #authSignupView .card > .muted + .field{
  margin-top: 14px;
}
#authModal #authSignupView .check-row{
  margin-top: 14px;
}

/* ===== Report Modal ===== */
.report-modal.hidden{display:none}
.report-modal{position:fixed;inset:0;z-index:9999}
.report-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
}

/* Keep the report UI consistent with Neavo sheets (same glass look) */
.report-sheet{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(15,22,35,.98);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.report-header{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: var(--modalHeaderH);
  padding: var(--modalHeaderPadY) 12px;
  border-bottom: none;
  box-shadow: var(--neavoHeaderSep);
  background: var(--neavoModalHeaderBg);
}
.report-header h2{
  margin:0;
  font-size: var(--modalHeaderTitleSize);
  font-weight: 800;
  text-align:center;
  line-height:1.35;
  padding-top: 2px;
  padding-bottom: 2px;
  color: rgba(255,255,255,.96);
  /* Reserve space for the close button so the title can stay centered */
  padding: 0 54px;
  width: 100%;
}
.report-close{
  position:absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: var(--neavoModalHeaderIconSize);
  height: var(--neavoModalHeaderIconSize);
  border-radius: var(--neavoModalHeaderIconRadius);
  border: var(--neavoModalHeaderIconBorder);
  background: var(--neavoModalHeaderIconBg);
  box-shadow: var(--neavoModalHeaderIconShadow);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}
html[dir="rtl"] .report-close{
  right: auto;
  left: 12px;
}

.report-body{
  padding: 14px;
}

.report-options{display:grid;gap:10px;margin:8px 0 10px}
.report-options label{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
}
.report-options input[type="radio"]{ width:18px; height:18px; }

.report-note.hidden{display:none}
#reportNote{
  width:100%;
  min-height:90px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  resize: vertical;
}

.report-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.report-thanks{text-align:center;padding:18px 8px}

/* Report buttons */
.report-btn{
  background: transparent;
  border: none;
  color: #ff6b6b;
  font-size: 14px;
  cursor: pointer;
}
.report-btn.more{font-size:18px}


/* Report header title: single line, mobile-safe */
.report-sheet .report-header h2{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(15px, 4.2vw, var(--modalHeaderTitleSize));
}


.card-sub{ margin:-6px 0 10px; opacity:.75; font-size:13px; line-height:1.35; }

/* Report a problem */
.field{ padding: 12px 14px; }
.label{ display:block; font-size: 12px; opacity:.85; margin-bottom: 8px; }
.textarea{ width:100%; resize:vertical; min-height:120px; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: inherit; }
.input{ width:100%; padding:12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: inherit; }
.actions{ padding: 12px 14px 14px; display:flex; gap:10px; }
.btn{ border:none; border-radius: 12px; padding: 12px 14px; font-weight:600; cursor:pointer; }
.btn.primary{ background: var(--accent, #4f6ef7); color:#fff; flex:1; }
.btn.secondary{ background: rgba(255,255,255,.10); color: inherit; }
.diag{ padding: 10px 14px 14px; }
.diag-pre{ white-space: pre-wrap; word-break: break-word; margin: 0 0 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); font-size: 12px; }

.build-tag{opacity:.55;font-size:12px;padding:10px 16px}

.settings-row.active {
  background: rgba(79,110,247,.25);
}
#simpleReportMessage {
  min-height: 120px;
  width: 100%;
}
.primary-btn {
  margin: 16px;
}

/* Report – Neavo style */
.settings-textarea {
  width: 100%;
  min-height: 120px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
  resize: vertical;
}
.settings-input {
  width: 100%;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px;
  color: #fff;
}
.full-width {
  width: calc(100% - 32px);
  margin: 16px;
}
.settings-row.active {
  background: rgba(79,110,247,.18);
}

/* Report (global style) */
.report-type.selected{
  background: rgba(124,92,255,.16) !important;
  border-color: rgba(124,92,255,.35) !important;
}

/* Report attachments */
.report-preview{
  width:100%;
  max-height:220px;
  object-fit:contain;
  margin-top:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.item.selected{
  background: rgba(124,92,255,.16) !important;
  border-color: rgba(124,92,255,.35) !important;
}
.btn[disabled]{
  opacity:.55;
  pointer-events:none;
}

/* Report inline suggestions */
.report-cat-block{display:block}
.sug-box{
  margin: 8px 12px 12px 12px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}
.sug-title{
  font-size:12px;
  opacity:.82;
  margin-bottom:8px;
}
.sug-section-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.04em;
  color: rgba(255,255,255,.86);
  margin: 0 0 10px;
  line-height:1.35;
}
html[dir="ltr"] .sug-section-title{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.sug-items-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}
.sug-field-label{
  font-size:12px;
  font-weight:600;
  color: rgba(255,255,255,.78);
  margin: 0 0 8px;
  line-height:1.35;
}
.sug-field-label--muted{
  color: rgba(255,255,255,.58);
  font-weight:600;
  margin-top:2px;
}
.sug-item{
  width:100%;
  text-align:start;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.12s ease;
}
html[dir="rtl"] .sug-item{
  text-align:right;
}
.sug-item:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
}
.sug-item:active{
  transform: scale(0.992);
}
.sug-item.selected,
.sug-item.is-selected{
  background: rgba(124,92,255,.24);
  border-color: rgba(186,160,255,.5);
  box-shadow:
    0 0 0 1px rgba(124,92,255,.35) inset,
    0 0 28px rgba(124,92,255,.22);
}

.report-sug-text{
  margin-top: 0;
}

/* Arabic header: keep descenders visible on single-line titles */
.settings-title{
  line-height:1.2;
  padding-bottom:1px;
}
.card-head{
  line-height: 1.35;
  padding-bottom: 2px;
}

/* Ensure Arabic headers align like the rest of the UI */
/* Default (English/LTR) card header alignment */
.card-head, .card-sub{ text-align:left; direction:ltr; }

html[dir="rtl"] .card-head, html[dir="rtl"] .card-sub{ text-align:right; direction:rtl; }


.page[data-page="report"] .card .card-sub{ margin-bottom: 10px; }

/* ===== About page ===== */
.page[data-page="about"]{
  padding-bottom: 24px;
}
.about-page{
  display:flex;
  flex-direction:column;
  gap: 16px;
}
.page[data-page="about"] .about-card{
  margin-bottom: 0;
  border:1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
}
.about-card--hero{
  padding-bottom: 6px;
}
.about-head-block{
  text-align:center;
  margin-bottom: 14px;
}
.about-main-title.card-head{
  text-align:center !important;
  margin-bottom: 6px !important;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
html[dir="rtl"] .about-main-title.card-head{
  text-align:center !important;
}
.about-beta-sub{
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
html[dir="rtl"] .about-beta-sub{
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 12px;
}
.about-hero-panel{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  margin-bottom: 12px;
}
.about-hero-logo-frame{
  flex-shrink:0;
  width: 52px;
  height: 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 5px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(165deg, rgba(124,92,255,.2), rgba(255,255,255,.05));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.22) inset,
    0 4px 22px rgba(124,92,255,.22),
    0 0 36px rgba(124,92,255,.12);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.about-hero-logo{
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 10px;
  border: none;
  box-shadow: none;
  display:block;
}
.about-hero-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap: 5px;
  min-width:0;
}
html[dir="rtl"] .about-hero-text{
  align-items:flex-end;
}
.about-app-name{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #fff 0%, rgba(210,200,255,.92) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1.12;
}
.about-version-badge{
  display:inline-flex;
  align-items:center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: rgba(220,210,255,.95);
  border: 1px solid rgba(168,140,255,.35);
  background: rgba(124,92,255,.16);
  box-shadow: 0 0 20px rgba(124,92,255,.15);
}
.about-tagline{
  margin: 2px auto 0;
  max-width: 22em;
  text-align: center;
  font-size: 14px;
  line-height: 1.52;
  color: rgba(255,255,255,.55);
  font-weight: 500;
}
.page[data-page="about"] .about-section-title.card-head{
  margin-bottom: 12px;
}
.about-link-stack{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.about-link-row{
  display:flex;
  align-items:center;
  gap: 12px;
  width:100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(0,0,0,.15);
  color: rgba(255,255,255,.95);
  cursor:pointer;
  text-align: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, transform .12s ease, box-shadow .2s ease;
}
.about-link-row:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(168,140,255,.28);
  box-shadow: 0 0 24px rgba(124,92,255,.1);
}
.about-link-row:active{
  transform: scale(0.992);
}
.about-link-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  flex-shrink:0;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(200,190,255,.95);
}
.about-link-ic svg{
  display:block;
}
.about-link-label{
  flex:1;
  min-width:0;
  font-size: 15px;
  font-weight: 700;
  text-align: start;
}
html[dir="rtl"] .about-link-label{
  text-align: right;
}
.about-link-chev{
  flex-shrink:0;
  opacity: .55;
  font-weight: 800;
  font-size: 16px;
}
html[dir="rtl"] .about-link-chev{
  transform: scaleX(-1);
}
.about-credits-card{
  text-align:center;
  padding: 22px 16px 10px;
  margin: 0 auto;
  max-width: 24em;
}
.about-credits-line{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.52);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.about-copyright{
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.32);
  letter-spacing: 0.03em;
}

/* Report problem inline details */
.report-sug-image{
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: inherit;
}
.sug-item.active{
  outline: 2px solid rgba(255,255,255,0.16);
}

.report-file-row{
  display:flex;
  align-items:center;
  gap:10px;
}
html[dir="rtl"] .report-file-row{
  flex-direction: row-reverse;
}

.report-file-ic{
  display:inline-flex;
  color: rgba(200,190,255,.9);
  flex-shrink:0;
  opacity:.95;
}

.report-file-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.92);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.report-file-btn:hover{
  background: rgba(255,255,255,0.11);
  border-color: rgba(168,140,255,.35);
  box-shadow: 0 0 16px rgba(124,92,255,.12);
}

.report-file-btn:active{
  transform: translateY(1px);
}

.report-file-btn-label{
  line-height:1.2;
}

.report-file-name{
  flex:1;
  min-width:0;
  color: rgba(255,255,255,0.62);
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:start;
}

.report-file-input-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  opacity:0;
}

/* Report a problem - polished Other details controls */
.report-textarea{
  width: 100%;
  min-height: 148px;
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.96);
  outline: none;
  resize: vertical;
  line-height: 1.45;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.report-textarea::placeholder{
  color: rgba(255,255,255,0.38);
}
.report-textarea:focus{
  border-color: rgba(148, 120, 255, 0.55);
  background: rgba(0,0,0,0.28);
  box-shadow:
    0 0 0 1px rgba(124,92,255,.25) inset,
    0 0 0 3px rgba(122, 92, 255, 0.2),
    0 12px 40px rgba(124,92,255,.08);
}

.report-file{
  position:relative;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.11);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.90);
  outline: none;
}
.report-file::file-selector-button{
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.95);
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  margin-inline-end: 12px;
  cursor: pointer;
}
.report-file::file-selector-button:hover{
  background: rgba(255,255,255,0.18);
}
.report-img-hint{
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  line-height:1.4;
  margin-top: 10px;
}

.legal-page{padding:16px;overflow-y:auto}
.legal-content{white-space:pre-line;line-height:1.6}
.hidden{display:none}

/* In-app Legal WebView Overlay */
.legalwv{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:flex;
  align-items:stretch;
  justify-content:center;
  z-index: 10000;
}
.legalwv-shell{
  width:min(100%, 980px);
  height:100%;
  background: var(--bg, #0b1220);
  display:flex;
  flex-direction:column;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.legalwv-top{
  height: 56px;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 0 14px;
  background: var(--topbar, #0f172a);
  border-bottom: none;
  box-shadow: var(--neavoHeaderSep);
}
.legalwv-back{ }
.legalwv-title{
  font-weight:800;
  font-size:14px;
  color:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.legalwv-spacer{flex:1}
.legalwv-body{flex:1; position:relative; background: var(--bg, #0b1220);}
.legalwv-frame{width:100%; height:100%; border:0; background: var(--bg, #0b1220);}
/* Edge-only capture strip on top of the cross-origin iframe so swipe-back can read touchstart in the leading edge zone. */
.legalwv-edge-gutter{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:48px;
  z-index:2;
  background:transparent;
  pointer-events:auto;
  touch-action:pan-y;
}
html[dir="rtl"] .legalwv-edge-gutter{ left:auto; right:0; }
.legalwv-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color: rgba(255,255,255,.9);
  background: rgba(11,18,32,.55);
  z-index:1;
}

/* (Legal WebView back button now inherits the unified .top-btn glass; size locked via the modal header tokens.) */
.back-icon{width:22px;height:22px}

/* RTL: flip icon direction ONLY, not the button */
html[dir="rtl"] .back-icon{
  transform: rotate(180deg);
}

.legalwv-top .top-btn{
  width: var(--neavoModalHeaderIconSize);
  height: var(--neavoModalHeaderIconSize);
}
.legalwv-top .top-ic-svg{
  width:18px;
  height:18px;
  opacity:.92;
}


/* About page: add spacing between link items (without affecting Settings lists) */
.about-links .item{ margin-top: 10px; }
.about-links .item:first-child{ margin-top: 0; }

/* Dead nav items (disabled / coming soon) */
button.is-dead{opacity:.55;}
button.is-dead{pointer-events:none;}


/* --- Seed login note (auth gate) --- */
.seed-note{
  margin: 12px 12px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 14px;
  line-height: 1.4;
}
html[dir="ltr"] .seed-note{ text-align:left; }
html[dir="rtl"] .seed-note{ text-align:right; }

/* --- Premium nudge list --- */
.nudge-list{
  margin: 10px 0 14px 0;
  padding-left: 18px;
}
html[dir="rtl"] .nudge-list{
  padding-left: 0;
  padding-right: 18px;
}
.nudge-list li{ margin: 6px 0; }


/* Guest signup banner — below top fade (outside header shadow zone) */
.guest-signup-banner{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--neavoTopbarH) + var(--neavoTopBannerBelowNav));
  left: 0;
  right: 0;
  z-index: 55;
  margin: 0 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 48%, rgba(255,255,255,0.01) 100%),
    rgba(16, 22, 40, 0.78);
  border: 1px solid rgba(148, 172, 220, 0.22);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.09) inset,
    0 8px 24px rgba(0, 8, 28, 0.32);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, box-shadow .22s ease;
}
.guest-signup-banner.show{
  opacity: 1;
  transform: translateY(0);
}
.guest-signup-banner__msg{
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255,255,255,0.90);
  flex: 1 1 auto;
}
.guest-signup-banner__cta{
  border: none;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(135deg, rgba(142, 119, 255, 0.92), rgba(124, 92, 255, 0.88));
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 8px 22px rgba(124, 92, 255, 0.38);
  flex-shrink: 0;
}
html[dir="rtl"] .guest-signup-banner{
  direction: rtl;
}


/* Back chevrons: LTR left, RTL right */


/* Auth back chev now uses the unified `.chev { direction:ltr; unicode-bidi:isolate }`
   rule + JS glyph swap (syncAuthChevron). The old RTL scaleX(-1) is removed so we
   don't double-flip on top of the bidi isolation. */


/* --- Neavo: Social bridge nudges (red dot + micro hint) --- */
.nv-dot-wrap{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.nv-dot{
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  background:#ff3b30;
  top:2px; right:2px;
  box-shadow:0 0 0 2px rgba(17,24,39,0.25);
}
html[dir="rtl"] .nv-dot{ right:auto; left:2px; }

#meRow{ position:relative; }
#meRow .nv-dot{ top:10px; right:12px; }
html[dir="rtl"] #meRow .nv-dot{ right:auto; left:12px; }

.field.social-field{ position:relative; }
.field.social-field.nv-dot-social::after{
  content:"";
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  background:#ff3b30;
  top:12px; right:12px;
  box-shadow:0 0 0 2px rgba(17,24,39,0.25);
}
html[dir="rtl"] .field.social-field.nv-dot-social::after{ right:auto; left:12px; }

.micro-hint{
  margin: 10px 2px 8px;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  line-height: 1.35;
}

html[dir="rtl"] .micro-hint{ text-align: right; }
html[dir="ltr"] .micro-hint{ text-align: left; }
body.light .micro-hint{
  background: transparent;
  border: 0;
  color: rgba(17,24,39,0.78);
}

/* Neavo activity status: Active / Last seen */
.activity-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  margin-top:4px;
  line-height:1.25;
  color:var(--muted);
  transition:color var(--neavo-dur-fast) var(--neavo-ease-out);
}
.activity-status__dot{
  width:7px;
  height:7px;
  border-radius:999px;
  flex-shrink:0;
  background:rgba(255,255,255,.28);
  opacity:0;
  transform:scale(0.6);
  transition:opacity var(--neavo-dur-fast) var(--neavo-ease-out), transform var(--neavo-dur-fast) var(--neavo-ease-out);
}
.activity-status--active{
  color:#2ee59a;
}
.activity-status--active .activity-status__dot{
  opacity:1;
  transform:scale(1);
  background:#2ee59a;
  box-shadow:0 0 0 2px rgba(46,229,154,.18);
  animation:neavo-active-dot-pulse 2.8s var(--neavo-ease-out) infinite;
}
.activity-status--changed .activity-status__text{
  animation:neavo-status-text-in var(--neavo-dur-med) var(--neavo-ease-out) both;
}
.activity-status--recent{ color:rgba(255,255,255,.78); }
.activity-status--away{ color:rgba(255,255,255,.55); }
.activity-status--unknown{ color:rgba(255,255,255,.45); }

/* Nearby cards: Active = dot + text; Was here / away = text flush with name (no phantom dot slot). */
.person .activity-status{
  display:inline-flex;
  align-items:center;
  gap:0;
  width:100%;
  max-width:100%;
}
.person .activity-status__text{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0;
}
.person .activity-status__dot{
  display:none;
  flex:0 0 0;
  width:0;
  min-width:0;
  height:0;
  margin:0;
  padding:0;
  overflow:hidden;
}
.person .activity-status--active .activity-status__dot{
  display:block;
  flex:0 0 7px;
  width:7px;
  min-width:7px;
  height:7px;
  margin-inline-end:6px;
  overflow:visible;
}

.ov-meta-act{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.ov-meta-act .activity-status__dot{
  width:6px;
  height:6px;
}
@keyframes neavo-active-dot-pulse{
  0%, 100%{ box-shadow:0 0 0 2px rgba(46,229,154,.14); opacity:1; }
  50%{ box-shadow:0 0 0 5px rgba(46,229,154,.06); opacity:.92; }
}
@keyframes neavo-status-text-in{
  from{ opacity:.55; transform:translateY(2px); }
  to{ opacity:1; transform:translateY(0); }
}
.ov-meta.activity-status--active,
.ov-meta.activity-status--recent,
.ov-meta.activity-status--away,
.ov-meta.activity-status--unknown{
  font-weight:700;
}

/* ===== Profile overlay — hierarchy, depth, compact premium (map popup only) ===== */
#profileOverlay .overlay{
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,26,40,.98) 0%, rgba(12,17,26,.99) 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 20px 50px rgba(0,0,0,.55),
    0 2px 24px rgba(124,92,255,.08);
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:min(88vh, 640px);
  overflow:hidden;
}
#profileOverlay .ov-lock-stack{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
#profileOverlay .profile-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:10px 12px;
  padding:12px 12px 18px;
  border-bottom: none;
  box-shadow: var(--neavoHeaderSep);
  background: var(--neavoModalHeaderBg);
  position:relative;
  z-index:2;
}
#profileOverlay .profile-head-avatar,
#profileOverlay #ovAvatar{
  width:52px;
  height:52px;
  min-width:52px;
  border-radius:999px;
  font-size:17px;
  flex-shrink:0;
  transform:translateY(6px);
  margin-bottom:-6px;
  border:2px solid rgba(255,255,255,.14);
  background:rgba(124,92,255,.2);
  box-shadow:
    0 10px 28px rgba(0,0,0,.45),
    0 0 0 1px rgba(0,0,0,.35) inset;
  z-index:3;
  position:relative;
}
#profileOverlay #ovAvatar .avatar-img{
  border-radius:999px;
}
#profileOverlay .ov-title{
  min-width:0;
  padding-top:4px;
  padding-inline-end:2px;
}
#profileOverlay .ov-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}
#profileOverlay .ov-name{
  font-size:18px;
  font-weight:900;
  line-height:1.18;
  letter-spacing:-0.02em;
  color:rgba(255,255,255,.97);
}
#profileOverlay .profile-you-badge{
  flex-shrink:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  padding:2px 9px;
  border-radius:999px;
  color:rgba(255,255,255,.94);
  background:rgba(124,92,255,.22);
  border:1px solid rgba(160,130,255,.45);
  box-shadow:0 0 12px rgba(124,92,255,.2);
}
#profileOverlay .profile-own-bar{
  flex-shrink:0;
  padding:10px 12px 12px;
  border-bottom:none;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.026),
    0 8px 24px rgba(0, 3, 12, 0.16);
  background:var(--neavoModalHeaderBg);
}
#profileOverlay .profile-own-edit-btn{
  width:100%;
  font-weight:700;
}
/* Own profile: same outer container shadow/border as other profiles (no extra purple glow) */
#profileOverlay .ov-meta-own-user{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.55);
  word-break:break-word;
}
#profileOverlay .ov-meta-own-user.muted{
  color:rgba(255,255,255,.4);
  font-weight:500;
}
#profileOverlay .profile-head{
  overflow:visible;
  align-items:flex-start;
}
#profileOverlay .ov-title{
  min-width:0;
  overflow:visible;
}
#profileOverlay #ovMeta{
  margin-top:5px;
  min-height:2.75em;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:0;
  line-height:1.35;
  max-width:100%;
  overflow:visible;
  position:relative;
  z-index:2;
}
#profileOverlay .ov-meta-dist{
  font-size:11px;
  font-weight:500;
  color:rgba(255,255,255,.42);
  letter-spacing:0.01em;
}
#profileOverlay .ov-meta-sep{
  font-size:11px;
  color:rgba(255,255,255,.28);
  margin:0 5px;
  font-weight:400;
  user-select:none;
}
#profileOverlay .ov-meta-act{
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,.58);
}
/* Was here / away: full-width row flush with name + distance (no phantom dot indent). */
#profileOverlay .ov-meta-act:not(.activity-status--active) .activity-status__dot{
  display:none;
  width:0;
  height:0;
  margin:0;
  padding:0;
}
#profileOverlay .ov-meta-act.activity-status--recent,
#profileOverlay .ov-meta-act.activity-status--away,
#profileOverlay .ov-meta-act.activity-status--unknown{
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  gap:0;
  margin-inline-start:0;
  padding-inline-start:0;
}
#profileOverlay #ovMeta:has(.ov-meta-act.activity-status--recent) .ov-meta-sep,
#profileOverlay #ovMeta:has(.ov-meta-act.activity-status--away) .ov-meta-sep,
#profileOverlay #ovMeta:has(.ov-meta-act.activity-status--unknown) .ov-meta-sep{
  display:none;
}
#profileOverlay .ov-meta-act.activity-status--active{ color:#2ee59a; font-weight:700; }
#profileOverlay .ov-meta-act.activity-status--recent{ color:rgba(255,255,255,.72); }
#profileOverlay .ov-meta-act.activity-status--away{ color:rgba(255,255,255,.48); }
#profileOverlay .ov-meta-act.activity-status--unknown{ color:rgba(255,255,255,.4); }

#profileOverlay .profile-head-actions{
  display:flex;
  align-items:flex-start;
  gap:6px;
  padding-top:2px;
  flex-shrink:0;
}
#profileOverlay .profile-head-icon{
  width: var(--neavoModalHeaderIconSize);
  min-width: var(--neavoModalHeaderIconSize);
  height: var(--neavoModalHeaderIconSize);
  border-radius: var(--neavoModalHeaderIconRadius);
  border: var(--neavoModalHeaderIconBorder);
  background: var(--neavoModalHeaderIconBg);
  box-shadow: var(--neavoModalHeaderIconShadow);
}

#profileOverlay .overlay-body{
  position:relative;
  z-index:1;
  margin-top:-4px;
  padding:8px 12px 12px;
  gap:8px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}
/* Locked profile: keep real content for a premium “peek”, softly blurred */
#profileOverlay #ovBody.profile-body--locked-teaser{
  filter: blur(4px);
  -webkit-filter: blur(4px);
  opacity:0.78;
  transform: scale(0.992);
  pointer-events:none;
  user-select:none;
}
@media (prefers-reduced-motion: reduce){
  #profileOverlay #ovBody.profile-body--locked-teaser{
    transition: none;
  }
}

/* Premium lock sheet — glass card over blurred body */
#profileOverlay .profile-lock-glass{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:10px 12px 14px;
  pointer-events:none;
}
#profileOverlay .profile-lock-glass.hidden{
  display:none !important;
}
#profileOverlay .profile-lock-glass__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,10,18,0) 0%, rgba(8,10,18,.14) 42%, rgba(8,10,18,.45) 100%);
}
#profileOverlay .profile-lock-glass__inner{
  position:relative;
  pointer-events:auto;
  width:100%;
  max-width:100%;
  padding:18px 16px 16px;
  border-radius:18px;
  background:linear-gradient(165deg, rgba(26,30,44,.88), rgba(14,16,24,.92));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 20px 48px rgba(0,0,0,.5),
    0 0 40px rgba(124,92,255,.12);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
#profileOverlay .profile-lock__title{
  margin:0 0 8px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.25;
  color:rgba(255,255,255,.96);
  text-align:center;
}
#profileOverlay .profile-lock__desc{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.68);
  text-align:center;
  max-width:36em;
  margin-inline:auto;
}
#profileOverlay .profile-lock__ad-hint{
  margin:-6px 0 14px;
  font-size:11px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:0.02em;
  color:rgba(255,255,255,.48);
  text-align:center;
}
#profileOverlay .profile-lock__ad-hint.hidden{
  display:none !important;
}
#profileOverlay .profile-lock__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}
#profileOverlay .profile-lock__premium-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
#profileOverlay .profile-lock__badge{
  font-size:11px;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:none;
  color:rgba(200,190,255,.95);
  text-shadow:0 0 24px rgba(124,92,255,.45);
}
html[dir="ltr"] #profileOverlay .profile-lock__badge{
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
#profileOverlay .profile-lock__btn-premium{
  width:100%;
  min-height:50px;
  padding:14px 18px;
  font-size:15px;
  font-weight:800;
  letter-spacing:-0.01em;
  border:none;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(135deg, #9b7cff 0%, #6b4dff 42%, #5a3deb 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 4px 20px rgba(124,92,255,.45),
    0 0 32px rgba(124,92,255,.28);
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#profileOverlay .profile-lock__btn-premium:hover{
  filter:brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 6px 28px rgba(124,92,255,.5),
    0 0 40px rgba(124,92,255,.35);
}
#profileOverlay .profile-lock__btn-premium:active{
  transform:translateY(1px);
}
#profileOverlay .profile-lock__btn-ad{
  width:100%;
  min-height:38px;
  padding:8px 14px;
  font-size:12.5px;
  font-weight:600;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.42);
  color:rgba(255,255,255,.56);
  cursor:pointer;
  box-shadow:none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#profileOverlay .profile-lock__btn-ad:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.11);
  color:rgba(255,255,255,.68);
}
#profileOverlay .profile-lock__btn-ad:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
html[dir="rtl"] #profileOverlay .profile-lock__title,
html[dir="rtl"] #profileOverlay .profile-lock__desc,
html[dir="rtl"] #profileOverlay .profile-lock__ad-hint{
  text-align:center;
}
#profileOverlay .overlay-body > .kv{
  margin-top:0;
  padding:8px 10px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
#profileOverlay #ovBody > .kv:first-child{
  min-width:0;
  overflow:hidden;
}
#profileOverlay .overlay-body > .kv > .k{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:4px;
}
#profileOverlay .overlay-body > .kv > .v{
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  color:rgba(255,255,255,.9);
}
#profileOverlay #ovBody > .kv:first-child > .v#ovBio{
  text-align:start;
  unicode-bidi:isolate;
  font-weight:500;
  line-height:1.35;
  font-size:14px;
  padding:2px 4px 1px;
  color:rgba(255,255,255,.86);
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
  min-width:0;
}
#profileOverlay #ovBody .grid2{
  gap:8px;
  align-items:stretch;
}
#profileOverlay #ovBody .grid2 .kv{
  margin-top:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 10px 9px;
  border-radius:12px;
}
#profileOverlay #ovBody .grid2 .kv .k{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  margin-bottom:3px;
}
#profileOverlay #ovBody .grid2 .kv .v{
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  margin-top:0;
  padding-top:0;
  letter-spacing:-0.01em;
  color:rgba(255,255,255,.94);
}

#profileOverlay #ovSocials{
  width:100%;
  margin-top:0;
  justify-content:center;
}
#profileOverlay #ovSocials:has(> .socials.socials--empty){
  align-items:center;
  justify-content:center;
  min-height:44px;
}
#profileOverlay #ovSocials .socials{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
}
#profileOverlay #ovSocials .socials.socials--empty{
  flex:0 1 auto;
  width:100%;
  max-width:100%;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  align-content:center;
  min-height:0;
  padding:0;
  border:none;
  background:none;
  border-radius:0;
  gap:0;
}
#profileOverlay #ovSocials .socials-empty{
  margin:0;
  padding:0;
  width:100%;
  text-align:center;
  font-size:11px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:0.01em;
  color:rgba(255,255,255,.4);
  max-width:none;
}
#profileOverlay #ovSocials .sbtn--chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:0;
  height:auto;
  padding:6px 13px 6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.04) 100%);
  color:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.01em;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.06) inset;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#profileOverlay #ovSocials .sbtn--chip:hover{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.06) 100%);
  box-shadow:0 3px 12px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.08) inset;
}
#profileOverlay #ovSocials .sbtn--chip:active{
  transform:translateY(1px);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
#profileOverlay #ovSocials .sbtn-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  line-height:0;
  opacity:0.95;
  color:rgba(255,255,255,.88);
}
#profileOverlay #ovSocials .sbtn-lab{
  line-height:1.15;
  white-space:nowrap;
}
#profileOverlay #ovSocials .sbtn--phone{
  flex:0 1 auto;
  max-width:100%;
  justify-content:center;
  padding:6px 13px 6px 10px;
  border-radius:999px;
}
#profileOverlay #ovSocials .sbtn--phone .sbtn-txt{
  flex:0 1 auto;
  min-width:0;
  max-width:min(100%, 11.5rem);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  direction:ltr;
  unicode-bidi:embed;
  font-weight:600;
  font-size:12px;
}
/* Map HUD floating chips — unified native iOS-style capsule (range + free taps) */
.map-range-control > .map-range-btn,
#mapView .hud .tap-badge{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--neavo-map-chip-h);
  height:var(--neavo-map-chip-h);
  padding:0 var(--neavo-map-chip-pad-x);
  border-radius:var(--neavo-map-chip-radius);
  border:var(--neavo-map-chip-border);
  background:var(--neavo-map-chip-bg);
  color:rgba(248,250,255,0.96);
  font-size:12px;
  font-weight:600;
  line-height:1;
  letter-spacing:0.015em;
  -webkit-font-smoothing:antialiased;
  backdrop-filter:var(--neavo-map-chip-blur);
  -webkit-backdrop-filter:var(--neavo-map-chip-blur);
  box-shadow:var(--neavo-map-chip-shadow);
  -webkit-tap-highlight-color:transparent;
}
.map-range-control > .map-range-btn{
  gap:8px;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  font-family:inherit;
}
.map-range-control > .map-range-btn .map-range-label,
.map-range-control > .map-range-btn .map-range-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin:0;
  padding:0;
}
.map-range-control > .map-range-btn .map-range-caret{
  flex-shrink:0;
  font-size:11px;
  line-height:1;
}
#mapView .hud .tap-badge{
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  font-weight:500;
  padding:0 13px;
  text-align:center;
}
#mapView .hud .tap-badge #hudTrialText{
  display:inline;
  line-height:1;
  margin:0;
  padding:0;
}
@media (hover:hover){
  .map-range-control > .map-range-btn:hover,
  #mapView .hud .tap-badge:hover{
    border-color:rgba(255,255,255,0.17);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.035) 55%, rgba(255,255,255,0.02) 100%),
      rgba(20, 26, 40, 0.44);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.11) inset,
      0 1px 2px rgba(0,0,0,0.18),
      0 6px 16px rgba(0,8,26,0.3);
  }
}
.map-range-control > .map-range-btn:active,
#mapView .hud .tap-badge:active{
  transform:none;
  opacity:0.92;
}

/* Distance radius: map dropdown — light glass floating card (reads on dark nautical map) */
.map-range-control{
  position:absolute;
  top:calc(var(--neavoTopbarH) + env(safe-area-inset-top, 0px) + var(--neavo-map-chip-top-gap));
  left:12px;
  z-index:4100;
  pointer-events:auto;
  font-family:inherit;
}
html[dir="rtl"] .map-range-control{
  left:auto;
  right:12px;
}
.map-range-btn{
  min-width:0;
  cursor:pointer;
  user-select:none;
  font-family:inherit;
  font-size:12px;
  color:rgba(244,246,253,0.98);
  -webkit-tap-highlight-color:transparent;
}
/* Nearby list — segmented distance: glass track + premium selected pill (subtle lift + soft glow) */
.nearby-range-segmented{
  display:flex;
  align-items:stretch;
  width:100%;
  padding:4px;
  gap:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(165deg, rgba(18,24,38,0.55) 0%, rgba(8,12,22,0.65) 100%),
    linear-gradient(165deg, rgba(244,246,253,0.1) 0%, rgba(255,255,255,0.04) 100%);
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 2px 0 rgba(0,0,0,0.12) inset,
    0 6px 22px rgba(0,6,24,0.38);
  direction:ltr;
}
.nearby-range-seg{
  flex:1 1 0;
  min-width:0;
  margin:0;
  padding:9px 8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(228,234,248,0.84);
  font:inherit;
  font-size:12px;
  font-weight:500;
  line-height:1;
  letter-spacing:0.02em;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.1s ease;
}
@media (hover:hover){
  .nearby-range-seg:hover:not(.is-active){
    color:rgba(248,250,255,0.95);
    background:rgba(255,255,255,.06);
  }
}
.nearby-range-seg:active{
  transform:translateY(1px);
}
.nearby-range-seg.is-active{
  color:rgba(255,255,255,0.98);
  font-weight:600;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.05) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 0 0 1px rgba(255,255,255,.16),
    0 6px 18px rgba(0,8,28,0.42),
    0 0 32px rgba(255,255,255,.05),
    0 0 40px rgba(124,92,255,0.09);
}
@media (hover:hover){
  .nearby-range-seg.is-active:hover{
    background:
      linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.09) 45%, rgba(255,255,255,.055) 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.3) inset,
      0 -1px 0 rgba(0,0,0,.14) inset,
      0 0 0 1px rgba(255,255,255,.18),
      0 8px 22px rgba(0,8,28,0.46),
      0 0 36px rgba(255,255,255,.06),
      0 0 44px rgba(124,92,255,0.11);
  }
}
.nearby-range-seg:focus-visible{
  outline:2px solid rgba(124,92,255,0.45);
  outline-offset:2px;
}

.map-range-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:92px;
  padding:6px;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);
  background:
    linear-gradient(165deg, rgba(42,54,92,0.32) 0%, rgba(10,12,26,0.48) 100%),
    rgba(255,255,255,0.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 40px rgba(0,10,38,0.48);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
html[dir="rtl"] .map-range-menu{
  left:auto;
  right:0;
}
.map-range-option{
  width:100%;
  border:0;
  border-radius:10px;
  padding:8px 10px;
  background:transparent;
  color:rgba(236,241,251,0.95);
  font-weight:600;
  font-size:11px;
  text-align:start;
  cursor:pointer;
  transition:background 0.12s ease, color 0.12s ease;
}
@media (hover:hover){
  .map-range-option:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
  }
}
.map-range-option.is-active{
  background:rgba(255,255,255,.12);
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

.nearby-range-control{
  flex:0 0 auto;
  padding:2px 16px 10px;
}

/* Nearby — scroll port + elastic inner surface (short lists still feel touch-responsive). */
#listView{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  padding-top: calc(var(--neavoTopbarH) + env(safe-area-inset-top, 0px));
  box-sizing:border-box;
}
#listView .list-header{
  flex:0 0 auto;
}
#nearbyList{
  flex:1 1 auto;
  min-height:0;
  overflow-y:scroll;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  background:transparent;
}
.nearby-scroll-inner{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
  box-sizing:border-box;
  padding:12px 16px max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));
  transform:translateZ(0);
  will-change:transform;
}
.nearby-scroll-inner.neavo-nearby-snapback{
  transition:transform var(--neavo-dur-sheet) var(--neavo-ease-out);
}
@media (prefers-reduced-motion: reduce){
  .nearby-scroll-inner.neavo-nearby-snapback{
    transition-duration:0.01ms;
  }
}

/*
  Single separator: below the distance selector (1 / 5 / 10 km), above the user list.
  Title block (.list-header) stays open with no divider.
*/
.nearby-list-divider{
  flex-shrink:0;
  border:none;
  height:1px;
  margin:10px 16px 12px;
  background:linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.035) 14%,
    rgba(255,255,255,.052) 50%,
    rgba(255,255,255,.035) 86%,
    transparent 100%
  );
  opacity:.55;
}

/* Non-blocking location hint (native permission only — no Neavo modal). */
.neavo-loc-hint{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:4000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(15,22,35,.94);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.9);
  box-shadow:0 -8px 28px rgba(0,0,0,.35);
  pointer-events:auto;
}
.neavo-loc-hint.hidden{
  display:none !important;
}
.neavo-loc-hint__text{
  flex:1 1 200px;
  max-width:40rem;
}
.neavo-loc-hint .neavo-loc-hint__retry{
  flex:0 0 auto;
  margin:0;
  white-space:nowrap;
}

/* =========================
   Edge swipe-back (mobile only; applied dynamically by JS)
   ========================= */
.neavo-swipe-back-dragging{
  transition: none !important;
  will-change: transform, opacity;
}
.neavo-swipe-back-snapback{
  transition: transform 200ms cubic-bezier(.2,.7,.2,1),
              opacity   200ms cubic-bezier(.2,.7,.2,1) !important;
  will-change: transform, opacity;
}

/* =========================
   Portrait-only app shell (web + PWA + Capacitor)
   ========================= */
html.neavo-enforce-portrait{
  height:100%;
  width:100%;
}
html.neavo-enforce-portrait,
html.neavo-enforce-portrait body{
  min-height:100%;
  min-height:100dvh;
  max-height:100dvh;
  overflow:hidden;
}
html.neavo-enforce-portrait body{
  position:fixed;
  inset:0;
  width:100%;
  overscroll-behavior:none;
}
@supports (-webkit-touch-callout: none){
  html.neavo-enforce-portrait body{
    min-height:-webkit-fill-available;
  }
}

.neavo-rotate-lockout{
  display:none;
  position:fixed;
  inset:0;
  z-index:2147483000;
  align-items:center;
  justify-content:center;
  padding:max(20px, env(safe-area-inset-top, 0px))
           max(20px, env(safe-area-inset-right, 0px))
           max(20px, env(safe-area-inset-bottom, 0px))
           max(20px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(124,92,255,.18), transparent 55%),
    rgba(6,9,16,.94);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  pointer-events:auto;
  touch-action:none;
}
html.neavo-enforce-portrait.neavo-landscape-active .neavo-rotate-lockout{
  display:flex;
}
.neavo-rotate-lockout[hidden]{
  display:none !important;
}
.neavo-rotate-lockout__card{
  width:min(320px, 92vw);
  text-align:center;
  padding:22px 20px 20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(165deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%),
    rgba(12,16,28,.88);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 24px 56px rgba(0,6,22,.55);
}
.neavo-rotate-lockout__glyph{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  color:rgba(200,210,255,.9);
}
.neavo-rotate-lockout__glyph svg{
  width:100%;
  height:100%;
  display:block;
}
.neavo-rotate-lockout__title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:rgba(255,255,255,.96);
}
.neavo-rotate-lockout__sub{
  margin:0;
  font-size:13px;
  line-height:1.45;
}