/* ── BASEMAP THEMES — body[data-basemap="X"] overrides ────────────────────── */
/* Street: default blue theme — no overrides needed */

/* ── Satellite: earth / green ── */
body[data-basemap="satellite"] {
  --topbar-bg:    linear-gradient(135deg, #1a2e1a 0%, #1e3820 40%, #152812 70%, #1a2e1a 100%);
  --topbar-border: rgba(120,200,120,0.18);
  --sky:          #7ec87a;
  --sky-light:    #aadea8;
  --gold:         #7ec87a;
  --gold-bright:  #aadea8;
  --gold-dim:     #5aa858;
  --accent-gold:     #7ec87a;
  --accent-gold-dim: #5aa858;
  --teal:         #7ec87a;
  --teal-light:   #aadea8;
  --teal-dim:     #5aa858;
  --text-mid:     #7ec87a;
  --text-dim:     #5aa858;
  --sage-border:  #7ec87a;
  --sage-04:  rgba(120,200,120,0.04); --sage-06:  rgba(120,200,120,0.06);
  --sage-07:  rgba(120,200,120,0.07); --sage-08:  rgba(120,200,120,0.08);
  --sage-10:  rgba(120,200,120,0.10); --sage-12:  rgba(120,200,120,0.12);
  --sage-14:  rgba(120,200,120,0.14); --sage-15:  rgba(120,200,120,0.15);
  --sage-18:  rgba(120,200,120,0.18); --sage-20:  rgba(120,200,120,0.20);
  --sage-22:  rgba(120,200,120,0.22); --sage-25:  rgba(120,200,120,0.25);
  --sage-30:  rgba(120,200,120,0.30); --sage-35:  rgba(120,200,120,0.35);
  --sage-40:  rgba(120,200,120,0.40); --sage-50:  rgba(120,200,120,0.50);
  --sage-55:  rgba(120,200,120,0.55); --sage-60:  rgba(120,200,120,0.60);
  --sage-70:  rgba(120,200,120,0.70); --sage-75:  rgba(120,200,120,0.75);
}
body[data-basemap="satellite"] #topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-border);
}
body[data-basemap="satellite"] #sidebar { background: linear-gradient(180deg, #0d1a0d 0%, #0a1508 100%); }
body[data-basemap="satellite"] .tab-btn.active { color: var(--sky); border-bottom-color: var(--sky); }
body[data-basemap="satellite"] .acc-section-header:hover { background: var(--sage-06); }
body[data-basemap="satellite"] #share-btn {
  background: linear-gradient(135deg, #5aa858 0%, #7ec87a 45%, #aadea8 100%);
  box-shadow: 0 2px 10px var(--sage-35), inset 0 1px 0 rgba(255,255,255,0.3);
}
body[data-basemap="satellite"] #share-btn:hover {
  background: linear-gradient(135deg, #6ab868 0%, #8ed88a 45%, #bae8b8 100%);
  box-shadow: 0 4px 18px var(--sage-55), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ── Topo: warm earthy amber ── */
body[data-basemap="topo"] {
  --topbar-bg:    linear-gradient(135deg, #2a2010 0%, #2e2614 40%, #1e1a0c 70%, #2a2010 100%);
  --topbar-border: rgba(210,170,80,0.22);
  --sky:          #d4a84b;
  --sky-light:    #e8c87a;
  --gold:         #d4a84b;
  --gold-bright:  #e8c87a;
  --gold-dim:     #b08830;
  --accent-gold:     #f2c94c;
  --accent-gold-dim: #e8a820;
  --teal:         #d4a84b;
  --teal-light:   #e8c87a;
  --teal-dim:     #b08830;
  --text-mid:     #d4a84b;
  --text-dim:     #b08830;
  --sage-border:  #d4a84b;
  --sage-04:  rgba(210,170,80,0.04); --sage-06:  rgba(210,170,80,0.06);
  --sage-07:  rgba(210,170,80,0.07); --sage-08:  rgba(210,170,80,0.08);
  --sage-10:  rgba(210,170,80,0.10); --sage-12:  rgba(210,170,80,0.12);
  --sage-14:  rgba(210,170,80,0.14); --sage-15:  rgba(210,170,80,0.15);
  --sage-18:  rgba(210,170,80,0.18); --sage-20:  rgba(210,170,80,0.20);
  --sage-22:  rgba(210,170,80,0.22); --sage-25:  rgba(210,170,80,0.25);
  --sage-30:  rgba(210,170,80,0.30); --sage-35:  rgba(210,170,80,0.35);
  --sage-40:  rgba(210,170,80,0.40); --sage-50:  rgba(210,170,80,0.50);
  --sage-55:  rgba(210,170,80,0.55); --sage-60:  rgba(210,170,80,0.60);
  --sage-70:  rgba(210,170,80,0.70); --sage-75:  rgba(210,170,80,0.75);
}
body[data-basemap="topo"] #topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-border);
}
body[data-basemap="topo"] #sidebar { background: linear-gradient(180deg, #1a1408 0%, #140f04 100%); }
body[data-basemap="topo"] .tab-btn.active { color: var(--sky); border-bottom-color: var(--sky); }
body[data-basemap="topo"] .acc-section-header:hover { background: var(--sage-06); }
body[data-basemap="topo"] #share-btn {
  background: linear-gradient(135deg, #b08830 0%, #d4a84b 45%, #e8c87a 100%);
  box-shadow: 0 2px 10px var(--sage-35), inset 0 1px 0 rgba(255,255,255,0.3);
}
body[data-basemap="topo"] #share-btn:hover {
  background: linear-gradient(135deg, #c09840 0%, #e4b85b 45%, #f0d48a 100%);
  box-shadow: 0 4px 18px var(--sage-55), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ── Dark: near-black, neon cyan ── */
body[data-basemap="dark"] {
  --topbar-bg:    linear-gradient(135deg, #0a0a14 0%, #0c0c1a 40%, #080810 70%, #0a0a14 100%);
  --topbar-border: rgba(100,180,255,0.15);
  --sky:          #64b4ff;
  --sky-light:    #90ccff;
  --gold:         #64b4ff;
  --gold-bright:  #90ccff;
  --gold-dim:     #4090d8;
  --accent-gold:     #64b4ff;
  --accent-gold-dim: #4090d8;
  --teal:         #64b4ff;
  --teal-light:   #90ccff;
  --teal-dim:     #4090d8;
  --text-mid:     #64b4ff;
  --text-dim:     #4090d8;
  --sage-border:  #64b4ff;
  --sage-04:  rgba(100,180,255,0.04); --sage-06:  rgba(100,180,255,0.06);
  --sage-07:  rgba(100,180,255,0.07); --sage-08:  rgba(100,180,255,0.08);
  --sage-10:  rgba(100,180,255,0.10); --sage-12:  rgba(100,180,255,0.12);
  --sage-14:  rgba(100,180,255,0.14); --sage-15:  rgba(100,180,255,0.15);
  --sage-18:  rgba(100,180,255,0.18); --sage-20:  rgba(100,180,255,0.20);
  --sage-22:  rgba(100,180,255,0.22); --sage-25:  rgba(100,180,255,0.25);
  --sage-30:  rgba(100,180,255,0.30); --sage-35:  rgba(100,180,255,0.35);
  --sage-40:  rgba(100,180,255,0.40); --sage-50:  rgba(100,180,255,0.50);
  --sage-55:  rgba(100,180,255,0.55); --sage-60:  rgba(100,180,255,0.60);
  --sage-70:  rgba(100,180,255,0.70); --sage-75:  rgba(100,180,255,0.75);
}
body[data-basemap="dark"] #topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-border);
}
body[data-basemap="dark"] #sidebar { background: linear-gradient(180deg, #060610 0%, #040408 100%); }
body[data-basemap="dark"] .tab-btn.active { color: var(--sky); border-bottom-color: var(--sky); }
body[data-basemap="dark"] .acc-section-header:hover { background: var(--sage-06); }
body[data-basemap="dark"] #share-btn {
  background: linear-gradient(135deg, #4090d8 0%, #64b4ff 45%, #90ccff 100%);
  box-shadow: 0 2px 10px var(--sage-35), inset 0 1px 0 rgba(255,255,255,0.3);
}
body[data-basemap="dark"] #share-btn:hover {
  background: linear-gradient(135deg, #50a0e8 0%, #74c4ff 45%, #a0dcff 100%);
  box-shadow: 0 4px 18px var(--sage-55), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* ── Watercolor: soft rose/lavender ── */
body[data-basemap="watercolor"] {
  --topbar-bg:    linear-gradient(135deg, #2a1a2a 0%, #301e30 40%, #1e1220 70%, #2a1a2a 100%);
  --topbar-border: rgba(210,140,200,0.22);
  --sky:          #d28cc8;
  --sky-light:    #e8b0e0;
  --gold:         #d28cc8;
  --gold-bright:  #e8b0e0;
  --gold-dim:     #a868a0;
  --accent-gold:     #d28cc8;
  --accent-gold-dim: #a868a0;
  --teal:         #d28cc8;
  --teal-light:   #e8b0e0;
  --teal-dim:     #a868a0;
  --text-mid:     #d28cc8;
  --text-dim:     #a868a0;
  --sage-border:  #d28cc8;
  --sage-04:  rgba(210,140,200,0.04); --sage-06:  rgba(210,140,200,0.06);
  --sage-07:  rgba(210,140,200,0.07); --sage-08:  rgba(210,140,200,0.08);
  --sage-10:  rgba(210,140,200,0.10); --sage-12:  rgba(210,140,200,0.12);
  --sage-14:  rgba(210,140,200,0.14); --sage-15:  rgba(210,140,200,0.15);
  --sage-18:  rgba(210,140,200,0.18); --sage-20:  rgba(210,140,200,0.20);
  --sage-22:  rgba(210,140,200,0.22); --sage-25:  rgba(210,140,200,0.25);
  --sage-30:  rgba(210,140,200,0.30); --sage-35:  rgba(210,140,200,0.35);
  --sage-40:  rgba(210,140,200,0.40); --sage-50:  rgba(210,140,200,0.50);
  --sage-55:  rgba(210,140,200,0.55); --sage-60:  rgba(210,140,200,0.60);
  --sage-70:  rgba(210,140,200,0.70); --sage-75:  rgba(210,140,200,0.75);
}
body[data-basemap="watercolor"] #topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-border);
}
body[data-basemap="watercolor"] #sidebar { background: linear-gradient(180deg, #180e18 0%, #120810 100%); }
body[data-basemap="watercolor"] .tab-btn.active { color: var(--sky); border-bottom-color: var(--sky); }
body[data-basemap="watercolor"] .acc-section-header:hover { background: var(--sage-06); }
body[data-basemap="watercolor"] #share-btn {
  background: linear-gradient(135deg, #a868a0 0%, #d28cc8 45%, #e8b0e0 100%);
  box-shadow: 0 2px 10px var(--sage-35), inset 0 1px 0 rgba(255,255,255,0.3);
}
body[data-basemap="watercolor"] #share-btn:hover {
  background: linear-gradient(135deg, #b878b0 0%, #e29cd8 45%, #f0c0f0 100%);
  box-shadow: 0 4px 18px var(--sage-55), inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Topbar theme transition */
#topbar, #sidebar, .tab-btn {
  transition: background 0.6s ease, border-color 0.5s ease, color 0.4s ease;
}

/* ── Hover utility classes ─────────────────────────────────────────────── */
.hover-sage { transition: color 0.15s; }
.hover-sage:hover { color: var(--sky) !important; }
.hover-sage-bg { transition: background 0.15s, color 0.15s; }
.hover-sage-bg:hover { background: rgba(155,203,243,0.15) !important; }
.hover-danger { transition: color 0.15s; }
.hover-danger:hover { color: rgba(242,160,144,0.9) !important; }
.hover-bright { transition: color 0.15s, opacity 0.15s; }
.hover-bright:hover { color: rgba(255,255,255,0.9) !important; opacity: 1 !important; }
.hover-lift { transition: transform 0.15s, box-shadow 0.15s; }
.hover-lift:hover { transform: translateY(-1px); }

/* ── Button tier system ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; cursor: pointer;
  border: none; outline: none; text-decoration: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(135deg, #1e4068, #2a5a8a);
  color: #fff; border: 1px solid rgba(155,203,243,0.28);
  border-radius: 50px; padding: 12px 28px; font-size: 0.9rem;
  box-shadow: 0 4px 20px rgba(155,203,243,0.1);
}
.btn-primary:hover { background: linear-gradient(135deg, #265080, #3468a0); box-shadow: 0 6px 24px rgba(155,203,243,0.18); }
.btn-secondary {
  background: rgba(155,203,243,0.06); color: rgba(155,203,243,0.85);
  border: 1px solid rgba(155,203,243,0.25); border-radius: 50px; padding: 10px 22px; font-size: 0.85rem;
}
.btn-secondary:hover { background: rgba(155,203,243,0.12); border-color: rgba(155,203,243,0.4); color: #9bcbf3; }
.btn-ghost {
  background: none; color: var(--text-dim); border: 1px solid transparent;
  border-radius: 10px; padding: 8px 16px; font-size: 0.82rem;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500;
}
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.btn-danger {
  background: rgba(242,112,90,0.12); color: rgba(242,140,124,0.9);
  border: 1px solid rgba(242,112,90,0.25); border-radius: 10px; padding: 8px 16px; font-size: 0.82rem;
}
.btn-danger:hover { background: rgba(242,112,90,0.2); border-color: rgba(242,112,90,0.45); }
.btn-close-x {
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.35); line-height: 1;
  border-radius: 6px; padding: 2px 6px; font-size: 1.2rem; transition: color 0.15s, background 0.15s;
}
.btn-close-x:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); }
.btn-dismiss-x {
  background: none; border: none; cursor: pointer; padding: 0 2px; line-height: 1;
  color: rgba(242,140,124,0.5); font-size: 0.85rem; transition: color 0.15s;
}
.btn-dismiss-x:hover { color: rgba(242,160,144,0.9); }
.btn-icon-sage {
  background: transparent; cursor: pointer; color: rgba(155,203,243,0.75); font-size: 0.55rem;
  padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(155,203,243,0.25);
  transition: background 0.15s, color 0.15s;
}
.btn-icon-sage:hover { background: rgba(155,203,243,0.12); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --sidebar-w: 370px; /* must match #sidebar width */
  --sky:         #9bcbf3;
  --sky-light:   #c2ddf2;
  --peach:       #f2d5b3;
  --ink:         #0d0d0d;

  --bg-page:     #0d0d0d;
  --bg-panel:    #1a1a1a;
  --bg-elevated: #222222;
  --bg-subtle:   #111111;
  --bg-input:    #222222;

  --gold:        #9bcbf3;
  --gold-bright: #c2ddf2;
  --gold-dim:    #6aaade;
  --gold-glow:   var(--sage-18);
  /* Accent gold — used by pro/cta buttons like Export GPX; defaults to blue on street map */
  --accent-gold:     #9bcbf3;
  --accent-gold-dim: #6aaade;
  --teal:        #9bcbf3;
  --teal-light:  #c2ddf2;
  --teal-dim:    #6aaade;

  --text:        #f0f1f3;
  --text-mid:    #9bcbf3;
  --text-dim:    #6aaade;
  --text-faint:  #4a7a9e;

  --border:      var(--sage-18);
  --border-mid:  var(--sage-35);
  --glass-bg:    rgba(26,26,26,0.94);
  --glass-bg2:   rgba(26,26,26,0.99);
  --glass-border:var(--sage-20);
  --glass-shine: var(--sage-06);

  --forest:      #1a1a1a;
  --forest-mid:  #0d0d0d;
  --forest-deep: #080808;
  --sage-border: #9bcbf3;

  --d1: #9bcbf3; --d2: #f2d5b3; --d3: #6aaade;
  --d4: #e8b890; --d5: #5a8ab0; --d6: #c2ddf2;
  --d7: #d4a87a; --d8: #7aaac8;

  /* Sage opacity variants — rgba(155,203,243, opacity) */
  --sage-04:  rgba(155,203,243,0.04);
  --sage-06:  rgba(155,203,243,0.06);
  --sage-07:  rgba(155,203,243,0.07);
  --sage-08:  rgba(155,203,243,0.08);
  --sage-10:  rgba(155,203,243,0.10);
  --sage-12:  rgba(155,203,243,0.12);
  --sage-14:  rgba(155,203,243,0.14);
  --sage-15:  rgba(155,203,243,0.15);
  --sage-18:  rgba(155,203,243,0.18);
  --sage-20:  rgba(155,203,243,0.20);
  --sage-22:  rgba(155,203,243,0.22);
  --sage-25:  rgba(155,203,243,0.25);
  --sage-30:  rgba(155,203,243,0.30);
  --sage-35:  rgba(155,203,243,0.35);
  --sage-40:  rgba(155,203,243,0.40);
  --sage-50:  rgba(155,203,243,0.50);
  --sage-55:  rgba(155,203,243,0.55);
  --sage-60:  rgba(155,203,243,0.60);
  --sage-70:  rgba(155,203,243,0.70);
  --sage-75:  rgba(155,203,243,0.75);

  /* Radius scale */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 50px;
}

html, body { height: 100%; width: 100%; overflow: hidden; }
body {
  touch-action: manipulation;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg-page);
  color: var(--text);
  position: fixed;
  inset: 0;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 999; opacity: 0.5;
}

/* ── CUSTOM TOOLTIPS ────────────────────────────────────────────────────────── */
#rmy-tooltip {
  position: fixed; z-index: 299000;
  max-width: 220px; min-width: 100px;
  background: linear-gradient(160deg, rgba(6,14,28,0.97) 0%, rgba(4,11,24,0.99) 100%);
  border: 1px solid rgba(155,203,243,0.28);
  border-top-color: rgba(200,230,255,0.38);
  border-radius: 10px;
  padding: 9px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.65), 0 2px 0 rgba(255,255,255,0.04) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.18s ease, transform 0.18s ease;
  will-change: opacity, transform;
}
#rmy-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#rmy-tooltip .tt-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem; font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin-bottom: 4px; line-height: 1.2;
}
#rmy-tooltip .tt-body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; color: rgba(155,203,243,0.6);
  line-height: 1.55;
}
#rmy-tooltip .tt-shortcut {
  display: inline-block; margin-top: 5px;
  background: rgba(155,203,243,0.1);
  border: 1px solid rgba(155,203,243,0.2);
  border-radius: 4px; padding: 1px 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem; color: rgba(155,203,243,0.55);
}
@media (max-width: 600px) { #rmy-tooltip { display: none !important; } }

/* World map country overlay */
.world-map-tip {
  background: rgba(6,14,26,0.9) !important;
  border: 1px solid rgba(155,203,243,0.3) !important;
  border-radius: 7px !important;
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.72rem !important;
  padding: 5px 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  white-space: nowrap !important;
}
.world-map-tip::before { display: none !important; }

/* TOPBAR */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 58px;
  background: linear-gradient(135deg, #1a3a5c 0%, #1e4468 40%, #162f4f 70%, #1a3a5c 100%);
  border-bottom: 1px solid var(--sage-20);
  display: flex; align-items: center;
  padding: 0 14px 0 22px; gap: 10px;
  z-index: 5100;
  overflow: visible;
}
#topbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sage-50) 30%, rgba(155,203,243,0.8) 50%, var(--sage-50) 70%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmerEdge 10s ease-in-out infinite;
}
#topbar::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, var(--sage-06) 50%, rgba(255,255,255,0.04) 52%, transparent 62%);
  animation: shimmerSweep 14s ease-in-out infinite;
  border-radius: inherit;
}
.brand { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
#logo-horiz { flex-shrink: 0; }
.bw-wrap {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.2rem; line-height: 1;
  letter-spacing: -0.02em;
}
.bw-travel { color: #9bcbf3; }
.bw-thread { color: #ffffff; }
.brand-domain {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; color: var(--text-faint);
  letter-spacing: 0.1em; opacity: 0.75;
  align-self: flex-end; padding-bottom: 2px;
}
.brand-icon { flex-shrink: 0; }
.brand-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold-bright);
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(255,107,91,0.3);
  line-height: 1;
}

.name-wrap {
  border-left: 1px solid var(--sage-30);
  padding-left: 18px;
  margin-left: 14px;
  display: flex; align-items: center;
}
#trip-name-input {
  background: transparent; border: none;
  border-bottom: 1px solid transparent;
  color: #ffffff;
  font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem;
  padding: 2px 6px 1px; width: 260px; outline: none;
  transition: border-color 0.2s;
}
#trip-name-input:hover { border-bottom-color: var(--sage-50); }
#trip-name-input:focus { border-bottom-color: #9bcbf3; }
#trip-name-input::placeholder { color: rgba(255,255,255,0.4); }
#trip-byline { display: none; }
body.viewer #trip-byline { display: inline-flex; align-items: center; gap: 5px; }
body.is-collaborator #trip-byline { display: inline-flex; align-items: center; gap: 5px; }
body.is-collaborator #trip-name-input { pointer-events: none; opacity: 0.75; cursor: default; }

body.viewer:not(.ham-has-content) #hamburger-btn { display: none !important; }

body.viewer [data-tab="share"],
body.viewer #tab-share { display: none !important; }



.spacer { flex: 1; }
/* ── Topbar buttons — unified ghost style ── */
.top-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  background: transparent;
  border: 1px solid var(--sage-22);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.top-btn:hover {
  border-color: var(--sage-50);
  color: rgba(255,255,255,0.95);
  background: var(--sage-08);
}
/* Share is the one accent CTA */
#share-btn {
  background: linear-gradient(135deg, #7ab8e8 0%, #9bcbf3 45%, #b8d8f8 100%);
  border-color: transparent;
  color: #0d1e2e;
  font-weight: 700;
  box-shadow: 0 2px 10px var(--sage-35), inset 0 1px 0 rgba(255,255,255,0.4);
  position: relative; overflow: hidden;
}
#share-btn:hover {
  background: linear-gradient(135deg, #8ec3ef 0%, #aad4f7 45%, #c4e0fa 100%);
  box-shadow: 0 4px 18px var(--sage-55), inset 0 1px 0 rgba(255,255,255,0.5);
  transform: translateY(-1px);
}
/* Glass reflection — top highlight */
#share-btn::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none; border-radius: inherit;
}
/* Travelling shimmer sweep */
#share-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  animation: shimmerSweep 7s ease-in-out infinite 1s;
  border-radius: inherit; pointer-events: none;
}

