:root {
  --bg: var(--tg-theme-bg-color, #1c1c1e);
  --fg: var(--tg-theme-text-color, #ffffff);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --card: var(--tg-theme-secondary-bg-color, #2c2c2e);
  /* Все FAB-кнопки, активные чипы фильтров, активные kind-кнопки, primary-кнопки —
     приглушённый пыльно-синий (тот же что у локаций), чтобы UI не перебивал цветами
     пинов на карте. */
  --accent: #5a93b8;
  --accent-fg: #ffffff;
  --event: #e85a32;
  --spot: #5a93b8;
  --place: #5a93b8;
  --adventure: #b388ff;
  --community: #5a93b8;
  --company: #5a93b8;
  --master: #5a93b8;
  --sarafan: #5a93b8;
  /* Кнопки на карте: ЦВЕТНОЕ стекло. Синее стекло + белые глифы у всех
     (фильтры/действия + стопка дней) — без свечения, только лёгкая тень.
     Кнопка-дата и ВЫБРАННЫЙ день — насыщенное красное стекло, которое «горит»
     неоновым красным свечением. Карточки/меню — матовое стекло. */
  --glass-btn: rgba(44,74,108,0.60);
  /* насыщенное красное стекло кнопки-даты и выбранного дня */
  --glass-btn-red: rgba(230,46,36,0.76);
  --glass-btn-bd: rgba(255,255,255,0.22);
  --glass-btn-fg: #ffffff;
  /* НЕОНОВОЕ красное свечение вокруг кнопки-даты и выбранного дня — «горит». */
  --glow-neon-red: 0 0 9px rgba(255,62,48,0.95), 0 0 20px rgba(255,50,38,0.72), 0 0 40px rgba(255,42,30,0.5), inset 0 0 14px rgba(255,140,110,0.5);
  --glass-panel: rgba(22,26,36,0.84);
  --glass-panel-bd: rgba(255,255,255,0.14);
  --glass-blur: blur(16px) saturate(150%);
  --glass-blur-btn: blur(14px) saturate(140%);
  /* Пружинка для «вылетов» — общий тайминг анимаций кнопок/панелей. */
  --spring: cubic-bezier(.2,.9,.3,1.5);
}

/* Появление FAB-кнопок при загрузке — лёгкий вылет снизу со стаггером. */
@keyframes fabIn {
  0%   { opacity: 0; transform: translateY(22px) scale(0.35); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fabInCenter {
  0%   { opacity: 0; transform: translateX(-50%) translateY(22px) scale(0.35); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}

#map { position: absolute; inset: 0; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  pointer-events: none;
}
.tb-left { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; }
/* Стеклянные плашки шапки — то же СИНЕЕ стекло кнопок-FAB на карте (не матовый
   тёмный фон карточек): полупрозрачное, с белой каёмкой и верхним бликом.
   Город+температура — одна плашка, восход/закат/УФ — отдельная. */
.glass-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--glass-btn);
  -webkit-backdrop-filter: var(--glass-blur-btn);
  backdrop-filter: var(--glass-blur-btn);
  border: 1.5px solid var(--glass-btn-bd);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--glass-btn-fg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.34);
  white-space: nowrap;
  line-height: 1.1;
}
#title { font-size: 15px; font-weight: 700; letter-spacing: 0.2px; }
#wx-temp { font-size: 14px; font-weight: 600; opacity: 0.95; }
#tb-sun { font-size: 13px; font-weight: 500; letter-spacing: 0.2px; }
#tb-sun:empty { display: none; }
/* «5 точек» — как было: белый текст с лёгкой тенью, без подложки. */
#counter {
  font-size: 14px; font-weight: 400; opacity: 0.92;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  padding-top: 5px;
}

#filters {
  position: absolute; top: 42px; left: 0; right: 0;
  z-index: 500;
  display: flex; gap: 8px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
#filters::-webkit-scrollbar { display: none; }

/* Чипы типа (события/локации/...) — нижний выезжающий sheet, прячется
   когда не нужно. Показывается тапом по FAB. */
