/* =========================================================
   Japan 2026 — custom theme layered on top of Bootstrap 5
   Light/dark via semantic tokens. Brand hues stay constant;
   surface/text/border tokens swap per theme. Default follows
   the OS (prefers-color-scheme); an explicit data-theme wins.
   ========================================================= */
/* ---------- Self-hosted fonts (woff2, latin subset; offline-resilient, no CDN) ----------
   Inter = body/UI workhorse; Outfit = friendly geometric display for headings/brand. */
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family:"Outfit"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family:"Outfit"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/outfit-700.woff2") format("woff2"); }

:root {
  /* Type roles */
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Brand palette (constant across themes) */
  --sea: #2f8f7a;          /* secondary accent: trust / ocean (progress, positive) */
  --sea-dark: #227d69;
  --sea-soft-bg: #e3f1ed;
  --jp-vermillion: #d94f3d;
  --jp-vermillion-dark: #b83e2e;
  --jp-indigo: #2b3a67;
  --jp-indigo-deep: #1e2947;
  --jp-radius: 16px;

  /* Semantic tokens — LIGHT */
  --jp-paper: #f6f4ef;   /* page background */
  --surface: #ffffff;    /* cards, tiles */
  --surface-2: #faf8f3;  /* form panels, chips */
  --jp-ink: #1f2430;     /* primary text */
  --jp-ink-soft: #6b7280;/* secondary text */
  --jp-line: #e7e2d8;    /* borders / dividers */
  --input-border: #d9d3c7;
  --shadow: rgba(31,36,48,0.06);
  --badge-daytrip-bg: #fdeae6;
  --badge-indigo-bg: #eef1f8;
  --badge-ryokan-bg: #f5efdd; --badge-ryokan-fg: #8a6d1a;
  --badge-neutral-bg: #ececec; --badge-neutral-fg: #555;
  --icon-hover-bg: #f6ece9;
  --danger-hover-bg: #fdecec;
}

/* Dark tokens, applied when the OS prefers dark AND the user
   hasn't explicitly chosen light, OR when data-theme=dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jp-paper: #121419;
    --surface: #1b1f27;
    --surface-2: #232833;
    --jp-ink: #e6e8ee;
    --jp-ink-soft: #9aa3b2;
    --jp-line: #2e343f;
  --sea-soft-bg: #16302b;
    --input-border: #3a4150;
    --shadow: rgba(0,0,0,0.35);
    --badge-daytrip-bg: #3a2420;
    --badge-indigo-bg: #232a3d;
    --badge-ryokan-bg: #3a3320; --badge-ryokan-fg: #d8b558;
    --badge-neutral-bg: #2c313c; --badge-neutral-fg: #aab2c0;
    --icon-hover-bg: #2a2320;
    --danger-hover-bg: #3a2323;
  }
}
:root[data-theme="dark"] {
  --jp-paper: #121419;
  --surface: #1b1f27;
  --surface-2: #232833;
  --jp-ink: #e6e8ee;
  --jp-ink-soft: #9aa3b2;
  --jp-line: #2e343f;
  --sea-soft-bg: #16302b;
  --input-border: #3a4150;
  --shadow: rgba(0,0,0,0.35);
  --badge-daytrip-bg: #3a2420;
  --badge-indigo-bg: #232a3d;
  --badge-ryokan-bg: #3a3320; --badge-ryokan-fg: #d8b558;
  --badge-neutral-bg: #2c313c; --badge-neutral-fg: #aab2c0;
  --icon-hover-bg: #2a2320;
  --danger-hover-bg: #3a2323;
}

html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: transparent; }

/* Never scroll horizontally (iOS Safari lets the fixed decorative hero overflow). */
html, body { overflow-x: hidden; max-width: 100%; }
/* App-like feel on mobile: no double-tap-to-zoom and no tap delay (pinch is blocked
   via the viewport meta + a small iOS gesture guard, since iOS ignores user-scalable). */
html { touch-action: manipulation; }

body {
  background: var(--jp-paper);
  color: var(--jp-ink);
  font-family: var(--font-body);
}

/* Display "speaker" for the largest titles + brand; everything smaller stays Inter for
   on-screen legibility. Use .font-display to opt other elements (trip names) in. */
h1, h2, .navbar-brand, .font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.15;
}
h1 { font-weight: 600; }

/* App-like touches: subtle press feedback, sticky top bar */
.navbar-jp { position: sticky; top: 0; z-index: 1020; }
.btn:active, .bottom-tabs a:active, .bottom-tabs button:active,
.more-grid a:active, .stat-link:active, .card.h-100:active { transform: scale(0.98); }
.btn, .bottom-tabs a, .bottom-tabs button, .more-grid a { transition: transform .06s ease; }