/* ── PRO TOPBAR ────────────────────────────────────────────────────────────── */
body.user-is-pro #topbar {
  background: rgba(18, 12, 2, 0.72);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid rgba(242,201,76,0.2);
}
/* Slow gold shimmer sweep across the whole bar */
body.user-is-pro #topbar::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(105deg,
    transparent 20%,
    rgba(242,201,76,0.06) 40%,
    rgba(245,217,122,0.10) 50%,
    rgba(242,201,76,0.06) 60%,
    transparent 80%);
  background-size: 300% 100%;
  animation: proBarSweep 20s ease-in-out infinite;
}
/* Gold edge line at bottom */
body.user-is-pro #topbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(242,201,76,0.4) 25%,
    rgba(245,217,122,0.7) 50%,
    rgba(242,201,76,0.4) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmerEdge 5s ease-in-out infinite;
  z-index: 1;
}
@keyframes proBarSweep {
  0%   { background-position: 200% 0; }
  50%  { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── PRO UPGRADE MODAL ──────────────────────────────────────────────────────── */
#pro-modal {
  display: none; position: fixed; inset: 0; z-index: 99500;
  align-items: center; justify-content: center;
  background: rgba(5,12,20,0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#pro-modal.open { display: flex; }
.pro-modal-box {
  background: rgba(8,18,34,0.92); backdrop-filter: blur(32px);
  border: 1px solid rgba(242,201,76,0.3); border-radius: 20px;
  padding: 0; width: 380px; max-width: calc(100vw - 32px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.65), 0 0 40px rgba(242,201,76,0.08), inset 0 1px 0 rgba(242,201,76,0.15);
  overflow: hidden; animation: modalPop 0.35s cubic-bezier(0.34,1.4,0.64,1) both;
}
.pro-modal-header {
  background: linear-gradient(135deg, #1a1200 0%, #2a1f00 50%, #1a1200 100%);
  border-bottom: 1px solid rgba(242,201,76,0.2);
  padding: 28px 28px 22px; text-align: center; position: relative; overflow: hidden;
}
.pro-modal-header::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(242,201,76,0.12) 50%, transparent 70%);
  animation: shimmerSweep 6s ease-in-out infinite;
  pointer-events: none;
}
.pro-modal-crown {
  margin-bottom: 10px; justify-content: center;
}
.pro-modal-crown svg { width: 36px; height: 36px; }
.pro-modal-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(90deg, #f2c94c, #f5d97a, #e8a820, #f2c94c);
  background-size: 200% auto; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  animation: proNameShimmer 3s linear infinite;
}
.pro-modal-price {
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  color: rgba(242,201,76,0.6); margin-top: 4px;
}
.pro-modal-body { padding: 24px 28px 28px; }
.pro-feature-list { list-style: none; margin: 0 0 20px; padding: 0; }
.pro-feature-list li {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem;
  color: rgba(255,255,255,0.8); padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; gap: 10px;
}
.pro-feature-list li:last-child { border-bottom: none; }
.pro-feature-list li .pf-icon { color: #f2c94c; flex-shrink: 0; }
.pro-checkout-btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, #e8a820 0%, #f2c94c 50%, #e8a820 100%);
  background-size: 200% auto;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 800;
  color: #1a1000; transition: transform 0.15s, box-shadow 0.15s;
  animation: proNameShimmer 2.5s linear infinite;
  box-shadow: 0 4px 20px rgba(242,201,76,0.35);
  position: relative; overflow: hidden;
}
.pro-checkout-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  animation: shimmerSweep 5s ease-in-out infinite;
  pointer-events: none;
}
.pro-checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(242,201,76,0.5); }
.pro-checkout-btn:active { transform: translateY(0); }
.pro-modal-close {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.5);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.pro-modal-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
.pro-manage-section {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.pro-manage-btn {
  background: none; border: 1px solid rgba(242,201,76,0.3);
  color: rgba(242,201,76,0.7); border-radius: 8px; padding: 8px 20px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.pro-manage-btn:hover { background: rgba(242,201,76,0.1); border-color: rgba(242,201,76,0.6); }

/* ── ACTIVE JOURNEY PICKER (lapsed sub) ─────────────────────────────────────── */
#active-picker-modal {
  display: none; position: fixed; inset: 0; z-index: 99400;
  align-items: center; justify-content: center;
  background: rgba(5,12,20,0.78); backdrop-filter: blur(10px);
}
#active-picker-modal.open { display: flex; }
.active-picker-box {
  background: rgba(8,18,34,0.92); border: 1px solid var(--sage-20);
  border-radius: 16px; padding: 26px; width: 400px; max-width: calc(100vw - 32px);
  max-height: 80vh; overflow-y: auto;
  animation: modalPop 0.3s cubic-bezier(0.34,1.4,0.64,1) both;
}
/* Clear gets a subtle red tint on hover only */
#clear-btn:hover { border-color: rgba(242,160,144,0.5); color: #f2a090; background: rgba(242,160,144,0.06); }

/* SIDEBAR */
#sidebar {
  position: fixed;
  top: 58px; left: 0; bottom: 0;
  width: 370px;
  background: rgba(18, 14, 6, 0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-right: 1px solid rgba(242,201,76,0.12);
  box-shadow: 4px 0 40px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 9500;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
#sidebar.collapsed {
  transform: translateX(-370px);
}
#tabs {
  display: flex;
  flex-shrink: 0;
  background: rgba(14, 10, 4, 0.88);
  border-bottom: 1px solid rgba(242,201,76,0.10);
  position: relative; overflow: hidden;
}
#tabs::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(155,203,243,0.05) 50%, transparent 70%);
  animation: shimmerSweepSlow 18s ease-in-out infinite;
}
.tab-btn {
  flex: 1;
  padding: 12px 4px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
  position: relative;
  overflow: hidden;
}
.tab-btn:hover { color: rgba(255,255,255,0.85); }
.tab-btn.active { color: #ffffff; border-bottom-color: #9bcbf3; }

.tab-panel { display: none; flex: 1; min-height: 0; overflow-y: auto; flex-direction: column; }
.tab-panel.active { display: flex; }
.tab-panel::-webkit-scrollbar { width: 3px; }
.tab-panel::-webkit-scrollbar-track { background: transparent; }
.tab-panel::-webkit-scrollbar-thumb { background: var(--sage-border); border-radius: 2px; }
.tab-panel::-webkit-scrollbar-thumb:hover { background: var(--sage-40); }
.tab-panel { scrollbar-width: thin; scrollbar-color: var(--sage-border) transparent; }
.gallery-like-btn {
  position: absolute;
  bottom: 6px; right: 6px;
  z-index: 3;
  opacity: 1;
}
.gallery-like-btn .like-btn {
  background: rgba(10,20,32,0.72) !important;
  border-radius: 20px;
  padding: 3px 7px !important;
  font-size: 0.72rem !important;
  backdrop-filter: blur(4px);
}
.gallery-like-btn .like-btn svg { width: 14px !important; height: 14px !important; }
/* Show count clearly on liked state */
.gallery-like-btn .like-btn.liked { background: rgba(242,112,90,0.25) !important; }

/* Drop zone */
#file-input { display: none; }

/* ── DROP ZONE ── */
#drop-zone {
  margin: 12px 14px;
  border: 2px dashed var(--border-mid);
  border-radius: 12px; padding: 20px 14px;
  text-align: center; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  background: var(--bg-subtle);
  flex-shrink: 0; position: relative; overflow: hidden;
  user-select: none;
}
#drop-zone:hover {
  border-color: #9bcbf3; background: var(--sage-10);
}
#drop-zone.drag-over {
  border-color: var(--sky); border-style: solid;
  background: var(--sage-12);
  transform: scale(1.01);
  box-shadow: 0 0 0 4px var(--sage-15);
}
#drop-zone .dz-icon { margin-bottom: 10px; display: block; transition: transform 0.2s; line-height:1; }
#drop-zone.drag-over .dz-icon { transform: scale(1.15) translateY(-3px); }
#drop-zone p { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
#drop-zone strong { color: rgba(255,255,255,0.9); font-weight: 600; }

/* ── FULL-PAGE DROP OVERLAY ── */
#page-drop-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 99800;
  background: var(--sage-08);
  backdrop-filter: blur(2px);
  border: 4px dashed var(--sage-60);
  pointer-events: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 16px;
}
#page-drop-overlay.active { display: flex; }
.pdo-inner {
  background: var(--bg-elevated);
  border-radius: 20px; padding: 40px 56px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35);
  border: 2px solid var(--sage-40);
}
.pdo-icon { margin-bottom: 12px; display: block; animation: dzBounce 0.5s ease infinite alternate; line-height:1; }
.pdo-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--text); }
.pdo-sub   { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-mid); margin-top: 6px; }
@keyframes dzBounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}
/* Upload progress bar */
#upload-progress-bar {
  display: none; margin: 8px 14px 0;
  background: var(--bg-subtle); border-radius: 6px;
  overflow: hidden; height: 4px;
}
#upload-progress-fill {
  height: 100%; background: var(--sky);
  width: 0%; transition: width 0.3s ease;
  border-radius: 6px;
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.35) 60%, transparent 100%);
  background-size: 200% 100%;
  animation: uploadShimmer 1.4s linear infinite;
}
#upload-progress-label {
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; color: var(--sage-70);
  padding: 4px 14px 0; text-align: center;
}
@keyframes uploadShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#sidebar-toggle {
  position: fixed;
  top: 50%;
  left: 370px;
  transform: translateY(-50%);
  z-index: 9501;
  width: 29px; height: 75px;
  background: rgba(18, 14, 6, 0.92);
  border: 1px solid rgba(242,201,76,0.18);
  border-left: none;
  border-radius: 0 13px 13px 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s, background 0.15s;
  box-shadow: 4px 0 20px rgba(0,0,0,0.3);
}
#sidebar-toggle:hover { color: rgba(242,201,76,0.9); background: rgba(28, 22, 8, 0.97); }
#sidebar-toggle.collapsed { transform: translateY(-50%) translateX(-370px); }
#sidebar-toggle .toggle-arrow { transition: transform 0.32s ease; line-height: 1; }
#sidebar-toggle.collapsed .toggle-arrow { transform: rotate(180deg); }

/* Stats */
#stats-row {
  display: flex;
  flex-shrink: 0;
  background: rgba(10, 24, 44, 0.55);
  border-bottom: 1px solid var(--sage-08);
  position: relative; overflow: hidden;
}
#stats-row::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, var(--sage-04) 50%, transparent 80%);
  animation: shimmerSweepSlow 6s ease-in-out infinite 1.5s;
}
.stat { flex: 1; text-align: center; padding: 10px 4px; border-right: 1px solid var(--sage-08); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stat:last-child { border-right: none; }
.stat-n { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 700; color: rgba(155,203,243,0.9); display: block; line-height: 1; letter-spacing: -0.02em; }
.stat-l { font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px; display: block; }
/* Per-stat tints */
.stat-stops { background: rgba(155,203,243,0.05); }
.stat-stops .stat-n { color: #9bcbf3; }
.stat-days { background: rgba(0,200,190,0.06); }
.stat-days .stat-n { color: #7eeee8; }
.stat-drive { background: rgba(240,192,96,0.06); }
.stat-drive .stat-n { color: #f0c060; }
/* Odometer display */
.odo-drum-wrap {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.04), 0 1px 0 rgba(255,255,255,0.04);
  padding: 0 12px;
  overflow: hidden;
  position: relative;
  min-width: 64px;
  height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.odo-drum-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 45%, transparent 55%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  border-radius: inherit;
}
.odo-drum-wrap:hover::after { opacity: 1; }
.odo-drum-wrap:hover { border-color: rgba(255,255,255,0.15); }
/* Drive drum — no padding so faces fill the full height cleanly */
#odo-drive-wrap {
  align-items: flex-start;
  padding: 0;
}
#odo-drive-wrap .odo-display {
  height: 2.6rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 12px;
}
.odo-drum-wrap::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2; pointer-events: none;
  background: rgba(255,255,255,0.06);
}
.odo-drum-inner {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  transition: transform 0.52s cubic-bezier(0.4,0,0.2,1);
}
.odo-display {
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem; font-weight: 700; line-height: 1;
  white-space: nowrap; width: 100%; flex-shrink: 0;
}
/* Per-character spans inside odo-display */
.odo-display .odo-suffix {
  font-size: 0.6rem; font-weight: 600; opacity: 0.65;
  margin-left: 4px; align-self: center; letter-spacing: 0.06em;
}
@keyframes odoNumIn {
  from { opacity: 0; transform: translateY(-40%); }
  to   { opacity: 1; transform: translateY(0); }
}
.odo-num-anim {
  display: inline-block;
  animation: odoNumIn 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
.stat-stops .odo-display { color: #9bcbf3; }
.stat-days  .odo-display { color: #7eeee8; }
.stat-drive .odo-display { color: #f0c060; }

/* Waypoint list */
#waypoint-list { padding: 4px 0; }
.day-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 5px 36px;
}
.dh-line { flex: 1; height: 1px; background: linear-gradient(90deg, currentColor 0%, transparent 100%); background-size: 200% 100%; animation: shimmerEdge 10s ease-in-out infinite; opacity: 0.25; }
.dh-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; opacity: 0.75; }
.day-header-rail {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; opacity: 0.6;
}

.wp-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 10px; cursor: pointer;
  border-left: 2px solid transparent;
  position: relative; transition: background 0.18s;
  overflow: hidden;
}
.wp-item::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, var(--sage-06) 50%, transparent 70%);
  transform: translateX(-120%) skewX(-12deg);
  transition: none;
}
.wp-item:hover::after {
  animation: shimmerSweep 1.1s ease-out forwards;
}
.wp-item:hover { background: var(--sage-04); }
@media (hover: hover) {
  .wp-item:hover::after { animation: shimmerSweep 1.1s ease-out forwards; }
  .wp-item:hover { background: var(--sage-04); }
  .wp-item:hover .wp-body { transform: translateX(3px); }
}
.wp-body {
  flex: 1; min-width: 0;
  transform: translateX(0);
  transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wp-item:hover .wp-body { transform: translateX(3px); }

.wp-item-divider {
  height: 1px; flex-shrink: 0; margin: 0 10px 0 36px;
  background: linear-gradient(90deg, var(--sage-12) 0%, var(--sage-04) 60%, transparent 100%);
}
.wp-conn { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 26px; }
.wp-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; box-shadow: 0 0 6px currentColor; opacity: 0.8; }
/* Author avatar replaces dot when collaborator data is available */
.wp-author-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; background: #1e3a5f;
  border: 2px solid transparent; /* set inline with day color */
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.5rem; font-weight: 700;
  box-sizing: border-box;
}
.wp-author-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.wp-line { display: none; }

.wp-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--sage-70); margin-top: 2px; }
.wp-nprev { font-family: 'Space Grotesk', sans-serif; font-size: 0.76rem; color: var(--text-mid); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }

.wp-del  { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.68rem; padding: 2px 3px; opacity: 0; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; flex-shrink: 0; }
.wp-edit { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.68rem; padding: 2px 3px; opacity: 0; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; flex-shrink: 0; }
.wp-item:hover .wp-del, .wp-item:hover .wp-edit { opacity: 1; }
@media (hover: none) { .wp-del, .wp-edit { opacity: 1; } }
.wp-del:hover  { color: #e87878; }
.wp-edit:hover { color: #9bcbf3; }

#no-gps-sec { padding: 0 14px 12px; flex-shrink: 0; }
#no-gps-sec h4 { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; color: #e8b478; margin-bottom: 5px; }
.no-gps-item { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--text-dim); padding: 2px 0; }

/* Unplaced photo chip — draggable */
.unplaced-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  background: rgba(232,180,120,0.07);
  border: 1px solid rgba(232,180,120,0.2);
  border-radius: 8px;
  cursor: grab;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  user-select: none;
}
.unplaced-chip:hover { background: rgba(232,180,120,0.13); border-color: rgba(232,180,120,0.38); }
.unplaced-chip.dragging { opacity: 0.4; cursor: grabbing; }
.unplaced-chip.placing  { background: rgba(155,203,243,0.12); border-color: rgba(155,203,243,0.4); cursor: crosshair; }
.unplaced-chip-thumb {
  width: 32px; height: 32px; border-radius: 5px; object-fit: cover; flex-shrink: 0;
  background: rgba(255,255,255,0.06);
}
.unplaced-chip-name {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
  color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.unplaced-chip-discard {
  background: none; border: none; color: rgba(232,120,120,0.4);
  font-size: 0.75rem; cursor: pointer; padding: 0 2px; line-height: 1;
  transition: color 0.15s;
}
.unplaced-chip-discard:hover { color: rgba(232,120,120,0.9); }

/* Map drop target overlay — shown during drag */
#unplaced-map-target {
  display: none;
  position: absolute; inset: 0; z-index: 1200;
  background: rgba(155,203,243,0.06);
  border: 3px dashed rgba(155,203,243,0.45);
  border-radius: 4px;
  align-items: center; justify-content: center;
  pointer-events: all;
}
#unplaced-map-target.active { display: flex; }
#unplaced-map-target-label {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: rgba(155,203,243,0.85);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  text-align: center; pointer-events: none;
}

/* Add panel */
#tab-add { padding: 14px; gap: 12px; overflow-y: auto; }
.form-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
.form-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-shine), transparent);
}
.card-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; font-weight: 600; color: var(--gold-bright); letter-spacing: 0.04em; }
.form-label { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 3px; display: block; }
.form-input, .form-textarea, .form-select {
  background: rgba(255,255,255,0.1); border: 1px solid var(--sage-30); color: #fff;
  border-radius: 6px; color: var(--text);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem;
  padding: 8px 10px; width: 100%; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--gold-dim); box-shadow: 0 0 0 3px rgba(0,200,190,0.07);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-textarea { resize: vertical; min-height: 68px; font-family: 'Space Grotesk', sans-serif; font-size: 0.86rem; }
.form-select option { background: var(--forest); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.add-btn {
  padding: 10px; background: linear-gradient(135deg, var(--gold-dim), var(--gold));
  color: var(--forest-deep); border: none; border-radius: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.8rem;
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.add-btn:hover { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); box-shadow: 0 4px 16px rgba(0,200,190,0.28); transform: translateY(-1px); }

.sec-desc { font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; color: var(--text-dim); line-height: 1.6; }
.click-btn {
  padding: 10px; background: transparent; color: var(--text-mid);
  border: 1px solid var(--sage-border); border-radius: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.8rem;
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.click-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.click-btn.on { background: rgba(0,200,190,0.1); border-color: var(--gold); color: var(--gold-bright); }

/* Day panel */
#tab-days { padding: 14px; gap: 10px; overflow-y: auto; }
.day-help { font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; color: var(--text-dim); line-height: 1.6; padding-bottom: 4px; }
.day-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px;
  display: flex; align-items: center; gap: 10px; transition: border-color 0.2s;
  overflow: hidden; min-width: 0;
}
.day-card:hover { border-color: var(--leaf-dim); }
.day-swatch { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.day-name-input {
  flex: 1; min-width: 0; background: transparent; border: none;
  border-bottom: 1px solid transparent;
  color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem;
  padding: 2px 4px; outline: none; transition: border-color 0.2s;
}
.day-name-input:focus { border-bottom-color: var(--gold-dim); }
.day-ct { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--text-dim); white-space: nowrap; }
.day-del { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.68rem; transition: color 0.15s; flex-shrink: 0; padding: 2px 4px; }
.day-del:hover { color: #e87878; }
.add-day-btn {
  padding: 10px; background: transparent;
  border: 1.5px dashed var(--sage-border); border-radius: 10px;
  color: var(--text-dim); font-family: 'Space Grotesk', sans-serif; font-size: 0.86rem; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; text-align: center;
}
.add-day-btn:hover { border-color: var(--gold-dim); color: var(--gold); }

/* MAP */
#map {
  position: fixed;
  top: 58px; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: #1a2a3a;
  touch-action: none; /* prevent double-tap zoom on map; accessibility zoom still works on other elements */
}
/* Upload CTA overlay */
#map-upload-overlay {
  position: fixed; top: 58px; left: 0; right: 0; bottom: 0; z-index: 99400;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(6,14,28,0.55);
  display: flex; align-items: center; justify-content: center;
}
#map-upload-cta {
  position: relative;
  background: rgba(10,20,36,0.88);
  border: 1px solid var(--sage-18);
  border-radius: 18px;
  padding: 36px 40px 32px;
  max-width: 340px; width: calc(100% - 48px);
  text-align: center;
  box-shadow: 0 8px 48px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: fadeUp 0.35s ease forwards;
}
#map-upload-cta h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: rgba(255,255,255,0.92); margin: 0;
}
#map-upload-cta p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem; color: var(--sage-60);
  margin: 0; line-height: 1.55;
}
#map-upload-cta .splash-upload-btn {
  margin-top: 4px; padding: 10px 28px; font-size: 0.85rem;
}
#map-upload-overlay-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: var(--sage-35); padding: 4px;
  line-height: 1; border-radius: 6px;
  transition: color 0.15s;
}
#map-upload-overlay-close:hover { color: var(--sage-75); }
.leaflet-container {
  background: #1a2a3a !important;
}
/* Prevent tile seams */
.leaflet-tile {
  border: none !important;
  outline: none !important;
}
.leaflet-tile-container img {
  image-rendering: auto;
  border: none !important;
}
/* ── BASEMAP TOGGLE ── */
#basemap-toggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 9000;
}
/* Collapsed trigger button — always visible */
#bm-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: rgba(10,20,34,0.88);
  border: 1px solid var(--sage-20);
  border-radius: 9px;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  cursor: pointer;
  color: var(--sage-60);
  transition: color 0.15s, background 0.15s;
}
#bm-trigger:hover { color: #9bcbf3; background: rgba(10,20,34,0.96); }
#bm-trigger svg { pointer-events: none; }
/* Flyout panel — hidden by default */
#bm-panel {
  position: absolute; bottom: 40px; right: 0;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(10,20,34,0.94);
  border: 1px solid var(--sage-20);
  border-radius: 10px; padding: 4px;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transform: translateY(6px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#basemap-toggle.open #bm-panel {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.bm-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; border-radius: 7px;
  padding: 6px 10px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  color: var(--sage-55); letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; white-space: nowrap;
}
.bm-btn:hover { color: rgba(155,203,243,0.9); background: var(--sage-08); }
.bm-btn.active { color: #9bcbf3; background: var(--sage-14); }
/* Stats tab & cards */
.tab-btn-pro { color: rgba(242,201,76,0.7); }
.tab-btn-pro.active { color: #f2c94c; border-bottom-color: #f2c94c; }
.stat-card {
  background: rgba(155,203,243,0.05);
  border: 1px solid var(--sage-10);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card-wide { grid-column: span 2; }
.stat-val { font-family:'Space Grotesk',sans-serif; font-size:1.3rem; font-weight:800; color:rgba(255,255,255,0.9); }
.stat-lbl { font-family:'JetBrains Mono',monospace; font-size:0.52rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sage-40); }
.scard-stat { background:rgba(255,255,255,0.04); border-radius:8px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.scard-val { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:800; color:rgba(255,255,255,0.9); }
.scard-lbl { font-family:'JetBrains Mono',monospace; font-size:0.5rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage-40); }
.pro-gate-banner { display:flex; gap:14px; align-items:flex-start; background:rgba(242,201,76,0.07); border:1px solid rgba(242,201,76,0.2); border-radius:12px; padding:18px 16px; color:rgba(255,255,255,0.8); font-family:'Plus Jakarta Sans',sans-serif; font-size:0.85rem; font-weight:600; }

.bm-btn-pro { color: rgba(242,201,76,0.75); }
.bm-btn-pro:hover { color: #f2c94c !important; background: rgba(242,201,76,0.08) !important; }
.bm-btn-pro.active { color: #f2c94c; background: rgba(242,201,76,0.15); }
.bm-btn svg { flex-shrink: 0; }
@media (max-width: 600px) {
  #basemap-toggle { bottom: 16px; right: 16px; }
}

#map-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  pointer-events: none; z-index: 10;
  background: radial-gradient(ellipse at center, rgba(18,30,36,0.2) 0%, rgba(10,18,13,0.65) 100%);
}
#map-empty .em-sym { font-family: 'Space Grotesk', sans-serif; font-size: 3.5rem; opacity: 0.12; line-height: 1; }
#map-empty p { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; color: var(--text-dim); letter-spacing: 0.05em; }

/* GLASSMORPHISM LEAFLET */
.leaflet-popup-content-wrapper {
  background: rgba(10, 24, 44, 0.82) !important;
  backdrop-filter: blur(40px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.6) !important;
  border: 1px solid var(--sage-18) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.07) !important;
  color: var(--text) !important;
  overflow: hidden !important;
  position: relative !important;
  will-change: transform;
}
/* Shimmer top edge */
.leaflet-popup-content-wrapper::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage-50) 30%, rgba(200,230,255,0.75) 50%, var(--sage-50) 70%, transparent);
  background-size: 200% 100%;
  animation: shimmerEdge 8s ease-in-out infinite;
  z-index: 1;
}
/* Shimmer sweep across surface */
.leaflet-popup-content-wrapper::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.025) 48%, var(--sage-04) 52%, transparent 65%);
  animation: shimmerSweep 12s ease-in-out infinite 1s;
  z-index: 0;
}
.leaflet-popup-tip-container .leaflet-popup-tip { background: rgba(10,24,44,0.82) !important; }
.leaflet-popup-close-button {
  color: rgba(255,255,255,0.55) !important;
  font-size: 14px !important;
  top: 10px !important; right: 12px !important;
  width: 22px !important; height: 22px !important;
  line-height: 22px !important; text-align: center !important;
  background: rgba(0,0,0,0.35) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(4px) !important;
  z-index: 10 !important;
}
.leaflet-popup-close-button:hover { color: rgba(255,255,255,0.9) !important; background: rgba(0,0,0,0.55) !important; }
.leaflet-popup-content { margin: 12px 14px !important; min-width: 210px; max-width: 270px; }

