:root {
  --bg: #ffffff;
  --surface: rgba(255, 255, 255, 0.98);
  --surface-strong: rgba(7, 182, 60, 0.98);
  --panel: rgba(255, 255, 255, 0.96);
  --panel-soft: rgba(250, 250, 250, 0.98);
  --border: rgba(35, 43, 47, 0.08);
  --border-strong: rgba(7, 182, 60, 0.26);
  --shadow: 0 28px 80px rgba(35, 43, 47, 0.1);
  --shadow-soft: 0 14px 36px rgba(35, 43, 47, 0.08);
  --text: #192125;
  --muted: #667173;
  /* Единая верхняя панель: одна высота полосы и один размер иконок
     на всех страницах. Значения читаются в блоке «ЕДИНАЯ ВЕРХНЯЯ ПАНЕЛЬ»
     в конце файла. */
  --header-height: 76px; /* минимальная высота полосы */
  --header-pad-y: 10px; /* вертикальные отступы полосы */
  --header-icon-size: 20px; /* глиф: пин, колокольчик, солнце, аватар */
  --header-icon-button: 42px; /* круглая кнопка-иконка (зона нажатия) */
  --header-avatar-size: 42px; /* аватар пользователя — крупнее глифов */
  --header-avatar-glyph: 24px; /* силуэт внутри аватара, когда нет фото */
  --header-font-size: 0.95rem; /* текст в шапке (название города) */
  --header-gap: 18px; /* расстояние логотип → город (на узких экранах меньше) */
  --accent: #07b63c;
  --accent-strong: #058f30;
  --accent-soft: #35c85c;
  --accent-light: #f4faf5;
  --accent-rgb: 7, 182, 60;
  --white: #ffffff;
  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --brand-letter-spacing: 0.012em;
}

@font-face {
  font-family: "Circular Std";
  src:
    local("Circular Std Bold"),
    local("CircularStd-Bold"),
    local("Circular Std");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy ExtraBold";
  src:
    local("Gilroy ExtraBold"),
    local("Gilroy-ExtraBold"),
    local("Gilroy Extrabold"),
    local("Gilroy");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

/* Home picks reference panel */
body[data-page="home"] .home-picks-section {
  width: min(1516px, calc(100% - 96px));
  padding: 82px 0 84px;
}

body[data-page="home"] .home-picks-section::before,
body[data-page="home"] .home-picks-section > .home-place-carousel,
body[data-page="home"] .home-picks-section > .home-carousel-arrow,
body[data-page="home"] .home-picks-section > .home-outline-button {
  display: none;
}

body[data-page="home"] .home-picks-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 5.1vw, 86px) clamp(46px, 5.3vw, 88px) clamp(46px, 4.6vw, 70px);
  border: 1px solid rgba(16, 25, 29, 0.08);
  border-radius: 42px;
  background: #ffffff;
  box-shadow:
    0 36px 90px rgba(16, 25, 29, 0.08),
    0 14px 44px rgba(16, 25, 29, 0.05);
}

body[data-page="home"] .home-picks-showcase {
  display: grid;
  grid-template-columns: minmax(340px, 0.78fr) minmax(520px, 1.22fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

body[data-page="home"] .home-picks-copy {
  max-width: 540px;
}

body[data-page="home"] .home-picks-copy .home-section-kicker {
  font-size: 1.02rem;
}

body[data-page="home"] .home-picks-copy h2 {
  max-width: 520px;
  margin: 24px 0 0;
  color: var(--home-ink);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(3.15rem, 4.8vw, 4.65rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
}

body[data-page="home"] .home-picks-copy p {
  max-width: 510px;
  margin: 28px 0 0;
  color: var(--home-muted);
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  font-weight: 600;
  line-height: 1.58;
}

body[data-page="home"] .home-picks-main-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  margin-top: 36px;
  padding: 0 28px;
  border-radius: 14px;
  color: var(--home-green-dark);
  background: #ffffff;
  border: 2px solid var(--home-green);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
}

body[data-page="home"] .home-picks-main-button .home-button-icon {
  width: 28px;
  height: 28px;
}

body[data-page="home"] .home-picks-button-arrow {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="home"] .home-picks-visual {
  position: relative;
  min-height: clamp(300px, 25vw, 376px);
}

body[data-page="home"] .home-picks-visual-image {
  display: block;
  width: 100%;
  min-height: clamp(280px, 23vw, 356px);
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 34px 84px rgba(16, 25, 29, 0.2);
  filter: saturate(1.04) contrast(1.02);
}

body[data-page="home"] .home-picks-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(4, 10, 12, 0.08), rgba(4, 10, 12, 0.18));
  pointer-events: none;
}

body[data-page="home"] .home-picks-place-card {
  position: absolute;
  right: -24px;
  bottom: -26px;
  z-index: 3;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: min(392px, 58%);
  min-height: 138px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 28px 64px rgba(16, 25, 29, 0.16);
  backdrop-filter: blur(12px);
}

body[data-page="home"] .home-picks-place-card img {
  width: 112px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
}

body[data-page="home"] .home-picks-place-card strong {
  display: block;
  color: var(--home-ink);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1.25;
}

body[data-page="home"] .home-picks-place-card p {
  margin: 10px 0 0;
  color: var(--home-muted);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.42;
}

body[data-page="home"] .home-picks-place-card span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--home-green-dark);
  font-size: 0.92rem;
  font-weight: 900;
}

body[data-page="home"] .home-picks-place-card span::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="home"] .home-picks-category-slot .home-category-band {
  position: static;
  z-index: auto;
  display: block;
  width: 100%;
  margin: clamp(44px, 5vw, 64px) 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .home-section-kicker {
  display: none;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row {
  width: 100%;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 16px;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip {
  min-height: 126px;
  padding: 74px 12px 22px;
  border-radius: 18px;
  border-color: rgba(16, 25, 29, 0.09);
  box-shadow: 0 18px 44px rgba(16, 25, 29, 0.06);
  font-size: 0.92rem;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip::before {
  top: 20px;
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip::after {
  top: 32px;
  width: 25px;
  height: 25px;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip.active {
  border-color: rgba(7, 182, 60, 0.32);
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip.active::before {
  background: linear-gradient(135deg, #50d873, #1fb84f);
}

@media (max-width: 1180px) {
  body[data-page="home"] .home-picks-section {
    width: min(100% - 48px, 1240px);
  }

  body[data-page="home"] .home-picks-showcase {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .home-picks-copy {
    max-width: 680px;
  }

  body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .home-picks-section {
    width: min(100% - 28px, 1240px);
    padding-top: 48px;
  }

  body[data-page="home"] .home-picks-panel {
    padding: 34px 18px 24px;
    border-radius: 26px;
  }

  body[data-page="home"] .home-picks-copy h2 {
    font-size: clamp(2.25rem, 12vw, 3.1rem);
  }

  body[data-page="home"] .home-picks-main-button {
    width: 100%;
    justify-content: center;
  }

  body[data-page="home"] .home-picks-place-card {
    position: relative;
    right: auto;
    bottom: auto;
    grid-template-columns: 86px minmax(0, 1fr);
    width: 100%;
    margin-top: 16px;
  }

  body[data-page="home"] .home-picks-place-card img {
    width: 86px;
    height: 78px;
  }

  body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row {
    display: flex;
    gap: 12px;
    margin: 0 -18px;
    padding: 0 18px 10px;
    overflow-x: auto;
  }

  body[data-page="home"] .home-picks-category-slot .home-category-band .chip {
    flex: 0 0 132px;
    min-height: 116px;
  }
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  background: #ffffff;
  /* clip, а не hidden: hidden делает html/body скролл-контейнером, и тогда
     position: sticky у потомков прилипает к нему, а не к вьюпорту — из-за
     этого не работало липкое меню в профиле. clip режет горизонтальное
     переполнение так же, но контейнера прокрутки не создаёт.
     hidden оставлен запасным для браузеров без поддержки clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Место под вертикальную полосу прокрутки резервируем всегда. Иначе на разделах,
   которые в экран влезают, полоса пропадает, вьюпорт становится шире на её
   ширину (10px), и вся страница дёргается вбок при переключении разделов. */
html {
  scrollbar-gutter: stable;
}

/* Кроме /map и /add: там раскладка ровно в высоту экрана и никогда не
   прокручивается, поэтому зарезервированный жёлоб превратился бы в пустую
   полосу 10px справа от карты. Дёргаться там всё равно нечему. */
html:has(body[data-page="map"]),
html:has(body[data-page="add-place"]) {
  scrollbar-gutter: auto;
}

body {
  position: relative;
  letter-spacing: var(--brand-letter-spacing);
}

/* Smooth theme change: transitions.js adds .theme-transition to <html> only for
   the ~0.48s of a theme flip, so colours cross-fade on toggle without slowing
   any interaction the rest of the time. */
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *::before,
:root.theme-transition *::after {
  transition:
    background-color 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    fill 0.45s ease,
    stroke 0.45s ease,
    box-shadow 0.45s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-transition,
  :root.theme-transition *,
  :root.theme-transition *::before,
  :root.theme-transition *::after {
    transition: none !important;
  }
}

button,
input,
a {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

body.auth-state-pending [data-auth-control] {
  visibility: hidden;
}

/* Until the profile auth check resolves, keep the shell hidden so an
   unauthenticated visitor is redirected to /login without the profile flashing
   its placeholder first (loadProfile() redirects on 401 before this class is
   cleared; applyAuthState() clears it once the profile actually loads). */
body.profile-page.auth-state-pending .profile-shell {
  visibility: hidden;
}

@keyframes cityhop-fan-card-rise {
  from {
    opacity: 0;
    margin-bottom: -38px;
  }

  60% {
    opacity: 1;
  }

  to {
    opacity: 1;
    margin-bottom: 0;
  }
}

@keyframes cityhop-fan-card-rise-mobile {
  from {
    opacity: 0;
    margin-top: 28px;
  }

  to {
    opacity: 1;
    margin-top: 0;
  }
}

.site-header,
.landing-shell {
  position: relative;
  z-index: 1;
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  z-index: 16;
}

.site-header::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  border-radius: 0;
  background: #08a13a;
  box-shadow: 0 12px 30px rgba(44, 87, 50, 0.12);
  z-index: -1;
}

.site-header > * {
  position: relative;
  z-index: 1;
}

.brand {
  display: inline-block;
  min-width: 0;
}

.brand-wordmark {
  font-family: "Gilroy ExtraBold", "Gilroy", "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  letter-spacing: var(--brand-letter-spacing);
  font-kerning: normal;
  line-height: 1;
  color: var(--white);
}

/* Hint under the registration tag field. */
.auth-field-note {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted, #687579);
}

/* Logo (sitihop-logo.svg) — green "Ситихоп" wordmark with ears, transparent
   background. Sized by height; the viewBox is cropped to the wordmark so it
   fills this height (wide ~3.7:1 aspect, width auto).
   White by default because most headers sit on the green bar (#08a13a) or the
   dark home hero, where green would blend in; map/place have light headers and
   keep the green wordmark. */
.brand-logo {
  display: block;
  width: auto;
  /* Heights chosen so the "Ситихоп" letters match the old text wordmark — the
     ears occupy the top ~third of the SVG, so the height is larger than the
     letter height itself. */
  height: 38px;
  filter: brightness(0) invert(1); /* recolor the green SVG to white */
  /* The ears sit above the wordmark, so the letters fall in the lower part of
     the SVG box; nudge up so they optically center with the other header items
     (≈13% of the logo height — scales across breakpoints). */
  transform: translateY(-13%);
}
/* Light-header pages keep the green wordmark; a white logo would vanish on the
   white bar. (Pages with a green/dark header — home, moderation, login — keep
   the default white recolor above.) */
body[data-page="map"] .brand-logo,
body[data-page="place"] .brand-logo,
body[data-page="profile"] .brand-logo,
body[data-page="admin"] .brand-logo,
body[data-page="add-place"] .brand-logo,
body[data-page="404"] .brand-logo {
  filter: none;
}
@media (max-width: 900px) {
  .brand-logo,
  body[data-page="map"] .brand-logo {
    height: 34px;
  }
}
@media (max-width: 640px) {
  .brand-logo,
  body[data-page="map"] .brand-logo {
    height: 30px;
  }
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}

.main-nav a {
  transition: color 160ms ease;
}

.main-nav a:hover {
  color: var(--white);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}

.pill,
.text-button {
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: var(--shadow-soft);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.pill:hover,
.text-button:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.header-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(72, 80, 82, 0.16);
  color: var(--white);
  border: 1px solid rgba(72, 80, 82, 0.24);
  box-shadow: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.header-chip:hover {
  transform: translateY(-1px);
  background: rgba(72, 80, 82, 0.22);
  border-color: rgba(72, 80, 82, 0.3);
}

.header-chip-location {
  width: auto;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  gap: 8px;
  padding: 0 14px;
  text-align: center;
  background: transparent;
  border-color: transparent;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.header-chip-add {
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  font-weight: 700;
  font-size: 0;
}

.header-chip-auth {
  position: relative;
  background: linear-gradient(135deg, #273033 0%, #31393d 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 24px rgba(35, 43, 47, 0.14);
}

.header-chip-auth.is-logging-out {
  transform: translateY(-1px) scale(0.98);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

.header-chip-auth.is-logging-out::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 1-6 2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 1-6 2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: logout-spin 720ms linear infinite;
}

#logoutButton.header-chip-auth.is-logging-out::before {
  opacity: 0;
}

@keyframes logout-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#loginButton.header-chip-auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 12px 16px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 800;
  font-size: 1rem;
  line-height: normal;
  white-space: nowrap;
}

#logoutButton.header-chip-auth {
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font-size: 0;
}

.header-chip-location::before,
.header-chip-add::before,
#logoutButton.header-chip-auth::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: var(--header-action-icon) center / contain no-repeat;
  mask: var(--header-action-icon) center / contain no-repeat;
}

.header-chip-location {
  --header-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

.header-chip-add {
  --header-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E");
}

#addPlaceButton.header-chip-add {
  width: auto;
  min-width: 52px;
  height: 52px;
  gap: 0;
  padding: 0 14px;
  font-size: 0.95rem;
  font-weight: 800;
}

#addPlaceButton.header-chip-add::before {
  content: none;
  display: none;
}

#logoutButton.header-chip-auth {
  --header-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8'/%3E%3Cline x1='10' y1='12' x2='21' y2='12'/%3E%3Cpolyline points='17 8 21 12 17 16'/%3E%3C/svg%3E");
}

.header-chip-location:hover,
.header-chip-add:hover,
#loginButton.header-chip-auth:hover,
#logoutButton.header-chip-auth:hover,
.header-chip-user:hover,
.site-header:not(.auth-header) .primary-button.header-signup-button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.header-chip-user {
  width: 52px;
  min-width: 52px;
  height: 52px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  font-weight: 700;
  gap: 0;
}

.header-user-chip-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
}

.header-user-chip-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-user-chip-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  font-size: 0;
  font-weight: 800;
  letter-spacing: var(--brand-letter-spacing);
}

.header-user-chip-avatar-fallback::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  /* The person glyph's ink sits slightly above the viewBox center (full head
     ring on top, thin shoulders arc below), so nudge it down 1px to visually
     center it in the round avatar. */
  transform: translateY(1px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-user-chip-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.header-notification-shell[hidden] {
  display: none !important;
}

.header-notification-shell {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
}

.header-notification-button {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--white);
  box-shadow: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.header-notification-button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.header-notification-button.is-open {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.header-notification-button.has-unread {
  box-shadow: none;
}

#logoutButton.header-chip-auth,
#logoutButton.header-chip-auth:hover,
#logoutButton.header-chip-auth:focus-visible,
.header-notification-button,
.header-notification-button:hover,
.header-notification-button:focus-visible,
.header-notification-button.is-open,
.header-notification-button.has-unread {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.header-notification-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.header-notification-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.header-notification-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(7, 182, 60, 0.26);
  border: 2px solid rgba(255, 255, 255, 0.82);
}

.header-city-picker-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.header-city-picker {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  z-index: 14;
  width: min(340px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  box-shadow: 0 24px 58px rgba(35, 43, 47, 0.16);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.header-city-picker[hidden] {
  display: none !important;
}

.header-city-picker.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.header-city-picker.is-closing {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

.header-city-picker-head,
.header-city-picker-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-city-picker-head {
  justify-content: space-between;
  margin-bottom: 14px;
}

.header-city-picker-head strong {
  font-size: 1rem;
  line-height: 1.2;
}

.header-city-picker-close {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(35, 43, 47, 0.06);
  color: var(--muted);
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.header-city-picker-close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-city-picker-close::after {
  content: none;
}

.header-city-picker-close:hover {
  background: rgba(35, 43, 47, 0.1);
  color: var(--text);
  transform: translateY(-1px);
}

.header-city-picker-form,
.header-city-picker-field {
  display: grid;
  gap: 10px;
}

.header-city-picker-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.header-city-picker-field input {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 16px;
  background: rgba(244, 250, 245, 0.88);
  color: var(--text);
  font-weight: 700;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.header-city-picker-field input:focus {
  border-color: rgba(var(--accent-rgb), 0.46);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.header-city-picker-suggestions {
  display: grid;
  gap: 8px;
}

.header-city-picker-suggestions[hidden] {
  display: none;
}

.header-city-picker-suggestions > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.header-city-picker-suggestions-list {
  display: grid;
  gap: 6px;
}

.header-city-picker-suggestion {
  min-height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 14px;
  background: rgba(244, 250, 245, 0.72);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: left;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.header-city-picker-suggestion:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.34);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-strong);
}

.header-city-picker-popular {
  display: grid;
  gap: 8px;
}

.header-city-picker-popular > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.header-city-picker-popular-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.header-city-picker-city {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 999px;
  background: rgba(244, 250, 245, 0.9);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 800;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.header-city-picker-city:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.32);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-strong);
}

.header-city-picker-actions {
  justify-content: space-between;
  margin-top: 2px;
}

.header-city-picker-auto,
.header-city-picker-submit {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.header-city-picker-auto {
  background: rgba(35, 43, 47, 0.06);
  color: var(--text);
}

.header-city-picker-submit {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 12px 24px rgba(var(--accent-rgb), 0.18);
}

.header-city-picker-auto:hover,
.header-city-picker-submit:hover {
  transform: translateY(-1px);
}

.header-city-picker-auto:hover {
  background: rgba(35, 43, 47, 0.1);
}

.header-city-picker-submit:hover {
  background: var(--accent-strong);
  box-shadow: 0 16px 28px rgba(var(--accent-rgb), 0.22);
}

.header-city-picker-auto:disabled,
.header-city-picker-submit:disabled {
  opacity: 0.58;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.header-city-picker-message {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.header-city-picker-message[hidden] {
  display: none;
}

.header-city-picker-message[data-tone="error"] {
  color: #dc2626;
}

.header-notification-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: auto;
  right: 0;
  width: min(360px, calc(100vw - 28px));
  padding: 16px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 30px 60px rgba(35, 43, 47, 0.16);
  backdrop-filter: blur(14px);
  color: var(--text);
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  will-change: opacity, transform;
  transition:
    opacity 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.header-notification-dropdown.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.header-notification-dropdown.is-closing {
  pointer-events: none;
}

.header-notification-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.header-notification-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.header-notification-head h3 {
  margin: 4px 0 0;
  font-size: 1.02rem;
  line-height: 1.1;
}

.header-notification-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.header-notification-clear,
.header-notification-read-all {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.header-notification-clear {
  background: rgba(35, 43, 47, 0.06);
  color: var(--text);
}

.header-notification-read-all {
  background: rgba(7, 182, 60, 0.08);
  color: var(--accent-strong);
}

.header-notification-clear:hover {
  transform: translateY(-1px);
  background: rgba(35, 43, 47, 0.1);
}

.header-notification-read-all:hover {
  transform: translateY(-1px);
  background: rgba(7, 182, 60, 0.14);
}

.header-notification-clear:disabled,
.header-notification-read-all:disabled {
  opacity: 0.58;
  cursor: default;
  transform: none;
}

.header-notification-list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
  max-height: min(360px, 62vh);
  overflow: auto;
  padding-right: 4px;
}

.header-notification-item {
  width: 100%;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
  border-radius: 20px;
  background: rgba(245, 248, 245, 0.92);
  box-shadow: inset 0 0 0 1px rgba(35, 43, 47, 0.06);
  color: inherit;
  outline: none;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.header-notification-item[data-url] {
  cursor: pointer;
}

.header-notification-item[data-url]:hover,
.header-notification-item[data-url]:focus-visible {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    inset 0 0 0 1px rgba(7, 182, 60, 0.2),
    0 14px 28px rgba(35, 43, 47, 0.08);
}

.header-notification-item.is-unread {
  background: rgba(7, 182, 60, 0.08);
  box-shadow: inset 0 0 0 1px rgba(7, 182, 60, 0.18);
}

.header-notification-item-title {
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.24;
}

.header-notification-item-body {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.header-notification-item-time {
  color: rgba(102, 113, 115, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
}

.header-notification-empty {
  padding: 26px 18px;
  border-radius: 20px;
  background: rgba(245, 248, 245, 0.92);
  box-shadow: inset 0 0 0 1px rgba(35, 43, 47, 0.06);
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Show/hide password toggle — login, register, profile account-deletion.
   The input is wrapped in .password-field; the eye button sits inside it. */
.password-field {
  position: relative;
  display: block;
}
.auth-field .password-field input,
.profile-delete-field .password-field input,
.profile-security-field .password-field input {
  padding-right: 48px;
}
.password-reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 140ms ease,
    background 140ms ease;
}
.password-reveal:hover {
  color: var(--text);
  background: rgba(127, 127, 127, 0.12);
}
.password-reveal:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.5);
  outline-offset: 1px;
}
.password-reveal svg {
  width: 20px;
  height: 20px;
  display: block;
}
.password-reveal .password-reveal-eye-off {
  display: none;
}
.password-field.is-revealed .password-reveal .password-reveal-eye {
  display: none;
}
.password-field.is-revealed .password-reveal .password-reveal-eye-off {
  display: block;
}

body.cityhop-confirm-is-open {
  overflow: hidden;
}

.cityhop-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  /* Opaque enough that bright page content (cards, table rows) no longer
     bleeds through as a light strip behind the dialog. */
  background: rgba(8, 12, 11, 0.74);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.cityhop-confirm-overlay[hidden] {
  display: none;
}

.cityhop-confirm-overlay.is-visible {
  opacity: 1;
}

.cityhop-confirm-card {
  width: min(460px, 100%);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 249, 0.98)),
    var(--surface);
  box-shadow:
    0 28px 80px rgba(13, 24, 18, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--text);
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.cityhop-confirm-overlay.is-visible .cityhop-confirm-card {
  transform: translateY(0) scale(1);
}

.cityhop-confirm-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.16);
  color: var(--accent-strong);
}

.cityhop-confirm-mark span {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
}

.cityhop-confirm-mark span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cityhop-confirm-mark span::after {
  content: none;
}

.cityhop-confirm-copy {
  min-width: 0;
}

.cityhop-confirm-eyebrow {
  margin: 0 0 6px;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cityhop-confirm-copy h2 {
  margin: 0;
  font-size: 1.24rem;
  line-height: 1.18;
  letter-spacing: 0;
}

.cityhop-confirm-copy p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

.cityhop-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.cityhop-confirm-button {
  min-width: 116px;
  min-height: 44px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.cityhop-confirm-button:hover {
  transform: translateY(-1px);
}

.cityhop-confirm-button:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.22);
  outline-offset: 3px;
}

.cityhop-confirm-button.is-primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  box-shadow: 0 14px 26px rgba(var(--accent-rgb), 0.22);
}

.cityhop-confirm-button.is-primary:hover {
  box-shadow: 0 18px 32px rgba(var(--accent-rgb), 0.28);
}

.cityhop-confirm-button.is-secondary {
  color: var(--text);
  background: rgba(35, 43, 47, 0.07);
}

.cityhop-confirm-button.is-secondary:hover {
  background: rgba(35, 43, 47, 0.1);
}

@media (max-width: 560px) {
  .cityhop-confirm-overlay {
    padding: 18px;
  }

  .cityhop-confirm-card {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px;
    border-radius: 22px;
  }

  .cityhop-confirm-actions {
    flex-direction: column-reverse;
  }

  .cityhop-confirm-button {
    width: 100%;
  }
}

.primary-button.header-signup-button {
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  font-weight: 800;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.site-header:not(.auth-header) .primary-button.header-signup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 13px 20px;
  font-size: 1rem;
  font-weight: 800;
  line-height: normal;
  white-space: nowrap;
  background: transparent;
  border-color: transparent;
}

.site-header:not(.auth-header) .primary-button.header-signup-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.primary-button {
  padding: 13px 20px;
  border-radius: 999px;
  color: var(--white);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  font-weight: 800;
  box-shadow: 0 18px 36px rgba(8, 169, 54, 0.2);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 40px rgba(8, 169, 54, 0.24);
}

.primary-button:disabled {
  opacity: 0.56;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.primary-button.large {
  padding-inline: 24px;
}

.landing-shell {
  padding-bottom: 52px;
}

.hero-section {
  padding: 42px 0 26px;
  text-align: center;
}

.eyebrow {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: var(--brand-letter-spacing);
  text-transform: uppercase;
}

.hero-section h1,
.section-header h2,
.results-head h3,
.featured-card h3,
.about-strip h3 {
  font-family: "Sora", sans-serif;
  letter-spacing: var(--brand-letter-spacing);
}

.hero-section h1 {
  max-width: 980px;
  margin: 22px auto 18px;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 0.96;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.18em;
  max-width: 100%;
  white-space: nowrap;
}

.hero-title-prefix {
  display: inline-block;
}

.hero-title-accent {
  color: var(--accent);
  display: inline-block;
  white-space: nowrap;
}

.hero-title-break {
  display: block;
  width: max-content;
}

.hero-lead {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.hero-lead {
  display: none;
}

.hero-search-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.hero-map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(280px, 32vw, 420px);
  min-height: 72px;
  padding: 18px 42px;
  font-size: clamp(1.08rem, 1.6vw, 1.4rem);
  box-shadow: 0 24px 46px rgba(4, 138, 43, 0.24);
}

.hero-map-button:hover {
  box-shadow: 0 28px 52px rgba(4, 138, 43, 0.3);
}

.search-field {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: min(100%, 560px);
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.search-icon {
  color: var(--muted);
  font-size: 1.15rem;
}

.search-field input {
  min-width: 0;
  border: 0;
  outline: none;
  color: var(--text);
  background: transparent;
}

.search-field input::placeholder {
  color: rgba(79, 103, 83, 0.72);
}

.hero-meta {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 24px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.chip {
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  font-weight: 700;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.chip:hover {
  transform: translateY(-1px);
}

.chip.active,
.pill.active {
  color: var(--white);
  background: var(--accent);
  border-color: transparent;
}

.featured-card,
.results-card,
.map-card,
.about-strip article {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.fan-stage {
  position: relative;
  height: 360px;
  margin-top: 56px;
}

.fan-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 210px;
  height: 392px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 28px 60px rgba(35, 43, 47, 0.1);
  transform:
    translateX(calc(-50% + var(--card-shift)))
    translateY(var(--card-drop))
    rotate(var(--card-rotate));
  transform-origin: bottom center;
  margin-bottom: 0;
  opacity: 0;
  animation: cityhop-fan-card-rise 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--fan-delay, 0ms);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  text-align: left;
}

.fan-card:hover,
.fan-card.is-active {
  transform:
    translateX(calc(-50% + var(--card-shift)))
    translateY(calc(var(--card-drop) - 8px))
    rotate(var(--card-rotate));
  box-shadow: 0 36px 70px rgba(12, 98, 28, 0.18);
  border-color: var(--border-strong);
}

.fan-card-media {
  flex: 0 0 126px;
  height: 126px;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}

.card-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.fan-card-media::after,
.place-visual::after,
.fan-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 18%, rgba(0, 0, 0, 0.08)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 40%);
}

.fan-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 8px 8px;
}

.fan-card-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), 0.08);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: var(--brand-letter-spacing);
  text-transform: uppercase;
  align-self: flex-start;
}

.fan-card strong,
.fan-card small,
.fan-card p {
  display: block;
}

.fan-card strong {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.24;
  min-height: calc(1.24em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.fan-card p,
.fan-card small {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.fan-card p {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.fan-card small {
  font-size: 0.85rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.map-section {
  padding-top: 34px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 18px;
}

.map-header {
  justify-content: flex-end;
  align-items: center;
}

.section-header h2 {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(420px, 520px);
  gap: 20px;
  align-items: start;
}

.map-card {
  padding: 16px;
}

.map-shell {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  border-radius: 32px;
  background: var(--accent-light);
}

.map-backdrop,
#map {
  position: absolute;
  inset: 0;
}

.map-backdrop {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.04)),
    radial-gradient(circle at top left, rgba(116, 231, 146, 0.2), transparent 36%);
}

#map {
  z-index: 1;
}

.map-provider-message {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(420px, calc(100% - 32px));
  padding: 22px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
  text-align: left;
  z-index: 2;
}

.map-provider-message p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.map-provider-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: var(--brand-letter-spacing);
  text-transform: uppercase;
}

.mapboxgl-map,
.mapboxgl-canvas,
.mapboxgl-canvas-container {
  width: 100%;
  height: 100%;
}

.mapboxgl-ctrl-bottom-right {
  right: 16px;
  bottom: 16px;
}

.mapboxgl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--accent-rgb), 0.1) !important;
  padding: 4px 10px !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 24px rgba(35, 43, 47, 0.08);
}

.mapboxgl-ctrl-attrib.mapboxgl-compact {
  min-height: 34px;
  padding: 6px 36px 6px 12px !important;
  box-sizing: border-box;
  overflow: hidden;
  transition:
    padding 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mapboxgl-ctrl-attrib.mapboxgl-compact:not(.mapboxgl-compact-show) {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0 !important;
  border-radius: 50% !important;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact-show {
  min-height: 34px;
  padding: 6px 42px 6px 12px !important;
  animation: cityhopAttributionReveal 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mapboxgl-ctrl-attrib .mapboxgl-ctrl-attrib-inner {
  line-height: 1.35;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner {
  padding-right: 4px;
  animation: cityhopAttributionTextReveal 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mapboxgl-ctrl-attrib-button {
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: rgba(var(--accent-rgb), 0.08) !important;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    opacity 220ms ease;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact:not(.mapboxgl-compact-show) .mapboxgl-ctrl-attrib-button {
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%);
}

.mapboxgl-ctrl-attrib-button:hover {
  transform: translateY(-50%) scale(1.04);
  background-color: rgba(var(--accent-rgb), 0.14) !important;
}

.mapboxgl-ctrl-attrib.mapboxgl-compact:not(.mapboxgl-compact-show) .mapboxgl-ctrl-attrib-button:hover {
  transform: translate(-50%, -50%) scale(1.04);
}

.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button {
  background-color: rgba(var(--accent-rgb), 0.14) !important;
  box-shadow: 0 6px 14px rgba(35, 43, 47, 0.08);
}

.mapboxgl-ctrl-attrib a {
  color: var(--accent-strong);
}

@keyframes cityhopAttributionReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cityhopAttributionTextReveal {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.mapboxgl-popup {
  animation: cityhopPopupFadeIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mapboxgl-popup.mapboxgl-popup-anchor-top {
  transform-origin: center top;
}

.mapboxgl-popup.mapboxgl-popup-anchor-bottom {
  transform-origin: center bottom;
}

.mapboxgl-popup.mapboxgl-popup-anchor-left {
  transform-origin: left center;
}

.mapboxgl-popup.mapboxgl-popup-anchor-right {
  transform-origin: right center;
}

.mapboxgl-popup.mapboxgl-popup-anchor-top-left {
  transform-origin: left top;
}

.mapboxgl-popup.mapboxgl-popup-anchor-top-right {
  transform-origin: right top;
}

.mapboxgl-popup.mapboxgl-popup-anchor-bottom-left {
  transform-origin: left bottom;
}

.mapboxgl-popup.mapboxgl-popup-anchor-bottom-right {
  transform-origin: right bottom;
}

.cityhop-fixed-popup {
  --cityhop-fixed-popup-scale: 1;
  --cityhop-fixed-popup-opacity: 1;
  position: absolute;
  z-index: 24;
  width: min(74vw, 320px);
  max-width: 320px;
  margin: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(var(--cityhop-fixed-popup-scale));
  transform-origin: center bottom;
  opacity: var(--cityhop-fixed-popup-opacity);
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, top, transform;
}

.cityhop-fixed-popup.is-hidden-by-zoom {
  pointer-events: none;
}

.cityhop-fixed-popup .mapboxgl-popup-content {
  width: 100%;
}

.mapboxgl-popup.cityhop-popup-closing {
  animation: cityhopPopupFadeOut 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mapboxgl-popup-content {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  box-shadow: 0 22px 52px rgba(12, 98, 28, 0.16);
  padding: 0;
  overflow: hidden;
  animation: cityhopPopupCardIn 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mapboxgl-popup.cityhop-popup-closing .mapboxgl-popup-content {
  animation: cityhopPopupCardOut 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.mapboxgl-popup-tip {
  border-top-color: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(255, 255, 255, 0.96) !important;
}

@keyframes cityhopPopupFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cityhopPopupFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes cityhopPopupCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cityhopPopupCardOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

@keyframes cityhopPopupPointerOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(45deg) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) translateY(12px) rotate(45deg) scale(0.985);
  }
}

.floating-map-info {
  position: absolute;
  top: 20px;
  left: calc(
    var(--map-rail-offset) + var(--map-rail-width) + var(--map-panel-gap) +
      var(--map-panel-width) + 18px
  );
  right: auto;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  align-items: start;
  gap: 12px;
  pointer-events: none;
  transition:
    left 320ms cubic-bezier(0.22, 1, 0.36, 1),
    top 220ms ease;
}

.floating-map-info > * {
  pointer-events: auto;
}

.pill-brand,
.map-legend {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  box-shadow: var(--shadow-soft);
}

.pill-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.16);
}

.map-legend {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 136px;
  padding: 14px 16px;
  border-radius: 18px;
}

.map-legend article {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}

.map-legend p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
}

.map-legend-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-legend-icon.has-image img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.legend-dot.scenic {
  background: var(--accent);
}

.legend-dot.events {
  background: var(--accent-strong);
}

.legend-dot.food {
  background: var(--accent-soft);
}

.sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.featured-card,
.results-card,
.results-card {
  padding: 22px;
}

.results-card {
  height: calc(700px + 32px);
  overflow: hidden;
}

.featured-card h3,
.results-head h3 {
  margin: 10px 0 0;
  font-size: 1.8rem;
  line-height: 1.05;
}

.featured-card p:last-of-type {
  margin: 10px 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

.results-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  margin-bottom: 18px;
}

.results-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.results-count {
  min-width: 64px;
  min-height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.52)),
    rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  color: var(--accent-strong);
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: calc(var(--brand-letter-spacing) * 0.35);
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 10px 20px rgba(35, 43, 47, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.results-filter-button {
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(248, 250, 248, 0.96);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  color: var(--text);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.results-filter-button:hover {
  transform: translateY(-1px);
  background: rgba(246, 250, 246, 1);
  border-color: rgba(var(--accent-rgb), 0.22);
}

.results-filter-button.is-active {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.2);
  color: var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 16px 28px rgba(35, 43, 47, 0.08);
}

.results-filter-button-icon {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.results-filter-button-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.results-filter-button-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.results-filters-popover {
  margin: 0 0 16px;
  padding: 16px;
  display: grid;
  gap: 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 246, 0.98)),
    rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 20px 36px rgba(35, 43, 47, 0.08);
}

.results-filters-grid,
.results-filters-section {
  display: grid;
  gap: 12px;
}

.results-filters-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.results-filters-section-head strong {
  font-family: "Sora", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(104, 117, 120, 0.94);
}

.results-filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.results-filter-chip {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(35, 43, 47, 0.08);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.results-filter-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(35, 43, 47, 0.14);
}

.results-filter-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(102, 113, 115, 0.36);
  flex: 0 0 auto;
}

.results-filter-chip.is-category {
  --results-filter-accent: var(--accent);
  --results-filter-accent-soft: rgba(var(--accent-rgb), 0.12);
  --results-filter-accent-border: rgba(var(--accent-rgb), 0.22);
}

.results-filter-chip.is-category .results-filter-chip-dot {
  background: var(--results-filter-accent);
}

.results-filter-chip.is-category.is-selected {
  background: var(--results-filter-accent-soft);
  border-color: var(--results-filter-accent-border);
  color: var(--results-filter-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 24px rgba(35, 43, 47, 0.06);
}

.results-filter-chip.is-tag.is-selected {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 12px 24px rgba(35, 43, 47, 0.06);
}

/* Tags carry no leading dot — only categories get a colored marker. */
.results-filter-chip.is-tag .results-filter-chip-dot {
  display: none;
}

.results-filters-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.results-filters-apply,
.results-filters-reset {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-weight: 800;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.results-filters-apply {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: var(--white);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 14px 26px rgba(var(--accent-rgb), 0.2);
}

.results-filters-apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(var(--accent-rgb), 0.24);
}

.results-filters-apply.is-pending {
  box-shadow:
    0 18px 34px rgba(var(--accent-rgb), 0.26),
    0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

.results-filters-reset {
  background: rgba(35, 43, 47, 0.06);
  color: var(--text);
  border: 1px solid rgba(35, 43, 47, 0.08);
}

.results-filters-reset:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(35, 43, 47, 0.1);
  border-color: rgba(35, 43, 47, 0.14);
}

.results-filters-reset:disabled {
  opacity: 0.52;
  cursor: default;
}

.places-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: calc(700px + 32px - 136px);
  overflow: auto;
  padding: 3px 4px 4px 1px;
}

.place-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  padding: 12px;
  min-height: 152px;
  /* Never let the card shrink inside the flex-column list. Safari doesn't honor
     `min-height: max-content` on flex items, so without this it collapses the
     card to ~36px and overflow:hidden clips the photo/title into an "arch". */
  flex-shrink: 0;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 253, 249, 0.98)),
    rgba(255, 255, 255, 0.96);
  text-align: left;
  align-items: start;
  overflow: hidden;
  position: relative;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.place-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  pointer-events: none;
  z-index: 2;
  transition: border-color 160ms ease;
}

.place-card:hover,
.place-card.is-active {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(35, 43, 47, 0.12);
  border-color: var(--border-strong);
}

.place-card:hover::after,
.place-card.is-active::after {
  border-color: var(--border-strong);
}

.place-visual,
.fan-card-media,
.fan-thumb {
  background: linear-gradient(135deg, #f7f8f8, #35c85c);
}

.place-visual {
  min-height: 128px;
  height: 128px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  align-self: start;
  box-shadow: 0 14px 24px rgba(35, 43, 47, 0.12);
}

.place-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.place-visual.scenic-sunset,
.fan-card-media.scenic-sunset,
.fan-thumb.scenic-sunset {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(7, 182, 60, 0.9)),
    linear-gradient(120deg, #ffffff, #dff6e6);
}

.place-visual.rooftop,
.fan-card-media.rooftop,
.fan-thumb.rooftop {
  background:
    linear-gradient(155deg, rgba(35, 43, 47, 0.98), rgba(5, 143, 48, 0.92)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.34), transparent 40%);
}

.place-visual.gallery,
.fan-card-media.gallery,
.fan-thumb.gallery {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 245, 0.98)),
    linear-gradient(135deg, #35c85c, #07b63c);
}

.place-visual.waterfront,
.fan-card-media.waterfront,
.fan-thumb.waterfront {
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(53, 200, 92, 0.9)),
    linear-gradient(135deg, #f5faf6, #07b63c);
}

.place-visual.courtyard,
.fan-card-media.courtyard,
.fan-thumb.courtyard {
  background:
    linear-gradient(150deg, rgba(7, 182, 60, 0.92), rgba(5, 143, 48, 0.98)),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.34), transparent 42%);
}