#kinds {
  position: fixed;
  left: 50%;
  width: calc(100% - 24px);
  max-width: 720px;
  bottom: 18px;
  z-index: 700;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-panel-bd);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  transform: translate(-50%, 0) scale(1);
  transform-origin: 50% 100%;
  transition: transform 0.46s var(--spring), opacity 0.32s ease;
  opacity: 1;
  max-height: 75vh;
  overflow-y: auto;
}
#kinds.hidden {
  transform: translate(-50%, 140%) scale(0.94);
  opacity: 0;
  pointer-events: none;
}
#kinds-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 24px;
}
#kinds-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; color: var(--hint);
  border: none; font-size: 18px; cursor: pointer;
  padding: 4px 8px;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* FAB-кнопки по углам карты: 👀 справа (фильтры), 📍 слева (добавить). */
#kinds-fab, #add-fab {
  position: fixed;
  bottom: 24px;
  z-index: 700;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--glass-btn);
  color: var(--glass-btn-fg);
  border: 1.5px solid var(--glass-btn-bd);
  -webkit-backdrop-filter: var(--glass-blur-btn);
  backdrop-filter: var(--glass-blur-btn);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.34);
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  line-height: 1;
  transition: opacity 0.25s ease, transform 0.34s var(--spring), box-shadow 0.2s ease, background 0.2s ease;
  animation: fabIn 0.5s var(--spring) backwards;
}
#kinds-fab { right: 18px; }
#add-fab { left: 18px; font-weight: 700; font-size: 22px; animation-delay: 0.04s; }
/* «💬 сарафан» — справа над 👀, тот же стиль */
#sarafan-fab {
  position: fixed;
  right: 18px;
  bottom: 80px;
  z-index: 700;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--glass-btn);
  color: var(--glass-btn-fg);
  border: 1.5px solid var(--glass-btn-bd);
  -webkit-backdrop-filter: var(--glass-blur-btn);
  backdrop-filter: var(--glass-blur-btn);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.34);
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  line-height: 1;
  transition: opacity 0.25s ease, transform 0.34s var(--spring), box-shadow 0.2s ease, background 0.2s ease;
  animation: fabIn 0.5s var(--spring) backwards;
  animation-delay: 0.1s;
}
#sarafan-fab:active { transform: scale(0.92); }
#kinds-fab:active, #add-fab:active { transform: scale(0.92); }

/* ☀️ Кнопка выбора даты — справа над сарафаном. По тапу вверх вылетает
   адаптивная стопка дат (начиная с завтра; сегодня — по умолчанию). */
#sun-fab {
  position: fixed;
  right: 18px;
  bottom: 136px;
  z-index: 700;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--glass-btn-red);
  color: var(--glass-btn-fg);
  border: 1.5px solid rgba(255,170,140,0.7);
  -webkit-backdrop-filter: var(--glass-blur-btn);
  backdrop-filter: var(--glass-blur-btn);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--glow-neon-red);
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0; line-height: 1;
  transition: opacity 0.25s ease,
              transform 0.34s var(--spring),
              box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  animation: fabIn 0.5s var(--spring) backwards;
  animation-delay: 0.16s;
}
#sun-fab:active { transform: scale(0.92); }
/* Стопка дат раскрыта — кнопка крупнее и горит ярче. */
#sun-fab.active {
  transform: scale(1.08);
  border-color: rgba(255,200,180,0.85);
  box-shadow: 0 0 12px rgba(255,70,55,1), 0 0 26px rgba(255,55,42,0.8), 0 0 48px rgba(255,45,32,0.55), inset 0 0 16px rgba(255,150,120,0.55);
}
#sun-fab.hidden {
  opacity: 0; pointer-events: none;
  transform: translateY(18px) scale(0.4);
}

#dates-flyout {
  position: fixed;
  right: 18px;
  bottom: 192px;            /* над sun-fab: 136 + 46 + 10 */
  z-index: 700;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