.pop-name { color: #1a2a2e; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 600; color: var(--gold-bright); margin-bottom: 5px; line-height: 1.2; }
.pop-day { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.06em; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.pop-day-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.pop-coords { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--text-dim); line-height: 1.6; }
.pop-leg  { font-family:'DM Mono',monospace; font-size:0.62rem; color:var(--gold-dim); margin-top:4px; }
.pop-ts   { font-family:'DM Mono',monospace; font-size:0.6rem; color:var(--text-dim); margin-top:2px; }
.wp-place  {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-height: 1.1em;
  transition: opacity 0.35s ease;
  letter-spacing: 0.01em;
}
/* ── Unified skeleton shimmer ──────────────────────────────────────── */
.skeleton-shimmer {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.04) 80%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
/* Skeleton pulse while geocoding */
.wp-place.loading {
  width: 120px; height: 0.85em;
  background: linear-gradient(90deg, var(--sage-12) 25%, var(--sage-25) 50%, var(--sage-12) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  border-radius: 4px;
  color: transparent;
}
@keyframes skeletonPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Hide filename — location is the primary label */
.wp-title { display: none; }
.wp-meta   { display: flex; align-items: center; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.wp-region { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: var(--sage-50); min-height: 0.8em; }
.wp-ts     { font-family: 'JetBrains Mono', monospace; font-size: 0.56rem; color: var(--sage-50); display: inline; }
.wp-travel {
  display:inline-flex; align-items:center; gap:3px;
  font-family:'DM Mono',monospace; font-size:0.58rem;
  color:var(--sage-55);
  transform:translateX(0); transition:transform 0.2s ease, opacity 0.2s ease;
  opacity:0.7;
}
.wp-item:hover .wp-travel { transform:translateX(4px); opacity:1; }
.wp-travel-time { color:rgba(255,215,100,0.85); font-weight:600; }
.wp-travel-sep  { opacity:0.3; margin:0 2px; }
.wp-travel-dist { color:var(--sage-75); }
.pop-note { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; color: rgba(255,255,255,0.65); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sage-border); line-height: 1.55; }
.pop-edit {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  flex: 1; margin-top: 8px; padding: 6px 10px;
  background: rgba(155,203,243,0.07);
  border: 1px solid rgba(155,203,243,0.18);
  border-radius: 8px;
  color: rgba(155,203,243,0.8);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pop-edit:hover { background: rgba(155,203,243,0.14); border-color: rgba(155,203,243,0.35); color: rgba(155,203,243,1); }

.leaflet-control-zoom { border: 1px solid var(--glass-border) !important; border-radius: 8px !important; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important; }
.leaflet-control-zoom a { background: var(--bg-panel) !important; color: var(--text-mid) !important; border-bottom: 1px solid var(--sage-border) !important; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; }
.leaflet-control-zoom a:hover { background: var(--moss) !important; color: var(--gold) !important; }
.leaflet-control-attribution { background: rgba(18,30,36,0.55) !important; backdrop-filter: blur(10px); color: var(--text-faint) !important; font-size: 9px !important; }
.leaflet-control-attribution a { color: var(--text-dim) !important; }

/* SHARE MODAL */
#share-modal { display: none; position: fixed; inset: 0; background: rgba(26,42,46,0.60); backdrop-filter: blur(10px); z-index: 9000; align-items: center; justify-content: center; }
#share-modal.open { display: flex; }
.pw-toggle-row { margin-bottom: 14px; }
.pw-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.pw-toggle-label input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }
.pw-toggle-text { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-mid); }

/* Password gate overlay */
#pw-gate {
  position: fixed; inset: 0; z-index: 99200;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
}
#pw-gate.open { display: flex; }
.pw-gate-box {
  background: #0d1e2c;
  border: 1px solid var(--sage-20);
  border-radius: 16px;
  padding: 40px 36px;
  width: 380px; max-width: 92vw;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  position: relative; overflow: hidden;
}
.pw-gate-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.pw-gate-icon { margin-bottom: 16px; display: flex; justify-content: center; align-items: center; }
.pw-gate-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem; font-weight: 700;
  color: rgba(255,255,255,0.92); margin-bottom: 8px;
}
.pw-gate-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem; color: rgba(255,255,255,0.5);
  margin-bottom: 24px; line-height: 1.6;
}
.pw-gate-input {
  margin-bottom: 12px; text-align: center;
  font-size: 1rem; letter-spacing: 0.1em;
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--sage-30) !important;
  color: rgba(255,255,255,0.9) !important;
}
.pw-gate-input::placeholder { color: rgba(255,255,255,0.35) !important; }
.pw-gate-btn { width: 100%; padding: 12px; font-size: 0.9rem; }
.modal-box {
  background: var(--glass-bg2); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 30px; width: 540px; max-width: 95vw;
  box-shadow: 0 28px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; overflow-x: hidden; overflow-y: auto; max-height: 92vh;
}
#wp-note-modal .modal-box,
#map-note-modal .modal-box {
  background: rgba(8, 18, 34, 0.55);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border-color: var(--sage-22);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
.modal-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 300% 100%; animation: shimmerEdge 30s ease-in-out infinite; }
.modal-box::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; overflow: hidden; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.025) 48%, var(--sage-04) 52%, transparent 65%); animation: shimmerSweep 16s ease-in-out infinite; }
.modal-box h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.modal-sub { font-family: 'Space Grotesk', sans-serif; font-size: 0.86rem; color: var(--text-dim); margin-bottom: 18px; line-height: 1.65; }
#share-url { background: var(--bg-subtle); border: 1px solid var(--sage-border); border-radius: 8px; padding: 11px 13px; width: 100%; color: var(--text); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; word-break: break-all; resize: none; height: 78px; outline: none; line-height: 1.7; margin-bottom: 14px; }
.modal-acts { display: flex; gap: 8px; justify-content: flex-end; }
.mbtn { padding: 9px 20px; border-radius: 7px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 0.8rem; cursor: pointer; border: none; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.mbtn.p { background: linear-gradient(135deg, var(--gold-dim), var(--gold)); color: #0d0d0d; font-weight:700; position: relative; overflow: hidden; }
.mbtn.p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); animation: shimmerSweep 9s ease-in-out infinite 2s; border-radius: inherit; pointer-events: none; }
.mbtn.p:hover { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); box-shadow: 0 4px 16px var(--sage-30); }
.mbtn.s { background: transparent; color: var(--text-dim); border: 1px solid var(--sage-border); }
.mbtn.s:hover { border-color: var(--text-dim); color: var(--text); }

@media (max-width: 600px) {
  .modal-box {
    width: 100vw; max-width: 100vw;
    border-radius: 20px 20px 0 0;
    padding: 24px 18px;
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 88vh;
  }
  #share-modal { align-items: flex-end; }
  .modal-acts { flex-direction: column; }
  .modal-acts .mbtn { width: 100%; text-align: center; }
}

/* EDIT POPUP */
#edit-popup {
  display: none; position: fixed; inset: 0; z-index: 8000;
  align-items: center; justify-content: center;
  background: rgba(5,12,20,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
#edit-popup-inner {
  background: var(--glass-bg2); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 20px; width: 340px; max-width: calc(100vw - 32px);
  box-shadow: 0 20px 52px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden; position: relative;
}
#edit-popup.open { display: flex; }
#edit-popup-inner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }
#edit-popup-inner h3 { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; font-weight: 600; color: var(--gold-bright); margin-bottom: 11px; }
#edit-name, #edit-note, #edit-day-sel {
  width: 100%; background: rgba(18,30,36,0.5);
  border: 1px solid var(--sage-border); border-radius: 6px;
  color: var(--text); padding: 8px 10px; outline: none; margin-bottom: 8px;
  transition: border-color 0.2s;
}
#edit-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; }
#edit-name:focus, #edit-note:focus, #edit-day-sel:focus { border-color: var(--gold-dim); }
#edit-note { font-family: 'Space Grotesk', sans-serif; font-size: 0.86rem; resize: vertical; min-height: 62px; }
#edit-day-sel { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; }
#edit-day-sel option { background: var(--forest); }
.edit-acts { display: flex; gap: 6px; }
.esave { flex: 1; padding: 8px; background: linear-gradient(135deg, var(--gold-dim), var(--gold)); color: var(--forest-deep); border: none; border-radius: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.76rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; }
.esave:hover { background: linear-gradient(135deg, var(--gold), var(--gold-bright)); }
.ecancel { padding: 8px 12px; background: transparent; color: var(--text-dim); border: 1px solid var(--sage-border); border-radius: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.76rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; }
.ecancel:hover { border-color: var(--text-dim); color: var(--text); }

/* STAY TAB */
.stay-type-checks {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
}
.stay-check-label {
  display: flex; align-items: center; gap: 6px;
  background: var(--sage-06); border: 1px solid var(--sage-20);
  border-radius: 6px; padding: 6px 10px; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem;
  color: var(--text-dim); transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; user-select: none;
  flex: 1; min-width: 80px;
}
.stay-check-label input[type=checkbox] { display: none; }
/* Hotels — sky blue */
.stay-check-label:has(#stay-hotels:checked),
.stay-check-label:has(#pl-hotels:checked) {
  border-color: #9bcbf3; background: var(--sage-12); color: #9bcbf3;
}
.stay-check-label:has(#stay-hotels:checked) svg,
.stay-check-label:has(#pl-hotels:checked) svg { stroke: #9bcbf3; }
/* Airbnb/guesthouses — red */
.stay-check-label:has(#stay-airbnb:checked),
.stay-check-label:has(#pl-rentals:checked) {
  border-color: #f2705a; background: rgba(242,112,90,0.12); color: #f2705a;
}
.stay-check-label:has(#stay-airbnb:checked) svg,
.stay-check-label:has(#pl-rentals:checked) svg { stroke: #f2705a; }
/* Campsites — green */
.stay-check-label:has(#stay-camping:checked),
.stay-check-label:has(#pl-camping:checked) {
  border-color: #a8e878; background: rgba(168,232,120,0.12); color: #a8e878;
}
.stay-check-label:has(#stay-camping:checked) svg,
.stay-check-label:has(#pl-camping:checked) svg { stroke: #a8e878; }
.stay-check-icon { font-size: 1rem; display: flex; align-items: center; }

/* Price slider */
.price-slider-wrap { position: relative; padding-bottom: 18px; }
.price-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) var(--pct, 49%), var(--sage-border) var(--pct, 49%), var(--sage-border) 100%);
}
.price-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--gold); cursor: pointer;
  border: 2px solid var(--forest-deep);
  box-shadow: 0 0 8px rgba(255,107,91,0.4);
}
.price-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); cursor: pointer; border: 2px solid var(--forest-deep);
}
.price-slider-labels {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 0.55rem;
  color: var(--text-faint); margin-top: 6px;
}

.stay-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--sage-15);
  cursor: pointer; transition: background 0.15s;
}
.stay-item:hover { background: var(--bg-subtle); }
.stay-icon { flex-shrink: 0; display: flex; align-items: center; }
.stay-body { flex: 1; min-width: 0; }
.stay-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stay-stars { color: #f0c060; font-size: 0.7rem; margin-top: 1px; letter-spacing: -1px; }
.stay-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--text-dim); margin-top: 2px; }
.stay-price-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #9bcbf3; margin-top: 2px; }
.stay-dist { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--gold-dim); flex-shrink: 0; margin-top: 3px; }
.stay-empty { padding: 24px 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; color: var(--text-dim); text-align: center; line-height: 1.6; }

/* BOOKED STAYS in route tab */
.lodging-section { border-top: 1px solid var(--sage-15); margin-top: 6px; }
.lodging-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim);
}
.lodging-cost-badge {
  background: rgba(159,217,218,0.15); color: #9bcbf3;
  border: 1px solid var(--sage-25);
  border-radius: 10px; padding: 2px 8px;
  font-size: 0.62rem; font-weight: 600;
}
.booked-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 14px; border-bottom: 1px solid var(--sage-12);
  position: relative;
}
.booked-body { flex: 1; min-width: 0; }
.booked-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.booked-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--text-dim); margin-top: 2px; }
.booked-cost { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: #9bcbf3; flex-shrink: 0; margin-top: 2px; }
.booked-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.7rem; padding: 2px 4px; opacity: 0; transition: opacity 0.15s; flex-shrink: 0; }
.booked-item:hover .booked-remove { opacity: 1; }
.booked-remove:hover { color: #e87878; }

/* Trip cost summary bar */
#trip-cost-bar {
  display: none; flex-shrink: 0;
  background: var(--bg-subtle);
  border-top: 1px solid rgba(61,122,138,0.25);
  padding: 10px 14px; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
}
.cost-bar-inner { display: flex; align-items: center; justify-content: space-between; }
.cost-bar-label { font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.cost-bar-amount { font-size: 1rem; font-weight: 700; color: #9bcbf3; font-family: 'Space Grotesk', sans-serif; }
.cost-bar-breakdown { font-size: 0.58rem; color: var(--text-faint); margin-top: 2px; }

/* TOAST */
#toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(calc(-50% + var(--sidebar-w) / 2)) translateY(60px);
  max-width: min(380px, calc(100vw - 120px));
  background: linear-gradient(160deg, rgba(6,16,34,0.82) 0%, rgba(4,12,28,0.92) 100%);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
  border: 1px solid var(--sage-18);
  border-top-color: rgba(200,230,255,0.32);
  color: rgba(255,255,255,0.92);
  padding: 11px 20px; border-radius: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.04em;
  z-index: 99999; transform: translateX(calc(-50% + var(--sidebar-w) / 2)) translateY(60px); opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1), opacity 0.32s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.32s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:
    0 2px 0 rgba(255,255,255,0.06) inset,
    0 -1px 0 rgba(0,0,0,0.4) inset,
    0 12px 40px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.25);
  overflow: hidden;
}
/* top-edge highlight line */
#toast::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sage-35) 20%,
    rgba(220,240,255,0.75) 50%,
    var(--sage-35) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmerEdge 5s ease-in-out infinite;
}
/* diagonal shimmer sweep across the face */
#toast::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(180,220,255,0.07) 45%,
    rgba(220,240,255,0.13) 50%,
    rgba(180,220,255,0.07) 55%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: toastShimmerSweep 3.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes toastShimmerSweep {
  0%   { background-position: 200% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: -80% 0; opacity: 0; }
}
#toast { transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, bottom 0.2s ease; }
#toast.show { transform: translateX(calc(-50% + var(--sidebar-w) / 2)) translateY(0); opacity: 1; }

body.viewer #drop-zone,
body.viewer #journey-mode-toggle,
body.viewer #journey-type-disclosure,
body.viewer #route-share-cta,
body.viewer #route-upload-cta,
body.viewer #upload-progress-bar,
body.viewer #upload-progress-label,
body.viewer #clear-empty-btn,
body.viewer #route-action-row,
body.viewer #acc-add-stop,
body.viewer #acc-days { display: none !important; }
#user-rail-bar.guest { cursor: default; }
#user-rail-bar.guest .user-rail-arrow { display: none; }

/* Watermark: show in viewer mode, hide for pro owner */
body.viewer #roameyo-watermark { display: flex !important; }
body.viewer.user-is-pro #roameyo-watermark { display: none !important; }
body.viewer #share-btn,
body.viewer #theme-toggle,
body.viewer .tab-btn[data-tab="add"],
body.viewer .tab-btn[data-tab="days"],
body.viewer .wp-del { display: none !important; }
body.viewer .ham-edit-only { display: none !important; }
body.is-collaborator .ham-owner-only { display: none !important; }
body.viewer.no-photos .tab-btn[data-tab="gallery"],


/* ── HAMBURGER MENU (mobile) ── */
#hamburger-btn {
  display: flex;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 38px; height: 38px;
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px; cursor: pointer; flex-shrink: 0;
  transition: background 0.15s;
  position: relative;
}
#hamburger-btn:hover { background: rgba(255,255,255,0.1); }
#hamburger-btn.open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger-btn.open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#hamburger-btn.open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ham-line {
  width: 18px; height: 2px;
  background: rgba(255,255,255,0.85); border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.15s ease;
  display: block;
}
#ham-unread-dot {
  display: none;
  position: absolute; top: 5px; right: 5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e05454;
  border: 1.5px solid rgba(8,18,32,0.95);
  box-shadow: 0 0 5px rgba(224,84,84,0.7);
  pointer-events: none;
}
/* Ham people panel — name hidden until row hover */
.ham-person-name {
  flex: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  max-width: 0;
  transition: opacity 0.18s, max-width 0.2s;
}
.ham-person-row:hover .ham-person-name {
  opacity: 1;
  max-width: 140px;
}
#hamburger-menu {
  display: none;
  position: fixed; top: 54px; right: 0;
  width: 252px;
  background: rgba(8,18,32,0.98);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid var(--sage-12);
  border-top: none;
  border-radius: 0 0 0 16px;
  box-shadow: -8px 16px 48px rgba(0,0,0,0.55), -2px 0 0 var(--sage-06);
  z-index: 9600;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  padding-bottom: 6px;
  animation: hamDrop 0.18s cubic-bezier(0.22,1,0.36,1);
}
#hamburger-menu.open { display: block; }
@keyframes hamDrop {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Section labels */
.ham-section-label {
  padding: 12px 16px 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem; font-weight: 700;
  color: rgba(155,203,243,0.32);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ham-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 16px;
  background: transparent; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.84rem; font-weight: 600;
  color: rgba(255,255,255,0.78); cursor: pointer;
  transition: background 0.12s, color 0.12s, padding-left 0.12s;
  text-align: left;
  border-radius: 0;
}
.ham-item:active { background: var(--sage-12); }
.ham-item:hover  { background: var(--sage-07); color: #fff; padding-left: 20px; }
.ham-item-danger { color: rgba(242,140,124,0.75); }
.ham-item-danger:hover { background: rgba(242,112,90,0.09); color: #f2a090; padding-left: 20px; }
.ham-item svg { flex-shrink: 0; opacity: 0.6; }
.ham-item:hover svg { opacity: 0.9; }
.ham-item-pro svg { opacity: 0.85; }
.ham-item-pro { color: rgba(242,201,76,0.88); }
.ham-item-pro:hover { background: rgba(242,201,76,0.07); color: #f2c94c; }
/* Divider between sections */
.ham-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage-12) 20%, var(--sage-12) 80%, transparent);
  margin: 6px 0;
}

/* Show hamburger on mobile/tablet, hide desktop buttons */
@media (max-width: 1090px) {
  #clear-btn, #share-btn, #save-btn { display: none !important; }
  /* hamburger always visible */
  #trip-name-input { width: 130px; font-size: 0.9rem; }
  .name-wrap { padding-left: 10px; }
  #video-export-topbtn { display: none !important; }

  /* Stack logo text vertically to recover topbar width */
  .bw-wrap {
    display: flex;
    flex-direction: column;
    font-size: 0.72rem;
    line-height: 1.1;
    gap: 0;
  }
  #logo-horiz { width: min(40vw, 124px); height: auto; max-height: 28px; object-fit: contain; }
  .brand { gap: 20px; }
  .name-wrap { border-left: 1px solid var(--sage-30); padding-left: 8px; }
  #trip-name-input { width: 100px; font-size: 0.82rem; }
  #topbar { gap: 4px; padding: 0 8px 0 12px; }
}

/* On phones: pull the journey name out of the flex flow and pin it dead-centre */
@media (max-width: 600px) {
  #topbar { position: fixed; } /* ensure containing block for absolute child */
  .name-wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-left: none;
    padding-left: 0;
    margin-left: 0;
    max-width: 44vw; /* don't overlap the hamburger or logo */
    pointer-events: auto;
  }
  #trip-name-input {
    width: 100%;
    max-width: 160px;
    font-size: 0.82rem;
    text-align: center;
  }
  #trip-byline {
    text-align: center;
    padding-left: 0;
    justify-content: center;
  }
}

/* ── HORIZONTAL LOGO (topbar) ── */
#logo-horiz { overflow: visible; }
.logo-thread-text { fill: var(--text); }

/* ── SPLASH LOGO (vertical) ── */
#splash-logo-svg { overflow: visible; }