.place-visual.event,
.fan-card-media.event,
.fan-thumb.event {
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.88), rgba(7, 182, 60, 0.96)),
    linear-gradient(135deg, #ffffff, #35c85c);
}

.place-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 9px;
  align-self: stretch;
}

.place-copy h3,
.place-copy p,
.place-copy small {
  margin: 0;
}

.place-copy h3 {
  font-size: 1.08rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.place-copy p,
.place-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.place-summary {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.place-copy p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.place-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.place-tag,
.popup-card-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(35, 43, 47, 0.06);
  color: rgba(35, 43, 47, 0.7);
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.place-tag {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}

.place-tag.is-more,
.popup-card-tag.is-more {
  background: rgba(var(--accent-rgb), 0.08);
  color: rgba(8, 116, 47, 0.78);
}

.place-tag.is-more {
  flex-shrink: 0;
}

.place-kicker {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  color: rgba(35, 43, 47, 0.52);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-kicker.is-community {
  gap: 4px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  color: rgba(8, 116, 47, 0.74);
}

.place-kicker-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-kicker-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-top: 2px;
}

.place-side .place-tags {
  flex: 1;
}

.place-time {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.place-time-row {
  display: grid;
  gap: 3px;
}

.place-time-label {
  color: rgba(35, 43, 47, 0.42);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.place-time-value {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.18;
}

.map-page .landing-shell {
  width: 100%;
}

.map-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

.map-page {
  overflow: hidden;
}

.map-page-shell {
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.map-stage {
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.map-card-experience {
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.map-shell-experience {
  --map-rail-width: 72px;
  --map-rail-offset: 20px;
  --map-panel-gap: 14px;
  --map-panel-width: min(384px, calc(100% - 220px));
  min-height: calc(100dvh - 88px);
  height: calc(100dvh - 88px);
  border-radius: 0;
  background: #ffffff;
}

.map-shell-experience::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: calc(var(--map-rail-offset) + var(--map-rail-width) + var(--map-panel-gap) + var(--map-panel-width));
  background: rgba(255, 255, 255, 0.985);
  box-shadow: 0 24px 42px rgba(35, 43, 47, 0.1);
  pointer-events: none;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.map-shell-experience.is-panel-hidden::after {
  width: calc((var(--map-rail-offset) * 2) + var(--map-rail-width));
}

.map-side-rail {
  position: absolute;
  top: var(--map-rail-offset);
  bottom: var(--map-rail-offset);
  left: var(--map-rail-offset);
  z-index: 4;
  width: var(--map-rail-width);
  display: grid;
  align-content: start;
  justify-items: stretch;
  gap: 10px;
  padding: 16px 0 18px;
  background: transparent;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition: gap 260ms ease;
}

.map-rail-toggle {
  width: 46px;
  min-height: 46px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(35, 43, 47, 0.08);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.map-rail-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.map-rail-back,
.map-rail-link {
  display: grid;
  width: 100%;
  grid-template-rows: 24px auto;
  align-content: start;
  justify-items: center;
  gap: 7px;
  max-height: 82px;
  min-height: 0;
  padding: 9px 2px;
  margin-left: 0;
  border-radius: 18px;
  background: transparent;
  border: 0;
  color: var(--muted);
  overflow: hidden;
  pointer-events: auto;
  box-shadow: none;
  cursor: pointer;
  transition:
    transform 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.map-shell-experience.has-results-view .map-rail-back {
  color: var(--accent-strong);
}

.map-rail-back span:last-child,
.map-rail-link span:last-child {
  max-width: 52px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.18;
  text-align: center;
}

.map-rail-back-icon {
  width: 24px;
  height: 24px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4' y2='12'/%3E%3Cpolyline points='10 6 4 12 10 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4' y2='12'/%3E%3Cpolyline points='10 6 4 12 10 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-rail-toggle span {
  width: 22px;
  height: 2px;
  display: block;
  border-radius: 999px;
  background: var(--accent-strong);
}

.map-rail-link {
  max-height: 0;
  padding: 0 2px;
  background: transparent;
  color: var(--muted);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    max-height 260ms ease,
    padding 260ms ease,
    transform 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.map-rail-category-list {
  width: 100%;
  display: grid;
  gap: 0;
}

.map-rail-back:hover {
  transform: translateY(-1px);
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.06);
}

.map-rail-link.active {
  color: var(--accent-strong);
}

.map-rail-link:hover {
  transform: translateY(-1px);
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.06);
}

.map-shell-experience:not(.is-panel-hidden) .map-side-rail {
  gap: 0;
}

.map-shell-experience.is-panel-hidden .map-side-rail {
  gap: 10px;
}

.map-shell-experience.is-panel-hidden .map-rail-link {
  max-height: 82px;
  padding-top: 9px;
  padding-bottom: 9px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.map-rail-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: block;
}

.map-rail-icon::before,
.map-rail-icon::after {
  content: "";
  position: absolute;
}

.map-rail-icon-search {
  background-color: var(--accent-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='15.5' y1='15.5' x2='20' y2='20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='15.5' y1='15.5' x2='20' y2='20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-rail-icon-search::before,
.map-rail-icon-search::after {
  content: none;
}

.map-rail-icon-scenic::before,
.map-rail-icon-scenic::after,
.map-rail-icon-event::before,
.map-rail-icon-event::after,
.map-rail-icon-relax::before,
.map-rail-icon-relax::after,
.map-rail-icon-all::before,
.map-rail-icon-all::after {
  content: none;
}

.map-rail-icon-scenic {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='8' cy='9.5' r='1.5'/%3E%3Cpath d='M4 17l5-5 3 3 3-4 5 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='8' cy='9.5' r='1.5'/%3E%3Cpath d='M4 17l5-5 3 3 3-4 5 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-rail-icon-event {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3Cpath d='M9 14.5l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3Cpath d='M9 14.5l2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-rail-icon-relax {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16'/%3E%3Cpath d='M5 17v-3a3 3 0 0 1 3-3h5a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M5 14h12'/%3E%3Cline x1='6' y1='17' x2='6' y2='20'/%3E%3Cline x1='18' y1='17' x2='18' y2='20'/%3E%3Cpath d='M7 8a2 2 0 1 1 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16'/%3E%3Cpath d='M5 17v-3a3 3 0 0 1 3-3h5a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M5 14h12'/%3E%3Cline x1='6' y1='17' x2='6' y2='20'/%3E%3Cline x1='18' y1='17' x2='18' y2='20'/%3E%3Cpath d='M7 8a2 2 0 1 1 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-rail-icon-all {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='0.3'/%3E%3Ccircle cx='12' cy='12' r='0.3'/%3E%3Ccircle cx='19' cy='12' r='0.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='0.3'/%3E%3Ccircle cx='12' cy='12' r='0.3'/%3E%3Ccircle cx='19' cy='12' r='0.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-rail-icon-image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-rail-icon-image img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.map-left-panel {
  position: absolute;
  top: var(--map-rail-offset);
  left: calc(var(--map-rail-offset) + var(--map-rail-width) + var(--map-panel-gap));
  z-index: 4;
  width: var(--map-panel-width);
  display: grid;
  gap: 14px;
  padding: 14px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  visibility: visible;
  pointer-events: none;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    visibility 0s linear 0s;
}

.map-shell-experience.has-results-view .map-left-panel {
  height: calc(100% - (var(--map-rail-offset) * 2));
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
}

.map-panel-switcher {
  position: relative;
  min-height: 0;
  transition: height 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.map-overview-stack,
.map-results-stack {
  position: absolute;
  inset: 0;
  min-height: 0;
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 320ms;
  will-change: opacity, transform;
}

.map-overview-stack {
  display: grid;
  gap: 14px;
  align-content: start;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.map-results-stack {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px);
  visibility: hidden;
  pointer-events: none;
}

.map-shell-experience.has-results-view .map-overview-stack {
  opacity: 0;
  transform: translateY(-20px);
  visibility: hidden;
  pointer-events: none;
}

.map-shell-experience.has-results-view .map-results-stack {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 280ms ease,
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.map-left-panel > * {
  pointer-events: auto;
}

.map-shell-experience.is-panel-hidden .map-left-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(-100% - 28px));
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    visibility 0s linear 320ms;
}

.map-search-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 18px 32px rgba(35, 43, 47, 0.1);
}

.map-search-box {
  position: relative;
  z-index: 5;
}

.map-search-icon {
  width: 16px;
  height: 16px;
  display: block;
  background-color: var(--accent-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='15.5' y1='15.5' x2='20' y2='20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='15.5' y1='15.5' x2='20' y2='20'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.95;
}

.map-search-field input {
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  color: var(--text);
  background: transparent;
}

.map-search-field input::placeholder {
  color: rgba(102, 113, 115, 0.82);
}

.map-search-results {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  max-height: min(46vh, 360px);
  overflow: auto;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 22px 40px rgba(35, 43, 47, 0.16);
  backdrop-filter: blur(16px);
}

.map-search-results[hidden] {
  display: none;
}

.map-search-results-section + .map-search-results-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(35, 43, 47, 0.08);
}

.map-search-results-label {
  padding: 4px 8px 8px;
  color: rgba(102, 113, 115, 0.82);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: var(--brand-letter-spacing);
  text-transform: uppercase;
}

.map-search-result {
  width: 100%;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background 160ms ease, transform 160ms ease;
}

.map-search-result:hover {
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-1px);
}

.map-search-result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.map-search-result-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-strong);
  flex: 0 0 auto;
}

.map-search-result-subtitle {
  color: rgba(102, 113, 115, 0.88);
  font-size: 0.92rem;
  line-height: 1.35;
}

.map-search-meta {
  padding: 12px 14px;
  color: rgba(102, 113, 115, 0.82);
  font-size: 0.92rem;
  line-height: 1.35;
}

.map-city-card {
  position: relative;
  overflow: hidden;
  min-height: 162px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  border-radius: 28px;
  isolation: isolate;
  color: var(--white);
  background-color: #203026;
  background-image:
    linear-gradient(145deg, rgba(18, 24, 22, 0.82), rgba(15, 63, 39, 0.34)),
    var(--map-city-card-image, linear-gradient(130deg, #232b2f, #07b63c 62%, #35c85c 100%));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 24px 48px rgba(35, 43, 47, 0.16);
}

.map-city-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.map-city-card-track {
  width: 100%;
  height: 100%;
  display: flex;
  will-change: transform;
}

.map-city-card-slide {
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.map-city-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(8, 11, 10, 0.38);
}

.map-city-card::after {
  content: "";
  position: absolute;
  inset: auto -56px -68px auto;
  width: 220px;
  height: 220px;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
}

.map-city-card h1,
.map-city-card p {
  position: relative;
  z-index: 2;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
}

.map-city-card h1 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.9rem, 2.3vw, 2.8rem);
  letter-spacing: var(--brand-letter-spacing);
  line-height: 0.95;
  max-width: min(86%, 11ch);
}

.map-city-card p {
  max-width: 240px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.5;
}

.map-city-card.is-city-photo-loading::before {
  background:
    linear-gradient(180deg, rgba(10, 14, 12, 0.28) 0%, rgba(10, 14, 12, 0.54) 100%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.06) 8%, rgba(255, 255, 255, 0.18) 18%, rgba(255, 255, 255, 0.06) 32%);
  background-size: auto, 220% 100%;
  animation: mapCityCardPhotoPulse 1.8s ease-in-out infinite;
}

@keyframes mapCityCardPhotoPulse {
  0% {
    background-position: 0 0, 100% 0;
  }
  100% {
    background-position: 0 0, -120% 0;
  }
}

.map-visited-panel {
  display: grid;
  gap: 12px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 18px 34px rgba(35, 43, 47, 0.1);
  backdrop-filter: blur(16px);
}

.map-visited-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.map-visited-head h2 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}

.map-visited-head span {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.map-visited-list {
  display: grid;
  gap: 10px;
}

.map-visited-empty {
  margin: 0;
  padding: 14px 0 2px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.map-visited-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(35, 43, 47, 0.08);
}

.map-visited-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.map-visited-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.map-visited-copy strong {
  font-size: 0.98rem;
  line-height: 1.3;
}

.map-visited-copy span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.map-visited-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.map-visited-action {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(35, 43, 47, 0.1);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 22px rgba(35, 43, 47, 0.06);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.map-visited-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(35, 43, 47, 0.1);
}

.map-visited-action:disabled {
  opacity: 0.56;
  cursor: wait;
}

.map-visited-action.is-confirm {
  border-color: rgba(var(--accent-rgb), 0.22);
  background: rgba(var(--accent-rgb), 0.08);
}

.map-visited-action-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
}

.map-visited-action-icon.is-confirm,
.map-visited-action-icon.is-reject {
  color: currentColor;
  background-color: currentColor;
}

.map-visited-action-icon.is-confirm::before,
.map-visited-action-icon.is-confirm::after,
.map-visited-action-icon.is-reject::before,
.map-visited-action-icon.is-reject::after {
  content: none;
}

.map-visited-action-icon.is-confirm {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9 17.5 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-visited-action-icon.is-reject {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-visited-action.is-confirm {
  color: var(--accent-strong);
}

.map-visited-action.is-reject {
  color: rgba(35, 43, 47, 0.62);
  background: rgba(35, 43, 47, 0.03);
}

.map-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  align-items: stretch;
}

.map-shortcut {
  display: grid;
  place-items: center;
  min-height: 118px;
  height: 100%;
  gap: 10px;
  padding: 18px 16px;
  border-radius: 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow:
    0 16px 30px rgba(35, 43, 47, 0.1),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.06);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.map-shortcut:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.34);
}

.map-shortcut strong,
.map-shortcut span {
  display: block;
}

.map-shortcut strong {
  font-size: 0.98rem;
  margin: 0;
  max-width: 10ch;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.map-shortcut span {
  display: none;
}

.map-shortcut.active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow:
    0 16px 30px rgba(35, 43, 47, 0.1),
    inset 0 0 0 1px rgba(var(--accent-rgb), 0.06);
}

.map-shortcut.active span {
  color: var(--muted);
}

.map-results-card {
  display: flex;
  flex-direction: column;
  height: min(44vh, 430px);
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 42px rgba(35, 43, 47, 0.12);
}

.map-shell-experience.has-results-view .map-results-card {
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.map-results-card .results-head {
  align-items: center;
  flex-wrap: wrap;
  /* Clear the floating "Назад" rail button that overlaps the top-left. */
  margin-top: 42px;
  margin-bottom: 14px;
}

.map-results-card .results-head h3 {
  margin: 0;
  font-size: 1.45rem;
}

.map-results-card .results-head-actions {
  margin-left: auto;
}

.map-results-card .results-filter-button {
  min-height: 42px;
  padding-inline: 13px;
}

.map-results-card .results-filters-popover {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 22px;
}

.map-places-list {
  flex: 1;
  max-height: none;
  overflow: auto;
  padding: 3px 6px 4px 1px;
}

.map-results-card .place-card {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-height: max-content;
  height: auto;
  padding: 16px 16px 20px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 251, 246, 0.98)),
    rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 36px rgba(35, 43, 47, 0.08);
}

.map-results-card .place-card::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Flat, minimalist surface — no decorative glow. */
  background: none;
  pointer-events: none;
  z-index: 0;
}

.map-results-card .place-visual,
.map-results-card .place-copy {
  position: relative;
  z-index: 1;
}

.map-results-card .place-visual {
  min-height: 124px;
  height: 124px;
  border-radius: 24px;
  box-shadow: 0 18px 32px rgba(35, 43, 47, 0.16);
}

.map-results-card .place-copy {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 12px;
  align-self: start;
  min-height: 0;
}

.map-results-card .place-summary {
  gap: 9px;
}

.map-results-card .place-kicker {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(35, 43, 47, 0.5);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  box-shadow: none;
}

.map-results-card .place-kicker.is-community {
  background: transparent;
  color: rgba(8, 116, 47, 0.7);
}

.map-results-card .place-copy h3 {
  font-size: 1.06rem;
  line-height: 1.04;
}

.map-results-card .place-copy p {
  font-size: 0.92rem;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  color: rgba(35, 43, 47, 0.64);
}

.map-results-card .place-meta-row {
  gap: 12px;
  margin-top: -1px;
  padding-top: 0;
  align-items: center;
}

.map-results-card .place-meta-row .place-tags {
  flex-wrap: wrap;
  gap: 9px;
  overflow: visible;
}

.map-results-card .place-meta-row .place-tag {
  min-height: 30px;
  max-width: none;
  padding-inline: 12px;
  padding-block: 7px;
  background: rgba(35, 43, 47, 0.05);
  color: rgba(35, 43, 47, 0.68);
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

.map-results-card .place-meta-row .place-tag.is-more {
  background: rgba(var(--accent-rgb), 0.14);
  color: rgba(8, 116, 47, 0.84);
}

.map-results-card .place-time-card {
  gap: 0;
  margin-top: 2px;
  align-self: stretch;
  min-height: 0;
  padding: 13px 0 0;
  border-radius: 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(var(--accent-rgb), 0.12);
  box-shadow: none;
}

.map-results-card .place-time-card .place-time-row {
  gap: 5px;
}

.map-results-card .place-time-card .place-time-row + .place-time-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.08);
}

.map-results-card .place-time-label {
  font-size: 0.57rem;
  letter-spacing: 0.16em;
  color: rgba(35, 43, 47, 0.34);
}

.map-results-card .place-time-value {
  font-size: 1rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.map-control-stack {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  display: grid;
  gap: 10px;
  justify-items: end;
  pointer-events: none;
}

.map-control-stack > * {
  pointer-events: auto;
}

.map-control-button {
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 16px 30px rgba(35, 43, 47, 0.1);
  color: var(--text);
  font-weight: 800;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.map-control-button:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 20px 34px rgba(35, 43, 47, 0.12);
}

.map-control-button-square {
  width: 56px;
  height: 56px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  line-height: 1;
}

.map-zoom-stack {
  position: absolute;
  top: 50%;
  right: 20px;
  z-index: 4;
  display: grid;
  gap: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

.map-zoom-stack > * {
  pointer-events: auto;
}

.map-shell-experience .floating-map-info {
  top: 20px;
  left: calc(
    var(--map-rail-offset) + var(--map-rail-width) + var(--map-panel-gap) +
      var(--map-panel-width) + 18px
  );
  right: auto;
  transform: none;
  justify-content: flex-start;
}

.map-shell-experience.is-panel-hidden .floating-map-info {
  left: calc((var(--map-rail-offset) * 2) + var(--map-rail-width) + 18px);
}

/* ===========================================================================
   Маршрут на карте — плавающая панель построения маршрута
   ========================================================================= */
.map-route-panel {
  position: absolute;
  z-index: 6;
  left: 20px;
  bottom: 20px;
  width: min(360px, calc(100% - 40px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 26px 50px rgba(35, 43, 47, 0.18);
  backdrop-filter: blur(18px);
  color: var(--text);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  pointer-events: none;
}

.map-route-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.map-route-panel[hidden] {
  display: none;
}

.map-route-panel.is-picking {
  box-shadow: 0 0 0 2px var(--accent), 0 26px 50px rgba(35, 43, 47, 0.2);
}

.map-shell-experience .map-route-panel {
  left: calc(
    var(--map-rail-offset) + var(--map-rail-width) + var(--map-panel-gap) +
      var(--map-panel-width) + 18px
  );
}

.map-shell-experience.is-panel-hidden .map-route-panel {
  left: calc((var(--map-rail-offset) * 2) + var(--map-rail-width) + 18px);
}

.map-route-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.map-route-head strong {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.map-route-head-icon {
  width: 20px;
  height: 20px;
  display: block;
  background-color: var(--accent-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-route-close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(35, 43, 47, 0.1);
  background: rgba(35, 43, 47, 0.04);
  color: var(--muted);
  transition: background 160ms ease, color 160ms ease;
}

.map-route-close:hover {
  background: rgba(35, 43, 47, 0.08);
  color: var(--text);
}

.map-route-close svg {
  width: 16px;
  height: 16px;
}

.map-route-points {
  display: grid;
  gap: 4px;
}

.map-route-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
}

.map-route-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(35, 43, 47, 0.14);
}

.map-route-dot-origin {
  background: #0a86ff;
}

.map-route-dot-dest {
  background: var(--accent);
}

.map-route-point-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.map-route-point-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--brand-letter-spacing);
  color: rgba(102, 113, 115, 0.82);
}

.map-route-point-value {
  font-weight: 800;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The "Откуда" value is an editable control — style it as an obvious tappable
   chip with a chevron so users know they can change the start point. */
.map-route-origin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 3px;
  padding: 7px 10px 7px 13px;
  border: 1px solid rgba(35, 43, 47, 0.16);
  border-radius: 11px;
  background: rgba(35, 43, 47, 0.04);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.map-route-origin-toggle:hover {
  border-color: var(--accent);
  background: rgba(7, 182, 60, 0.09);
  box-shadow: 0 6px 16px rgba(7, 182, 60, 0.14);
}

.map-route-origin-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.map-route-origin-toggle.is-open {
  border-color: var(--accent);
  background: rgba(7, 182, 60, 0.1);
}

.map-route-origin-toggle-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-route-origin-toggle-caret {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: var(--accent-strong);
  transition: transform 220ms ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-route-origin-toggle.is-open .map-route-origin-toggle-caret {
  transform: rotate(180deg);
}

.map-route-origin-editor {
  display: grid;
  gap: 10px;
  margin: 2px 0 6px 24px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(7, 182, 60, 0.05);
  border: 1px solid rgba(7, 182, 60, 0.16);
}

.map-route-origin-editor[hidden] {
  display: none;
}

.map-route-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(35, 43, 47, 0.1);
}

.map-route-search-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background-color: var(--accent-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='15.5' y1='15.5' x2='20' y2='20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cline x1='15.5' y1='15.5' x2='20' y2='20'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-route-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
}

.map-route-search-input::placeholder {
  color: rgba(102, 113, 115, 0.78);
  font-weight: 500;
}

.map-route-origin-results {
  display: grid;
  gap: 4px;
  max-height: 196px;
  overflow: auto;
}

.map-route-origin-results[hidden] {
  display: none;
}

.map-route-origin-result {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}

.map-route-origin-result:hover {
  background: rgba(7, 182, 60, 0.08);
}

.map-route-origin-result-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
}

.map-route-origin-result-subtitle {
  font-size: 0.8rem;
  color: rgba(102, 113, 115, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-route-origin-quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.map-route-quick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(35, 43, 47, 0.12);
  background: #ffffff;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.map-route-quick:hover {
  border-color: var(--accent);
}

.map-route-quick.is-active {
  border-color: var(--accent);
  background: rgba(7, 182, 60, 0.12);
  color: var(--accent-strong);
}

.map-route-quick-icon {
  width: 14px;
  height: 14px;
  background-color: currentColor;
}

.map-route-quick-icon-locate {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-route-quick-icon-pick {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.map-route-modes {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(35, 43, 47, 0.05);
}

.map-route-mode {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.map-route-mode.is-active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 6px 14px rgba(35, 43, 47, 0.12);
}

.map-route-summary {
  min-height: 1.25em;
  font-weight: 800;
  font-size: 0.96rem;
  color: var(--text);
}

.map-route-summary.is-error {
  color: #d4351c;
  font-weight: 700;
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .map-route-panel,
  .map-shell-experience .map-route-panel,
  .map-shell-experience.is-panel-hidden .map-route-panel {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: auto;
    top: calc(var(--map-surface-top, 0px) + 10px);
    max-height: calc(100% - var(--map-surface-top, 0px) - 24px);
    overflow: auto;
  }
}

.about-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.about-strip article {
  padding: 24px;
}

.about-strip h3 {
  margin: 12px 0 0;
  font-size: 1.45rem;
  line-height: 1.15;
}

.credits-section {
  margin-top: 22px;
}

.credits-card {
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.credits-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
}

.credits-head h2 {
  margin: 10px 0 0;
  font-family: "Sora", sans-serif;
  letter-spacing: var(--brand-letter-spacing);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.credits-head p:last-child {
  max-width: 460px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.credits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.credit-item {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 20px;
}

.credit-item strong,
.credit-item span {
  display: block;
}

.credit-item strong {
  font-size: 0.98rem;
}

.credit-item span {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.5;
}

.credit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.credit-links a {
  color: var(--accent-strong);
  font-size: 0.92rem;
  font-weight: 700;
}

.leaflet-control-zoom {
  display: none;
}

.leaflet-container {
  font: inherit;
}

.leaflet-control-attribution {
  display: block;
  background: rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  margin: 0 12px 12px 0 !important;
  border: 1px solid rgba(var(--accent-rgb), 0.1);
  backdrop-filter: blur(12px);
}

.leaflet-control-attribution a {
  color: var(--accent-strong);
}

.cityhop-marker {
  appearance: none;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 24px rgba(12, 98, 28, 0.2);
  cursor: pointer;
}

.cityhop-marker.is-active {
  transform: none;
  box-shadow: 0 12px 24px rgba(12, 98, 28, 0.2);
}

.cityhop-marker.scenic {
  background: var(--accent);
}

.cityhop-marker.event {
  background: var(--accent-strong);
}

.cityhop-marker.food {
  background: var(--accent-soft);
}

.cityhop-popup .leaflet-popup-content-wrapper {
  background: rgba(5, 177, 55, 0.94);
  color: var(--white);
  border-radius: 18px;
  box-shadow: 0 22px 52px rgba(12, 98, 28, 0.22);
}

.cityhop-popup .leaflet-popup-tip {
  background: rgba(5, 177, 55, 0.94);
}

.popup-card {
  min-width: 220px;
  color: var(--text);
  padding: 16px;
}

.popup-card strong,
.popup-card p,
.popup-card small {
  display: block;
}

.popup-card strong {
  margin-bottom: 6px;
  font-size: 1rem;
  color: var(--text);
}

.popup-card p {
  margin: 0 0 8px;
  color: rgba(35, 43, 47, 0.82);
  line-height: 1.45;
}

.popup-card small {
  color: rgba(102, 113, 115, 0.92);
}

.popup-card-place {
  min-width: min(74vw, 264px);
  max-width: 320px;
  padding: 0;
}

.popup-card-place-link {
  cursor: pointer;
}

.popup-card-place-link:hover strong {
  color: var(--accent-strong);
}

.popup-card-place-link:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.24);
  outline-offset: 4px;
}

.popup-card-carousel {
  position: relative;
}

.popup-card-gallery {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background:
    linear-gradient(180deg, rgba(10, 62, 27, 0.16), rgba(10, 62, 27, 0.02)),
    rgba(238, 245, 239, 0.92);
}

.popup-card-gallery::-webkit-scrollbar {
  display: none;
}

.popup-card-slide {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 1.8 / 1;
  scroll-snap-align: start;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(8, 112, 34, 0.2), rgba(8, 112, 34, 0.04));
}

.popup-card-slide-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.popup-card-slide-index {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17, 25, 28, 0.44);
  color: #fff;
  backdrop-filter: blur(8px);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.popup-card-body-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.popup-card-body-head-main {
  display: grid;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.popup-card-body-head .popup-card-categories {
  margin-bottom: 0;
}

.popup-card-submitter {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  text-align: left;
}

.popup-card-submitter.is-clickable {
  cursor: pointer;
}

.popup-card-submitter.is-clickable:hover .popup-card-submitter-name,
.popup-card-submitter.is-clickable:focus-visible .popup-card-submitter-name {
  color: var(--accent-strong);
}

.popup-card-submitter.is-clickable:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.22);
  outline-offset: 6px;
  border-radius: 18px;
}

.popup-card-submitter-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.08));
  color: var(--accent-strong);
  box-shadow: 0 10px 18px rgba(12, 18, 20, 0.08);
}

.popup-card-submitter-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.popup-card-submitter-avatar-fallback {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.popup-card-submitter-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  justify-items: start;
  text-align: left;
}

.popup-card-submitter-label {
  color: rgba(35, 43, 47, 0.42);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.popup-card-submitter-name {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.02;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-card-edit-button {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(247, 251, 247, 0.94);
  color: rgba(35, 43, 47, 0.72);
  box-shadow: 0 10px 22px rgba(12, 18, 20, 0.08);
  cursor: pointer;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.popup-card-edit-button:hover {
  background: #ffffff;
  border-color: rgba(var(--accent-rgb), 0.22);
  color: var(--accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(12, 18, 20, 0.12);
}

.popup-card-edit-button:active {
  transform: translateY(0) scale(0.97);
}

.popup-card-edit-button:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.24);
  outline-offset: 2px;
}

.popup-card-edit-button-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.popup-card-photo-rating {
  --rating-accent: #d39a1d;
  --rating-accent-strong: #b97d04;
  --rating-border: rgba(211, 154, 29, 0.2);
  --rating-surface: rgba(255, 249, 236, 0.94);
  --rating-base: rgba(185, 125, 4, 0.18);
  position: absolute;
  left: 14px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--rating-border);
  background: var(--rating-surface);
  color: var(--text);
  box-shadow:
    0 12px 24px rgba(12, 18, 20, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.popup-card-photo-rating.is-high {
  --rating-accent: #08a13a;
  --rating-accent-strong: #06752a;
  --rating-border: rgba(8, 161, 58, 0.2);
  --rating-surface: rgba(244, 250, 245, 0.94);
  --rating-base: rgba(8, 161, 58, 0.16);
}

.popup-card-photo-rating.is-medium {
  --rating-accent: #d39a1d;
  --rating-accent-strong: #b97d04;
  --rating-border: rgba(211, 154, 29, 0.2);
  --rating-surface: rgba(255, 249, 236, 0.94);
  --rating-base: rgba(185, 125, 4, 0.18);
}

.popup-card-photo-rating.is-low {
  --rating-accent: #db5844;
  --rating-accent-strong: #bc3f2b;
  --rating-border: rgba(219, 88, 68, 0.2);
  --rating-surface: rgba(255, 243, 241, 0.95);
  --rating-base: rgba(188, 63, 43, 0.18);
}

.popup-card-photo-rating.is-empty {
  --rating-accent: #708086;
  --rating-accent-strong: #516066;
  --rating-border: rgba(112, 128, 134, 0.18);
  --rating-surface: rgba(247, 249, 250, 0.95);
  --rating-base: rgba(81, 96, 102, 0.16);
}

.popup-card-rating-stars {
  position: relative;
  display: inline-block;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.popup-card-rating-stars-base,
.popup-card-rating-stars-fill {
  display: block;
  white-space: nowrap;
}

.popup-card-rating-stars-base {
  color: var(--rating-base);
}

.popup-card-rating-stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--rating-accent);
}

.popup-card-rating-value {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--rating-accent-strong);
}

.popup-card-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 25, 28, 0.46);
  color: #fff;
  box-shadow: 0 14px 28px rgba(12, 18, 20, 0.16);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.popup-card-arrow:hover {
  background: rgba(17, 25, 28, 0.62);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(12, 18, 20, 0.22);
}

.popup-card-arrow:active {
  transform: translateY(0) scale(0.97);
}

.popup-card-arrow-icon {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4' y2='12'/%3E%3Cpolyline points='10 6 4 12 10 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4' y2='12'/%3E%3Cpolyline points='10 6 4 12 10 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.popup-card-arrow-prev {
  left: 12px;
}

.popup-card-arrow-next {
  right: 12px;
}

.popup-card-arrow-next .popup-card-arrow-icon {
  transform: scaleX(-1);
}

.popup-card-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 0;
}

.popup-card-dot {
  appearance: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(8, 112, 34, 0.18);
  transition:
    width 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.popup-card-dot.is-active {
  width: 20px;
  border-radius: 999px;
  background: rgba(8, 112, 34, 0.84);
  transform: translateY(0);
}

.popup-card-dot:not(.is-active) {
  transform: scale(0.96);
}

.popup-card-dot:hover {
  background: rgba(8, 112, 34, 0.36);
}

.popup-card-dot:focus-visible {
  outline: 2px solid rgba(8, 112, 34, 0.35);
  outline-offset: 3px;
}

.popup-card-body {
  padding: 12px 14px 14px;
}

.popup-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.popup-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.popup-card-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--popup-chip-fill, rgba(7, 182, 60, 0.12));
  color: var(--popup-chip-color, #09963a);
}

.popup-card-chip-scenic {
  background: rgba(7, 182, 60, 0.12);
  color: #09963a;
}

.popup-card-chip-event {
  background: rgba(5, 143, 48, 0.12);
  color: #0b7c34;
}

.popup-card-chip-food {
  background: rgba(53, 200, 92, 0.14);
  color: #0e8f3b;
}

.popup-card-place strong {
  margin-bottom: 8px;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.popup-card-place p {
  margin: 0 0 12px;
  color: rgba(35, 43, 47, 0.76);
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  line-height: 1.54;
  font-size: 0.92rem;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.popup-card-meta {
  display: grid;
  gap: 8px;
}

.popup-card-meta-row {
  display: grid;
  gap: 3px;
}

.popup-card-meta-label {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(104, 117, 120, 0.92);
}

.popup-card-meta-value {
  font-family: "Manrope", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--text);
}

.place-page-main {
  width: min(100% - 28px, 1440px);
  margin: 0 auto;
  padding: 28px 0 40px;
}

.place-page-shell {
  display: grid;
  gap: 18px;
}

.place-page-topbar {
  display: flex;
  justify-content: flex-start;
}

.place-page-back {
  min-height: 48px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 246, 0.98));
  color: #2b3330;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow:
    0 12px 26px rgba(35, 43, 47, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.place-page-back:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(242, 247, 243, 1));
  border-color: rgba(var(--accent-rgb), 0.38);
  color: #1f2724;
  box-shadow:
    0 16px 30px rgba(35, 43, 47, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.place-page-card-wrap {
  min-height: calc(100dvh - 210px);
  display: grid;
  align-items: start;
  justify-items: center;
}

#placePageCard {
  width: 100%;
}

/* Embedded place page (?embed=1): shown inside the map's bottom sheet via an
   iframe, so drop all the site chrome and page chrome and let the card fill. */
body.is-embedded {
  padding-bottom: 0 !important;
  background: #fff;
}
body.is-embedded .site-header,
body.is-embedded .place-page-topbar,
body.is-embedded .mobile-tabbar {
  display: none !important;
}
body.is-embedded .place-page-main {
  width: 100% !important;
  margin: 0 !important;
  padding: 12px 14px 28px !important;
}
body.is-embedded .place-page-shell {
  gap: 0 !important;
}
body.is-embedded .place-page-card-wrap {
  min-height: 0 !important;
}

.place-page-loading,
.place-page-error {
  width: min(100%, 420px);
  padding: 26px 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  box-shadow: 0 26px 46px rgba(35, 43, 47, 0.1);
  font-size: 1rem;
  font-weight: 600;
  color: rgba(35, 43, 47, 0.72);
  text-align: center;
}

.place-detail-card {
  width: min(100%, 560px);
  max-width: 560px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 30px;
  box-shadow: 0 28px 58px rgba(35, 43, 47, 0.13);
  overflow: hidden;
}

.place-detail-card .popup-card-slide {
  aspect-ratio: 1.72 / 1;
}

.place-detail-card .popup-card-body {
  padding: 18px 20px 20px;
}

.place-detail-card strong {
  font-size: 1.42rem;
}

.place-detail-card p {
  font-size: 1rem;
}

.place-detail-card .popup-card-meta {
  gap: 12px;
}

.place-detail-route {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  padding: 0 22px;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--place-ref-green, #009b36), var(--place-ref-green-dark, #078c34));
  box-shadow: 0 16px 30px rgba(0, 155, 54, 0.24);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.place-detail-route:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 36px rgba(0, 155, 54, 0.28);
  filter: brightness(1.03);
}

.place-detail-route:active {
  transform: translateY(0);
}

.place-detail-route-icon {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.place-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.place-report-button {
  min-height: 40px;
  padding: 9px 16px;
  border: 1.5px solid rgba(239, 68, 68, 0.72);
  border-radius: 999px;
  background: transparent;
  color: #dc2626;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.place-report-button:hover {
  transform: translateY(-1px);
  border-color: #dc2626;
  background: rgba(239, 68, 68, 0.06);
  box-shadow: 0 12px 24px rgba(239, 68, 68, 0.12);
}

.place-report-button:focus-visible {
  outline: 3px solid rgba(239, 68, 68, 0.18);
  outline-offset: 3px;
}

.place-report-button:disabled {
  cursor: not-allowed;
  color: rgba(220, 38, 38, 0.58);
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.035);
  box-shadow: none;
  transform: none;
}

body.place-report-is-open {
  overflow: hidden;
}

.place-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(13, 20, 17, 0.48);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.place-report-overlay[hidden] {
  display: none;
}

.place-report-overlay.is-visible {
  opacity: 1;
}

.place-report-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 26px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 249, 0.98)),
    var(--surface);
  color: var(--text);
  box-shadow:
    0 30px 90px rgba(13, 24, 18, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.place-report-overlay.is-visible .place-report-dialog {
  transform: translateY(0) scale(1);
}

.place-report-dialog-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 56px;
}

.place-report-dialog-head h2 {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
}

.place-report-dialog-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 18px;
  background: rgba(239, 68, 68, 0.07);
  color: #dc2626;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
}

.place-report-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(35, 43, 47, 0.08);
  border-radius: 999px;
  background: rgba(35, 43, 47, 0.045);
  cursor: pointer;
}

.place-report-close::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.place-report-close::after {
  content: none;
}

.place-report-close:focus-visible,
.place-report-radio:focus-visible + .place-report-option-control,
.place-report-cancel:focus-visible,
.place-report-submit:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.2);
  outline-offset: 3px;
}

.place-report-form {
  display: grid;
  gap: 16px;
}

.place-report-options {
  display: grid;
  gap: 10px;
}

.place-report-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid rgba(35, 43, 47, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.place-report-option:hover,
.place-report-option.is-selected {
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.055);
}

.place-report-option.is-selected {
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.12);
}

.place-report-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.place-report-option-control {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(102, 113, 115, 0.35);
  background: #ffffff;
  box-shadow: inset 0 0 0 5px #ffffff;
}

.place-report-option.is-selected .place-report-option-control {
  border-color: var(--accent);
  background: var(--accent);
}