#dates-flyout.open { pointer-events: auto; }
#dates-flyout.hidden { display: none; }
.date-pill {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--glass-btn);
  color: var(--glass-btn-fg);
  border: 2px solid var(--glass-btn-bd);
  backdrop-filter: var(--glass-blur-btn);
  -webkit-backdrop-filter: var(--glass-blur-btn);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 700; line-height: 1;
  cursor: pointer; padding: 0;
  box-shadow: 0 5px 14px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.30);
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(18px) scale(0.55);
  transition: opacity 0.26s ease,
              transform 0.36s cubic-bezier(.2,.9,.3,1.55);
}
#dates-flyout.open .date-pill {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.date-pill.active {
  background: var(--glass-btn-red);
  color: var(--glass-btn-fg);
  border-color: rgba(255,170,140,0.8);
  box-shadow: var(--glow-neon-red);
}
.dp-day { font-size: 17px; }
.dp-wd { font-size: 9px; opacity: 0.82; font-weight: 600; margin-top: 2px; }
/* Пилюля ∞ — все события за всё время. Тот же стеклянный кружок, крупный знак. */
.dp-inf-glyph { font-size: 26px; font-weight: 700; line-height: 1; margin-top: -3px; }

#kinds-fab.hidden, #add-fab.hidden, #sarafan-fab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.4);
}
#random-btn.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(18px) scale(0.4);
}

/* Бегущая строка сарафана — сразу под названием города, перед чипами дат.
   Красная полупрозрачная плашка через весь экран. */
#sn-ticker {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  z-index: 550;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  overflow: hidden;
  height: 24px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
#sn-ticker.hidden { display: none; }
.sn-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  animation: sn-marquee 35s linear infinite;
}
.sn-ticker-inner span.sn-tick-time { opacity: 0.85; margin-right: 4px; }
.sn-ticker-inner span.sn-tick-who  { opacity: 0.95; margin-right: 4px; font-weight: 600; }
.sn-ticker-inner span.sn-tick-sep  { opacity: 0.55; margin: 0 16px; }
@keyframes sn-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Карточка сарафана — клон обычной .card, без отдельных стилей фона,
   но с прокручиваемым списком и опциональной формой отправки. */
#sarafan-card { display: flex; flex-direction: column; max-height: 60vh; }
#sarafan-card h2 { margin: 4px 26px 8px 0; font-size: 16px; }

/* Превью загружаемого фото в форме добавления локации */
#asp-photo-preview-wrap {
  margin: 8px 0 4px;
  display: flex; flex-direction: column; gap: 6px;
}
#asp-photo-preview-wrap.hidden { display: none; }
#asp-photo-preview {
  display: block; width: 100%;
  max-height: 180px; object-fit: cover;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
#asp-photo-clear {
  align-self: flex-start;
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 6px 10px;
  font-size: 12px; cursor: pointer;
}

/* Фото локации в карточке — на всю ширину, ровные углы. */
.card .spot-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 8px 0 10px;
  background: rgba(255,255,255,0.04);
}
#sn-msgs {
  flex: 1; min-height: 80px; max-height: 38vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 8px;
}
#sn-msgs .sn-empty { opacity: 0.6; margin: 6px 0; font-size: 13px; }
#sn-msgs .sn-msg {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px 10px;
}
#sn-msgs .sn-msg .sn-text {
  font-size: 13px; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word;
}
#sn-msgs .sn-msg .sn-text a {
  color: var(--tg-theme-link-color, #6ab4ff);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tg-theme-link-color, #6ab4ff) 40%, transparent);
}
#sn-msgs .sn-msg .sn-text a:active { opacity: 0.7; }
#sn-msgs .sn-msg .sn-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; font-size: 11px; color: var(--hint);
}
#sn-msgs .sn-msg .sn-fire-mini {
  background: transparent; color: var(--fg); border: 0; cursor: pointer;
  font-size: 12px; padding: 2px 4px;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#sn-msgs .sn-msg .sn-fire-mini.active { color: var(--event); }