/* Heart-road reveal animation */
@keyframes heartFill {
  from { opacity: 0; }
  to   { opacity: 0.9; }
}
@keyframes dashDraw {
  from { stroke-dashoffset: 300; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes roadDashReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.logo-heart-road   { animation: heartFill 0.5s ease 0.2s forwards; }
.logo-heart-stitch { animation: dashDraw 1.2s ease-out 0.4s forwards; }
.logo-road-dashes  { animation: roadDashReveal 0.4s ease 1.4s forwards; }
.logo-pin-group    { animation: pinDropIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 1.2s both; }
.pin-shadow        { animation: shadowPop 0.55s cubic-bezier(0.34,1.56,0.64,1) 1.2s both; }

/* Splash wordmark */
.splash-wordmark {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 3.0rem; line-height: 1;
  letter-spacing: -0.03em; margin-top: 14px;
  opacity: 0; animation: fadeUp 0.5s ease 1.7s forwards;
}
.splash-word-travel { color: #1a4a6e; }
.splash-word-thread { color: #0d1e2e; }
.splash-domain {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; color: rgba(15,40,60,0.5);
  letter-spacing: 0.14em; margin-top: 6px;
  opacity: 0; animation: fadeUp 0.5s ease 1.95s forwards;
}

/* Dark mode surface overrides */

/* Logo modes */
#logo-horiz, #splash-logo-svg { filter: none; }

/* Pro user — full golden logo via SVG filter */
.logo-wrap-pro::after { display: none !important; }
.logo-pro-badge { display: none !important; }

/* Apply the gold SVG filter — brightness(0) flattens white to black silhouette first */
body.user-is-pro #logo-horiz {
  filter: brightness(0) url(#pro-gold-filter-def);
  -webkit-filter: brightness(0) url(#pro-gold-filter-def);
  transition: filter 0.6s ease;
}

/* Fallback for browsers that don't support SVG filter references */
@supports not (filter: url(#x)) {
  body.user-is-pro #logo-horiz {
    filter: brightness(0) sepia(1) saturate(4) hue-rotate(5deg) brightness(1.1);
  }
}

/* Glow pulse — alternates drop-shadow intensity */
@keyframes goldGlow {
  0%, 100% {
    filter: brightness(0) url(#pro-gold-filter-def)
            drop-shadow(0 0 4px rgba(242,185,30,0.5))
            drop-shadow(0 0 10px rgba(200,134,10,0.28));
  }
  50% {
    filter: brightness(0) url(#pro-gold-filter-def)
            drop-shadow(0 0 7px rgba(255,215,50,0.72))
            drop-shadow(0 0 18px rgba(242,185,30,0.42));
  }
}
body.user-is-pro #logo-horiz {
  animation: goldGlow 3.5s ease-in-out infinite;
}

/* Shimmer sweep on wrapper — light band passes left→right */
@keyframes goldShimmerSweep {
  0%   { left: -60%; opacity: 0; }
  5%   { opacity: 1; }
  35%  { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}
body.user-is-pro .logo-wrap-pro {
  position: relative;
  overflow: visible; /* don't clip the logo */
}
body.user-is-pro .logo-wrap-pro::before {
  content: '';
  position: absolute;
  top: -10px; bottom: -10px;
  left: -60%;
  width: 45%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,200,0.55) 45%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,200,0.55) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  animation: goldShimmerSweep 4.5s ease-in-out infinite;
  animation-delay: 1.5s;
  transform: skewX(-15deg);
}

/* ── END pro logo ── */

/* Pro share button — gold instead of blue */
body.user-is-pro #share-btn {
  background: linear-gradient(135deg, #c9930a 0%, #f2c94c 45%, #f5d97a 100%);
  border-color: transparent;
  color: #1a0f00;
  box-shadow: 0 2px 10px rgba(242,201,76,0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}
body.user-is-pro #share-btn:hover {
  background: linear-gradient(135deg, #d9a020 0%, #f5d460 45%, #f8e490 100%);
  box-shadow: 0 4px 18px rgba(242,201,76,0.6), inset 0 1px 0 rgba(255,255,255,0.45);
  transform: translateY(-1px);
}
body.user-is-pro #share-btn::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  animation: shimmerSweep 5s ease-in-out infinite 0.5s;
}

/* Ham menu: gold Share Journey for pro users */
body.user-is-pro #ham-share-btn {
  color: #f2c94c;
  background: linear-gradient(135deg, rgba(201,147,10,0.18) 0%, rgba(242,201,76,0.10) 100%);
  border-left: 2px solid rgba(242,201,76,0.5);
  font-weight: 700;
}
body.user-is-pro #ham-share-btn:hover {
  background: linear-gradient(135deg, rgba(201,147,10,0.28) 0%, rgba(242,201,76,0.16) 100%);
  color: #f5d97a;
}
body.user-is-pro #ham-share-btn svg { opacity: 0.9; color: #f2c94c; }

/* Clean up old wordmark styles */
.brand-wordmark { display: none; }

/* Sidebar stop thumbnail */
.wp-thumb {
  width: 38px; height: 38px; border-radius: 7px;
  object-fit: cover; flex-shrink: 0;
  border: 1.5px solid rgba(61,122,138,0.4);
  cursor: zoom-in;
  margin-right: 2px; align-self: center;
  /* Slide-out animation support */
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1),
              height 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity 0.22s ease,
              margin 0.28s cubic-bezier(0.4,0,0.2,1),
              transform 0.15s ease,
              border-color 0.15s;
}
.wp-thumb.photos-hidden {
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
}
.wp-thumb:hover {
  border-color: var(--gold); transform: scale(1.08);
  box-shadow: 0 0 10px rgba(255,107,91,0.4);
}

/* Lightbox */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 99500;
  background: rgba(8, 16, 28, 0.88);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  align-items: center; justify-content: center;
  cursor: zoom-out;
}
#lightbox.open { display: flex; }
#lightbox-img {
  max-width: 90vw; max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px var(--sage-12);
  object-fit: contain;
  animation: lbFadeIn 0.22s ease;
}
@keyframes lbFadeIn {
  from { opacity:0; transform:scale(0.93); }
  to   { opacity:1; transform:scale(1); }
}
#lightbox-close {
  position: fixed; top: 20px; right: 24px;
  background: rgba(10,24,44,0.72); border: 1px solid var(--sage-20);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,0.55); font-size: 1.1rem; width: 36px; height: 36px;
  border-radius: 50%; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
#lightbox-close:hover { background: rgba(232,120,120,0.2); color: #e87878; border-color:#e87878; }

/* ── PIN ANIMATIONS ── */
@keyframes pinDropIn {
  0%   { transform: translateY(-60px) scale(0.4); opacity: 0; }
  60%  { transform: translateY(6px) scale(1.15); opacity: 1; }
  80%  { transform: translateY(-4px) scale(0.95); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes pinPopOut {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.3) translateY(-4px); opacity: 0.8; }
  100% { transform: scale(0) translateY(-20px); opacity: 0; }
}

/* ── MAP PERFORMANCE — GPU compositing hints ──────────────────────────────── */
.leaflet-marker-pane,
.leaflet-shadow-pane { will-change: transform; }
.leaflet-zoom-anim .leaflet-zoom-animated {
  will-change: transform;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.leaflet-tile { will-change: opacity; }
.leaflet-overlay-pane svg path { vector-effect: non-scaling-stroke; }

.leaflet-marker-icon { overflow: visible !important; }
@keyframes pinWiggle {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-10deg); }
  50%      { transform: rotate(8deg); }
  75%      { transform: rotate(-5deg); }
}
.pin-drop-in  { animation: pinDropIn  0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.pin-pop-out  { animation: pinPopOut  0.28s ease-in forwards; }
.pin-wiggle   { animation: pinWiggle  0.45s ease-in-out; transform-origin: bottom center; }

/* ── SPLASH ANIMATIONS ── */
@keyframes pinDrop {
  0%   { transform: translateY(-140px) rotate(-10deg); opacity: 0; }
  55%  { transform: translateY(14px) rotate(4deg); opacity: 1; }
  72%  { transform: translateY(-8px) rotate(-2deg); }
  88%  { transform: translateY(5px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes threadDraw {
  from { stroke-dashoffset: 220; opacity: 0; }
  to   { stroke-dashoffset: 0;   opacity: 1; }
}
@keyframes shadowPop {
  0%   { transform: scaleX(0.1); opacity: 0; }
  60%  { transform: scaleX(1.3); opacity: 0.4; }
  100% { transform: scaleX(1);   opacity: 0.22; }
}
@keyframes logoFadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pinGlow {
  0%, 100% { filter: drop-shadow(0 0 8px var(--sage-60)); }
  50%       { filter: drop-shadow(0 0 22px rgba(155,203,243,0.95)) drop-shadow(0 0 38px var(--sage-30)); }
}
.splash-pin-svg {
  animation: pinDrop 0.85s cubic-bezier(0.34,1.56,0.64,1) 0.25s both,
             pinGlow 2.8s 1.1s ease-in-out infinite;
}
.thread-path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: threadDraw 0.9s ease-out 1.05s forwards;
}
.pin-shadow { animation: shadowPop 0.85s cubic-bezier(0.34,1.56,0.64,1) 0.25s both; }

/* ── SPLASH SCREEN ── */
#splash {
  position: fixed; inset: 0; z-index: 99000;
  background: transparent;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px 24px;
  transition: opacity 0.6s ease;
}
/* Full-screen black backdrop behind splash — hides map while video loads */
#splash-backdrop {
  position: fixed; inset: 0; z-index: 98999;
  background: #000;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
#splash-backdrop.hiding { opacity: 0; }
#splash-backdrop.hidden { display: none !important; }
/* Video background behind splash */
#splash-video-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000; /* fills gap between videos */
}
#splash-video-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}
/* Slow-connection fallback: animated gradient instead of video */
#splash-video-bg.no-video {
  background: linear-gradient(135deg, #080f1a 0%, #0a1828 30%, #0d2240 60%, #091628 100%);
  background-size: 400% 400%;
  animation: splashGradientDrift 12s ease infinite;
}
#splash-video-bg.no-video video { display: none; }
@keyframes splashGradientDrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Dark + blur overlay on top of video, below content */
#splash-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(8, 16, 26, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* All splash content sits above overlay */
#splash > *:not(#splash-video-bg):not(#splash-overlay):not(#splash-user-bar) {
  position: relative; z-index: 2;
}
#splash::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse 70% 50% at 50% 40%, var(--sage-06) 0%, transparent 70%);
  pointer-events: none;
}
#splash.hiding { opacity: 0; pointer-events: none; }
#splash.hidden { display: none !important; }
.splash-logo-wrap {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 12px;
}
.splash-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem; color: rgba(220,235,248,0.9);
  margin-bottom: 24px; text-align: center; line-height: 1.6;
  max-width: 480px;
  opacity: 0; animation: fadeUp 0.5s 0.3s forwards;
}
.splash-actions {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.5s 0.5s forwards;
}
.splash-actions .splash-demo-link {
  flex-basis: 100%;
  text-align: center;
  justify-content: center;
  margin-top: 4px;
}
#splash-state-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  animation: fadeUp 0.3s 0.2s forwards;
}
.splash-loading-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.splash-loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage-50);
  animation: splashDotPulse 1.2s ease-in-out infinite;
}
.splash-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.splash-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes splashDotPulse {
  0%, 80%, 100% { transform: scale(0.7); opacity: 0.3; }
  40%           { transform: scale(1);   opacity: 1; }
}
.splash-upload-btn {
  padding: 11px 26px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem; font-weight: 700; cursor: pointer;
  letter-spacing: 0.01em;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.08) inset;
  position: relative; overflow: hidden;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
/* Shine on button */
.splash-upload-btn::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.3) 50%, transparent 80%);
  animation: btnShine 4s 2.2s infinite;
  pointer-events: none;
}
@keyframes btnShine {
  0%   { left: -80%; }
  30%  { left: 140%; }
  100% { left: 140%; }
}
.splash-upload-btn--secondary::after {
  animation-delay: 5.7s;
}
/* Stagger modal primary buttons so shines don't fire simultaneously */
.modal-acts .mbtn.p:nth-child(1)::after { animation-delay: 2s; }
.modal-acts .mbtn.p:nth-child(2)::after { animation-delay: 6.5s; }
.modal-acts .mbtn.p:nth-child(3)::after { animation-delay: 11s; }
/* Share / top-bar buttons get their own offsets */
#share-btn::after         { animation-delay: 3s !important; }
#share-action-btn::after  { animation-delay: 7.5s; }
#map-note-save-btn::after { animation-delay: 4.2s; }
.splash-upload-btn:hover {
  background: rgba(0,0,0,0.72);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.splash-upload-btn--secondary {
  background: rgba(0,0,0,0.32) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.65) !important;
  box-shadow: none !important;
}
#splash-demo-btn:hover,
.splash-demo-link:hover {
  color: #9bcbf3 !important;
  text-decoration-color: var(--sage-50) !important;
}
.splash-demo-link {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--sage-60);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--sage-25);
  transition: color 0.2s, text-decoration-color 0.2s;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
  flex-shrink: 0;
}
.splash-upload-btn--secondary:hover {
  background: rgba(0,0,0,0.52) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.9) !important;
  transform: translateY(-1px);
}
.splash-skip {
  background: none; border: none;
  color: var(--sage-75);
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  cursor: pointer; letter-spacing: 0.06em;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s;
}
.splash-skip:hover { color: #9bcbf3; }

/* Disclaimer */
.splash-disclaimer {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 420px; width: calc(100% - 48px); margin-top: 28px;
  background: rgba(8,18,30,0.7);
  border: 1px solid var(--sage-20);
  border-radius: 10px; padding: 12px 14px;
  backdrop-filter: blur(8px);
  opacity: 0; animation: fadeUp 0.6s 0.7s forwards;
}
.splash-disclaimer-icon {
  font-size: 0.9rem; flex-shrink: 0; margin-top: 1px;
  color: var(--sage-70);
}
.splash-disclaimer p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem; line-height: 1.65;
  color: rgba(200,220,238,0.85); margin: 0;
}
.splash-disclaimer strong {
  color: #9bcbf3; font-weight: 600;
}

/* Splash user bar — top-right desktop, top-center mobile */
#splash-user-bar {
  position: absolute; top: 18px; right: 20px; z-index: 3;
  display: none; /* shown only in upload state via JS */
  align-items: center; gap: 10px;
}
#splash-user-bar span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; color: var(--sage-70);
  letter-spacing: 0.04em;
}
#splash-user-bar button {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; color: rgba(255,255,255,0.5);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
  backdrop-filter: blur(8px);
}
#splash-user-bar button:hover {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.3);
}
@media (max-width: 540px) {
  #splash-user-bar {
    right: unset; left: 0; right: 0;
    justify-content: center; top: 14px;
  }
}

#splash-auth-panel {
  position: relative; z-index: 2;
  width: min(360px, calc(100vw - 40px));
  background: rgba(8, 16, 26, 0.72);
  border: 1px solid var(--sage-18);
  border-radius: 16px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  padding: 24px 24px 20px;
  animation: fadeUp 0.3s ease both;
}
.sap-screen { display: block; }
.sap-back {
  background: none; border: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  color: var(--sage-55); letter-spacing: 0.04em;
  padding: 0; margin-bottom: 16px; transition: color 0.15s;
}
.sap-back:hover { color: #9bcbf3; }
.sap-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem;
  font-weight: 700; color: #fff; margin: 0 0 16px;
}
.sap-hint {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem;
  color: rgba(200,220,238,0.7); line-height: 1.6; margin: 0 0 14px;
}
.sap-error {
  display: none; margin-bottom: 12px;
  background: rgba(232,120,120,0.15); border: 1px solid rgba(232,120,120,0.3);
  border-radius: 6px; padding: 8px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #e87878;
}
.sap-field { margin-bottom: 12px; }
.sap-label {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; color: var(--sage-60);
  letter-spacing: 0.05em; margin-bottom: 5px;
}
.sap-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.06); border: 1px solid var(--sage-20);
  border-radius: 8px; padding: 9px 11px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.85rem; color: #fff;
  outline: none; transition: border-color 0.15s;
}
.sap-input:focus { border-color: var(--sage-50); }
.sap-input::placeholder { color: rgba(255,255,255,0.28); }
.sap-btn {
  width: 100%; padding: 11px; margin-top: 4px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 700;
  color: rgba(255,255,255,0.92); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.sap-btn:hover { background: rgba(0,0,0,0.72); border-color: rgba(255,255,255,0.28); }
.sap-btn:disabled { opacity: 0.5; cursor: default; }
.sap-link {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  color: var(--sage-55); text-align: center;
  letter-spacing: 0.03em; transition: color 0.15s;
}
.sap-link:hover { color: #9bcbf3; }

/* ── EDIT MODE BADGE ── */
#edit-mode-badge {
  display: none; align-items: center; gap: 6px;
  background: var(--sage-12);
  border: 1px solid var(--sage-25);
  border-radius: 6px; padding: 3px 10px 3px 8px;
  flex-shrink: 0;
}
.edit-badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #9bcbf3;
  box-shadow: 0 0 6px rgba(155,203,243,0.8);
  animation: editPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes editPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(155,203,243,0.8); }
  50%       { opacity: 0.5; box-shadow: 0 0 2px var(--sage-30); }
}
@keyframes staySpin {
  to { transform: rotate(360deg); }
}
@keyframes jlPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  60%  { transform: scale(0.88); }
  80%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes jlEntrance {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes notifDotPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(242,112,90,0.6); opacity: 1; }
  50%       { box-shadow: 0 0 9px rgba(242,112,90,1);   opacity: 0.75; }
}
@keyframes notifBarIn {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 60px; }
}
.edit-badge-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; color: rgba(155,203,243,0.85);
  letter-spacing: 0.06em; text-transform: uppercase;
}
body.editing #edit-mode-badge { display: flex; }
@media (max-width: 600px) { #edit-mode-badge { display: none !important; } }

/* Journey like button in topbar */
#journey-like-btn {
  display: none; align-items: center; gap: 4px;
  background: transparent; border: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px;
  transition: background 0.18s;
  flex-shrink: 0; height: 32px; box-sizing: border-box;
}
#journey-like-btn.jl-entering {
  animation: jlEntrance 0.35s cubic-bezier(0.34,1.4,0.64,1) both;
}
#journey-like-btn:hover { background: rgba(242,112,90,0.12); }
#journey-like-btn:active { transform: scale(0.92); }
#journey-like-btn .jl-heart {
  fill: none; stroke: rgba(255,255,255,0.45);
  transition: fill 0.22s ease, stroke 0.22s ease;
  transform-origin: center;
}
#journey-like-btn.liked .jl-heart {
  fill: #f2705a; stroke: #f2705a;
}
#journey-like-btn.jl-popping .jl-heart {
  animation: jlPop 0.45s cubic-bezier(0.34,1.4,0.64,1) both;
}
#journey-like-btn .jl-count {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  color: rgba(255,255,255,0.5); min-width: 12px;
  transition: color 0.22s ease;
}
#journey-like-btn.liked .jl-count { color: #f2705a; }

/* Notification dot on account tab */
#account-notif-dot {
  position: absolute; top: 6px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #f2705a;
  box-shadow: 0 0 5px rgba(242,112,90,0.7);
  display: none;
  animation: notifDotPulse 2s ease-in-out infinite;
}

/* Notification summary in account panel */
#acc-notif-bar {
  display: none; margin: 8px 14px 0;
  background: rgba(242,112,90,0.08); border: 1px solid rgba(242,112,90,0.25);
  border-radius: 8px; padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  color: rgba(242,160,120,0.9); line-height: 1.5;
  align-items: center; gap: 8px;
  overflow: hidden;
}
#acc-notif-bar.notif-visible {
  animation: notifBarIn 0.3s ease both;
}
/* Allow pulse rings and shimmer to overflow Leaflet marker containers */
.leaflet-marker-icon { overflow: visible !important; }
.leaflet-div-icon { overflow: visible !important; background: none; border: none; }

/* Spider legs — shown when co-located pins are spiderfied at max zoom */
.leaflet-cluster-spider-leg {
  stroke: rgba(155, 203, 243, 0.75) !important;
  stroke-width: 1.5px !important;
}

/* User status badges — crown (pro) and dot (free) */
.user-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; vertical-align: middle;
}
/* crownShimmer keyframe on crown-wrap handles pro glow — no separate filter needed */
.user-badge.free circle { fill: #4caf82; }

/* Email verification code inputs */
#acc-verify-code, #sap-verify-code {
  transition: border-color 0.2s, box-shadow 0.2s;
}
#acc-verify-code:focus, #sap-verify-code:focus {
  border-color: var(--sage-70) !important;
  box-shadow: 0 0 0 3px var(--sage-10);
}
@keyframes verifyShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.verify-shake { animation: verifyShake 0.35s ease; }

/* editing indicator removed — topbar stays consistent */

/* Hide all UI when splash is active */
body.splash-open #topbar,
body.splash-open #sidebar,
body.splash-open #sidebar-toggle,
body.splash-open #page-drop-overlay,


.no-exif-box {
  max-width: 460px; width: 92vw;
  text-align: center;
}
@media (max-width: 600px) {
  .no-exif-box { width: calc(100vw - 24px); max-width: none; }
}
.no-exif-icon {
  font-size: 2.8rem; margin-bottom: 12px;
}
.no-exif-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem; font-weight: 700;
  color: var(--text); margin-bottom: 10px;
}
.no-exif-body {
  touch-action: manipulation;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem; color: var(--text-dim);
  line-height: 1.7; margin-bottom: 20px;
}
.no-exif-options {
  display: flex; flex-direction: column; gap: 12px;
  text-align: left; margin-bottom: 4px;
}
.no-exif-option {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}
.no-exif-option-icon {
  font-size: 1.4rem; flex-shrink: 0; margin-top: 1px;
}
.no-exif-option-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.no-exif-option-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem; color: var(--text-dim); line-height: 1.5;
}
.no-exif-option-desc strong { color: var(--text-mid); font-weight: 600; }
.no-exif-toggle-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 14px;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 600;
  color: var(--text-dim); transition: color 0.15s, border-color 0.15s;
}
.no-exif-toggle-btn:hover { color: var(--text); border-color: var(--sage-40); }
.no-exif-partial-note {
  margin-top: 14px;
  background: rgba(242,213,179,0.1);
  border: 1px solid rgba(242,213,179,0.3);
  border-radius: 8px; padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; color: #f2d5b3;
  text-align: left; line-height: 1.6;
}

/* ── PHOTO PROCESSING OVERLAY ── */
#proc-overlay {
  position: fixed; inset: 0; z-index: 99100;
  background: rgba(6, 14, 26, 0.72);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  display: flex; align-items: center; justify-content: center;
}
.proc-box {
  background: rgba(10, 24, 44, 0.78);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border-radius: 20px; padding: 40px 48px;
  text-align: center; min-width: 300px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  border: 1px solid var(--sage-18);
  position: relative; overflow: hidden;
}
.proc-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage-50) 30%, rgba(200,230,255,0.75) 50%, var(--sage-50) 70%, transparent);
  background-size: 200% 100%;
  animation: shimmerEdge 6s ease-in-out infinite;
}
.proc-icon-wrap {
  position: relative; width: 64px; height: 64px;
  margin: 0 auto 24px;
  overflow: visible;
}
.proc-spin {
  position: absolute; top: 0; left: 0;
  animation: procSpin 1s linear infinite;
}
.proc-icon-inner {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: pinPulse 1.4s ease-in-out infinite;
}
@keyframes procSpin { to { transform: rotate(360deg); } }
@keyframes pinPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 1;    }
  50%       { transform: translate(-50%, -50%) scale(1.12); opacity: 0.78; }
}
.proc-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  color: rgba(255,255,255,0.9); margin-bottom: 6px;
}
.proc-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; color: rgba(155,203,243,0.65);
  margin-bottom: 20px; min-height: 1.2em;
}
.proc-bar-wrap {
  background: var(--sage-10);
  border-radius: 8px; height: 5px;
  overflow: hidden; margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px var(--sage-08);
}
.proc-bar {
  height: 100%;
  background: linear-gradient(90deg, #6aaade, #9bcbf3);
  background-size: 200% 100%;
  animation: shimmerEdge 2s linear infinite;
  border-radius: 8px; width: 0%;
  transition: width 0.25s ease;
}
.proc-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; color: var(--sage-40);
}