/* ---------- Mobile bottom tab bar (app feel) ---------- */
.bottom-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: flex; background: var(--surface);
  border-top: 1px solid var(--jp-line);
  box-shadow: 0 -2px 14px var(--shadow);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-tabs a, .bottom-tabs button {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 2px 6px; background: none; border: none;
  color: var(--jp-ink-soft); font-size: 0.66rem; font-weight: 600;
  text-decoration: none; position: relative;
}
.bottom-tabs a span, .bottom-tabs button span:not(.tab-dot) {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bottom-tabs .lucide { width: 22px; height: 22px; }
.bottom-tabs .active { color: var(--jp-vermillion); }
.bottom-tabs .tab-dot {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--jp-vermillion);
}
@media (max-width: 991.98px) {
  body.has-tabs { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
@media (min-width: 992px) { .bottom-tabs { display: none !important; } }

/* Mobile floating action button: primary "add" for the current screen (thumb zone) */
.fab {
  position: fixed; right: 16px; z-index: 1031;
  bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--jp-vermillion); color: #fff;
  box-shadow: 0 6px 18px rgba(31,36,48,0.28);
  text-decoration: none; border: none;
  transition: transform .08s ease, background .15s ease;
}
.fab:hover, .fab:focus-visible { color: #fff; background: var(--jp-vermillion-dark); }
.fab:active { transform: scale(0.92); }
.fab .lucide { width: 28px; height: 28px; }
@media (min-width: 992px) { .fab { display: none !important; } }

/* "More" sheet grid */
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.more-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px; border-radius: 12px; text-align: center;
  color: var(--jp-ink); text-decoration: none; font-size: 0.72rem; line-height: 1.15;
}
.more-grid a:hover, .more-grid a:active { background: var(--surface-2); }
.more-grid .lucide { width: 24px; height: 24px; color: var(--jp-vermillion); }

/* Theme toggle button in the navbar */
.theme-toggle {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  background: none;
  border-radius: 30px;
  padding: 4px 10px;
  display: inline-flex;
  align-items: center;
}
.theme-toggle:hover { background: rgba(255,255,255,0.15); color: #fff; }
.theme-toggle .lucide { width: 16px; height: 16px; }

/* ---------- Navbar ---------- */
.navbar-jp {
  background: var(--jp-indigo-deep);
}
.navbar-jp .navbar-brand {
  font-weight: 800;
  letter-spacing: 0.02em;
}
.navbar-jp .navbar-brand .sun { color: #ff8a75; }
.navbar-jp .nav-link {
  color: #cdd5ea;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 8px 12px;
  white-space: nowrap;
}
.navbar-jp .dropdown-toggle { color: #cdd5ea; }
.navbar-jp .dropdown-toggle:hover { color: #fff; }
/* On mobile the account menu expands inline in the hamburger — blend it into
   the dark navbar and give items comfortable tap targets. */
@media (max-width: 991.98px) {
  /* Flatten the account dropdown into inline links inside the hamburger —
     no nested tap-to-open, which is unreliable on phones. */
  .navbar-jp .account-menu .dropdown-menu {
    display: block !important;      /* always shown inline on mobile */
    position: static !important;
    float: none;
    background: transparent; border: none; box-shadow: none; padding: 0 0 0 .5rem;
    transform: none !important; inset: auto !important;
  }
  .navbar-jp .dropdown-item { color: #cdd5ea; padding: 10px 12px; border-radius: 10px; }
  .navbar-jp .dropdown-item:hover,
  .navbar-jp .dropdown-item:focus { background: rgba(255,255,255,0.08); color: #fff; }
  .navbar-jp .dropdown-item .lucide { color: inherit; }
  .navbar-jp .dropdown-divider { border-color: rgba(255,255,255,0.18); }
  .navbar-jp .nav-link { padding: 10px 12px; }   /* bigger tap targets on phones */
  .trip-pill { max-width: 100%; }
}
.trip-pill { max-width: 180px; }
.trip-pill .text-truncate { max-width: 140px; }
.navbar-jp .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
.navbar-jp .nav-link.active {
  color: #fff;
  background: rgba(217, 79, 61, 0.35);
}
.navbar-jp .lucide { width: 18px; height: 18px; }

.lang-pill {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff !important;
  border-radius: 30px;
  padding: 4px 14px !important;
  font-size: 0.85rem;
  font-weight: 700;
}
.lang-pill:hover { background: rgba(255,255,255,0.15); }

/* ---------- General ---------- */
.page-wrap { max-width: 1080px; }
/* The social feed uses a wider shell so its center column reads like Facebook's (~690px). */
.page-feed { max-width: 1280px; }

.card {
  background: var(--surface);
  border: 1px solid var(--jp-line);
  border-radius: var(--jp-radius);
  box-shadow: 0 2px 12px var(--shadow);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--jp-line);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header .lucide { width: 20px; height: 20px; color: var(--jp-vermillion); }

.btn-jp {
  background: var(--jp-vermillion);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.btn-jp:hover { background: var(--jp-vermillion-dark); color: #fff; }
.btn-jp .lucide { width: 17px; height: 17px; }

.btn-outline-jp {
  border: 1.5px solid var(--jp-vermillion);
  color: var(--jp-vermillion);
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-outline-jp:hover { background: var(--jp-vermillion); color: #fff; }
.btn-outline-jp.active,
.btn-check:checked + .btn-outline-jp { background: var(--jp-vermillion); color: #fff; border-color: var(--jp-vermillion); }
.btn-outline-jp .lucide { width: 16px; height: 16px; }

.icon-btn {
  color: var(--jp-ink-soft);
  background: none;
  border: none;
  padding: 4px;
  border-radius: 8px;
  display: inline-flex;
}
.icon-btn:hover { color: var(--jp-vermillion); background: var(--icon-hover-bg); }
.icon-btn.danger:hover { color: #e06666; background: var(--danger-hover-bg); }
.icon-btn .lucide { width: 17px; height: 17px; }

/* ---------- Hero (dashboard) ---------- */
.hero {
  background: var(--jp-indigo-deep);
  color: #fff;
  border-radius: 20px;
  padding: 44px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero .big {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
}
.hero .big .accent { color: #ff8a75; }
.hero p { color: #c6cfe8; margin: 8px 0 0; }

/* Map hero: the route map as the hero background, countdown overlaid */
.hero-map { padding: 0; }
.hero-map #heroMap {
  height: 300px;
  filter: saturate(0.75);
}
@media (max-width: 767.98px) {
  .hero-map #heroMap { height: 200px; }
}
.hero-map .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 500; /* above leaflet tiles/markers */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(30, 41, 71, 0.55);
  pointer-events: none;
  padding: 24px;
}
.hero-map .hero-overlay .big,
.hero-map .hero-overlay p { text-shadow: 0 2px 10px rgba(15,18,36,0.7); }
.hero-map .hero-overlay a {
  pointer-events: auto;
  color: #fff;
  font-size: 0.85rem;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 30px;
  padding: 4px 14px;
  margin-top: 12px;
  text-decoration: none;
}
.hero-map .hero-overlay a:hover { background: rgba(255,255,255,0.15); }

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--jp-line);
  border-radius: var(--jp-radius);
  padding: 18px 10px;
  text-align: center;
  height: 100%;
}
.stat-tile .lucide { width: 22px; height: 22px; color: var(--jp-vermillion); margin-bottom: 6px; }
.stat-tile .num { font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat-tile .lbl { color: var(--jp-ink-soft); font-size: 0.83rem; }
.stat-link { color: var(--jp-ink); }
.stat-link:hover {
  border-color: var(--jp-vermillion);
  box-shadow: 0 2px 12px rgba(217, 79, 61, 0.18);
  color: var(--jp-ink);
}

/* ---------- Route timeline ---------- */
.route-item {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--jp-line);
  align-items: center;
}
.route-item:last-child { border-bottom: none; }
.route-dot {
  flex: 0 0 30px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  line-height: 1;
  border-radius: 50%;
  background: var(--jp-vermillion);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.route-item.past .route-dot { background: var(--jp-ink-soft); opacity: .6; }
.route-item.current .route-dot { background: var(--jp-indigo); outline: 3px solid rgba(43,58,103,0.25); }
.route-name { font-weight: 700; }
.route-dates { margin-left: auto; color: var(--jp-ink-soft); font-size: 0.86rem; text-align: right; white-space: nowrap; }

/* ---------- Itinerary ---------- */
.dest-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dest-header h2 { font-size: 1.25rem; font-weight: 800; margin: 0; }
.dest-header .lucide { color: var(--jp-vermillion); }

.act-row {
  display: flex;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px dashed var(--jp-line);
  align-items: flex-start;
}
.act-row:last-child { border-bottom: none; }
.act-when {
  flex: 0 0 120px;
  color: var(--jp-ink-soft);
  font-size: 0.85rem;
  padding-top: 2px;
}
.act-icon { flex: 0 0 auto; padding-top: 2px; }
.act-icon .lucide { width: 18px; height: 18px; color: var(--jp-vermillion); }
.act-title { font-weight: 600; }
.act-details { color: var(--jp-ink-soft); font-size: 0.88rem; }
.act-tools { margin-left: auto; white-space: nowrap; }
@media (max-width: 575px) {
  .act-row { flex-wrap: wrap; }
  .act-when { flex-basis: calc(100% - 40px); order: -1; }
}

/* ---------- Badges / chips ---------- */
.badge-daytrip { background: var(--badge-daytrip-bg); color: var(--jp-vermillion); font-weight: 700; }
.badge-soft-indigo { background: var(--badge-indigo-bg); color: var(--jp-ink); font-weight: 600; }
.badge-ryokan { background: var(--badge-ryokan-bg); color: var(--badge-ryokan-fg); font-weight: 600; }
.badge-neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); font-weight: 600; }

.code-chip {
  font-family: "Cascadia Code", Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--jp-line);
  padding: 2px 9px;
  border-radius: 8px;
  font-size: 0.83rem;
  white-space: nowrap;
}

/* ---------- Tables ---------- */
.table > :not(caption) > * > * { padding: 0.7rem 0.6rem; }
.table thead th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--jp-ink-soft);
  white-space: nowrap;
}

/* ---------- Modal forms: centered dialog on desktop, bottom sheet on mobile ---------- */
.modal-content { border: 1px solid var(--jp-line); border-radius: var(--jp-radius); background: var(--surface); }
.modal-header, .modal-footer { border-color: var(--jp-line); }
.modal-title { font-weight: 700; }

@media (max-width: 575.98px) {
  /* Slide up from the bottom and dock to the edge like a native sheet. */
  .modal.sheet-sm .modal-dialog {
    margin: 0; position: fixed; left: 0; right: 0; bottom: 0; max-width: none; height: auto;
    max-height: 92vh; max-height: 92dvh;
    transform: translateY(100%); transition: transform .25s ease;
  }
  .modal.sheet-sm.show .modal-dialog { transform: none; }
  /* Column layout with a hard cap so the header + scrollable body + footer always fit and the
     Save/Cancel footer is never pushed off-screen. dvh tracks the real (URL-bar-aware) height
     on iOS; vh is the fallback for older browsers. */
  .modal.sheet-sm .modal-content {
    display: flex; flex-direction: column;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    border-top-left-radius: 18px; border-top-right-radius: 18px;
    max-height: 92vh; max-height: 92dvh; overflow: hidden;
  }
  .modal.sheet-sm .modal-header,
  .modal.sheet-sm .modal-footer { flex: 0 0 auto; }
  /* Cap the body directly (leaving room for header + footer) so it scrolls and the footer stays
     on screen, without depending on flex-shrink resolving a max-height container. */
  .modal.sheet-sm .modal-body {
    max-height: calc(92vh - 140px); max-height: calc(92dvh - 140px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .modal.sheet-sm .modal-footer { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
  /* A small grab handle to signal the sheet is draggable/dismissible. */
  .modal.sheet-sm .modal-header { position: relative; justify-content: center; }
  .modal.sheet-sm .modal-header::before {
    content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--jp-line);
  }
}

/* ---------- Forms ---------- */
.form-panel {
  background: var(--surface-2);
  border: 1px solid var(--jp-line);
  border-radius: var(--jp-radius);
}
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--jp-ink-soft); margin-bottom: 4px; }
.form-control, .form-select { border-radius: 10px; border-color: var(--input-border); }
.form-control:focus, .form-select:focus {
  border-color: var(--jp-vermillion);
  box-shadow: 0 0 0 0.2rem rgba(217,79,61,0.15);
}

/* ---------- Login ---------- */
.login-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jp-paper);   /* clean, theme-aware; card stands out via shadow */
  padding: 16px;
}
.login-card {
  max-width: 400px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  border: none;
}
.login-emblem {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--jp-vermillion);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
.login-emblem .lucide { width: 30px; height: 30px; }

/* Hide the LastPass in-field icon on the fields we opt out of (they carry data-lpignore,
   which also stops LastPass auto-filling). Scoped to those inputs only, so LastPass keeps
   working normally on the real login / password fields. LastPass injects the icon as the
   input's background-image; newer versions use an extension-owned overlay element that a
   site cannot target without affecting every field, so those remain LastPass-controlled. */
input[data-lpignore="true"] { background-image: none !important; }

/* ---------- Airport autocomplete ---------- */
.airport-wrap { position: relative; }
.airport-ac {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1080;
  background: var(--jp-paper); border: 1px solid var(--jp-line);
  border-radius: 10px; margin-top: 4px; max-height: 260px; overflow-y: auto;
  box-shadow: 0 10px 30px var(--shadow);
}
.airport-item { padding: 8px 12px; cursor: pointer; font-size: 0.9rem; color: var(--jp-ink); }
.airport-item span { color: var(--jp-ink-soft); font-size: 0.82rem; }
.airport-item:hover, .airport-item.active { background: var(--surface-2); }

/* Auth pages: light/dark toggle icon, placed inside the card under the language switch. */
.auth-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--jp-line); background: var(--surface-2);
  color: var(--jp-ink-soft); cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.auth-theme-toggle:hover, .auth-theme-toggle:focus-visible {
  color: var(--jp-vermillion); border-color: var(--jp-vermillion);
}
.auth-theme-toggle .lucide { width: 17px; height: 17px; }
/* Show moon in light mode (tap for dark), sun in dark mode (tap for light). */
.auth-theme-toggle .th-dark { display: none; }
:root[data-theme="dark"] .auth-theme-toggle .th-light { display: none; }
:root[data-theme="dark"] .auth-theme-toggle .th-dark { display: inline-flex; }

/* ---------- Onboarding wizard ---------- */
.onb-card { max-width: 560px; }
.onb-dots { display: inline-flex; gap: 6px; }
.onb-dot { width: 24px; height: 4px; border-radius: 2px; background: var(--jp-line); }
.onb-dot.on { background: var(--jp-vermillion); }
.onb-avatar {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; letter-spacing: .5px; color: #fff;
  box-shadow: 0 4px 14px var(--shadow);
}
.onb-color-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.onb-color { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.onb-color.sel { border-color: var(--jp-ink); }
.onb-tour { overflow: hidden; }
.onb-track { display: flex; transition: transform .3s ease; }
.onb-slide { min-width: 100%; box-sizing: border-box; text-align: center; padding: 12px 6px 4px; }
.onb-slide-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--jp-vermillion);
}
.onb-slide-icon .lucide { width: 30px; height: 30px; }
.onb-tour-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.onb-tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jp-line); }
.onb-tour-dot.on { background: var(--jp-vermillion); }

/* ---------- Shared links ---------- */
.link-preview {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.link-preview .yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-preview .yt-play {
  position: absolute;
  width: 58px; height: 40px;
  border: none; border-radius: 12px;
  background: #c4302b; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.link-preview .yt-play .lucide { width: 26px; height: 26px; }
/* Branded banner for non-YouTube links (solid colors, no gradient) */
.link-banner {
  aspect-ratio: 16 / 6;
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  color: #fff; font-weight: 700; letter-spacing: .02em;
}
.link-banner .lucide { width: 30px; height: 30px; }
.plat-youtube   { background: #c4302b; }
.plat-tiktok    { background: #101317; }
.plat-instagram { background: #d6336c; }
.plat-website   { background: var(--jp-indigo); }
.link-preview .link-badge {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(16,19,23,0.82); color: #fff;
  font-size: .72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.link-preview .link-badge .lucide { width: 13px; height: 13px; }

/* ---------- Account: password meter + availability hints ---------- */
.pw-meter { margin-top: 6px; }
.pw-meter-bar { display: flex; gap: 4px; }
.pw-meter-bar span {
  flex: 1; height: 4px; border-radius: 2px; background: var(--jp-line);
  transition: background 0.15s ease;
}
.pw-meter-label { margin-top: 3px; font-weight: 600; }
.pw-confirm-note { margin-top: 4px; }
.username-note { margin-top: 4px; min-height: 1.1em; }
.username-note.is-ok { color: #1e7a46; }
.username-note.is-bad { color: #c0392b; }
.username-note.is-checking { color: var(--jp-ink-soft); }
.username-suggest { font-weight: 600; }

/* ---------- Misc ---------- */
.lucide { vertical-align: -0.15em; }
.footer-note { color: var(--jp-ink-soft); font-size: 0.8rem; text-align: center; padding: 30px 0 20px; }

/* Clickable lodging summary cards (whole card links to the detail page) */
.lodging-card { transition: border-color .12s ease, box-shadow .12s ease; }
.lodging-card:hover { border-color: var(--jp-vermillion); box-shadow: 0 4px 14px var(--shadow); }

/* Profile photo cropper overlay (drag to reposition, slider to zoom) */
.crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 20, 35, 0.6);
  padding: 1rem;
}
.crop-overlay.open { display: flex; }
.crop-panel {
  background: var(--surface);
  border-radius: 14px;
  padding: 1.25rem;
  width: 320px;
  max-width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.crop-stage {
  position: relative;
  width: 260px;
  height: 260px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #1a1f2e;
  touch-action: none;
}
.crop-stage canvas { display: block; cursor: grab; }
.crop-stage canvas:active { cursor: grabbing; }
/* Circular guide: darkens everything outside the crop circle */
.crop-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ---------- Profile showcase: top travel photos + top buddies ---------- */
/* Buddy grid (display) */
.buddy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: .75rem; }
.buddy-cell { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: inherit; }
.buddy-cell:hover .buddy-name { text-decoration: underline; }
.buddy-name { font-size: .74rem; text-align: center; line-height: 1.15; color: var(--jp-ink); max-width: 84px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Photo showcase grid (display) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.gallery-cell { position: relative; }
.gallery-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; cursor: pointer;
  display: block; transition: transform .12s ease; }
.gallery-thumb:hover { transform: scale(1.02); }
.gallery-cap { font-size: .72rem; color: var(--jp-ink-soft); margin-top: .25rem; line-height: 1.15; }

/* Lightbox */
.lightbox-fig { max-width: 92vw; max-height: 90vh; text-align: center; }
#lightboxImg { max-width: 92vw; max-height: 80vh; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.lightbox-cap { color: #fff; margin-top: .6rem; font-size: .9rem; }
.lightbox-close { position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.lightbox-close:hover { background: rgba(0,0,0,.75); }
.gallery-thumb:focus-visible { outline: 3px solid var(--jp-vermillion); outline-offset: 2px; }

/* Info / locked notices: a neutral panel that reads clearly in light AND dark theme
   (Bootstrap's .alert-light nearly vanishes under data-bs-theme=dark). */
.alert-light { background: var(--surface-2); border-color: var(--jp-line); color: var(--jp-ink); }

/* Photo manager (edit) */
.gallery-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.gal-existing, .gal-new { position: relative; }
.gal-existing img, .gal-new img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; }
.gal-del-label { display: flex; align-items: center; gap: .25rem; font-size: .72rem; margin-top: .25rem; cursor: pointer; color: var(--jp-vermillion); }
.gal-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
/* Loading skeleton while an image is downscaled client-side (no gradient: solid pulse + spinner) */
.gal-new.gal-loading { aspect-ratio: 1 / 1; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--jp-line); animation: gal-pulse 1.1s ease-in-out infinite; }
@keyframes gal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.gal-spin { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border-radius: 50%; border: 3px solid var(--jp-line); border-top-color: var(--jp-vermillion);
  animation: gal-spin 0.8s linear infinite; }
@keyframes gal-spin { to { transform: rotate(360deg); } }

/* Buddy picker (edit) */
.buddy-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .4rem; }
.buddy-pick { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--jp-line, #e4e4e7);
  border-radius: 10px; cursor: pointer; }
.buddy-pick input { flex: 0 0 auto; }
.buddy-pick:has(input:checked) { border-color: var(--jp-indigo); background: rgba(43,58,103,.06); }
.buddy-pick input:disabled ~ span { opacity: .5; }

/* ---------- Social timeline ---------- */
.feed-wrap { max-width: 600px; }

/* ---------- Home (social base screen: feed + rails) ---------- */
/* Wider center column (Facebook-style): the 1fr center grows with the container max-width.
   ~1280 - 250 - 300 - 2*18 gap = ~694px center. */
.home-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 18px; align-items: start; max-width: 1280px; margin: 0 auto; }
.home-grid--feed { grid-template-columns: minmax(0, 1fr); max-width: 700px; }
.home-center { min-width: 0; }
.home-center .feed-wrap { max-width: none; width: 100%; margin: 0; }
.home-rail { flex-direction: column; gap: 16px; position: sticky; top: 1rem; align-self: start; }
@media (max-width: 991.98px) { .home-grid { grid-template-columns: 1fr; max-width: 620px; } }

.home-pcard .card-body { display: flex; flex-direction: column; align-items: center; }
.home-stats { display: flex; width: 100%; border-top: 1px solid var(--jp-line); margin-top: 14px; }
.home-stats a { flex: 1; text-align: center; padding: 10px 0 4px; color: inherit; text-decoration: none; }
.home-stats a + a { border-left: 1px solid var(--jp-line); }
.home-stats b { display: block; font-size: 1.05rem; }
.home-stats span { font-size: .66rem; color: var(--jp-ink-soft); text-transform: uppercase; letter-spacing: .05em; }

.home-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.home-ph { aspect-ratio: 1; border-radius: 8px; background: var(--jp-line) center/cover no-repeat; display: block; }
.home-ph.more { display: grid; place-items: center; color: var(--jp-ink-soft); font-weight: 700; font-size: .9rem; }

.home-person { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: inherit; text-decoration: none; }
.home-person + .home-person { border-top: 1px solid var(--jp-line); }
.home-person .who b { display: block; font-size: .9rem; line-height: 1.2; }
.home-person .who small { color: var(--jp-ink-soft); font-size: .76rem; }

.home-trip { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.home-badge { background: var(--jp-vermillion); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.home-bar { height: 6px; width: 100%; border-radius: 999px; background: var(--jp-line); overflow: hidden; }
.home-bar i { display: block; height: 100%; background: var(--sea); }
.home-invite { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.home-invite + .home-invite { border-top: 1px solid var(--jp-line); }
.home-invite .who b { display: block; font-size: .88rem; line-height: 1.2; }
.home-invite .who small { color: var(--jp-ink-soft); font-size: .75rem; }

/* Mobile highlights strip */
.home-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; scrollbar-width: none; }
.home-strip::-webkit-scrollbar { display: none; }
.home-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--jp-line); border-radius: 12px; padding: 8px 12px; color: inherit; text-decoration: none; box-shadow: 0 2px 12px var(--shadow); }
.home-chip [data-lucide] { width: 17px; height: 17px; color: var(--jp-vermillion); }
.home-chip b { font-size: .76rem; display: block; line-height: 1.2; }
.home-chip small { display: block; color: var(--jp-ink-soft); font-size: .68rem; }

/* ---------- Getting-started guide (in-workspace product demo) ---------- */
.gs-card { border-color: var(--jp-vermillion); }
.gs-rocket { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--jp-vermillion); color: #fff; display: grid; place-items: center; }
.gs-rocket .lucide { width: 19px; height: 19px; }
.gs-hide { border: 0; background: transparent; color: var(--jp-ink-soft); border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.gs-hide:hover { background: var(--icon-hover-bg); color: var(--jp-ink); }
.gs-progress { display: flex; align-items: center; gap: 10px; }
.gs-bar { flex: 1; height: 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--jp-line); overflow: hidden; }
.gs-bar i { display: block; height: 100%; background: var(--sea); transition: width .3s ease; }
.gs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.gs-step { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--jp-line); border-radius: 12px; text-decoration: none; color: inherit; background: var(--surface-2); transition: border-color .12s ease, transform .06s ease; }
.gs-step:hover { border-color: var(--jp-vermillion); }
.gs-step:active { transform: scale(.99); }
.gs-mark { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--jp-vermillion); }
.gs-mark .lucide { width: 16px; height: 16px; }
.gs-step.done .gs-mark { background: var(--sea); }
.gs-step.done .gs-text b { color: var(--jp-ink-soft); text-decoration: line-through; }
.gs-text { min-width: 0; flex: 1; }
.gs-text b { display: block; font-size: .9rem; line-height: 1.2; }
.gs-text small { color: var(--jp-ink-soft); font-size: .76rem; }
.gs-go { flex: 0 0 auto; width: 16px; height: 16px; color: var(--jp-ink-soft); }

/* ---------- Trip Expenses ---------- */
.exp-pos { color: var(--sea-dark); }
:root[data-theme="dark"] .exp-pos, .exp-pos { color: var(--sea); }
.exp-cat { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--jp-line); display: grid; place-items: center; color: var(--jp-ink-soft); }
.exp-cat .lucide { width: 18px; height: 18px; }
.exp-row .min-w-0 { min-width: 0; }
.exp-parts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.exp-part { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--jp-line); background: var(--surface-2); border-radius: 999px; padding: 5px 12px; font-size: .86rem; cursor: pointer; }
.exp-part:has(input:checked) { border-color: var(--jp-vermillion); color: var(--jp-ink); }
.exp-part input { accent-color: var(--jp-vermillion); }

/* Facebook-style camera badge to update the profile photo */
.avatar-editable { position: relative; display: inline-block; line-height: 0; }
.avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--jp-vermillion); color: #fff; border: 2px solid var(--surface); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); transition: background .12s ease, transform .12s ease; padding: 0; }
.avatar-cam:hover { background: var(--jp-vermillion-dark); transform: scale(1.06); }
.avatar-cam i { width: 15px; height: 15px; }
.avatar-cam.busy { pointer-events: none; opacity: .6; }
.avatar-cam.busy i { animation: avspin 1s linear infinite; }
@keyframes avspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .avatar-cam.busy i { animation: none; } }
.compose-prompt { transition: border-color .12s ease; }
.compose-prompt:hover { border-color: var(--jp-vermillion); }
.post-card .post-author { color: var(--jp-ink); }
.post-body { white-space: normal; overflow-wrap: anywhere; }
.post-body a { color: var(--jp-vermillion); text-decoration: none; }
.post-body a:hover { text-decoration: underline; }
.min-w-0 { min-width: 0; }