.place-report-option-copy {
  min-width: 0;
  display: grid;
}

.place-report-option-copy strong,
.place-report-details span {
  font-size: 0.95rem;
  line-height: 1.25;
}

.place-report-details {
  display: grid;
  gap: 8px;
}

.place-report-details[hidden] {
  display: none;
}

.place-report-details textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}

.place-report-details textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.36);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

.place-report-message {
  padding: 12px 14px;
  border-radius: 16px;
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.14);
  font-size: 0.9rem;
  line-height: 1.45;
}

.place-report-message[data-state="success"] {
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.16);
}

.place-report-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.place-report-cancel,
.place-report-submit {
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.place-report-cancel {
  border: 0;
  background: rgba(35, 43, 47, 0.07);
  color: var(--text);
}

.place-report-submit {
  border: 1.5px solid #dc2626;
  background: #dc2626;
  color: var(--white);
  box-shadow: 0 14px 28px rgba(220, 38, 38, 0.18);
}

.place-report-cancel:disabled,
.place-report-submit:disabled {
  cursor: wait;
  opacity: 0.72;
}

@media (max-width: 560px) {
  .place-report-overlay {
    padding: 16px;
  }

  .place-report-dialog {
    max-height: 88vh;
    padding: 20px 18px;
    border-radius: 22px;
  }

  .place-report-dialog-head {
    min-height: 48px;
    gap: 12px;
  }

  .place-report-dialog-mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }

  .place-report-dialog-head h2 {
    font-size: 1.12rem;
  }

  .place-report-dialog-actions {
    flex-direction: column-reverse;
  }

  .place-report-cancel,
  .place-report-submit {
    width: 100%;
  }
}

.place-page-layout {
  width: min(100%, 1140px);
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(320px, 420px);
  gap: 24px;
  align-items: start;
}

.place-page-left-column {
  display: flex;
  justify-content: center;
}

.place-comments-panel {
  display: grid;
  gap: 18px;
}

.place-comments-panel-head,
.place-comments-list-head,
.place-comment-head,
.place-comment-author,
.place-comment-current-user,
.place-comments-summary,
.place-comment-upload-preview-meta,
.place-comments-guest-actions {
  display: flex;
}

.place-comments-panel-head {
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.place-comments-panel-head > div:first-child {
  min-height: 56px;
  display: flex;
  align-items: center;
}

.place-comments-panel-head .eyebrow {
  margin-bottom: 6px;
}

.place-comments-panel-head h2 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 1.6rem;
  line-height: 1;
}

.place-comments-summary {
  align-items: center;
  gap: 10px;
}

.place-comments-count,
.place-comments-average {
  min-width: 56px;
  min-height: 56px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.place-comments-count {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-strong);
}

.place-comments-average {
  --comment-rating-accent: #708086;
  --comment-rating-accent-strong: #516066;
  --comment-rating-border: rgba(112, 128, 134, 0.16);
  --comment-rating-surface: rgba(247, 249, 250, 0.96);
  min-width: 64px;
  border: 1px solid var(--comment-rating-border);
  background: var(--comment-rating-surface);
  color: var(--comment-rating-accent-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.place-comments-average.is-high {
  --comment-rating-accent: #08a13a;
  --comment-rating-accent-strong: #06752a;
  --comment-rating-border: rgba(8, 161, 58, 0.2);
  --comment-rating-surface: rgba(244, 250, 245, 0.96);
}

.place-comments-average.is-medium {
  --comment-rating-accent: #d39a1d;
  --comment-rating-accent-strong: #b97d04;
  --comment-rating-border: rgba(211, 154, 29, 0.2);
  --comment-rating-surface: rgba(255, 249, 236, 0.96);
}

.place-comments-average.is-low {
  --comment-rating-accent: #db5844;
  --comment-rating-accent-strong: #bc3f2b;
  --comment-rating-border: rgba(219, 88, 68, 0.2);
  --comment-rating-surface: rgba(255, 243, 241, 0.96);
}

.place-comments-average.is-empty {
  --comment-rating-accent: #708086;
  --comment-rating-accent-strong: #516066;
  --comment-rating-border: rgba(112, 128, 134, 0.16);
  --comment-rating-surface: rgba(247, 249, 250, 0.96);
}

.place-comments-composer-card,
.place-comments-list-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 30px;
  box-shadow: 0 24px 48px rgba(35, 43, 47, 0.1);
  padding: 20px;
}

.place-comment-form {
  display: grid;
  gap: 16px;
}

.place-comment-summary-card {
  display: grid;
  gap: 16px;
}

.place-comment-current-user {
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.1);
}

.place-comment-current-user-copy {
  display: grid;
  gap: 3px;
}

.place-comment-current-user-copy strong {
  font-size: 1rem;
}

.place-comment-current-user-copy span {
  color: var(--muted);
  font-size: 0.92rem;
}

.place-comment-summary-actions,
.place-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.place-comment-avatar,
.place-comment-current-user-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(35, 43, 47, 0.12));
}

.place-comment-avatar-image,
.place-comment-current-user-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.place-comment-avatar-fallback,
.place-comment-current-user-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: "Sora", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  background: linear-gradient(135deg, rgba(35, 43, 47, 0.86), rgba(7, 182, 60, 0.86));
}

.place-comment-form-group {
  display: grid;
  gap: 10px;
}

.place-comment-label {
  font-family: "Sora", sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(104, 117, 120, 0.94);
}

.place-comment-rating,
.place-comment-stars {
  --comment-star-active: var(--accent-strong);
  --comment-star-hover: rgba(var(--accent-rgb), 0.54);
  display: flex;
  align-items: center;
  gap: 6px;
}

.place-comment-rating.is-high,
.place-comment-stars.is-high {
  --comment-star-active: #08a13a;
  --comment-star-hover: rgba(8, 161, 58, 0.56);
}

.place-comment-rating.is-medium,
.place-comment-stars.is-medium {
  --comment-star-active: #d39a1d;
  --comment-star-hover: rgba(211, 154, 29, 0.58);
}

.place-comment-rating.is-low,
.place-comment-stars.is-low {
  --comment-star-active: #db5844;
  --comment-star-hover: rgba(219, 88, 68, 0.58);
}

.place-comment-rating.is-empty,
.place-comment-stars.is-empty {
  --comment-star-active: #708086;
  --comment-star-hover: rgba(112, 128, 134, 0.5);
}

.place-comment-star-button,
.place-comment-star {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 1.52rem;
  line-height: 1;
  color: rgba(35, 43, 47, 0.18);
  transition:
    transform 160ms ease,
    color 160ms ease;
}

.place-comment-star-button {
  cursor: pointer;
}

.place-comment-star-button:hover {
  transform: translateY(-1px) scale(1.04);
  color: var(--comment-star-hover);
}

.place-comment-star-button.is-active,
.place-comment-star.is-active {
  color: var(--comment-star-active);
}

/* Выбранная звезда закрашена, а не только обведена. У иконки в разметке стоит
   fill="none", но это presentation attribute — CSS его перебивает. */
.place-comment-star.is-active svg {
  fill: currentColor;
}

.place-comment-textarea {
  width: 100%;
  min-height: 148px;
  padding: 16px 18px;
  border-radius: 24px;
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  background: rgba(248, 250, 248, 0.96);
  color: var(--text);
  outline: none;
  resize: vertical;
  font: inherit;
  line-height: 1.58;
}

.place-comment-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.28);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

.place-comment-textarea::placeholder {
  color: rgba(102, 113, 115, 0.82);
}

.place-comment-upload-tile {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  border: 1px dashed rgba(var(--accent-rgb), 0.26);
  background: rgba(248, 250, 248, 0.94);
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.place-comment-upload-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.42);
  background: rgba(246, 250, 246, 0.98);
}

.place-comment-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.place-comment-upload-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-strong);
  font-family: "Sora", sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.place-comment-upload-copy {
  display: grid;
  gap: 4px;
}

.place-comment-upload-copy strong {
  font-size: 0.98rem;
}

.place-comment-upload-copy span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.place-comment-upload-preview {
  display: grid;
  gap: 12px;
}

.place-comment-upload-preview-meta {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.place-comment-upload-remove {
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(35, 43, 47, 0.08);
  color: var(--text);
  border: 1px solid rgba(35, 43, 47, 0.1);
  font-weight: 700;
}

.place-comment-status {
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 0.92rem;
  font-weight: 600;
}

.place-comment-status.is-error {
  background: rgba(207, 53, 53, 0.08);
  color: #a53030;
  border: 1px solid rgba(207, 53, 53, 0.16);
}

.place-comment-status.is-success {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
}

.place-comment-edit-button,
.place-comment-edit {
  appearance: none;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.place-comment-edit-button {
  min-height: 46px;
  padding-inline: 18px;
}

.place-comment-edit {
  padding: 10px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
}

.place-comment-edit:hover,
.place-comment-edit-button:hover {
  transform: translateY(-1px);
}

.place-comment-submit {
  width: 100%;
  justify-content: center;
}

.place-comments-list-card {
  display: grid;
  gap: 14px;
}

.place-comments-list-head {
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.place-comments-list-head strong {
  font-family: "Sora", sans-serif;
  font-size: 1.02rem;
}

.place-comments-list-head span {
  color: var(--muted);
  font-size: 0.9rem;
}

.place-comments-list {
  display: grid;
  gap: 14px;
  max-height: min(54vh, 720px);
  overflow: auto;
  padding-right: 4px;
}

.place-comment-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(249, 250, 249, 0.98);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.place-comment-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.place-comment-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
  flex: 0 0 auto;
}

.place-comment-author {
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.place-comment-author-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.place-comment-author-copy strong {
  font-size: 0.98rem;
  line-height: 1.2;
}

.place-comment-date {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: right;
}

.place-comment-delete {
  appearance: none;
  border: 1px solid rgba(207, 53, 53, 0.16);
  border-radius: 999px;
  background: rgba(207, 53, 53, 0.08);
  color: #a53030;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

.place-comment-delete:hover:not(:disabled) {
  transform: translateY(-1px);
  background: rgba(207, 53, 53, 0.12);
  border-color: rgba(207, 53, 53, 0.24);
}

.place-comment-delete:disabled {
  opacity: 0.72;
  cursor: wait;
}

.place-comment-text {
  margin: 0;
  color: rgba(35, 43, 47, 0.78);
  line-height: 1.58;
}

.place-comment-media {
  overflow: hidden;
  border-radius: 22px;
  background: rgba(237, 241, 238, 0.92);
  border: 1px solid rgba(var(--accent-rgb), 0.08);
}

.place-comment-media-image,
.place-comment-media-video {
  width: 100%;
  display: block;
  object-fit: cover;
}

.place-comment-media-image {
  max-height: 320px;
}

/* Review like / dislike controls */
.place-comment-reactions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.place-comment-react {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: rgba(249, 250, 249, 0.9);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    color 0.14s ease,
    border-color 0.14s ease,
    background 0.14s ease;
}

.place-comment-react svg {
  width: 17px;
  height: 17px;
}

.place-comment-react:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.34);
  color: var(--text);
}

.place-comment-react:not(:disabled):active {
  transform: scale(0.95);
}

.place-comment-react:disabled {
  cursor: default;
  opacity: 0.75;
}

.place-comment-react-like.is-active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
}

.place-comment-react-dislike.is-active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #e2564c, #c53b31);
}

.place-comment-react-count {
  min-width: 8px;
  text-align: center;
}

.place-comment-media-video {
  max-height: 320px;
  background: #12191c;
}

.place-comments-empty {
  padding: 24px;
  border-radius: 24px;
  background: rgba(249, 250, 249, 0.98);
  border: 1px dashed rgba(var(--accent-rgb), 0.16);
  color: var(--muted);
  line-height: 1.55;
  text-align: center;
}

.place-comments-guest-card {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.place-comments-guest-card h3 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 1.08rem;
}

.place-comments-guest-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 42ch;
}

.place-comments-guest-actions {
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.place-comments-auth-link,
.place-comments-auth-link-primary {
  min-height: 44px;
}

@media (max-width: 760px) {
  .results-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .results-filter-button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .results-filters-actions {
    justify-content: stretch;
    gap: 8px;
  }

  .results-filters-apply,
  .results-filters-reset {
    flex: 1 1 0;
  }

  .place-page-main {
    width: min(100% - 20px, 1440px);
    padding: 18px 0 28px;
  }

  .place-page-card-wrap {
    min-height: auto;
  }

  .place-page-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .place-page-left-column {
    justify-content: stretch;
  }

  .place-detail-card {
    width: 100%;
    max-width: none;
    border-radius: 24px;
  }

  .place-detail-card .popup-card-slide {
    aspect-ratio: 1.58 / 1;
  }

  .place-detail-card .popup-card-body {
    padding: 16px 16px 18px;
  }

  .place-detail-card strong {
    font-size: 1.2rem;
  }

  .place-comments-composer-card,
  .place-comments-list-card {
    padding: 16px;
    border-radius: 24px;
  }

  .place-comments-list {
    max-height: none;
    overflow: visible;
  }

  .place-comment-head,
  .place-comments-panel-head,
  .place-comments-list-head,
  .place-comment-upload-preview-meta {
    display: grid;
  }

  .place-comment-meta {
    justify-items: start;
  }

  .place-comments-summary {
    justify-content: start;
  }

  .place-comment-date {
    text-align: left;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.24);
  border-radius: 999px;
}

@media (max-width: 1180px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: center;
  }

  .main-nav,
  .header-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .map-grid {
    grid-template-columns: 1fr;
  }

  .places-list {
    max-height: none;
  }

  .results-card {
    height: auto;
  }

  .map-page .landing-shell {
    width: 100%;
  }

  .map-shell-experience {
    --map-rail-offset: 16px;
    --map-panel-width: min(356px, calc(100% - 212px));
  }

  .map-side-rail {
    width: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fan-card {
    opacity: 1;
    animation: none;
  }

  .map-side-rail,
  .map-rail-link {
    transition: none;
  }

  .header-notification-button,
  .header-notification-dropdown,
  .header-notification-item {
    transition: none;
  }
}

@media (max-width: 900px) {
  .hero-search-row {
    flex-direction: column;
  }

  .hero-stats,
  .about-strip,
  .credits-list {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: start;
  }

  .toolbar {
    width: 100%;
    flex-direction: column;
    align-items: start;
  }

  .pill-group {
    width: 100%;
  }

  .fan-stage {
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .fan-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 0;
    transform: none;
    animation-name: cityhop-fan-card-rise-mobile;
  }

  .fan-card:hover,
  .fan-card.is-active {
    transform: translateY(-4px);
  }

  .credits-head {
    flex-direction: column;
    align-items: start;
  }

  .map-page .landing-shell {
    width: 100%;
  }

  .map-shell-experience {
    --map-rail-width: 64px;
    --map-rail-offset: 14px;
    --map-panel-gap: 10px;
    --map-mobile-fill-overlap: 28px;
    --map-panel-width: calc(100% - (var(--map-rail-offset) * 2));
    min-height: calc(100dvh - 122px);
    height: calc(100dvh - 122px);
  }

  .map-shell-experience:not(.is-panel-hidden)::after {
    width: calc(100% - var(--map-rail-offset));
  }

  .map-side-rail {
    z-index: 5;
    gap: 10px;
    padding: 12px 8px;
  }

  .map-shell-experience:not(.is-panel-hidden) .map-side-rail {
    width: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .map-shell-experience:not(.is-panel-hidden) .map-rail-toggle {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
  }

  .map-shell-experience.has-results-view .map-rail-back {
    position: absolute;
    top: 58px;
    left: 0;
    pointer-events: auto;
  }

  .map-shell-experience .map-left-panel {
    left: var(--map-rail-offset) !important;
    width: calc(100% - (var(--map-rail-offset) * 2)) !important;
    max-width: none;
  }

  .map-shell-experience:not(.is-panel-hidden) .map-panel-switcher {
    width: calc(100% + var(--map-mobile-fill-overlap));
    margin-left: calc(var(--map-mobile-fill-overlap) * -1);
  }

  .map-shell-experience:not(.is-panel-hidden) .map-search-box {
    width: calc(100% - var(--map-rail-width));
    margin-left: var(--map-rail-width);
  }

  .map-shell-experience.is-panel-hidden .map-search-box {
    width: 100%;
    margin-left: 0;
  }

  .map-shell-experience .map-search-field {
    width: 100%;
    margin-left: 0;
  }

  .map-shell-experience .map-city-card,
  .map-shell-experience .map-visited-panel,
  .map-shell-experience .map-shortcuts,
  .map-shell-experience .map-results-card {
    width: 100%;
    margin-left: 0;
    justify-self: stretch;
  }

  .map-results-card {
    height: 360px;
    width: 100%;
    margin-left: 0;
  }

  .map-shell-experience.has-results-view .map-results-card {
    height: 100%;
  }

  .map-control-stack {
    top: 16px;
    right: 16px;
  }

  .map-zoom-stack {
    right: 16px;
  }

  .map-shell-experience .floating-map-info {
    top: 16px;
    bottom: auto;
    left: calc(var(--map-rail-offset) + var(--map-rail-width) + 14px);
    right: auto;
    transform: none;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .site-header,
  .landing-shell {
    width: min(100% - 20px, 1440px);
  }

  .site-header {
    padding-top: 14px;
  }

  .brand {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .main-nav {
    gap: 14px;
    font-size: 0.88rem;
  }

  .header-actions {
    gap: 8px;
  }

  .header-notification-button {
    width: 48px;
    height: 48px;
  }

  .header-notification-dropdown {
    width: min(340px, calc(100vw - 20px));
  }

  .header-chip,
  .pill,
  .text-button,
  .primary-button {
    width: 100%;
    justify-content: center;
  }

  .header-chip-add,
  #logoutButton.header-chip-auth,
  .header-chip-user {
    width: 48px;
    min-width: 48px;
    height: 48px;
  }

  #loginButton.header-chip-auth,
  .site-header:not(.auth-header) .primary-button.header-signup-button {
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    font-size: 1rem;
    line-height: normal;
  }

  #loginButton.header-chip-auth {
    padding: 12px 16px;
  }

  .site-header:not(.auth-header) .primary-button.header-signup-button {
    padding: 13px 20px;
  }

  #addPlaceButton.header-chip-add {
    width: auto;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .header-chip-location {
    width: auto;
    min-width: 0;
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
  }

  .hero-section {
    padding-top: 28px;
  }

  .hero-section h1 {
    font-size: clamp(2.3rem, 13vw, 3.8rem);
  }

  .search-field {
    min-width: 100%;
  }

  .chip-row,
  .pill-group {
    justify-content: start;
  }

  .hero-stats article,
  .featured-card,
  .results-card,
  .map-card,
  .about-strip article,
  .credits-card {
    border-radius: 24px;
  }

  .fan-stage {
    grid-template-columns: 1fr;
  }

  .map-card {
    padding: 10px;
  }

  .map-shell {
    min-height: 460px;
    border-radius: 24px;
  }

  .floating-map-info {
    flex-direction: column;
  }

  .map-legend {
    min-width: 118px;
    padding: 12px 14px;
  }

  .place-card {
    grid-template-columns: 1fr;
  }

  .place-visual {
    width: 100%;
    min-height: 176px;
    height: 176px;
  }

  .place-side {
    padding-top: 6px;
  }

  .map-page .landing-shell {
    width: 100%;
  }

  .map-shell-experience {
    --map-rail-width: 58px;
    --map-rail-offset: 12px;
    --map-panel-gap: 10px;
    --map-mobile-fill-overlap: 30px;
    --map-panel-width: min(306px, calc(100% - 92px));
    min-height: calc(100dvh - 144px);
    height: calc(100dvh - 144px);
    border-radius: 0;
  }

  .map-shell-experience:not(.is-panel-hidden)::after {
    width: calc(100% - var(--map-rail-offset));
  }

  .map-side-rail {
    z-index: 5;
    width: 58px;
    gap: 8px;
    padding: 10px 0;
  }

  .map-shell-experience:not(.is-panel-hidden) .map-side-rail {
    width: 0;
    padding: 0;
    overflow: visible;
    pointer-events: none;
  }

  .map-shell-experience:not(.is-panel-hidden) .map-rail-toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 58px;
    pointer-events: auto;
  }

  .map-shell-experience.has-results-view .map-rail-back {
    position: absolute;
    top: 58px;
    left: 0;
    width: 58px;
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
    pointer-events: auto;
  }

  .map-rail-link span:last-child {
    font-size: 0.72rem;
  }

  .map-rail-back,
  .map-rail-link {
    width: 100%;
    margin-left: 0;
  }

  .map-shell-experience .map-left-panel {
    left: var(--map-rail-offset) !important;
    width: calc(100% - (var(--map-rail-offset) * 2)) !important;
    gap: 12px;
  }

  .map-shell-experience:not(.is-panel-hidden) .map-panel-switcher {
    width: calc(100% + var(--map-mobile-fill-overlap));
    margin-left: calc(var(--map-mobile-fill-overlap) * -1);
  }

  .map-shell-experience:not(.is-panel-hidden) .map-search-box {
    width: calc(100% - var(--map-rail-width));
    margin-left: var(--map-rail-width);
  }

  .map-shell-experience.is-panel-hidden .map-search-box {
    width: 100%;
    margin-left: 0;
  }

  .map-shell-experience .map-search-field {
    width: 100%;
    margin-left: 0;
    padding: 14px;
    grid-template-columns: 14px minmax(0, 1fr);
  }

  .map-city-card {
    min-height: 144px;
    padding: 18px;
  }

  .map-shell-experience .map-city-card,
  .map-shell-experience .map-visited-panel,
  .map-shell-experience .map-shortcuts,
  .map-shell-experience .map-results-card {
    width: 100%;
    margin-left: 0;
    justify-self: stretch;
  }

  .map-city-card h1 {
    font-size: clamp(1.7rem, 9vw, 2.3rem);
  }

  .map-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-visited-head,
  .map-visited-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-visited-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .map-results-card {
    height: 460px;
    width: 100%;
    margin-left: 0;
  }

  .map-shell-experience.has-results-view .map-results-card {
    height: 100%;
  }

  .map-control-button {
    padding: 12px 14px;
  }

  .map-control-button-square {
    width: 50px;
    height: 50px;
    font-size: 1.45rem;
  }

  .map-shell-experience .floating-map-info {
    top: 12px;
    left: calc(var(--map-rail-offset) + var(--map-rail-width) + 12px);
    right: auto;
    bottom: auto;
  }
}

/* Home refresh */
body[data-page="home"] {
  --home-ink: #12191c;
  --home-muted: #5f6d70;
  --home-line: rgba(18, 25, 28, 0.1);
  --home-sky: #1d9bf0;
  --home-violet: #7c3aed;
  --home-coral: #ff6b5f;
  --home-yellow: #f4b63f;
  background:
    linear-gradient(180deg, #ffffff 0%, #f6fbf7 36%, #ffffff 74%),
    repeating-linear-gradient(90deg, rgba(7, 182, 60, 0.045) 0 1px, transparent 1px 112px);
}

.home-nav {
  flex: 1 1 auto;
  justify-content: center;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 20px;
  border-radius: 999px;
  color: var(--home-ink, var(--text));
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(18, 25, 28, 0.1);
  font-weight: 800;
  box-shadow: 0 16px 34px rgba(18, 25, 28, 0.08);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.secondary-button:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 20px 42px rgba(18, 25, 28, 0.12);
}

[data-reveal] {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(34px) scale(0.985);
  will-change: opacity, filter, transform;
}

.home-motion-ready [data-reveal] {
  transition:
    opacity 820ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 820ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 820ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.home-hero {
  min-height: min(760px, calc(100vh - 92px));
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.78fr);
  gap: clamp(30px, 5vw, 76px);
  align-items: center;
  padding: clamp(48px, 7vw, 96px) 0 clamp(44px, 7vw, 86px);
  text-align: left;
}

.home-hero h1 {
  max-width: 920px;
  margin: 0;
  align-items: flex-start;
  font-size: clamp(3.4rem, 8vw, 7.8rem);
  line-height: 0.9;
  color: var(--home-ink);
}

.home-hero .hero-title-line {
  justify-content: flex-start;
}

.home-hero .hero-title-accent {
  position: relative;
  color: var(--accent-strong);
}

.home-hero .hero-title-accent::after {
  content: "";
  position: absolute;
  left: 0.03em;
  right: 0.03em;
  bottom: 0.06em;
  height: 0.1em;
  border-radius: 999px;
  background: rgba(7, 182, 60, 0.18);
  z-index: -1;
}

.home-hero .hero-title-break {
  width: auto;
}

.home-hero .hero-lead {
  display: block;
  max-width: 680px;
  margin: 26px 0 0;
  color: var(--home-muted);
  font-size: clamp(1.06rem, 1.4vw, 1.22rem);
  line-height: 1.72;
}

.home-hero .hero-search-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 34px;
}

.home-hero .hero-map-button {
  min-width: min(100%, 280px);
  min-height: 66px;
  padding-inline: 34px;
  font-size: 1.08rem;
}

.hero-add-button {
  min-height: 66px;
  padding-inline: 28px;
}

.home-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
  max-width: 780px;
}

.home-hero-stats article {
  min-height: 124px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(18, 25, 28, 0.08);
  box-shadow: 0 18px 42px rgba(18, 25, 28, 0.06);
}

.home-hero-stats strong,
.home-hero-stats span {
  display: block;
}

.home-hero-stats strong {
  color: var(--home-ink);
  font-size: 0.92rem;
  line-height: 1.2;
}

.home-hero-stats span {
  margin-top: 9px;
  color: var(--home-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.home-hero-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  align-items: center;
  margin-top: clamp(88px, 9vw, 148px);
  isolation: isolate;
}

.home-hero-visual::before {
  content: "";
  position: absolute;
  inset: 42px 26px 28px 18px;
  border-radius: 44px;
  background:
    linear-gradient(135deg, rgba(7, 182, 60, 0.12), rgba(29, 155, 240, 0.09)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.52));
  border: 1px solid rgba(18, 25, 28, 0.08);
  transform: rotate(-3deg);
  z-index: -2;
}

.home-map-preview {
  position: relative;
  min-height: 490px;
  overflow: hidden;
  border-radius: 44px;
  background:
    linear-gradient(90deg, transparent 0 23%, rgba(18, 25, 28, 0.055) 23% 23.4%, transparent 23.4% 100%),
    linear-gradient(0deg, transparent 0 21%, rgba(18, 25, 28, 0.052) 21% 21.35%, transparent 21.35% 100%),
    linear-gradient(135deg, #effaf2 0%, #ffffff 45%, #edf7ff 100%);
  background-size: 128px 128px, 128px 128px, auto;
  border: 1px solid rgba(18, 25, 28, 0.1);
  box-shadow: 0 34px 80px rgba(18, 25, 28, 0.16);
}

.home-map-preview::before {
  content: "";
  position: absolute;
  inset: 28px;
  border-radius: 32px;
  border: 1px dashed rgba(7, 143, 48, 0.28);
}

.home-map-route {
  position: absolute;
  left: 14%;
  top: 52%;
  width: 76%;
  height: 84px;
  border-top: 5px solid rgba(7, 143, 48, 0.72);
  border-radius: 50%;
  transform: rotate(-18deg);
  filter: drop-shadow(0 12px 18px rgba(7, 143, 48, 0.22));
  animation: homeRouteFloat 5.5s ease-in-out infinite;
}

.home-map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 4px;
  background: var(--accent);
  border: 4px solid #ffffff;
  box-shadow: 0 16px 30px rgba(18, 25, 28, 0.18);
  transform: rotate(-45deg);
  animation: homePinPulse 2.7s ease-in-out infinite;
}

.home-map-pin::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #ffffff;
}

.home-map-pin-one {
  left: 24%;
  top: 28%;
  background: var(--home-coral);
}

.home-map-pin-two {
  right: 18%;
  top: 40%;
  background: var(--home-sky);
  animation-delay: 360ms;
}

.home-map-pin-three {
  left: 45%;
  bottom: 24%;
  background: var(--home-violet);
  animation-delay: 720ms;
}

.home-map-panel,
.home-live-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(18, 25, 28, 0.09);
  box-shadow: 0 24px 54px rgba(18, 25, 28, 0.14);
  backdrop-filter: blur(18px);
}

.home-map-panel {
  left: 30px;
  bottom: 28px;
  display: grid;
  gap: 6px;
  min-width: 210px;
  padding: 18px;
  border-radius: 26px;
}

.home-map-panel strong,
.home-live-card strong {
  color: var(--home-ink);
  line-height: 1.18;
}

.home-map-panel span,
.home-live-card span,
.home-live-card p {
  color: var(--home-muted);
}

.home-live-card {
  right: -18px;
  top: 78px;
  width: min(260px, 54%);
  padding: 20px;
  border-radius: 28px;
  animation: homeFloatCard 5.8s ease-in-out infinite;
}

.home-live-card span {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.home-live-card strong {
  display: block;
  font-size: 1.18rem;
}

.home-live-card p {
  margin: 10px 0 0;
  line-height: 1.5;
}

.home-category-band {
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 28px;
  border-radius: 32px;
  background: #11191c;
  color: #ffffff;
  box-shadow: 0 28px 68px rgba(18, 25, 28, 0.16);
}

.home-category-band .home-section-kicker {
  color: rgba(255, 255, 255, 0.68);
}

.home-category-band .chip {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.14);
}

.home-category-band .chip.active {
  background: #ffffff;
  color: var(--accent-strong);
}

.home-section-kicker {
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-picks-section,
.home-how-section,
.home-community-section,
.home-final-cta {
  padding: clamp(64px, 9vw, 118px) 0 0;
}

.home-section-header {
  align-items: flex-end;
  margin-bottom: 8px;
}

.home-section-header h2,
.home-how-section h2,
.home-community-copy h2,
.home-final-cta h2 {
  margin: 12px 0 0;
  max-width: 760px;
  color: var(--home-ink);
  font-family: "Sora", sans-serif;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: var(--brand-letter-spacing);
}

.home-text-link {
  flex: 0 0 auto;
  box-shadow: none;
}

.home-picks-section .fan-stage {
  height: 440px;
  margin-top: 46px;
}

.home-picks-section .fan-card {
  width: 232px;
  height: 414px;
  border-radius: 32px;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: clamp(44px, 6vw, 72px);
}

.home-feature-card,
.home-steps article,
.home-community-board,
.home-final-cta {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(18, 25, 28, 0.09);
  box-shadow: 0 26px 66px rgba(18, 25, 28, 0.08);
  backdrop-filter: blur(18px);
}

.home-feature-card {
  min-height: 270px;
  padding: 28px;
  border-radius: 30px;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.home-feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 32px 78px rgba(18, 25, 28, 0.12);
}

.home-feature-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 24px;
  border-radius: 18px;
  background: rgba(7, 182, 60, 0.1);
  color: var(--accent-strong);
}

.home-feature-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background: currentColor;
}

.home-feature-icon-map::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-feature-icon-filter::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7v6l-4 2v-8L4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7v6l-4 2v-8L4 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-feature-icon-visit::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='8' cy='9.5' r='1.5'/%3E%3Cpath d='M4 17l5-5 3 3 3-4 5 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='8' cy='9.5' r='1.5'/%3E%3Cpath d='M4 17l5-5 3 3 3-4 5 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-feature-card h3,
.home-steps h3 {
  margin: 0;
  color: var(--home-ink);
  font-family: "Sora", sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.08;
}

.home-feature-card p,
.home-steps p,
.home-community-copy p {
  margin: 14px 0 0;
  color: var(--home-muted);
  line-height: 1.65;
}

.home-how-section {
  display: grid;
  gap: 28px;
}

.home-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-steps article {
  min-height: 286px;
  padding: 30px;
  border-radius: 30px;
}

.home-steps span {
  display: block;
  margin-bottom: 42px;
  color: var(--accent-strong);
  font-family: "Sora", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
}

.home-community-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.62fr);
  gap: clamp(26px, 6vw, 78px);
  align-items: center;
}

.home-community-copy p {
  max-width: 680px;
  font-size: 1.08rem;
}

.home-community-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.home-community-board {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(17, 25, 28, 0.94), rgba(17, 25, 28, 0.88)),
    linear-gradient(135deg, rgba(7, 182, 60, 0.3), rgba(29, 155, 240, 0.18));
  color: #ffffff;
}

.home-community-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.home-community-row.is-active {
  background: rgba(255, 255, 255, 0.15);
}

.home-community-row span {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--accent), var(--home-sky));
}

.home-community-row:nth-child(2) span {
  background: linear-gradient(135deg, var(--home-coral), var(--home-yellow));
}

.home-community-row:nth-child(3) span {
  background: linear-gradient(135deg, var(--home-violet), var(--home-sky));
}

.home-community-row strong {
  min-width: 0;
  line-height: 1.25;
}

.home-community-row em {
  color: rgba(255, 255, 255, 0.64);
  font-style: normal;
  font-size: 0.86rem;
  white-space: nowrap;
}

.home-final-cta {
  display: grid;
  justify-items: center;
  gap: 28px;
  margin-top: clamp(64px, 9vw, 118px);
  padding: clamp(52px, 8vw, 84px);
  border-radius: 42px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(7, 182, 60, 0.12), rgba(29, 155, 240, 0.08)),
    #ffffff;
}

.home-final-cta h2 {
  max-width: 820px;
  margin: 0;
}

.home-footer {
  width: min(1440px, calc(100% - 32px));
  margin: clamp(34px, 5vw, 64px) auto 0;
  padding: 28px 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  color: rgba(18, 25, 28, 0.68);
  border-top: 1px solid rgba(18, 25, 28, 0.09);
}

.home-footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.home-footer-brand strong {
  color: var(--home-ink);
  font-weight: 800;
}

.home-footer a {
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.home-footer a:hover {
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.home-footer-links {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  font-weight: 700;
}

@keyframes homeRouteFloat {
  0%,
  100% {
    transform: rotate(-18deg) translateY(0);
  }

  50% {
    transform: rotate(-18deg) translateY(-10px);
  }
}

@keyframes homePinPulse {
  0%,
  100% {
    transform: rotate(-45deg) translateY(0) scale(1);
  }

  50% {
    transform: rotate(-45deg) translateY(-8px) scale(1.06);
  }
}

@keyframes homeFloatCard {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }

  50% {
    transform: translateY(-12px) rotate(-1deg);
  }
}

@media (max-width: 1180px) {
  .home-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-hero-visual {
    min-height: 480px;
    margin-top: 0;
  }

  .home-nav {
    order: 3;
  }
}

@media (max-width: 900px) {
  .home-hero {
    padding-top: 42px;
  }

  .home-hero h1 {
    font-size: clamp(3rem, 12vw, 5.8rem);
  }

  .home-hero-stats,
  .home-feature-grid,
  .home-steps,
  .home-community-section {
    grid-template-columns: 1fr;
  }

  .home-hero-stats article,
  .home-feature-card,
  .home-steps article {
    min-height: 0;
  }

  .home-picks-section .fan-stage {
    height: auto;
  }

  .home-picks-section .fan-card {
    width: 100%;
    height: auto;
    min-height: 360px;
  }

  .home-community-section {
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .site-header {
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 14px;
  }

  body[data-page="home"] .brand-wordmark {
    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .home-nav {
    display: none;
  }

  body[data-page="home"] .header-actions {
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }

  body[data-page="home"] .header-chip-location {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    overflow: hidden;
    font-size: 0;
    padding-inline: 0;
  }

  body[data-page="home"] #loginButton.header-chip-auth,
  body[data-page="home"] .site-header:not(.auth-header) .primary-button.header-signup-button {
    flex: 0 0 auto;
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .home-hero {
    gap: 30px;
    padding-top: 30px;
    text-align: left;
  }

  .home-hero h1 {
    font-size: clamp(2.42rem, 12.8vw, 3.7rem);
    line-height: 0.96;
  }

  .home-hero .hero-lead {
    font-size: 1.05rem;
    line-height: 1.62;
  }

  .home-hero .hero-title-line {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
  }

  .home-hero .hero-search-row,
  .home-community-actions {
    align-items: stretch;
  }

  .home-hero .hero-map-button,
  .hero-add-button,
  .home-community-actions .primary-button,
  .home-community-actions .secondary-button {
    width: 100%;
  }

  .home-hero-stats {
    gap: 10px;
  }

  .home-hero-visual {
    min-height: 390px;
  }

  .home-map-preview {
    min-height: 370px;
    border-radius: 32px;
  }

  .home-live-card {
    top: 48px;
    right: 10px;
    width: min(250px, 70%);
  }

  .home-map-panel {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .home-category-band,
  .home-final-cta {
    border-radius: 28px;
    padding: 24px;
  }

  .home-section-header {
    align-items: stretch;
  }

  .home-text-link {
    width: 100%;
    justify-content: center;
  }

  .home-community-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .home-community-row em {
    grid-column: 2;
  }

  .home-footer {
    width: min(100% - 20px, 1440px);
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 28px;
  }

  .home-footer-brand,
  .home-footer-links {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-map-route,
  .home-map-pin,
  .home-live-card {
    animation: none;
  }
}

/* Home reference redesign */
html.home-page-root #how-it-works {
  scroll-margin-top: 18px;
}

html.home-page-root,
body[data-page="home"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.home-page-root::-webkit-scrollbar,
body[data-page="home"]::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body[data-page="home"] {
  --home-ink: #10191d;
  --home-muted: #687476;
  --home-dark: #07100f;
  --home-deep: #0b1514;
  --home-card: #ffffff;
  --home-line: rgba(16, 25, 29, 0.09);
  --home-green: #07b63c;
  --home-green-dark: #049b34;
  --home-green-soft: rgba(7, 182, 60, 0.13);
  background: #ffffff;
  color: var(--home-ink);
}

body[data-page="home"] .landing-shell {
  width: 100%;
  margin: 0;
  padding: 0 0 54px;
  overflow: hidden;
}

body[data-page="home"] .site-header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 40;
  width: min(1240px, calc(100% - 64px));
  margin: 0;
  padding: 24px 0;
  color: #ffffff;
  transform: translateX(-50%);
}

body[data-page="home"] .site-header::before {
  content: none;
}

body[data-page="home"] .brand-wordmark,
body[data-page="map"] .brand-wordmark {
  font-family: "Sora", "Manrope", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: 0;
}

body[data-page="home"] .brand-wordmark {
  color: #ffffff;
  text-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
}

body[data-page="home"] .header-actions {
  gap: clamp(12px, 2vw, 26px);
  /* City chip now sits next to the logo on the left; keep the login/register
     cluster pinned to the right. */
  margin-left: auto;
}

body[data-page="home"] .header-chip,
body[data-page="home"] #loginButton.header-chip-auth,
body[data-page="home"] .site-header:not(.auth-header) .primary-button.header-signup-button {
  min-height: 0;
  height: auto;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 0.92rem;
  font-weight: 800;
}

body[data-page="home"] .header-chip-location {
  gap: 6px;
}

body[data-page="home"] .header-chip-location::before {
  width: 16px;
  height: 16px;
}

/* The pin size var lives on .header-actions; the chip now sits beside the logo,
   outside that cluster, so re-declare it here or the pin ::before collapses to 0. */
body[data-page="home"] .header-chip-location {
  --home-header-icon-size: var(--header-icon-size);
}
/* Match the map header's city chip: green pin + a chevron after the name. */
body[data-page="home"] .header-chip-location::before {
  background: #22c55e;
}
body[data-page="home"] .header-chip-location::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="home"] .header-chip:hover,
body[data-page="home"] #loginButton.header-chip-auth:hover,
body[data-page="home"] .site-header:not(.auth-header) .primary-button.header-signup-button:hover {
  color: #ffffff;
  background: transparent;
  border: 0;
  transform: translateY(-1px);
}

body[data-page="home"] .home-hero {
  position: relative;
  display: block;
  min-height: 790px;
  padding: 138px 0 78px;
  overflow: hidden;
  text-align: left;
  background: #03090a;
}

/* Плавная смена фонового фото города: два слоя-буфера (кроссфейд по opacity,
   переключает cityhop-main.js) + затемняющий скрим-градиент поверх фото. */
body[data-page="home"] .home-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
body[data-page="home"] .home-hero-photo {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 900ms ease;
  will-change: opacity;
}
body[data-page="home"] .home-hero-photo.is-active {
  opacity: 1;
}
/* Дефолт до определения города — Москва. */
body[data-page="home"] .home-hero-photo:first-child {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Moscow-City_skyline.jpg/1920px-Moscow-City_skyline.jpg");
}
body[data-page="home"] .home-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 36%, rgba(7, 182, 60, 0.18), transparent 30%),
    linear-gradient(90deg, rgba(3, 9, 10, 0.94) 0%, rgba(3, 9, 10, 0.72) 42%, rgba(3, 9, 10, 0.5) 72%, rgba(3, 9, 10, 0.72) 100%),
    linear-gradient(180deg, rgba(3, 9, 10, 0.18) 0%, rgba(3, 9, 10, 0.96) 100%);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-hero-photo {
    transition: none;
  }
}

body[data-page="home"] .home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 78px;
  border-radius: 48px 48px 0 0;
  background: #ffffff;
  box-shadow: 0 -18px 45px rgba(255, 255, 255, 0.2);
}

body[data-page="home"] .home-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 670px) minmax(420px, 1fr);
  gap: clamp(34px, 4vw, 44px);
  align-items: center;
  width: min(1240px, calc(100% - 64px));
  margin: 0 auto;
}