/* ── ROUTE PROGRESS BANNER ── */
/* ── Route banner — desktop pill ── */
#route-banner {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(calc(-50% + var(--sidebar-w) / 2));
  z-index: 9100;
  background: rgba(10, 24, 44, 0.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: #f0f1f3;
  border: 1px solid var(--sage-22);
  border-radius: 14px;
  padding: 11px 16px;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  min-width: 280px; max-width: 380px;
  animation: bannerSlideUp 0.35s cubic-bezier(0.34,1.2,0.64,1);
}

/* Glass specular edge line across the top */
#route-banner::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sage-50) 30%, rgba(200,230,255,0.8) 50%, var(--sage-50) 70%, transparent);
  background-size: 200% 100%;
  animation: shimmerEdge 9s ease-in-out infinite;
}
/* Shimmer sweep */
#route-banner::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background: linear-gradient(105deg, transparent 30%, var(--sage-07) 50%, rgba(255,255,255,0.04) 53%, transparent 70%);
  animation: shimmerSweep 12s ease-in-out infinite 0.5s;
}

/* ── Mobile: full-width glass sheet anchored to bottom ── */
@media (max-width: 600px) {
  #route-banner {
    bottom: 0;
    left: 0; right: 0;
    transform: none;
    min-width: unset; max-width: unset; width: 100%;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    border-left: none; border-right: none;
    border-top: 1px solid rgba(155,203,243,0.28);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)) 20px;
    background: rgba(8, 18, 36, 0.82);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    box-shadow: 0 -4px 40px rgba(0,0,0,0.5), inset 0 1px 0 var(--sage-15);
    animation: bannerSlideUpMobile 0.38s cubic-bezier(0.34,1.15,0.64,1);
    flex-direction: column; align-items: stretch; gap: 10px;
  }
  /* Lift banner above upload pill on mobile when both visible */
  body.upload-pill-visible #route-banner { bottom: 70px; }
  #route-banner .route-banner-top-row {
    display: flex; align-items: center; gap: 10px;
  }
  /* Top edge shimmer line on mobile */
  #route-banner::after {
    height: 1px; top: 0; border-radius: 18px 18px 0 0;
  }
}

@keyframes bannerSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes bannerSlideUpMobile {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.route-banner-bar-wrap {
  flex: 1; background: var(--sage-12);
  border-radius: 4px; height: 3px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--sage-08);
}
.route-banner-bar {
  height: 100%;
  background: linear-gradient(90deg, #6aaade, #9bcbf3, #6aaade);
  background-size: 200% 100%;
  animation: shimmerEdge 3s linear infinite;
  border-radius: 4px; width: 0%;
  transition: width 0.3s ease;
}
.route-banner-dismiss {
  background: none; border: none; color: rgba(255,255,255,0.35);
  cursor: pointer; font-size: 0.7rem; padding: 0 0 0 4px;
  line-height: 1; transition: color 0.15s; flex-shrink: 0;
}
.route-banner-dismiss:hover { color: rgba(255,255,255,0.9); }

/* Photo toggle button in viewer */
#photo-toggle-btn {
  display: none; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  background: transparent;
  border: 1px solid var(--sage-22);
  color: rgba(255,255,255,0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}
#photo-toggle-btn:hover { border-color: var(--sage-50); color: rgba(255,255,255,0.95); background: var(--sage-08); }
#photo-toggle-btn { transition: opacity 0.35s ease, border-color 0.18s, color 0.18s, background 0.18s; }
#photo-toggle-btn.photos-hidden { opacity: 0.35; }
/* Photo toggle — icon only on mobile */
@media (max-width: 600px) {
  #photo-toggle-btn { padding: 8px; min-width: 36px; width: 36px; justify-content: center; }
  #photo-toggle-btn svg { flex-shrink: 0; display: block; }
}

/* photo-toggle-btn shown in both viewer and edit when photos present */

#poi-toggle-btn {
  display: none; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  background: transparent;
  border: 1px solid var(--sage-22);
  color: rgba(255,255,255,0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s; white-space: nowrap;
}
#poi-toggle-btn { display: none !important; }
#poi-toggle-btn:hover { border-color: var(--sage-50); color: rgba(255,255,255,0.95); background: var(--sage-08); }
#poi-toggle-btn.poi-hidden { opacity: 0.35; }
#poi-toggle-btn { transition: opacity 0.35s ease, border-color 0.18s, color 0.18s, background 0.18s; }
@media (max-width: 600px) {
  .poi-toggle-text { display: none !important; }
  #poi-toggle-btn { padding: 8px; min-width: 36px; width: 36px; justify-content: center; }
  #poi-toggle-btn svg { flex-shrink: 0; display: block; }
}

#lodging-toggle-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  background: transparent;
  border: 1px solid var(--sage-22);
  color: rgba(255,255,255,0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}
#lodging-toggle-btn:hover { border-color: var(--sage-50); color: rgba(255,255,255,0.95); background: var(--sage-08); }
#lodging-toggle-btn.lodging-hidden { opacity: 0.35; }
#lodging-toggle-btn { transition: opacity 0.35s ease, border-color 0.18s, color 0.18s, background 0.18s; }
@media (max-width: 600px) {
  #lodging-toggle-btn { padding: 8px; min-width: 36px; width: 36px; justify-content: center; }
  #lodging-toggle-btn svg { flex-shrink: 0; display: block; }
}

/* ── GALLERY LIGHTBOX ── */
.lb-controls-hidden .lb-btn,
.lb-controls-hidden ./* ── LIGHTBOX COMMENTS ── */
#lb-comments-list::-webkit-scrollbar { width: 4px; }
#lb-comments-list::-webkit-scrollbar-thumb { background: rgba(155,203,243,0.2); border-radius: 2px; }

lb-overlay-bottom { opacity: 0; pointer-events: none; }
.lb-controls-visible .lb-btn,
.lb-controls-visible .lb-overlay-bottom { opacity: 1; pointer-events: all; }
#gallery-lightbox, .lb-btn, .lb-overlay-bottom { transition: opacity 0.25s; }
.lb-btn {
  position: absolute; z-index: 2;
  background: rgba(10,24,44,0.65);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--sage-20);
  border-radius: 50%; color: rgba(255,255,255,0.75); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.lb-btn:hover { background: rgba(10,24,44,0.9); border-color: var(--sage-50); color: #fff; }
.lb-close { top: 18px; right: 18px; }
.lb-nav { top: 50%; transform: translateY(-50%); }
.lb-nav-prev { left: 18px; }
.lb-nav-next { right: 18px; }
#lb-controls { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lb-overlay-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 32px 20px 20px;
  background: linear-gradient(transparent, rgba(8,16,28,0.7) 50%, rgba(8,16,28,0.88) 100%);
  backdrop-filter: blur(0px);
  display: flex; align-items: flex-end; gap: 12px;
  pointer-events: all;
}
.lb-overlay-bottom .like-btn { color: rgba(255,255,255,0.7) !important; }
.lb-overlay-bottom .like-btn.liked { color: #f2705a !important; }

/* ── SLIDESHOW ── */
.ss-controls-hidden .ss-bottom-overlay,
.ss-controls-hidden .ss-nav-row,
.ss-controls-hidden .ss-close-btn { opacity: 0; pointer-events: none; }
.ss-controls-visible .ss-bottom-overlay,
.ss-controls-visible .ss-nav-row,
.ss-controls-visible .ss-close-btn { opacity: 1; pointer-events: all; }
#ss-controls { transition: opacity 0.25s; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ss-bottom-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 60px 24px 56px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.85) 100%);
  display: flex; align-items: flex-end; gap: 16px;
  pointer-events: all;
}
.ss-nav-row {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  pointer-events: all;
}
.ss-nav-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ss-nav-btn:hover { background: rgba(255,255,255,0.3); }
.ss-pause-btn {
  padding: 6px 16px; border-radius: 20px;
  background: var(--sage-20); border: 1px solid var(--sage-40);
  color: #9bcbf3; cursor: pointer; font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; min-width: 52px;
  transition: background 0.15s;
}
.ss-pause-btn:hover { background: var(--sage-35); }
.ss-close-btn {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.2);
  color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  pointer-events: all; transition: background 0.15s;
}
.ss-close-btn:hover { background: rgba(232,120,120,0.5); }
#ss-controls .like-btn { color: rgba(255,255,255,0.8) !important; background: rgba(0,0,0,0.4) !important; border-radius: 20px; padding: 4px 8px !important; }
#ss-controls .like-btn.liked { color: #f2705a !important; }

/* ── GALLERY TAB ── */
.gallery-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; flex-shrink:0;
  border-bottom:1px solid var(--sage-12);
}
.gallery-count { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:rgba(255,255,255,0.45); }
.gallery-slideshow-btn {
  display:flex; align-items:center; gap:6px;
  background:var(--sage-12); border:1px solid var(--sage-25);
  color:rgba(255,255,255,0.85); font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.72rem; font-weight:600; padding:5px 10px;
  border-radius:6px; cursor:pointer; transition:background 0.18s,color 0.18s,border-color 0.18s,transform 0.18s;
}
.gallery-slideshow-btn:hover { background:var(--sage-25); }
/* Video export effect buttons */
.vx-effect-btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:9px 11px; border-radius:9px; cursor:pointer;
  background:rgba(155,203,243,0.04); border:1px solid rgba(155,203,243,0.14);
  text-align:left; transition:background 0.15s, border-color 0.15s;
}
.vx-effect-btn:hover { background:rgba(155,203,243,0.10); border-color:rgba(155,203,243,0.3); }
.vx-effect-btn.active { background:rgba(155,203,243,0.14); border-color:rgba(155,203,243,0.45); }
.vx-effect-name { font-family:'Space Grotesk',sans-serif; font-size:0.75rem; font-weight:700; color:rgba(255,255,255,0.85); }
.vx-effect-desc { font-family:'JetBrains Mono',monospace; font-size:0.52rem; color:rgba(155,203,243,0.45); }
#gallery-grid {
  display:block;
  padding:4px;
  overflow-y: auto;
}
.gallery-day-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 6px 6px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.72rem; font-weight: 700;
  color: rgba(255,255,255,0.6); letter-spacing: 0.04em; text-transform: uppercase;
}
.gallery-day-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.gallery-day-count {
  margin-left: auto; font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; color: rgba(255,255,255,0.3);
}
.gallery-day-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 3px; margin-bottom: 4px;
}
.gallery-item {
  position:relative; aspect-ratio:4/3; cursor:pointer; overflow:hidden;
  border-radius:4px; background:rgba(255,255,255,0.05);
}
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.07) 35%,
    transparent 55%
  );
  opacity: 0.3;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}
.gallery-item:hover::after { opacity: 1; }
/* gallery items appear via img opacity transition (no JS animation needed) */
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.2s, opacity 0.3s; }
.gallery-item:hover img { transform:scale(1.04); }

/* Left rail photo placeholder — shimmer while image loads */
.wp-thumb-placeholder {
  width: 38px; height: 38px; border-radius: 7px;
  flex-shrink: 0; margin-right: 2px; align-self: center;
  background: linear-gradient(
    90deg,
    var(--sage-06) 0%,
    var(--sage-14) 40%,
    var(--sage-06) 80%
  );
  background-size: 200% 100%;
  animation: wpThumbShimmer 1.5s ease-in-out infinite;
  border: 1.5px solid rgba(61,122,138,0.22);
  transition: width 0.28s cubic-bezier(0.4,0,0.2,1),
              opacity 0.22s ease,
              margin 0.28s cubic-bezier(0.4,0,0.2,1);
}
.wp-thumb-placeholder.photos-hidden {
  width: 0 !important; opacity: 0 !important; margin: 0 !important; border-width: 0 !important; pointer-events: none;
}
@keyframes wpThumbShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Lazy-load skeleton — shown while image hasn't loaded yet */
.gallery-item-skeleton {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.04) 80%
  );
  background-size: 200% 100%;
  animation: gallerySkeleton 1.6s ease-in-out infinite;
}
.gallery-item[data-lazy-loaded] .gallery-item-skeleton {
  display: none; /* hide skeleton once image is injected */
}
@keyframes gallerySkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.gallery-item-name-overlay {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 6px 7px 18px;
  background: linear-gradient(rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.62rem; font-weight: 700;
  color: rgba(255,255,255,0.95); line-height: 1.3;
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.gallery-item-loc-overlay {
  position: absolute; bottom: 5px; right: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.52rem;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  padding: 2px 5px; border-radius: 3px;
  max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── COMMENTS TAB ── */
.comments-header {
  padding:12px 14px 8px; flex-shrink:0;
  border-bottom:1px solid var(--sage-12);
}
.comments-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.85rem; font-weight:700; color:rgba(255,255,255,0.9); display:block; }
.comments-sub   { font-family:'JetBrains Mono',monospace; font-size:0.58rem; color:rgba(255,255,255,0.35); display:block; margin-top:2px; }
#comments-list  { flex:1; overflow-y:auto; padding:4px 0; }

/* Note item — wp-item style */
.note-item {
  display:flex; align-items:center; gap:9px;
  padding:7px 14px 7px 10px; cursor:pointer;
  border-left:2px solid transparent;
  position:relative; transition:background 0.18s;
  overflow:hidden;
}
.note-item::after {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, var(--sage-06) 50%, transparent 70%);
  transform:translateX(-120%) skewX(-12deg);
  transition:none;
}
.note-item:hover::after { animation:shimmerSweep 1.1s ease-out forwards; }
.note-item:hover { background:var(--sage-04); }
.note-item:hover .note-body { transform:translateX(3px); }
.note-item-divider {
  height:1px; flex-shrink:0; margin:0 10px 0 12px;
  background:linear-gradient(90deg, var(--sage-12) 0%, var(--sage-04) 60%, transparent 100%);
}
.note-thumb {
  width:38px; height:38px; border-radius:7px;
  object-fit:cover; flex-shrink:0;
  border:1.5px solid rgba(61,122,138,0.4);
  cursor:zoom-in; transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s,opacity 0.15s;
  align-self:center;
}
.note-thumb:hover { border-color:var(--gold); transform:scale(1.08); box-shadow:0 0 10px rgba(255,107,91,0.4); }
.note-no-thumb {
  width:38px; height:38px; border-radius:7px; flex-shrink:0;
  border:1.5px solid var(--sage-15);
  display:flex; align-items:center; justify-content:center;
  background:var(--sage-06); align-self:center;
  color:var(--sage-35);
}
.note-body {
  flex:1; min-width:0;
  transform:translateX(0);
  transition:transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94);
}
.note-location { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; font-weight:600; color:rgba(255,255,255,0.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-author   { font-family:'JetBrains Mono',monospace; font-size:0.58rem; color:var(--sage-70); margin-top:1px; }
.note-text     { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.75rem; color:rgba(255,255,255,0.62); line-height:1.5; margin-top:3px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.note-meta     { font-family:'JetBrains Mono',monospace; font-size:0.55rem; color:rgba(255,255,255,0.25); margin-top:4px; display:flex; align-items:center; gap:8px; }
.note-del      { background:none; border:none; color:rgba(255,255,255,0.2); font-size:0.75rem; cursor:pointer; padding:2px 4px; flex-shrink:0; transition:color 0.15s; align-self:flex-start; margin-top:2px; }
.note-del:hover { color:#f2a090; }
/* Highlighted note in left rail when its pin is open */
.note-item.note-active {
  background: var(--sage-10);
  border-left-color: #9bcbf3 !important;
}
.note-item.note-active .note-location { color:#fff; }
.note-item.note-active .note-text { -webkit-line-clamp: unset; }
/* Inline notes block inside Leaflet popup */
.pop-notes-block {
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--sage-18);
}
.pop-notes-nav {
  display: flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem; color: var(--sage-60);
  margin-bottom: 6px;
}
.pop-notes-nav button {
  background: var(--sage-12); border: 1px solid var(--sage-22);
  color: #9bcbf3; border-radius: 3px; padding: 1px 5px;
  cursor: pointer; font-size: 0.65rem; line-height: 1.4;
  transition: background 0.12s;
}
.pop-notes-nav button:hover { background: rgba(155,203,243,0.24); }
.pop-notes-nav button:disabled { opacity: 0.3; cursor: default; }
.pop-note-entry {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; color: rgba(255,255,255,0.82);
  line-height: 1.5; white-space: pre-wrap;
}
.pop-note-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; color: var(--sage-50);
  margin-top: 4px;
}

/* keep old classes for any legacy refs */
.comment-item { display:none; }
.comment-author { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.75rem; font-weight:700; color:rgba(255,255,255,0.85); }
.comment-wp     { font-family:'JetBrains Mono',monospace; font-size:0.58rem; color:#9bcbf3; margin-left:6px; }
.comment-text   { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.78rem; color:rgba(255,255,255,0.7); line-height:1.55; margin-top:3px; }
.comment-meta   { font-family:'JetBrains Mono',monospace; font-size:0.58rem; color:rgba(255,255,255,0.3); margin-top:4px; }
.comment-del    { background:none; border:none; color:rgba(255,255,255,0.2); font-size:0.75rem; cursor:pointer; padding:2px 4px; flex-shrink:0; transition:color 0.15s; }
.comment-del:hover { color:#f2a090; }
.comment-compose {
  flex-shrink:0; padding:10px 14px; border-top:1px solid var(--sage-15);
  display:flex; flex-direction:column; gap:6px;
}
/* Hide compose inputs — submission happens via popup/modal flow */
#comment-compose { display:none !important; }
.notes-hint {
  flex-shrink:0; padding:10px 14px 12px;
  border-top:1px solid var(--sage-10);
  display:flex; align-items:flex-start; gap:7px;
  font-family:'JetBrains Mono',monospace; font-size:0.6rem;
  color:rgba(155,203,243,0.45); line-height:1.6;
}
.notes-hint svg { flex-shrink:0; margin-top:1px; opacity:0.6; }
.comment-author-input {
  background:rgba(255,255,255,0.07); border:1px solid var(--sage-20);
  border-radius:6px; padding:6px 10px; color:rgba(255,255,255,0.85);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:0.75rem; outline:none;
}
.comment-textarea {
  background:rgba(255,255,255,0.07); border:1px solid var(--sage-20);
  border-radius:6px; padding:8px 10px; color:rgba(255,255,255,0.85);
  font-family:'Plus Jakarta Sans',sans-serif; font-size:0.78rem; outline:none;
  resize:vertical; min-height:64px; line-height:1.5;
}
.comment-author-input:focus, .comment-textarea:focus { border-color:#9bcbf3; }
/* comment on wp popup */
.popup-comment-btn {
  background:var(--sage-12); border:1px solid var(--sage-25);
  color:#9bcbf3; font-family:'JetBrains Mono',monospace; font-size:0.62rem;
  border-radius:5px; padding:4px 8px; cursor:pointer; margin-top:8px; width:100%;
  transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s,opacity 0.15s; text-align:center; display:block;
}
.popup-comment-btn:hover { background:var(--sage-22); }

/* ── SLIDESHOW DOTS ── */
.ss-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.25); cursor:pointer; transition:background 0.2s,color 0.2s,border-color 0.2s,transform 0.2s,box-shadow 0.2s;
  flex-shrink:0;
}
.ss-dot.active { background:#9bcbf3; transform:scale(1.3); }

/* ── RADIAL CLUSTER HOVER ── */
.radial-cluster-overlay {
  position: absolute;
  width: 220px; height: 220px;
  pointer-events: none;
  z-index: 650;
}
/* reset-view-btn visible on all screen sizes */
@media (max-width: 600px) {
  #reset-view-btn { bottom: 88px !important; }
}
.radial-cluster-wrap {
  position: relative;
  width: 220px; height: 220px;
  pointer-events: none;
}

.radial-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.radial-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry)));
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  animation: radialPop 0.25s cubic-bezier(0.34,1.56,0.64,1) var(--delay) both;
}
.radial-pin { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.radial-label {
  background: rgba(10,20,32,0.88);
  border: 1px solid var(--sage-20);
  border-radius: 5px;
  padding: 2px 5px;
  text-align: center;
  white-space: nowrap;
}
.radial-more {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(52px);
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  color: var(--sage-60);
}
@keyframes radialPop {
  from { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  to   { transform: translate(calc(-50% + var(--rx)), calc(-50% + var(--ry))) scale(1); opacity: 1; }
}

/* ── DAY TOOLTIPS ── */

.wp-tooltip {
  background: rgba(12,22,36,0.95) !important;
  border: 1px solid var(--sage-25) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
  max-width: 200px !important;
}
.wp-tooltip::before { display: none !important; }
.wp-tt-inner { padding: 8px 11px 7px; }
.wp-tt-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  color: rgba(255,255,255,0.92); line-height: 1.3;
}
.wp-tt-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; margin-top: 2px;
  opacity: 0.6;
}
.wp-tt-note {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem; color: rgba(255,255,255,0.55);
  margin-top: 4px; line-height: 1.4;
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.wp-tt-divider { height:1px; background:var(--sage-10); margin: 5px 0; }
.wp-tt-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; color: #9bcbf3; font-weight: 600;
}
.wp-tt-names {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem; color: rgba(255,255,255,0.5);
  margin-top: 2px; line-height: 1.4;
}

.day-tooltip {
  background: rgba(12,22,36,0.95) !important;
  border: 1px solid var(--sage-25) !important;
  color: #f0f1f3 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  padding: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important;
  max-width: 260px !important;
  min-width: 160px !important;
}
.day-tooltip::before { display: none !important; }
.day-tooltip-inner { padding: 9px 12px 8px; }
.day-tooltip-day {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #9bcbf3;
  margin-bottom: 4px;
}
.day-tooltip-route {
  font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.9);
  line-height: 1.4;
}
.day-tooltip-from { color: rgba(255,255,255,0.6); font-size: 0.68rem; }
.day-tooltip-arrow { color: var(--sage-70); margin: 0 3px; font-size: 0.65rem; }
.day-tooltip-divider {
  height: 1px; background: var(--sage-12);
  margin: 6px 0;
}
.day-tooltip-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.65rem; font-family: 'JetBrains Mono', monospace;
  color: rgba(255,255,255,0.5);
}
.day-tooltip-dist { color: rgba(255,255,255,0.75); font-weight: 600; }
.day-tooltip-time { color: var(--sage-70); }

/* ── DUPLICATE PICKER ── */
/* ── Avatar crop modal ───────────────────────────────────────────────────── */
#avatar-crop-modal {
  display: none; position: fixed; inset: 0; z-index: 99600;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(20px);
  align-items: center; justify-content: center;
}
.avatar-crop-box {
  background: var(--glass-bg2); border: 1px solid var(--glass-border);
  border-radius: 18px; padding: 24px; width: 340px; max-width: calc(100vw - 24px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.65);
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.avatar-crop-title {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; font-weight: 700;
  color: rgba(255,255,255,0.9); align-self: flex-start;
}
.avatar-crop-hint {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  color: rgba(255,255,255,0.35); align-self: flex-start; margin-top: -10px;
}
#avatar-crop-canvas {
  border-radius: 12px; border: 1px solid var(--sage-15);
  touch-action: none; cursor: grab; display: block;
  width: 280px; height: 280px;
}
#avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-circle-overlay {
  position: relative; width: 280px; height: 280px; flex-shrink: 0;
}
.avatar-crop-circle-overlay canvas { position: absolute; inset: 0; }
.avatar-crop-mask {
  position: absolute; inset: 0; pointer-events: none; border-radius: 12px; overflow: hidden;
}
/* Zoom slider */
#avatar-zoom-slider {
  width: 100%; accent-color: #9bcbf3; cursor: pointer;
}
.avatar-crop-actions {
  display: flex; gap: 10px; width: 100%;
}
.avatar-crop-actions .mbtn { flex: 1; text-align: center; }