#sn-msgs .sn-msg .sn-who { margin-left: auto; }
/* Сообщение с координатами — кликабельно, перелетает к пину на карте */
#sn-msgs .sn-msg.sn-has-loc { cursor: pointer; }
#sn-msgs .sn-msg.sn-has-loc:active { background: rgba(255,255,255,0.05); border-radius: 8px; }
#sn-msgs .sn-msg .sn-loc { color: var(--sarafan); font-size: 12px; }

#sn-compose { display: flex; gap: 8px; align-items: stretch; }
#sn-compose.hidden { display: none; }
#sn-compose textarea {
  flex: 1; resize: none;
  background: rgba(255,255,255,0.06); color: var(--fg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 10px; font-size: 14px; font-family: inherit;
  min-height: 44px; max-height: 120px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
#sn-compose textarea:focus {
  outline: none;
  background: rgba(255,255,255,0.10);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
#sn-compose { flex-wrap: wrap; }
#sn-compose .primary {
  background: var(--accent); color: var(--accent-fg);
  border: 0; border-radius: 10px;
  padding: 0 14px; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(90,147,184,0.45);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#sn-compose .primary:active { transform: scale(0.97); }
/* Выбор TTL — через сколько сообщение само удалится */
.sn-ttl { width: 100%; }
.sn-ttl.hidden { display: none; }
.sn-ttl-label { font-size: 12px; color: var(--hint); margin-bottom: 5px; }
.sn-ttl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sn-ttl-chips button {
  flex: 1 0 auto; min-width: 40px; padding: 6px 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--fg);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 999px;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.sn-ttl-chips button.active { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
.sn-ttl-note { font-size: 11px; color: var(--hint); margin-top: 5px; line-height: 1.3; }

/* Выбор «в чат / на карту» после нажатия отправить */
#sn-choice { display: flex; gap: 8px; width: 100%; }
#sn-choice.hidden { display: none; }
#sn-choice button {
  flex: 1; padding: 10px; font-size: 14px; font-weight: 600;
  border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: var(--fg);
  border: 1px solid rgba(255,255,255,0.18);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#sn-choice button:active { transform: scale(0.97); }
#sn-choice #sn-to-map {
  background: var(--sarafan); color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(90,147,184,0.45);
}

/* Бар установки булавки сарафана на карту — снизу экрана, поверх карты */
#sn-pick-bar {
  position: fixed; left: 12px; right: 12px; bottom: 16px; z-index: 950;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-panel-bd);
  color: #fff; border-radius: 16px;
  padding: 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 10px;
  font: 14px/1.3 -apple-system, system-ui, sans-serif;
  animation: sheetUp 0.34s var(--spring);
}
#sn-pick-bar.hidden { display: none; }
#sn-pick-bar .sn-pick-btns { display: flex; gap: 8px; }
#sn-pick-bar .sn-pick-btns button {
  flex: 1; padding: 10px; font-size: 14px; font-weight: 600;
  border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.08); color: var(--fg);
  border: 1px solid rgba(255,255,255,0.18);
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#sn-pick-bar .sn-pick-btns .primary { background: var(--sarafan); color: #fff; border-color: transparent; }
#sn-pick-bar .sn-pick-btns .primary:disabled { opacity: 0.5; }
/* Автор+время в карточке сарафан-пина */
#card-body .sn-who { color: var(--hint); font-size: 13px; margin-top: 6px; }