/* Post media grid (1-4 images) */
.post-media { display: grid; gap: 3px; border-radius: 12px; overflow: hidden; margin-bottom: .25rem; }
.post-media.n1 { grid-template-columns: 1fr; }
.post-media.n2 { grid-template-columns: 1fr 1fr; }
.post-media.n3 { grid-template-columns: 1fr 1fr; }
.post-media.n3 .post-media-img:first-child { grid-row: span 2; }
.post-media.n4 { grid-template-columns: 1fr 1fr; }
.post-media-img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; cursor: pointer; display: block; }
.post-media.n1 .post-media-img { aspect-ratio: 16 / 10; }

/* Reshared/quoted original */
.post-quote { border: 1px solid var(--jp-line); border-radius: 10px; padding: .6rem .75rem; margin-top: .25rem; background: var(--surface-2); }
.post-quote:hover { border-color: var(--jp-vermillion); }

/* Engagement bar */
.post-actions .btn { color: var(--jp-ink-soft); border: none; background: none; }
.post-actions .btn:hover { color: var(--jp-vermillion); }
.btn-icon-text { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; }
/* Heart like: outline by default, filled red once you've liked it (TikTok/Instagram). */
.btn-like svg { transition: transform .12s ease; }
.btn-like:hover svg { transform: scale(1.15); }
.btn-like.liked { color: #e0245e; }
.btn-like.liked svg { fill: #e0245e; }
/* Repost turns green once you've reposted (Twitter/X pattern). One tap, no confirm dialog. */
.btn-repost svg { transition: transform .12s ease; }
.btn-repost:hover svg { transform: scale(1.15); }
.btn-repost.reposted { color: #12a150; }

/* Toast for one-tap confirmations (repost) */
.app-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--jp-ink); color: var(--jp-paper); padding: .6rem 1.1rem; border-radius: 24px; font-size: .88rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); opacity: 0; pointer-events: none; z-index: 1100;
  transition: opacity .18s ease, transform .18s ease; max-width: 90vw; }
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 991.98px) { .app-toast { bottom: calc(72px + env(safe-area-inset-bottom)); } }
.post-actions .lucide { width: 18px; height: 18px; }