.dupe-box { max-width: 560px; width: 94vw; }
.confirm-box { max-width: 340px; width: calc(100% - 32px); }
@media (max-width: 600px) {
  .confirm-box { max-width: none; width: calc(100vw - 24px); }
}
.dupe-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.dupe-icon { flex-shrink:0; width:36px; height:36px; background:var(--sage-10); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.dupe-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:700; color:var(--text); }
.dupe-sub   { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--text-dim); margin-top:3px; }
.dupe-grid  { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-bottom:12px; max-height:340px; overflow-y:auto; }
.dupe-item  {
  position:relative; border-radius:8px; overflow:hidden; cursor:pointer;
  border:2.5px solid transparent; transition:border-color 0.15s, transform 0.15s;
  background:var(--bg-subtle);
}
.dupe-item.selected { border-color:#9bcbf3; transform:scale(1.02); }
.dupe-item img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.dupe-item .dupe-check {
  position:absolute; top:6px; right:6px;
  width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,0.5); border:2px solid rgba(255,255,255,0.5);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:white; transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s,opacity 0.15s;
}
.dupe-item.selected .dupe-check { background:#9bcbf3; border-color:#9bcbf3; }
.dupe-item .dupe-fname {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(0,0,0,0.75));
  padding:12px 6px 5px; font-family:'JetBrains Mono',monospace;
  font-size:0.55rem; color:rgba(255,255,255,0.85); line-height:1.3;
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}

.dupe-sel-acts {
  display: flex; gap: 8px; margin-bottom: 2px;
}
.dupe-sel-btn {
  flex: 1; padding: 7px 10px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem;
  color: var(--text-mid); transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.dupe-sel-btn:hover { background: var(--border); color: var(--text); }
.dupe-done-btn {
  width: 100%; background: #9bcbf3 !important;
  color: #0d1e2e !important; font-weight: 700 !important;
  font-size: 0.9rem !important; padding: 12px !important;
}
.dupe-done-btn:hover { background: #c2ddf2 !important; }
.dupe-done-btn.skip {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.45) !important;
  font-weight: 500 !important;
}

.dupe-hint { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--text-faint); text-align:center; margin-bottom:8px; }

/* Copyright notices */
.splash-copyright {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; color: var(--sage-25);
  letter-spacing: 0.06em;
  pointer-events: none;
}
.topbar-copyright {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; color: rgba(255,255,255,0.3);
  letter-spacing: 0.05em; white-space: nowrap;
  flex-shrink: 0;
}

.day-expand-row {
  padding: 5px 14px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--sage-60);
  cursor: pointer;
  transition: color 0.15s;
  user-select: none;
}
.day-expand-row:hover { color: #9bcbf3; }

.share-url-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  color: var(--text-mid); letter-spacing: 0.08em; text-transform: uppercase;
  display: block; margin-bottom: 4px; font-weight: 600;
}
.share-url-row {
  display: flex; gap: 6px; align-items: center;
}
.share-url-row textarea {
  flex: 1; resize: none; height: 34px; padding: 7px 10px;
  font-size: 0.68rem; line-height: 1.3; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.share-map-style-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 6px;
  background: var(--sage-06); border: 1px solid var(--sage-18);
  border-radius: 7px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  color: var(--text-dim); transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.share-map-style-btn:hover { background: var(--sage-14); color: var(--text); }
.share-map-style-btn.active {
  background: var(--sage-18); border-color: var(--sage-50);
  color: #9bcbf3;
}
.share-copy-btn {
  flex-shrink: 0; height: 38px; padding: 0 12px;
  background: var(--sage-15); border: 1px solid var(--sage-30);
  color: #9bcbf3; font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; font-weight: 600; border-radius: 6px;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; white-space: nowrap;
}
.share-copy-btn:hover { background: rgba(155,203,243,0.28); }
.share-copy-btn.copied { background: rgba(90,184,90,0.2); border-color: #5ab85a; color: #5ab85a; }

/* ── Route Accordion ── */
.route-accordion { border:1px solid transparent; border-radius:8px; overflow:hidden; margin:6px 14px 0; }
.route-accordion.open { border-color: var(--sage-15); }
.route-accordion-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; background:rgba(255,255,255,0.04); border:none; cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:0.78rem; font-weight:600;
  color:rgba(255,255,255,0.75); text-align:left; transition:background 0.15s;
}
.route-accordion-btn:hover { background:var(--sage-10); }
.route-accordion-btn .acc-arrow { font-size:0.65rem; transition:transform 0.2s; color:#9bcbf3; }
.route-accordion.open .acc-arrow { transform:rotate(90deg); }
.route-accordion-body { display:none; }
.route-accordion.open .route-accordion-body { display:block; }

/* ── Sidebar FAB ── */

#fab-group {
  display: none;
  position: fixed; bottom: 24px; left: 24px; z-index: 9000;
  flex-direction: row; gap: 10px; align-items: center;
}
@media (max-width: 600px) {
  #fab-group {
    left: 50%; transform: translateX(-50%);
  }
}
#sidebar.collapsed ~ #fab-group,
#sidebar.collapsed ~ * #fab-group { display: flex; }
#sidebar-fab {
  display: flex;
  align-items: center; gap: 8px;
  background: linear-gradient(135deg, #1a3a5c 0%, #1e4468 40%, #162f4f 70%, #1a3a5c 100%); border: 1px solid var(--sage-35);
  color: white; font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem; font-weight: 700;
  padding: 11px 18px; border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
#sidebar-fab:hover { background: #1e4068; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.6); }
/* sidebar-fab visibility controlled by #fab-group */

/* ── Account Tab ── */
.acc-mode-btn {
  flex: 1; padding: 8px 10px; border-radius: 7px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--sage-20);
  color: rgba(255,255,255,0.6); font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.acc-mode-btn.active {
  background: var(--sage-18); border-color: #9bcbf3; color: #9bcbf3;
}
/* Journey list skeleton loader */
@keyframes journeySkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.acc-journey-skeleton {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.acc-journey-skeleton:last-child { border-bottom: none; }
.acc-skel-line {
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.09) 40%,
    rgba(255,255,255,0.04) 80%
  );
  background-size: 200% 100%;
  animation: journeySkeletonShimmer 1.5s ease-in-out infinite;
}

.acc-journey-item {
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.acc-journey-item:last-child { border-bottom: none; }
.acc-journey-item:hover { background: rgba(255,255,255,0.03); }
.acc-journey-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85); }
.acc-journey-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(255,255,255,0.35); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Discover tab ─────────────────────────────────────────────────────────────────────────────────── */
.disc-card { background: rgba(155,203,243,0.04); border: 1px solid rgba(155,203,243,0.1); border-radius: 10px; padding: 11px 13px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.disc-card:hover { background: rgba(155,203,243,0.08); border-color: rgba(155,203,243,0.2); }
.disc-card-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.disc-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.disc-card-author { display: flex; align-items: center; gap: 5px; }
.disc-card-avatar { width: 16px; height: 16px; border-radius: 50%; background: rgba(155,203,243,0.2); display: flex; align-items: center; justify-content: center; font-size: 0.45rem; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: rgba(155,203,243,0.8); overflow: hidden; flex-shrink: 0; }
.disc-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.disc-card-aname { font-family: 'JetBrains Mono', monospace; font-size: 0.57rem; color: rgba(155,203,243,0.6); }
.disc-card-dot { width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,0.2); flex-shrink: 0; }
.disc-card-date { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: rgba(255,255,255,0.28); }
.disc-card-likes { display: flex; align-items: center; gap: 3px; font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: rgba(255,255,255,0.28); margin-left: auto; }
.disc-empty { text-align: center; padding: 32px 0; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: rgba(255,255,255,0.25); line-height: 1.9; }
.disc-skel { background: rgba(155,203,243,0.04); border: 1px solid rgba(155,203,243,0.07); border-radius: 10px; padding: 11px 13px; }
/* ── Elevation profile ─────────────────────────────────────────────────────── */
.elev-stat { flex: 1; padding: 10px 0 8px; text-align: center; border-right: 1px solid rgba(155,203,243,0.07); }
.elev-stat:last-child { border-right: none; }
.elev-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.82); letter-spacing: -0.02em; }
.elev-stat-lbl { font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; color: rgba(155,203,243,0.38); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.elev-spinner { width: 22px; height: 22px; border: 2px solid rgba(155,203,243,0.12); border-top-color: rgba(155,203,243,0.5); border-radius: 50%; animation: elevSpin 0.8s linear infinite; }
@keyframes elevSpin { to { transform: rotate(360deg); } }
/* Stats tab visible in both edit and viewer mode — no hide rule */
/* ── Places tab ── */
.places-toggle {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 4px;
  background: transparent; border: none;
  font-family: 'JetBrains Mono', monospace; font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45); cursor: pointer;
  border-bottom: 2px solid transparent; transition: color 0.15s;
}
.places-toggle:hover { color: rgba(255,255,255,0.75); }
.places-toggle.active { color: #9bcbf3; border-bottom-color: #9bcbf3; }
.places-cat-btn {
  flex: 1; padding: 5px 2px;
  background: rgba(155,203,243,0.04);
  border: 1px solid rgba(155,203,243,0.1);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.55rem;
  color: rgba(155,203,243,0.5); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.places-cat-btn:hover { background: rgba(155,203,243,0.1); color: rgba(155,203,243,0.8); }
.places-cat-btn.active { background: rgba(155,203,243,0.12); border-color: rgba(155,203,243,0.35); color: #9bcbf3; }
.places-result-item {
  padding: 9px 12px; border-bottom: 1px solid rgba(155,203,243,0.05);
  display: flex; gap: 8px; align-items: flex-start; cursor: pointer; transition: background 0.12s;
}
.places-result-item:hover { background: rgba(155,203,243,0.04); }
.places-result-item:last-child { border-bottom: none; }
#tab-elevation.active { overflow: hidden; }
/* ── Stats tab cards ── */
.stats-card {
  background: rgba(155,203,243,0.04);
  border: 1px solid rgba(155,203,243,0.1);
  border-radius: 10px;
  padding: 10px 12px;
}
.stats-card-title {
  display: flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(155,203,243,0.5);
}
.stats-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(155,203,243,0.06);
  font-family: 'JetBrains Mono', monospace;
}
.stats-summary-row:last-child { border-bottom: none; }
.stats-summary-row-label { font-size: 0.6rem; color: rgba(155,203,243,0.45); }
.stats-summary-row-val { font-size: 0.68rem; color: rgba(255,255,255,0.8); font-weight: 600; }
#stats-tab-body::-webkit-scrollbar { width: 3px; }
#stats-tab-body::-webkit-scrollbar-track { background: transparent; }
#stats-tab-body::-webkit-scrollbar-thumb { background: rgba(155,203,243,0.2); border-radius: 2px; }
#stats-tab-body { scrollbar-width: thin; scrollbar-color: rgba(155,203,243,0.2) transparent; }
#discover-search:focus { border-color: rgba(155,203,243,0.3); background: rgba(155,203,243,0.08); }
.acc-journey-date { color: rgba(255,255,255,0.3); }
.acc-journey-btn {
  padding: 2px 7px; border-radius: 4px; cursor: pointer; font-size: 0.58rem;
  font-family: 'JetBrains Mono', monospace; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; text-decoration: none;
  border: 1px solid transparent; background: transparent;
}
.acc-journey-btn.edit { color: var(--sage-70); border-color: var(--sage-20); }
.acc-journey-btn.edit:hover { background: var(--sage-18); border-color: var(--sage-60); }
.acc-journey-btn.view { color: var(--sage-55); border-color: var(--sage-15); }
.acc-journey-btn.view:hover { color: #9bcbf3; border-color: var(--sage-40); background: var(--sage-06); }
.acc-journey-btn.delete { color: rgba(232,120,120,0.6); border-color: rgba(232,120,120,0.2); }
.acc-journey-btn.delete:hover { color: #e87878; border-color: rgba(232,120,120,0.5); background: rgba(232,120,120,0.08); }
.del-spinner {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid rgba(232,120,120,0.3);
  border-top-color: rgba(232,120,120,0.85);
  animation: delSpin 0.7s linear infinite;
}
@keyframes delSpin { to { transform: rotate(360deg); } }
.deleting-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid var(--sage-12);
  border-top-color: rgba(232,120,120,0.8);
  animation: delSpin 0.85s linear infinite;
}

/* ── ACCOUNT HEADER ─────────────────────────────────────────────────────────── */
.acc-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}

/* Pro: gold gradient header with shimmer */
body.user-is-pro .acc-header {
  background: linear-gradient(135deg, #1a0f00 0%, #2a1a00 50%, #1a0f00 100%);
  border-bottom: 1px solid rgba(242,201,76,0.2);
}
body.user-is-pro .acc-header::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 20%,
    rgba(242,201,76,0.07) 40%,
    rgba(245,217,122,0.12) 50%,
    rgba(242,201,76,0.07) 60%,
    transparent 80%);
  background-size: 300% 100%;
  animation: proBarSweep 18s ease-in-out infinite;
}
body.user-is-pro .acc-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(242,201,76,0.35) 30%,
    rgba(245,217,122,0.6) 50%,
    rgba(242,201,76,0.35) 70%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmerEdge 5s ease-in-out infinite;
}

/* Pro: gold section icons */
body.user-is-pro .acc-section-title svg {
  stroke: #f2c94c;
  filter: drop-shadow(0 0 3px rgba(242,201,76,0.4));
}
.acc-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #1a3a5c, #9bcbf3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: #fff; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0;
  border: 2px solid var(--sage-35);
  overflow: hidden; cursor: pointer; position: relative;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.acc-avatar:hover { border-color: var(--sage-70); box-shadow: 0 0 0 3px var(--sage-12); }
.acc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.acc-avatar.is-pro {
  border: 2px solid transparent;
  background: linear-gradient(#0a1828, #0a1828) padding-box,
              linear-gradient(135deg, #f2c94c, #fde68a, #e8a820, #f2c94c) border-box;
  background-size: auto, 300% 300%;
  animation: proBorderShimmer 4s linear infinite;
  box-shadow: 0 0 14px rgba(242,201,76,0.3);
}
.acc-avatar.is-pro:hover { box-shadow: 0 0 20px rgba(242,201,76,0.5); }
@keyframes proBorderShimmer {
  0%   { background-position: auto, 0% 50%; }
  50%  { background-position: auto, 100% 50%; }
  100% { background-position: auto, 0% 50%; }
}
/* Camera overlay on hover for upload affordance */
.acc-avatar-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
.acc-avatar-wrap:hover .acc-avatar-cam {
  opacity: 1;
}
.acc-avatar-cam {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.18s; pointer-events: none;
}
.acc-avatar-cam svg { color: rgba(255,255,255,0.9); }

/* ── Comment & journey author avatar bubbles ─────────────────────────────── */
.user-avatar-bubble {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1a3a5c, #2a5a8c);
  border: 1.5px solid var(--sage-30);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.65rem; font-weight: 700;
  color: #9bcbf3; overflow: hidden; text-transform: uppercase;
}
.user-avatar-bubble img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.user-avatar-bubble.is-pro {
  border: 1.5px solid transparent;
  background: linear-gradient(#0e1f36, #0e1f36) padding-box,
              linear-gradient(135deg, #f2c94c, #fde68a, #e8a820, #f2c94c) border-box;
  background-size: auto, 300% 300%;
  animation: proBorderShimmer 4s linear infinite;
  color: #f2c94c;
  box-shadow: 0 0 6px rgba(242,201,76,0.25);
}

.acc-header-info { flex: 1; min-width: 0; }
.acc-display-name {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 700;
  color: rgba(255,255,255,0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-display-name.is-pro {
  background: linear-gradient(90deg, #f2c94c 0%, #f5d97a 40%, #e8a820 70%, #f2c94c 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: proNameShimmer 10s linear infinite;
}
@keyframes proNameShimmer { to { background-position: 200% center; } }

/* Country badge in profile header */
#acc-countries-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(155,203,243,0.08);
  border: 1px solid rgba(155,203,243,0.2);
  border-radius: 20px;
  padding: 3px 9px 3px 7px;
  cursor: default;
  transition: background 0.2s, border-color 0.2s;
}
#acc-countries-badge:hover {
  background: rgba(155,203,243,0.14);
  border-color: rgba(155,203,243,0.38);
}
.acc-countries-globe {
  font-size: 0.75rem; line-height: 1; flex-shrink: 0;
}
.acc-countries-count {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 700;
  color: rgba(155,203,243,0.9);
}
.acc-countries-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem;
  color: rgba(155,203,243,0.45);
  letter-spacing: 0.03em;
}

/* ── Crown animations ──────────────────────────────────────────────────────── */
@keyframes crownTipShine {
  0%   { opacity: 0; transform: translateY(6px) scaleY(0); }
  15%  { opacity: 1; transform: translateY(-2px) scaleY(1); }
  35%  { opacity: 0.6; transform: translateY(-6px) scaleY(0.6); }
  50%  { opacity: 0; transform: translateY(-10px) scaleY(0); }
  100% { opacity: 0; }
}
/* Crown body shimmer — slow gentle gold pulse */
@keyframes crownShimmer {
  0%   { filter: drop-shadow(0 0 2px rgba(242,201,76,0.35)) brightness(1); }
  50%  { filter: drop-shadow(0 0 4px rgba(242,201,76,0.6)) drop-shadow(0 0 8px rgba(242,201,76,0.2)) brightness(1.15); }
  100% { filter: drop-shadow(0 0 2px rgba(242,201,76,0.35)) brightness(1); }
}
@keyframes crownTipPulse {
  0%,90%,100% { opacity: 0; transform: translateY(0) scale(0); }
  92%  { opacity: 0.9; transform: translateY(-3px) scale(1.2); }
  96%  { opacity: 0.5; transform: translateY(-6px) scale(0.8); }
  98%  { opacity: 0; transform: translateY(-9px) scale(0); }
}
/* Wrapper */
.crown-wrap {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  padding: 3px;
  overflow: visible;
}
.crown-wrap svg {
  animation: crownShimmer 10s ease-in-out infinite;
}
/* Stagger for different crown instances */
.crown-wrap.delay-1 svg { animation-delay: 3s; }
.crown-wrap.delay-2 svg { animation-delay: 6s; }
.crown-wrap.delay-3 svg { animation-delay: 1.5s; }

/* ── User rail — fixed bar at bottom of sidebar ────────────────────────────── */
#user-rail {
  flex-shrink: 0;
  border-top: 1px solid var(--sage-10);
  background: rgba(6,14,28,0.85);
  position: relative;
  z-index: 2;
  transition: background 0.3s;
}
/* Hamburger collab avatar circles with tooltip */
.ham-collab-avatar {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
}
.ham-collab-avatar-inner {
  width: 30px; height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  box-sizing: border-box;
  background: #1e3a5f;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ham-collab-avatar:hover .ham-collab-avatar-inner {
  transform: scale(1.12);
}
.ham-collab-avatar-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ham-collab-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: rgba(8,18,32,0.97);
  border: 1px solid var(--sage-18);
  border-radius: 7px;
  padding: 4px 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.ham-collab-avatar:hover .ham-collab-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
  display: none;
  flex-direction: row;
}
/* Topbar active collaborator avatar stack */
#topbar-collab-stack { display: none; align-items: center; position: relative; flex-shrink: 0; height: 30px; }
.topbar-collab-av {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: -8px;
  cursor: default;
}
.topbar-collab-av:first-child { margin-left: 0; }
.topbar-collab-av-inner {
  width: 26px; height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(8,18,32,0.95);
  box-sizing: border-box;
  background: #1e3a5f;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.58rem; font-weight: 700;
}
.topbar-collab-av-inner img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.topbar-collab-av-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: rgba(8,18,32,0.97);
  border: 1px solid var(--sage-18);
  border-radius: 7px;
  padding: 4px 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.topbar-collab-av:hover .topbar-collab-av-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.collab-rail-avatar {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: visible;
  cursor: default;
}
.collab-rail-avatar-inner {
  width: 28px; height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent; /* color set inline */
  box-sizing: border-box;
  background: #1e3a5f;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  transition: transform 0.15s, box-shadow 0.15s;
}
.collab-rail-avatar:hover .collab-rail-avatar-inner {
  transform: scale(1.12);
}
.collab-rail-avatar-inner img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
/* Tooltip */
.collab-rail-tooltip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,18,32,0.97);
  border: 1px solid var(--sage-18);
  border-radius: 7px;
  padding: 5px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  transform: translateX(-50%) translateY(3px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  z-index: 999;
}
.collab-rail-avatar:hover .collab-rail-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.user-is-pro #user-rail {
  background: rgba(20,14,4,0.9);
  border-top: 1px solid rgba(242,201,76,0.2);
}
/* Overlay that dims + blurs sidebar content when user rail is expanded */
#sidebar-rail-overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 54px; /* height of user rail bar */
  z-index: 1;
  background: rgba(6, 14, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
#user-rail.expanded + #sidebar-rail-overlay,
#sidebar.rail-open #sidebar-rail-overlay {
  opacity: 1;
  pointer-events: auto;
}
#user-rail-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  position: relative;
  user-select: none; -webkit-user-select: none;
  transition: background 0.15s, padding 0.3s cubic-bezier(0.4,0,0.2,1);
}
#user-rail.expanded #user-rail-bar {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--sage-08);
}
#user-rail-bar:hover { background: var(--sage-04); }
body.user-is-pro #user-rail-bar:hover { background: rgba(242,201,76,0.04); }
/* Mini avatar in the rail */
.user-rail-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #1e3a5f, #2a4a70);
  border: 1.5px solid var(--sage-30);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem;
  font-weight: 700; color: #9bcbf3; overflow: hidden;
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1),
              height 0.3s cubic-bezier(0.4,0,0.2,1),
              font-size 0.3s, border-width 0.3s;
}
#user-rail.expanded .user-rail-avatar {
  width: 44px; height: 44px; font-size: 1.1rem; border-width: 2px;
}
.user-rail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Camera overlay on hover when logged in */
#ur-avatar { position: relative; }
#ur-avatar::after {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/14px no-repeat;
  opacity: 0; transition: opacity 0.18s; pointer-events: none;
}
.logged-in #ur-avatar:hover::after { opacity: 1; }
.user-rail-avatar.is-pro {
  border: 1.5px solid transparent;
  background: linear-gradient(#0e1a2c, #0e1a2c) padding-box,
              linear-gradient(135deg, #f2c94c, #fde68a, #e8a820, #f2c94c) border-box;
  background-size: auto, 300% 300%;
  animation: proBorderShimmer 4s linear infinite;
  color: #f2c94c;
  box-shadow: 0 0 8px rgba(242,201,76,0.2);
}
.user-rail-info { flex: 1; min-width: 0; }
.user-rail-name {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem;
  font-weight: 600; color: rgba(255,255,255,0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
  transition: font-size 0.3s;
}
#user-rail.expanded .user-rail-name { font-size: 0.95rem; }
.user-rail-name.is-pro {
  background: linear-gradient(90deg, #f2c94c, #f5d97a, #e8a820, #f2c94c);
  background-size: 200% auto; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  animation: proNameShimmer 8s linear infinite;
}
/* Crown in the user rail bar for pro users */
.ur-crown {
  display: none; flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(242,201,76,0.5));
  animation: crownShimmer 8s ease-in-out infinite;
}
.user-rail-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
  color: rgba(255,255,255,0.3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: font-size 0.3s;
}
#user-rail.expanded .user-rail-sub { font-size: 0.62rem; color: rgba(255,255,255,0.4); }
body.user-is-pro .user-rail-sub { color: rgba(242,201,76,0.45); }
/* The expand arrow */
.user-rail-arrow {
  font-size: 0.65rem; color: rgba(255,255,255,0.3); flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), color 0.2s;
}
#user-rail.expanded .user-rail-arrow { transform: rotate(180deg); color: rgba(255,255,255,0.6); }
body.user-is-pro .user-rail-arrow { color: rgba(242,201,76,0.35); }
/* Action buttons — fade in below the bar */
#user-rail-actions {
  max-height: 0; overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4,0,0.2,1);
}
#user-rail.expanded #user-rail-actions { max-height: 52px; }
#ur-action-btns {
  padding: 6px 14px 6px;
  display: flex; gap: 6px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.2s 0.05s ease, transform 0.2s 0.05s ease;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