/* Sheet «что хочешь добавить» — тот же стиль, что #kinds, но отдельный id. */
#add-sheet {
  position: fixed;
  left: 50%;
  width: calc(100% - 24px);
  max-width: 720px;
  bottom: 18px;
  z-index: 700;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-panel-bd);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  transform: translate(-50%, 0) scale(1);
  transform-origin: 50% 100%;
  transition: transform 0.46s var(--spring), opacity 0.32s ease;
  opacity: 1;
  max-height: 75vh;
  overflow-y: auto;
}
#add-sheet.hidden {
  transform: translate(-50%, 140%) scale(0.94);
  opacity: 0;
  pointer-events: none;
}
#add-sheet-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 24px;
}
/* Внутри add-sheet кнопки .wide НЕ растягиваем на всю строку — нужны рядом */
#add-sheet-inner .kind.wide { grid-column: auto; }
#add-sheet-close {
  position: absolute; top: 6px; right: 8px;
  background: transparent; color: var(--hint);
  border: none; font-size: 18px; cursor: pointer;
  padding: 4px 8px;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.kind {
  background: rgba(255,255,255,0.08);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.kind:active { transform: scale(0.97); }
.kind.active {
  opacity: 1;
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(90,147,184,0.45);
}
.kind.wide { grid-column: 1 / -1; }

/* В add-sheet кнопки — это просто выбор «что добавить», а не toggle.
   Дефолтное приглушение .kind тут не нужно — всегда яркие. */
#add-sheet .kind {
  opacity: 1;
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(90,147,184,0.45);
}

.chip, #me-btn {
  flex: 0 0 auto;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.chip.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}
#me-btn {
  margin-left: auto;
  padding: 6px 10px;
  font-size: 14px;
}