body[data-page="home"] .home-hero-copy {
  max-width: 650px;
}

body[data-page="home"] .home-city-script {
  display: block;
  margin: 0 0 -2px;
  color: #10cf4f;
  font-family: "Marck Script", cursive;
  font-size: clamp(3.05rem, 4.6vw, 4.05rem);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0;
  transform: rotate(-3deg);
  transform-origin: left center;
  text-shadow:
    0 1px 0 rgba(7, 182, 60, 0.22),
    0 14px 36px rgba(0, 0, 0, 0.34);
}

body[data-page="home"] .home-hero h1 {
  display: grid;
  gap: 0.02em;
  max-width: 670px;
  margin: 0;
  color: #ffffff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(3.35rem, 4.5vw, 4.05rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.48);
}

body[data-page="home"] .home-hero h1 span {
  display: block;
  white-space: nowrap;
}

body[data-page="home"] .home-hero .hero-lead {
  max-width: 560px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  font-weight: 600;
  line-height: 1.72;
}

body[data-page="home"] .home-hero .hero-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;
  margin-top: 34px;
}

body[data-page="home"] .home-hero .hero-map-button,
body[data-page="home"] .home-community-actions .primary-button,
body[data-page="home"] .home-bottom-cta .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 190px;
  height: 56px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--home-green) 0%, var(--home-green-dark) 100%);
  box-shadow: 0 20px 42px rgba(7, 182, 60, 0.24);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

body[data-page="home"] .hero-how-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  min-height: 56px;
  padding: 0 23px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: none;
  backdrop-filter: blur(14px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

body[data-page="home"] .hero-how-button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.54);
}

body[data-page="home"] .home-button-icon {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

body[data-page="home"] .home-button-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask: var(--home-button-icon) center / contain no-repeat;
  mask: var(--home-button-icon) center / contain no-repeat;
}

body[data-page="home"] .home-button-icon-map {
  --home-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-button-icon-play {
  --home-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5l11 6.5-11 6.5z'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-hero-visual {
  position: relative;
  min-height: 410px;
  margin-top: 36px;
  isolation: isolate;
}

body[data-page="home"] .home-hero-visual::before {
  content: "";
  position: absolute;
  inset: 18px 0 -16px 22px;
  z-index: -1;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transform: none;
  backdrop-filter: blur(10px);
}

body[data-page="home"] .home-map-preview {
  min-height: 390px;
  border-radius: 32px;
  background:
    linear-gradient(130deg, transparent 0 19%, rgba(255, 255, 255, 0.1) 19.2% 19.6%, transparent 19.8% 100%),
    linear-gradient(42deg, transparent 0 39%, rgba(255, 255, 255, 0.12) 39.2% 39.6%, transparent 39.8% 100%),
    linear-gradient(-35deg, transparent 0 62%, rgba(255, 255, 255, 0.1) 62.2% 62.6%, transparent 62.8% 100%),
    radial-gradient(circle at 72% 26%, rgba(124, 58, 237, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)),
    rgba(13, 14, 15, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

body[data-page="home"] .home-map-preview::before {
  inset: 34px;
  border-radius: 26px;
  border-color: rgba(255, 255, 255, 0.18);
}

body[data-page="home"] .home-map-route {
  left: 9%;
  top: 56%;
  width: 82%;
  height: 112px;
  border-top: 4px solid rgba(196, 226, 28, 0.92);
  border-radius: 50%;
  filter: drop-shadow(0 12px 18px rgba(196, 226, 28, 0.18));
  transform: rotate(-18deg);
}

body[data-page="home"] .home-map-pin {
  width: 22px;
  height: 22px;
  border-width: 4px;
}

body[data-page="home"] .home-map-pin-one {
  left: 24%;
  top: 44%;
  background: #ff524d;
}

body[data-page="home"] .home-map-pin-two {
  right: 23%;
  top: 31%;
  background: #6848ff;
}

body[data-page="home"] .home-map-pin-three {
  right: 18%;
  bottom: 20%;
  left: auto;
  background: #7652ff;
}

body[data-page="home"] .home-map-panel {
  left: 36px;
  bottom: 26px;
  min-width: 220px;
  padding: 20px 22px;
  border-radius: 20px;
  color: #ffffff;
  background: rgba(37, 38, 40, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.26);
}

body[data-page="home"] .home-map-panel strong,
body[data-page="home"] .home-map-panel span {
  color: #ffffff;
}

body[data-page="home"] .home-map-panel span {
  opacity: 0.82;
}

/* ИИ-гид teaser bubble floating on the map preview */
body[data-page="home"] .home-map-ai {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: min(268px, calc(100% - 80px));
  padding: 13px 15px;
  border-radius: 18px 18px 18px 7px;
  background: linear-gradient(158deg, rgba(21, 34, 27, 0.92), rgba(11, 17, 14, 0.92));
  border: 1px solid rgba(47, 217, 104, 0.3);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 34px rgba(47, 217, 104, 0.12);
  backdrop-filter: blur(14px);
  animation: homeMapAiPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

@keyframes homeMapAiPop {
  0% { opacity: 0; transform: translateY(-10px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

body[data-page="home"] .home-map-ai-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(150deg, #34d871, #059669);
  box-shadow: 0 8px 18px rgba(5, 150, 90, 0.42);
}

body[data-page="home"] .home-map-ai-avatar svg {
  width: 21px;
  height: 21px;
  fill: #ffffff;
}

body[data-page="home"] .home-map-ai-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

body[data-page="home"] .home-map-ai-name {
  color: #4ade80;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

body[data-page="home"] .home-map-ai-text {
  color: #eef4f0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.32;
}

body[data-page="home"] .home-map-ai-typing {
  display: inline-flex;
  gap: 4px;
  margin-top: 6px;
}

body[data-page="home"] .home-map-ai-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: homeMapAiTyping 1.25s ease-in-out infinite;
}

body[data-page="home"] .home-map-ai-typing i:nth-child(2) { animation-delay: 0.18s; }
body[data-page="home"] .home-map-ai-typing i:nth-child(3) { animation-delay: 0.36s; }

@keyframes homeMapAiTyping {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-map-ai { animation: none; }
  body[data-page="home"] .home-map-ai-typing i { animation: none; opacity: 0.6; }
}

body[data-page="home"] .home-live-card {
  right: -30px;
  top: 18px;
  width: 230px;
  padding: 20px;
  border-radius: 30px;
  background: #ffffff;
  border: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}

body[data-page="home"] .home-live-card span {
  margin-bottom: 12px;
  color: var(--home-green-dark);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

body[data-page="home"] .home-live-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1.68;
  margin-bottom: 16px;
  border-radius: 16px;
  object-fit: cover;
}

body[data-page="home"] .home-live-card strong {
  display: block;
  color: var(--home-ink);
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.28;
}

body[data-page="home"] .home-live-card p {
  margin: 12px 0 14px;
  color: var(--home-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

body[data-page="home"] .home-live-card a {
  color: var(--home-green-dark);
  font-size: 0.88rem;
  font-weight: 900;
}

/* ===========================================================================
   Живой чат ИИ-гида — заменяет фейковую карту в hero. Самоиграющийся демо
   главной фишки: вопрос → печатающийся ответ → каскад реальных мест из
   /api/home/showcase. Тема берётся из глобальных переменных (--surface/--text/
   --accent), поэтому работает и в тёмной, и в светлой.
   =========================================================================== */
body[data-page="home"] .home-ai-chat {
  position: relative;
  z-index: 2;
  width: 100%;
  /* .home-hero-visual — это grid; без min-width:0 контент растягивает трек шире
     колонки и на мобиле карточка вылезает за вьюпорт. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
}

/* Пузырь-вопрос пользователя (справа) */
body[data-page="home"] .home-ai-q {
  align-self: flex-end;
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(150deg, var(--accent), var(--accent-strong));
  box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.28);
}
body[data-page="home"] .home-ai-q p {
  margin: 0;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Ответ ИИ-гида (слева) */
body[data-page="home"] .home-ai-a {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 94%;
}
body[data-page="home"] .home-ai-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(150deg, #34d871, #059669);
  box-shadow: 0 8px 18px rgba(5, 150, 90, 0.42);
}
body[data-page="home"] .home-ai-avatar svg {
  width: 22px;
  height: 22px;
  fill: #ffffff;
}
body[data-page="home"] .home-ai-a-body {
  min-width: 0;
  padding: 11px 15px;
  border-radius: 16px 16px 16px 5px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
body[data-page="home"] .home-ai-name {
  display: block;
  margin-bottom: 3px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
body[data-page="home"] .home-ai-text {
  position: relative;
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
/* Невидимый «призрак» держит финальную высоту и ширину пузыря, поэтому блок
   не дёргается, пока ответ печатается по буквам. */
body[data-page="home"] .home-ai-text-ghost {
  visibility: hidden;
}
/* Печатаемый текст рисуется поверх призрака, не влияя на раскладку. */
body[data-page="home"] .home-ai-text-live {
  position: absolute;
  inset: 0;
}
body[data-page="home"] .home-ai-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  height: 1.35em;
  gap: 4px;
}
body[data-page="home"] .home-ai-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.55);
  animation: homeMapAiTyping 1.25s ease-in-out infinite;
}
body[data-page="home"] .home-ai-typing i:nth-child(2) { animation-delay: 0.18s; }
body[data-page="home"] .home-ai-typing i:nth-child(3) { animation-delay: 0.36s; }

/* Маршрут: вертикальная пунктир-линия + пронумерованные остановки */
body[data-page="home"] .home-ai-route {
  position: relative;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-page="home"] .home-ai-route::before {
  content: "";
  position: absolute;
  /* по центру кружков-номеров: бейдж 28px, левый край на 0 → центр на 14px,
     минус половина ширины линии (1px) = 13px. */
  left: 13px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--accent-rgb), 0.55) 0 6px,
    transparent 6px 12px
  );
  /* Прочерчивается сверху вниз синхронно с каскадом карточек. clip-path не
     искажает штрихи (в отличие от scaleY) — линия «доезжает» до каждого места. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s ease;
}
body[data-page="home"] .home-ai-chat.route-drawn .home-ai-route::before {
  clip-path: inset(0 0 0 0);
}
body[data-page="home"] .home-ai-stop {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  /* по умолчанию скрыто — каскадом появляется на проигрывании (как [data-reveal]) */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
body[data-page="home"] .home-ai-stop.is-in {
  opacity: 1;
  transform: none;
}
body[data-page="home"] .home-ai-stop-index {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.38);
}
body[data-page="home"] .home-ai-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
body[data-page="home"] .home-ai-card:hover {
  transform: translateX(3px);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.4);
}
body[data-page="home"] .home-ai-card-media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.35), rgba(var(--accent-rgb), 0.12));
}
body[data-page="home"] .home-ai-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-page="home"] .home-ai-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body[data-page="home"] .home-ai-card-title {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-page="home"] .home-ai-card-chip {
  align-self: flex-start;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--accent-strong);
  background: rgba(var(--accent-rgb), 0.14);
}
body[data-page="home"] .home-ai-more {
  align-self: flex-start;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
}
body[data-page="home"] .home-ai-more span:last-child {
  transition: transform 0.2s ease;
}
body[data-page="home"] .home-ai-more:hover span:last-child {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-ai-stop {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body[data-page="home"] .home-ai-route::before {
    clip-path: none;
    transition: none;
  }
  body[data-page="home"] .home-ai-typing i { animation: none; opacity: 0.6; }
}

body[data-page="home"] .home-category-band {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: 22px;
  width: 100%;
  margin: -50px 0 0;
  padding: 42px max(60px, calc((100vw - 1240px) / 2)) 50px;
  border-radius: 48px 48px 0 0;
  color: var(--home-ink);
  background: #ffffff;
  box-shadow: 0 -16px 48px rgba(16, 25, 29, 0.08);
}

body[data-page="home"] .home-category-band .home-section-kicker {
  color: var(--home-ink);
  font-size: 0.98rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="home"] .home-category-band .chip-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(84px, 1fr));
  gap: 12px;
  width: min(1240px, 100%);
  justify-content: stretch;
}

body[data-page="home"] .home-category-band .chip {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E");
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  min-height: 104px;
  padding: 64px 8px 14px;
  border-radius: 14px;
  color: var(--home-ink);
  background: #ffffff;
  border: 1px solid var(--home-line);
  box-shadow: 0 18px 42px rgba(16, 25, 29, 0.08);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.18;
  text-align: center;
}

body[data-page="home"] .home-category-band .chip::before,
body[data-page="home"] .home-category-band .chip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

body[data-page="home"] .home-category-band .chip::before {
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(16, 25, 29, 0.04);
  border: 1px solid rgba(16, 25, 29, 0.08);
}

body[data-page="home"] .home-category-band .chip::after {
  top: 26px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--chip-icon) center / contain no-repeat;
  mask: var(--chip-icon) center / contain no-repeat;
}

body[data-page="home"] .home-category-band .chip:nth-child(2) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Cpath d='M2 20l6-8 4 5 3-4 7 7'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(3) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V4h8v17'/%3E%3Cpath d='M14 21V10h5v11'/%3E%3Cpath d='M9 8h2M9 12h2M9 16h2'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(4) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22v-5'/%3E%3Cpath d='M6.5 17a5.5 5.5 0 1 1 11 0z'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(5) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='3'/%3E%3Cpath d='M3 15.5c1.6 0 1.6 1.4 3.2 1.4s1.6-1.4 3.2-1.4 1.6 1.4 3.2 1.4 1.6-1.4 3.2-1.4 1.6 1.4 3.2 1.4'/%3E%3Cpath d='M3 19.5c1.6 0 1.6 1.4 3.2 1.4s1.6-1.4 3.2-1.4 1.6 1.4 3.2 1.4 1.6-1.4 3.2-1.4 1.6 1.4 3.2 1.4'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(6) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 12 4l9 5'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V11M10 21V11M14 21V11M18 21V11'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(7) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h12v4a5 5 0 0 1-5 5H10a5 5 0 0 1-5-5z'/%3E%3Cpath d='M17 9h1.5a2.5 2.5 0 0 1 0 5H17'/%3E%3Cpath d='M8 3c0 1.2-1 1.5-1 2.8M12 3c0 1.2-1 1.5-1 2.8'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(8) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(9) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5a1.5 1.5 0 0 1 1.5-1.5h1.7l1.3-2h5l1.3 2h1.7A1.5 1.5 0 0 1 19.5 8.5v8A1.5 1.5 0 0 1 18 18H6a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:nth-child(10) {
  --chip-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M15.5 8.5l-2.3 4.7-4.7 2.3 2.3-4.7z'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-category-band .chip:hover {
  transform: translateY(-4px);
  border-color: rgba(7, 182, 60, 0.18);
  box-shadow: 0 24px 54px rgba(16, 25, 29, 0.12);
}

body[data-page="home"] .home-category-band .chip.active {
  color: var(--home-ink);
  background: #ffffff;
  border-color: rgba(7, 182, 60, 0.18);
}

body[data-page="home"] .home-category-band .chip.active::before {
  background: #4fcf81;
  border-color: transparent;
}

body[data-page="home"] .home-category-band .chip.active::after {
  background: #ffffff;
}

body[data-page="home"] .home-section-kicker {
  color: var(--home-green);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="home"] .home-picks-section,
body[data-page="home"] .home-how-section,
body[data-page="home"] .home-community-section,
body[data-page="home"] .home-bottom-cta {
  width: min(1240px, calc(100% - 64px));
  margin-right: auto;
  margin-left: auto;
}

body[data-page="home"] .home-picks-section {
  position: relative;
  padding: 74px 0 34px;
  overflow: visible;
  isolation: isolate;
}

body[data-page="home"] .home-picks-section::before {
  content: "";
  position: absolute;
  left: -150px;
  right: -150px;
  top: 170px;
  z-index: -1;
  height: 650px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(16, 25, 29, 0.09) 0%, rgba(16, 25, 29, 0.045) 34%, transparent 74%),
    linear-gradient(180deg, transparent 0%, rgba(16, 25, 29, 0.032) 45%, transparent 100%);
  filter: blur(18px);
}

body[data-page="home"] .home-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 0 0 32px;
}

body[data-page="home"] .home-picks-section .home-section-header {
  margin-bottom: 24px;
}

body[data-page="home"] .home-section-header h2,
body[data-page="home"] .home-how-section h2,
body[data-page="home"] .home-community-copy h2,
body[data-page="home"] .home-bottom-cta h2 {
  max-width: 520px;
  margin: 10px 0 0;
  color: var(--home-ink);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(2.35rem, 4.5vw, 4.1rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0;
}

body[data-page="home"] .home-picks-section .home-section-header h2 {
  max-width: 520px;
  font-size: clamp(2.55rem, 3.35vw, 3.05rem);
  line-height: 1.02;
}

body[data-page="home"] .home-place-carousel {
  display: flex;
  gap: 22px;
  align-items: start;
  margin: 0 -28px;
  padding: 22px 28px 44px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: auto;
  scroll-padding-inline: 28px;
  scroll-snap-type: none;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
}

body[data-page="home"] .home-place-carousel::-webkit-scrollbar {
  display: none;
}

body[data-page="home"] .home-place-card {
  --card-rotate: 0deg;
  --card-scale: 1;
  --card-y: 0px;
  --home-card-image-overlay-inset: 10px;
  position: relative;
  display: block;
  flex: 0 0 clamp(206px, 15.8vw, 220px);
  min-height: 408px;
  padding: 14px 14px 20px;
  scroll-snap-align: start;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(16, 25, 29, 0.07);
  box-shadow: 0 24px 64px rgba(16, 25, 29, 0.13);
  transform: translateY(var(--card-y)) rotate(var(--card-rotate)) scale(var(--card-scale));
  transform-origin: 50% 92%;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
  will-change: transform;
}

body[data-page="home"] .home-place-card:hover {
  transform: translateY(calc(var(--card-y) - 8px)) rotate(var(--card-rotate)) scale(var(--card-scale));
  border-color: rgba(7, 182, 60, 0.14);
  box-shadow: 0 34px 74px rgba(16, 25, 29, 0.18);
}

body[data-page="home"] .home-place-carousel.is-drum-scrolling .home-place-card {
  transition:
    box-shadow 220ms ease,
    border-color 220ms ease;
}

body[data-page="home"] .home-place-card:nth-child(8n + 1) {
  --card-rotate: -5deg;
  --card-y: 22px;
}

body[data-page="home"] .home-place-card:nth-child(8n + 2) {
  --card-rotate: -2.5deg;
  --card-y: 6px;
}

body[data-page="home"] .home-place-card:nth-child(8n + 3) {
  --card-rotate: -0.8deg;
  --card-y: -8px;
}

body[data-page="home"] .home-place-card:nth-child(8n + 4) {
  --card-rotate: 2.2deg;
  --card-y: 2px;
}

body[data-page="home"] .home-place-card:nth-child(8n + 5) {
  --card-rotate: 5deg;
  --card-y: 18px;
}

body[data-page="home"] .home-place-card:nth-child(8n + 6) {
  --card-rotate: 4.5deg;
  --card-y: 24px;
}

body[data-page="home"] .home-place-card:nth-child(8n + 7) {
  --card-rotate: 1.4deg;
  --card-y: 8px;
}

body[data-page="home"] .home-place-card:nth-child(8n + 8) {
  --card-rotate: -3.5deg;
  --card-y: 18px;
}

body[data-page="home"] .home-place-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.88;
  border-radius: 14px;
  object-fit: cover;
}

body[data-page="home"] .home-place-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.88;
  overflow: hidden;
  border-radius: 14px;
}

body[data-page="home"] .home-place-card-media > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

body[data-page="home"] .home-save-button,
body[data-page="home"] .home-save-icon {
  position: absolute;
  top: var(--home-card-image-overlay-inset);
  right: var(--home-card-image-overlay-inset);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: #31bf62;
  box-shadow: 0 12px 24px rgba(16, 25, 29, 0.14);
  backdrop-filter: blur(12px);
  transition:
    transform 160ms ease,
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

body[data-page="home"] .home-save-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(16, 25, 29, 0.18);
}

body[data-page="home"] .home-save-button:focus-visible {
  outline: 3px solid rgba(7, 182, 60, 0.26);
  outline-offset: 3px;
}

body[data-page="home"] .home-save-button:not(.is-active) {
  color: #31bf62;
  background: rgba(255, 255, 255, 0.72);
}

body[data-page="home"] .home-save-button.is-active {
  color: #f4b400;
  background: rgba(255, 248, 224, 0.94);
  box-shadow: 0 16px 30px rgba(244, 180, 0, 0.18);
}

body[data-page="home"] .home-save-button::before,
body[data-page="home"] .home-save-icon::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="home"] .home-save-button.is-active::before {
  width: 18px;
  height: 18px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="home"] .home-place-card em {
  position: absolute;
  top: auto;
  right: auto;
  bottom: var(--home-card-image-overlay-inset);
  left: var(--home-card-image-overlay-inset);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  margin: 0;
  padding: 0 11px;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(4, 143, 48, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 18px rgba(16, 25, 29, 0.14);
}

body[data-page="home"] .home-place-card em.is-red {
  color: #e03a36;
  background: rgba(255, 231, 229, 0.74);
  border-color: rgba(255, 255, 255, 0.22);
}

body[data-page="home"] .home-place-card h3 {
  min-height: 50px;
  margin: 22px 0 0;
  color: var(--home-ink);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.22;
}

body[data-page="home"] .home-place-card p {
  min-height: 58px;
  margin: 14px 0 18px;
  color: var(--home-muted);
  font-size: 0.9rem;
  line-height: 1.48;
}

body[data-page="home"] .home-place-card small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  color: #596164;
  background: rgba(241, 244, 244, 0.72);
  backdrop-filter: blur(10px);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

body[data-page="home"] .home-carousel-arrow {
  position: absolute;
  top: 56%;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(16, 25, 29, 0.13);
}

body[data-page="home"] .home-carousel-arrow::before {
  content: "";
  width: 13px;
  height: 13px;
  background: #536063;
  -webkit-mask: var(--carousel-arrow-icon) center / contain no-repeat;
  mask: var(--carousel-arrow-icon) center / contain no-repeat;
}

body[data-page="home"] .home-carousel-arrow-prev {
  left: -24px;
}

body[data-page="home"] .home-carousel-arrow-prev::before {
  --carousel-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-carousel-arrow-next {
  right: -24px;
}

body[data-page="home"] .home-carousel-arrow-next::before {
  --carousel-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-outline-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(300px, 100%);
  min-height: 58px;
  margin: 18px auto 0;
  border-radius: 999px;
  color: var(--home-green-dark);
  background: #ffffff;
  border: 2px solid var(--home-green);
  box-shadow: none;
  font-weight: 900;
}

body[data-page="home"] .home-how-section {
  padding: 58px 0 118px;
}

body[data-page="home"] .home-how-panel {
  position: relative;
  min-height: 360px;
  padding: 46px 444px 50px 46px;
  overflow: visible;
  border-radius: 20px;
  color: #ffffff;
  background:
    radial-gradient(circle at 42% 42%, rgba(7, 182, 60, 0.25), transparent 31%),
    linear-gradient(90deg, rgba(3, 12, 11, 0.96), rgba(4, 14, 13, 0.91)),
    url("https://images.unsplash.com/photo-1512470876302-972faa2aa9a4?auto=format&fit=crop&w=1600&q=80") center / cover;
  box-shadow: 0 30px 76px rgba(16, 25, 29, 0.16);
}

body[data-page="home"] .home-how-panel h2 {
  max-width: none;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.35rem, 3.6vw, 3rem);
  line-height: 1.02;
}

body[data-page="home"] .home-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px;
  margin-top: 18px;
}

body[data-page="home"] .home-steps::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 46px;
  right: -94px;
  z-index: 0;
  height: 62px;
  opacity: 0.76;
  background-image: url("data:image/svg+xml,%3Csvg width='720' height='62' viewBox='0 0 720 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 31 C42 31 60 18 96 21 C138 24 142 42 180 41 C228 40 246 20 292 25 C338 30 342 43 386 39 C432 35 446 19 490 24 C534 29 540 43 584 40 C632 37 660 30 720 31' stroke='rgba(255,255,255,0.58)' stroke-width='1.25' stroke-linecap='round' stroke-dasharray='3 8'/%3E%3Ccircle cx='37' cy='31' r='3' fill='white' fill-opacity='0.9'/%3E%3Ccircle cx='156' cy='41' r='2.5' fill='%2308b63c' fill-opacity='0.9'/%3E%3Ccircle cx='274' cy='24' r='3' fill='white' fill-opacity='0.88'/%3E%3Ccircle cx='412' cy='37' r='3' fill='white' fill-opacity='0.88'/%3E%3Ccircle cx='600' cy='39' r='2.5' fill='white' fill-opacity='0.84'/%3E%3Ccircle cx='711' cy='31' r='2.8' fill='%2308b63c' fill-opacity='0.95'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 62px;
  pointer-events: none;
}

body[data-page="home"] .home-steps article {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 0;
  color: #ffffff;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-page="home"] .home-step-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 19px;
  border-radius: 15px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(8, 184, 62, 0.74), rgba(3, 141, 50, 0.64));
  border: 1px solid rgba(149, 255, 183, 0.18);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 17px 34px rgba(7, 182, 60, 0.18);
  backdrop-filter: blur(10px);
}

body[data-page="home"] .home-step-icon::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* A distinct icon per step: 01 pick a location, 02 curate a mood, 03 open the map. */
body[data-page="home"] .home-steps article:nth-child(1) .home-step-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}
body[data-page="home"] .home-steps article:nth-child(2) .home-step-icon::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.5 4.2 2.3 6 6.5 6.5-4.2.5-6 2.3-6.5 6.5-.5-4.2-2.3-6-6.5-6.5C9.7 9 11.5 7.2 12 3Z'/%3E%3Cpath d='M18.5 13.5c.2 1.7 1 2.5 2.7 2.7-1.7.2-2.5 1-2.7 2.7-.2-1.7-1-2.5-2.7-2.7 1.7-.2 2.5-1 2.7-2.7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c.5 4.2 2.3 6 6.5 6.5-4.2.5-6 2.3-6.5 6.5-.5-4.2-2.3-6-6.5-6.5C9.7 9 11.5 7.2 12 3Z'/%3E%3Cpath d='M18.5 13.5c.2 1.7 1 2.5 2.7 2.7-1.7.2-2.5 1-2.7 2.7-.2-1.7-1-2.5-2.7-2.7 1.7-.2 2.5-1 2.7-2.7Z'/%3E%3C/svg%3E");
}

body[data-page="home"] .home-steps small {
  display: block;
  margin: 0 0 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 900;
}

body[data-page="home"] .home-steps h3 {
  margin: 0;
  color: #ffffff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.18;
}

body[data-page="home"] .home-steps p {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.48;
}

/* ---- Phone mockup: realistic Cityhop mobile map screen ---- */
body[data-page="home"] .home-phone-mockup {
  position: absolute;
  top: -50px;
  right: 22px;
  bottom: auto;
  z-index: 3;
  width: 262px;
  padding: 9px;
  border-radius: 46px;
  color: #0f1417;
  background: linear-gradient(155deg, #2c3336 0%, #131a1d 42%, #0a0e10 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    0 42px 82px rgba(0, 0, 0, 0.46),
    0 12px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 0 2px rgba(0, 0, 0, 0.5);
}

body[data-page="home"] .home-phone-island {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 22px;
  border-radius: 12px;
  background: #05070a;
  z-index: 6;
}

body[data-page="home"] .home-phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 506px;
  border-radius: 38px;
  overflow: hidden;
  background: #0b1524;
  isolation: isolate;
}

/* The real /map page embedded in the phone; JS scales it (390px mobile width) to
   fill the screen and swaps the Mapbox map (#map) for the sitihop-map.png screenshot. */
body[data-page="home"] .home-phone-app {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 390px;
  height: 809px;
  border: 0;
  transform: scale(0.6256);
  transform-origin: top left;
  pointer-events: none;
  background: #0e1311;
}

/* status bar */
body[data-page="home"] .home-phone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 5px;
  color: #ffffff;
}

body[data-page="home"] .home-phone-time {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

body[data-page="home"] .home-phone-sysicons {
  width: 54px;
  height: 12px;
}

/* app bar: logo · city · theme */
body[data-page="home"] .home-phone-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 1px 14px 8px;
  color: #ffffff;
}
body[data-page="home"] .home-phone-brand {
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
body[data-page="home"] .home-phone-city {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 700;
}
body[data-page="home"] .home-phone-city > svg:first-child {
  width: 13px; height: 13px;
  fill: none; stroke: #2fd968; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-page="home"] .home-phone-caret {
  width: 10px; height: 10px;
  fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
body[data-page="home"] .home-phone-theme {
  width: 17px; height: 17px;
  fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* map */
body[data-page="home"] .home-phone-map {
  position: relative;
  flex: none;
  height: 116px;
  overflow: hidden;
}
body[data-page="home"] .home-phone-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body[data-page="home"] .home-phone-pin {
  position: absolute;
  width: 15px;
  height: 15px;
  margin: -15px 0 0 -7.5px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #7c3aed;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.45);
}
body[data-page="home"] .home-phone-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}
body[data-page="home"] .home-phone-pin--active {
  z-index: 3;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.28), 0 5px 10px rgba(0, 0, 0, 0.45);
}
body[data-page="home"] .home-phone-pinlabel {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -235%);
  padding: 2px 7px;
  border-radius: 6px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.56rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* content body: search + city card + category chips */
body[data-page="home"] .home-phone-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 11px 12px 8px;
  background: #0d1512;
}
body[data-page="home"] .home-phone-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 33px;
  padding: 0 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.74rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body[data-page="home"] .home-phone-search svg {
  width: 15px; height: 15px;
  fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

body[data-page="home"] .home-phone-citycard {
  position: relative;
  height: 126px;
  border-radius: 16px;
  overflow: hidden;
  background: #16221d;
}
body[data-page="home"] .home-phone-citycard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-page="home"] .home-phone-citycard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 10, 0.15) 0%, rgba(6, 12, 10, 0.34) 45%, rgba(6, 12, 10, 0.82) 100%);
}
body[data-page="home"] .home-phone-citycard-copy {
  position: absolute;
  top: 12px;
  left: 13px;
  right: 13px;
  z-index: 1;
  color: #ffffff;
}
body[data-page="home"] .home-phone-citycard-copy strong {
  display: block;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1;
}
body[data-page="home"] .home-phone-citycard-copy span {
  display: block;
  margin-top: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.92;
}
body[data-page="home"] .home-phone-citycard-actions {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  gap: 7px;
}
body[data-page="home"] .home-phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-height: 28px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 0.6rem;
  font-weight: 800;
  white-space: nowrap;
}
body[data-page="home"] .home-phone-btn svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
body[data-page="home"] .home-phone-btn--green {
  color: #ffffff;
  background: var(--home-green, #08b63c);
}
body[data-page="home"] .home-phone-btn--ghost {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

body[data-page="home"] .home-phone-chips {
  display: flex;
  gap: 7px;
  overflow: hidden;
}
body[data-page="home"] .home-phone-chip {
  padding: 6px 11px;
  border-radius: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body[data-page="home"] .home-phone-chip.is-active {
  color: #ffffff;
  background: var(--home-green, #08b63c);
  border-color: transparent;
}

/* bottom navigation bar */
body[data-page="home"] .home-phone-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 4px 10px;
  background: #0a0f14;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-page="home"] .home-phone-navitem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.56rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
body[data-page="home"] .home-phone-navitem svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-page="home"] .home-phone-navitem.is-active {
  color: #2fd968;
}

/* ===========================================================================
   Синхро-телефон: 3 экрана (город → настроение → карта) поверх живого /map.
   data-screen на .home-phone-mockup управляет листом-оверлеем и пинами.
   =========================================================================== */
/* Пины поверх карты — видны на экранах «настроение» и «карта». */
body[data-page="home"] .home-phone-pins {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
body[data-page="home"] .home-phone-mockup[data-screen="2"] .home-phone-pins,
body[data-page="home"] .home-phone-mockup[data-screen="3"] .home-phone-pins {
  opacity: 1;
}
body[data-page="home"] .home-phone-mockup[data-screen="3"] .home-phone-pin--active {
  animation: homePhonePinDrop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes homePhonePinDrop {
  0% { transform: rotate(-45deg) translateY(-10px); opacity: 0; }
  100% { transform: rotate(-45deg) translateY(0); opacity: 1; }
}

/* Нижний лист-оверлей: на экранах 1-2 поднят, на «карте» опускается до ручки. */
body[data-page="home"] .home-phone-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 176px;
  padding: 8px 12px 14px;
  background: #0d1512;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.45);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page="home"] .home-phone-mockup[data-screen="3"] .home-phone-sheet {
  transform: translateY(calc(100% - 26px));
}
body[data-page="home"] .home-phone-grip {
  flex: none;
  width: 34px;
  height: 4px;
  margin: 2px auto 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
}
/* Панели: город на экране 1, настроение на 2-3. */
body[data-page="home"] .home-phone-pane--mood {
  display: none;
  flex-direction: column;
  gap: 9px;
}
body[data-page="home"] .home-phone-mockup[data-screen="2"] .home-phone-pane--city,
body[data-page="home"] .home-phone-mockup[data-screen="3"] .home-phone-pane--city {
  display: none;
}
body[data-page="home"] .home-phone-mockup[data-screen="2"] .home-phone-pane--mood,
body[data-page="home"] .home-phone-mockup[data-screen="3"] .home-phone-pane--mood {
  display: flex;
}

/* Кнопка «Показать подборку» с иконкой-стрелкой (reuse .home-phone-btn). */
body[data-page="home"] .home-phone-btn--green svg path {
  stroke: currentColor;
}

/* Чипы-настроения как кнопки (reuse .home-phone-chip), актив — цвет категории. */
body[data-page="home"] .home-phone-chips {
  flex: none;
  flex-wrap: wrap;
}
body[data-page="home"] .home-phone-chip {
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
body[data-page="home"] .home-phone-chip.is-active {
  color: #ffffff;
  background: var(--chip, var(--home-green, #08b63c));
  border-color: transparent;
}

/* Лента реальных мест выбранной категории. */
body[data-page="home"] .home-phone-results {
  display: flex;
  gap: 8px;
  overflow: hidden;
}
body[data-page="home"] .home-phone-rescard {
  flex: 0 0 84px;
  text-decoration: none;
  animation: homePhoneResIn 0.4s ease both;
}
@keyframes homePhoneResIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
body[data-page="home"] .home-phone-rescard img {
  display: block;
  width: 84px;
  height: 58px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}
body[data-page="home"] .home-phone-rescard span {
  display: block;
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Активная остановка маршрута подсвечивается во время гид-тура. */
body[data-page="home"] .home-how-panel.is-guided .home-steps article {
  opacity: 0.5;
  transition: opacity 0.35s ease;
}
body[data-page="home"] .home-how-panel.is-guided .home-steps article.is-active {
  opacity: 1;
}
body[data-page="home"] .home-steps article[data-step] {
  cursor: pointer;
  border-radius: 12px;
  outline: none;
}
body[data-page="home"] .home-steps article.is-active .home-step-icon {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(47, 217, 104, 0.55),
    0 18px 36px rgba(7, 182, 60, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body[data-page="home"] .home-steps article[data-step]:focus-visible {
  box-shadow: 0 0 0 2px rgba(47, 217, 104, 0.6);
}

/* CTA-финал воронки. Скрыт во время авто-тура, выезжает по его окончании. */
body[data-page="home"] .home-how-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body[data-page="home"] .home-how-cta span {
  transition: transform 0.2s ease;
}
body[data-page="home"] .home-how-cta:hover span {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .home-phone-sheet,
  body[data-page="home"] .home-phone-pins,
  body[data-page="home"] .home-phone-rescard,
  body[data-page="home"] .home-phone-pin--active { transition: none; animation: none; }
}

/* ===========================================================================
   Карточка-результат «Готовый маршрут» — итог трёх шагов (заменяет телефон).
   Живёт на тёмной панели «Как это работает» (тёмная в обеих темах), справа.
   =========================================================================== */
body[data-page="home"] .home-how-result {
  position: absolute;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  z-index: 3;
  width: 372px;
  max-width: calc(100% - 60px);
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(9, 16, 13, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 34px 72px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(14px);
}
body[data-page="home"] .home-how-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body[data-page="home"] .home-how-result-head strong {
  color: #ffffff;
  font-family: "Sora", "Manrope", sans-serif;
  font-size: 1.04rem;
  font-weight: 800;
}
body[data-page="home"] .home-how-result-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
body[data-page="home"] .home-how-result-time svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #2fd968;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Три места в ряд, связанные пунктиром за фотографиями. */
body[data-page="home"] .home-how-trip {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
body[data-page="home"] .home-how-trip::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 40px;
  z-index: 0;
  border-top: 2px dashed rgba(47, 217, 104, 0.5);
}
body[data-page="home"] .home-how-trip-stop {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
body[data-page="home"] .home-how-trip-photo {
  width: 82px;
  height: 82px;
  border-radius: 16px;
  overflow: hidden;
  border: 3px solid rgba(9, 16, 13, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42);
  background: rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease;
}
body[data-page="home"] .home-how-trip-stop:hover .home-how-trip-photo {
  transform: translateY(-3px);
}
body[data-page="home"] .home-how-trip-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-page="home"] .home-how-trip-stop strong {
  max-width: 100%;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body[data-page="home"] .home-how-trip-cat {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}
body[data-page="home"] .home-how-result-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
body[data-page="home"] .home-how-result-cta span {
  transition: transform 0.2s ease;
}
body[data-page="home"] .home-how-result-cta:hover span {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  body[data-page="home"] .home-how-result {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin: 30px auto -90px; /* карта в потоке — гасим нижний отступ панели от телефона */
  }
}

body[data-page="home"] .home-community-section {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(640px, 1fr);
  gap: clamp(42px, 5.8vw, 78px);
  align-items: center;
  padding: 88px 0 44px;
}

body[data-page="home"] .home-community-copy h2 {
  max-width: 690px;
  margin-top: 18px;
  font-size: clamp(3rem, 4.6vw, 4rem);
  line-height: 1.12;
}

body[data-page="home"] .home-community-copy p {
  max-width: 630px;
  margin: 28px 0 0;
  color: var(--home-muted);
  font-size: 1.05rem;
  line-height: 1.78;
}

body[data-page="home"] .home-community-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 66px;
}

body[data-page="home"] .home-community-actions .primary-button {
  min-width: 220px;
  height: 58px;
  min-height: 58px;
  box-shadow:
    0 28px 44px rgba(7, 182, 60, 0.22),
    0 18px 56px rgba(7, 182, 60, 0.24);
}

body[data-page="home"] .home-community-actions .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  height: 58px;
  min-height: 58px;
  padding: 0 28px;
  color: var(--home-ink);
  background: #ffffff;
  border: 1px solid rgba(16, 25, 29, 0.1);
  box-shadow: 0 16px 34px rgba(16, 25, 29, 0.06);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

body[data-page="home"] .home-community-board {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 20px;
  align-items: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-page="home"] .home-community-column {
  display: grid;
  gap: 20px;
  align-content: start;
}

body[data-page="home"] .home-community-card,
body[data-page="home"] .home-community-map-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #eef2f0;
  box-shadow: 0 26px 58px rgba(16, 25, 29, 0.12);
}

body[data-page="home"] .home-community-card {
  min-height: 230px;
  color: #ffffff;
}

body[data-page="home"] .home-community-card::after {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 9, 0.82) 100%);
  pointer-events: none;
}

body[data-page="home"] .home-community-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="home"] .home-community-card--canal {
  min-height: 322px;
}

body[data-page="home"] .home-community-card--gallery {
  min-height: 222px;
}

body[data-page="home"] .home-community-card--sunset {
  min-height: 216px;
}

body[data-page="home"] .home-community-card--panorama {
  min-height: 316px;
}

body[data-page="home"] .home-community-card-meta {
  position: absolute;
  left: 24px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: block;
}

body[data-page="home"] .home-community-card-meta strong,
body[data-page="home"] .home-community-card-meta span {
  display: block;
}

body[data-page="home"] .home-community-card-meta strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="home"] .home-community-card-meta span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
}

body[data-page="home"] .home-community-map-card {
  min-height: 316px;
  background:
    radial-gradient(circle at 78% 16%, rgba(7, 182, 60, 0.12), transparent 20%),
    radial-gradient(circle at 18% 24%, rgba(124, 82, 255, 0.12), transparent 19%),
    linear-gradient(35deg, transparent 0 18%, rgba(188, 197, 200, 0.28) 18.2% 18.8%, transparent 19% 100%),
    linear-gradient(126deg, transparent 0 28%, rgba(188, 197, 200, 0.34) 28.2% 29%, transparent 29.2% 100%),
    linear-gradient(166deg, transparent 0 48%, rgba(188, 197, 200, 0.28) 48.2% 48.8%, transparent 49% 100%),
    #f4f7f5;
}

body[data-page="home"] .home-community-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.54) 0 2px, transparent 2px 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.52) 0 2px, transparent 2px 100%);
  background-size: 86px 86px;
  opacity: 0.62;
}

body[data-page="home"] .home-community-map-pin {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 6px;
  background: var(--home-green);
  box-shadow: 0 14px 24px rgba(7, 182, 60, 0.22);
  transform: rotate(-45deg);
}

body[data-page="home"] .home-community-map-pin::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #ffffff;
}