#user-rail.expanded #ur-action-btns {
  opacity: 1; transform: translateY(0);
}
.ur-act-btn {
  flex: 1; padding: 5px 10px; border-radius: 6px; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.65rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; text-align: center; white-space: nowrap;
}
.ur-act-btn.secondary {
  background: var(--sage-07); border: 1px solid var(--sage-18);
  color: var(--sage-70);
}
.ur-act-btn.secondary:hover { background: rgba(155,203,243,0.13); color: #9bcbf3; }
.ur-act-btn.danger {
  background: rgba(242,100,80,0.06); border: 1px solid rgba(242,100,80,0.18);
  color: rgba(242,120,100,0.65);
}
.ur-act-btn.danger:hover { background: rgba(242,100,80,0.13); color: #e87878; }
.ur-act-btn.primary {
  background: linear-gradient(90deg, #e8a820, #f2c94c, #e8a820);
  background-size: 200% auto; color: #1a1000;
  animation: proNameShimmer 3s linear infinite;
  border: none;
}
.ur-act-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(242,201,76,0.3); }
/* The sliding panel — absolute so it floats up over sidebar content */
#user-rail-panel {
  position: absolute;
  bottom: 100%; left: 0; right: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
  background: rgba(6,14,28,0.97);
  border-top: 1px solid var(--sage-10);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.3);
  z-index: 3;
}
body.user-is-pro #user-rail-panel { background: rgba(20,14,4,0.97); border-top-color: rgba(242,201,76,0.2); }
#user-rail.expanded #user-rail-panel {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
/* Hide the duplicate avatar header when account panel lives inside the rail */
#user-rail-panel .acc-header { display: none !important; }
/* Sections inside expanded panel */
.urp-section {
  margin-bottom: 10px;
}
.urp-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.52rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.22); margin-bottom: 5px;
}
/* Email row */
.urp-email {
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem;
  color: rgba(255,255,255,0.45); margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Status pill */
.urp-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-size: 0.6rem;
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  margin-bottom: 10px;
}
.urp-status.free {
  background: rgba(76,175,130,0.12); border: 1px solid rgba(76,175,130,0.25);
  color: #4caf82;
}
.urp-status.pro {
  background: rgba(242,201,76,0.1); border: 1px solid rgba(242,201,76,0.3);
  color: #f2c94c;
}
/* Action buttons row */
.urp-actions {
  display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
}
.urp-btn {
  flex: 1; min-width: 80px; padding: 7px 10px; border-radius: 7px; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.65rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; text-align: center; white-space: nowrap;
}
.urp-btn.primary {
  background: linear-gradient(90deg, #e8a820, #f2c94c, #e8a820);
  background-size: 200% auto;
  color: #1a1000; animation: proNameShimmer 3s linear infinite;
}
.urp-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(242,201,76,0.3); }
.urp-btn.secondary {
  background: var(--sage-08); border: 1px solid var(--sage-20);
  color: var(--sage-70);
}
.urp-btn.secondary:hover { background: var(--sage-14); }
.urp-btn.danger {
  background: rgba(242,100,80,0.08); border: 1px solid rgba(242,100,80,0.2);
  color: rgba(242,120,100,0.7);
}
.urp-btn.danger:hover { background: rgba(242,100,80,0.15); }
/* Sign-in prompt (logged out) */
.urp-signin-prompt {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem;
  color: rgba(255,255,255,0.45); text-align: center; padding: 8px 0 14px;
}
/* Guest/no user state */
#user-rail-bar.guest .user-rail-name { color: rgba(255,255,255,0.4); }
#user-rail-bar.guest .user-rail-avatar { color: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.1); }
/* Sign out button inside the bar */
.ur-bar-signout {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(242,100,80,0.22);
  background: rgba(242,100,80,0.06);
  color: rgba(242,120,100,0.65);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.62rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.ur-bar-signout:hover { background: rgba(242,100,80,0.14); color: #e87878; border-color: rgba(242,100,80,0.4); }

/* Account panel helpers (referenced in tab-account HTML) */
.acc-email-small {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
  color: rgba(255,255,255,0.3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-signout-btn {
  appearance: none; -webkit-appearance: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.65rem; font-weight: 600;
  padding: 4px 9px; border-radius: 20px; cursor: pointer; flex-shrink: 0;
  border: 1px solid rgba(232,120,120,0.3); background: rgba(232,120,120,0.08);
  color: #e87878; transition: background 0.15s; outline: none;
}
.acc-signout-btn:hover { background: rgba(232,120,120,0.18); }

/* ── ACCOUNT SECTIONS ───────────────────────────────────────────────────────── */
.acc-section { border-bottom: 1px solid rgba(255,255,255,0.05); }
.acc-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; cursor: pointer; user-select: none; transition: background 0.15s;
}
.acc-section-header:hover { background: rgba(255,255,255,0.03); }
.acc-section-title {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem; font-weight: 700;
  color: rgba(255,255,255,0.75);
}
.acc-section-title svg { opacity: 0.55; }
.acc-section-count {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem;
  color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.07);
  border-radius: 10px; padding: 1px 6px;
}
.acc-chevron { transition: transform 0.22s ease; opacity: 0.45; flex-shrink: 0; }
.acc-chevron.rotated { transform: rotate(180deg); }
.acc-section-body {
  overflow: hidden; transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.22s ease;
  max-height: 600px; opacity: 1; padding: 0 14px 10px;
}
.acc-section-body.acc-section-collapsed { max-height: 0 !important; opacity: 0; padding-bottom: 0; pointer-events: none; }
.acc-new-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--sage-30);
  background: var(--sage-08); color: var(--sage-70);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; flex-shrink: 0;
}
.acc-new-btn:hover { background: var(--sage-20); border-color: var(--sage-60); }

/* ── BOOKMARK BUTTON IN TOPBAR ──────────────────────────────────────────────── */
#journey-bookmark-btn {
  display: none; align-items: center; gap: 4px;
  background: transparent; border: none; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; transition: background 0.18s; flex-shrink: 0;
  height: 32px; box-sizing: border-box;
}
#journey-bookmark-btn:hover { background: rgba(242,201,76,0.12); }
#journey-bookmark-btn .jb-icon { stroke: rgba(255,255,255,0.4); fill: none; transition: stroke 0.22s, fill 0.22s, transform 0.22s; transform-origin: center; }
#journey-bookmark-btn.bookmarked .jb-icon { stroke: #f2c94c; fill: #f2c94c; }
@keyframes bookmarkPop {
  0% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.4) rotate(-8deg); }
  65% { transform: scale(0.9) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}
#journey-bookmark-btn.bm-popping .jb-icon { animation: bookmarkPop 0.4s cubic-bezier(0.34,1.4,0.64,1) both; }

/* ── PRO FOOTER ─────────────────────────────────────────────────────────────── */
.acc-pro-footer { padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.acc-pro-pitch { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.acc-pro-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.acc-pro-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: rgba(255,255,255,0.4); margin-top: 2px; }
.acc-journey-limit { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
.acc-journey-limit span { color: #f2c94c; }
.acc-upgrade-btn {
  width: 100%; padding: 9px; border: none; border-radius: 8px; cursor: pointer;
  background: linear-gradient(90deg, #e8a820 0%, #f2c94c 50%, #e8a820 100%);
  background-size: 200% auto;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 700;
  color: #1a1000; transition: transform 0.15s; animation: proNameShimmer 2.5s linear infinite;
}
.acc-upgrade-btn:hover { transform: translateY(-1px); }
.acc-upgrade-btn:active { transform: translateY(0); }
.acc-pro-badge { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.acc-pro-label {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 700;
  background: linear-gradient(90deg, #f2c94c, #f5d97a, #e8a820, #f2c94c);
  background-size: 200% auto; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  animation: proNameShimmer 3s linear infinite;
}
.acc-pro-perks { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: rgba(242,201,76,0.5); margin-top: 2px; }

/* Pro name shimmer applied globally via body class */
body.user-is-pro .acc-display-name { 
  background: linear-gradient(90deg, #f2c94c 0%, #f5d97a 40%, #e8a820 70%, #f2c94c 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: proNameShimmer 3s linear infinite;
}

.route-accordion-inline-btn {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: rgba(255,255,255,0.04);
  border: 1px solid var(--sage-15); border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.76rem; font-weight: 600;
  color: rgba(255,255,255,0.7); cursor: pointer; transition: background 0.15s;
}
.route-accordion-inline-btn:hover { background: var(--sage-10); }
.acc-arrow-inline { font-size: 0.6rem; color: #9bcbf3; transition: transform 0.2s; display:inline-block; }

/* ── MAP NOTES ── */
.map-note-marker {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}
.map-note-marker:hover { transform: scale(1.2); }
.map-note-bubble {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  background: rgba(10,22,36,0.95);
  border: 1px solid var(--sage-35);
  border-radius: 8px;
  padding: 7px 10px;
  min-width: 140px;
  max-width: 200px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 1000;
}
.map-note-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: none;
  border-top-color: var(--sage-35);
}
.map-note-marker:hover .map-note-bubble {
  transform: translateX(-50%) scaleY(1);
  opacity: 1;
}
.map-note-icon {
  width: 32px;
  height: 38px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-note-x {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(232,120,120,0.9); border: 1.5px solid rgba(255,255,255,0.3);
  color: white; font-size: 0.55rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10; opacity: 0; transition: opacity 0.15s;
}
.map-note-marker:hover 
/* Map note Leaflet popup */
.map-note-popup .leaflet-popup-content-wrapper {
  background: rgba(8, 18, 34, 0.55);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid var(--sage-22);
  border-radius: 14px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  padding: 0;
  min-width: 200px;
  max-width: 300px;
}
.map-note-popup .leaflet-popup-content {
  margin: 0;
  padding: 0;
}
.map-note-popup .leaflet-popup-tip-container { display: none; }
.map-note-popup .leaflet-popup-close-button {
  color: var(--sage-60) !important;
  font-size: 18px !important;
  top: 8px !important; right: 10px !important;
}
.map-note-popup .leaflet-popup-close-button:hover { color: #9bcbf3 !important; }
.note-popup-inner {
  padding: 14px 16px 12px;
}
.note-popup-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.note-popup-author {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  color: #9bcbf3;
}
.note-popup-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; color: rgba(255,255,255,0.35);
  margin-top: 1px;
}
.note-popup-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem; color: rgba(255,255,255,0.88);
  line-height: 1.55; white-space: pre-wrap;
  max-height: 200px; overflow-y: auto;
}
.note-popup-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--sage-10);
}
.note-popup-delete {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(160,35,35,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232,120,120,0.4); border-radius: 5px;
  cursor: pointer; color: #f2a0a0;
  font-size: 0.58rem; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 7px; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.note-popup-delete:hover { background: rgba(200,50,50,0.45); border-color: rgba(232,120,120,0.7); color: #fff; }

.map-note-x { opacity: 1; }
.map-note-like-badge {
  position: absolute; top: -4px; left: -6px;
  background: rgba(242,112,90,0.9); color: white;
  font-family: 'JetBrains Mono', monospace; font-size: 0.5rem;
  padding: 1px 4px; border-radius: 8px; pointer-events: none;
}
.like-btn {
  display: inline-flex; align-items: center;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4); font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; padding: 3px 6px; border-radius: 12px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s; vertical-align: middle;
}
.like-btn:hover { color: #f2705a; background: rgba(242,112,90,0.1); }
.like-btn.liked { color: #f2705a; }

/* ── Account Tab Strip ── */
.acc-tab-strip {
  display: flex; border-bottom: 2px solid var(--sage-15);
}
.acc-tab {
  flex: 1; padding: 12px 8px; background: none; border: none;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; font-weight: 600;
  color: rgba(255,255,255,0.4); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.acc-tab:hover { color: rgba(255,255,255,0.7); }
.acc-tab.active { color: #9bcbf3; border-bottom-color: #9bcbf3; }
.loc-result-item {
  padding: 9px 12px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.1s;
}
.loc-result-item:last-child { border-bottom: none; }
.loc-result-item:hover, .loc-result-item.active { background: var(--sage-12); }
.loc-result-name { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1.4; }
.loc-result-type { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; color: var(--sage-55); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes locatePulse {
  0%   { box-shadow: 0 0 0 0 var(--sage-50); }
  70%  { box-shadow: 0 0 0 10px rgba(155,203,243,0); }
  100% { box-shadow: 0 0 0 0 rgba(155,203,243,0); }
}
/* ── DELETE CONFIRM ── */
#del-confirm {
  position: fixed; z-index: 9600;
  background: rgba(10, 24, 44, 0.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--sage-18);
  border-radius: 14px; padding: 16px 18px; width: 240px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
  display: none; flex-direction: column; gap: 12px;
  overflow: hidden;
}
#del-confirm::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(155,203,243,0.45) 30%, rgba(232,120,120,0.5) 50%, rgba(155,203,243,0.45) 70%, transparent);
  background-size: 300% 100%;
  animation: shimmerEdge 10s ease-in-out infinite;
}
#del-confirm.open { display: flex; }
.del-confirm-name { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.85rem; font-weight:600; color:rgba(255,255,255,0.9); }
.del-confirm-sub  { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:rgba(255,255,255,0.35); margin-top:2px; }
.del-confirm-acts { display:flex; gap:8px; }
.del-yes { flex:1; padding:8px; background:rgba(180,40,40,0.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#f2a0a0; border:1px solid rgba(232,120,120,0.45); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:0.8rem; cursor:pointer; transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s,opacity 0.15s; }
.del-yes:hover { background:rgba(200,50,50,0.5); border-color:rgba(232,120,120,0.7); color:#fff; }
.del-no  { padding:8px 12px; background:transparent; color:rgba(255,255,255,0.45); border:1px solid var(--sage-20); border-radius:7px; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; cursor:pointer; transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s,opacity 0.15s; }
.del-no:hover { border-color:rgba(155,203,243,0.45); color:rgba(255,255,255,0.8); }

/* ── PHOTO SHARE ── */
.photo-share-section {
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; margin-bottom: 14px;
}
.photo-share-row { display:flex; align-items:center; gap:10px; cursor:pointer; }
.photo-share-row input[type=checkbox] { accent-color:var(--gold); width:15px; height:15px; cursor:pointer; }
.photo-share-label { font-family:'Plus Jakarta Sans',sans-serif; font-size:0.8rem; color:var(--text-mid); flex:1; }
.photo-share-badge { font-family:'JetBrains Mono',monospace; font-size:0.58rem; color:#7ec8a0; background:var(--sage-10); border:1px solid var(--sage-25); border-radius:10px; padding:2px 7px; }
.photo-upload-progress { margin-top:10px; display:none; }
.photo-upload-bar-wrap { height:4px; background:rgba(61,122,138,0.3); border-radius:2px; overflow:hidden; margin-top:6px; }
.photo-upload-bar { height:100%; background:var(--gold); border-radius:2px; transition:width 0.3s; width:0%; }

/* Floating upload indicator — shown when splash is hidden during bg upload */
#upload-float {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(calc(-50% + var(--sidebar-w) / 2)) translateY(80px);
  z-index: 8900;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  background: rgba(10,22,38,0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--sage-20);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: rgba(155,203,243,0.85);
  white-space: nowrap;
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
  opacity: 0;
}
#upload-float.visible {
  transform: translateX(calc(-50% + var(--sidebar-w) / 2)) translateY(0);
  opacity: 1;
}
/* Lift toast above route banner when both are visible */
body.route-banner-visible #toast { bottom: 80px !important; }
body.route-banner-visible #fit-all-btn { bottom: 80px !important; }
/* Re-center map-area buttons when sidebar collapses */
body.sidebar-collapsed #toast, body.sidebar-collapsed #route-banner,
body.sidebar-collapsed #upload-float, body.sidebar-collapsed #fit-all-btn { --sidebar-w: 0px; }
@media (max-width: 600px) { #upload-float { left: 50%; } }

/* Stack route banner above upload pill when both are visible */
body.upload-pill-visible #route-banner { bottom: 80px; }
body.sidebar-collapsed.upload-pill-visible #route-banner { bottom: 80px; }
#upload-float-bar-wrap {
  width: 80px; height: 3px;
  background: var(--sage-15);
  border-radius: 3px; overflow: hidden; flex-shrink: 0;
}
#upload-float-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #6aaade, #f2c94c);
  border-radius: 3px;
  transition: width 0.4s ease;
}
@keyframes uploadPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
#upload-float-icon {
  width: 12px; height: 12px; flex-shrink: 0;
  animation: uploadPulse 1.4s ease-in-out infinite;
}
#upload-float-cancel {
  background: none; border: none; cursor: pointer;
  color: var(--sage-30); padding: 2px 4px;
  line-height: 1; border-radius: 4px; flex-shrink: 0;
  transition: color 0.15s;
}
#upload-float-cancel:hover { color: var(--sage-75); }
.photo-upload-status { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--text-dim); margin-top:5px; }

/* ═══════════════════════════════════════════════════════
   UI ANIMATIONS
   ═══════════════════════════════════════════════════════ */

/* Sidebar slides in on load */
#sidebar { animation: sidebarSlideIn 0.5s cubic-bezier(0.34,1.2,0.64,1) 0.1s both; }
#sidebar.anim-done { animation: none; }

@keyframes sidebarSlideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Topbar drops down on load */
#topbar { animation: topbarDrop 0.45s cubic-bezier(0.34,1.2,0.64,1) both; }

/* ── SHIMMER SYSTEM ───────────────────────────────────────────────────────────
   A slow-moving specular highlight that sweeps across UI surfaces, giving the
   impression of depth and a subtle living quality. All shimmer effects use
   pseudo-elements so they never affect layout.
   ─────────────────────────────────────────────────────────────────────────── */

@keyframes shimmerSweep {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(350%) skewX(-12deg); }
}
@keyframes shimmerSweepSlow {
  0%   { transform: translateX(-120%) skewX(-8deg); }
  100% { transform: translateX(420%) skewX(-8deg); }
}
@keyframes shimmerPulse {
  0%, 100% { opacity: 0; }
  50%       { opacity: 1; }
}
@keyframes shimmerEdge {
  0%   { background-position: -200% 0; }
  100% { background-position: 300% 0; }
}

/* ── Route directional flow animation ───────────────────────────────────────*/
@keyframes routeFlow {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

/* ── Persistent map shimmer animations ──────────────────────────────────────*/
/* Gentle light travelling along each route leg */
@keyframes routeShimmer {
  from { stroke-dashoffset: 120; }
  to   { stroke-dashoffset: 0; }
}
/* Pin pulse — soft glow ring breathing outward */

/* Start/end pin entrance pop */
@keyframes pinEntrance {
  0%   { transform: scale(0); opacity: 0; }
  65%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* Photo marker border shimmer sweep */
@keyframes photoMarkerShimmer {
  0%   { opacity: 0; transform: rotate(0deg); }
  25%  { opacity: 0.7; }
  75%  { opacity: 0.7; }
  100% { opacity: 0; transform: rotate(360deg); }
}
/* CSS classes injected into Leaflet divIcon HTML */
.map-pin-pulse {
  display: none; /* pulse removed — was blocking tap targets on mobile */
}
.map-pin-entrance { animation: pinEntrance 0.45s cubic-bezier(0.34,1.4,0.64,1) both;   will-change: transform, opacity;
}
.map-photo-shimmer {
  display: none; /* shimmer removed — was blocking tap targets on mobile */
}
@keyframes topbarDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* Stat numbers bump on change */
.stat-n { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.2s; }
.stat-n.bump { animation: statBump 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes statBump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); color: var(--sky); }
  100% { transform: scale(1); }
}

/* Waypoint items stagger in */
.wp-item { animation: wpSlideIn 0.28s ease both; }
@keyframes wpSlideIn {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
/* Applied to single newly-added waypoint (no stagger, immediate) */
.wp-slide-in { animation: wpSlideIn 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important; animation-delay: 0s !important; }
.wp-item:nth-child(1)  { animation-delay: 0.02s; }
.wp-item:nth-child(2)  { animation-delay: 0.05s; }
.wp-item:nth-child(3)  { animation-delay: 0.08s; }
.wp-item:nth-child(4)  { animation-delay: 0.11s; }
.wp-item:nth-child(5)  { animation-delay: 0.14s; }
.wp-item:nth-child(6)  { animation-delay: 0.17s; }
.wp-item:nth-child(7)  { animation-delay: 0.20s; }
.wp-item:nth-child(8)  { animation-delay: 0.23s; }
.wp-item:nth-child(9)  { animation-delay: 0.26s; }
.wp-item:nth-child(10) { animation-delay: 0.29s; }

/* Tab panels fade + slide */
.tab-panel { transition: opacity 0.22s ease, transform 0.22s ease; }
.tab-panel:not(.active) { display: none; }
.tab-panel.active { opacity: 1; pointer-events: all; transform: translateY(0); animation: tabPanelIn 0.22s ease both; }
@keyframes tabPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Tab active underline slides */
.tab-btn::after {
  content: ''; position: absolute; bottom: 0; left: 50%; right: 50%;
  height: 2px; background: var(--sky);
  transition: left 0.25s cubic-bezier(0.34,1.2,0.64,1), right 0.25s cubic-bezier(0.34,1.2,0.64,1);
  border-radius: 2px 2px 0 0;
}
.tab-btn.active::after { left: 0; right: 0; }

/* Button press */
.mbtn, .add-btn, .top-btn, .splash-upload-btn {
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mbtn:active, .add-btn:active, .top-btn:active { transform: scale(0.96); }

/* Input focus glow */
.form-input, .form-select, .form-textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--sky) !important;
  box-shadow: 0 0 0 3px var(--sage-14) !important;
  outline: none;
}

/* Modal pop */
.modal-box { animation: modalPop 0.3s cubic-bezier(0.34,1.4,0.64,1) both; }
@keyframes modalPop {
  from { transform: scale(0.88) translateY(16px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* Overlay fade */
#share-modal.open { animation: overlayFadeIn 0.2s ease both; }
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Toast spring */
#toast { transition: none !important; }
#toast.show { animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both !important; }
@keyframes toastIn {
  from { transform: translateX(-50%) translateY(20px) scale(0.9); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0)    scale(1);   opacity: 1; }
}

/* Stay results stagger */
.stay-item { animation: stayIn 0.25s ease both; }
@keyframes stayIn {
  from { transform: translateX(-8px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.stay-item:nth-child(1) { animation-delay: 0.03s; }
.stay-item:nth-child(2) { animation-delay: 0.07s; }
.stay-item:nth-child(3) { animation-delay: 0.11s; }
.stay-item:nth-child(4) { animation-delay: 0.15s; }
.stay-item:nth-child(5) { animation-delay: 0.19s; }

/* Booked item pop */
.booked-item { animation: bookedIn 0.32s cubic-bezier(0.34,1.4,0.64,1) both; }
@keyframes bookedIn {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Toggle arrow flips */
.toggle-arrow { display: inline-block; transition: transform 0.32s ease; }
#sidebar.collapsed ~ #sidebar-toggle .toggle-arrow { transform: rotate(180deg); }

/* Form card hover lift */
.form-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.form-card:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--sage-07); }

/* Search btn pulse while loading */
#stay-search-btn:disabled { animation: btnPulse 1.2s ease-in-out infinite; }
@keyframes btnPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Del confirm slide up */
#del-confirm.open { animation: delSlideUp 0.28s cubic-bezier(0.34,1.4,0.64,1) both; }
@keyframes delSlideUp {
  from { transform: translateY(10px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* Day header fade */
.day-header { animation: fadeUp 0.25s ease both; }

/* Stat hover */
.stat { transition: background 0.18s; }
.stat:hover { background: var(--sage-06); }

/* Map empty float */
#map-empty .em-sym { animation: emFloat 3s ease-in-out infinite; }
@keyframes emFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* Viewer badge pulse */
@keyframes badgePulse {
  0%,100% { opacity: 0.85; }
  50%     { opacity: 1; box-shadow: 0 0 12px var(--sage-30); }
}

/* Lodging cost bar slide up */
#trip-cost-bar { animation: costSlideUp 0.35s cubic-bezier(0.34,1.2,0.64,1) both; }
@keyframes costSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}


/* ── REPLAY DOT PULSE ─────────────────────────────────────────────── */
@keyframes replayPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.8); opacity: 0;   }
  100% { transform: scale(2.8); opacity: 0;   }
}
.replay-pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  animation: replayPulse 1.6s ease-out infinite;
  pointer-events: none;
}
.replay-dot-wrap {
  position: relative;
  width: 16px; height: 16px;
}
.replay-tooltip {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  background: rgba(10,20,35,0.88);
  border: 1px solid rgba(155,203,243,0.25);
  border-radius: 6px;
  padding: 3px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.5;
  text-align: center;
}
@keyframes vpBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ── Waypoint star/favorite button ─────────────────────────────────────────── */
.wp-star {
  background: none; border: none; cursor: pointer;
  padding: 3px 4px; color: rgba(155,203,243,0.25);
  font-size: 13px; line-height: 1; flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.wp-star:hover { color: rgba(242,201,76,0.7); transform: scale(1.2); }
.wp-star.starred { color: #f2c94c; }
.wp-star.starred svg { filter: drop-shadow(0 0 3px rgba(242,201,76,0.5)); }

/* ── Hide UI chrome when messages overlay is open ────────────────────────── */
body.chat-open #topbar,
body.chat-open #sidebar,
body.chat-open #sidebar-toggle,
body.chat-open #fab-group,
body.chat-open #replay-bar,
body.chat-open #replay-launch-btn,
body.chat-open #fit-all-btn,
body.chat-open #locate-me-btn,
body.chat-open #map-history-btns,
body.chat-open #basemap-toggle,
body.chat-open #slideshow-overlay,
body.chat-open #roameyo-watermark,
body.chat-open #collab-presence-ring { display: none !important; }

/* ── Chat overlay responsive ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  #chat-box {
    border-radius: 0 !important;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
  }
  #chat-contacts {
    width: 100% !important;
    max-height: 40% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(155,203,243,0.1) !important;
  }
}

@media (max-width: 600px) {
  /* ── Mobile bottom layout ────────────────────────────────────────────────
     FAB hamburger  → bottom-left,   16px margin
     Fit All        → bottom-center, 16px margin
     Status box     → bottom-center, 16px margin (upload pill, route banner, toast all share this slot)
     Hamburger menu → opens upward from FAB
  ── */

  /* Menu drops down from topbar (hamburger stays in topbar) */
  #hamburger-menu {
    top: 54px;
    bottom: auto;
    right: 0;
    left: auto;
    border-radius: 0 0 0 16px;
    border-top: none;
    max-height: calc(100vh - 60px);
    animation: hamDrop 0.18s cubic-bezier(0.22,1,0.36,1);
  }

  /* Fit All: same row as FABs */
  #fit-all-btn {
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* ── Shared status box: upload pill, route banner, toast all use bottom-center 16px ── */

  /* Upload pill → bottom-center, same slot */
  #upload-float {
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
    border-radius: 20px !important;
  }
  /* Hide upload pill when not visible (override the translateY slide) */
  #upload-float:not(.visible) {
    transform: translateX(-50%) translateY(80px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Route banner → compact pill at bottom-center */
  #route-banner {
    bottom: 16px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 220px !important;
    max-width: calc(100vw - 160px) !important; /* leave room for FAB left + basemap right */
    border-radius: 20px !important;
    border: 1px solid rgba(155,203,243,0.28) !important;
    border-bottom: 1px solid rgba(155,203,243,0.28) !important;
    padding: 10px 16px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }
  /* Hide the full-width mobile sheet styles when overriding */
  #route-banner .route-banner-top-row { display: contents; }

  /* Toast → bottom-center, same slot level */
  #toast {
    bottom: 16px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(60px) !important;
    text-align: center;
    width: auto;
    min-width: 160px;
    max-width: calc(100vw - 120px);
    white-space: nowrap;
  }
  #toast.show {
    transform: translateX(-50%) translateY(0) !important;
  }
  /* Lift toast and fit-all above the route banner pill when it's showing */
  body.route-banner-visible #toast     { bottom: 76px !important; }
  body.route-banner-visible #fit-all-btn { bottom: 76px !important; }
  /* Lift toast above fit-all button when it's visible */
  body.fit-all-visible #toast { bottom: 68px !important; }

  /* Sidebar FAB: bottom-left icon-only, sized to match map icon buttons */
  #fab-group {
    bottom: 16px;
    left: 16px;
    right: auto;
    transform: none;
    z-index: 9100;
  }
  #sidebar-fab {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    background: rgba(13,30,44,0.88);
    border: 1px solid rgba(155,203,243,0.25);
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    justify-content: center;
    gap: 0;
  }
  #sidebar-fab span { display: none; }

  /* When upload pill visible, route banner shifts up to avoid overlap */
  body.upload-pill-visible #route-banner { bottom: 70px !important; }
}
}
@keyframes hamRise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* Gallery item star button */
.gallery-star-btn {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,0.45); border: none;
  border-radius: 50%; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s, transform 0.15s;
  z-index: 2;
}
.gallery-item:hover .gallery-star-btn { opacity: 1; }
.gallery-star-btn.starred { opacity: 1; background: rgba(0,0,0,0.55); }
.gallery-star-btn:hover { transform: scale(1.15); }
@media (hover: none) { .gallery-star-btn { opacity: 1; } }

/* ── Rail thumbnail avatar overlay ─────────────────────────────────────────── */
.wp-thumb-avatar {
  position: absolute; bottom: 4px; right: 10px;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid;          /* color set inline via day color */
  background: #0d1f36;
  font-size: 0.44rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.5);
  pointer-events: none; z-index: 2;
}
.wp-thumb-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Gallery like btn uses day colour when liked */
.gallery-like-btn .like-btn.liked svg {
  fill: var(--day-col, #f2705a);
  stroke: var(--day-col, #f2705a);
}

/* Gallery item author avatar — top-left corner */
.gallery-item-avatar {
  position: absolute; bottom: 6px; left: 6px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid; /* colour set inline */
  background: #0d1f36;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.5rem; font-weight: 700;
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  opacity: 0; transition: opacity 0.18s;
}
.gallery-item:hover .gallery-item-avatar { opacity: 1; }
@media (hover: none) { .gallery-item-avatar { opacity: 1; } }
.gallery-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ── iOS NATIVE APP: hide topbar, shift layout into safe areas ── */
/* Applied when running inside the Roameyo iOS wrapper (window.isNativeApp) */

/* ── iOS NATIVE APP OVERRIDES ──────────────────────────────────────────────── */

/* Portrait: show topbar below Dynamic Island, with user info left + hamburger right */
body.ios-app:not(.ios-landscape) #topbar {
  display: flex !important;
  height: calc(52px + env(safe-area-inset-top, 54px));
  padding-top: env(safe-area-inset-top, 54px);
  padding-left: 14px;
  padding-right: 10px;
  background: rgba(14, 22, 38, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Shift sidebar, map, overlays below the iOS topbar in portrait */
body.ios-app:not(.ios-landscape) #sidebar,
body.ios-app:not(.ios-landscape) #sidebar-backdrop {
  top: calc(52px + env(safe-area-inset-top, 54px)) !important;
}
body.ios-app:not(.ios-landscape) #map,
body.ios-app:not(.ios-landscape) #map-upload-overlay {
  top: calc(52px + env(safe-area-inset-top, 54px)) !important;
}

/* Bottom icons — bump in from edges + home indicator clearance */
body.ios-app #fab-group {
  bottom: calc(20px + env(safe-area-inset-bottom, 20px)) !important;
  left: 24px !important;
}
body.ios-app #basemap-toggle {
  bottom: calc(20px + env(safe-area-inset-bottom, 20px)) !important;
  right: 24px !important;
}
@media (max-width: 600px) {
  body.ios-app #fab-group {
    left: 24px !important;
    transform: none !important;
  }
}