.card {
  position: absolute;
  left: 50%;
  width: calc(100% - 24px);
  max-width: 720px;
  /* Поднимаем над кнопками 🎲 и 👀 (они bottom:24 + h:56 = ~80) — карта
     остаётся видна снизу, юзер может тапнуть кнопки не закрывая карточку. */
  bottom: 96px;
  z-index: 600;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-panel-bd);
  color: var(--fg);
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  max-height: 55vh;
  overflow-y: auto;
  /* Мягкий пружинистый вылет — как у стопки дат: подъём с лёгким овершутом
     + плавное растворение + чуть-чуть масштаба (растёт снизу вверх). */
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transform-origin: 50% 100%;
  transition: transform 0.46s var(--spring), opacity 0.32s ease;
}
.card.hidden {
  /* съезжаем на свою высоту + запас чтобы полностью уйти за низ экрана
     (с учётом bottom: 96px у карточки), и растворяемся. */
  transform: translate(-50%, calc(100% + 60px)) scale(0.94);
  opacity: 0;
  pointer-events: none;
}
#card-close, #districts-close, #sn-card-close {
  position: absolute; top: 8px; right: 10px;
  background: transparent; color: var(--hint);
  border: none; font-size: 18px; cursor: pointer;
  padding: 6px 10px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.card h2 {
  margin: 0 0 8px; font-size: 17px; line-height: 1.25;
  padding-right: 30px;
}
.card .meta { color: var(--hint); font-size: 13px; margin-bottom: 8px; }
.card .meta span { margin-right: 10px; }
.card p { margin: 6px 0; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.card p.desc { margin: 16px 0; }
.card p.venue { margin-top: 16px; }
.card p a {
  color: var(--tg-theme-link-color, #6ab4ff);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tg-theme-link-color, #6ab4ff) 40%, transparent);
}
.card p a:active { opacity: 0.7; }
.card blockquote {
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--hint);
  color: var(--fg);
  opacity: 0.9;
  font-style: italic;
}
.card .spoiler {
  background: var(--hint);
  color: var(--hint);
  border-radius: 3px;
  padding: 0 4px;
  cursor: pointer;
  transition: color .2s;
}
.card .spoiler:hover, .card .spoiler:active, .card .spoiler.shown { color: var(--fg); }

/* Подзаголовок секции внутри sheet'а — кликабельный, разворачивает список */
.section-title {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--hint);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
  padding: 6px 4px;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.section-title .chev {
  display: inline-block;
  transition: transform 0.2s ease;
  font-size: 10px;
}
.section-title.expanded .chev { transform: rotate(90deg); }

/* Свёрнутые блоки скрыты, развернутые — видны. !important чтобы перебить
   более специфичные ID-селекторы типа `#districts-list { display: grid }`. */
.collapsed { display: none !important; }

/* Сетка кнопок районов */
#districts-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.district-btn {
  background: rgba(255,255,255,0.08);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.district-btn:active { background: var(--accent); color: var(--accent-fg); }
.district-btn.wide { grid-column: 1 / -1; }
.card .actions {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.card .actions a, .card .actions button {
  background: var(--accent); color: var(--accent-fg);
  border: none; border-radius: 10px;
  padding: 10px 14px; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.card .actions a.secondary, .card .actions button.secondary {
  background: transparent; color: var(--fg);
  border: 1px solid var(--hint);
}

/* Пин с эмодзи в кружке, цвет рамки по типу */
.pin {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 3px solid var(--event);
  border-radius: 50%;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: pointer;
  transform: translateY(0);
}
/* Админ-карта: placeholder событий без координат (стоят в центре города).
   Пунктирная рамка, лёгкая полупрозрачность — сигнал «перетащи меня». */
.pin.no-coords {
  border-style: dashed !important;
  opacity: 0.7;
  animation: noCoordsPulse 1.6s ease-in-out infinite;
}
@keyframes noCoordsPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.pin.spot { border-color: var(--spot); }
.pin.place { border-color: var(--place); }
.pin.adventure { border-color: var(--adventure); }
.pin.community { border-color: var(--community); }
.pin.company { border-color: var(--company); }
.pin.master { border-color: var(--master); }
.pin.sarafan { border-color: var(--sarafan); }
/* Контейнер (community/place/company/master) с привязанными событиями —
   рамка красная (как у событий), чтобы было видно «тут есть событие». */
.pin.has-events { border-color: var(--event); }

/* Цвет импульса для каждого типа точки — в тон рамке. Если поменяется цвет
   точки, поменяй --pulse-rgb рядом, чтобы свечение шло в тон. */
.pin.event     { --pulse-rgb: 232,90,50; }
.pin.adventure { --pulse-rgb: 179,136,255; }
.pin.spot, .pin.place, .pin.community,
.pin.company, .pin.master, .pin.sarafan { --pulse-rgb: 90,147,184; }

/* Пульсирующая точка: вокруг неё МЕДЛЕННО расходятся импульсы свечения —
   расширяющееся кольцо плавно растворяется наружу (как пульс «я здесь»).
   Цвет берётся из --pulse-rgb, поэтому всегда идёт в тон самой точке. Базовую
   тень держим во всех кадрах, чтобы кружок не «плющило». Сейчас висит на
   последнем сообщении сарафана на карте, чтобы оно всегда выделялось. */
.pin.pulse {
  animation: pinPulse 2.8s ease-out infinite;
}
@keyframes pinPulse {
  0%   { box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 0   rgba(var(--pulse-rgb),0.55); }
  70%  { box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 18px rgba(var(--pulse-rgb),0); }
  100% { box-shadow: 0 2px 6px rgba(0,0,0,0.4), 0 0 0 0   rgba(var(--pulse-rgb),0); }
}

/* Бэйдж на пинах — синий счётчик «ищу компанию» на событии.
   На контейнерах бэйджи не показываем (число детей не выводится). */
.pin .badge {
  position: absolute;
  top: -6px; right: -8px;
  background: #4ea8ff;
  color: #fff;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
  line-height: 1;
}
/* Раскрытый контейнер притухает, чтобы дети-события были акцентом */
.pin { transition: opacity 0.25s ease; }
.pin.dimmed { opacity: 0.45; }

/* Фокус-режим: либо раскрыто сообщество, либо открыта карточка любого пина.
   Все «чужие» пины уходят в фон, чтобы выбранный был акцентом.
   ВАЖНО: opacity и transition вешаем на ВНУТРЕННИЙ div (.pin/.cluster),
   а не на .leaflet-marker-icon — иначе Leaflet'овская анимация transform
   на иконке при зуме конфликтует с нашей transition и пины рывками двигаются.*/
.map-community-expanded .leaflet-marker-icon > div,
.map-pin-selected .leaflet-marker-icon > div {
  transition: opacity 0.25s ease;
}
.map-community-expanded [class*="leaflet-pane"] .leaflet-marker-icon:not(.spider-child):not(.community-active) > div,
.map-pin-selected [class*="leaflet-pane"] .leaflet-marker-icon:not(.selected-pin):not(.spider-child):not(.community-active) > div {
  opacity: 0.18;
}

/* Spiderfy-like анимация: дочерние пины «выезжают» из центра сообщества */
.spider-anim { transition: transform 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.spider-leg {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.spider-leg.shown { opacity: 0.6; }
.pin { position: relative; }

/* Кнопка «🎲 случайно» снизу по центру */
#random-btn {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 700;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--glass-btn);
  color: var(--glass-btn-fg);
  border: 1.5px solid var(--glass-btn-bd);
  -webkit-backdrop-filter: var(--glass-blur-btn);
  backdrop-filter: var(--glass-blur-btn);
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.34);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  line-height: 1;
  transition: opacity 0.25s ease, transform 0.34s var(--spring), box-shadow 0.2s ease, background 0.2s ease;
  animation: fabInCenter 0.5s var(--spring) backwards;
}
#random-btn:active { transform: translateX(-50%) scale(0.94); }

/* Кнопки-стрелки для листания карточек — по бокам от 🎲. Появляются при
   любой открытой карточке; листают события по расстоянию (ближе → дальше). */
#carousel-prev, #carousel-next {
  position: fixed;
  bottom: 24px;
  z-index: 700;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass-btn);
  color: var(--glass-btn-fg);
  border: 1.5px solid var(--glass-btn-bd);
  -webkit-backdrop-filter: var(--glass-blur-btn);
  backdrop-filter: var(--glass-blur-btn);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.34);
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  transition: opacity 0.25s ease, transform 0.34s var(--spring), box-shadow 0.2s ease, background 0.2s ease;
}
#carousel-prev { left: calc(50% - 92px); }
#carousel-next { left: calc(50% + 48px); }
#carousel-prev:active, #carousel-next:active { transform: scale(0.92); }
#carousel-prev.hidden, #carousel-next.hidden {
  opacity: 0; pointer-events: none; transform: translateY(18px) scale(0.4);
}

