:root{
  --bg-paper: #F7F6F3; --bg-paper-alt: #F0EEE8; --bg-card: #FFFFFF;
  --ink: #1B1B1B; --ink-secondary: #6B6B6B;
  --accent-rust: #F2703E; --accent-olive: #F2703E;
  --rule: #ECEAE4; --rule-strong: #DCD8CF;
  --radius: 20px;
}
:root[data-theme="dark"]{
  --bg-paper: #171717; --bg-paper-alt: #1F1F1F; --bg-card: #232323;
  --ink: #F2F0EA; --ink-secondary: #A8A29B;
  --accent-rust: #F2703E; --accent-olive: #F2703E;
  --rule: #333333; --rule-strong: #444444;
}
*{ box-sizing:border-box; }
html, body{
  margin:0; padding:0; min-height:100vh; font-family:'Onest', sans-serif; color: var(--ink);
  background: var(--bg-paper);
  overflow-x:hidden; transition: background .3s ease, color .3s ease;
}

/* аврора отключена — плоский дизайн без свечения/блюра */
.aurora{ display:none; }

.page-wrap, .wrap{
  position:relative; z-index:1; margin: 0 auto;
  padding: 40px 24px 24px; box-sizing:border-box;
  display:flex; flex-direction:column;
}
.page-wrap{ max-width: 1080px; width: 100%; }
.wrap{ max-width: 1080px; width: 100%; }
.card{
  width:100%; flex:1; box-sizing:border-box; display:flex; flex-direction:column;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 20px 40px rgba(27,27,27,0.06);
  padding: 48px 56px; text-align:center;
}
/* На мобильном фиксированные 56px по бокам (в паре с 24px у .page-wrap/.wrap — см.
   ниже) съедали больше половины ширины экрана — списки внутри карточек ("Топ
   путешественников", "Топ-5 стран/городов" и т.д. на /community, формы входа/
   профиля) выглядели неестественно узкой полоской посередине экрана вместо того,
   чтобы использовать почти всю его ширину. Сами карточки и так адаптивны (100%
   ширины контейнера) — тесно было именно из-за паддинга, не из-за макета. */
@media (max-width: 640px){
  .card{ padding: 28px 20px; }
}

/* ===== Навбар сверху ===== */
.top-nav{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding: 8px 0 32px; }
.logo{ font-family:'Onest', sans-serif; font-weight:800; font-size: 20px; letter-spacing:-0.02em; color: var(--ink); text-decoration:none; }
.logo span{ color: var(--accent-rust); }

.tabs{ display:flex; flex-wrap:wrap; gap: 28px; }
.tab-btn{
  padding: 0; min-width: 0; border-radius: 0; border: none; background: transparent;
  color: var(--ink-secondary); text-decoration:none;
  font-family:'Onest', sans-serif; font-weight:500; font-size: 15px;
  cursor:pointer; transition: color .15s;
}
.tab-btn:hover{ color: var(--ink); }
.tab-btn.active{ color: var(--ink); font-weight:600; }

.btn{
  background: var(--accent-rust); color:#fff; border:none; padding: 12px 24px; border-radius: 100px;
  font-family:'Onest', sans-serif; font-weight:600; font-size: 14px; cursor:pointer; text-decoration:none;
  display:inline-block; transition: background .15s, transform .15s;
}
.btn:hover{ background: #D95A2B; transform: translateY(-1px); }

@media (max-width: 720px){
  .tabs{ order:3; width:100%; justify-content:center; gap: 20px; margin-top: 4px; }
}

/* ---- переключатель языка (RU/EN) в шапке раздела "Сообщество" — обычные ссылки на
   /community/set-lang/<lang>, не JS: страница просто перезагружается на нужном языке
   (в отличие от travel.html, где i18n целиком на клиенте, здесь весь текст рендерится
   сервером, так что смена языка — это просто новый запрос с другой cookie). ---- */
.community-lang-switch{ display:flex; gap:6px; }
.community-lang-btn{
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--rule);
  background: var(--bg-card); color: var(--ink-secondary); text-decoration:none;
  font-family:'Onest', sans-serif; font-weight:600; font-size: 12px;
  transition: background .15s, color .15s, border-color .15s;
}
.community-lang-btn:hover{ border-color: var(--accent-rust); }
.community-lang-btn.active{ background: rgba(242,112,62,0.14); border-color: var(--accent-rust); color: var(--accent-rust); }

/* ---- меню пользователя в навбаре (сообщество) — аватар+имя с выпадающим списком
   вместо разрозненных текстовых ссылок "Профиль/Мои города/Выйти", раскиданных
   по разным страницам. Один компонент в общем community_nav.html — виден
   одинаково на всех страницах сообщества. ---- */