/* Locate-me button: push below iOS topbar so it sits over the map */
body.ios-app:not(.ios-landscape) #locate-me-btn {
  top: calc(52px + env(safe-area-inset-top, 54px) + 14px) !important;
}

/* Landscape: standard topbar */
body.ios-app.ios-landscape #topbar {
  display: flex !important;
  height: 58px;
  padding-top: 0;
}
body.ios-app.ios-landscape #sidebar,
body.ios-app.ios-landscape #sidebar-backdrop {
  top: 58px !important;
}
body.ios-app.ios-landscape #map,
body.ios-app.ios-landscape #map-upload-overlay {
  top: 58px !important;
}
body.ios-app.ios-landscape #fab-group {
  bottom: 20px !important;
  left: 20px !important;
}
body.ios-app.ios-landscape #basemap-toggle {
  bottom: 20px !important;
  right: 20px !important;
}

/* ── end iOS native app overrides ── */
/* ── JOURNEY MODE TOGGLE ─────────────────────────────────────────────────── */
#journey-mode-toggle {
  display: flex; align-items: center;
  background: rgba(155,203,243,0.04);
  border: 1px solid rgba(155,203,243,0.12);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.jm-btn {
  flex: 1; padding: 5px 8px;
  background: none; border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.04em;
  color: rgba(155,203,243,0.45);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.jm-btn:first-child { border-right: 1px solid rgba(155,203,243,0.12); }
.jm-btn.active {
  background: rgba(155,203,243,0.12);
  color: rgba(155,203,243,0.9);
}
.jm-btn svg { flex-shrink: 0; }

/* Destination mode: hide routing-specific UI */
body.destination-mode .stat-drive { display: none !important; }
body.destination-mode #route-action-row { display: none !important; }
body.destination-mode #stats-elev-section { display: none !important; }
body.destination-mode #stats-fuel-card { display: none !important; }
body.destination-mode #stats-summary-card { display: none !important; }

/* ── iOS APP: portrait — hide logo, show compact user info in topbar ──────── */
#topbar-ios-user {
  display: none;
  align-items: center; gap: 8px;
  flex-shrink: 0;
  cursor: pointer;
}
#topbar-ios-user .tiu-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(155,203,243,0.15);
  border: 1.5px solid rgba(155,203,243,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: rgba(155,203,243,0.9);
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
#topbar-ios-user .tiu-avatar img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
#topbar-ios-user .tiu-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  color: rgba(220,235,248,0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}
/* Portrait: hide logo + name, show user widget left; hamburger stays right */
body.ios-app:not(.ios-landscape) .brand { display: none !important; }
body.ios-app:not(.ios-landscape) .name-wrap { display: none !important; }
body.ios-app:not(.ios-landscape) #topbar-ios-user { display: flex !important; }
/* Landscape: show logo, hide user widget */
body.ios-app.ios-landscape #topbar-ios-user { display: none !important; }
body.ios-app.ios-landscape .brand { display: flex !important; }
/* Always show hamburger in iOS app */
body.ios-app #hamburger-btn { display: flex !important; }


/* ── Admin Panel ──────────────────────────────────────────────── */
#admin-panel * { box-sizing: border-box; }
.adm-tab { transition: color 0.15s, border-color 0.15s; }
.adm-tab.active { color:#9bcbf3 !important; border-bottom-color:#9bcbf3 !important; font-weight:600 !important; }
.adm-tab:not(.active):hover { color:rgba(255,255,255,0.65) !important; }
#adm-table th { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:rgba(155,203,243,0.45); text-transform:uppercase; letter-spacing:0.08em; padding:10px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,0.07); position:sticky; top:0; background:#080f1a; }
#adm-table td { padding:11px 12px; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.82rem; color:rgba(255,255,255,0.75); vertical-align:middle; }
#adm-table tr:hover td { background:rgba(155,203,243,0.04); }
.adm-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-family:'JetBrains Mono',monospace; font-size:0.6rem; font-weight:600; }
.adm-badge-pro { background:rgba(242,201,76,0.12); color:#f2c94c; border:1px solid rgba(242,201,76,0.25); }
.adm-badge-free { background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.3); border:1px solid rgba(255,255,255,0.1); }
.adm-badge-verified { background:rgba(126,200,160,0.12); color:#7ec8a0; border:1px solid rgba(126,200,160,0.25); }
.adm-badge-unverified { background:rgba(242,112,90,0.1); color:#f2705a; border:1px solid rgba(242,112,90,0.2); }
.adm-action-btn { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:6px; padding:4px 10px; font-size:0.72rem; cursor:pointer; color:rgba(255,255,255,0.5); transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.15s,opacity 0.15s; white-space:nowrap; }
.adm-action-btn:hover { background:rgba(155,203,243,0.12); border-color:rgba(155,203,243,0.3); color:#9bcbf3; }
.adm-action-btn.danger:hover { background:rgba(242,112,90,0.12); border-color:rgba(242,112,90,0.3); color:#f2705a; }
.adm-field label { display:block; font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:rgba(155,203,243,0.5); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:5px; }
.adm-field input[type=text], .adm-field input[type=email], .adm-field select { width:100%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:9px 12px; color:rgba(255,255,255,0.85); font-family:'Plus Jakarta Sans',sans-serif; font-size:0.82rem; outline:none; transition:border-color 0.15s; }
.adm-field input:focus, .adm-field select:focus { border-color:rgba(155,203,243,0.4); }
.adm-field select option { background:#0d1928; }
.adm-field .adm-toggle { display:flex; align-items:center; gap:10px; }
.adm-field .adm-toggle input[type=checkbox] { width:16px; height:16px; accent-color:#9bcbf3; cursor:pointer; }

/* ── Tour Overlay ─────────────────────────────────────────────── */
/* ── Overlay container ───────────────────────────────────────────────────── */
#tour-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 2147483647;  /* max int — above all backdrops and stacking contexts */
  pointer-events: none;
  isolation: isolate;
}
#tour-overlay.active { display: block; }

/* SVG backdrop replaced with four overlay panels — avoids compositing issues
   with backdrop-filter stacking contexts (sidebar, modals etc.) */
/* panels styled entirely inline via JS _setPanels() */

/* ── Tour card ───────────────────────────────────────────────────────────── */
#tour-card {
  position: absolute;
  width: 310px;
  background: linear-gradient(160deg, rgba(6,15,32,0.98) 0%, rgba(4,11,24,0.99) 100%);
  border: 1px solid rgba(155,203,243,0.30);
  border-top-color: rgba(200,230,255,0.42);
  border-radius: 18px;
  padding: 22px 22px 16px;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.75),
    0 8px 24px rgba(0,0,0,0.5),
    0 2px 0 rgba(255,255,255,0.06) inset;
  pointer-events: all;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#tour-card.t-fade { opacity: 0; transform: translateY(6px) scale(0.98); }

/* Arrow notch */
#tour-card::before {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  background: rgba(6,15,32,0.98);
  border: 1px solid rgba(155,203,243,0.30);
  transform: rotate(45deg);
  z-index: -1;
  pointer-events: none;
}
#tour-card.arr-up::before    { top: -7px; left: calc(50% - 6px); border-bottom: none; border-right: none; }
#tour-card.arr-down::before  { bottom: -7px; left: calc(50% - 6px); border-top: none; border-left: none; }
#tour-card.arr-left::before  { left: -7px; top: calc(50% - 6px); border-right: none; border-top: none; }
#tour-card.arr-right::before { right: -7px; top: calc(50% - 6px); border-left: none; border-bottom: none; }
/* Override arrow X when anchored to edge of target */
#tour-card.arr-up[data-ax]::before    { left: calc(var(--ax) - 6px); }
#tour-card.arr-down[data-ax]::before  { left: calc(var(--ax) - 6px); }

/* Header */
#tour-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
#tour-step-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(155,203,243,0.45);
  background: rgba(155,203,243,0.07);
  border: 1px solid rgba(155,203,243,0.14);
  padding: 3px 8px; border-radius: 20px;
}
#tour-x-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.22); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 2px;
  transition: color 0.15s;
}
#tour-x-btn:hover { color: rgba(255,255,255,0.55); }

/* Icon + title */
#tour-icon {
  font-size: 1.6rem; line-height: 1;
  margin-bottom: 10px; display: block;
}
#tour-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem; font-weight: 700;
  color: rgba(255,255,255,0.96);
  line-height: 1.2; margin-bottom: 10px;
}
#tour-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem; color: rgba(255,255,255,0.55);
  line-height: 1.72; margin-bottom: 18px;
}
/* Tip callout inside body */
.tour-tip {
  display: flex; gap: 8px; align-items: flex-start;
  background: rgba(155,203,243,0.06);
  border: 1px solid rgba(155,203,243,0.14);
  border-radius: 8px; padding: 8px 10px;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; color: rgba(155,203,243,0.65);
  line-height: 1.55;
}
.tour-tip-icon { flex-shrink: 0; opacity: 0.7; }
.tour-tip-text { flex: 1; min-width: 0; }

/* Progress dots */
#tour-dots {
  display: flex; gap: 5px; align-items: center;
  margin-bottom: 16px;
}
.t-dot {
  height: 5px; border-radius: 3px;
  background: rgba(155,203,243,0.15);
  width: 5px;
  transition: width 0.3s cubic-bezier(0.34,1.2,0.64,1), background 0.3s ease;
  cursor: pointer;
}
.t-dot:hover { background: rgba(155,203,243,0.35); }
.t-dot.on {
  background: rgba(155,203,243,0.85);
  width: 18px;
}

/* Buttons row */
#tour-btns {
  display: flex; gap: 8px; align-items: stretch;
}
#tour-prev-btn {
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: rgba(255,255,255,0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#tour-prev-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); }
#tour-prev-btn:disabled { opacity: 0.2; cursor: default; }
#tour-next-btn {
  flex: 1;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(155,203,243,0.22), rgba(155,203,243,0.14));
  border: 1px solid rgba(155,203,243,0.38);
  border-radius: 10px;
  color: rgba(255,255,255,0.92);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#tour-next-btn:hover {
  background: linear-gradient(90deg, rgba(155,203,243,0.32), rgba(155,203,243,0.22));
  border-color: rgba(155,203,243,0.6);
  box-shadow: 0 0 20px rgba(155,203,243,0.15);
}
/* Final step: gold CTA */
#tour-next-btn.tour-final {
  background: linear-gradient(90deg,#e8a820,#f2c94c,#e8a820);
  background-size: 200% auto;
  animation: proNameShimmer 3s linear infinite;
  border-color: transparent;
  color: #1a0e00;
}
#tour-skip-row {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 10px;
}
#tour-skip-link, #tour-later-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; color: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: underline; text-underline-offset: 3px;
}
#tour-skip-link:hover, #tour-later-link:hover { color: rgba(155,203,243,0.55); }
#tour-skip-link:hover { color: rgba(255,255,255,0.45); }

/* ── Pulse ring on spotlight target ────────────────────────────────────────── */
@keyframes tourPulse {
  0%   { opacity: 0.7; transform: scale(1); }
  80%  { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #tour-card {
    width: calc(100vw - 28px) !important;
    left: 14px !important;
  }
  #tour-card::before { display: none !important; }
  #tour-body { font-size: 0.77rem; }
}
/* ── Day label circles on route midpoints ───────────────────────────────── */
.day-label-icon {
  background: none !important;
  border: none !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55));
  transition: opacity 0.2s;
}
.day-label-icon:hover { opacity: 0.75; }

/* ── 3D Globe overlay ───────────────────────────────────────────────────────── */
#world-map-overlay {
  transition: opacity 0.6s ease;
}
#globe-canvas {
  display: block;
  touch-action: none; /* prevent scroll hijacking on mobile */
}
#world-map-legend {
  animation: globeLegendIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both;
}
@keyframes globeLegendIn {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Globe view — hide irrelevant UI ──────────────────────────────────────── */
/* Always hidden during globe view */
body.globe-view .name-wrap           { display: none !important; }
body.globe-view #share-btn           { display: none !important; }
body.globe-view #journey-action-btns { display: none !important; }
body.globe-view #journey-rating-wrap { display: none !important; }
body.globe-view #autosave-indicator  { display: none !important; }
body.globe-view #edit-mode-badge     { display: none !important; }
body.globe-view #globe-back-btn      { display: none !important; }
body.globe-view #hamburger-btn       { display: none !important; }
body.globe-view #hamburger-menu      { display: none !important; }
body.globe-view #fab-group           { display: none !important; }
body.globe-view #sidebar-fab         { display: none !important; }
/* Only hidden for guests (not logged in) */
body.globe-view:not(.logged-in) #sidebar          { display: none !important; }
body.globe-view:not(.logged-in) #sidebar-toggle   { display: none !important; }
body.globe-view:not(.logged-in) #sidebar-backdrop { display: none !important; }
body.globe-view #globe-topbar-back  { display: flex !important; }
/* Logged-in users keep sidebar toggle visible in globe view */
body.globe-view.logged-in #sidebar-toggle {
  display: flex !important;
}
/* Only pin to left edge when sidebar is collapsed — let it slide normally when open */
body.globe-view.logged-in #sidebar-toggle.collapsed {
  left: 0 !important;
  transform: translateY(-50%) !important;   /* cancel the translateX(-370px) */
  border-left: 1px solid rgba(242,201,76,0.18) !important;
}

/* ── Globe mobile fixes ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hide right rail on mobile by default — too small to share space */
  #globe-rail     { transform: translateX(300px) !important; }
  #globe-rail-tab { display: block !important; }
  /* Push legend to avoid bottom safe area */
  #world-map-legend { bottom: env(safe-area-inset-bottom, 24px) !important; }
}