/* Notifications */
.notif-row { display: flex; gap: .6rem; padding: .7rem .25rem; border-bottom: 1px solid var(--jp-line); align-items: center; }
.notif-row.unread { background: var(--surface-2); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jp-vermillion); flex: 0 0 auto; }

/* ---------- Photo modal (Instagram-style: image + engagement) ---------- */
.pm-overlay { position: fixed; inset: 0; z-index: 1090; display: none; align-items: center; justify-content: center;
  background: rgba(10, 12, 18, 0.82); padding: 2vh 2vw; }
.pm-overlay.open { display: flex; }
.pm-dialog { position: relative; width: 100%; max-width: 1000px; max-height: 96vh; }
.pm-close { position: absolute; top: 8px; right: 8px; z-index: 3; width: 32px; height: 32px; border: none;
  border-radius: 50%; background: transparent; color: var(--jp-ink-soft); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; transition: background .12s ease, color .12s ease; }
.pm-close:hover { background: var(--surface-2); color: var(--jp-ink); }
.pm-close .lucide { width: 20px; height: 20px; }
.pm-content { background: var(--surface); border-radius: 14px; overflow: hidden; max-height: 96vh; }
.pm-loading { min-height: 340px; }
/* Fixed, comfortable frame: the image is letterboxed inside it (IG-style) so every post's
   modal is the same pleasant size regardless of the photo's aspect ratio. */