body[data-page="home"] .home-community-map-pin--violet {
  top: 27%;
  left: 26%;
  background: #8257ff;
  box-shadow: 0 14px 24px rgba(130, 87, 255, 0.22);
}

body[data-page="home"] .home-community-map-pin--green-one {
  top: 27%;
  left: 51%;
}

body[data-page="home"] .home-community-map-pin--green-two {
  top: 44%;
  left: 67%;
}

body[data-page="home"] .home-community-map-panel {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 16px;
  align-items: center;
  min-height: 92px;
  padding: 18px 18px 18px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 42px rgba(16, 25, 29, 0.12);
  backdrop-filter: blur(14px);
}

body[data-page="home"] .home-community-map-panel strong,
body[data-page="home"] .home-community-map-panel span {
  display: block;
}

body[data-page="home"] .home-community-map-panel strong {
  color: var(--home-ink);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.22;
}

body[data-page="home"] .home-community-map-panel span {
  margin-top: 8px;
  color: var(--home-muted);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

body[data-page="home"] .home-community-map-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #f1f3f4;
}

body[data-page="home"] .home-community-map-arrow::before {
  content: "";
  display: none;
}

body[data-page="home"] .home-community-map-arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #6f777a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body[data-page="home"] .home-community-map-panel .home-community-map-arrow {
  margin-top: 0;
  white-space: nowrap;
}

body[data-page="home"] .home-bottom-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 152px;
  margin-top: 6px;
  padding: 36px 54px;
  border-radius: 19px;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(3, 8, 9, 0.96) 0%, rgba(3, 8, 9, 0.8) 45%, rgba(3, 8, 9, 0.58) 100%),
    url("https://images.unsplash.com/photo-1512470876302-972faa2aa9a4?auto=format&fit=crop&w=1800&q=86") center 44% / cover;
  box-shadow: 0 28px 58px rgba(16, 25, 29, 0.16);
}

body[data-page="home"] .home-bottom-cta h2 {
  max-width: none;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  line-height: 1.08;
}

body[data-page="home"] .home-bottom-cta p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.06rem;
  line-height: 1.5;
}

body[data-page="home"] .home-bottom-cta .primary-button {
  flex: 0 0 auto;
  min-width: 196px;
  height: 58px;
  min-height: 58px;
  box-shadow:
    0 20px 44px rgba(7, 182, 60, 0.28),
    0 0 54px rgba(7, 182, 60, 0.18);
}

body[data-page="home"] .home-footer {
  width: 100%;
  margin: 0;
  padding: 30px max(34px, calc((100vw - 1240px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255, 255, 255, 0.54);
  background: #0b0d0f;
  border-top: 0;
}

body[data-page="home"] .home-footer-brand,
body[data-page="home"] .home-footer-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

body[data-page="home"] .home-footer-brand strong {
  color: #ffffff;
  font-size: 0.84rem;
}

body[data-page="home"] .home-footer a {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
  font-weight: 700;
}

body[data-page="home"] .home-footer a:hover {
  color: #ffffff;
}

@media (max-width: 1180px) {
  body[data-page="home"] .home-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="home"] .home-hero-visual {
    width: min(680px, 100%);
    margin-top: 10px;
  }

  body[data-page="home"] .home-category-band .chip-row {
    grid-template-columns: repeat(5, minmax(112px, 1fr));
  }

  body[data-page="home"] .home-place-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="home"] .home-how-panel {
    padding-right: 340px;
  }

  body[data-page="home"] .home-phone-mockup {
    top: -34px;
    right: 28px;
    width: 232px;
    min-height: 438px;
  }
}

@media (max-width: 900px) {
  body[data-page="home"] .site-header {
    width: min(100% - 36px, 1240px);
  }

  body[data-page="home"] .header-actions {
    gap: 12px;
  }

  body[data-page="home"] .home-hero {
    min-height: 0;
    padding: 126px 0 64px;
  }

  body[data-page="home"] .home-hero-inner,
  body[data-page="home"] .home-picks-section,
  body[data-page="home"] .home-how-section,
  body[data-page="home"] .home-community-section,
  body[data-page="home"] .home-bottom-cta {
    width: min(100% - 36px, 1240px);
  }

  body[data-page="home"] .home-hero h1 {
    font-size: clamp(3.05rem, 8vw, 4.2rem);
  }

  body[data-page="home"] .home-live-card {
    right: 14px;
    width: 218px;
  }

  body[data-page="home"] .home-place-carousel {
    display: flex;
    gap: 18px;
    margin: 0 -18px;
    padding: 6px 18px 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  body[data-page="home"] .home-place-card {
    --card-rotate: 0deg;
    --card-y: 0px;
    flex: 0 0 min(270px, 78vw);
    scroll-snap-align: start;
  }

  body[data-page="home"] .home-place-card.is-tilted-left,
  body[data-page="home"] .home-place-card.is-tilted-right,
  body[data-page="home"] .home-place-card.is-raised {
    transform: none;
  }

  body[data-page="home"] .home-carousel-arrow {
    display: none;
  }

  body[data-page="home"] .home-how-panel {
    min-height: 0;
    padding: 40px 28px 120px;
  }

  body[data-page="home"] .home-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body[data-page="home"] .home-steps::before {
    display: none;
  }

  body[data-page="home"] .home-phone-mockup {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: min(232px, 88%);
    min-height: 424px;
    margin: 34px auto -108px;
  }

  body[data-page="home"] .home-community-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  body[data-page="home"] .home-community-board {
    width: min(720px, 100%);
    justify-self: center;
  }

  body[data-page="home"] .home-bottom-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  body[data-page="home"] .home-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (max-width: 640px) {
  body[data-page="map"] .brand-wordmark {
    font-size: 1.52rem;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .site-header {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 18px;
  }

  body[data-page="home"] .brand-wordmark {
    font-size: 1.52rem;
  }

  body[data-page="home"] .header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 16px;
  }

  body[data-page="home"] .header-chip-location,
  body[data-page="home"] #loginButton.header-chip-auth,
  body[data-page="home"] .site-header:not(.auth-header) .primary-button.header-signup-button {
    font-size: 0.82rem;
  }

  body[data-page="home"] .header-chip-location {
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
    padding: 8px 0;
  }

  body[data-page="home"] .home-hero {
    padding-top: 156px;
  }

  body[data-page="home"] .home-city-script {
    font-size: 3.05rem;
  }

  body[data-page="home"] .home-hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.45rem);
  }

  body[data-page="home"] .home-hero h1 span {
    white-space: normal;
  }

  body[data-page="home"] .home-hero .hero-search-row {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="home"] .home-hero .hero-map-button,
  body[data-page="home"] .hero-how-button {
    width: 100%;
  }

  body[data-page="home"] .home-hero-visual {
    min-height: 430px;
  }

  body[data-page="home"] .home-map-preview {
    min-height: 360px;
    border-radius: 24px;
  }

  body[data-page="home"] .home-live-card {
    top: 42px;
    right: 8px;
    width: min(218px, 66vw);
    padding: 16px;
    border-radius: 22px;
  }

  body[data-page="home"] .home-map-panel {
    left: 18px;
    right: 18px;
    bottom: 18px;
    min-width: 0;
  }

  body[data-page="home"] .home-category-band {
    padding: 32px 18px 38px;
    border-radius: 34px 34px 0 0;
  }

  body[data-page="home"] .home-category-band .chip-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    margin: 0 -18px;
    padding: 0 18px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  body[data-page="home"] .home-category-band .chip {
    flex: 0 0 104px;
    scroll-snap-align: start;
  }

  body[data-page="home"] .home-section-header h2,
  body[data-page="home"] .home-how-section h2,
  body[data-page="home"] .home-community-copy h2 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  body[data-page="home"] .home-community-section {
    padding-top: 58px;
  }

  body[data-page="home"] .home-community-actions {
    gap: 12px;
    margin-top: 36px;
  }

  body[data-page="home"] .home-community-board {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  body[data-page="home"] .home-community-column {
    gap: 14px;
  }

  body[data-page="home"] .home-community-card,
  body[data-page="home"] .home-community-card--canal,
  body[data-page="home"] .home-community-card--gallery,
  body[data-page="home"] .home-community-card--sunset {
    min-height: 218px;
  }

  body[data-page="home"] .home-community-map-card {
    min-height: 270px;
  }

  body[data-page="home"] .home-community-card-meta {
    left: 18px;
    right: 16px;
    bottom: 18px;
  }

  body[data-page="home"] .home-how-panel {
    border-radius: 18px;
    padding: 36px 22px 118px;
  }

  body[data-page="home"] .home-phone-mockup {
    width: min(230px, 86%);
    min-height: 384px;
  }

  body[data-page="home"] .home-community-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
  }

  body[data-page="home"] .home-community-row em {
    grid-column: 2;
    justify-self: start;
  }

  body[data-page="home"] .home-community-actions .primary-button,
  body[data-page="home"] .home-community-actions .secondary-button,
  body[data-page="home"] .home-bottom-cta .primary-button {
    width: 100%;
  }

  body[data-page="home"] .home-bottom-cta {
    padding: 28px 22px;
  }

  body[data-page="home"] .home-footer-brand,
  body[data-page="home"] .home-footer-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* Keep the reference picks panel first, then show the live card drum below it. */
body[data-page="home"] .home-picks-section {
  width: min(1240px, calc(100% - 64px));
  padding: 58px 0 58px;
}

body[data-page="home"] .home-picks-panel {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .home-picks-section::before {
  display: block;
  top: clamp(560px, 46vw, 640px);
}

body[data-page="home"] .home-picks-showcase {
  grid-template-columns: minmax(340px, 0.84fr) minmax(470px, 1.16fr);
  gap: clamp(30px, 3.4vw, 46px);
}

body[data-page="home"] .home-picks-copy {
  max-width: 485px;
}

body[data-page="home"] .home-picks-copy .home-section-kicker {
  font-size: 0.82rem;
}

body[data-page="home"] .home-picks-copy h2 {
  max-width: 500px;
  margin-top: 14px;
  font-size: clamp(2.45rem, 3.35vw, 3.3rem);
  line-height: 1.08;
}

body[data-page="home"] .home-picks-copy p {
  max-width: 470px;
  margin-top: 20px;
  font-size: clamp(0.95rem, 1.08vw, 1.05rem);
  line-height: 1.55;
}

body[data-page="home"] .home-picks-main-button {
  min-height: 52px;
  margin-top: 28px;
  padding: 0 22px;
  border-radius: 12px;
  font-size: 0.92rem;
}

body[data-page="home"] .home-picks-main-button .home-button-icon {
  width: 23px;
  height: 23px;
}

body[data-page="home"] .home-picks-button-arrow {
  width: 15px;
  height: 15px;
}

body[data-page="home"] .home-picks-visual {
  min-height: clamp(250px, 22vw, 302px);
}

body[data-page="home"] .home-picks-visual-image {
  height: clamp(250px, 22vw, 302px);
  min-height: 0;
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(16, 25, 29, 0.17);
}

body[data-page="home"] .home-picks-visual::after {
  border-radius: 18px;
}

body[data-page="home"] .home-picks-place-card {
  right: 16px;
  bottom: -18px;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  width: min(330px, 56%);
  min-height: 112px;
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 22px 46px rgba(16, 25, 29, 0.14);
}

body[data-page="home"] .home-picks-place-card img {
  width: 88px;
  height: 74px;
  border-radius: 10px;
}

body[data-page="home"] .home-picks-place-card strong {
  font-size: 0.92rem;
}

body[data-page="home"] .home-picks-place-card p {
  margin-top: 7px;
  font-size: 0.82rem;
  line-height: 1.38;
}

body[data-page="home"] .home-picks-place-card span {
  margin-top: 9px;
  font-size: 0.82rem;
}

body[data-page="home"] .home-picks-category-slot .home-category-band {
  margin-top: clamp(30px, 3.5vw, 40px);
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row {
  gap: 10px;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip {
  min-height: 92px;
  padding: 56px 8px 14px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(16, 25, 29, 0.055);
  font-size: 0.72rem;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip::before {
  top: 16px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

body[data-page="home"] .home-picks-category-slot .home-category-band .chip::after {
  top: 24px;
  width: 18px;
  height: 18px;
}

body[data-page="home"] .home-picks-section > .home-place-carousel {
  display: flex;
  margin-top: 46px;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
  scroll-padding-inline: 0;
}

body[data-page="home"] .home-picks-section > .home-carousel-arrow {
  display: grid;
  top: auto;
  bottom: clamp(314px, 28vw, 368px);
}

body[data-page="home"] .home-picks-section > .home-outline-button {
  display: flex;
}

@media (max-width: 1180px) {
  body[data-page="home"] .home-picks-section {
    width: min(1240px, calc(100% - 64px));
  }

  body[data-page="home"] .home-picks-showcase {
    grid-template-columns: minmax(320px, 0.84fr) minmax(410px, 1.16fr);
    gap: 30px;
  }

  body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body[data-page="home"] .home-picks-section {
    width: min(100% - 36px, 1240px);
  }

  body[data-page="home"] .home-picks-section > .home-carousel-arrow {
    display: none;
  }

  body[data-page="home"] .home-picks-panel {
    padding: 0;
  }

  body[data-page="home"] .home-picks-showcase {
    grid-template-columns: 1fr;
  }

  body[data-page="home"] .home-picks-copy,
  body[data-page="home"] .home-picks-copy h2,
  body[data-page="home"] .home-picks-copy p {
    max-width: 620px;
  }

  body[data-page="home"] .home-picks-section > .home-place-carousel {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    scroll-padding-inline: 0;
  }
}

@media (max-width: 640px) {
  body[data-page="home"] .home-picks-section {
    width: min(100% - 28px, 1240px);
    padding-top: 42px;
  }

  body[data-page="home"] .home-picks-panel {
    padding: 0;
    border-radius: 0;
  }

  body[data-page="home"] .home-picks-copy h2 {
    font-size: clamp(2rem, 10.5vw, 2.6rem);
    line-height: 1.08;
  }

  body[data-page="home"] .home-picks-copy p {
    font-size: 0.94rem;
  }

  body[data-page="home"] .home-picks-main-button {
    width: 100%;
    justify-content: center;
  }

  body[data-page="home"] .home-picks-visual {
    min-height: 220px;
  }

  body[data-page="home"] .home-picks-visual-image {
    height: 220px;
  }

  body[data-page="home"] .home-picks-place-card {
    position: relative;
    right: auto;
    bottom: auto;
    grid-template-columns: 78px minmax(0, 1fr);
    width: 100%;
    margin-top: 14px;
  }

  body[data-page="home"] .home-picks-place-card img {
    width: 78px;
    height: 70px;
  }

  body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row {
    display: flex;
    gap: 10px;
    /* Не full-bleed: строка чипов выровнена по центральной колонке контента
       (одинаковый отступ слева/справа), а не приклеена к краю экрана —
       карточки ниже идут от края, чипы — по центру. */
    margin: 0;
    padding: 0 0 8px;
    overflow-x: auto;
  }

  body[data-page="home"] .home-picks-category-slot .home-category-band .chip {
    flex: 0 0 108px;
    min-height: 96px;
  }

  body[data-page="home"] .home-picks-section > .home-place-carousel {
    margin-top: 34px;
  }
}

/* Header icon-only actions stay backgroundless in every state. */
#logoutButton.header-chip-auth,
#logoutButton.header-chip-auth:hover,
#logoutButton.header-chip-auth:focus-visible,
#logoutButton.header-chip-auth.is-logging-out,
.header-notification-button,
.header-notification-button:hover,
.header-notification-button:focus-visible,
.header-notification-button.is-open,
.header-notification-button.has-unread {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-page="home"] .header-actions {
  --home-header-icon-size: var(--header-icon-size);
}

body[data-page="home"] .header-chip-location::before,
body[data-page="home"] #logoutButton.header-chip-auth::before,
body[data-page="home"] .header-notification-icon,
body[data-page="home"] .header-user-chip-avatar {
  width: var(--home-header-icon-size);
  height: var(--home-header-icon-size);
  flex: 0 0 var(--home-header-icon-size);
}

body[data-page="home"] .header-user-chip-avatar-fallback::before {
  width: calc(var(--home-header-icon-size) - 2px);
  height: calc(var(--home-header-icon-size) - 2px);
}

body[data-page="home"] .header-chip-user {
  width: 52px;
  min-width: 52px;
  gap: 0;
}

body[data-page="home"] .header-user-chip-copy,
body[data-page="home"] .header-user-chip-name,
body[data-page="home"] .header-user-chip-role {
  display: none;
}

/* Map page reference layout */
body[data-page="map"] {
  --map-ref-green: #08b942;
  --map-ref-green-dark: #079b38;
  --map-header-green: #009b36;
  --map-ref-ink: #10191d;
  --map-ref-muted: #6d787d;
  --map-ref-border: rgba(16, 25, 29, 0.08);
  --map-ref-shadow: 0 18px 48px rgba(16, 25, 29, 0.12);
  --map-ref-soft-shadow: 0 14px 34px rgba(16, 25, 29, 0.08);
  background: #f4f6f5;
}

body[data-page="map"] .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  width: 100%;
  height: 76px;
  margin: 0;
  padding: 0 44px;
  border-radius: 0;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(17, 25, 29, 0.04), 0 12px 32px rgba(17, 25, 29, 0.04);
  backdrop-filter: blur(18px);
  transform: none;
}

body[data-page="map"] .site-header::before {
  content: none;
  display: none;
}

body[data-page="map"] .brand-wordmark {
  flex: 0 0 auto;
  color: var(--map-header-green);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  transform: none;
}

body[data-page="map"] .header-actions {
  position: static;
  flex: 1 1 auto;
  min-width: 0;
  --map-header-icon-size: var(--header-icon-size);
  gap: 24px;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

body[data-page="map"] .header-city-picker-anchor {
  margin-left: 34px;
}

body[data-page="map"] .header-chip-location {
  height: 44px;
  min-height: 44px;
  gap: 8px;
  padding: 0;
  color: var(--map-ref-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 0.95rem;
  font-weight: 800;
}

body[data-page="map"] .header-chip-location::before {
  width: var(--map-header-icon-size);
  height: var(--map-header-icon-size);
  flex: 0 0 var(--map-header-icon-size);
  background: var(--map-header-green);
}

body[data-page="map"] .header-chip-location::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .map-search-box {
  z-index: 43;
  /* Centered in the header: it doesn't grow, and the auto side-margins absorb
     the free space evenly — which also keeps the right-side group (bell,
     profile, logout) pinned to the right edge. */
  flex: 0 1 520px;
  align-self: center;
  min-width: 0;
  max-width: 520px;
  margin: 0 auto;
}

body[data-page="map"] .map-search-field {
  height: 46px;
  padding: 0 20px;
  grid-template-columns: 20px minmax(0, 1fr);
  border: 1px solid rgba(16, 25, 29, 0.04);
  border-radius: 17px;
  background: #f6f7f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

body[data-page="map"] .map-search-icon {
  width: 18px;
  height: 18px;
  background-color: var(--map-ref-ink);
  opacity: 0.95;
}

body[data-page="map"] .map-search-field input {
  color: var(--map-ref-ink);
  font-size: 0.95rem;
  font-weight: 700;
}

body[data-page="map"] .map-search-field input::placeholder {
  color: #9aa1a4;
}

body[data-page="map"] .map-search-results {
  top: calc(100% + 12px);
  border-radius: 18px;
  border-color: var(--map-ref-border);
  box-shadow: 0 22px 44px rgba(16, 25, 29, 0.14);
}

/* "Добавить место" is removed from the map header (kept reachable via /add and
   the mobile tab bar). */
body[data-page="map"] #addPlaceButton.header-chip-add {
  display: none !important;
}

body[data-page="map"] .site-header:not(.auth-header) .primary-button.header-signup-button {
  min-width: 176px;
  height: 50px;
  min-height: 50px;
  margin-left: auto;
  gap: 12px;
  padding: 14px 26px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--map-ref-green), var(--map-ref-green-dark));
  box-shadow: 0 14px 28px rgba(8, 185, 66, 0.26);
  font-size: 0.94rem;
  font-weight: 900;
}

body[data-page="map"] #addPlaceButton.header-chip-add::after {
  content: none;
  display: none;
}

body[data-page="map"] #addPlaceButton.header-chip-add:hover,
body[data-page="map"] #addPlaceButton.header-chip-add:focus-visible {
  color: var(--map-ref-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-page="map"] #loginButton.header-chip-auth {
  /* No margin-left:auto here — the search box's `margin: 0 auto` already pins
     the right-side group to the edge. A second auto-margin would split the free
     space and strand the injected theme toggle in the middle of the header. */
  color: var(--map-ref-ink);
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.92rem;
  font-weight: 800;
}

body[data-page="map"] #signupButton.header-signup-button {
  margin-left: 0;
}

body[data-page="map"] .header-notification-button,
body[data-page="map"] #logoutButton.header-chip-auth {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 0;
  color: var(--map-ref-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-page="map"] .header-notification-button:hover,
body[data-page="map"] .header-notification-button:focus-visible,
body[data-page="map"] .header-notification-button.is-open,
body[data-page="map"] .header-notification-button.has-unread,
body[data-page="map"] .header-chip-user:hover,
body[data-page="map"] #logoutButton.header-chip-auth:hover,
body[data-page="map"] #logoutButton.header-chip-auth:focus-visible,
body[data-page="map"] #logoutButton.header-chip-auth.is-logging-out {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-page="map"] #logoutButton.header-chip-auth::before,
body[data-page="map"] .header-notification-icon {
  width: var(--map-header-icon-size);
  height: var(--map-header-icon-size);
  flex: 0 0 var(--map-header-icon-size);
}

/* Notification bell follows the theme ink: white on dark, dark on light —
   never the green accent. */
body[data-page="map"] .header-notification-button {
  color: var(--text);
}

body[data-page="map"] .header-notification-badge {
  top: 5px;
  right: 4px;
}

body[data-page="map"] .header-user-chip-avatar-fallback::before {
  width: calc(var(--map-header-icon-size) - 2px);
  height: calc(var(--map-header-icon-size) - 2px);
}

body[data-page="map"] .header-chip-user {
  width: auto;
  min-width: 0;
  height: 50px;
  gap: 12px;
  padding: 0 4px 0 0;
  color: var(--map-ref-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-page="map"] .header-user-chip-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--map-header-green);
  background: rgba(0, 155, 54, 0.1);
}

body[data-page="map"] .header-user-chip-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-page="map"] .header-user-chip-name,
body[data-page="map"] .header-user-chip-role {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  clip-path: none;
}

body[data-page="map"] .header-user-chip-name {
  color: var(--map-ref-ink);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.05;
}

body[data-page="map"] .header-user-chip-role {
  color: var(--map-ref-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.05;
}

body[data-page="map"] .map-page-shell,
body[data-page="map"] .map-stage,
body[data-page="map"] .map-card-experience,
body[data-page="map"] .map-shell-experience {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
}

body[data-page="map"] .map-shell-experience {
  --map-panel-width: 438px;
  --map-panel-shell-width: calc(var(--map-panel-width) + 64px);
  --map-surface-top: 76px;
  --map-visible-corner-radius: 24px;
  overflow: hidden;
  background: #ffffff;
}

body[data-page="map"] .map-shell-experience::before {
  content: "";
  position: absolute;
  top: var(--map-surface-top);
  left: var(--map-panel-shell-width);
  z-index: 11;
  width: var(--map-visible-corner-radius);
  height: var(--map-visible-corner-radius);
  background: radial-gradient(
    circle at 100% 100%,
    transparent 0 calc(var(--map-visible-corner-radius) - 1px),
    #ffffff var(--map-visible-corner-radius)
  );
  pointer-events: none;
}

body[data-page="map"] .map-shell-experience::after {
  display: none;
}

body[data-page="map"] .map-side-rail {
  top: 88px;
  left: 50px;
  bottom: auto;
  z-index: 16;
  width: auto;
  padding: 0;
  pointer-events: none;
}

body[data-page="map"] .map-rail-toggle,
body[data-page="map"] .map-rail-link,
body[data-page="map"] .map-rail-category-list {
  display: none;
}

body[data-page="map"] .map-rail-back:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  max-height: none;
  margin-top: 18px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--map-ref-ink);
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  opacity: 1;
}

/* No fill on hover either (override the base green hover), both themes. */
body[data-page="map"] .map-rail-back:not([hidden]):hover {
  background: transparent;
}

body[data-page="map"] .map-rail-back:not([hidden]) .map-rail-back-icon {
  width: 16px;
  height: 16px;
}

body[data-page="map"] .map-rail-back:not([hidden]) span:last-child {
  max-width: none;
  font-size: 0.82rem;
  font-weight: 900;
}

body[data-page="map"] .map-backdrop {
  z-index: 0;
  background: transparent;
  pointer-events: none;
}

body[data-page="map"] #map {
  inset: var(--map-surface-top) 0 0 0;
  clip-path: inset(0 0 0 var(--map-panel-shell-width) round var(--map-visible-corner-radius) 0 0 0);
}

body[data-page="map"] #map .mapboxgl-canvas {
  filter: saturate(1.14) contrast(1.08) brightness(0.99);
}

body[data-page="map"] .map-left-panel {
  top: var(--map-surface-top);
  bottom: 0;
  left: 0;
  z-index: 10;
  width: calc(var(--map-panel-width) + 64px);
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Top padding so the city-photo card doesn't butt up against the header
     strip; the panel's own white background fills the gap. */
  padding: 16px 32px 18px;
  background: #ffffff;
  border-right: 0;
  box-shadow: none;
  overflow-y: auto;
  scrollbar-width: none;
  pointer-events: none;
}

body[data-page="map"] .map-left-panel::-webkit-scrollbar {
  display: none;
}

body[data-page="map"] .map-panel-switcher {
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  margin-left: 0;
}

body[data-page="map"] .map-shell-experience:not(.is-panel-hidden) .map-panel-switcher {
  width: 100%;
  margin-left: 0;
}

body[data-page="map"] .map-overview-stack {
  gap: 14px;
  pointer-events: auto;
}

body[data-page="map"] .map-city-card {
  order: 1;
  min-height: 258px;
  padding: 30px 30px 24px;
  border-radius: var(--map-visible-corner-radius);
  background-color: #14201f;
  background-image:
    linear-gradient(90deg, rgba(5, 10, 12, 0.82) 0%, rgba(5, 10, 12, 0.56) 46%, rgba(5, 10, 12, 0.28) 100%),
    var(--map-city-card-image, url("https://images.unsplash.com/photo-1512470876302-972faa2aa9a4?auto=format&fit=crop&w=900&q=84"));
  background-position: center;
  box-shadow: var(--map-ref-shadow);
}

body[data-page="map"] .map-city-card-media {
  border-radius: inherit;
}

body[data-page="map"] .map-city-card::before {
  background: linear-gradient(180deg, rgba(5, 10, 12, 0.06), rgba(5, 10, 12, 0.2));
}

body[data-page="map"] .map-city-card::after {
  display: none;
}

body[data-page="map"] .map-city-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-end;
}

body[data-page="map"] .map-city-card h1 {
  max-width: 9ch;
  margin: 0;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 2.05rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

body[data-page="map"] .map-city-card p {
  max-width: 260px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.045em;
}

body[data-page="map"] .map-city-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  margin-top: 30px;
}

body[data-page="map"] .map-city-action {
  display: inline-flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 18px;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  /* The card is too narrow for both labels side by side at full width, so let
     the longer label wrap instead of clipping; align-items: stretch keeps both
     buttons the same height. */
  white-space: normal;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

/* Same lift-on-hover as the "Добавить место" header chip. */
body[data-page="map"] .map-city-action:hover,
body[data-page="map"] .map-city-action:focus-visible {
  transform: translateY(-2px);
}

body[data-page="map"] .map-city-action-primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--map-ref-green), var(--map-ref-green-dark));
  box-shadow: 0 14px 26px rgba(8, 185, 66, 0.26);
}

body[data-page="map"] .map-city-action-primary:hover,
body[data-page="map"] .map-city-action-primary:focus-visible {
  box-shadow: 0 18px 32px rgba(8, 185, 66, 0.34);
}