/* Реакции в карточке */
.reactions {
  display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;
}
.react-btn {
  background: rgba(255,255,255,0.08);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.react-btn.active,
.card .actions button.comp-toggle.active {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: transparent;
}
.react-btn .n {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

/* Компаньоны — мини-чипы с инициалом */
.companions {
  display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; align-items: center;
}
.comp-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--card);
  margin-left: -10px;
}
.comp-chip:first-child { margin-left: 0; }
.companions .label { color: var(--hint); font-size: 12px; margin-left: 8px; }

/* Кластер — кружок с числом точек внутри. Цвет по типу группы. */
.cluster {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--event);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor: pointer;
}
.cluster.event     { background: var(--event); }
.cluster.spot      { background: var(--spot); }
.cluster.place     { background: var(--place); }
.cluster.adventure { background: var(--adventure); }
.cluster.community { background: var(--community); }
.cluster.company { background: var(--company); }
.cluster.master { background: var(--master); }
.cluster.sarafan { background: var(--sarafan); }
/* Если внутри кластера есть хотя бы один контейнер с привязанным событием —
   красим кружок-с-цифрой в красный, как сами контейнеры с has-events. */
.cluster.has-events { background: var(--event); }

/* «Я здесь» — синяя пульсирующая точка */
.me-pulse {
  width: 18px; height: 18px;
  background: #4ea8ff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(78, 168, 255, 0.6);
  animation: mepulse 2s infinite;
}
@keyframes mepulse {
  0%   { box-shadow: 0 0 0 0 rgba(78, 168, 255, 0.6); }
  70%  { box-shadow: 0 0 0 16px rgba(78, 168, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 168, 255, 0); }
}

/* Модалки добавления (событие/локация) — нативный мобильный sheet */
@keyframes sheetUp {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes backdropIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.add-modal {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 12px;
  opacity: 1;
  transition: opacity 0.32s ease;
}
/* Прячем через прозрачность + сдвиг (а не display:none) — чтобы модалка так же
   мягко вылетала вниз при закрытии, как карточки и панели. */
.add-modal.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.46s;
}
/* Плавающая стеклянная плашка — как панель #kinds: круглые углы со всех сторон,
   приподнята над нижним краем, та же тень. */