.pm-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  height: min(86vh, 660px); }
/* Text-only post (opened from the comment icon): no image pane, single narrower column. */
.pm-grid--text { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; max-height: 86vh; }
.pm-grid--text .pm-side { max-height: 86vh; }
.pm-dialog:has(.pm-grid--text) { max-width: 540px; }
.pm-media { position: relative; background: #0b0d12; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.pm-slide { display: none; margin: 0; width: 100%; height: 100%; }
.pm-slide.active { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pm-slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pm-slide figcaption { color: #e6e8ee; font-size: .8rem; padding: .4rem .8rem; }
.pm-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: none;
  border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pm-nav:hover { background: rgba(0,0,0,.75); }
.pm-prev { left: 10px; } .pm-next { right: 10px; }
/* Carousel dots (which image you're on) */
.pm-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.pm-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.45); transition: background .15s ease; }
.pm-dot.active { background: #fff; }

/* ---------- Trip Market (starter templates) ---------- */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.market-card { display: flex; flex-direction: column; border: 1px solid var(--bs-border-color); border-radius: 14px; overflow: hidden; background: var(--bs-body-bg); color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.market-card:hover, .market-card:focus { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.13); color: inherit; }
.market-card-banner { background: var(--accent, #c73e3a); color: #fff; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: .7rem .9rem; }
.market-card-banner [data-lucide] { width: 26px; height: 26px; }
.market-card-place { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 600; opacity: .92; }
.market-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: .8rem .9rem 1rem; }
.market-hero { display: flex; gap: 1rem; align-items: flex-start; background: var(--accent, #c73e3a); color: #fff; border-radius: 16px; padding: 1.2rem 1.4rem; }
.market-hero [data-lucide] { width: 40px; height: 40px; flex: 0 0 auto; margin-top: .15rem; }
.market-hero-place { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; opacity: .85; }
.market-day { display: flex; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--bs-border-color); }
.market-day:first-child { border-top: 0; padding-top: 0; }
.market-day-num { flex: 0 0 auto; min-width: 3.6rem; font-weight: 700; font-size: .85rem; color: var(--bs-secondary-color); }

/* Market filters: search box + region/vibe chips */
.market-filters { display: flex; flex-direction: column; gap: .7rem; }
.market-search { position: relative; max-width: 440px; }
.market-search [data-lucide] { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--jp-ink-soft); pointer-events: none; }
.market-search input { width: 100%; padding: .5rem .9rem .5rem 2.2rem; border: 1px solid var(--jp-line); border-radius: 999px; background: var(--bs-body-bg); color: inherit; font-size: .95rem; }
.market-search input:focus { outline: none; border-color: var(--jp-vermillion); box-shadow: 0 0 0 .18rem rgba(217, 79, 61, .18); }
.market-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.market-chip { border: 1px solid var(--jp-line); background: transparent; color: var(--jp-ink-soft); border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: color .12s ease, background .12s ease, border-color .12s ease; }
.market-chip:hover { color: var(--jp-ink); }
.market-chip.active { background: var(--jp-vermillion); border-color: var(--jp-vermillion); color: #fff; }

/* Trips header actions: on phones fill the row evenly instead of scattering */
@media (max-width: 575.98px) {
  .trips-actions { width: 100%; }
  .trips-actions .btn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
}
.pm-side { display: flex; flex-direction: column; min-width: 0; max-height: 96vh; }
.pm-head { padding: .85rem 1rem; border-bottom: 1px solid var(--jp-line); }
.pm-body { padding: .75rem 1rem 0; }
.pm-bar { padding: 0 1rem; }
.pm-bar .post-actions { border-top: none; }
.pm-comments { flex: 1 1 auto; overflow-y: auto; padding: .25rem 1rem; min-height: 60px; }
.pm-comment-form { padding: .75rem 1rem; border-top: 1px solid var(--jp-line); }
@media (max-width: 767.98px) {
  .pm-overlay { padding: 0; }
  /* dvh so the sheet fits the real (URL-bar-aware) height on iOS and the comment box shows. */
  .pm-dialog { max-width: 100%; max-height: 100vh; max-height: 100dvh; height: 100vh; height: 100dvh; }
  .pm-content { border-radius: 0; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
  .pm-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
  .pm-media { max-height: 45vh; max-height: 45dvh; }
  .pm-slide img { max-height: 45vh; max-height: 45dvh; }
  .pm-side { max-height: 55vh; max-height: 55dvh; min-height: 0; }
  /* Prominent, always-visible close (Instagram/TikTok style) so getting back to the feed is obvious. */
  .pm-close { top: 12px; right: 12px; width: 40px; height: 40px; color: #fff; background: rgba(0,0,0,.5);
    box-shadow: 0 2px 8px rgba(0,0,0,.45); }
  .pm-close:hover, .pm-close:active { color: #fff; background: rgba(0,0,0,.7); }
  .pm-close .lucide { width: 24px; height: 24px; }
  /* Grab-handle hint that the photo can be swiped down to dismiss. */
  .pm-media::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.6); z-index: 2; pointer-events: none; }
  .pm-media { touch-action: pan-y; }
}

/* Repost attribution (Twitter/Instagram-style "X reposted" above the original post) */
.repost-wrap { margin-bottom: 1rem; }
.repost-attr { padding: 0 .5rem .4rem; }
.repost-attr .route-dot { border: 1px solid var(--surface); }
.repost-wrap .post-card { margin-bottom: 0; }

/* ---------- Share sheet (airplane) ---------- */
.share-overlay { position: fixed; inset: 0; z-index: 1095; display: none; align-items: center; justify-content: center;
  background: rgba(10, 12, 18, .6); padding: 1rem; }
.share-overlay.open { display: flex; }
.share-dialog { width: 100%; max-width: 440px; }
.share-content { background: var(--surface); border-radius: 16px; padding: 1rem; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.share-head { border-bottom: 1px solid var(--jp-line); padding-bottom: .5rem; }
.share-contacts { display: flex; gap: .75rem; overflow-x: auto; padding: .75rem .1rem; }
.share-send { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 68px;
  border: none; background: none; cursor: pointer; color: var(--jp-ink); }
.share-av { position: relative; }
.share-check { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%;
  background: #12a150; color: #fff; display: none; align-items: center; justify-content: center; border: 2px solid var(--surface); }
.share-check .lucide { width: 12px; height: 12px; }
.share-send.sent .share-check { display: flex; }
.share-send.sent { opacity: .7; }
.share-name { font-size: .7rem; line-height: 1.1; text-align: center; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-actions .btn { flex: 1 1 0; }
@media (max-width: 575.98px) {
  .share-overlay { align-items: flex-end; padding: 0; }
  .share-dialog { max-width: 100%; }
  .share-content { border-radius: 16px 16px 0 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ---------- Direct messages ---------- */
.dm-wrap { max-width: 640px; }
/* Inbox rows */
.dm-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; color: var(--jp-ink);
  border-bottom: 1px solid var(--jp-line); }
.dm-row:last-child { border-bottom: none; }
.dm-row:hover { background: var(--surface-2); }
.dm-row.unread { background: var(--surface-2); }
.dm-preview { font-size: .86rem; }
.dm-unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--jp-vermillion); flex: 0 0 auto; }

/* Thread */
.dm-card { display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 420px; }
.dm-thread-head { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dm-thread { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.dm-msg { display: flex; align-items: flex-end; gap: .4rem; max-width: 80%; }
.dm-msg.dm-in { align-self: flex-start; }
.dm-msg.dm-out { align-self: flex-end; flex-direction: row-reverse; }
.dm-msg-av { flex: 0 0 auto; }
.dm-bubble-wrap { min-width: 0; }
.dm-bubble { padding: .5rem .8rem; border-radius: 16px; font-size: .92rem; overflow-wrap: anywhere; }
.dm-in .dm-bubble { background: var(--surface-2); border: 1px solid var(--jp-line); border-bottom-left-radius: 5px; }
.dm-out .dm-bubble { background: var(--jp-vermillion); color: #fff; border-bottom-right-radius: 5px; }
.dm-time { font-size: .66rem; color: var(--jp-ink-soft); margin-top: 2px; }
.dm-out .dm-time { text-align: right; }
/* Shared-post chip inside a message */
.dm-postchip { display: flex; gap: .5rem; align-items: center; border: 1px solid var(--jp-line); border-radius: 12px;
  padding: .4rem; background: var(--surface); text-decoration: none; color: var(--jp-ink); max-width: 260px; margin-bottom: 2px; }
.dm-postchip:hover { border-color: var(--jp-vermillion); }
.dm-postchip-img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.dm-postchip-body { min-width: 0; }
/* Composer */
.dm-composer { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--jp-line); }
@media (max-width: 991.98px) { .dm-card { height: calc(100vh - 190px); } }

/* ---------- Forum: media, reactions, reply-to ---------- */
.forum-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; }
.forum-thumb img { width: 100%; height: 100%; object-fit: cover; }
.forum-thumb-rm {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; line-height: 18px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; padding: 0;
}
.forum-media-item {
  max-width: 160px; max-height: 160px; width: auto; height: auto;
  border-radius: 10px; object-fit: cover; display: block; cursor: zoom-in;
}
.forum-lightbox {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: center; justify-content: center; background: rgba(0,0,0,.9); padding: 20px;
}
.forum-lightbox.show { display: flex; }
.forum-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; }
.forum-lightbox-close {
  position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: none;
  background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; border-radius: 50%;
}
.forum-like {
  display: inline-flex; align-items: center; gap: .3rem; padding: 2px 6px;
  border: none; background: none; color: var(--jp-ink-soft); border-radius: 8px; font-size: .85rem;
}
.forum-like:hover { background: var(--icon-hover-bg); }
.forum-like.liked { color: var(--jp-vermillion); }
.forum-like.liked .lucide { fill: currentColor; }
.forum-like .lucide { width: 16px; height: 16px; }
.reply-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--icon-hover-bg); border-radius: 999px; padding: 3px 6px 3px 10px; width: fit-content;
}
.reply-ref {
  border-left: 2px solid var(--jp-border, rgba(128,128,128,.35));
  padding-left: 8px; margin: 2px 0; opacity: .9;
}

/* ---------- Forum: link preview cards (OG unfurls) ---------- */
.link-card {
  display: flex; align-items: stretch; gap: 0; margin-top: .5rem; max-width: 460px;
  border: 1px solid var(--jp-border, rgba(128,128,128,.28)); border-radius: 12px; overflow: hidden;
  text-decoration: none; color: inherit; background: var(--icon-hover-bg);
}
.link-card:hover { border-color: var(--jp-vermillion); }
.link-card-img {
  flex: 0 0 96px; width: 96px; background-size: cover; background-position: center;
  background-color: rgba(128,128,128,.15);
}
.link-card-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; }
.link-card-site { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--jp-ink-soft); }
.link-card-title { font-weight: 600; font-size: .92rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card-desc { font-size: .8rem; color: var(--jp-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Forum: pinned/highlighted poll card + poll chip ---------- */
.poll-card { border-color: var(--jp-vermillion); }
.poll-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--jp-vermillion); color: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.poll-chip .lucide { width: 14px; height: 14px; }
.poll-compose { background: var(--icon-hover-bg); border-radius: 12px; padding: 12px; }

/* ---------- Forum: pinned (sticky) topics ---------- */
.topic-pinned { border-color: var(--jp-vermillion); }
.pin-badge { background: var(--jp-vermillion); color: #fff; }
.pin-badge .lucide { vertical-align: -2px; margin-right: 1px; }
.reply-pinned { background: var(--icon-hover-bg); border-radius: 10px; padding-left: 10px; padding-right: 10px; }

/* ---------- Forum: video embeds (YouTube/Vimeo landscape, TikTok/Instagram portrait) ---------- */
.forum-embed { margin-top: .5rem; border-radius: 12px; overflow: hidden; background: #000; }
.forum-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.forum-embed.landscape { width: 100%; aspect-ratio: 16 / 9; }
.forum-embed.portrait { width: 100%; max-width: 325px; aspect-ratio: 9 / 16; }

/* ---------- Trip photos ---------- */
/* Justified, aspect-ratio-preserving grid (Google Photos style). JS sizes each tile into
   width-filling rows; the height here is the pre-JS fallback and the last-row height. */
.ph-grid { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.ph-tile { position: relative; border: 0; padding: 0; height: 190px; border-radius: 8px; overflow: hidden;
  background: var(--icon-hover-bg); cursor: zoom-in; flex: 0 0 auto; }
.ph-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px) { .ph-tile { height: 130px; } }
.ph-meta { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: .72rem; }
.ph-loc { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 3px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 999px; padding: 2px 7px; font-size: .68rem; max-width: calc(100% - 12px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-thumbs .ph-new { position: relative; width: 96px; }

/* Filter chips (by destination) */
.ph-filters { row-gap: 6px; }
.ph-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--jp-line); color: var(--jp-ink-soft); text-decoration: none; font-size: .84rem; font-weight: 500;
  background: var(--jp-card, transparent); transition: background .12s, border-color .12s, color .12s; }
.ph-chip:hover { border-color: var(--jp-indigo); color: var(--jp-ink); }
.ph-chip.active { background: var(--jp-indigo); border-color: var(--jp-indigo); color: #fff; }
.ph-chip-n { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }
.ph-chip.active .ph-chip-n { opacity: .85; }

/* Grouped city sections */
.ph-section { display: flex; align-items: center; gap: 7px; font-size: 1.02rem; font-weight: 700;
  margin: 4px 0 10px; color: var(--jp-ink); }
.ph-section [data-lucide] { width: 17px; height: 17px; color: var(--jp-vermillion); flex: 0 0 auto; }
.ph-section-dates { font-size: .8rem; font-weight: 500; color: var(--jp-ink-soft); }

/* Photo map (Google-Photos style: thumbnail pins that cluster) */
#phMap { height: 68vh; min-height: 380px; border-radius: 14px; overflow: hidden; }
.ph-map-pin { width: 46px; height: 46px; border-radius: 10px; background-size: cover; background-position: center;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ph-map-cluster { width: 54px; height: 54px; border-radius: 12px; background-size: cover; background-position: center;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); position: relative; }
.ph-map-cluster span { position: absolute; right: -7px; top: -7px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: var(--jp-vermillion); color: #fff; font: 700 12px/22px sans-serif;
  text-align: center; border: 2px solid #fff; }

/* Lightbox photo counter */
.ph-lb-count { position: absolute; left: 14px; top: 14px; z-index: 2; color: #fff; background: rgba(0,0,0,.5);
  border-radius: 999px; padding: 3px 11px; font-size: .8rem; font-variant-numeric: tabular-nums; }

/* Bulk "organize" mode */
.ph-check { position: absolute; left: 8px; top: 8px; z-index: 2; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0,0,0,.35); border: 2px solid #fff; color: #fff; display: none;
  align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.ph-check [data-lucide] { width: 14px; height: 14px; opacity: 0; }
body.ph-selecting .ph-tile { cursor: pointer; }
/* In select mode every selectable tile shows an empty circle; non-selectable ones dim. */
body.ph-selecting .ph-tile[data-candelete="1"] .ph-check { display: inline-flex; }
body.ph-selecting .ph-tile[data-candelete="0"] { opacity: .45; }
.ph-tile.selected { outline: 4px solid var(--jp-vermillion); outline-offset: -4px; }
.ph-tile.selected img { filter: brightness(.88); }
.ph-tile.selected .ph-check { background: var(--jp-vermillion); }
.ph-tile.selected .ph-check [data-lucide] { opacity: 1; }

/* Fixed dark pill in BOTH themes (var(--jp-ink) would flip to light in dark mode and hide the
   white text), like the standard floating selection toolbar. */
.ph-bulkbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2050;
  display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-radius: 999px;
  background: #232833; color: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.35); max-width: calc(100vw - 24px); }
.ph-bulkbar .form-select { min-width: 130px; }
.ph-bulk-hint, .ph-bulk-actions { display: inline-flex; align-items: center; gap: 8px; }
.ph-bulk-hint { color: rgba(255,255,255,.9); font-size: .88rem; }
.ph-bulk-sep { opacity: .4; }
.ph-bulk-lbl { font-size: .85rem; color: rgba(255,255,255,.75); }

/* Location control in the lightbox */
.ph-loc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; font-size: .82rem; }
.ph-loc-chip.empty { border-style: dashed; opacity: .8; }
.ph-loc-chip:disabled { cursor: default; }
.ph-lightbox { position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column;
  background: rgba(0,0,0,.94); }
.ph-lb-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 16px; }
.ph-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.ph-lb-panel { flex: 0 0 auto; max-height: 42vh; overflow-y: auto; background: var(--jp-card-bg, #14161c);
  color: var(--bs-body-color); padding: 12px 16px; }
.ph-lb-close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 40px; height: 40px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: 26px; line-height: 1; }
.ph-lb-nav { position: absolute; top: 40%; z-index: 2; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; font-size: 28px; line-height: 1; }
.ph-prev { left: 10px; } .ph-next { right: 10px; }
.ph-comments { max-height: 22vh; overflow-y: auto; }