body[data-page="map"] .map-city-action-secondary {
  color: var(--map-ref-ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 24px rgba(16, 25, 29, 0.12);
}

body[data-page="map"] .map-city-action-secondary:hover,
body[data-page="map"] .map-city-action-secondary:focus-visible {
  box-shadow: 0 18px 30px rgba(16, 25, 29, 0.16);
}

body[data-page="map"] .map-city-action-icon {
  width: 18px;
  height: 18px;
  background: currentColor;
}

body[data-page="map"] .map-city-action-icon-map {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .map-city-action-icon-plus {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .map-nearby-card,
body[data-page="map"] .map-visited-panel {
  border-radius: 17px;
  border: 1px solid rgba(16, 25, 29, 0.06);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--map-ref-soft-shadow);
  backdrop-filter: blur(18px);
}

body[data-page="map"] .map-nearby-card {
  order: 2;
  display: none;
  gap: 14px;
  padding: 16px 18px 18px;
}

body[data-page="map"] .map-nearby-head {
  display: grid;
  gap: 4px;
}

body[data-page="map"] .map-nearby-head strong,
body[data-page="map"] .map-visited-head h2,
body[data-page="map"] .map-recommendations-head h2 {
  color: var(--map-ref-ink);
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

body[data-page="map"] .map-nearby-head span,
body[data-page="map"] .map-visited-head span,
body[data-page="map"] .map-visited-empty,
body[data-page="map"] .map-recommendations-empty {
  color: var(--map-ref-muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
}

/* In dark theme both panels' sign-in prompts read as bright --text (the visited
   panel already inherits it); pin the recommendations one to match exactly. */
:root[data-theme="dark"] body[data-page="map"] .map-visited-empty,
:root[data-theme="dark"] body[data-page="map"] .map-recommendations-empty {
  color: var(--text);
}

/* Sign-in prompts read as regular weight (not bold) — same size for both. */
body[data-page="map"] .map-visited-empty,
body[data-page="map"] .map-recommendations-empty {
  font-weight: 400;
}

body[data-page="map"] .map-nearby-place {
  width: 100%;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--map-ref-ink);
  text-align: left;
}

body[data-page="map"] .map-nearby-photo {
  width: 112px;
  height: 78px;
  border-radius: 12px;
  object-fit: cover;
}

body[data-page="map"] .map-nearby-place.is-photoless {
  grid-template-columns: minmax(0, 1fr) auto;
}

body[data-page="map"] .map-nearby-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

body[data-page="map"] .map-nearby-category {
  color: var(--map-ref-green-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

body[data-page="map"] .map-nearby-copy strong {
  overflow: hidden;
  color: var(--map-ref-ink);
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="map"] .map-nearby-copy > span:last-child {
  color: var(--map-ref-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page="map"] .map-nearby-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--map-ref-green-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

body[data-page="map"] .map-nearby-link span {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cpolyline points='14 6 20 12 14 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .map-shortcuts {
  order: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="map"] .map-shortcut {
  min-height: 78px;
  padding: 13px 8px 12px;
  gap: 8px;
  align-content: center;
  justify-items: center;
  border-radius: 12px;
  border-color: rgba(16, 25, 29, 0.075);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 22px rgba(16, 25, 29, 0.055);
}

body[data-page="map"] .map-shortcut .map-rail-icon {
  width: 24px;
  height: 24px;
  color: var(--map-ref-ink);
}

body[data-page="map"] .map-shortcut strong {
  max-width: 9ch;
  color: var(--map-ref-ink);
  font-size: 0.73rem;
  font-weight: 900;
  line-height: 1.12;
}

body[data-page="map"] .map-shortcut.active {
  border-color: rgba(8, 185, 66, 0.28);
  box-shadow:
    0 12px 26px rgba(8, 185, 66, 0.1),
    inset 0 0 0 1px rgba(8, 185, 66, 0.1);
}

body[data-page="map"] .map-shortcut.active .map-rail-icon {
  display: none;
}

body[data-page="map"] .map-shortcut.active .map-rail-icon::before,
body[data-page="map"] .map-shortcut.active .map-rail-icon::after {
  inset: 7px;
}

body[data-page="map"] .map-rail-icon-more {
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='0.3'/%3E%3Ccircle cx='12' cy='12' r='0.3'/%3E%3Ccircle cx='19' cy='12' r='0.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='0.3'/%3E%3Ccircle cx='12' cy='12' r='0.3'/%3E%3Ccircle cx='19' cy='12' r='0.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .map-rail-icon-more::before,
body[data-page="map"] .map-rail-icon-more::after {
  content: none;
}

body[data-page="map"] .map-shortcut-back-icon {
  width: 24px;
  height: 24px;
  color: var(--map-ref-ink);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .map-visited-panel {
  order: 4;
  gap: 12px;
  padding: 17px 20px 18px;
}

/* Recommendations sit directly below "Мои открытия" (visited = order 4) and
   share its exact box: same corner radius and same inner padding. */
body[data-page="map"] .map-recommendations-panel {
  order: 5;
  padding: 17px 20px 18px;
  border-radius: 17px;
}

body[data-page="map"] .map-visited-head {
  display: grid;
  gap: 7px;
}

/* Signed out the meta line is empty; don't let it reserve a grid row + gap, so
   the description sits at the same offset below the heading as in the
   recommendations panel. */
body[data-page="map"] .map-visited-head span:empty {
  display: none;
}

body[data-page="map"] .map-visited-list {
  min-height: 42px;
}

/* Signed out the list only holds the prompt — don't reserve the 42px used for
   pending-visit rows, so the panel is the same height as the recommendations one. */
body[data-page="map"] .map-visited-list:has(.map-visited-empty) {
  min-height: 0;
}

body[data-page="map"] .map-visited-empty,
body[data-page="map"] .map-recommendations-empty {
  padding: 0;
}

body[data-page="map"] .map-visited-progress {
  display: none;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e8e8;
}

body[data-page="map"] .map-visited-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--map-ref-green);
}

body[data-page="map"] .map-visited-foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #7f888c;
  font-size: 0.76rem;
  font-weight: 700;
}

body[data-page="map"] .floating-map-info,
body[data-page="map"] .map-shell-experience .floating-map-info,
body[data-page="map"] .map-shell-experience.is-panel-hidden .floating-map-info {
  top: auto;
  right: clamp(184px, 12vw, 236px);
  bottom: 24px;
  left: calc(var(--map-panel-width) + 62px);
  z-index: 12;
  justify-content: center;
  transition: opacity 220ms ease, visibility 0s;
}

/* While the route panel is open, fade the category legend out so the two
   floating cards never overlap. */
body[data-page="map"] .map-shell-experience.has-route-panel .floating-map-info {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}

body[data-page="map"] .map-legend {
  display: grid;
  /* Responsive, overlap-safe fallback: every column is at least as wide as the
     longest label (168px ≥ "Пляжи и набережные"), so a column can never be
     squeezed narrower than its text and spill over the next one. auto-fit drops
     to fewer columns as the pill narrows. The wide-screen override below packs
     the columns tighter once there's room for all five. */
  grid-template-columns: repeat(auto-fit, minmax(168px, max-content));
  justify-content: center;
  justify-items: start;
  align-items: center;
  gap: 12px 18px;
  width: auto;
  max-width: min(760px, calc(100vw - var(--map-panel-width) - 280px));
  min-width: 0;
  padding: 17px 24px;
  border-radius: 16px;
  border-color: rgba(16, 25, 29, 0.055);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 36px rgba(16, 25, 29, 0.1);
  backdrop-filter: blur(18px);
}

/* Once the map strip is wide enough (~1480px) to hold all five columns at their
   own content width (~740px), size each column to its content instead of the
   longest-label minimum. This keeps the dots aligned in a tight 5 + 4 grid with
   no wasted space after the short labels. */
@media (min-width: 1480px) {
  body[data-page="map"] .map-legend {
    grid-template-columns: repeat(5, max-content);
  }
}

body[data-page="map"] .map-legend article {
  gap: 10px;
  min-height: 18px;
}

body[data-page="map"] .map-legend p {
  color: #2d3639;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

body[data-page="map"] .legend-dot {
  width: 9px;
  height: 9px;
}

body[data-page="map"] .map-control-stack {
  top: 104px;
  right: 36px;
  z-index: 14;
}

body[data-page="map"] .map-control-button {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 16px;
  border: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(16, 25, 29, 0.1);
  color: var(--map-ref-ink);
  font-size: 0.9rem;
  font-weight: 900;
}

body[data-page="map"] #locateUserButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  min-height: 50px;
  padding: 0;
  border-radius: 50%;
  gap: 0;
  font-size: 0;
  line-height: 1;
}

body[data-page="map"] #locateUserButton::before {
  content: "";
  width: 20px;
  height: 20px;
  /* Стрелка залита несимметрично: центр масс её полигона — (13.7, 10.3) в
     системе viewBox 24x24, а не (12, 12). Геометрически иконка отцентрована,
     но глазом читается смещённой вправо-вверх, поэтому сдвигаем обратно. */
  transform: translate(-1px, 1px);
  background: var(--map-ref-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 22 2 13 21 11 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 22 2 13 21 11 13Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .map-zoom-stack {
  top: calc(50% + 41px);
  right: 36px;
  bottom: auto;
  z-index: 14;
  gap: 12px;
  transform: translateY(-50%);
}

body[data-page="map"] .map-control-button-square {
  width: 48px;
  min-height: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.55rem;
}

/* North-reset control. На мобильных это отдельный FAB на месте ИИ-гида (см.
   правило в @media max-width: 900px), на десктопе — обычная круглая кнопка
   внутри .map-control-stack, под «Я рядом». */
body[data-page="map"] .map-north-button {
  display: grid;
  place-items: center;
}
body[data-page="map"] .map-north-button svg {
  width: 24px;
  height: 24px;
}

body[data-page="map"] .cityhop-fixed-popup {
  --cityhop-popup-pointer-x: 50%;
  position: absolute !important;
  width: min(76vw, 350px);
  max-width: 350px;
  z-index: 18;
  transform: translate(-50%, calc(-100% - 30px)) scale(var(--cityhop-fixed-popup-scale)) !important;
  transform-origin: center bottom;
  opacity: var(--cityhop-fixed-popup-opacity) !important;
  pointer-events: auto;
}

body[data-page="map"] .cityhop-fixed-popup::after {
  content: "";
  position: absolute;
  left: var(--cityhop-popup-pointer-x);
  bottom: -15px;
  z-index: 1;
  width: 34px;
  height: 34px;
  background: #ffffff;
  border-radius: 9px;
  box-shadow: none;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}

body[data-page="map"] .cityhop-fixed-popup.cityhop-popup-closing::after {
  animation: cityhopPopupPointerOut 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

body[data-page="map"] .cityhop-fixed-popup::before {
  content: none;
}

body[data-page="map"] .cityhop-fixed-popup .mapboxgl-popup-tip {
  display: none;
}

body[data-page="map"] .cityhop-fixed-popup .mapboxgl-popup-content {
  position: relative;
  z-index: 2;
  border: 0;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 58px rgba(16, 25, 29, 0.16);
  overflow: hidden;
}

body[data-page="map"] .popup-card-place {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: none;
}

body[data-page="map"] .popup-card-carousel {
  overflow: hidden;
}

body[data-page="map"] .popup-card-gallery {
  background: #edf2ef;
}

body[data-page="map"] .popup-card-slide {
  aspect-ratio: 1.9 / 1;
}

body[data-page="map"] .popup-card-arrow,
body[data-page="map"] .popup-card-dots,
body[data-page="map"] .popup-card-photo-rating,
body[data-page="map"] .popup-card-slide-index {
  display: none;
}

body[data-page="map"] .popup-card-arrow {
  width: 42px;
  height: 42px;
  margin-top: -21px;
  display: none;
  background: rgba(17, 25, 29, 0.5);
  box-shadow: 0 14px 28px rgba(16, 25, 29, 0.14);
}

body[data-page="map"] .popup-card-arrow:hover {
  background: rgba(17, 25, 29, 0.64);
}

body[data-page="map"] .popup-card-arrow-prev {
  left: 14px;
}

body[data-page="map"] .popup-card-arrow-next {
  right: 14px;
}

body[data-page="map"] .popup-card-dots {
  display: none;
  padding: 8px 0 0;
}

body[data-page="map"] .popup-card-slide-index {
  display: none;
  top: 12px;
  right: 12px;
  padding: 7px 10px;
  background: rgba(17, 25, 29, 0.52);
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-page="map"] .popup-card-body {
  padding: 22px 28px 26px;
}

body[data-page="map"] .popup-card-place.is-photoless .popup-card-body {
  padding-top: 76px;
}

body[data-page="map"] .popup-card-body-head {
  align-items: flex-start;
  margin-bottom: 8px;
}

body[data-page="map"] .popup-card-chip {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--map-ref-green-dark);
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="map"] .popup-card-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16, 25, 29, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 18px rgba(16, 25, 29, 0.16);
  backdrop-filter: blur(8px);
  filter: none;
}

body[data-page="map"] .popup-card-close::before {
  content: "";
  width: 17px;
  height: 17px;
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .popup-card-place strong {
  margin: 0;
  color: var(--map-ref-ink);
  font-family: "Manrope", sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

body[data-page="map"] .popup-card-place p {
  max-width: none;
  margin: 10px 0 0;
  color: #5f6b70;
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.93rem;
  font-weight: 700;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-page="map"] .popup-card-schedule {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

body[data-page="map"] .popup-card-schedule-row {
  display: grid;
  gap: 4px;
}

body[data-page="map"] .popup-card-schedule .popup-card-meta-label {
  color: #6d787d;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

body[data-page="map"] .popup-card-schedule .popup-card-meta-value {
  color: var(--map-ref-ink);
  font-size: 0.92rem;
  font-weight: 900;
}

body[data-page="map"] .popup-card-meta {
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 20px;
  margin-top: 16px;
}

body[data-page="map"] .popup-card-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body[data-page="map"] .popup-card-meta-icon {
  width: 16px;
  height: 16px;
  background: #778287;
}

body[data-page="map"] .popup-card-meta-distance .popup-card-meta-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .popup-card-meta-time .popup-card-meta-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Event places show "Проходит DD.MM–DD.MM" with a calendar icon. */
body[data-page="map"] .popup-card-meta-event .popup-card-meta-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .popup-card-meta-value {
  color: #778287;
  font-family: "Manrope", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
}

body[data-page="map"] .popup-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 18px;
}

body[data-page="map"] .popup-card-route-button,
body[data-page="map"] .popup-card-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 13px;
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

body[data-page="map"] .popup-card-route-button {
  min-width: 188px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 14px;
  gap: 10px;
  font-size: 0.82rem;
  color: #ffffff;
  background: linear-gradient(135deg, var(--map-ref-green), var(--map-ref-green-dark));
  box-shadow: 0 14px 28px rgba(8, 185, 66, 0.24);
}

body[data-page="map"] .popup-card-save-button {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  color: #ffffff;
  background: rgba(16, 25, 29, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 18px rgba(16, 25, 29, 0.16);
  backdrop-filter: blur(8px);
}

body[data-page="map"] .popup-card-save-button.is-saved {
  color: #f5b301;
  background: rgba(16, 25, 29, 0.26);
}

body[data-page="map"] .popup-card-action-icon {
  width: 20px;
  height: 20px;
  background: currentColor;
}

body[data-page="map"] .popup-card-action-icon-route {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .popup-card-action-icon-save {
  filter: drop-shadow(0 3px 7px rgba(16, 25, 29, 0.5));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="map"] .popup-card-save-button.is-saved .popup-card-action-icon-save {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-height: 780px) and (min-width: 901px) {
  body[data-page="map"] .map-city-card {
    min-height: 258px;
  }

  body[data-page="map"] .map-nearby-card {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  body[data-page="map"] .map-visited-panel {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  body[data-page="map"] .map-shortcut {
    min-height: 72px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body[data-page="map"] .map-shortcut .map-rail-icon {
    width: 22px;
    height: 22px;
  }

  body[data-page="map"] .cityhop-fixed-popup {
    width: min(76vw, 340px);
  }

  body[data-page="map"] .popup-card-slide {
    aspect-ratio: 1.95 / 1;
  }

  body[data-page="map"] .popup-card-body {
    padding: 18px 24px 22px;
  }

  body[data-page="map"] .popup-card-place.is-photoless .popup-card-body {
    padding-top: 72px;
  }

  body[data-page="map"] .popup-card-place strong {
    font-size: 1.18rem;
  }

  body[data-page="map"] .popup-card-place p {
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.42;
  }

  body[data-page="map"] .popup-card-place p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body[data-page="map"] .popup-card-meta {
    margin-top: 14px;
  }

  body[data-page="map"] .popup-card-schedule {
    gap: 8px;
    margin-top: 12px;
  }

  body[data-page="map"] .popup-card-actions {
    margin-top: 16px;
  }

  body[data-page="map"] .popup-card-route-button {
    min-width: 184px;
    min-height: 48px;
  }
}

@media (max-width: 1180px) {
  body[data-page="map"] .map-left-panel {
    width: 454px;
  }

  body[data-page="map"] .map-shell-experience {
    --map-panel-shell-width: 454px;
  }

  body[data-page="map"] .cityhop-fixed-popup {
    width: min(72vw, 330px);
  }

  body[data-page="map"] .map-legend {
    max-width: min(760px, calc(100vw - 620px));
  }
}

/* Below 1180px the generic header rule (.site-header { flex-wrap: wrap }) would
   stack the map header into a too-tall, overflowing layout. Keep the map header
   on one row instead — the in-flow search shrinks to fill the centre between the
   location chip and the right-side actions, so nothing collides or wraps. */
@media (min-width: 901px) and (max-width: 1180px) {
  body[data-page="map"] .site-header {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  body[data-page="map"] .header-actions {
    width: auto;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  body[data-page="map"] .header-city-picker-anchor {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  body[data-page="map"] {
    overflow: auto;
  }

  body[data-page="map"] .site-header {
    height: auto;
    min-height: 70px;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 16px 18px;
  }

  body[data-page="map"] .header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }

  body[data-page="map"] .header-city-picker-anchor {
    margin-left: 0;
  }

  body[data-page="map"] .map-search-box {
    position: relative;
    top: auto;
    left: auto;
    order: 20;
    width: 100%;
    max-width: none;
    transform: none;
  }

  body[data-page="map"] #map {
    inset: var(--map-surface-top) 0 0 0;
  }

  body[data-page="map"] .map-shell-experience {
    --map-surface-top: 142px;
    --map-panel-shell-width: min(426px, 100vw);
  }

  body[data-page="map"] .map-left-panel {
    top: var(--map-surface-top);
    left: 0 !important;
    width: min(426px, 100vw) !important;
    padding: 0 18px 18px;
  }

  body[data-page="map"] .map-zoom-stack {
    top: calc(50% + 71px);
  }

  body[data-page="map"] .cityhop-fixed-popup {
    top: auto !important;
    right: 18px !important;
    bottom: 92px !important;
    left: 18px !important;
    width: auto;
    max-width: none;
  }

  body[data-page="map"] .cityhop-fixed-popup::after {
    content: none;
  }

  body[data-page="map"] .cityhop-fixed-popup::before {
    content: none;
  }

  body[data-page="map"] .floating-map-info {
    display: none;
  }
}

/* Place page reference layout */
body[data-page="place"] {
  --place-ref-green: #009b36;
  --place-ref-green-dark: #078c34;
  --place-ref-ink: #11191d;
  --place-ref-muted: #687579;
  --place-ref-border: rgba(17, 25, 29, 0.08);
  --place-ref-card-shadow: 0 22px 56px rgba(17, 25, 29, 0.1);
  background:
    radial-gradient(circle at 80% 8%, rgba(0, 155, 54, 0.06), transparent 26%),
    #f7f9f8;
  color: var(--place-ref-ink);
}

body[data-page="place"] .site-header {
  width: 100%;
  height: 76px;
  margin: 0;
  padding: 0 44px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(17, 25, 29, 0.04), 0 12px 32px rgba(17, 25, 29, 0.04);
  backdrop-filter: blur(18px);
}

body[data-page="place"] .site-header::before {
  content: none;
  display: none;
}

body[data-page="place"] .brand-wordmark {
  color: var(--place-ref-green);
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(1.5rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

body[data-page="place"] .header-actions {
  flex: 1 1 auto;
  --place-header-icon-size: var(--header-icon-size);
  flex-wrap: nowrap;
  gap: 24px;
  justify-content: flex-start;
}

body[data-page="place"] .header-chip-location {
  margin-left: 34px;
  margin-right: auto;
  padding: 0;
  color: var(--place-ref-ink);
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="place"] .header-chip-location::before {
  color: var(--place-ref-green);
}

body[data-page="place"] .header-chip-location::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .place-header-map-link,
body[data-page="place"] .place-share-button,
body[data-page="place"] .place-page-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  border: 0;
  background: #ffffff;
  color: var(--place-ref-ink);
  box-shadow: 0 12px 28px rgba(17, 25, 29, 0.08);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

body[data-page="place"] .place-header-map-link {
  margin-left: auto;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transition:
    transform 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

body[data-page="place"] .place-header-map-link::before,
body[data-page="place"] .place-share-button::before,
body[data-page="place"] .place-page-back::before {
  content: "";
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  background: var(--place-ref-green);
  -webkit-mask: var(--place-action-icon) center / contain no-repeat;
  mask: var(--place-action-icon) center / contain no-repeat;
}

body[data-page="place"] .place-header-map-link {
  --place-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6.5v13L9 17l6 2.5 5.5-2.5v-13L15 6.5 9 4Z'/%3E%3Cline x1='9' y1='4' x2='9' y2='17'/%3E%3Cline x1='15' y1='6.5' x2='15' y2='19.5'/%3E%3C/svg%3E");
}

/* Header map link: icon only (hide the "Карта" label — kept for screen readers)
   and a white/theme-adaptive icon instead of green. */
body[data-page="place"] .place-header-map-link {
  font-size: 0;
  gap: 0;
}
body[data-page="place"] .place-header-map-link::before {
  background: var(--text);
}

body[data-page="place"] .place-share-button {
  --place-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='19' r='2.5'/%3E%3Cline x1='8.2' y1='13.2' x2='15.8' y2='17.8'/%3E%3Cline x1='15.8' y1='6.2' x2='8.2' y2='10.8'/%3E%3C/svg%3E");
}

body[data-page="place"] .place-page-back {
  --place-action-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='20' y1='12' x2='4' y2='12'/%3E%3Cpolyline points='10 6 4 12 10 18'/%3E%3C/svg%3E");
}

body[data-page="place"] .place-header-map-link:hover,
body[data-page="place"] .place-share-button:hover,
body[data-page="place"] .place-page-back:hover {
  transform: translateY(-1px);
  color: var(--place-ref-ink);
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(17, 25, 29, 0.1);
}

body[data-page="place"] .place-header-map-link:hover,
body[data-page="place"] .place-header-map-link:focus-visible {
  transform: translateY(-1px);
  background: transparent;
  box-shadow: none;
}

body[data-page="place"] .place-share-button.is-copied {
  color: var(--place-ref-green);
}

body[data-page="place"] #loginButton.header-chip-auth,
body[data-page="place"] #logoutButton.header-chip-auth,
body[data-page="place"] .header-notification-button,
body[data-page="place"] .header-chip-user {
  color: var(--place-ref-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
}

body[data-page="place"] .header-notification-button,
body[data-page="place"] #logoutButton.header-chip-auth {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 0;
}

body[data-page="place"] #logoutButton.header-chip-auth::before,
body[data-page="place"] .header-notification-icon {
  width: var(--place-header-icon-size);
  height: var(--place-header-icon-size);
  flex: 0 0 var(--place-header-icon-size);
}

body[data-page="place"] .header-notification-button {
  color: var(--text);
}

body[data-page="place"] .header-notification-badge {
  top: 5px;
  right: 4px;
}

body[data-page="place"] .header-chip-user {
  width: auto;
  min-width: 0;
  height: 50px;
  gap: 12px;
  padding: 0 4px 0 0;
}

body[data-page="place"] .header-user-chip-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  background: rgba(0, 155, 54, 0.1);
}

body[data-page="place"] .header-user-chip-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-page="place"] .header-user-chip-name,
body[data-page="place"] .header-user-chip-role {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  clip-path: none;
}

body[data-page="place"] .header-user-chip-name {
  color: var(--place-ref-ink);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.05;
}

body[data-page="place"] .header-user-chip-role {
  color: var(--place-ref-muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.05;
}

body[data-page="place"] .site-header:not(.auth-header) .primary-button.header-signup-button {
  min-height: 50px;
  border-radius: 999px;
  background: linear-gradient(135deg, #08b942, #079b38);
  box-shadow: 0 18px 36px rgba(8, 185, 66, 0.24);
}

body[data-page="place"] .place-page-main {
  width: 100%;
  margin: 0;
  padding: 14px 44px 26px;
}

body[data-page="place"] .place-page-shell {
  width: min(100%, 1448px);
  margin: 0 auto;
  gap: 16px;
}

body[data-page="place"] .place-page-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body[data-page="place"] .place-page-card-wrap {
  min-height: auto;
  justify-items: stretch;
}

body[data-page="place"] .place-page-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(430px, 610px) minmax(520px, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

body[data-page="place"] .place-page-left-column {
  justify-content: stretch;
}

body[data-page="place"] .place-detail-card,
body[data-page="place"] .place-comments-composer-card,
body[data-page="place"] .place-comments-list-card {
  border: 1px solid rgba(17, 25, 29, 0.045);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--place-ref-card-shadow);
}

body[data-page="place"] .place-comments-composer-card,
body[data-page="place"] .place-comments-list-card {
  box-shadow: none;
}

body[data-page="place"] .place-detail-card {
  width: 100%;
  max-width: none;
  padding: 12px;
  border-radius: 24px;
  overflow: visible;
}

body[data-page="place"] .popup-card-carousel {
  overflow: hidden;
  border-radius: 18px;
}

body[data-page="place"] .popup-card-gallery {
  border-radius: 18px;
}

body[data-page="place"] .place-detail-card .popup-card-slide {
  aspect-ratio: 1.8 / 1;
}

body[data-page="place"] .popup-card-slide-index {
  top: 16px;
  right: 16px;
  padding: 8px 12px;
  background: rgba(17, 25, 29, 0.54);
  font-size: 0.78rem;
}

body[data-page="place"] .place-detail-card .popup-card-arrow {
  z-index: 4;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  display: inline-flex;
  background: rgba(255, 255, 255, 0.94);
  color: var(--place-ref-ink);
  box-shadow: 0 14px 30px rgba(17, 25, 29, 0.16);
  backdrop-filter: blur(14px);
}

body[data-page="place"] .place-detail-card .popup-card-arrow:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(17, 25, 29, 0.2);
}

body[data-page="place"] .place-detail-card .popup-card-arrow-prev {
  left: 18px;
}

body[data-page="place"] .place-detail-card .popup-card-arrow-next {
  right: 18px;
}

body[data-page="place"] .popup-card-photo-rating {
  left: 18px;
  bottom: 16px;
  min-height: 42px;
  padding: 0 16px;
  gap: 8px;
  background: rgba(255, 255, 255, 0.96);
}

body[data-page="place"] .place-photo-metrics {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100% - 36px);
  pointer-events: none;
}

body[data-page="place"] .place-photo-metrics .popup-card-photo-rating {
  position: static;
  left: auto;
  bottom: auto;
}

body[data-page="place"] .place-photo-engagement {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(17, 25, 29, 0.54);
  color: #ffffff;
  box-shadow:
    0 12px 24px rgba(12, 18, 20, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
}

body[data-page="place"] .place-photo-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

body[data-page="place"] .place-photo-stat-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
}

body[data-page="place"] .place-photo-stat.is-likes .place-photo-stat-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h9l2.5-8.5a1.5 1.5 0 0 0-1.4-2H12l.8-4a1.8 1.8 0 0 0-3.5-.6L7 10v10Z'/%3E%3Cline x1='7' y1='20' x2='4' y2='20'/%3E%3Cline x1='4' y1='20' x2='4' y2='10'/%3E%3Cline x1='4' y1='10' x2='7' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h9l2.5-8.5a1.5 1.5 0 0 0-1.4-2H12l.8-4a1.8 1.8 0 0 0-3.5-.6L7 10v10Z'/%3E%3Cline x1='7' y1='20' x2='4' y2='20'/%3E%3Cline x1='4' y1='20' x2='4' y2='10'/%3E%3Cline x1='4' y1='10' x2='7' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .place-photo-stat.is-dislikes .place-photo-stat-icon {
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h9l2.5 8.5a1.5 1.5 0 0 1-1.4 2H12l.8 4a1.8 1.8 0 0 1-3.5.6L7 14V4Z'/%3E%3Cline x1='7' y1='4' x2='4' y2='4'/%3E%3Cline x1='4' y1='4' x2='4' y2='14'/%3E%3Cline x1='4' y1='14' x2='7' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h9l2.5 8.5a1.5 1.5 0 0 1-1.4 2H12l.8 4a1.8 1.8 0 0 1-3.5.6L7 14V4Z'/%3E%3Cline x1='7' y1='4' x2='4' y2='4'/%3E%3Cline x1='4' y1='4' x2='4' y2='14'/%3E%3Cline x1='4' y1='14' x2='7' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .place-photo-stat.is-views .place-photo-stat-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .popup-card-rating-stars,
body[data-page="place"] .popup-card-rating-value {
  font-size: 0.9rem;
}

body[data-page="place"] .place-photo-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 10px 4px;
}

body[data-page="place"] .place-photo-thumb {
  position: relative;
  min-width: 0;
  height: 58px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: rgba(17, 25, 29, 0.08);
  box-shadow: none;
  cursor: pointer;
}

body[data-page="place"] .place-photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-page="place"] .place-photo-thumb.is-active {
  border-color: var(--place-ref-green);
}

body[data-page="place"] .place-photo-thumb-more::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 25, 29, 0.46);
}

body[data-page="place"] .place-photo-thumb-more span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
}

body[data-page="place"] .place-detail-card .popup-card-body {
  padding: 22px 10px 8px;
}

body[data-page="place"] .place-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

body[data-page="place"] .place-detail-heading-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}

body[data-page="place"] .place-detail-heading-main .popup-card-categories {
  margin: 0;
}

body[data-page="place"] .popup-card-chip {
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.72rem;
  font-weight: 900;
}

body[data-page="place"] .popup-card-edit-button {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  color: var(--place-ref-green);
  background: #ffffff;
}

body[data-page="place"] .place-detail-card h1 {
  margin: 0;
  color: var(--place-ref-ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.55rem, 2.1vw, 2rem);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

body[data-page="place"] .place-detail-description {
  margin: 18px 0 0;
  color: #263237;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.6;
}

body[data-page="place"] .place-detail-heading-main .popup-card-submitter {
  max-width: 100%;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(0, 155, 54, 0.06);
}

body[data-page="place"] .place-detail-heading-main .popup-card-submitter-avatar {
  width: 31px;
  height: 31px;
}

body[data-page="place"] .place-detail-heading-main .popup-card-submitter-label {
  color: var(--place-ref-green);
  font-size: 0.58rem;
}

body[data-page="place"] .place-detail-heading-main .popup-card-submitter-name {
  max-width: 140px;
  font-size: 0.9rem;
}

body[data-page="place"] .place-detail-card .popup-card-tags {
  margin: 20px 0 0;
}

body[data-page="place"] .place-detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  padding-top: 0;
  border-top: 0;
}

body[data-page="place"] .place-detail-info-card {
  min-height: 74px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(17, 25, 29, 0.08);
  border-radius: 12px;
  background: #ffffff;
}

body[data-page="place"] .place-detail-info-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(0, 155, 54, 0.1);
}

body[data-page="place"] .place-detail-info-icon::before {
  content: "";
  width: 19px;
  height: 19px;
  background: var(--place-ref-green);
  -webkit-mask: var(--place-info-icon) center / contain no-repeat;
  mask: var(--place-info-icon) center / contain no-repeat;
}

body[data-page="place"] .place-detail-info-card.is-days {
  --place-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3C/svg%3E");
}

body[data-page="place"] .place-detail-info-card.is-hours {
  --place-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='16' rx='2'/%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='8' y1='3' x2='8' y2='6'/%3E%3Cline x1='16' y1='3' x2='16' y2='6'/%3E%3C/svg%3E");
}

body[data-page="place"] .place-detail-info-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-page="place"] .place-detail-info-copy span {
  color: var(--place-ref-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

body[data-page="place"] .place-detail-info-copy strong {
  margin: 0;
  color: var(--place-ref-ink);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.22;
}

body[data-page="place"] .place-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding-top: 0;
  border-top: 0;
}

body[data-page="place"] .place-card-engagement {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(17, 25, 29, 0.08);
  border-radius: 999px;
  background: rgba(17, 25, 29, 0.04);
  color: #657176;
  flex: 0 0 auto;
}

body[data-page="place"] .place-card-engagement.is-views-only {
  min-width: 62px;
  justify-content: center;
}

body[data-page="place"] .place-card-engagement.is-loading {
  opacity: 0.72;
}

body[data-page="place"] .place-card-engagement-item {
  min-width: 42px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

body[data-page="place"] .place-card-engagement-button {
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

body[data-page="place"] .place-card-engagement-button:hover {
  background: #ffffff;
  color: var(--place-ref-green);
  box-shadow: 0 10px 20px rgba(17, 25, 29, 0.08);
  transform: translateY(-1px);
}

body[data-page="place"] .place-card-engagement-button:focus-visible {
  outline: 3px solid rgba(0, 155, 54, 0.16);
  outline-offset: 2px;
}

body[data-page="place"] .place-card-engagement-button:disabled {
  cursor: wait;
  transform: none;
  box-shadow: none;
}

body[data-page="place"] .place-card-engagement-button.is-active {
  background: rgba(0, 155, 54, 0.11);
  color: var(--place-ref-green);
}

body[data-page="place"] .place-card-engagement-button.is-dislikes.is-active {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

body[data-page="place"] .place-card-engagement-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
}

body[data-page="place"] .place-card-engagement-item.is-likes .place-card-engagement-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h9l2.5-8.5a1.5 1.5 0 0 0-1.4-2H12l.8-4a1.8 1.8 0 0 0-3.5-.6L7 10v10Z'/%3E%3Cline x1='7' y1='20' x2='4' y2='20'/%3E%3Cline x1='4' y1='20' x2='4' y2='10'/%3E%3Cline x1='4' y1='10' x2='7' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h9l2.5-8.5a1.5 1.5 0 0 0-1.4-2H12l.8-4a1.8 1.8 0 0 0-3.5-.6L7 10v10Z'/%3E%3Cline x1='7' y1='20' x2='4' y2='20'/%3E%3Cline x1='4' y1='20' x2='4' y2='10'/%3E%3Cline x1='4' y1='10' x2='7' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .place-card-engagement-item.is-dislikes .place-card-engagement-icon {
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h9l2.5 8.5a1.5 1.5 0 0 1-1.4 2H12l.8 4a1.8 1.8 0 0 1-3.5.6L7 14V4Z'/%3E%3Cline x1='7' y1='4' x2='4' y2='4'/%3E%3Cline x1='4' y1='4' x2='4' y2='14'/%3E%3Cline x1='4' y1='14' x2='7' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h9l2.5 8.5a1.5 1.5 0 0 1-1.4 2H12l.8 4a1.8 1.8 0 0 1-3.5.6L7 14V4Z'/%3E%3Cline x1='7' y1='4' x2='4' y2='4'/%3E%3Cline x1='4' y1='4' x2='4' y2='14'/%3E%3Cline x1='4' y1='14' x2='7' y2='14'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .place-card-engagement-item.is-views .place-card-engagement-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .place-report-button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.86rem;
}

body[data-page="place"] .place-comments-panel {
  gap: 14px;
}

body[data-page="place"] .place-comments-panel-head {
  min-height: 74px;
  align-items: center;
}

body[data-page="place"] .place-comments-panel-head > div:first-child {
  min-height: 0;
  display: grid;
  gap: 8px;
}

body[data-page="place"] .place-comments-panel-head h2 {
  color: var(--place-ref-ink);
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.35rem, 1.7vw, 1.62rem);
  font-weight: 900;
  letter-spacing: -0.035em;
}

body[data-page="place"] .place-comments-panel-head p {
  margin: 0;
  color: #59666b;
  font-size: 0.98rem;
  font-weight: 600;
}

body[data-page="place"] .place-comments-average {
  width: 64px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 50%;
  color: var(--place-ref-green);
  font-size: 1.08rem;
  font-weight: 900;
}

body[data-page="place"] .place-comments-composer-card,
body[data-page="place"] .place-comments-list-card {
  border-radius: 24px;
  padding: 24px;
}

body[data-page="place"] .place-comment-form {
  gap: 22px;
}

body[data-page="place"] .place-comment-current-user {
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-page="place"] .place-comment-current-user-avatar,
body[data-page="place"] .place-comment-avatar {
  width: 52px;
  height: 52px;
}

body[data-page="place"] .place-comment-current-user-copy strong {
  color: var(--place-ref-ink);
  font-size: 1rem;
  font-weight: 900;
}

body[data-page="place"] .place-comment-current-user-copy span,
body[data-page="place"] .place-comments-empty-state p {
  color: #617077;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
}

body[data-page="place"] .place-comment-label {
  color: #667276;
  font-family: "Manrope", sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="place"] .place-comment-rating {
  gap: 16px;
}

body[data-page="place"] .place-comment-star-button,
body[data-page="place"] .place-comment-star {
  font-size: 2rem;
  color: rgba(0, 155, 54, 0.26);
}

body[data-page="place"] .place-comment-star-button.is-active,
body[data-page="place"] .place-comment-star.is-active,
body[data-page="place"] .place-comment-star-button:hover {
  color: var(--place-ref-green);
}

body[data-page="place"] .place-comment-textarea {
  min-height: 112px;
  padding: 16px 18px;
  border-radius: 18px;
  border-color: rgba(17, 25, 29, 0.12);
  background: #ffffff;
}

body[data-page="place"] .place-comment-upload-tile {
  min-height: 78px;
  grid-template-columns: 48px minmax(0, 1fr);
  border-radius: 18px;
  background: #ffffff;
}

body[data-page="place"] .place-comment-upload-icon {
  border-radius: 50%;
  background: rgba(0, 155, 54, 0.08);
  color: var(--place-ref-green);
}

body[data-page="place"] .place-comment-submit {
  min-height: 46px;
  border-radius: 999px;
  background: linear-gradient(135deg, #08b942, #079b38);
  box-shadow: 0 16px 34px rgba(8, 185, 66, 0.22);
}

body[data-page="place"] .place-comments-list-card {
  min-height: 184px;
  display: grid;
  align-items: center;
}

body[data-page="place"] .place-comments-empty-state {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

body[data-page="place"] .place-comments-empty-icon {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 155, 54, 0.08);
}

body[data-page="place"] .place-comments-empty-icon::before {
  content: "";
  width: 46px;
  height: 46px;
  background: var(--place-ref-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-4 4v-4H6a2 2 0 0 1-2-2V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9l-4 4v-4H6a2 2 0 0 1-2-2V6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body[data-page="place"] .place-comments-empty-state strong {
  color: var(--place-ref-ink);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

body[data-page="place"] .place-comments-empty-state p {
  max-width: 460px;
  margin: 12px 0 0;
  font-size: 1rem;
}

body[data-page="place"] .place-comments-list-card:has(.place-comments-list) {
  align-items: start;
}

@media (min-width: 1121px) {
  body[data-page="place"] {
    min-height: 100dvh;
    overflow: auto;
  }

  body[data-page="place"] .place-page-main {
    min-height: calc(100dvh - 76px);
    height: auto;
    padding: 14px 44px 8px;
    overflow: visible;
  }

  body[data-page="place"] .place-page-shell {
    min-height: 100%;
    height: auto;
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
  }

  body[data-page="place"] .place-page-topbar {
    min-height: 38px;
  }

  body[data-page="place"] .place-page-back,
  body[data-page="place"] .place-share-button {
    min-height: 38px;
    padding: 0 16px;
  }

  body[data-page="place"] .place-page-card-wrap,
  body[data-page="place"] .place-page-layout,
  body[data-page="place"] .place-page-left-column,
  body[data-page="place"] .place-comments-panel {
    min-height: 0;
  }

  body[data-page="place"] .place-page-layout {
    height: auto;
    gap: clamp(28px, 3.2vw, 48px);
    align-items: start;
  }

  body[data-page="place"] .place-page-left-column {
    align-items: flex-start;
  }

  body[data-page="place"] .place-detail-card {
    height: auto;
    max-height: none;
    min-height: 0;
    display: block;
    padding: 12px;
    overflow: visible;
  }

  body[data-page="place"] .place-detail-card .popup-card-slide {
    height: clamp(185px, calc((100dvh - 76px) * 0.30), 340px);
    aspect-ratio: auto;
  }

  body[data-page="place"] .popup-card-slide-index {
    top: 12px;
    right: 12px;
    padding: 6px 10px;
  }

  body[data-page="place"] .place-detail-card .popup-card-arrow {
    width: 38px;
    height: 38px;
    margin-top: -19px;
  }

  body[data-page="place"] .place-detail-card .popup-card-arrow-prev {
    left: 14px;
  }

  body[data-page="place"] .place-detail-card .popup-card-arrow-next {
    right: 14px;
  }

  body[data-page="place"] .popup-card-photo-rating {
    left: 14px;
    bottom: 12px;
    min-height: 34px;
    padding: 0 12px;
  }

  body[data-page="place"] .place-photo-metrics {
    left: 14px;
    bottom: 12px;
    gap: 6px;
    max-width: calc(100% - 28px);
  }

  body[data-page="place"] .place-photo-engagement {
    min-height: 34px;
    gap: 8px;
    padding: 0 11px;
  }

  body[data-page="place"] .place-photo-stat {
    gap: 4px;
    font-size: 0.76rem;
  }

  body[data-page="place"] .place-photo-stat-icon {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  body[data-page="place"] .place-photo-thumbs {
    gap: 9px;
    padding: 8px 8px 0;
  }

  body[data-page="place"] .place-photo-thumb {
    height: 44px;
  }

  body[data-page="place"] .place-detail-card .popup-card-body {
    flex: initial;
    min-height: 0;
    display: block;
    padding: 14px 10px 6px;
    overflow: visible;
  }

  body[data-page="place"] .place-detail-heading {
    gap: 12px;
    margin-bottom: 8px;
  }

  body[data-page="place"] .place-detail-heading-main {
    gap: 6px;
  }

  body[data-page="place"] .popup-card-chip {
    min-height: 26px;
    padding: 0 12px;
    font-size: 0.68rem;
  }

  body[data-page="place"] .popup-card-edit-button {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  body[data-page="place"] .place-detail-card h1 {
    font-size: clamp(1.35rem, 1.6vw, 1.62rem);
    line-height: 1.08;
  }

  body[data-page="place"] .place-detail-description {
    display: block;
    margin-top: 10px;
    overflow: visible;
    font-size: 0.9rem;
    line-height: 1.4;
    -webkit-box-orient: initial;
    -webkit-line-clamp: initial;
  }

  body[data-page="place"] .place-detail-heading-main .popup-card-submitter {
    padding: 4px 10px 4px 4px;
  }

  body[data-page="place"] .place-detail-heading-main .popup-card-submitter-avatar {
    width: 28px;
    height: 28px;
  }

  body[data-page="place"] .place-detail-heading-main .popup-card-submitter-label {
    font-size: 0.56rem;
  }

  body[data-page="place"] .place-detail-heading-main .popup-card-submitter-name {
    max-width: 128px;
    font-size: 0.84rem;
  }

  body[data-page="place"] .place-detail-card .popup-card-tags {
    margin-top: 12px;
  }

  body[data-page="place"] .place-detail-info-grid {
    gap: 8px;
    margin-top: 14px;
    padding-top: 0;
  }

  body[data-page="place"] .place-detail-info-card {
    min-height: 52px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px;
  }

  body[data-page="place"] .place-detail-info-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
  }

  body[data-page="place"] .place-detail-info-icon::before {
    width: 16px;
    height: 16px;
  }

  body[data-page="place"] .place-detail-info-copy {
    gap: 2px;
  }

  body[data-page="place"] .place-detail-info-copy span {
    font-size: 0.72rem;
  }

  body[data-page="place"] .place-detail-info-copy strong {
    font-size: 0.82rem;
    line-height: 1.12;
  }

  body[data-page="place"] .place-detail-actions {
    margin-top: 12px;
    padding-top: 0;
  }

  body[data-page="place"] .place-card-engagement {
    min-height: 34px;
    padding: 3px;
  }

  body[data-page="place"] .place-card-engagement-item {
    min-width: 36px;
    height: 28px;
    gap: 4px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  body[data-page="place"] .place-card-engagement-icon {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  body[data-page="place"] .place-report-button {
    min-height: 34px;
    padding: 0 15px;
    font-size: 0.8rem;
  }

  body[data-page="place"] .place-comments-panel {
    gap: 10px;
    overflow: hidden;
  }

  body[data-page="place"] .place-comments-panel-head {
    min-height: 56px;
  }

  body[data-page="place"] .place-comments-panel-head > div:first-child {
    gap: 4px;
  }

  body[data-page="place"] .place-comments-panel-head h2 {
    font-size: clamp(1.18rem, 1.45vw, 1.35rem);
  }

  body[data-page="place"] .place-comments-panel-head p {
    font-size: 0.88rem;
  }

  body[data-page="place"] .place-comments-average {
    width: 52px;
    min-width: 52px;
    min-height: 52px;
    font-size: 0.98rem;
  }

  body[data-page="place"] .place-comments-composer-card,
  body[data-page="place"] .place-comments-list-card {
    border-radius: 20px;
    padding: 16px 20px;
  }

  body[data-page="place"] .place-comments-list-card {
    min-height: 136px;
    overflow: hidden;
  }

  body[data-page="place"] .place-comments-empty-state {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 18px;
  }

  body[data-page="place"] .place-comments-empty-icon {
    width: 70px;
    height: 70px;
  }

  body[data-page="place"] .place-comments-empty-icon::before {
    width: 34px;
    height: 34px;
  }

  body[data-page="place"] .place-comments-empty-state strong {
    font-size: 1.16rem;
  }

  body[data-page="place"] .place-comments-empty-state p {
    margin-top: 7px;
    font-size: 0.9rem;
    line-height: 1.36;
  }

  body[data-page="place"] .place-comment-form {
    gap: 12px;
  }

  body[data-page="place"] .place-comment-current-user {
    gap: 12px;
  }

  body[data-page="place"] .place-comment-current-user-avatar,
  body[data-page="place"] .place-comment-avatar {
    width: 42px;
    height: 42px;
  }

  body[data-page="place"] .place-comment-rating {
    gap: 12px;
  }

  body[data-page="place"] .place-comment-star-button,
  body[data-page="place"] .place-comment-star {
    font-size: 1.58rem;
  }

  body[data-page="place"] .place-comment-textarea {
    min-height: 74px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  body[data-page="place"] .place-comment-upload-tile {
    min-height: 58px;
    grid-template-columns: 40px minmax(0, 1fr);
    border-radius: 14px;
  }

  body[data-page="place"] .place-comment-submit {
    min-height: 40px;
  }

  body[data-page="place"] .place-comments-list {
    max-height: clamp(112px, 23dvh, 240px);
    overflow-y: auto;
  }
}

@media (max-width: 1120px) {
  body[data-page="place"] .place-page-layout {
    grid-template-columns: 1fr;
  }

  body[data-page="place"] .place-comments-panel {
    width: 100%;
  }
}

@media (max-width: 820px) {
  body[data-page="place"] .site-header {
    height: auto;
    min-height: 76px;
    flex-wrap: wrap;
    padding: 16px 20px;
  }

  body[data-page="place"] .header-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
  }

  body[data-page="place"] .header-chip-location {
    margin-left: 0;
    margin-right: 0;
  }

  body[data-page="place"] .place-header-map-link {
    margin-left: 0;
  }

  body[data-page="place"] .place-page-main {
    padding: 18px 18px 34px;
  }

  body[data-page="place"] .place-page-topbar {
    align-items: stretch;
  }
}

@media (max-width: 640px) {
  body[data-page="place"] .place-detail-info-grid,
  body[data-page="place"] .place-comments-empty-state {
    grid-template-columns: 1fr;
  }

  /* Compact action row: a wide "back" pill + an icon-only share button,
     instead of two full-width stacked pills. */
  body[data-page="place"] .place-page-topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  body[data-page="place"] .place-page-back {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 16px;
  }

  body[data-page="place"] .place-share-button {
    flex: 0 0 auto;
    width: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
    /* icon-only on mobile; the label stays for screen readers */
    font-size: 0;
  }

  body[data-page="place"] .place-detail-card {
    padding: 10px;
    border-radius: 20px;
  }

  body[data-page="place"] .place-detail-card .popup-card-slide {
    aspect-ratio: 1.45 / 1;
  }

  body[data-page="place"] .place-detail-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  body[data-page="place"] .place-photo-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }

  body[data-page="place"] .place-comments-panel-head {
    display: grid;
    justify-items: start;
  }

  body[data-page="place"] .place-comments-composer-card,
  body[data-page="place"] .place-comments-list-card {
    padding: 18px;
    border-radius: 20px;
  }
}

/* ---- Photo lightbox (fullscreen viewer + per-photo like/dislike) ---- */
.popup-card-slide-image { cursor: zoom-in; }
body.photo-lightbox-open { overflow: hidden; }
.photo-lightbox[hidden] { display: none; }
.photo-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.photo-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); }
.photo-lightbox-dialog {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 94vw; max-height: 94vh;
}
/* Fixed frame so every photo shows at the same size while flipping. */
.photo-lightbox-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(92vw, 880px);
  height: min(74vh, 620px);
}
.photo-lightbox-image {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); background: #111;
}
.photo-lightbox-caption {
  color: rgba(255, 255, 255, 0.85); font-size: 14px; font-weight: 600;
}
/* Uniform, evenly-sized round controls with centred icons. */
.photo-lightbox-close,
.photo-lightbox-arrow {
  display: grid; place-items: center;
  width: 46px; height: 46px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, 0.16);
  transition: background 0.15s ease, transform 0.15s ease;
}
.photo-lightbox-close:hover,
.photo-lightbox-arrow:hover { background: rgba(255, 255, 255, 0.3); }
.photo-lightbox-close { position: absolute; top: -56px; right: 0; }
.photo-lightbox-close:active { transform: scale(0.94); }
.photo-lightbox-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
}
.photo-lightbox-arrow:active { transform: translateY(-50%) scale(0.94); }
.photo-lightbox-arrow[hidden] { display: none; }
.photo-lightbox-prev { left: -64px; }
.photo-lightbox-next { right: -64px; }
.photo-lightbox-reactions { display: flex; gap: 12px; }
.photo-lightbox-react {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1);
  color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.photo-lightbox-react:hover { background: rgba(255, 255, 255, 0.2); }
.photo-lightbox-react.is-active.is-like { background: #16a34a; border-color: #16a34a; }
.photo-lightbox-react.is-active.is-dislike { background: #dc2626; border-color: #dc2626; }
@media (max-width: 640px) {
  .photo-lightbox-prev { left: 8px; }
  .photo-lightbox-next { right: 8px; }
  .photo-lightbox-close { top: 8px; right: 8px; }
}

/* Lightbox: white icons + smooth open animation */
.photo-lightbox-react-icon { display: inline-flex; color: #fff; }
.photo-lightbox-react-icon svg { display: block; }
.photo-lightbox-react-icon--down svg { transform: rotate(180deg); }
@keyframes photo-lightbox-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes photo-lightbox-zoom {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.photo-lightbox:not([hidden]):not(.is-closing) { animation: photo-lightbox-fade 0.18s ease both; }
.photo-lightbox:not([hidden]):not(.is-closing) .photo-lightbox-dialog {
  animation: photo-lightbox-zoom 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes photo-lightbox-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes photo-lightbox-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.92); }
}
.photo-lightbox.is-closing { animation: photo-lightbox-fade-out 0.2s ease both; }
.photo-lightbox.is-closing .photo-lightbox-dialog {
  animation: photo-lightbox-zoom-out 0.2s cubic-bezier(0.4, 0, 1, 1) both;
}
.photo-lightbox-image { transition: opacity 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
  .photo-lightbox,
  .photo-lightbox .photo-lightbox-dialog { animation: none !important; }
}

/* Hide the Mapbox logo on the add-place picker map only */
#placePickerMap .mapboxgl-ctrl-logo { display: none !important; }

/* ===========================================================================
   ИИ-гид — чат-ассистент на карте (ChatGPT).
   Самодостаточный блок: все правила scoped под .ai-guide, остальной интерфейс
   не затрагивается. Лаунчер живёт в правом нижнем углу карты, панель
   разворачивается у правого края поверх элементов управления картой.
   ========================================================================= */
.ai-guide { display: contents; }
.ai-guide-fab,
.ai-guide-panel { pointer-events: auto; }

.ai-guide-fab {
  position: fixed;
  right: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 44;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  font: 700 15px/1 "Manrope", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 16px 30px rgba(var(--accent-rgb), 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.ai-guide-fab:hover { transform: translateY(-2px); box-shadow: 0 20px 36px rgba(var(--accent-rgb), 0.4); }
.ai-guide-fab:active { transform: translateY(0); }
.ai-guide-fab:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.4); outline-offset: 3px; }
.ai-guide-fab-icon { display: inline-flex; width: 22px; height: 22px; }
.ai-guide-fab-icon svg { width: 100%; height: 100%; }
.ai-guide[data-open="true"] .ai-guide-fab {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

.ai-guide-panel {
  /* Fixed to the viewport (not the map shell, which sits behind the fixed
     76px site header) so the panel header / close button always clear it. */
  position: fixed;
  top: 88px;
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 45;
  width: min(380px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(35, 43, 47, 0.22);
  overflow: hidden;
  transform-origin: bottom right;
  animation: aiGuideIn 0.22s ease;
}
.ai-guide-panel[hidden] { display: none; }
@keyframes aiGuideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aiGuideOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(12px) scale(0.97); }
}
/* Smooth close: mirrors the open animation, then JS hides the panel. */
.ai-guide-panel.is-closing {
  animation: aiGuideOut 0.2s ease forwards;
  pointer-events: none;
}

.ai-guide-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--border);
}
.ai-guide-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-strong);
}
.ai-guide-header-icon svg { width: 21px; height: 21px; }
.ai-guide-heading { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.ai-guide-heading strong {
  font: 800 17px/1.1 "Sora", "Manrope", sans-serif;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ai-guide-badge {
  font: 700 9px/1 "Manrope", sans-serif;
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent-strong);
}
.ai-guide-subtitle {
  font: 500 12.5px/1.3 "Manrope", sans-serif;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-guide-close {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ai-guide-close:hover { background: rgba(35, 43, 47, 0.07); color: var(--text); }
.ai-guide-close svg { width: 18px; height: 18px; }

.ai-guide-intro {
  margin: 0;
  padding: 13px 18px 4px;
  font: 500 13px/1.45 "Manrope", sans-serif;
  color: var(--muted);
}

.ai-guide-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
}
.ai-guide-thread::-webkit-scrollbar { width: 7px; }
.ai-guide-thread::-webkit-scrollbar-thumb { background: rgba(35, 43, 47, 0.14); border-radius: 99px; }

.ai-guide-msg { display: flex; flex-direction: column; max-width: 86%; }
.ai-guide-msg-bubble {
  padding: 10px 13px;
  border-radius: 16px;
  font: 500 13.5px/1.5 "Manrope", sans-serif;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ai-guide-msg-bubble p { margin: 0 0 7px; }
.ai-guide-msg-bubble p:last-child { margin-bottom: 0; }
.ai-guide-msg-bubble ul { margin: 6px 0; padding-left: 18px; }
.ai-guide-msg-bubble li { margin: 2px 0; }
.ai-guide-msg-bubble strong { font-weight: 700; }
.ai-guide-msg-time {
  margin-top: 4px;
  font: 500 10.5px/1 "Manrope", sans-serif;
  color: var(--muted);
}
.ai-guide-msg.is-assistant { align-self: flex-start; align-items: flex-start; }
.ai-guide-msg.is-assistant .ai-guide-msg-bubble {
  background: #f3f5f4;
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.ai-guide-msg.is-user { align-self: flex-end; align-items: flex-end; }
.ai-guide-msg.is-user .ai-guide-msg-bubble {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
}

/* ===== ИИ-гид: карточки мест и маршрута в чате ===== */
.ai-guide-msg:has(.ai-guide-suggestion) { max-width: 100%; align-self: stretch; }
.ai-guide-suggestion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ai-guide-route-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(35, 43, 47, 0.09);
  box-shadow: 0 14px 30px rgba(35, 43, 47, 0.1);
}
.ai-guide-route-cover {
  height: 116px;
  background: linear-gradient(135deg, #cbe6d3, #a7d9b2) center / cover no-repeat;
}
.ai-guide-route-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 13px 14px 14px;
}
.ai-guide-route-main strong {
  font: 800 15px/1.25 "Manrope", sans-serif;
  color: var(--text);
}
.ai-guide-route-meta {
  font: 600 12.5px/1.2 "Manrope", sans-serif;
  color: var(--muted);
}
.ai-guide-route-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.ai-guide-route-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 10px 22px rgba(8, 185, 66, 0.22);
  font: 800 13.5px/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.ai-guide-route-btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
.ai-guide-route-save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.34);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent-strong);
  font: 800 13px/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.ai-guide-route-save:hover { background: rgba(var(--accent-rgb), 0.16); }
.ai-guide-route-save.is-saved {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
  cursor: default;
}
.ai-guide-route-save-icon {
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21 12 17 5 21V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ai-guide-route-btn-icon {
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ai-guide-place-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-guide-place-card {
  display: flex;
  align-items: stretch;
  gap: 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(35, 43, 47, 0.09);
  box-shadow: 0 8px 18px rgba(35, 43, 47, 0.07);
  overflow: hidden;
}
.ai-guide-place-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease;
}
.ai-guide-place-open:hover { background: rgba(var(--accent-rgb), 0.06); }
.ai-guide-place-thumb {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: linear-gradient(135deg, #cbe6d3, #a7d9b2) center / cover no-repeat;
}
.ai-guide-place-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-guide-place-text strong {
  font: 800 13.5px/1.25 "Manrope", sans-serif;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-guide-place-text span {
  font: 600 11.5px/1.2 "Manrope", sans-serif;
  color: var(--muted);
}
.ai-guide-place-route {
  flex: 0 0 auto;
  width: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid rgba(35, 43, 47, 0.08);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent-strong);
  cursor: pointer;
  transition: background 160ms ease;
}
.ai-guide-place-route:hover { background: rgba(var(--accent-rgb), 0.14); }
.ai-guide-place-route-icon {
  width: 19px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 17.5H14a3 3 0 0 0 0-6H10a3 3 0 0 1 0-6h5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.ai-guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
  max-width: 100%;
}
.ai-guide-chip {
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent-strong);
  border-radius: 999px;
  padding: 8px 13px;
  font: 600 12.5px/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ai-guide-chip:hover { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.45); }

.ai-guide-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-guide-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: aiGuideTyping 1s infinite ease-in-out;
}
.ai-guide-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-guide-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiGuideTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ai-guide-error {
  align-self: stretch;
  font: 500 12px/1.4 "Manrope", sans-serif;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
  border-radius: 12px;
  padding: 9px 12px;
}

.ai-guide-input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
}
.ai-guide-field {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 11px 16px;
  font: 500 13.5px/1.2 "Manrope", sans-serif;
  color: var(--text);
  background: #f7f8f8;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ai-guide-field:focus { border-color: rgba(var(--accent-rgb), 0.5); background: #fff; }
.ai-guide-field::placeholder { color: var(--muted); }
.ai-guide-field:disabled { opacity: 0.6; }
.ai-guide-send {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.ai-guide-send:hover { transform: scale(1.06); }
.ai-guide-send:disabled { opacity: 0.5; cursor: default; transform: none; }
.ai-guide-send svg { width: 20px; height: 20px; }
.ai-guide-random {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #f7f8f8;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.ai-guide-random:hover {
  transform: scale(1.06) rotate(-12deg);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}
.ai-guide-random:disabled { opacity: 0.5; cursor: default; transform: none; }
.ai-guide-random-icon { display: block; }

@media (prefers-reduced-motion: reduce) {
  .ai-guide-panel { animation: none; }
  .ai-guide-typing span { animation: none; }
  .ai-guide-fab { transition: none; }
}

/* Узкие экраны: панель почти на весь экран карты, у лаунчера прячем подпись */
@media (max-width: 640px) {
  .ai-guide-panel {
    width: auto;
    left: clamp(10px, 3vw, 16px);
    right: clamp(10px, 3vw, 16px);
    top: clamp(10px, 3vw, 16px);
    bottom: clamp(10px, 3vw, 16px);
  }
  .ai-guide-fab { padding: 13px; }
  .ai-guide-fab-label { display: none; }
}

/* ==================================================================
   MOBILE FOUNDATION
   App-style fixed bottom tab bar + compact header chrome for phones
   and portrait tablets (<=900px). The tab bar markup is injected by
   transitions.js on every page. Page-specific mobile layout lives in
   each page's own sections; this block is the shared shell only.
   ================================================================== */
:root {
  --mobile-tabbar-height: 60px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-tabbar-total: calc(
    var(--mobile-tabbar-height) + var(--mobile-safe-bottom)
  );
}

/* Hidden on desktop; the media query below reveals it. */
.mobile-tabbar {
  display: none;
}

@media (max-width: 900px) {
  /* ---- Bottom tab bar ------------------------------------------- */
  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: grid;
    /* Distribute the tabs evenly (the "+" FAB stays centred) but pull them in
       from the screen edges a little — neither edge-to-edge nor bunched up. */
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    height: var(--mobile-tabbar-total);
    padding-inline: clamp(14px, 7vw, 80px);
    padding-bottom: var(--mobile-safe-bottom);
    /* Let the central "+" FAB rise above the bar's top edge. */
    overflow: visible;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(16, 25, 29, 0.09);
    box-shadow: 0 -6px 24px rgba(16, 25, 29, 0.08);
  }

  .mobile-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    text-decoration: none;
    color: #6c7a7e;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }

  .mobile-tab-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
  }

  .mobile-tab-icon svg {
    width: 24px;
    height: 24px;
  }

  .mobile-tab.is-active {
    color: var(--accent, #08a13a);
  }

  .mobile-tab:active {
    transform: scale(0.94);
  }

  /* Central "Добавить" tab — a raised circular FAB. */
  .mobile-tab.mobile-tab-add {
    justify-content: flex-start;
    gap: 0;
    color: #ffffff;
  }

  .mobile-tab.mobile-tab-add:active {
    transform: none;
  }

  .mobile-tab.mobile-tab-add .mobile-tab-icon {
    width: 54px;
    height: 54px;
    margin-top: -18px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent, #08a13a), #08b942);
    box-shadow:
      0 10px 22px rgba(7, 182, 60, 0.42),
      0 2px 6px rgba(7, 182, 60, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .mobile-tab.mobile-tab-add .mobile-tab-icon svg {
    width: 26px;
    height: 26px;
  }

  .mobile-tab.mobile-tab-add:active .mobile-tab-icon {
    transform: scale(0.92);
    box-shadow: 0 6px 14px rgba(7, 182, 60, 0.4);
  }

  /* The FAB carries no visible caption — its label lives on aria-label. */
  .mobile-tab.mobile-tab-add .mobile-tab-label {
    display: none;
  }

  /* Reserve space so the fixed bar never covers page content. The map
     page is full-bleed and positions its own chrome above the bar, and the
     home page hides the bar entirely (below), so both are excluded here. */
  body:not([data-page="map"]):not([data-page="home"]) {
    padding-bottom: var(--mobile-tabbar-total);
  }

  /* The home page is a full landing with its own footer/CTAs — no bottom tab
     bar there. */
  body[data-page="home"] .mobile-tabbar {
    display: none;
  }

  /* iOS: stop auto text inflation throwing off our sizing. */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* ---- Compact header ------------------------------------------- */
  /* These nav chips/CTAs are replaced by the bottom tab bar on mobile.
     Auth-chip ids are home/map-only; the home "Открыть карту" button is
     redundant with the Карта tab. The auth pages' class-based links
     (.header-signup-button there) have no id, so they stay. */
  #userChip,
  #logoutButton,
  #loginButton,
  #signupButton,
  #addPlaceButton {
    display: none !important;
  }

  /* Single tidy row: brand on the left, remaining chip(s) on the right.
     Overrides the older ≤640px rules that stacked the brand full-width. */
  .site-header {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }

  .site-header .brand,
  .site-header .brand-wordmark {
    width: auto;
    flex: 0 0 auto;
    font-size: 1.7rem;
  }

  .header-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: auto;
    flex: 0 1 auto;
  }

  /* Lift the floating AI-guide launcher above the tab bar. */
  .ai-guide-fab {
    bottom: calc(var(--mobile-tabbar-total) + 14px);
  }

  /* When the assistant is open it should sit above the tab bar. */
  .ai-guide-panel {
    z-index: 320;
  }
}

/* Phones: tighten the tab bar labels a touch so four fit comfortably. */
@media (max-width: 380px) {
  .mobile-tab {
    font-size: 0.6rem;
  }
}

/* Per-page header overrides — matched to each page's bespoke selectors so
   they win over the older per-page mobile rules (same specificity, later in
   the file). The home header is an absolute overlay that previously stacked
   into a tall column; with the nav chips gone it can be a compact row. */
@media (max-width: 640px) {
  body[data-page="home"] .site-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 8px;
    padding-top: 14px;
  }

  /* Keep the city label whole next to the logo; the login/register cluster
     wraps to its own line (pushed right by header-actions' margin-left:auto). */
  body[data-page="home"] .header-chip-location {
    flex: 0 0 auto;
  }

  body[data-page="home"] .brand-wordmark {
    font-size: 1.6rem;
  }
}

/* Auth header (login/register): keep the two links on one compact row
   instead of stacking them full-width into a tall column. */
@media (max-width: 900px) {
  .site-header.auth-header .header-actions {
    flex-wrap: nowrap;
    width: auto;
    gap: 8px;
  }

  .site-header.auth-header .header-actions > a {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
  }

  /* "На главную" is redundant on mobile — the brand and the Home tab both
     go home. Keep only the login/register switch link. */
  .site-header.auth-header .header-actions > a[href="/"] {
    display: none;
  }
}

/* Place page header: compact single row (brand + city + notifications).
   The "Карта" link is redundant with the tab bar and the in-page back link. */
@media (max-width: 900px) {
  body[data-page="place"] .site-header {
    flex-wrap: nowrap;
    height: auto;
    min-height: 58px;
    padding: 8px 14px;
    gap: 10px;
    align-items: center;
  }

  body[data-page="place"] .brand-wordmark {
    flex: 0 0 auto;
  }

  body[data-page="place"] .header-actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px;
  }

  body[data-page="place"] .place-header-map-link {
    display: none;
  }

  body[data-page="place"] .header-chip-location {
    margin: 0 !important;
  }
}

/* City picker dropdown: anchored left:0 to its button it runs off-screen on
   mobile (especially when the button is right-aligned). Pin it as a
   viewport-width panel just below the header instead. */
@media (max-width: 900px) {
  .header-city-picker {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 66px);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    z-index: 120;
    transform-origin: top center;
  }
}

/* ==================================================================
   MAP — MOBILE: full-screen map + draggable bottom sheet
   Replaces the older ≤900px left-panel layout. Placed at the end of
   the file so it wins the cascade; !important is used only where the
   existing mobile map rules also use it. Drag/handle is wired up in
   cityhop-main.js.
   ================================================================== */
@media (max-width: 900px) {
  body[data-page="map"] {
    overflow: hidden !important;
    height: 100dvh;
  }

  /* Full-bleed shell: the map fills the whole viewport behind the chrome. */
  body[data-page="map"] .landing-shell.map-page-shell,
  body[data-page="map"] .map-stage,
  body[data-page="map"] .map-card,
  body[data-page="map"] .map-card-experience,
  body[data-page="map"] .map-shell,
  body[data-page="map"] .map-shell-experience {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  body[data-page="map"] .map-shell-experience {
    height: 100dvh !important;
    min-height: 100dvh !important;
    /* The shell's white background must not show through while/around the map
       canvas — the map itself is the backdrop on mobile. */
    background: transparent !important;
    --map-surface-top: 0px;
  }

  body[data-page="map"] #map {
    inset: 0 !important;
    z-index: 1 !important;
    /* The desktop rule clips the map's left edge by the panel width; on mobile
       the map is full-screen, so drop the clip entirely. */
    clip-path: none !important;
  }

  body[data-page="map"] .map-backdrop {
    background: #e9efec !important;
  }

  /* Remove the white panel overlay strip that dimmed the left side, and the
     desktop corner-mask (::before) that rounds the map's inner corner against
     the side panel — on mobile there's no side panel, so it just leaves a
     stray rounded white/green corner floating over the map. */
  body[data-page="map"] .map-shell-experience::after,
  body[data-page="map"] .map-shell-experience::before {
    content: none !important;
  }

  /* ---- Slim floating search bar over the map ---- */
  body[data-page="map"] .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: auto;
    min-height: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
    background: transparent;
  }
  body[data-page="map"] .site-header::before {
    content: none;
  }
  /* Logo on the left of the header (green wordmark). */
  body[data-page="map"] .brand-wordmark {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 1.3rem;
  }
  /* Header actions (the city picker) shrink to content and sit at the right. */
  body[data-page="map"] .header-actions {
    width: auto;
    margin-left: auto;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  body[data-page="map"] .map-search-box {
    position: relative !important;
    order: 0 !important;
    flex: 1 1 auto;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  body[data-page="map"] .header-city-picker-anchor,
  body[data-page="map"] .header-chip-location {
    flex: 0 0 auto;
    /* Только левый отступ: правый оставляем свободным, иначе margin-right:auto
       из общего блока шапки не сможет прижать город к логотипу. */
    margin-left: 0 !important;
  }

  /* Hide the desktop side rail; search lives in the header, categories/
     filters live in the sheet. */
  body[data-page="map"] .map-side-rail {
    display: none !important;
  }

  /* ---- Map controls: zoom (+/-) centered on the right edge; the locate
     button sits in the lower-right, just above the bottom-sheet peek
     (PEEK_VISIBLE = 152px in cityhop-main.js) so the sheet never covers it
     and it stays clear of the AI-guide launcher below. ---- */
  body[data-page="map"] .map-zoom-stack {
    top: 50% !important;
    bottom: auto !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
  }
  body[data-page="map"] .map-control-stack {
    top: auto !important;
    bottom: calc(
      var(--mobile-tabbar-total) + var(--map-sheet-peek, 104px) + 76px
    ) !important;
    right: 12px !important;
  }

  /* ================= BOTTOM SHEET ================= */
  body[data-page="map"] .map-left-panel {
    position: fixed !important;
    inset: auto 0 var(--mobile-tabbar-total) 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(100dvh - var(--mobile-tabbar-total) - 64px) !important;
    z-index: 180;
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(16, 25, 29, 0.18);
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(var(--map-sheet-ty, calc(100% - var(--map-sheet-peek, 104px))));
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
  }
  body[data-page="map"] .map-left-panel.is-dragging {
    transition: none;
  }

  /* Drag handle (injected by cityhop-main.js) */
  body[data-page="map"] .map-sheet-handle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    cursor: grab;
    touch-action: none;
  }
  body[data-page="map"] .map-sheet-handle::before {
    content: "";
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: rgba(16, 25, 29, 0.28);
  }
  /* Dark theme: the sheet is dark, so the grabber must be a light pill to show. */
  :root[data-theme="dark"] body[data-page="map"] .map-sheet-handle::before {
    background: rgba(255, 255, 255, 0.35);
  }

  /* Scrollable content inside the sheet — hide its scrollbar (the page should
     not show a scroll strip). */
  body[data-page="map"] .map-panel-switcher {
    position: static !important;
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 18px;
    width: auto !important;
    margin-left: 0 !important;
    scrollbar-width: none;
  }
  body[data-page="map"] .map-panel-switcher::-webkit-scrollbar {
    display: none;
  }

  /* The bottom sheet must be able to cover the AI-guide launcher. The FAB lives
     in the body root (z 44) while the sheet (z 180) is trapped inside
     .landing-shell's z-index:1 stacking context, so the FAB paints on top.
     Dissolving that context on mobile lets the sheet's z-index win directly
     (the chat panel z 320 still beats the tab bar z 200, so nothing else moves). */
  body[data-page="map"] .map-page-shell {
    z-index: auto;
  }
  body[data-page="map"] .map-shell-experience:not(.is-panel-hidden) .map-panel-switcher {
    width: auto !important;
    margin-left: 0 !important;
  }
  body[data-page="map"] .map-overview-stack,
  body[data-page="map"] .map-results-stack {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }
  /* Only the active stack takes layout space. */
  body[data-page="map"] .map-shell-experience.has-results-view .map-overview-stack {
    display: none !important;
  }
  body[data-page="map"] .map-shell-experience:not(.has-results-view) .map-results-stack {
    display: none !important;
  }
  body[data-page="map"] .map-results-card {
    height: auto !important;
  }

  /* Tapping a map point opens the FULL place page in the sheet (mobile), via an
     embedded iframe. It replaces the overview/results stacks and fills the
     sheet, which rises to full (JS). */
  body[data-page="map"] .map-sheet-place {
    display: none;
  }
  body[data-page="map"] .map-shell-experience.has-sheet-place .map-overview-stack,
  body[data-page="map"] .map-shell-experience.has-sheet-place .map-results-stack {
    display: none !important;
  }

  /* Панель маршрута внутри нижней шторки (JS переносит её в .map-panel-switcher).
     Она перестаёт быть плавающей карточкой: ни своего фона, ни тени, ни
     позиционирования — просто содержимое шторки. Селектор с прямым потомком,
     чтобы правило не задевало десктопную панель в .map-shell. */
  body[data-page="map"] .map-shell-experience.has-sheet-route .map-overview-stack,
  body[data-page="map"] .map-shell-experience.has-sheet-route .map-results-stack {
    display: none !important;
  }

  body[data-page="map"] .map-panel-switcher > .map-route-panel {
    position: static;
    inset: auto;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 2px 0 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
  }

  /* Обводка «выберите точку на карте» на прозрачном фоне выглядела бы рамкой
     вокруг всей шторки — подсвечиваем только точку старта. */
  body[data-page="map"] .map-panel-switcher > .map-route-panel.is-picking {
    box-shadow: none;
  }
  body[data-page="map"] .map-shell-experience.has-sheet-place .map-panel-switcher {
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body[data-page="map"] .map-shell-experience.has-sheet-place .map-sheet-place {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  body[data-page="map"] .map-sheet-place-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 2px 12px 8px;
  }
  body[data-page="map"] .map-sheet-place-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    background: rgba(16, 25, 29, 0.06);
    border-radius: 999px;
    padding: 8px 14px 8px 10px;
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--map-ref-ink, #11191d);
    cursor: pointer;
  }
  body[data-page="map"] .map-sheet-place-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    min-height: 0;
    background: #fff;
  }

  /* ---- Search + notification bell relocated into a row at the top of the
     sheet (2GIS-style bottom search). The row (built in JS under the drag
     handle) is the sheet's fixed header and stays visible at peek. ---- */
  body[data-page="map"] .map-sheet-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 2px 16px 12px;
  }
  body[data-page="map"] .map-sheet-search-row .map-search-box {
    position: relative !important;
    order: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 2;
  }
  body[data-page="map"] .map-sheet-search-row .map-search-field {
    width: 100%;
    height: 50px;
    box-shadow: 0 2px 12px rgba(16, 25, 29, 0.07);
  }
  /* Bell to the right of the field, styled to match it. */
  body[data-page="map"] .map-sheet-search-row .header-notification-shell {
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
  }
  body[data-page="map"] .map-sheet-search-row .header-notification-button {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 16px;
    background: #f6f7f7;
    border: 1px solid rgba(16, 25, 29, 0.04);
    box-shadow: 0 2px 12px rgba(16, 25, 29, 0.07);
    color: var(--text);
    /* Smaller bell glyph inside the button. */
    --map-header-icon-size: 16px;
  }
  /* Suggestions drop just below the field, within the (expanded) sheet. */
  body[data-page="map"] .map-sheet-search-row .map-search-results {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: calc(100% + 6px);
    max-height: 52vh;
    overflow-y: auto;
  }
  /* Notification dropdown anchors to the bell; the bell click expands the sheet
     to full (JS) so it isn't clipped by the sheet's overflow/transform. */
  body[data-page="map"] .map-sheet-search-row .header-notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: auto;
    right: 0;
    width: min(340px, calc(100vw - 32px));
    transform: translateY(-6px) scale(0.98);
  }
  body[data-page="map"] .map-sheet-search-row .header-notification-dropdown.is-visible {
    transform: translateY(0) scale(1);
  }

  /* Header: logo on the left, city picker pushed to the right. */
  body[data-page="map"] .header-actions {
    justify-content: flex-end;
  }

  /* On mobile the AI assistant lives on the bottom tab bar, so its FAB is
     replaced here by a "reset to north" control in the same bottom-right spot
     (just above the sheet's search bar / peek). */
  body[data-page="map"] .ai-guide-fab {
    display: none !important;
  }
  body[data-page="map"] .map-north-button {
    display: grid;
    place-items: center;
    position: fixed;
    right: 16px;
    bottom: calc(
      var(--mobile-tabbar-total) + var(--map-sheet-peek, 104px) + 14px
    );
    width: 50px;
    height: 50px;
    z-index: 16;
  }
}

/* ==================================================================
   Map left-panel collapse / show controls (tablet + desktop, >900px).
   Rebuilt: positioned purely from the shell's own CSS variables
   (--map-panel-shell-width = panel right edge; --map-surface-top =
   panel top), so there is no JS layout maths. Hidden on phones, where
   the draggable bottom sheet handles hide/show instead.
   ================================================================== */
.map-panel-collapse,
.map-panel-show {
  display: none;
}

@media (min-width: 901px) {
  /* Collapse arrow: a bold bare chevron on the panel's right edge, at the
     panel's vertical centre. left = panel right edge minus a small inset (so
     it sits ON the panel); top = midpoint between the panel's top and the
     shell bottom. */
  body[data-page="map"] .map-panel-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc((var(--map-surface-top, 76px) + 100%) / 2);
    left: calc(var(--map-panel-shell-width, 454px) - 16px);
    transform: translate(-50%, -50%);
    /* Above the panel (z-index 10) so the chips never paint over the arrow. */
    z-index: 30;
    width: 30px;
    height: 50px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #0d1418;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.95));
    transition: color 0.15s ease, transform 0.15s ease;
  }

  body[data-page="map"] .map-panel-collapse svg {
    width: 26px;
    height: 26px;
  }

  body[data-page="map"] .map-panel-collapse:hover {
    color: #009b36;
    transform: translate(-50%, -50%) translateX(-2px);
  }

  /* Collapsed: the panel slides out and its arrow goes with it. */
  body[data-page="map"] .map-shell-experience.is-panel-hidden .map-panel-collapse {
    display: none;
  }

  /* Full-screen map with the panel as a floating overlay that carries its OWN
     white background. There is NO separate ::after overlay strip to manage, so
     collapsing the panel can never leave a white band masking the map — the
     white slides away with the panel. */
  body[data-page="map"] .map-shell-experience::after {
    content: none !important;
  }

  /* Map is full-width at all times (the clip that windowed it to the right of
     the panel is dropped below). The panel floats on top with an opaque white
     background, so it visually covers the map's left when shown and slides
     smoothly away to reveal the already-rendered map when collapsed. */
  body[data-page="map"] #map {
    clip-path: none !important;
  }

  body[data-page="map"] .map-left-panel {
    background: #ffffff;
    box-shadow: 18px 0 44px rgba(35, 43, 47, 0.12);
    transition:
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease;
  }

  /* Smooth slide out (and back in) — both directions animate via this rule. */
  body[data-page="map"] .map-shell-experience.is-panel-hidden .map-left-panel {
    transform: translateX(calc(-100% - 40px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* The rounded inner-corner mask (::before) sits on the panel's top-right
     corner, so it must travel with the panel when it collapses — otherwise it
     stays stranded mid-map. Slide it by the panel's full travel (its right edge
     moves by -(panel width + 40px) = -(--map-panel-shell-width + 40px)) with the
     same easing, so the two move as one. */
  body[data-page="map"] .map-shell-experience::before {
    transition:
      transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease;
  }
  body[data-page="map"] .map-shell-experience.is-panel-hidden::before {
    transform: translateX(calc(var(--map-panel-shell-width) * -1 - 40px));
    opacity: 0;
  }

  /* Reopen tab: a white label on the left edge so the chevron stands out
     against the map (the collapse arrow sits on the white panel, so that one
     stays bare). Shown only while collapsed. */
  body[data-page="map"] .map-panel-show {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc((var(--map-surface-top, 76px) + 100%) / 2);
    left: 0;
    transform: translateY(-50%);
    z-index: 30;
    width: 34px;
    height: 66px;
    padding: 0;
    border: 0;
    border-radius: 0 16px 16px 0;
    background: #ffffff;
    box-shadow: 4px 0 18px rgba(16, 25, 29, 0.2);
    color: #0d1418;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  body[data-page="map"] .map-panel-show svg {
    width: 24px;
    height: 24px;
  }

  body[data-page="map"] .map-panel-show:hover {
    background: #f3f7f4;
    color: #009b36;
  }

  body[data-page="map"] .map-shell-experience.is-panel-hidden .map-panel-show {
    display: inline-flex;
  }
}

/* ===========================================================================
   ТЁМНАЯ ТЕМА — глубокая изумрудно-графитовая палитра. Переопределяем токены,
   затем непрозрачные светлые поверхности. data-theme="dark" живёт на <html>.
   ========================================================================= */
:root[data-theme="dark"] {
  --bg: #0e1311;
  --surface: #171e1a;
  --surface-strong: rgba(31, 200, 80, 0.96);
  --panel: #161d19;
  --panel-soft: #121815;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(40, 200, 90, 0.36);
  --shadow: 0 30px 80px rgba(0, 0, 0, 0.62);
  --shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.5);
  --text: #e9efe9;
  --muted: #9aa8a1;
  --accent: #1fc850;
  --accent-strong: #18b446;
  --accent-soft: #36da6a;
  --accent-light: rgba(40, 200, 90, 0.13);
  --accent-rgb: 31, 200, 80;
  color-scheme: dark;
}

/* Smooth the flip and keep base surfaces dark. */
:root[data-theme="dark"],
:root[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}
:root[data-theme="dark"] body {
  transition: background-color 240ms ease, color 240ms ease;
}

/* Per-page token remaps (ink/muted/border/shadows -> dark surfaces). */
:root[data-theme="dark"] body[data-page="home"] {
  --home-ink: #e9efe9;
  --home-muted: #9aa8a1;
  --home-line: rgba(255, 255, 255, 0.09);
  --home-card: #171e1a;
  --home-green-soft: rgba(40, 200, 90, 0.16);
}
:root[data-theme="dark"] body[data-page="map"] {
  --map-ref-ink: #e9efe9;
  --map-ref-muted: #9aa8a1;
  --map-ref-border: rgba(255, 255, 255, 0.1);
  --map-ref-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  --map-ref-soft-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] body[data-page="place"] {
  --place-ref-ink: #e9efe9;
  --place-ref-muted: #9aa8a1;
  --place-ref-border: rgba(255, 255, 255, 0.1);
  --place-ref-card-shadow: 0 22px 56px rgba(0, 0, 0, 0.55);
}

/* ---- Theme toggle button (injected into every header) ---- */
/* Theme toggle mirrors the notification bell: a transparent round icon button
   with a white icon (dark icon only on light-mode light headers). */
.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.theme-toggle:hover {
  transform: translateY(-1px);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
}
.theme-toggle-icon {
  display: grid;
  place-items: center;
}
/* Light-header pages in LIGHT mode -> dark icon. */
body[data-page="map"] .theme-toggle,
body[data-page="place"] .theme-toggle,
body[data-page="profile"] .theme-toggle,
body[data-page="admin"] .theme-toggle,
body[data-page="moderation"] .theme-toggle,
body[data-page="add-place"] .theme-toggle,
body[data-page="404"] .theme-toggle {
  color: var(--map-ref-ink, #10191d);
}
/* Match the 42px bell/logout box on the profile-style headers so the spacing
   between every header icon (map / theme / bell / logout) is uniform. */
body[data-page="profile"] .theme-toggle,
body[data-page="admin"] .theme-toggle,
body[data-page="add-place"] .theme-toggle {
  width: 42px;
  height: 42px;
}
/* Dark mode: white icon on every page. */
:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] body[data-page="map"] .theme-toggle,
:root[data-theme="dark"] body[data-page="place"] .theme-toggle,
:root[data-theme="dark"] body[data-page="profile"] .theme-toggle,
:root[data-theme="dark"] body[data-page="admin"] .theme-toggle,
:root[data-theme="dark"] body[data-page="moderation"] .theme-toggle,
:root[data-theme="dark"] body[data-page="add-place"] .theme-toggle,
:root[data-theme="dark"] body[data-page="404"] .theme-toggle {
  color: #ffffff;
}
.theme-toggle-sun { display: none; }
.theme-toggle-moon { display: grid; }
:root[data-theme="dark"] .theme-toggle-sun { display: grid; }
:root[data-theme="dark"] .theme-toggle-moon { display: none; }

/* ---- Generic surfaces: opaque white cards/panels/inputs -> dark ---- */
:root[data-theme="dark"] .search-field,
:root[data-theme="dark"] .map-search-field,
:root[data-theme="dark"] .map-search-results,
:root[data-theme="dark"] .map-search-meta,
:root[data-theme="dark"] .map-route-search,
:root[data-theme="dark"] .map-route-origin-editor,
:root[data-theme="dark"] .map-route-origin-result,
:root[data-theme="dark"] .map-route-panel,
:root[data-theme="dark"] .map-route-search-result,
:root[data-theme="dark"] .mapboxgl-popup-content,
:root[data-theme="dark"] .map-control-button,
:root[data-theme="dark"] .map-left-panel,
:root[data-theme="dark"] .map-city-card,
:root[data-theme="dark"] .map-nearby-card,
:root[data-theme="dark"] .map-nearby-place,
:root[data-theme="dark"] .map-visited-panel,
:root[data-theme="dark"] .results-card,
:root[data-theme="dark"] .results-filters-popover,
:root[data-theme="dark"] .place-card,
:root[data-theme="dark"] .ai-guide-panel,
:root[data-theme="dark"] .ai-guide-place-card,
:root[data-theme="dark"] .ai-guide-route-card,
:root[data-theme="dark"] .ai-guide-place-open,
:root[data-theme="dark"] .map-rail-link,
:root[data-theme="dark"] .map-shortcut {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Inputs read a touch lighter than their card, with a soft border. */
:root[data-theme="dark"] .search-field,
:root[data-theme="dark"] .map-search-field,
:root[data-theme="dark"] .map-route-search,
:root[data-theme="dark"] .header-city-picker-field input,
:root[data-theme="dark"] .ai-guide-field,
:root[data-theme="dark"] .map-route-origin-toggle {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  /* Drop the light-theme top "gloss" (inset white highlight) — on dark it reads
     as a harsh white line across the top of the field. */
  box-shadow: none;
}
:root[data-theme="dark"] .ai-guide-random {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
:root[data-theme="dark"] .ai-guide-random:hover {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.5);
}
:root[data-theme="dark"] .header-city-picker-field input:focus,
:root[data-theme="dark"] .ai-guide-field:focus {
  background: rgba(255, 255, 255, 0.08);
}

/* Map popup card + tip. */
:root[data-theme="dark"] .mapboxgl-popup-content {
  background: rgba(23, 30, 26, 0.97);
}
:root[data-theme="dark"] .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: rgba(23, 30, 26, 0.97) !important;
}
:root[data-theme="dark"] .popup-card,
:root[data-theme="dark"] .popup-card-place {
  background: transparent;
  color: var(--text);
}
:root[data-theme="dark"] .popup-card-body {
  color: var(--text);
}

/* Map zoom/control buttons + rail toggle. Keep them dark, but tidy: a crisp
   hairline edge and a softer, less heavy shadow so they read as clean
   elevated controls on the light map. */
:root[data-theme="dark"] .map-control-button {
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}
:root[data-theme="dark"] .map-control-button:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
:root[data-theme="dark"] .map-side-rail {
  background: rgba(20, 26, 23, 0.78);
}

/* Mobile bottom tab bar. */
:root[data-theme="dark"] .mobile-tabbar {
  background: rgba(16, 21, 19, 0.94);
  border-top-color: var(--border);
}

/* ---- Home page ---- */
:root[data-theme="dark"] body[data-page="home"] {
  background: #0c1210;
}
/* Keep the original photo hero in dark mode (it already has dark overlays).
   Only blend the bottom curve into the dark page below. */
:root[data-theme="dark"] body[data-page="home"] .home-hero::after {
  background: #0c1210;
  box-shadow: 0 -18px 45px rgba(0, 0, 0, 0.4);
}
:root[data-theme="dark"] .home-picks-panel,
:root[data-theme="dark"] .home-picks-main-button,
:root[data-theme="dark"] .home-picks-place-card,
:root[data-theme="dark"] .home-place-card,
:root[data-theme="dark"] .home-live-card,
:root[data-theme="dark"] .home-map-preview,
:root[data-theme="dark"] .home-map-panel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* The picks section is a HUGE container panel (white card in light theme).
   At surface colour it reads as a big grey block lighter than the page, so
   blend it with the page background and keep only a subtle frame. The small
   cards inside it (place card, category chips) keep their surface colour. */
:root[data-theme="dark"] body[data-page="home"] .home-picks-panel {
  background: var(--bg);
  border-color: var(--border);
}
:root[data-theme="dark"] .home-footer {
  color: rgba(233, 239, 233, 0.66);
  border-top-color: var(--border);
}
:root[data-theme="dark"] body[data-page="home"] .chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

/* ---- Place page ---- */
:root[data-theme="dark"] body[data-page="place"] {
  background:
    radial-gradient(circle at 80% 8%, rgba(40, 200, 90, 0.08), transparent 26%),
    #0e1311;
}
:root[data-theme="dark"] body[data-page="place"] .site-header {
  /* Blend the header into the page — no lighter band / shadow "block" behind the
     nav (the header is in normal flow, so it needs no distinct background). */
  background: transparent;
  box-shadow: none;
}
:root[data-theme="dark"] body[data-page="place"] .place-detail-card,
:root[data-theme="dark"] body[data-page="place"] .place-comments-composer-card,
:root[data-theme="dark"] body[data-page="place"] .place-comments-list-card,
:root[data-theme="dark"] body[data-page="place"] .place-detail-info-card,
:root[data-theme="dark"] body[data-page="place"] .place-comment-textarea,
:root[data-theme="dark"] body[data-page="place"] .place-comment-upload-tile,
:root[data-theme="dark"] body[data-page="place"] .place-info-box {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] body[data-page="place"] .place-header-map-link,
:root[data-theme="dark"] body[data-page="place"] .place-share-button,
:root[data-theme="dark"] body[data-page="place"] .place-page-back {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
:root[data-theme="dark"] body[data-page="place"] .place-detail-card .popup-card-arrow,
:root[data-theme="dark"] body[data-page="place"] .popup-card-photo-rating {
  background: rgba(18, 24, 21, 0.92);
  color: var(--text);
}

/* Custom scrollbars in dark. */
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
}

/* ---- Home page: remaining opaque-white showcase components ---- */
:root[data-theme="dark"] .home-community-card,
:root[data-theme="dark"] .home-community-map-card,
:root[data-theme="dark"] .home-place-card,
:root[data-theme="dark"] .home-section-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* The phone mockup is a self-contained device UI (dark map + white sheet) that
   looks the same in both site themes, so it needs no dark-theme override. */
:root[data-theme="dark"] .home-outline-button,
:root[data-theme="dark"] .home-carousel-arrow,
:root[data-theme="dark"] .secondary-button:not(.hero-how-button) {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .home-carousel-arrow {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
/* Light-tinted badges/chips inside cards. */
:root[data-theme="dark"] .is-red {
  background: rgba(220, 70, 60, 0.2);
  color: #ffb4ad;
}

/* Home "community map" illustration: the floating info panel + its arrow were
   left opaque-white, and the place-card meta pill / red status badge stayed
   light-grey/pink on the now-dark cards. */
:root[data-theme="dark"] body[data-page="home"] .home-community-map-panel {
  background: rgba(23, 30, 26, 0.94);
  box-shadow: 0 22px 42px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] body[data-page="home"] .home-community-map-arrow {
  background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] body[data-page="home"] .home-community-map-arrow svg {
  stroke: var(--text);
}
/* Soften the decorative white grid lines drawn over the (now dark) fake map. */
:root[data-theme="dark"] body[data-page="home"] .home-community-map-card::before {
  opacity: 0.12;
}
:root[data-theme="dark"] body[data-page="home"] .home-place-card small {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}
:root[data-theme="dark"] body[data-page="home"] .home-place-card em.is-red {
  background: rgba(220, 70, 60, 0.22);
  color: #ffb4ad;
}

/* Logo: white in dark mode on every page. */
:root[data-theme="dark"] .brand-logo {
  filter: brightness(0) invert(1);
}

/* ---- Map page: remaining light surfaces ---- */
:root[data-theme="dark"] body[data-page="map"] .site-header {
  background: rgba(18, 24, 21, 0.9);
}
/* Left-panel collapse chevron: white (was a dark chevron + white glow = muddy). */
:root[data-theme="dark"] body[data-page="map"] .map-panel-collapse {
  color: #ffffff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}
:root[data-theme="dark"] body[data-page="map"] .map-shell,
:root[data-theme="dark"] body[data-page="map"] .map-shell-experience {
  background: var(--bg);
}
/* .map-backdrop has a light !important rule in a media query — override it. */
:root[data-theme="dark"] body[data-page="map"] .map-backdrop {
  background: var(--bg) !important;
}
/* Map popup carousel gallery fallback bg. */
:root[data-theme="dark"] .popup-card-gallery,
:root[data-theme="dark"] .popup-card-carousel {
  background: rgba(255, 255, 255, 0.03);
}
/* Search field — darker so it doesn't stand out from the dark theme. */
:root[data-theme="dark"] .map-search-field {
  background: rgba(15, 20, 18, 0.92);
  border-color: var(--border);
}
/* White rail/control buttons (the "white corner"), panel-show and filter. */
:root[data-theme="dark"] .map-rail-toggle,
:root[data-theme="dark"] .map-rail-back,
:root[data-theme="dark"] .map-panel-show,
:root[data-theme="dark"] .results-filter-button {
  background: rgba(22, 29, 25, 0.94);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .map-rail-toggle:hover,
:root[data-theme="dark"] .map-rail-back:hover,
:root[data-theme="dark"] .map-panel-show:hover {
  background: rgba(30, 38, 33, 0.96);
}
:root[data-theme="dark"] .map-visited-progress {
  background: rgba(255, 255, 255, 0.1);
}
:root[data-theme="dark"] .map-legend {
  background: rgba(20, 26, 23, 0.94);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .map-legend article,
:root[data-theme="dark"] .map-legend p {
  color: var(--text);
}
/* Keep the "Предложить место" card button white (dark text + dark plus icon),
   identical to the light theme, instead of the translucent dark fill. */
:root[data-theme="dark"] .map-city-action-secondary {
  background: rgba(255, 255, 255, 0.96);
  border-color: transparent;
  color: #10191d;
}
/* Only .place-time-card is a real card. .place-time and .popup-card-meta-row are
   transparent layout rows (icon + text); giving them a fill paints a stray grey
   pill behind "12 км от вас" / "Лучше вечером" on the dark popup. */
:root[data-theme="dark"] .place-time-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}
/* Map results: de-boxed schedule — flat, just a hairline separator (dark). */
:root[data-theme="dark"] .map-results-card .place-time-card {
  background: none;
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* Dark, minimalist "Назад" pill. The light `body[data-page="map"] .map-rail-back`
   rule out-specifies the generic dark override, so scope this the same way. */
:root[data-theme="dark"] body[data-page="map"] .map-rail-back:not([hidden]) {
  background: transparent;
  border: 0;
  color: var(--text);
  box-shadow: none;
}
:root[data-theme="dark"] body[data-page="map"] .map-rail-back:not([hidden]):hover {
  background: transparent;
}
/* On the map page the rail only holds the "Назад" pill (toggle/links are hidden),
   so its dark fill just reads as a stray rectangle behind the button. Drop it. */
:root[data-theme="dark"] body[data-page="map"] .map-side-rail {
  background: transparent;
}
/* Kill the light top-gloss (inset white line) on the filter button + count pill. */
:root[data-theme="dark"] .map-results-card .results-filter-button,
:root[data-theme="dark"] .map-results-card .results-count {
  box-shadow: none;
}
:root[data-theme="dark"] .mapboxgl-ctrl-attrib {
  background: rgba(18, 24, 21, 0.7) !important;
}
:root[data-theme="dark"] .mapboxgl-ctrl-attrib a {
  color: var(--muted) !important;
}
/* Results list cards + nearby place card. */
:root[data-theme="dark"] .map-nearby-place,
:root[data-theme="dark"] .places-list .place-card,
:root[data-theme="dark"] .map-visited-list > * {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
}
/* The empty-state hint is a direct child of the list, but it must not get the
   card chip background — keep it flush with the panel. */
:root[data-theme="dark"] .map-visited-list > .map-visited-empty {
  background: transparent;
  border-color: transparent;
}

/* ---- Place page: comments + gallery ---- */
:root[data-theme="dark"] body[data-page="place"] .place-comment-card,
:root[data-theme="dark"] body[data-page="place"] .place-comments-average {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
  /* Drop the light-theme top gloss — on dark it's a white line over the badge. */
  box-shadow: none;
}
:root[data-theme="dark"] body[data-page="place"] .popup-card-gallery {
  background: rgba(255, 255, 255, 0.03);
}

/* =========================================================================
   Dark theme — remaining light surfaces found in the site-wide sweep.
   These are modals, dropdowns, popovers and panels that render only when
   triggered (so an idle page scan misses them), plus a few page-scoped
   base rules whose specificity beat the generic dark overrides.
   ========================================================================= */

/* App-wide modal dialogs (confirm + report). */
:root[data-theme="dark"] .cityhop-confirm-card,
:root[data-theme="dark"] .place-report-dialog {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

/* Header buttons ("На главную", "Профиль" chip) carried a grey fill tuned for
   the light/photo header — on the dark theme it reads as a light-grey pill.
   Drop the fill; keep a subtle border for definition + a faint hover. (The
   icon-only login/logout chips are already transparent via their #id rules.) */
:root[data-theme="dark"] .header-chip-auth {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
:root[data-theme="dark"] .header-chip-auth:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.24);
}
/* The user/profile chip is icon (+name) only — it should never show a pill.
   Keep it fully transparent, borderless and without a hover fill on every
   dark-theme page (home, profile, …). */
:root[data-theme="dark"] .header-chip-user,
:root[data-theme="dark"] .header-chip-user:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Header popovers (city picker + notifications), present on every page. */
:root[data-theme="dark"] .header-city-picker,
:root[data-theme="dark"] .header-notification-dropdown {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* City-picker internals: tinted chips, suggestions and the close/auto buttons
   were all light-green/near-white fills — make them dark translucent pills. */
:root[data-theme="dark"] .header-city-picker-close,
:root[data-theme="dark"] .header-city-picker-auto {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
:root[data-theme="dark"] .header-city-picker-close:hover,
:root[data-theme="dark"] .header-city-picker-auto:hover {
  background: rgba(255, 255, 255, 0.12);
}
:root[data-theme="dark"] .header-city-picker-city,
:root[data-theme="dark"] .header-city-picker-suggestion {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .header-notification-item,
:root[data-theme="dark"] .header-notification-empty {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text);
}

/* Map results panel + the place popup card, its tip, and the corner mask. */
:root[data-theme="dark"] .map-results-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] body[data-page="map"] .cityhop-fixed-popup .mapboxgl-popup-content {
  background: rgba(23, 30, 26, 0.97);
  color: var(--text);
}
:root[data-theme="dark"] body[data-page="map"] .cityhop-fixed-popup::after {
  background: rgba(23, 30, 26, 0.97);
}
:root[data-theme="dark"] body[data-page="map"] .map-shell-experience::before {
  background: radial-gradient(
    circle at 100% 100%,
    transparent 0 calc(var(--map-visible-corner-radius) - 1px),
    var(--bg) var(--map-visible-corner-radius)
  );
}
:root[data-theme="dark"] body[data-page="map"] .map-sheet-search-row .header-notification-button {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

/* Route editor controls inside the (dark) route panel. */
:root[data-theme="dark"] .map-route-mode.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
:root[data-theme="dark"] .map-route-quick {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

/* Map provider fallback message + results-count pill. */
:root[data-theme="dark"] .map-provider-message {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .results-count {
  background: rgba(var(--accent-rgb), 0.18);
}

/* Report-place dialog contents. */
:root[data-theme="dark"] .place-report-option {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}
:root[data-theme="dark"] .place-report-details textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}

/* Place page: loading/error card, empty comments, comment media, edit button. */
:root[data-theme="dark"] .place-page-loading,
:root[data-theme="dark"] .place-page-error {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .place-comments-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] .place-comment-media {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
}
:root[data-theme="dark"] .popup-card-edit-button,
:root[data-theme="dark"] body[data-page="place"] .popup-card-edit-button {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--text);
}

/* AI-guide assistant chat bubbles. */
:root[data-theme="dark"] .ai-guide-msg.is-assistant .ai-guide-msg-bubble {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

/* Home page: category band + remaining showcase cards + fanned card. */
:root[data-theme="dark"] body[data-page="home"] .home-category-band {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.4);
}
/* In the "Выберите настроение" picks slot the chip band must be transparent —
   no light-grey panel behind the category chips. */
:root[data-theme="dark"] body[data-page="home"] .home-picks-category-slot .home-category-band {
  background: transparent;
  box-shadow: none;
}
:root[data-theme="dark"] .fan-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* .home-community-board is a WRAPPER holding the community cards in columns;
   at surface colour it merges with those cards into one big grey block. Blend
   it with the page so the inner cards stand out. */
:root[data-theme="dark"] body[data-page="home"] .home-community-board {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

/* =====================================================================
   Dark-theme contrast fixes (audit 2026-07) — map, place & home.
   Light-reference components hard-coded dark-slate/green colors with no
   dark override, leaving text/pills/borders near-invisible on dark.
   FOREGROUND-only fixes (green tokens are also used as button fills, so
   they are intentionally NOT remapped globally).
   ===================================================================== */

/* --- Map: card edges + results-list secondary text --- */
:root[data-theme="dark"] body[data-page="map"] { --border: rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .map-results-card .place-copy p { color: var(--muted); }
:root[data-theme="dark"] .map-results-card .place-kicker,
:root[data-theme="dark"] .place-kicker { color: var(--accent-soft); }
:root[data-theme="dark"] .map-results-card .place-time-label { color: var(--muted); }

/* --- Tag pills (map results, popups, place page) --- */
:root[data-theme="dark"] .place-tag,
:root[data-theme="dark"] .popup-card-tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
:root[data-theme="dark"] .place-tag.is-more,
:root[data-theme="dark"] .popup-card-tag.is-more {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-soft);
}

/* --- Map: filter popover chips + counts --- */
:root[data-theme="dark"] .results-filter-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--text);
  /* Drop the light-theme top gloss (inset white highlight) — on dark it reads
     as a white line above each chip. Also covers the selected states, whose
     box-shadow has the same specificity and would otherwise win. */
  box-shadow: none;
}
:root[data-theme="dark"] .results-filter-chip-dot { background: rgba(255, 255, 255, 0.28); }
/* Category dots keep their per-category accent colour — the generic dark dot
   rule above would otherwise flatten them to grey. */
:root[data-theme="dark"] .results-filter-chip.is-category .results-filter-chip-dot {
  background: var(--results-filter-accent);
}
/* Drop the light-theme top gloss (inset white highlight) on dark: it reads as a
   harsh white line across the top of the popover (same fix as the input fields). */
:root[data-theme="dark"] .results-filters-popover {
  box-shadow: none;
}
:root[data-theme="dark"] .results-filter-button-badge { background: var(--accent-strong); color: #04140a; }
:root[data-theme="dark"] .results-count { color: var(--accent-soft); background: rgba(var(--accent-rgb), 0.22); }

/* --- Map: popup card secondary text/icons --- */
:root[data-theme="dark"] body[data-page="map"] .popup-card-place p { color: var(--muted); }
:root[data-theme="dark"] body[data-page="map"] .popup-card-schedule .popup-card-meta-label { color: var(--muted); }
:root[data-theme="dark"] body[data-page="map"] .popup-card-meta-value { color: #9aa8a1; }
:root[data-theme="dark"] body[data-page="map"] .popup-card-meta-icon { background: #9aa8a1; }

/* --- Map: search + route dropdown secondary text --- */
:root[data-theme="dark"] .map-search-result-subtitle { color: var(--muted); }
:root[data-theme="dark"] .map-search-meta,
:root[data-theme="dark"] .map-search-results-label { color: var(--muted); }
:root[data-theme="dark"] .map-route-origin-result-subtitle { color: var(--muted); }

/* --- Map: "Мои открытия" nearby-card green (scoped; gradient token stays) --- */
:root[data-theme="dark"] body[data-page="map"] .map-nearby-category,
:root[data-theme="dark"] body[data-page="map"] .map-nearby-link { color: #36da6a; }

/* --- Place page: body copy, comments, chips, engagement --- */
:root[data-theme="dark"] body[data-page="place"] .place-detail-description { color: var(--text); }
:root[data-theme="dark"] body[data-page="place"] .place-comment-text { color: var(--text); }
/* :not(.is-active) обязателен: без него это правило (вес 0,3,1) перекрывает
   body[data-page="place"] .place-comment-star.is-active (тоже 0,3,1, но выше по
   файлу), и в тёмной теме выбранные звёзды красились тем же приглушённым
   цветом, что и невыбранные — казалось, что клик не срабатывает. */
:root[data-theme="dark"] body[data-page="place"] .place-comment-star-button:not(.is-active),
:root[data-theme="dark"] body[data-page="place"] .place-comment-star:not(.is-active) { color: rgba(255, 255, 255, 0.28); }
:root[data-theme="dark"] body[data-page="place"] .place-comment-rating.is-empty,
:root[data-theme="dark"] body[data-page="place"] .place-comment-stars.is-empty { --comment-star-active: #9aa8a1; }
:root[data-theme="dark"] body[data-page="place"] .place-detail-card .popup-card-chip {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
:root[data-theme="dark"] body[data-page="place"] .place-card-engagement {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--muted);
}
:root[data-theme="dark"] body[data-page="place"] .place-card-engagement-value { color: var(--text); }
:root[data-theme="dark"] body[data-page="place"] .place-comment-label { color: var(--muted); }
:root[data-theme="dark"] body[data-page="place"] .place-comment-textarea::placeholder { color: rgba(233, 239, 233, 0.55); }
:root[data-theme="dark"] body[data-page="place"] .place-comment-upload-remove {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="dark"] body[data-page="place"] .place-comment-status.is-error,
:root[data-theme="dark"] body[data-page="place"] .place-comment-delete {
  color: #ff9d92;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}
:root[data-theme="dark"] body[data-page="place"] .place-report-button {
  color: #ff8a80;
  border-color: rgba(255, 120, 110, 0.7);
}
:root[data-theme="dark"] body[data-page="place"] .place-detail-card,
:root[data-theme="dark"] body[data-page="place"] .place-comments-composer-card,
:root[data-theme="dark"] body[data-page="place"] .place-comments-list-card,
:root[data-theme="dark"] body[data-page="place"] .place-detail-info-card,
:root[data-theme="dark"] body[data-page="place"] .place-comment-card { border-color: rgba(255, 255, 255, 0.18); }
:root[data-theme="dark"] body[data-page="place"] .place-comment-react {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--muted);
}
:root[data-theme="dark"] body[data-page="place"] .place-comment-react:not(:disabled):hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.28);
}
:root[data-theme="dark"] body[data-page="place"] .place-comment-react-like.is-active,
:root[data-theme="dark"] body[data-page="place"] .place-comment-react-dislike.is-active {
  color: #ffffff;
  border-color: transparent;
}

/* --- Home: floating pick-card "Показать на карте" link --- */
:root[data-theme="dark"] body[data-page="home"] .home-picks-place-card span { color: var(--accent-soft); }

/* =====================================================================
   Dark-theme WHITE-surface fixes (audit 2026-07) — elements that kept a
   hard-coded light/white fill (or UA-default white) on the dark theme.
   ===================================================================== */

/* Place report-reason radio: unselected dot was solid #fff on the dark dialog. */
:root[data-theme="dark"] .place-report-option-control {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.28);
}
:root[data-theme="dark"] .place-report-option.is-selected .place-report-option-control {
  background: var(--accent);
  box-shadow: inset 0 0 0 5px var(--accent);
  border-color: var(--accent);
}

/* Place like/dislike button :hover flashed a bright-white pill. */
:root[data-theme="dark"] body[data-page="place"] .place-card-engagement-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-soft, #36da6a);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Home place-card "Я пойду!" save button: frosted-white pill over the photos. */
:root[data-theme="dark"] body[data-page="home"] .home-save-button,
:root[data-theme="dark"] body[data-page="home"] .home-save-button:not(.is-active) {
  background: rgba(20, 26, 23, 0.72);
  color: var(--accent-soft);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

/* Mobile map bottom-sheet + in-sheet place frame were hard-coded #fff. */
@media (max-width: 900px) {
  :root[data-theme="dark"] body[data-page="map"] .map-left-panel {
    background: var(--surface) !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55) !important;
    border-top: 1px solid var(--border);
  }
  :root[data-theme="dark"] body[data-page="map"] .map-sheet-place-frame {
    background: var(--surface);
  }
}

/* =====================================================================
   Map "Рекомендации" panel (personalized places, below "Мои открытия").
   Mirrors the .map-visited-panel look; compact clickable place rows.
   ===================================================================== */
.map-recommendations-panel {
  display: grid;
  gap: 12px;
  padding: 18px 18px 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(35, 43, 47, 0.08);
  box-shadow: 0 18px 34px rgba(35, 43, 47, 0.1);
  backdrop-filter: blur(16px);
}
.map-recommendations-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.map-recommendations-head h2 {
  margin: 0;
  font-family: "Sora", sans-serif;
  font-size: 1.15rem;
  line-height: 1;
}
.map-recommendations-head span {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}
.map-recommendations-list {
  display: grid;
  gap: 8px;
}
.map-recommendations-empty {
  margin: 0;
  padding: 6px 0 2px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}
.map-recommendation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(35, 43, 47, 0.08);
  background: rgba(35, 43, 47, 0.03);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.map-recommendation-item:hover {
  transform: translateY(-1px);
  border-color: rgba(35, 43, 47, 0.16);
  background: rgba(35, 43, 47, 0.05);
}
.map-recommendation-thumb {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--rec-color, #7c8a90) 20%, rgba(35, 43, 47, 0.06));
}
.map-recommendation-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.map-recommendation-copy {
  display: grid;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.map-recommendation-copy strong {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-recommendation-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}
.map-recommendation-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rec-color, #7c8a90);
  flex: 0 0 8px;
}
.map-recommendation-go {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  opacity: 0.7;
}
:root[data-theme="dark"] .map-recommendations-panel {
  background: var(--surface);
  border-color: var(--border);
}
:root[data-theme="dark"] .map-recommendation-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}
:root[data-theme="dark"] .map-recommendation-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
:root[data-theme="dark"] .map-recommendation-thumb {
  background: color-mix(in srgb, var(--rec-color, #7c8a90) 26%, rgba(255, 255, 255, 0.05));
}
.map-recommendations-head-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.map-recommendations-refresh {
  display: inline-grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(35, 43, 47, 0.12);
  background: rgba(35, 43, 47, 0.04);
  color: var(--muted);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.map-recommendations-refresh:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}
.map-recommendations-refresh-icon {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.map-recommendations-refresh.is-spinning .map-recommendations-refresh-icon {
  animation: cityhop-rec-spin 0.6s linear;
}
@keyframes cityhop-rec-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
:root[data-theme="dark"] .map-recommendations-refresh {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
}
:root[data-theme="dark"] .map-recommendations-refresh:hover {
  color: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.14);
}

/* ============================================================================
   Mobile header polish (home): push the theme/bell icons to the right edge and
   keep the notifications panel from spilling off the right side of the screen.
   (The home header wraps the action group to its own row at ≤640; right-align
   the icons on that row, and anchor the notifications dropdown to the right.)
   ============================================================================ */
@media (max-width: 900px) {
  /* Одна строка: логотип + город слева, иконки (тема/колокольчик) прижаты вправо.
     Общий .site-header { flex-wrap: wrap } переносил action-группу на вторую
     строку — из-за этого иконки «съезжали» вниз. Держим шапку в одну строку;
     название города при нехватке места ужимается с многоточием. */
  body[data-page="home"] .site-header {
    flex-wrap: nowrap;
    align-items: center;
  }
  body[data-page="home"] .header-city-picker-anchor {
    min-width: 0;
  }
  body[data-page="home"] .header-chip-location {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body[data-page="home"] .header-actions {
    justify-content: flex-end;
    margin-left: auto;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    width: auto; /* иначе .header-actions растягивается на всю строку и иконки уезжают за экран */
  }

  body[data-page="home"] .header-notification-dropdown {
    left: auto;
    right: 0;
    transform: translateY(-10px) scale(0.97);
    transform-origin: top right;
  }
  body[data-page="home"] .header-notification-dropdown.is-visible {
    transform: translateY(0) scale(1);
  }
}

/* ============================================================================
   Секция «Живые подборки» на телефоне: крупные аккуратные карточки-карусель —
   одна карточка занимает бо́льшую часть экрана, следующая «подглядывает» сбоку,
   текст компактный (без лишней высоты), мягкие скругления и тень. Свайп по
   горизонтали со снапом к карточке.
   ============================================================================ */
@media (max-width: 900px) {
  body[data-page="home"] .home-picks-section > .home-place-carousel {
    /* Во всю ширину экрана: места начинаются от края, а «подглядывание»
       следующей карточки доходит до самого края (не висит в воздухе). */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 8px 16px 22px;
    gap: 14px;
    scroll-snap-type: x mandatory;
    /* Убираем маску-затемнение краёв — она размывала полноэкранные края. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  body[data-page="home"] .home-place-card {
    flex: 0 0 min(84vw, 340px);
    min-height: 0;
    padding: 12px 12px 16px;
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(16, 25, 29, 0.16);
    /* Карточка центрируется по снапу; первая/последняя прилипают к краю. */
    scroll-snap-align: center;
    /* На телефоне карточки ровные — без наклона «барабана» из десктопа. */
    transform: none;
  }
  body[data-page="home"] .home-place-card:nth-child(n) {
    --card-rotate: 0deg;
    --card-y: 0px;
    --card-scale: 1;
  }

  /* Более «пейзажное» фото — карточка не такая высокая. */
  body[data-page="home"] .home-place-card-media {
    aspect-ratio: 1 / 0.72;
  }

  body[data-page="home"] .home-place-card h3 {
    min-height: 0;
    margin-top: 15px;
    font-size: 1.14rem;
  }

  /* Описание — максимум 3 строки, аккуратно обрезаем. */
  body[data-page="home"] .home-place-card p {
    min-height: 0;
    margin: 9px 0 14px;
    font-size: 0.95rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Ряд чипов категорий: убираем видимую полосу прокрутки и даём чипам отступ
     сверху/снизу — иначе overflow-x: auto делает overflow-y: auto, и верх чипа
     (граница/тень активного) обрезается о край скролл-контейнера. */
  body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  body[data-page="home"] .home-picks-category-slot .home-category-band .chip-row::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  /* Тень активного чипа тоже не должна упираться в край контейнера. */
  body[data-page="home"] .home-picks-category-slot .home-category-band .chip {
    margin-top: 2px;
  }
}

/* ============================================================================
   ЕДИНАЯ ВЕРХНЯЯ ПАНЕЛЬ (site-header)
   ----------------------------------------------------------------------------
   Одна высота полосы и один размер иконок на всех страницах.

   Почему такая специфичность: постраничные правила вида
   `body[data-page="map"] .site-header` имеют вес (0,2,1), и часть из них живёт
   в profile.css / community.css, которые подключаются ПОСЛЕ styles.css.
   Поэтому здесь `.site-header` намеренно продублирован — это поднимает вес до
   (0,3,1)+ и правило выигрывает по специфичности, а не по порядку файлов.

   Страницы входа (.auth-header на /login, /register) намеренно другие —
   высоту им не навязываем, только размер иконок.
   ============================================================================ */

/* Полоса: одна высота везде. min-height задаёт «пол», height:auto снимает
   жёсткие height:76px у map/place/profile, nowrap не даёт панели переноситься
   на вторую строку (из-за этого /offer раздувался до 122px). */
body .site-header.site-header:not(.auth-header) {
  height: auto;
  min-height: var(--header-height);
  align-items: center;
  flex-wrap: nowrap;
  padding-block: var(--header-pad-y);
  /* Только column-gap: он и задаёт зазор логотип → город. row-gap не трогаем,
     он всё равно не работает при nowrap. Каждая страница ставила свой gap
     (8/10/12px на мобильных) — теперь значение одно. */
  column-gap: var(--header-gap);
}

/* Группа действий держится в одну строку и не растягивается на всю ширину
   (общее правило @media(max-width:1180px) ставит ей width:100%).
   flex:1 1 auto — группа занимает всю строку от логотипа до правого края,
   поэтому её левый край всегда прижат к лого; иконки при этом уходят вправо
   через justify-content:flex-end. */
body .site-header.site-header:not(.auth-header) .header-actions {
  width: auto;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

/* На всех страницах, кроме главной, чип города лежит ПЕРВЫМ элементом внутри
   .header-actions. Раньше группа прижималась вправо целиком и утаскивала город
   с собой (на 528px: карта — 235px от лого, место — 155px). Авто-отступ справа
   у города оставляет его у логотипа, а всё остальное выталкивает вправо.
   margin-left:0 у остальных детей убирает конкурирующие margin-left:auto
   (например у .profile-header-map-link), иначе свободное место делилось бы
   между двумя авто-отступами и город снова отъезжал бы от лого. */
body .site-header.site-header:not(.auth-header) .header-actions > * {
  margin-left: 0;
}

body .site-header.site-header:not(.auth-header) .header-actions > .header-city-picker-anchor {
  margin-right: auto;
}

/* Длинное название города («Петропавловск-Камчатский») не должно выталкивать
   иконки за экран: сжимается и обрезается именно чип, а кнопки-иконки ниже
   зафиксированы через flex: 0 0 …, поэтому свой размер не теряют.
   Сжимать нужно и обёртку .header-city-picker-anchor — именно она является
   flex-элементом шапки, у чипа внутри неё сжатие само по себе не сработает. */
body .site-header.site-header:not(.auth-header) .header-city-picker-anchor {
  min-width: 0;
  flex-shrink: 1;
  /* overflow здесь НЕ трогаем: к этой обёртке привязан выпадающий список
     городов, скрытие переполнения обрезало бы открытое меню. */
}

/* Город стоит вплотную к логотипу на всех страницах. Отступ в 34px навешивался
   постранично то на обёртку (map/profile/admin/add-place/404), то на сам чип
   (place); на главной его не было — её и берём за образец. Расстояние до лого
   теперь задаёт только gap самой шапки. */
body .site-header.site-header:not(.auth-header) .header-city-picker-anchor,
body .site-header.site-header:not(.auth-header) .header-chip-location {
  margin-left: 0;
}

body .site-header.site-header:not(.auth-header) .header-chip-location {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Один кегль во всей шапке. Все страницы уже объявляли 0.95rem — кроме
     главной, где чип уезжал в 0.92rem на десктопе и 0.82rem ниже 640px. */
  font-size: var(--header-font-size);
}

/* Круглые кнопки-иконки — один размер (солнце/луна и колокольчик). */
body .site-header.site-header .theme-toggle,
body .site-header.site-header .header-notification-button {
  width: var(--header-icon-button);
  min-width: var(--header-icon-button);
  height: var(--header-icon-button);
  min-height: var(--header-icon-button);
  flex: 0 0 var(--header-icon-button);
  padding: 0;
}

/* Сами глифы — один размер. Аватар сюда НЕ входит: это не иконка, а портрет
   рядом с именем в две строки — см. отдельное правило ниже. */
body .site-header.site-header .header-notification-icon,
body .site-header.site-header .header-chip-location::before,
body .site-header.site-header #logoutButton.header-chip-auth::before {
  width: var(--header-icon-size);
  height: var(--header-icon-size);
  flex: 0 0 var(--header-icon-size);
}

/* Аватар пользователя: крупнее иконок, один размер на всех страницах.
   Именно этот размер (42px) и закладывали постранично map/place/profile/admin/
   add-place/404 — блок унификации иконок раньше ошибочно ужимал его до 20px. */
body .site-header.site-header .header-user-chip-avatar {
  width: var(--header-avatar-size);
  height: var(--header-avatar-size);
  flex: 0 0 var(--header-avatar-size);
}

/* Чип пользователя не добавляет вертикальных отступов: на главной он объявлен
   как height:auto; padding:8px 0, и с аватаром 42px вырастал до 58px, разгоняя
   всю полосу с 76 до 78px. Высоту чипа задаёт сам аватар. */
body .site-header.site-header .header-chip-user {
  padding-block: 0;
}

/* Солнце/луна вложены в .theme-toggle-icon, растянутый на всю кнопку, поэтому
   размер задаём самой иконке, а не в процентах от кнопки (иначе она станет 40px). */
body .site-header.site-header .theme-toggle svg {
  width: var(--header-icon-size);
  height: var(--header-icon-size);
}

/* Колокольчик лежит в обёртке .header-notification-icon, которая уже 20px. */
body .site-header.site-header .header-notification-icon svg {
  width: 100%;
  height: 100%;
}

/* Силуэт-заглушка внутри аватара (когда фото не загружено) масштабируется
   вместе с ним, а не с иконками. */
body .site-header.site-header .header-user-chip-avatar-fallback::before {
  width: var(--header-avatar-glyph);
  height: var(--header-avatar-glyph);
}

/* На узких экранах зазор логотип → город чуть меньше, но по-прежнему один
   на всех страницах. */
@media (max-width: 900px) {
  :root {
    --header-gap: 12px;
  }
}