.top-nav-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.community-user-menu{ position:relative; }
.community-user-menu-trigger{
  display:flex; align-items:center; gap:8px; border:1px solid var(--rule); background: var(--bg-card);
  border-radius:100px; padding:5px 12px 5px 5px; cursor:pointer; font-family:'Onest', sans-serif;
  font-weight:600; font-size:14px; color: var(--ink); transition: border-color .15s;
}
.community-user-menu-trigger:hover{ border-color: var(--accent-rust); }
.community-user-menu-avatar{
  width:26px; height:26px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:11px; object-fit:cover;
}
.community-user-menu-chevron{ width:14px; height:14px; color: var(--ink-secondary); transition: transform .15s; flex:none; }
.community-user-menu.open .community-user-menu-chevron{ transform: rotate(180deg); }
.community-user-menu-dropdown{
  position:absolute; top: calc(100% + 8px); right:0; min-width:190px; background: var(--bg-card);
  border:1px solid var(--rule); border-radius:14px; box-shadow: 0 12px 32px rgba(27,27,27,0.12);
  padding:6px; display:none; flex-direction:column; gap:1px;
  /* По репорту "дроп меню проваливается под карту" — на страницах с картой
     Leaflet (community-map-card/#user-map/#community-map, ниже в шапке нав-меню)
     z-index:20 не хватало: сама библиотека Leaflet использует transform на своих
     панах для позиционирования тайлов (это само по себе создаёт новый стековый
     контекст, даже без явного z-index — стандартное поведение CSS), из-за чего
     карта на практике перекрывала меню, хотя оба элемента в одном .page-wrap.
     999 — заведомо выше любого внутреннего z-index Leaflet (у него максимум ~700,
     см. .leaflet-popup-pane), больше не должно повториться ни на одной странице
     с картой. */
  z-index:999;
}
.community-user-menu.open .community-user-menu-dropdown{ display:flex; }
.community-user-menu-dropdown a{
  display:block; padding:9px 12px; border-radius:9px; color: var(--ink); text-decoration:none;
  font-size:14px; font-weight:500;
}
.community-user-menu-dropdown a:hover{ background: rgba(242,112,62,0.1); color: var(--accent-rust); }
.community-user-menu-dropdown a.community-user-menu-logout{ color: var(--ink-secondary); }
.community-user-menu-dropdown a.community-user-menu-logout:hover{ background: rgba(192,57,43,0.08); color:#C0392B; }
.community-user-menu-divider{ height:1px; background: var(--rule); margin:5px 2px; }

/* На мобильном (см. FULL_WIDTH_BREAKPOINT в nav_user_menu.html) меню открывается
   на всю ширину экрана вместо узкой плашки у триггера — position:fixed вместо
   absolute (top ставит JS по реальному положению триггера, right:0/min-width:190
   от базового правила тут больше не участвуют). */
.community-user-menu-dropdown.full-width{ position:fixed; left:16px; right:16px; min-width:0; }
.community-user-menu-dropdown.full-width a{ padding:13px 14px; font-size:15px; }

/* Раньше на узких экранах RU/EN/Билеты/меню-профиля не помещались в один ряд и
   переносились на вторую строку — из-за этого триггер меню съезжал к левому краю
   экрана, и выпадающее меню (жёстко привязанное правым краем к триггеру) съезжало
   за левую границу экрана вместе с ним. Правильный фикс — не подгонять позицию
   меню под перенос, а вообще не давать блоку переноситься: несколько мельче
   отступы/шрифт у пилюль на мобильном — и всё влезает в одну строку, как и было
   задумано, а правый край триггера остаётся справа, где меню (right:0) и
   рассчитано появляться. */
@media (max-width: 480px){
  /* Без overflow-x:auto — он неявно ставит и overflow-y:auto (так работает CSS,
     когда одна ось overflow не 'visible', а другая — да), из-за чего выпадающее
     меню профиля (оно visually "торчит" ниже этой строки через position:absolute)
     обрезалось по высоте этого же ряда и переставало быть видимым при открытии. */
  .top-nav-actions{ flex-wrap:nowrap; gap:6px; width:100%; justify-content:space-between; }
  .community-lang-switch{ gap:4px; flex:none; }
  .community-lang-btn{ padding:5px 8px; font-size:11px; white-space:nowrap; }
  .top-nav-actions .btn{ padding:8px 14px; font-size:13px; white-space:nowrap; flex:none; }
  .community-user-menu{ flex:none; min-width:0; }
  .community-user-menu-trigger{ padding:4px 8px 4px 4px; font-size:13px; gap:6px; white-space:nowrap; }
  .community-user-menu-avatar{ width:22px; height:22px; font-size:10px; }
  .community-user-menu-chevron{ width:12px; height:12px; }
}

.tab-panel{ margin-top: 0; min-height: 260px; display:none; }
#tab-notes, #tab-about{ text-align:left; }
.tab-panel.active{ display:block; }
.notes-placeholder{ color: var(--ink-secondary); font-size: 14px; text-align:center; padding: 90px 0; font-style:italic; }

/* ===== Hero ===== */
.hero{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items:center; padding: 24px 0 0; text-align:left; }
.eyebrow-row{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.eyebrow{
  color: var(--accent-rust); font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:0.06em; margin-bottom:0;
}
/* Бейдж "Сейчас в пути" — ручной переключатель из локальной админки (см.
   site_status_storage.py), не постоянный элемент дизайна, поэтому оформлен как
   лёгкая пилюля, а не встроен в сам eyebrow-текст. */
.trip-status-badge{
  display:inline-flex; align-items:center; gap:6px; background: rgba(242,112,62,0.1);
  color: var(--accent-rust); font-size:12px; font-weight:600; padding:5px 12px; border-radius:100px;
}
.trip-status-badge b{ color: var(--accent-rust); font-weight:800; }
.hero h1{
  font-family:'Onest', sans-serif; font-size: 40px; line-height:1.14; font-weight:800;
  letter-spacing:-0.02em; margin: 0 0 20px;
}
.hero p{ font-size:16px; line-height:1.6; color: var(--ink-secondary); max-width:440px; margin:0 0 28px; text-align:justify; }
.hero-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.stat-pill{ display:flex; align-items:center; gap:8px; font-size:14px; color: var(--ink-secondary); }
.stat-pill b{ color: var(--ink); font-size:16px; }

.hero-art{ position:relative; height: 380px; }
.art-block{
  position:absolute; border-radius: 24px; box-shadow: 0 24px 48px rgba(27,27,27,0.20);
  display:flex; align-items:flex-end; padding:16px; color:#fff; font-weight:600; font-size:14px;
  background-size:cover; background-position:center; background-color: var(--bg-paper-alt);
  text-decoration:none; border: 3px solid var(--bg-paper);
  box-sizing: border-box; transition: border-color .15s;
}
.art-block:hover{ border-color: var(--accent-rust); }
.art-1{ width:210px; height:270px; left:0; top:60px; background-image: linear-gradient(160deg,#e0762f,#8a3d1f); z-index:1; }
.art-2{
  width:250px; height:310px; right:0; top:0; background-image: linear-gradient(160deg,#3a5a6b,#1c2d36); z-index:2;
  box-shadow: 0 28px 56px rgba(27,27,27,0.28);
}
.art-block span{ background: rgba(0,0,0,0.45); padding:6px 12px; border-radius:100px; }
@media (max-width: 780px){
  .hero{ grid-template-columns: 1fr; }
  .hero-art{ display:none; }
}

/* ===== Последние заметки ===== */
.notes-section{ padding-bottom: 56px; }
.section-title-row{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom: 24px; }
.notes-section-heading{ font-family:'Onest', sans-serif; font-size: 26px; font-weight:800; letter-spacing:-0.01em; margin: 0 0 6px; }
.section-sub{ color: var(--ink-secondary); font-size:14px; margin:0; }
/* Ссылка справа от заголовка секции (сейчас только у "Последние активности" →
   "Челленджи месяца", .section-title-row и так flex+space-between, второй
   ребёнок сам встаёт вправо) — по просьбе "давай вернемся к челленджам по
   активности". */
.section-title-link{ font-size:13px; font-weight:700; color: var(--accent-rust); text-decoration:none; white-space:nowrap; align-self:center; }
.section-title-link:hover{ text-decoration:underline; }

.note-preview-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.note-preview-card{
  display:block; background: var(--bg-card); border-radius: 18px; overflow:hidden; border: 1px solid var(--rule);
  text-decoration:none; color:inherit; box-shadow: 0 8px 24px rgba(27,27,27,0.04);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.note-preview-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,27,27,0.08); }
.note-preview-photo{ height:150px; background-size:cover; background-position:center; filter: saturate(0.96); }
.note-preview-body{ padding:16px; }
.note-preview-title{ font-family:'Onest', sans-serif; font-weight:700; font-size:15.5px; margin:0 0 4px; }
.note-preview-meta{ font-size:12.5px; color: var(--ink-secondary); display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.note-preview-meta .dot{ color: var(--accent-rust); }
.note-preview-btn{
  display:block; width:100%; box-sizing:border-box; background: var(--accent-rust); color:#fff;
  padding:10px; border-radius:100px; font-weight:600; font-size:13px;
  font-family:'Onest', sans-serif; text-align:center;
}

/* ===== Последнее видео (главная) — та же сетка карточек, что "Последние заметки"
   (.note-preview-grid/.note-preview-card), только ведёт сразу на YouTube. ===== */
.latest-video-section{ padding-bottom: 56px; }
.latest-video-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.latest-video-card{
  display:block; background: var(--bg-card); border-radius: 18px; overflow:hidden; border: 1px solid var(--rule);
  text-decoration:none; color:inherit; box-shadow: 0 8px 24px rgba(27,27,27,0.04);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.latest-video-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,27,27,0.08); }
.latest-video-thumb{
  height:150px; background-size:cover; background-position:center; background-color: var(--bg-paper-alt);
  filter: saturate(0.96); display:flex; align-items:center; justify-content:center;
}
.latest-video-play{
  width:40px; height:40px; border-radius:50%; background: rgba(0,0,0,0.55); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px; padding-left:2px;
}
.latest-video-body{ padding:16px; }
.latest-video-title{ font-family:'Onest', sans-serif; font-weight:700; font-size:15.5px; margin:0 0 4px; }
.latest-video-meta{ font-size:12.5px; color: var(--ink-secondary); display:flex; align-items:center; gap:6px; }
.latest-video-meta .dot{ color: var(--accent-rust); }

/* ===== "Последние активности" (главная) — по отзыву "сделай как в моей
   активности только вместо видно всем аватар пользователя": та же самая карточка
   .activity-card/-top/-category-badge/-title/-date/-stats, что уже используется на
   странице "Моя активность" (community_user.html/community_activities.html), а не
   отдельный фото-превью стиль как у заметок/видео — здесь эти карточки со всех
   пользователей сразу, поэтому вместо .activity-visibility-badge ("Видно всем",
   не несёт смысла — тут и так показаны только is_public) в .activity-card-top
   справа стоит аватар/инициалы автора активности. ===== */
.latest-activity-section{ padding-bottom: 56px; }
.latest-activity-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:20px; }
.activity-card-owner-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.activity-card-owner-initials{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}

.notes-intro{
  text-align:left; margin: 0 0 32px; padding: 0;
}
.notes-intro-title{ font-family:'Onest', sans-serif; font-weight:800; font-size: 22px; margin-bottom: 14px; }
.notes-intro p{ color: var(--ink-secondary); font-size: 15px; line-height:1.7; margin: 0 0 12px; text-align:justify; }
.notes-intro p:last-child{ margin-bottom: 0; }
.notes-intro strong{ color: var(--ink); font-weight:600; }

.notes-intro-photos{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px;
}
.notes-intro-photo{
  position:relative; border-radius:14px; overflow:hidden; display:block;
}
.notes-intro-photo img{
  width:100%; aspect-ratio: 1 / 1; object-fit:cover; display:block; filter: saturate(0.96);
}
.notes-intro-photo-label{
  position:absolute; left:10px; bottom:10px; max-width: calc(100% - 20px);
  background: rgba(0,0,0,0.45); color:#fff; padding:6px 12px; border-radius:100px;
  font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* На узком экране 3 равные колонки сжимали каждое фото до ~100px, а подпись-пилюля
   (название города) обрезалась многоточием почти сразу ("Ог…", "Бу…" вместо "Огре",
   "Бухарест") — фото в таком виде смотреть было бессмысленно. Две колонки вместо
   трёх дают фото вдвое больше места, подписи снова помещаются целиком; если имя
   всё равно окажется длиннее — пилюля переносится на вторую строку, а не режется. */
@media (max-width: 560px){
  .notes-intro-photos{ grid-template-columns: repeat(2, 1fr); }
  .notes-intro-photo-label{ white-space:normal; text-overflow:clip; line-height:1.3; }
}

.subtabs{ display:flex; flex-wrap:wrap; justify-content:center; gap: 8px; margin-bottom: 24px; }
.subtabs .tab-btn{
  min-width:0; padding: 10px 18px; border-radius: 100px; background: var(--bg-paper-alt);
  color: var(--ink-secondary); font-weight:600; font-size: 13px; letter-spacing:0.01em;
  transition: color .15s, background .15s;
}
.subtabs .tab-btn:hover{ color: var(--ink); }
.subtabs .tab-btn.active{ background: var(--bg-card); color: var(--ink); box-shadow: 0 2px 8px rgba(27,27,27,0.08); border: 1px solid var(--rule); }
.region-panel, .country-panel{ display:none; }
.region-panel.active, .country-panel.active{ display:block; }
/* "Заметки" -> Города/Места (см. home.html #tab-notes) — тот же приём переключения
   через display:none/active, что и у region-panel/country-panel на уровень ниже. */
.notes-type-panel{ display:none; }
.notes-type-panel.active{ display:block; }

/* ===== Текст с заголовками/списками (доп. информация, инфо о стране) ===== */
.country-info{
  padding: 0; margin-bottom: 24px; line-height:1.7;
  font-size: 14px; color: var(--ink-secondary); text-align:left;
}
.country-info strong{ font-weight: inherit; color: var(--ink); }
.country-info .rich-text-heading{ font-weight: inherit; }
/* По свежей просьбе выровнено по ширине — сперва только в заметках о городе, теперь
   по всему проекту: любой блок с классом .rich-text (заметки, "Доп. информация",
   инфо о стране, FAQ "О сайте" на главной — все они его используют) плюс отдельно
   вводные абзацы, у которых своего .rich-text нет (.notes-intro/.community-header
   ниже). text-align наследуется, так что .rich-text-paragraph (вложенные <p> внутри
   .rich-text в блоке "О сайте") подхватывают justify автоматически, без своего
   правила. */
.rich-text{ font-size: 15px; line-height: 1.7; color: var(--ink-secondary); text-align:justify; }
.rich-text-heading{
  font-family:'Onest', sans-serif; font-weight:700; font-size: 17px;
  color: var(--ink); margin: 18px 0 8px;
}
.rich-text-heading:first-child{ margin-top: 0; }
.rich-text-paragraph{ margin: 0 0 14px; }
.rich-text-paragraph:last-child{ margin-bottom: 0; }
.rich-text-list{ margin: 0 0 12px; padding-left: 22px; }
.rich-text-list li{ margin-bottom: 8px; }
.rich-text-list li:last-child{ margin-bottom: 0; }
.rich-text strong{ color: var(--ink); }
/* Ссылки внутри текста (раздел "О сайте" и т.п.) без этого правила брали цвет
   ссылки по умолчанию у браузера — на тёмной теме "посещённая" ссылка (обычно
   тускло-фиолетовая) почти сливалась с тёмным фоном карточки и была нечитаема
   (реальный баг — ссылки на Telegram/Google Карты пропадали в dark theme). */
.rich-text a{ color: var(--accent-rust); text-decoration: underline; text-underline-offset: 2px; }
.rich-text a:visited{ color: var(--accent-rust); }
.rich-text a:hover{ opacity: .85; }

/* ===== Список городов — карточки ===== */
.note-card{
  display:flex; align-items:flex-start; gap: 16px; padding: 14px; border-radius: 16px; background: var(--bg-card);
  border: 1px solid var(--rule); margin-bottom: 10px; text-decoration:none; color: inherit;
  transition: box-shadow .15s, border-color .15s;
}
.note-card:hover{ box-shadow: 0 12px 28px rgba(27,27,27,0.08); border-color: var(--accent-rust); color: inherit; }
.note-card:last-child{ margin-bottom: 0; }
.note-card-thumb{
  width: 76px; height: 76px; object-fit: cover; flex-shrink: 0; border-radius: 12px;
  filter: saturate(0.96);
}
.note-card-body{ min-width: 0; }
.note-location{ font-family:'Onest', sans-serif; font-weight:700; font-size: 18px; margin-bottom: 4px; }
.note-text{
  color: var(--ink-secondary); font-size: 14px; line-height:1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.country-notes-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 4px;
}
@media (max-width: 860px){ .country-notes-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .country-notes-grid{ grid-template-columns: 1fr; } }
.city-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px; overflow:hidden;
  transition: box-shadow .15s, border-color .15s;
}
.city-card:hover{ box-shadow: 0 16px 32px rgba(27,27,27,0.10); border-color: var(--accent-rust); }
.city-card-photo{
  width:100%; aspect-ratio: 4 / 3; object-fit:cover; display:block;
  filter: saturate(0.96);
}
.city-card-body{ padding: 14px 16px 16px; }
.city-card-eyebrow{
  font-family:'Onest', sans-serif; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--accent-rust); font-weight:700; margin-bottom: 6px;
}
.city-card-title{
  font-family:'Onest', sans-serif; font-weight:700; font-size: 18px; color: var(--ink);
  transition: color .15s;
}
.city-card:hover .city-card-title{ color: var(--accent-rust); }
.city-card-meta{ font-family:'Onest', sans-serif; font-size:13px; color: var(--ink-secondary); margin-top: 6px; }

/* ===== Бегущая строка городов + бейджи App Store/Google Play в один ряд — по
   просьбе "если мы этот блок делим на 2, слева анимационный листинг городов,
   справа кнопки" (14.08.2026). margin:48px 0 переехал сюда, на строку целиком —
   .cities-ticker раньше сама была самодостаточным блоком с этим отступом, теперь
   она только левая половина ряда. ===== */
.cities-ticker-row{ display:flex; align-items:center; gap:28px; margin: 48px 0; }
.cities-ticker{
  flex:1; min-width:0; overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.cities-ticker-apps{ display:flex; flex:none; gap:10px; }
@media (max-width: 720px){
  .cities-ticker-row{ flex-direction:column; align-items:flex-start; gap:16px; }
  .cities-ticker{ width:100%; }
}
.ticker-track{
  display:inline-flex; gap:12px; white-space:nowrap; width:max-content;
  font-family:'Onest', sans-serif; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--ink-secondary);
  /* Раньше был фиксированный 130s под фиксированный список ~48 стран. Теперь строка
     строится из городов сообщества (см. routes_personal_site._community_travel_stats) —
     их число может быть каким угодно и будет расти, так что скорость держим постоянной
     (секунд на город), а не фиксированную длительность на весь круг — иначе чем больше
     сообщество, тем быстрее и рывками бежала бы строка. Длительность приходит через
     --ticker-duration (см. home.html, там же нижняя граница на случай совсем короткого
     списка, чтобы не пробегал круг слишком резко). */
  animation: ticker-scroll var(--ticker-duration, 130s) linear infinite;
}
.ticker-track .dot{ color: var(--accent-rust); opacity:0.7; }
@keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.countries-count{
  margin-top: 24px; font-family:'Onest', sans-serif; font-size: 13px;
  letter-spacing:0.04em; text-transform:uppercase; color: var(--ink-secondary); font-weight:600;
}
.countries-count span{ color: var(--accent-rust); font-weight:800; }

.country-flags{ margin-top: 20px; display:flex; justify-content:center; flex-wrap:wrap; gap: 4px; }
.flag-badge{
  display:block; width:24px; height:18px; border-radius:5px; object-fit:cover;
}

/* ===== Полоса подписки на Telegram (главная) ===== */
.telegram-banner{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px; padding: 20px 24px;
  margin: 32px 0; text-decoration:none; color:inherit; transition: border-color .15s, box-shadow .15s;
}
.telegram-banner:hover{ border-color: var(--accent-rust); box-shadow: 0 16px 32px rgba(242,112,62,0.10); }
.telegram-banner-icon{
  flex-shrink:0; width:44px; height:44px; border-radius:50%; background: rgba(242,112,62,0.12);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.telegram-banner-text{ flex:1; min-width:200px; }
.telegram-banner-title{ font-family:'Onest', sans-serif; font-weight:700; font-size:15px; }
.telegram-banner-sub{ font-size:13px; color: var(--ink-secondary); margin-top:3px; line-height:1.5; }
.telegram-banner-cta{
  flex-shrink:0; background: var(--accent-rust); color:#fff; padding:10px 20px; border-radius:100px;
  font-family:'Onest', sans-serif; font-weight:600; font-size:13px;
}

/* ===== Тизер сообщества (главная) ===== */
.community-teaser{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px; padding: 18px 24px;
  margin-bottom: 32px; text-decoration:none; color:inherit; transition: border-color .15s, box-shadow .15s;
}
.community-teaser:hover{ border-color: var(--accent-rust); box-shadow: 0 16px 32px rgba(242,112,62,0.10); }
.community-teaser-left{ display:flex; align-items:center; gap:14px; }
.community-avatar-stack{ display:flex; flex-shrink:0; }
.community-avatar{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--bg-card); margin-left:-10px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
  object-fit:cover; flex:none; box-sizing:border-box;
}
.community-avatar:first-child{ margin-left:0; }
.community-avatar-more{ background: var(--bg-paper-alt); color: var(--ink-secondary); }
.community-teaser-title{ font-family:'Onest', sans-serif; font-weight:700; font-size:15px; }
.community-teaser-sub{ font-size:13px; color: var(--ink-secondary); margin-top:2px; }
.community-teaser-cta{ flex-shrink:0; font-family:'Onest', sans-serif; font-weight:600; font-size:13px; color: var(--accent-rust); }

.project-link{
  display:block; max-width: 440px; margin: 32px auto 0; padding: 20px 24px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--rule); text-decoration:none; color: var(--ink);
  box-shadow: 0 20px 40px rgba(27,27,27,0.06);
  transition: border-color .15s, box-shadow .15s;
}
.project-link:hover{ border-color: var(--accent-rust); box-shadow: 0 20px 40px rgba(242,112,62,0.14); }
.project-link .pl-title{ font-family:'Onest', sans-serif; font-weight:700; font-size:18px; }
.project-link .pl-sub{ font-family:'Onest', sans-serif; font-size:11px; color: var(--ink-secondary); margin-top:6px; letter-spacing:0.04em; }

/* ===== Страница города ===== */
.breadcrumb{ font-size:13px; color: var(--ink-secondary); margin: 4px 0 20px; }
.breadcrumb a{ color: var(--ink-secondary); text-decoration:none; }
.breadcrumb a:hover{ color: var(--accent-rust); }
.breadcrumb .sep{ margin: 0 6px; }

.hero-photo{
  height: 320px; border-radius: 24px; background-size:cover; background-position:center;
  position:relative; display:flex; align-items:flex-end; padding: 28px; margin-bottom: 32px;
  box-shadow: 0 20px 40px rgba(27,27,27,0.14); cursor:pointer; box-sizing:border-box;
}
.hero-photo-empty{
  background: linear-gradient(160deg, var(--accent-rust), #8a3d1f); cursor:default;
}
.hero-photo h1{ color:#fff; margin:0; }
.hero-photo .country-tag{
  /* Плашка всегда светлая — задумана как читаемая подпись поверх ЛЮБОГО фото,
     а не элемент, подстраивающийся под тему сайта. Поэтому цвет текста
     фиксированный (тёмный), а не var(--ink): в тёмной теме var(--ink) становится
     почти белым и совпадает с фоном плашки — подпись страны исчезает (реальный
     баг: "Bosnia and Herzegovina" был невидим в тёмной теме). */
  position:absolute; top:20px; left:20px; background: rgba(255,255,255,0.92); color: #1B1B1B;
  padding: 6px 14px; border-radius: 100px; font-size:12px; font-weight:700;
  font-family:'Onest', sans-serif; letter-spacing:0.02em;
}
@media (max-width: 640px){
  .hero-photo{ height: 220px; padding: 20px; }
}

.intro{ font-size:17px; line-height:1.7; margin-bottom: 36px; color: var(--ink-secondary); }

.video-wrap{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius: 20px; margin: 0 0 36px; border: 1px solid var(--rule); }
.video-wrap iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

.section{ margin-bottom: 40px; }
.section-head{ display:flex; align-items:center; gap:10px; margin-bottom: 18px; }
.section-icon{
  width:36px; height:36px; border-radius:10px; background: var(--bg-paper-alt); color: var(--accent-rust);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.section-title{
  font-family:'Onest', sans-serif; font-weight:800; font-size: 20px; color: var(--ink); margin:0;
}
/* Тот же размер шрифта, что у общего вводного текста заметки (.intro выше) — по
   просьбе, чтобы текст раздела визуально не отличался от него (был мельче, 15px
   против 17px). По свежей просьбе текст раздела теперь стоит ПОСЛЕ списка мест
   (было — до него, прямо под заголовком раздела), поэтому отступ теперь сверху
   (от последней карточки места), а не снизу. */
.section-intro{ font-size:17px; line-height:1.7; color: var(--ink-secondary); margin: 24px 0 0; }
/* Если в разделе вообще нет мест (заголовок скрыт, см. note.html) — этот текст
   единственное содержимое .section. Обнуляем его верхний отступ, иначе он
   складывается с margin-bottom предыдущего раздела (40px) и получается
   заметная пустая дыра перед текстом без всякого заголовка. */
.section-intro--standalone{ margin-top: 0; }

.place-list{ display:flex; flex-direction:column; gap: 12px; }
.place-card{
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 20px;
  text-decoration:none; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.place-card:hover{ border-color: var(--accent-rust); }
.place-name{ color: var(--ink); font-weight:700; font-size:15px; margin-bottom: 8px; }
.place-links{ display:flex; flex-wrap:wrap; gap: 16px; margin-bottom: 8px; }
.place-links a{ color: var(--accent-rust); text-decoration:none; font-size:13px; font-weight:600; }
.place-links a:hover span{ text-decoration: underline; }
.place-note{ color: var(--ink-secondary); font-size:14px; line-height:1.6; }
.similar-note-link{ font-weight:700; color: var(--ink); }
.similar-note-link:hover{ color: var(--accent-rust); }

.extra-info{
  background: #FDE9DF; border-radius: 16px; padding: 20px 22px; color: #7A3A17;
  font-size:14px; line-height:1.7;
}
:root[data-theme="dark"] .extra-info{ background: #3A2418; color: #F5C7AE; }
.extra-info strong{ color: inherit; }

.next-city-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top: 8px; padding: 22px 24px; background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--radius); text-decoration:none;
  transition: border-color .15s, box-shadow .15s;
}
.next-city-nav:hover{ border-color: var(--accent-rust); box-shadow: 0 16px 32px rgba(242,112,62,0.10); }
.next-city-label{
  display:block; font-family:'Onest', sans-serif; font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase; color: var(--ink-secondary); margin-bottom:4px;
}
.next-city-name{
  font-family:'Onest', sans-serif; font-weight:700; font-size:20px; color: var(--ink);
  transition: color .15s;
}
.next-city-nav:hover .next-city-name{ color: var(--accent-rust); }
.next-city-arrow{ font-size:24px; color: var(--accent-rust); flex-shrink:0; }

.community-city-section{ margin-top: 48px; } /* та же дистанция, что от фото до блока "Следующий город" (.section margin-bottom:40 + .next-city-nav margin-top:8) — next-city-nav своего margin-bottom не имеет, весь отступ до этого блока даёт именно margin-top */
.community-city-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px;
}
.community-city-col .section-head{ margin-bottom: 8px; }
.community-city-col .section-title{ font-size:16px; }
.community-city-cta{ font-size:12.5px; color: var(--ink-secondary); margin: 14px 4px 0; }
.community-city-cta a{ color: var(--accent-rust); text-decoration:none; }
.community-city-cta a:hover{ text-decoration:underline; }
@media (max-width:640px){
  .community-city-grid{ grid-template-columns: 1fr; gap: 20px; }
}

.photo-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:8px; margin-top: 8px; }
.photo-grid img{ width:100%; height:120px; object-fit:cover; border-radius: 14px; display:block; filter: saturate(0.96); }
.lightbox-thumb{
  cursor:pointer; transition: opacity .15s, border-color .15s; border: 2px solid transparent; box-sizing: border-box;
}
.lightbox-thumb:hover{ opacity: 0.85; border-color: var(--accent-rust); }
.lightbox{
  display:none; position:fixed; inset:0; z-index:10; background: rgba(20,16,10,0.94);
  align-items:center; justify-content:center; padding: 40px; box-sizing:border-box; cursor:zoom-out;
}
.lightbox.open{ display:flex; }
.lightbox-frame{
  border-radius: 16px; overflow:hidden; box-shadow: 0 12px 48px rgba(0,0,0,0.5);
  background: rgba(255,255,255,0.04);
}
.lightbox img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Единый формат рамки для всех фото одной ориентации — чтобы при перелистывании
   фото не "прыгали" каждое в своём случайном размере/пропорции. */
.lightbox-landscape .lightbox-frame{ width: min(90vw, 1100px); aspect-ratio: 4 / 3; max-height: 85vh; }
.lightbox-portrait .lightbox-frame{ height: min(85vh, 1100px); aspect-ratio: 3 / 4; max-width: 90vw; }

.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:11;
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(255,255,255,0.12); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.22); }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
@media (max-width: 640px){
  .lightbox-nav{ width:40px; height:40px; font-size:22px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
}

/* ===== Кнопка темы, соцссылки, дисклеймер ===== */
.theme-btn{
  position:fixed; top:24px; right:24px; z-index:2; width:36px; height:36px; border-radius:50%;
  background: var(--bg-card); border: 1px solid var(--rule); color: var(--ink);
  box-shadow: 0 4px 12px rgba(27,27,27,0.08); padding:0;
  cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
}
@media (max-width: 720px){
  .theme-btn{ top: auto; bottom: 20px; right: 20px; }
}
.social-links{ display:flex; justify-content:center; gap: 12px; }
.persistent-footer{ margin-top: 8px; padding-top: 8px; }
.social-links a{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  background: var(--bg-card); border: 1px solid var(--rule); color: var(--ink-secondary);
  transition: border-color .15s, color .15s, transform .15s;
}
.social-links a svg{ width:16px; height:16px; }
.social-links a:hover{ border-color: var(--accent-rust); color: var(--accent-rust); transform: translateY(-2px); }
/* По просьбе "расшить в конце концов его по ширине проекта" — раньше max-width
   был 640px, при том что весь остальной контент страницы идёт на всю ширину
   .page-wrap (1080px): дисклеймер оставался узкой центрированной колонкой на фоне
   широких карточек над ним. Выровнял max-width под .page-wrap и text-align под
   .community-header p (justify, не center — так длинный текст читается ровнее). */
.legal-footer{
  width: 100%; max-width: 1080px; box-sizing: border-box;
  text-align:justify; font-size: 11px; color: var(--ink-secondary);
  line-height:1.7; margin: 32px auto 0; padding: 24px 12px 0;
  border-top: 1px solid var(--rule);
}

/* ===== Сообщество (/community) — вход, профиль, список участников =====
   Только var(--...) — тёмная тема работает автоматически, ничего отдельно
   настраивать не нужно. */
.community-header{ text-align:left; padding: 24px 0 0; }
.community-header .eyebrow{ margin-bottom:12px; }
/* Такая же надпись-"эйбрау", как на Главной/в Сообществе, теперь и на вкладках
   "Заметки"/"О нас" (home.html, #tab-notes/#tab-about) — раньше начинались сразу
   с содержимого, без этой опознавательной метки сверху. У этих вкладок сразу
   под меткой идёт другой контент (карта/список стран или сама FAQ), а не h1,
   поэтому отступ снизу свой, а не 0 по умолчанию из .eyebrow. */
#tab-notes > .eyebrow, #tab-about > .eyebrow{ margin-bottom:20px; }
.community-header h1{
  font-family:'Onest', sans-serif; font-size: 36px; font-weight:800;
  letter-spacing:-0.02em; margin: 0 0 10px;
}
.community-header p{ font-size:16px; line-height:1.6; color: var(--ink-secondary); max-width:560px; margin:0 0 24px; text-align:justify; }
.community-inline-link{ color: var(--accent-rust); font-weight:600; font-size:14px; text-decoration:none; }
.community-inline-link:hover{ text-decoration:underline; }

/* community_user.html — публичный профиль, редизайн по мокапу "используя наш
   профиль". История: шапка во всю ширину с пустым местом справа ("справа
   вообще пусто в профиле"), компактная статистика в шапке ("фу фу... вообще не
   нравится"), узкая боковая "визитка" 280px + Дома/Города/Страны тремя
   карточками под картой, затем герой+сайдбар единой сеткой НА ВСЮ ВЫСОТУ
   страницы (сайдбар sticky, тянется вдоль всего списка городов) — по репорту
   "теперь эту часть сделай на всю ширину страницы" (13.08.2026, карта и плитки
   городов были сжаты до ширины левой колонки, 3 плитки в ряд вместо 4). Теперь:
   .community-profile-layout — сетка ТОЛЬКО для героя и сайдбара (одна строка),
   вкладки с картой/списком городов — уже ВНЕ этой сетки, на всю ширину
   страницы. Сайдбар высотой с герой, никакого sticky/скролла ему тут больше не
   нужно. */
.community-profile-hero{ padding:0; overflow:hidden; }
.community-profile-hero-banner{
  height:120px; background:
    linear-gradient(120deg, var(--bg-paper), var(--bg-card));
}
.community-profile-hero-banner svg{ width:100%; height:100%; display:block; opacity:.55; }
.community-profile-hero-body{ padding:24px 32px 32px; position:relative; text-align:left; }
/* .community-profile-hero-avatar-wrap — обёртка вокруг аватара, нужна только
   ради бейджа с местом в рейтинге (.community-profile-rank-badge), который
   раньше был отдельной карточкой "Место в сообществе" в сайдбаре — по просьбе
   "блок... убери а просто место поставь рядом с аватаром" (13.08.2026) теперь
   маленький бейдж поверх нижнего правого края аватара. Отрицательный margin-top
   (нахлёст на баннер) переехал СЮДА, с самого аватара — иначе бейдж, будучи
   position:absolute относительно этой обёртки, а не самого аватара, не сдвинулся
   бы вместе с ним. */
.community-profile-hero-avatar-wrap{ position:relative; display:inline-block; margin-top:-48px; }
.community-profile-hero-avatar.community-profile-avatar-img,
.community-profile-hero-avatar.community-profile-avatar-big{
  width:96px; height:96px; font-size:30px; margin:0;
  border:4px solid var(--bg-card); display:flex;
}
/* left вместо right — по просьбе "аватар и место верни налево как было"
   (13.08.2026), бейдж на левый нижний край аватара, не на правый. */
.community-profile-rank-badge{
  position:absolute; left:-6px; bottom:-6px; min-width:30px; height:30px; padding:0 6px;
  border-radius:999px; background: var(--accent-rust); color:#fff; border:3px solid var(--bg-card);
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
/* Кнопка "Изменить профиль" раньше была отдельной кнопкой в правом верхнем углу
   .community-profile-hero-body (текстовая, position:absolute) — по просьбе
   "изменить профиль сделай под автаром справа иконку карандаша" (13.08.2026)
   теперь кружок с карандашом поверх нижнего ПРАВОГО края аватара, зеркально к
   .community-profile-rank-badge (тот слева). Своя обёртка не нужна — уже внутри
   .community-profile-hero-avatar-wrap, той же position:relative, что и у
   rank-badge. */
.community-profile-edit-badge{
  position:absolute; right:-6px; bottom:-6px; width:30px; height:30px;
  border-radius:999px; background: var(--bg-card); color: var(--ink-secondary);
  box-shadow: 0 4px 10px rgba(27,27,27,0.18);
  display:flex; align-items:center; justify-content:center; text-decoration:none;
}
.community-profile-edit-badge:hover{ color: var(--accent-rust); }
.community-profile-edit-badge .ti-icon{ width:15px; height:15px; }
.community-profile-hero-body .eyebrow{ margin-top:16px; }
.community-profile-hero-body h1{ font-size:22px; margin:0 0 4px; }
.community-profile-sidebar-username{ font-size:13.5px; color: var(--ink-secondary); margin:0 0 6px; }
/* Бэйджи золото/серебро/бронза по месяцам под юзернеймом — по просьбе "под
   username сделай бэйджи по активностям... золото серебро бронза, 12 в ряд за
   каждый месяц" (13.08.2026). 12 кружков (январь-декабрь), flex-wrap на всякий
   случай — на десктопе умещаются в один ряд (12*34px + 11*6px ≈ 474px, герой
   заметно шире), на совсем узких телефонах перенесутся на вторую строку. */
.community-profile-medals{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.community-profile-medal{
  width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  font-family:'Onest', sans-serif; font-size:10.5px; font-weight:700; text-transform:uppercase;
  color: var(--ink-secondary); background: var(--bg-paper); border:1px solid var(--rule);
}
.community-profile-medal-gold{ background:#F4C430; border-color:#F4C430; color:#5B4400; }
.community-profile-medal-silver{ background:#C7CBD1; border-color:#C7CBD1; color:#3A3E44; }
.community-profile-medal-bronze{ background:#CD8B4E; border-color:#CD8B4E; color:#452408; }
/* text-align:justify — как везде на сайте для абзацев био/текста (.hero p,
   .notes-intro p, .rich-text, .community-header p и т.д.), по просьбе "текст в
   профиле как и везде justify" (13.08.2026) — раньше тут был явный override на
   left. */
.community-profile-hero-body .community-profile-bio{ max-width:none; text-align:justify; margin:8px 0 0; }
.community-profile-hero-tag{
  font-size:13px; font-weight:600; padding:6px 14px; border-radius:999px;
  background: rgba(242,112,62,0.12); color: var(--accent-rust);
}
.community-profile-hero-body .community-profile-social{ justify-content:flex-start; margin:16px 0 0; }

/* minmax(220px,300px) вместо жёсткого 300px — сайдбар сам сужается на более узких
   ноутбучных окнах (см. ниже, порог схлопывания в одну колонку теперь 560px, а
   не 860px — по отзыву "жду две колонки рядом" на ноутбуке: 860px шире, чем
   бывает НЕ развёрнутое на весь экран окно браузера на ноутбуке, поэтому сетка
   схлопывалась даже там, где реально места достаточно). */
.community-profile-layout{ display:grid; grid-template-columns: minmax(0,1fr) minmax(220px,300px); gap:32px; align-items:start; margin-bottom:24px; }
.community-profile-sidebar-new{ display:flex; flex-direction:column; gap:16px; }
.community-profile-side-card{ text-align:left; padding:22px 24px; }
.community-profile-side-card-title{ font-size:13px; font-weight:700; color: var(--ink-secondary); margin:0 0 8px; }
.community-profile-side-card-sub{ font-size:12.5px; color: var(--ink-secondary); margin:0 0 14px; }
.community-profile-side-card-num{ font-size:26px; font-weight:800; color: var(--accent-rust); margin:0; }
.community-challenge-bars{ display:flex; flex-direction:column; gap:12px; }
.community-challenge-bar-head{ display:flex; align-items:baseline; justify-content:space-between; font-size:13px; margin-bottom:4px; }
.community-challenge-bar-val{ font-weight:700; }
.community-challenge-bar-track{ height:6px; border-radius:999px; background: var(--bg-paper); overflow:hidden; }
.community-challenge-bar-fill{ height:6px; border-radius:999px; background: var(--accent-rust); }
.community-challenge-bars-link{ display:inline-block; margin-top:16px; font-size:13px; }
.community-profile-stats-mini{ display:flex; align-items:baseline; justify-content:space-between; }
.community-profile-stats-mini-label{ font-size:13px; color: var(--ink-secondary); }
.community-profile-stats-mini-num{ font-size:18px; font-weight:800; margin-left:8px; }
.community-profile-countries-bar-track{
  position:relative; height:32px; border-radius:999px; background: var(--bg-paper);
  overflow:hidden; margin:4px 0 10px;
}
.community-profile-countries-bar-fill{ height:100%; border-radius:999px; }
.community-profile-countries-bar-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; white-space:nowrap;
}
.community-profile-countries-caption{ margin:0; text-align:center; }
/* Теги 🏠 домов/городов/стран — по просьбе "вот это перенеси в блок Посещено
   стран только компатктно и по центру" (13.08.2026), переехали из героя сюда.
   .community-profile-hero-tag — общая пилюля (цвет/фон), .community-profile-
   countries-stat — компактный модификатор поверх неё под узкий сайдбар. */
.community-profile-countries-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:16px; }
.community-profile-countries-stat{ font-size:11.5px; padding:4px 10px; white-space:nowrap; }

/* Порог схлопывания в одну колонку — 560px, а не 860px: два столбца (гибкий
   контент + сайдбар от 220 до 300px) реально помещаются почти на любом окне
   ноутбука и на планшете, тесно становится только на настоящих телефонах в
   портретной ориентации (~375–430px). */
@media (max-width: 560px){
  .community-profile-layout{ grid-template-columns: 1fr; gap:20px; }
  .community-profile-hero-body{ padding:24px 22px 24px; }
}

.community-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin: 8px 0 32px; }
.community-stat-card{
  background: var(--bg-card); border:1px solid var(--rule); border-radius: 20px;
  padding: 20px 22px; box-shadow: 0 8px 24px rgba(27,27,27,0.04);
}
.community-stat-num{ font-size:28px; font-weight:800; color: var(--accent-rust); }
.community-stat-label{ font-size:13px; color: var(--ink-secondary); margin-top:4px; }

.community-members-card{ text-align:left; padding: 32px 36px; }
.community-empty{ text-align:center; padding: 56px 36px; }
.community-empty p{ color: var(--ink-secondary); margin: 0 0 20px; }
.community-section-title{ font-family:'Onest', sans-serif; font-size:20px; font-weight:700; margin:0 0 18px; }

.community-member-list{ display:flex; flex-direction:column; gap:4px; }
.community-member-row{
  display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:12px;
}
.community-member-row + .community-member-row{ border-top:1px solid var(--rule); }
.community-member-avatar{
  width:34px; height:34px; border-radius:50%; flex:none; background: rgba(242,112,62,0.12);
  color: var(--accent-rust); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px;
}
.community-member-name{ font-weight:600; font-size:14.5px; }

.community-footnote{ margin: 28px 0 60px; font-size:12.5px; color: var(--ink-secondary); }

/* ---- вход ---- */
.community-auth-card{ max-width: 420px; margin: 40px auto 60px; padding: 44px 36px; }
.community-auth-logo{ font-size:22px; margin-bottom:8px; }
.community-auth-title{ font-family:'Onest', sans-serif; font-size:22px; font-weight:800; margin: 24px 0 8px; }
.community-auth-sub{ color: var(--ink-secondary); font-size:14px; line-height:1.6; margin: 0 0 28px; }

.oauth-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 18px; border-radius:999px; font-family:'Onest', sans-serif; font-weight:700; font-size:15px;
  margin-bottom:12px; border:1px solid var(--rule); text-decoration:none; box-sizing:border-box;
  transition: transform .15s, box-shadow .15s;
}
.oauth-btn:hover{ transform: translateY(-1px); }
.oauth-btn-google{ background: var(--bg-card); color: var(--ink); }
.oauth-btn-apple{ background:#111; color:#fff; border-color:#111; }
/* Вход через Apple ещё не подключён (нет APPLE_* переменных на сервере) — кнопка
   видна всегда, но заблокирована нативным disabled + приглушённая, чтобы не
   выглядела как рабочая: opacity вместо display:none, чтобы человек видел, что
   способ входа появится, а не терялся в догадках, почему его нет вообще. */
.oauth-btn-disabled{ opacity:.5; cursor:not-allowed; }
.oauth-btn-soon-badge{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  background: rgba(255,255,255,0.18); padding:3px 9px; border-radius:999px; margin-left:2px;
}
.community-auth-note{ font-size:13px; color: var(--ink-secondary); margin: 12px 0; }

/* ---- экран "уже есть аккаунт с этой почтой" (community_confirm_link.html) —
   тот же .community-auth-card, что и у входа, только с большим аватаром
   найденного аккаунта посередине вместо кнопок провайдеров. ---- */
.community-confirm-link-avatar{ display:flex; justify-content:center; margin: 20px 0; }
.community-confirm-link-avatar img,
.community-confirm-link-avatar span{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:26px;
}

/* ---- условия использования (community_terms.html) — 17.08.2026, по требованию Apple
   App Review для iOS (Guideline 1.2 — Safety, User-Generated Content): те же три
   блока согласия ("нулевая терпимость" / жалобы+блокировка / ответственность), что
   и в мобильном TermsGateView.swift, только для веб-версии "Сообщества". ---- */
.community-terms-card{ max-width: 640px; margin: 40px auto 60px; padding: 44px 40px; text-align:left; }
.community-terms-card .community-auth-title{ text-align:center; }
.community-terms-section{
  background: var(--bg-paper-alt); border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 14px;
}
.community-terms-section h3{ font-family:'Onest', sans-serif; font-size:15px; font-weight:700; margin:0 0 6px; color: var(--ink); }
.community-terms-section p{ font-size:14px; line-height:1.6; color: var(--ink-secondary); margin:0; }
.community-terms-actions{ margin-top: 20px; }
.community-terms-actions .btn{ display:block; width:100%; margin-bottom:10px; box-sizing:border-box; text-align:center; }

/* ---- дисклеймер-плашка над кнопками входа (community_login.html) — та же идея, что
   и TermsDisclosureLink в приложении: видимая ссылка на условия ДО входа, не только
   после (полноэкранный гейт — см. .community-terms-card выше). ---- */
.community-terms-disclosure{
  display:flex; align-items:flex-start; gap:8px; text-align:left; text-decoration:none;
  background: var(--bg-paper-alt); border: 1px solid var(--rule); border-radius: 12px;
  padding: 10px 14px; margin-top: 14px; font-size: 12px; color: var(--ink-secondary);
  transition: border-color .15s;
}
.community-terms-disclosure:hover{ border-color: var(--accent-rust); }
.community-terms-disclosure svg{ flex-shrink:0; margin-top:1px; color: var(--accent-rust); width:14px; height:14px; }

/* ---- профиль — во всю ширину страницы, как "Мои города" (была узкая карточка
   по центру, max-width:480px auto — см. историю правок). ---- */
.community-profile-form-card{ text-align:left; padding: 36px 40px; }
.community-profile-photo-row{ display:flex; align-items:center; gap:20px; margin-bottom:8px; }
.community-profile-avatar-wrap{ flex:none; }
.community-profile-avatar-img{ width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; }
.community-profile-avatar-big{
  width:72px; height:72px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:24px;
}
.community-avatar-upload-btn{
  display:inline-block; border:1px solid var(--rule); border-radius:999px; padding:9px 18px;
  font-size:13px; font-weight:600; color: var(--ink); cursor:pointer; background: var(--bg-card);
  transition: border-color .15s, color .15s;
}
.community-avatar-upload-btn:hover{ border-color: var(--accent-rust); color: var(--accent-rust); }
.community-avatar-hint{ font-size:12px; color: var(--ink-secondary); margin:8px 2px 0; }

/* community_user.html — "О себе" + иконки соцсетей в публичном профиле (заполняются
   на /community/profile, community_profile.html). .social-links уже используется в
   подвале сайта (base.html) — те же кружки-иконки, тут просто override центрирования
   (там оно посреди страницы, тут должно начинаться от текста профиля). */
.community-profile-bio{ font-size:14.5px; line-height:1.6; color: var(--ink-secondary); max-width:520px; margin:4px 0 0; }
/* Отступ ДО иконок (от bio) и отступ ПОСЛЕ иконок (до вкладок) — специально одно и
   то же число (16px), а не "что получится" из margin-collapsing разных блоков —
   раньше выходило заметно разное расстояние сверху и снизу иконок (по отзыву
   "отступы сделай одинаковыми... после иконок соцсетей"). Вторая половина этой пары
   — margin-top:16px у .community-profile-subtabs ниже. */
.community-profile-social{ justify-content:flex-start; margin:16px 0 0; }
.community-field-error{ font-size:12px; color:#C0392B; margin:8px 2px 0; }
/* Подсказка ПЕРЕД группой полей (соцсети) — в отличие от .community-avatar-hint,
   который всегда идёт ПОСЛЕ одного поля и поясняет именно его формат/лимит, тут
   текст поясняет весь блок из 4 полей сразу, поэтому и место другое (сразу под
   лейблом, до первого инпута). Раньше это подгонялось инлайновым
   style="margin-top:-4px" прямо в шаблоне (community_profile.html) — обычный
   отрицательный margin у самого .community-avatar-hint (8px 2px 0) давал в сумме
   с margin-bottom лейбла (8px) слишком большой зазор. Теперь то же самое —
   отдельным классом, без инлайновых стилей и магических отрицательных чисел. */
.community-social-hint{ margin:4px 2px 12px; }
.community-profile-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width: 560px){ .community-profile-form-row{ grid-template-columns:1fr; } }

.community-field-label{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color: var(--ink-secondary); margin: 16px 0 8px;
}
.community-field-label:first-child{ margin-top:0; }
.community-field-label span{ text-transform:none; font-weight:500; opacity:.8; }
.community-field-input{
  font-family:'Onest', sans-serif; font-size:14.5px; color: var(--ink);
  background: var(--bg-paper); border:1px solid var(--rule); border-radius:12px;
  padding:12px 14px; width:100%; box-sizing:border-box;
}
.community-field-textarea{ min-height:96px; resize:vertical; line-height:1.5; font-family:'Onest', sans-serif; }
/* 8px — тот же шаг, что и везде в этой форме (отступ label->input, hint->label и
   т.д.), раньше тут было 10px "на глаз", отдельно от общего ритма. */
.community-social-fields{ display:flex; flex-direction:column; gap:8px; }
.community-field-input-group{ position:relative; }
.community-field-input-prefix{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color: var(--ink-secondary); font-size:14.5px; pointer-events:none;
}
.community-field-input-with-prefix{ padding-left:26px; }
/* Дата рождения (input type="date") — нативный значок календаря у Chrome/Edge по
   умолчанию рисуется тёмным (почти чёрным), в тёмной теме на тёмном фоне поля
   становится почти невидимым — та же логика инверсии, что уже применяется к другим
   нативным элементам сайта в тёмной теме. */
:root[data-theme="dark"] .community-field-input::-webkit-calendar-picker-indicator{ filter: invert(1); }
.community-save-btn{ margin-top:24px; width:100%; text-align:center; border:none; }
.community-back-link{
  display:block; margin-top:20px; font-size:13px; color: var(--ink-secondary); text-decoration:none;
}
.community-back-link:hover{ color: var(--accent-rust); }

/* ---- профиль: "Опасная зона" (полное удаление аккаунта) — тот же красный, что и
   у иконки удаления города (.community-place-card-delete:hover), но выделено
   явной рамкой, чтобы блок нельзя было спутать с обычной карточкой формы. ---- */
/* Раньше эта карточка не переопределяла padding/text-align — жила на базовых
   .card (padding:48px 56px, text-align:center), тогда как форма профиля прямо над
   ней (.community-profile-form-card) — на 36px 40px и text-align:left. Из-за этого
   у двух карточек одного и того же раздела "Профиль" не совпадали ни левый край
   текста, ни отступы от края — теперь одинаковые. */
.community-danger-zone{ border-color: rgba(192,57,43,0.35); text-align:left; padding: 36px 40px; }
.community-danger-zone-title{ color:#C0392B; }
.community-delete-account-btn{
  margin-top:16px; border:1px solid rgba(192,57,43,0.4); background: transparent; color:#C0392B;
}
.community-delete-account-btn:hover{ background: rgba(192,57,43,0.1); border-color:#C0392B; }

/* ---- "Способы входа" (community_profile.html) — привязка второго провайдера
   (Google/Apple) к уже открытой сессии, независимо от совпадения email, см.
   profile_link()/_handle_link_callback в routes_community.py. ---- */
.community-linked-accounts-card{ text-align:left; padding: 36px 40px; }
.community-linked-accounts-row{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.community-linked-account-item{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1px solid var(--rule); border-radius:12px; background: var(--bg-paper);
}
.community-linked-account-label{ font-weight:600; font-size:14px; flex:1; }
.community-linked-account-badge{
  font-size:12px; font-weight:700; color:#2E7D32; background: rgba(46,125,50,0.12);
  padding:4px 10px; border-radius:999px;
}
.community-linked-account-btn{ padding:8px 16px; font-size:13px; }
.community-link-banner{ font-size:13px; padding:10px 14px; border-radius:10px; margin: 0 0 14px; }
.community-link-banner-success{ background: rgba(46,125,50,0.12); color:#2E7D32; }
.community-link-banner-error{ background: rgba(192,57,43,0.12); color:#C0392B; }

/* ---- страница "Мои города" (отдельно от профиля) ---- */
.community-places-card{ max-width: 560px; margin: 40px auto 60px; padding: 40px 36px; text-align:left; }
.community-places-page-title{ font-family:'Onest', sans-serif; font-size:22px; font-weight:800; margin:0 0 10px; }

/* ---- профиль: "Мои базы" / "Мои города" ---- */
.community-places-section{ margin-top:32px; }
.community-places-section:first-child{ margin-top:0; }
.community-places-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.community-places-title{ font-family:'Onest', sans-serif; font-size:15px; font-weight:700; margin:0; }
.community-places-hint{ font-size:12px; color: var(--ink-secondary); margin:0 0 12px; line-height:1.5; }
.community-add-place-link{
  font-size:12.5px; font-weight:700; color: var(--accent-rust); text-decoration:none;
  border:1px solid rgba(242,112,62,0.35); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.community-add-place-link:hover{ background: rgba(242,112,62,0.08); }
.community-place-list{ display:flex; flex-direction:column; gap:2px; }
.community-place-row{
  display:flex; align-items:center; gap:10px; padding:10px 4px; border-radius:10px;
}
.community-place-row + .community-place-row{ border-top:1px solid var(--rule); }
.community-place-info{ flex:1; min-width:0; }
.community-place-city{ font-weight:600; font-size:14px; }
.community-place-country{ font-size:12px; color: var(--ink-secondary); }
.community-place-from{ font-size:11px; color: var(--ink-secondary); margin-top:1px; }
.community-place-delete{
  border:none; background:none; color: var(--ink-secondary); font-size:12px; cursor:pointer;
  padding:4px 8px; border-radius:8px; flex:none;
}
.community-place-delete:hover{ color:#C0392B; background: rgba(192,57,43,0.08); }
.community-places-empty{ font-size:13px; color: var(--ink-secondary); padding:8px 4px; }

.community-place-add-form{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.community-place-add-input{
  flex:1; min-width:140px; font-family:'Onest', sans-serif; font-size:13.5px; color: var(--ink);
  background: var(--bg-paper); border:1px solid var(--rule); border-radius:10px; padding:9px 12px; box-sizing:border-box;
}
.community-place-add-select{
  font-family:'Onest', sans-serif; font-size:13px; color: var(--ink);
  background: var(--bg-paper); border:1px solid var(--rule); border-radius:10px; padding:9px 10px; box-sizing:border-box;
}
.community-place-add-btn{
  font-family:'Onest', sans-serif; font-weight:700; font-size:13px; color:#fff; background: var(--accent-rust);
  /* Прозрачная рамка той же толщины, что и у .community-place-add-btn-secondary
     (1.5px solid) — иначе в паре "Добавить"/"Продолжить" вторая кнопка (с реальной
     рамкой) оказывается на 3px выше первой (без рамки вообще), кнопки визуально не
     выровнены по высоте. */
  border:1.5px solid transparent; border-radius:10px; padding:9px 16px; cursor:pointer; white-space:nowrap; flex:none;
}
.community-place-add-btn:hover{ opacity:.9; }

/* ---- страница "Мои города": во всю ширину, карточками (как на главной) ---- */
.community-places-block{ margin: 8px 0 40px; }
.community-places-block-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px; flex-wrap:wrap; gap:6px; }
.community-header-note{ font-size:13px; color: var(--ink-secondary); margin:0 0 16px; }

/* Бейджи-ссылки на App Store/Google Play на "Моей активности" — своя, не официальная
   отрисовка (заливка var(--ink), без скачанных лого-картинок), см. community_activities.html.
   Пока ios_app_store_url/android_play_store_url не заданы (community_common.py) —
   рендерится как <span class="...-disabled"> вместо <a>, курсор/цвет приглушаются. */
.app-store-badges{ display:flex; flex-wrap:wrap; gap:10px; margin: 0 0 20px; }
.app-store-badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:100px;
  background: var(--ink); color: var(--bg-paper); text-decoration:none;
  font-family:'Onest', sans-serif; font-weight:600; font-size:13.5px;
  transition: transform .15s, opacity .15s;
}
.app-store-badge:hover{ transform: translateY(-1px); }
.app-store-badge-disabled{ opacity:0.4; cursor:default; pointer-events:none; }

/* Подсказка под бейджем "Google Play", пока он временно ведёт на прямую ссылку
   .apk вместо маркета (community_activities.html, android_apk_fallback) — по
   просьбе "под логотипом Google Play Market сделаем инфо бар что установка
   руками" (14.08.2026), "но это временное решение". */
.app-store-apk-note{
  display:flex; align-items:flex-start; gap:8px; max-width:480px; margin: -8px 0 20px;
  padding:10px 14px; background: rgba(242,112,62,0.08); border:1px solid rgba(242,112,62,0.25);
  border-radius:12px; font-size:12.5px; line-height:1.4; color: var(--ink-secondary);
}

.community-chain-hint{
  list-style:none; margin:0 0 16px; padding:12px 14px; display:flex; flex-direction:column; gap:6px;
  background: var(--bg-paper); border:1px solid var(--rule); border-radius:12px;
}
.community-chain-hint li{
  font-size:13px; color: var(--ink-secondary); line-height:1.5; padding-left:16px; position:relative;
}
.community-chain-hint li::before{ content:"–"; position:absolute; left:0; color: var(--accent-rust); }

.community-place-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
.community-place-card{
  position:relative; background: var(--bg-card); border:1px solid var(--rule); border-radius:18px;
  padding:18px 20px; box-shadow: 0 8px 24px rgba(27,27,27,0.04);
}
.community-place-card-city{ font-weight:700; font-size:15px; padding-right:44px; }
.community-place-card-link{ color:inherit; text-decoration:none; border-bottom:1px dashed var(--rule-strong); }
.community-place-card-link:hover{ color: var(--accent-rust); border-bottom-color: var(--accent-rust); }
.community-place-card-country{ font-size:12.5px; color: var(--ink-secondary); margin-top:3px; }
.community-place-card-actions{ position:absolute; top:8px; right:8px; display:flex; gap:2px; }
.community-place-card-delete-form{ margin:0; }
.community-place-card-edit,
.community-place-card-delete{
  border:none; background:none; color: var(--ink-secondary); font-size:13px; cursor:pointer;
  width:22px; height:22px; border-radius:50%; line-height:22px; text-align:center;
  text-decoration:none; display:inline-block;
}
.community-place-card-edit:hover{ color: var(--accent-rust); background: rgba(242,112,62,0.1); }
.community-place-card-delete:hover{ color:#C0392B; background: rgba(192,57,43,0.1); }

/* ---- иконка "есть заметка" в углу карточки — та же кнопка-кружок, что и у
   действий (изменить/удалить), в стиле line-иконок транспорта. На страницах без
   действий (публичный профиль) стоит одна, на "Моих городах" — рядом с ✎/✕,
   для чего карточке нужно чуть больше запаса под текстом (см. has-note-actions). ---- */
.community-place-card-note{
  border:none; background:none; color: var(--ink-secondary); cursor:pointer;
  width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.community-place-card-note:hover{ color: var(--accent-rust); background: rgba(242,112,62,0.1); }
.community-place-card-note .ti-icon{ width:14px; height:14px; color:inherit; }
.community-place-card.has-note-actions .community-place-card-city{ padding-right:68px; }

.community-place-add-card{
  display:flex; flex-direction:column; gap:8px; border:1.5px dashed var(--rule-strong); border-radius:18px;
  padding:16px 18px; background:transparent; justify-content:center;
}
.community-place-add-card .community-place-add-input,
.community-place-add-card .community-place-add-select{ width:100%; box-sizing:border-box; }
.community-place-add-card .community-place-add-btn{ width:100%; text-align:center; }

/* ---- выбор транспорта — свой выпадающий список вместо нативного <select>, чтобы
   вместо цветных эмодзи в системном стиле ОС показывать те же line-иконки, что и
   везде на сайте/в профиле (см. _TRANSPORT_SVG в routes_community.py). Нативный
   <select><option> не умеет рисовать SVG внутри себя — единственный способ получить
   тот же визуальный стиль — собрать список самому (кнопка + выпадашка), а реальное
   значение для отправки формы держать в скрытом input. Логика открытия/закрытия и
   выбора — static/js/community-transport-picker.js. ---- */
.community-transport-picker{ position:relative; width:100%; }
.community-transport-picker-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  font-family:'Onest', sans-serif; font-size:13.5px; color: var(--ink); cursor:pointer;
  background: var(--bg-paper); border:1px solid var(--rule); border-radius:10px; padding:9px 12px;
  box-sizing:border-box; text-align:left;
}
.community-transport-picker-trigger:hover{ border-color: var(--accent-rust); }
.community-transport-picker-current{ display:flex; align-items:center; gap:7px; }
.community-transport-picker.open .community-user-menu-chevron{ transform: rotate(180deg); }
.community-transport-picker-dropdown{
  position:absolute; top: calc(100% + 6px); left:0; right:0; background: var(--bg-card);
  border:1px solid var(--rule); border-radius:14px; box-shadow: 0 12px 32px rgba(27,27,27,0.12);
  padding:6px; display:none; flex-direction:column; gap:1px; z-index:20;
}
.community-transport-picker.open .community-transport-picker-dropdown{ display:flex; }
.community-transport-picker-option{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; border:none;
  background:none; text-align:left; width:100%; font-family:'Onest', sans-serif; font-size:13.5px;
  font-weight:500; color: var(--ink); cursor:pointer;
}
.community-transport-picker-option:hover{ background: rgba(242,112,62,0.1); color: var(--accent-rust); }
.community-transport-picker-option.active{ background: rgba(242,112,62,0.14); color: var(--accent-rust); font-weight:700; }

/* ---- выбор базы-источника маршрута — тот же компонент, что и у транспорта (кнопка +
   своя выпадашка вместо нативного <select>), просто с line-иконкой "дом" вместо иконки
   транспорта. Логика открытия/закрытия и выбора — static/js/community-base-picker.js. ---- */
.community-base-picker{ position:relative; width:100%; }
.community-base-picker-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  font-family:'Onest', sans-serif; font-size:13.5px; color: var(--ink); cursor:pointer;
  background: var(--bg-paper); border:1px solid var(--rule); border-radius:10px; padding:9px 12px;
  box-sizing:border-box; text-align:left;
}
.community-base-picker-trigger:hover{ border-color: var(--accent-rust); }
.community-base-picker-current{ display:flex; align-items:center; gap:7px; }
.community-base-picker.open .community-user-menu-chevron{ transform: rotate(180deg); }
.community-base-picker-dropdown{
  position:absolute; top: calc(100% + 6px); left:0; right:0; background: var(--bg-card);
  border:1px solid var(--rule); border-radius:14px; box-shadow: 0 12px 32px rgba(27,27,27,0.12);
  padding:6px; display:none; flex-direction:column; gap:1px; z-index:20;
}
.community-base-picker.open .community-base-picker-dropdown{ display:flex; }
.community-base-picker-option{
  display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; border:none;
  background:none; text-align:left; width:100%; font-family:'Onest', sans-serif; font-size:13.5px;
  font-weight:500; color: var(--ink); cursor:pointer;
}
.community-base-picker-option:hover{ background: rgba(242,112,62,0.1); color: var(--accent-rust); }
.community-base-picker-option.active{ background: rgba(242,112,62,0.14); color: var(--accent-rust); font-weight:700; }

/* ---- живой автокомплит городов в "Сообществе" — при вводе показывает выпадающий
   список подсказок (тот же приём, что у автокомплита аэропортов в travel.html,
   только переиспользуемый общий JS-хелпер, см. static/js/community-city-
   autocomplete.js). Оборачивает обычный текстовый инпут в контейнер с
   position:relative, чтобы список мог позиционироваться прямо под полем — сам
   инпут при этом остаётся тем же элементом со своими исходными классами/стилями
   (.community-place-add-input/.community-field-input), просто вложен на уровень
   глубже. Используется сразу в трёх местах: форма "Мой дом", форма редактирования
   и конструктор цепочки — везде одинаково. ---- */
.community-city-autocomplete-wrap{ position:relative; flex:1; min-width:0; }
.community-city-autocomplete-wrap input{ width:100%; box-sizing:border-box; }
.community-city-dropdown{
  display:none; position:absolute; top: calc(100% + 6px); left:0; right:0; z-index:30;
  max-height:260px; overflow-y:auto; padding:6px;
  background: var(--bg-card); border:1px solid var(--rule); border-radius:14px;
  box-shadow: 0 12px 32px rgba(27,27,27,0.12);
}
.community-city-dropdown.open{ display:block; }
/* Город над страной (не в строку рядом) — та же связка, что и у уже сохранённых
   карточек мест (.community-place-card-city/-country) на странице "Мои города".
   В строку рядом (justify-content:space-between) не сработало: у страны было
   flex:none (не давало ей сжаться), а у длинных официальных названий вроде
   "Российская Федерация" это отжимало ВСЮ ширину под себя, и город обрезался до
   одной буквы ("М..." вместо "Москва") — двум строкам делить нечего, обрезать
   почти никогда не приходится. */
.community-city-dropdown-item{
  display:flex; flex-direction:column; gap:1px;
  padding:9px 12px; border-radius:9px; cursor:pointer; line-height:1.4;
}
.community-city-dropdown-item:hover, .community-city-dropdown-item.active{ background: rgba(242,112,62,0.1); }
.community-city-dropdown-city{ color: var(--ink); font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; }
.community-city-dropdown-country{ color: var(--ink-secondary); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; }
.community-city-dropdown-empty{ padding:10px 12px; font-size:12.5px; color: var(--ink-secondary); }

/* ---- конструктор цепочки путешествий (Рига -> Варшава -> Берлин -> Париж, ...) на
   "Где я был" — блоков можно открыть сколько угодно, перенос по ~4 в ряд чисто
   визуальный (flex-wrap, чтобы не вылезать за рамки страницы на узких экранах), не
   ограничение на длину цепочки. Каждый блок, кроме последнего активного, "закреплён"
   (.community-chain-block-locked) — просто показывает город + иконку транспорта,
   которым до него добрались, без полей ввода: ничего не сохраняется в "Где я был",
   пока не нажать "Добавить" на активном блоке (см. static/js/community-chain-builder.js). ---- */
/* Та же сетка (auto-fill, minmax(200px,1fr)), что у .community-place-grid ("Мой
   дом" и уже сохранённые города) — чтобы ширина блоков цепочки один в один
   совпадала с шириной обычных карточек, а не подбиралась вручную отдельным
   числом (которое либо уже, либо шире настоящих карточек в зависимости от того,
   сколько блоков в ряду). align-items:start — в отличие от .community-place-grid
   здесь высота блоков сильно разная (закреплённый "Рига" и открытый блок с формой
   ввода), тянуть их по высоте друг под друга не нужно. */
.community-chain-builder{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); align-items:start;
  gap:14px; margin: 0 0 24px; max-width: 100%;
}
.community-chain-block{
  display:flex; flex-direction:column; gap:8px; border:1.5px dashed var(--rule-strong); border-radius:18px;
  padding:16px 18px; background:transparent; box-sizing:border-box;
}
.community-chain-block .community-place-add-input,
.community-chain-block .community-transport-picker,
.community-chain-block .community-base-picker{ width:100%; box-sizing:border-box; }
/* Закреплённый (уже отрезолвленный, но ещё не сохранённый) блок цепочки — визуально
   как обычная карточка города (.community-place-card): город + страна, тот же
   размер блока, чтобы "Где я был" во время сборки цепочки выглядел так же, как
   уже сохранённые города, а не мелкой строкой-плашкой. */
.community-chain-block-locked{
  position:relative; border-style:solid; border-color: var(--rule); background: var(--bg-card);
  padding:18px 20px; box-shadow: 0 8px 24px rgba(27,27,27,0.04);
}
.community-chain-locked-city{
  display:flex; align-items:center; gap:7px; font-weight:700; font-size:15px; color: var(--ink);
  padding-right:22px;
}
.community-chain-locked-city .ti-icon{ width:16px; height:16px; color: var(--accent-rust); flex:none; }
.community-chain-locked-country{ font-size:12.5px; color: var(--ink-secondary); }
/* Удалить уже закреплённый шаг цепочки (ошибся городом) — открывает на его месте
   заново редактируемый блок с теми же значениями (город, транспорт), чтобы можно
   было поправить опечатку или ввести другой город с нуля; все шаги ПОСЛЕ него (если
   есть) удаляются вместе с ним, потому что они привязаны именно к этому городу как
   к "откуда" — см. removeBlockFrom() в community-chain-builder.js. Тот же кружок-✕,
   что и у уже сохранённых городов (.community-place-card-delete). */
.community-chain-locked-remove{
  position:absolute; top:10px; right:10px; border:none; background:none; color: var(--ink-secondary);
  font-size:13px; cursor:pointer; width:22px; height:22px; border-radius:50%; line-height:22px;
  text-align:center;
}
.community-chain-locked-remove:hover{ color:#C0392B; background: rgba(192,57,43,0.1); }
.community-chain-block-from{ width:100%; }

/* "Откуда" в АКТИВНОМ блоке — либо выбор базы (первый блок, есть несколько баз),
   либо компактная строка "город + иконка транспорта" (контекст для ввода
   следующего города). Внешне как picker-trigger выше, только не кликабельно —
   нечего выбирать, это просто данные предыдущего шага. */
.community-chain-origin{
  display:flex; align-items:center; gap:7px; width:100%; font-family:'Onest', sans-serif;
  font-size:13.5px; font-weight:500; color: var(--ink); background: var(--bg-paper);
  border:1px solid var(--rule); border-radius:10px; padding:9px 12px; box-sizing:border-box;
}
.community-chain-origin .ti-icon{ width:16px; height:16px; color: var(--accent-rust); flex:none; }

.community-chain-block-msg{
  font-size:12.5px; color: var(--ink-secondary); line-height:1.4;
}

/* ---- две кнопки в конце активного блока — "Добавить" (сохранить всю цепочку целиком)
   и "Продолжить" (резолвнуть текущий блок и открыть следующий — сколько угодно раз,
   см. community-chain-builder.js/routes_community.py). Друг под другом, а не в ряд:
   при узком блоке (240px) и двух словах-кнопках бок о бок им физически не хватает
   места — min-width:0 позволял ужаться, но текст (white-space:nowrap) всё равно
   вылезал за рамку. Друг под другом устойчиво к любой длине подписи (в том числе
   на английском — see continue_btn/add_btn в community_i18n.py), без обрезаний. ---- */
.community-place-add-actions{ display:flex; flex-direction:column; gap:8px; }
.community-place-add-actions .community-place-add-btn{ width:100%; }
.community-place-add-btn-secondary{
  color: var(--accent-rust); background: transparent; border:1.5px solid var(--accent-rust);
}
.community-place-add-btn-secondary:hover{ background: rgba(242,112,62,0.1); opacity:1; }
.community-place-add-btn:disabled,
.community-place-add-btn-secondary:disabled{ opacity:.5; cursor:default; }

/* ---- неоднозначное название города при "Продолжить"/"Добавить" в конструкторе
   цепочки — модальное окно поверх всей страницы, а не тесная вставка внутри узкого
   240px блока (по просьбе — раньше это был отдельный экран, и это было удобнее).
   Модалка одна на всю страницу, переиспользуется под любой блок (см. ensureModal()
   в community-chain-builder.js) — открыт может быть только один диалог за раз. ---- */
.community-chain-modal{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;
  box-sizing:border-box;
}
.community-chain-modal[hidden]{ display:none; }
.community-chain-modal-backdrop{ position:absolute; inset:0; background:rgba(27,27,27,0.55); }
.community-chain-modal-card{
  position:relative; background: var(--bg-card); border:1px solid var(--rule); border-radius:18px;
  padding:22px; max-width:360px; width:100%; box-sizing:border-box; max-height:80vh; overflow:auto;
}
.community-chain-modal-title{
  font-family:'Onest', sans-serif; font-size:15px; font-weight:700; color: var(--ink); margin:0 0 14px;
}
.community-chain-modal-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.community-chain-candidate-btn{
  display:flex; flex-direction:column; gap:1px; width:100%; text-align:left; cursor:pointer;
  font-family:'Onest', sans-serif; background: var(--bg-paper); border:1px solid var(--rule);
  border-radius:10px; padding:10px 12px; box-sizing:border-box; color: var(--ink);
}
.community-chain-candidate-btn:hover{ border-color: var(--accent-rust); }
.community-chain-candidate-city{ font-weight:700; font-size:13.5px; }
.community-chain-candidate-country{ font-size:12px; color: var(--ink-secondary); }
.community-chain-modal-cancel{
  width:100%; text-align:center; background:none; border:1px solid var(--rule); border-radius:10px;
  padding:9px; font-family:'Onest', sans-serif; font-size:13px; font-weight:600; color: var(--ink-secondary);
  cursor:pointer;
}
.community-chain-modal-cancel:hover{ border-color: var(--accent-rust); color: var(--accent-rust); }

/* ---- карточки городов в публичном профиле ("Мой дом"/"Города") — по просьбе
   "сделай карточки городов как в заметках, если нет фото просто сгенеруй похожую
   линию как тут" (13.08.2026), тот же принцип, что и .city-card в "Заметках" на
   главной (home.html): фото сверху (4:3), текст снизу. Свои классы, НЕ .city-card
   и НЕ .community-place-card — первый заточен под сетку notes с обязательным фото,
   второй занят приватной страницей управления городами (community_places.html,
   там ✎/✕/раскрывающиеся поездки, эту вёрстку трогать нельзя). Если у заметки нет
   фото (или заметки о городе вообще нет) — .community-profile-place-card-photo-
   placeholder с той же пунктирной линией, что и в баннере героя выше на странице
   (gradient-фон + dasharray-путь), просто под более "квадратный" (4:3) вьюбокс. */
.community-profile-place-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap:14px; }
/* По просьбе "убери "i" и сделай весь блок кликабельным как у нас в заметах"
   (13.08.2026) — раньше на заметку вели ДВЕ отдельные ссылки внутри карточки
   (кружок "i" в углу + подчёркнутое название города), теперь, как у .city-card
   в "Заметках", вся карточка целиком — один <a> (см. HTML: {% if b.note_slug %}
   решает, рендерить <a> или обычный <div>). text-decoration/color здесь — сброс
   дефолтных стилей ссылки, transition+hover — тот же "приподнимается" эффект,
   что и у .city-card:hover. */
.community-profile-place-card{
  display:flex; flex-direction:column; background: var(--bg-card); color:inherit; text-decoration:none;
  border:1px solid var(--rule); border-radius:18px; overflow:hidden;
  box-shadow: 0 8px 24px rgba(27,27,27,0.04); transition: box-shadow .15s, border-color .15s;
}
a.community-profile-place-card:hover{ box-shadow: 0 16px 32px rgba(27,27,27,0.10); border-color: var(--accent-rust); }
.community-profile-place-card-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; filter:saturate(0.96); }
.community-profile-place-card-photo-placeholder{
  width:100%; aspect-ratio:4/3; display:block;
  background: linear-gradient(120deg, var(--bg-paper), var(--bg-card));
}
.community-profile-place-card-photo-placeholder svg{ width:100%; height:100%; display:block; opacity:.55; }
.community-profile-place-card-body{ padding:14px 16px 16px; }
.community-profile-place-card-country{
  font-family:'Onest', sans-serif; font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color: var(--accent-rust); font-weight:700; margin-bottom:6px;
}
.community-profile-place-card-city{ font-weight:700; font-size:15px; color: var(--ink); display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
a.community-profile-place-card:hover .community-profile-place-card-city{ color: var(--accent-rust); }
.community-profile-place-card-transport-icons{ font-size:13px; }

/* ---- группировка городов по регионам/странам (Европа, Азия, ...) — по просьбе
   "давай сделаем как у нас в заметках регионы и страны табами", те же
   .subtabs/.tab-btn/.region-panel/.country-panel, что и в home.html ("Заметки");
   раньше тут были просто заголовки h3/h4 (.community-region-title/-country-title,
   теперь удалены как неиспользуемые) — весь список регион+страна был виден
   сразу, без выбора. Тут только выравнивание по левому краю (по умолчанию
   .subtabs центрирует) и отступ между уровнями. ---- */
.community-region-tabs{ justify-content:flex-start; }
.community-country-tabs{ justify-content:flex-start; margin-top: -8px; margin-bottom: 16px; }

/* ---- добавление места: форма поиска + подтверждение геокодинга ---- */
.community-add-place-card{ max-width: 480px; margin: 40px auto 60px; padding: 40px 36px; text-align:left; }
.community-add-place-title{ font-family:'Onest', sans-serif; font-size:22px; font-weight:800; margin:0 0 10px; }
.community-add-place-sub{ font-size:14px; color: var(--ink-secondary); line-height:1.6; margin:0 0 24px; }
.community-add-place-note{ font-size:13.5px; color: var(--ink-secondary); margin:0 0 20px; line-height:1.6; }
.community-add-place-form{ display:flex; flex-direction:column; }

.community-candidate-list{ display:flex; flex-direction:column; gap:8px; }
.community-candidate-form{ margin:0; }
.community-candidate-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:'Onest', sans-serif; background: var(--bg-paper); border:1px solid var(--rule);
  border-radius:14px; padding:14px 16px; cursor:pointer; text-align:left; box-sizing:border-box;
  transition: border-color .15s, transform .15s;
  /* Без явного color некоторые мобильные браузеры (iOS Safari) красят текст внутри
     <button> системным цветом кнопки, а не наследуют от родителя — на телефоне текст
     оказывался почти невидимым (бледно-белым на светлом фоне). */
  color: var(--ink);
}
.community-candidate-btn:hover{ border-color: var(--accent-rust); transform: translateY(-1px); }
.community-candidate-city{ font-weight:700; font-size:14.5px; }
.community-candidate-country{ font-size:12.5px; color: var(--ink-secondary); }

/* ---- карта путешественников ---- */
.community-map-card{
  background: var(--bg-card); border:1px solid var(--rule); border-radius: 28px;
  box-shadow: 0 20px 60px rgba(27,27,27,0.08); overflow:hidden; position:relative; margin: 8px 0 40px;
}
#community-map, #user-map{ height:480px; width:100%; background: var(--bg-paper); }

/* ---- маленькая декоративная карта заметок (вкладка "Заметки", home.html) ----
   Заметно ниже, чем карта Сообщества (480px) — она тут не главный элемент
   страницы, а обзорная картинка сверху; сама карта не панится/не зумится (см.
   static/js/notes-map.js), поэтому и own zoom-контролов/легенды тут нет, только
   рамка-карточка как у остальных блоков сайта. */
.notes-map-card{
  background: var(--bg-card); border:1px solid var(--rule); border-radius: 24px;
  box-shadow: 0 16px 44px rgba(27,27,27,0.07); overflow:hidden; position:relative; margin: 0 0 28px;
}
#notes-map{ height:220px; width:100%; background: var(--bg-paper); }
/* Легенда "Города/Места" — по просьбе "разделим по цветам города и места",
   показывается только когда на карте реально есть оба типа (см. home.html:
   selectattr по notes_map_points). Тот же приём полоски под картой, что и у
   .note-places-map-legend внутри самой заметки, просто отдельный класс — они
   про разные карты и незачем делить один набор правил на двоих. */
.notes-map-legend{
  display:flex; flex-wrap:wrap; gap: 6px 18px; padding: 10px 16px;
  border-top: 1px solid var(--rule); font-size:12.5px; font-weight:600; color: var(--ink-secondary);
}
.notes-map-legend-item{ display:flex; align-items:center; gap:6px; }
.notes-map-legend-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }

/* ---- карта мест внутри заметки о городе (note.html, static/js/note-places-map.js) ----
   По просьбе "добавить карту в саму заметку и нанести на неё места, каждую
   категорию своим цветом" — легенда под картой (не поверх, как у карты Сообщества)
   вынесена в обычный HTML-блок под #note-places-map (см. note.html), а не в
   Leaflet-контрол, чтобы читалась как обычный текст страницы и без проблем
   переносилась на новую строку на узких экранах. */
.note-places-map-card{
  background: var(--bg-card); border:1px solid var(--rule); border-radius: 20px;
  box-shadow: 0 16px 44px rgba(27,27,27,0.07); overflow:hidden; position:relative; margin: 8px 0 32px;
}
#note-places-map{ height:280px; width:100%; background: var(--bg-paper); }
.npm-dot{
  display:block; width:17px; height:17px; border-radius:50%;
  border:2px solid var(--bg-paper); box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.npm-popup{ font-family:'Onest', sans-serif; font-size:13px; color: var(--ink); }
.npm-popup a{ color: var(--accent-rust); }
.note-places-map-legend{
  display:flex; flex-wrap:wrap; gap: 6px 18px; padding: 12px 16px;
  border-top: 1px solid var(--rule); font-size:12.5px; font-weight:600; color: var(--ink-secondary);
}
.note-places-map-legend-item{ display:flex; align-items:center; gap:6px; }
.note-places-map-legend-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }

/* Попап Leaflet ("Открыть на карте") рисуется библиотекой в собственной
   белой рамке, тему сайта не наследует — раньше в тёмной теме получалось
   почти нечитаемо: текст красился в var(--ink) (светлый), а фон вокруг
   оставался светлым по умолчанию. Тут просто красим саму рамку попапа под
   карточку сайта, чтобы .npm-popup { color: var(--ink) } снова читался
   на своём фоне в обеих темах. */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background: var(--bg-card) !important; color: var(--ink) !important;
  box-shadow: 0 8px 24px rgba(27,27,27,0.18) !important;
}
.leaflet-popup-close-button{ color: var(--ink-secondary) !important; }

.leaflet-container{ font-family:'Onest', sans-serif; background: var(--bg-paper) !important; }
/* День — тайлы OpenStreetMap как есть, без перекраски: раньше здесь был кастомный
   SVG duotone-фильтр (filter:url(#id)), с которым была куча возни с Safari — родные
   цвета OSM в итоге понравились больше и решают проблему разом во всех браузерах.
   Ночь — единственное, что реально нужно поправить: светлая карта на фоне тёмной
   темы сайта (var(--bg-paper) #171717) режет глаз. Тут уже обычные CSS filter-функции
   (invert/hue-rotate/brightness/contrast), а не самодельный SVG-фильтр — они не
   завязаны на то, инлайн стиль или внешний файл, и одинаково работают везде, включая
   Safari. invert() переворачивает яркость (светлое становится тёмным и наоборот),
   hue-rotate(180deg) компенсирует то, что invert заодно крутит и оттенок — вместе
   получается тёмная карта с сохранённым контрастом суша/вода. */
[data-theme="dark"] .leaflet-tile-pane{
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.75);
}
.leaflet-control-zoom{ border:none !important; box-shadow:none !important; }
.leaflet-control-zoom a{
  background: var(--bg-card) !important; color: var(--accent-rust) !important; border:1px solid var(--rule) !important;
  border-radius:10px !important; box-shadow:0 4px 10px rgba(27,27,27,0.08); width:32px !important; height:32px !important;
  line-height:30px !important; font-size:17px !important; margin-bottom:6px !important;
}
.leaflet-control-attribution{
  background: var(--bg-card) !important; font-family:'Onest',sans-serif; font-size:10.5px !important;
  color: var(--ink-secondary) !important; border-radius:8px 0 0 0;
}
.leaflet-control-attribution a{ color: var(--ink-secondary) !important; }

.community-map-legend{
  position:absolute; left:16px; top:16px; z-index:500; background: var(--bg-card);
  border:1px solid var(--rule); border-radius:12px; padding:8px 12px;
  font-size:12px; font-weight:600; color: var(--ink-secondary); box-shadow:0 6px 16px rgba(27,27,27,0.06);
}
.community-map-legend b{ color: var(--ink); }
.community-map-caption{
  display:flex; align-items:center; padding: 10px 16px;
  border-top: 1px solid var(--rule); font-size:13px; font-weight:700;
}
.community-map-empty{
  height:280px; display:flex; align-items:center; justify-content:center; text-align:center;
  color: var(--ink-secondary); font-size:14px; padding:24px;
}

.hm-ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1.4px solid; border-radius:50%; opacity:.55; }
.hm-pulse{
  position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border:1.6px solid; border-radius:50%; opacity:.6; animation: communityPulseRing 2.6s ease-out infinite;
}
.hm-dot{
  position:absolute; top:50%; left:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; border:1.8px solid var(--bg-paper); box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.hm-label{
  position:absolute; left:calc(50% + 13px); top:50%; transform:translateY(-50%);
  font-weight:800; font-size:11.5px; color: var(--ink); white-space:nowrap;
  text-shadow:0 0 3px var(--bg-paper), 0 0 3px var(--bg-paper), 0 0 4px var(--bg-paper);
}
@keyframes communityPulseRing{ 0%{ transform:scale(0.7); opacity:.55; } 100%{ transform:scale(2.3); opacity:0; } }
.dm-dot{
  position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background: var(--bg-paper); border:1.8px solid; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.dm-label{
  position:absolute; left:calc(50% + 11px); top:50%; transform:translateY(-50%);
  font-weight:700; font-size:11px; color: var(--ink); white-space:nowrap;
  text-shadow:0 0 3px var(--bg-paper), 0 0 3px var(--bg-paper), 0 0 4px var(--bg-paper);
}
/* Метки городов на карте вкладки "Заметки" теперь кликабельны — открывают заметку
   (notes-map.js). Курсор-указатель, чтобы это было видно ещё до клика. */
.dest-marker-clickable{ cursor: pointer; }
.community-route-line{ stroke-dasharray:1 6; animation: communityDashFlow 6s linear infinite; }
@keyframes communityDashFlow{ to{ stroke-dashoffset:-140; } }

/* Подпись на карте становится ссылкой, только если для этого города нашлась заметка
   на личном сайте (см. routes_community.py: _notes_slug_by_city) — обычный подчёркнутый
   пунктиром текст в цвете подписи, чтобы не спорить визуально с оранжевым акцентом сайта. */
/* ---- иконки транспорта — простые line-иконки в стиле сайта (см. _TRANSPORT_SVG
   в routes_community.py), а не цветные эмодзи. currentColor -> красятся через CSS. ---- */
.ti-icon{ width:16px; height:16px; vertical-align:-3px; color: var(--accent-rust); flex:none; }

/* ---- на чём добирались (транспорт) — раньше 4-й блок в строке статистики (число
   поездок + карточки) показывал ещё и компактную расшивку по видам транспорта под
   числом — убрали саму расшивку (не смотрелась), число поездок осталось как
   обычная карточка статистики. ---- */
.community-place-card-transport{
  display:flex; align-items:center; gap:5px; font-size:12px; color: var(--ink-secondary);
}
.community-place-card-transport .ti-icon{ width:13px; height:13px; vertical-align:-2px; }

/* ---- несколько визитов в один город (разные базы/транспорт) — карточка не
   дублируется (см. _merge_routes_by_city в routes_community.py). Транспорт вместо
   отдельных подписанных строк — просто маленькие иконки сразу после названия
   города (подпись "Машина"/"Самолёт" — во всплывающей подсказке title, иконка и
   так узнаваема), а сама карточка не растягивается по высоте от количества
   визитов. ---- */
.community-place-card-transport-icons{
  display:inline-flex; align-items:center; gap:3px; margin-left:6px; vertical-align:-3px;
}
.community-place-card-transport-icons .ti-icon{ width:14px; height:14px; }

/* Раскрывающийся список отдельных поездок в этот город — по умолчанию скрыт
   ([hidden]), открывается кликом по общей ✎ карточки (community-place-card-trips.js).
   У каждой поездки — своя мини-пара ✎/✕, раз общих действий карточки на неё уже не
   хватает (их несколько на одну карточку). */
.community-place-card-trips{ margin-top:10px; padding-top:10px; border-top:1px solid var(--rule); }
.community-place-card-transport-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.community-place-card-transport-row + .community-place-card-transport-row{ margin-top:6px; }
.community-place-card-transport-actions{ display:flex; gap:0; flex:none; }
.community-place-card-edit-mini,
.community-place-card-delete-mini{
  border:none; background:none; color: var(--ink-secondary); font-size:10.5px; cursor:pointer;
  width:18px; height:18px; border-radius:50%; line-height:18px; text-align:center;
  text-decoration:none; display:inline-block; flex:none;
}
.community-place-card-edit-mini:hover{ color: var(--accent-rust); background: rgba(242,112,62,0.1); }
.community-place-card-delete-mini:hover{ color:#C0392B; background: rgba(192,57,43,0.1); }
.community-place-card-trips-toggle[aria-expanded="true"]{ color: var(--accent-rust); background: rgba(242,112,62,0.1); }
.community-lb-transport{ flex:none; display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.community-lb-transport .ti-icon{ width:14px; height:14px; vertical-align:middle; }

/* ---- топ путешественников ---- */
.community-leaderboard-card{ margin-top:0; }
/* Отступ до "Последних заметок" такой же, как от карты до топа (40px — см.
   .community-map-card margin-bottom) — .notes-section сам по себе margin-top
   не задаёт (общий класс с главной страницей сайта), поэтому здесь отдельно,
   только для страницы сообщества. */
.page-community .notes-section{ margin-top: 40px; }
.community-lb-header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:6px; }
.community-lb-sub{ font-size:12.5px; color: var(--ink-secondary); }
.community-lb-list{ list-style:none; margin:0; padding:0; }
.community-lb-row{ border-radius:14px; }
.community-lb-row + .community-lb-row{ border-top:1px solid var(--rule); }
.community-lb-link{
  display:flex; align-items:center; gap:14px; padding:10px 8px; border-radius:14px;
  text-decoration:none; color:inherit;
}
.community-lb-link:hover{ background: var(--bg-paper-alt); }
.community-lb-rank{ width:26px; text-align:center; font-weight:800; font-size:14px; color: var(--ink-secondary); flex:none; }
.community-lb-rank.medal-1{ color:#C9971F; } .community-lb-rank.medal-2{ color:#9AA1AC; } .community-lb-rank.medal-3{ color:#B5732E; }
.community-lb-avatar{ width:34px; height:34px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; object-fit:cover; }
.community-lb-name{
  flex:1; font-weight:600; font-size:14px; min-width:0; text-align:left;
  /* Без этого длинное имя+фамилия на узком экране переносились на 2 строки, а
     ранг/аватар/иконки транспорта/счёт (все с align-items:center по всей высоте
     строки) визуально наезжали на середину этого двухстрочного текста. Обрезаем
     многоточием вместо переноса — строка остаётся одной высоты. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.community-lb-score{ font-weight:700; font-size:14px; flex:none; color: var(--ink); }
.community-lb-score span{ font-weight:500; font-size:11.5px; color: var(--ink-secondary); margin-left:3px; }
.community-lb-divider{ display:flex; align-items:center; gap:10px; margin:8px 0; color: var(--ink-secondary); font-size:12px; font-weight:600; }
.community-lb-divider::before, .community-lb-divider::after{ content:""; flex:1; height:1px; background: var(--rule); }
.community-lb-row.lb-you{
  background: linear-gradient(90deg, rgba(242,112,62,0.08), rgba(242,112,62,0));
  border:1px solid rgba(242,112,62,0.35); border-radius:16px;
}
.community-lb-you-tag{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#fff; background: var(--accent-rust); padding:2px 7px; border-radius:999px; margin-left:8px;
}
.community-lb-total-note{ font-size:12px; color: var(--ink-secondary); margin-top:12px; }
.community-lb-empty{ font-size:13.5px; color: var(--ink-secondary); padding:12px 4px; }

/* ---- вкладки "Топ путешественников"/"Все путешественники" внутри карточки ---- */
.community-lb-subtabs{ margin-bottom:16px; justify-content:flex-start; }
.lb-tab-panel{ display:none; }
.lb-tab-panel.active{ display:block; }
.community-lb-pagination{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px; }
.community-lb-page-btn{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--rule); background: var(--bg-card);
  color: var(--ink); font-size:15px; cursor:pointer; transition: border-color .15s, color .15s;
}
.community-lb-page-btn:hover:not(:disabled){ border-color: var(--accent-rust); color: var(--accent-rust); }
.community-lb-page-btn:disabled{ opacity:.35; cursor:default; }
.community-lb-page-info{ font-size:12.5px; color: var(--ink-secondary); font-weight:600; }

/* ---- "Топ-5 стран" / "Топ-5 городов" — сразу под топом путешественников, тот же
   принцип карточки/заголовка (.community-lb-header/.community-lb-sub переиспользуем
   как есть). Две колонки рядом на широком экране, друг под другом на узком (как и
   .community-profile-form-row). ---- */
.community-popularity-card{ margin-top:24px; }
.community-popularity-columns{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:640px){ .community-popularity-columns{ grid-template-columns:1fr; gap:20px; } }
/* По репорту "открывая в сафари на телефоне... у нас пользователи вылазят за
   пределы" (стопка аватарок в "Популярные места" вылезает за карточку/экран на
   мобильном) — классический подвох CSS Grid: grid-template-columns:1fr задаёт
   ГИБКУЮ долю пространства, но по умолчанию у грид-элемента min-width:auto, а
   не 0 — это значит колонка НЕ МОЖЕТ сжаться уже итак max-content-ширины своего
   содержимого, даже если это content-ширина больше самого 1fr. Внутри
   .community-popularity-row у имени есть свой min-width:0 (значит ОНО умеет
   сжиматься с многоточием) — но это работает только если сама КОЛОНКА-контейнер
   уже сжалась до нужной ширины; на широком экране места хватало с запасом, само
   и не проявлялось, а на узком мобильном экране Safari колонка отказывалась
   сжиматься ниже суммарной "естественной" ширины ранга+ПОЛНОГО (не обрезанного)
   названия страны/города+стопки аватарок, раздувая всю карточку/страницу вширь
   вместо того чтобы обрезать текст через многоточие. min-width:0 на самой
   колонке — стандартный фикс этого класса багов, разрешает ей сжаться, дальше
   truncate-логика внутри строки уже отрабатывает как и было задумано. */
.community-popularity-col{ min-width:0; }
.community-popularity-col-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color: var(--ink-secondary); margin:0 0 8px;
}
.community-popularity-list{ list-style:none; margin:0; padding:0; }
.community-popularity-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 4px;
}
.community-popularity-row + .community-popularity-row{ border-top:1px solid var(--rule); }
.community-popularity-rank{ width:20px; text-align:center; font-weight:800; font-size:13.5px; color: var(--ink-secondary); flex:none; }
.community-popularity-name{
  flex:1; font-weight:600; font-size:14px; min-width:0; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.community-popularity-meta{ font-weight:500; font-size:12px; color: var(--ink-secondary); margin-left:6px; }
/* Стопка аватарок вместо "N путешественников" текстом на каждой строке — тот же
   принцип, что и у тизера сообщества на главной (.community-avatar-stack) и у
   кружков в топе путешественников (.community-lb-avatar), и того же размера, что
   и у последних (34px) — меньше (было 24px) оказалось не видно, что на кружке
   вообще написано. Полная подпись — в title при наведении. */
.community-popularity-avatars{ display:flex; flex-shrink:0; }
.community-popularity-avatar{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--bg-card); margin-left:-10px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
  object-fit:cover; flex:none; box-sizing:border-box;
}
.community-popularity-avatar:first-child{ margin-left:0; }
.community-popularity-avatar-more{ background: var(--bg-paper-alt); color: var(--ink-secondary); }

@media (max-width:720px){
  #community-map{ height:380px; }
  #notes-map{ height:180px; }
}

/* Те же фиксированные 36-56px по бокам, что и у обычного .card (см. правку выше),
   только эти карточки задают padding отдельно, своим собственным, более
   специфичным классом — общая мобильная поправка .card его не перекрывает.
   Вход в Сообщество, профиль, список участников, пустое состояние и форма
   добавления места страдали тем же самым сужением на телефоне. */
@media (max-width: 640px){
  .community-members-card{ padding: 24px 20px; }
  .community-empty{ padding: 32px 20px; }
  .community-auth-card{ padding: 32px 20px; }
  .community-profile-form-card{ padding: 24px 20px; }
  .community-danger-zone{ padding: 24px 20px; }
  .community-add-place-card{ padding: 28px 20px; }
}

@media (max-width:480px){
  /* На узком экране иконки транспорта в топе — необязательное украшение, а не
     ключевая информация. Без них у имени/счёта больше места, ряд не теснится. */
  .community-lb-transport{ display:none; }
  .community-lb-link{ gap:10px; padding:10px 6px; }
}

/* ===== "Челленджи месяца" (community_challenges.html) — рейтинги по категориям
   активности за календарный месяц. Строки рейтинга переиспользуют .community-lb-*
   как есть (см. выше) — здесь только обвязка: переключатель месяца и карточка
   категории с двумя колонками ("по дистанции"/"по количеству") рядом. ===== */
.challenges-month-nav{
  display:flex; align-items:center; justify-content:center; gap:18px; margin:4px 0 28px;
  flex-wrap:wrap;
}
.challenges-month-btn{
  font-size:13px; font-weight:600; color: var(--accent-rust); text-decoration:none;
  padding:6px 4px; white-space:nowrap;
}
.challenges-month-btn:hover{ text-decoration:underline; }
.challenges-month-btn.is-disabled{ color: var(--ink-secondary); opacity:.4; pointer-events:none; }
.challenges-month-label{ font-size:16px; font-weight:800; display:flex; align-items:center; gap:10px; }
.challenges-current-badge{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:#fff; background: var(--accent-rust); padding:3px 9px; border-radius:999px;
}
.challenges-category-card{ margin-top:16px; }
.challenges-category-header{ margin-bottom:14px; }
.challenges-columns{ display:grid; grid-template-columns: 1fr 1fr; gap:0 28px; }
.challenges-column + .challenges-column{ border-left:1px solid var(--rule); padding-left:28px; }
.challenges-column-title{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color: var(--ink-secondary); margin-bottom:8px;
}
.challenges-empty{ font-size:13px; color: var(--ink-secondary); padding:10px 4px; }
@media (max-width: 640px){
  .challenges-columns{ grid-template-columns: 1fr; gap:20px 0; }
  .challenges-column + .challenges-column{ border-left:none; padding-left:0; border-top:1px solid var(--rule); padding-top:16px; }
}

/* ---- вкладка "Челленджи" в профиле (community_user.html) — по просьбе "в
   профиле сделай еще один таб про челеленджи" — компактная личная версия тех же
   данных, что и на публичной /community/challenges (карточка на категорию вместо
   двух колонок топ-10, ссылка на полную страницу сверху). ---- */
.challenges-profile-intro{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px; font-size:13.5px; color: var(--ink-secondary); margin-bottom:16px;
}
.challenges-profile-card{ margin-top:12px; padding:18px 20px; }
.challenges-profile-stats{ display:grid; grid-template-columns: 1fr 1fr; gap:0 24px; margin-top:14px; }
.challenges-profile-stat + .challenges-profile-stat{ border-left:1px solid var(--rule); padding-left:24px; }
.challenges-profile-stat-num{ font-size:22px; font-weight:800; }
.challenges-profile-stat-num span{ font-size:13px; font-weight:600; color: var(--ink-secondary); }
.challenges-profile-stat-label{ font-size:12px; color: var(--ink-secondary); margin-top:2px; }
@media (max-width: 480px){
  .challenges-profile-stats{ grid-template-columns: 1fr; gap:14px 0; }
  .challenges-profile-stat + .challenges-profile-stat{ border-left:none; padding-left:0; border-top:1px solid var(--rule); padding-top:14px; }
}

/* ===== "Моя активность" (community_activities.html/community_activity_detail.html) —
   запись GPS-трека прогулки/похода/пробежки/велосипеда идёт только в iOS-
   приложении (вкладка "Активность"), сайт тут только читает уже сохранённое. Та
   же сетка карточек, что и у "Мои города" (.community-place-grid выше), но своя
   разметка внутри — состав полей другой (категория+дистанция+время, а не
   город+страна). ===== */
.activity-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:14px; }
.activity-card{
  display:block; background: var(--bg-card); border:1px solid var(--rule); border-radius:18px;
  padding:18px 20px; box-shadow: 0 8px 24px rgba(27,27,27,0.04); text-decoration:none; color:inherit;
  transition: transform .15s, box-shadow .15s;
}
.activity-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,27,27,0.08); }
.activity-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.activity-category-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  padding:5px 10px; border-radius:999px; white-space:nowrap;
}
.activity-category-badge-lg{ font-size:14px; padding:7px 14px; margin-bottom:14px; }
.activity-visibility-badge{ font-size:11.5px; color: var(--ink-secondary); }
.activity-visibility-badge.is-public{ color: var(--accent-rust); font-weight:600; }
.activity-card-title{ font-weight:700; font-size:15.5px; margin-bottom:2px; }
.activity-card-date{ font-size:12.5px; color: var(--ink-secondary); margin-bottom:10px; }
.activity-card-stats{ display:flex; gap:14px; font-size:13px; font-weight:600; color: var(--ink); }

.activity-detail-header{ padding-top:8px; }
/* Переименование активности прямо со страницы — по просьбе "[← Моя активность]
   убери и дай возможноть изменять название" (13.08.2026). h1 остаётся по центру
   (как раньше, наследует выравнивание от .community-header), карандаш — обычная
   кнопка-иконка без своего фона, тем же паттерном, что и другие круглые кнопки-
   иконки на сайте (.community-place-card-note и т.п.), просто прозрачная и
   inline рядом с текстом, а не поверх фото. Форма переименования скрыта (атрибут
   hidden в HTML) и раскрывается инлайновым onclick по клику на карандаш. */
.activity-detail-title-row{ display:flex; align-items:center; justify-content:center; gap:10px; }
.activity-title-edit-btn{
  border:none; background:none; color: var(--ink-secondary); cursor:pointer; flex-shrink:0;
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
}
.activity-title-edit-btn:hover{ color: var(--accent-rust); background: rgba(242,112,62,0.1); }
.activity-title-edit-btn .ti-icon{ width:16px; height:16px; }
.activity-rename-form{ display:flex; justify-content:center; gap:8px; margin:8px 0 0; }
.activity-rename-form .community-field-input{ max-width:360px; }
.activity-rename-form[hidden]{ display:none; }
/* По просьбе "кликая на пользователя открываю его публичный профиль и добавь
   автатар спереди" — дата+автор были обычным <p> (наследовал .community-header p:
   text-align:justify/max-width:560px — нормально для абзаца, но не для одной
   короткой строки "дата · автор"), теперь строка-флекс с кликабельным автором. */
.activity-detail-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:16px; color: var(--ink-secondary); margin:0 0 24px; text-align:left; }
.activity-detail-owner{ display:inline-flex; align-items:center; gap:8px; color: var(--ink-secondary); text-decoration:none; }
.activity-detail-owner:hover{ color: var(--ink); }
.activity-detail-owner-avatar{ width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.activity-detail-owner-initials{
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; flex-shrink:0;
}
.activity-map-card{
  background: var(--bg-card); border:1px solid var(--rule); border-radius:20px; overflow:hidden;
  box-shadow: 0 8px 24px rgba(27,27,27,0.04); margin: 8px 0 24px;
}
#activity-detail-map{ height:380px; width:100%; background: var(--bg-paper); }
/* 5-6 плиток статистики активности — на .community-stats по умолчанию auto-fit
   minmax(220px,1fr), при 5+ плитках это не влезает в 1080px .page-wrap, поэтому
   лишние плитки падали на новую строку. Здесь жёстко задаём 6 колонок на
   широких экранах (5 прежних + новая "Высшая точка", см. renderActivitySummaryBar
   в activity-profile-charts.js — 6-я плитка не у КАЖДОЙ активности, у старых
   записей без высоты в треке колонок будет меньше, тогда просто пустое место
   в конце последней строки), с уменьшением на более узких — тот же приём, что
   и у .activity-profile-stats ниже. */
.activity-stats{ margin: 0 0 32px; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px){
  .activity-stats{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .activity-stats{ grid-template-columns: repeat(2, 1fr); }
}
.activity-owner-actions{ display:flex; gap:12px; flex-wrap:wrap; margin: 8px 0 48px; }
.activity-owner-actions form{ margin:0; }

/* Бейджи личных рекордов (community_storage.activity_personal_records) — по
   просьбе "к статистике активности добавить рекорды". Отдельный тёплый
   "золотой" акцент вместо --accent-rust — рекорд смысловая другая категория
   (достижение), чем цвет категории активности (activity_color) или обычный
   акцент кнопок, тем более что бейдж стоит рядом с цветным .activity-category-
   badge и не должен с ним сливаться/спорить. */
.activity-records-row{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.activity-record-badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  padding:6px 12px; border-radius:999px; background: rgba(196,130,20,0.14); color:#8A5F10;
  white-space:nowrap;
}
:root[data-theme="dark"] .activity-record-badge{ background: rgba(255,196,61,0.16); color:#FFC65C; }

/* Погода на старте/финише — activity.weather_start/weather_end, см. докстринг у
   community_storage.add_activity и разметку в community_activity_detail.html. */
.activity-weather-row{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.activity-weather-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:999px; background: var(--bg-card); border:1px solid var(--rule);
  color: var(--ink-secondary); white-space:nowrap;
}
.activity-weather-icon{ font-size:15px; line-height:1; }
.activity-weather-temp{ font-weight:800; color: var(--ink); }

/* Привязка активности к городу/заметке — activity.note_slug, см. докстринг у
   community_storage.add_activity и разметку в community_activity_detail.html. */
.activity-note-link{
  display:flex; align-items:center; gap:8px; margin:0 0 20px; padding:10px 14px;
  border-radius:12px; background: var(--bg-card); border:1px solid var(--rule);
  color: var(--ink); text-decoration:none; font-size:13.5px; font-weight:500;
  transition: border-color .15s;
}
.activity-note-link:hover{ border-color: var(--accent-rust, #B5502E); }
.activity-note-link-icon{ font-size:15px; }
.activity-note-link-arrow{ margin-left:auto; opacity:.6; }

/* ===== Лайк + комментарии на странице активности — по просьбе "добавь возможность
   лайкать и дизлайкать и писать коменты только для пользователей". Кнопка лайка —
   тот же .activity-like-btn что для вошедшего (form/button), что и для гостя
   (ссылка на вход) — одинаково выглядят, просто ведут к разным действиям. Порядок
   содержимого (сердечко → число → слово "Нравится") и сам вид кнопки (фон/скругление,
   не голый текст) — по итоговому отзыву на несколько раундов правок этой кнопки. ===== */
.activity-social{ margin-bottom: 48px; }
.activity-like-row{ display:flex; align-items:center; gap:12px; margin-bottom: 28px; }
.activity-like-row form{ margin:0; }
.activity-like-btn{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--rule); background: var(--bg-card);
  color: var(--ink); padding:9px 18px; border-radius:999px; font-family:'Onest', sans-serif;
  font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:none; transition: border-color .15s, color .15s;
}
.activity-like-btn .ti-icon{ width:18px; height:18px; }
.activity-like-btn:hover{ border-color: var(--accent-rust); }
.activity-like-btn.is-liked{ border-color: var(--accent-rust); color: var(--accent-rust); }
.activity-like-count{ font-size:14px; }

.activity-comment-form{ margin: 0 0 24px; }
.activity-comment-form textarea{ min-height:72px; resize:vertical; margin-bottom:10px; }
.activity-comment-submit{ padding:10px 22px; font-size:13.5px; }

.activity-comment-list{ display:flex; flex-direction:column; gap:18px; }
.activity-comment-row{ display:flex; gap:12px; }
.activity-comment-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.activity-comment-avatar-initials{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; flex-shrink:0;
}
.activity-comment-body{ flex:1; min-width:0; }
.activity-comment-meta{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; }
.activity-comment-author{ font-weight:600; font-size:13.5px; }
.activity-comment-author a{ color: var(--ink); text-decoration:none; }
.activity-comment-author a:hover{ text-decoration:underline; }
.activity-comment-date{ font-size:12px; color: var(--ink-secondary); }
.activity-comment-text{ font-size:14px; line-height:1.6; margin:0; white-space:pre-wrap; word-break:break-word; }
.activity-comment-delete-form{ margin:6px 0 0; }
.activity-comment-delete-btn{
  background:none; border:none; padding:0; font-size:12px; color: var(--ink-secondary);
  cursor:pointer; text-decoration:underline;
}
.activity-comment-delete-btn:hover{ color:#C0392B; }

/* ===== Отзывы о заметке (рейтинг 1-5 + текст, один на человека) — note.html,
   note_reviews_storage.py. По просьбе "если кто-то воспользовался гидом - написал
   отзыв и поставил ему оценку" (14.08.2026). Форма/список — то же семейство классов,
   что и у комментариев активности выше (.activity-comment-*), только с добавленным
   выбором звёзд вместо лайка. ===== */
.note-reviews-section{ margin-top: 48px; margin-bottom: 48px; } /* margin-top — та же дистанция, что от фото до "Следующего города" (см. комментарий у .community-city-section) — без него блок слипался с next-city-nav, у которого нет своего margin-bottom */
.note-reviews-summary{ display:flex; align-items:baseline; gap:6px; font-size:14px; margin: 0 0 20px; }
.note-reviews-summary-score{ font-weight:800; font-size:20px; color: var(--ink); }
.note-reviews-summary-count{ color: var(--ink-secondary); }
.note-reviews-empty{ font-size:13.5px; color: var(--ink-secondary); margin: 0 0 20px; }

.note-review-form{ margin: 0 0 12px; }
.note-review-form textarea{ min-height:72px; resize:vertical; margin:12px 0 10px; }
.note-review-submit{ padding:10px 22px; font-size:13.5px; }

/* Звёзды-переключатель — классический CSS-приём без JS: radio идут в DOM 5→1,
   контейнер row-reverse рисует их слева направо 1→5, а :hover/:checked подсвечивают
   через общий сиблинг-селектор "~" (все, что идёт ПОСЛЕ наведённой/выбранной звезды
   в DOM — визуально это она сама и всё, что левее). */
.note-review-stars-input{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px; }
.note-review-stars-input input{ position:absolute; opacity:0; width:1px; height:1px; }
.note-review-stars-input label{ font-size:26px; line-height:1; color: var(--rule); cursor:pointer; transition: color .1s; }
.note-review-stars-input input:checked ~ label,
.note-review-stars-input label:hover,
.note-review-stars-input label:hover ~ label{ color:#E0A72E; }
.note-review-stars-static{ color:#E0A72E; font-size:14px; letter-spacing:1px; }

.note-review-delete-form{ margin:0 0 24px; }
.note-review-delete-btn{
  background:none; border:none; padding:0; font-size:12px; color: var(--ink-secondary);
  cursor:pointer; text-decoration:underline;
}
.note-review-delete-btn:hover{ color:#C0392B; }

.note-review-list{ display:flex; flex-direction:column; gap:18px; }
.note-review-row{ display:flex; gap:12px; }
.note-review-row--mine{ background: var(--bg-paper-alt); border-radius:14px; padding:10px 12px; margin: 0 -12px; }
.note-review-avatar{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.note-review-avatar-initials{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px; flex-shrink:0;
}
.note-review-body{ flex:1; min-width:0; }
.note-review-meta{ display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.note-review-author{ font-weight:600; font-size:13.5px; }
.note-review-author a{ color: var(--ink); text-decoration:none; }
.note-review-author a:hover{ text-decoration:underline; }
.note-review-date{ font-size:12px; color: var(--ink-secondary); }
.note-review-text{ font-size:14px; line-height:1.6; margin:0; white-space:pre-wrap; word-break:break-word; }

/* Полилиния трека и маркеры старт/финиш — рисуются JS (static/js/activity-map.js),
   эти классы только про сам вид точек/подписей попапов. По отзыву "на сайте
   кружки метки как на заметках" — та же самая точка, что и .npm-dot у карты мест
   заметки (note-places-map.js), один в один (раньше здесь был отдельный, чуть
   мельче и с другой тенью, вариант — сознательно выровнял, чтобы обе карты
   выглядели одинаково). */
.activity-map-marker{ display:block; width:17px; height:17px; border-radius:50%; border:2px solid var(--bg-paper); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.activity-map-popup{ font-family:'Onest', sans-serif; font-size:13px; }

/* Маркер фото "по пути" на карте трека — та же идея, что и .activity-map-marker
   выше (кружок с рамкой в цвет фона), но крупнее и с иконкой камеры вместо
   точки-цвета, кликабелен (открывает лайтбокс, см. activity-map.js/onPhotoClick
   и community_activity_detail.html). */
.activity-map-photo-marker{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent-rust); border:2px solid var(--bg-paper); box-shadow:0 1px 4px rgba(0,0,0,.35); font-size:13px; cursor:pointer; }

.back-link{ display:inline-block; color: var(--ink-secondary); font-size:13.5px; text-decoration:none; margin: 4px 0 12px; }
.back-link:hover{ color: var(--accent-rust); }

.btn-secondary{ background: var(--bg-paper-alt); color: var(--ink); }
.btn-secondary:hover{ background: var(--rule); transform: translateY(-1px); }
.btn-danger{ background: rgba(192,57,43,0.1); color:#C0392B; }
.btn-danger:hover{ background: rgba(192,57,43,0.18); transform: translateY(-1px); }

@media (max-width: 640px){
  #activity-detail-map{ height:260px; }
}

/* ===== Профили "Высота"/"Профиль скорости" на странице активности — в духе
   Komoot (см. activity-profile-charts.js, вся разметка внутри строится JS-ом,
   тут только внешний вид). Карточки идут одна под другой, каждая — заголовок +
   белая карточка с подсказкой/canvas/статистикой, тот же принцип отступов и
   скруглений, что и у .activity-map-card/.community-stat-card. ===== */
.activity-profiles{ display:flex; flex-direction:column; gap:28px; margin: 8px 0 32px; }
.activity-profile-title{ font-family:'Onest', sans-serif; font-size:20px; font-weight:800; margin:0 0 12px; }
.activity-profile-body{
  background: var(--bg-card); border:1px solid var(--rule); border-radius:20px;
  padding:20px; box-shadow: 0 8px 24px rgba(27,27,27,0.04);
}
.activity-profile-chart-area{ position:relative; margin: 0 0 8px; }
.activity-profile-canvas{ display:block; width:100%; }
.activity-profile-stats{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:16px;
  padding-top:16px; border-top:1px solid var(--rule);
}
.activity-profile-stat-value{ font-family:'Onest', sans-serif; font-size:22px; font-weight:800; color: var(--ink); }
.activity-profile-stat-label{ font-size:12.5px; color: var(--ink-secondary); margin-top:2px; }

@media (max-width: 640px){
  .activity-profile-body{ padding:16px; }
  .activity-profile-stats{ grid-template-columns: repeat(2, 1fr); gap:14px; }
}

/* ===== community_user.html — публичный профиль путешественника: вкладки "Мои
   города" / "Моя активность" (сначала пробовали разбить на два столбца — по
   отзыву "смотрится как-то не очень", заменили на вкладки; переключатель тот же
   .subtabs/.tab-btn, что и у "Топ путешественников"/"Все путешественники" в
   community.html, показ/скрытие панели — тем же приёмом, что и .lb-tab-panel
   там же). Правая вкладка показывает только ПУБЛИЧНЫЕ активности этого
   пользователя (приватные отфильтрованы ещё в user_page(), routes_community.py —
   до шаблона они просто не доходят). ===== */
/* .subtabs по умолчанию центрирует кнопки (justify-content:center — так и
   задумано у "региональных" вкладок на главной, там это единственный элемент по
   центру страницы) — тут переопределяем на выравнивание по левому краю, там же,
   где начинается остальной контент страницы (шапка/статистика/карточки). */
.community-profile-subtabs{ justify-content:flex-start; margin: 16px 0 20px; }
.profile-tab-panel{ display:none; }
.profile-tab-panel.active{ display:block; }

/* Заметки (#tab-notes, home.html) — Города/Места + региональные/страновые подвкладки
   внутри — по просьбе "перенеси всё влево, а не по центру" переопределяем ту же
   стандартную центровку .subtabs, что и у профиля выше, тем же приёмом. */
#tab-notes .subtabs{ justify-content:flex-start; }

/* ===== "Рейтинги" на главной (home.html) — 4 блока: топ-5 заметок по звёздам,
   топ-5 путешественников, топ-5 активных за месяц/год — по просьбе "давай
   сделаем 4 блока с рейтингами" (14.08.2026), над баннером Telegram. Компактная
   2x2-сетка карточек (в отличие от community.html, где те же самые рейтинги
   занимают целую широкую .card) — строки внутри переиспользуют классы
   .community-lb-* (rank/avatar/name/score/you-tag), только row/link/card —
   свои: там строки без своего фона внутри большой карточки, здесь сама строка
   ýже, поэтому паддинги меньше. ===== */
.home-ratings-section{ padding-bottom: 8px; }
.home-ratings-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:20px;
}
/* По просьбе "4 блока в ряд, а не по 2" (14.08.2026) — 4 колонки на широком экране,
   2 на планшетном, 1 на телефоне (та же логика сужения, что и у остальных сеток
   карточек на главной, .note-preview-grid/.latest-activity-grid, только с двумя
   промежуточными ступенями — тут карточка ýже, схлопывать сразу в один столбец с
   960px было бы преждевременно).

   minmax(0, 1fr), а не голый 1fr — тот же классический подвох CSS Grid, что уже
   разобран у .community-popularity-columns выше: 1fr сам по себе задаёт гибкую
   ДОЛЮ пространства, но у грид-колонки по умолчанию min-width:auto, а не 0, то
   есть колонка не может сжаться уже содержимого (длинное имя путешественника —
   "Екатерина Киргизова", "Yaroslav Kushnar" — не давало карточке сжаться до
   1/4 ширины страницы). Из-за этого на проде 4-я карточка "Топ-5 активных за
   год" вылезала за пределы .page-wrap (репорт "надо пофиксить под ширину
   проекта", 14.08.2026, скриншот jakubovsky.com/ru/) — minmax(0, 1fr) разрешает
   колонке сжаться, дальше truncate уже отрабатывает .home-rating-name
   (min-width:0 + text-overflow:ellipsis) как и было задумано. */
@media (max-width: 960px){ .home-ratings-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px){ .home-ratings-grid{ grid-template-columns: minmax(0, 1fr); } }

/* Пока лидерборд активностей скрыт (community_storage.leaderboard_unlocked —
   меньше 100 участников, см. home.html), тут остаются только 2 карточки
   ("Топ-5 заметок"/"Топ-5 путешественников") — в обычной 4-колоночной сетке
   выше они занимали только левую половину ряда, а справа пустовало на всю
   ширину .page-wrap. По просьбе "давай эта сетка будет в два блока по ширине
   проекта пока не откроется активность" (19.08.2026) — модификатор,
   растягивающий эти 2 карточки на все 2 колонки сразу (а не 2 из 4), пока
   активных карточек только 2 (см. rating_blocks в home.html). Как только
   лидерборд разблокируется и появляются 3-4 карточки, класс
   home-ratings-grid--pair больше не добавляется — сетка возвращается к
   обычным 4 колонкам. */
.home-ratings-grid--pair{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-rating-card{
  background: var(--bg-card); border:1px solid var(--rule); border-radius:18px;
  padding:20px 22px; box-shadow: 0 8px 24px rgba(27,27,27,0.04);
}
.home-rating-card-title{
  font-family:'Onest', sans-serif; font-weight:700; font-size:14.5px; margin: 0 0 10px;
}
.home-rating-list{ list-style:none; margin:0; padding:0; }
.home-rating-row + .home-rating-row{ border-top:1px solid var(--rule); }
.home-rating-link{
  display:flex; align-items:center; gap:12px; padding:8px 4px; border-radius:12px;
  text-decoration:none; color:inherit;
}
.home-rating-link:hover{ background: var(--bg-paper-alt); }
.home-rating-rank{ width:20px; text-align:center; font-weight:800; font-size:13px; color: var(--ink-secondary); flex:none; }
.home-rating-rank.medal-1{ color:#C9971F; } .home-rating-rank.medal-2{ color:#9AA1AC; } .home-rating-rank.medal-3{ color:#B5732E; }
.home-rating-avatar{ width:30px; height:30px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; object-fit:cover; }
.home-rating-thumb{ width:30px; height:30px; border-radius:8px; flex:none; background-size:cover; background-position:center; background-color: var(--bg-paper-alt); }
.home-rating-thumb--empty{ background: var(--bg-paper-alt); }
.home-rating-name{
  flex:1; font-weight:600; font-size:13.5px; min-width:0; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.home-rating-meta{ display:block; font-weight:500; font-size:11.5px; color: var(--ink-secondary); }
.home-rating-score{ font-weight:700; font-size:13px; flex:none; color: var(--ink); white-space:nowrap; }
.home-rating-score span{ font-weight:500; font-size:11px; color: var(--ink-secondary); margin-left:3px; }
.home-rating-score--muted{ font-weight:500; font-size:11.5px; color: var(--ink-secondary); white-space:nowrap; }