.add-modal-box {
  background: var(--glass-panel); color: var(--fg, #fff);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-panel-bd);
  border-radius: 18px;
  padding: 18px 18px 22px;
  width: 100%; max-width: 480px;
  max-height: 70vh; overflow-y: auto;
  margin-bottom: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  transform: translateY(0) scale(1);
  transform-origin: 50% 100%;
  opacity: 1;
  transition: transform 0.46s var(--spring), opacity 0.46s ease;
}
.add-modal.hidden .add-modal-box {
  transform: translateY(calc(100% + 60px)) scale(0.96);
  opacity: 0;
}
.add-modal-box h3 { margin: 0 0 14px; font-size: 17px; }
.add-modal-box label { display: block; font-size: 12px; color: #8e8e93; margin: 10px 0 4px; }
.add-modal-box label.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg); }
.add-modal-box input[type="text"], .add-modal-box textarea, .add-modal-box select {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.07); color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 10px 12px;
  font-size: 14px; font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.add-modal-box input[type="text"]:focus,
.add-modal-box textarea:focus,
.add-modal-box select:focus {
  outline: none;
  background: rgba(255,255,255,0.10);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.add-modal-box textarea { min-height: 90px; resize: vertical; }
.add-modal-box .row { display: flex; gap: 10px; }
.add-modal-box .row > * { flex: 1; }
.add-modal-box .add-modal-btns {
  display: flex; gap: 10px; margin-top: 16px;
}
.add-modal-box .add-modal-btns button {
  flex: 1;
  background: rgba(255,255,255,0.08); color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px; padding: 12px 14px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.add-modal-box .add-modal-btns button:active { transform: scale(0.97); }
.add-modal-box .add-modal-btns button.primary {
  background: var(--accent); color: var(--accent-fg); border-color: transparent;
  box-shadow: 0 4px 14px rgba(90,147,184,0.45);
}
.add-modal-note { font-size: 12px; color: #8e8e93; margin: 12px 0 0; }
.add-modal-coords { font-size: 13px; color: var(--fg); margin: 4px 0 8px; }
.add-modal-coords.hidden { display: none; }

/* Модалка добавления локации — фон всегда прозрачный, чтобы видеть карту
   и пин. Сама плашка снизу — pointer-events:auto, фон модалки не ловит клики
   (иначе нельзя тапнуть карту чтобы поставить точку или передвинуть её). */
#add-spot-modal { background: transparent; pointer-events: none; }
#add-spot-modal .add-modal-box { pointer-events: auto; }

/* Красивая булавка-маркер для выбора точки локации */
.spot-pick-pin {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  pointer-events: none;
  animation: spot-pick-drop .35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes spot-pick-drop {
  0%   { transform: translateY(-14px); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* Модалка «кто идёт» */
.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 16px;
  animation: backdropIn 0.2s ease;
}
.modal-box {
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-panel-bd);
  color: var(--card-fg, #fff);
  border-radius: 18px; padding: 18px 18px 14px;
  max-width: 360px; width: 100%;
  max-height: 70vh; overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5);
  animation: popIn 0.3s var(--spring);
}
.modal-box h3 { margin: 0 0 10px; font-size: 17px; }
.modal-box ul.comp-list { list-style: none; padding: 0; margin: 0 0 12px; }
.modal-box ul.comp-list li { padding: 8px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.modal-box ul.comp-list li:last-child { border-bottom: none; }
.modal-box ul.comp-list a { color: var(--accent, #4ea8ff); text-decoration: none; }
.modal-box ul.comp-list a:active { opacity: 0.6; }
.modal-close {
  display: block; margin-left: auto;
  background: var(--accent, #4ea8ff); color: #fff;
  border: none; border-radius: 10px;
  padding: 8px 18px; font-size: 15px; cursor: pointer;
}