/* Reset only — all styles in App.css */
/* ================================================================
   KLEVAT — Dark Forest Premium CSS
   "Outdoor Sports App" meets "Social Network"
   v3.1 — tab bar redesign, badge refresh, brand green
   ================================================================ */

/* ===== CSS CUSTOM PROPERTIES — warm, muted, modern ===== */
:root {
  /* Края плавающей плашки карты. Значения перезаписывает MapPage по факту замера —
     так подложка строки поиска садится ровно по плашке (из CSS её ширину не вычислить). */
  --map-pill-left: 26px;
  --map-pill-right: 26px;
  /* Brand — soft moss, nature-inspired */
  --build: 3200;
  --primary:        #7fa17a;
  --primary-dark:   #6b8d68;
  --primary-light:  rgba(127,161,122,0.15);
  --primary-bg:     rgba(127,161,122,0.10);
  --accent:         #7fa17a;
  --accent-dark:    #6b8d68;
  --accent-light:   rgba(127,161,122,0.15);

  /* Surfaces — deep forest night */
  --bg:             #1a1f1c;
  --bg-warm:        #1f2522;
  --card:           #242b27;

  /* Text — warm cream */
  --text:           #e8e2d4;
  --text-dim:       #b8b0a3;
  --text-muted:     #8a837a;

  /* Borders — subtle in dark */
  --border:         #353c37;
  --border-light:   #2b322e;

  /* Input / skeleton / glass surfaces */
  --bg-input:       #1c2c2a;
  --bg-skeleton:    #1e2e2b;
  --bg-header:      rgba(18,26,23,0.97);
  --bg-tabbar:      rgba(10,15,12,0.98);
  --bg-tabbar-float: rgba(14,20,17,0.42);
  --scrim-tab: rgba(8,12,10,0.72);
  --scrim-top: rgba(8,12,10,0.88);

  /* Status colors — muted for dark */
  --orange:         #c9a876;
  --orange-light:   rgba(201,168,118,0.15);
  --danger:         #c57a7a;
  --danger-light:   rgba(197,122,122,0.15);
  --success:        #7fa17a;
  --success-light:  rgba(127,161,122,0.15);
  --warning:        #c9a876;

  /* Shape */
  /* Фирменные цвета внешних площадок (плитки «Поделиться»). Одинаковы в обеих темах. */
  --brand-tg:       #29A0D9;
  --brand-tg-dark:  #2490c5;
  --brand-max:      #2C6BED;
  --brand-max-dark: #2559cc;
  --brand-fg:       #ffffff;   /* глиф на фирменной плитке */
  /* Медали мест в рейтингах (1-2-3) */
  --medal-gold:     #f5c542;
  --medal-silver:   #c9c9c9;
  --medal-bronze:   #cd7f32;
  /* Единая подложка наград: песок — на нём читаются и тёмные силуэты, и цветные значки */
  --badge-bg:       #E2DBCB;
  --badge-rim:      #BFB6A3;
  --radius:         12px;
  --radius-sm:      10px;
  --radius-xs:      6px;
  --radius-lg:      16px;   /* топбар-панель, крупный CTA, слот-канвас (чинит фантом-радиус) */
  --radius-xl:      18px;   /* герой-канвас пруда/аквариума */
  --radius-pill:    999px;

  /* Игровые акценты (одна сущность = один токен; тинты через color-mix/--*-bg).
     Приглушённые под общий тон KLEVAT, не сырой tailwind. */
  --game-aqua:      #4a9fc4;  --game-aqua-bg:     rgba(74,159,196,.12);
  --game-arena:     #5b9bd5;  --game-arena-bg:    rgba(91,155,213,.12);
  --game-duel:      #8b8fd4;  --game-duel-bg:     rgba(139,143,212,.12);
  --game-chaos:     #c4934a;  --game-chaos-bg:    rgba(196,147,74,.12);
  --game-bloody:    #c0605a;  --game-bloody-bg:   rgba(192,96,90,.12);
  --game-wardrobe:  #a890d0;  --game-wardrobe-bg: rgba(168,144,208,.12);
  --game-caps:      var(--warning);  --game-caps-bg: rgba(201,168,118,.12);
  --game-room:      var(--primary);  --game-room-bg: var(--primary-bg);
  /* Валюта «рыбки» — единый золотой токен вместо разрозненного хардкода */
  /* Акцент главы кампании: реальное значение приходит инлайном из данных,
     здесь — дефолт, чтобы переменная была объявлена по стандарту (§2). */
  --ch:             var(--primary);
  --coin:           var(--warning);  --coin-bg:      rgba(201,168,118,.14);

  /* Spacing — единый закон внутреннего паддинга карточек/баннеров/виджетов */
  --card-padding:   8px;

  /* Layout */
  --tab-height:          56px;   /* 50 панель + 6 зазор под плавающую плашку */
  --tab-panel-h:         50px;
  /* Единая вертикальная сетка приложения: 5 колонок нижней панели.
     По этим же колонкам выравниваются иконки в шапке — см. /styleguide. */
  --nav-inset:           26px;   /* отступ плавающей панели от краёв экрана */
  --nav-pad:              6px;   /* внутренний отступ панели */
  --nav-track:           32px;   /* = --nav-inset + --nav-pad, начало колонок */
  --nav-c1:              calc(var(--nav-track) + (100vw - 2 * var(--nav-track)) / 10);
  --header-height:       56px;
  --bottom-nav-height:   64px;
  --hdr-search-h:   58px;   /* высота выдвижной строки поиска (поле 44 + паддинги 14) */
  /* Верхний инсет под чёлку/остров. Базово = полный safe-area; на мобиле/standalone
     переопределяется чуть меньше (см. media / .pwa-standalone), чтобы хедер не висел
     слишком далеко от статус-бара, но иконки оставались ниже выреза. */
  --safe-top: env(safe-area-inset-top, 0px);

  /* Shadows — very subtle, warm */
  --shadow-xs:  0 1px 2px rgba(44,40,37,0.04);
  --shadow:     0 2px 6px rgba(44,40,37,0.06);
  --shadow-md:  0 4px 12px rgba(44,40,37,0.08);
  --shadow-lg:  0 6px 20px rgba(44,40,37,0.12);

  /* Motion */
  --transition: 0.15s ease;

  /* Sidebar */
  --sidebar-bg:         #f9f8f5;
  --sidebar-text:       #4a4541;
  --sidebar-text-hover: #2c2825;
  --sidebar-active:     #3d9b8f;
  --sidebar-border:     #e4e0db;
  --sidebar-surface:    #f4f2ee;

  /* Z-index stack */
  --z-base:       1;
  --z-sticky:     10;
  --z-dropdown:   300;
  --z-header:     500;
  --z-avatar:     600;
  --z-modal:      600;
  --z-sheet:      602;
  --z-overlay:    700;
  --z-toast:      4000;
  --z-lightbox:   9999;
  --z-topmost:    10000;

  /* ════════════════════════════════════════════════════════════════
     ЗАКОН: ЕДИНАЯ СИСТЕМА ИНТЕРАКТИВНЫХ ЭЛЕМЕНТОВ (design tokens)
     ─────────────────────────────────────────────────────────────────
     Эталон — зелёная кнопка «Создать пост» в хедере: плоская заливка
     primary, БЕЗ тени, радиус 6px, шрифт 700, текст светлый.
     Все кнопки / поля / чипы / табы / переключатели / «назад» / FAB
     ОБЯЗАНЫ брать вид ТОЛЬКО отсюда. Хардкод цвета/радиуса/высоты
     интерактивного элемента запрещён — хочешь сменить стиль всего
     сайта → меняй переменную ЗДЕСЬ, и вид поменяется везде.
     ════════════════════════════════════════════════════════════════ */

  /* ── КНОПКА (эталон «Создать пост»: плоская, без тени) ── */
  --btn-bg:            var(--primary);     /* заливка основной кнопки */
  --btn-bg-hover:      var(--primary-dark);
  --btn-text:          var(--bg);          /* ТЁМНЫЙ текст на зелёном — РОВНО как эталон «Создать пост» */
  --btn-radius:        var(--radius-xs);   /* 6px — как у эталона */
  --btn-radius-sm:     var(--radius-xs);
  --btn-shadow:        none;               /* плоская: тени нет */
  --btn-shadow-hover:  none;
  --btn-h:             44px;               /* крупная (submit формы, во всю ширину) */
  --btn-h-md:          36px;               /* инлайн/хедер — РОВНО как «Создать пост» */
  --btn-h-sm:          32px;               /* мелкая */
  --btn-pad:           0 20px;             /* как у эталона */
  --btn-pad-sm:        0 14px;
  --btn-font:          13.5px;             /* как у эталона */
  --btn-font-sm:       12px;
  --btn-weight:        700;
  /* Вторичная кнопка (контур) */
  --btn-sec-bg:        var(--card);
  --btn-sec-border:    var(--border);
  --btn-sec-text:      var(--primary);
  /* Опасное действие */
  --btn-danger-bg:     var(--danger);
  --btn-danger-text:   #1a1f1c;

  /* ── ПОЛЕ ВВОДА / SELECT / ПОИСК (эталон — поле поиска в хедере) ── */
  --input-bg:           var(--bg-warm);
  --input-bg-focus:     var(--card);
  --input-border:       var(--border);
  --input-border-focus: var(--primary);
  --input-text:         var(--text);
  --input-placeholder:  var(--text-muted);
  --input-radius:       var(--radius-sm);  /* 10px — единый радиус полей */
  --input-h:            44px;
  --input-pad:          12px 14px;
  --input-font:         15px;
  --input-border-w:     1.5px;

  /* ── ЧИП / ФИЛЬТР-ПИЛЮЛЯ / ПЕРЕКЛЮЧАТЕЛЬ ── */
  /* active = СПЛОШНАЯ заливка primary (как «Создать пост»), не блёклая */
  --chip-bg:          var(--card);
  --chip-border:      var(--border);
  --chip-text:        var(--text-muted);
  --chip-bg-active:   var(--primary);
  --chip-text-active: var(--bg);        /* тёмный текст на зелёном — как эталон */
  --chip-border-active: var(--primary);
  --chip-radius:      20px;

  /* ── ТАБ / СЕГМЕНТ ── (active = заливка primary) */
  --tab-bg:           transparent;
  --tab-border:       var(--border);
  --tab-text:         var(--text-muted);
  --tab-bg-active:    var(--primary);
  --tab-text-active:  var(--bg);         /* тёмный текст на зелёном — как эталон */
  --tab-radius:       var(--radius-xs);

  /* ── ПЕРЕКЛЮЧАТЕЛЬ / ЧЕКБОКС (accent-color) ── */
  --toggle-accent:    var(--primary);

  /* ── КНОПКА «НАЗАД» ── (единый вид во всех хедерах) */
  /* Квадратные icon-action кнопки «назад» и «добавить» — ОДИН размер на обе */
  --action-btn-size:   44px;
  --action-btn-radius: 8px;

  --back-bg:          var(--card);
  --back-border:      var(--border);      /* рамка заметнее (было border-light) */
  --back-text:        var(--text);        /* стрелка светлая (тема-зависимо), почти белая в тёмной */
  --back-size:        var(--action-btn-size);
  --back-radius:      var(--action-btn-radius);
  --back-icon:        20px;
  --back-icon-stroke: 2.4;               /* стрелка чуть толще */

  /* ── FAB / «ДОБАВИТЬ» ── (квадрат 8px, РОВНО размер «назад») */
  --fab-bg:           var(--primary);
  --fab-bg-hover:     var(--primary-dark);
  --fab-text:         var(--bg);          /* тёмный «+» на зелёном — как эталон */
  --fab-size:         var(--action-btn-size);   /* = размер «назад» */
  --fab-radius:       var(--action-btn-radius);
  --fab-icon:         24px;
  --fab-shadow:       0 4px 18px rgba(74,130,78,0.40);

  /* ── ИКОНОЧНАЯ КНОПКА ── */
  --icon-btn-size:    36px;
  --icon-btn-radius:  var(--radius-sm);

  /* ── ВЫПАДАЮЩИЙ СПИСОК / DROPDOWN-МЕНЮ ── (современный, в нашем стиле) */
  --menu-bg:            var(--card);
  --menu-border:        var(--border-light);
  --menu-radius:        12px;
  --menu-shadow:        0 10px 30px rgba(0,0,0,0.32);
  --menu-item-pad:      11px 14px;
  --menu-item-hover:    var(--bg-warm);
  --menu-item-active-bg:   var(--primary);   /* выбранный пункт = заливка primary */
  --menu-item-active-text: var(--bg);        /* тёмный текст — как эталон */
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: none;
}

/* ===== BASE ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  font-size: 15px;
}
/* Гасим rubber-band/overscroll ДОКУМЕНТА (iOS Safari + PWA, Android Chrome).
   Именно «резинка» при доскролле за верх/низ таскала фикс-панели (нижний таб-бар
   «поднимался и гулял»): fixed-элемент считается от слоя, который во время bounce
   едет. Без bounce — панели стоят намертво. Кастомный pull-to-refresh это НЕ ломает:
   он на touch-событиях (пассивный слой), а не на нативном bounce. Пинч-зум карты и
   горизонтальные жесты не трогаем — touch-action тут НЕ ставим. */
html, body {
  overscroll-behavior: none;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-dark); }

/* ================================================================
   LAYOUT — App Shell
   ================================================================ */

.app-layout { min-height: 100dvh; display: flex; flex-direction: column; }

/* ===== HEADER ===== */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  /* min-height, а не height: шапка растёт под раскрытую строку поиска, чтобы её
     фон (--bg) покрывал поле, а не оставлял прозрачное поле поверх контента/карты. */
  min-height: var(--header-height);
  /* Фикс-шапка ОБЯЗАНА быть непрозрачной — иначе лента просвечивает под иконками
     (замечание тестировщика). Контент отодвинут padding-top у .app-layout, поэтому
     фон не «наезжает»; при скролле на «/» шапка уезжает (.header-scrolled). */
  background: var(--bg);
  border-bottom: 1px solid var(--border-light);
  padding-top: var(--safe-top);
}
/* Страничные хедеры-инструменты (группа, напарник, о проекте…) НЕ уезжают при
   скролле (.header-scrolled только на «/»), поэтому прозрачная шапка = контент
   просвечивает под ней (в чате группы первое сообщение налезало на rich-title).
   Возвращаем непрозрачный фон: контент, отодвинутый padding-top у .app-layout,
   при скролле прячется ЗА шапку, а не сквозь неё. Главная (/) сюда не попадает —
   FeedPage не ставит header-tools. */
.app-header--tools { background: var(--bg); }
/* Offset content below fixed header */
.app-layout { padding-top: calc(var(--header-height) + var(--safe-top)); }
/* ── ГЛАВНАЯ: плитки сверху, под ними липкая шапка ────────────────────────────
   Шапка не fixed, а sticky: плитки лежат НАД ней в обычном потоке, при прокрутке
   уезжают, а строка иконок «подписывается» к верху и там остаётся. Скачка контента
   нет — ничего не схлопывается, всё уезжает естественным скроллом. */
.app-layout--home {
  padding-top: 0;
  /* шапка главной ниже: в ней только ряд иконок 44px, лишние отступы не нужны */
  --header-height: 48px;
}
/* Обёртка баннеров: плитки уехали в шапку, внутри остаётся только скрытый слот
   квестов — но сам бокс продолжал съедать 8px gap ленты. display:contents убирает
   бокс, дети (если они есть) попадают прямо в поток .feed-page. */
.feed-page > .feed-banners { display: contents; }
.home-tiles-slot { padding-top: var(--safe-top); padding-bottom: 6px; }
.home-tiles-slot:empty {
  /* Без плиток (вкладка «Оповещения») слот НЕ прячем: его верхний отступ под
     системную шторку — единственное, что держит липкую шапку в потоке ниже часов.
     Раньше тут стояло display:none — шапка оставалась в потоке на 0, а sticky
     визуально сдвигала её на --safe-top, не сдвигая контент: строка «‹ Оповещ.»
     уезжала ПОД ряд иконок. Убираем только нижний зазор. */
  padding-bottom: 0;
}
/* карусель вынесена из .feed-page — возвращаем ей боковой отступ страницы */
.home-tiles-slot .feed-tiles--carousel { padding-inline: 12px; }
.app-layout--home .app-header {
  /* Прилипает НИЖЕ системной шторки: в приложении safe-area не ноль, и при
     top:0 иконки уезжали под часы и батарею. Полоску над шапкой закрывает
     .home-scrim — он начинается от самого верха экрана. */
  position: sticky; top: var(--safe-top);
  padding-top: 0;
  /* Плашки нет вообще: фон рисует .home-scrim — размытие с градиентом,
     тающим книзу (зеркало .tab-scrim снизу). */
  background: transparent;
  border-bottom: none;
}
/* Растушёвка под приклеенной шапкой. Появляется только когда шапка «подписалась»
   наверх — до этого она стоит в потоке под плитками, и затемнять нечего. */
.home-scrim {
  position: fixed; left: 0; right: 0; top: 0;
  height: calc(var(--safe-top) + var(--header-height) + 26px);
  z-index: 499;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(to bottom, var(--scrim-top), transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  transform: translateZ(0);
}
.home-scrim.is-on { opacity: 1; }
/* Fallback там, где размытия фона нет (часть Android WebView) — иначе лента
   просвечивает сквозь иконки. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-layout--home .app-header.header-scrolled { background: var(--bg); }
}
/* Открыт поиск → бар выдвигается 2-й строкой и СДВИГАЕТ контент вниз (не перекрывает). */
.app-layout--search { padding-top: calc(var(--header-height) + var(--safe-top) + var(--hdr-search-h)); }
.app-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 12px;
  height: var(--header-height);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 768px) {
  /* Портретный хедер ниже (иконки 40px в строке 50px = по 5px), и верхний инсет
     чуть меньше полного safe-area (−6px) — хедер ближе к статус-бару, но иконки
     всё ещё ниже чёлки. Floor 0px: в Safari (safe-area=0) отступ не появляется. */
  :root {
    --header-height: 50px;
    --safe-top: max(0px, calc(env(safe-area-inset-top, 0px) - 6px));
    /* Адаптивные размеры кнопок хедера: сжимаются на узких экранах (влезают от 320px),
       растут до максимума на широких. Правые (+/чат/аватар) — основные действия,
       крупнее левых. */
    --hdr-btn-left: clamp(36px, 10vw, 44px);
    --hdr-btn-right: clamp(44px, 12.5vw, 52px);
    /* ЕДИНЫЙ промежуток между ВСЕМИ 7 кнопками: свободная ширина (экран − все кнопки),
       делённая на 6 зазоров. Левая группа (flex gap) и закреплённая правая тройка
       (offset'ы ниже) используют этот же gap → расстояние одинаковое по всему ряду. */
    --hdr-gap: calc((100vw - 24px - 4 * var(--hdr-btn-left) - 3 * var(--hdr-btn-right)) / 6);
  }
  .app-header { border-bottom: none; box-shadow: none; }
  /* Правый отступ = 36px (+) + 8px + 36px (msg) + 8px + 36px (аватар) + 8px + 12px = 144px */
  .app-header-inner { gap: 8px; padding: 0 12px; }
  .app-header-inner .app-logo img { height: 36px !important; }
  .app-header-right { margin-inline-start: 0 !important; gap: 4px !important; }
  /* Make search/chat buttons match logo height (36px) */
  .app-header-right .icon-btn {
    width: 40px !important; height: 40px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    background: var(--primary-bg) !important;
    border: 1px solid rgba(127,161,122,0.18) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .app-header-right .icon-btn:active { background: rgba(127,161,122,0.22) !important; }
  .app-header-right .lang-pill {
    width: 36px !important; height: 36px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--primary-bg) !important;
    border: 1px solid rgba(127,161,122,0.18) !important;
  }
}

.app-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 900; color: var(--text);
  letter-spacing: -0.5px; text-decoration: none;
}
.app-logo svg { color: var(--primary); }
.app-logo-text {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Desktop header logo elements */
.header-logo-img { height: 44px; width: auto; display: block; }
.header-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.header-logo-name { font-weight: 800; font-size: 16.5px; color: var(--primary); letter-spacing: 1.5px; }
.header-logo-tagline { font-weight: 500; font-size: 11px; color: #847c73; letter-spacing: 0.5px; }
.app-header-right { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }

/* Header feed filter dropdown */
.header-feed-filter-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  background: #111a14; border: 1px solid rgba(127,161,122,0.18);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  min-width: 148px;
}
.header-feed-filter-item {
  display: block; width: 100%;
  padding: 11px 16px; text-align: start;
  font-size: 13.5px; font-weight: 400; font-family: inherit;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.header-feed-filter-item + .header-feed-filter-item {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.header-feed-filter-item:active { background: var(--primary-bg); }
.header-feed-filter-item.active { color: var(--primary); font-weight: 600; }

/* ===== MAIN CONTENT ===== */
.app-main {
  flex: 1;
  padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
  padding-inline-start: env(safe-area-inset-left, 0px);
  padding-inline-end: env(safe-area-inset-right, 0px);
  overflow-y: auto;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding-inline-start: 12px;
  padding-inline-end: 12px;
}

/* ================================================================
   MOBILE TAB BAR
   height = button-zone + safe-area so safe area never eats buttons
   ================================================================ */
.tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-tabbar);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center;
  z-index: 400;
  padding: 0 10px env(safe-area-inset-bottom, 0px);
  gap: 4px;
  /* Отдельный GPU-слой: fixed + backdrop-filter на iOS перерисовывается с лагом при
     скролле и «дёргается». translateZ(0) закрепляет панель на своём слое. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* ── Плавающая полупрозрачная панель (как плашка на карте) ── */
.tab-bar--float {
  left: var(--nav-inset); right: var(--nav-inset);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  height: var(--tab-panel-h);
  padding: 0 var(--nav-pad);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.07);
  background: var(--bg-tabbar-float);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: 0 6px 20px rgba(0,0,0,0.30);
}
/* активная вкладка — только цветом, без плашки-подложки */
.tab-bar--float .tab-item.active { background: none; }
/* иконки не сжимаются флексом (из-за этого выглядели приплюснутыми) */
.tab-bar--float .tab-item svg {
  width: 28px; height: 28px; stroke-width: 1.75;
  flex: 0 0 auto;
}
.tab-bar--float .tab-item { gap: 0; height: 100%; }
/* Подложка под панелью: блюр и затемнение, плавно тающие кверху.
   Отдельный слой (не ::before), чтобы не затемнять саму плашку. */
.tab-scrim {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px) + 28px);
  z-index: 399;
  pointer-events: none;
  background: linear-gradient(to top, var(--scrim-tab), transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to top, #000 42%, transparent 100%);
  mask-image: linear-gradient(to top, #000 42%, transparent 100%);
  transform: translateZ(0);
  transition: opacity 0.2s ease;
}
/* на клипах панель скрыта — подложка тоже не нужна */
body:has(.clips-page) .tab-scrim,
body.clips-fullscreen .tab-scrim { opacity: 0; }
/* подписей нет — только иконки, крупно и по центру
   (активная вкладка отличается заливкой иконки и цветом) */
.tab-bar--float .tab-item > span:not(.tab-icon) { display: none; }

.tab-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 10px; gap: 5px;
  text-decoration: none; font-weight: 400;
  position: relative;
  border-radius: 14px;
  padding: 7px 4px 6px;
  height: calc(var(--tab-height) - 8px);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s ease, background 0.18s ease;
  letter-spacing: 0.01em;
}
.tab-item.active {
  color: var(--primary);
  font-weight: 600; font-size: 10.5px;
  background: var(--primary-bg);
}
.tab-item.active::before { display: none; }
.tab-item.active::after  { display: none; }

.tab-item svg {
  width: 24px; height: 24px; stroke-width: 1.6;
  flex-shrink: 0;
  transition: color 0.18s ease;
}
.tab-item span { line-height: 1; }

/* Кнопка «Играть» — выделенный центральный пункт */
.tab-item--play {
  color: rgba(255,200,80,0.55);
}
.tab-item--play.active {
  color: #ffc84a;
  background: rgba(255,200,80,0.12);
}
.tab-play-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 28px;
  background: linear-gradient(135deg, rgba(127,161,122,0.22), rgba(127,161,122,0.10));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(127,161,122,0.30);
  transition: background 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.tab-item--play.active .tab-play-icon {
  background: linear-gradient(135deg, rgba(127,161,122,0.34), rgba(127,161,122,0.18));
  border-color: rgba(127,161,122,0.55);
}
.tab-badge--play { top: -5px; right: -6px; }
/* Мигание когда в бою нужно сделать ход */
@keyframes battle-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); background: rgba(239,68,68,0.1); }
  50%       { box-shadow: 0 0 8px 3px rgba(239,68,68,0.6); background: rgba(239,68,68,0.25); }
}
.tab-item--urgent .tab-play-icon {
  animation: battle-urgent-pulse 0.6s ease-in-out infinite;
  border-color: rgba(239,68,68,0.7) !important;
}
.tab-item--urgent span:last-child { color: var(--danger) !important; }

/* Icon wrapper with badge */
.tab-icon {
  position: relative;
  width: 28px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tab-badge {
  position: absolute; top: -4px; right: -8px;
  min-width: 15px; height: 15px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 700;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  border: 1.5px solid rgba(10,15,12,0.98);
}

/* ===== BADGE ===== */

.badge {
  position: absolute; top: -6px; right: -8px;
  background: #ff3b30; color: #fff;
  font-size: 10px; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; font-weight: 700; line-height: 1;
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* Tab bar icon wrapper + notification badge */
.tab-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 32px;
}
.tab-nav-badge {
  position: absolute;
  top: -3px; right: -4px;
  min-width: 17px; height: 17px;
  background: var(--danger);
  color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid rgba(10,15,13,0.97);
  pointer-events: none;
  letter-spacing: -0.3px;
}

/* ================================================================
   PAGES — General
   ================================================================ */
.page { padding: 0 0 24px; overflow-x: clip; }
/* Десктоп: .page не должен создавать скролл-контейнер, иначе sticky-заголовок
   липнет к .page (едет с окном), а не к окну. */
@media (min-width: 768px) { .page { overflow: visible; } }

/* Feed-page — единый ритм: все секции через gap 8px */
.feed-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 8px;
  min-height: 36px;
}
.page-header h1 {
  font-size: 17px; font-weight: 700; flex: 1;
  letter-spacing: -0.2px; color: var(--text);
  margin: 0;
}
.page-header .icon-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs); color: var(--text-muted);
}
.page-header .icon-btn:hover { background: var(--bg-warm); color: var(--text); }
.header-actions { display: flex; gap: 4px; }

/* Desktop: page fills the center column */
@media (min-width: 768px) {
  .page { max-width: none; margin: 0; padding: 0 0 24px; }
  /* But individual feed/post cards stay centered at 600px for readability */
}

.page-subtitle { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }

.back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--card); color: var(--text);
  box-shadow: var(--shadow-xs); transition: all var(--transition);
  text-decoration: none;
}
.back-btn:hover { box-shadow: var(--shadow); }

/* Единая кнопка «Назад» (компонент BackButton) */
.global-back-bar { padding: 8px 0 2px 4px; }
.page-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--back-size); height: var(--back-size); flex-shrink: 0;
  border-radius: var(--back-radius); cursor: pointer;
  background: var(--back-bg); color: var(--back-text);
  border: 1px solid var(--back-border);
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.page-back-btn:hover { background: var(--bg-warm); }
.page-back-btn:active { transform: scale(0.92); background: var(--bg-warm); }
/* Шапка раздела: кнопка назад + заголовок */
.page-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.page-head h1, .page-head h2 { margin: 0; font-size: 19px; font-weight: 700; }
.page-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-header-left h1, .page-header-left h2 { margin: 0; }

/* ── PageHeader компонент: ← Заголовок раздела ── */
/* Скрываем внутренний page-hdr на мобиле — Layout-хедер его заменяет */
@media (max-width: 767px) {
  .page-hdr,
  .page-header { display: none !important; }
}
.page-hdr {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 10px 0;
  /* Зафиксирован под десктоп-шапкой (64px) — «назад» + заголовок не скроллятся.
     margin-top: -12px гасит padding-top у .app-main, чтобы заголовок стоял
     флешем под шапкой СРАЗУ (иначе 12px «прыжок» в начале скролла). */
  position: sticky; top: 64px; z-index: 20;
  margin-top: -12px;
  background: var(--bg);
}
.page-hdr-back, .hdr-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--back-size); height: var(--back-size); flex-shrink: 0;
  border-radius: var(--back-radius); cursor: pointer;
  background: var(--back-bg); color: var(--back-text);
  border: 1px solid var(--back-border);
  transition: background 0.13s, color 0.13s, border-color 0.13s;
  -webkit-tap-highlight-color: transparent;
}
.page-hdr-back:hover, .hdr-action-btn:hover { background: var(--bg-warm); border-color: var(--primary); color: var(--primary); }
.hdr-action-btn--active { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }
.page-hdr-back:active { background: var(--border); }
/* Переключатель поиска на «Сервисах»: обычный поток, прижат к правому краю.
   На /more нет плавающих кнопок главной, поэтому снимаем их резерв (padding-right:144px),
   чтобы кнопка встала у самого края, а не на ~144px левее. */
.app-header--more .app-header-inner { padding-inline-end: 12px; }
/* ── «СТЕКЛЯННАЯ» ШАПКА (§9.1 UI_STANDARDS) — модификатор .app-header--glass ──
   Плашки нет: сама шапка прозрачная, фон под иконками рисует слой .home-scrim
   (размытие + затемнение, тающие книзу). Контент подтекает под шапку и
   растворяется, жёсткой линии реза нет. Вешается Layout'ом на страницы из
   SCRIM_PATHS (главная идёт своим правилом .app-layout--home).
   ⚠️ ФОН — только здесь И в блоке тем (:root.dark .app-header перебивает этот
   селектор по специфичности; см. «Dark: header» ниже). */
.app-header--glass {
  border-bottom: none;
  box-shadow: none;
}
/* Где размытия фона нет (часть Android WebView) — сплошной фон, иначе каталог
   просвечивает сквозь иконки. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-header--glass { background: var(--bg) !important; }
}
/* margin-inline-start:auto — прижать вправо; position:relative + z-index — подняться
   НАД полноширинным фикс-заголовком (z-501), иначе кнопка под ним не видна. */
.more-search-toggle { margin-inline-start: auto; position: relative; z-index: 502; }
.page-hdr-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 0; line-height: 1; flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.page-hdr-title svg { flex-shrink: 0; }
.page-hdr-right { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
/* Кнопка «Создать …» в шапке раздела (эталон зелёной кнопки: заливка primary, тёмный текст).
   Единый способ размещать действие создания СВЕРХУ справа вместо нижнего FAB. */
.page-hdr-create {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--back-size); padding: 0 14px; flex-shrink: 0;
  background: var(--primary); color: var(--bg);
  border: none; border-radius: var(--action-btn-radius);
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.page-hdr-create:hover { background: var(--primary-dark); color: var(--bg); }
.page-hdr-create:active { transform: scale(0.97); }
.page-hdr-create svg { flex-shrink: 0; }
.page-hdr-create:disabled { opacity: 0.45; cursor: default; transform: none; }
/* Кнопка «Бронировать» в шапке карточки базы — зелёная пилюля (как page-hdr-create) */
.page-hdr-book {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--back-size); padding: 0 13px; flex-shrink: 0;
  background: var(--primary); color: var(--bg);
  border: none; border-radius: var(--action-btn-radius);
  font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent;
}
.page-hdr-book:active { transform: scale(0.97); }
.page-hdr-book svg { flex-shrink: 0; }

/* ── СТАНДАРТНАЯ СТРОКА ПОИСКА ПО МОДУЛЮ ──────────────────────────────────────
   Поиск ВНУТРИ раздела рисуем ОТДЕЛЬНОЙ строкой ПОД шапкой во всю ширину.
   НИКОГДА не пихать инпут поиска в одну строку с заголовком (налезает — см. закон). */
/* Инструменты модуля в Layout-хедере (§5): 🔍 + зелёная «Создать», справа, отступ 8px */
.hdr-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Хедер модуля с инструментами (🔍 поиск / зелёная «Создать» через headerActionsStore):
   делаем ШАПКУ настоящей flex-строкой — заголовок в обычном потоке слева и УСЕКАЕТСЯ,
   инструменты справа. Так шаблон НЕ налезает при любой ширине кнопки «Создать»
   (иначе fixed-центрированный заголовок наезжает на «+ Новое место»). */
.app-header--tools .app-header-inner { padding-inline-end: 12px; }
.header-inner-page--tools .header-page-title {
  position: static; left: auto; right: auto; top: auto;
  height: auto; max-width: none; padding: 0;
  display: flex !important; align-items: center; justify-content: center;
  text-align: center; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* «Канальный» (rich) заголовок в шапке — MAX-стиль: [лого][название / N подписчиков].
   Две одноимённые пары классов (0,2,0) + позиция после правила --tools → выигрывает. */
.header-page-title.header-page-title--rich {
  justify-content: flex-start; text-align: start;
  gap: 8px; white-space: normal; overflow: visible;
  pointer-events: auto; padding: 0;
  /* это <button> — гасим нативную серую заливку/рамку/скругление UA */
  background: none; border: none; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.header-page-title--rich .hpt-avatar {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--card);
}
.header-page-title--rich .hpt-avatar--square {
  border-radius: 7px; object-fit: contain; background: #fff; padding: 1px;
}
.header-page-title--rich .hpt-textcol {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.12;
}
.header-page-title--rich .hpt-main {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 16px; font-weight: 800; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.header-page-title--rich .hpt-main > svg { flex-shrink: 0; color: var(--text-muted); }
.header-page-title--rich .hpt-sub {
  font-size: 11px; font-weight: 500; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Поиск модуля раскрывается ПРЯМО в строке шапки (inline): на всю строку между
   «назад» и краем, без отступов и без 2-й строки (не налезает на контент/карту). */
.app-header .page-hdr-search--inline { flex: 1; min-width: 0; margin: 0; height: var(--action-btn-size); }

.page-hdr-search {
  display: flex; align-items: center; gap: 8px;
  height: var(--action-btn-size); padding: 0 12px; margin: 4px 0 10px;
  /* ЭТАЛОН: строка поиска по модулю — БЕЗ внутренней заливки, только контур.
     Фон держим прозрачным, чтобы не спорить с фоном страницы и не «съедать» рамку. */
  background: transparent;
  border: var(--input-border-w) solid var(--input-border);
  border-radius: var(--input-radius);
}
.page-hdr-search > svg { flex-shrink: 0; color: var(--text-muted); }
.page-hdr-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 14px; color: var(--input-text);
}
.page-hdr-search input::placeholder { color: var(--text-muted); }
.page-hdr-search-clear {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; border-radius: var(--action-btn-radius);
  background: var(--bg-warm); color: var(--text-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Заглушка «В разработке» */
.wip-page { padding: 12px 0 80px; }
.wip-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: 18px; padding: 28px 20px; text-align: center;
  max-width: 480px; margin: 8px auto 0;
}
.wip-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(127,161,122,0.14); color: var(--primary);
}
.wip-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  color: #d97706; background: rgba(217,119,6,0.13);
  padding: 4px 12px; border-radius: var(--radius); margin-bottom: 12px;
}
.wip-card h2 { font-size: 18px; margin: 0 0 10px; color: var(--text); }
.wip-card p { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin: 0 auto 14px; max-width: 380px; }
.wip-features {
  display: flex; flex-direction: column; gap: 8px; text-align: start;
  max-width: 320px; margin: 0 auto 14px;
}
.wip-feature {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: var(--text); font-weight: 500;
}
.wip-feature svg { color: var(--primary); flex-shrink: 0; }
.wip-note { font-size: 13px !important; color: var(--text-muted) !important; }

/* Инфо-блок раздела (как пользоваться) — см. секцию Buddy Page */

/* ===== Маркет: магазины и товары ===== */
.market-my-shop, .market-open-shop {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 14px; margin-bottom: 12px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border-light); background: var(--card); color: var(--text);
  font-family: inherit;
}
.market-open-shop { border-style: dashed; color: var(--primary); justify-content: center; }
.market-my-shop svg, .market-open-shop svg { color: var(--primary); flex-shrink: 0; }

.shops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }







/* Профиль магазина */


































/* Загрузка лого магазина (владелец) — стили в блоке shop-hero-v2 ниже */
/* Выбор фото товара в форме */





/* ===== Community landing ===== */
.community-page { padding: 0 0 90px; max-width: none; margin: 0; }








/* КЛЕВ-очки в профиле */
.clev-card {
  background: linear-gradient(135deg, rgba(127,161,122,0.16), rgba(127,161,122,0.05));
  border: 1px solid rgba(127,161,122,0.3); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 0;
}
.clev-head { display: flex; align-items: center; gap: 12px; }
.clev-emoji { font-size: 30px; flex-shrink: 0; }
.clev-tier { font-size: 15px; font-weight: 800; color: var(--text); }
.clev-pts { font-size: 13px; color: var(--text-dim); margin-top: 1px; }
.clev-next { font-size: 12px; color: var(--text-muted); margin-top: 10px; }
.clev-next code { background: rgba(127,161,122,0.18); padding: 1px 6px; border-radius: var(--radius-xs); color: var(--primary); }
.clev-join-btn {
  display: block; text-align: center; margin-top: 12px;
  padding: 10px; border-radius: var(--btn-radius); font-weight: var(--btn-weight); font-size: 14px;
  background: var(--btn-bg); color: var(--btn-text); text-decoration: none;
  transition: background 0.15s;
}


















































@media (min-width: 700px) {
  .cm-features { grid-template-columns: 1fr 1fr 1fr; }
}

/* ─── Community Page v2 ─────────────────────────────────────────────────── */
.cm2-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 4px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.cm2-header-title { font-size: 16px; font-weight: 700; color: var(--text); }

.cm2-cats {
  display: flex;
  gap: 6px;
  padding: 8px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cm2-cats::-webkit-scrollbar { display: none; }

.cm2-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.cm2-cat-tab--active {
  border-color: var(--cat-color, var(--primary));
  color: var(--cat-color, var(--primary));
  background: color-mix(in srgb, var(--cat-color, var(--primary)) 10%, transparent);
}
.cm2-cat-count {
  background: var(--cat-color, var(--primary));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  border-radius: 8px;
}

/* Режимы Рейтинг/Голосование — компактные кнопки справа в строке вкладок */
.cm2-modes { display: flex; gap: 6px; margin-inline-start: auto; flex-shrink: 0; padding-inline-start: 6px; }
.cm2-mode-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--card);
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.cm2-mode-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }

.cm2-add-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  margin: 2px 0 6px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: none;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}
.cm2-add-btn:hover { background: var(--bg-warm); }

/* ── Inline feedback form ── */
.fb-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin: 2px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fb-form-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--input-radius);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}
.fb-form-textarea:focus { outline: none; border-color: var(--primary); }
.fb-form-textarea::placeholder { color: var(--text-muted); }
/* ─── Баннер недоступности klevat.ru (ТСПУ-блокировка / авария) ─── */
.net-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; padding: 9px 14px; font-size: 13px; line-height: 1.35; text-align: center;
}
.net-banner--blocked { background: #fef3c7; border-bottom: 1px solid #d97706; color: #92400e; }
.net-banner--down    { background: #fee2e2; border-bottom: 1px solid #dc2626; color: #991b1b; }
.net-banner-btn {
  flex-shrink: 0; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600; background: rgba(0,0,0,0.08);
  border: 1px solid currentColor; color: inherit;
}
.net-banner-btn:hover { background: rgba(0,0,0,0.15); }

.fb-form-preview { position: relative; display: inline-block; }
.fb-form-img { max-height: 140px; border-radius: 8px; display: block; }
.fb-form-previews { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.fb-form-previews .fb-form-preview { width: 74px; height: 74px; }
.fb-form-previews .fb-form-img { width: 100%; height: 100%; object-fit: cover; max-height: none; }
/* Просмотр своего аватара в полный размер (замечание Ивана) */
.avatar-photo-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.avatar-photo-lb img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); object-fit: contain; }
.fb-form-remove-photo {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.6); border: none; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; padding: 0;
}
.fb-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fb-form-photo-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--border);
  background: none; color: var(--text-muted);
  font-size: 13px; cursor: pointer;
}
.fb-form-photo-btn:hover { background: var(--bg-warm); color: var(--text); }
.fb-form-submit {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px;
  background: var(--primary); color: var(--btn-text);
  border: none; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.fb-form-submit:disabled { opacity: 0.55; cursor: default; }
.fb-spin { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fb-form--sent {
  min-height: 80px;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 10px;
  border-color: rgba(127,161,122,0.4);
}
.fb-form-ok-icon { color: var(--primary); }
.fb-form-ok-text { font-size: 14px; font-weight: 600; color: var(--text); }

.cm2-feed { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.cm2-loading { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.cm2-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 13.5px; }

/* ── Feedback post card ── */
.fbpost {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}





















/* Благодарность рыбками — строка в карточке (label + 30/50/100), разово */





/* Кнопка статуса «Решено» / «Вернуть» (вместо выпадающего списка) */





















/* ── Reward popover ── */
.reward-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.reward-popover {
  width: 100%;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reward-popover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}
.reward-popover-sub { font-size: 13px; color: var(--text-muted); margin-top: -6px; }
.reward-popover-amounts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.reward-amt-btn {
  flex: 1;
  min-width: 60px;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--bg-warm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.reward-amt-btn--active {
  border-color: var(--primary);
  background: rgba(16,185,129,0.12);
  color: var(--primary);
}
.reward-popover-actions { display: flex; gap: 10px; }
.reward-cancel-btn {
  flex: 1;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.reward-confirm-btn {
  flex: 2;
  padding: 12px;
  border-radius: var(--radius);
  border: none;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.reward-confirm-btn:disabled { opacity: 0.6; }

/* ── Info block (collapsible) ── */
.cm2-info-block {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cm2-info-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--card);
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-align: start;
}
.cm2-chevron-open { transform: rotate(90deg); }
.cm2-info-body { padding: 0 14px 14px; background: var(--card); }
.cm2-info-section { margin-bottom: 12px; }
.cm2-info-section-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 10px 0 6px; }
.cm2-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  padding: 3px 0;
}
.cm2-info-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.cm2-info-dot--done { background: var(--primary); }
.cm2-info-dot--wip  { background: var(--warning); }
.cm2-info-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

/* ── Channels row ── */
.cm2-channels {
  display: flex;
  gap: 8px;
  padding: 10px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cm2-channels::-webkit-scrollbar { display: none; }
.cm2-channel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--ch-color, #888) 30%, transparent);
  background: color-mix(in srgb, var(--ch-color, #888) 8%, transparent);
  color: var(--ch-color, var(--text));
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.cm2-channel-btn:hover { background: color-mix(in srgb, var(--ch-color, #888) 18%, transparent); }

/* ── Community page general ── */
.community-page { padding: 0 0 90px; max-width: none; margin: 0; }

.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--primary); text-decoration: none; font-size: 14px;
  margin-bottom: 12px; font-weight: 500;
}
.back-link:hover { text-decoration: underline; }

.icon-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); padding: 8px;
  border-radius: 50%; transition: all var(--transition);
  display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) { .icon-btn:hover { background: var(--bg); } }
.icon-btn:active { background: transparent; }
/* «Создать» в хедере — акцентная (зелёная), чтобы главное действие бросалось в глаза */
.icon-btn--create { color: var(--primary); font-weight: 700; }
.icon-btn--create:hover { color: var(--primary); }

/* ── ЗАКОН ХЕДЕРА: ряд из ≤5 иконок (вкл. профиль), без подписей, равные
   интервалы. Первая на 12px слева (.app-main), последняя на 12px справа —
   space-between держит одинаковый шаг между кнопками. Цель нажатия 44×44px. */
.header-icons5 {
  /* Строго над иконками нижней панели: те же 5 колонок.
     -12px — компенсация padding-inline у .app-header-inner. */
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; justify-items: center;
  flex: 1; min-width: 0; width: 100%;
  padding-inline: calc(var(--nav-track) - 12px);
}
/* Шапка гостя: поиск · маркет · игры · кнопка «Войти». Сетка из пяти колонок
   ей не подходит — колокольчика нет, а кнопка шире иконки. Иконки делят
   остаток поровну, кнопка прижата вправо на место аватара. */
.header-icons5.header-icons5--guest {
  grid-template-columns: repeat(3, 1fr) auto;
}
.hdr5-login {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px;
  border-radius: var(--radius-pill);
  background: var(--primary); color: var(--btn-text);
  font-size: 14px; font-weight: 800; letter-spacing: 0.2px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.16);
  -webkit-tap-highlight-color: transparent;
}
.hdr5-login:hover, .hdr5-login:focus-visible { color: var(--btn-text); filter: brightness(1.06); }
.hdr5-login:active { filter: brightness(0.94); transform: translateY(1px); }
.header-icons5 .hdr5-btn {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; text-decoration: none;
  color: var(--text-dim); border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .header-icons5 .hdr5-btn:hover { background: var(--bg-warm); color: var(--text); } }
.header-icons5 .hdr5-btn:active { background: var(--bg-warm); }
.header-icons5 .hdr5-btn svg { width: 26px; height: 26px; }   /* крупнее — их всего 5, места хватает */
.header-icons5 .hdr5-profile { width: 44px; height: 44px; }
.hdr5-ava {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.hdr5-ava--ph { background: var(--bg-warm); color: var(--primary); }

/* Регион в строке поиска — компактный чип «город» перед вводом. */
.inline-search-city {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: var(--bg-warm); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 6px 10px; max-width: 130px;
  color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer;
}
.inline-search-city svg { color: var(--primary); flex-shrink: 0; }
.inline-search-city span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-pro { color: #d97706; }
.icon-pro:hover { background: rgba(217,119,6,0.12); }

/* ── Универсальная кнопка закрытия (крестик) — единый стиль для всех модалок ── */
.btn-close {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--bg-warm); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.btn-close:hover { background: var(--bg); color: var(--text); }
.btn-close:active { background: rgba(127,161,122,0.14); color: var(--primary); }

.icon-btn-sm {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--text-muted); border-radius: var(--radius-xs); transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.icon-btn-sm:hover { background: var(--danger-light); color: var(--danger); }
.icon-btn.danger, .icon-btn-sm.danger { color: var(--danger); }

/* Language switcher */
.lang-pill {
  width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid rgba(127,161,122,0.18);
  background: var(--primary-bg); color: var(--text-dim);
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); padding: 0;
}
.lang-pill:hover { background: rgba(127,161,122,0.18); color: var(--text); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 9999; min-width: 140px; overflow: hidden;
}
.lang-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 14px; border: none; background: none;
  color: var(--text); font-size: 13px; cursor: pointer; text-align: start;
  transition: background .12s;
}
.lang-menu-item:hover { background: var(--bg); }
.lang-menu-item.active { color: var(--primary); font-weight: 600; }
@media (min-width: 768px) {
  .lang-btn-wrap--mobile { display: none; }
}

.btn-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--border-light);
  cursor: pointer; color: var(--text); transition: background var(--transition);
}
.btn-icon:hover { background: var(--border-light); }

.section-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  margin: 20px 0 12px; letter-spacing: -0.3px;
}

/* ================================================================
   AUTH PAGE
   ================================================================ */
.auth-page {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 24px
           calc(24px + env(safe-area-inset-bottom, 0px));
  /* Сезонная фотография приходит инлайном из seasonBg.ts; цвет — подложка на
     время загрузки и запасной вариант, если картинка не доехала. */
  background: var(--bg) center / cover no-repeat;
  position: relative; overflow: hidden;
}
/* Затемнение поверх фотографии. Без него кнопки тонут: у зимнего кадра низ —
   светлый снег, у летнего — блики на воде. Сверху тень мягче (там небо и
   логотип), к низу уходит почти в чёрный, где лежат кнопки. */
.auth-page::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16, 20, 18, 0.10) 0%,
    rgba(16, 20, 18, 0.18) 35%,
    rgba(16, 20, 18, 0.42) 72%,
    rgba(16, 20, 18, 0.70) 100%
  );
  pointer-events: none;
}

.auth-card {
  /* Стекло поверх сезонного фото: сильнее размытие и чуть прозрачнее, чем раньше,
     чтобы река за карточкой читалась, а текст оставался контрастным. */
  background: rgba(24, 30, 27, 0.52) !important;
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: 22px 18px 18px; width: 100%; max-width: 360px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.07) inset;
  position: relative; z-index: 1;
}

.auth-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  padding: 0; margin: -8px 0 18px; transition: color .15s;
}
.auth-back:hover { color: var(--primary); }
.auth-back svg { flex-shrink: 0; }

.auth-logo { text-align: center; margin-bottom: 14px; position: relative; }
/* Только мягкий свет за логотипом. Расходящийся круг тут пробовали — на узкой
   карточке он выходил за её края и читался случайной линией поперёк логотипа.
   Круги остались там, где им есть место: на экране загрузки. */
.auth-logo::before {
  content: ''; position: absolute; left: 50%; top: 34px;
  width: 190px; height: 190px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(127,161,122,0.16) 0%, transparent 68%);
}
.auth-logo svg { color: var(--primary); }
.auth-logo h1 {
  font-size: 22px; margin-top: 8px; font-weight: 800;
  letter-spacing: 3px;
  color: var(--primary) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--primary) !important;
}
.auth-card h1 {
  background: none !important;
  -webkit-text-fill-color: var(--primary) !important;
  color: var(--primary) !important;
}
.auth-card .auth-logo svg { color: var(--primary) !important; }

.auth-card form { display: flex; flex-direction: column; gap: 10px; }
.auth-link { text-align: center; margin-top: 18px; color: var(--text-muted); font-size: 13px; }
.auth-link a { color: var(--primary); text-decoration: none; font-weight: 600; }
.auth-link a:hover { text-decoration: underline; }

.auth-card input, .auth-card select, .auth-card textarea {
  background: var(--bg-warm) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 11px 14px !important;
  font-size: 16px !important;
  height: 44px;
  font-family: inherit;
}
.auth-card input:focus, .auth-card select:focus {
  /* §2b: фокус = ТОЛЬКО рамка primary, без заливки и свечения (glow убран) */
  background: var(--bg-warm) !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
  outline: none;
}
.auth-card input::placeholder { color: var(--text-muted) !important; }
.auth-card .btn-primary {
  background: var(--primary) !important;
  color: var(--bg) !important;
  font-weight: 700;
  height: 44px;
  border-radius: var(--radius-xs) !important;
  border: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: background 0.15s;
}
.auth-card .btn-primary:hover { background: var(--primary-dark) !important; }
.auth-card .btn-primary:disabled { opacity: 0.6; cursor: wait; }

/* OAuth section — unified buttons */
.oauth-section { margin-top: 20px; }
.oauth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px;
  font-weight: 600;
}
.oauth-divider::before,
.oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.oauth-buttons {
  display: flex; flex-direction: column; gap: 8px;
}

/* Unified OAuth button — matches site theme */
.oauth-btn {
  /* Иконки выстроены в колонку: justify-content:flex-start + одинаковая ширина
     .oauth-btn-icon держат все значки на одной вертикали. По центру они «плясали»,
     потому что подписи разной длины. */
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; height: 44px; padding: 0 16px;
  border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border);
  font-size: 14px; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.oauth-btn:hover {
  background: var(--bg-warm);
  border-color: var(--primary);
  color: var(--text);
}
.oauth-btn-icon {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* «Войти через:» / «Зарегистрироваться через:» — один заголовок вместо слова
   «Продолжить» в каждой кнопке. */
.oauth-heading {
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 2px;
}
/* Кнопка почты раскрывает форму — её шеврон живёт у правого края. */
.oauth-btn .chev { margin-left: auto; }

/* Telegram widget wrapper — constrain native iframe-like widget to button width */
.oauth-tg-wrap {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs);
  background: #229ED9; cursor: pointer;
  transition: filter 0.15s;
}
.oauth-tg-wrap:hover { filter: brightness(1.08); }
.oauth-tg-wrap iframe { display: block; }

/* Google button wrapper override (Google widget injects its own button) */
.oauth-google-wrap {
  width: 100%;
  display: flex; justify-content: center;
}
.oauth-google-wrap > div {
  width: 100% !important;
}
.oauth-google-wrap iframe {
  width: 100% !important;
  margin: 0 !important;
}

/* Auth subtitle / error / footer / demo */
.auth-subtitle {
  text-align: center; color: var(--text-muted);
  font-size: 13px; margin-top: 4px;
}
.auth-error {
  background: var(--danger-light); color: var(--danger);
  border: 1px solid var(--danger); border-radius: var(--radius-xs);
  padding: 10px 12px; font-size: 13px; text-align: center;
  margin-bottom: 12px;
}
.oauth-tg-divider {
  display: flex; justify-content: center; margin-top: 2px;
}
/* Второстепенные действия во входе («Изменить номер», «Отмена», «Скопировать»,
   «Войти под другим аккаунтом Telegram») — кликабельный текст фирменного цвета.
   Раньше это были кнопки с пунктирной рамкой во всю ширину: выглядели как
   недорисованные заглушки и спорили с настоящими кнопками рядом. */
.oauth-btn-text {
  background: none; border: none; box-shadow: none;
  margin-top: 16px; padding: 6px 4px;
  color: var(--primary); font-family: inherit; font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oauth-btn-text:hover, .oauth-btn-text:focus-visible {
  color: var(--primary); background: none; text-decoration: underline; text-underline-offset: 3px;
}
.oauth-btn-text:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.chev { transition: transform 0.2s; }
.chev.open { transform: rotate(180deg); }

.auth-email-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
  animation: slide-in 0.18s ease-out;
}
@keyframes slide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.auth-footer {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-light);
  font-size: 13px;
}
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }
.auth-footer-sep { color: var(--text-muted); }

.auth-demo-toggle {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; margin-top: 14px; padding: 6px;
  background: transparent; border: none;
  color: var(--text-muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  cursor: pointer; font-family: inherit;
}
.auth-demo-toggle:hover { color: var(--text); }
.auth-demo-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px; padding: 8px; border-radius: var(--radius-xs);
  background: var(--bg);
  animation: slide-in 0.18s ease-out;
}
.auth-demo-item {
  padding: 7px 10px; font-size: 13px;
  background: transparent; color: var(--text-dim);
  border: none; border-radius: var(--radius-xs);
  cursor: pointer; text-align: start; font-family: inherit;
  transition: background 0.1s;
}
.auth-demo-item:hover { background: var(--bg-warm); color: var(--text); }
.auth-demo-item:disabled { opacity: 0.5; cursor: wait; }

.demo-login-section {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.demo-title { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 8px; }
.demo-buttons { display: flex; flex-direction: column; gap: 6px; }
.btn-demo {
  padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 8px; background: #f5f7fa;
  font-size: 13px; cursor: pointer; text-align: start;
  transition: all 0.15s; color: #1a1a2e;
}
.btn-demo:hover { background: var(--primary); color: var(--btn-text); border-color: var(--primary); }
.auth-card .demo-title { color: #6b7280 !important; }
.auth-card .error-msg { color: var(--danger) !important; }

/* ================================================================
   FORMS
   ================================================================ */
input, textarea, select {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 16px; background: var(--bg-warm);
  outline: none; transition: all var(--transition);
  color: var(--text); font-family: inherit;
}
input:focus, textarea:focus, select:focus {
  /* Фокус = только рамка primary. БЕЗ смены фона и БЕЗ box-shadow-свечения —
     иначе «bare»-инпуты внутри контейнеров (поиск, комбо) дают двойную заливку/
     кольцо («выделение области ввода»). Единый стандарт для всех тем. */
  border-color: var(--primary);
  box-shadow: none;
}
/* ЭТАЛОН строки поиска по модулю (.page-hdr-search): инпут НИКОГДА не имеет
   собственной заливки, рамки и свечения — фон/контур даёт ТОЛЬКО контейнер.
   !important обязателен: тёмные `:root.dark input:focus` / `:root:not(.light) input:focus`
   (специфичность 0,3,1) иначе дают фокус-фон var(--card) + рамку + box-shadow glow. */
.page-hdr-search input,
.page-hdr-search input:focus {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
textarea { resize: vertical; min-height: 80px; }

.form { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
/* Карточка-секция настроек — единый вид (§13 «Карточка-секция»), во всю ширину
   колонки (§1), отступ между блоками даёт .form gap (8px, §4). Заменяет инлайновый
   cardStyle (разные marginTop → «пузыри вразнобой»). */
.settings-card { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 14px; }
/* Заголовок смысловой ГРУППЫ настроек (Профиль/Оформление/Уведомления/…) —
   выше уровнем, чем field-label (.form-label): крупнее, цвет текста, разделитель
   сверху. Даёт понятную сегментацию длинной страницы настроек. Иконка — lucide (§8). */
.settings-group-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; margin: 18px 0 2px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.settings-group-title:first-child { margin-top: 2px; padding-top: 0; border-top: none; }
.settings-group-title svg { color: var(--primary); flex-shrink: 0; }

/* ── Настройки: группа = ОДНА карточка-секция (эталон .sg-card), сворачиваемая ──
   Шапка-кнопка и тело — внутри одной рамки var(--card), не разорваны. */
.settings-group { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius); margin-top: 8px; overflow: hidden; }
.settings-group:first-of-type { margin-top: 2px; }
.settings-group.is-open { border-color: var(--primary); }
.settings-group-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 14px; background: none; border: none;
  font-size: 15px; font-weight: 700; color: var(--text); text-align: left; cursor: pointer;
}
.settings-group-head > svg:first-child { color: var(--primary); flex-shrink: 0; }
.settings-group-chevron { margin-inline-start: auto; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
.settings-group.is-open .settings-group-chevron { transform: rotate(180deg); }
/* Тело группы: поля с отступом 10px, отделено линией от шапки, в той же карточке */
.settings-group-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 14px 16px; border-top: 1px solid var(--border-light); }
/* Блоки push/telegram/приватность внутри группы — НЕ вложенные карточки (карточку
   уже даёт группа): убираем их фон/рамку/паддинг, остаётся простой ряд. */
.settings-group-body .settings-card { background: none; border: none; border-radius: 0; padding: 0; }

/* ════════════════════════════════════════════════════════════════
   НАСТРОЙКИ v2 — список-строки (стиль системных настроек, на наших токенах).
   Шапка профиля сверху + сгруппированные строки-пункты, раскрытие по тапу.
   Геометрия §2 (скруглённый квадрат), цвета §3 (тил-зелёный), отступы §4.
   ════════════════════════════════════════════════════════════════ */
.set-page { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 24px; }

/* Шапка профиля — крупная карточка, тап раскрывает поля профиля */
.set-profile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius); text-align: left; cursor: pointer; color: var(--text); }
.set-profile.is-open { border-color: var(--primary); }
.set-profile-av { position: relative; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; }
.set-profile-av img, .set-profile-av video, .set-profile-av .set-profile-ph { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.set-profile-ph { background: var(--bg-warm); display: flex; align-items: center; justify-content: center; }
.set-profile-cam { position: absolute; right: -2px; bottom: -2px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--bg); display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); }
/* Рамка-достижение аватара (av-frame ::after) не должна перекрывать бейдж камеры */
.set-profile-av.av-frame--gold::after, .set-profile-av.av-frame--silver::after, .set-profile-av.av-frame--rainbow::after { z-index: 1; }
.set-profile-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.set-profile-name { font-size: 16px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.set-profile-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.set-profile-edit { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--primary); margin-top: 5px; }
.set-profile-edit svg { flex-shrink: 0; }
.set-profile-chev { align-self: center; color: var(--text-muted); flex-shrink: 0; transition: transform .2s; }
.set-profile.is-open > .set-profile-chev { transform: rotate(180deg); }

/* Подпись группы (как ОСНОВНЫЕ/АККАУНТ) */
/* Заголовок группы: 8px сверху (от блока выше, §4), близко к своему блоку снизу */
.set-cap { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 8px 4px 4px; }

/* Список-карточка группы (строки внутри одной рамки, разделители между) */
.set-list { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }

/* Строка-пункт: [иконка] Название … [значение/шеврон/тумблер] */
.set-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: none; border: none; text-align: left; cursor: pointer; color: var(--text); font-size: 15px; font-family: inherit; }
.set-item + .set-item, .set-body + .set-item, .set-item + .set-body { border-top: 1px solid var(--border-light); }
.set-item-ico { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--primary-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.set-item-label { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-item-value { color: var(--text-muted); font-size: 14px; flex-shrink: 0; }
.set-item-chev { color: var(--text-muted); flex-shrink: 0; transition: transform .2s; }
.set-item.is-open .set-item-chev { transform: rotate(180deg); }
.set-item--danger { color: var(--danger); }
.set-item--danger .set-item-ico { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.set-item--ok .set-item-value { color: var(--success); }

/* Раскрытое тело под строкой — поля/контент, отделено фоном и линией */
.set-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; background: var(--bg-warm); border-top: 1px solid var(--border-light); }
.set-body .form-label:first-child { margin-top: 0; }
/* Вложенные компоненты (Способы входа, Заблокированные, Удаление) рендерятся ГОЛО —
   без своей карточки/рамки/фона: карточку и заголовок уже даёт строка+set-body. */
.set-body .linked-accounts { background: none; border: none; padding: 0; margin: 0; }
.set-body .linked-accounts-title { display: none; }
.set-body .linked-list { gap: 8px; }
/* «Способы входа» — строки способов на фоне карточки (bg-warm тела → строки чуть светлее) */
.set-body .linked-row { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 10px 12px; }
/* Скрыть дублирующие заголовки-подписи компонентов внутри секции (название — уже в строке) */
.set-body > .form-label:first-child { margin-top: 0; }

/* Тихий индикатор автосохранения (кнопки «Сохранить» больше нет) */
.set-autosave { align-self: center; margin: 4px auto 0; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--primary-bg); color: var(--primary); font-size: 12px; font-weight: 700; }
.set-field-error { color: var(--danger); font-size: 13px; margin-top: 2px; }
/* «Изменить фото» — компактная кнопка (не на всю ширину), а не серая плашка */
.set-photo-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 12px; border-radius: var(--btn-radius); background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.set-photo-link:hover { border-color: var(--primary); color: var(--primary); }
.set-photo-link svg { color: var(--primary); flex-shrink: 0; }

/* ── Единая система полей настроек (чистая, профессиональная) ── */
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field-cap { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.set-field-row { display: flex; gap: 10px; }
.set-field-row > .set-field { flex: 1; min-width: 0; }
.set-input { width: 100%; height: 44px; padding: 0 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--input-radius); color: var(--text); font-size: 15px; font-family: inherit; }
.set-input::placeholder { color: var(--text-muted); }
.set-input:focus { border-color: var(--primary); outline: none; }
.set-textarea { height: auto; min-height: 48px; max-height: 160px; padding: 11px 12px; resize: none; line-height: 1.45; }
/* Поле с префиксом «@» (имя пользователя) */
.set-input--prefix { display: flex; align-items: center; gap: 4px; padding: 0 12px; }
.set-input--prefix span { color: var(--text-muted); font-size: 15px; flex-shrink: 0; }
/* §7: вложенный input сбрасывает фон/тень (поверхность даёт контейнер .set-input) */
.set-input--prefix input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent !important; box-shadow: none !important; color: var(--text); font-size: 15px; padding: 0; font-family: inherit; }
.set-input--prefix input:focus { outline: none; background: transparent !important; box-shadow: none !important; }
.set-input--prefix:focus-within { border-color: var(--primary); }
.set-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.set-hint.err { color: var(--danger); }
.set-hint b { color: var(--primary); font-weight: 700; }
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Кнопки внутри раскрытых секций — по содержимому, не на всю ширину */
.set-body > .btn { align-self: flex-start; }

/* ── Тумблер-переключатель (inline в строке) ── */
.set-sw { width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--border); flex-shrink: 0; position: relative; transition: background .18s; cursor: pointer; border: none; padding: 0; }
.set-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; }
.set-sw.on { background: var(--primary); }
.set-sw.on::after { transform: translateX(18px); }
.set-sw:disabled { opacity: .5; }

/* ── Строка-переключатель типа уведомления внутри раскрытия ── */
.set-ntf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; font-weight: 500; }
.set-ntf + .set-ntf { border-top: 1px solid var(--border-light); }
.set-ntf-head { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin: 6px 0 -2px; }
/* Подсказка под названием тумблера: «лайки склеиваются», «только когда клёв хороший». */
.set-ntf-hint { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--text-muted); }

/* ── Таблица уведомлений: повод × канал доставки ────────────────────────────
   Один экран вместо двух списков: строка — повод, три столбца — колокольчик,
   телефон, почта. Галочки, а не тумблеры: три тумблера в строке не помещаются
   даже на 360px. */
.ntf-matrix { margin: 12px 0 2px; }
.ntf-matrix-head,
.ntf-matrix-row {
  display: grid; grid-template-columns: 1fr repeat(3, 40px);
  gap: 6px; align-items: center;
}
.ntf-matrix-head { padding-bottom: 8px; }
.ntf-matrix-col {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--text-muted);
}
.ntf-matrix-col small { font-size: 9px; line-height: 1.15; text-align: center; }
.ntf-matrix-group-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--text-muted); margin: 14px 0 2px;
}
.ntf-matrix-row { padding: 7px 0; border-top: 1px solid var(--border-light); }
.ntf-matrix-label { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.ntf-cell {
  width: 28px; height: 28px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: transparent; color: transparent; cursor: pointer;
  transition: all var(--transition);
}
.ntf-cell.on { background: var(--primary); border-color: var(--primary); color: var(--btn-text); }
.ntf-cell:active { transform: scale(0.92); }

/* ── Опция выбора (язык): флаг + название + галочка ── */
.set-opts { display: flex; flex-direction: column; gap: 2px; }
.set-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14.5px; font-weight: 500; background: none; border: none; color: var(--text); text-align: left; font-family: inherit; }
.set-opt:hover { background: var(--card); }
.set-opt.sel { background: var(--primary-bg); color: var(--primary); font-weight: 700; }
.set-opt .set-opt-flag { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.set-opt .set-opt-tick { margin-inline-start: auto; color: var(--primary); opacity: 0; flex-shrink: 0; }
.set-opt.sel .set-opt-tick { opacity: 1; }
/* Пояснение-строка внутри группы (описание под заголовком блока) */
.settings-row-note { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 2px 0 8px; }
/* Заголовок внутри карточки-секции — единый с .form-label (12px/700/uppercase),
   отступ до контента 8px. Убирает inline fontWeight:600/display:flex-разнобой. */
.settings-card-title { margin-bottom: 8px; }
/* Пояснение под заголовком карточки — единый стиль (был inline fontSize/color вразнобой) */
.settings-note { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 10px; }
/* Карточка-ссылка (Обратная связь) — строка с иконкой и подписью справа */
.settings-link-row { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500; }
.settings-link-row-sub { margin-inline-start: auto; color: var(--text-muted); font-size: 13px; }

/* Список заблокированных в настройках (App Store 1.2 — блокировку должно быть видно и легко снять) */
.blocked-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.blocked-user-row:last-child { border-bottom: none; }
.blocked-user-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: var(--text); }
.blocked-user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blocked-user-avatar--empty { display: flex; align-items: center; justify-content: center; background: var(--primary-bg); color: var(--primary); font-weight: 700; }
.blocked-user-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sign in with Apple — оформление по Human Interface Guidelines: чёрная кнопка
   в светлой теме, белая в тёмной. Размер и вес — как у остальных способов входа
   (Apple требует, чтобы её кнопка была не мельче сторонних). */
/* Sign in with Apple. Внешний вид диктуют Human Interface Guidelines: допустимы
   ровно три варианта — чёрная, белая и белая с контуром. Свой цвет, шрифт или
   кнопка без яблока — нарушение и повод для отказа по 4.8.
   Из разрешённых берём чёрную во всех темах: в тёмной белая кнопка выбивалась
   из ряда остальных способов входа. */
.oauth-btn--apple { background: #000; color: #fff; border-color: rgba(255,255,255,0.18); }
.oauth-btn--apple:hover { background: #141414; }
.oauth-btn--apple:active { background: #1f1f1f; }

/* Ожидание соц-входа в приложении: человек ушёл в браузер, мы опрашиваем сервер */
.native-oauth-waiting { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--card); font-size: 14px; color: var(--text-dim); }
.native-oauth-waiting button { background: none; border: none; color: var(--primary);
  font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; }


/* ── Безопасность аккаунта в настройках ─────────────────────────────────────
   Список устройств и двухфакторная защита. Живёт внутри .set-body, поэтому
   опирается на её отступы и не задаёт своих боковых полей (§1). */
.sec-block { display: flex; flex-direction: column; gap: 12px; }
.sec-2fa {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--bg-warm); border: 1px solid var(--border-light);
}
.sec-2fa-head { display: flex; align-items: flex-start; gap: 9px; }
.sec-2fa-head svg { flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.sec-2fa-head svg.is-on { color: var(--primary); }
.sec-2fa-head b { display: block; font-size: 14px; color: var(--text); }
.sec-2fa-head span { display: block; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.sec-code { display: flex; flex-direction: column; gap: 7px; }
.sec-cap {
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 2px;
}
.sec-list { display: flex; flex-direction: column; gap: 7px; }
.sec-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-warm); border: 1px solid var(--border-light);
}
.sec-row.is-current { border-color: var(--primary); }
.sec-row > svg { flex-shrink: 0; color: var(--text-muted); }
.sec-row-main { flex: 1; min-width: 0; }
.sec-row-main b { display: block; font-size: 13.5px; color: var(--text); }
.sec-row-main span {
  display: block; font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sec-row button {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--danger);
}
.sec-all { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: var(--danger); }

/* ── AdCreate ─────────────────────────────────────────────────── */
.adcr-draft-banner { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg-warm); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-dim); }
.adcr-draft-banner button { background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit; }
.adcr-form  { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 80px; }  /* §1: боковые 12px даёт .app-main, свой padding НЕ добавляем */
.adcr-block { display: flex; flex-direction: column; gap: 8px; }
.adedit-page { padding-bottom: calc(var(--tab-height) + 70px); }

/* Autocomplete dropdown */
.adcr-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.35); overflow: hidden;
}
.adcr-suggest-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 14px; background: none; border: none;
  border-bottom: 1px solid var(--border-light); cursor: pointer; font-family: inherit;
  text-align: start; -webkit-tap-highlight-color: transparent;
}
.adcr-suggest-item:last-child { border-bottom: none; }
.adcr-suggest-item:active { background: var(--bg-warm); }
.adcr-suggest-item--drill { background: var(--bg-warm); }
.adcr-suggest-item--drill .adcr-suggest-name { color: var(--primary); }
.adcr-suggest-item--drill .adcr-suggest-meta { color: var(--primary); opacity: .7; }
.adcr-suggest-name { font-size: 14px; font-weight: 600; color: var(--text); }
.adcr-suggest-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-inline-start: 8px; }
.adedit-section {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 -12px; padding: 10px 16px;
  border-top: 1px solid var(--border);
}
.adedit-section:first-of-type { border-top: none; margin-top: 0; }
.adedit-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; gap: 8px; padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg); border-top: 1px solid var(--border); z-index: 100;
}
.adcr-row2  { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adcr-hint  { font-size: 11px; color: var(--text-muted); }

/* Inputs — системные переменные */
.adcr-input { width: 100%; box-sizing: border-box; padding: 10px 12px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--input-radius); color: var(--text); font-size: 15px; font-family: inherit; }
.adcr-input:focus { outline: none; border-color: var(--input-border-focus); }
.adcr-textarea { resize: vertical; min-height: 72px; }
.adcr-textarea--loading { opacity: 0.5; cursor: not-allowed; background: var(--bg-warm); }

/* Chips — используем системный .chip, только добавляем flex-wrap */
.adcr-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Категория: заголовок + горизонтальный скролл */
.adcr-cat-header { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; margin-bottom: 6px; }
.adcr-cat-hint { font-size: 10px; color: var(--text-muted); font-weight: 400; letter-spacing: 0.02em; }
.adcr-cat-scroll-wrap { display: flex; align-items: stretch; gap: 6px; }
.adcr-cat-scroll { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; min-width: 0; mask-image: linear-gradient(to right, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%); }
.adcr-cat-scroll::-webkit-scrollbar { display: none; }
.adcr-cat-chip { display: inline-flex; align-items: center; gap: 5px; scroll-snap-align: start; white-space: nowrap; flex-shrink: 0; }
.adcr-cat-chip span { pointer-events: none; }
.adcr-cat-all-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: pointer; transition: background 0.15s; }
.adcr-cat-all-btn:hover, .adcr-cat-all-btn.active { background: var(--bg-warm); color: var(--text); border-color: var(--primary); }
/* Дерево категорий */
.adcr-cat-tree { margin-top: 8px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; }
.adcr-cat-tree-back { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 12px; background: var(--bg-warm); border: none; border-bottom: 1px solid var(--border-light); color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; text-align: start; }
.adcr-cat-tree-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; background: none; border: none; border-bottom: 1px solid var(--border-light); color: var(--text); font-size: 14px; cursor: pointer; font-family: inherit; text-align: start; transition: background 0.12s; }
.adcr-cat-tree-row:last-child { border-bottom: none; }
.adcr-cat-tree-row:hover { background: var(--bg-warm); }
.adcr-cat-tree-row.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.adcr-cat-tree-icon { display: flex; align-items: center; color: var(--text-muted); flex-shrink: 0; }
.adcr-cat-tree-label { flex: 1; }
.adcr-cat-tree-arrow { color: var(--text-muted); flex-shrink: 0; }

/* Медиа */
.adcr-media { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.adcr-thumb { position: relative; width: 70px; height: 70px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; flex-shrink: 0; background: var(--bg-warm); border: 1px solid var(--border-light); transition: opacity 0.15s, transform 0.15s; user-select: none; touch-action: none; }
.adcr-thumb:hover { border-color: var(--primary); }
.adcr-thumb img, .adcr-thumb video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.adcr-thumb--video { background: var(--bg-header); }
.adcr-thumb-video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--btn-text); }
.adcr-thumb--dragging { opacity: 0.45; transform: scale(0.95); }
.adcr-thumb-grip { position: absolute; bottom: 2px; left: 3px; color: rgba(255,255,255,.7); pointer-events: none; }
.adcr-thumb-x { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.75); border: none; border-radius: var(--action-btn-radius); width: 18px; height: 18px; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; }
.adcr-video-lbl { position: absolute; bottom: 3px; left: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: 9px; border-radius: 3px; padding: 1px 4px; }
.adcr-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 70px; height: 70px; border-radius: var(--radius-sm); border: 1.5px dashed var(--border); background: none; color: var(--text-muted); font-size: 11px; cursor: pointer; flex-shrink: 0; font-family: inherit; }
/* Lightbox */
.adcr-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.adcr-lightbox-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,.15); border: none; border-radius: 50%; width: 36px; height: 36px; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; }
.adcr-lightbox-media { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 4px; }
/* AI-кнопка описания */
.adcr-ai-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.adcr-ai-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--primary); border-radius: var(--radius-sm); background: none; color: var(--primary); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.15s; flex-shrink: 0; align-self: flex-start; }
.adcr-ai-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.adcr-ai-btn:disabled { opacity: 0.45; cursor: default; }
.adcr-ai-btn.adcr-ai--busy { opacity: 0.7; animation: adcr-ai-pulse 1.2s ease-in-out infinite; }
@keyframes adcr-ai-pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 0.4; } }
/* Автоподбор размера посылки */
.adcr-pkg-auto-badge { font-size: 10px; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); border-radius: 4px; padding: 2px 6px; font-weight: 500; }
/* AI toast */
.adcr-ai-toast { font-size: 12px; padding: 5px 10px; border-radius: var(--radius-sm); margin-top: 4px; margin-bottom: 2px; }
.adcr-ai-toast.ok  { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.adcr-ai-toast.err { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* Ручные габариты */
.adcr-dims-toggle { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; padding: 6px 0 0; font-family: inherit; text-align: start; }
.adcr-dims-panel { margin-top: 8px; padding: 10px; background: var(--bg-warm); border-radius: var(--radius-sm); border: 1px solid var(--border-light); }
.adcr-dims-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.adcr-dims-result { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.adcr-dims-result-pkg { font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adcr-dims-result-tk { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.adcr-dims-apply-btn { font-size: 11px; padding: 3px 8px; border: 1px solid var(--primary); border-radius: var(--radius-sm); background: none; color: var(--primary); cursor: pointer; font-family: inherit; }

/* Состояние + Количество */
.adcr-cond-row { flex-direction: row !important; align-items: flex-start; }
.adcr-cond-block { flex: 1; }
.adcr-qty-block { flex-shrink: 0; }
.adcr-qty-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.adcr-qty-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border-light); background: var(--card); color: var(--text); font-size: 18px; font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1; }
.adcr-qty-btn:active { background: var(--bg-warm); }
.adcr-qty-val { min-width: 28px; text-align: center; font-size: 16px; font-weight: 700; color: var(--text); }

/* Город */
/* Умные поля характеристик */
.adcr-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.adcr-spec-row { display: flex; flex-direction: column; gap: 3px; }
.adcr-spec-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.adcr-spec-input { font-size: 14px !important; padding: 8px 10px !important; }
select.adcr-input, select.adcr-spec-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-inline-end: 32px !important; cursor: pointer;
}
@media (max-width: 360px) { .adcr-specs-grid { grid-template-columns: 1fr; } }

.adcr-city-chip { display: flex; align-items: center; gap: 6px; background: var(--input-bg); border: 1.5px solid var(--input-border); border-radius: var(--input-radius); padding: 8px 12px; font-size: 14px; color: var(--text); }
.adcr-city-region { font-size: 11px; color: var(--text-muted); flex: 1; }
.adcr-city-chip button { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0; display: flex; line-height: 1; }
.adcr-city-drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); z-index: 200; max-height: 200px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.adcr-city-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: none; border: none; border-bottom: 1px solid var(--border-light); cursor: pointer; width: 100%; text-align: start; color: var(--text); }
.adcr-city-row:last-child { border-bottom: none; }
.adcr-city-name { font-size: 14px; font-weight: 600; }
.adcr-city-reg  { font-size: 11px; color: var(--text-muted); }

/* Контакты */
.adcr-contacts-head { display: flex; align-items: center; justify-content: space-between; }
.adcr-from-profile { font-size: 12px; color: var(--primary); background: none; border: none; cursor: pointer; font-weight: 600; padding: 0; font-family: inherit; }
.adcr-contacts { display: flex; flex-direction: column; gap: 8px; }
/* --- Contacts row (adedit redesign) --- */
.adcr-contact-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border-light);
  gap: 8; min-height: 44px;
}
.adcr-contact-row:last-of-type { border-bottom: none; }
.adcr-contact-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.adcr-contact-icon { color: var(--text-muted); flex-shrink: 0; }
.adcr-contact-value { font-size: 14px; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adcr-contact-missing { font-size: 13px; color: var(--text-muted); }
.adcr-contact-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
  padding: 2px 6px; border-radius: 4px; flex-shrink: 0;
}
.adcr-contact-badge--max { background: var(--primary); color: #fff; }
.adcr-contact-badge--vk  { background: #0077ff; color: #fff; }
.adcr-contact-toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.adcr-contact-toggle input[type=checkbox] { accent-color: var(--primary); width: 16px; height: 16px; }
.adcr-contact-link-btn {
  font-size: 13px; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 0; font-family: inherit;
  white-space: nowrap; flex-shrink: 0;
}
.adcr-contact-vk-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 13px; color: var(--text); font-family: inherit; min-width: 0;
  border-bottom: 1px solid var(--border); padding: 2px 0;
}
/* old row style kept for AdCreate (still uses adcr-contact-input) */
.adcr-contact-ico { font-size: 15px; flex-shrink: 0; line-height: 1; color: var(--text-muted); }
.adcr-contact-lbl { font-size: 11px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; min-width: 30px; letter-spacing: 0.3px; }
.adcr-contact-input { flex: 1; background: transparent !important; border: none; outline: none; padding: 10px 0; color: var(--text); font-size: 14px; font-family: inherit; width: auto; }
.adcr-contact-input:-webkit-autofill,
.adcr-contact-input:-webkit-autofill:hover,
.adcr-contact-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Ad Create — package size selector */
.adcr-pkg-list { display: flex; flex-direction: column; gap: 8px; }
.adcr-pkg-item {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--bg-warm); border: 1.5px solid var(--border-light);
  cursor: pointer; text-align: start; font-family: inherit; width: 100%; box-sizing: border-box;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.adcr-pkg-item.active { border-color: var(--primary); background: var(--primary-bg); }
.adcr-pkg-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.adcr-pkg-item.active .adcr-pkg-title { color: var(--primary); }
.adcr-pkg-sub { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.adcr-pkg-hint { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.adcr-pkg-warn {
  margin-top: 8px; padding: 10px 12px;
  background: var(--danger-light); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); font-size: 12px; color: var(--text);
}

.adcr-submit { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; }

/* AdCreate — attach bar (Галерея + Камера) */
.adcr-attach-bar { display: flex; gap: 8px; }
.adcr-attach-btn {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  height: 56px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg-warm); border: 1px solid var(--border-light);
  color: var(--text-dim); font-size: 11.5px; font-weight: 600; font-family: inherit;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: border-color .15s, color .15s;
}
.adcr-attach-btn svg { color: var(--primary); }
.adcr-attach-btn:active { background: var(--border-light); }

/* Главное фото */
.adcr-thumb--main { border: 2px solid var(--primary) !important; }
.adcr-thumb--main::after { content: 'Главное'; position: absolute; bottom: 0; left: 0; right: 0; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; text-align: center; padding: 2px 0; letter-spacing: 0.3px; pointer-events: none; }
.adcr-star-btn { position: absolute; top: 3px; left: 3px; background: rgba(0,0,0,.65); border: none; border-radius: 3px; width: 18px; height: 18px; cursor: pointer; color: rgba(255,210,0,.95); display: flex; align-items: center; justify-content: center; padding: 0; z-index: 2; }
.adcr-star-btn:active { background: rgba(0,0,0,.85); }

/* Выбор кадра для видео */
.adcr-frame-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.96); display: flex; flex-direction: column; }
.adcr-frame-video { flex: 1; object-fit: contain; width: 100%; min-height: 0; }
.adcr-frame-footer { padding: 16px; display: flex; gap: 10px; flex-shrink: 0; safe-area-inset-bottom: env(safe-area-inset-bottom); }
.adcr-frame-pick { flex: 1; padding: 13px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.adcr-frame-cancel { padding: 13px 16px; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; font-family: inherit; }
.adcr-frame-hint { color: rgba(255,255,255,.55); font-size: 12px; text-align: center; padding: 0 16px 4px; }

/* Магазины — контакты */
.mkt-shops-cta { text-decoration: none; padding: 12px 28px; margin-top: 4px; display: inline-block; }
.mkt-shops-or { font-size: 13px; color: var(--text-muted); margin-top: 12px; }
.mkt-shops-contacts { display: flex; flex-direction: row; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.mkt-shops-contact-btn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s; }
.mkt-shops-contact-btn:hover { border-color: var(--primary); }
.mkt-shops-contact-ico { font-size: 16px; flex-shrink: 0; }

/* ShopApply — done screen */





.form-section {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.form-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.form-row { display: flex; gap: 10px; }
.form-row > .form-field { flex: 1; }
.form-field small { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.form-group { margin-bottom: 14px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--text);
}
.form-group input[type="text"],
.form-group textarea {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: var(--radius-xs);
  font-size: 16px; background: var(--bg-warm); color: var(--text);
  box-sizing: border-box;
}
.form-group textarea { resize: vertical; }
.form-group input:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.form-error {
  background: var(--danger-light); color: var(--danger);
  padding: 8px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px;
}

.form-label-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); padding: 8px 0; }
.form-label-inline input[type="checkbox"] { width: auto; }

.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bite-rating-input { display: flex; gap: 4px; padding: 8px 0; }
.bite-rating-input button { background: none; border: none; cursor: pointer; padding: 2px; }

.checkbox-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim); margin-bottom: 12px; cursor: pointer;
}
.checkbox-label input { width: 16px; height: 16px; accent-color: var(--primary); }
.toggle-label {
  display: flex !important; align-items: center; gap: 8px; cursor: pointer; font-weight: 400 !important;
}
.toggle-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.coords-display { color: var(--primary); font-weight: 400; font-size: 12px; }

/* ================================================================
   BUTTONS
   ================================================================ */

/* ════════════════════════════════════════════════════════════════
   КАНОНИЧЕСКАЯ КНОПКА — единый источник правды (эталон «Создать пост»).
   Новый/мигрируемый код: <button class="btn btn--primary"> и т.п.
   Вид меняется ТОЛЬКО через --btn-* в :root. Хардкод запрещён.
   ════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--btn-h-md); padding: var(--btn-pad);
  border: none; border-radius: var(--btn-radius);
  font-family: inherit; font-size: var(--btn-font); font-weight: var(--btn-weight);
  line-height: 1; white-space: nowrap; letter-spacing: 0.2px;
  cursor: pointer; text-decoration: none; box-shadow: var(--btn-shadow);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { box-shadow: var(--btn-shadow-hover); }
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { flex-shrink: 0; }
/* Варианты */
.btn--primary   { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-text); }
.btn--secondary { background: var(--btn-sec-bg); color: var(--btn-sec-text); border: 1.5px solid var(--btn-sec-border); }
.btn--secondary:hover { border-color: var(--btn-bg); background: var(--primary-light); }
.btn--ghost     { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.btn--ghost:hover { color: var(--primary); border-color: var(--primary); }
.btn--danger    { background: var(--btn-danger-bg); color: var(--btn-danger-text); }
.btn--danger:hover { filter: brightness(0.94); color: var(--btn-danger-text); }
/* Размеры (меняется только высота/паддинг) */
.btn--lg { height: var(--btn-h); }
.btn--sm { height: var(--btn-h-sm); padding: var(--btn-pad-sm); font-size: var(--btn-font-sm); border-radius: var(--btn-radius-sm); }
/* Во всю ширину (submit формы) */
.btn--block { width: 100%; }

/* ════════════════════════════════════════════════════════════════
   КАНОНИЧЕСКИЙ ВЫПАДАЮЩИЙ СПИСОК (современный, заменяет серый <select>)
   Разметка: <button class="kx-select"> + панель <div class="kx-menu">
   с пунктами <button class="kx-option">. Выбранный = заливка primary.
   ════════════════════════════════════════════════════════════════ */
.kx-select {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: var(--input-h); padding: var(--input-pad);
  background: var(--input-bg); color: var(--input-text);
  border: var(--input-border-w) solid var(--input-border); border-radius: var(--input-radius);
  font-family: inherit; font-size: var(--input-font); cursor: pointer; text-align: start;
  transition: border-color var(--transition), background var(--transition);
}
.kx-select:hover, .kx-select[aria-expanded="true"] { border-color: var(--input-border-focus); }
.kx-select-chevron { color: var(--text-muted); transition: transform var(--transition); flex-shrink: 0; }
.kx-select[aria-expanded="true"] .kx-select-chevron { transform: rotate(180deg); }
.kx-select--placeholder { color: var(--input-placeholder); }
.kx-menu {
  background: var(--menu-bg); border: 1px solid var(--menu-border);
  border-radius: var(--menu-radius); box-shadow: var(--menu-shadow);
  padding: 6px; z-index: var(--z-dropdown);
  max-height: 320px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.kx-menu::-webkit-scrollbar { width: 8px; }
.kx-menu::-webkit-scrollbar-track { background: transparent; }
.kx-menu::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid var(--menu-bg); }
.kx-menu::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.kx-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: var(--menu-item-pad); border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--text); text-align: start;
  border-radius: 8px; transition: background var(--transition), color var(--transition);
}
.kx-option:hover, .kx-option.highlighted { background: var(--menu-item-hover); }
.kx-option.active, .kx-option[aria-selected="true"] {
  background: var(--menu-item-active-bg); color: var(--menu-item-active-text); font-weight: 700;
}
/* имя + метка типа (регион / город / водоём / район) для универсального поиска */
.kx-option-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-option-type {
  flex-shrink: 0; font-size: 11px; font-weight: 500; color: var(--text-muted);
  padding: 2px 7px; border-radius: var(--radius-xs); background: var(--bg-warm);
}
.kx-option.active .kx-option-type, .kx-option.highlighted .kx-option-type {
  background: rgba(0,0,0,0.14); color: var(--menu-item-active-text);
}

/* ── КОМБОБОКС / АВТОПОДБОР ── (то же меню, но триггер — поле ввода с фильтрацией)
   Разметка: <div class="kx-combo"><input class="kx-combo-input"> + chevron + .kx-menu> */
.kx-combo { position: relative; width: 100%; }
.kx-combo-input {
  width: 100%; height: var(--input-h); padding: var(--input-pad); padding-inline-end: 40px;
  background: var(--input-bg); color: var(--input-text);
  border: var(--input-border-w) solid var(--input-border); border-radius: var(--input-radius);
  font-family: inherit; font-size: var(--input-font); outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.kx-combo-input:focus { border-color: var(--input-border-focus); background: var(--input-bg-focus); }
.kx-combo-input::placeholder { color: var(--input-placeholder); }
.kx-combo-chevron {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; transition: transform var(--transition);
}
.kx-combo[aria-expanded="true"] .kx-combo-chevron { transform: translateY(-50%) rotate(180deg); }
.kx-combo .kx-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; }
/* подсветка совпавшей части текста */
.kx-option .kx-match { color: var(--primary); font-weight: 700; }
.kx-option.active .kx-match, .kx-option.highlighted .kx-match { color: inherit; }
/* «ничего не найдено» */
.kx-empty { padding: var(--menu-item-pad); color: var(--text-muted); font-size: 13px; text-align: center; }

/* ── Легаси-классы, выровнены под эталон (плоские, на токенах) ── */
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text); border: none;
  padding: var(--btn-pad); border-radius: var(--btn-radius);
  font-size: var(--btn-font); font-weight: var(--btn-weight);
  cursor: pointer; transition: all var(--transition);
  letter-spacing: 0.2px; font-family: inherit;
  min-height: var(--btn-h); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--btn-shadow);
  width: 100%;
}
.btn-primary:hover {
  background: var(--btn-bg-hover);
  box-shadow: var(--btn-shadow-hover);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; box-shadow: none; transform: none; cursor: not-allowed; }
.btn-primary.btn-danger {
  background: var(--danger);
  box-shadow: 0 2px 12px rgba(239,68,68,0.3);
}

.btn-secondary {
  background: var(--btn-sec-bg); color: var(--btn-sec-text);
  border: 1.5px solid var(--btn-sec-border);
  padding: var(--btn-pad); border-radius: var(--btn-radius);
  min-height: var(--btn-h);
  font-size: var(--btn-font); font-weight: 600;
  cursor: pointer; width: 100%; text-align: center;
  font-family: inherit; transition: all var(--transition);
  min-height: var(--btn-h); display: inline-flex; align-items: center; justify-content: center;
}
.btn-secondary:hover { border-color: var(--btn-bg); background: var(--primary-light); }

.btn-sm {
  padding: var(--btn-pad-sm); font-size: var(--btn-font-sm); border: none;
  border-radius: var(--btn-radius-sm); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; font-weight: var(--btn-weight);
  min-height: var(--btn-h-sm);
}

.btn-accent {
  background: var(--btn-bg); color: var(--btn-text); border: none;
  padding: 9px 16px; border-radius: var(--btn-radius-sm);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: var(--btn-weight); transition: background var(--transition);
}
.btn-accent:hover { background: var(--btn-bg-hover); }

/* Unified profile action buttons — one row, buttons shrink instead of clipping.
   Подписаться/Написать тянутся (flex:1), Пожаловаться/Поделиться — квадратные иконки. */

.btn-follow,
.btn-message,
.btn-icon-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h-md); border-radius: var(--btn-radius);
  font-size: 13px; font-weight: var(--btn-weight); cursor: pointer;
  font-family: inherit; text-decoration: none;
  transition: all 0.15s; box-sizing: border-box;
}
.btn-follow,
.btn-message { flex: 1 1 0; min-width: 0; padding: 0 10px; }
.btn-action-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.btn-follow {
  background: var(--primary); color: var(--bg);
  border: 1px solid var(--primary);
}
.btn-follow:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--bg); }
.btn-follow.following { background: transparent; color: var(--primary); }
.btn-follow.following:hover {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.btn-follow:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-message {
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-message:hover { background: var(--primary-light); }

.btn-icon-action {
  flex: 0 0 auto; width: var(--btn-h-md); padding: 0;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-icon-action:hover { border-color: var(--primary); color: var(--primary); }
.btn-icon-action--report:hover {
  border-color: var(--danger); color: var(--danger); background: var(--danger-light);
}
.btn-icon-action--wide { width: auto; padding: 0 14px; }

/* Узкие экраны: прячем иконки текстовых кнопок, чтобы подписи не резались */
@media (max-width: 379px) {
  .btn-follow svg, .btn-message svg { display: none; }
  .btn-follow, .btn-message { padding: 0 6px; font-size: 12.5px; }
}

.error-msg {
  color: var(--danger); font-size: 13px; text-align: center;
  padding: 10px 14px; background: var(--danger-light); border-radius: var(--radius-xs);
  border: 1px solid rgba(239,68,68,0.15);
}

/* ================================================================
   FAB — Floating Action Buttons
   ================================================================ */
/* FAB «Создать» — КРУГЛАЯ, приподнятая (современный вид): 56px круг, зелёный
   бренд + многослойная тень (мягкое бренд-свечение снизу + плотная тень глубины)
   + тонкий верхний блик (inset). Плюс крупный и жирный. */
/* FAB «Создать» — деликатная и современная: 48px круг, ПОЛУПРОЗРАЧНАЯ с
   фрост-эффектом (backdrop-blur — под кнопкой просвечивает лента), тонкая
   рамка-хайлайт, мягкая нейтральная тень (без «колхозного» зелёного ореола). */
.fab {
  position: fixed; bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px) + 16px); right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  /* Явный просвет: заливка ~58% — сквозь кнопку видно ленту. backdrop-filter —
     фрост-стекло сверху (если не сработает из-за transform-родителя, полупрозрачность
     всё равно видна). */
  background: color-mix(in srgb, var(--primary) 58%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: rgba(255,255,255,0.98);
  border: 1px solid rgba(255,255,255,0.28);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5);
  cursor: pointer; z-index: 50;
  transition: transform 0.16s cubic-bezier(.34,1.56,.64,1), background 0.16s ease;
}
.fab svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.fab:hover { background: color-mix(in srgb, var(--primary) 74%, transparent); }
.fab:active { transform: scale(0.9); }

/* Кнопка «Наверх» — появляется после прокрутки, над таб-баром слева (чтобы не пересекаться с FAB создания справа) */
/* «Свежие посты» — пилюля сверху по центру на главной (замена нижней стрелки «наверх»).
   Появляется при прокрутке ленты, возврат в начало по клику. */
.fresh-posts-pill {
  position: fixed;
  top: calc(var(--safe-top) + var(--header-height) + 8px);
  left: 50%; transform: translateX(-50%);
  z-index: 550;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  /* полупрозрачная, с размытием — как остальные плавающие элементы */
  background: color-mix(in srgb, var(--primary) 52%, transparent);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  color: var(--btn-text);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.14); cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.24);
  -webkit-tap-highlight-color: transparent;
  /* появление/затухание — одним переходом в обе стороны */
  opacity: 1;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s;
  visibility: visible;
}
/* покой: 2с без прокрутки — плавно гаснет и не перехватывает касания */
.fresh-posts-pill--idle {
  opacity: 0;
  transform: translate(-50%, -10px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.fresh-posts-pill:active { filter: brightness(0.93); }
@media (prefers-reduced-motion: reduce) {
  .fresh-posts-pill, .fresh-posts-pill--idle { transition: opacity 0.01s linear; transform: translate(-50%, 0); }
}

/* Center create-post button */
.tab-create {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  gap: 2px; padding: 4px 2px;
  color: rgba(130,145,138,0.6); font-size: 11px; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  height: var(--tab-height);
  letter-spacing: 0.02em;
}
.tab-create-icon {
  width: 52px; height: 36px; border-radius: 18px;
  background: var(--btn-bg);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; /* нижняя навигация — не трогаем, оставляем белым */
  box-shadow: 0 6px 20px rgba(90,140,90,0.65), 0 1px 0 rgba(255,255,255,0.15) inset;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1), box-shadow 0.15s ease;
  transform: translateY(-7px);
}
.tab-create-icon svg { width: 20px !important; height: 20px !important; flex-shrink: 0; stroke-width: 2 !important; }
.tab-create:active .tab-create-icon {
  transform: scale(0.92);
  box-shadow: 0 1px 6px rgba(90,140,90,0.3);
}

/* Compact stats chips below bite forecast */
.feed-quick-stats-inline {
  display: flex; gap: 6px; padding: 0 4px 10px;
  flex-wrap: wrap;
}
.quick-stat-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 5px 10px;
  font-size: 12px; color: var(--text-muted); text-decoration: none;
  transition: background 0.15s;
}
.quick-stat-chip:hover { background: var(--border); }

.fab-add-spot {
  position: fixed; bottom: 80px; right: 20px; z-index: 900;
  width: var(--fab-size); height: var(--fab-size); border-radius: var(--fab-radius);
  background: var(--fab-bg); color: var(--fab-text); border: none;
  box-shadow: var(--fab-shadow);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fab-add-spot:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(127,161,122,0.5); }

/* Mobile Fish FAB */
.mobile-fish-fab {
  position: fixed; bottom: 80px; right: 16px;
  width: var(--fab-size); height: var(--fab-size); border-radius: var(--fab-radius);
  background: var(--fab-bg);
  color: var(--fab-text); display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: var(--fab-shadow);
  z-index: 100; text-decoration: none; transition: transform 0.2s;
}
.mobile-fish-fab:hover { transform: scale(1.1); }

/* Mobile header city chip */
/* Селектор региона скрыт: аудитория пока мала, фильтровать ленту по гео нечего.
   Вернуть — убрать display:none (остальные стили сохранены). */
.mobile-header-city {
  display: none;
  align-items: center; gap: 4px;
  background: var(--primary-bg);
  border: 1px solid rgba(127,161,122,0.20);
  border-radius: var(--radius-sm); padding: 0 10px 0 8px;
  height: 36px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; white-space: nowrap;
  flex: 1; min-width: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.mobile-header-city span { overflow: hidden; text-overflow: ellipsis; }
.mobile-header-city svg { color: var(--primary); flex-shrink: 0; }
@media (min-width: 769px) { .mobile-header-city { display: none; } }

/* Mobile profile button in header */
.mobile-profile-btn { position: relative; }
.mobile-header-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary);
}
/* Green dot = logged in, shown on avatar */
.mobile-profile-btn.is-auth::after {
  content: '';
  position: absolute; bottom: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  border: 1.5px solid rgba(18,26,23,0.97);
}

/* ─── Collapsible header — уезжает вверх при скролле ──────────────────────── */
/* Все иконки хедера — в одном ряду с РАВНЫМИ промежутками (space-between на всю
   ширину), выровнены по вертикали. Правые (+/чат/аватар) — обрамлённые. */
.header-collapsible {
  display: flex; align-items: center;
  overflow-x: auto; scrollbar-width: none;
  /* Левые кнопки группируются слева; справа остаётся свободное место, поверх
     которого лежат статичные закреплённые +/чат/аватар (position:fixed). */
  justify-content: flex-start;
  gap: var(--hdr-gap);
  flex: 1; min-width: 0; width: 100%;
}
/* Левые иконки главной: безрамочные, иконка + подпись — единый стиль с панелью
   Маркета (.mkt-hdr-ico). Скроллятся с лентой; фикс только профиль справа. */
.header-collapsible .icon-btn {
  width: auto; height: auto; flex-shrink: 0;
  flex-direction: column; gap: 3px; padding: 8px 9px 5px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--text-muted); font-size: 11px; font-weight: 600;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
.header-collapsible::-webkit-scrollbar { display: none; }
/* Резерв справа под статичный профиль — чтобы последняя кнопка не уходила под него. */
.header-collapsible { padding-inline-end: 54px; }
/* Узкие телефоны (S8 ~360px): 5 крупных кнопок с подписями не влезают рядом с
   профилем → сжимаем горизонтальный паддинг и подпись, чтобы упаковались без
   наложения/скролла (пустота сжимается, а не буквы налезают). */
@media (max-width: 400px) {
  .header-collapsible .icon-btn { padding-inline-start: 4px; padding-inline-end: 4px; font-size: 10px; }
  .header-collapsible .icon-btn svg { width: 20px; height: 20px; }
  .header-collapsible { padding-inline-end: calc(var(--hdr-btn-left) + 10px); }
}
.header-collapsible .icon-btn > span { line-height: 1; }
.header-collapsible .icon-btn svg { width: 22px; height: 22px; }
/* Бейдж непрочитанных — по-вк: крупный, читаемый, поверх иконки (не «в воздухе»).
   Обёртка .hdr-ico-wrap — якорь позиционирования; контейнер имеет padding-top,
   чтобы overflow-x:auto (тянет overflow-y) не срезал верх бейджа. */
.hdr-ico-wrap { position: relative; display: inline-flex; }
.hdr-ico-wrap .badge {
  position: absolute; top: -4px; right: -8px;
  min-width: 15px; height: 15px; padding: 0 3px;
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1;
  border-radius: 7px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg);
  pointer-events: none;
}
.hdr-ico-wrap .badge--warning { background: var(--warning); color: #1a1a1a; }

/* Правая тройка (+/чат/аватар) — акцентная рамка И чуть КРУПНЕЕ левых иконок,
   чтобы визуально выделять основные действия. */
.header-collapsible .icon-btn--framed {
  width: 48px; height: 48px;
  border-radius: 13px;
  /* Фон и цвет — ПО ТЕМЕ (был жёсткий тёмный rgba(18,26,23) → в тёмной теме сливался
     с фоном, в светлой давал тёмную иконку на тёмной плашке = «чёрное на чёрном»,
     жалоба Лили). var(--card) всегда контрастнее фона, var(--text) — яркая иконка. */
  background: var(--card);
  border: 2px solid rgba(127,161,122,0.55);
  color: var(--text);
}
.header-collapsible .icon-btn--framed svg { width: 24px; height: 24px; }
.header-collapsible .header-avatar-inline { overflow: hidden; }
.header-collapsible .header-avatar-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
@media (max-width: 767px) {
  .app-header {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Раньше на «/» шапка уезжала вверх целиком. Теперь остаётся: наверх уходят
     только плитки (они выше по потоку). Правило оставлено пустым намеренно —
     класс .header-scrolled по-прежнему нужен другим стилям. */
  .app-header.header-scrolled { transform: none; }
}

/* ─── Inner page header: back + title ─────────────────────────────────────── */
.header-inner-page {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
  position: relative;
}
/* Иконка-действие раздела (напр. поиск «Сервисов») — ЗЕРКАЛО кнопки «Назад»:
   тот же размер 44×44, прижата к правому краю экрана (12px), центр по вертикали
   как у «Назад». Нужен fixed, т.к. .app-header-inner имеет padding-inline-end:144px. */
.header-search-fixed {
  position: fixed;
  right: 12px;
  top: calc(env(safe-area-inset-top, 0px) + 6px);
  z-index: 600;
}
/* Кнопка «назад» — левый край РОВНО на одной линии с карточками ленты (12px от
   края экрана, даёт .app-header-inner / .app-main). Не сдвигать: пробовали -6px,
   владелец: «сильно прижата к границе». Внутри коробки 44px иконка 22px по центру —
   это тач-таргет, а не лишний отступ. */
.header-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: var(--back-size); height: var(--back-size); border-radius: var(--back-radius); flex-shrink: 0;
  background: var(--back-bg);
  border: 1px solid var(--back-border);
  color: var(--back-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 1; /* поверх title */
}
.header-back-btn:active { background: transparent; }
/* Единая сетка: «Назад» центрируется по 1-й колонке нижней панели,
   правое действие — по 5-й. Ровно над иконками таб-бара. */
.header-inner-page > .header-back-btn {
  margin-inline-start: calc(var(--nav-c1) - 12px - var(--back-size) / 2);
}
.header-search-fixed {
  right: calc(var(--nav-c1) - var(--back-size) / 2) !important;
}

/* ── Прототип нового хедера: панель-навигация ─────────────────────────────────
   «Назад» без рамки, иконка + подпись — в едином стиле с кнопками панели
   (.mkt-hdr-ico / .hdr-nav-btn). Профиль всегда справа. Заголовок скрыт. */
/* Icon-only, единый стиль с иконками главной: 44×44, без подписи. */
.header-back-btn--nav {
  width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text-dim);
}
.header-back-btn--nav svg { width: 28px; height: 28px; }   /* шеврон тонкий — крупнее, чтобы визуально совпал с заливистыми иконками */
/* :hover только на устройствах с реальным курсором — на тач :hover симулируется после тапа */
@media (hover: hover) {
  .header-back-btn--nav:hover { background: var(--primary-bg); color: var(--primary); }
  .hdr-nav-btn:hover { color: var(--primary); background: var(--primary-bg); }
  .header-collapsible .icon-btn:hover { background: var(--primary-bg); color: var(--primary); }
  .icon-btn:hover { background: var(--bg); }
}
.header-back-btn--nav:active { background: transparent !important; }
.app-header button:active,
.app-header a:active { background: transparent !important; }
.header-back-btn--nav span { display: none; }   /* icon-only: подпись «Назад» скрыта */
/* Сетка хедера — 5 фиксированных слотов на всю ширину: «Назад» = слот 1 (слева),
   действия заполняют слоты 2-3-4 слева-направо, профиль/лого = слот 5 (справа).
   Так «второй значок» всегда во 2-м слоте, а не по центру. Карту (mapnav) не трогаем. */
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) {
  display: grid;
  /* 1-В-1 с главной (.header-icons5) и с нижней панелью: 5 РАВНЫХ колонок (1fr)
     внутри трека --nav-track, кнопка центрируется в своей колонке.
     ❌ Было `repeat(5, 44px)` + space-between — это ДРУГИЕ позиции: при 390px
     первая кнопка вставала на 34px вместо 64.6px, профиль на 356 вместо 325,
     то есть весь ряд шире колонок таб-бара на ~30px. Не возвращать. */
  /* minmax(0,1fr), а НЕ 1fr: у `1fr` минимум = min-content, и первая колонка
     раздувалась до 74px (остальные по 52) — ряд съезжал. column-gap:0 гасит
     `gap:10px` от .header-inner-page: с зазорами трек не совпадёт с таб-баром. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 0;
  align-items: center;
  justify-items: center;
  /* -12px — компенсация padding-inline у .app-header-inner (как в .header-icons5) */
  padding-inline: calc(var(--nav-track) - 12px);
}
/* Слот 1 — ТОЛЬКО настоящий «Назад» (первый ребёнок). На играх кнопка настроек
   тоже имеет класс .header-back-btn--nav — её в слот 1 НЕ ставим (иначе две кнопки
   в одной колонке → перенос на 2-й ряд → «столбиком»). Она авто-раскладывается. */
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) > .header-back-btn--nav:first-child { grid-column: 1; }
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) > .header-nav-profile { grid-column: 5; }
/* Внутри грида НИКАКИХ ручных отступов — колонка сама ставит кнопку по центру.
   ❌ `.header-inner-page > .header-back-btn { margin-inline-start: nav-c1… }` (30.6px)
   и `.more-search-toggle { margin-inline-start: auto }` — оба выравнивали кнопки
   ВРУЧНУЮ во времена flex-строки; в гриде они выталкивают ряд из колонок
   (при 390px: «Назад» на 80 вместо 64, лупа на 140 вместо 129). */
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) > .header-back-btn,
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) .more-search-toggle {
  margin-inline-start: 0;
  margin-inline-end: 0;
}
/* ИСКЛЮЧЕНИЕ из грида: строка с функциональным заголовком («Водоёмы России ▾»,
   канал группы). Заголовку нужна вся свободная ширина — в колонку 65px он не лезет
   и уползает под кнопки. Такой хедер остаётся flex-строкой, но «Назад» всё равно
   встаёт по центру 1-й колонки таб-бара (margin = nav-c1 − nav-track − half-btn),
   а действия прижаты вправо. */
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav):has(.header-page-title) {
  display: flex;
  gap: 8px;
}
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav):has(.header-page-title) > .header-back-btn {
  margin-inline-start: calc(var(--nav-c1) - var(--nav-track) - var(--back-size) / 2);
}
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav):has(.header-page-title) .hdr-tools {
  display: flex; margin-inline-start: auto; gap: 8px; flex-shrink: 0;
  /* зеркало отступа «Назад» — правое действие садится на центр 5-й колонки */
  margin-inline-end: calc(var(--nav-c1) - var(--nav-track) - var(--back-size) / 2);
}
/* Если справа стоит профиль (страница группы — шапка как в ТГ: назад · инфо ·
   настройки · профиль), то на центр 5-й колонки садится он, а инструменты
   прижимаются к нему обычным зазором — иначе между ними дыра в пол-экрана. */
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav):has(.header-page-title):has(.header-nav-profile) .hdr-tools {
  margin-inline-end: 4px;
}
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav):has(.header-page-title) > .header-nav-profile {
  /* тот же зеркальный отступ, что был у инструментов: правый край ряда на месте */
  margin-inline-end: calc(var(--nav-c1) - var(--nav-track) - var(--back-size) / 2);
}
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav):has(.header-page-title) .header-page-title {
  flex: 1 1 auto; min-width: 0;
}
/* mapnav — прежнее flex-поведение */
.header-inner-page--mapnav { gap: 4px; }
/* Панель-кнопки (headerNode) занимают центр и СЖИМАЮТСЯ (flex-basis:0 + min-width:0),
   иначе слот не уступает место профилю и вылезает под него. Внутри — свой скролл. */
.header-inner-page--nav .header-node-slot {
  flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none;
  display: flex; align-items: center; gap: 8px;
}
/* Заголовок раздела рядом с панель-кнопками (показываем при ≤2 кнопках — есть место). */
.hdr-nav-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  white-space: nowrap; flex-shrink: 0; letter-spacing: -0.2px; padding-inline-start: 2px;
}
/* Заголовок + действия страницы (Настройки: Сохранить/Выйти в .header-actions-fixed
   справа): держим место справа, чтобы центрированный текст не налезал на кнопки. */
@media (max-width: 767px) {
  .hdr-nav-title--actions { padding-inline-end: 150px; }
}
.header-inner-page--nav .header-node-slot::-webkit-scrollbar { display: none; }
/* Профиль справа — КРУГЛЫЙ (единый вид лого во всём приложении, как на главной
   .hdr5-ava): размер --hdr-btn-left, border-radius 50%, рамка primary 2px. */
.header-nav-profile {
  flex: 0 0 auto; margin-inline-start: 2px;
  /* КРУГ — единый вид лого/профиля во всём приложении (как на главной .hdr5-ava).
     Раньше был скруглённый квадрат (--radius); теперь профиль везде круглый. */
  width: var(--hdr-btn-left); height: var(--hdr-btn-left);
  border-radius: 50%;
  border: 2px solid rgba(127,161,122,0.5);
  background: var(--card); color: var(--text); cursor: pointer;
  display: grid; place-items: center; overflow: hidden; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.header-nav-profile .header-avatar-img { width: 100%; height: 100%; object-fit: cover; }
/* Правая кнопка шапки — круглый аватар (лого группы, собеседник в ЛС).
   Тот же круг и та же рамка, что у профиля: ряд шапки везде одинаковый. */
.hdr-avatar-btn {
  flex: 0 0 auto; width: var(--hdr-btn-left); height: var(--hdr-btn-left);
  display: grid; place-items: center; padding: 0; overflow: hidden;
  border: 2px solid rgba(127,161,122,0.5); border-radius: 50%;
  background: var(--card); color: var(--text-dim); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hdr-avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.hdr-avatar-btn img.is-coat { object-fit: contain; background: #fff; padding: 2px; }

/* Маркет: скрываем профиль — вместо него кнопка «Создать» в headerNode */
body.mkt-page-active .header-nav-profile,
body.mkt-page-active .header-cart-btn { display: none; }

/* ── Карта во весь экран: хедер — прозрачная ПЛАВАЮЩАЯ плашка поверх карты ──
   Убираем сплошной бар и его фон, карта уходит под контролы. Вся логика кнопок
   (поиск/режим/моё место/создать/назад) сохраняется — меняется только вид. */
.app-header--map-overlay {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
  pointer-events: none;              /* карта под пустыми зонами хедера кликается */
}
/* На карте убираем боковой padding обёртки хедера (0 12px) — иначе плашка вдвинута
   сильнее, чем панель под ней, и они не совпадают по ширине. */
.app-header--map-overlay .app-header-inner { padding: 0; }
.app-header--map-overlay .header-inner-page {
  pointer-events: auto;
  margin: 6px var(--map-pill-inset, 26px) 0;
  height: var(--map-pill-h, 50px); padding: 0 6px;   /* как .tab-bar--float */
  border-radius: var(--radius);
  background: rgba(18,26,23,0.58);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,0.06);
  transition: background .22s ease, border-radius .22s ease, box-shadow .22s ease;
}
/* Когда открыта панель/поиск — плашка синхронно ТЕМНЕЕТ (почти непрозрачная) и стыкуется
   с панелью снизу (низ квадратный), чтобы шапка+панель читались как один блок. */
body.map-panel-open .app-header--map-overlay .header-inner-page {
  background: rgba(18,26,23,0.97);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  box-shadow: 0 4px 0 rgba(0,0,0,0);
}
/* Светлые иконки/подписи на тёмной плашке — читаемо на любом снимке/карте */
.app-header--map-overlay .header-back-btn--nav,
.app-header--map-overlay .hdr-nav-btn { color: #eaf2ee; }
.app-header--map-overlay .header-back-btn--nav svg,
.app-header--map-overlay .hdr-nav-btn svg { color: #eaf2ee; }
/* Активный инструмент (линейка вкл / фильтр не по умолчанию / режим/поиск открыт) — подсветка */
.app-header--map-overlay .hdr-nav-btn.is-active,
.app-header--map-overlay .hdr-nav-btn.is-active svg { color: var(--primary); }
/* Карта занимает весь экран под плавающим хедером (убираем отступ под шапку). */
.app-layout:has(.app-header--map-overlay) { padding-top: 0 !important; }
/* При открытом поиске — плашка темнеет и квадратно стыкуется с панелью снизу */
.app-header--map-overlay:has(.hdr-search-bar) .header-inner-page {
  background: rgba(18,26,23,0.97);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  box-shadow: 0 4px 0 rgba(0,0,0,0);
}
/* Выдвижная строка поиска — плавное появление */
.app-header--map-overlay .hdr-search-bar {
  /* Края берём из замера плашки (их выставляет MapPage): подложка обязана совпадать
     с плашкой и выпадающим списком, а из CSS ширину плашки не вычислить — она зависит
     от полей шапки. Значения по умолчанию — на случай, если замер ещё не прошёл. */
  pointer-events: auto;
  margin: 0;
  margin-left: var(--map-pill-left);
  margin-right: var(--map-pill-right);
  border: 1px solid rgba(255,255,255,0.08); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: rgba(18,26,23,0.97);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 16px 38px rgba(0,0,0,.5);
  /* Поле дышит внутри подложки. Сама подложка садится ровно по плашке (см. края
     выше) — раньше она была шире, и поле на её фоне смотрелось вставленным криво;
     теперь совпадение обеспечено замером, а отступы работают как надо. */
  padding: 8px 10px 10px;
  animation: hdr-search-drop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hdr-search-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Карта: «Назад» не нужен, подписи убраны (иконки понятны) — 4 иконки-действия
   (Поиск/Моё место/Создать/Режим) равными колонками на всю ширину плашки. */
.header-inner-page--mapnav { gap: 0; }
.header-inner-page--mapnav .header-back-btn--nav { display: none; }
.header-inner-page--mapnav .header-node-slot { flex: 1 1 0; overflow: visible; }
.header-inner-page--mapnav .hdr-nav-panel { width: 100%; gap: 0; height: 100%; }
.header-inner-page--mapnav .hdr-nav-btn { flex: 1 1 0; min-width: 0; padding: 0; height: 100%; }
.header-inner-page--mapnav .hdr-nav-btn span { display: none; }   /* только иконки */
/* Иконки — та же сетка и тот же размер, что в нижней панели (.tab-bar--float):
   равные колонки flex:1, 28px, тонкая обводка. Чтобы шапка и таб-бар читались парой. */
.header-inner-page--mapnav .hdr-nav-btn svg { width: 28px; height: 28px; stroke-width: 1.75; flex: 0 0 auto; }

/* ── Клипы: шапка в стиле Reels — буквы и кнопки прямо поверх видео ──
   Плашки нет: кадр идёт под самый верх, читаемость даёт тёмная вуаль-градиент
   сверху и тень у текста. Плашка ПОЯВЛЯЕТСЯ плавно только когда открыт поиск —
   тогда шапка и строка ввода читаются как один тёмный блок. */
.header-inner-page--clipsnav { gap: 0; }
.header-inner-page--clipsnav .header-back-btn,
.header-inner-page--clipsnav .header-back-btn--nav { display: none; }
.header-inner-page--clipsnav .header-nav-profile { display: none; }
.header-inner-page--clipsnav .header-cart-btn { display: none; }
.header-inner-page--clipsnav .header-node-slot { flex: 1 1 0; min-width: 0; overflow: visible; }

/* Вуаль сверху: на светлом кадре белые буквы остаются читаемыми, на тёмном её
   почти не видно. Когда открыт поиск — вуаль уходит, её место занимает плашка. */
.app-header--clips-overlay::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: calc(var(--safe-top, 0px) + var(--map-pill-h, 46px) + 40px);
  background: linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.26) 48%, rgba(0,0,0,0) 100%);
  pointer-events: none; opacity: 1; transition: opacity .24s ease;
}
.app-header--clips-overlay:has(.hdr-search-bar)::before { opacity: 0; }

/* Сама плашка на клипах прозрачная — буквы лежат прямо на видео */
.app-header--clips-overlay {
  background: transparent !important;
  transition: background .24s ease;
}
.app-header--clips-overlay .header-inner-page {
  margin: 0; border-radius: 0; height: var(--map-pill-h, 46px);
  background: transparent; border-color: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* Поиск открыт (и всё время, пока строка уезжает) — плашка проявляется.
   Фон СПЛОШНОЙ и одинаковый у обеих половин (шапка + строка ввода): полупрозрачность
   с blur давала разный тон на кадре и стык между ними был виден полосой. */
.app-header--clips-overlay:has(.hdr-search-bar) { background: #0d100f !important; }
.app-header--clips-overlay:has(.hdr-search-bar) .header-inner-page {
  background: transparent;
}
/* Строка ввода — продолжение плашки: ТОТ ЖЕ сплошной цвет собственным фоном.
   Свой фон обязателен: в установленном приложении высота .app-header жёстко
   задана (.pwa-standalone), строка выпадает за неё и фоном шапки не кроется.
   Цвет совпадает с шапкой один в один, поэтому шва не видно. */
.app-header--clips-overlay .hdr-search-bar {
  margin: 0; padding: 2px 12px 10px;
  border: none; border-radius: 0; box-shadow: none;
  background: #0d100f;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  animation: hdr-search-drop 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Поле — залитая пилюля без контура (как в Reels), а не светлая рамка */
.app-header--clips-overlay .hdr-search-field {
  height: 40px; padding: 0 14px;
  background: rgba(255,255,255,0.12);
  border: none; border-radius: 999px;
  color: rgba(255,255,255,0.75);
}
.app-header--clips-overlay .hdr-search-field > svg { color: rgba(255,255,255,0.75); }
.app-header--clips-overlay .hdr-search-field input { color: #fff; font-size: 15px; }
.app-header--clips-overlay .hdr-search-field input::placeholder { color: rgba(255,255,255,0.5); }
.app-header--clips-overlay .hdr-search-clear { color: rgba(255,255,255,0.7); }

/* Шапка клипов: [.] [Все Подписки] [🔍 📹] — табы строго по центру экрана,
   как в Reels: слева пустая колонка ровно в ширину пары иконок справа. */
.clips-hdr-bar {
  display: grid; grid-template-columns: 88px 1fr 88px;
  align-items: stretch; height: 100%; width: 100%;
}
.clips-hdr-tabs {
  grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 20px;
}
.clips-hdr-tab {
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.62);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, font-weight 0.15s;
}
/* Активный — просто белый и жирный (как в Reels), подчёркивание не нужно */
.clips-hdr-tab.active { color: #fff; font-weight: 700; }
.clips-hdr-icon {
  border: none; background: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 100%;
  color: #fff; -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.55));
  transition: color 0.15s, opacity 0.15s;
}
.clips-hdr-icon:active { opacity: 0.6; }
/* Обе иконки — в правой колонке, вплотную к краю (как в Reels) */
.clips-hdr-bar > .clips-hdr-icon { grid-row: 1; }
.clips-hdr-bar > .clips-hdr-icon:nth-of-type(1) { grid-column: 3; justify-self: start; }
.clips-hdr-bar > .clips-hdr-icon:nth-of-type(2) { grid-column: 3; justify-self: end; }
/* Лупа подсвечена, пока строка поиска открыта */
.app-header--clips-overlay:has(.hdr-search-bar) .clips-hdr-icon--search { color: var(--primary); }

/* Строка поиска уезжает плавно (класс висит ~0.18 с, см. Layout) — общий стиль */
.hdr-search-bar.is-closing {
  animation: hdr-search-lift 0.18s ease forwards; pointer-events: none;
}
@keyframes hdr-search-lift {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px); }
}

/* Таббар на клипах лежит ПОВЕРХ кадра и почти прозрачен: сплошную подложку
   заменяет мягкая вуаль (.clips-page::after) — размытие с градиентом, которое
   начинается от полосы времени клипа и книзу набирает плотность.
   !important нужен: dark-mode правило ниже по файлу имеет ту же специфичность. */
body:has(.clips-page) .tab-bar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-top-color: transparent !important;
}
/* Вуаль снизу: прозрачная у полосы времени, к низу — размытие + затемнение.
   Маска даёт именно ПЛАВНЫЙ блюр (сам backdrop-filter градиентным не бывает). */
.clips-page::after {
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 399;
  height: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px) + 54px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 46%, rgba(0,0,0,0.66) 100%);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 38%, #000 72%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 38%, #000 72%);
  pointer-events: none;
  transition: opacity .2s ease;
}
body.clips-fullscreen .clips-page::after { opacity: 0; }

/* Кнопка корзины в хедере */
.header-cart-btn {
  flex: 0 0 auto; margin-inline-start: 2px; position: relative;
  width: var(--hdr-btn-left); height: var(--hdr-btn-left);
  border-radius: var(--radius); border: 2px solid rgba(127,161,122,0.5);
  background: var(--card); color: var(--text); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.header-cart-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 17px; height: 17px; border-radius: 10px;
  background: var(--primary); color: white;
  font-size: 10px; font-weight: 700; line-height: 17px;
  text-align: center; padding: 0 4px; pointer-events: none;
}

/* Кнопка звука/рейтинга игры в хедере (слева от профиля) */
.header-mute {
  flex: 0 0 auto; margin-inline-start: 2px;
  width: var(--hdr-btn-left); height: var(--hdr-btn-left);
  border-radius: var(--radius); border: 2px solid rgba(127,161,122,0.45);
  background: rgba(127,161,122,0.08); color: var(--primary); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .13s, border-color .13s;
}
.header-mute:active { transform: scale(.94); background: rgba(127,161,122,0.18); }

/* ── Канон панель-кнопок хедера (глобально) ──────────────────────────────────
   Единый стиль для навигации/действий в новом хедере: безрамочная кнопка,
   иконка сверху + подпись снизу. Использовать .hdr-nav-panel > .hdr-nav-btn
   на любой странице (не .mkt-hdr-ico — та в market.css, грузится лишь на Маркете). */
.hdr-nav-panel { display: flex; align-items: stretch; gap: 2px; }
/* Icon-only, единый стиль с иконками главной: 44×44, без подписи снизу. */
.hdr-nav-btn {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 0; padding: 0; width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-family: inherit;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.hdr-nav-btn > span { display: none; }   /* icon-only: подписи Поиск/Создать/… скрыты */
.hdr-nav-btn svg { flex-shrink: 0; width: 26px; height: 26px; }
/* Кнопки хедера идут слева-направо сразу после «Назад» (заголовок убран, §9). */
/* Все контейнеры кнопок в nav-хедере «расплющиваем» (display:contents), чтобы
   иконки-действия встали ПРЯМЫМИ детьми строки хедера и распределились по сетке
   space-between вместе с «Назад» и профилем — как на главной, а не кучей/по центру.
   (Слот headerNode — market — остаётся с flex:1, его НЕ трогаем: свой layout.) */
.header-inner-page--nav .header-node-slot--left,
.header-inner-page--nav .header-node-slot--left > .hdr-nav-panel,
.header-inner-page--nav > .hdr-nav-panel,
.header-inner-page--nav .hdr-tools { display: contents; }
/* Слот headerNode (Маркет: Избранное · Заказы · Моё · Создать) — тоже в общую
   сетку: раньше он оставался flex:1 внутри одной ячейки, кнопки шли вплотную по
   44px и наезжали на «Назад». Клипы и карта — свои раскладки, их не трогаем. */
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) .header-node-slot,
.header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) .header-node-slot > .hdr-nav-panel { display: contents; }
/* Плоский заголовок раздела из СТРОКИ хедера убран (грид кнопок, как на главной):
   раньше `.hdr-nav-title` c flex:1 расталкивал кнопки к центру/вправо. Функциональный
   заголовок-дропдаун (`.header-page-title--rich`, напр. «Водоёмы России ▾») остаётся. */
.header-inner-page--nav .hdr-nav-title { display: none; }
/* «Создать» в хедере — как в маркете: PlusCircle в цвете primary, без фона. */
.hdr-nav-btn--create { color: var(--primary); }
/* Иконки-действия в МОБИЛЬНОМ хедере — БЕЗ рамки/«оболочки», как на главной
   (раньше .hdr-action-btn был боксом с рамкой: bell/share, инструменты Водоёмов,
   legacy-поиск). Перебивает общий бордер `.page-hdr-back, .hdr-action-btn`. */
.app-header .hdr-action-btn {
  width: 44px; height: 44px;
  background: none; border: none; color: var(--text-dim);
  border-radius: var(--radius-sm);
}
.app-header .hdr-action-btn svg { width: 26px; height: 26px; }
@media (hover: hover) { .app-header .hdr-action-btn:hover { background: var(--bg-warm); border-color: transparent; color: var(--text); } }
.app-header .hdr-action-btn.is-active,
.app-header .hdr-action-btn--active { background: var(--primary-bg); color: var(--primary); border-color: transparent; }
/* Кнопки хедера идут слева-направо сразу после «Назад» (заголовок убран, §9). */
/* Все контейнеры кнопок в nav-хедере «расплющиваем» (display:contents), чтобы
   иконки-действия встали ПРЯМЫМИ детьми строки хедера и распределились по сетке
   space-between вместе с «Назад» и профилем — как на главной, а не кучей/по центру.
   (Слот headerNode — market — остаётся с flex:1, его НЕ трогаем: свой layout.) */
.header-inner-page--nav .header-node-slot--left,
.header-inner-page--nav .header-node-slot--left > .hdr-nav-panel,
.header-inner-page--nav > .hdr-nav-panel,
.header-inner-page--nav .hdr-tools { display: contents; }
/* Плоский заголовок раздела из СТРОКИ хедера убран (грид кнопок, как на главной):
   раньше `.hdr-nav-title` c flex:1 расталкивал кнопки к центру/вправо. Функциональный
   заголовок-дропдаун (`.header-page-title--rich`, напр. «Водоёмы России ▾») остаётся. */
.header-inner-page--nav .hdr-nav-title { display: none; }
/* «Создать» в хедере — как в маркете: PlusCircle в цвете primary, без фона. */
.hdr-nav-btn--create { color: var(--primary); }
/* Иконки-действия в МОБИЛЬНОМ хедере — БЕЗ рамки/«оболочки», как на главной
   (раньше .hdr-action-btn был боксом с рамкой: bell/share, инструменты Водоёмов,
   legacy-поиск). Перебивает общий бордер `.page-hdr-back, .hdr-action-btn`. */
.app-header .hdr-action-btn {
  width: 44px; height: 44px;
  background: none; border: none; color: var(--text-dim);
  border-radius: var(--radius-sm);
}
.app-header .hdr-action-btn svg { width: 26px; height: 26px; }
@media (hover: hover) { .app-header .hdr-action-btn:hover { background: var(--bg-warm); border-color: transparent; color: var(--text); } }
.app-header .hdr-action-btn.is-active,
.app-header .hdr-action-btn--active { background: var(--primary-bg); color: var(--primary); border-color: transparent; }

/* ===== Универсальная выдвижная строка поиска модуля (.hdr-search-bar) ===== */
/* 2-я строка под баром хедера: поле ввода + сортировка + фильтр. Появляется по
   клику на 🔍, фильтрует контент снизу, прячется по повторному клику/клику вне. */
.hdr-search-bar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 12px 10px;
  animation: hdrSearchDrop 0.16s ease;
}
@keyframes hdrSearchDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.hdr-search-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  height: var(--action-btn-size); padding: 0 12px;
  /* ЭТАЛОН §5: строка поиска модуля — контур БЕЗ заливки, единые токены полей */
  background: transparent;
  border: var(--input-border-w) solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--text-muted);
}
.hdr-search-field > svg { flex-shrink: 0; }
/* Глобальная тема заливает ЛЮБОЙ input (:root:not(.light) input, спец. 0,2-3,1),
   поэтому вложенный в контур input ОБЯЗАН сбросить фон/тень через !important —
   иначе внутри контура появляется вторая заливка (двойной фон). См. стандарт §5. */
.hdr-search-field input,
.hdr-search-field input:focus {
  flex: 1; min-width: 0;
  border: none !important; outline: none;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--input-text); font-size: 14px;
}
.hdr-search-field input::placeholder { color: var(--text-muted); }
.hdr-search-clear {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: none; background: none; cursor: pointer;
  color: var(--text-muted);
}
.hdr-search-tool {
  flex-shrink: 0;
  width: var(--action-btn-size); height: var(--action-btn-size);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: var(--input-border-w) solid var(--input-border);
  border-radius: var(--action-btn-radius);
  color: var(--text-muted); cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.hdr-search-tool.is-active { color: var(--primary); border-color: var(--primary); }
.hdr-search-tool.is-open { color: var(--primary); border-color: var(--primary); }
/* Выпадающее меню сортировки/фильтра — под баром, справа под иконками */
.hdr-search-menu {
  position: absolute; top: calc(100% - 6px); right: 12px; z-index: 60;
  min-width: 220px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: var(--radius);
  background: var(--card);
  border: var(--input-border-w) solid var(--input-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.28);
  animation: hdrSearchDrop 0.14s ease;
}
.hdr-search-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 12px;
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 14px; font-weight: 500; text-align: start;
}
.hdr-search-menu-item:hover { background: var(--bg-warm); }
.hdr-search-menu-item.is-active { color: var(--primary); font-weight: 600; }
.hdr-search-menu-item > svg { flex-shrink: 0; }
/* Подсветка тумблера 🔍, пока строка открыта */
.hdr-search-toggle.is-active { color: var(--primary); }



/* Профиль как ЕДИНСТВЕННАЯ фикс-кнопка главной: размер и радиус как левые квадраты
   (--hdr-btn-left / --radius), а не крупнее. Рамка primary — метка «это профиль». */
.header-avatar-fixed--sm {
  width: var(--hdr-btn-left) !important; height: var(--hdr-btn-left) !important;
  border-radius: var(--radius) !important;
  /* Центр профиля СТРОГО на линии с левыми кнопками: считаем от того же env(safe),
     что и padding-top хедера (не от --safe-top, он уменьшен на 6px → профиль уезжал
     на 6px вверх). Центрируем --hdr-btn-left в высоте --header-height. */
  top: calc(env(safe-area-inset-top, 0px) + (var(--header-height) - var(--hdr-btn-left)) / 2) !important;
}
/* «Создать пост» — акцентная первая строка дропдауна профиля. */
.avatar-dd-item--create {
  display: flex; align-items: center; gap: 8px;
  color: var(--primary); font-weight: 700;
}
.avatar-dd-item--create svg { flex-shrink: 0; }

.header-page-title {
  font-size: 17px; font-weight: 700; color: var(--text);
  letter-spacing: -0.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: calc(100vw - 160px);
}
/* Mobile: заголовок фиксирован по центру экрана поверх хедера */
@media (max-width: 767px) {
  .header-page-title {
    position: fixed;
    left: 0; right: 0;
    top: env(safe-area-inset-top, 0px);
    height: var(--header-height);
    display: flex !important;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 0 60px; /* не залезать на кнопку «назад» и аватар */
    max-width: none;
    pointer-events: none;
    z-index: 501; /* выше хедера (500), ниже аватара (600) */
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
}

/* Когда в хедере действия страницы (Сохранить/Выйти) — заголовок влево, не под кнопки */
@media (max-width: 767px) {
  .header-page-title--actions {
    justify-content: flex-start; text-align: start;
    padding: 0 175px 0 60px;
  }
}

/* На совсем узких экранах (iPhone SE, Galaxy S8 = 360px) уменьшаем отступы заголовка */
@media (max-width: 360px) {
  .header-page-title { padding: 0 44px; font-size: 15px; }
  .header-back-btn { left: 6px !important; }
  /* …но НЕ в новом грид-хедере: там колонка ставит кнопку сама, а сдвиг на 6px
     уводил «Назад» с 1-й колонки таб-бара (замер 360px: 68 вместо 61). */
  .header-inner-page--nav:not(.header-inner-page--mapnav):not(.header-inner-page--clipsnav) > .header-back-btn { left: 0 !important; }
  /* Заголовок-с-действиями (Настройки): не перебивать общим padding —
     держать место под стрелку слева (52px) и кнопки Сохранить/Выйти справа (150px),
     иначе текст налезает на «назад» (баг на S8). */
  .header-page-title--actions { padding: 0 150px 0 52px; }
}

/* ─── Floating avatar + FAB (mobile only) ─────────────────────────────────── */
.header-avatar-fixed { display: none; }
.header-fab-fixed    { display: none; }
.header-msg-fixed    { display: none; }
@media (max-width: 767px) {
  /* FAB «Создать» снова внизу справа над навигацией (главное действие соцсети).
     Из хедера кнопка «Создать» убрана — там теперь ровно 5 иконок (закон §хедер). */

  .header-avatar-fixed {
    display: flex;
    position: fixed;
    top: calc(var(--safe-top) + 2px);
    right: 12px;
    z-index: 600;
    width: var(--hdr-btn-right); height: var(--hdr-btn-right);
    border-radius: var(--action-btn-radius);
    border: 2px solid rgba(127,161,122,0.5);
    background: var(--card);
    align-items: center; justify-content: center;
    color: var(--text); cursor: pointer;
    transition: width 0.28s ease, height 0.28s ease,
                top 0.28s ease, border-color 0.28s ease,
                box-shadow 0.28s ease;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
  }
  .header-avatar-fixed--lg {
    border-color: var(--primary);
    box-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(127,161,122,0.16);
  }
  .header-avatar-fixed .header-avatar-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* Невидимая расширенная зона тапа — 56×56 (чуть больше кнопки) */
  .header-avatar-fixed::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 56px; height: 56px; border-radius: 50%;
  }

  /* ─── Сообщения (между «+» и аватаром, слева от аватара) ─── */
  .header-msg-fixed {
    display: flex;
    position: fixed;
    top: calc(var(--safe-top) + 2px);
    /* слева от аватара: на ширину одной правой кнопки + gap */
    right: calc(12px + var(--hdr-btn-right) + var(--hdr-gap));
    z-index: 600;
    width: var(--hdr-btn-right); height: var(--hdr-btn-right);
    border-radius: var(--action-btn-radius);
    background: var(--card);
    color: var(--text);
    border: 2px solid rgba(127,161,122,0.5);
    align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .header-msg-fixed--lg {
    border-color: var(--primary);
    box-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(127,161,122,0.16);
  }

  /* ─── FAB "+ создать пост" (левее сообщений) ─── */
  .header-fab-fixed {
    display: flex;
    position: fixed;
    top: calc(var(--safe-top) + 2px);
    /* левее аватара и сообщений: на две правые кнопки + два gap */
    right: calc(12px + 2 * (var(--hdr-btn-right) + var(--hdr-gap)));
    z-index: 600;
    width: var(--hdr-btn-right); height: var(--hdr-btn-right);
    border-radius: var(--action-btn-radius);
    background: var(--card);
    color: var(--text);
    border: 2px solid rgba(127,161,122,0.5);
    align-items: center; justify-content: center;
    cursor: pointer;
    transition: width 0.28s ease, height 0.28s ease,
                top 0.28s ease, right 0.28s ease,
                border-color 0.28s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }
  .header-fab-fixed--lg {
    border-color: var(--primary);
    box-shadow: 0 2px 18px rgba(0,0,0,0.45), 0 0 0 3px rgba(127,161,122,0.16);
  }
  .header-fab-fixed:active { transform: scale(0.92); }

  /* СТАТИЧНЫЕ правые кнопки: всегда полностью видимы и кликабельны, НЕ растут и НЕ
     появляются при скролле. Лента и левые кнопки прокручиваются — эти три стоят. */
  .header-fab-fixed, .header-msg-fixed, .header-avatar-fixed {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
  /* Иконки внутри правых кнопок */
  .header-fab-fixed > svg, .header-msg-fixed > svg, .header-avatar-fixed > svg {
    width: 22px; height: 22px;
  }
}

/* Бейдж непрочитанных сообщений на аватаре */
.avatar-msg-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: #ff3b30; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  letter-spacing: 0; font-variant-numeric: tabular-nums;
}

/* ─── Avatar Dropdown ──────────────────────────────────────────────────────── */
.avatar-dd-overlay {
  position: fixed; inset: 0; z-index: 1999;
  background: transparent;
}
.avatar-dd { display: none; }
@media (max-width: 767px) {
  .avatar-dd {
    display: block;
    position: fixed;
    right: 12px;
    z-index: 2000;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    min-width: 190px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    animation: avatar-dd-in 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
    transform-origin: top right;
  }
}
@keyframes avatar-dd-in {
  from { opacity: 0; transform: scale(0.86) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.avatar-dd-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 16px;
  background: none; border: none;
  border-top: 1px solid var(--border-light);
  font-size: 15px; font-weight: 500; color: var(--text);
  text-align: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.avatar-dd-item:first-child { border-top: none; }
.avatar-dd-item:active { background: var(--primary-bg); }
.avatar-dd-badge {
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 9px;
  min-width: 18px; text-align: center;
  margin-inline-start: auto;
}
.avatar-dd-shortcut { font-size: 14px; padding: 11px 16px; }
.avatar-dd-header {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 14px 16px 13px;
  background: none; border: none;
  cursor: pointer; text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.avatar-dd-header:active { background: var(--primary-bg); }
.avatar-dd-header-ava {
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  object-fit: cover; flex-shrink: 0;
}
.avatar-dd-header-ava--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--btn-text);
  font-weight: 700; font-size: 19px; text-transform: uppercase;
}
.avatar-dd-header-info { min-width: 0; flex: 1; }
.avatar-dd-header-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.avatar-dd-header-uname {
  font-size: 13px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.avatar-dd-display {
  color: var(--primary);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.85;
}
.avatar-dd-logout {
  color: var(--danger);
  font-size: 13px;
}
.avatar-dd-divider {
  height: 1px; background: var(--border-light);
  margin: 2px 0;
}
.avatar-dd-langs {
  padding: 6px 10px 10px;
  display: flex; flex-wrap: wrap; gap: 5px;
  border-top: 1px solid var(--border-light);
}
.avatar-dd-lang-item {
  padding: 6px 11px; border-radius: 8px; font-size: 13px;
  background: var(--primary-bg);
  border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar-dd-lang-item.active {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--text); font-weight: 600;
}

/* ─── Avatar Menu Sheet (для DisplayEditor) ────────────────────────────────── */
/* ===== Шторка профиля (top-sheet) ===== */
.avatar-sheet-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.45);
  animation: fade-in 0.2s ease;
}
.avatar-sheet {
  position: fixed; top: 0; left: 0; right: 0; z-index: 801;
  max-height: 90vh; overflow-y: auto;
  background: var(--card);
  border-end-start-radius: var(--radius); border-end-end-radius: var(--radius);
  padding: max(env(safe-area-inset-top, 0px), 6px) 12px 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  animation: sheet-down 0.28s cubic-bezier(.22,1,.36,1);
  /* Недотянутый свайп вверх плавно возвращает лист на место (§9.2) */
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
@keyframes sheet-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* Ручка — подсказка «меня можно тянуть»: шторка закрывается свайпом ВВЕРХ,
   поэтому полоска стоит ВНИЗУ листа (у пальца и по направлению жеста), а не
   вверху под чёлкой. Отступ сверху крупнее — отделяет её от последнего пункта. */
.avatar-sheet-handle {
  display: block; width: 36px; height: 4px; margin: 10px auto 2px;
  border: none; border-radius: var(--radius-pill); background: var(--border); cursor: grab;
}
.avatar-sheet-profile {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; background: var(--bg-warm); border: 1px solid var(--border-light);
  border-radius: var(--radius); cursor: pointer;
  text-align: start; -webkit-tap-highlight-color: transparent;
}
.avatar-sheet-profile:active { background: var(--border-light); }
.avatar-sheet-ava { width: 42px; height: 42px; border-radius: var(--radius-pill); object-fit: cover; flex-shrink: 0; }
.avatar-sheet-ava--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--btn-text); font-weight: 700; font-size: 22px;
}
.avatar-sheet-pinfo { flex: 1; min-width: 0; }
.avatar-sheet-name { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-sheet-uname { font-size: 13px; color: var(--text-dim); }
.avatar-sheet-pchev { color: var(--text-dim); flex-shrink: 0; }
/* Две главные кнопки: Профиль / Настройки — крупно, с акцентом */
.avatar-sheet-actions { display: flex; gap: 8px; margin-top: 8px; }
.asa {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 8px; border: 1px solid var(--border-light); background: var(--primary-bg);
  color: var(--primary); border-radius: var(--radius); font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.asa:active { background: var(--border-light); }
.avatar-sheet-glabel {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-dim); padding: 9px 6px 5px;
}
.avatar-sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.asg {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; background: var(--bg-warm); border: none;
  border-radius: var(--radius); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.asg:active { background: var(--border-light); }
.asg-ic { color: var(--primary); display: flex; }
.asg-t { font-size: 11px; font-weight: 600; color: var(--text); text-align: center; line-height: 1.1; }
.avatar-sheet-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 6px; background: none; border: none; cursor: pointer;
  font: inherit; color: var(--text); text-align: start;
  -webkit-tap-highlight-color: transparent;
}
.avatar-sheet-row:active { background: var(--bg-warm); }
.avatar-sheet-row-ic { color: var(--primary); flex-shrink: 0; }
.avatar-sheet-row-t { flex: 1; font-size: 14px; font-weight: 500; }
.avatar-sheet-row-chev { color: var(--text-dim); opacity: 0.6; flex-shrink: 0; }
.avatar-sheet-row--admin .avatar-sheet-row-t { color: var(--primary); font-weight: 600; }
.avatar-sheet-row--logout .avatar-sheet-row-ic,
.avatar-sheet-row--logout .avatar-sheet-row-t { color: var(--danger); }
.avatar-sheet-div { height: 1px; background: var(--border-light); margin: 6px 0; }
.avatar-sheet-theme { margin: 0 0 4px; }

.avatar-menu-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in 0.18s ease;
}
.avatar-menu-sheet {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 701;
  background: #111a14;
  border-radius: 20px 20px 0 0;
  border-top: 1px solid rgba(127,161,122,0.18);
  padding: 0 0 max(env(safe-area-inset-bottom, 0px), 16px);
  max-height: 88dvh; overflow-y: auto;
  animation: slide-up-sheet 0.26s cubic-bezier(0.32,0.72,0,1);
}
@keyframes slide-up-sheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.avatar-menu-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(127,161,122,0.3);
  margin: 10px auto 6px;
}

/* User row в верхней части меню */
.avatar-menu-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--primary-bg);
}
.avatar-menu-avatar-wrap {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--primary); overflow: hidden;
}
.avatar-menu-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-menu-avatar-placeholder {
  width: 100%; height: 100%;
  background: rgba(127,161,122,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--primary);
}
.avatar-menu-name { font-size: 15px; font-weight: 700; color: var(--text); }
.avatar-menu-city { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.avatar-menu-login-btn {
  display: block; width: calc(100% - 40px); margin: 14px 20px 8px;
  padding: 12px; border-radius: var(--radius);
  background: var(--primary); color: var(--btn-text);
  font-size: 15px; font-weight: 700; text-align: center;
  border: none; cursor: pointer;
}

/* Основные пункты навигации */
.avatar-menu-nav {
  padding: 6px 12px;
  border-bottom: 1px solid var(--primary-bg);
}
.avatar-menu-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 13px 8px;
  background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 15px; font-weight: 500;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.avatar-menu-item:active { background: var(--primary-bg); }
.avatar-menu-item svg { color: var(--primary); flex-shrink: 0; }
.avatar-menu-item span:first-of-type { flex: 1; text-align: start; }
.avatar-menu-badge {
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 9px; min-width: 18px; text-align: center;
}

/* Секция быстрого доступа */
.avatar-menu-shortcuts-section { padding: 10px 16px 4px; }
.avatar-menu-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.avatar-menu-section-hdr > span { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.5px; text-transform: uppercase; }
.avatar-menu-edit-btn {
  font-size: 13px; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 2px 4px;
}
.shortcuts-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.shortcut-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px 8px;
  background: rgba(127,161,122,0.08);
  border: 1px solid rgba(127,161,122,0.14);
  border-radius: var(--radius); cursor: pointer;
  color: var(--text); font-size: 11px; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.shortcut-item:active { background: rgba(127,161,122,0.18); }
.shortcut-item svg { color: var(--primary); }

/* Язык в меню */
.avatar-menu-lang {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 16px 4px;
  border-top: 1px solid var(--primary-bg);
}
.avatar-lang-item {
  padding: 6px 10px; border-radius: 8px; font-size: 13px;
  background: rgba(127,161,122,0.08);
  border: 1px solid rgba(127,161,122,0.12);
  color: var(--text-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.avatar-lang-item.active {
  background: rgba(127,161,122,0.20); color: var(--text);
  border-color: var(--primary); font-weight: 600;
}

/* Кнопка закрыть в редакторе */
.avatar-menu-close-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-bg); border: none; cursor: pointer;
  color: var(--text-muted);
}

/* Редактор ярлыков */
.shortcuts-editor-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid rgba(127,161,122,0.12);
}
.shortcuts-editor-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 14px 12px;
}
.shortcut-editor-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px 8px; position: relative;
  background: rgba(127,161,122,0.06);
  border: 1.5px solid rgba(127,161,122,0.12);
  border-radius: 14px; cursor: pointer;
  color: var(--text-muted); font-size: 11px; font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.shortcut-editor-item.pinned {
  background: rgba(127,161,122,0.18);
  border-color: var(--primary); color: var(--text);
}
.shortcut-editor-item.pinned svg { color: var(--primary); }
.shortcut-editor-item svg { color: var(--text-muted); }
.shortcut-check {
  position: absolute; top: 4px; right: 6px;
  font-size: 10px; font-weight: 800; color: var(--primary);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* SW update banner */
.sw-update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
  display: flex; align-items: center; gap: 10px;
  /* Верхний отступ — с запасом на «шторку» айфона. Без него плашка залезала под
     часы и значки связи: текст шёл прямо по ним и не читался вообще. */
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: rgba(20, 30, 25, 0.86);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(127, 161, 122, 0.35);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  animation: sw-banner-in 0.3s ease;
}
@keyframes sw-banner-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.sw-update-text { flex: 1; font-size: 13.5px; font-weight: 600; color: rgba(232,226,212,0.92); line-height: 1.35; }
.sw-update-btn {
  background: var(--primary); border: none; border-radius: var(--radius-sm);
  padding: 7px 13px; font-size: 13px; font-weight: 700;
  color: #12170f; cursor: pointer; white-space: nowrap;
  transition: filter 0.15s;
}
.sw-update-btn:hover { filter: brightness(1.06); }
.sw-update-close {
  background: none; border: none; cursor: pointer;
  color: #9ca3af; padding: 4px;
  display: flex; align-items: center; justify-content: center;
}

/* Mobile inline search bar */
.mobile-inline-search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 8px;
  background: rgba(18, 26, 23, 0.97);
  animation: inline-search-in 0.18s ease;
}
@keyframes inline-search-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.inline-search-back {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); padding: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inline-search-input {
  flex: 1; background: var(--input-bg);
  border: var(--input-border-w) solid var(--input-border);
  border-radius: var(--input-radius); padding: 8px 12px;
  font-size: 16px; color: var(--input-text); outline: none;
  touch-action: manipulation;
}
.inline-search-input::placeholder { color: var(--input-placeholder); }
.inline-search-input:focus { border-color: var(--input-border-focus); background: var(--input-bg-focus); }
.inline-search-go {
  background: var(--primary); border: none; border-radius: 8px;
  width: 34px; height: 34px; cursor: pointer;
  color: white; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Поиск, раскрытый НА МЕСТЕ хедера (внутри .app-header-inner, а не 2-й строкой) */
.mobile-inline-search--inhdr {
  width: 100%; padding: 0; background: none; animation: none;
}
/* Пока поиск открыт — fixed-кнопки (+/чат/аватар) скрыты, убираем под них правый отступ */
.app-header--searching .app-header-inner { padding-inline-end: 12px !important; }

/* Mobile city dropdown attached to header */
.mobile-city-dropdown {
  position: absolute; top: calc(100% + 4px); left: 12px; right: 12px;
  z-index: 300; max-height: 300px; overflow-y: auto;
}

/* Compact bite forecast strip */
.bite-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin: 0 4px 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: background 0.15s;
}
.bite-strip:hover { background: var(--border); }
.bite-strip-emoji { font-size: 18px; }
.bite-strip-label { font-weight: 700; }
.bite-strip-score { font-size: 12px; color: var(--text-muted); }
.bite-strip-sep { color: var(--text-muted); }
.bite-strip-temp, .bite-strip-wind { color: var(--text-muted); }
.bite-strip-arrow { margin-inline-start: auto; color: var(--text-muted); font-size: 16px; }

/* Spots inline banner inside feed */
.spots-inline-banner {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: var(--card-padding); margin: 0;
}
.spots-inline-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 10px;
}
.spots-inline-more {
  margin-inline-start: auto; font-size: 12px; color: var(--primary);
  text-decoration: none; font-weight: 600;
}
.spots-inline-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.spots-inline-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; text-decoration: none;
  transition: background 0.15s;
}
.spots-inline-card:hover { background: var(--border); }
.spots-inline-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.spots-inline-meta {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--text-muted);
}
.spots-inline-sep { opacity: 0.5; }
.spots-inline-fish { color: var(--text-muted); }

/* MorePage — full-width list */
/* §1: боковые 12px уже даёт .app-main — свои добавлять НЕЛЬЗЯ,
   иначе карточки уходят на 24px и не совпадают с кнопками шапки. */
.more-page { padding: 8px 0 100px; }
/* Приоритетная карточка вверху «Сервисов» (напр. набор тестировщиков) */
.more-featured {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; margin-bottom: 16px;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.more-featured:active { background: rgba(127,161,122,0.22); }
.more-featured-icon {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--primary); color: var(--btn-text);
  display: flex; align-items: center; justify-content: center;
}
.more-featured-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-featured-title { font-size: 15px; font-weight: 700; color: var(--text); }
.more-featured-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.3; }
.more-featured-arrow { color: var(--primary); flex-shrink: 0; }
.more-section { margin-bottom: 20px; }
.more-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0 4px; margin-bottom: 6px;
}
.more-section-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.more-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: var(--card-padding) 10px; text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.more-row:last-child { border-bottom: none; }
.more-row:active { background: rgba(127,161,122,0.07); }
.more-row-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--primary-light);
  border: 1px solid rgba(127,161,122,0.20);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); flex-shrink: 0; margin-top: 1px;
}
.more-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.more-row-title { font-size: 14px; font-weight: 600; color: var(--text); }
.more-row-desc  { font-size: 12px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more-row-arrow { color: var(--text-muted); flex-shrink: 0; }
.more-row-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--btn-text); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.more-empty {
  text-align: center; color: var(--text-muted); font-size: 14px;
  padding: 32px 16px;
}

/* ================================================================
   LOCATION
   ================================================================ */
.location-selector {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 24px;
  background: var(--card); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--primary);
  cursor: pointer; transition: all var(--transition);
  margin-top: 12px; margin-bottom: 10px;
}
.location-selector:hover { box-shadow: var(--shadow); border-color: var(--primary); }
.location-selector svg { flex-shrink: 0; }

.location-picker {
  background: var(--card); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border-light);
  animation: slideDown 0.2s ease-out;
  max-height: 400px; overflow-y: auto;
}
.location-picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.location-search { margin-bottom: 10px; padding: 10px 14px; font-size: 16px; border-radius: var(--radius-sm); background: var(--bg); touch-action: manipulation; }
.location-picker-header h3 { font-size: 16px; font-weight: 700; }
.location-picker h4 { font-size: 14px; font-weight: 600; margin: 12px 0 8px; color: var(--text-dim); }
.location-picker-regions, .location-picker-cities { display: flex; flex-wrap: wrap; gap: 6px; }
.location-chip {
  padding: 6px 14px; border-radius: var(--chip-radius);
  background: var(--chip-bg); border: 1px solid var(--chip-border);
  font-size: 12px; font-weight: 600; color: var(--chip-text);
  cursor: pointer; transition: all var(--transition); font-family: inherit;
}
.location-chip:hover { border-color: var(--btn-bg); background: var(--primary-light); }
.location-chip.active { background: var(--chip-bg-active); color: var(--chip-text-active); border-color: var(--chip-bg-active); }

/* ================================================================
   BITE BANNER — Dark Forest Gradient
   ================================================================ */
.bite-banner {
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary) 70%, var(--primary-dark) 100%);
  color: white; border-radius: var(--radius); padding: 18px 20px;
  margin-bottom: 16px; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 6px 24px rgba(127,161,122,0.35);
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.bite-banner::after {
  content: ''; position: absolute; top: -50%; right: -15%;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.bite-banner::before {
  content: ''; position: absolute; bottom: -30%; left: -10%;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.bite-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(127,161,122,0.45); }
.bite-banner-icon { font-size: 38px; z-index: 1; }
.bite-banner-info { flex: 1; z-index: 1; }
.bite-banner-label { font-size: 11px; opacity: 0.7; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.bite-banner-value { font-size: 22px; font-weight: 800; margin-top: 2px; }
.bite-banner-score { font-size: 12px; opacity: 0.65; margin-top: 2px; }
.bite-banner-temp { text-align: end; z-index: 1; }
.bite-banner-temp .temp { font-size: 28px; font-weight: 700; }
.bite-banner-temp .conditions { font-size: 11px; opacity: 0.65; margin-top: 2px; }

/* ================================================================
   FEED — Quick Stats
   ================================================================ */
.feed-quick-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.quick-stat {
  background: var(--card); border-radius: var(--radius-sm);
  padding: 16px 10px; text-align: center;
  box-shadow: var(--shadow-xs); transition: all var(--transition);
  color: var(--text); border: 1px solid var(--border-light);
}
.quick-stat:hover { box-shadow: var(--shadow); border-color: var(--primary-light); }
.quick-stat-num { display: block; font-size: 24px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.quick-stat-label { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; font-weight: 600; }

/* ===== Top Spots Carousel ===== */
.top-spots-section { margin-bottom: 20px; }
.top-spots-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.top-spots-carousel {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px; scrollbar-width: none;
}
.top-spots-carousel::-webkit-scrollbar { display: none; }
.top-spot-card {
  flex: 0 0 auto; min-width: 200px; max-width: 240px;
  background: var(--card); border-radius: var(--radius-sm);
  padding: var(--card-padding); box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-light); scroll-snap-align: start;
  transition: all var(--transition); color: var(--text); text-decoration: none;
  display: flex; flex-direction: column; gap: 6px;
}
.top-spot-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--primary-light);
  transform: translateY(-2px);
}
.top-spot-name { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-spot-rating { display: flex; align-items: center; gap: 2px; }
.top-spot-rating .star-filled { color: #c4943a; fill: #c4943a; }
.top-spot-rating .star-empty { color: var(--border); }
.top-spot-rating-num { font-size: 13px; font-weight: 600; margin-inline-start: 4px; color: var(--text-muted); }
.top-spot-reviews { font-size: 11px; color: var(--text-muted); margin-inline-start: 2px; }
.top-spot-species { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--text-muted); }
.top-spot-species .species-tag {
  font-size: 11px; background: var(--bg);
  padding: 2px 8px; border-radius: var(--radius-sm); color: var(--text-muted); white-space: nowrap;
}

/* ===== Feed Tabs — Underline Style ===== */
/* Old feed-tabs — hidden only in feed context (replaced by .feed-nav) */
.feed-tabs { display: none; }
.feed-tab { display: none; }
.feed-page .feed-sort { display: none; }
.feed-page .sort-chip { display: none; }

/* .sort-chip — pill filter for non-feed pages (notifications, records, knowledge) */
.sort-chip {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 5px 13px; border-radius: var(--chip-radius);
  font-size: 13px; font-weight: 500; font-family: inherit;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg); color: var(--chip-text);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.sort-chip:hover { background: var(--bg-warm); color: var(--text); }
.sort-chip.active {
  background: var(--chip-bg-active);
  color: var(--chip-text-active); border-color: var(--chip-bg-active);
  font-weight: 600;
}
/* feed-sort container for non-feed pages */
.feed-sort {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 0 0 12px;
}

/* ===== Unified Feed Nav ===== */
/* ===== Compact feed filter bar (replaces old feed-nav) ===== */
.feed-filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 6px;
  gap: 8px;
  flex-shrink: 0;
}
.feed-filter-left {
  display: flex; align-items: center; gap: 6px;
}
.feed-filter-dropdown-wrap { position: relative; }
.feed-filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  border-radius: 15px;
  background: var(--primary-bg);
  border: 1px solid rgba(127,161,122,0.18);
  color: var(--text-muted); font-size: 12.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.feed-filter-chip:active { background: rgba(127,161,122,0.18); }
.feed-filter-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  background: #111a14; border: 1px solid rgba(127,161,122,0.18);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  min-width: 140px;
}
.feed-filter-menu-item {
  display: block; width: 100%;
  padding: 10px 14px; text-align: start;
  font-size: 13px; font-weight: 400; font-family: inherit;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s;
}
.feed-filter-menu-item:hover { background: var(--border-light); }
.feed-filter-menu-item.active { color: var(--primary); font-weight: 600; }
.feed-notif-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: rgba(150,165,158,0.55);
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.feed-notif-btn.active { color: var(--btn-text); background: var(--primary); }
.feed-notif-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 14px; height: 14px;
  background: var(--danger); color: #fff;
  font-size: 8.5px; font-weight: 700;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2.5px; line-height: 1;
  border: 1.5px solid var(--bg);
}

/* ===== Mobile sticky feed nav ===== */
@media (max-width: 767px) {
  /* overflow-x: clip does NOT create a scroll container, so sticky works */
  .page.feed-page {
    overflow-x: clip;
    /* Базовый зазор 8px между низом кнопок хедера и первой строкой плиток —
       такой же, как gap между строками плиток ниже. */
    padding-top: 8px;
  }
  .feed-filter-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bg);
  }
  /* gap после sticky nav → обеспечивает flex gap feed-page, padding не нужен */
  /* spawn-ban-banner scrolls away before nav sticks */
  .spawn-ban-banner { position: relative; z-index: 0; }
}

/* UI-1d-part1: Create Post FAB */
.feed-fab { display: none; }
@media (max-width: 767px) {
  .feed-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: calc(var(--tab-height) + env(safe-area-inset-bottom) + 16px);
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--bg);
    box-shadow: 0 4px 16px rgba(127, 161, 122, 0.45);
    z-index: 89;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .feed-fab:active {
    transform: scale(0.93);
    box-shadow: 0 2px 8px rgba(127, 161, 122, 0.3);
  }
}

/* ===== Feed Toolbar (legacy, keep for compat) ===== */
.feed-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 auto 14px; gap: 8px;
  max-width: 600px; width: 100%;
}
@media (min-width: 768px) {
  .feed-toolbar {
    position: sticky;
    top: 64px;
    z-index: 101;
    background: var(--bg);
    padding: 0 0 10px;
    margin: 0 0 8px;
    width: 100%;
    max-width: none;
  }
  /* All feed-stream items fill the column */
  .posts-list > *,
  .post-card,
  .recommend-card,
  .ad-banner,
  .empty-state,
  .loading {
    max-width: none !important;
    width: 100%;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }
}
.feed-toolbar-tabs { display: flex; gap: 4px; }
.feed-toolbar-tab {
  padding: 7px 16px; border-radius: var(--tab-radius);
  font-size: 13px; font-weight: 600; border: none; cursor: pointer;
  background: var(--tab-bg); color: var(--tab-text);
  transition: all 0.15s; font-family: inherit;
}
.feed-toolbar-tab:hover { background: var(--border-light); color: var(--text); }
.feed-toolbar-tab.active { background: var(--tab-bg-active); color: var(--tab-text-active); }
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--danger); color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700; margin-inline-start: 5px; line-height: 1;
  transition: background 0.2s;
}
.feed-toolbar-tab.active .tab-badge { background: rgba(255,255,255,0.3); }

/* Inline notifications feed */
.notif-feed { display: flex; flex-direction: column; gap: 4px; }
.notif-feed-topbar { display: flex; align-items: center; gap: 4px; padding: 2px 0 8px; }
@media (max-width: 767px) {
  /* Строка «‹ Оповещения» липнет ПОД шапкой, а не уезжает под неё. Шапка главной
     прозрачная, и на iPhone проскользнувший под неё текст оставался читаемым
     поверх иконок — затемнение под шапкой в приложении это не закрывало.
     Непрозрачный фон на всю ширину прячет уезжающий под строку список.
     z-index 499 = как у затемнения, но строка позже в разметке — рисуется поверх
     него и не размывается; ниже самой шапки (500). На ПК своя шапка другой высоты
     и этой проблемы нет — правило только для телефона. */
  .notif-feed-topbar {
    position: sticky; top: calc(var(--safe-top) + var(--header-height));
    z-index: 499;
    background: var(--bg);
    margin-inline: -12px; padding-inline: 12px;
  }
  /* Тот же сплошной фон тянется вверх до края экрана — под прозрачной шапкой. Иначе
     в её полосе между иконками и строкой виден краешек уехавшей карточки. Иконки
     шапки остаются поверх (у шапки z-index 500). */
  .notif-feed-topbar::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
    height: calc(var(--safe-top) + var(--header-height) + 8px);
    background: var(--bg);
    pointer-events: none;
  }
  /* У .app-main стоит overflow-y:auto — он становится контейнером прокрутки, хотя
     прокручивается окно, и липкость внутри него не срабатывает. Снимаем обрезку
     только на экране оповещений: глобальная правка оживила бы липкие элементы
     других страниц с чужими отступами. */
  .app-main:has(.notif-feed-topbar) { overflow: visible; }
}
.notif-feed-back {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  color: var(--text); border-radius: var(--radius-sm);
  text-decoration: none;
}
.notif-feed-back:hover { background: var(--bg-warm); }
.notif-feed-heading { font-size: 17px; font-weight: 700; color: var(--text); }
.notif-feed-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 4px 10px; border-bottom: 1px solid var(--border-light); margin-bottom: 4px;
}
.notif-feed-count { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.notif-feed-mark-all {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--primary); background: none; border: none;
  cursor: pointer; padding: 4px 8px; border-radius: var(--radius-xs);
  font-family: inherit; transition: background 0.15s;
}
.notif-feed-mark-all:hover { background: var(--primary-light); }
.notif-feed-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; border: 1px solid transparent;
  transition: all var(--transition);
}
.notif-feed-item:hover { background: var(--bg-warm); }
.notif-feed-item.unread { background: var(--primary-light); border-color: rgba(127,161,122,0.12); }
.notif-feed-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-warm); color: var(--primary);
}
.notif-feed-body { flex: 1; min-width: 0; }
/* Строка [заголовок | время] — как .notif-top / .chat-conv-top, экономит строку */
.notif-feed-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.notif-feed-title {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-feed-text { font-size: 12px; color: var(--text-dim); margin-top: 1px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-feed-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

/* ── Шторка оповещений (components/NotificationsSheet) ──────────────────────
   Каркас — стандартная шторка §9.2 с неподвижной шапкой (.repost-sheet--split):
   строка действий стоит на месте, едет только список. */
.notif-sheet { min-height: 50dvh; }
.notif-sheet-bar { display: flex; align-items: center; gap: 6px; margin: 2px 2px 10px; }
.notif-sheet-count {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-sheet-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.notif-sheet-btn:active { background: var(--bg-warm); }
/* 360px: «23 новых» не влезало и обрезалось. Настройки на узком экране — одна
   шестерёнка (подпись остаётся для экранного диктора), остальным телефонам — с текстом. */
@media (max-width: 380px) {
  .notif-sheet-btn { flex-shrink: 0; padding: 6px 8px; }
  .notif-sheet-btn--settings { min-width: 34px; justify-content: center; }
  .notif-sheet-btn--settings .notif-sheet-btn-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}
.notif-sheet-list {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* докрут не утекает в лист и в страницу */
}
.notif-sheet .notif-feed-item {
  width: 100%; text-align: start; background: transparent;
  font: inherit; cursor: pointer;
}
.notif-sheet .notif-feed-item.unread { background: var(--primary-light); }
/* Оповещение без ссылки по тапу раскрывает текст целиком прямо в списке */
.notif-sheet .notif-feed-item.is-expanded .notif-feed-title,
.notif-sheet .notif-feed-item.is-expanded .notif-feed-text { white-space: normal; overflow: visible; }

/* Feed Filter dropdown */
.feed-filter-wrap { position: relative; }
.feed-filter-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-xs);
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.feed-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.feed-filter-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px;
  box-shadow: var(--shadow-md); z-index: 300; min-width: 180px;
  animation: hover-card-in 0.12s ease-out;
}
.feed-filter-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 8px 8px; border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
}
.feed-filter-option {
  display: block; width: 100%; text-align: start;
  padding: 8px 10px; border: none; background: none;
  border-radius: var(--radius-xs); font-size: 13px;
  font-weight: 500; color: var(--text-dim); cursor: pointer;
  font-family: inherit; transition: all 0.1s;
}
.feed-filter-option:hover { background: var(--bg); }
.feed-filter-option.active { color: var(--btn-text); font-weight: 700; background: var(--primary); }

/* Feed promo */
.feed-promo { margin-bottom: 16px; }
.promo-card {
  display: block; padding: 20px; border-radius: var(--radius);
  color: white; text-decoration: none;
  box-shadow: 0 4px 16px rgba(127,161,122,0.3);
}
.promo-title { display: block; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.promo-desc { display: block; font-size: 13px; opacity: 0.85; }

/* ================================================================
   RECOMMEND CARDS
   ================================================================ */
.recommend-card {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  border-inline-start: 3px solid var(--primary);
  background: var(--card);
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  margin: 0;
}
.recommend-card:hover { background: var(--bg-warm); border-color: var(--border); }
.recommend-card-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
}
.recommend-card-body { flex: 1; min-width: 0; }
.recommend-card-title {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.recommend-card-text {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-top: 2px; line-height: 1.35;
}
.recommend-card-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.recommend-card-action {
  display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0;
}
.recommend-card-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; border: 2px solid var(--border-light);
}
.recommend-card-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-warm); font-weight: 700; font-size: 15px; color: var(--text-muted);
}
.recommend-card-follow-btn {
  background: var(--btn-bg); color: var(--btn-text);
  border: none; border-radius: var(--btn-radius-sm);
  padding: 4px 10px; font-size: 11px; font-weight: var(--btn-weight);
  cursor: pointer; white-space: nowrap; transition: background 0.15s; font-family: inherit;
}
.recommend-card-follow-btn:hover { background: var(--btn-bg-hover); }
.recommend-card-arrow {
  font-size: 20px; color: var(--text-muted); flex-shrink: 0; line-height: 1;
}

/* Tip popup overlay */
.tip-popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.tip-popup {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.tip-popup-header {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px; border-bottom: 2px solid var(--border-light);
}
.tip-popup-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.tip-popup-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 3px;
}
.tip-popup-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.35; }
.tip-popup-close {
  margin-inline-start: auto; flex-shrink: 0; background: none; border: none;
  color: var(--text-muted); cursor: pointer; padding: 2px;
}
.tip-popup-close:hover { color: var(--text); }
.tip-popup-body { padding: 16px 18px; }
.tip-popup-body p { font-size: 15px; color: var(--text-dim); line-height: 1.6; margin: 0; }
.tip-popup-detail { margin-top: 10px !important; font-size: 13px !important; color: var(--text-muted) !important; }
/* ================================================================
   KNOWLEDGE BASE PAGE
   ================================================================ */
.knowledge-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 9px 13px; margin-bottom: 10px;
}
.knowledge-search input {
  border: none; background: none; outline: none; font-size: 14px;
  color: var(--text); flex: 1; font-family: inherit;
}
.knowledge-search svg { color: var(--text-muted); flex-shrink: 0; }
.knowledge-filters { margin-bottom: 8px; }
.knowledge-count { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.knowledge-section { margin-bottom: 20px; }
.knowledge-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 8px; padding-inline-start: 2px;
}
.knowledge-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-inline-start: 3px solid var(--primary); border-radius: var(--radius-sm);
  margin-bottom: 6px; cursor: pointer; transition: all 0.15s;
}
.knowledge-card:hover { background: var(--bg-warm); }
.knowledge-card.expanded { border-color: var(--border); }
.knowledge-card-header {
  display: flex; align-items: flex-start; gap: 10px; padding: var(--card-padding);
}
.knowledge-card-icon {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.knowledge-card-text {
  flex: 1; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4;
}
.knowledge-card-chevron {
  font-size: 10px; color: var(--text-muted); flex-shrink: 0; padding-top: 2px;
}
.knowledge-card-detail {
  padding: 0 14px 13px 54px;
  font-size: 13px; color: var(--text-dim); line-height: 1.6;
  border-top: 1px solid var(--border-light); padding-top: 10px;
  margin-top: 0;
}

.tip-popup-catalog-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 14px;
  background: var(--btn-bg); color: var(--btn-text);
  border-radius: var(--btn-radius-sm); font-size: 13px; font-weight: var(--btn-weight);
  text-decoration: none; transition: background 0.15s;
}
.tip-popup-catalog-btn:hover { background: var(--btn-bg-hover); }

/* ================================================================
   POST CARDS
   ================================================================ */
.posts-list { display: flex; flex-direction: column; gap: 8px; }
/* Группа: пост + опциональные инлайн-блоки после него — единый ритм */
.feed-post-group { display: flex; flex-direction: column; gap: 8px; }

.post-card {
  /* Поля карточки поста шире общего токена (8px было тесно рядом с ВК/Facebook,
     у них 12-16). Переопределяем локально, чтобы не двигать остальные разделы. */
  --card-padding: 12px;
  background: var(--card); border-radius: var(--radius-lg);
  padding: 6px 0 var(--card-padding); box-shadow: var(--shadow);
  border: none;
  transition: all var(--transition); overflow: hidden;
  position: relative;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
@media (min-width: 768px) {
  .post-card {
    max-width: none; margin: 0; width: 100%;
    border-radius: var(--radius-lg);
  }
}
/* При открытом меню/шаринге снимаем и overflow, и content-visibility containment
   (content-visibility:auto => contain:paint, который обрезает дропдаун у коротких постов) */
.post-card.share-open,
.post-card.menu-open {
  overflow: visible;
  content-visibility: visible;
  contain: none;
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover { box-shadow: var(--shadow-md); }
}
/* UI-1a: PostCard Mobile Hierarchy */
@media (max-width: 767px) {
  .post-card { padding: 6px 0 var(--card-padding); }
  /* Edge-to-edge лента: посты во всю ширину экрана, без боковой пустоты.
     Боковой отступ .app-main (12px) убираем только на ленте и возвращаем всему,
     КРОМЕ самих постов; карточка поста — full-bleed без рамки/скругления,
     а разделителем между постами служит зазор (фон просвечивает). */
  .app-main:has(.feed-page) { padding-inline: 0; }
  /* Аквариум (игра): свой боковой отступ 8px даёт .aq-wrap — снимаем 12px у .app-main,
     иначе 12+8=20px по бокам (владелец просил ровно 8px до края экрана). */
  .app-main:has(.aq-wrap) { padding-inline: 0; }
  /* Всё, кроме контейнера постов (.posts-list), получает боковой отступ 12px обратно */
  .feed-page > *:not(.posts-list) { padding-inline: 12px; }
  /* Карточка поста — full-bleed: без рамки/скругления/тени, разделитель = зазор */
  .feed-page .posts-list .post-card {
    border-radius: 0; border: none; box-shadow: none;
  }
  /* Текст/шапка/действия — с комфортным боковым отступом 12px (фото остаётся edge-to-edge) */
  .feed-page .posts-list .post-header,
  .feed-page .posts-list .post-text-wrap,
  .feed-page .posts-list .post-actions,
  .feed-page .posts-list .post-pinned-label { padding-inline: 12px; }
  .feed-page .posts-list .post-catch-location-row { margin-inline: 12px; }
  /* Author row: 36px avatar, name truncation */
  .post-author .avatar-sm,
  .post-author .avatar-placeholder { width: 36px; height: 36px; flex-shrink: 0; }
  .post-author { flex: 1; min-width: 0; }
  .post-author-info { flex-wrap: nowrap; min-width: 0; }
  .author-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .post-time-dot, .post-time { flex-shrink: 0; }
  /* Single photo: потолок высоты ~7/6 ширины, но контейнер ПРИЛЕГАЕТ к фото —
     ландшафтные снимки не оставляют пустоту снизу (фикс: раньше был фикс. aspect-ratio 7/6,
     а правило height:100% перебивалось базовым height:auto ниже по файлу) */
  .post-mosaic-single img,
  .post-mosaic-single video {
    width: 100%; height: auto; max-height: 86vw;
    object-fit: cover; object-position: center 15%;
  }
  /* Text в ленте — обрезка через JS (MAX_BODY), CSS-clamp убран чтобы кнопка "Читать далее" всегда была видна */
  .post-card--feed .post-text { margin-top: 4px; }
  /* Chips: единый вид + строго левое выравнивание (фикс центрирования локации в PWA) */
  .post-catch-location-row,
  .post-gallery-meta { justify-content: flex-start !important; text-align: start; gap: 6px; }
  .post-catch-location-row { margin: var(--card-padding) var(--card-padding) 0; }
  /* Action bar: тап-таргет шириной, чуть воздуха по высоте */
  .post-actions { min-height: 0; align-items: center; padding-top: 8px; padding-bottom: 4px; margin-top: 4px; gap: 2px; }
  .action-btn { min-height: 0; min-width: 36px; justify-content: center; padding: 4px 6px; gap: 5px; }
  .bookmark-btn { min-width: 40px; }
  .post-follow-btn-action { height: 34px; padding: 0 10px; }
}

/* Post Header */
.post-pinned-label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--card-padding) 0;
  margin-bottom: 2px;
  font-size: 12px; font-weight: 600;
  color: var(--primary);
}
.post-header { margin-bottom: 4px; display: flex; align-items: center; padding: 0 var(--card-padding); }
.post-header--modal { gap: 8px; }
.post-modal-back-btn { margin-inline-end: 2px; flex-shrink: 0; }
.post-seq-id-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.55);
  border-radius: 7px;
  padding: 2px 7px;
  pointer-events: none;
  letter-spacing: 0.3px;
}
.post-author {
  display: flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  /* Длинное имя не должно выдавливать «Подписаться» и «…» за край карточки */
  flex: 1 1 auto; min-width: 0;
}
.post-follow-btn-action--header, .post-menu-wrapper { flex-shrink: 0; }
.post-author .avatar-sm { width: 34px; height: 34px; }
.post-author .avatar-placeholder { width: 34px; height: 34px; font-size: 13px; }
.post-author-info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; }
.post-author-line1 { display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
/* Кнопка «Подписаться» переехала в шапку и сузила строку — перенос по словам
   делал шапку трёхэтажной. Держим одну строку, лишнее срезаем многоточием. */
.post-author-line2 { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; overflow: hidden; width: 100%; }
.post-author-line2 > * { flex-shrink: 0; }
.post-author-line2 .post-rank-inline { flex-shrink: 1; min-width: 0; display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; overflow: hidden; }
/* Ужимаем только название лиги — цифра RTP и время всегда видны целиком */
.post-rank-inline .post-rank-league { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.post-rank-inline b { flex-shrink: 0; }
.author-name { font-weight: 700; font-size: 14px; }
.post-time-dot { color: var(--text-muted); margin: 0 3px; font-size: 11px; }
.post-time { font-size: 11.5px; color: var(--text-muted); }
/* Бейдж отложенной публикации (виден автору в его профиле) */
.post-scheduled-badge {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
  padding: 1px 8px; border-radius: 999px;
}
.post-author-line2 .author-rank-chip + .post-time::before,
.post-author-line2 .post-rank-inline + .post-time::before,
.post-author-line2 .author-meta-stat + .post-time::before { content: '· '; }
/* Ранг рыбака в ленте — спокойный inline (без «колхозной» плашки): лига приглушённая, RTP — акцент */
.post-rank-inline { font-size: 11.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.post-rank-inline b { color: var(--primary); font-weight: 800; }
/* Очки рейтинга: звезда + число. «RTP» рыбаку ни о чём не говорит.
   Строго inline, не flex: у inline-flex базовая линия берётся с первого ребёнка —
   со звезды, у которой её нет, — и число подпрыгивало на 2.4px над «1-й разряд».
   Так число стоит на общей базовой линии с текстом, а звёздочку чуть опускаем. */
.post-rank-score { display: inline; white-space: nowrap; }
.post-rank-score svg { display: inline-block; vertical-align: -1px; margin-inline-start: 3px; }

.post-rank-inline:hover b { text-decoration: underline; }
.post-test-badge {
  display: inline-flex; align-items: center; line-height: 1.5;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #b45309; background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.4); border-radius: var(--radius-xs);
  padding: 1px 6px; text-transform: uppercase;
}
.verified-badge { display: inline-flex; align-items: center; color: #1d9bf0; vertical-align: middle; margin-inline-start: 3px; flex-shrink: 0; }


/* ---- Ранг автора: кольцо вокруг аватара по тиру ---- */
.rank-ring .avatar-sm,
.rank-ring .avatar-placeholder { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px rgba(148,163,184,0.30); }
.rank-ring--1 .avatar-sm, .rank-ring--1 .avatar-placeholder { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #6aa84f; }
.rank-ring--2 .avatar-sm, .rank-ring--2 .avatar-placeholder { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #3b9ed1; }
.rank-ring--3 .avatar-sm, .rank-ring--3 .avatar-placeholder { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #9b59d0; }
.rank-ring--4 .avatar-sm, .rank-ring--4 .avatar-placeholder { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #f0b429; }

/* ---- Бейдж уровня в углу аватара ---- */
.author-level-badge { display: none; }
/* В карточке поста online-dot уводим вверх, чтобы не перекрывал бейдж уровня */
.post-author .avatar-online-wrap .online-dot { top: -1px; right: -1px; bottom: auto; }

/* ---- Чип ранга во 2-й строке ---- */
.author-rank-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px;
  line-height: 1.5; color: #94a3b8; background: rgba(148,163,184,0.12);
}
.author-rank-chip--1 { color: #6aa84f; background: rgba(106,168,79,0.14); }
.author-rank-chip--2 { color: #3b9ed1; background: rgba(59,158,209,0.14); }
.author-rank-chip--3 { color: #9b59d0; background: rgba(155,89,208,0.15); }
.author-rank-chip--4 { color: #d99a00; background: rgba(240,180,41,0.16); }
.author-meta-stat {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--text-muted); font-weight: 600;
}
.author-meta-stat svg { flex-shrink: 0; opacity: 0.85; }
.author-clev-badge {
  font-size: 13px; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(127,161,122,0.5));
}

/* «У истоков» — плашка тестировщика-основателя (кликабельная, с поп-апом) */
/* Плашка «У истоков» была текстовой пилюлей на 118px и съедала строку — имя
   автора обрезалось до трёх букв. Теперь это такой же значок, как остальные;
   расшифровка открывается по тапу, как у всех наград. */
.author-badge-btn--founder {
  border: 1px solid var(--primary); border-radius: var(--radius-pill);
  background: transparent;
}
.author-founder-emoji { font-size: 12px; }

/* Кликабельная обёртка статусного бейджа (открывает поп-ап с описанием) */
/* Все значки автора — одна семья: круг 18×18, значок 14, общий шаг.
   Раньше высоты гуляли 22/18/13 и строка выглядела разнобоем. */
.author-badge-btn {
  background: none; border: none; padding: 0; margin: 0;
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.author-badge-btn svg { width: 14px; height: 14px; display: block; }
.author-badge-btn .author-badge,
.author-badge-btn .author-founder-emoji { font-size: 12px; line-height: 1; }
/* Имя уступает место значкам последним и обрезается многоточием, а не жмётся. */
.post-author-line1 .author-name {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Плашки в шапке поста (У истоков / ранг / ДЕМО) жили каждая со своей высотой,
   радиусом и кеглем — строка выглядела разнобоем. Приводим к одному ритму. */
.post-author-line1 .author-founder-badge,
.post-author-line1 .post-test-badge,
.post-author-line2 .author-rank-chip {
  height: 18px; padding: 0 8px; line-height: 1;
  font-size: 11px; border-radius: var(--radius-pill);
}

.founder-modal-ov {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.founder-modal {
  position: relative; width: 100%; max-width: 340px; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 20px 22px;
}
.founder-modal-x {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; font-size: 22px; line-height: 1;
  color: var(--text-dim); cursor: pointer;
}
.founder-modal-emoji { font-size: 34px; line-height: 1; margin-bottom: 6px; }
.founder-modal-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.founder-modal-text { font-size: 14px; line-height: 1.5; color: var(--text-dim); margin: 0 0 12px; }
.founder-modal-thanks { font-size: 14px; font-weight: 700; color: var(--primary); }

/* Главный бейдж достижения рядом с именем (комменты + лента) */
.author-badge {
  font-size: 13px; line-height: 1; flex-shrink: 0; margin-inline-start: 3px;
  cursor: help; vertical-align: middle;
}

/* Post Text */
.post-text-wrap { display: flex; flex-direction: column; padding: 0 var(--card-padding); }
.post-title-line {
  font-size: 14px; font-weight: 700; color: var(--text);
  padding: 6px 12px 0; letter-spacing: 0.02em; line-height: 1.4;
}
.post-read-more {
  display: inline; padding: 0; margin-inline-start: 4px;
  font-size: 13px; color: var(--primary); font-weight: 600;
  white-space: nowrap;
}
.post-read-more--block {
  display: block;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
}
.post-text--clickable { cursor: pointer; }
.post-text {
  font-size: 15px; line-height: 1.5; margin: var(--card-padding) 0 0;
  white-space: pre-wrap; color: var(--text);
  word-break: break-word; overflow-wrap: anywhere;
}
/* Mobile line-clamp wrapper */
.post-text-clamped-wrap { position: relative; }
.post-text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal; /* pre-wrap сломает line-clamp */
}
/* "Показать ещё" — оверлей в конце третьей строки */
.post-read-more-overlay {
  position: absolute;
  bottom: 0; right: 0;
  height: 1.6em; /* = line-height текста */
  display: flex; align-items: center;
  padding-inline-start: 48px;
  border: none; cursor: pointer;
  font-size: 15px; font-weight: 400;
  color: var(--text-muted);
  background: linear-gradient(to right, transparent, var(--card) 38%);
}

/* ============================================================
   ЕДИНАЯ СИСТЕМА БЕЙДЖЕЙ ПОСТА (улов / локация / рекорд / PB / крупный)
   Один «стеклянный» чип во всех контекстах: одинаковые форма, размер, шрифт,
   вес, радиус, паддинг. Различие — только цвет текста/иконки и эмодзи.
   ============================================================ */
.post-catch-location-row {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 5px; flex-wrap: nowrap; margin: 7px var(--card-padding) 3px; text-align: start;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.post-catch-location-row::-webkit-scrollbar { display: none; }
/* Базовый чип — все типы одинаковый размер/высота (кнопки сброшены до span) */
.post-catch-badge,
.post-location-badge,
.post-record-badge,
.post-pb-badge,
.post-catch-big {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 500; line-height: 1;
  height: 22px; padding: 0 7px; border-radius: var(--radius-xs); white-space: nowrap;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  /* Сброс браузерных стилей кнопки чтобы высота = span */
  appearance: none; -webkit-appearance: none;
  font-family: inherit; cursor: default; box-sizing: border-box;
  vertical-align: middle;
}
/* Все дочерние элементы бейджа — flex-item с выравниванием по центру */
.post-catch-badge > *,
.post-location-badge > *,
.post-record-badge > *,
.post-pb-badge > *,
.post-catch-big > * {
  display: inline-flex; align-items: center; line-height: 1;
}
.post-catch-badge svg,
.post-location-badge svg { flex-shrink: 0; display: block; }
/* Акценты — приглушённые, единый уровень яркости */
.post-catch-badge { color: rgba(255,255,255,0.55); }
.post-catch-badge svg { color: rgba(255,255,255,0.45); }
/* Локация: flex-shrink=1 — сжимается только при нехватке места, иначе показывает полный текст */
.post-location-badge { flex-shrink: 1; min-width: 0; color: rgba(255,255,255,0.45); overflow: hidden; }
.post-location-badge svg { color: rgba(255,255,255,0.35); flex-shrink: 0; display: block; }
.post-record-badge.rec-city    { color: rgba(180,184,200,0.70); cursor: pointer; }
.post-record-badge.rec-region  { color: rgba(190,160,60,0.80); cursor: pointer; }
.post-record-badge.rec-country { color: rgba(70,185,205,0.80); cursor: pointer; }
.post-record-badge:hover { opacity: 0.85; }
.post-pb-badge  { color: rgba(60,175,155,0.80); }
.post-catch-big { color: rgba(255,255,255,0.45); }
/* Трофей в бейдже улова — тот же размер шрифта, просто приглушённый */
.catch-badge-hint { opacity: 0.5; font-size: 11px; line-height: 1; }
/* Вес макс. экземпляра в бейдже — читаемое значение вместо кубка */
.catch-badge-weight { font-size: 11px; font-weight: 700; line-height: 1; color: rgba(255,255,255,0.85); }
.post-gallery-meta .catch-badge-weight { color: #ffe9b0; }
/* Локация: hard-clip при нехватке места, фейд убран — он фейдил и когда текст влезал */
.post-location-text {
  overflow: hidden; white-space: nowrap; min-width: 0; text-overflow: ellipsis;
}
/* Кнопочные варианты */
.post-catch-badge--btn,
.post-location-badge--btn {
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.post-catch-badge--btn:hover,
.post-catch-badge--btn.active {
  background: var(--accent); color: #fff; border-color: transparent;
}
.post-location-badge--btn:hover,
.post-location-badge--btn.active {
  border-color: rgba(255,255,255,0.15); color: var(--text);
}

.post-gallery-meta {
  transition: opacity 0.25s;
}

/* ---- Мета улова+локации поверх фото: одна строка, тёмное стекло ---- */
.post-gallery-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 5px; flex-wrap: nowrap; text-align: start;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 28px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.20) 50%, transparent);
  pointer-events: none;
}
.post-gallery-meta > * { pointer-events: auto; }
.post-gallery-meta .post-catch-badge,
.post-gallery-meta .post-location-badge,
.post-gallery-meta .post-record-badge,
.post-gallery-meta .post-pb-badge,
.post-gallery-meta .post-catch-big {
  background: rgba(0,0,0,0.42); color: rgba(255,255,255,0.90);
  border-color: rgba(255,255,255,0.12); text-shadow: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.post-gallery-meta .post-catch-badge svg { color: #e8c060; }
.post-gallery-meta .post-location-badge svg { color: #c4936a; }
/* no mask here — text-overflow:ellipsis in .post-location-text handles truncation correctly */
.post-gallery-meta .post-catch-badge--btn:hover,
.post-gallery-meta .post-catch-badge--btn.active { background: var(--accent); color: #fff; }

/* ---- Inline map ---- */
.post-inline-map {
  margin: 6px var(--card-padding) 4px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); position: relative;
}
.post-inline-map-frame {
  width: 100%; height: 190px; border: none; display: block;
}
.post-inline-map-open {
  display: block; text-align: end; padding: 5px 10px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  background: var(--bg-warm); border-top: 1px solid var(--border-light);
}
.post-inline-map-nocoords {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  font-size: 13px; color: var(--text-dim); min-width: 0;
}
.post-inline-map-loc {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-inline-map-link {
  margin-inline-start: auto; color: var(--primary); font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}

/* ---- Trophy Panel ---- */
.trophy-panel {
  margin: var(--card-padding) var(--card-padding) 4px; padding: var(--card-padding);
  background: var(--bg-warm); border-radius: var(--radius);
  border: 1px solid var(--border);
}
.trophy-panel--no-data {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
}
.trophy-no-data-info { display: flex; flex-direction: column; gap: 2px; }
.trophy-no-data-hint { font-size: 11px; color: var(--text-dim); }
.trophy-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--card-padding);
}
.trophy-medal-icon { font-size: 22px; line-height: 1; }
.trophy-header-info { flex: 1; min-width: 0; }
.trophy-species { font-size: 13px; font-weight: 700; color: var(--text); }
.trophy-rank-label { font-size: 11px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trophy-first-badge {
  color: var(--orange); font-weight: 700;
}
.trophy-your-weight {
  font-size: 18px; font-weight: 800; color: var(--accent); flex-shrink: 0;
}

.trophy-bar-section { margin-bottom: var(--card-padding); }
.trophy-bar-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
}
.trophy-record-label { color: var(--orange); }
.trophy-bar-track {
  height: 8px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.trophy-bar-fill {
  height: 100%; border-radius: 4px; transition: width 0.6s ease;
  background: var(--primary);
}
.trophy-bar-fill--gold { background: #f5c842; }
.trophy-bar-fill--silver { background: #a0a0b0; }
.trophy-bar-fill--bronze { background: #cd7f32; }
.trophy-bar-pct { font-size: 11px; color: var(--text-muted); text-align: end; margin-top: 3px; margin-bottom: var(--card-padding); }

.trophy-leaderboard { border-top: 1px solid var(--border-light); padding-top: var(--card-padding); }
.trophy-leaderboard-title {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  letter-spacing: 0.02em; margin-bottom: 6px;
}
.trophy-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 0;
  font-size: 13px;
}
.trophy-row--me { background: rgba(127,161,122,0.08); border-radius: var(--radius-xs); padding: 3px 6px; margin: 0 -6px; }
.trophy-row-rank { width: 24px; text-align: center; font-size: 14px; flex-shrink: 0; }
.trophy-row-avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; background: var(--card);
}
.trophy-row-avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  border: 1px solid var(--border);
}
.trophy-row-author {
  flex: 1; color: var(--text); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.trophy-row-weight { font-weight: 700; color: var(--accent); flex-shrink: 0; }
.trophy-row-you {
  font-size: 10px; color: var(--primary); font-weight: 700; flex-shrink: 0;
  background: rgba(var(--primary-rgb, 80,160,100), 0.12);
  border: 1px solid rgba(var(--primary-rgb, 80,160,100), 0.25);
  border-radius: 4px; padding: 1px 5px; line-height: 1.4;
}

.trophy-warning {
  margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  background: var(--danger-light); color: var(--danger);
  font-size: 12px; border: 1px solid rgba(197,122,122,0.3);
}
.trophy-skeleton { display: flex; flex-direction: column; gap: 8px; }
.skel { background: var(--border); border-radius: 4px; }
.skel-line { height: 12px; }
.skel-bar { height: 8px; border-radius: 4px; }

/* Legacy compat */
.post-catch {
  display: inline-flex; gap: 10px; font-size: 13px; font-weight: 700;
  margin-bottom: 4px; align-items: center;
  color: var(--accent); background: var(--accent-light);
  padding: 3px 10px; border-radius: 14px;
}
.post-catch span { display: flex; align-items: center; gap: 4px; }
.post-location {
  font-size: 13px; color: var(--text-dim);
  display: flex; align-items: center; gap: 4px; margin-bottom: 4px;
}
.post-location svg { color: var(--orange); flex-shrink: 0; }
.post-fish-illustration { display: none; }

/* Gallery */
.post-gallery-wrap {
  position: relative;
  width: 100%;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 0;
  touch-action: pan-y;
}
.gallery-container { position: relative; touch-action: pan-y; }

/* ===== MOSAIC GALLERY ===== */
/* Single media — full width, natural aspect, no letterboxing */
.post-mosaic-single {
  position: relative;
  width: 100%;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.post-mosaic-single img,
.post-mosaic-single video {
  width: 100%;
  height: auto;
  display: block;
}

/* Desktop feed: limit tall portrait photos, show from top (fish/face usually at top) */
@media (min-width: 768px) {
  .post-card--feed .post-mosaic-single {
    max-height: 600px;
    overflow: hidden;
  }
  .post-card--feed .post-mosaic-single img,
  .post-card--feed .post-mosaic-single video {
    max-height: 600px;
    object-fit: cover;
    object-position: center 15%;
  }
}

/* Video sound toggle button (desktop hover) */
.video-sound-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.15s;
}
.post-mosaic-single:hover .video-sound-toggle,
.post-mosaic-item:hover .video-sound-toggle { opacity: 1; }
.video-sound-toggle:hover { background: rgba(0,0,0,0.8); }

/* Hide play badge while actively hovering (video is playing) */
.post-mosaic-single.video-playing .post-mosaic-video-badge,
.post-mosaic-item.video-playing .post-mosaic-video-badge { opacity: 0; transition: opacity 0.2s; }

/* Smart Flickr-style mosaic (for 2+ items) */
/* === SMART GRID (2-9 фото: инстаграм-стайл) === */
.post-mosaic-smart {
  display: grid;
  gap: 2px;
  width: 100%;
  overflow: hidden;
  background: #111;
}
/* 2 фото: 2 колонки, общий 16:9 */
.post-mosaic-smart.grid-2 {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 16 / 9;
}
/* 3 фото: большое слева + 2 стопкой справа, 4:3 */
.post-mosaic-smart.grid-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 4 / 3;
}
.post-mosaic-smart.grid-3 .post-mosaic-item:first-child {
  grid-row: span 2;
}
/* 4 фото и 5+: 2×2, квадрат */
.post-mosaic-smart.grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1 / 1;
}
.post-mosaic-item {
  position: relative;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
}
.post-mosaic-item img,
.post-mosaic-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* "+N ещё" оверлей */
.mosaic-more-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.52);
  color: #fff; font-size: 28px; font-weight: 700;
  letter-spacing: -0.5px;
  pointer-events: none;
}
/* Старые flex-ряды (остаток justified layout, больше не используются) */
.post-mosaic-row {
  display: flex; gap: 0; width: 100%; overflow: hidden;
}

/* Legacy (for fallback / old grid-based mosaic) */
.post-mosaic {
  display: grid;
  gap: 0;
  width: 100%;
  background: var(--bg);
  overflow: hidden;
}

/* 1 item — full width, natural aspect (max height) */
.post-mosaic.count-1 { display: block; background: transparent; }
.post-mosaic.count-1 .post-mosaic-item { background: transparent; max-height: 560px; }
.post-mosaic.count-1 .post-mosaic-item img,
.post-mosaic.count-1 .post-mosaic-item video {
  width: 100%; height: auto; max-height: 560px;
  object-fit: contain; background: #0a0a0a;
}

/* 2 items — side by side */
.post-mosaic.count-2 {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 16/9;
}

/* 3 items — 1 big left, 2 stacked right */
.post-mosaic.count-3 {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 16/10;
}
.post-mosaic.count-3 .post-mosaic-item:nth-child(1) {
  grid-row: span 2;
}

/* 4 items — 2x2 */
.post-mosaic.count-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1/1;
}

/* 5+ items — 2x2 grid, 4th shows "+N" overlay */
.post-mosaic.count-many {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1/1;
}
.post-mosaic-more {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff; font-size: 28px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* Video indicator */
.post-mosaic-video-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.post-mosaic-video-badge-inner {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(0,0,0,0.20); color: rgba(255,255,255,0.70);
  border: 2px solid rgba(255,255,255,0.45);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.post-mosaic-video-badge-inner svg {
  margin-inline-start: 4px;
}
.post-mosaic-video-duration {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  pointer-events: none;
}

@media (min-width: 768px) {
  .post-mosaic.count-1 .post-mosaic-item { max-height: 500px; }
  .post-mosaic.count-1 .post-mosaic-item img,
  .post-mosaic.count-1 .post-mosaic-item video { max-height: 500px; }
}

/* Legacy single-view gallery (for repost compatibility) */
.post-gallery { display: flex; overflow: hidden; }
.post-gallery::-webkit-scrollbar { display: none; }
.gallery-img {
  min-width: 100%; width: 100%; max-height: 500px; object-fit: contain;
  flex-shrink: 0; background: #0a0a0a;
}
.gallery-video { min-width: 100%; width: 100%; max-height: 500px; background: #000; display: block; }

@media (min-width: 768px) {
  .gallery-img { max-height: 420px; object-fit: contain; border-radius: var(--radius-xs); background: #0a0a0a !important; }
  .gallery-video { max-height: 420px; border-radius: var(--radius-xs); }
}

:root.dark .gallery-img { background: #0a0a0a; }
@media (prefers-color-scheme: dark) { :root:not(.light) .gallery-img { background: #0a0a0a; } }

.photo-counter {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(0,0,0,0.55); color: white;
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius);
}

/* Gallery Arrows */
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(0,0,0,0.48); color: white; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; z-index: 2; padding: 0;
}
.gallery-arrow:hover { background: rgba(0,0,0,0.72); }
.gallery-container:hover .gallery-arrow { opacity: 1; }
.gallery-arrow-left { left: 6px; }
.gallery-arrow-right { right: 6px; }
@media (max-width: 767px) { .gallery-arrow { display: none !important; } }

/* Gallery Dots */
.gallery-dots {
  display: flex; justify-content: center; gap: 5px;
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 2;
}
.gallery-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.5); cursor: pointer;
  transition: all 0.2s; border: none; padding: 0;
}
.gallery-dot.active { background: white; transform: scale(1.3); }
.gallery-dot-video { border: 1.5px solid rgba(255,255,255,0.8); }

/* Lightbox */
.lightbox-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.96); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s; cursor: pointer;
}
/* Бейджи не должны просвечивать через лайтбокс */
.lightbox-img {
  max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 4px;
  cursor: pointer;
}
.lightbox-video { max-width: 95vw; max-height: 90vh; border-radius: 4px; }
.lightbox-counter {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  color: white; font-size: 14px; font-weight: 600;
  background: rgba(0,0,0,0.5); padding: 4px 16px; border-radius: 14px;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.12); border: none; color: white;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-nav:hover { background: rgba(255,255,255,0.28); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Фото-расширение: перекрывает всю карточку целиком (position:absolute внутри post-card) */
/* Оставляем старые классы для обратной совместимости */
.post-expanded-view {
  position: absolute; inset: 0; background: #0d0d0d;
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
.post-expanded-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }

/* ── Полноэкранный лайтбокс (portal → document.body) ── */
.post-lightbox {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  animation: expandIn 0.18s ease;
  touch-action: none; /* позволяет обрабатывать pinch вручную */
  overscroll-behavior: contain;
}
.post-lightbox--closing {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.post-lightbox-img {
  max-width: 100vw;
  max-height: 100dvh;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.post-lightbox-reset-zoom {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px; padding: 6px 18px; font-size: 13px; cursor: pointer;
  backdrop-filter: blur(8px);
}
.post-expanded-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.post-exp-counter {
  position: absolute;
  bottom: 12px;
  left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 500;
  background: rgba(0,0,0,0.55);
  padding: 3px 14px;
  border-radius: var(--radius);
  pointer-events: none;
}
.post-exp-btn {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.14);
  border: none; color: white;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  backdrop-filter: blur(4px);
}
.post-exp-prev { left: 12px; }
.post-exp-next { right: 12px; }
.post-exp-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top, 14px));
  right: 14px;
  background: rgba(0,0,0,0.55);
  border: none; color: white;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10001;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes expandIn { from { opacity: 0.5; } to { opacity: 1; } }

/* Post Actions */
.post-actions {
  display: flex; align-items: center; gap: 2px;
  /* Горизонтальный отступ уменьшен на внутренний padding пилюли — иконки
     остаются на одной вертикали с текстом поста. */
  padding: 6px calc(var(--card-padding) - 6px) 2px;
  border-top: 1px solid var(--border-light); margin-top: 6px;
  /* long-press пикера реакций не должен выделять текст/цифры */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* Ритм ряда: реакции слева, подписка и закладка — к правому краю */
.post-actions-gap { flex: 1 1 auto; }
.action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 12.5px; padding: 0 2px;
  font-weight: 600; transition: color var(--transition); font-family: inherit;
  line-height: 1;
}
/* Единый размер и базовая линия для всех иконок действий */
.post-actions .action-btn > svg { width: 20px; height: 20px; flex-shrink: 0; display: block; }
.action-btn span { line-height: 1; font-size: 13px; }
/* Тап-зона под палец (стандарт: 44px на телефоне) + отклик на нажатие.
   Раньше это были голые 20px-иконки: мимо попадали, отклика не было. */
.post-actions .action-btn {
  min-width: 40px; min-height: 40px; padding: 0 8px;
  justify-content: center; border-radius: var(--radius-pill);
  background: none;
  transition: color var(--transition), background var(--transition);
}
/* Подложка появляется только под пальцем/курсором, в покое её нет */
.post-actions .action-btn:active { background: var(--primary-bg); }
@media (hover: hover) {
  .post-actions .action-btn:hover { background: var(--primary-bg); }
}
@media (max-width: 640px) {
  .post-actions .action-btn { min-height: 44px; }
}
.post-actions-time {
  color: var(--text-muted); font-size: 12.5px; padding: 0 6px; white-space: nowrap;
}
.post-views {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  padding: 0 8px; user-select: none;
}
.post-views svg { flex-shrink: 0; display: block; }
.action-btn:hover { color: var(--primary); }
.action-btn.liked { color: var(--danger); }
.action-btn.saved { color: var(--primary); }
.bookmark-btn { transition: color var(--transition); }
.heart-3d { display: block; animation: heart-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; filter: drop-shadow(0 1px 3px rgba(180,10,10,0.3)); }
@keyframes heart-pop { 0%{transform:scale(0.8)} 60%{transform:scale(1.18)} 100%{transform:scale(1.0)} }

/* ══════════════════════════════════════════════════════
   FEED BANNER — базовый стиль всех баннеров/тултипов ленты.
   СТАНДАРТ БАННЕРА (feed-banner):
   ─────────────────────────────────────────────────────
   <div class="feed-banner">
     <div class="feed-banner__icon feed-banner__icon--[green|orange|blue]">
       <Icon size={16} />
     </div>
     <div class="feed-banner__body">
       <span class="feed-banner__title">Заголовок — 1 строка</span>
       <span class="feed-banner__desc">Описание — 1 строка (line-clamp:1)</span>
     </div>
     <button class="feed-banner__close">×</button>   // опционально
   </div>

   Правила:
   • title: 13px bold, белый — всегда 1 строка (nowrap + ellipsis)
   • desc:  11.5px muted — всегда 1 строка (line-clamp:1)
   • Иконка: 28×28, цвет через модификатор --green/--orange/--blue
   • Для chips-строки (flex-дети): используй .feed-banner__desc + display:flex override
   • Цвет title можно переопределить доп. классом (напр. .contest-banner__title)
   ══════════════════════════════════════════════════════ */
/* Две кнопки на главной: Замечания + Тестирование App Android */
/* Строгая сетка 2 колонки 60/40 (левая шире). Одинаковая высота во ВСЕХ рядах
   (было flex — кнопки 50/50, а в ряду ниже конкурс широкий + чип по контенту = мозаика). */
.cw-row { display: grid; grid-template-columns: 3fr 2fr; gap: 8px; margin-bottom: 10px; }
.cw-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0;
  min-height: var(--feed-tile-h, 64px); padding: 8px 10px; border-radius: var(--radius);
  font-size: 13px; font-weight: 700; text-decoration: none; text-align: center;
  line-height: 1.15; border: 1px solid var(--border);
}
.cw-btn svg { flex-shrink: 0; }
/* Единый вид всех плиток под шапкой (кроме конкурса — у него свой золотой стиль):
   одинаковые фон и рамка, текст по центру. */
.cw-btn--notes,
.cw-btn--test { background: var(--card); color: var(--primary); border-color: var(--border); }
.cw-btn--notes:active,
.cw-btn--test:active { background: var(--bg-warm); }

.feed-banner {
  display: flex; align-items: center;
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--card-padding); gap: 10px; margin: 0;
  position: relative; overflow: hidden;
}
/* Ссылка-обёртка на всё тело (кроме кнопки закрытия) */
.feed-banner__link {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0; text-decoration: none; color: inherit;
}
/* Иконка — квадрат 28×28, выровнен по центру высоты */
.feed-banner__icon {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: rgba(255,255,255,0.07); color: var(--text-dim);
}
.feed-banner__icon--green  { background: rgba(16,185,129,0.15); color: var(--primary); }
.feed-banner__icon--orange { background: rgba(251,146,60,0.15);  color: #fb923c; }
.feed-banner__icon--blue   { background: rgba(96,165,250,0.15);  color: #60a5fa; }
/* Правый блок — 2 строки */
.feed-banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-banner__title {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-banner__desc {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
/* Кнопка закрытия */
.feed-banner__close {
  flex-shrink: 0; background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 4px; display: flex; align-items: center;
  opacity: 0.55; margin-inline-start: 2px;
}
.feed-banner__close:hover { opacity: 1; }
/* Кнопка-действие внутри баннера */
.feed-banner__action {
  flex-shrink: 0; height: 28px; padding: 0 12px; border-radius: 14px; border: none;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.feed-banner__action:active { transform: scale(0.95); }

/* ===== PWA + прогноз клёва в одну строку ===== */
/* === Баннеры ленты === */
.feed-pwa-row {
  display: flex; gap: 8px; align-items: stretch;
}
.feed-pwa-row .pwa-install-banner { flex: 1; min-width: 0; }
/* Если PWA-баннер не появился — прячем строку целиком (chip уйдёт в slot1-строку) */
.feed-pwa-row:not(:has(.pwa-install-banner)) { display: none; }

.feed-slot1-row {
  display: grid; grid-template-columns: 3fr 2fr; gap: 8px; align-items: stretch;
}
.feed-slot1-row > * { min-width: 0; }
/* Ячейки этого ряда — той же высоты, что кнопки выше */
.feed-slot1-row > .contest-banner,
.feed-slot1-row > .spawn-ban-banner,
.feed-slot1-row .bite-forecast-chip { min-height: var(--feed-tile-h, 64px); }
/* Обёртка чипа — полноценная ячейка сетки */
.feed-slot1-row > .bite-chip-slot { display: flex; min-width: 0; }
.feed-slot1-row > .bite-chip-slot > .bite-forecast-chip { flex: 1; min-width: 0; }
/* Если сосед по ряду отсутствует (гость) или чип уехал в PWA-строку —
   единственная плитка занимает всю ширину, а не половину с дырой справа. */
.feed-slot1-row:has(> :only-child) { grid-template-columns: 1fr; }
.feed-pwa-row:has(.pwa-install-banner) ~ .feed-slot1-row { grid-template-columns: 1fr; }

/* Когда PWA-баннер ЕСТЬ — chip в slot1-строке скрыт (он уже в pwa-строке) */
.feed-pwa-row:has(.pwa-install-banner) ~ * .bite-chip-slot { display: none; }
/* Когда PWA-баннер ЕСТЬ — chip в pwa-строке показан компактно */
.bite-chip-pwa { flex-shrink: 0; }
/* Когда нет slot1, chip один — растянуть */
.feed-slot1-row .bite-chip-slot:first-child { flex: 1; }
.feed-slot1-row .bite-chip-slot:first-child .bite-forecast-chip { width: 100%; }

/* Мини-чип прогноза клёва — только мобила */
@media (min-width: 768px) { .solunar-mini-chip { display: none !important; } }
.solunar-mini-chip {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 10px;
  background: transparent;
  border: 1.5px solid; border-radius: var(--radius-sm);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  min-width: 72px;
}
.solunar-mini-chip:active { opacity: 0.75; }
.solunar-mini-label { font-size: 10px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.solunar-mini-badge { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* CSS :has() — чип растягивается на всю строку когда PWA-баннер отсутствует.
   Никакого JS-состояния: PWA-баннер рендерится сам, CSS реагирует на его присутствие. */
.feed-pwa-row:not(:has(.pwa-install-banner)) .solunar-mini-chip {
  flex: 1; min-width: 0;
  flex-direction: row; gap: 6px; justify-content: center;
}
.feed-pwa-row:not(:has(.pwa-install-banner)) .solunar-mini-label {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.feed-pwa-row:not(:has(.pwa-install-banner)) .solunar-mini-sep {
  font-size: 13px; color: var(--text-muted);
}
.feed-pwa-row:not(:has(.pwa-install-banner)) .solunar-mini-badge { font-size: 14px; }

/* variant="full" (запасной, для явного указания) */
.solunar-mini-chip--full {
  flex-shrink: 1; flex: 1; width: 100%;
  flex-direction: row; gap: 6px; justify-content: center; min-width: 0;
}
.solunar-mini-chip--full .solunar-mini-label { font-size: 13px; font-weight: 600; color: var(--text); }
.solunar-mini-chip--full .solunar-mini-sep { font-size: 13px; color: var(--text-muted); }
.solunar-mini-chip--full .solunar-mini-badge { font-size: 14px; }

/* ===== PWA install hint (главная, мобила) ===== */
/* PWA баннер — наследует .feed-banner, добавляем только flex-column для ios-help */
.pwa-install-banner { flex-wrap: wrap; }
.pwa-install-ios-help {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light);
  font-size: 12px; color: var(--text-dim); line-height: 1.5;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.pwa-install-ios-help b { color: var(--text); }
.pwa-install-ios-help svg { vertical-align: middle; flex-shrink: 0; }
.pwa-install-ios-help {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(127,161,122,0.2);
  font-size: 12.5px; color: var(--text-dim); line-height: 1.5;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.pwa-install-ios-help b { color: var(--text); }
.pwa-install-ios-help svg { vertical-align: middle; flex-shrink: 0; }

.post-repost-msg {
  font-size: 12px; color: var(--text-muted);
  padding: 6px 0 2px;
  text-align: center;
  animation: fade-in-soft 0.25s ease;
}
@keyframes fade-in-soft { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   CREATE POST FORM
   ================================================================ */

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.create-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.create-fields input:last-child { grid-column: 1 / -1; }

/* Edit Post Form */
.edit-post-form {
  background: var(--card); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
}
.edit-post-form textarea {
  min-height: 100px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; font-size: 14px;
  resize: vertical; font-family: inherit;
}
.edit-actions { display: flex; gap: 8px; }
.comment-top { display: flex; align-items: center; justify-content: space-between; }
.page-header-actions { display: flex; gap: 8px; margin-inline-start: auto; }

/* ===== File Upload & Photo Previews ===== */
.file-upload-label {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--card); border: 2px dashed var(--border);
  color: var(--text-dim); font-size: 14px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.file-upload-label:hover { border-color: var(--primary); color: var(--primary); }
.photo-previews { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-preview {
  position: relative; width: 90px; height: 90px;
  border-radius: var(--radius-xs); overflow: hidden;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-remove {
  position: absolute; top: 2px; right: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none;
  font-size: 14px; line-height: 22px; text-align: center; cursor: pointer;
}

/* ================================================================
   EVENTS
   ================================================================ */
.events-list { display: flex; flex-direction: column; gap: 10px; }

/* Компактная строка-карточка события (без больших баннеров) */
.event-card--row {
  display: flex; gap: 12px; align-items: stretch;
  background: var(--card); border-radius: 14px;
  padding: 11px; box-shadow: var(--shadow-xs);
  color: var(--text); transition: background var(--transition);
  border: 1px solid var(--border-light); text-decoration: none;
}
.event-card--row:active { background: var(--bg-warm); }
.event-thumb {
  width: 56px; height: 56px; border-radius: var(--radius); flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #fff; align-self: center;
}
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.event-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-badge {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
}
.event-countdown {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; color: var(--orange);
  background: rgba(232,138,26,0.12); padding: 1px 7px; border-radius: 8px;
}
.event-title { font-size: 14.5px; font-weight: 700; margin: 1px 0; line-height: 1.25; }
.event-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 12px; color: var(--text-dim); }
.event-meta span { display: flex; align-items: center; gap: 3px; }
.event-meta svg { color: var(--text-muted); flex-shrink: 0; }
.event-bottom { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.event-fee {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); padding: 2px 10px; border-radius: var(--radius);
}
.event-prize {
  font-size: 12.5px; color: var(--orange); font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}

.event-cover-large { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius); }
.event-content { padding: 8px 0; }
.event-content h2 { font-size: 22px; font-weight: 800; margin: 10px 0; }
.event-details {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; margin: 14px 0; color: var(--text-dim);
}
.event-details div { display: flex; align-items: center; gap: 8px; }
.event-details svg { color: var(--primary); flex-shrink: 0; }
.event-description { font-size: 15px; line-height: 1.7; margin: 14px 0; white-space: pre-wrap; }
.event-rules {
  margin: 14px 0; padding: 16px; background: var(--bg);
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
}
.event-rules h3 { font-size: 15px; margin-bottom: 8px; font-weight: 700; }
.event-organizer { margin-top: 20px; font-size: 14px; color: var(--text-dim); }
.event-organizer .label { margin-inline-end: 4px; }

.participants-section { margin-top: 24px; }
.participants-section h3 { font-size: 15px; margin-bottom: 10px; font-weight: 700; }
.participants-list { display: flex; flex-wrap: wrap; gap: 8px; }
.participant {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg); padding: 6px 14px; border-radius: 20px;
  font-size: 13px; color: var(--text); font-weight: 500;
  border: 1px solid var(--border-light); transition: all var(--transition);
}
.participant:hover { border-color: var(--primary-light); background: var(--primary-bg); }

/* ===== Event status chip / note ===== */
.event-status {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 1px 7px; border-radius: 8px;
}
.event-status--ongoing { color: var(--success); background: var(--success-light); }
.event-status--finished { color: var(--text-muted); background: rgba(138,131,122,0.12); }
.event-status-note {
  margin-top: 8px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--border-light);
  color: var(--text-dim); font-size: 14px; font-weight: 600; text-align: center;
}
.event-status-note--live { color: var(--success); background: var(--success-light); border-color: transparent; }

/* ===== Events calendar ===== */
.cal-page { padding: 16px; }
.cal-list-btn {
  background: var(--primary-light); color: var(--primary); border: none;
  border-radius: var(--radius-xs); padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
.cal-nav-btn {
  background: none; border: none; cursor: pointer; padding: 8px; border-radius: 8px;
  color: var(--text); display: flex;
}
.cal-nav-btn:active { background: var(--bg-warm); }
.cal-month-label { font-size: 18px; font-weight: 700; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.cal-weekday { text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day {
  height: 48px; border: none; border-radius: var(--radius-sm); background: var(--card);
  color: var(--text); font-size: 15px; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.cal-day--empty { background: none; pointer-events: none; }
.cal-day--skeleton { background: var(--bg); animation: skeleton-pulse 1.5s infinite; pointer-events: none; }
.cal-day--today { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.cal-day--selected { background: var(--primary); color: var(--btn-text); font-weight: 700; }
.cal-dot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
}
.cal-dot--multi { width: 18px; height: 14px; border-radius: 7px; }
.cal-day--selected .cal-dot { background: rgba(255,255,255,0.85); color: var(--primary); }
.cal-day-events { margin-top: 20px; }
.cal-day-events-title { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
.cal-day-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 20px; }
.cal-event-list { display: flex; flex-direction: column; gap: 8px; }
.cal-event-item {
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 14px; text-align: start; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.cal-event-item:active { background: var(--bg-warm); }
.cal-event-title { font-size: 15px; font-weight: 600; color: var(--text); }
.cal-event-meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Event actions (share / calendar) ===== */
.event-actions { display: flex; gap: 8px; margin: 14px 0; }
.event-action-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  font-size: 13px; font-weight: 600; transition: background var(--transition);
}
.event-action-btn:active { background: var(--bg-warm); }

/* ===== Event mini-map ===== */
.event-static-map, .event-map-picker {
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border-light); margin-top: 8px;
}
.event-map-hint {
  font-size: 12px; color: var(--text-muted); padding: 8px 10px;
  background: var(--bg); text-align: center;
}

/* ===== Event cover upload ===== */
.event-cover-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 22px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg); border: 1.5px dashed var(--border); color: var(--text-muted);
  font-size: 14px; font-weight: 600;
}
.event-cover-add:active { background: var(--bg-warm); }
.event-cover-upload { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.event-cover-upload img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.event-cover-remove {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%;
  border: none; cursor: pointer; background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ===== Organizer onboarding ===== */
.organizer-onboarding {
  text-align: center; padding: 24px 20px; max-width: 460px; margin: 0 auto;
}
.organizer-onboarding-icon {
  width: 76px; height: 76px; border-radius: 50%; margin: 8px auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.organizer-onboarding h2 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.organizer-onboarding p { font-size: 15px; line-height: 1.6; color: var(--text-dim); margin-bottom: 16px; }
.organizer-perks {
  list-style: none; padding: 0; margin: 0 0 20px; text-align: start;
  display: flex; flex-direction: column; gap: 12px;
}
.organizer-perks li {
  display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text);
}
.organizer-perks svg { color: var(--primary); flex-shrink: 0; }
.organizer-onboarding .btn-primary { width: 100%; }
.organizer-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; line-height: 1.5; }

/* ================================================================
   MARKETPLACE
   ================================================================ */
.ads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ad-card {
  background: var(--card); border-radius: var(--radius);
  overflow: hidden; color: var(--text);
  box-shadow: var(--shadow-xs); transition: all var(--transition);
  border: 1px solid var(--border-light);
}
.ad-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ad-photo { aspect-ratio: 1; overflow: hidden; background: var(--bg); }
.ad-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }
.ad-card:hover .ad-photo img { transform: scale(1.04); }
.ad-no-photo {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 13px;
  background: linear-gradient(135deg, var(--bg), var(--border-light));
}
.ad-info { padding: 12px; }
.ad-badges { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.ad-type {
  font-size: 10px; padding: 3px 8px; border-radius: var(--radius-sm);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
}
.ad-type-sell { background: var(--success-light); color: var(--success); }
.ad-type-buy { background: var(--primary-light); color: var(--primary); }
.ad-type-exchange { background: var(--orange-light); color: var(--orange); }
.ad-type-rent { background: #f3e8ff; color: #7c3aed; }
.ad-category {
  font-size: 10px; padding: 3px 8px; border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text-muted); font-weight: 600;
}
.ad-title {
  font-size: 14px; font-weight: 700; margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35;
}
.ad-price { font-size: 16px; font-weight: 800; color: var(--primary); }
.ad-meta {
  font-size: 11px; color: var(--text-muted);
  display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap;
}
.ad-meta span { display: flex; align-items: center; gap: 2px; }

.ad-photos-gallery { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; scroll-snap-type: x mandatory; }
.ad-photos-gallery img { height: 220px; border-radius: var(--radius-sm); scroll-snap-align: start; }
.ad-content { padding: 8px 0; }
.ad-content h2 { font-size: 20px; font-weight: 800; margin: 8px 0; }
.ad-price-big { font-size: 30px; font-weight: 800; color: var(--primary); margin: 8px 0; }
.ad-description { font-size: 15px; line-height: 1.7; margin: 14px 0; white-space: pre-wrap; }
.ad-meta-detail { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-dim); margin: 14px 0; }
.ad-meta-detail div { display: flex; align-items: center; gap: 8px; }
.ad-contact {
  font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px;
  padding: 14px; background: var(--accent-light); border-radius: var(--radius-sm);
  margin: 14px 0; color: var(--accent); border: 1px solid var(--primary-light);
}
.ad-author { margin-top: 14px; font-size: 14px; }

/* ===== Ad Banners ===== */
.ad-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none;
  border: 1px solid var(--border-light); border-inline-start: 3px solid var(--primary);
  background: var(--card); transition: all var(--transition);
  width: 100%; margin: 0;
}
.ad-banner:hover { background: var(--bg-warm); color: var(--text); }
.ad-banner-icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
}
.ad-banner-content { flex: 1; min-width: 0; overflow: hidden; }
.ad-banner-title { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-banner-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-banner-cta {
  font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 14px; background: var(--primary); color: var(--btn-text);
  white-space: nowrap; flex-shrink: 0;
}

/* ===== Promoted badge ===== */
.promoted-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px;
  background: linear-gradient(135deg, #ffd700, #ff8f00); color: #5d3200;
}

.demo-badge {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  background: rgba(148, 163, 184, 0.15); color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.events-create-btn {
  display: none; /* показывается только на десктопе через media query */
  align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--primary); color: var(--btn-text);
  font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.events-create-btn:hover { background: var(--primary-dark); }

/* ===== Active filter tag ===== */
.active-filter-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 16px;
  background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 700; margin-bottom: 12px;
}
.active-filter-tag button {
  background: none; border: none; cursor: pointer; color: var(--primary);
  font-size: 16px; line-height: 1; padding: 0 2px; font-weight: 800;
}
.active-filter-tag--participant {
  display: flex; width: 100%; justify-content: space-between;
  background: var(--accent-light); color: var(--accent);
  border-radius: var(--radius); padding: 8px 14px;
}
.active-filter-tag--participant button { color: var(--primary); }

/* ===== Filter Bar ===== */
.filter-bar {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
  animation: slideDown 0.2s ease-out;
}
.filter-bar select, .filter-bar input {
  flex: 1; min-width: 120px; padding: 10px 12px; font-size: 13px;
  background: var(--card); border-radius: var(--radius-sm);
}

/* ===== Chips ===== */
.chip {
  padding: 8px 18px; border-radius: 24px;
  background: var(--card); border: 1.5px solid var(--border);
  font-size: 13px; cursor: pointer; color: var(--text-dim);
  font-weight: 600; transition: all var(--transition); font-family: inherit;
}
.chip:hover { border-color: var(--primary-light); }
.chip.active { background: var(--primary); color: var(--btn-text); border-color: var(--primary); }

/* ================================================================
   WEATHER
   ================================================================ */
.weather-page { padding-bottom: 80px; }
.weather-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.weather-item {
  background: var(--card); border-radius: var(--radius);
  padding: 20px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: var(--shadow-xs); border: 1px solid var(--border-light);
}
.weather-item svg { color: var(--primary); }
.weather-val { font-size: 24px; font-weight: 800; }
.weather-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.weather-region {
  font-size: 14px; color: var(--text-dim); font-weight: 600;
  margin-bottom: 12px; display: flex; align-items: center; gap: 6px;
}
.weather-current { margin-top: 20px; }
.weather-current h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; }

.weather-forecast { margin-top: 24px; }
.weather-forecast h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.forecast-days { display: flex; flex-direction: column; gap: 8px; }
.forecast-day {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.forecast-day-label { font-weight: 600; font-size: 14px; min-width: 90px; color: var(--text); }
.forecast-day-temp { display: flex; gap: 8px; font-size: 16px; font-weight: 700; min-width: 90px; }
.temp-max { color: var(--text); }
.temp-min { color: var(--text-muted); font-weight: 500; }
.forecast-day-details {
  display: flex; gap: 12px; font-size: 12px; color: var(--text-dim); margin-inline-start: auto;
}
.forecast-day-details span { display: flex; align-items: center; gap: 3px; }
@media (max-width: 480px) {
  .forecast-day { flex-wrap: wrap; gap: 6px 8px; padding: 10px 12px; }
  .forecast-day-label { min-width: 72px; font-size: 13px; }
  .forecast-day-temp  { min-width: 72px; font-size: 14px; gap: 6px; }
  .forecast-day-details { margin-inline-start: 0; width: 100%; gap: 8px; flex-wrap: wrap; }
}

/* ===== Species Bite ===== */
.species-bite-section { margin-top: 24px; }
.species-bite-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.species-bite-list { display: flex; flex-direction: column; gap: 8px; }
.species-bite-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.species-bite-name { display: flex; align-items: center; gap: 6px; width: 90px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.species-bite-bar { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.species-bite-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.species-bite-score { width: 28px; text-align: end; font-size: 13px; font-weight: 800; }

/* ===== Bite Index ===== */
.bite-compact {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 16px;
  border: 1.5px solid; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.bite-score { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.bite-emoji { font-size: 16px; }

.bite-widget {
  background: var(--card); border-radius: var(--radius);
  padding: 24px; text-align: center; box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-light);
}
.bite-widget h3 { font-size: 18px; margin-bottom: 16px; font-weight: 700; }
.bite-main {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 44px; border: 3px solid; border-radius: var(--radius);
}
.bite-big-emoji { font-size: 56px; }
.bite-label { font-size: 24px; font-weight: 800; }
.bite-score-big { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.bite-factors { margin-top: 20px; text-align: start; }
.bite-factor { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.factor-name { width: 100px; font-size: 13px; color: var(--text-dim); font-weight: 500; }
.factor-bar { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.factor-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

/* ===== Bite Index v2 — компактная карточка ===== */
.bite-widget--v2 { padding: 14px; text-align: start; }
.bite-head {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border: 2px solid; border-radius: 14px;
}
.bite-head-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.bite-head-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.bite-head-title { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.bite-head-label { font-size: 20px; font-weight: 800; line-height: 1.1; }
.bite-head-score { font-size: 26px; font-weight: 800; flex-shrink: 0; }
.bite-head-score i { font-size: 13px; font-weight: 600; color: var(--text-muted); font-style: normal; }
.bite-widget--v2 .bite-factors { margin-top: 12px; }
.bite-widget--v2 .bite-factor { margin-bottom: 6px; }
.bite-widget--v2 .factor-name { width: 92px; font-size: 12px; }
.bite-widget--v2 .factor-val { font-size: 12px; font-weight: 700; width: 24px; text-align: end; }

/* Уплотнение текущей погоды и заголовков на странице прогноза */
.weather-page .weather-current { margin-top: 14px; }
.weather-page .weather-current h3,
.weather-page .weather-forecast h3,
.weather-page .bite-forecast-section h3,
.weather-page .species-bite-section h3 { font-size: 15px; margin-bottom: 8px; }
.weather-page .weather-forecast,
.weather-page .bite-forecast-section,
.weather-page .species-bite-section { margin-top: 16px; }
.weather-page .weather-grid { gap: 8px; margin-top: 10px; }
.weather-page .weather-item { padding: 12px; gap: 5px; border-radius: 14px; }
.weather-page .weather-val { font-size: 19px; }
.weather-page .forecast-day { padding: 10px 14px; }
.factor-val { width: 30px; font-size: 13px; text-align: end; font-weight: 700; }

/* ===== 7-day Bite Forecast ===== */
.bite-forecast-section { margin-top: 24px; }
.bite-forecast-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.bite-forecast-list { display: flex; flex-direction: column; gap: 8px; }
.bite-forecast-card {
  display: grid; grid-template-columns: 100px 32px 1fr 32px;
  align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--card); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs); border-inline-start: 3px solid var(--border);
}
@media (max-width: 480px) {
  .bite-forecast-card { grid-template-columns: 78px 26px 1fr 26px; gap: 6px; padding: 9px 10px; }
}
.bite-forecast-card.good { border-inline-start-color: var(--primary); }
.bite-forecast-card.medium { border-inline-start-color: #ff9800; }
.bite-forecast-card.bad { border-inline-start-color: #f44336; }
.bite-forecast-date { font-size: 13px; font-weight: 700; color: var(--text); }
.bite-forecast-emoji { font-size: 20px; text-align: center; }
.bite-forecast-bar-wrap { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.bite-forecast-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.bite-forecast-score { font-size: 14px; font-weight: 800; text-align: end; }
.bite-forecast-details {
  grid-column: 1 / -1; display: flex; gap: 12px;
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}
.bite-forecast-details span { display: flex; align-items: center; gap: 3px; }
.bite-forecast-species {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--accent); font-weight: 700;
}

/* ================================================================
   MAP V3 — fullscreen с floating UI
   ================================================================ */

/* Контейнер страницы */
/* Карта — во всю ширину экрана: снять горизонтальные отступы/лимит у .app-main */
/* Карта — во всю ширину И во всю высоту: снимаем лимит, боковые отступы и нижний
   отступ под таб-бар (панель плавает поверх карты, место под неё резервировать не надо —
   иначе под картой остаётся чёрная полоса). */
.app-main:has(.map-page-v3) { max-width: none; padding-inline-start: 0; padding-inline-end: 0;
  padding-bottom: 0 !important; overflow: hidden; }



/* Leaflet контейнер — занимает всё */


/* ── Top bar (floating) ──────────────────────────────────── */


/* Верхний ряд карты: поиск + «Новое место» (создание перенесено СВЕРХУ вместо нижнего FAB) */


/* Результаты поиска (поиск переехал в шапку модуля §5) */

/* Результаты поиска в нижней шторке */






@keyframes searchpulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
/* Оверлей результатов поиска — сверху под строкой поиска (стабилен, клавиатура снизу не мешает) */



/* ── Планировщик маршрута «Откуда → Куда» ── */
.route-planner {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 16px); max-width: 440px; z-index: 1200;
  background: var(--card); border-radius: var(--radius-sm); padding: 7px 9px 7px;
  box-shadow: 0 6px 20px rgba(0,0,0,.42); border: 1px solid var(--border-light);
}
.route-planner-close {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border: none;
  background: rgba(128,128,128,.14); border-radius: 8px; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.route-planner-rows { position: relative; display: flex; flex-direction: column; gap: 4px; padding-inline-end: 28px; }
.route-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 9px; background: var(--bg);
  border-radius: var(--radius-sm); cursor: pointer; border: 1.5px solid transparent; transition: border-color .15s;
}
.route-row.picking { border-color: var(--primary); background: rgba(13,148,136,.08); }
.route-dot {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: #fff;
}
.route-dot--a { background: #16a34a; }
.route-dot--b { background: var(--danger); }
.route-dot--via { background: #d97706; font-size: 15px; }
.route-loc--del { background: rgba(220,38,38,.14); color: var(--danger); }
.route-add-via {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  padding: 3px 9px; border: 1.5px dashed var(--border); background: transparent;
  color: var(--text-muted); border-radius: var(--radius-sm); font-size: 12px;
  font-weight: 600; cursor: pointer; margin-inline-start: 29px;
}
.route-add-via:active { background: var(--bg); }
.route-field {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.route-loc {
  flex-shrink: 0; width: 26px; height: 26px; border: none; background: rgba(13,148,136,.14);
  color: var(--primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.route-swap {
  position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card);
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.route-planner-foot { margin-top: 6px; text-align: center; min-height: 16px; }
.route-hint { font-size: 12px; color: var(--text-muted); }
.route-summary { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--primary); }

/* Тумблер дорога/вода в планировщике маршрута */
.route-planner-modes { display: flex; gap: 6px; margin-bottom: 6px; padding-inline-end: 30px; }
.route-planner-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px; border-radius: 9px; border: 1.5px solid var(--border-light); background: var(--bg);
  color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.route-planner-mode.active { background: var(--primary); color: var(--bg); border-color: transparent; }
.route-planner-live { margin-top: 6px; text-align: center; font-size: 12px; font-weight: 700; color: var(--primary);
  display: inline-flex; align-items: center; gap: 5px; width: 100%; justify-content: center; }
.route-planner-live--wait { color: var(--warning); }
.route-follow {
  margin-top: 6px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px; border: none; border-radius: var(--radius-sm); background: var(--primary); color: var(--bg);
  font-size: 13px; font-weight: 800; cursor: pointer;
}
.route-follow.active { background: var(--danger); color: #fff; }

/* Выбор дорога/вода в карточке точки (bottom sheet) */
.map-route-modes { display: flex; gap: 8px; margin-top: 8px; }
.map-route-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 10px; border: 1.5px solid var(--border-light); background: var(--card);
  color: var(--text); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.map-route-mode.active { background: var(--primary); color: var(--bg); border-color: transparent; }
.map-route-hint { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; font-size: 11.5px;
  color: var(--text-muted); line-height: 1.4; }


















/* Сегмент платности на карте */






/* ── FABs ────────────────────────────────────────────────── */








/* ── Bottom sheet ────────────────────────────────────────── */
















/* ── Points list ─────────────────────────────────────────── */



















/* ── Point detail card ───────────────────────────────────── */
































@keyframes fadeout { 0%{opacity:1} 70%{opacity:1} 100%{opacity:0} }

/* ── Legacy map classes (compatibility) ─────────────────── */

.map-container { width: 100%; height: calc(100dvh - var(--tab-height) - var(--header-height)); }

/* Spot Detail — New UI */




   /* лого теперь в углу фото, доп. отступ не нужен */


/* ── Баннер-галерея карточки: листаемые фото + лого в углу фото + лента миниатюр ── */

   /* контекст для лого/счётчика — только над фото, НЕ над миниатюрами */




/* Полоса миниатюр под слайдером */






/* Полноэкранный просмотрщик галереи */
.lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.96); }
.lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px;
  border: none; background: rgba(255,255,255,.14); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lightbox-count { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 3;
  color: #fff; font-size: 14px; font-weight: 600; background: rgba(0,0,0,.4); padding: 4px 12px; border-radius: 14px; }
.lightbox-track { display: flex; width: 100%; height: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lightbox-track::-webkit-scrollbar { display: none; }
.lightbox-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start;
  display: flex; align-items: center; justify-content: center; }
.lightbox-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }




/* ── Соцсети + подписчики ── */



















/* ── Карточка платной базы ── */






/* Прямая связь — крупные кнопки-действия */




/* Сетка действий на 3 кнопки */


/* ── Модалка бронирования ── */
.booking-hint { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.booking-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.booking-field > span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.booking-field input, .booking-field select, .booking-field textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 15px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-light);
  font-family: inherit; box-sizing: border-box;
}
.booking-field textarea { resize: vertical; }
.booking-err { color: var(--danger); font-size: 13px; font-weight: 600; margin: 2px 0 10px; }
.booking-submit { width: 100%; justify-content: center; margin-top: 4px; }
.booking-done { text-align: center; padding: 14px 4px; }
.booking-done h3 { margin: 12px 0 6px; font-size: 18px; }
.booking-done p { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.booking-done .btn-primary { width: 100%; justify-content: center; }

/* ── Кабинет базы: заявки на бронь (владелец/админ) ── */















.bk-confirm, .bk-decline { border: none; border-radius: 8px; padding: 7px 12px; font-size: 12.5px;
  font-weight: 700; cursor: pointer; white-space: nowrap; }
.bk-confirm { background: var(--primary); color: var(--bg); }
.bk-decline { background: rgba(239,68,68,.12); color: var(--danger); }
.bk-status { font-size: 12px; font-weight: 700; white-space: nowrap; }
.bk-status--confirmed { color: var(--primary); }
.bk-status--declined, .bk-status--cancelled { color: var(--text-muted); }

/* Плашка статуса даты в модалке брони */
.booking-day { margin: -6px 0 12px; padding: 8px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; }
.booking-day--closed { background: rgba(239,68,68,.12); color: var(--danger); }
.booking-day--free { background: rgba(13,148,136,.12); color: var(--primary); }

/* ── Календарь занятости (кабинет) ── */
.avail-cal { margin-bottom: 14px; }
.avail-cal-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.avail-cal-title span { font-weight: 400; color: var(--text-muted); font-size: 11.5px; }
.avail-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.avail-day {
  position: relative; aspect-ratio: 1; border: 1px solid var(--border-light); border-radius: 9px;
  background: var(--bg); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 0; -webkit-tap-highlight-color: transparent;
}
.avail-day .avail-dow { font-size: 9px; color: var(--text-muted); line-height: 1; }
.avail-day .avail-num { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.avail-day.sel { border-color: var(--primary); box-shadow: 0 0 0 1.5px var(--primary); }
.avail-day.closed { background: rgba(239,68,68,.12); }
.avail-day.closed .avail-num { color: var(--danger); }
.avail-day.full { background: rgba(245,158,11,.14); }
.avail-tag {
  position: absolute; top: 2px; right: 3px; font-size: 9px; font-weight: 800;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
}
.avail-day.closed .avail-tag { background: var(--danger); }
.avail-editor { margin-top: 10px; padding: 11px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border-light); }
.avail-editor-date { font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.avail-editor-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.avail-toggle { flex: 1; min-width: 90px; padding: 8px; border-radius: 8px; border: 1.5px solid var(--border-light);
  background: var(--card); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.avail-toggle.on { background: var(--primary); color: var(--bg); border-color: transparent; }
.avail-toggle.on-red { background: var(--danger); color: #fff; border-color: transparent; }
.avail-cap-lbl { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.avail-editor-row input { width: 66px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-light);
  background: var(--card); color: var(--text); font-size: 14px; }
.avail-cap-save { padding: 7px 14px; border-radius: 8px; border: none; background: var(--primary); color: var(--bg); font-weight: 700; cursor: pointer; }
.avail-cap-hint { font-size: 11px; color: var(--text-muted); }

/* ── Виджет «Клёв сегодня» (погода на водоёме) ── */


.sw-gauge { flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sw-gauge-inner { width: 46px; height: 46px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; }
.sw-score { font-size: 19px; font-weight: 800; }
.sw-main { min-width: 0; flex: 1; }
.sw-label { font-size: 16px; font-weight: 800; }
.sw-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.sw-more { font-size: 12px; color: var(--primary); font-weight: 600; text-decoration: none; display: inline-block; margin-top: 4px; }





/* ── Турниры на базе ── */






.cabinet-tournament-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  margin-top: 10px; padding: 10px; border-radius: var(--radius-sm); border: 1.5px dashed rgba(245,197,66,.6);
  background: none; color: #d99e0b; font-size: 13.5px; font-weight: 700; cursor: pointer; }

/* ── Бейдж «Проверено KLEVAT» + чип модерации ── */



/* ── Самозаход: «Добавить свою базу» ── */
.addbase-inline-link { display: block; width: 100%; margin-top: 8px; padding: 9px 11px; text-align: start;
  background: rgba(13,148,136,.1); border: 1px solid rgba(13,148,136,.3); border-radius: 9px;
  color: var(--primary); font-size: 12.5px; font-weight: 700; cursor: pointer; line-height: 1.4; }
.addbase { max-width: 560px; margin: 0 auto; padding: 12px 16px 90px; }
.addbase-hero { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(13,148,136,.12), rgba(245,197,66,.08));
  border: 1px solid rgba(13,148,136,.28); margin-bottom: 16px; color: var(--primary); }
.addbase-hero p { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.5; }
.addbase .booking-field i { font-weight: 400; font-style: normal; color: var(--text-muted); }
.addbase-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; font-size: 12px;
  color: var(--text-muted); line-height: 1.5; }












/* Заявка на владение */




/* Кнопки владельца метки (редактировать/удалить) */
























































/* Spot Detail — Legacy classes */























.review-ratings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.review-rating-input label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.review-stars { display: flex; gap: 2px; }
.star-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: #d1d5db; padding: 3px; line-height: 1; }
.star-btn.active { color: #c4943a; }


.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.review-header strong { font-size: 14px; font-weight: 700; }
.review-date { font-size: 12px; color: var(--text-muted); }
.review-mini-ratings { display: flex; gap: 10px; font-size: 12px; margin-bottom: 6px; color: var(--text-dim); }
.review-text { font-size: 13px; line-height: 1.5; margin: 0; color: var(--text-dim); }

/* Spot map picker */




/* ================================================================
   COMMENTS
   ================================================================ */
.comments-section { margin-top: 24px; }
.comments-section h3 { font-size: 18px; margin-bottom: 14px; font-weight: 700; }
.comment { padding: 12px 0; border-bottom: 1px solid var(--border-light); }
.comment .comment-author {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: var(--text); margin-bottom: 4px; text-decoration: none;
}
.comment p { font-size: 14px; line-height: 1.55; }
.comment > .comment-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; display: block; }
.comment-input { display: flex; gap: 8px; margin-top: 14px; }
.comment-input input { flex: 1; background: var(--card); }
.comment-input button {
  background: var(--primary); color: var(--btn-text); border: none;
  border-radius: var(--radius-sm); padding: 10px 16px; cursor: pointer;
  transition: all var(--transition); font-family: inherit; font-weight: 700;
}
.comment-input button:hover { background: var(--primary-dark); }

/* Inline Comments */
.post-comments { border-top: 1px solid var(--border-light); margin-top: 8px; padding-top: 8px; }
.comments-list { max-height: 400px; overflow-y: auto; overflow-x: hidden; }
.comment-thread { border-bottom: 1px solid rgba(255,255,255,0.04); }
.comment-thread:last-child { border-bottom: none; }
.comment-item {
  display: flex; gap: 10px; padding: 8px 16px 4px;
  align-items: flex-start;
}
.comment-item--reply { padding-inline-start: 46px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; cursor: pointer; }
.comment-item--reply .comment-avatar { width: 26px; height: 26px; }
.comment-avatar-placeholder {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0; cursor: pointer;
}
.comment-item--reply .comment-avatar-placeholder { width: 26px; height: 26px; }
.comment-content { flex: 1; min-width: 0; }
.comment-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.comment-author { font-weight: 700; font-size: 13px; color: var(--text); text-decoration: none; }
.comment-author:hover { text-decoration: underline; }
.comment-text { font-size: 14px; line-height: 1.45; color: var(--text); word-break: break-word; white-space: pre-wrap; }
.comment-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 4px; margin-bottom: 6px;
  font-size: 12px; color: var(--text-muted); padding-inline-end: 2px;
}
.comment-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.comment-actions button {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  font-size: 12px; padding: 0; display: flex; align-items: center; gap: 3px; transition: color 0.15s;
}
.comment-actions button:hover { color: var(--text); }
/* Кнопка лайка коммента/ответа — нормальный тап-таргет (была крошечная) */
.comment-actions .comment-like-btn {
  margin-inline-start: auto; padding: 5px 8px; gap: 4px; font-size: 13px; font-weight: 600;
  border-radius: var(--action-btn-radius); -webkit-tap-highlight-color: transparent;
}
.comment-actions .comment-like-btn:active { background: var(--primary-light); }
.comment-like-btn.liked { color: var(--danger); }
.comment-delete-btn { opacity: 0; transition: opacity 0.15s, color 0.15s !important; }
.comment-item:hover .comment-delete-btn { opacity: 1; }
.comment-delete-btn:hover { color: var(--danger) !important; }

/* Меню "···" для своих комментариев */
.comment-menu-wrap { position: relative; display: inline-flex; }
.comment-menu-btn {
  font-size: 13px; letter-spacing: 1px; padding: 0 4px;
  color: var(--text-dim); line-height: 1;
}
.comment-menu-btn:hover { color: var(--text); }
.comment-menu-popup {
  position: absolute; bottom: 100%; left: 0; z-index: 20;
  background: var(--card-bg2, #242b26); border: 1px solid var(--border-light);
  border-radius: 8px; padding: 4px 0; min-width: 140px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.comment-menu-popup button {
  display: block; width: 100%; text-align: start;
  padding: 7px 12px; font-size: 13px; color: var(--text);
}
.comment-menu-popup button:hover { background: rgba(255,255,255,0.06); }
.comment-menu-delete { color: var(--danger) !important; }

/* Редактирование комментария */
.comment-edit-wrap { margin: 4px 0; }
.comment-edit-input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 14px;
  padding: 6px 8px; resize: none; font-family: inherit;
}
.comment-edit-actions { display: flex; gap: 6px; margin-top: 4px; }
.comment-edit-save {
  background: var(--accent); color: #000;
  border-radius: var(--radius-xs); padding: 4px 12px; font-size: 13px; font-weight: 600;
}
.comment-edit-cancel {
  color: var(--text-dim); font-size: 13px; padding: 4px 8px;
}
.comment-edited { font-size: 11px; color: var(--text-dim); }
.show-replies-btn {
  display: block; margin: 0 12px 8px 46px;
  font-size: 13px; color: var(--primary); font-weight: 500;
  background: none; border: none; cursor: pointer; padding: 0;
}
.show-replies-btn:hover { text-decoration: underline; }
.comments-empty { padding: 12px; color: var(--text-muted); font-size: 13px; }
/* Quick comment bar — always visible under each post */
.post-quick-comment-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; border-top: 1px solid var(--border-light); margin-top: 0;
}
.comment-avatar-xs {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--card); border: 1px solid var(--border);
}
.comment-avatar-xs.comment-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.quick-comment-form {
  flex: 1; display: flex; align-items: center; gap: 2px;
  border-radius: 20px;
}
/* Подсветка зоны при перетаскивании файла на поле комментария */
.quick-comment-form--dragover {
  outline: 2px dashed var(--primary); outline-offset: 3px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.quick-comment-form input,
.quick-comment-form textarea {
  /* font-size 16px ОБЯЗАТЕЛЬНО: при <16px iOS зумит страницу на фокусе (поле «прыгает»,
     кажется недоступным). 16px убирает авто-зум. */
  flex: 1; border: 1px solid var(--border-light); border-radius: 20px;
  padding: 8px 14px; font-size: 16px; background: var(--card); color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.quick-comment-form input:focus,
.quick-comment-form textarea:focus { border-color: var(--border); }
/* Авторост до ~5 строк; дальше — внутренний скролл (высоту ведёт JS по scrollHeight).
   min-height перебивает глобальный textarea{min-height:80px} */
.quick-comment-form textarea {
  resize: none; line-height: 20px; height: 38px; min-height: 38px; max-height: 130px;
  overflow-y: auto; font-family: inherit; display: block;
  scrollbar-width: thin;
}
.quick-comment-form button[type="submit"] {
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary);
  color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* View all comments link */
.post-view-all-comments {
  display: block; width: 100%; text-align: start; padding: 4px 12px 6px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none;
  cursor: pointer; transition: color 0.15s;
}
.post-view-all-comments:hover { color: var(--primary); }

/* Show more older comments */
.show-more-comments-btn {
  display: block; width: 100%; text-align: center; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--primary); background: none; border: none;
  cursor: pointer; border-bottom: 1px solid var(--border-light); margin-bottom: 4px;
}

/* "Новое" badge on fresh posts */
.post-badge-new {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: var(--radius-xs); background: var(--primary); color: var(--btn-text);
  letter-spacing: 0.03em; line-height: 1.5;
}
.post-badge-hot {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 1px 6px;
  border-radius: var(--radius-xs); background: rgba(201,168,118,0.10);
  border: 1px solid rgba(201,168,118,0.18); color: var(--orange);
  letter-spacing: 0.02em; line-height: 1.5;
}

/* Like count pop animation */
@keyframes like-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.like-count-anim { animation: like-pop 0.25s ease; }

/* Feed filter chips — minimal text-tab style */
.feed-filter-chips {
  display: flex; gap: 0; padding: 0 0 2px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 8px;
}
.feed-filter-chips::-webkit-scrollbar { display: none; }
.feed-chip {
  flex-shrink: 0; padding: 6px 14px 8px; font-size: 13px; font-weight: 500;
  border: none; background: none; color: var(--text-muted);
  cursor: pointer; transition: color 0.15s; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.feed-chip.active {
  color: var(--primary); border-bottom-color: var(--primary); font-weight: 600;
}
.feed-chip:hover:not(.active) { color: var(--text-dim); }

.comment-form {
  display: flex; align-items: center; gap: 8px; padding: 8px 0 0;
  border-top: 1px solid var(--border-light); margin-top: 4px;
}
.comment-form-avatar { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.comment-form input {
  flex: 1; border: 1px solid var(--border-light); border-radius: 20px;
  padding: 8px 14px; font-size: 13px; background: var(--card); color: var(--text); outline: none;
  transition: border-color 0.15s;
}
.comment-form input:focus { border-color: var(--border); }
.comment-form input:disabled { opacity: 0.6; cursor: pointer; }
.comment-form button[type="submit"] {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
  color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.comment-form button[type="submit"]:disabled { opacity: 0.4; cursor: default; }

/* ================================================================
   PROFILE
   ================================================================ */




/* Кнопка настроек поверх канвы (вместо шестерёнки в шапке) */





/* Subtle banner strip at top */



/* Compact identity row: avatar · name/link · settings */






button.profile-settings-icon { cursor: pointer; font: inherit; padding: 0; }


.avatar-online-wrap-md { position: relative; width: 56px; height: 56px; flex-shrink: 0; }

/* Compact avatar */

















/* Без uppercase: «ПОДПИСЧИКОВ» не влезает в колонку на 360px */

@media (max-width: 400px) {
  .profile-stats span { font-size: 10px; }
  .profile-stats .profile-stat-btn { padding: 6px 2px; }
}


.badge-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); padding: 6px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  border: 1px solid var(--border-light); box-shadow: var(--shadow-xs);
}
.badge-emoji { font-size: 16px; }
.badge-name { font-size: 12px; }



.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.stat-card {
  text-align: center; padding: 8px 4px;
  background: var(--bg-warm); border-radius: var(--radius-xs);
}
/* Кликабельная плитка: без браузерного дефолт-бордера кнопки */
.stat-card--btn {
  border: 1px solid var(--border-light); font-family: inherit; color: inherit;
  cursor: pointer; width: 100%; transition: border-color 0.15s;
}
.stat-card--btn:hover { border-color: var(--border); }
.stat-card--btn:active { transform: scale(0.97); }
.stat-value { font-size: 16px; font-weight: 800; color: var(--text); }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.species-breakdown { display: flex; flex-direction: column; gap: 6px; }
.species-stat-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.species-stat-name { width: 60px; font-weight: 700; color: var(--text); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.species-stat-bar-container { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.species-stat-bar { height: 100%; background: color-mix(in srgb, var(--primary) 75%, transparent); border-radius: 4px; min-width: 4px; transition: width 0.3s; }
.species-stat-info { font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }





/* Запись в ленту участника («стена») */
.wall-composer { margin-bottom: 2px; }
.wall-composer-trigger {
  width: 100%; padding: 10px 14px; text-align: start;
  background: var(--card); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.wall-composer-trigger:hover { border-color: var(--primary); color: var(--primary); }
.wall-composer-form {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.wall-composer-input {
  width: 100%; resize: none; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  padding: 8px 10px; font-size: 14px; font-family: inherit; line-height: 1.4;
  min-height: 0;
}
.wall-composer-input:focus { outline: none; border-color: var(--primary); }
.wall-composer-error { font-size: 12px; color: var(--danger); }
.wall-composer-actions { display: flex; justify-content: flex-end; gap: 6px; }
.wall-composer-cancel {
  padding: 0 14px; height: var(--btn-h-md); border-radius: var(--btn-radius);
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  font-size: 13px; font-weight: var(--btn-weight); font-family: inherit; cursor: pointer;
}
.wall-composer-send {
  padding: 0 16px; height: var(--btn-h-md); border-radius: var(--btn-radius);
  background: var(--primary); border: 1px solid var(--primary); color: var(--bg);
  font-size: 13px; font-weight: var(--btn-weight); font-family: inherit; cursor: pointer;
}
.wall-composer-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Пригласи друга — единая карточка (эталон из «Конкурсов») */
.invite-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 14px; margin-top: 0;
}
.invite-card-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px;
}
.invite-card-sub {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.45; margin: 0 0 10px;
}
.invite-card-preview {
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-input, var(--bg)); color: var(--text-dim);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; margin-bottom: 10px;
}
.invite-card-stats {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light);
  font-size: 12.5px; color: var(--text-muted);
}
.invite-card-stats b { color: var(--text); }

/* Referral card — dark theme */
.referral-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 12px;
  margin-top: 0;
}
.referral-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.referral-emoji { font-size: 24px; }
.referral-title {
  font-weight: 700; font-size: 14px; color: var(--text);
  margin-bottom: 1px;
}
.referral-bonus { font-size: 12px; }
.referral-stats-row {
  font-size: 12px; color: var(--text-muted);
  padding: 6px 0 8px; border-bottom: 1px solid var(--border-light); margin-bottom: 8px;
}
.referral-stats-row b { color: var(--text); }

.referral-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-xs);
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
}
.referral-link-url {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-dim);
}
.referral-link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  color: var(--primary); font-size: 12px; font-weight: 600;
  font-family: inherit; flex-shrink: 0;
}
.referral-link-btn:hover { color: var(--primary-dark); }

/* Compact mini share icons */
.referral-mini-icons {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.referral-mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  text-decoration: none; border: none; cursor: pointer;
  font-family: inherit; transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.referral-mini-btn:hover { opacity: 0.85; transform: scale(1.08); }
.referral-mini-btn.referral-tg { background: #229ED9; color: #fff; }
.referral-mini-btn.referral-wa { background: #25D366; color: #fff; }
.referral-mini-btn.referral-vk { background: #0077ff; color: #fff; }
.referral-mini-btn:not(.referral-tg):not(.referral-wa):not(.referral-vk) {
  background: var(--bg-warm); border: 1px solid var(--border); color: var(--text-muted);
}

/* Fish Shop — dark theme */





















/* Post follow button (in post header next to author) */
/* Старая кнопка (в заголовке) — оставляем для возможных других мест */
.post-follow-btn {
  margin-inline-start: auto; margin-inline-end: 8px;
  padding: 4px 12px; height: 26px;
  background: var(--primary); color: var(--bg);
  border: none; border-radius: 14px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; flex-shrink: 0;
  transition: background 0.15s;
}
.post-follow-btn:hover { background: var(--primary-dark); }
.post-follow-btn.is-followed {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
}
.post-follow-btn.is-followed:hover {
  background: var(--bg-warm); color: var(--text);
}
/* Кнопка "Подписаться" в action bar */
.post-follow-btn-action {
  margin-inline-start: auto;
  padding: 4px 11px; height: 28px;
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary); border-radius: 14px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; flex-shrink: 0; white-space: nowrap;
  transition: all 0.15s;
}
.post-follow-btn-action--header { margin-inline-start: 0; margin-inline-end: 4px; }
/* Свёрнутое состояние «уже подписан» — кружок с галочкой того же роста, что значки */
.post-follow-btn-action--compact {
  width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
}
.post-follow-btn-action:hover { background: var(--primary-light); }
.post-follow-btn-action.is-followed {
  color: var(--text-muted); border-color: var(--border);
}
.post-follow-btn-action.is-followed:hover { background: var(--bg-warm); color: var(--text); }

/* Right sidebar: wide "Create post" CTA (no longer used — moved to header) */
.sidebar-create-post {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; margin-bottom: 14px;
  background: var(--primary); color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background 0.15s;
}
.sidebar-create-post:hover { background: var(--primary-dark); color: var(--bg); }
.sidebar-create-post svg { flex-shrink: 0; }

/* Header "Create post" button — sits next to search */
.header-create-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 20px; height: 36px;
  background: var(--primary); color: var(--bg);
  border-radius: var(--radius-xs);
  font-size: 13.5px; font-weight: 700;
  text-decoration: none; flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.15s;
}
.header-create-btn:hover { background: var(--primary-dark); color: var(--bg); }
.header-create-btn svg { flex-shrink: 0; }

/* Linked accounts widget */
.linked-accounts {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 16px; margin-top: 16px;
}
.linked-accounts-title {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 12px;
}
.linked-flash {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-xs);
  font-size: 13px; margin-bottom: 10px;
}
.linked-flash-ok { background: var(--success-light); color: var(--success); border: 1px solid var(--success); }
.linked-flash-err { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger); }
.linked-list { display: flex; flex-direction: column; gap: 10px; }
.linked-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-xs);
  background: var(--bg-warm);
}
.linked-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.linked-info { flex: 1; min-width: 0; }
.linked-name { font-size: 13px; font-weight: 700; color: var(--text); }
.linked-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linked-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-xs);
  background: var(--primary); color: var(--bg); border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: opacity 0.15s;
}
.linked-btn:hover { opacity: 0.85; }
.linked-btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.linked-btn-danger:hover { background: var(--danger-light); opacity: 1; }

/* Google deprecation warning */
.linked-google-warning {
  display: flex; gap: 10px; align-items: flex-start;
  background: #2d1a00; border: 1px solid #f59e0b; border-radius: 8px;
  padding: 12px; margin-bottom: 12px; color: var(--warning);
}
.linked-google-warning svg { flex-shrink: 0; margin-top: 2px; color: var(--warning); }
.linked-google-warning strong { font-size: 13px; display: block; margin-bottom: 4px; }
.linked-google-warning p { font-size: 12px; color: #d1a44a; margin: 0; line-height: 1.5; }
.linked-deadline-badge {
  font-size: 10px; font-weight: 700; background: var(--warning); color: #000;
  border-radius: 4px; padding: 1px 5px; margin-inline-start: 6px; vertical-align: middle;
}

/* Email+password form */
.linked-row--col { flex-direction: column; align-items: stretch; }
.linked-row-main { display: flex; align-items: center; gap: 10px; }
.linked-password-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.linked-input { background: var(--bg-2, #1a1a2e); border: 1px solid var(--border); border-radius: var(--input-radius); padding: 8px 12px; font-size: 13px; color: var(--text); width: 100%; box-sizing: border-box; }
.linked-input:focus { outline: none; border-color: var(--primary); }
.linked-password-field { position: relative; }
.linked-password-field .linked-input { padding-inline-end: 36px; }
.linked-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; display: flex; }
.linked-btn-primary { background: var(--primary); color: var(--btn-text); border: none; justify-content: center; opacity: 1; }
.linked-btn-primary:hover { opacity: 0.9; }
.linked-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
/* Инлайновая ссылка внутри статуса (напр. «подтвердить почту») */
.linked-inline-link { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; }
.linked-inline-link:hover { opacity: 0.85; }
/* Статус-строка с бейджем может переноситься (email + галочка/ссылка) */
.linked-row--col .linked-meta { white-space: normal; overflow: visible; }
/* Телефон: зелёная иконка бренда, значок белый */
.linked-icon--phone { background: #34C759; color: #fff; }
/* Бейдж «✓ подтверждён» в статусе способа входа */
.linked-ok-badge { color: var(--success); margin-inline-start: 6px; }
/* Пояснительная подсказка под полем (звонок/письмо) */
.linked-hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* Пульсирующая точка «ждём звонок» (callcheck-поллинг) */
.linked-wait-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--success); margin-inline-end: 4px; vertical-align: middle; animation: linked-wait-pulse 1s ease-in-out infinite; }
@keyframes linked-wait-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* VK login button (deprecated — use oauth-btn) */
.vk-login-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 16px; border-radius: var(--radius-xs);
  background: var(--bg-warm); color: var(--text); text-decoration: none;
  border: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.vk-login-btn:hover { background: var(--border-light); border-color: var(--text-muted); color: var(--text); }
.vk-login-btn svg { flex-shrink: 0; color: #07f; }

/* Bot phone login button (deprecated — use oauth-btn) */
.bot-login-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 44px; padding: 0 16px; border-radius: var(--radius-xs);
  background: var(--bg-warm); color: var(--text); border: 1px solid var(--border); cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.bot-login-btn:hover { background: var(--border-light); border-color: var(--text-muted); }
.bot-login-btn svg { color: #229ED9; flex-shrink: 0; }
.bot-login-btn:disabled { opacity: 0.6; cursor: wait; }
.bot-login-waiting {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-xs);
  background: var(--bg-warm); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-dim);
}
.bot-login-spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.9s linear infinite; }
.bot-wait-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
  display: inline-block; flex-shrink: 0;
}
.bot-login-msg { flex: 1; }
.bot-login-link {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  color: var(--primary); text-decoration: none; font-weight: 600;
}
.bot-login-link:hover { text-decoration: underline; }




.avatar-upload label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  color: var(--primary); justify-content: center; font-weight: 700;
}

/* Online indicators */
.avatar-online-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-online-wrap-lg { display: inline-block; position: relative; }

/* Avatar upload overlay */
.avatar-upload-wrap { cursor: pointer; }
.avatar-upload-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;
  font-size: 22px; opacity: 0; transition: opacity 0.18s; z-index: 3;
}
.avatar-upload-wrap:hover .avatar-upload-overlay { opacity: 1; }
.avatar-upload-overlay.loading { opacity: 1; font-size: 14px; color: #fff; }
.online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--card); z-index: 2;
}
.online-dot-lg { width: 14px; height: 14px; bottom: 2px; right: 2px; border-width: 3px; }

.status-online { color: var(--success); font-weight: 700; }
.status-offline { color: var(--text-muted); }

/* ================================================================
   NOTIFICATIONS
   ================================================================ */
/* Notification page filter row: [badge] [chips] */
.notif-filter-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 0 12px; flex-wrap: nowrap;
}
/* «N новых» — это тот же фильтр, что и остальные, поэтому геометрия .seg-btn
   (высота/радиус/шрифт), отличается только красным акцентом счётчика. */
.seg-btn--alert { background: var(--danger); border-color: var(--danger); color: #fff; }
.seg-btn--alert:hover { background: var(--danger); border-color: var(--danger); color: #fff; opacity: 0.9; }
.seg-btn--alert.active { background: var(--danger); border-color: var(--danger); color: #fff; opacity: 0.72; }
.notif-filter-chips {
  display: flex; gap: 6px; overflow-x: auto; flex: 1;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.notif-filter-chips::-webkit-scrollbar { display: none; }

.notif-list { display: flex; flex-direction: column; gap: 4px; }

/* Предложение включить уведомления — появляется там, где человеку уже есть
   что получать: в колокольчике и после первого поста. Не баннер во всю ширину
   экрана, а карточка в общем ритме списка. */
.push-prompt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin: 0 0 8px;
  border: 1px solid var(--border); border-radius: var(--card-radius, 14px);
  background: var(--primary-bg, var(--bg-soft)); color: var(--text);
}
.push-prompt__ico { flex: 0 0 auto; display: flex; color: var(--primary); padding-top: 1px; }
.push-prompt__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.push-prompt__text strong { font-size: 14px; font-weight: 700; line-height: 1.3; }
.push-prompt__text span { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.push-prompt__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
.push-prompt__yes {
  padding: 7px 14px; border: none; border-radius: 999px;
  background: var(--primary); color: var(--btn-text);
  font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.push-prompt__yes:disabled { opacity: .65; cursor: default; }
.push-prompt__later {
  padding: 5px 10px; border: none; background: none;
  color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.push-prompt--ok { align-items: center; color: var(--success); font-size: 13.5px; font-weight: 600;
  animation: push-prompt-ok-out 2.6s ease forwards; }
/* Подтверждение гаснет само: последние полсекунды плавно уходит, затем компонент снимается. */
@keyframes push-prompt-ok-out { 0%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 380px) {
  /* На узком экране кнопки уезжают под текст, иначе «Включить» жмётся в две строки. */
  .push-prompt { flex-wrap: wrap; }
  .push-prompt__actions { flex-direction: row; width: 100%; justify-content: flex-end; }
}
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text); transition: all var(--transition);
  text-decoration: none; border: 1px solid transparent;
}
.notif-item:hover { background: var(--bg-warm); }
.notif-item.unread { background: var(--primary-light); border-color: var(--primary-light); }
.notif-item--order { border-inline-start: 3px solid var(--primary); }
.notif-item--order.unread { border-inline-start-color: var(--primary); }
.notif-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--primary); background: var(--primary-bg);
}
.notif-content { flex: 1; min-width: 0; }
/* Строка [заголовок | время] — компактно, как .chat-conv-top (образец ChatPage) */
.notif-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.notif-title {
  font-size: 14px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-body { font-size: 13px; color: var(--text-dim); margin-top: 1px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

/* ================================================================
   ROADMAP
   ================================================================ */
.roadmap-page { padding-bottom: 80px; }
.roadmap-intro { margin-bottom: 20px; color: var(--text-dim); font-size: 15px; line-height: 1.65; }
.roadmap-timeline { display: flex; flex-direction: column; gap: 16px; }

.roadmap-phase {
  background: var(--card); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-light); transition: all var(--transition);
}
.roadmap-phase:hover { box-shadow: var(--shadow); }
.phase-current { border-inline-start: 3px solid var(--primary); }
.phase-done { border-inline-start: 3px solid var(--success); }
.phase-planned { border-inline-start: 3px solid var(--border); }

.phase-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.phase-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; color: white; flex-shrink: 0;
}
.phase-icon-current { background: var(--primary); }
.phase-icon-done { background: var(--success); }
.phase-icon-planned { background: var(--text-muted); }

.phase-title-block { flex: 1; }
.phase-title-block h2 { font-size: 16px; font-weight: 800; margin: 0; line-height: 1.3; }
.phase-period { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.phase-status-badge {
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 16px;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px;
}
.status-current { background: var(--primary-light); color: var(--primary); }
.status-done { background: var(--success-light); color: var(--success); }
.status-planned { background: var(--bg); color: var(--text-muted); }

.phase-goal { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; font-style: italic; }
.phase-features { display: flex; flex-direction: column; gap: 6px; }
.feature-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim); padding: 4px 0;
}
.feature-item svg { flex-shrink: 0; }
.feature-item.done { color: var(--success); }
.feature-item.done svg { color: var(--success); }

.phase-progress { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.phase-progress-bar { flex: 1; height: 6px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.phase-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.6s ease; }
.phase-progress-text { font-size: 12px; color: var(--text-muted); font-weight: 700; white-space: nowrap; }

.roadmap-backlog { margin-top: 24px; }
.roadmap-backlog h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.backlog-items { display: flex; flex-direction: column; gap: 6px; }
.backlog-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim);
  padding: 8px 14px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.backlog-item svg { color: var(--text-muted); flex-shrink: 0; }

.roadmap-stats {
  margin-top: 24px; padding: 20px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.roadmap-stats h3 { font-size: 16px; margin-bottom: 16px; color: var(--text); font-weight: 700; }
.roadmap-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* ================================================================
   AVATARS
   ================================================================ */
.avatar-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-xs { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-lg { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin: 0 auto; position: relative; }
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: var(--bg); font-weight: 800; font-size: inherit;
}
.avatar-sm.avatar-placeholder { font-size: 16px; }
.avatar-xs.avatar-placeholder { font-size: 12px; }
.avatar-lg.avatar-placeholder { font-size: 32px; }

/* ================================================================
   SKELETON LOADING
   ================================================================ */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.skeleton-posts { display: flex; flex-direction: column; gap: 12px; }
.skeleton-card {
  background: var(--card); border-radius: var(--radius-sm); padding: 16px;
  border: 1px solid var(--border-light);
}
.skeleton-header { display: flex; gap: 10px; align-items: center; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e0e0e0; animation: skeleton-pulse 1.5s infinite; }
.skeleton-lines { flex: 1; }
.skeleton-line { height: 10px; border-radius: 5px; background: #e0e0e0; animation: skeleton-pulse 1.5s infinite; margin-bottom: 4px; }
.skeleton-line.w100 { width: 100%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w30 { width: 30%; }
.skeleton-body { height: 120px; border-radius: var(--radius-xs); margin-top: 12px; background: #e8e8e8; animation: skeleton-pulse 1.5s infinite; }
.skeleton-footer { display: flex; gap: 16px; margin-top: 12px; }

/* ================================================================
   UTILITY
   ================================================================ */
.loading { text-align: center; padding: 48px 20px; color: var(--text-muted); font-size: 15px; }
.empty-state {
  text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px;
  background: var(--card); border-radius: var(--radius); border: 1px dashed var(--border);
  margin: 8px 0; line-height: 1.6;
}
.feed-pulse-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 16px; font-size: 11px; color: var(--text-muted);
}
.feed-pulse-chip--btn {
  background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.feed-pulse-chip--btn:active { opacity: 0.7; }
.feed-pulse-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
  box-shadow: 0 0 4px rgba(127,161,122,0.5);
}

/* ===== Region Users Modal ===== */
.region-users-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end;
}
.region-users-sheet {
  width: 100%; max-height: 85dvh;
  background: #111a14;
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  box-shadow: 0 -4px 32px rgba(0,0,0,0.5);
  /* No overflow:hidden — allows sort dropdown to render outside bounds */
}
/* Clip only the top corners visually via pseudo-element */
.region-users-sheet::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px;
  background: #111a14; border-radius: 20px 20px 0 0; pointer-events: none; z-index: 0;
}
.region-users-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.15);
  margin: 10px auto 0;
  flex-shrink: 0;
}
.region-users-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px 10px;
  flex-shrink: 0;
}
.region-users-title { display: flex; flex-direction: column; gap: 3px; }
.region-users-title > span:first-child { font-size: 16px; font-weight: 700; color: var(--text); }
.region-users-stats { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.region-users-online-chip {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--primary-light); color: var(--primary);
  border-radius: var(--radius-sm); padding: 1px 7px; font-size: 11px; font-weight: 600;
}
.region-users-close { flex-shrink: 0; }
.region-users-controls {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 10px;
  flex-shrink: 0;
}
.region-users-sort-wrap { position: relative; }
.region-users-sort-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border-radius: 14px;
  background: var(--primary-bg); border: 1px solid rgba(127,161,122,0.2);
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.region-users-sort-menu {
  position: absolute; bottom: calc(100% + 6px); top: auto; left: 0; z-index: 200;
  background: #111a14; border: 1px solid rgba(127,161,122,0.18);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  min-width: 160px;
}
.region-users-sort-item {
  display: block; width: 100%; padding: 10px 14px; text-align: start;
  font-size: 13px; font-family: inherit; background: none; border: none; cursor: pointer;
  color: var(--text-muted); transition: background 0.1s;
}
.region-users-sort-item + .region-users-sort-item { border-top: 1px solid rgba(255,255,255,0.04); }
.region-users-sort-item.active { color: var(--primary); font-weight: 600; }
.region-users-online-filter {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border-radius: 14px;
  background: none; border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-muted); font-size: 12px; font-family: inherit; cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.region-users-online-filter.active {
  background: rgba(127,161,122,0.14); border-color: rgba(127,161,122,0.3);
  color: var(--primary);
}
.region-users-list { overflow-y: auto; flex: 1; padding: 0 0 16px; }
.region-users-loading,
.region-users-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
.region-users-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 16px;
  background: none; border: none; cursor: pointer; text-align: start;
  font-family: inherit;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.region-users-item:active { background: rgba(255,255,255,0.04); }
.region-users-rank { font-size: 12px; color: var(--text-muted); width: 18px; text-align: end; flex-shrink: 0; }
.region-users-avatar-wrap { position: relative; flex-shrink: 0; }
.region-users-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.region-users-avatar-placeholder {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(127,161,122,0.2); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.region-users-online-dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--surface);
}
.region-users-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.region-users-name { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region-users-pro { font-size: 9px; background: var(--warning); color: #000; border-radius: 4px; padding: 1px 4px; margin-inline-start: 5px; font-weight: 700; vertical-align: middle; }
.region-users-meta { display: flex; gap: 10px; color: var(--text-muted); font-size: 11px; }
.region-users-meta span { display: inline-flex; align-items: center; gap: 3px; }
.region-users-trophy { flex-shrink: 0; }
.region-users-trophy-0 { color: #FFD700; }
.region-users-trophy-1 { color: #C0C0C0; }
.region-users-trophy-2 { color: #CD7F32; }

/* Radius badge in city sheet */
.city-sheet-radius-badge {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: rgba(127,161,122,0.18); color: var(--primary);
  font-size: 11px; font-weight: 600; border-radius: var(--radius-sm);
  padding: 2px 8px; pointer-events: none; white-space: nowrap;
}

.feed-fallback-banner {
  margin: 12px 0; padding: 10px 14px;
  background: var(--primary-bg); border: 1px solid var(--primary-light);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--text-dim);
  text-align: center;
}
.feed-search-banner {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 4px; padding: 8px 14px;
  background: var(--card); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-muted);
}
.feed-search-clear {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  font-size: 12px; padding: 2px 6px; border-radius: var(--radius-xs);
  border: 1px solid rgba(255,255,255,0.1);
}
.feed-search-clear:hover { color: var(--text); }

/* ================================================================
   DIARY
   ================================================================ */
.diary-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.diary-tabs .chip { display: flex; align-items: center; gap: 6px; }
/* Рейтинг: горизонтально прокручиваемые вкладки */
.rating-tabs {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding-bottom: 2px;
}
.rating-tabs::-webkit-scrollbar { display: none; }
.rating-tabs .chip { flex-shrink: 0; white-space: nowrap; }

.trips-list { display: flex; flex-direction: column; gap: 10px; }
.trip-card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-xs);
  border: 1px solid var(--border-light); color: var(--text);
  transition: all var(--transition); display: block;
}
.trip-card:hover { box-shadow: var(--shadow-md); }
.trip-date { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-bottom: 4px; }
.trip-main h3 { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.trip-location { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
.trip-stats-row {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  font-size: 13px; color: var(--accent); font-weight: 700;
}
.trip-stats-row span { display: flex; align-items: center; gap: 3px; }
.trip-rating { display: flex; gap: 1px; }

/* Diary stats */

.stats-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.stat-num { display: block; font-size: 26px; font-weight: 800; color: var(--primary); }
.stat-label { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.stats-section { margin-bottom: 16px; }
.stats-section h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.stats-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--card); border-radius: var(--radius-xs); margin-bottom: 4px;
  border: 1px solid var(--border-light);
}
.stats-rank { font-size: 12px; color: var(--text-muted); font-weight: 700; width: 24px; }
.stats-name { flex: 1; font-size: 14px; font-weight: 600; }
.stats-value { font-size: 13px; color: var(--accent); font-weight: 700; }

/* Export dropdown */
.export-wrapper { position: relative; margin-inline-start: auto; }
.export-dropdown {
  position: absolute; right: 0; top: 36px; z-index: 50;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  overflow: hidden; min-width: 140px;
}
.export-dropdown button {
  display: block; width: 100%; padding: 10px 16px; text-align: start;
  background: none; border: none; font-size: 14px; font-weight: 600;
  color: var(--text); cursor: pointer; transition: background var(--transition);
}
.export-dropdown button:hover { background: var(--bg-warm); }

/* Analytics */
.analytics-fav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.analytics-fav { background: var(--card); border-radius: var(--radius-sm); padding: 12px 16px; border: 1px solid var(--border-light); }
.analytics-fav-label { display: block; font-size: 11px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.analytics-fav-value { display: block; font-size: 15px; font-weight: 700; color: var(--text); margin-top: 2px; }

/* Bar Charts */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 8px 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.bar-value { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px; }
.bar-track { flex: 1; width: 100%; max-width: 36px; background: var(--border-light); border-radius: 4px 4px 0 0; position: relative; display: flex; align-items: flex-end; }
.bar-fill { width: 100%; background: var(--primary); border-radius: 4px 4px 0 0; transition: height 0.4s ease; min-height: 4px; }
.bar-label { font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 4px; }

.hbar-chart { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: flex; align-items: center; gap: 10px; }
.hbar-name { font-size: 13px; font-weight: 600; width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { flex: 1; height: 18px; background: var(--border-light); border-radius: 4px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.4s ease; }
.hbar-value { font-size: 12px; font-weight: 700; color: var(--text-dim); width: 32px; text-align: end; }

/* ================================================================
   DIARY — «Профессиональная редакция»
   ================================================================ */
/* Горизонтально прокручиваемые вкладки дневника (5 шт) */
.diary-tabs.rating-tabs .chip { flex-shrink: 0; white-space: nowrap; }

/* Экспорт данных (вкладка Аналитика — доступ на мобиле) */


/* Синхронизация офлайн */


/* Поиск + фильтры */













/* Пустое состояние */






/* Фото в карточке выезда */
.trip-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; position: relative; }
.trip-photos.single { grid-template-columns: 1fr; }
.trip-photos img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
}
.trip-photos.single img { aspect-ratio: auto; height: 160px; }
.trip-photos img:first-child { border-start-start-radius: 10px; }
.trip-photos img:last-child { border-start-end-radius: 10px; }
.trip-photos.single img { border-radius: var(--radius-sm) 10px 0 0; }
.trip-photos-more {
  position: absolute; right: 4px; bottom: 4px;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 12px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-sm);
}
/* Видео-плитка в карточке выезда (плашка ▶) */
.trip-media-vid { position: relative; overflow: hidden; background: #000; }
.trip-media-vid video { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.trip-photos.single .trip-media-vid { border-radius: var(--radius-sm) 10px 0 0; }
.trip-photos.single .trip-media-vid video { aspect-ratio: auto; height: 160px; }
.trip-media-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,0.6); pointer-events: none;
}

/* PB-бейдж */
.trip-pb-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 8px;
  background: linear-gradient(135deg, #f0b429, #e88a1a); color: #fff;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-sm);
  vertical-align: middle;
}
/* Запись лежит на телефоне (ещё не загружена на klevat.ru) */
.trip-card--pending { border-style: dashed; border-color: var(--border); }
.trip-pending-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-warm); border: 1px solid var(--border-light);
  padding: 3px 8px; border-radius: var(--radius-sm);
}

/* Bottom-sheet (общий) */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.sheet-handle {
  width: 40px; height: 4px; border-radius: 2px; background: var(--border);
  margin: 0 auto 12px;
}









/* Bottom-sheet «в дневник?» */






@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Рекорды (PB по видам) */










/* Инсайты аналитики */




/* Год к году */





/* Heatmap-календарь */













/* Шаблоны выездов (DiaryEntry) */






/* Галерея фото в форме выезда */







/* ── iOS-safe верстка формы дневника: инпуты не переполняют и не наслаиваются ── */


/* Нативный индикатор календаря/часов в iOS/Safari не обрезаем */


.form-label--sm { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }



/* ── Черновик восстановлен ── */


/* ── Мульти-улов (каждая рыба отдельно) ── */
















/* ── Автодополнение вида рыбы ── */








/* GEAR — «Снаряжение» (Ф.экипировка): стили вынесены в pages/GearPage.css (только токены). */

/* ── Видео выезда ── */





/* ── Кнопка редактирования на превью фото ── */



/* ── Лайтбокс просмотра фото/видео ── */
.media-lightbox {
  position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
}
.media-lightbox-stage {
  max-width: 100vw; max-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 12px;
}
.media-lightbox-media { max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.media-lightbox-close {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 3010;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center;
}
.media-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 3010;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center;
}
.media-lightbox-prev { left: 10px; }
.media-lightbox-next { right: 10px; }
.media-lightbox-counter {
  position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 13px; font-weight: 600; background: rgba(0,0,0,0.5);
  padding: 4px 12px; border-radius: var(--radius); z-index: 3010;
}

/* ================================================================
   RECOMMENDATIONS
   ================================================================ */
.recommend-page { padding: 12px 0 80px; }
.rec-today {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg), var(--primary));
  color: white; margin-bottom: 14px;
}
.rec-today-species { font-size: 20px !important; }

/* Компактная сетка инструментов */
.rec-tools-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px;
}
.rec-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; background: var(--card);
  border: 1px solid var(--border-light); border-radius: 14px;
  text-decoration: none; color: var(--text); min-width: 0;
  transition: background 0.15s, transform 0.1s;
}
.rec-tile:active { transform: scale(0.97); background: var(--bg-warm); }
.rec-tile-emoji {
  width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.rec-tile-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.rec-tile-title {
  font-size: 13px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-tile-desc {
  font-size: 11px; color: var(--text-muted); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-today svg { opacity: 0.8; flex-shrink: 0; }
.rec-today-title { font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }
.rec-today-species { font-size: 24px; font-weight: 800; margin-top: 2px; }
.rec-today-score { font-size: 13px; opacity: 0.8; margin-top: 2px; }

.rec-section { margin-bottom: 20px; }
.rec-section h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.rec-species-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.rec-species-name { width: 70px; font-size: 13px; font-weight: 700; }

.rec-spot {
  padding: 14px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); margin-bottom: 8px;
}
.rec-spot-name { font-size: 15px; font-weight: 700; }
.rec-spot-reason { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
.rec-spot-species { font-size: 12px; color: var(--accent); font-weight: 700; margin-top: 4px; }

.rec-gear {
  display: block; padding: 14px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); margin-bottom: 8px; color: var(--text);
}
.rec-gear-species { font-size: 15px; font-weight: 700; color: var(--primary); }
.rec-gear-info { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.rec-gear-tip { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-style: italic; }

/* ================================================================
   PRO PAGE
   ================================================================ */
.pro-hero {
  text-align: center; padding: 36px 24px; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--bg), var(--primary), var(--primary-dark));
  border-radius: var(--radius); color: white;
  position: relative; overflow: hidden;
}
.pro-hero::after {
  content: ''; position: absolute; top: -40%; right: -20%;
  width: 240px; height: 240px; border-radius: 50%;
  background: rgba(255,255,255,0.06); pointer-events: none;
}
.pro-hero svg { color: #ffd700; margin-bottom: 8px; position: relative; z-index: 1; }
.pro-hero h2 { font-size: 28px; font-weight: 800; margin: 8px 0 4px; position: relative; z-index: 1; }
.pro-hero p { font-size: 15px; opacity: 0.85; position: relative; z-index: 1; }

.pro-active-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--success-light); color: var(--success);
  margin-bottom: 16px; border: 1px solid rgba(34,197,94,0.2);
}
.pro-active-banner strong { display: block; font-size: 15px; font-weight: 700; }
.pro-active-banner span { display: block; font-size: 12px; opacity: 0.8; }

.pro-features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.pro-feature {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}
.pro-feature-icon { color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.pro-feature-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.pro-feature-desc { font-size: 13px; color: var(--text-dim); }

.pro-plans { margin-bottom: 20px; }
.pro-plans h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.pro-plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pro-plan {
  padding: 20px; text-align: center; border-radius: var(--radius);
  background: var(--card); border: 2px solid var(--border); position: relative;
}
.pro-plan.best { border-color: var(--border); }
.pro-plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--btn-text); font-size: 10px; font-weight: 800;
  padding: 2px 10px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.3px;
}
.pro-plan-price { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.pro-plan-period { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.pro-plan-save { font-size: 12px; color: var(--success); font-weight: 700; margin-bottom: 10px; }
.pro-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 12px; }

/* ================================================================
   SHOPS
   ================================================================ */

.shops-list { display: flex; flex-direction: column; gap: 12px; }


















.booking-form textarea {
  width: 100%; min-height: 50px; border: 1.5px solid var(--border);
  border-radius: var(--radius-xs); padding: 8px 12px; font-size: 13px;
  font-family: inherit; margin-bottom: 8px; resize: vertical;
}
.booking-success { color: var(--success); font-weight: 700; padding: 8px 0; }

/* ================================================================
   RATING
   ================================================================ */
.rating-filter { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rating-list { display: flex; flex-direction: column; gap: 6px; }
.rating-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; background: var(--card); border-radius: 14px;
  border: 1px solid var(--border-light); color: var(--text); transition: all var(--transition);
}
.rating-row:hover { border-color: var(--primary); }
/* Ранг — чистый номер; топ-3 = медаль без кружка (без убогих градиентов) */
.rating-rank {
  min-width: 24px; text-align: center;
  font-size: 14px; font-weight: 800; color: var(--text-muted); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.rating-rank.top-1, .rating-rank.top-2, .rating-rank.top-3 {
  font-size: 20px; line-height: 1; color: inherit; background: none;
}

/* === Узаконенный переключатель (.seg-btn) — единый бренд-зелёный стиль ====
   Активный = залит --primary; неактивный = приглушённый; CTA = зелёный тинт.
   Использовать для ВСЕХ переключателей/табов вместо разнобоя chip/location-chip. */
.seg-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.seg-row--scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.seg-row--scroll::-webkit-scrollbar { display: none; }
.seg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--radius); flex-shrink: 0; white-space: nowrap;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--border-light);
  color: var(--text-dim); transition: all var(--transition); text-decoration: none;
}
.seg-btn:hover { border-color: var(--primary); color: var(--text); }
.seg-btn.active { background: var(--primary); border-color: var(--primary); color: var(--btn-text); }
.seg-btn--cta { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); font-weight: var(--btn-weight); }
.seg-btn--cta:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.seg-btn--sm { font-size: 12px; padding: 4px 10px; }

/* Underline-табы (главная навигация раздела — профессиональнее ряда пилюль) */
.rtab-bar { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; border-bottom: 1.5px solid var(--border); margin-bottom: 12px; scrollbar-width: none; -ms-overflow-style: none; }
.rtab-bar::-webkit-scrollbar { display: none; height: 0; }

/* Липкая под-панель табов (лента группы).
   top:0 — НЕ ошибка, не «чинить». Скролл-контейнер на мобиле — .app-main, а не окно:
   он флекс-элемент с overflow-y:auto, а у такого автоминимум высоты = 0, поэтому
   flex:1 даёт ему ровно экран минус шапка, и он скроллит внутри себя. Его верх уже
   на --header-height под фикс-шапкой, так что отсчёт sticky идёт оттуда: top:0 лепит
   панель прямо под шапку — верно.
   ПРОВЕРЕНО ЗАМЕРОМ (2026-07-15): поставил top:var(--header-height) — панель уехала
   вниз ровно на 56px (y 58 → 112) и накрыла первую строку контента. Ровно то, о чём
   предупреждал исходный комментарий. Откачено.
   На десктопе скроллит окно под фикс-тулбаром → отступ = высота шапки (ниже). */
.subtabs-sticky { position: sticky; top: 0; z-index: 20; background: var(--bg); }
/* Десктоп/планшет: НАД вкладками стоит sticky .page-hdr («← Название 🔍 ⚙️», top:64px,
   высота = padding 20 + кнопка). Раньше вкладки липли на --header-height(56) — ВЫШЕ шапки,
   и они НАКЛАДЫВАЛИСЬ (замер 2026-08: page-hdr 64..128, tabs 56..90). Липнем ПОД шапкой. */
@media (min-width: 768px) {
  .subtabs-sticky { top: calc(64px + var(--action-btn-size) + 20px); }
}
/* Лента группы = НАСТОЯЩИЙ чат: собственный скролл-контейнер фиксированной высоты
   (между вкладками и композером). Тогда:
   · вкладки статичны сверху (страница/окно не скроллятся — скроллит только лента),
     так что «слипание с хедером» и «уезжание табов» уходят сами;
   · короткий список прижат ВНИЗ к полю ввода (спейсер margin-top:auto), длинный —
     скроллится внутри; авто-скролл целит в саму ленту, не в окно.
   Замер 2026-07-16: раньше скроллило окно, .app-main резервировал таб-бар снизу →
   низ ленты не доходил до композера (константный отрыв ~102px). */
/* БАЗА = ДЕСКТОП. Здесь скроллит ОКНО (проверено: .app-main mainMax=0). Лента — flex-колонка;
   короткий список прижат вниз спейсером (min-height добивает до низа над свой PageHeader+вкладки),
   длинный — растёт, окно скроллит; padding очищает фикс-композер. */
.group-feed {
  display: flex; flex-direction: column;
  min-height: calc(100dvh - 174px);   /* ≈ глоб.шапка 56 + PageHeader ~84 + вкладки 34 */
  padding: 12px 0 80px;
}
.group-feed--compose { padding-bottom: 132px; }
.group-feed-anchor { display: block; margin-top: auto; }

/* МОБАЙЛ: лента — СВОЙ скроллер фикс.высоты (между вкладками и композером). Тогда вкладки
   статичны (окно не скроллит → не уезжают, не слипаются с хедером), а последнее сообщение
   всегда над полем ввода (спейсер-якорь). Замер 2026-07-16: отрыв 8–9px, вкладки не двигаются.
   PageHeader на мобиле скрыт, поэтому высота считается без него. */
@media (max-width: 767px) {
  .group-feed {
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    height: calc(100dvh - var(--header-height) - env(safe-area-inset-top, 0px) - 34px - var(--tab-height) - env(safe-area-inset-bottom, 0px));
    min-height: 0; padding: 12px 0 16px;
  }
  .group-feed--compose { padding-bottom: 74px; }   /* очистить фикс-композер (~66px) */
}

/* Табы заподлицо с шапкой: первый начинается на одной вертикали с кнопкой «назад»,
   последний заканчивается на одной вертикали с правой иконкой. Оба края — 12px от
   экрана: столько даёт .app-header-inner шапке и .app-main контенту, поэтому у самой
   полосы padding:0 (свой отступ добавлял бы вторые 12px и давал «полоску» слева). */
.rtab-bar--flush { padding: 0; }
/* Все переключатели одной ширины на всю полосу: первый начинается вровень
   с кнопкой «назад», последний заканчивается вровень с правой иконкой.
   flex:1 1 0 перебивает flex-shrink:0 из .rtab. */
.rtab-bar--flush .rtab { flex: 1 1 0; justify-content: center; }
.rtab {
  flex-shrink: 0; white-space: nowrap; background: transparent; cursor: pointer;
  padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  border: 1.5px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; margin-bottom: -1.5px; font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.rtab:hover { color: var(--text); }
/* Современная вкладка: скруглённый верх, прямой низ, «вырастает» от общей полосы;
   контур + лёгкая подложка вместо сплошной заливки. */
.rtab.active { color: var(--primary); font-weight: 700; border-color: var(--border); background: var(--card); }

/* Сегмент-контрол (iOS-стиль, связанные кнопки) — для тогглов из 2-3 опций */
.seg-group { display: inline-flex; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 2px; }
.seg-group button {
  border: none; background: none; padding: 6px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer;
  font-family: inherit; transition: all var(--transition);
}
.seg-group button.active { background: var(--primary); color: var(--btn-text); }

/* Ненавязчивая текст-ссылка-действие (вместо лишних кнопок) */
.rlink {
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.rlink:hover { color: var(--primary); }
.rating-info { flex: 1; min-width: 0; }
.rating-name { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rating-city { display: block; font-size: 11px; color: var(--text-muted); }
.rating-metric { text-align: end; flex-shrink: 0; }
.rating-value { display: block; font-size: 14px; font-weight: 800; color: var(--primary); }
.rating-sub { display: block; font-size: 11px; color: var(--text-muted); }
/* Рекорды по видам рыбы */
.rec-fish {
  width: 46px; height: 40px; object-fit: contain; flex-shrink: 0;
  background: var(--bg); border-radius: var(--radius-sm); padding: 2px;
}
.rating-row.rec-mine {
  border-color: #b6862f;
  background: linear-gradient(90deg, rgba(182,134,47,0.12), var(--card) 60%);
}
.rating-row.rec-mine .rating-sub { color: #c79412; font-weight: 800; }
.rating-sub.rec-lead { color: #c79412; font-weight: 800; }
.rating-sub.rec-open { color: #7fae6b; font-weight: 700; }

/* ================================================================
   CHALLENGES
   ================================================================ */
.challenges-list { display: flex; flex-direction: column; gap: 8px; }
.challenge-card {
  background: var(--card); border-radius: var(--radius);
  padding: var(--card-padding); box-shadow: var(--shadow-xs);
  cursor: pointer; transition: var(--transition);
  border: 1px solid var(--border-light);
}
.challenge-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.challenge-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.challenge-type-badge {
  color: white; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
}
.challenge-days { font-size: 12px; color: var(--text-muted); }
.challenge-card h3 { font-size: 16px; margin-bottom: 6px; font-weight: 700; }
.challenge-card p { font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.challenge-card-footer { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); }
.challenge-card-footer span { display: flex; align-items: center; gap: 4px; }
.challenge-arrow { margin-inline-start: auto; color: var(--text-muted); }

.challenge-detail { padding: 0 4px; }
.challenge-detail-badge {
  display: inline-flex; align-items: center; gap: 6px;
  color: white; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 8px;
}
.challenge-detail h2 { font-size: 20px; margin: 4px 0 6px; font-weight: 800; }
.challenge-detail-desc { color: var(--text-dim); margin-bottom: 8px; font-size: 14px; line-height: 1.45; }
.challenge-detail-meta { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; font-size: 13px; }
.challenge-detail-meta > div { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }
.challenge-days-left { color: var(--danger); font-weight: 700; font-size: 13px; }

.challenge-join-form {
  background: var(--primary-bg); padding: 12px; border-radius: var(--radius-sm); margin: 8px 0;
}
.challenge-join-form h3 { font-size: 14px; margin-bottom: 8px; font-weight: 700; }
.challenge-join-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.challenge-join-inputs input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; box-sizing: border-box;
}

.challenge-leaderboard { margin-top: 8px; }
.challenge-leaderboard h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 8px; font-weight: 700; }







/* Leaderboard Table (legacy, kept for back-compat) */









/* ── Challenge join form ─────────────────────────────────────── */
















/* Leaderboard photo modal */

























/* ── Leaderboard cards ───────────────────────────────────────── */














/* ================================================================
   GUIDES
   ================================================================ */
.guides-list { display: flex; flex-direction: column; gap: 8px; }
.guide-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-xs); border: 1px solid var(--border-light); }
.guide-card-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; cursor: pointer; transition: background 0.15s;
}
.guide-card-header:hover { background: var(--bg-warm); }
.guide-icon {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-bg); border-radius: var(--radius); color: var(--primary);
}
.guide-info { flex: 1; }
.guide-info h3 { font-size: 15px; font-weight: 700; }
.guide-level { font-size: 11px; color: var(--text-muted); }
.guide-content { padding: 0 16px 16px; }
.guide-block { margin-bottom: 16px; }
.guide-block h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--primary-dark); }
.guide-block p { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.guide-block li { font-size: 13px; color: var(--text-dim); margin-inline-start: 16px; line-height: 1.6; }

/* ================================================================
   BUDDY
   ================================================================ */
/* Buddy Page — полная перепись */





/* Fish filter dropdown */

/* Поле-триггер = канонический kx-select (токены --input-*) */







/* Выпадающий список ПОРТАЛОМ в body (position:fixed, top/left/width/maxHeight — inline
   от якоря): не может быть обрезан родителями. Внешний вид — канонический .kx-menu. */





/* Create form */







/* Create button: page-hdr на десктопе; на мобиле page-hdr скрыт → CTA в интро-блоке.
   Типографика = .header-create-btn («Создать пост» в шапке): 13.5px/700 */

.bcb-short { display: none; }
/* Бейдж статуса завершённой заявки (нейтральный, геометрия badge-demo) */

/* Шапка раздела на ПК: пришита намертво (sticky top == натуральная позиция → ноль движения).
   Верх кнопок = 76px = линия верха сайдбаров (64 шапка + 12 отступ колонки).
   margin-top:-12 + padding-top:12 — непрозрачный фон закрывает 12px-щель над строкой.
   overflow-x:clip вместо hidden у .page — hidden создаёт scroll-контейнер и ломает sticky */
@media (min-width: 768px) {
  .page.buddy-page { overflow-x: clip; }
  .buddy-page .page-hdr {
    position: sticky; top: 64px; z-index: 90;
    background: var(--bg);
    margin: -12px 0 0;
    padding: 12px 0 8px;
  }
}

/* Cards */






.badge-demo {
  display: inline-flex; align-items: center; height: 22px; box-sizing: border-box;
  font-size: 10.5px; font-weight: 700; padding: 0 8px; border-radius: 20px;
  background: rgba(245,158,11,0.15); color: #b45309; border: 1px solid rgba(245,158,11,0.3);
  letter-spacing: 0.03em; text-transform: uppercase;
}






/* Filters row: fish + region select */


/* ПК: фильтры пришиты ПОД строкой «назад/Создать» (её box: top 64 + 12+44+8 = низ на 128).
   Без этого при скролле поля уезжали под шапку с фоном цвета страницы — граница
   невидима, и выглядело как «поле обрезается». Тень снизу = видимая кромка. */
@media (min-width: 768px) {
  .buddy-page .buddy-filters-row {
    position: sticky; top: 128px; z-index: 85;
    background: var(--bg);
    padding-bottom: 10px; margin-bottom: 6px;
    box-shadow: 0 8px 10px -10px rgba(0, 0, 0, 0.65);
  }
}

/* Date chip on card — та же геометрия, что badge-demo */



/* Group titles */



/* Card actions row — все кнопки одной высоты и типографики */

.bf-short { display: none; }
@media (max-width: 430px) {
  .bf-full { display: none; }
  .bf-short { display: inline; }
}

/* Respond inline form */





/* Responses list (author view) */












@media (max-width: 420px) {
  .buddy-response-item { flex-wrap: wrap; }
  .buddy-response-actions { width: 100%; justify-content: flex-end; }
}

/* Author sub-line: лига RTP + ачивки (как в ленте: приглушённый inline) */








/* Кликабельная ссылка в тексте поста */
.post-inline-link { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Кнопка «Откликнуться на заявку» в посте «Ищу напарника» */
.post-buddy-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; height: 40px; margin-top: 10px; box-sizing: border-box;
  background: var(--btn-bg); color: var(--btn-text);
  border-radius: var(--btn-radius); text-decoration: none;
  font-size: var(--btn-font); font-weight: 700; letter-spacing: 0.2px;
  transition: background 0.15s;
}
.post-buddy-cta:hover { background: var(--btn-bg-hover); color: var(--btn-text); }

/* Пост-приглашение в группу: карточка группы + быстрая кнопка «Вступить» */
.post-invite {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 8px 10px; box-sizing: border-box;
  background: var(--bg-soft, var(--card)); border: 1px solid var(--border-light);
  border-radius: var(--radius); text-decoration: none; color: inherit;
}
.post-invite:hover { border-color: var(--border); }
.post-invite__body { flex: 1; min-width: 0; }
.post-invite__name {
  font-weight: 700; font-size: 14px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-invite__meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.post-invite .btn { flex-shrink: 0; }

/* Свёрнутое описание — 2 строки */


/* Кнопка Подробнее/Свернуть */



/* Детальный блок: строки «метка — значение» */







@media (max-width: 400px) {
  .buddy-detail-label { flex-basis: 128px; font-size: 12px; }
}

/* Чипы: формат / есть / нужно — единая геометрия, различие только оттенком */





/* Мини-чат под заявкой */



.avatar-xxs {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
}









/* Форма v3: секции + чип-пикеры */




/* Комбо-поле формы (инпут + канонический список вместо нативного datalist) */





/* Фильтры: единая высота = каноническая --input-h (44px) */

/* Инпут ВНУТРИ поля — БЕЗ собственного оформления: глобальный input{}
   красит его в свой фон → «коробка в коробке». !important осознанно. */













/* Секции и подписи в дропдауне мест */




/* Меню действий карточки (как у постов) */






/* Deep-link highlight */


.empty-state-actions {
  display: flex; gap: 8px; justify-content: center; align-items: center;
  margin-top: 12px; flex-wrap: wrap;
}

/* Share icon on card should not go red on hover (icon-btn-sm default hover is danger) */


/* Мобилка: фильтры ОДНОЙ строкой (рыба + регион + звезда), а не тремя */
@media (max-width: 430px) {
  .buddy-filters-row { gap: 6px; }
  .buddy-filters-row .buddy-filter-input-wrap { padding: 0 10px; }
  .buddy-own-actions { gap: 6px; }
}

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ================================================================
   RESPONSIVE — Tablet+
   ================================================================ */
@media (min-width: 768px) {
  .ads-grid { grid-template-columns: 1fr 1fr 1fr; }
  .weather-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* ================================================================
   CHAT
   ================================================================ */








/* Кнопка «⋮» действий над перепиской */
























/* Chat View */

/* Десктоп: ЛС живёт в центр-колонке грида (как AI-чат), высота фикс по экрану,
   ввод примагничен к низу окна, лента сообщений скроллится внутри.
   margin-top 12px — чтобы шапка чата не липла к верхней шапке (как отступ у ленты). */
@media (min-width: 768px) {
  .chat-view { height: calc(100vh - 76px); min-height: 0; margin-top: 12px; }
}









/* Messages — min-height:0 обязателен, иначе flex-ребёнок не сжимается и вся
   .chat-view скроллится вместе с шапкой (баг). */

/* Разделитель дат внутри диалога */










/* Input bar — «в воздухе»: прозрачная обёртка, видимое поле одно, иконка внутри справа */
/* Мини-карточка объявления над полем ввода чата */







/* Композер: вложения (фото/гео) + строка ввода в ОДНОЙ рамке —
   визуально «одно составляемое сообщение». */




/* textarea прозрачна (важно: перебиваем глобальный :root textarea{background:card}),
   без min-height (глобально textarea{min-height:80px}) → вся внутренняя область одного цвета */


/* Кнопки внутри поля — только иконка, без заливки */






/* Превью вложений — ВНУТРИ композера, над строкой ввода, с тонким разделителем:
   читается как «эти фото/метка уйдут в этом сообщении». */




/* Чип-вложение (гео-метка, статус загрузки) в строке превью */






@keyframes chat-spin { to { transform: rotate(360deg); } }

/* Картинка в пузыре сообщения */



/* Гео-метка в пузыре сообщения — карточка «открыть на карте» */








/* Карточка объявления в пузыре сообщения */









/* Лайтбокс фото сообщения */




/* WS indicator */


/* Typing indicator */





@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ================================================================
   SEARCH
   ================================================================ */
.search-page { padding: 0 0 24px; }
.search-item {
  display: block; padding: 10px 12px; border-radius: var(--radius-xs);
  text-decoration: none; color: var(--text); transition: background 0.15s;
}
.search-item:hover { background: var(--primary-light); }
.search-item-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.search-item-meta { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.search-dropdown-item:hover { background: var(--primary-light); }

/* ---------- Единое ядро поиска (sr-*) ---------- */
.sr-bar {
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  display: flex; align-items: center; gap: 8px; padding: 12px 0;
}
.sr-bar-back {
  background: none; border: none; cursor: pointer; color: var(--text-dim);
  padding: 4px; display: flex; flex-shrink: 0;
}
.sr-bar-field { position: relative; flex: 1; display: flex; align-items: center; }
.sr-bar-icon { position: absolute; left: 12px; color: var(--text-muted); z-index: 2; }
.sr-bar-field input {
  width: 100%; padding: 10px 36px 10px 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font-size: 16px;
  background: var(--card); color: var(--text);
}
.sr-bar-clear {
  position: absolute; right: 8px; background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: 4px; display: flex;
}

.sr-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 20; overflow: hidden;
  max-height: 300px; overflow-y: auto;
}
.sr-dropdown-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); text-transform: uppercase;
}
.sr-dropdown-head button {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px; font-size: 12px;
}
.sr-dropdown-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer;
}
.sr-dropdown-item:hover { background: var(--primary-light); }
.sr-dropdown-lead { color: var(--text-muted); flex-shrink: 0; }
.sr-dropdown-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-dropdown-x { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 2px; display: flex; flex-shrink: 0; }

.sr-hint { text-align: center; margin-top: 48px; color: var(--text-muted); }
.sr-hint svg { margin-bottom: 12px; opacity: 0.3; }
.sr-status { text-align: center; margin-top: 24px; color: var(--text-muted); }

.sr-results { display: flex; flex-direction: column; gap: 20px; }
.sr-section-head {
  display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px;
  color: var(--text-muted); margin-bottom: 8px; text-transform: uppercase;
}
.sr-section--feed .sr-section-head { color: var(--accent, var(--primary)); }
.sr-list { display: flex; flex-direction: column; gap: 2px; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

/* compact-строка */
.sr-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-xs);
  text-decoration: none; color: var(--text); transition: background 0.15s;
}
.sr-item:hover { background: var(--primary-light); }
.sr-item-thumb {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden;
  background: var(--border); display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.sr-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-item-body { min-width: 0; flex: 1; }
.sr-item-title { font-weight: 600; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item-badge { color: var(--accent, var(--primary)); font-size: 12px; font-weight: 700; margin-inline-end: 6px; }
.sr-item-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* card-плитка */
.sr-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.15s;
}
.sr-card:hover { border-color: var(--accent, var(--primary)); }
.sr-card-thumb {
  aspect-ratio: 1; background: var(--border); display: flex; align-items: center;
  justify-content: center; color: var(--text-muted);
}
.sr-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-card-body { padding: 8px 10px; }
.sr-card-title { font-weight: 600; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================
   DARK THEME — System preference
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg:           #1a1f1c;
    --bg-warm:      #1f2522;
    --card:         #242b27;
    --text:         #e8e2d4;
    --text-dim:     #b8b0a3;
    --text-muted:   #8a837a;
    --border:       #353c37;
    --border-light: #2b322e;

    --primary:        #7fa17a;
    --primary-dark:   #6b8d68;
    --primary-light:  rgba(127,161,122,0.18);
    --primary-bg:     rgba(127,161,122,0.10);
    --accent:         #7fa17a;
    --accent-dark:    #6b8d68;
    --accent-light:   rgba(127,161,122,0.18);

    --orange:         #fb923c;
    --orange-light:   rgba(249,115,22,0.15);
    --danger:         #cf7f7f;
    --danger-light:   rgba(207,127,127,0.15);
    --success:        #4ade80;
    --success-light:  rgba(34,197,94,0.15);
    --warning:        #fbbf24;

    --shadow-xs:  0 1px 0 rgba(0,0,0,0.4);
    --shadow:     0 2px 12px rgba(0,0,0,0.45);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.5);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  }
}

/* Explicit dark class on :root */
:root.dark {
  --bg:           #1a1f1c;
  --bg-warm:      #1f2522;
  --card:         #242b27;
  --text:         #e8e2d4;
  --text-dim:     #b8b0a3;
  --text-muted:   #8a837a;
  --border:       #353c37;
  --border-light: #2b322e;

  --primary:        #7fa17a;
  --primary-dark:   #6b8d68;
  --primary-light:  rgba(127,161,122,0.2);
  --primary-bg:     rgba(127,161,122,0.12);
  --accent:         #7fa17a;
  --accent-dark:    #6b8d68;
  --accent-light:   rgba(127,161,122,0.2);

  --orange:         #fb923c;
  --orange-light:   rgba(249,115,22,0.14);
  --danger:         #cf7f7f;
  --danger-light:   rgba(207,127,127,0.15);
  --success:        #4ade80;
  --success-light:  rgba(34,197,94,0.14);
  --warning:        #fbbf24;

  --shadow-xs:  0 1px 0 rgba(0,0,0,0.45);
  --shadow:     0 2px 12px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.65);
}

/* Dark: inputs */
:root.dark input, :root.dark select, :root.dark textarea,
:root:not(.light) input:where([data-scheme="dark"]) { background: var(--bg-input); color: var(--input-text); border-color: var(--input-border); }

@media (prefers-color-scheme: dark) {
  :root:not(.light) input,
  :root:not(.light) select,
  :root:not(.light) textarea {
    background: var(--bg-input); color: var(--input-text); border-color: var(--input-border);
  }
  :root:not(.light) input:focus,
  :root:not(.light) select:focus,
  :root:not(.light) textarea:focus {
    border-color: var(--primary);
  }
  :root:not(.light) input::placeholder,
  :root:not(.light) textarea::placeholder { color: var(--input-placeholder); }
}

:root.dark input:focus, :root.dark select:focus, :root.dark textarea:focus {
  border-color: var(--primary);
}
:root.dark input::placeholder, :root.dark textarea::placeholder { color: var(--input-placeholder); }

:root.dark .btn-demo { background: var(--bg-input); color: var(--input-text); border-color: var(--input-border); }
:root.dark .btn-demo:hover { background: var(--primary); color: var(--btn-text); border-color: var(--primary); }
:root.dark .btn-primary { background: var(--primary); color: var(--btn-text); }

/* Auth card uses theme — actual styles in main .auth-card rule above */

/* Dark: header */
:root.dark .app-header { background: var(--bg); }
:root.dark .tab-bar { background: rgba(18,33,30,0.96); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .app-header { background: var(--bg); }
  :root:not(.light) .tab-bar { background: rgba(18,33,30,0.96); }
}
/* Главная: шапка обязана остаться ПРОЗРАЧНОЙ в любой теме — фон под иконками
   рисует .home-scrim (размытие + градиент). Тёмные правила выше имеют бОльшую
   специфичность, поэтому перебиваем их явно. */
:root .app-layout--home .app-header,
:root.dark .app-layout--home .app-header { background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .app-layout--home .app-header { background: transparent; }
}
/* То же для остальных «стеклянных» страниц (§9.1): без этих строк тёмные правила
   выше возвращают шапке сплошной --bg, и стекла не видно ВООБЩЕ. */
:root .app-header--glass,
:root.dark .app-header--glass { background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .app-header--glass { background: transparent; }
}
/* …но под раскрытым полем поиска фон обязателен в любой теме, иначе строка ввода
   «висит» над просвечивающим контентом. */
:root .app-header--glass.app-header--searching,
:root.dark .app-header--glass.app-header--searching { background: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .app-header--glass.app-header--searching { background: var(--bg); }
}
/* …но плавающая плашка обязана остаться полупрозрачной в любой теме */
:root .tab-bar--float,
:root.dark .tab-bar--float { background: var(--bg-tabbar-float); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .tab-bar--float { background: var(--bg-tabbar-float); }
}

/* Fallback без backdrop-filter (часть Android WebView/TWA — у тестировщика сквозь
   таб-бар просвечивала лента): делаем таб-бар ПОЛНОСТЬЮ непрозрачным. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tab-bar { background: var(--bg); }
  :root.dark .tab-bar, :root:not(.light) .tab-bar { background: #121e1b; }
}

/* Dark: skeleton */
:root.dark .skeleton-avatar, :root.dark .skeleton-line { background: #253733; }
:root.dark .skeleton-body { background: var(--bg-skeleton); }
:root.dark .ad-no-photo { background: linear-gradient(135deg, #1a2422, var(--bg-skeleton)); }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .skeleton-avatar,
  :root:not(.light) .skeleton-line { background: #253733; }
  :root:not(.light) .skeleton-body { background: var(--bg-skeleton); }
  :root:not(.light) .ad-no-photo { background: linear-gradient(135deg, #1a2422, var(--bg-skeleton)); }
}

/* Dark: spot/review cards */
:root.dark .spot-ratings-card,
:root.dark .spot-review-card,
:root.dark .spot-review-form { background: var(--card); border-color: var(--border-light); }
:root.dark .map-v3-search { background: var(--card); }
:root.dark .map-v3-fab { background: var(--card); }
:root.dark .map-species-filter { background: var(--card); }
:root.dark .map-add-btn { background: var(--card); color: var(--primary); }
:root.dark .map-locate-btn { background: var(--card); color: var(--text); }
:root.dark .star-btn { color: #3a5550; }
:root.dark .avatar-placeholder {
  background: linear-gradient(135deg, var(--primary-light), rgba(127, 161, 122,0.25));
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .spot-ratings-card,
  :root:not(.light) .spot-review-card,
  :root:not(.light) .spot-review-form { background: var(--card); }
  :root:not(.light) .map-v3-search { background: var(--card); }
  :root:not(.light) .map-v3-fab { background: var(--card); }
  :root:not(.light) .map-species-filter { background: var(--card); }
  :root:not(.light) .map-add-btn { background: var(--card); color: var(--primary); }
  :root:not(.light) .map-locate-btn { background: var(--card); color: var(--text); }
  :root:not(.light) .star-btn { color: #3a5550; }
  :root:not(.light) .avatar-placeholder {
    background: linear-gradient(135deg, var(--primary-light), rgba(127, 161, 122,0.25));
  }
}

/* ================================================================
   THEME TOGGLE
   ================================================================ */
.theme-section { margin-top: 8px; }
.theme-toggle-group { display: flex; gap: 6px; }
/* Тема/система мер — сегмент-контрол из .seg-btn (§6): равная ширина кнопок */
.theme-toggle-group .seg-btn { flex: 1; }
.theme-toggle-btn {
  flex: 1; padding: 10px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  color: var(--text-dim); font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: center; transition: all var(--transition); font-family: inherit;
}
.theme-toggle-btn:hover { border-color: var(--primary); color: var(--text); }
.theme-toggle-btn.active { background: var(--primary); color: var(--btn-text); border-color: var(--primary); }

/* ================================================================
   REGISTER PAGE
   ================================================================ */
.input-with-icon { position: relative; display: flex; align-items: center; }
.input-with-icon .input-icon {
  position: absolute; left: 14px; color: var(--text-muted);
  pointer-events: none; z-index: 1;
}
.input-with-icon input, .input-with-icon select { width: 100%; padding-inline-start: 42px !important; }
.input-with-icon select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 01.708 0L8 8.293l2.646-2.647a.5.5 0 01.708.708l-3 3a.5.5 0 01-.708 0l-3-3a.5.5 0 010-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; cursor: pointer;
}
.register-divider {
  display: flex; align-items: center; gap: 12px; margin: 4px 0;
}
.register-divider::before, .register-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.register-divider span {
  font-size: 12px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap;
}

/* ================================================================
   WELCOME / ONBOARDING
   ================================================================ */














@keyframes welcomeFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}







































@media (max-width: 480px) {
  .welcome-container { padding: 28px 20px 20px; border-radius: 20px; min-height: 480px; }
  .welcome-step h1 { font-size: 22px; }
  .welcome-step h2 { font-size: 19px; }
  .welcome-icon-big { width: 80px; height: 80px; border-radius: 22px; }
  .welcome-icon-big svg { width: 48px !important; height: 48px !important; }
  .welcome-btn-next { padding: 12px 22px; font-size: 14px; }
}

/* ================================================================
   REPORT SYSTEM
   ================================================================ */
.post-menu-wrapper { position: relative; margin-inline-start: auto; }
.post-menu-btn {
  background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--action-btn-radius);
  color: var(--text-muted); transition: var(--transition);
  display: flex; align-items: center;
}
.post-menu-btn:hover { background: var(--border-light); color: var(--text); }

.post-dropdown-menu {
  position: absolute; top: 100%; right: 0; z-index: 50;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.14);
  min-width: 220px; overflow-x: hidden; overflow-y: auto;
  max-height: min(70vh, 460px);
  padding: 6px 0;
  animation: dropdown-fade 0.13s ease;
}
@keyframes dropdown-fade {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.post-dropdown-menu button,
.post-dropdown-link-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 16px; background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: background 0.1s; font-family: inherit; text-align: start;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.post-dropdown-menu button:hover,
.post-dropdown-link-item:hover { background: var(--bg-warm); }
.post-dropdown-menu button svg,
.post-dropdown-link-item svg { flex-shrink: 0; color: var(--text-muted); }
.post-dropdown-menu button.post-dropdown-danger { color: var(--danger); }
.post-dropdown-menu button.post-dropdown-danger svg { color: var(--danger); opacity: 0.8; }
.post-dropdown-menu button.post-dropdown-danger:hover { background: var(--danger-light); }
.post-dropdown-divider { height: 1px; background: var(--border-light); margin: 5px 0; }
.post-dropdown-locked { display: block; padding: 6px 16px; font-size: 12px; color: var(--text-muted); cursor: default; }

.report-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: overlay-fade 0.2s ease;
}
@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }

.report-modal {
  background: var(--card); border-radius: var(--radius); width: 100%; max-width: 420px;
  padding: 20px; box-shadow: var(--shadow-lg); animation: modal-slide 0.2s ease;
  /* Причин пять, плюс описание, фото и кнопка — на небольшом экране список выше
     экрана и должен прокручиваться внутри окна, а не уезжать за край. */
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes modal-slide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.report-modal-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--danger); }
.report-modal-header h3 { flex: 1; font-size: 18px; font-weight: 700; color: var(--text); }
.report-close-btn {
  background: none; border: none; cursor: pointer; padding: 4px; border-radius: var(--action-btn-radius);
  color: var(--text-muted); transition: var(--transition);
}
.report-close-btn:hover { background: var(--border-light); color: var(--text); }
.report-reasons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.report-reason-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; color: var(--text); transition: var(--transition);
}
.report-reason-item:hover { border-color: var(--primary); background: var(--primary-bg); }
.report-reason-item.selected { border-color: var(--primary); background: var(--primary); color: var(--btn-text); }
.report-reason-item input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }
.report-description {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 14px; font-family: inherit;
  resize: vertical; min-height: 60px; margin-bottom: 12px;
  color: var(--text); background: var(--bg-warm); transition: var(--transition);
}
.report-description:focus { outline: none; border-color: var(--input-border-focus); }
.report-description::placeholder { color: var(--text-muted); }
/* Блок фото-доказательства */
.report-photo { margin-bottom: 12px; }
.report-photo-add {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; width: 100%; justify-content: center;
  background: var(--bg-warm); color: var(--text-dim); cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: var(--input-radius);
  font-size: 13px; font-weight: 600; font-family: inherit;
  transition: border-color var(--transition), color var(--transition);
}
.report-photo-add:hover { border-color: var(--primary); color: var(--primary); }
.report-photo-preview { position: relative; display: inline-block; border-radius: var(--input-radius); overflow: hidden; }
.report-photo-preview img { display: block; max-height: 160px; max-width: 100%; border-radius: var(--input-radius); }
.report-photo-remove {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.report-error {
  color: var(--danger); font-size: 13px; margin-bottom: 10px;
  padding: 8px 10px; background: var(--danger-light); border-radius: var(--radius-xs);
}
.report-success { text-align: center; padding: 20px 0; }
.report-success p { font-size: 15px; color: var(--text); margin-bottom: 16px; line-height: 1.5; }
.report-submit-btn { width: 100%; padding: 12px; font-size: 15px; font-weight: 700; border-radius: var(--radius-sm); }
.report-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.62); display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: overlay-fade 0.2s ease;
}
/* Базовый контейнер модалки (был только для create-spot — остальные просвечивали) */
.modal-content {
  background: var(--card); color: var(--text); border-radius: 16px;
  width: 100%; max-width: 480px; max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; box-shadow: 0 14px 44px rgba(0,0,0,0.45);
  animation: modal-slide 0.2s ease; border: 1px solid var(--border-light);
}
.modal-content.create-spot-modal {
  background: var(--card); border-radius: var(--radius); width: 100%; max-width: 540px;
  max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35); animation: modal-slide 0.2s ease;
  min-height: 0;
}
.modal-content.create-spot-modal .modal-body {
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; min-height: 0;
}
/* Mobile Safari: модалка как bottom-sheet, footer всегда виден над адресной строкой */
@media (max-width: 600px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-content.create-spot-modal {
    max-width: 100%; width: 100%; max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
  .modal-content.create-spot-modal .modal-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    position: sticky; bottom: 0; background: var(--card); z-index: 2;
  }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border-light);
}
.modal-header h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0; font-weight: 700; }
.modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border-light);
}
.fish-chips { display: flex; flex-wrap: wrap; gap: 6px; }






/* Spot photo upload */






/* Spot fish search */












/* ================================================================
   COMMUNITY DIARY
   ================================================================ */
.community-region-label {
  font-size: 13px; color: var(--text-dim); margin-bottom: 12px;
  padding: 8px 12px; background: var(--primary-bg); border-radius: var(--radius-xs);
}
.community-trip-card { display: block !important; text-decoration: none; color: inherit; }
.community-author { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.community-author-name { font-weight: 700; text-decoration: none; color: var(--text); }
.community-region-tag {
  font-size: 11px; color: var(--text-muted); background: var(--bg);
  padding: 2px 6px; border-radius: 4px; margin-inline-start: auto;
}
.community-notes { margin-top: 6px; font-size: 12px; color: var(--text-dim); line-height: 1.4; }

/* ================================================================
   STORIES BAR
   ================================================================ */
.stories-bar {
  display: flex; gap: 12px; overflow-x: auto; padding: 12px 4px;
  scrollbar-width: none;
}
.stories-bar::-webkit-scrollbar { display: none; }
.story-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex-shrink: 0; text-decoration: none;
}
.story-avatar-ring {
  width: 66px; height: 66px; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.story-avatar {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--card);
}
.story-avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 20px;
}
.story-name {
  font-size: 11px; color: var(--text-dim); max-width: 66px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
.doubletap-heart {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); z-index: 10;
  pointer-events: none; animation: doubletap-heart-anim 0.8s ease-out forwards;
}
@keyframes doubletap-heart-anim {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 1; }
  20%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* ================================================================
   POLL WIDGET
   ================================================================ */
.poll-widget { padding: 12px 16px; margin: 0 0 4px; }
.poll-question {
  display: flex; align-items: center; gap: 6px; font-weight: 700;
  font-size: 14px; margin-bottom: 10px; color: var(--text);
}
.poll-options { display: flex; flex-direction: column; gap: 8px; }
.poll-option {
  position: relative; display: flex; align-items: center; width: 100%;
  padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-warm); cursor: pointer; font-size: 14px; text-align: start;
  transition: border-color 0.2s, background 0.2s; overflow: hidden; font-family: inherit;
  /* Явный тема-цвет: <button> не наследует color, и в светлой/ночной теме текст опции
     оставался светлым на светлом фоне (замечание Лили «голосования белым по белому»). */
  color: var(--text);
}
.poll-option:not(.voted):hover { border-color: var(--primary); background: var(--primary-bg); }
.poll-option.voted { cursor: default; border-color: var(--border); }
.poll-option.voted.selected { border-color: var(--primary); background: rgba(127, 161, 122,0.07); }
.poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(127,161,122,0.12); border-radius: var(--radius-sm);
  transition: width 0.4s ease; z-index: 0;
}
.poll-option-text { position: relative; z-index: 1; flex: 1; }
.poll-option-pct {
  position: relative; z-index: 1; font-weight: 700; font-size: 13px;
  color: var(--text-muted); margin-inline-start: 8px; min-width: 36px; text-align: end;
}
.poll-total { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

/* ================================================================
   SPAWN BAN BANNER
   ================================================================ */
@media (min-width: 768px) {
  .bite-chip-pwa, .bite-chip-slot { display: none !important; }
}

.bite-forecast-chip {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 7px 8px;
  /* Тот же фон/рамка/скругление, что у кнопок под шапкой — единый вид ряда */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%; box-sizing: border-box;
  flex-shrink: 0;
  min-width: 0;
  text-align: center;
}
.bite-forecast-chip-link {
  display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0;
  color: var(--text-dim); text-decoration: none;
}
.bite-forecast-chip-title {
  font-size: 11px; color: var(--text-muted); white-space: nowrap; line-height: 1;
}
.bite-forecast-chip-value {
  display: flex; align-items: center; gap: 5px;
}
.bite-forecast-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.bite-forecast-chip-value strong { font-size: 13px; font-weight: 700; white-space: nowrap; }
.bite-forecast-score {
  font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.bite-forecast-close { align-self: flex-start; margin-top: -2px; }

.spawn-ban-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 12px; margin: 0;
  background: rgba(197,122,122,0.10);
  border: 1px solid rgba(197,122,122,0.25);
  border-radius: var(--radius-sm); color: var(--text-dim);
}
.spawn-ban-content {
  display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
}
.spawn-ban-content svg { flex-shrink: 0; color: var(--danger); margin-top: 1px; }
.spawn-ban-text { font-size: 13px; line-height: 1.45; color: var(--text-dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.spawn-ban-text strong { display: inline; font-size: 13px; font-weight: 700; color: var(--danger); margin-inline-end: 2px; }
.spawn-ban-close {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--text-muted); opacity: 0.6; flex-shrink: 0;
}
.spawn-ban-close:hover { opacity: 1; }
@media (prefers-color-scheme: dark) {
  .spawn-ban-banner { background: rgba(197,122,122,0.08); border-color: rgba(197,122,122,0.20); }
}

/* ================================================================
   REPOST STYLES
   ================================================================ */
/* ===== REPOST HEADER (who reposted) ===== */
.repost-header {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px 4px;
  font-size: 12px; color: var(--text-muted);
}
.repost-header a { color: var(--text-muted); font-weight: 600; text-decoration: none; }
.repost-header a:hover { color: var(--text); }
.repost-header .post-time { margin-inline-start: auto; }

/* ===== REPOST BODY (quote card layout) ===== */
.repost-body { padding: 0 var(--card-padding) 4px; }
.repost-quote-text {
  font-size: 15px; color: var(--text); line-height: 1.5;
  padding: 2px 0 10px; margin: 0;
}

/* Quote card — compact, styled like a blockquote */
.repost-quote-card {
  display: block; text-decoration: none;
  margin: 0 0 4px;
  padding: 11px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.03);
  transition: background 0.15s;
}
.repost-quote-card:hover { background: var(--bg-warm); }
.repost-quote-author {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.repost-quote-avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.repost-quote-avatar--ph {
  background: var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.repost-quote-name { font-size: 13px; font-weight: 700; color: var(--text); }
.repost-quote-dot { color: var(--text-muted); font-size: 11px; }
.repost-quote-time { font-size: 11px; color: var(--text-muted); }
.repost-quote-body {
  font-size: 13px; color: var(--text-muted); line-height: 1.45;
  margin: 0 0 8px; word-break: break-word;
}
.repost-quote-thumb {
  position: relative; border-radius: 8px; overflow: hidden;
  max-height: 160px;
}
.repost-quote-thumb img {
  width: 100%; max-height: 160px; object-fit: cover; display: block;
}
.repost-quote-more {
  position: absolute; top: 6px; right: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: var(--radius-sm); font-weight: 600;
}

/* ===== REPOST SHARE SHEET ===== */
.repost-sheet-overlay {
  /* Выше панели навигации (400) с запасом: панель рисуется на отдельном слое
     из-за backdrop-filter и при близких значениях всплывала поверх затемнения. */
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-end;
  animation: overlay-in 0.2s ease;
  /* touch-action читает компоновщик ДО обработчиков: preventDefault не помогал —
     браузер успевал протянуть страницу под шторкой. */
  touch-action: none;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.repost-sheet {
  width: 100%; max-width: 480px; margin: 0 auto;
  background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
  /* Шторка занимала почти весь экран. Ограничиваем высоту и прокручиваем
     содержимое внутри — снизу оставляем место под домашнюю полоску. */
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  animation: sheet-up 0.25s cubic-bezier(0.34,1.2,0.64,1);
  /* Недотянутый свайп плавно возвращает лист на место; жест не утекает в страницу. */
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
  overscroll-behavior: none;
  /* Вертикаль забираем себе, ancestor'ы не прокручиваем */
  touch-action: pan-y;
}
/* Полоска-ручка теперь единственная подсказка «меня можно тянуть» — делаем заметнее */
.repost-sheet-handle { cursor: grab; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.repost-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 14px;
}
.repost-sheet-title {
  font-size: 16px; font-weight: 700; color: var(--text);
  text-align: center; margin-bottom: 14px;
}

/* Preview strip */
.repost-sheet-preview {
  display: flex; align-items: center; gap: 10px;
  background: none; border-radius: 0;
  padding: 0 2px; margin-bottom: 14px;
}
.repost-sheet-preview-avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.repost-sheet-preview-avatar--ph {
  background: var(--border); display: flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.repost-sheet-preview-text {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.repost-sheet-preview-name { font-size: 13px; font-weight: 700; color: var(--text); }
.repost-sheet-preview-body {
  font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.repost-sheet-preview-thumb {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
}

/* Comment textarea */
.repost-sheet-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px 12px;
  min-height: 46px;
  font-size: 14px; color: var(--text); font-family: inherit;
  resize: none; outline: none; margin-bottom: 14px;
  transition: border-color 0.15s;
}
.repost-sheet-textarea:focus { border-color: var(--border); }
.repost-sheet-textarea::placeholder { color: var(--text-muted); }

/* В ленту button */
.repost-sheet-feed-btn {
  width: 100%; height: 46px; border-radius: var(--radius);
  background: var(--primary); color: var(--btn-text);
  font-size: 15px; font-weight: 700; font-family: inherit;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity 0.15s;
  margin-bottom: 16px;
}
.repost-sheet-feed-btn:hover { opacity: 0.9; }
.repost-sheet-feed-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Divider */
.repost-sheet-divider {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-muted); font-size: 12px; margin-bottom: 14px;
}
.repost-sheet-divider::before,
.repost-sheet-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-light);
}

/* External share row */
.repost-sheet-external {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 16px;
  flex-wrap: wrap;
}
.repost-sheet-ext-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--bg-warm); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 12px 16px;
  font-size: 11px; color: var(--text-muted); font-family: inherit;
  cursor: pointer; min-width: 72px; transition: background 0.15s;
}
.repost-sheet-ext-btn:hover { background: var(--border-light); }
.repost-sheet-ext-btn svg { flex-shrink: 0; }

/* Cancel */
.repost-sheet-cancel {
  width: 100%; height: 42px; border-radius: var(--radius-sm);
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 14px; font-family: inherit;
  cursor: pointer; transition: background 0.15s;
}
.repost-sheet-cancel:hover { background: var(--bg-warm); color: var(--text); }
.repost-sheet-cancel--link {
  border: none; background: none; height: 36px;
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}
.repost-sheet-cancel--link:hover { background: none; color: var(--text); }

/* ================================================================
   SHARE MENU
   ================================================================ */
.share-menu-wrapper { position: relative; display: inline-flex; }
.share-dropdown { bottom: 100%; top: auto; right: 0; margin-bottom: 4px; }
.share-dropdown button { color: var(--text) !important; }
.share-dropdown button:hover { background: var(--primary-light) !important; }

.share-menu {
  position: absolute; bottom: 40px; right: 0; background: var(--card);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 8px 0;
  box-shadow: var(--shadow-md); z-index: 50; min-width: 200px;
}
.share-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  font-size: 14px; cursor: pointer; color: var(--text); white-space: nowrap;
}
.share-menu-item:hover { background: var(--bg-warm); }

/* ================================================================
   SHIMMER
   ================================================================ */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-placeholder {
  background: linear-gradient(90deg, #f0f2f5 25%, #e4e7ec 50%, #f0f2f5 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s ease-in-out infinite;
}
.shimmer-placeholder.loaded { animation: none !important; background: transparent !important; }
:root.dark .shimmer-placeholder {
  background: linear-gradient(90deg, #1a2422 25%, #243330 50%, #1a2422 75%) !important;
  background-size: 200% 100% !important;
}
:root.dark .shimmer-placeholder.loaded { animation: none !important; background: transparent !important; }

/* ================================================================
   PAGE TRANSITIONS
   ================================================================ */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: page-fade-in 0.22s ease-out; }

/* ================================================================
   PULL-TO-REFRESH
   ================================================================ */
.pull-refresh-indicator {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: height 0.15s ease-out; position: relative; z-index: 50;
}
.pull-refresh-spinner { transition: transform 0.1s linear; }
.pull-refresh-spinner.spinning { animation: pull-spin 0.8s linear infinite; }
@keyframes pull-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================================================================
   USER HOVER CARD
   ================================================================ */
.user-hover-card {
  position: fixed; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow-lg);
  z-index: 1000; min-width: 220px; animation: hover-card-in 0.15s ease-out;
}
@keyframes hover-card-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.user-hover-name { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.user-hover-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.user-hover-actions { display: flex; gap: 8px; }
.user-hover-btn {
  flex: 1; padding: 7px 12px; border-radius: var(--radius-xs);
  font-size: 12px; font-weight: 700; text-align: center; text-decoration: none;
  background: var(--primary); color: var(--btn-text); transition: opacity 0.2s;
  border: 1px solid transparent; /* та же геометрия, что у secondary с рамкой */
}
.user-hover-btn:hover { opacity: 0.85; color: #fff; }
.user-hover-btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.user-hover-btn-secondary:hover { background: var(--border-light); color: var(--text); }

/* ================================================================
   CITY SEARCH DROPDOWN
   ================================================================ */
.desktop-header-city-wrap { position: relative; flex-shrink: 0; }
.city-search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 10px;
  box-shadow: var(--shadow-lg); z-index: 500; min-width: 260px;
  animation: hover-card-in 0.15s ease-out;
}
.city-search-input {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-xs); font-size: 16px; background: var(--card);
  color: var(--text); outline: none; box-sizing: border-box;
  touch-action: manipulation;
}
.city-search-input:focus { border-color: var(--border); box-shadow: none; background: var(--card); }
.city-search-input::placeholder { color: var(--text-muted); }
.city-search-results { margin-top: 6px; max-height: 240px; overflow-y: auto; }
.city-search-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 8px 10px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius-xs); text-align: start; color: var(--text); font-size: 14px;
  transition: background 0.15s; font-family: inherit;
}
.city-search-item:hover { background: var(--bg-warm); }
.city-search-name { font-weight: 700; }
.city-search-region { font-size: 11px; color: var(--text-muted); margin-inline-start: 8px; }
.city-search-empty { padding: 12px 10px; font-size: 13px; color: var(--text-muted); text-align: center; }
.city-search-radius { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.city-search-radius label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; font-weight: 700; }
.city-search-radius input[type="range"] {
  width: 100%; accent-color: var(--primary);
  touch-action: none; cursor: pointer;
  position: relative; z-index: 1;
}
.city-search-all-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 10px; margin-bottom: 8px;
  background: var(--bg-warm); border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); cursor: pointer; font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.city-search-all-btn:hover { background: var(--border); }
.city-search-all-btn.active {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-light);
}
.mobile-city-dropdown { max-height: 420px; overflow-y: auto; }

/* ================================================================
   CITY SHEET — premium bottom sheet for location picker
   ================================================================ */
.city-sheet-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px);
  padding-bottom: var(--city-kb-offset, 0px);
  transition: padding-bottom 0.22s ease;
}
@media (min-width: 769px) {
  .city-sheet-overlay { align-items: center; }
}
.city-sheet {
  width: 100%;
  max-height: min(70dvh, calc(100dvh - var(--city-kb-offset, 0px) - 16px));
  background: var(--card);
  border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  animation: city-sheet-up 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
  transition: max-height 0.22s ease;
}
@media (min-width: 769px) {
  .city-sheet {
    width: 440px; max-height: 74vh;
    border-radius: 20px;
    animation: city-sheet-in 0.22s cubic-bezier(0.34,1.3,0.64,1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  }
}
@keyframes city-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes city-sheet-in {
  from { transform: scale(0.94) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.city-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px; margin: 10px auto 0; flex-shrink: 0;
}
@media (min-width: 769px) { .city-sheet-handle { display: none; } }

/* Feed filter chips in location sheet */
.city-sheet-filters {
  display: flex; gap: 6px;
  padding: 10px 16px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--primary-bg);
  flex-shrink: 0;
}
.city-sheet-filters::-webkit-scrollbar { display: none; }
.city-filter-chip {
  flex-shrink: 0; padding: 7px 14px;
  border-radius: 20px; font-size: 13px; font-weight: 500;
  background: rgba(127,161,122,0.08);
  border: 1.5px solid rgba(127,161,122,0.14);
  color: var(--text-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.city-filter-chip.active {
  background: rgba(127,161,122,0.22);
  border-color: var(--primary);
  color: var(--text); font-weight: 600;
}
.city-filter-chip:active { opacity: 0.75; }

/* Header */
.city-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px; flex-shrink: 0;
}
.city-sheet-header span {
  font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: -0.2px;
}
.city-sheet-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-warm); border: none; cursor: pointer;
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.city-sheet-close:hover { background: var(--border); color: var(--text); }

/* Row 1: [Country ∨] [City input / city pill] */
/* Строка поиска */
.city-sheet-search-row {
  padding: 0 16px 12px; flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
}
.city-sheet-search-wrap {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; border-radius: 14px; height: 42px; box-sizing: border-box;
  background: var(--bg-warm); border: 1.5px solid var(--border-light);
  min-width: 0; transition: border-color 0.15s;
}
.city-sheet-search-wrap:focus-within { border-color: var(--border); }
.city-sheet-search-input {
  flex: 1; border: none !important; background: transparent !important;
  font-size: 16px; color: var(--text); outline: none !important;
  font-family: inherit; padding: 0; width: 0; min-width: 0;
  line-height: 1.4; box-shadow: none !important;
}
.city-sheet-search-input:focus,
.city-sheet-search-input:focus-visible {
  border: none !important; box-shadow: none !important;
  outline: none !important; background: transparent !important;
}
.city-sheet-search-input::placeholder { color: var(--text-muted); font-size: 14px; }
.city-sheet-search-clear {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: background 0.12s;
}
.city-sheet-search-clear:hover { background: var(--border-light); color: var(--text); }
.city-sheet-country-pill {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 0 12px; border-radius: 14px; height: 42px; box-sizing: border-box;
  border: 1.5px solid var(--border-light); background: var(--bg-warm);
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit; transition: border-color 0.15s;
  white-space: nowrap;
}
.city-sheet-country-pill:hover,
.city-sheet-country-pill.open { border-color: var(--primary); color: var(--primary); }

/* Inline country selector */
.city-sheet-country-inline {
  flex-shrink: 0; border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
}
.city-sheet-country-search-wrap {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-bottom: 1px solid var(--border-light);
}
.city-sheet-country-list {
  max-height: 180px; overflow-y: auto; padding: 4px 8px;
}

/* Scrollable body */
.city-sheet-body {
  flex: 1; overflow-y: auto; padding: 0 16px 16px;
}
.city-sheet-results { display: flex; flex-direction: column; }

/* List items */
.city-sheet-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 8px; border: none; background: none;
  cursor: pointer; border-radius: var(--radius); font-family: inherit; text-align: start;
  transition: background 0.12s;
}
.city-sheet-item:hover { background: var(--bg-warm); }
.city-sheet-item.active { background: var(--primary); }
.city-sheet-item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.city-sheet-item-name { font-weight: 600; font-size: 14px; color: var(--text); }
.city-sheet-item.active .city-sheet-item-name { color: var(--btn-text); }
.city-sheet-item-region { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-sheet-item-check { color: var(--primary); flex-shrink: 0; }
.city-sheet-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px; color: var(--text-muted); font-size: 14px;
}

/* GPS button */
.city-sheet-gps-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 12px; border-radius: 14px;
  border: 1.5px solid var(--border-light); background: var(--bg-warm);
  font-size: 14px; font-weight: 600; color: var(--primary);
  cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s;
  margin-bottom: 16px; margin-top: 4px;
}
.city-sheet-gps-btn:hover { border-color: var(--primary); background: var(--primary-bg); }
.city-sheet-gps-btn:disabled { opacity: 0.6; cursor: default; }
.city-sheet-gps-btn svg { flex-shrink: 0; }
.gps-spin { animation: gpsSpin 1s linear infinite; }
@keyframes gpsSpin { to { transform: rotate(360deg); } }

.city-sheet-gps-error {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(234,179,8,0.1); border: 1px solid rgba(234,179,8,0.35);
  border-radius: var(--radius); font-size: 13px; color: var(--text-dim);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.45;
}
.city-sheet-gps-error span { flex: 1; }
.city-sheet-gps-error-close {
  flex-shrink: 0; background: none; border: none; color: var(--text-muted);
  font-size: 14px; cursor: pointer; padding: 0 2px; line-height: 1;
  margin-top: 1px;
}

/* Секция "Популярные" */
.city-sheet-section-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 0 4px 8px; margin-top: 4px;
}
.city-sheet-popular {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px;
}
.city-sheet-pop-chip {
  padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--border-light); background: var(--bg-warm);
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.city-sheet-pop-chip:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }
.city-sheet-pop-chip.active { background: var(--primary); color: var(--btn-text); border-color: var(--primary); }
.city-sheet-pop-all { border-style: dashed; color: var(--text-muted); }
.city-sheet-pop-all.active { border-style: solid; }

/* Текущая локация + радиус */
.city-sheet-current {
  border-top: 1px solid var(--border-light);
  padding-top: 14px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.city-sheet-current-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px;
}
.city-sheet-current-row svg { color: var(--primary); flex-shrink: 0; }
.city-sheet-current-name { font-weight: 600; color: var(--text); flex: 1; }
.city-sheet-current-count { font-size: 12px; color: var(--text-muted); }
.city-sheet-current-clear {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.city-sheet-current-clear:hover { background: var(--border-light); color: var(--danger); }
.city-sheet-radius-row {
  display: flex; align-items: center; gap: 10px;
}
.city-sheet-radius-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.city-sheet-radius-row input[type="range"] {
  flex: 1; accent-color: var(--primary); touch-action: none; cursor: pointer; height: 22px;
}
.city-sheet-radius-val {
  font-size: 12px; font-weight: 700; color: var(--primary);
  white-space: nowrap; min-width: 46px; text-align: end;
}

/* ================================================================
   LOC MINI MAP — compact Leaflet map in city sheet
   ================================================================ */









/* ================================================================
   PWA STANDALONE
   ================================================================ */
.pwa-standalone {
  /* В standalone статус-бар всегда есть (floor 6px). Уменьшаем полный инсет на 6px,
     чтобы хедер не «висел» далеко от острова/чёлки; иконки остаются ниже выреза. */
  --safe-top: max(6px, calc(env(safe-area-inset-top, 44px) - 6px));
}
.pwa-standalone .app-header {
  /* height must grow to include the status bar area, not just padding into it */
  padding-top: var(--safe-top) !important;
  height: calc(var(--header-height) + var(--safe-top)) !important;
}
/* На главной safe-area держит слот плиток (он выше по потоку), шапка липкая
   и должна быть ровно в свою высоту — иначе двойной отступ под чёлкой. */
.pwa-standalone .app-layout--home .app-header {
  padding-top: 0 !important;
  height: var(--header-height) !important;
}
.pwa-standalone .app-header-inner {
  height: var(--header-height) !important; /* inner row = --header-height (50px в портрете) */
}
.pwa-standalone .tab-bar {
  /* height ДОЛЖНА расти на ту же safe-area, что и padding-bottom,
     иначе кнопки «съезжают вверх» (height fallback 0 vs padding fallback 20) */
  height: calc(var(--tab-height) + env(safe-area-inset-bottom, 20px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 20px) !important;
}
/* установленное приложение: плавающая плашка сама отступает от safe-area,
   тянуть её высоту на всю нижнюю зону не нужно */
.pwa-standalone .tab-bar--float {
  height: var(--tab-panel-h) !important;
  padding-bottom: 0 !important;
  bottom: calc(env(safe-area-inset-bottom, 20px) + 6px);
}
/* Лента клипов (position:fixed) — в установленном приложении тоже во весь экран:
   кадр уходит под шторку и под таббар, ничего не обрезаем. */
.pwa-standalone .clips-feed {
  top: 0;
  bottom: 0;
}
.pwa-standalone .clips-upload-fab {
  bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 20px) + 14px);
}
.pwa-standalone .tab-item { font-size: 11px !important; }
.pwa-standalone .tab-item svg { stroke-width: 1.65 !important; }

/* ── Фуллскрин-режим клипов (двойной тап на видео) ────────────────────── */
body.clips-fullscreen .app-header {
  opacity: 0;
  pointer-events: none;
}
body.clips-fullscreen .tab-bar {
  opacity: 0;
  pointer-events: none;
}
body.clips-fullscreen .clips-feed {
  top: 0;
  bottom: 0;
}
/* Карта исключена: она во весь экран, панель плавает поверх — резерв места снизу
   дал бы чёрную полосу. Это правило идёт ПОЗЖЕ .app-main:has(.map-page-v3), поэтому
   без :not(...) оно бы его перебило. */
.pwa-standalone .app-main:not(:has(.map-page-v3)) {
  padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 20px)) !important;
}
.pwa-standalone .auth-page {
  padding-top: calc(var(--header-height) + var(--safe-top));
}
.pwa-standalone .map-container {
  height: calc(100dvh - var(--header-height) - var(--safe-top) - var(--tab-height) - env(safe-area-inset-bottom, 20px)) !important;
}
/* Карта в PWA: и хедер, и нижняя панель — плавающие плашки ПОВЕРХ карты, места не
   занимают. Значит карта во весь экран, ничего не вычитаем (иначе снизу чёрная полоса). */
.pwa-standalone .map-page-v3 { height: 100dvh !important; }

/* ================================================================
   FORCE LIGHT MODE — always light regardless of system preference
   ================================================================ */
html { color-scheme: dark; }

/* Force dark theme for everyone (unless .light class set) */
:root:not(.light) {
  --bg:           #1a1f1c;
  --bg-warm:      #1f2522;
  --card:         #242b27;
  --text:         #e8e2d4;
  --text-dim:     #b8b0a3;
  --text-muted:   #8a837a;
  --border:       #353c37;
  --border-light: #2b322e;
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.3);
  --shadow:       0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:    0 8px 28px rgba(0,0,0,0.55);
}
:root:not(.light) body { background: var(--bg); color: var(--text); }
:root:not(.light) input,
:root:not(.light) select,
:root:not(.light) textarea { background: var(--card); color: var(--text); border-color: var(--border); }
:root:not(.light) input::placeholder,
:root:not(.light) select::placeholder,
:root:not(.light) textarea::placeholder { color: var(--text-muted); }

/* ================================================================
   DESKTOP 3-COLUMN LAYOUT
   ================================================================ */

/* Mobile: hide desktop elements */
.desktop-header-search { display: none; }
.desktop-header-city { display: none; }
.desktop-inline-header { display: none; }
.desktop-inline-header-inner { display: none; }
.sidebar-top-row { display: none; }
.sidebar-search { display: none; }
.desktop-header-coins { display: none; }
.desktop-header-avatar { display: none; }
.desktop-header-msg { display: none; }
.desktop-left-sidebar { display: none; }
.desktop-right-sidebar { display: none; }
.desktop-layout { display: contents; }
.header-login-btn { display: none; }
.header-sort-tabs { display: none; }

/* Mobile: show search icon */
.mobile-search-btn { display: flex; }

/* Desktop create button: hidden on mobile */
.desktop-header-create { display: none; }


/* ===== Desktop-grid: обычный десктоп/планшет ИЛИ touch-устройство в ландшафте ===== */
/* Ветка 1 (мышь/большой экран): min-width 768 + высота ≥600.
   Ветка 2 (touch в ландшафте): телефон/планшет боком (pointer:coarse + landscape + ≥640px)
   — тоже получает grid, а рельс-media ниже переставляет сайдбар вправо.
   Телефон в ПОРТРЕТЕ сюда не попадает → остаётся мобильный layout. */
@media (min-width: 768px) and (min-height: 600px),
       (min-width: 640px) and (pointer: coarse) and (orientation: landscape) {
  /* Reset mobile fixed-header offset — desktop uses its own header */
  .app-layout { padding-top: 0 !important; }
  /* Hide mobile nav */
  .tab-bar, .tab-scrim { display: none !important; }
  .mobile-search-btn { display: none !important; }
  .mobile-fish-fab { display: none !important; }
  .fab { display: none !important; }
  .events-create-btn { display: inline-flex; }
  /* Hide mobile feed widgets */
  .bite-banner { display: none !important; }
  .top-spots-section { display: none !important; }
  .location-selector { display: none !important; }
  .feed-promo { display: none !important; }
  .feed-quick-stats { display: none !important; }
  /* Feed sort chips — hidden on desktop (moved to header) */
  .feed-sort { display: none !important; }
  /* Hide mobile app-header (it's replaced by desktop-inline-header) */
  .app-header { display: none !important; }
  /* Стекло — тоже мобильное: на десктопе мобильной шапки нет, а слой оставался
     и рисовал тёмную полосу поверх верха страницы. */
  .home-scrim { display: none !important; }

  /* Клипы на десктопе — override добавлен после базовых стилей (строки ~7531) чтобы каскад работал */

  /* ===== GRID LAYOUT ===== */
  .desktop-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-rows: 64px 1fr;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
  }

  /* ===== HEADER — flex row, full-width, sticky ===== */
  .desktop-inline-header {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    grid-column: 1 / -1;
    grid-row: 1;
    height: 64px;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    gap: 0;
  }
  /* Logo: width matches left sidebar column exactly so center section aligns with posts */
  .desktop-inline-header > .app-logo {
    width: 220px;
    flex-shrink: 0;
    padding-inline-start: 16px;
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 8px;
  }
  /* Center: city + search, takes remaining space */
  .desktop-inline-header-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    min-width: 0;
  }
  /* Right: create + avatar — кнопка у левого края правой секции */
  .desktop-inline-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 12px 0 16px;
    flex-shrink: 0;
  }

  /* ===== LEFT SIDEBAR — sticky below header ===== */
  .desktop-left-sidebar {
    display: flex !important;
    flex-direction: column;
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 76px;
    /* Если пунктов больше, чем высота экрана — сам сайдбар скроллится, низ доступен */
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 10px;
    margin: 12px 0 12px 12px;
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
  }
  /* Тонкий скроллбар сайдбара, чтобы не занимал место */
  .desktop-left-sidebar::-webkit-scrollbar { width: 6px; }
  .desktop-left-sidebar::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 3px;
  }

  /* ===== CENTER — forest night ===== */
  .app-main.desktop-center {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    padding: 12px 12px 48px;
    background: transparent;
    overflow-y: visible;
    position: relative;
  }
  /* Fixed solid overlay at top: completely hides scrolling content above toolbar */
  .app-main.desktop-center::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--bg);
    z-index: 100;
    pointer-events: none;
  }

  /* Right sidebar hidden on medium screens */
  .desktop-right-sidebar { display: none !important; }

  /* ===== HEADER ELEMENTS ===== */
  .desktop-inline-header .app-logo { text-decoration: none; }

  /* City button */
  .desktop-header-city {
    display: flex !important;
    align-items: center; gap: 5px;
    padding: 0 12px; height: 36px; border-radius: var(--radius-xs);
    background: var(--bg); color: var(--text-dim);
    font-size: 13px; font-weight: 600; border: 1px solid var(--border);
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    font-family: inherit; transition: all 0.15s;
    max-width: 200px; min-width: 130px;
    justify-content: flex-start;
  }
  .desktop-header-city span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: start;
  }
  .desktop-header-city:hover { background: var(--border); }
  .desktop-header-city svg { color: var(--primary); }

  /* Search bar */
  .desktop-header-search {
    display: flex !important;
    flex: 1; max-width: none;
    align-items: center; gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0 14px; height: 36px;
    cursor: pointer; transition: all 0.15s;
    box-sizing: border-box;
  }
  .desktop-header-search:hover { border-color: var(--border); }
  .desktop-header-search svg { color: var(--text-muted); flex-shrink: 0; }
  .desktop-header-search input,
  :root:not(.light) .desktop-header-search input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
    font-size: 13px;
    color: var(--text);
    flex: 1;
    min-width: 0;
    cursor: pointer;
    font-family: inherit;
  }
  .desktop-header-search input::placeholder { color: var(--text-muted); }

  /* Coins */
  .desktop-header-coins {
    display: flex !important;
    align-items: center; gap: 5px; text-decoration: none; color: var(--text-dim);
    font-size: 13px; font-weight: 700; padding: 0 12px; height: 34px; border-radius: var(--radius-xs);
    background: var(--bg); transition: background 0.15s;
  }
  .desktop-header-coins:hover { background: var(--border); }
  .desktop-header-coins svg { color: #b8903a; }

  /* Avatar */
  .desktop-header-avatar {
    display: flex !important;
    width: 36px; height: 36px; border-radius: var(--action-btn-radius); overflow: hidden;
    flex-shrink: 0; text-decoration: none;
    border: 2px solid var(--border); transition: border-color 0.15s;
  }
  .desktop-header-avatar:hover { border-color: var(--border); }
  .desktop-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .desktop-header-avatar-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--primary); color: var(--btn-text); font-weight: 700; font-size: 15px;
  }
  /* Квадратная кнопка «Сообщения» в шапке (между «Создать пост» и аватаром) */
  .desktop-header-msg {
    display: flex !important; position: relative;
    width: 36px; height: 36px; border-radius: var(--action-btn-radius);
    align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--text-dim); text-decoration: none;
    border: 1px solid var(--border); background: var(--card);
    transition: color 0.15s, border-color 0.15s;
  }
  .desktop-header-msg:hover { color: var(--primary); border-color: var(--primary); }
  .desktop-header-msg-badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
    background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--bg);
  }

  /* Login button */
  .header-login-btn {
    display: inline-flex !important;
    align-items: center;
    padding: 0 20px;
    height: 34px;
    background: var(--primary);
    color: #fff;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
  }
  .header-login-btn:hover { background: var(--primary-dark); color: #fff; }

  /* Create button */
  .desktop-header-create {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius-xs);
    background: var(--primary); color: var(--btn-text); text-decoration: none;
    flex-shrink: 0; transition: background 0.15s;
  }
  .desktop-header-create:hover { background: var(--primary-dark); color: white; }

  /* Header icon buttons */
  .desktop-inline-header .icon-btn {
    color: var(--text-muted);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-xs);
  }
  .desktop-inline-header .icon-btn:hover { background: var(--bg); color: var(--text); }

  /* Sort tabs in header — now hidden (moved to feed filter) */
  .header-sort-tabs { display: none !important; }

  /* ===== SIDEBAR ELEMENTS ===== */
  .sidebar-top-row { display: none !important; }
  .sidebar-search { display: none !important; }
  .sidebar-user-card { display: none !important; }
  .sidebar-login-btn { display: none !important; }
  .sidebar-coins {
    display: flex !important;
    align-items: center; gap: 8px;
    margin-top: 12px; padding: 10px 14px;
    background: var(--bg-warm); border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text); text-decoration: none;
    font-size: 13px; font-weight: 600;
    transition: all 0.15s;
  }
  .sidebar-coins:hover { border-color: var(--primary); color: var(--primary); }
  .sidebar-coins svg { color: var(--orange); flex-shrink: 0; }
  /* Баланс рыбок в ПРАВОМ сайдбаре — сверху, отступ от виджета прогноза */
  .sidebar-coins--right { margin-top: 0; margin-bottom: 14px; }
  .sidebar-coins-num { font-weight: 800; font-size: 15px; }
  .sidebar-coins-label { color: var(--text-muted); font-size: 11px; margin-inline-start: auto; }
  .sidebar-achievements { display: none !important; }

  /* Nav */
  .sidebar-nav { display: flex; flex-direction: column; gap: 1px; }
  .sidebar-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: var(--radius-xs); color: var(--text-dim); text-decoration: none;
    font-size: 14px; font-weight: 500; transition: all 0.15s;
  }
  .sidebar-nav-item:hover { background: var(--bg); color: var(--text); }
  .sidebar-nav-item.active {
    background: var(--primary-light); color: var(--primary); font-weight: 700;
  }
  .sidebar-nav-item.active svg { color: var(--primary); }
  .sidebar-nav-item svg { flex-shrink: 0; color: var(--text-muted); }
  .sidebar-badge {
    margin-inline-start: auto; background: var(--primary); color: var(--btn-text);
    font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: var(--radius-sm);
  }
  .sidebar-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--text-muted); padding: 12px 14px 4px; user-select: none;
  }
  .sidebar-nav-divider {
    height: 1px; background: var(--border-light); margin: 8px 10px;
  }

  /* Feed tabs — hidden on desktop */
  .feed-tabs { display: none !important; }

  /* ===== RIGHT SIDEBAR WIDGETS ===== */
  .sidebar-widget {
    background: transparent; border: none;
    border-radius: 0; padding: 16px 4px; margin-bottom: 0;
    box-shadow: none;
    border-bottom: 1px solid #e5e7eb;
  }
  .sidebar-widget:last-child { border-bottom: none; }
  .sidebar-widget-title { font-weight: 700; font-size: 14px; margin-bottom: 12px; color: var(--text); }
  .sidebar-widget-title--link {
    display: flex; align-items: center; justify-content: space-between;
    text-decoration: none; cursor: pointer; transition: color 0.15s;
  }
  .sidebar-widget-title--link:hover { color: var(--primary); }
  .sidebar-widget-title--link svg { color: var(--primary); }
  .sidebar-widget-more {
    display: block; text-align: center; font-size: 13px; color: var(--primary);
    text-decoration: none; padding-top: 8px; margin-top: 6px;
    border-top: 1px solid var(--border-light); font-weight: 600;
  }
  .sidebar-widget-more:hover { text-decoration: underline; }
  .sidebar-bite-widget { text-decoration: none; color: var(--text); display: block; cursor: pointer; padding: 14px 4px; border-bottom: 1px solid #e5e7eb; }
  .sidebar-bite-widget:hover > div { opacity: 0.92; }
  .desktop-right-sidebar .sidebar-bite-widget { padding-top: 0; border-bottom: none; }
  .sidebar-bite-row { display: flex; align-items: center; gap: 10px; }
  .sidebar-bite-emoji { font-size: 28px; }
  .sidebar-bite-info { flex: 1; }
  .sidebar-bite-value { font-weight: 700; font-size: 15px; }
  .sidebar-bite-score { font-size: 12px; color: var(--text-muted); }
  .sidebar-bite-temp { font-size: 12px; color: var(--text-muted); }
  .sidebar-spot-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 0; text-decoration: none; color: var(--text); font-size: 13px;
    border-bottom: 1px solid var(--border-light);
  }
  .sidebar-spot-item:last-of-type { border-bottom: none; }
  .sidebar-spot-item:hover { color: var(--primary); }
  .sidebar-spot-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-end: 8px; }
  .sidebar-spot-rating { display: flex; align-items: center; gap: 3px; font-size: 12px; color: #c4943a; font-weight: 700; }
  .sidebar-top-user {
    display: flex; align-items: center; gap: 8px; padding: 7px 0;
    text-decoration: none; color: var(--text); font-size: 13px;
    border-bottom: 1px solid var(--border-light);
  }
  .sidebar-top-user:last-of-type { border-bottom: none; }
  .sidebar-top-user:hover { color: var(--primary); }
  .sidebar-top-user-rank { width: 18px; font-weight: 800; font-size: 12px; color: var(--text-muted); }
  .sidebar-top-user-avatar { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
  .sidebar-top-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .sidebar-avatar-placeholder-sm {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 12px; border-radius: 50%;
  }
  .sidebar-top-user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .sidebar-top-user-posts { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
  .sidebar-avatar-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--primary-light); color: var(--primary); font-weight: 800; border-radius: 50%;
  }
  .location-selector { margin-bottom: 8px; }
}

/* Планшеты 768–1199px: десктоп-сайдбар включается только с 1200px, а таб-бар
   скрывается уже с 768px — получалась «дыра» без навигации (замечание Павла #7).
   Возвращаем нижнее меню в этом диапазоне (нижний отступ контента под него уже есть). */
@media (min-width: 768px) and (max-width: 1199px) {
  .tab-bar { display: flex !important; }
  .tab-scrim { display: block !important; }
}

/* Телефон в ЛАНДШАФТЕ (низкая высота ≤500px): ужимаем хедер и таб-бар,
   чтобы под ленту оставалось максимум вертикали. Планшеты (высота ≥600px)
   сюда не попадают. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-height: 46px; --tab-height: 50px; --tab-panel-h: 44px; }
  .tab-item { font-size: 9px; gap: 2px; }
  .tab-item svg { width: 20px; height: 20px; }
  /* Баннеры/промо в ленте — компактнее, чтобы не занимать пол-экрана */
  .feed-promo, .bite-banner { margin-bottom: 6px; }
}

/* ===== Wide Desktop (1200px+): show right sidebar ===== */
@media (min-width: 1200px) {
  .desktop-layout {
    grid-template-columns: 220px minmax(0, 1fr) 260px;
    max-width: 1060px;
  }
  /* Right section: no left padding so button aligns with right sidebar left border */
  .desktop-inline-header-right {
    width: auto;
    box-sizing: border-box;
    justify-content: flex-end;
    padding: 0 12px 0 12px;
    gap: 8px;
    flex-shrink: 0;
  }
  .desktop-inline-header-right .header-create-btn {
    flex: none;
    justify-content: center;
    white-space: nowrap;
  }
  /* Right sidebar: sticky below header */
  .desktop-right-sidebar {
    display: flex !important;
    flex-direction: column;
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    position: sticky;
    top: 76px;
    padding: 9px 12px 12px;
    margin: 12px 12px 12px 0;
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
  }
}

/* ===== Планшет в ЛАНДШАФТЕ: вертикальный навигационный рельс СПРАВА ===== */
/* Вся навигация + действия хедера собраны в одну правую колонку; верхний хедер,
   левый сайдбар (перемещён вправо) и нижний таб-бар убраны. Контент — на всю
   остальную ширину. (pointer: coarse) = только touch (планшеты); десктоп с мышью не трогаем. */
.sidebar-tablet-actions { display: none; }

@media (pointer: coarse) and (orientation: landscape) and (min-width: 640px) {
  .desktop-layout {
    grid-template-columns: minmax(0, 1fr) 244px !important;
    grid-template-rows: auto 1fr !important;   /* row1 = прогноз клёва, row2 = навигация */
    max-width: none !important;
  }
  .desktop-inline-header { display: none !important; }
  .tab-bar, .tab-scrim { display: none !important; }

  /* Контент — слева, во всю высоту (span обеих строк) */
  .app-main.desktop-center {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    padding-top: 12px !important;
  }
  .app-main.desktop-center::before { display: none !important; }

  /* Виджет прогноза клёва — справа СВЕРХУ */
  .desktop-right-sidebar {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 10px 10px 0 !important;
    margin: 0 !important;
    position: static !important;
    border-inline-start: 1px solid var(--border-light);
  }
  /* Топ-рыбаков в узком рельсе прячем — оставляем только прогноз клёва */
  .desktop-right-sidebar .sidebar-widget { display: none !important; }

  /* Навигация/действия — справа ПОД прогнозом, со своим скроллом */
  .desktop-left-sidebar {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 0;
    overflow-y: auto;
    border-inline-start: 1px solid var(--border-light);
    border-inline-end: none;
  }

  /* Ряд действий хедера: поиск · создать · уведомления · чат · тема */
  .sidebar-tablet-actions {
    display: flex; align-items: center; justify-content: space-around;
    gap: 4px; padding: 8px 6px; margin: 4px 0 8px;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }
  .sta-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--primary-bg); color: var(--text);
    border: none; cursor: pointer; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sta-btn:active { background: var(--border); }
  .sta-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: #e5484d; color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  /* Выдвижное поле поиска (по кнопке 🔍 в ряду действий) */
  .sta-search-panel {
    display: flex; align-items: center; gap: 6px;
    margin: 0 0 8px; padding: 0 2px;
    overflow: hidden;
  }
  .sta-search-panel input {
    flex: 1; min-width: 0; height: 36px; padding: 0 10px;
    border-radius: var(--radius-sm); border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: 13px;
    font-family: inherit; outline: none;
  }

  /* Секции полного каталога в рельсе */
  .sidebar-rail-section { margin-bottom: 4px; }
  .sidebar-rail-section-title {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-dim);
    padding: 10px 12px 3px;
  }
}

/* ===== Dark theme overrides for sidebar ===== */
/* Sidebar is always dark (#0d1f1c) — overrides for dark system mode */
:root.dark .desktop-left-sidebar { border-color: rgba(255,255,255,0.06); }

@media (prefers-color-scheme: dark) {
  :root:not(.light) .desktop-left-sidebar { border-color: rgba(255,255,255,0.06); }
}
:root.dark .desktop-right-sidebar { border-color: rgba(255,255,255,0.06); }
:root.dark .sidebar-widget { background: var(--card); border-color: rgba(255,255,255,0.06); }
:root.dark .desktop-header-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
:root.dark .desktop-header-coins { background: rgba(255,255,255,0.06); }

@media (prefers-color-scheme: dark) {
  :root:not(.light) .desktop-right-sidebar { border-color: rgba(255,255,255,0.06); }
  :root:not(.light) .sidebar-widget { border-color: rgba(255,255,255,0.06); }
  :root:not(.light) .desktop-header-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
  :root:not(.light) .desktop-header-coins { background: rgba(255,255,255,0.06); }
}

/* ================================================================
   INLINE COMMENTS (extended)
   ================================================================ */
.post-comments { border-top: 1px solid var(--border-light); margin-top: 8px; padding-top: 8px; }
.comments-list { max-height: 400px; overflow-y: auto; overflow-x: hidden; }

/* ================================================================
   SHARE MENU (extended)
   ================================================================ */
.share-menu { position: absolute; bottom: 40px; right: 0; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 8px 0; box-shadow: var(--shadow-md); z-index: 50; min-width: 200px; }
.share-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 14px; cursor: pointer; color: var(--text); white-space: nowrap; }
.share-menu-item:hover { background: var(--bg-warm); }

/* ================================================================
   POST — HIDDEN STATE ("Не интересно")
   ================================================================ */
.post-card--hidden {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--card); border-radius: var(--radius); margin-bottom: 12px;
  color: var(--text-muted); font-size: 14px;
}
.post-hidden-undo {
  margin-inline-start: auto; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 4px 12px; font-size: 13px; color: var(--text-dim);
  cursor: pointer; transition: var(--transition);
}
.post-hidden-undo:hover { border-color: var(--primary); color: var(--primary); }

/* ================================================================
   COMMENT BAR — icons + error
   ================================================================ */
.comment-bar-icons {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.comment-bar-icons button {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--text-muted); opacity: 0.55; display: flex; align-items: center;
  border-radius: var(--radius-xs); transition: opacity 0.15s, color 0.15s;
}
.comment-bar-icons button:hover { color: var(--text-dim); opacity: 0.9; background: none; }
/* Телефон: пальце-дружелюбные тап-цели (было ~24px → промахи). 44×44 по iOS HIG,
   значок крупнее, больше зазор, чуть контрастнее. Десктоп не трогаем. */
/* ── TG-стиль композер комментария: скрепка слева, эмодзи+голос/отправка справа ── */
.comment-bar-attach { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.comment-bar-right { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.comment-attach-btn,
.comment-emoji-btn, .comment-voice-btn, .comment-send-btn {
  background: none; border: none; cursor: pointer; padding: 5px;
  color: var(--text-muted); opacity: 0.8;
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; border-radius: 50%;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
}
/* TG-свап голос↔отправка: обе кнопки в одной ячейке, плавно сменяются при вводе */
.comment-send-swap { position: relative; width: 36px; height: 36px; flex-shrink: 0; }
.comment-send-swap .swap-item {
  position: absolute; inset: 0; min-width: 36px; min-height: 36px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.comment-send-swap .swap-hidden {
  opacity: 0; transform: scale(0.5) rotate(-15deg); pointer-events: none;
}
.comment-attach-btn:hover,
.comment-emoji-btn:hover, .comment-voice-btn:hover {
  color: var(--text); opacity: 1; background: rgba(127,127,127,0.14);
}
.comment-send-btn { color: #fff; opacity: 1; background: var(--primary); }
.comment-send-btn:hover { background: var(--primary); filter: brightness(1.06); }

/* Меню вложений (клик, не ховер) + прозрачный бэкдроп для закрытия по клику вне.
   z-index выше шторки (positioner=602) — меню/панель порталятся в body поверх листа. */
.comment-attach-backdrop { position: fixed; inset: 0; z-index: 4000; }
.comment-attach-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px; min-width: 200px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  display: flex; flex-direction: column; gap: 2px;
}
/* Fixed-версия (портал в body): координаты кнопки задаются инлайном (left/bottom).
   Так меню не режется overflow:hidden короткой шторки. */
.comment-attach-menu--fixed { position: fixed; z-index: 4001; }
/* Двойной класс — специфичнее базового .comment-emoji-panel (оно ниже по файлу и
   иначе перебивало position:fixed → панель на ПК уезжала за верх документа). */
.comment-emoji-panel.comment-emoji-panel--fixed { position: fixed; left: auto; z-index: 4001; }
.comment-attach-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; min-height: 48px; cursor: pointer; text-align: start;
  background: none; border: none; color: var(--text); font-size: 15px;
  border-radius: 10px; transition: background 0.12s, color 0.12s;
}
.comment-attach-item:hover { background: var(--primary-light); color: var(--primary); }
.comment-attach-item svg { flex-shrink: 0; color: var(--primary); }

/* Эмодзи-панель */
.comment-emoji-panel {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 50;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px; width: min(340px, 88vw);
  max-height: 240px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
}
.comment-emoji-cell {
  background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1;
  padding: 4px; border-radius: 8px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.comment-emoji-cell:hover { background: var(--primary-light); }

/* Телефон: тап-цель 44px по высоте (комфортно пальцу), но уже (40) — чтобы поле было больше */
@media (max-width: 640px) {
  .comment-attach-btn,
  .comment-emoji-btn, .comment-voice-btn, .comment-send-btn {
    min-width: 40px; min-height: 44px;
  }
  .comment-send-swap { width: 40px; height: 44px; }
  .comment-send-swap .swap-item { min-width: 40px; min-height: 44px; }
  .comment-attach-btn svg,
  .comment-emoji-btn svg, .comment-voice-btn svg, .comment-send-btn svg { width: 22px; height: 22px; }
}

.comment-photo-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px; z-index: 50; min-width: 170px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.comment-photo-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; cursor: pointer;
  color: var(--text); font-size: 13px; border-radius: 7px;
  transition: background .12s; user-select: none;
}
.comment-photo-menu-item:hover { background: var(--primary-light); color: var(--primary); }

.comment-error-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  background: var(--danger-light); color: var(--danger); font-size: 13px;
  border-top: 1px solid var(--border-light);
}
.comment-error-bar button {
  margin-inline-start: auto; background: none; border: none; cursor: pointer;
  color: var(--danger); display: flex; padding: 2px;
}
.comment-delete-confirm-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: rgba(239,68,68,0.08); border-top: 1px solid rgba(239,68,68,0.2);
  font-size: 13px; color: var(--text);
}
.comment-delete-confirm-bar span { flex: 1; }
.comment-delete-confirm-yes {
  background: var(--danger); color: #fff; border: none; border-radius: 8px;
  padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.comment-delete-confirm-no {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}

/* ================================================================
   TROPHY PANEL — expand / collapse rows
   ================================================================ */
.trophy-expand-btn {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 8px 0; background: none; border: none; border-top: 1px solid var(--border-light);
  margin-top: 6px; color: var(--primary); font-size: 13px; cursor: pointer;
  font-family: inherit; transition: var(--transition);
}
.trophy-expand-btn:hover { opacity: 0.8; }
.trophy-expand-btn--collapse { color: var(--text-muted); font-size: 12px; border-top: none; border-bottom: 1px solid var(--border-light); margin-top: 0; margin-bottom: 4px; padding: 4px 0; }
.trophy-loading-full { font-size: 12px; color: var(--text-muted); padding: 6px 0; text-align: center; }
.trophy-row-weight { color: var(--primary); font-size: 13px; font-weight: 600; margin-inline-start: auto; text-decoration: none; }
.trophy-row-weight:hover { text-decoration: underline; }

/* ================================================================
   COMMENT — photo preview bar + attachment + location picker
   ================================================================ */
.comment-photo-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: var(--bg-warm);
  border-top: 1px solid var(--border-light);
}
.comment-photo-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  cursor: pointer; flex-shrink: 0; border: 1px solid var(--border);
  transition: opacity 0.15s;
}
.comment-photo-thumb:hover { opacity: 0.85; }
.comment-photo-preview-right { flex: 1; min-width: 0; }
.comment-photo-label { font-size: 13px; color: var(--text); display: block; font-weight: 500; }
.comment-photo-hint { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; }
.comment-photo-remove {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 4px; display: flex; flex-shrink: 0;
  border-radius: 50%; transition: var(--transition);
}
.comment-photo-remove:hover { color: var(--danger); background: var(--danger-light); }

.comment-photo-attachment {
  max-width: 220px; max-height: 220px; border-radius: var(--radius-sm);
  margin-top: 6px; cursor: pointer; display: block;
  object-fit: cover; border: 1px solid var(--border);
  transition: opacity 0.15s;
}
.comment-photo-attachment:hover { opacity: 0.9; }

/* Пикер локации в комментах = канон выпадающего меню (styleguide §419): .kx-menu + .kx-option.
   Портал в body + position:fixed (координаты якоря inline) — чтобы не резалось overflow шторки. */
.comment-loc-menu {
  position: fixed; z-index: 4001;
  min-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
}
.comment-loc-gps-loading { opacity: 0.65 !important; cursor: wait !important; pointer-events: none; }
@keyframes comment-loc-spin { to { transform: rotate(360deg); } }
.comment-loc-spinner { animation: comment-loc-spin 0.9s linear infinite; flex-shrink: 0; }
/* Превью найденного адреса — строка в стиле активного пункта меню + кнопка «Вставить» */
.comment-loc-preview {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  margin: 2px 0; border-radius: 8px;
  background: var(--menu-item-hover);
}
.comment-loc-preview-text { flex: 1; font-size: 13px; color: var(--text); }
.comment-loc-preview button {
  flex-shrink: 0; padding: 5px 12px; background: var(--primary); color: var(--btn-text);
  border: none; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
}
/* Поиск места — стандартное поле .kx-combo-input внутри меню + список подсказок */
.comment-loc-manual { padding: 4px 2px 2px; }
.comment-loc-manual .kx-combo-input { width: 100%; }
.comment-loc-suggests { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }

/* Локация-вложение: кликабельный чип (в композере и в комментарии) */
.comment-loc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb, 13,148,136), .35);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  max-width: 100%; text-align: start;
  transition: background 0.14s, filter 0.14s;
}
.comment-loc-chip:hover:not(:disabled) { filter: brightness(1.05); }
.comment-loc-chip:disabled { cursor: default; opacity: 0.85; }
.comment-loc-chip svg { flex-shrink: 0; }
.comment-loc-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comment-loc-chip--attached { margin-top: 6px; }
/* Чип в композере + крестик удаления */
.comment-loc-chip-preview { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }

/* Мини-карта локации комментария (модалка) */
.clm-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.clm-sheet {
  width: 100%; max-width: 520px;
  background: var(--card-bg, var(--bg)); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.clm-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  color: var(--text); font-weight: 600; border-bottom: 1px solid var(--border-light);
}
.clm-header svg { color: var(--primary); flex-shrink: 0; }
.clm-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.clm-close {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(127,127,127,0.14); color: var(--text-dim); border: none; cursor: pointer;
}
.clm-close:active { background: rgba(127,127,127,0.28); }
.clm-map { width: 100%; height: min(60vh, 380px); }
.clm-map .leaflet-container { width: 100%; height: 100%; background: var(--bg-warm); }
.clm-open-external {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; font-size: 14px; font-weight: 600;
  color: var(--primary); text-decoration: none;
  border-top: 1px solid var(--border-light);
}
.clm-open-external:active { background: var(--primary-light); }

/* ================================================================
   CREATE POST — location field
   ================================================================ */
.create-location-field {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--bg-warm); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px;
  transition: border-color 0.15s; position: relative;
}
.create-location-field:focus-within { border-color: var(--border); }
.create-location-input-row {
  display: flex; align-items: center; gap: 8px;
}
.create-location-pin { color: var(--primary); flex-shrink: 0; }
.create-location-input {
  flex: 1; background: none; border: none; outline: none;
  font-size: 15px; color: var(--text); font-family: inherit;
}
.create-location-input::placeholder { color: var(--text-muted); }
.create-location-clear {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 2px; display: flex; flex-shrink: 0;
}
.create-location-clear:hover { color: var(--danger); }
.create-location-btns {
  display: flex; gap: 8px;
}
.create-loc-btn {
  display: flex; align-items: center; gap: 5px; flex: 1;
  padding: 6px 10px; min-height: 44px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  justify-content: center; transition: var(--transition);
}
.create-loc-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.create-loc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.create-location-coords {
  font-size: 11px; color: var(--primary); padding: 2px 4px;
  font-family: monospace;
}

/* ── Место: секция-обёртка ── */
.create-location-section { display: flex; flex-direction: column; gap: 8px; }

/* ── Мои места — быстрый выбор ── */
.create-my-spots { }
.create-my-spots-label {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-bottom: 6px; display: block;
}
.create-my-spots-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.create-my-spot-chip {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 20px; font-size: 13px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-dim); cursor: pointer; font-family: inherit;
  transition: all 0.12s; -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.create-my-spot-chip.active {
  border-color: var(--primary); background: var(--primary-light);
  color: var(--primary); font-weight: 600;
}
.create-my-spot-chip:active:not(.active) { background: var(--bg-alt); }

/* ── Дневник ── */



/* ── Autocomplete дропдаун для поля места ── */
.create-location-suggestions {
  position: absolute; left: 0; right: 0; z-index: 200;
  top: calc(100% + 2px);
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.create-location-suggestion-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 14px; border: none;
  background: none; color: var(--text); font-size: 14px;
  cursor: pointer; text-align: start; font-family: inherit;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  transition: background 0.1s; -webkit-tap-highlight-color: transparent;
}
.create-location-suggestion-item:last-child { border-bottom: none; }
.create-location-suggestion-item:active { background: var(--bg-alt); }
.create-suggestion-pin { color: var(--primary); flex-shrink: 0; }

/* Location chip (selected state) */
.create-location-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--primary); background: var(--primary-light);
}
.create-location-chip-icon { color: var(--primary); flex-shrink: 0; }
.create-location-chip-name {
  flex: 1; font-size: 14px; font-weight: 600; color: var(--text);
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.create-location-chip-edit {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--primary); border-radius: var(--radius-xs);
  -webkit-tap-highlight-color: transparent;
}
.create-location-chip-edit:hover { background: rgba(127,161,122,.15); }
.create-location-chip-clear {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.create-location-chip-clear:hover { color: var(--danger); }

/* Привязка улова к рыбному месту */
.create-spot-link { margin: 4px 0 0; }
.create-spot-link-header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px;
}
.create-spot-link-label { font-size: 12px; color: var(--text-dim); font-weight: 600; flex: 1; }
.create-spot-open-map {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 14px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--primary); cursor: pointer; font-family: inherit; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.create-spot-link-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.create-spot-link-list::-webkit-scrollbar { display: none; }
.create-spot-link-item {
  flex-shrink: 0; display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 20px;
  border: 1.5px solid var(--border-light);
  background: var(--bg); color: var(--text);
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.create-spot-link-item.active {
  border-color: var(--primary); background: var(--primary-bg); color: var(--primary); font-weight: 600;
}
.create-spot-link-count { font-size: 11px; color: var(--text-dim); }

/* ── UI-2a: Create Post mobile-first ───────────────────────────── */

@media (min-width: 768px) { .create-page { padding: 0; } }






.create-publish-btn {
  height: 38px; padding: 0 16px; border-radius: 20px;
  background: var(--primary); color: var(--bg);
  font-size: 14px; font-weight: 700; border: none; cursor: pointer;
  transition: background 0.15s, opacity 0.15s; white-space: nowrap;
}
.create-publish-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.create-publish-btn:hover:not(:disabled) { background: var(--primary-dark); }

.create-form {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 0 max(14px, env(safe-area-inset-bottom));
}












/* Fish Pills */






/* Weight Stepper */








/* ================================================================
   INLINE SPOT PICKER (CreatePost)
   ================================================================ */
.inline-picker {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
}
.inline-picker-map {
  position: relative; height: 260px;
}
.inline-picker-popup {
  position: absolute; bottom: 8px; left: 8px; right: 8px; z-index: 999;
  background: var(--card); border: 1.5px solid var(--primary);
  border-radius: var(--radius); padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.inline-picker-popup-info { flex: 1; min-width: 0; }
.inline-picker-popup-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inline-picker-popup-meta { font-size: 12px; color: var(--primary); margin-top: 2px; }
.inline-picker-popup-btn {
  background: var(--primary); color: var(--bg); border: none; border-radius: 8px;
  padding: 7px 13px; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.inline-picker-popup-btn:hover { opacity: 0.9; }
.inline-picker-popup-x {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; padding: 2px; flex-shrink: 0;
}
.inline-picker-popup-x:hover { color: var(--text); }
.inline-picker-new-name {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 14px; color: var(--text); padding: 0;
  -webkit-appearance: none;
}
.inline-picker-new-name::placeholder { color: var(--text-muted); }
.inline-picker-name-loading {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted);
}
@keyframes spin { to { transform: rotate(360deg); } }
.inline-picker-spin { animation: spin 0.8s linear infinite; }
.inline-picker-list {
  max-height: 200px; overflow-y: auto;
  border-top: 1px solid var(--border);
}
.inline-picker-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px; background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer;
  text-align: start; transition: background 0.1s;
}
.inline-picker-item:hover,
.inline-picker-item.active { background: var(--primary); color: var(--btn-text); }
.inline-picker-item-pin { color: var(--primary); flex-shrink: 0; }
.inline-picker-item-info { flex: 1; min-width: 0; }
.inline-picker-item-name {
  display: block; font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inline-picker-item-meta { font-size: 11px; color: var(--text-muted); display: block; }
.inline-picker-item-dist {
  font-size: 12px; color: var(--text-dim); font-weight: 500; flex-shrink: 0;
}
.inline-picker-empty {
  padding: 16px 12px; font-size: 13px; color: var(--text-muted); text-align: center;
}
.inline-picker-loading {
  padding: 20px; font-size: 13px; color: var(--text-muted); text-align: center;
}

/* ================================================================
   LOCATION PICKER MODAL
   ================================================================ */

@media (min-width: 600px) {
  .loc-modal-overlay { align-items: center; justify-content: center; }
}

@media (min-width: 600px) {
  .loc-modal { border-radius: var(--radius); max-width: 520px; max-height: 80vh; }
}
@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}






























/* Location picker search bar */














/* ================================================================
   POST DELETE / EDIT MODALS
   ================================================================ */
.modal-box {
  background: var(--card); border-radius: var(--radius);
  width: 100%; max-width: 400px; padding: 24px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35); animation: modal-slide 0.2s ease;
}
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.modal-body { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
.modal-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid var(--border-light); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text); font-family: inherit;
  font-size: 14px; resize: vertical; margin-bottom: 8px;
}
.modal-textarea:focus { outline: none; border-color: var(--border); }
.modal-input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1.5px solid var(--border-light); border-radius: var(--radius-xs);
  background: var(--bg); color: var(--text); font-family: inherit;
  font-size: 14px; margin-bottom: 8px;
}
.modal-input:focus { outline: none; border-color: var(--border); }
.modal-box--edit { max-width: 480px; max-height: 90vh; overflow-y: auto; }
/* Photo rotation grid in edit modal */
.edit-photos { margin-top: 4px; }
.edit-photos-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }

/* Cover offset preview */
.edit-cover-section { margin-top: 12px; }
.edit-cover-previews { display: flex; gap: 12px; margin-bottom: 10px; }
.edit-cover-preview-wrap { display: flex; flex-direction: column; gap: 4px; }
.edit-cover-preview-label { font-size: 11px; color: var(--text-muted); text-align: center; }
.edit-cover-preview {
  overflow: hidden; border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-warm);
  flex-shrink: 0;
}
.edit-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edit-cover-preview--mobile  { width: 120px; height: 90px; }   /* 4:3 — телефон */
.edit-cover-preview--desktop { width: 200px; height: 115px; }  /* ~16:9 — десктоп */
.edit-cover-slider-row { display: flex; align-items: center; gap: 8px; }
.edit-cover-slider { flex: 1; accent-color: var(--primary); cursor: pointer; }
.edit-cover-slider-hint { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.edit-photos-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.edit-photo-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.edit-photo-wrap {
  width: 72px; height: 72px;
  border-radius: 8px; overflow: hidden;
  background: var(--bg-warm);
  display: flex; align-items: center; justify-content: center;
}
.edit-photo-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
.edit-photo-rotate {
  display: flex; align-items: center; justify-content: center;
  gap: 3px; font-size: 11px; padding: 3px 8px;
  border-radius: var(--radius-xs); border: 1px solid var(--border);
  background: var(--bg-warm); color: var(--text-muted); cursor: pointer;
}
.edit-photo-rotate:hover { color: var(--primary); border-color: var(--primary); }
.modal-error { font-size: 13px; color: var(--danger); margin-bottom: 10px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.modal-btn {
  padding: 8px 18px; border-radius: var(--radius-xs); font-size: 14px;
  font-weight: 600; cursor: pointer; border: none; transition: opacity 0.15s;
}
.modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.modal-btn-cancel { background: var(--bg); color: var(--text-dim); }
.modal-btn-cancel:hover { background: var(--border-light); }
.modal-btn-danger { background: var(--danger); color: #fff; }
.modal-btn-danger:hover { background: #b91c1c; }
.modal-btn-primary { background: var(--primary); color: var(--btn-text); }
.modal-btn-primary:hover { opacity: 0.88; }

/* ================================================================
   AVATAR CROP MODAL
   ================================================================ */
.avatar-crop-modal {
  background: var(--card); border-radius: var(--radius);
  width: 100%; max-width: 380px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4); animation: modal-slide 0.2s ease;
  display: flex; flex-direction: column;
}
.avatar-crop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 12px; font-weight: 700; font-size: 15px; color: var(--text);
  border-bottom: 1px solid var(--border-light);
}
.avatar-crop-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px;
  display: flex; align-items: center; border-radius: 50%;
}
.avatar-crop-close:hover { background: var(--bg); }
.avatar-crop-body {
  padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.avatar-crop-canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.avatar-crop-canvas {
  border-radius: 50%; cursor: grab; display: block;
  box-shadow: 0 0 0 2px var(--primary);
}
.avatar-crop-canvas:active { cursor: grabbing; }
.avatar-crop-hint { font-size: 11px; color: var(--text-muted); }
.avatar-crop-zoom {
  display: flex; align-items: center; gap: 8px; width: 100%;
}
.avatar-crop-zoom-btn {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 6px; display: flex; align-items: center; color: var(--text-dim);
  cursor: pointer; flex-shrink: 0;
}
.avatar-crop-zoom-btn:hover { border-color: var(--primary); color: var(--primary); }
.avatar-crop-slider {
  flex: 1; accent-color: var(--primary); height: 3px;
}
.avatar-crop-replace-btn {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 7px 14px; color: var(--text-dim); cursor: pointer; width: 100%;
  justify-content: center; font-family: inherit;
}
.avatar-crop-replace-btn:hover { border-color: var(--primary); color: var(--primary); }
.avatar-crop-history { width: 100%; }
.avatar-crop-history-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.avatar-crop-history-list { display: flex; gap: 10px; }
.avatar-crop-history-item {
  position: relative; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--border); padding: 0; cursor: pointer; flex-shrink: 0;
  transition: border-color 0.15s;
}
.avatar-crop-history-item:hover { border-color: var(--border); }
.avatar-crop-history-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-crop-history-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transition: opacity 0.15s;
}
.avatar-crop-history-item:hover .avatar-crop-history-overlay { opacity: 1; }
.avatar-crop-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 12px 18px 16px; border-top: 1px solid var(--border-light);
}
.avatar-crop-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-muted); border-radius: 50%;
  background: var(--bg);
}
.avatar-crop-canvas-wrap { position: relative; }
.avatar-crop-empty {
  width: 240px; height: 240px; border-radius: 50%;
  border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 13px; color: var(--text-muted); padding: 20px; box-sizing: border-box;
}

/* ─── Profile fishing types chips ─────────────────────────────────────── */



/* ─── Settings fishing type chips ─────────────────────────────────────── */
.fishing-types-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fishing-type-chip {
  padding: 3px 7px; border-radius: 14px; font-size: 11.5px; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
  font-family: inherit;
}
.fishing-type-chip.active {
  background: var(--primary); color: var(--btn-text); border-color: var(--primary);
}
.fishing-type-chip:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* ─── Profile Tabs ─────────────────────────────────────────────────────── */







/* ─── Profile photo grid ───────────────────────────────────────────────── */




/* ─── Garage ───────────────────────────────────────────────────────────── */



.garage-add-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--primary); color: var(--btn-text); border: none; cursor: pointer;
}
.garage-add-form {
  margin: 0 12px 12px; padding: 14px 16px;
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px;
}
.garage-form-row { display: flex; gap: 8px; }
.garage-select, .garage-input {
  flex: 1; padding: 8px 10px; border-radius: var(--input-radius);
  border: 1px solid var(--border); background: var(--bg);
  font-size: 14px; color: var(--text); outline: none;
}
.garage-select:focus, .garage-input:focus { border-color: var(--border); }
.garage-input-year { max-width: 80px; flex: 0 0 80px; }
.garage-input-full { width: 100%; }
.garage-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.garage-cancel-btn {
  padding: 7px 16px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer;
}
.garage-save-btn {
  padding: 7px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--primary); color: var(--btn-text); border: none; cursor: pointer;
}
.garage-save-btn:disabled { opacity: 0.6; }
.garage-items-list { display: flex; flex-direction: column; gap: 0; }
.garage-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
}
.garage-item:last-child { border-bottom: none; }
.garage-item:hover { background: var(--bg); }
.garage-item-icon { font-size: 24px; width: 40px; text-align: center; flex-shrink: 0; }
.garage-item-info { flex: 1; min-width: 0; }
.garage-item-category { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.garage-item-name { font-size: 15px; font-weight: 600; color: var(--text); }
.garage-item-year { font-weight: 400; color: var(--text-muted); }
.garage-item-notes { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.garage-delete-btn {
  padding: 6px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); border-radius: var(--radius-xs); opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.garage-item:hover .garage-delete-btn { opacity: 1; }
.garage-delete-btn:hover { color: var(--danger); }

/* ─── Garage Scene ─────────────────────────────────────────────────────── */
.garage-scene-wrap {
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.garage-scene-stage {
  position: relative;
  width: 100%;
  /* 1024×640 background aspect ratio */
  aspect-ratio: 1024 / 640;
  max-height: 400px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}
.garage-spr {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* smooth crisp scaling */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
.garage-scene-empty {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  pointer-events: none;
}
.garage-skin-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 10px;
  background: var(--card);
  border-bottom: 1px solid var(--border-light);
}
.garage-skin-label {
  font-size: 12px; color: var(--text-muted); margin-inline-end: 2px;
}
.garage-skin-btn {
  padding: 4px 14px; border-radius: 14px; font-size: 12px; font-weight: 500;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text-muted); cursor: pointer; transition: all 0.15s;
}
.garage-skin-btn.active {
  background: var(--primary); color: var(--btn-text); border-color: var(--primary);
}
.garage-skin-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

/* Fisherbase slot — placeholder */
.fisherbase-slot {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px; text-align: center;
}
.fisherbase-slot-icon { font-size: 48px; margin-bottom: 12px; }
.fisherbase-slot-title {
  font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 8px;
}
.fisherbase-slot-desc {
  font-size: 14px; color: var(--text-muted); max-width: 280px; line-height: 1.5; margin: 0 0 16px;
}
.fisherbase-slot-hint {
  font-size: 13px; color: var(--text-muted);
  background: var(--bg); border-radius: var(--radius-sm);
  padding: 10px 16px; max-width: 300px; line-height: 1.5;
}

/* ── Rewards Page ─────────────────────────────────────── */
.rewards-page { max-width: 560px; margin: 0 auto; padding: 0 0 80px; }
.rewards-header { padding: 24px 16px 8px; }
.rewards-header h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.rewards-header p { color: var(--text-muted); font-size: 14px; margin: 0; }
.rewards-list { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; }

/* Card = column: top-row (icon+body) then action below */
.reward-card {
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: opacity .2s;
}
.reward-card--claimed { opacity: .7; }

/* Top row: icon + body side by side */
.reward-card-top { display: flex; gap: 14px; align-items: flex-start; }
.reward-card-icon { font-size: 36px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.reward-card-body { flex: 1; min-width: 0; }
.reward-card-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.reward-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: 0 0 8px; }
.reward-card-coins { font-size: 20px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* Action row — full width below */
.reward-card-action { width: 100%; }

.reward-tg-steps,
.reward-vk-steps { display: flex; flex-direction: column; gap: 8px; }

.reward-btn {
  width: 100%; display: block; text-align: center;
  padding: 11px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; text-decoration: none;
  cursor: pointer; border: none;
}
.reward-btn-sm {
  flex-shrink: 0; padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer; border: none;
  white-space: nowrap;
}
.reward-tg-hint { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.4; }

.reward-vk-check { display: flex; gap: 8px; align-items: stretch; }
.reward-vk-input {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: var(--radius-sm); font-size: 14px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); outline: none;
}
.reward-vk-input:focus { border-color: var(--primary); }
.reward-error { font-size: 13px; color: var(--danger); margin: 4px 0 0; }
.reward-claimed-badge {
  display: flex; align-items: center; gap: 8px;
  color: var(--primary); font-weight: 600; font-size: 15px;
  background: rgba(76,175,80,.1); border-radius: var(--radius-sm); padding: 10px 14px;
}

.rewards-footer { padding: 16px; text-align: center; }
.rewards-footer p { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; }
.rewards-footer-link { color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none; }

/* ── Каталог наград (за что дают рыбки) ── */
.rewards-section-title {
  padding: 20px 16px 4px; font-size: 13px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rewards-admin-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--primary); background: rgba(76,175,80,.12);
  border-radius: var(--radius-xs); padding: 2px 8px;
}
.rewards-login-hint { padding: 4px 16px 8px; }
.rwc-admin-note {
  margin: 8px 16px 0; font-size: 11px; font-weight: 600;
  color: var(--primary); background: rgba(76,175,80,.1);
  border-radius: 8px; padding: 6px 10px;
}

/* ── Кошелёк рыбака (/wallet) ── */
.wallet-page { max-width: 560px; margin: 0 auto; padding: 0 0 90px; }
.wallet-head { padding: 20px 16px 6px; }
.wallet-head h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.wallet-head p { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.4; }

.wallet-tabs {
  display: flex; gap: 4px; padding: 12px 16px 8px;
  position: sticky; top: 56px; z-index: 5; background: var(--bg);
}
.wallet-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--card-bg, var(--bg)); color: var(--text-muted);
  font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.wallet-tab--active { color: #fff; background: var(--primary); border-color: var(--primary); }
.wallet-pane { padding: 4px 16px; }

.wallet-guest { text-align: center; padding: 40px 16px; }
.wallet-guest p { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }
.wallet-guest .btn-primary { display: inline-block; padding: 11px 28px; }

.wallet-balance-card {
  background: linear-gradient(135deg, rgba(76,175,80,.14), rgba(76,175,80,.04));
  border: 1px solid var(--primary); border-radius: 18px;
  padding: 22px 18px; text-align: center; margin-top: 4px;
}
.wallet-balance-big { font-size: 40px; font-weight: 800; color: var(--primary); line-height: 1; }
.wallet-balance-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.wallet-balance-stats { display: flex; justify-content: center; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.wallet-balance-stats > div { display: flex; align-items: center; gap: 4px; }
.wallet-balance-stats b { color: var(--text); }

.wallet-goal { margin-top: 14px; background: var(--card-bg, var(--bg)); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.wallet-goal-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.wallet-goal-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.wallet-goal-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s; }

.wallet-section-title { font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 20px 0 10px; }

.wallet-txns { display: flex; flex-direction: column; gap: 2px; }
.wallet-txn { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.wallet-txn-desc { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 10px; }
.wallet-txn-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wallet-txn-amt { font-size: 15px; font-weight: 700; color: var(--primary); }
.wallet-txn-amt--neg { color: var(--danger); }
.wallet-txn-date { font-size: 12px; color: var(--text-muted); min-width: 44px; text-align: end; }
.wallet-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 24px 8px; }

.wallet-social-cta {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 13px 16px; border-radius: var(--radius); margin-top: 8px;
  background: var(--card-bg, var(--bg)); border: 1px solid var(--primary);
  color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none;
}

.wallet-lb { display: flex; flex-direction: column; gap: 4px; }
.wallet-lb-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--card-bg, var(--bg)); border: 1px solid var(--border); }
.wallet-lb-row--top { border-color: var(--primary); }
.wallet-lb-rank { font-size: 15px; font-weight: 700; min-width: 26px; text-align: center; }
.wallet-lb-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.wallet-lb-pro { font-size: 9px; font-weight: 800; color: #fff; background: var(--primary); border-radius: 4px; padding: 1px 5px; }
.wallet-lb-coins { font-size: 14px; font-weight: 700; color: var(--primary); white-space: nowrap; }

.wallet-shop { display: flex; flex-direction: column; gap: 8px; }
.wallet-shop-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--card-bg, var(--bg)); border: 1px solid var(--border); }
.wallet-shop-item--owned { opacity: .6; }
.wallet-shop-icon { font-size: 24px; flex-shrink: 0; }
.wallet-shop-body { flex: 1; min-width: 0; }
.wallet-shop-name { font-size: 14px; font-weight: 600; }
.wallet-shop-desc { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.wallet-shop-price { font-size: 15px; font-weight: 700; color: var(--primary); white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; }
.wallet-shop-owned { font-size: 12px; color: var(--text-muted); }
.wallet-shop-cta { display: block; text-align: center; margin: 14px 0 4px; padding: 12px; }

.wallet-soon { display: flex; flex-direction: column; gap: 6px; }
.wallet-soon-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--border); }
.wallet-soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; opacity: .6; }

.rwc-group { padding: 8px 16px 0; }
.rwc-group-title { font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 8px 0 6px; }
.rwc-list { display: flex; flex-direction: column; gap: 8px; }

.rwc-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
}
.rwc-row--override { border-color: var(--primary); }
.rwc-icon { font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.rwc-body { flex: 1; min-width: 0; }
.rwc-title { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.rwc-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-bottom: 4px; }
.rwc-freq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rwc-freq {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--text-muted); background: var(--border);
  border-radius: var(--radius-xs); padding: 1px 8px;
}
.rwc-badge {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  border-radius: var(--radius-xs); padding: 1px 8px;
  color: var(--text-muted); background: var(--border);
}
.rwc-badge--done { color: var(--primary); background: rgba(76,175,80,.12); }
.rwc-badge--full { color: var(--danger); background: rgba(220,38,38,.1); }
.rwc-row--done { opacity: .62; }

.rwc-amount-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.rwc-amount {
  font-size: 17px; font-weight: 700; color: var(--primary);
  white-space: nowrap; display: flex; align-items: center;
}
.rwc-amount--var { font-size: 12px; font-weight: 600; color: var(--text-muted); font-style: italic; }
.rwc-edit-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text-muted); display: flex; align-items: center;
}
.rwc-edit-btn:hover { color: var(--primary); }

.rwc-edit { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: flex-end; }
.rwc-edit-field { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.rwc-edit-field input {
  width: 68px; padding: 5px 8px; border-radius: 8px; font-size: 13px;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--text); outline: none; text-align: end;
}
.rwc-edit-field input:focus { border-color: var(--primary); }
.rwc-edit-actions { display: flex; gap: 6px; }
.rwc-btn {
  border: none; cursor: pointer; border-radius: 8px; padding: 6px;
  display: flex; align-items: center; justify-content: center;
}
.rwc-btn--ok { background: var(--primary); color: #fff; }
.rwc-btn--cancel { background: var(--border); color: var(--text); }
.rwc-btn:disabled { opacity: .5; cursor: default; }

/* ── Profile Analytics ────────────────────────────────── */

.pa-loading, .pa-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; }

.pa-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0 16px; }
.pa-stat { background: var(--card-bg, var(--bg)); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.pa-stat-value { display: block; font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.pa-stat-label { display: block; font-size: 11px; color: var(--text-muted); }

.pa-section { margin-bottom: 20px; }
.pa-section-title { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }

.pa-bars { display: flex; gap: 6px; align-items: flex-end; height: 90px; }
.pa-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; }
.pa-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.pa-bar-fill { width: 100%; background: var(--primary); border-radius: 4px 4px 0 0; min-height: 4px; transition: height .3s; }
.pa-bar-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.pa-bar-count { font-size: 11px; font-weight: 600; }

.pa-fish-list { display: flex; flex-direction: column; gap: 8px; }
.pa-fish-row { display: flex; align-items: center; gap: 8px; }
.pa-fish-name { font-size: 13px; min-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-fish-bar-wrap { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.pa-fish-bar { height: 100%; background: var(--primary); border-radius: 3px; min-width: 4px; transition: width .3s; }
.pa-fish-count { font-size: 12px; font-weight: 600; min-width: 24px; text-align: end; }

.pa-achievements { display: flex; flex-direction: column; gap: 6px; }
.pa-ach-progress { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.pa-ach-bar { height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s; }
.pa-ach-label { font-size: 13px; color: var(--text-muted); }

/* ── Onboarding Modal ─────────────────────────────────── */
.onboarding-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1100; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .2s; }
.onboarding-modal { background: var(--card-bg, var(--bg)); border-radius: 24px 24px 0 0; padding: 24px 20px 32px; width: 100%; max-width: 520px; position: relative; animation: slideUp .25s ease-out; max-height: 90vh; overflow-y: auto; }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.onboarding-top { text-align: center; margin-bottom: 20px; }
.onboarding-fish { font-size: 36px; display: block; margin-bottom: 8px; }
.onboarding-title { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.onboarding-sub { font-size: 14px; color: var(--text-muted); margin: 0; line-height: 1.4; }
.onboarding-body { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.onboarding-field { display: flex; flex-direction: column; gap: 5px; }
.onboarding-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.onboarding-input { background: var(--bg-warm); border: 1px solid var(--border-light, rgba(127,161,122,.2)); border-radius: var(--input-radius); color: var(--text); font-size: 15px; padding: 10px 12px; width: 100%; outline: none; transition: border-color .15s; }
.onboarding-input:focus { border-color: var(--accent, var(--primary)); }
.onboarding-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.onboarding-chip { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-light, rgba(127,161,122,.2)); background: var(--bg-warm); color: var(--text-dim); font-size: 13px; cursor: pointer; transition: all .15s; }
.onboarding-chip.active { background: var(--accent, var(--primary)); color: #14201a; border-color: transparent; font-weight: 600; }
.onboarding-actions { display: flex; flex-direction: column; gap: 8px; }
.onboarding-btn-save { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; border-radius: var(--radius); background: var(--accent, var(--primary)); color: #14201a; border: none; cursor: pointer; transition: background .15s; }
.onboarding-btn-save:hover { background: var(--accent-dark, var(--primary-dark)); }
.onboarding-btn-save:disabled { opacity: .6; cursor: default; }
.onboarding-btn-skip { width: 100%; padding: 10px; font-size: 13px; color: var(--text-muted); background: none; border: none; cursor: pointer; }
.onboarding-btn-skip:hover { color: var(--text); }
.onboarding-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onboarding-name-hint { font-size: 11px; color: var(--text-muted); margin: -8px 0 0; }
.onboarding-select-wrap { position: relative; }
.onboarding-select-wrap::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 14px; color: var(--text-muted); }
.onboarding-select { appearance: none; -webkit-appearance: none; padding-inline-end: 32px !important; }
/* legacy dot-style classes (kept for backward compat) */
.onboarding-skip { position: absolute; top: 16px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 13px; cursor: pointer; padding: 4px 8px; }
.onboarding-icon { color: var(--primary); margin-bottom: 16px; }
.onboarding-desc { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin-bottom: 24px; }
.onboarding-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; }
.onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .2s, transform .2s; }
.onboarding-dot.active { background: var(--primary); transform: scale(1.2); }
.onboarding-btn { width: 100%; padding: 13px; font-size: 15px; font-weight: 600; border-radius: var(--radius); text-align: center; }

/* ── Feed engagement block (quests + passive fishing) ─── */
.feed-engagement-block { display: flex; flex-direction: column; }

/* Единая карточка: оба виджета без собственных рамок/фонов */
.engagement-combined-card {
  background: var(--bg-warm, var(--bg));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.engagement-combined-card .daily-widget {
  background: transparent; border: none; border-radius: 0;
}
.engagement-combined-card .idle-fishing-widget {
  background: transparent; border: none; border-radius: 0; margin: 0;
}
.engagement-combined-divider {
  height: 1px; background: var(--border-light); margin: 0;
}

/* ── SocialRewardsBanner — feed ───────────────────────── */
.srb-feed { background: var(--card-bg, var(--bg)); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; position: relative; margin: 0; }
.srb-feed--claimed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; }
.srb-feed-claimed-label { font-size: 12px; color: var(--text-muted); }
.srb-feed-claimed-link { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; text-decoration: none; color: #fff; transition: opacity .15s; }
.srb-feed-claimed-link--tg { background: #229ED9; }
.srb-feed-claimed-link--vk { background: #0077FF; }
.srb-feed-claimed-link:hover { opacity: .85; }
.srb-feed-claimed-link svg { filter: brightness(0) invert(1); }
.srb-feed-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; opacity: .5; }
.srb-feed-close:hover { opacity: 1; }
.srb-feed-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-inline-end: 24px; }
.srb-feed-rows { display: flex; flex-direction: column; gap: 6px; }
.srb-feed-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.04); text-decoration: none; color: inherit; cursor: pointer; border: none; width: 100%; text-align: start; transition: background .15s; }
.srb-feed-row:hover { background: rgba(255,255,255,.08); }
.srb-feed-row--btn { font-size: 14px; }
.srb-feed-row--done { opacity: .6; }
.srb-feed-icon { font-size: 18px; flex-shrink: 0; }
.srb-feed-name { flex: 1; font-size: 14px; font-weight: 600; }
.srb-feed-coins { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.srb-feed-done { font-size: 16px; }
.srb-feed-auth-hint { display: block; margin-top: 10px; font-size: 12px; color: var(--primary); text-decoration: none; font-weight: 600; }
.srb-feed-auth-hint:hover { text-decoration: underline; }
.srb-feed--guest .srb-feed-title { font-size: 14px; }

/* ── SocialRewardsBanner — sidebar (no box) ───────────── */
.srb-sidebar { padding: 0 0 12px; }
.srb-sidebar-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.srb-sidebar-row { margin-bottom: 4px; }
.srb-sidebar-link { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); text-decoration: none; padding: 4px 2px; transition: color .15s; }
.srb-sidebar-link:hover { color: var(--text); }
.srb-sidebar-earn { display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 4px 2px; cursor: pointer; width: 100%; text-align: start; color: inherit; font-size: 13px; }
.srb-sidebar-earn-label { flex: 1; color: var(--text); font-weight: 500; }
.srb-sidebar-earn-coins { font-size: 12px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.srb-sidebar-earn:hover .srb-sidebar-earn-label { color: var(--primary); }
.srb-sidebar-icon { display: flex; align-items: center; flex-shrink: 0; }
.srb-row--soon { display: flex; align-items: center; gap: 7px; padding: 4px 2px; opacity: .6; cursor: default; pointer-events: none; }
.srb-feed-row--soon { cursor: default; pointer-events: none; opacity: .65; }
.srb-soon-label { flex: 1; font-size: 13px; color: #9ca3af; }
.srb-soon-badge { font-size: 10px; font-weight: 600; color: #6b7280; background: rgba(156,163,175,.12); padding: 2px 7px; border-radius: var(--radius-xs); white-space: nowrap; flex-shrink: 0; }

/* MAX в claimed-пилюлях — брендовый фон (иконки белые через общий filter выше) */
.srb-feed-claimed-link--max { background: #2C6BED; }

/* ── SocialClaimModal ─────────────────────────────────── */
.scm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 500; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .15s; }
.scm-sheet { background: var(--card-bg, var(--bg)); border-radius: 20px 20px 0 0; padding: 8px 20px 40px; width: 100%; max-width: 480px; animation: slideUp .2s ease-out; }
.scm-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 20px; }
.scm-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; }
.scm-icon { font-size: 28px; flex-shrink: 0; }
.scm-title { font-size: 17px; font-weight: 700; margin-bottom: 3px; }
.scm-sub { font-size: 13px; color: var(--text-muted); }
.scm-x { margin-inline-start: auto; background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; padding: 0 4px; opacity: .6; flex-shrink: 0; }
.scm-x:hover { opacity: 1; }
.scm-steps { display: flex; flex-direction: column; gap: 16px; }
.scm-step { display: flex; gap: 12px; }
.scm-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.scm-step-body { flex: 1; }
.scm-step-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.scm-subscribe-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--border); color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; transition: background .15s; }
.scm-subscribe-btn:hover { background: rgba(255,255,255,.12); }
.scm-verify-btn { padding: 9px 18px; border-radius: var(--radius-sm); background: var(--primary); color: #fff; border: none; font-size: 14px; font-weight: 700; cursor: pointer; transition: opacity .15s; }
.scm-verify-btn:disabled { opacity: .5; cursor: not-allowed; }
.scm-verify-btn:not(:disabled):hover { opacity: .9; }
.scm-verify-btn--sm { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.scm-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; line-height: 1.4; }
.scm-vk-row { display: flex; gap: 8px; align-items: center; }
.scm-vk-input { flex: 1; padding: 9px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--input-radius); color: inherit; font-size: 16px; }
.scm-vk-input::placeholder { color: var(--text-muted); }
.scm-error { font-size: 12px; color: var(--danger); margin-top: 8px; line-height: 1.4; }
.scm-done { text-align: center; padding: 16px 0 8px; }
.scm-done-icon { font-size: 48px; margin-bottom: 12px; }
.scm-done-title { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.scm-done-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.scm-close-btn { width: 100%; padding: 13px; font-size: 16px; font-weight: 700; }

/* ── Admin sidebar link ───────────────────────────────── */
.sidebar-admin-link { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); text-decoration: none; padding: 6px 12px; margin-top: 4px; border-radius: 8px; transition: background .15s, color .15s; opacity: .7; }
.sidebar-admin-link:hover { background: rgba(255,255,255,.06); color: var(--text); opacity: 1; }

/* ── SocialClaimModal extras ──────────────────────────── */
.scm-waiting-btns { display: flex; flex-direction: column; gap: 8px; }
.scm-retry-btn { padding: 8px 14px; border-radius: var(--radius-sm); background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; cursor: pointer; transition: background .15s; }
.scm-retry-btn:hover { background: rgba(255,255,255,.06); }
.scm-retry-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── PostModal ─────────────────────────────────── */
.post-modal-overlay { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.7); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px 16px; overflow-y: auto; animation: fadeIn .15s; }
.post-modal { position: relative; width: 100%; max-width: 640px; background: var(--card-bg, var(--bg)); border-radius: 16px; overflow: hidden; }
/* Header — всегда снаружи скролл-зоны, [← назад] [полная шапка автора] */
.post-modal-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: var(--card-bg, var(--bg)); }
.post-modal-back { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--text-dim); border: 1px solid var(--border-light); transition: background 0.13s, color 0.13s; -webkit-tap-highlight-color: transparent; }
.post-modal-back:hover { background: var(--card); color: var(--text); }
.post-modal-back:active { background: var(--border); }
/* post-author внутри modal-header: убираем gap-overhead, flex:1 чтобы занимал оставшееся место */
.post-modal-author-block { flex: 1; min-width: 0; }
/* Скрываем дублирующую шапку автора в PostCard внутри модала */
.post-modal-body .post-header { display: none; }
/* Старый класс */
.post-modal-close { display: none; }
/* Drag handle strip (mobile swipe-down hint) */
.post-modal-drag-handle {
  display: none;
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.25);
  margin: 8px auto 0; flex-shrink: 0;
}
/* UI-1e: Mobile Fullscreen PostModal */
@media (max-width: 767px) {
  .post-modal-overlay { padding: 0; align-items: stretch; background: rgba(0,0,0,0.3); }
  .post-modal { border-radius: 0; max-height: none; max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  .post-modal-drag-handle { display: block; }
  .post-modal-header { padding: 10px 12px; }
  .post-modal-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px) + 8px); }
}
/* UI-1f: Sticky comment bar inside modal body (mobile only) */
@media (max-width: 767px) {
  .post-modal-body .post-quick-comment-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--card);
    border-top: 1px solid var(--border-light);
    padding-bottom: max(4px, env(safe-area-inset-bottom));
    margin-top: 0;
  }
}

/* =====================================================================
   POST BOTTOM SHEET (VK-style)
   Только transform — GPU, без рефлоу.
   enter(100%) → partial(37.6%) → full(0%) → closing(110%)
   37.6% = (93dvh - 58dvh) / 93dvh — показываем нижние 58dvh при partial
   ===================================================================== */
.post-bs-overlay {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  height: 100dvh;  /* Динамический вьюпорт (iOS): сам следит за панелью Safari — низ листа/затемнения
                      под зону нижней панели Safari (иначе там «пустота» ниже листа) */
  background: rgba(0,0,0,0.45);
  transition: background 0.28s ease;
  touch-action: none; /* блокирует тач-скролл через оверлей */
}
.post-bs-overlay--dim0 { background: rgba(0,0,0,0); } /* enter/closing — прозрачный */

/* Positioner: position:fixed без will-change.
   top и height задаются ЧЕРЕЗ JS (visualViewport API в PostModal.tsx).
   CSS-значения — fallback если visualViewport недоступен. */
.post-bs-positioner {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100dvh;  /* Динамический вьюпорт: сам следит за панелью Safari (не 100vh — тот перелетал за панель).
                      до низа под панелью Safari. JS ужимает по visualViewport при клавиатуре. */
  z-index: 602;
  pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-end;  /* лист прижат к низу */
}

/* Curtain: скрыт по умолчанию.
   JS (updateLayout) делает display:block и устанавливает top/height
   когда клавиатура открыта, точно накрывая зону между шторкой и клавиатурой. */
.post-bs-curtain {
  position: fixed;
  left: 0; right: 0;
  background: var(--card-bg, var(--bg));
  z-index: 601;
  pointer-events: none;
  display: none; /* показывается JS-ом */
}

.post-bs-sheet {
  position: relative;
  width: 100%;
  height: auto;           /* подстраивается под контент */
  /* Не выше видимой области минус отступ под Dynamic Island/часы (safe-area-top),
     чтобы заголовок и крестик не прятались под камеру iPhone. 100% = высота позиционера (=visualViewport). */
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 12px);
  pointer-events: all;
  background: var(--card-bg, var(--bg));
  border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  will-change: transform;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
}
.post-bs-sheet--open    { transform: translateY(0); }
.post-bs-sheet--closing { transform: translateY(110%); transition: transform 0.28s ease; }

/* Верхняя drag-зона: ручка + заголовок + статистика */
.post-bs-topzone {
  flex-shrink: 0;
  padding: 6px 12px 4px;   /* было 10/8 + safe-area-top ≈ 59px → большая пустота над полоской */
  touch-action: none;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.post-bs-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.22);
  margin: 0 auto 6px;
}
.post-bs-header-row {
  display: flex; align-items: center;
  margin-bottom: 2px;
}
.post-bs-ver { font-size: 10px; opacity: .5; margin-inline-start: 6px; font-weight: 400; }
.post-bs-title {
  flex: 1;
  font-size: 16px; font-weight: 700; color: var(--text);
  text-align: center;
}
.post-bs-close-btn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  color: var(--text-dim);
  border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.13s;
}
.post-bs-close-btn:active { background: rgba(255,255,255,0.2); }
.post-bs-stats {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; color: var(--text-dim);
  padding-bottom: 2px;
}
.post-bs-dot { opacity: 0.5; }

/* Контейнер тела шторки */
.post-bs-body {
  display: flex; flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
/* Список комментов занимает всё тело шторки (flex:1).
   Пустое место — НИЖЕ последнего коммента, а не сверху.
   Это исключает "невидимую шторку" над комментами при скролле вверх. */
.post-bs-body .post-comments {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}
/* Внутри шторки .comments-list не должен сам скроллить — скроллит родитель .post-comments */
.post-bs-body .comments-list {
  max-height: none;
  overflow: visible;
}
/* Input bar — прибит к низу шторки, вне зоны скролла */
.post-bs-body .post-quick-comment-bar {
  flex-shrink: 0;
  position: static;
  border-top: 1px solid var(--border-light);
  background: var(--card-bg, var(--bg));
  /* +15px над низом (home-indicator iPhone / навбар Android) — строка ввода не липнет к краю */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 15px);
}

/* Desktop: positioner центрирован по X, sheet — auto height */
@media (min-width: 640px) {
  .post-bs-positioner {
    top: auto; bottom: 0;
    left: 50%; right: auto; width: 600px;
    height: auto; max-height: 93dvh;
    transform: translateX(-50%);
  }
  .post-bs-sheet {
    height: auto; max-height: 93dvh;
    transform: translateY(100%);
  }
  .post-bs-sheet--open    { transform: translateY(0); }
  .post-bs-sheet--closing { transform: translateY(110%); }
  .post-bs-curtain { display: none; }
}

/* =====================================================================
   RET-1B: Profile Rank Block
   Outdoor-club vibe: rank label + thin progress bar + XP count
   ===================================================================== */






@media (max-width: 767px) {
  .profile-rank-label { font-size: 11px; }
}






/* =====================================================================
   RET-1B: Personal Best badge in PostCard
   Compact accent chip; no glow or animation
   ===================================================================== */
/* PB / «крупный» — вид задаёт единая система бейджей выше; здесь только flex-shrink */
.post-pb-badge,
.post-catch-big { flex-shrink: 0; }

/* ============================================================
   КЛИПЫ — TikTok-стиль вертикальная видеолента
   ============================================================ */
.clips-feed {
  position: fixed;
  /* Кадр занимает ВЕСЬ экран: и под шторкой айфона сверху, и под таббаром снизу
     (как в Reels). Шапка и таббар плавают поверх, их читаемость держат вуали. */
  top: 0;
  left: 0; right: 0;
  bottom: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: #000;
  -webkit-overflow-scrolling: touch;
}
.clips-feed::-webkit-scrollbar { display: none; }

.clips-feed--empty {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.clips-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.5); font-size: 14px;
}
.clips-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.6); text-align: center; padding: 24px;
}
.clips-empty h3 { color: #fff; font-size: 18px; margin: 8px 0 0; }
.clips-empty p { font-size: 14px; margin: 0; max-width: 260px; }
.clips-empty-upload {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 20px; border-radius: var(--btn-radius-sm); border: none;
  background: var(--btn-bg); color: var(--btn-text);
  font-size: 14px; font-weight: var(--btn-weight); cursor: pointer;
}



/* Размытая подложка из постера — заполняет леттербокс и пустоту по бокам (десктоп) */




/* Правый сайдбар действий */

/* Аватар автора в нижней строке */














/* Нижний оверлей */









/* FAB загрузки в ленте клипов */
.clips-upload-fab {
  position: fixed; bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px) + 14px);
  right: 16px; z-index: 60;
  height: 44px; padding: 0 18px; border-radius: 22px;
  background: var(--fab-bg); color: var(--fab-text);
  border: none; display: flex; align-items: center; gap: 7px;
  box-shadow: var(--fab-shadow);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s cubic-bezier(.34,1.56,.64,1);
}
.clips-upload-fab:active { transform: scale(0.92); }

/* ── Подсказка «нажми для звука» ───────────────────── */

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(-4px); }
  15%  { opacity: 1; transform: translateY(0); }
  70%  { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* ── Прогресс-бар видео ─────────────────────────────── */



/* ── Верхняя панель: табы + поиск ──────────────────────── */
.clips-top-bar {
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 12px 0;
  pointer-events: none;
}
.clips-tabs {
  display: flex; align-items: center; gap: 0;
  pointer-events: all;
}
.clips-tab {
  position: relative;
  padding: 10px 20px 9px;
  background: none; border: none;
  color: rgba(255,255,255,0.5); font-size: 15px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
  transition: color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.clips-tab.active { color: #fff; font-weight: 700; }
.clips-tab.active::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 2px; border-radius: 2px;
  background: #fff;
}
.clips-upload-top {
  position: absolute; left: 12px; top: 6px;
  height: 34px; padding: 0 14px 0 11px; border-radius: 17px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); border: none;
  color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; pointer-events: all;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, filter 0.15s;
}
.clips-upload-top:active { transform: scale(0.94); filter: brightness(0.92); }

/* ── Bottom sheet "три точки" ────────────────────────── */







/* ── Диалог удаления клипа ───────────────────────────── */







/* Десктоп: клипы вписываются в центр-колонку с отступами как у ленты */
@media (min-width: 900px) {
  .clips-page {
    position: relative;
    height: calc(100vh - 76px - 24px);
    overflow: hidden;
    border-radius: var(--radius);
  }
  .clips-top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 8px 12px 0;
  }
  .clips-feed {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%;
    max-width: none;
    margin: 0;
    border-radius: var(--radius);
  }
  .clips-feed--empty { height: 100%; }
  .clips-upload-fab {
    position: absolute;
    bottom: 14px;
    right: 16px;
  }
}

/* ===== Tip Modal ===== */
















/* ===== Раскрывающийся заголовок (Instagram-стиль) ===== */





/* ===== Comments Modal ===== */

















/* ===== Stats popup (долгое нажатие на лайк) ===== */








/* ===== Report Modal (жалоба) ===== */












/* ===== Upload Clip Page ===== */
.upload-clip-page { padding: 0 0 80px; }
.upload-clip-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 0;
}
.upload-clip-header h2 { font-size: 18px; margin: 0; }
.upload-clip-dropzone {
  width: 100%; aspect-ratio: 9/12; max-height: 50dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 2px dashed var(--border); border-radius: 16px;
  background: var(--surface); color: var(--text-muted);
  cursor: pointer; font-size: 15px; font-weight: 600;
}
.upload-clip-dropzone small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.upload-clip-preview {
  position: relative; width: 100%; aspect-ratio: 9/12; max-height: 50dvh;
  border-radius: 16px; overflow: hidden; background: #000;
}
.upload-clip-video { width: 100%; height: 100%; object-fit: contain; }
.upload-clip-clear {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.upload-clip-duration {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 12px;
  padding: 3px 8px; border-radius: 8px;
}
.upload-clip-form { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.upload-clip-label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: 8px; }
.upload-clip-input {
  height: 44px; padding: 0 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px;
}
.upload-clip-species { display: flex; flex-wrap: wrap; gap: 6px; }
.upload-clip-chip {
  padding: 7px 12px; border-radius: 16px;
  background: var(--primary-bg); border: 1px solid rgba(127,161,122,0.2);
  color: var(--text-muted); font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.upload-clip-chip.active { background: var(--primary); border-color: var(--primary); color: var(--btn-text); font-weight: 600; }
.upload-clip-progress {
  position: relative; height: 28px; border-radius: 8px;
  background: var(--border-light); overflow: hidden; margin-top: 12px;
  display: flex; align-items: center; justify-content: center;
}
.upload-clip-progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--btn-bg);
  transition: width 0.2s;
}
.upload-clip-progress span { position: relative; font-size: 12px; font-weight: 600; color: #fff; }
.upload-clip-submit {
  margin-top: 16px; height: 50px; border-radius: var(--btn-radius); border: none;
  background: var(--btn-bg); color: var(--btn-text);
  font-size: 16px; font-weight: var(--btn-weight); cursor: pointer;
}
.upload-clip-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.upload-clip-music-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--border-light);
  background: none; color: var(--text-muted);
  font-size: 14px; cursor: pointer; width: 100%;
  transition: border-color 0.15s, color 0.15s;
}
.upload-clip-music-btn:hover { border-color: var(--primary); color: var(--primary); }

.upload-clip-music-selected {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--primary); background: rgba(var(--primary-rgb, 74,168,74), 0.07);
  color: var(--text);
}
.upload-clip-music-info { flex: 1; min-width: 0; }
.upload-clip-music-title { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-clip-music-meta  { display: block; font-size: 11px; color: var(--text-muted); }
.upload-clip-music-change { font-size: 12px; color: var(--primary); background: none; border: none; cursor: pointer; white-space: nowrap; }
.upload-clip-music-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: flex; }

/* ===================================================================
   КОНКУРСЫ / ПРИЗЫ
   =================================================================== */








.contests-page .contest-hero {
  background: linear-gradient(135deg, #1f2d26, #14302a);
  border: 1px solid rgba(212,160,23,0.3);
  border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px;
}
.contest-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.contest-pool { font-size: 26px; font-weight: 900; color: #f0c040; letter-spacing: -0.5px; }
.contest-left { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
.contest-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.contest-sub { font-size: 13px; color: var(--text-dim); line-height: 1.4; }

.contest-mytickets {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px;
}
.contest-mt-main { display: flex; align-items: center; gap: 12px; color: var(--accent); }
.contest-mt-num { font-size: 20px; font-weight: 800; color: var(--text); }
.contest-mt-num span { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.contest-mt-odds { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.contest-mt-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.contest-mt-chip {
  font-size: 11px; padding: 4px 9px; border-radius: 20px;
  background: var(--bg-warm); border: 1px solid var(--border-light);
  color: var(--text-muted); text-decoration: none;
}
.contest-mt-chip b { color: var(--text); }

.contest-section {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px;
}
.contest-section h2 {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--text);
}
.contest-section-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.4; }

.contest-rules { display: flex; flex-direction: column; gap: 8px; }
.contest-rule-row { display: flex; align-items: center; gap: 10px; }
.contest-rule-badge {
  flex-shrink: 0; min-width: 34px; text-align: center;
  font-size: 13px; font-weight: 800; color: var(--accent);
  background: rgba(127,161,122,0.16); border-radius: 8px; padding: 3px 6px;
}
.contest-rule-label { flex: 1; font-size: 13px; color: var(--text); }
.contest-rule-cap { font-size: 11px; color: var(--text-muted); }

.contest-noms { display: flex; flex-direction: column; gap: 8px; }
.contest-nom {
  background: var(--bg-warm); border: 1px solid var(--border-light);
  border-radius: var(--radius-xs); padding: 10px 12px;
}
.contest-nom--lottery { border-color: rgba(212,160,23,0.4); background: rgba(212,160,23,0.08); }
.contest-nom-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.contest-nom-title { font-size: 13px; font-weight: 700; color: var(--text); }
.contest-nom-prize { font-size: 13px; font-weight: 800; color: #f0c040; white-space: nowrap; }
.contest-nom-desc { font-size: 11px; color: var(--text-muted); margin-top: 3px; line-height: 1.35; }

/* Розыгрыши (Ф.розыгрыш): единая витрина — платформенные + сторонние + внешние */
.giveaway-list { display: flex; flex-direction: column; gap: 8px; }
.giveaway-card {
  background: var(--bg-warm); border: 1px solid var(--border-light);
  border-radius: var(--radius-xs); overflow: hidden;
}
.giveaway-card--over { opacity: 0.65; }
.giveaway-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: none; border: none; cursor: pointer; text-align: start;
}
.giveaway-cover {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(127,161,122,0.14); color: var(--primary); overflow: hidden;
}
.giveaway-cover img { width: 100%; height: 100%; object-fit: cover; }
.giveaway-head-main { flex: 1; min-width: 0; }
.giveaway-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; }
.giveaway-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 100px; white-space: nowrap;
}
.giveaway-badge--muted { background: var(--card); color: var(--text-muted); }
.giveaway-badge--external { background: rgba(80,140,220,0.14); color: #78b0f0; }
.giveaway-badge--native   { background: var(--primary-bg); color: var(--primary); }
.giveaway-badge--platform { background: rgba(212,160,23,0.14); color: #f0c040; }
.giveaway-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.giveaway-meta { display: flex; align-items: center; gap: 12px; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.giveaway-meta span { display: inline-flex; align-items: center; gap: 3px; }
.giveaway-you { color: var(--primary) !important; font-weight: 700; }
.giveaway-chev { flex-shrink: 0; color: var(--text-muted); transition: transform var(--transition); }
.giveaway-chev--open { transform: rotate(180deg); }
.giveaway-body { padding: 0 12px 12px; }
.giveaway-poster { display: block; margin: 2px 0 10px; border-radius: var(--radius-xs); overflow: hidden; background: var(--bg-warm); }
.giveaway-poster img { display: block; width: 100%; height: auto; }
.giveaway-rules { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-bottom: 10px; }
.giveaway-tasks-hd { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.giveaway-tasks-cnt { font-size: 11px; font-weight: 800; color: var(--primary); background: rgba(127,161,122,0.16); border-radius: 100px; padding: 1px 8px; }
.giveaway-task {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 4px; background: none; border: none; border-bottom: 1px solid var(--border-light);
  cursor: pointer; text-align: start; color: var(--text);
}
.giveaway-task:last-of-type { border-bottom: none; }
.giveaway-task-ic { flex-shrink: 0; color: var(--text-muted); }
.giveaway-task-ic--done { color: var(--primary); }
.giveaway-task-label { flex: 1; font-size: 12.5px; line-height: 1.3; }
.giveaway-task-go { flex-shrink: 0; color: var(--text-muted); }
.giveaway-note { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin-top: 8px; }
/* Кнопка участия/CTA — визуал из дизайн-системы (.btn .btn--primary .btn--block), тут только отступ */
.giveaway-cta { margin-top: 12px; }
.giveaway-reward { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--primary); }

/* Форма «Запустить свой конкурс» — сегмент-переключатель и поля */
.lg-seg { display: flex; gap: 6px; margin-bottom: 4px; }
.lg-seg-btn {
  flex: 1; padding: 8px 6px; border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  background: var(--bg-warm); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lg-seg-btn--on { background: var(--primary); color: var(--btn-text); border-color: var(--primary); }
.lg-label { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin: 12px 0 5px; }
.lg-input {
  width: 100%; padding: 10px; border: 1px solid var(--border-light); border-radius: var(--radius-xs);
  background: var(--bg-warm); color: var(--text); font-size: 13.5px; font-family: inherit; resize: vertical;
}
.lg-input:focus { outline: none; border-color: var(--primary); }

/* Инлайн-модерация (админ видит pending прямо в витрине) — кнопки из .btn */
.giveaway-mod { display: flex; gap: 8px; margin-top: 10px; }
.giveaway-mod .btn { flex: 1; }
.contest-mb-12 { margin-bottom: 12px; }
.contest-group-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); margin: 2px 0 8px; display: flex; align-items: center; }
.contest-group-label--spaced { margin-top: 16px; }
.contest-group-ic { margin-inline-end: 4px; flex-shrink: 0; }

/* Хедер: адаптивная подпись кнопки создания (полная / короткая на узких экранах) */
.phc-short { display: none; }
@media (max-width: 380px) {
  .phc-full { display: none; }
  .phc-short { display: inline; }
}

/* InviteFriendCard: раскладка кнопок (визуал — из .btn) */
.invite-card-share { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-card-share .btn { flex: 1 1 auto; }
.invite-copy-btn { margin-bottom: 10px; }
.invite-hub-link { margin-top: 10px; }

/* ============ Студия розыгрышей (/giveaways/create) ============ */













.gvp-prizes { font-size: 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0.92; }
.gvp-prizes div { display: flex; align-items: center; gap: 5px; }








@keyframes gv-spin { to { transform: rotate(360deg); } }














/* Навигация мастера — в обычном потоке (fixed уходил под таб-бар на мобиле) */












/* Живой предпросмотр объявления по площадкам */
.gvp-skin { width: 100%; max-width: 360px; border-radius: var(--radius); padding: 12px; font-size: 13px; line-height: 1.45; }
.gvp-tg { background: #17212b; color: #e9edf0; }
.gvp-vk { background: #edeef0; color: #000; }
.gvp-max { background: #1b1b2e; color: #eef; }
.gvp-klevat { background: var(--card); color: var(--text); border: 1px solid var(--border-light); }
.gvp-head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; margin-bottom: 8px; opacity: 0.9; }
.gvp-ava { width: 22px; height: 22px; border-radius: 100px; flex-shrink: 0; }
.gvp-ava-tg { background: linear-gradient(135deg,#2aabee,#229ed9); }
.gvp-ava-vk { background: #07f; }
.gvp-ava-max { background: linear-gradient(135deg,#8a5cff,#5b8cff); }
.gvp-media { width: 100%; border-radius: 8px; margin-bottom: 8px; display: block; }
.gvp-title { display: flex; align-items: center; gap: 5px; font-weight: 700; margin-bottom: 6px; }
.gvp-text { white-space: pre-wrap; margin-bottom: 8px; opacity: 0.95; }
.gvp-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gvp-link { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; opacity: 0.85; }
.gvp-cond { font-size: 12px; margin-bottom: 8px; }
.gvp-cond ul { margin: 4px 0 0; padding-inline-start: 18px; }
.gvp-cond li { margin-bottom: 2px; }
.gvp-partners { font-size: 11.5px; opacity: 0.7; margin-bottom: 8px; }
.gvp-actions { display: flex; gap: 14px; padding-top: 8px; border-top: 1px solid rgba(128,128,128,0.25); }
.gvp-act { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; opacity: 0.8; }
.gvp-vk .gvp-actions { border-top-color: rgba(0,0,0,0.1); }

/* Карточка поднятого розыгрыша вверху ленты */
.boosted-gv-banner {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 10px;
  border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
  background: linear-gradient(100deg, rgba(127,161,122,0.16), rgba(127,161,122,0.05));
  border: 1px solid var(--primary);
}
.boosted-gv-badge { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--primary); background: var(--card); border-radius: 100px; padding: 4px 10px; }
.boosted-gv-banner .feed-banner__title { font-weight: 700; }
.contest-summary { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); margin: 0 0 12px; }
.contest-summary b { color: var(--text); font-weight: 800; }
.contest-summary-sep { opacity: 0.5; }
.contest-summary-dot { width: 7px; height: 7px; border-radius: 100px; background: var(--text-muted); }
.contest-summary-dot--live { background: var(--primary); box-shadow: 0 0 0 3px rgba(127,161,122,0.18); }

.contest-board { display: flex; flex-direction: column; gap: 2px; }
.contest-board-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  text-decoration: none; color: var(--text); border-radius: var(--radius-xs);
  border-bottom: 1px solid var(--border-light);
}
.contest-board-row:last-child { border-bottom: none; }
.contest-board-rank { width: 22px; text-align: center; font-weight: 700; font-size: 14px; }
.contest-board-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contest-board-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

.contest-fair ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.contest-fair li { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.contest-fair-link {
  display: inline-block; margin-top: 10px; padding: 8px 0;
  background: none; border: none; font-family: inherit; text-align: start;
  font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; cursor: pointer;
}

/* ===================================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ / ФУТЕР / КОНТАКТЫ / ОФЕРТА
   =================================================================== */
.legal-page { padding-bottom: 32px; }
.legal-page p { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0 0 12px; }
.legal-page h2 { font-size: 15px; font-weight: 700; color: var(--text); margin: 20px 0 8px; }
.legal-page ul { margin: 0 0 12px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.legal-page li { font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.legal-page a { color: var(--accent); }
.legal-updated { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.legal-muted { font-size: 13px; color: var(--text-muted); }

.legal-cards { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.legal-card {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  color: var(--accent);
}
.legal-card b { color: var(--text); font-size: 14px; margin-top: 4px; }
.legal-card span { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.legal-cta {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 6px;
  padding: 12px 18px; background: var(--accent); color: #fff !important; border-radius: var(--radius);
  font-weight: 700; text-decoration: none;
  -webkit-text-fill-color: #fff !important;
}

.contact-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.contact-row {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text);
}
.contact-icon { width: 42px; height: 42px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-text { display: flex; flex-direction: column; gap: 1px; }
.contact-text b { font-size: 14px; }
.contact-text span { font-size: 12px; color: var(--text-muted); }

/* Футер-ссылки в десктоп-сайдбаре — тихие, как «Админка», каждая на своей строке */
.sidebar-footer-links {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 1px;
}
.sidebar-footer-links a {
  display: block; padding: 4px 12px; font-size: 11px; line-height: 1.3;
  color: var(--text-muted); text-decoration: none; opacity: .6;
  border-radius: 8px; transition: background .15s, opacity .15s;
}
.sidebar-footer-links a:hover { background: rgba(255,255,255,.06); opacity: 1; }

/* Футер-ссылки в MorePage (мобилка/PWA) */
.more-footer-links {
  margin-top: 20px; padding: 16px 0 8px; border-top: 1px solid var(--border-light);
  display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center;
}
.more-footer-links a { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.more-footer-copy { font-size: 11px; color: var(--text-muted); opacity: 0.6; margin-top: 4px; }

/* Чекбокс оферты при регистрации */
.register-agree {
  display: flex; align-items: flex-start; gap: 9px; margin: 4px 2px 14px;
  font-size: 12.5px; line-height: 1.4; color: var(--text-muted); cursor: pointer;
}
.register-agree input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.register-agree a { color: var(--accent); }
/* Согласие вверху формы: рамка-плашка, чтобы читалось как обязательный шаг */
.register-agree--top {
  padding: 10px 12px; margin: 4px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
}
/* Не отмечено при попытке продолжить — подсветка + короткий «толчок» внимания */
.register-agree--error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-light);
  animation: register-agree-shake 0.28s ease;
}
.register-agree--error input { accent-color: var(--danger); outline: 2px solid var(--danger); outline-offset: 1px; }
@keyframes register-agree-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.register-agree-hint {
  color: var(--danger); font-size: 12.5px; line-height: 1.4;
  margin: -6px 2px 12px; padding-inline-start: 2px;
}
/* Пассивная оговорка о согласии на экране входа (без блокирующей галочки) */
.auth-consent-note {
  margin: 14px 4px 0; font-size: 12px; line-height: 1.45;
  color: var(--text-muted); text-align: center;
}
.auth-consent-note a { color: var(--primary); }

/* Бейдж-напоминание вверху админки: оформить юр-документы после регистрации ИП */
.adm-ip-reminder {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; margin: 4px 0 14px;
  border: 1px solid var(--danger); background: var(--danger-light);
  border-radius: var(--radius); text-decoration: none; color: var(--text);
}
.adm-ip-reminder__badge {
  flex-shrink: 0; color: var(--danger); font-weight: 800; font-size: 12px;
  letter-spacing: 0.5px; padding: 2px 8px;
  border: 1.5px solid var(--danger); border-radius: var(--radius-xs);
}
.adm-ip-reminder__text { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--text); }
.adm-ip-reminder__arrow { flex-shrink: 0; color: var(--danger); font-weight: 700; }
.adm-ip-reminder:active { background: var(--danger-light); filter: brightness(0.94); }

/* Кнопки-уведомления (бывшие ссылки) — сброс стилей button */
button.notif-item, button.notif-feed-item {
  width: 100%; text-align: start; background: none; border: none;
  font: inherit; cursor: pointer; color: inherit;
}

/* Баннер конкурса в ленте */
.contest-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 5px 8px; margin: 0;
  /* Единственная плитка со своим (золотым) видом — остальные нейтральные.
     Тинт через --warning (тема-зависимый), а не хардкод-золото — иначе в светлой
     теме плитка кислотная. */
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent);
  border-radius: var(--radius);
  text-align: center;
}
.contest-banner-content { display: flex; gap: 10px; align-items: center; justify-content: center; text-decoration: none; color: var(--text-dim); flex: 1; min-width: 0; }
.contest-banner-emoji { font-size: 20px; flex-shrink: 0; line-height: 1; display: flex; align-items: center; }
.contest-banner-text { font-size: 13px; line-height: 1.45; color: var(--text-dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.contest-banner-text strong { display: inline; font-size: 13px; font-weight: 700; color: var(--warning); margin-inline-end: 2px; }
.contest-banner__title { color: var(--warning) !important; }
/* Плитка конкурса — строго ДВЕ строки: заголовок + описание, по строке каждая.
   Что не влезло на узком экране — обрезаем (на ПК помещается целиком). */
.contest-banner .feed-banner__desc { -webkit-line-clamp: 1; }
/* Гостевой конкурс-баннер — без крестика, отступ от GuestHero */
.contest-banner--guest { margin-top: 8px; }

/* Баннер первого поста */
.first-post-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(16,185,129,0.08));
  border: 1px solid rgba(34,197,94,0.35);
  text-decoration: none; color: inherit;
  transition: transform 0.15s, border-color 0.15s;
}
.first-post-banner:active { transform: scale(0.99); }
.first-post-banner-emoji { font-size: 22px; flex-shrink: 0; }
.first-post-banner-text { flex: 1; min-width: 0; }
.first-post-banner-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--success); }
.first-post-banner-text span { font-size: 12px; color: var(--text-muted); }
.first-post-banner-arrow { font-size: 18px; color: var(--success); flex-shrink: 0; }

/* Системный (официальный) пост KLEVAT */
.post-author--system { display: flex; align-items: center; gap: 10px; cursor: default; }
.post-author--system .avatar-sm { object-fit: contain; background: var(--bg-warm); }
.author-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.author-rank-chip--official {
  background: rgba(127,161,122,0.18); color: var(--accent);
  font-weight: 600; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 11px;
}

/* ===== KLEVAT official comments ===== */
.comment-item--official { background: rgba(127,161,122,0.04); border-radius: 8px; padding: 8px; margin: 0 -8px; }
.comment-author--klevat { color: var(--accent); font-weight: 800; font-size: 13px; }
.comment-author-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 8px; font-weight: 900;
  flex-shrink: 0; margin-inline-start: -2px;
}
.comment-official-badge {
  display: inline-flex; align-items: center;
  background: rgba(127,161,122,0.18); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 6px; border-radius: 8px; border: 1px solid rgba(127,161,122,0.25);
  flex-shrink: 0;
}

/* Admin "post as" selector */
.comment-as-trigger {
  background: none; border: none; padding: 0; cursor: pointer; position: relative;
  display: flex; align-items: center;
}
.comment-as-dot {
  position: absolute; bottom: 0; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--card);
}
.comment-as-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 300;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 4px; min-width: 190px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.comment-as-option {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: none; background: none; cursor: pointer;
  border-radius: 7px; color: var(--text); font-size: 13px; font-weight: 500;
  transition: background 0.12s;
}
.comment-as-option:hover { background: var(--border-light); }
.comment-as-option.active { background: var(--primary); color: var(--btn-text); }
.comment-as-ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-as-ava--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-light); color: var(--primary);
  font-size: 11px; font-weight: 700;
}
.comment-as-official-badge {
  display: inline-flex; align-items: center;
  background: rgba(127,161,122,0.18); color: var(--accent);
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: var(--radius-xs);
  margin-inline-start: 3px;
}
/* «Читать далее» как кнопка — выглядит как ссылка, инлайн в конце текста */
button.post-read-more {
  background: none; border: none; cursor: pointer; font: inherit; padding: 0;
  display: inline; vertical-align: baseline;
}

/* Просмотрщик фото профиля (аватар + фото, листание) */
.photo-viewer {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
}
.photo-viewer-img { width: 94vw; height: 88vh; max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 8px; user-select: none; }
.photo-viewer-close {
  position: absolute; top: 14px; right: 14px; background: rgba(0,0,0,.45); border: none;
  color: #fff; border-radius: 50%; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.photo-viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,.45);
  border: none; color: #fff; border-radius: 50%; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.photo-viewer-nav--prev { left: 10px; }
.photo-viewer-nav--next { right: 10px; }
.photo-viewer-count {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; background: rgba(0,0,0,.45); padding: 4px 12px; border-radius: var(--radius);
}
.photo-viewer-like {
  position: absolute; bottom: 18px; right: 18px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75); border-radius: 24px;
  padding: 8px 14px; cursor: pointer; font-size: 14px; font-weight: 600;
  transition: color .15s, background .15s, border-color .15s;
}
.photo-viewer-like--center {
  right: auto; left: 50%; transform: translateX(-50%);
  padding: 10px 22px; font-size: 15px;
}
.photo-viewer-like:hover { background: rgba(0,0,0,.7); color: #fff; }
.photo-viewer-like--active { color: #f43f5e; border-color: #f43f5e; }
button.profile-photo-item { padding: 0; border: none; background: none; cursor: pointer; display: block; width: 100%; }
.avatar-viewable { cursor: pointer; }

/* Гостевой конверсионный блок в ленте */
/* Единый контейнер верхних баннеров — ровные зазоры, ширина как у постов */
.feed-banners { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.feed-banners > * { margin: 0 !important; }

/* ═══ Единая сетка плиток под шапкой ═══
   2 колонки 50/50. Плитки одного столбца всегда одной ширины.
   Порядок ячеек = порядок в JSX. Максимум 6 плиток → 3 ряда. */
.feed-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0;
}
.feed-tiles > * { margin: 0 !important; min-height: 42px; }
/* Нечётная ПОСЛЕДНЯЯ плитка (осталась одна в ряду) — на всю ширину.
   Так «Ежедневное»: 5 плиток → широкое внизу; 6 плиток → компактное правое. */
.feed-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Раскрытое «Ежедневное» — всегда на всю ширину (тело квестов не влезает в колонку) */
.feed-tiles > .daily-widget.is-open { grid-column: 1 / -1; min-height: 0; }
/* iOS-подсказка установки — отдельной строкой на всю ширину */
.feed-tiles > .pwa-install-ios-help { grid-column: 1 / -1; }
/* Запрет более 3 рядов: 7-я плитка и дальше не показываются (страховка) */
.feed-tiles > :nth-child(n+7) { display: none; }

/* ── Карусель квадратных плиток над лентой (свайп + плавное авто-листание) ── */
.feed-tiles--carousel {
  /* Плитка: широкая и низкая. Картинка занимает верхние 70%,
     подпись — нижние 30% и всегда в ОДНУ строку. Крутится двумя числами. */
  --ctile-w: 104px;
  --ctile-h: 52px;
  --ctile-cap: 38%;   /* нижняя пустая зона картинки — там живёт подпись */
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  position: relative;
  /* отступ по бокам/сверху для рамок плиток; снизу 0 — чтобы до ленты остался чистый gap 8px */
  padding: 3px 3px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* пустой слот «Ежедневного» не должен добавлять отступ (иначе до ленты >8px) */
#daily-body-slot:empty { display: none; }
/* у гостя между блоком плиток и лентой — ровно gap feed-page (8px), без лишних добавок */
.feed-page > .feed-banners { margin-bottom: 0 !important; }
.feed-tiles--carousel::-webkit-scrollbar { display: none; }
/* ЖЁСТКО одинаковые КВАДРАТНЫЕ плитки — размер !important + центровка НА контейнере.
   ВАЖНО: НЕ задавать width:100% классам плиток (.feed-tile/.daily-widget/.ctile и т.п.),
   т.к. они — ПРЯМЫЕ дети флекс-ряда и 100% растянет их шире квадрата. */
.feed-tiles--carousel > * {
  flex: 0 0 var(--ctile-w) !important;
  width: var(--ctile-w) !important;
  height: var(--ctile-h) !important;
  min-width: var(--ctile-w) !important;
  max-width: var(--ctile-w) !important;
  min-height: 0;
  grid-column: auto !important;
  box-sizing: border-box;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0;
  padding: 0;
  text-align: center;
  /* лёгкий фирменный фон — тиловое свечение в углу, не броско */
  background:
    radial-gradient(circle at 80% 15%, rgba(127,161,122,0.12), transparent 58%),
    var(--card);
  /* объёмная виньетка краёв — единый красивый вид для ВСЕХ плиток */
  box-shadow: none;
}
.feed-tiles--carousel > :nth-child(n+7) { display: flex; }
/* жёлтый кружок справа-сверху — есть невыполненные квесты («есть что забрать») */
.feed-tiles--carousel .daily-widget .daily-dot {
  position: absolute; top: 5px; right: 5px; width: 9px; height: 9px;
  border-radius: 50%; background: #fbbf24; box-shadow: 0 0 5px rgba(251,191,36,0.75);
}
.feed-tiles--carousel > :first-child { border-color: var(--primary); }

/* Вложенные обёртки (НЕ прямые дети) — заполняют квадрат, ширину плитки не меняют */
.feed-tiles--carousel .daily-widget__header,
.feed-tiles--carousel .feed-banner__body {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; height: 100%; gap: 2px; padding: 0; margin: 0;
  text-align: center; min-width: 0;
}
.feed-tiles--carousel .daily-widget__title-row {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; min-width: 0;
}

/* ЕДИНЫЙ шрифт всех подписей плиток */
.feed-tiles--carousel .feed-tile__title,
.feed-tiles--carousel .feed-banner__title,
.feed-tiles--carousel .ctile-name {
  /* нижняя полоса плитки: одна строка, без переносов, длинное — многоточием */
  flex: 0 0 var(--ctile-cap);
  width: 100%; box-sizing: border-box; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; font-weight: 700; color: var(--text);
  text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.feed-tiles--carousel .feed-tile__desc,
.feed-tiles--carousel .feed-banner__desc {
  font-size: 10.5px; line-height: 1.15; font-weight: 500; opacity: 0.72;
  white-space: normal; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed-tiles--carousel .ctile-kicker {
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--primary); line-height: 1;
}
.feed-tiles--carousel .ctile-prize {
  font-size: 11.5px; font-weight: 800; color: var(--primary); line-height: 1.1;
}
/* в низкой плитке места ровно на одну подпись — второстепенное не показываем */
.feed-tiles--carousel .ctile-sub,
.feed-tiles--carousel .ctile-kicker,
.feed-tiles--carousel .ctile-prize,
.feed-tiles--carousel .feed-tile__desc,
.feed-tiles--carousel .feed-banner__desc { display: none !important; }
/* спидометр «Прогноза» — в верхние 70% */
.feed-tiles--carousel .bite-gauge {
  margin: 0; flex: 0 0 auto; width: 44px; height: 27px;
}
.feed-tiles--carousel .bite-gauge-num { font-size: 17px; font-weight: 800; }

/* === Тематические фоны плиток + водяные знаки по смыслу === */
.feed-tiles--carousel > * { position: relative; }
.feed-tiles--carousel > * > * { position: relative; z-index: 1; }
.feed-tiles--carousel .ctile--bite {
  background: radial-gradient(circle at 82% 14%, rgba(127,161,122,0.18), transparent 62%), var(--card);
}
.feed-tiles--carousel .ctile--contest {
  background: radial-gradient(circle at 82% 14%, rgba(201,168,118,0.22), transparent 62%), var(--card);
}
.feed-tiles--carousel .ctile--report {
  background: radial-gradient(circle at 82% 14%, rgba(197,122,122,0.16), transparent 62%), var(--card);
}
.feed-tiles--carousel .pwa-install-banner {
  background: radial-gradient(circle at 82% 14%, rgba(127,161,122,0.15), transparent 62%), var(--card);
}
.feed-tiles--carousel .daily-widget {
  background: radial-gradient(circle at 82% 14%, rgba(201,168,118,0.16), transparent 62%), var(--card);
}
/* водяные знаки — тематическая эмодзи-иконка в углу, приглушённая */
.feed-tiles--carousel > *::after {
  position: absolute; right: 1px; bottom: -4px;
  font-size: 36px; line-height: 1;
  opacity: 0.13; filter: grayscale(0.35);
  pointer-events: none; z-index: 0;
}
.feed-tiles--carousel .ctile--bite::after { content: '🐟'; }
.feed-tiles--carousel .ctile--contest::after { content: '🎁'; }
.feed-tiles--carousel .ctile--report::after { content: '🐞'; }
.feed-tiles--carousel .pwa-install-banner::after { content: '📲'; }
.feed-tiles--carousel .daily-widget::after { content: '🔥'; }
/* Разделы: Дневник / Снаряжение / О проекте / Соцсети */
.feed-tiles--carousel .ctile--diary {
  background: radial-gradient(circle at 82% 14%, rgba(127,161,122,0.16), transparent 62%), var(--card);
}
.feed-tiles--carousel .ctile--gear {
  background: radial-gradient(circle at 82% 14%, rgba(201,168,118,0.18), transparent 62%), var(--card);
}
.feed-tiles--carousel .ctile--about {
  background: radial-gradient(circle at 82% 14%, rgba(91,155,213,0.16), transparent 62%), var(--card);
}
.feed-tiles--carousel .ctile--socials {
  background: radial-gradient(circle at 82% 14%, rgba(127,161,122,0.20), transparent 62%), var(--card);
}
.feed-tiles--carousel .ctile--diary::after { content: '📔'; }
.feed-tiles--carousel .ctile--gear::after { content: '🎣'; }
.feed-tiles--carousel .ctile--about::after { content: '📖'; }
.feed-tiles--carousel .ctile--socials::after { content: '💬'; }

/* === «Общение» — единая лента ЛС+групп с фильтрами (как ТГ/МАКС) === */
.comm-filter-bar {
  display: flex; gap: 8px; padding: 8px 12px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border-light);
}
.comm-filter-bar::-webkit-scrollbar { display: none; }
.comm-filter {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); background: var(--card);
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-dim); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.comm-filter.active { background: var(--primary); border-color: var(--primary); color: var(--btn-text); }
.comm-filter-badge {
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--danger); color: var(--btn-text);
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.comm-filter.active .comm-filter-badge,
.seg-btn.active .comm-filter-badge { background: var(--btn-text); color: var(--primary); }
/* Счётчик-бейдж в стандартном сегменте (Общение мигрировано comm-filter → seg-btn) */
.seg-btn .comm-filter-badge { margin-inline-start: -1px; }

.comm-list { display: flex; flex-direction: column; }
.comm-empty { text-align: center; color: var(--text-dim); padding: 40px 16px; font-size: 14px; }
.comm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border-light);
}
.comm-row:active { background: var(--bg-warm); }
.comm-ava-wrap { position: relative; flex-shrink: 0; }
.comm-ava {
  width: 50px; height: 50px; border-radius: var(--radius-pill);
  object-fit: cover; background: var(--bg-warm);
}
/* Герб в списке — вписан целиком на белом круге (флаг остаётся «по обрезке») */
.comm-ava--coat { object-fit: contain; background: #fff; padding: 2px; }
.comm-ava--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--btn-text); font-weight: 700; font-size: 20px;
}
.comm-online-dot {
  position: absolute; right: 1px; bottom: 1px;
  width: 12px; height: 12px; border-radius: var(--radius-pill);
  background: var(--success); border: 2px solid var(--card);
}
.comm-row-body { flex: 1; min-width: 0; }
.comm-row-top { display: flex; align-items: baseline; gap: 8px; }
.comm-row-name {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.comm-row-gicon, .comm-row-pin { color: var(--text-dim); flex-shrink: 0; }
.comm-row-time { flex-shrink: 0; font-size: 12px; color: var(--text-dim); }
.comm-row-bottom { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.comm-row-preview {
  flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.comm-row-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: var(--radius-pill); background: var(--primary); color: var(--btn-text);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.comm-row-badge.muted { background: var(--text-muted); }
/* Переписка помечена «непрочитанной» вручную — кружок без числа (как в TG) */
.comm-row-badge--mark { min-width: 12px; width: 12px; height: 12px; padding: 0; }

/* Плашка «Показаны только непрочитанные · Показать все» над списком */
.comm-filter-note {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0 2px; padding: 8px 12px;
  background: var(--primary-bg); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-dim);
}
.comm-filter-note button {
  border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0;
  color: var(--primary); font-weight: 700; font-size: 13px; font-family: inherit;
}
.comm-row-mute { color: var(--text-muted); flex-shrink: 0; margin-inline-start: 2px; }

/* ── Свайп-действия по диалогу (звук / архив / удалить) ── */
.comm-swipe { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-light); }
.comm-swipe .comm-row { border-bottom: none; }
.comm-swipe-actions {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 0;
}
.comm-sa {
  width: 72px; border: none; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; -webkit-user-select: none; user-select: none;
}
.comm-sa--mute { background: #6b7280; }
.comm-sa--arch { background: #3b82f6; }
.comm-sa--del  { background: var(--danger, #e5484d); }
.comm-row--swipe {
  position: relative; z-index: 1; background: var(--bg); touch-action: pan-y;
  will-change: transform;
}
.comm-swipe.is-open .comm-row--swipe { box-shadow: -8px 0 12px -8px rgba(0,0,0,.35); }

/* чекбокс выбора (режим «Изм.») */
.comm-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.comm-check.on { background: var(--primary); border-color: var(--primary); }

/* Чип-кнопка «+ новая папка» */
.comm-filter--add { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; }

/* Тулбар над списком: фильтры слева, «Архив»/«Изм.» справа */
.comm-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 10px 0; border-bottom: 1px solid var(--border-light);
  /* Липнет под фикс-шапкой (у неё на мобиле НЕТ нижней границы, и ряд чипов
     вплотную к иконкам читался как «наезд» на шапку): свой непрозрачный фон +
     отступ сверху отделяют полосу фильтров, и она остаётся под рукой при прокрутке. */
  position: sticky; top: 0; z-index: 20; background: var(--bg);
}
.comm-toolbar .comm-filter-bar { flex: 1; min-width: 0; border-bottom: none; padding: 0 0 10px; }
.comm-toolbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-inline-start: auto; }
.comm-icon-btn {
  width: 36px; height: 36px; border-radius: 9px; border: none; background: none; cursor: pointer;
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
}
.comm-icon-btn:active { background: var(--bg-warm); }

/* кнопка «Изм.» / «Готово» */
.comm-edit-btn {
  border: none; background: none; cursor: pointer; color: var(--primary);
  font-size: 14px; font-weight: 700; padding: 6px 8px; border-radius: 8px;
}
.comm-edit-btn:active { background: var(--primary-bg); }

/* нижняя панель массовых действий */
.comm-bulkbar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
  max-width: 960px; margin: 0 auto; z-index: 40;
  display: flex; background: var(--card); border-top: 1px solid var(--border-light);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { .comm-bulkbar { bottom: 0; padding-inline-start: 232px; } }
.comm-bulk-btn {
  flex: 1; border: none; background: none; cursor: pointer; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; font-size: 11.5px; font-weight: 600;
}
.comm-bulk-btn:disabled { opacity: .4; }
.comm-bulk-btn--danger { color: var(--danger, #e5484d); }

/* предпросмотр диалога (долгий тап) */
.comm-preview-back {
  position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.comm-preview {
  width: 100%; max-width: 440px; max-height: 80vh; overflow: hidden;
  background: var(--card); border-radius: 16px; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.comm-preview-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-light); }
.comm-preview-head b { font-size: 15px; }
.comm-preview-body { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.comm-preview-line { font-size: 13.5px; color: var(--text-dim); line-height: 1.4; word-break: break-word; }
.comm-preview-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 16px; }
.comm-preview-acts { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); }
.comm-preview-acts button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  border: none; background: none; cursor: pointer; color: var(--text);
  padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--border-light);
}
.comm-preview-acts button:last-child { border-bottom: none; }
.comm-preview-acts button:active { background: var(--bg-warm); }
.comm-preview-acts .comm-preview-danger { color: var(--danger, #e5484d); }

/* ── Содержимое шторок раздела «Общение» ─────────────────────────────────────
   Каркас шторки — общий стандарт §11.1 (.repost-sheet*, components/BottomSheet).
   Здесь только блоки содержимого; метрики полей — те же, что у .share-search-wrap
   и .repost-sheet-add-comment (стандарт: «поля все одинаковые»). */
.comm-sheet-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box; min-height: 46px;
  padding: 10px 12px; margin-bottom: 8px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  background: var(--bg); color: var(--text);
  font-size: 14px; font-family: inherit; text-align: start; cursor: pointer;
  transition: border-color .15s;
}
.comm-sheet-row svg { flex-shrink: 0; color: var(--text-muted); }
.comm-sheet-row:hover, .comm-sheet-row:active { border-color: var(--border); }
.comm-sheet-count { margin-inline-start: auto; font-weight: 700; color: var(--text-muted); }
.comm-sheet-row--danger, .comm-sheet-row--danger svg { color: var(--danger); }
.comm-sheet-row.is-on { border-color: var(--primary); background: var(--primary-bg); }
/* Управление группой внутри шторки: полоса разделов стоит, едет только содержимое */
.gm-embedded-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Полоса вкладок группы: отодвинута от шапки (у той на мобиле нет нижней границы,
   вплотную вкладки читались как продолжение шапки) и с более контрастными
   неактивными подписями. Скоуп — только группа, общий .rtab не трогаем. */
.group-tabs { padding-top: 10px; }
.group-tabs .rtab { color: var(--text-dim); }
.group-tabs .rtab.active { color: var(--primary); }

/* Шторка с неподвижной шапкой: поиск, «Создать» и заголовок «Кому написать»
   стоят на месте, едет только список контактов (.sheet-scroll внутри).
   Модификатор, а не правка .repost-sheet: у эталонной шторки скролл общий. */
.repost-sheet--split {
  display: flex; flex-direction: column;
  overflow: hidden;                 /* прокручивает внутренний список, не лист */
}
.repost-sheet--split > * { flex: 0 0 auto; }
.comm-people {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* докрут не утекает в лист и в страницу */
}

/* Заголовок «Кому написать» — крышка над списком: он непрозрачный и лежит ВЫШЕ
   липкой буквы, иначе в шве между ними мелькает уезжающая строка. */
.repost-sheet--split .share-section-title--gap {
  position: relative; z-index: 2; background: var(--card);
  margin-bottom: 0; padding-bottom: 8px;
}
/* Буквенные разделители липнут к верху списка. top:-1px и запас сверху закрывают
   субпиксельный шов: без него в стыке проглядывала предыдущая строка. */
.comm-letter {
  position: sticky; top: -1px; z-index: 1;
  padding: 10px 2px 4px; background: var(--card);
  font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--text-muted);
}
.comm-person {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 6px 2px; border: none; background: none; cursor: pointer;
  color: var(--text); font-size: 14px; font-family: inherit; text-align: start;
}
.comm-person:active { opacity: .7; }
.comm-person-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.comm-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-person-sub { font-size: 12px; color: var(--text-muted); }

/* ── Профиль группы (вкладка «О группе») ─────────────────────────────────────
   По образцу мессенджеров: крупное лого, название, счётчик участников, ряд
   круглых действий, карточка «ссылка/описание», строка настроек. */
.gprofile-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 14px; }
.gprofile-logo {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.gprofile-logo--coat { object-fit: contain; background: #fff; border-radius: var(--radius); }
.gprofile-logo--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-warm); color: var(--text-muted);
}
.gprofile-head .geo-ico { width: 96px; height: 96px; }
.gprofile-name {
  margin: 6px 0 0; font-size: 20px; font-weight: 800; text-align: center;
  line-height: 1.25; color: var(--text);
}
.gprofile-sub {
  border: none; background: none; cursor: pointer; padding: 0;
  font-size: 13.5px; font-family: inherit; color: var(--text-muted);
}

.gprofile-acts { display: flex; gap: 8px; margin-bottom: 14px; }
.gprofile-act {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border: 1px solid var(--border-light); border-radius: var(--radius);
  background: var(--card); color: var(--text-dim);
  font-size: 11.5px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.gprofile-act:active { background: var(--bg-warm); }
.gprofile-act-ic { color: var(--primary); display: flex; }

.gprofile-card {
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.gprofile-field + .gprofile-field { margin-top: 12px; border-top: 1px solid var(--border-light); padding-top: 12px; }
.gprofile-label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px;
}
.gprofile-link { font-size: 14px; color: var(--primary); word-break: break-all; }
.gprofile-desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); white-space: pre-wrap; }

.gprofile-settings {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  min-height: 50px; padding: 10px 14px; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius);
  color: var(--text); font-size: 14.5px; font-family: inherit; text-align: start; cursor: pointer;
}
.gprofile-settings > span:nth-child(2) { flex: 1; min-width: 0; }
.gprofile-settings svg { color: var(--text-muted); flex-shrink: 0; }
.gprofile-settings-ic {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--primary-bg); display: flex; align-items: center; justify-content: center;
}
.gprofile-settings-ic svg { color: var(--primary); }

/* Вложения группы: медиа-сетка, голосовые и ссылки */
.gatt { margin-bottom: 14px; }
.gatt .seg-row { margin-bottom: 10px; }
.gatt-empty { padding: 18px 4px; text-align: center; color: var(--text-muted); font-size: 13px; }
.gatt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gatt-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.gatt-links { display: flex; flex-direction: column; gap: 8px; }
.gatt-link {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); font-size: 14px;
}
.gatt-link-host { font-weight: 700; display: flex; align-items: center; gap: 5px; }
.gatt-link-url { font-size: 12.5px; color: var(--primary); word-break: break-all; }
.gatt-link-meta { font-size: 12px; color: var(--text-muted); }
.gatt-link audio { width: 100%; height: 34px; }

/* Список участников в шторке */
.gmembers { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.gmember {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 2px;
  border: none; border-bottom: 1px solid var(--border-light); background: none;
  color: var(--text); font-family: inherit; text-align: start; cursor: pointer;
}
.gmember:last-child { border-bottom: none; }
.gmember:active { background: var(--bg-warm); }
.gmember-chev { color: var(--text-muted); flex-shrink: 0; }
.gmember-ava { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gmember-ava--ph { background: var(--bg-warm); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.gmember-text { flex: 1; min-width: 0; }
.gmember-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 14px; }
.gmember-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmember-city { font-size: 12px; color: var(--text-muted); }
.gmember-acts { display: flex; gap: 4px; flex-shrink: 0; }

/* убрать стрелку на «Ежедневное» (badge «!» оставить) */
.feed-tiles--carousel .daily-widget__header-right svg { display: none; }
.feed-tiles--carousel .daily-widget__header-right { justify-content: center; }

/* Единый вид плитки: одинаковые фон/рамка/высота, текст по центру */
.feed-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; min-width: 0;
  padding: 5px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text); font: inherit;
  text-decoration: none; text-align: center;
  cursor: pointer;
}
.feed-tile:active { background: var(--bg-warm); }
/* accent = только цвет (зелёный CTA). Раскладка/центрирование — как у всех плиток
   (column, center), чтобы текст был выровнен единообразно. */
.feed-tile--accent {
  color: var(--primary); font-weight: 700; line-height: 1.15;
}
.feed-tile--accent .feed-tile__title { color: var(--primary); }
.feed-tile--accent svg { flex-shrink: 0; }
.feed-tile__body { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; width: 100%; }
.feed-tile__title { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-tile__desc { font-size: 11px; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Плитки-разделы с фоновыми иллюстрациями (Gemini, стиль KLEVAT).
   bite/contest НЕ трогаем — там свой контент (спидометр/баннер). */
.feed-tiles--carousel .ctile--diary,
.feed-tiles--carousel .ctile--gear,
.feed-tiles--carousel .ctile--about,
.feed-tiles--carousel .ctile--socials,
.feed-tiles--carousel .ctile--report {
  justify-content: flex-end !important;
  align-items: center;
  border-color: transparent;
}
/* Слой картинки: строго верхние 70%, кадрируется по cover — не растягивается,
   поэтому и квадратные, и широкие исходники выглядят одинаково правильно. */
.feed-tiles--carousel .ctile--diary::before,
.feed-tiles--carousel .ctile--gear::before,
.feed-tiles--carousel .ctile--about::before,
.feed-tiles--carousel .ctile--socials::before,
.feed-tiles--carousel .ctile--report::before,
.feed-tiles--carousel .ctile--bite::before,
.feed-tiles--carousel .ctile--contest::before,
.feed-tiles--carousel .daily-widget::before {
  content: ''; position: absolute; z-index: 0;
  inset: 0;
  background-image: var(--ctile-img);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.feed-tiles--carousel .ctile--diary   { --ctile-img: url(/tile-art/tile_diary.webp); }
.feed-tiles--carousel .ctile--gear    { --ctile-img: url(/tile-art/tile_gear.webp); }
.feed-tiles--carousel .ctile--about   { --ctile-img: url(/tile-art/tile_about.webp); }
.feed-tiles--carousel .ctile--socials { --ctile-img: url(/tile-art/tile_socials.webp); }
.feed-tiles--carousel .ctile--report  { --ctile-img: url(/tile-art/tile_report.webp); }
.feed-tiles--carousel .ctile--contest { --ctile-img: url(/tile-art/tile_contest.webp); }
.feed-tiles--carousel .daily-widget   { --ctile-img: url(/tile-art/tile_daily.webp); }
.feed-tiles--carousel .ctile--bite    { --ctile-img: url(/tile-art/tile_bite.webp); }
/* подпись — белая с тенью, прижата вниз (там затемнение картинки) */
.feed-tiles--carousel .ctile--diary .feed-tile__title,
.feed-tiles--carousel .ctile--gear .feed-tile__title,
.feed-tiles--carousel .ctile--about .feed-tile__title,
.feed-tiles--carousel .ctile--socials .feed-tile__title,
.feed-tiles--carousel .ctile--report .feed-tile__title {
  color: var(--text) !important; text-shadow: none;
}
/* эмодзи-водяные знаки больше не нужны — фон уже тематический */
.feed-tiles--carousel .ctile--diary::after,
.feed-tiles--carousel .ctile--gear::after,
.feed-tiles--carousel .ctile--about::after,
.feed-tiles--carousel .ctile--socials::after,
.feed-tiles--carousel .ctile--report::after { content: none; }

/* Прогноз клёва — БЕЗ фото, чистый тёмный фон под спидометром (по просьбе).
   Спидометр (SVG-дуга) — главный герой плитки, ему нужен спокойный фон. */
.feed-tiles--carousel .ctile--bite {
  background: var(--card) !important;
  border-color: transparent !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}
.feed-tiles--carousel .ctile--bite .bite-gauge { margin: auto auto 0; }
.feed-tiles--carousel .ctile--bite .ctile-name { color: var(--text) !important; text-shadow: none; }
.feed-tiles--carousel .ctile--bite .ctile-sub { color: rgba(255,255,255,0.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.feed-tiles--carousel .ctile--bite::after { content: none; }

/* Конкурс — фон-иллюстрация (кубок), текст поверх, сумма золотом */
.feed-tiles--carousel .ctile--contest {
  background: var(--card) !important;
  border-color: transparent !important;
  justify-content: flex-end !important;
}
.feed-tiles--carousel .ctile--contest .ctile-name { color: var(--text) !important; text-shadow: none; }
.feed-tiles--carousel .ctile--contest .ctile-prize { color: #f5c518 !important; text-shadow: 0 1px 4px rgba(0,0,0,0.95); }
.feed-tiles--carousel .ctile--contest::after { content: none; }

/* Ежедневное — пересобрано по образцу «Прогноза клёва»: фон-иллюстрация,
   кнопка на всю плитку (flex column, текст внизу), значок/шеврон — в углу. */
.feed-tiles--carousel .daily-widget {
  background: var(--card) !important;
  border-color: transparent !important;
  padding: 0 !important; overflow: hidden;
}
.feed-tiles--carousel .daily-widget__tile {
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  width: 100%; height: 100%; gap: 0; padding: 0;
  box-sizing: border-box; background: none; border: none; cursor: pointer;
  font: inherit; text-align: center; position: relative;
}
.feed-tiles--carousel .daily-widget .ctile-sub { display: inline-flex; align-items: center; }
.feed-tiles--carousel .daily-widget .ctile-name { color: var(--text) !important; text-shadow: none; }
.feed-tiles--carousel .daily-widget .ctile-sub { color: rgba(255,255,255,0.82) !important; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.feed-tiles--carousel .daily-widget::after { content: none; }

/* «Ежедневное» как плитка сетки: рамка/фон/высота есть, но внутренняя вёрстка
   (иконка слева, шеврон справа) остаётся своей — не центрируем как обычную плитку. */
.feed-tile--daily {
  padding: 0; gap: 0;
  align-items: stretch; justify-content: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
}
.feed-tile--daily .daily-widget__header { width: 100%; min-height: 42px; }
/* Конкурс и чип прогноза — та же высота плиток в сетке */
.feed-tiles > .contest-banner,
.feed-tiles > .bite-forecast-chip { min-height: 42px; box-sizing: border-box; }

/* Тело «Ежедневного» раскрывается СЮДА (portal), под всей сеткой — на всю ширину.
   Сама плитка «Ежедневное» при этом остаётся на месте в сетке. */
#daily-body-slot:empty { display: none; }
#daily-body-slot .daily-widget__body {
  margin-top: 8px;
  padding: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.guest-hero {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.guest-hero-features-link {
  font-size: 13px; font-weight: 600; color: var(--accent);
  text-decoration: none; letter-spacing: 0.1px;
}
.guest-hero-features-link:hover { color: var(--text); }
.guest-hero-actions { display: flex; gap: 8px; align-items: stretch; }
.guest-hero-btn-primary {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 9px;
  background: var(--accent, var(--primary)); color: #14201a; font-weight: 700; font-size: 13px; text-decoration: none;
  transition: background 0.15s;
}
.guest-hero-btn-primary:hover { background: var(--accent-dark, var(--primary-dark)); color: #14201a; }
.guest-hero-btn-secondary {
  display: flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 9px;
  background: transparent; color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: none;
  border: 1.5px solid var(--accent, var(--primary)); transition: background 0.15s;
}
.guest-hero-btn-secondary:hover { background: var(--accent-light, rgba(127,161,122,0.12)); }

/* ── Гостевой призыв на главной — строка плиток ───────────────────────────────
   Та же карточка, что у .feed-tile (фон, рамка, скругление), но в полвысоты —
   так «Регистрация / Войти» читается продолжением ряда плиток, а не отдельным
   громоздким блоком. Стоит первой, в слоте над шапкой; боковые поля — как у
   карусели плиток (12px), чтобы края строк совпадали. */
.guest-bar { display: flex; gap: 8px; padding: 2px 12px 8px; }
.guest-bar__tile {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* Главное действие — растягивается и подсвечено фирменным цветом, как
   плитка-акцент «Замечания»: тот же приём, что уже есть в ряду. */
.guest-bar__tile--main {
  flex: 1 1 auto; min-width: 0;
  color: var(--primary);
  border-color: rgba(127,161,122,0.45);
  background: rgba(127,161,122,0.14);
}
.guest-bar__tile:active { background: var(--bg-warm); }
/* глобальное a:hover красит ссылки в зелёный — держим свой цвет */
.guest-bar__tile:hover, .guest-bar__tile:focus-visible { color: var(--text); }
.guest-bar__tile--main:hover, .guest-bar__tile--main:focus-visible { color: var(--primary); background: rgba(127,161,122,0.2); }


/* Бейдж «тестовый» для постов до запуска платформы */
.post-badge-test {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px;
  background: rgba(148,163,184,0.18); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
/* Дата запуска в футере сайдбара */
.sidebar-launch-note { font-size: 10px; color: var(--text-muted); opacity: .5; padding: 6px 12px 0; }

/* Промпт включения push-уведомлений */
/* Плавающий баннер-нудж сверху (был обычным потоком → торчал из-за таб-бара).
   Сверху, чтобы не перекрывать поле ввода в чате внизу.
   ПОВЕРХ шапки, у самого верха экрана под шторкой. Раньше он стоял «на высоте
   шапки» и ниже её по слою — но на главной шапка стоит не у верха, а под
   плитками, и плашка заезжала прямо под её иконки: поиск, колокольчик и аватар
   рисовались по тексту, прочесть было нельзя. Фон непрозрачный — сквозь плашку
   ничего не просвечивает; закрыть её можно кнопкой «Позже». */
.push-prompt {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 8px; right: 8px; margin: 0 auto; max-width: 560px;
  z-index: 550;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(24, 31, 27, 0.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(127,161,122,0.30);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,0.42);
}
.push-prompt-icon { color: var(--accent); flex-shrink: 0; }
.push-prompt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.push-prompt-text b { font-size: 13px; color: var(--text); }
.push-prompt-text span { font-size: 11.5px; color: var(--text-muted); }
.push-prompt-btn {
  flex-shrink: 0; padding: 7px 14px; border-radius: 9px; border: none;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer;
}
.push-prompt-btn:disabled { opacity: .6; }
.push-prompt-close { flex-shrink: 0; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; }

/* Кликабельный индикатор просмотров (свой пост → кто смотрел) */
button.author-meta-stat--btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px;
}
button.author-meta-stat--btn:hover { color: var(--accent); }
button.author-meta-stat--btn:focus, button.author-meta-stat--btn:focus-visible { outline: none; }

/* Регистрация — тёмные селекты, чипы типа рыбалки, подсказка */
.auth-card .input-with-icon select,
.auth-card .input-with-icon input {
  background: var(--bg); color: var(--text);
}
.auth-card .input-with-icon select option {
  background: var(--card); color: var(--text);
}
.register-hint {
  font-size: 12.5px; color: var(--text-muted); padding: 10px 14px;
  background: var(--bg-warm); border: 1px dashed var(--border-light); border-radius: var(--radius-sm);
}
.register-fishing-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.reg-fish-chip {
  padding: 7px 13px; border-radius: 18px; font-size: 13px; cursor: pointer;
  background: var(--bg-warm); color: var(--text-dim);
  border: 1px solid var(--border-light); transition: all .15s; font-family: inherit;
}
.reg-fish-chip:hover { border-color: var(--accent); }
.reg-fish-chip.on {
  background: rgba(127,161,122,0.18); color: var(--text);
  border-color: var(--accent); font-weight: 600;
}

/* Чекер пароля */
.pwd-checks {
  display: flex; flex-wrap: wrap; gap: 5px 10px;
  margin: -4px 0 10px 0; padding: 8px 10px;
  background: var(--card-alt, rgba(255,255,255,.04));
  border-radius: 8px; border: 1px solid var(--border-light);
}
.pwd-check {
  font-size: 12px; display: inline-flex; align-items: center; gap: 4px;
}
.pwd-check.ok { color: var(--success); }
.pwd-check.fail { color: var(--text-dim); }

/* Регистрация/вход — кнопка назад + лого-картинка */
.auth-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-muted); text-decoration: none;
  margin-bottom: 10px; padding: 4px 0;
}
.auth-back:hover { color: var(--accent); }
.auth-logo-img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto; }

/* ===== Модуль «На доработку» (admin QA) — плавающий, без блюра фона ===== */
.dn-fab {
  position: fixed; left: 14px; bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px) + 10px); z-index: 4000;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: #d4a017; color: #1a1a1a; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4); opacity: 0.7;
}
.dn-fab-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dn-panel {
  position: fixed; z-index: 4001; max-width: calc(100vw - 12px); min-width: 240px;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,0.55); overflow: hidden;
}
.dn-head {
  display: flex; align-items: center; gap: 6px; padding: 11px 10px; cursor: move;
  background: rgba(212,160,23,0.12); border-bottom: 1px solid var(--border-light);
  user-select: none; touch-action: none;
}
.dn-resize {
  position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize;
  touch-action: none; z-index: 2;
  background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%, var(--text-muted) 60%, transparent 60%, transparent 72%, var(--text-muted) 72%, var(--text-muted) 82%, transparent 82%);
  opacity: .5; border-end-end-radius: 12px;
}
.dn-previews { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dn-preview { position: relative; display: inline-block; }
.dn-preview img { height: 84px; width: auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--border-light); display: block; object-fit: cover; }
.dn-preview-x { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.65); border: none; color: #fff; border-radius: 50%; width: 20px; height: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dn-uploading { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.dn-add-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.dn-attach { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-warm); border: 1px solid var(--border-light); color: var(--text-dim); padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.dn-item-img { max-width: 100%; max-height: 110px; border-radius: 7px; border: 1px solid var(--border-light); margin-top: 6px; cursor: pointer; display: block; }
/* фото оригинального поста (community-жалобы) */
.dn-item-photos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.dn-item-photo { height: 84px; width: auto; max-width: 100%; border-radius: 7px; border: 1px solid var(--border-light); cursor: pointer; object-fit: cover; }
/* кликабельная ссылка на оригинал */
a.dn-item-link { color: #6cd47a; text-decoration: none; }
a.dn-item-link:hover { text-decoration: underline; }
.dn-head b { font-size: 14px; color: var(--text); }
.dn-grip { color: var(--text-muted); flex-shrink: 0; }
.dn-head-counts { flex: 1; display: flex; gap: 6px; align-items: center; }
.dn-count { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; cursor: pointer; background: var(--bg-warm); border: 1px solid var(--border-light); color: var(--text-dim); white-space: nowrap; }
.dn-count.on { background: rgba(108,212,122,.18); border-color: rgba(108,212,122,.45); color: #6cd47a; }
/* строка фильтров по статусам */
.dn-filters { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 8px 2px; border-bottom: 1px solid var(--border-light); }
.dn-fchip { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; cursor: pointer; background: var(--bg-warm); border: 1px solid var(--border-light); color: var(--text-dim); white-space: nowrap; }
.dn-fchip:hover { color: var(--text); }
.dn-fchip.on { background: rgba(108,212,122,.18); border-color: rgba(108,212,122,.5); color: #6cd47a; }
.dn-fchip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; margin-inline-start: 5px; padding: 0 5px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--primary); color: var(--bg); }
/* «На доработку» (возвраты автора) — красный счётчик, чтобы бросалось в глаза */
.dn-fchip.dn-f-reopened .dn-fchip-count { background: var(--danger); color: var(--bg); }
.dn-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 2px; }
.dn-add { padding: 10px; border-bottom: 1px solid var(--border-light); }
.dn-add textarea {
  width: 100%; box-sizing: border-box; resize: none; overflow-y: auto; font: inherit; font-size: 13px;
  line-height: 1.35; min-height: 34px; max-height: 66px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-light);
  border-radius: 8px; padding: 7px 9px;
}
.dn-add-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 12px;
  background: var(--accent); color: #fff; border: none; border-radius: 8px; font-weight: 600;
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.dn-add-btn:disabled { opacity: .6; }
.dn-add-page { font-size: 10px; color: var(--text-muted); margin-top: 5px; }
/* строка «Кому: сессия» */
.dn-target-row { display: flex; gap: 6px; align-items: center; margin-top: 7px; }
.dn-asfeedback { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; user-select: none; }
.dn-asfeedback input { width: auto; flex: none; margin: 0; accent-color: var(--primary); cursor: pointer; }
.dn-asfeedback svg { color: var(--primary); flex-shrink: 0; }
.dn-target {
  flex: 1; min-width: 0; font: inherit; font-size: 12px; padding: 6px 8px; border-radius: 8px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-light); cursor: pointer;
}
/* комбобокс с поиском по сессиям */
.dn-picker { position: relative; flex: 1; min-width: 0; }
.dn-picker-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 6px 8px;
  border-radius: 8px; background: var(--bg, #141816); color: var(--text); border: 1px solid var(--border-light);
}
.dn-picker-input::placeholder { color: var(--text); opacity: .8; }
.dn-picker-list {
  z-index: 100; max-height: 240px; overflow-y: auto; background: var(--bg-warm);
  border: 1px solid var(--border-light); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.dn-picker-opt {
  padding: 7px 9px; font-size: 12.5px; color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dn-picker-opt:hover { background: rgba(108,212,122,.16); }
.dn-picker-clear { color: var(--text-muted); }
.dn-picker-add { color: #6cd47a; font-weight: 600; }
.dn-picker-empty { padding: 8px 9px; font-size: 12px; color: var(--text-muted); }
.dn-autopush {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 11px; font-weight: 600;
  padding: 6px 8px; border-radius: 8px; cursor: pointer; font-family: inherit;
  background: var(--bg-warm); border: 1px solid var(--border-light); color: var(--text-dim);
}
.dn-autopush.on { background: rgba(234,179,8,.16); border-color: rgba(234,179,8,.4); color: #f5c518; }
.dn-item-session { font-size: 10px; font-weight: 700; color: #6cd47a; background: rgba(108,212,122,.14); padding: 1px 6px; border-radius: 7px; white-space: nowrap; flex-shrink: 0; }
/* назначение сессии прямо на замечании */
.dn-item-assign { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.dn-assign-label { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.dn-item-target {
  flex: 1; min-width: 0; font: inherit; font-size: 11.5px; padding: 4px 6px; border-radius: 7px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-light); cursor: pointer;
}
.dn-item-delivered { font-size: 12px; font-weight: 700; color: #6cd47a; flex-shrink: 0; }
/* ответ автору жалобы + рыбки */
.dn-reply-btn { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: 7px; cursor: pointer; background: var(--bg-warm); border: 1px solid var(--border-light); color: var(--text-dim); font-family: inherit; }
.dn-noreply { margin-top: 7px; padding: 6px 9px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #f5c518; background: rgba(234,179,8,.12); border: 1px solid rgba(234,179,8,.4); }
/* баннер вердикта автора по жалобе (страница поста) */
.fb-verdict { margin: 10px 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-warm); border: 1px solid var(--border-light); }
.fb-verdict-q { font-weight: 600; margin-bottom: 10px; color: var(--text); }
.fb-verdict-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-verdict-reopen textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 54px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg); color: var(--text); font: inherit; margin-bottom: 8px; }
.fb-verdict-done { margin: 10px 12px; padding: 10px 14px; border-radius: 10px; font-weight: 600; color: var(--text-dim); background: var(--bg-warm); border: 1px solid var(--border-light); }
.dn-reply-btn.on { background: rgba(108,212,122,.18); border-color: rgba(108,212,122,.45); color: #6cd47a; }
.dn-reply { margin-top: 7px; padding: 8px; border-radius: 8px; background: var(--bg-warm); border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 7px; }
.dn-reply-text { width: 100%; box-sizing: border-box; resize: none; overflow-y: auto; font: inherit; font-size: 12.5px; line-height: 1.35; min-height: 32px; max-height: 66px; padding: 6px 8px; border-radius: 7px; background: var(--bg); color: var(--text); border: 1px solid var(--border-light); }
.dn-reply-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.dn-reply-coins-lbl { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-muted); }
.dn-coin-preset { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; cursor: pointer; background: var(--bg); border: 1px solid var(--border-light); color: var(--text); }
.dn-coin-preset:hover { border-color: rgba(108,212,122,.5); color: #6cd47a; }
.dn-coin-total { font-size: 12.5px; font-weight: 700; color: #6cd47a; }
.dn-coin-reset { font-size: 11px; padding: 3px 8px; border-radius: 7px; cursor: pointer; background: none; border: 1px solid var(--border-light); color: var(--text-muted); }
.dn-reply-actions { display: flex; gap: 6px; align-items: center; }
.dn-reply-send { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 10px; border-radius: 8px; cursor: pointer; background: var(--accent); color: #fff; border: none; font-weight: 600; font-size: 12.5px; }
.dn-reply-send:disabled { opacity: .55; }
.dn-reply-cancel { font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer; background: none; border: 1px solid var(--border-light); color: var(--text-muted); }
/* Уже отправленный автору ответ (виден в карточке замечания) */
.dn-replied { margin-top: 7px; padding: 8px 10px; border-radius: 8px; background: var(--success-light); border: 1px solid var(--success); }
.dn-replied-head { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--success); }
.dn-replied-coins { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; padding: 1px 6px; border-radius: 10px; background: var(--success); color: #fff; }
.dn-replied-text { margin-top: 5px; font-size: 12px; color: var(--text); line-height: 1.4; white-space: pre-wrap; }
/* Ответ САМОГО автора замечания (виден владельцу в виджете). --new = пришёл после нашего ответа. */
.dn-author-reply { margin-top: 7px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--bg-warm); border: 1px solid var(--border); }
.dn-author-reply--new { border-color: var(--primary); background: var(--primary-bg); }
.dn-author-reply-head { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.dn-author-reply--new .dn-author-reply-head { color: var(--primary); }
.dn-author-reply-badge { margin-inline-start: 6px; padding: 1px 6px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; background: var(--primary); color: var(--bg); }
.dn-author-reply-text { margin-top: 5px; font-size: 12px; color: var(--text); line-height: 1.4; white-space: pre-wrap; }
.dn-send-claude {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff; border: none; font-weight: 600;
}
.dn-send-claude:hover { filter: brightness(1.06); }
.dn-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.dn-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 16px 0; }
.dn-item { border: 1px solid var(--border-light); border-radius: 9px; padding: 8px 9px; background: var(--bg-warm); }
.dn-item-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dn-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .3px; }
.dn-st-open .dn-badge, .dn-badge.dn-st-open { background: rgba(148,163,184,.2); color: #cbd5e1; }
.dn-st-fixed .dn-badge, .dn-badge.dn-st-fixed { background: rgba(56,132,232,.22); color: #6fb0ff; }
.dn-st-done .dn-badge, .dn-badge.dn-st-done { background: rgba(76,175,80,.22); color: #6cd47a; }
.dn-st-reopened .dn-badge, .dn-badge.dn-st-reopened { background: rgba(192,57,43,.22); color: #ff8b7a; }
.dn-st-progress .dn-badge, .dn-badge.dn-st-progress { background: rgba(234,179,8,.20); color: #f5c518; }
.dn-st-rejected .dn-badge, .dn-badge.dn-st-rejected { background: rgba(148,163,184,.18); color: #9aa4b2; }
.dn-st-clarify .dn-badge, .dn-badge.dn-st-clarify { background: rgba(168,85,247,.22); color: #c39bf5; }
.dn-st-voting .dn-badge, .dn-badge.dn-st-voting { background: rgba(20,184,166,.22); color: #5eead4; }
.dn-vote-btn { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: 7px; cursor: pointer; background: var(--bg-warm); border: 1px solid var(--border-light); color: var(--text-dim); font-family: inherit; }
.dn-vote-btn:hover { border-color: var(--primary); color: var(--primary); }
.dn-item-page { flex: 1; font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-item-date { font-size: 10px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
/* Автор замечания в заголовке заметки — кликабельно в профиль */
.dn-item-author { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 5px; text-decoration: none; width: fit-content; }
.dn-author-ava { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-warm); }
.dn-author-ava--ph { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--primary); border: 1px solid var(--border); }
.dn-author-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.dn-item-author:hover .dn-author-name { color: var(--primary); text-decoration: underline; }
.dn-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 1px; }
.dn-copy { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 1px; display: inline-flex; align-items: center; }
.dn-copy:hover { color: var(--text); }
.dn-item-text { font-size: 13px; color: var(--text); line-height: 1.4; white-space: pre-wrap; }
.dn-item-comment { font-size: 12px; color: #ff8b7a; margin-top: 4px; }
.dn-item-actions { display: flex; gap: 6px; margin-top: 7px; }
.dn-item-actions button { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--border-light); cursor: pointer; font-family: inherit; }
.dn-act-done { background: rgba(76,175,80,.18); color: #6cd47a; border-color: rgba(76,175,80,.4) !important; }
.dn-act-reopen { background: var(--bg); color: var(--text-dim); }
.dn-lightbox { position: fixed; inset: 0; z-index: 4100; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.dn-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ═══════════════════════════════════════════════════════════
   Daily Retention Widget — streak + quests + fish of week
   ═══════════════════════════════════════════════════════════ */
.daily-widget {
  margin: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  overflow: hidden;
}
.daily-widget__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: none; border: none; width: 100%;
  cursor: pointer; color: var(--text); gap: 8px;
  border-radius: var(--radius-sm); text-align: start; font: inherit;
}
.daily-widget__header:not(:last-child) {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
/* «Ежедневное» — как обычная плитка: текст по центру. Шеврон/бейдж — абсолютом
   в правом верхнем углу, чтобы не смещать центрированный заголовок. */
.daily-widget__header--v2 {
  position: relative;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  padding: 5px 8px; text-align: center;
}
.daily-widget__icon { flex-shrink: 0; }
.daily-widget__title-row {
  display: flex; align-items: center; justify-content: center;
}
.daily-widget__header-right {
  position: absolute; top: 4px; right: 6px;
  display: flex; align-items: center; gap: 4px; color: var(--text-muted);
}
/* chips row: точно тот же стиль, что feed-banner__desc, но display:flex для чипов */
.daily-widget__chips-row {
  display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden;
  font-size: 11.5px; color: var(--text-muted); line-height: 1.35;
}
.daily-chip { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.daily-chip--alert { color: var(--warning); font-weight: 600; }
.daily-chip-sep { color: var(--text-muted); opacity: 0.35; }

.daily-widget__left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.daily-widget__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.daily-streak { display: flex; align-items: center; gap: 3px; font-size: 14px; font-weight: 700; }
.daily-streak__icon { color: var(--warning); }
.daily-fish-badge { display: flex; align-items: center; gap: 4px; font-size: 12px; background: var(--primary-bg); color: var(--primary); padding: 2px 8px; border-radius: var(--radius-sm); }
.daily-fish-badge__mult { font-weight: 700; color: var(--warning); }
.daily-quest-counter { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.daily-badge { background: var(--warning); color: var(--bg); font-size: 11px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.daily-widget__body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }

/* Streak — компактная строка */
.daily-streak-block { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: color-mix(in srgb, var(--warning) 12%, transparent); border-radius: var(--radius-sm); }
.daily-streak-block .daily-streak__icon { font-size: 16px; color: var(--warning); flex-shrink: 0; }
.daily-streak-block__label { font-size: 12px; font-weight: 600; color: var(--text); }
.daily-streak-block__sub { font-size: 10px; color: var(--text-muted); }

/* Fish of week — компактная строка */
.daily-fish-block { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--primary-bg); border-radius: var(--radius-sm); }
.daily-fish-block__label { font-size: 12px; color: var(--text); }
.daily-fish-block__sub { font-size: 10px; color: var(--text-muted); }

/* Рыбки — пояснение, одна строка */
.daily-coins-hint { font-size: 10px; color: var(--text-muted); padding: 2px 2px 0; line-height: 1.4; }

/* Квесты */
.daily-quests { display: flex; flex-direction: column; gap: 5px; }
.daily-quest {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 8px 10px;
  border: 1px solid var(--border-light);
}
.daily-quest--claimed { opacity: .6; }
.daily-quest--link { cursor: pointer; color: inherit; }
.daily-quest--link:hover { border-color: var(--primary); background: var(--card); }
.daily-quest__icon { font-size: 17px; flex-shrink: 0; line-height: 1; }
.daily-quest__info { flex: 1; min-width: 0; }
.daily-quest__title { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
.daily-quest__desc { font-size: 10px; color: var(--text-muted); }

/* Reward — горизонтально в одну строку */
.daily-quest__reward { display: flex; gap: 5px; align-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; white-space: nowrap; }

/* Progress row (только target > 1) */
.daily-quest__progress-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.daily-quest__progress-bar { flex: 1; height: 3px; background: var(--border-light); border-radius: 2px; overflow: hidden; position: relative; }
.daily-quest__progress-bar::after { content: ''; position: absolute; inset: 0; width: var(--pct, 0%); background: var(--color, #4caf50); border-radius: 2px; transition: width .3s; }
.daily-quest__progress-label { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

/* Inline claim */
.daily-quest__claim-inline { background: var(--primary); color: var(--bg); border: none; border-radius: var(--radius-xs); padding: 2px 9px; font-size: 10px; font-weight: 700; cursor: pointer; margin-top: 2px; }
.daily-quest__claim-inline:disabled { opacity: .6; }

/* Claimed status */
.daily-quest__status--claimed { display: flex; align-items: center; gap: 3px; font-size: 10px; color: var(--primary); }

.daily-all-done { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; text-align: center; }
.daily-all-hint { background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning); padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12px; text-align: center; }
/* Пассивная рыбалка внутри блока квестов */
.daily-widget__extra {
  border-top: 1px solid var(--border-light);
  margin-top: 4px;
}
.daily-widget__extra .idle-fishing-widget {
  background: transparent; border: none; border-radius: 0; margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   Idle Fishing Widget
   ═══════════════════════════════════════════════════════════ */
.idle-fishing-widget {
  margin: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-warm, var(--bg));
  border: 1px solid var(--border-light);
  padding: 10px 10px;
}
.idle-fishing-widget__header {
  display: flex; align-items: center; gap: 4px; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  flex-wrap: wrap;
}
.idle-fishing-widget__count { margin-inline-start: auto; font-size: 11px; color: var(--text-muted); font-weight: 400; }
.idle-fishing-widget__close {
  margin-inline-start: auto; background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--text-muted); display: flex; align-items: center; opacity: 0.6;
}
.idle-fishing-widget__close:hover { opacity: 1; }

.idle-fishing-widget__btn {
  width: 100%; padding: 8px 6px; border-radius: var(--radius-sm); border: none;
  font-size: 12px; font-weight: 700; cursor: pointer; text-align: center;
}
/* Основное действие (заброс/сбор) — фирменная зелёная заливка, тёмный текст (styleguide) */
.idle-fishing-widget__btn--cast { background: var(--primary); color: var(--bg); }
.idle-fishing-widget__btn--collect { background: var(--primary); color: var(--bg); }
.idle-fishing-widget__btn:disabled { opacity: .6; cursor: default; }

.idle-fishing-widget__waiting {
  text-align: center; padding: 10px; font-size: 13px; color: var(--text-dim);
  background: var(--bg-warm); border-radius: var(--radius-sm);
}
.idle-fishing-widget__result {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); padding: 8px 12px;
  border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 8px;
}
.idle-fishing-widget__result-close {
  background: none; border: none; color: var(--success); font-size: 16px; cursor: pointer; line-height: 1; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   Weekly Page — рейтинг недели
   ═══════════════════════════════════════════════════════════ */
.weekly-page { max-width: 480px; margin: 0 auto; padding-bottom: 80px; }
.weekly-page__header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border-light); }
.weekly-page__back { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 2px; display: flex; align-items: center; }
.weekly-page__title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.weekly-page__loading { padding: 40px; text-align: center; color: var(--text-muted); font-size: 14px; }

.weekly-fish-card { margin: 12px 14px 8px; display: flex; align-items: center; gap: 14px; background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25); border-radius: 14px; padding: 14px; }
.weekly-fish-card__icon { font-size: 36px; flex-shrink: 0; }
.weekly-fish-card__title { font-size: 14px; font-weight: 600; color: var(--text); }
.weekly-fish-card__hint { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.weekly-fish-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.weekly-fish-card__bonus { background: rgba(251,191,36,.2); color: var(--warning); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; }
.weekly-fish-card__days { font-size: 11px; color: var(--text-muted); }

.weekly-my-rank { margin: 0 14px 10px; display: flex; align-items: center; gap: 8px; background: rgba(34,197,94,.12); color: var(--success); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; }
.weekly-my-rank--none { background: rgba(100,116,139,.1); color: var(--text-muted); }

.weekly-board { margin: 0 14px; }
.weekly-board__label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; padding: 4px 0 8px; }
.weekly-board__empty { text-align: center; color: var(--text-muted); font-size: 14px; padding: 24px 0; line-height: 1.6; }

.weekly-entry { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); margin-bottom: 6px; background: var(--bg-warm, var(--bg)); border: 1px solid var(--border-light); cursor: pointer; transition: background .15s; }
.weekly-entry:active { background: rgba(255,255,255,.05); }
.weekly-entry--me { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.08); }
.weekly-entry--podium { border-color: rgba(251,191,36,.3); }

.weekly-entry__rank { width: 28px; text-align: center; font-size: 20px; flex-shrink: 0; }
.weekly-entry__rank-num { font-size: 14px; font-weight: 700; color: var(--text-muted); }

.weekly-entry__avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.weekly-entry__avatar img { width: 100%; height: 100%; object-fit: cover; }
.weekly-entry__avatar-stub { width: 100%; height: 100%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }

.weekly-entry__info { flex: 1; min-width: 0; }
.weekly-entry__name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weekly-entry__meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.weekly-entry__kg { text-align: end; flex-shrink: 0; }
.weekly-entry__kg-val { font-size: 17px; font-weight: 700; color: var(--text); }
.weekly-entry__kg-unit { font-size: 11px; color: var(--text-muted); margin-inline-start: 2px; }

.daily-widget__label { font-size: 13px; font-weight: 600; color: var(--text-dim); }


/* ── Orders page ─────────────────────────────────────── */
.orders-page { padding-bottom: 80px; }






















/* Status badges */

.status-new       { background: rgba(59,130,246,.12);   color: #3b82f6; }
.status-confirmed { background: rgba(34,197,94,.12);    color: #16a34a; }
.status-shipping  { background: rgba(249,115,22,.12);   color: #ea580c; }
.status-delivered { background: rgba(139,92,246,.12);   color: #7c3aed; }
.status-completed { background: rgba(34,197,94,.15);    color: #16a34a; }
.status-cancelled { background: rgba(239,68,68,.12);    color: var(--danger); }
.status-dispute   { background: rgba(234,179,8,.12);    color: #b45309; }


/* ── Order detail page ───────────────────────────────── */














/* Garant: waiting for buyer payment (seller view) */






/* Garant: pay now block (buyer view) */






/* Garant payment modal */
.garant-pay-modal { max-width: 420px; }
.garant-pay-modal__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.garant-pay-modal__header h3 { font-size: 17px; font-weight: 700; margin: 0; }
.garant-pay-modal__desc { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.garant-pay-modal__amount { font-size: 32px; font-weight: 900; text-align: center; color: var(--primary); margin: 0 0 4px; }
.garant-pay-modal__purpose { font-size: 12px; color: var(--text-muted); text-align: center; margin: 0 0 16px; }
.garant-pay-modal__methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.garant-pay-method { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.garant-pay-method svg { flex-shrink: 0; color: var(--primary); }
.garant-pay-method__label { font-size: 11px; color: var(--text-muted); }
.garant-pay-method__value { font-size: 16px; font-weight: 700; }
.garant-pay-method__bank { font-size: 11px; color: var(--text-muted); }
.garant-copy-btn { margin-inline-start: auto; flex-shrink: 0; font-size: 12px; }
.garant-pay-modal__pending { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--card); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.garant-pay-modal__tkassa { display: flex; align-items: center; gap: 8px; padding: 12px; background: rgba(59,130,246,.07); border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 12px; }
.garant-pay-modal__tkassa-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin: 4px 0 12px; }

/* QR code block */
/* SBP payment card */
.garant-sbp-card { background: var(--card); border: 1.5px solid var(--primary); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.garant-sbp-card__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--primary); margin-bottom: 10px; }
.garant-sbp-card__phone { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: 1px; cursor: pointer; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.garant-sbp-card__copy { font-size: 12px; font-weight: 400; color: var(--primary); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.garant-sbp-card__bank { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.garant-sbp-card__divider { height: 1px; background: var(--border); margin-bottom: 12px; }
.garant-sbp-card__amount-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.garant-sbp-card__amount-label { font-size: 13px; color: var(--text-muted); }
.garant-sbp-card__amount { font-size: 20px; font-weight: 800; color: var(--text); }
.garant-sbp-card__steps { font-size: 12px; color: var(--text-muted); line-height: 1.8; background: var(--bg); border-radius: 8px; padding: 10px 12px; }

/* Payment method selector cards */
.garant-method-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: start; transition: border-color 0.15s, background 0.15s; }
.garant-method-card:hover:not(:disabled) { border-color: var(--primary); background: rgba(127,161,122, 0.06); }
.garant-method-card:disabled { opacity: 0.6; cursor: not-allowed; }
.garant-method-card__icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: var(--radius-sm); }
.garant-method-card__info { flex: 1; min-width: 0; }
.garant-method-card__title { font-size: 14px; font-weight: 700; color: var(--text); }
.garant-method-card__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.garant-method-card__sub--fee { color: #d97706; }
.garant-method-card__amount { font-size: 16px; font-weight: 800; color: var(--primary); white-space: nowrap; }

/* Garant modal padding */
.garant-pay-modal { padding: 20px !important; }

/* Shipment ready block (seller sees after buyer_paid) */









/* Status banner (cancelled/dispute) */




/* Status timeline */










/* Delivery card */





/* Order actions */




/* Chat */

















/* Dark mode */
:root.dark .mkt-product-card,
:root.dark .mkt-seller-card,
:root.dark .mkt-seller-mini-card,
:root.dark .ord-card,
:root.dark .shop-product-card { background: var(--card); }
:root.dark .mkt-search-box,
:root.dark .mkt-filter-btn { background: var(--card); }

@media (prefers-color-scheme: dark) {
  :root:not(.light) .mkt-product-card,
  :root:not(.light) .mkt-seller-card,
  :root:not(.light) .ord-card { background: var(--card); }
}

/* ── Challenges: upload buttons ─────────────────────────────────────────── */





/* ── Photo row (thumb + scales) ─────────────────────────────────────────── */




/* ── Trust badges ───────────────────────────────────────────────────────── */







/* ── Tackle toggle ──────────────────────────────────────────────────────── */



/* ── Method / legal confirm ─────────────────────────────────────────────── */



/* ── Join form error / success ──────────────────────────────────────────── */



/* ── Leaderboard cards ──────────────────────────────────────────────────── */


/* Карточка: фото+ранг слева, тело по центру вертикали, действия справа */




/* Фото + ранг-бейдж поверх фото */






/* Тело карточки — 3 строки */


/* Строка 1: аватар + имя + вид рыбы */




/* Строка 2: вес · кол-во */




/* Строка 3: дата + иконки-бейджи */




/* Действия справа (лайк + флаг) — колонкой */








/* ── Entry modal ────────────────────────────────────────────────────────── */










/* Десктоп — центрированный диалог вместо bottom sheet */
@media (min-width: 700px) {
  .lb-modal-overlay { align-items: center; justify-content: center; }
  .lb-modal { width: 500px; max-width: 92vw; border-radius: 16px; max-height: 88vh; }
  .lb-modal-photo { border-radius: 16px 16px 0 0; max-height: 300px; }
  .lb-modal-nophoto { border-radius: 16px 16px 0 0; }
}

/* ── Like button (full-width in modal) ──────────────────────────────────── */




/* ── Comments section ───────────────────────────────────────────────────── */














/* ── Report button in modal ─────────────────────────────────────────────── */


/* ── Flag dialog (centered popup, not bottom-sheet) ─────────────────────── */
.flag-dialog-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.flag-dialog { background: var(--card); border-radius: 16px; width: 100%; max-width: 400px; padding: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.45); }
.flag-dialog-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.flag-reasons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.flag-reason-label { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border); cursor: pointer; font-size: 14px; color: var(--text); transition: border-color 0.15s; }
.flag-reason-label.flag-reason-active { border-color: var(--primary); background: rgba(41,128,185,0.09); }
.flag-reason-label input[type="radio"] { flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--primary); }
.flag-comment-input { width: 100%; border: 1.5px solid var(--border); border-radius: var(--input-radius); padding: 10px 12px; font-size: 13px; background: var(--bg); color: var(--text); resize: vertical; margin-bottom: 12px; box-sizing: border-box; outline: none; }
.flag-comment-input:focus { border-color: var(--primary); }
.flag-dialog-actions { display: flex; gap: 8px; }
.flag-dialog-cancel { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: none; color: var(--text-dim); font-size: 14px; cursor: pointer; }
.flag-dialog-submit { flex: 2; }

/* ── Challenge detail layout ────────────────────────────────────────────── */
.challenge-detail { padding: 0 14px 100px; }
.challenge-detail-badge { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.challenge-detail h2 { margin: 0 0 6px; font-size: 20px; }
.challenge-detail-desc { margin: 0 0 12px; font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.challenge-detail-meta { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); padding: 12px; background: var(--bg); border-radius: var(--radius); margin-bottom: 14px; }
.challenge-detail-meta div { display: flex; align-items: center; gap: 6px; }
.challenge-days-left { font-weight: 600; color: var(--primary) !important; }
.challenge-join-form { background: var(--card); border-radius: 14px; padding: 14px; border: 1px solid var(--border-light); margin-bottom: 18px; }
.challenge-join-form h3 { margin: 0 0 12px; font-size: 15px; }
.challenge-join-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.challenge-join-inputs input { border: 1px solid var(--border); border-radius: var(--input-radius); padding: 10px 12px; font-size: 14px; background: var(--bg); color: var(--text); outline: none; }
.challenge-join-inputs input:focus { border-color: var(--primary); }
.challenge-leaderboard h3 { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-bottom: 4px; }
.challenge-type-badge { color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }

/* ── Avatars ────────────────────────────────────────────────────────────── */
.avatar-xs { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-placeholder { display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--btn-text); font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* ── Challenge meta chips ───────────────────────────────────────────────── */
.ch-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.ch-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 4px 10px; border-radius: 20px; background: var(--bg); border: 1px solid var(--border-light); color: var(--text-dim); white-space: nowrap; }
.ch-chip-timer { color: var(--primary); border-color: rgba(41,128,185,0.3); font-weight: 600; }

/* ── Challenge title + badge inline ─────────────────────────────────────── */
.ch-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ch-title-row h2 { margin: 0; font-size: 20px; flex: 1; min-width: 0; }
.challenge-detail-badge { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }

/* ── Join form compact inputs ───────────────────────────────────────────── */

/* Одна строка: вид рыбы | вес | кол-во */







/* ── Leaderboard stat value ─────────────────────────────────────────────── */




/* ── Autocomplete ───────────────────────────────────────────────────────── */
.ac-wrap { position: relative; }
.ac-wrap input { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--input-radius); padding: 10px 12px; font-size: 14px; background: var(--bg); color: var(--text); outline: none; }
.ac-wrap input:focus { border-color: var(--primary); }
.ac-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 200; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0,0,0,0.25); overflow: hidden; }
.ac-item { padding: 10px 14px; font-size: 13px; cursor: pointer; color: var(--text); }
.ac-item:hover, .ac-item:active { background: var(--bg); }

/* ── Location row (input + map button) ──────────────────────────────────── */





/* ── Location picker modal ───────────────────────────────────────────────── */








/* ═══════════════════════════════════════════════════════════════════════════
   LEADERBOARD CARDS — полный ребилд (lbc-*)
   Структура: [ранг] [фото] [тело: имя / цифры+дата] [действия]
   align-items: center — всё по вертикали ровно
   ═══════════════════════════════════════════════════════════════════════════ */
.lbc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.lbc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: background 0.12s;
}
.lbc:active { background: var(--bg); }
.lbc-podium { border-color: rgba(251,191,36,0.4); }

/* Ранг — фиксированная колонка слева */
.lbc-rank {
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
}
.lbc-rank-n {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Фото улова */
.lbc-img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}
.lbc-nophoto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--bg);
}

/* Тело — две строки */
.lbc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Строка 1: аватар + имя + вид рыбы */
.lbc-top {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.lbc-av {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.lbc-av-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.lbc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}
.lbc-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(41,128,185,0.12);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
}

/* Строка 2: вес / кол-во / дата / бейджи / лайк — ВСЁ в одной flex-строке */
.lbc-bot {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: nowrap;
  line-height: 1;
}
.lbc-bot b {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.lbc-date {
  font-size: 11px;
  color: var(--text-muted);
  margin-inline-start: auto;
  line-height: 1;
}

/* lbc-actions больше не используется, оставлен для совместимости */
.lbc-actions { display: none; }

/* Лайк — инлайн внутри lbc-bot */
.lbc-like {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-dim);
  min-width: 28px;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.lbc-like.on {
  color: var(--danger);
  border-color: rgba(239,68,68,0.4);
  background: rgba(239,68,68,0.07);
}
.lbc-flag {
  background: none;
  border: none;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.35;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.lbc-flag:hover { opacity: 0.8; }
.lbc-flag.done { opacity: 0.15; cursor: default; }

/* ── Icon buttons with CSS tooltip ── */
.lbc-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.lbc-icon-btn[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,20,0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ── Badge info popup ── */
.badge-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-info-card {
  background: var(--card);
  border-radius: 18px;
  padding: 28px 24px 20px;
  max-width: 320px;
  width: 88%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.badge-info-icon { font-size: 42px; margin-bottom: 10px; line-height: 1; }
.badge-info-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.badge-info-desc { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin-bottom: 20px; }
.badge-info-close {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ── Prize chip ── */
.ch-chip-prize {
  background: rgba(251,191,36,0.15);
  color: #d97706;
  border: 1px solid rgba(251,191,36,0.3);
  font-weight: 700;
}

/* ── Prize breakdown block ── */
.ch-prize-block {
  background: rgba(251,191,36,0.07);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 12px;
}
.ch-prize-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.ch-prize-places {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ch-prize-place {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ch-prize-medal { font-size: 20px; line-height: 1; flex-shrink: 0; }
.ch-prize-label { font-size: 13px; color: var(--text-dim); flex: 1; }
.ch-prize-amount { font-size: 14px; font-weight: 700; color: #d97706; }
.ch-prize-total { font-size: 18px; font-weight: 700; color: #d97706; margin-bottom: 4px; }
.ch-prize-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ── Location picker — desktop centering ── */
@media (min-width: 600px) {
  .loc-picker-overlay { align-items: center; justify-content: center; }
  .loc-picker-modal { width: 520px; max-width: 92vw; border-radius: 16px; }
}

/* ── Join form: update notice ── */



/* ── Organize tournament button ── */
.challenge-demo-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-xs);
  background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.challenges-filter-finished {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--text-muted); margin: 0 0 12px; cursor: pointer; user-select: none;
}
.challenges-filter-finished input[type="checkbox"] { accent-color: var(--toggle-accent); width: 15px; height: 15px; }
.cta-organize-btn {
  background: rgba(41,128,185,0.15);
  border: 1px solid rgba(41,128,185,0.35);
  color: var(--primary);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-inline-start: auto;
  white-space: nowrap;
  transition: background 0.15s;
}
.cta-organize-btn:hover { background: rgba(41,128,185,0.25); }

/* ── Create Tournament Modal ── */

@media (min-width: 600px) {
  .crtm-overlay { align-items: center; }
  .crtm-modal { border-radius: 18px !important; max-height: 88vh; }
}










































/* ═══════════════════════════════════════════════════════
   GAMES PAGE — секции и карточки режимов
   ═══════════════════════════════════════════════════════ */
.games-section {
  width: 100%;
  box-sizing: border-box;
  background: var(--card);
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
  border-radius: var(--radius);
  padding: 12px;
}
.games-section-header { margin-bottom: 10px; }
.games-section-title { font-size: 14px; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.4px; }
.games-section-sub { font-size: 11px; color: var(--text-muted); }





.bm-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bm-accent, rgba(99,102,241,0.12));
  color: var(--bm-color, #818cf8);
}
.bm-body { flex: 1; min-width: 0; }
.bm-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.bm-desc { font-size: 11px; color: var(--text-dim); line-height: 1.3; }
.bm-arrow { font-size: 18px; color: var(--text-muted); }
.bm-badge {
  font-size: 11px; font-weight: 700;
  background: rgba(150,150,150,0.15); color: var(--text-muted);
  border-radius: var(--radius-xs); padding: 3px 8px;
}

/* ═══════════════════════════════════════════════════════
   BATTLE PAGE — общий layout
   ═══════════════════════════════════════════════════════ */








/* Выбор снастей */
.gear-list { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; flex: 1; }
.gear-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 2px solid var(--border-light);
  border-radius: 14px; padding: 12px;
  cursor: pointer; text-align: start; width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.gear-card--selected { border-color: var(--primary); background: rgba(var(--primary-rgb, 74,222,128), 0.07); }
.gear-card-emoji { font-size: 24px; width: 40px; text-align: center; flex-shrink: 0; }
.gear-card-body { flex: 1; min-width: 0; }
.gear-card-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.gear-card-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 5px; }
.gear-card-stats { display: flex; gap: 8px; }
.gear-stat { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-xs); }
.gear-stat--atk { background: rgba(59,130,246,0.12); color: #60a5fa; }
.gear-stat--def { background: rgba(16,185,129,0.12); color: #34d399; }

/* Кнопки */




/* Поиск противника */


@keyframes battleSpin { 0%{transform:rotate(-20deg)} 50%{transform:rotate(20deg)} 100%{transform:rotate(-20deg)} }


/* HP */









/* Gear row */



.gear-slot-atk { color: #60a5fa; }
.gear-slot-def { color: #34d399; }


/* Результат раунда */

.res-hit { color: var(--success); }
.res-miss { color: var(--text-muted); }
.res-dmg { color: var(--danger); }
.res-block { color: #60a5fa; }

/* Таблица зон */
.zone-info-table {
  margin: 4px 16px 8px;
  background: var(--card); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 12px;
}
.zone-info-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-light); }
.zone-info-row:last-child { border: none; }
.zone-info-fish { flex: 1; color: var(--text-muted); }
.zone-info-dmg { color: var(--danger); font-weight: 700; }

/* Зоны боя */


.bz--atk { border-color: #3b82f6; background: rgba(59,130,246,0.08); }
.bz--def { border-color: #10b981; background: rgba(16,185,129,0.08); }
.bz--hit { border-color: var(--success); background: rgba(74,222,128,0.10); }
.bz--gothit { border-color: var(--danger); background: rgba(248,113,113,0.08); }

.bz-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.bz-emoji { font-size: 18px; }
.bz-name { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.bz-opp-atk { font-size: 14px; color: var(--danger); }
.bz-opp-def { font-size: 14px; color: #34d399; }
.bz-fish { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

.bz-actions { display: flex; gap: 8px; }
.bz-btn {
  flex: 1; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  border: 1.5px solid; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.12s, color 0.12s;
}
.bz-btn--atk { border-color: rgba(59,130,246,0.35); color: #60a5fa; background: rgba(59,130,246,0.07); }
.bz-btn--atk.bz-btn--on { background: rgba(59,130,246,0.20); border-color: #3b82f6; color: #93c5fd; }
.bz-btn--def { border-color: rgba(16,185,129,0.35); color: #34d399; background: rgba(16,185,129,0.07); }
.bz-btn--def.bz-btn--on { background: rgba(16,185,129,0.20); border-color: #10b981; color: #6ee7b7; }
.bz-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Конец боя */







/* ===== Battle: Character card (bcc) ===== */

.bcc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bcc-emoji { font-size: 28px; flex-shrink: 0; }
.bcc-info { flex: 1; min-width: 0; }
.bcc-name { font-size: 15px; font-weight: 800; color: var(--text); }
.bcc-level { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bcc-reset-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 6px; }
.bcc-xp-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.bcc-points-badge { font-size: 12px; font-weight: 700; color: var(--warning); background: rgba(251,191,36,0.12); border-radius: 8px; padding: 2px 8px; }
.bcc-alloc-hint { font-size: 12px; font-weight: 600; color: var(--warning); background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
.bcc-stats { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 8px; }
.bcc-stat-row { display: flex; align-items: center; gap: 7px; }
.bcc-stat-label { width: 80px; font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.bcc-stat-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; position: relative; overflow: hidden; }
.bcc-stat-bar-base { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg,#4caf7a,#7fc97a); border-radius: 3px; transition: width 0.3s; }
.bcc-stat-bar-gear { position: absolute; top: 0; bottom: 0; background: rgba(163,233,192,0.7); border-radius: 3px; transition: width 0.3s, left 0.3s; }
.bcc-stat-val { font-size: 13px; font-weight: 700; color: var(--text); min-width: 18px; text-align: end; }
.bcc-gear-bonus { font-size: 11px; font-weight: 700; color: #86efac; min-width: 24px; text-align: start; cursor: help; }
.bcc-stat-plus { background: var(--primary); color: #000; border: none; border-radius: var(--radius-xs); width: 26px; height: 26px; font-size: 18px; font-weight: 900; cursor: pointer; line-height: 1; flex-shrink: 0; }
.bcc-reset-section { border-top: 1px solid var(--border-light); padding-top: 12px; margin-top: 8px; }
.bcc-reset-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.bcc-reset-cost { font-size: 13px; color: var(--warning); margin-bottom: 10px; }
.bcc-reset-cooldown { font-size: 13px; color: var(--danger); }

/* ===== Battle: Confirm overlay ===== */






/* ===== Battle: Профили участников ===== */



.bp-avatar { font-size: 28px; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.bp-info { flex: 1; min-width: 0; }
.bp-info--right { text-align: end; }
.bp-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-level { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.bp-hp { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 600; }


/* ===== Battle: bz--both (атака + охрана в одной зоне) ===== */
.bz--both { border-color: var(--warning) !important; background: rgba(245,158,11,0.08) !important; }
.bz--both .bz-name::after { content: ' ⚔🛡'; font-size: 10px; }
.bz-opp-hints { display: flex; gap: 3px; font-size: 11px; margin-inline-start: auto; }
.bz-opp-atk { color: var(--danger); }
.bz-opp-def { color: #60a5fa; }

/* ===== Battle: Лог боя ===== */







.blr-header { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.blr-line { font-size: 12px; color: var(--text-dim); line-height: 1.5; padding: 1px 0; }
.blr-line--hit { color: var(--success); }
.blr-line--miss { color: var(--text-muted); }
.blr-line--block { color: #60a5fa; }
.zone-info-hint { font-size: 11px; color: var(--text-muted); padding: 6px 8px 0; font-style: italic; }

/* ===== Battle: Компактный бой (bfight) ===== */
.bfight { display: flex; flex-direction: column; overflow-y: auto; max-height: 100dvh; }
.bfight-bot-badge { font-size: 11px; background: rgba(168,85,247,0.15); color: #a855f7; border-radius: var(--radius-xs); padding: 2px 7px; margin-inline-start: auto; }
.bfight-profiles { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; }
.bfp { display: flex; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
.bfp--opp { flex-direction: row-reverse; }
.bfp-emoji { font-size: 24px; flex-shrink: 0; }
.bfp-body { flex: 1; min-width: 0; }
.bfp-body--right { text-align: end; }
.bfp-name { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px; }
.bfp-name strong { color: var(--text); }
.bfp-barwrap { height: 6px; background: var(--border-light); border-radius: 4px; overflow: hidden; margin-bottom: 2px; }
.bfp-bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
.bfp-hp { font-size: 10px; color: var(--text-muted); }
.bfight-vs { font-size: 11px; font-weight: 900; color: var(--text-muted); flex-shrink: 0; padding: 0 2px; }
.bfight-brief { font-size: 12px; padding: 4px 12px; background: rgba(255,255,255,0.03); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 0; }
.bfb-hit { color: var(--success); font-weight: 600; }
.bfb-miss { color: var(--text-muted); }
.bfb-dmg { color: var(--danger); font-weight: 600; }
.bfb-block { color: #60a5fa; }
.bfb-sep { color: var(--text-muted); }
.bfb-round { color: var(--text-muted); font-size: 10px; margin-inline-start: auto; }
.bfight-gear-row { display: flex; align-items: center; padding: 5px 12px; gap: 8px; }
.bfight-gear-name { font-size: 12px; font-weight: 700; color: var(--text); flex: 1; }
.bfight-gear-slots { display: flex; gap: 8px; font-size: 12px; font-weight: 700; }
.bfight-slot--a { color: #60a5fa; }
.bfight-slot--d { color: #34d399; }

/* ─── Сетка зон (3×2) ─── */
.bfight-zones { display: flex; flex-direction: column; gap: 5px; padding: 4px 12px; }
.bzone {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 8px 10px; box-sizing: border-box; transition: border-color 0.1s;
}
.bzone--atk { border-color: #3b82f6; background: rgba(59,130,246,0.05); }
.bzone--def { border-color: #059669; background: rgba(5,150,105,0.05); }
.bzone--both { border-color: var(--warning); background: rgba(245,158,11,0.06); }
.bzone-name { font-size: 12px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.bzone-opp { font-size: 11px; color: var(--danger); flex-shrink: 0; }
.bzone-opp--def { color: #60a5fa; }
.bzone-btns { display: flex; gap: 5px; flex-shrink: 0; }
.bzone-btn {
  display: flex; align-items: center; gap: 3px;
  padding: 6px 9px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border-light); border-radius: 7px;
  background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.1s;
  white-space: nowrap;
}
.bzone-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.bzone-btn--a.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.bzone-btn--d.on { background: #047857; border-color: #047857; color: #fff; }
.bzone-btn--a:not(.on):not(:disabled):hover { border-color: #3b82f6; color: #3b82f6; }
.bzone-btn--d:not(.on):not(:disabled):hover { border-color: #059669; color: #059669; }
.bfight-confirm { margin: 0; width: auto; flex: 1; height: 46px; padding: 0 12px; font-size: 14px; border-radius: var(--radius); }
.bfight-info-badge {
  background: var(--border-light); border: none; border-radius: var(--radius-xs);
  padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; flex-shrink: 0;
}
.bfight-info-badge:hover { background: var(--border); color: var(--text); }

/* ─── Арена персонажей ─── */
.bfight-arena { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px 4px; }
.bfight-me-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }


/* Карточка бойца (аватар или эмодзи) */
/* Контейнер PixiScene в арене — без transform/position:absolute */
.bfight-scene-box {
  width: 100%; border-radius: var(--radius-sm);
  border: 2px solid #4ade80;
  overflow: hidden; position: relative;
  transition: border-color 0.4s;
  display: flex; flex-direction: column;
  background: #0d1a14;
}
/* Переопределяем высоту PixiScene и блокируем landscape-fullscreen */
.bfight-scene-box .pxs-wrap { height: 185px !important; }
.bfight-scene-box .pxs-outer {
  position: relative !important;
  width: 100% !important; height: auto !important; z-index: auto !important;
}
.bfight-scene-box .bfighter-card-footer {
  position: absolute; bottom: 0; left: 0; right: 0;
}
.bfight-scene-box .pxs-controls { display: none !important; }

/* Карточка бота (без PixiScene) */
.bfighter-card {
  width: 100%; border-radius: var(--radius-sm);
  border: 2px solid #4ade80;
  background: linear-gradient(160deg, #1a2a1e 0%, #0d1824 60%, #080f18 100%);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: border-color 0.4s; height: 185px;
}
.bfighter-card--bot::before {
  content: '🌿🌊🌿🌊🌿';
  position: absolute; bottom: 28px; width: 100%; text-align: center;
  font-size: 14px; letter-spacing: 1px; opacity: 0.25; pointer-events: none;
}
.bfighter-avatar-emoji {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 52px; filter: drop-shadow(0 2px 10px rgba(74,222,128,0.3));
}
.bfighter-card-footer {
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, transparent 100%);
  padding: 5px 8px 5px; position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.bfighter-card-name { font-size: 12px; font-weight: 700; color: #fff; }
.bfighter-card-cls  { font-size: 10px; color: rgba(255,255,255,0.55); }

/* Бот-карточка: тематический фон + большая иконка */
.bfighter-bot-card {
  width: 100%; height: 185px; border-radius: var(--radius-sm);
  border: 2px solid #4ade80;
  background: linear-gradient(160deg, #0e1f16 0%, #071522 60%, #030c12 100%);
  overflow: hidden; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: border-color 0.4s;
}
.bfighter-bot-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; letter-spacing: 4px; opacity: 0.12;
  pointer-events: none; user-select: none;
  flex-wrap: wrap; padding: 8px;
}
.bfighter-bot-icon {
  font-size: 58px; z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(74,222,128,0.35));
}

/* Мета под канвасом/ботом */
.bfighter-meta { padding: 0 2px; }
.bfighter-name-row { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bfighter-name-row strong { color: var(--text); }
.bfighter-hpbar-wrap { height: 5px; background: var(--border-light); border-radius: 3px; overflow: hidden; margin-bottom: 2px; }
.bfighter-hpbar-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.bfighter-hp-lbl { font-size: 10px; color: var(--text-muted); }

/* Compact stats comparison row in fight mode */
.bfight-stats-row { display: flex; gap: 4px; padding: 4px 10px 2px; overflow-x: auto; justify-content: space-between; }
.bfight-stat-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 44px; flex: 1; }
.bfight-stat-key { font-size: 8px; color: var(--text-muted); text-align: center; line-height: 1.2; white-space: normal; word-break: break-word; }
.bfight-stat-my { font-size: 12px; font-weight: 700; color: var(--success); }
.bfight-stat-opp { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.bfight-stat-opp--win { color: var(--danger); }
.bfight-stat-opp--lose { color: var(--success); }

.bfight-arena-vs { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 30px 4px 0; flex-shrink: 0; min-width: 50px; }
.bfight-vs-big { font-size: 16px; font-weight: 900; color: var(--text-muted); }
.bfight-round-num { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

/* ─── Кнопки действий (рандом + подтвердить) ─── */
/* Mobile: fixed above tab bar. Desktop: normal flow (no tab bar) */
/* Единый нижний контейнер: чат-панель + кнопки */
.bfight-bottom-zone {
  position: fixed;
  bottom: calc(var(--tab-height) + env(safe-area-inset-bottom, 0px));
  left: 0; right: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.bfight-actions {
  display: flex; gap: 8px; padding: 6px 12px 8px; align-items: center;
  border-top: 1px solid var(--border-light);
}

@media (min-width: 768px) {
  .bfight-bottom-zone,
  .battle-result-actions {
    bottom: 0;
    left: max(calc((100vw - 900px) / 2 + 220px), 220px);
    right: max(calc((100vw - 900px) / 2), 0px);
    z-index: 200;
  }
  .battle-scroll-area,
  .battle-scroll-area--result {
    padding-bottom: 60px;
  }
}

@media (min-width: 1200px) {
  .bfight-bottom-zone,
  .battle-result-actions {
    left: max(calc((100vw - 1060px) / 2 + 220px), 220px);
    right: max(calc((100vw - 1060px) / 2 + 260px), 260px);
  }
}
.bfight-random-btn, .bfight-chat-btn {
  width: 46px; height: 46px; padding: 0; flex-shrink: 0;
  background: var(--card); border: 1.5px solid var(--border-light); border-radius: var(--radius);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text); position: relative; transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.bfight-random-btn:active, .bfight-chat-btn:active { transform: scale(0.9); }
.bfight-chat-btn:hover { border-color: var(--primary); color: var(--primary); }
.bfight-chat-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; border: 1.5px solid var(--bg); }

/* Чат-панель (часть bfight-bottom-zone) */
.bfight-chat-panel {
  border-top: 1px solid var(--border-light);
  background: var(--card);
}
.bfight-chat-msgs {
  overflow-y: auto;
  padding: 6px 12px 4px;
  max-height: 120px;
}
.bfight-chat-input {
  display: flex;
  border-top: 1px solid var(--border-light);
  padding: 5px 8px;
  align-items: center;
  gap: 6px;
  background: var(--bg);
}

/* ─── Экран результата ─── */
.bres-hero { text-align: center; padding: 28px 16px 16px; display: flex; flex-direction: column; align-items: center; }
.bres-icon { font-size: 72px; line-height: 1.1; margin-bottom: 10px; }
.bres-title { font-size: 42px; font-weight: 900; margin-bottom: 8px; }
.bres-win { color: var(--warning); text-shadow: 0 0 20px rgba(251,191,36,0.4); }
.bres-draw { color: var(--text-muted); }
.bres-loss { color: var(--danger); }
.bres-xp { font-size: 18px; color: var(--warning); font-weight: 700; margin-bottom: 4px; }
.bres-record { font-size: 12px; color: var(--text-muted); }
.bres-btns { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 8px; }

/* ─── Мини-лог во время боя ─── */
.bfight-minilog {
  margin: 0 12px 4px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  max-height: 130px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bfight-minilog::-webkit-scrollbar { display: none; }
.bfml-round { display: flex; align-items: flex-start; gap: 6px; padding: 2px 0; }
.bfml-rnd { color: #a78bfa; font-weight: 800; font-size: 10px; flex-shrink: 0; padding-top: 2px; min-width: 24px; }
.bfml-lines { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.bfml-hit   { font-size: 11px; color: #86efac; line-height: 1.35; }
.bfml-miss  { font-size: 11px; color: var(--text-muted); opacity: 0.75; line-height: 1.35; }
.bfml-dmg   { font-size: 11px; color: #fca5a5; line-height: 1.35; }
.bfml-guard { font-size: 11px; color: #93c5fd; line-height: 1.35; }

/* ─── Богатая хроника поединка ─── */
.bchron { margin: 4px 12px 8px; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.bchron-title { font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 8px 12px 6px; border-bottom: 1px solid var(--border-light); letter-spacing: 0.5px; text-transform: uppercase; }
.bchron-round { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.bchron-round:last-child { border-bottom: none; }

.bchron-rnd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bchron-rnd-num { font-size: 11px; font-weight: 800; color: #a78bfa; letter-spacing: 0.5px; }
.bchron-hp { font-size: 10px; display: flex; align-items: center; gap: 2px; }
.bchron-hp-me { color: var(--success); font-weight: 600; }
.bchron-hp-opp { color: var(--danger); font-weight: 600; }
.bchron-hp-sep { color: var(--text-muted); }

.bchron-row { display: flex; align-items: center; gap: 4px; padding: 2px 0; font-size: 12px; flex-wrap: wrap; }
.bchron-ico { font-size: 13px; flex-shrink: 0; width: 18px; text-align: center; }
.bchron-actor { font-weight: 700; color: var(--text); flex-shrink: 0; }
.bchron-arrow { color: var(--text-muted); flex-shrink: 0; font-size: 10px; }
.bchron-zone { color: var(--text-muted); flex: 1; min-width: 80px; }
.bchron-result { font-size: 11px; font-weight: 700; flex-shrink: 0; border-radius: 4px; padding: 1px 6px; }
.bchron-result--hit   { color: #86efac; background: rgba(74,222,128,0.12); }
.bchron-result--block { color: var(--text-muted); background: rgba(255,255,255,0.05); }
.bchron-result--dmg   { color: #fca5a5; background: rgba(248,113,113,0.12); }
.bchron-result--guard { color: #93c5fd; background: rgba(96,165,250,0.10); }

.bchron-row--myhit .bchron-narrative   { color: #86efac; }
.bchron-row--opphit .bchron-narrative  { color: #fca5a5; }
.bchron-row--mymiss .bchron-narrative  { color: var(--text-muted); opacity: 0.75; }
.bchron-row--oppmiss .bchron-narrative { color: #93c5fd; }
.bchron-row--neutral .bchron-narrative { color: var(--text-muted); font-style: italic; }
.bchron-narrative { font-size: 12px; line-height: 1.5; }

/* ─── CreatePost: drag-over highlight ─── */




/* ─── Layout picker ─── */




/* ─── AI disabled banner ─── */
.create-ai-disabled {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--radius);
  border: 1px dashed var(--border); background: var(--card);
  color: var(--text-muted); font-size: 14px;
  pointer-events: none; opacity: 0.65;
}
.create-ai-badge {
  margin-inline-start: auto; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-xs);
  background: rgba(255,255,255,0.08); color: var(--text-dim);
  letter-spacing: 0.3px;
}

/* ─── Catches section ─── */















/* ─── Preview header btn ─── */


/* ─── Preview modal ─── */

@media (min-width: 640px) {
  .create-preview-overlay { align-items: center; justify-content: center; }
}

@media (min-width: 640px) {
  .create-preview-modal { border-radius: 16px; max-width: 420px; max-height: 80vh; }
}













/* PhotoPreview inside modal */
.cp-preview-single { width: 100%; max-height: 360px; object-fit: cover; border-radius: var(--radius-sm); display: block; }
.cp-preview-mosaic { display: flex; gap: 4px; border-radius: var(--radius-sm); overflow: hidden; }
.cp-preview-mosaic-img { flex: 1; height: 200px; object-fit: cover; }
.cp-preview-grid { display: grid; gap: 4px; border-radius: var(--radius-sm); overflow: hidden; }
.cp-preview-grid--1 { grid-template-columns: 1fr; }
.cp-preview-grid--2 { grid-template-columns: 1fr 1fr; }
.cp-preview-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.cp-preview-grid img { width: 100%; height: 140px; object-fit: cover; }
.cp-preview-carousel { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.cp-preview-carousel-img { width: 100%; max-height: 360px; object-fit: cover; display: block; }
.cp-preview-carousel-dots { display: flex; justify-content: center; gap: 5px; padding: 8px 0 4px; position: absolute; bottom: 0; left: 0; right: 0; }
.cp-preview-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); cursor: pointer; border: none; padding: 0; }
.cp-preview-dot.active { background: #fff; }
.cp-prev-btn, .cp-next-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.cp-prev-btn { left: 8px; }
.cp-next-btn { right: 8px; }

/* ═══════════════════════════════════════════════
   Editable Photo Layout (CreatePost)
═══════════════════════════════════════════════ */
.ep-layout { border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.ep-photo {
  position: relative; overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s;
}
.ep-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-photo--over { outline: 2px dashed var(--primary); }
.ep-remove {
  position: absolute; top: 5px; right: 5px; z-index: 5;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.65); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ep-grip {
  position: absolute; top: 5px; left: 5px; z-index: 5;
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  background: rgba(0,0,0,0.55); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.ep-grip:active { cursor: grabbing; }
.ep-edit-frame {
  position: absolute; bottom: 5px; right: 5px; z-index: 5;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* 1 photo */
/* Одиночное фото — натуральная пропорция (4/3+cover зумил полосы и резал постеры),
   кап высоты как в ленте; при упоре в кап — contain на фоне */
.ep-layout:has(.ep-photo:only-child) .ep-photo { aspect-ratio: auto; background: var(--bg); }
.ep-layout:has(.ep-photo:only-child) .ep-photo img {
  width: 100%; height: auto; max-height: 480px; object-fit: contain;
}

/* 2-photo grid */
.ep-grid.ep-grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ep-grid.ep-grid--2 .ep-photo { aspect-ratio: 3 / 4; }

/* 3-photo grid */
.ep-grid.ep-grid--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.ep-grid.ep-grid--3 .ep-photo { aspect-ratio: 1; }

/* 4-photo grid */
.ep-grid.ep-grid--4 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ep-grid.ep-grid--4 .ep-photo { aspect-ratio: 1; }

/* Mosaic 3: 1 big left + 2 right */
.ep-mosaic.ep-mosaic--3 { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 280px; }
.ep-mosaic.ep-mosaic--3 .ep-photo:first-child { grid-row: 1 / 3; }

/* Mosaic 4: 2x2 */
.ep-mosaic.ep-mosaic--4 { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ep-mosaic.ep-mosaic--4 .ep-photo { aspect-ratio: 1; }

/* Carousel */
.ep-carousel { position: relative; }
.ep-carousel .ep-photo { aspect-ratio: 4 / 3; }
.ep-carousel-dots {
  position: absolute; bottom: 8px; left: 0; right: 0; z-index: 4;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.ep-carousel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.4); border: none; cursor: pointer;
  pointer-events: all; padding: 0;
}
.ep-carousel-dot.active { background: #fff; }
.ep-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  background: rgba(0,0,0,0.45); color: #fff; border: none;
  width: 32px; height: 32px; border-radius: 50%; font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ep-carousel-arrow--l { left: 8px; }
.ep-carousel-arrow--r { right: 8px; }

/* ─── CreatePost: photo section top row ─── */



/* Compact icon-only layout buttons */



/* ═══════════════════════════════════════════════
   Catch mini-table
═══════════════════════════════════════════════ */
.catch-mini-table {
  position: relative;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg);
}
.catch-mini-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.catch-mini-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.catch-mini-table td:first-child { color: var(--text-muted); width: 50%; }
.catch-mini-table tr:last-child td { border-bottom: none; }
.catch-mini-remove {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ─── Fish autocomplete ─── */











/* ─── Poll section ─── */
















/* ─── Bottom actions ─── */




/* ═══════════════════════════════════════════════
   Photo Editor (PhotoEditor.tsx)
═══════════════════════════════════════════════ */











/* Desktop: CSS Grid — чтобы photo-area получил явную высоту (flex-wrap не даёт её) */
@media (min-width: 768px) {
  .peditor-layout {
    display: grid;
    grid-template-areas: "header header" "photo tabs" "panel panel";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 150px;
    flex-direction: unset; flex-wrap: unset;
  }
  .peditor-header { grid-area: header; width: auto; }
  .peditor-photo-area { grid-area: photo; }
  .peditor-tabs {
    grid-area: tabs; width: auto; display: flex; flex-direction: column;
    border-inline-start: 1px solid rgba(255,255,255,0.08); border-top: none;
    overflow-y: auto;
  }
  .peditor-tab { flex-direction: row; justify-content: flex-start; height: 44px; padding: 0 12px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .peditor-panel { grid-area: panel; width: auto; max-height: 180px; border-top: 1px solid rgba(255,255,255,0.08); overflow-y: auto; }
}

/* Crop overlay */









/* Text overlay */



/* Tool tabs */







/* Tool panel */












/* Filter presets */








/* Text panel */














/* Color panel */






/* Blur panel — reuses .peditor-panel-color */

/* Soon panel */


/* ─── PhotoEditor: brush canvas ─── */

/* ─── PhotoEditor: rotate panel ─── */


/* ─── PhotoEditor: text enhancements ─── */






/* ─── PhotoEditor: brush panel ─── */

/* ─── PhotoEditor: text item selected ring ─── */


/* ─── CreatePost: header actions ─── */




/* ─── CreatePost: mobile sticky bar ─── */
.create-mobile-bar {
  display: none;
  position: sticky; top: 0; z-index: 90;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 8px 14px; justify-content: flex-end; align-items: center; gap: 8px;
}
@media (max-width: 767px) {
  .create-mobile-bar { display: flex; }
}

/* ─── CreatePost: publish button ─── */
.create-publish-btn {
  height: 34px; padding: 0 16px; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--bg);
  font-size: 14px; font-weight: 700; border: none;
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.create-publish-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ─── CreatePost: draft restore banner ─── */
/* ─── CreatePost: offline banner ─── */







/* ─── CreatePost: compact layout row + live preview ─── */


/* override old .create-layout-btn for compact row */



/* ─── CreatePost: photo order arrows ─── */



/* ─── CreatePost: большая фото-зона (пустое состояние) ─── */







/* ─── CreatePost: видео-превью ─── */




/* ─── CreatePost: фото-бар (когда есть фото) ─── */





/* ─── CreatePost: быстрые чипы рыб ─── */




/* ─── CreatePost: упрощённые поля улова (вместо -/+) ─── */







/* ─── CreatePost: legacy chips (kept for compat) ─── */
.create-media-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.create-media-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--text-dim); font-size: 13px; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* ─── CreatePost: catches hint ─── */


/* ─── CreatePost: compact 3-column counters ─── */
.create-counters-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.create-counter-col {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.create-counter-lbl {
  font-size: 11px; color: var(--text-muted); text-align: center; white-space: nowrap;
}
/* Compact stepper variant */







/* ─── CreatePost: conditions section ─── */






/* Горизонтальный скролл в одну строку — нет переносов */

@media (max-width: 600px) {
  .create-weather-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .create-weather-chips::-webkit-scrollbar { display: none; }
}



/* ─── CreatePost: collapsible extended section ─── */













/* ─── CreatePost: bottom submit button ─── */



/* ─── CreatePost: catch commit actions ─── */



/* ─── PostCard: grid layout ─── */
.post-mosaic-grid {
  display: grid; gap: 3px; overflow: hidden;
  border-radius: var(--radius-xs);
}
.post-mosaic-grid--2 { grid-template-columns: 1fr 1fr; }
.post-mosaic-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.post-mosaic-grid-item { overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.post-mosaic-grid-item img,
.post-mosaic-grid-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 4+ фото: первые 3 в ряду, остальные тоже 1fr */
.post-mosaic-grid--3:has(.post-mosaic-grid-item:nth-child(4)) {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
}

/* ─── PostCard: carousel layout ─── */
.post-mosaic-carousel { position: relative; overflow: hidden; border-radius: var(--radius-xs); }
.post-mosaic-carousel-slide { cursor: pointer; }
.post-mosaic-carousel-slide img,
.post-mosaic-carousel-slide video { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.post-mosaic-carousel-dots {
  display: flex; justify-content: center; gap: 5px;
  position: absolute; bottom: 10px; left: 0; right: 0; z-index: 2;
}
.post-carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.45); border: none; cursor: pointer; padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.post-carousel-dot.active { background: #fff; transform: scale(1.3); }
.post-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.45); color: #fff; border: none;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent;
}
.post-carousel-arrow--prev { left: 10px; }
.post-carousel-arrow--next { right: 10px; }

/* ─── Range slider — широкая тач-зона для мобилки ─── */
input[type=range] { -webkit-appearance: none; appearance: none; height: 40px; background: transparent; cursor: pointer; touch-action: none; }
input[type=range]::-webkit-slider-runnable-track { height: 5px; background: var(--border-light); border-radius: 3px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #10b981; margin-top: -12px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #10b981; border: none; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
input[type=range]::-moz-range-track { height: 5px; background: var(--border-light); border-radius: 3px; }

/* Реф-калькулятор (/about) — брендовый слайдер: мох-палец + заполненный трек (не хардкод-изумруд).
   Селектор input[type=range].ref-calc-slider специфичнее глобального input[type=range] → перебивает #10b981. */
input[type=range].ref-calc-slider { height: 24px; }
input[type=range].ref-calc-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-xs); background: linear-gradient(to right, var(--primary) var(--pct, 50%), var(--border-light) var(--pct, 50%)); }
input[type=range].ref-calc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 3px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,0.25); margin-top: -7px; }
input[type=range].ref-calc-slider::-moz-range-track { height: 6px; border-radius: var(--radius-xs); background: var(--border-light); }
input[type=range].ref-calc-slider::-moz-range-progress { height: 6px; border-radius: var(--radius-xs); background: var(--primary); }
input[type=range].ref-calc-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--primary); border: 3px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
input[type=range].ref-calc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--primary-light), 0 1px 4px rgba(0,0,0,0.25); }

/* ─── Community Widget — наследует .feed-banner ─── */
.community-widget { /* стили из .feed-banner, специфика не нужна */ }

/* ================================================================
   ЦВЕТОВЫЕ ТЕМЫ — применяются через data-theme на <html>
   Идут в конце файла чтобы перебивать все предыдущие правила.
   ================================================================ */

/* --- СВЕТЛЫЙ --- */
:root[data-theme="light"] {
  --bg:             #f4f1ec;
  --bg-warm:        #ede9e3;
  --card:           #fefcf8;
  --text:           #2c2825;
  --text-dim:       #5a5550;
  --text-muted:     #8a837a;
  --border:         #dbd5cc;
  --border-light:   #e8e3dc;
  --primary:        #5a8a56;
  --primary-dark:   #497847;
  --primary-light:  rgba(90,138,86,0.15);
  --primary-bg:     rgba(90,138,86,0.09);
  --accent:         #5a8a56;
  --accent-dark:    #497847;
  --accent-light:   rgba(90,138,86,0.15);
  --orange:         #a87438;
  --orange-light:   rgba(168,116,56,0.14);
  --danger:         #b04c4c;
  --danger-light:   rgba(176,76,76,0.14);
  --success:        #5a8a56;
  --success-light:  rgba(90,138,86,0.14);
  --warning:        #a87438;
  --bg-input:       #ffffff;
  --bg-skeleton:    #e8e3dc;
  --bg-header:      rgba(244,241,236,0.97);
  --bg-tabbar:      rgba(244,241,236,0.98);
  --bg-tabbar-float: rgba(250,248,244,0.55);
  --scrim-tab: rgba(246,243,238,0.78);
  --scrim-top: rgba(246,243,238,0.92);
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow:     0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 6px 24px rgba(0,0,0,0.13);
  --sidebar-bg:         #eae6e0;
  --sidebar-text:       #3a3530;
  --sidebar-text-hover: #1a1512;
  --sidebar-active:     #5a8a56;
  --sidebar-border:     #d5d0c8;
  --sidebar-surface:    #e4e0da;
}
:root[data-theme="light"] .skeleton-avatar,
:root[data-theme="light"] .skeleton-line { background: #dbd5cc; }
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background: #fff; color: #2c2825; border-color: #dbd5cc; }
:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus,
:root[data-theme="light"] textarea:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(90,138,86,0.18); }
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #a09890; }

/* --- НОЧЬ --- */
:root[data-theme="night"] {
  --bg:             #0c1016;
  --bg-warm:        #101620;
  --card:           #141c28;
  --text:           #ccd6e0;
  --text-dim:       #91a4bb;
  --text-muted:     #4a6a90;
  --border:         #1c2d44;
  --border-light:   #162238;
  --primary:        #3d9e8a;
  --primary-dark:   #30897a;
  --primary-light:  rgba(61,158,138,0.18);
  --primary-bg:     rgba(61,158,138,0.10);
  --accent:         #3d9e8a;
  --accent-dark:    #30897a;
  --accent-light:   rgba(61,158,138,0.18);
  --orange:         #c98a55;
  --orange-light:   rgba(201,138,85,0.15);
  --danger:         #c07272;
  --danger-light:   rgba(192,114,114,0.15);
  --success:        #3d9e8a;
  --success-light:  rgba(61,158,138,0.15);
  --warning:        #c98a55;
  --bg-input:       #0e1a2a;
  --bg-skeleton:    #141c28;
  --bg-header:      rgba(6,10,16,0.97);
  --bg-tabbar:      rgba(4,8,14,0.98);
  --bg-tabbar-float: rgba(7,12,20,0.42);
  --scrim-tab: rgba(3,7,12,0.72);
  --scrim-top: rgba(3,7,12,0.88);
  --shadow-xs:  0 1px 0 rgba(0,0,0,0.6);
  --shadow:     0 2px 16px rgba(0,0,0,0.65);
  --shadow-md:  0 4px 24px rgba(0,0,0,0.72);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.82);
  --sidebar-bg:         #0e1620;
  --sidebar-text:       #7aa0cc;
  --sidebar-text-hover: #dbe4ee;
  --sidebar-active:     #3d9e8a;
  --sidebar-border:     #1c2d44;
  --sidebar-surface:    #101820;
}
:root[data-theme="night"] .skeleton-avatar,
:root[data-theme="night"] .skeleton-line { background: #1c2d44; }
:root[data-theme="night"] input,
:root[data-theme="night"] select,
:root[data-theme="night"] textarea { background: var(--bg-input); color: var(--text); border-color: var(--border); }
:root[data-theme="night"] input:focus,
:root[data-theme="night"] select:focus,
:root[data-theme="night"] textarea:focus { background: #102030; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(61,158,138,0.22); }
:root[data-theme="night"] input::placeholder,
:root[data-theme="night"] textarea::placeholder { color: #3a5a78; }

/* ================================================================
   THEME SWITCHER UI
   ================================================================ */
.avatar-dd-theme-row {
  display: flex; gap: 5px; padding: 8px 12px;
}
.avatar-dd-theme-btn {
  flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 2px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 12px;
  transition: all 0.15s; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.avatar-dd-theme-btn.active {
  background: var(--primary-light); border-color: var(--primary); color: var(--primary);
}
.avatar-dd-theme-btn:hover:not(.active) { background: var(--bg-warm); color: var(--text-dim); }

.header-theme-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid rgba(127,161,122,0.18);
  background: var(--primary-bg); color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); -webkit-tap-highlight-color: transparent; flex-shrink: 0; padding: 0;
}
.header-theme-btn:hover { background: rgba(127,161,122,0.18); color: var(--text); }


/* ================================================================
   AI-помощник — чат
   Мобила: заполняет контент-область между фикс-шапкой и таб-баром
   (флекс, НЕ 100vh — иначе «чёрная дыра» и съезд ввода).
   Десктоп: блок фиксированной высоты ВНУТРИ обычного grid-каркаса
   (.app-main.desktop-center — grid-item; НЕ трогаем app-main, иначе
   ломается сетка и пропадают сайдбар/шапка).
   ================================================================ */
.ai-chat-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* Глобально — прячем app-header на странице чата (вне медиазапроса, работает всегда) */
.app-header--chat-hidden { display: none !important; }
/* Убираем padding-top у .app-layout когда хедер скрыт (иначе 56px пустоты над чатом) */
.app-layout:has(.app-header--chat-hidden) { padding-top: 0 !important; }

@media (max-width: 767px) {
  .app-main:has(.ai-chat-page, .chat-view) {
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* скролл — внутри ленты сообщений */
  }
  .ai-chat-page {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* На странице переписки прячем общую шапку Layout («‹ Сообщения») — остаётся ОДНА
     богатая шапка чата (свой «назад» + аватар + имя + статус). Убирает дубль «назад». */
  .app-header--chat-hidden { display: none !important; }
  /* .chat-view (переписка): жёстко пиним от верха экрана (шапка Layout скрыта) до таб-бара —
     как .clips-feed. Детерминированно, safe-area учтена → без зазора И ввод гарантированно внизу
     (flex-подход клал ввод наверх, когда .chat-view не растягивался). */
  .chat-view {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* ЯВНАЯ высота (а не top+bottom+height:auto) надёжно резолвит высоту flex-контейнера
       → лента (flex:1) растягивается, ввод гарантированно ВНИЗУ, а не наверху. */
    height: calc(100dvh - var(--tab-height) - env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
    z-index: 600;
    background: var(--bg);
  }
  /* фон шапки чата закрывает зону статус-бара/чёлки (шапка Layout скрыта) */
  .chat-view .chat-view-header { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .chat-input-bar { padding-bottom: 10px; }
}

@media (min-width: 768px) {
  /* Чат живёт в ЦЕНТРАЛЬНОЙ колонке десктоп-грида (на месте ленты), оба
     сайдбара и десктоп-шапка — на месте. Грид фиксируем строго по высоте
     экрана, чтобы страница не скроллилась (правый сайдбар бывает выше окна)
     и центр-колонка заполняла высоту, а ввод был примагничен к низу браузера.
     Сайдбары при нехватке высоты скроллят внутри себя. */
  .desktop-layout:has(.ai-chat-page, .chat-view) {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  .desktop-layout:has(.ai-chat-page, .chat-view) .desktop-left-sidebar,
  .desktop-layout:has(.ai-chat-page, .chat-view) .desktop-right-sidebar {
    /* -88px = шапка 64 + верх/низ margin по 12 → высокий сайдбар влезает в строку
       БЕЗ подтягивания вверх, отступ сверху 12px сохраняется (как у ленты/чата) */
    max-height: calc(100vh - 88px);
    overflow-y: auto;
  }
  .app-main.desktop-center:has(.ai-chat-page, .chat-view) {
    height: calc(100vh - 64px);
    overflow: hidden;
    padding: 0;
  }
  /* Высоту задаём ЯВНО на самом чате (vh), а не через flex:1 от родителя —
     тогда лента сообщений гарантированно растёт и ввод прижат к низу,
     даже если флекс-цепочка grid-item → ребёнок где-то рвётся. */
  .ai-chat-page {
    height: calc(100vh - 64px);
    min-height: 0;
    max-width: none;   /* занять всю ширину центральной колонки */
  }
}
.ai-chat-context {
  padding: 6px 16px 4px;
  font-size: 12px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.ai-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px 4px;
  -webkit-overflow-scrolling: touch;
}
.ai-msg { display: flex; margin-bottom: 12px; }
.ai-msg--user { justify-content: flex-end; }
.ai-msg--assistant { justify-content: flex-start; }
.ai-msg-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-inline-end: 8px;
}
.ai-bubble {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.ai-bubble--user {
  background: var(--primary); color: var(--btn-text);
  border-radius: 16px 16px 4px 16px;
}
.ai-bubble--assistant {
  background: var(--card); color: var(--text);
  border-radius: 16px 16px 16px 4px;
}
.ai-bubble strong { font-weight: 700; }
.ai-chat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 14px 8px;
  flex-shrink: 0;
}
.ai-chip {
  font-size: 12.5px; padding: 7px 12px;
  border-radius: 16px;
  background: var(--card); color: var(--text-dim);
  border: 1px solid var(--border);
  cursor: pointer; line-height: 1.2;
  transition: background .15s, color .15s;
}
.ai-chip:hover { background: var(--bg-warm); color: var(--text); }
.ai-chat-input {
  display: flex; gap: 8px; align-items: flex-end;
  padding: 8px 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-chat-input textarea {
  flex: 1; resize: none;
  min-height: 44px;          /* перебиваем глобальный textarea{min-height:80px} */
  max-height: 120px;
  border-radius: var(--radius);
  padding: 10px 14px; font-size: 14px;
  background: var(--card); border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit; line-height: 1.4;
}
.ai-send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-send-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Groups v2 ───────────────────────────────────────────────────────────── */
/* Гео-иконки — ЕДИНАЯ прямоугольная плашка 3:2 (как флаг) везде. Флаг/герб всегда
   ВИДЕН ЦЕЛИКОМ и не обрезается (object-fit: contain). Флаги на тёмной плашке,
   гербы города (--coa) — по центру на белом фоне. */
/* Иконка гео-группы — КРУГ (как флаги стран в мессенджерах): флаг вписан
   «по обрезке», герб — целиком на белом. Раньше была плашка 3:2, но у групп
   единый круглый вид оказался важнее полного поля флага. */
.geo-ico {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 1px solid var(--border-light); background: var(--bg-warm);
}
.geo-ico--sm { width: 34px; height: 34px; }
.geo-ico--coa { background: #fff; object-fit: contain; padding: 3px; }
.geo-ico--ph { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-muted); }
.geo-ico--sm.geo-ico--ph { font-size: 14px; }
/* legacy-алиасы (на случай старых ссылок) */
.geo-flag, .geo-coa { width: 54px; height: 36px; border-radius: var(--radius-xs); object-fit: contain; flex-shrink: 0; border: 1px solid var(--border-light); }
.geo-coa { background: #fff; padding: 3px; }

.group-card {
  display: flex; gap: 12px; align-items: center; padding: 12px;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); margin-bottom: 8px; text-decoration: none; color: inherit;
}
.group-card:active { background: var(--bg-warm); }
.group-card__title { font-weight: 700; font-size: 15px; color: var(--text); }
.group-card__meta { font-size: 12px; color: var(--text-muted); display: flex; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.group-avatar { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }

.group-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); padding: 8px 16px; }
.group-crumbs a { color: var(--primary); text-decoration: none; }

.group-role-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: var(--primary-bg, rgba(127,161,122,0.15)); color: var(--primary);
}
/* Бейдж непрочитанных постов на карточке группы (сколько новых в этой группе) */
.group-unread-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; background: var(--primary); color: var(--btn-text);
  font-size: 11.5px; font-weight: 800; line-height: 1;
}

/* Пункт меню «⋮» действий группы (bottom-sheet) */
.group-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; box-sizing: border-box;
  padding: 13px 14px; border: none; border-radius: var(--radius);
  background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 500;
  text-align: start; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.group-menu-item:active { background: var(--bg-warm); }
.group-menu-item > svg { color: var(--text-muted); flex-shrink: 0; }
.group-menu-item--danger { color: var(--danger); }
.group-menu-item--danger > svg { color: var(--danger); }

/* Ответ MAX-стиля: цитата оригинала (в посте) и плашка над композером */
.group-reply-quote {
  display: flex; flex-direction: column; gap: 1px;
  border-inline-start: 3px solid var(--primary);
  background: var(--primary-bg, rgba(127,161,122,0.10));
  border-radius: 0 8px 8px 0;
  padding: 4px 10px; margin: 0 0 7px; max-width: 100%; overflow: hidden;
}
.group-reply-quote .grq-name,
.group-reply-bar .grq-name {
  font-size: 12.5px; font-weight: 700; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* В ПУЗЫРЕ цитата ПЕРЕНОСИТСЯ и клампится в 2 строки. Было nowrap — длинная цитата
   раздувала min-content пузыря (замер: 972px на экране 390), а у своих сообщений
   `.gmsg--own .gmsg-col{align-items:flex-end}` не даёт max-width колонки обрезать
   ребёнка → пузырь уезжал за левый край и текст ответа было не видно. */
.group-reply-quote .grq-text {
  font-size: 12.5px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; overflow-wrap: anywhere;
}
/* В КОМПОЗЕРЕ (плашка «отвечаю на…») — наоборот, строго одна строка с многоточием */
.group-reply-bar .grq-text {
  font-size: 12.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.group-reply-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 8px;
}
.group-reply-bar .grq-bar-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  border-inline-start: 3px solid var(--primary); padding-inline-start: 8px; line-height: 1.2;
}

/* Голосовые сообщения (MAX-стиль): компактный плеер + индикатор записи */
.voice-player {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: 22px; padding: 6px 12px 6px 6px; max-width: 100%; margin-top: 4px;
}
.voice-play-btn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: none;
  background: var(--primary); color: var(--btn-text);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.voice-wave { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; min-width: 90px; overflow: hidden; }
.voice-wbar { width: 3px; border-radius: 2px; background: var(--border); flex-shrink: 0; transition: background .1s; }
.voice-wbar.on { background: var(--primary); }
.voice-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.voice-rec {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  font-size: 14px; color: var(--text); padding: 0 6px;
}
.voice-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex-shrink: 0;
  animation: voice-blink 1s ease-in-out infinite;
}
@keyframes voice-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.voice-rec-time { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-muted); }
/* живая волна при записи — реагирует на голос */
.voice-live-wave {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end;
  gap: 2px; height: 26px; overflow: hidden;
}
.voice-live-bar { width: 3px; border-radius: 2px; background: var(--primary); flex-shrink: 0; }
.voice-live-hint { font-size: 12px; color: var(--text-muted); margin: auto; }

/* Обрезка (trim) голосового перед отправкой */
.voice-trim { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
.voice-trim-wave { position: relative; height: 42px; touch-action: none; user-select: none; border-radius: 8px; overflow: hidden; }
.vt-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; padding: 0 10px; }
.vt-bar { flex: 1; min-width: 2px; border-radius: 2px; background: var(--border); }
.vt-bar.on { background: var(--primary); }
.vt-dim { position: absolute; top: 0; bottom: 0; background: var(--bg); opacity: 0.55; z-index: 2; pointer-events: none; }
.vt-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 4; pointer-events: none; }
/* маркер точки старта воспроизведения (клик по волне) */
.vt-cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); z-index: 3; pointer-events: none; }
.vt-cursor::before { content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
/* кнопка зума в панели триммера */
.vt-zoom-btn { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text-dim); cursor: pointer; }
.vt-zoom-btn.active { background: var(--primary-light, rgba(127,161,122,0.18)); color: var(--text); border-color: var(--primary); }
.vt-zoom-hint { font-size: 11px; color: var(--text-muted); padding: 2px 2px 0; }
.voice-trim-wave { cursor: text; }
.vt-handle { position: absolute; top: 0; bottom: 0; width: 16px; margin-inline-start: -8px; z-index: 5; cursor: ew-resize; touch-action: none; display: flex; align-items: center; justify-content: center; }
.vt-handle::before { content: ''; width: 4px; height: 62%; border-radius: 3px; background: var(--primary); box-shadow: 0 0 0 2px var(--bg); }
.voice-play-btn--sm { width: 30px; height: 30px; }
.voice-trim-ctl { display: flex; align-items: center; gap: 10px; }

/* Треды */
.group-thread-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--border-light);
  text-decoration: none; color: inherit;
}
.group-thread-item:active { background: var(--bg-warm); }
.group-thread-title { font-weight: 600; font-size: 14.5px; color: var(--text); }
.group-thread-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; display: flex; gap: 10px; flex-wrap: wrap; }
.thread-pin { color: var(--primary); font-weight: 700; }

/* Реплики треда */
.thread-msg { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.thread-msg--reply { margin-inline-start: 34px; }
.thread-msg__body { flex: 1; min-width: 0; }
.thread-msg__name { font-weight: 700; font-size: 13.5px; color: var(--text); }
.thread-msg__text { font-size: 14px; line-height: 1.5; margin: 3px 0 0; white-space: pre-wrap; word-break: break-word; }

/* Кабинет управляющего */
.group-manage-section {
  padding: 16px; background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius); margin-bottom: 10px;
}
.gm-field { margin-bottom: 12px; }
.gm-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 5px; }
.gm-input, .gm-textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 14px; font-family: inherit; outline: none;
}
.gm-textarea { resize: vertical; min-height: 70px; }
.gm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; }
.gm-toggle-row span { font-size: 13.5px; color: var(--text); }
.gm-revenue-balance { font-size: 26px; font-weight: 800; color: var(--primary); }
.gm-deal-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.gm-deal-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.gm-deal-status--paid { background: rgba(34,197,94,0.15); color: var(--success); }
.gm-deal-status--pending { background: rgba(234,179,8,0.15); color: #eab308; }
.gm-deal-status--cancelled { background: rgba(148,148,148,0.15); color: var(--text-muted); }

/* События — CTA на турниры с призами */
.events-tourn-cta {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  margin: 8px 16px 0; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--primary); border-radius: var(--radius);
  background: var(--primary-bg, rgba(127,161,122,0.12)); color: var(--text);
  font-size: 14px; text-align: start; font-family: inherit;
}
.events-tourn-cta svg { color: var(--primary); flex-shrink: 0; }
.events-tourn-cta:active { background: var(--primary-light); }

/* FAB написать */
.group-fab {
  position: fixed; right: 18px; bottom: calc(var(--bottom-nav-height, 64px) + 16px);
  width: 52px; height: 52px; border-radius: 50%; background: var(--primary);
  color: #fff; border: none; cursor: pointer; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* ── MyShop — кабинет продавца ─────────────────────── */





/* Create shop */





/* Products grid */



















/* Product form */










/* Settings tab */










/* Import tab */














/* AdDetail page — Avito-style */
.addet-gallery {
  position: relative; background: #111; width: 100%;
  aspect-ratio: 3/2; overflow: hidden; cursor: pointer; user-select: none;
  border-radius: var(--radius); margin-bottom: 8px;
}
.addet-main-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.addet-no-photo {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex-direction: column; gap: 8px; color: var(--text-muted);
}
.addet-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
}
.addet-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background .15s; }
.addet-dot.active { background: #fff; }
.addet-photo-count {
  position: absolute; top: 8px; right: 10px; background: rgba(0,0,0,.55);
  color: #fff; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
}
/* §1: full-bleed секции БЕЗ своих боковых отступов — 12px даёт колонка
   .app-main, левый край блока встаёт на линию хедера. Внутренний воздух —
   у карточки (--card), а не у базы (иначе full-bleed «утопает» на 16px). */
.addet-section {
  padding: 10px 0;
}
/* Инфо-блоки карточки товара — обособленные surface-карточки (стандарт §6),
   а не «слэбы» край-в-край. Борт на 12px колонки, внутренний паддинг — свой. */
.addet-section--card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0 0 8px;
  padding: 10px 16px;
}

/* ── ИНФО-ПАНЕЛИ (surface) — СТАНДАРТ составных блоков ──────────────────
   Для страниц из нескольких смысловых блоков (чекаут, детали заказа, статусы):
   НЕ «слэбы» от края до края с hairline-разделителями, а обособленные карточки
   со скруглением и рамкой, разложенные вертикально с зазором. Контейнер задаёт
   §1: НИКАКИХ своих боковых отступов — 12px даёт колонка .app-main, борт
   карточки встаёт на линию хедера. Контейнер задаёт лишь вертикальный ритм. */
.surface-stack { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 0; }
.surface-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.surface-card--accent { border-color: var(--primary); background: var(--primary-bg); }
.surface-card--tap { cursor: pointer; transition: border-color .15s, background .15s; }
.surface-card--tap:hover { border-color: var(--primary); }
.surface-card--tap:active { background: var(--bg-warm); }
.addet-section-title {
  font-size: 12px; font-weight: 700; color: var(--text-dim);
  margin-bottom: 6px;
}
.addet-delivery-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border-light); gap: 8px;
}
.addet-delivery-row:last-child { border-bottom: none; padding-bottom: 0; }
.addet-delivery-name { font-size: 14px; color: var(--text); font-weight: 500; }
.addet-delivery-meta { font-size: 13px; color: var(--text-muted); }
.addet-delivery-calc { font-size: 13px; color: var(--primary); font-weight: 600; text-decoration: none; }
.addet-delivery-cost { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.addet-delivery-free { font-size: 13px; color: var(--primary); font-weight: 600; }
.addet-chars { display: table; width: 100%; border-collapse: collapse; }
.addet-char-row { display: table-row; }
.addet-char-row span { display: table-cell; padding: 4px 0; font-size: 13px; vertical-align: top; }
.addet-char-row span:first-child { color: var(--text-muted); width: 120px; padding-inline-end: 12px; }
.addet-char-row span:last-child { color: var(--text); font-weight: 500; }
.addet-char-row:not(:last-child) td, .addet-char-row:not(:last-child) span { border-bottom: 1px solid var(--border-light); }
/* Категория — кликабельный бейдж */
.addet-cat-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 99px;
  background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(127,161,122,.25); transition: opacity .15s;
}
.addet-cat-badge:active { opacity: .7; }
.addet-type-text { font-size: 12px; color: var(--text-muted); }
/* Sticky action bar — прилипает внизу scroll-контейнера (.app-main), не fixed */
.addet-view-page { padding-bottom: 0 !important; }
.addet-action-bar {
  position: fixed; bottom: var(--tab-height); left: 0; right: 0; z-index: 90;
  display: flex; gap: 10px; align-items: center; flex-shrink: 0;
  padding: 10px 16px 12px; background: var(--card);
  border-top: 1px solid var(--border); box-shadow: 0 -2px 16px rgba(0,0,0,.18);
}
.addet-action-write {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1;
  background: var(--primary); color: #fff; border-radius: var(--btn-radius);
  padding: 13px 20px; font-size: 15px; font-weight: 700; cursor: pointer;
  border: none; transition: opacity .15s;
}
.addet-action-write:active { opacity: .82; }
.addet-action-call {
  display: flex; align-items: center; justify-content: center; flex: 1;
  padding: 13px 20px; border-radius: var(--btn-radius);
  background: #e8e2d4; border: none;
  color: #1a1a1a; font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: opacity .15s;
}
.addet-action-call:active { opacity: .75; }
/* ── Спросить у продавца: поле ввода ─────────────────────── */
.addet-ask-row { display: flex; gap: 8px; align-items: center; }
.addet-ask-input { flex: 1; margin-bottom: 0 !important; }
.addet-ask-send {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--primary); border: none; border-radius: var(--radius);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .15s;
}
.addet-ask-send:disabled { opacity: .35; cursor: default; }
.addet-ask-send:not(:disabled):active { opacity: .8; }
/* ── Кнопка "В корзину" ──────────────────────────────────── */
.addet-cart-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: var(--btn-radius); border: 1.5px solid var(--primary);
  background: none; color: var(--primary); font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s;
}
.addet-cart-btn:active { background: var(--primary); color: white; }
.addet-cart-btn--in { background: var(--primary); color: white; }
/* ── Товары продавца ─────────────────────────────────────── */
.addet-seller-ads { overflow-x: auto; scrollbar-width: none; display: flex; gap: 10px; padding-bottom: 4px; }
.addet-seller-ads::-webkit-scrollbar { display: none; }
.addet-seller-ad-card {
  flex-shrink: 0; width: 120px; text-decoration: none; display: flex; flex-direction: column; gap: 4px;
}
.addet-seller-ad-photo {
  width: 120px; height: 100px; border-radius: var(--radius);
  background: var(--bg-warm); border: 1px solid var(--border-light);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.addet-seller-ad-photo img { width: 100%; height: 100%; object-fit: cover; }
.addet-seller-ad-price { font-size: 13px; font-weight: 700; color: var(--primary); line-height: 1.2; }
.addet-seller-ad-name { font-size: 12px; color: var(--text-muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ── Похожие объявления ───────────────────────────────────── */
.addet-recs-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.addet-recs-scroll::-webkit-scrollbar { display: none; }
.addet-rec-card {
  flex-shrink: 0; width: 120px; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
}
.addet-rec-photo {
  width: 120px; height: 100px; border-radius: var(--radius);
  background: var(--bg-warm); border: 1px solid var(--border-light);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.addet-rec-photo img { width: 100%; height: 100%; object-fit: cover; }
.addet-rec-price { font-size: 13px; font-weight: 700; color: var(--primary); line-height: 1.2; }
.addet-rec-name {
  font-size: 12px; color: var(--text-muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ── Footer: жалоба + метаданные ─────────────────────────── */
.addet-footer { padding: 12px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.addet-report-btn {
  background: none; border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 10px; font-size: 13px; color: var(--text-muted); font-family: inherit;
  cursor: pointer; transition: border-color .15s, color .15s; display: flex; align-items: center; justify-content: center;
}
.addet-report-btn:hover { border-color: var(--danger); color: var(--danger); }
.addet-footer-meta { font-size: 12px; color: var(--text-muted); text-align: center; }
/* Legacy thumbnail classes kept for backward compat */
.addet-thumbs { display: none; }
.addet-thumb { display: none; }

/* MarketAdsInlineBanner */
.mkt-feed-banner { background: var(--card); border-radius: var(--radius); margin: 4px 0; overflow: hidden; border: 1px solid var(--border-light); }
.mkt-feed-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; }
.mkt-feed-title { font-size: 14px; font-weight: 700; }
.mkt-feed-all { font-size: 12px; color: var(--primary); text-decoration: none; }
.mkt-feed-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 0 14px 12px; scrollbar-width: none; }
.mkt-feed-scroll::-webkit-scrollbar { display: none; }
.mkt-feed-card { display: flex; flex-direction: column; min-width: 120px; max-width: 140px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-light); background: var(--bg-warm); text-decoration: none; color: inherit; flex-shrink: 0; }
.mkt-feed-card-img { width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--border-light); display: flex; align-items: center; justify-content: center; }
.mkt-feed-card-img img { width: 100%; height: 100%; object-fit: cover; }
.mkt-feed-card-placeholder { font-size: 28px; }
.mkt-feed-card-body { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.mkt-feed-card-title { font-size: 11px; color: var(--text); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mkt-feed-card-price { font-size: 13px; font-weight: 700; color: var(--primary); }
.mkt-feed-card-city { font-size: 10px; color: var(--text-muted); }

/* Post marketplace ad link */
.post-ad-link {
  display: flex; align-items: center;
  margin: 4px 14px 8px;
  padding: 9px 14px;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: var(--btn-radius);
  font-size: 13px; font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: background 0.15s;
}
.post-ad-link:hover { background: var(--border-light); }

/* ================================================================
   РЕАКЦИИ ВК-СТИЛЯ (пикер + объёмный лайк) — Ф.пост
   ================================================================ */
/* Эмодзи выбранной реакции в кнопке лайка — одна, размером с иконки ряда.
   Селектор .action-btn .reaction-face перебивает .action-btn span{font-size:12.5px} */
.action-btn .reaction-face {
  width: 21px; height: 21px; font-size: 19px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
/* Эффект в МОМЕНТ лайка: упругий пых + расходящееся кольцо */
.reaction-pop { animation: reaction-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes reaction-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.reaction-pop::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--danger); opacity: 0; pointer-events: none;
  animation: reaction-ring 0.55s ease-out;
}
@keyframes reaction-ring {
  0%   { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}
.action-btn.liked .like-count-anim { color: var(--danger); }

.reaction-picker {
  position: fixed; z-index: 1000;
  display: flex; flex-direction: column; align-items: stretch; padding: 6px 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow-lg);
  animation: reaction-picker-in 0.18s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.reaction-picker-row { display: flex; align-items: center; gap: 2px; }
/* Строка «N реакций» под рядом эмодзи (ВК-стиль) — клик открывает список */
.reaction-picker-who {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-top: 1px solid var(--border-light); background: none;
  padding: 7px 6px 3px; margin-top: 4px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
}
.reaction-picker-who:hover { color: var(--text); text-decoration: underline; }
.reaction-picker-avas { display: inline-flex; }
.reaction-picker-avas img, .rp-ava-ph {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--card); margin-inline-start: -7px; box-sizing: content-box;
  background: var(--bg-warm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--text-dim);
}
.reaction-picker-avas img:first-child, .reaction-picker-avas .rp-ava-ph:first-child { margin-inline-start: 0; }
@keyframes reaction-picker-in {
  from { opacity: 0; transform: translateY(10px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reaction-picker-item {
  width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.reaction-picker-item .rp-emoji {
  font-size: 30px; line-height: 1; display: block;
  transition: transform 0.13s ease;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.reaction-picker-item:hover .rp-emoji { transform: scale(1.35) translateY(-4px); }
.reaction-picker-item:active .rp-emoji { transform: scale(1.15); }
.reaction-picker-item.active { background: var(--primary-light, rgba(127,161,122,0.18)); }

/* Репост в личное сообщение (ВК-стиль) */
.repost-sheet-dm-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-top: 8px; padding: 11px 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.repost-dm-chevron { margin-inline-start: auto; color: var(--text-muted); font-size: 12px; }
.repost-dm-panel { margin-top: 6px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; }
.repost-dm-search {
  width: 100%; border: none; border-bottom: 1px solid var(--border-light);
  background: var(--card); color: var(--text); padding: 9px 12px; font-size: 13px; outline: none;
}
.repost-dm-list { max-height: 208px; overflow-y: auto; }
.repost-dm-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; background: none; border: none; cursor: pointer;
  color: var(--text); font-family: inherit; text-align: start;
}
.repost-dm-item:hover { background: var(--border-light); }
.repost-dm-item:disabled { cursor: default; opacity: 0.85; }
.repost-dm-ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.repost-dm-ava--ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--border); color: var(--text-dim); font-weight: 700; font-size: 14px;
}
.repost-dm-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repost-dm-send { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--primary); }
.repost-dm-send.sent { color: var(--success, var(--primary)); }
.repost-dm-empty { padding: 14px 12px; font-size: 13px; color: var(--text-muted); text-align: center; }


/* ── «Кто поставил реакции» — кликабельная цифра + модалка (ВК-стиль) ── */
.reactions-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fadeIn 0.15s;
}
.reactions-modal {
  background: var(--card); border: 1px solid var(--border-light); border-radius: 18px;
  width: 100%; max-width: 380px; max-height: 76vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.reactions-modal-head { display: flex; align-items: center; padding: 14px 16px 10px; font-size: 15px; }
.reactions-modal-head b { flex: 1; }
.reactions-tabs {
  display: flex; gap: 6px; padding: 0 12px 10px;
  border-bottom: 1px solid var(--border-light); overflow-x: auto; scrollbar-width: none;
}
.reactions-tabs button {
  border: none; background: var(--bg); color: var(--text-dim); border-radius: 16px;
  padding: 6px 12px; font-size: 13px; font-weight: 700; cursor: pointer;
  white-space: nowrap; font-family: inherit; flex-shrink: 0;
}
.reactions-tabs button.active { background: var(--primary-light, rgba(127,161,122,0.2)); color: var(--text); }
.reactions-list { overflow-y: auto; padding: 8px 10px 12px; min-height: 120px; }
.reactions-row {
  display: flex; align-items: center; gap: 12px; padding: 7px 6px;
  text-decoration: none; color: var(--text); border-radius: var(--radius-sm);
}
.reactions-row:hover { background: var(--border-light); }
.reactions-ava-wrap { position: relative; flex-shrink: 0; }
.reactions-ava {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-warm); font-weight: 700; color: var(--text-dim);
}
.reactions-badge {
  position: absolute; right: -4px; bottom: -4px; font-size: 15px; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
.reactions-name { font-weight: 600; font-size: 14px; }


/* ── Настройки: аватар слева (во всю высоту 3 полей) + Имя/Фамилия/Логин ── */
/* Высота стопки: 3 поля × 48 + 2 gap × 7 = 158px — аватар той же величины */
:root { --settings-id-field-h: 48px; --settings-id-gap: 7px; --settings-id-h: calc(var(--settings-id-field-h) * 3 + var(--settings-id-gap) * 2); }
.settings-id-row { display: flex; gap: 12px; align-items: center; }
.settings-id-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--settings-id-gap); }
/* Поле с «плавающей» подписью сверху (понятно, что за поле — как в Telegram) */
.fld-float { position: relative; }
.fld-float > label {
  position: absolute; top: 5px; left: 12px; z-index: 1; pointer-events: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text-muted); text-transform: none;
}
.settings-id-fields input {
  width: 100%; height: var(--settings-id-field-h);
  padding: 17px 12px 5px; font-size: 14px; border-radius: var(--radius-xs);
}
/* Имя пользователя: «@» и ввод в одной строке — единый уровень (flex, не absolute) */
.fld-prefix {
  display: flex; align-items: center;
  height: var(--settings-id-field-h);
  padding: 17px 12px 5px; border-radius: var(--radius-xs);
  border: 1.5px solid var(--border); background: var(--bg-warm);
  transition: all var(--transition);
}
.fld-prefix:focus-within { background: var(--card); }
.fld-prefix .fld-at { flex-shrink: 0; font-size: 14px; line-height: 1; color: var(--text-muted); }
.settings-id-fields .fld-prefix input.fld-username {
  flex: 1; min-width: 0; height: auto; padding: 0;
  border: none; background: none; border-radius: 0; font-size: 14px;
}
/* Подсказка о допустимых символах имени пользователя (как в Telegram) */
.settings-username-hint {
  font-size: 11.5px; color: var(--text-muted); line-height: 1.35;
  margin: 6px 2px 0; transition: color 0.15s;
}
.settings-username-hint.err { color: var(--danger); }
/* Аватар — квадрат по высоте колонки полей */
.settings-id-avatar {
  flex-shrink: 0; width: var(--settings-id-h); height: var(--settings-id-h);
  position: relative; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 50%;
}
.settings-id-avatar-img,
.settings-id-avatar-ph {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
}
.settings-id-avatar-ph {
  background: var(--bg-warm); display: flex; align-items: center; justify-content: center;
}
.settings-id-avatar-cam {
  position: absolute; right: 2px; bottom: 2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}

/* ── Рамка аватара по достижению (badge_frame) — общий класс, на токенах ──
   КРУГЛОЕ кольцо через ::after (inset:0 + border-radius:50%): всегда круглое,
   даже если обёртка аватара квадратная (.avatar-online-wrap — inline-flex без
   radius, круг даёт только <img>). Кольцо ВНУТРЬ габарита → не обрезается краем
   контейнера (§1), цвет из токенов (§3). Заменяет инлайн box-shadow #fbbf24. */
.av-frame--gold, .av-frame--silver, .av-frame--rainbow { position: relative; }
.av-frame--gold::after, .av-frame--silver::after, .av-frame--rainbow::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
}
.av-frame--gold::after { box-shadow: inset 0 0 0 3px var(--warning); }
.av-frame--silver::after { box-shadow: inset 0 0 0 3px var(--text-muted); }
.av-frame--rainbow::after {
  padding: 3px;
  background: linear-gradient(135deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* «О себе»: 1 строка, авто-рост до 5, дальше скролл (перебиваем глобальный min-height textarea) */
.bio-autogrow {
  min-height: 0 !important; height: auto;
  max-height: 132px; overflow-y: auto; resize: none;
  line-height: 1.45;
}

/* ── Действия страницы в хедере (Сохранить/Выйти в настройках) ── */
.hdr-save-btn {
  height: var(--back-size); padding: 0 16px; border-radius: var(--back-radius);
  background: var(--primary); color: var(--bg); border: none;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  white-space: nowrap;
}
.hdr-save-btn:disabled { opacity: 0.45; cursor: default; }
.hdr-icon-btn {
  width: var(--back-size); height: var(--back-size); border-radius: var(--back-radius); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border-light); color: var(--text-dim);
  cursor: pointer;
}
.hdr-icon-btn--danger { color: var(--danger); }
.hdr-icon-btn--danger:hover { border-color: var(--danger); background: var(--danger-light); }
.header-actions-fixed { display: none; }
@media (max-width: 767px) {
  .header-actions-fixed {
    display: flex; gap: 6px; align-items: center;
    position: fixed;
    top: calc(var(--safe-top) + 5px);
    right: 12px;
    z-index: 600;
  }
  .header-actions-fixed .hdr-save-btn { box-shadow: 0 2px 10px rgba(0,0,0,0.25); }
}
.unsaved-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px;
}
.unsaved-modal {
  background: var(--card); color: var(--text); border: 1px solid var(--border-light);
  border-radius: 16px; padding: 20px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 8px;
}
.unsaved-title { font-size: 16px; font-weight: 700; }
.unsaved-sub { font-size: 13.5px; color: var(--text-dim); margin-bottom: 6px; }
.unsaved-discard {
  min-height: var(--btn-h-md); border-radius: var(--btn-radius);
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.unsaved-discard:hover { border-color: var(--danger); color: var(--danger); }
.unsaved-cancel {
  min-height: 36px; background: none; border: none; color: var(--text-muted);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
}

/* ── Обложка видео в композере ── */








/* Заблокированный опрос при редактировании (есть голоса) */


/* Ошибка голосования в опросе */
.poll-error { font-size: 12px; color: var(--danger); padding: 2px 0 6px; }


/* «Кадр в ленте» в композере: два превью (телефон/ПК) + фирменный бегунок */











/* бегунок в стиле KLEVAT (перебивает глобальный input[type=range] с гигантским изумрудным пальцем) */








/* Подозрение на граммы в поле кг */



/* Переключатель единиц веса (кг/г) в блоке УЛОВ */






/* ═══ Выбор аватара: своё фото / селфи / база эмодзи-рыб ═══ */

@media (min-width: 600px) { .av-picker-overlay { align-items: center; } }

@media (min-width: 600px) { .av-picker { border-radius: 18px; } }










@media (max-width: 380px) { .av-picker-grid { grid-template-columns: repeat(3, 1fr); } }







/* ─── Flow «Оживить аватар»: выбор фото → обработка → результат ─── */







/* Кроп исходника: круглая рамка + canvas на всю область */












/* Авто / свой сценарий */









/* Детальный попап «Мои»: исходник + анимация + промпты + копирование */

















/* ─── Микроанимации «активных» эмодзи (аватарки) — разнообразные движения ─── */







        /* «рыба дёргается» */
 /* виляет */


         /* качается кругами */
@keyframes avFloat   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes avWiggle  { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes avBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes avBubble  { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4%) scale(1.04); } }
@keyframes avSwim    { 0%,100% { transform: translateX(-12%) rotate(-3deg); } 50% { transform: translateX(12%) rotate(3deg); } }
@keyframes avJump    { 0%,55%,100% { transform: translateY(0) scaleY(1); } 20% { transform: translateY(-16%) scaleY(1.04); } 45% { transform: translateY(0) scaleY(0.94); } }
@keyframes avJitter  { 0%,100% { transform: translate(0,0) rotate(0); } 20% { transform: translate(-3%,1%) rotate(-3deg); } 40% { transform: translate(3%,-1%) rotate(3deg); } 60% { transform: translate(-2%,2%) rotate(-2deg); } 80% { transform: translate(2%,-2%) rotate(2deg); } }
@keyframes avTailwag { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes avPop     { 0%,70%,100% { transform: scale(1); } 35% { transform: scale(1.13); } }
@keyframes avNod     { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(4%) rotate(0); } 25% { transform: translateY(-2%) rotate(-3deg); } 75% { transform: translateY(-2%) rotate(3deg); } }
@keyframes avWobble  { 0%,100% { transform: rotate(-5deg) translateY(0); } 25% { transform: rotate(0) translateY(-3%); } 50% { transform: rotate(5deg) translateY(0); } 75% { transform: rotate(0) translateY(3%); } }
@media (prefers-reduced-motion: reduce) { .av-anim { animation: none !important; } }

/* ─── Видео-аватарки (LTX2 лупы): наследуют размер/форму от img-классов ─── */
video.avatar-lg, video.avatar-sm, video.comment-avatar, video.comment-avatar-xs, video.comment-as-ava,
.av-picker-item video, .clip-comment-pic video, .clip-author-pic video {
  object-fit: cover; display: block; background: var(--bg-warm);
}



/* В режиме редактирования кнопка «Сохранить изменения» всегда на экране —
   иначе после фоторедактора её не находят и правки «не сохраняются» */

@media (min-width: 768px) {
  .create-bottom-actions--sticky { bottom: 8px; }
}


/* «Полная запись рыбалки» — блок дневника под постом */
.post-diary-block { margin: 8px var(--card-padding) 0; }
.post-diary-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--text-dim);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.post-diary-toggle:hover { color: var(--text); }
.post-diary-chevron { color: var(--text-muted); font-size: 11px; }
.post-diary-details {
  margin-top: 6px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  font-size: 13px;
}
.post-diary-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.post-diary-row span { color: var(--text-muted); flex-shrink: 0; }
.post-diary-row b { font-weight: 600; text-align: end; }
.post-diary-catches { border-top: 1px solid var(--border-light); margin-top: 6px; padding-top: 6px; }
.post-diary-notes { border-top: 1px solid var(--border-light); margin-top: 6px; padding-top: 8px; color: var(--text-dim); white-space: pre-wrap; }


/* Бейдж верификации улова: читаемый на фото (не сливается), кликабельный */
.post-verify-badge { cursor: pointer; color: var(--primary); background: var(--primary-bg); border-color: var(--primary-light); }
.post-gallery-meta .post-verify-badge { color: #86dcb0; }
.post-gallery-meta .post-verify-badge svg { color: #86dcb0; }
.post-verify-badge:hover { opacity: 0.85; }
.post-gallery-meta::-webkit-scrollbar { display: none; }

/* Попап «Подтверждение улова» */
.verify-modal { max-width: 420px; }
.verify-modal-body { padding: 4px 16px 16px; font-size: 13.5px; line-height: 1.5; }
.verify-modal-body > p { margin: 8px 0; color: var(--text-dim); }
.verify-level {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; margin: 8px 0;
  background: var(--bg); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  color: var(--text-dim);
}
.verify-level.current { border-color: var(--primary); }
.verify-level-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 700; color: var(--primary); font-size: 13px;
}
.verify-modal-hint { font-size: 12.5px; color: var(--text-muted); }


/* Подсказка «как подтвердить улов» в композере */








/* ── Композер v2: компактная медиа-зона, детали выезда ── */




























/* Карточка улова v2.1: ровный ряд, пропорциональный переключатель */






/* Дата: не наезжать кнопкой «+ время» */




/* Пикер снаряжения в карточке улова */






.settings-username-auto { color: var(--primary); font-weight: 600; }

/* Заглушка «Профиль не найден» — вместо голой ошибки при 404 профиля */
.profile-notfound {
  text-align: center; padding: 48px 24px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.profile-notfound-icon { color: var(--text-muted); opacity: 0.45; margin-bottom: 6px; }
.profile-notfound h2 { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); }
.profile-notfound p { font-size: 14px; color: var(--text-muted); margin: 0 0 14px; max-width: 280px; line-height: 1.5; }
.profile-notfound-actions { display: flex; gap: 8px; align-items: center; }
.profile-notfound-actions .btn-primary,
.profile-notfound-actions .btn-secondary { white-space: nowrap;
  padding: 0 18px; height: var(--btn-h-md); display: inline-flex; align-items: center;
  border-radius: var(--btn-radius); font-size: 13px; font-weight: 700; text-decoration: none;
  font-family: inherit; cursor: pointer;
}
.profile-notfound-actions .btn-primary { white-space: nowrap; background: var(--primary); color: var(--bg); border: 1px solid var(--primary); }
.profile-notfound-actions .btn-secondary { white-space: nowrap; background: transparent; color: var(--text-dim); border: 1px solid var(--border); }

/* Аудио в композере поста (голос/трек) + таймкоды триммера */
.create-audio { margin-top: 8px; }
.create-audio-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.create-audio-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text-dim); font-size: 13px; font-weight: 600; font-family: inherit;
}
.create-audio-btn:hover { color: var(--text); border-color: var(--border); }
.create-audio-hint { font-size: 11.5px; color: var(--text-muted); flex: 1 1 100%; }
.create-audio-rec, .create-audio-ready {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.create-audio-timer { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); min-width: 38px; }
.create-audio-stop, .create-audio-cancel, .create-audio-del {
  width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; cursor: pointer; background: var(--border-light); color: var(--text);
}
.create-audio-stop { background: var(--danger); color: #fff; }
.create-audio-del { background: none; color: var(--text-muted); }
.create-audio-del:hover { color: var(--danger); }
.voice-trim-range { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }
.voice-trim-sel { color: var(--text-muted); }
.post-audio { padding: 8px var(--card-padding) 0; }

/* Аудио в комментариях (запись/обрезка/превью/плеер) */
.comment-audio-rec, .comment-audio-ready {
  display: flex; align-items: center; gap: 10px; margin: 6px var(--card-padding);
  padding: 8px 12px; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-sm);
}
.comment-audio-trim { margin: 6px var(--card-padding); }
.comment-voice { margin-top: 4px; max-width: 260px; }

/* Оптимизация видео + опция «в Клипы» в композере */
.create-video-extra { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.create-video-opt { font-size: 12.5px; color: var(--text-muted); font-weight: 600; }
.create-video-opt--done { color: var(--success, var(--primary)); }
.create-video-opt--warn { color: var(--warning); font-weight: 600; }
.create-clips-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.create-clips-toggle input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }

/* ── Ф.язык: перевод пользовательского текста ─────────────────────────────── */
.translate-block { margin-top: 6px; }

.translate-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  opacity: .85; transition: opacity .15s;
}
.translate-btn:hover { opacity: 1; }
.translate-btn:disabled { cursor: default; opacity: .6; }
.translate-btn .spin { animation: translate-spin .9s linear infinite; }
@keyframes translate-spin { to { transform: rotate(360deg); } }

.translate-result {
  margin-top: 6px; padding-inline-start: 10px;
  border-inline-start: 2px solid var(--border);
}
.translate-result__text { margin: 0; }

.translate-note,
.translate-error {
  display: block; margin-top: 4px;
  font-size: 11px; color: var(--text-dim);
}
.translate-error { color: var(--danger); }

/* ═══ «Один выезд — один пост»: дозапись улова к посту ═══ */
.post-add-catch {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px var(--card-padding) 2px;
  padding: 8px 14px; border-radius: var(--radius); border: 1.5px dashed var(--primary);
  background: transparent; color: var(--primary); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.post-add-catch:hover { background: var(--primary-light); }

.addcatch-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.addcatch-sheet {
  width: 100%; max-width: 480px; background: var(--card); border-radius: 18px 18px 0 0;
  display: flex; flex-direction: column; max-height: 92dvh;
}
.addcatch-head {
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
  padding: 16px; border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; color: var(--text);
}
.addcatch-head button { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: none; background: rgba(255,255,255,0.08); border-radius: 50%; color: var(--text-dim); cursor: pointer; }
.addcatch-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.addcatch-input {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border-radius: var(--radius);
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-size: 15px; font-family: inherit; outline: none;
}
.addcatch-input:focus { border-color: var(--primary); }
.addcatch-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.addcatch-field { display: flex; flex-direction: column; gap: 4px; }
.addcatch-field > label { font-size: 11px; color: var(--text-muted); text-align: center; }
.addcatch-field input {
  height: 44px; padding: 0 8px; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 16px; font-weight: 600; text-align: center; outline: none; font-family: inherit; -moz-appearance: textfield;
}
.addcatch-field input:focus { border-color: var(--primary); }
.addcatch-field input::-webkit-outer-spin-button, .addcatch-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.addcatch-unit { display: grid; grid-template-columns: 1fr 1fr; height: 44px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.addcatch-unit button { border: none; background: var(--card); color: var(--text-dim); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.addcatch-unit button + button { border-inline-start: 1px solid var(--border); }
.addcatch-unit button.active { background: var(--primary-light); color: var(--primary); }
.addcatch-actions-row { display: flex; align-items: center; gap: 12px; }
.addcatch-photo-btn {
  flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius); border: 1.5px dashed var(--border); background: var(--bg); color: var(--text-dim);
  font-size: 13px; font-weight: 600; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.addcatch-photo-btn img { width: 100%; height: 60px; object-fit: cover; }
.addcatch-released { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-dim); cursor: pointer; flex-shrink: 0; }
.addcatch-released input { width: 18px; height: 18px; accent-color: var(--primary); }
.addcatch-foot { display: flex; gap: 8px; flex-shrink: 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); }
.addcatch-cancel { flex: 1; height: 48px; border-radius: var(--radius); border: 1.5px solid var(--border); background: transparent; color: var(--text-dim); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.addcatch-save { flex: 2; height: 48px; border-radius: var(--radius); border: none; background: var(--primary); color: var(--bg); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.addcatch-save:disabled { opacity: .6; }

/* Ссылка-раскрытие редких способов входа. По виду не кнопка: она не должна
   конкурировать с основными вариантами, её задача — не мешать. */
.oauth-more {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 8px;
  cursor: pointer;
  align-self: center;
}
.oauth-more:active { color: var(--primary); }

/* ================================================================
   ОНБОРДИНГ — те же карточки, что на входе
   Раньше шаги занимали весь экран: на iPhone контент подлезал под часы,
   а после аккуратной карточки входа переход выглядел как другой продукт.
   ================================================================ */
/* Знакомство после регистрации живёт на том же кадре реки, что вход, а всё
   содержимое — листом, прижатым к низу экрана. Так же, как форма входа: сверху
   виден кадр с логотипом, внизу то, с чем работают руки. */
.onboarding-page {
  padding: 0;
  justify-content: flex-end;
}
.onboarding-card {
  position: relative; z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 92px);
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: rgba(22, 28, 25, 0.72);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.45);
}
/* Текст на стекле поверх фотографии — светлее и с тенью, иначе описания шагов
   тонут в кадре. */
.onboarding-card h1 { color: var(--primary) !important; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.onboarding-card p { text-shadow: 0 1px 8px rgba(0,0,0,.45); }
/* Содержимое шага прокручивается внутри карточки: на шаге профиля с полями
   и предпросмотром оно выше экрана небольшого iPhone. */
.onboarding-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ================================================================
   МЕНЮ ПОСТА НА ТЕЛЕФОНЕ — шторкой снизу
   Меню раскрывалось вниз от кнопки «···». У поста в нижней части ленты
   места под ним не оставалось: список упирался в край экрана, и до
   «Пожаловаться» с «Заблокировать» было не добраться — прокрутка внутри
   не спасала, потому что само меню уже стояло за пределами видимой области.
   ================================================================ */
@media (max-width: 640px) {
  .post-dropdown-menu {
    position: fixed;
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 3000;
    min-width: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    border-inline-start: none;
    border-inline-end: none;
    border-bottom: none;
    max-height: 75dvh;
    padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    animation: post-menu-sheet-up 0.18s ease;
  }
  /* Полоска-ручка сверху — подсказка, что панель тянется и закрывается. */
  .post-dropdown-menu::before {
    content: '';
    display: block;
    width: 38px; height: 4px;
    margin: 2px auto 10px;
    border-radius: var(--radius-pill);
    background: var(--border);
  }
  .post-dropdown-menu button,
  .post-dropdown-menu .post-dropdown-link-item {
    padding: 15px 20px;
    font-size: 15px;
  }
}
@keyframes post-menu-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Подложка под шторкой меню поста. На телефоне гасит ленту и ловит касание
   мимо меню: без неё палец попадал по карточке под шторкой, а не по фону. */
.post-menu-backdrop { display: none; }
@media (max-width: 640px) {
  .post-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2999;
    background: rgba(0, 0, 0, 0.35);
    animation: post-menu-fade 0.18s ease;
  }
}
@keyframes post-menu-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ================================================================
   ПОДТВЕРЖДЕНИЕ ДЕЙСТВИЯ — плашка по центру экрана
   Единый шаблон для «Ссылка скопирована», «Фото сохранено»,
   «<имя> заблокирован» и прочих коротких ответов на действие.
   ================================================================ */
.toast-center-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.toast-center {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 148px;
  max-width: 78vw;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: rgba(28, 33, 30, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  animation: toast-center-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.toast-center-text { font-size: 15px; line-height: 1.35; }
.toast-center-icon { font-size: 34px; line-height: 1; }

/* Галочка прочерчивается: длина линии = 60, смещение уводит её за край и
   плавно возвращается — получается «рисование» слева направо. */
.toast-check { color: var(--primary); }
.toast-check path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: toast-check-draw 0.42s 0.06s ease-out forwards;
}
@keyframes toast-check-draw { to { stroke-dashoffset: 0; } }
@keyframes toast-center-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .toast-check path { animation: none; stroke-dashoffset: 0; }
  .toast-center { animation: none; }
}

/* Обратная анимация шторки меню: уезжает вниз, подложка гаснет. */
@media (max-width: 640px) {
  .post-dropdown-menu.is-closing {
    animation: post-menu-sheet-down 0.18s ease forwards;
  }
}
.post-menu-backdrop.is-closing { animation: post-menu-fade-out 0.18s ease forwards; }
@keyframes post-menu-sheet-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}
@keyframes post-menu-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ================================================================
   СОГЛАШЕНИЕ И ПОЛИТИКА ПОВЕРХ ЭКРАНА ВХОДА
   Раньше это были обычные ссылки «в новой вкладке». В приложении такой адрес
   начинается со схемы capacitor://, iOS её не понимает и предлагала открыть
   постороннее приложение. Показываем документ здесь же, не уводя человека.
   ================================================================ */
.legal-link {
  background: none; border: none; padding: 0;
  color: var(--primary); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.legal-overlay {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
.legal-sheet {
  width: 100%; max-width: 560px;
  max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  animation: sheet-up 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.legal-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 700; color: var(--text);
}
.legal-sheet-head button {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  display: flex; padding: 4px;
}
.legal-sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}

/* kcard overrides — in main bundle so SW-cache doesn't block */
.kcard-price { color: var(--primary); font-size: 15px; font-weight: 900; }
.kcard-body  { gap: 3px; padding: 6px 8px 8px; }
.kcard-city  { font-size: 11.5px; font-weight: 500; }
/* Выравнивание цены по горизонтали в гриде: у длинных и коротких названий цена на одном уровне */
.kcard--grid .kcard-title { min-height: 2.6em; }

/* ❌ УДАЛЕНО: локальный хвост маркета
   `.hdr-nav-panel { width:100%; gap:0 }` + `.hdr-nav-btn { flex:1 1 0; color: var(--text-muted) }`.
   Селекторы были БЕЗ привязки к маркету и стояли в конце файла, поэтому перекрашивали
   nav-кнопки ВО ВСЁМ приложении и глушили `.hdr-nav-btn--create` (зелёный «плюс» становился
   серым — из-за этого маркету и понадобился свой `.mkt-hdr-create { …!important }`).
   Раскладку кнопок теперь целиком задаёт сетка хедера (§9.1). */

/* ─── Шторка «Мы в соцсетях» (плитка на главной раскрывает её) ─── */
.socsheet-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.socsheet {
  width: 100%; max-width: 380px;
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--border-light);
  padding: 14px 16px 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.28);
}
.socsheet-head { display: flex; align-items: center; justify-content: space-between; }
.socsheet-head b { font-size: 16px; color: var(--text); }
.socsheet-x {
  width: 30px; height: 30px; border: none; background: transparent;
  color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
}
.socsheet-sub { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 12px; }
.socsheet-rows { display: flex; flex-direction: column; gap: 8px; }
.socsheet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; width: 100%;
  background: var(--bg-warm); color: var(--text);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.socsheet-row--btn:active { background: var(--card); }
.socsheet-row--done { opacity: 0.72; cursor: default; }
.socsheet-ic { display: flex; flex-shrink: 0; width: 22px; }
.socsheet-name { flex: 1; font-size: 14.5px; font-weight: 600; }
.socsheet-coins {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 700; color: var(--primary);
}
.socsheet-check { color: var(--success); display: flex; }
.socsheet-auth {
  display: block; text-align: center; margin-top: 14px;
  padding: 11px; font-size: 14px; font-weight: 700;
  background: var(--primary); color: var(--btn-text);
  border-radius: var(--radius-sm); text-decoration: none;
}

/* ── Smart app banner: «Открыть в приложении» (моб. браузер, не в установленном app) ── */
.appbanner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin: 0 0 10px;
  background: var(--card); border: 1px solid var(--border-light);
  border-radius: var(--radius);
}
.appbanner-x {
  flex-shrink: 0; background: none; border: none; color: var(--text-muted);
  padding: 2px; cursor: pointer; display: flex; align-items: center;
}
.appbanner-ic { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; }
.appbanner-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.appbanner-txt b { font-size: 14px; color: var(--text); }
.appbanner-txt span { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbanner-btn {
  flex-shrink: 0; background: var(--primary); color: var(--btn-text);
  font-weight: 700; font-size: 13px; padding: 7px 16px;
  border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
}
.appbanner-btn:active { filter: brightness(0.93); }

/* Плашка «Вышла новая версия» внутри приложения: та же полоска, плюс мягкая
   кнопка «Потом». Отказ не должен выглядеть как основное действие. */
.appbanner-later {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  padding: 7px 8px; white-space: nowrap;
}
.appbanner-upd .appbanner-btn { border: none; cursor: pointer; font-family: inherit; }

/* ================================================================
   ШТОРКА «ПОДЕЛИТЬСЯ» — получатели сеткой и ряд действий
   Список адресатов раньше прятался за строкой «В личном сообщении»,
   и до него не доходили. Теперь он на виду, четыре в ряд, как в ВК.
   ================================================================ */
.share-people { margin-top: 10px; }
.share-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 2px 8px;
}
.share-section-title--gap { margin-top: 18px; }
/* Поля шторки живут по одним правилам: одинаковая высота, радиус и отступы.
   Раньше поиск был 12px-радиуса и другой высоты, чем поле комментария. */
.share-search-wrap {
  display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box; min-height: 46px;
  padding: 10px 12px; margin-bottom: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg);
  color: var(--text-muted);
  transition: border-color 0.15s;
}
.share-search-wrap:focus-within { border-color: var(--border); }
.share-search-wrap svg { flex-shrink: 0; }
/* Тёмная тема красит ЛЮБОЙ input в --card (`:root:not(.light) input`, спец. 0,2,1),
   отсюда светлая «плашка в плашке» внутри рамки поиска. Сбрасываем так же, как
   это уже сделано у `.hdr-search-field input` — через !important и без привязки
   к предку, иначе поле ломается в каждом новом контейнере (см. стандарт §5). */
.share-search-wrap input.share-search {
  flex: 1; min-width: 0; min-height: 0;
  padding: 0; outline: none;
  border: none !important; background: transparent !important; box-shadow: none !important;
  color: var(--text); font-size: 14px; font-family: inherit;
}
.share-empty {
  padding: 18px 6px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.share-grid {
  /* Была сетка 4×N с собственной вертикальной прокруткой внутри уже прокручиваемой
     шторки — два скролла друг в друге и половина листа под аватарки. Теперь одна
     строка с горизонтальной прокруткой. */
  display: flex; gap: 14px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
.share-grid::-webkit-scrollbar { display: none; }
.share-grid, .share-actions { touch-action: pan-x; }
.share-people .share-cell { flex: 0 0 auto; width: 62px; }
.share-cell {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.share-cell-ava {
  position: relative;
  width: 56px; height: 56px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.share-cell-ava img { width: 100%; height: 100%; object-fit: cover; }
.share-cell-ph { font-size: 20px; font-weight: 700; color: var(--text-muted); }
/* Группу помечаем значком: в общем списке иначе не отличить от человека. */
.share-cell-badge {
  position: absolute; right: -1px; bottom: -1px;
  width: 20px; height: 20px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--btn-text);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
}
.share-cell-done {
  position: absolute; inset: 0;
  background: rgba(20, 24, 21, 0.72);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.share-cell-name {
  font-size: 11px; line-height: 1.2; color: var(--text-dim);
  max-width: 68px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-cell.is-sent .share-cell-name { color: var(--primary); }

.share-actions {
  display: flex; gap: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Полосу прокрутки прячем: на ПК браузер рисовал её зелёной чертой над «Отмена». */
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 0 6px;
  margin-bottom: 14px;
}
.share-actions::-webkit-scrollbar { display: none; }
.share-action {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 68px;
  font-size: 11px; line-height: 1.25; color: var(--text-dim);
  text-align: center;
  /* Подпись строго в одну строку: «На своей странице» разъезжалось на три
     и уходило под нижний край шторки. */
  white-space: nowrap;
}
.share-action > :not(.share-action-ic) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Без плашек: значок приложения сам по себе — у Telegram и MAX логотип уже
   круглый, у «Ссылки» и «Ещё» это обычный контурный значок. */
.share-action-ic {
  width: 52px; height: 52px;
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s, opacity 0.12s;
}
.share-action:active .share-action-ic { transform: scale(0.9); opacity: 0.75; }

/* Комментарий сворачивается в строку — раскрываем по нажатию */
.repost-sheet-add-comment {
  /* Была строка 145×28 — мимо неё легко промахнуться, а прямо под ней стоит
     «Поделиться в ленту», то есть промах = случайная публикация. Делаем полем
     во всю ширину и с полноценной тап-зоной: заодно понятно, что сюда пишут. */
  display: flex; align-items: center; gap: 8px;
  width: 100%; box-sizing: border-box; min-height: 46px;
  background: var(--bg); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer; font-family: inherit; text-align: start;
  color: var(--text-muted); font-size: 14px;
  padding: 10px 12px; margin-bottom: 14px;
  transition: border-color 0.15s, color 0.15s;
}
.repost-sheet-add-comment:hover,
.repost-sheet-add-comment:active { border-color: var(--border); color: var(--text-dim); }
.repost-sheet-add-comment svg { flex-shrink: 0; }

/* ═══ ЖЕСТЫ ШТОРОК И МОДАЛОК — §9.2 UI_STANDARDS ═══════════════════════════════
   preventDefault() в обработчиках бесполезен: браузер и наши пассивные слушатели
   забирают первые пиксели жеста раньше. Работает только touch-action — его читает
   компоновщик ДО обработчиков. Оверлей забирает жест себе (none), лист отдаёт ему
   вертикаль (pan-y) и не пробрасывает докрут наружу (overscroll-behavior: none).
   Без этого свайп внутри шторки тянет ленту под ней (см. ловушку 1 в §9.2). */
.city-sheet-overlay,
.avatar-sheet-overlay,
.avatar-menu-overlay,
.region-users-overlay,
.sheet-backdrop,
.report-overlay,
.modal-overlay,
.tip-popup-overlay { touch-action: none; }

.city-sheet,
.avatar-sheet,
.avatar-menu-sheet,
.region-users-sheet,
.report-modal,
.modal-content,
.tip-popup { touch-action: pan-y; overscroll-behavior: none; }

/* Внутренние прокручиваемые области листов — им нужна своя вертикаль */
.city-sheet-body { touch-action: pan-y; overscroll-behavior: contain; }


/* ── Экран входа без карточки ────────────────────────────────────────────────
   Фон — рисованный кадр реки, В НЁМ УЖЕ ЕСТЬ ЛОГОТИП (кладётся при подготовке
   картинки, одинаково во всех сезонах: центр на 26% высоты, ширина 22.5%).
   Поэтому страница логотип НЕ рисует — только надпись под ним и кнопки внизу.
   Карточку убрали: серая плашка закрывала кадр почти целиком. */
.auth-hero {
  position: relative; min-height: 100dvh; overflow: hidden;
  /* Картинку задаёт страница (сезон), но САМ блок её не рисует — размер 0.
     Кадр кладёт ::before во весь экран, см. ниже. */
  background: var(--bg) center / 0 0 no-repeat;
  display: flex; flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px
           calc(14px + env(safe-area-inset-bottom, 0px));
}
/* Кадр реки — слоем во весь ЭКРАН, а не во весь блок. Блок бывает выше экрана
   (кнопки, соглашение, ссылки), и тогда cover считал бы масштаб по его высоте:
   рисунок наезжал крупнее и не совпадал с заставкой запуска, где ровно тот же
   кадр показан по размеру экрана. Картинку берём у самого блока (inherit) —
   её проставляет страница по времени года. */
.auth-hero::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: inherit;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Затемнение: вверху лёгкое (там небо и логотип), внизу почти чёрное — под кнопки.
   Рисуется ПОСЛЕ кадра (::after идёт следом за ::before), поэтому ложится поверх. */
.auth-hero::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(13,17,15,0.28) 0%, rgba(13,17,15,0.04) 20%,
    rgba(13,17,15,0.40) 56%, rgba(13,17,15,0.94) 100%);
}
.auth-hero > * { position: relative; z-index: 1; }

/* «Живой» слой — тот же набор, что в заставке запуска (ui/index.html): туман над
   водой, круги от знака, дыхание света. Держим их ОДИНАКОВЫМИ намеренно: заставка
   уходит растворением, и если бы движение при этом обрывалось, кадр на глазах
   «замерзал» бы. Бегущей искры (.sp-arc) здесь НЕТ: она означает «идёт загрузка».

   ГЕОМЕТРИЯ. Кадр лежит как cover и на экране другой пропорции обрезается, поэтому
   доли ЭКРАНА с рисунком не совпадают. Все слои живут внутри .sp-fit — коробки,
   повторяющей cover один в один (min-width/min-height + aspect-ratio кадра), и доли
   внутри неё это доли САМОГО РИСУНКА. Кольцо логотипа замерено по картинке:
   центр 50.83% / 25.62%, диаметр 34.62% ширины кадра.

   Слой лежит между кадром (::before) и затемнением (::after): псевдоэлемент ::after
   рисуется последним из детей, поэтому достаточно вернуть слою z-index 0. */
.auth-hero > .sp-life { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-hero .sp-fit {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; aspect-ratio: 1290 / 2796;
}
.auth-hero .sp-fit span { position: absolute; display: block; }
.auth-hero .sp-fog1 {
  left: -20%; right: -20%; top: 31%; height: 16%; filter: blur(16px);
  background: radial-gradient(24% 90% at 30% 55%, rgba(230,236,226,0.17) 0%, transparent 70%),
              radial-gradient(19% 80% at 63% 45%, rgba(230,236,226,0.13) 0%, transparent 72%),
              radial-gradient(14% 70% at 46% 75%, rgba(230,236,226,0.10) 0%, transparent 72%);
  animation: spFog1 11s ease-in-out infinite alternate;
}
.auth-hero .sp-fog2 {
  left: -20%; right: -20%; top: 38%; height: 13%; filter: blur(20px);
  background: radial-gradient(20% 90% at 62% 50%, rgba(226,232,222,0.12) 0%, transparent 72%),
              radial-gradient(16% 80% at 26% 60%, rgba(226,232,222,0.09) 0%, transparent 74%);
  animation: spFog2 16s ease-in-out infinite alternate;
}
.auth-hero .sp-ping {
  left: 50.83%; top: 25.62%; width: 34.62%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(168,200,158,0.5); transform: translate(-50%, -50%);
  animation: spPing 2.2s cubic-bezier(.2,.6,.3,1) infinite;
}
.auth-hero .sp-ping2 { animation-delay: 1.1s; }
.auth-hero .sp-sun {
  left: 50%; top: 46%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,199,124,0.20) 0%, rgba(255,199,124,0.08) 42%, transparent 68%);
  animation: spSun 4s ease-in-out infinite;
}
.auth-hero .sp-halo {
  left: 50.83%; top: 25.62%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(127,161,122,0.17) 0%, transparent 62%);
  animation: spHalo 3s ease-in-out infinite;
}
@keyframes spPing {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 0.1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
}
@keyframes spFog1 { from { transform: translate(-10%, 1.5%); } to { transform: translate(10%, -1.5%); } }
@keyframes spFog2 { from { transform: translate(9%, -1%); } to { transform: translate(-9%, 1%); } }
@keyframes spSun {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
}
@keyframes spHalo {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.98); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .auth-hero .sp-fit span { animation: none; } }

/* Верхняя строка экранов входа и регистрации: «назад» слева, язык справа. */
.auth-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.auth-lang { position: relative; flex-shrink: 0; }
.auth-lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: rgba(232,226,212,0.86); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.auth-lang-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  display: flex; flex-direction: column; min-width: 150px; padding: 5px;
  border-radius: var(--radius-sm);
  background: rgba(22,28,25,0.96); border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.auth-lang-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13.5px; color: rgba(232,226,212,0.9);
}
.auth-lang-item:hover { background: rgba(255,255,255,0.07); }
.auth-lang-item.is-on { color: var(--primary); font-weight: 700; }

/* «Назад» — стеклянной плашкой, как выбор языка справа. Голым текстом на небе
   кадра она терялась: светлые буквы по светлому закату не читались. */
.auth-hero-back {
  align-self: flex-start; min-width: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px; border-radius: var(--radius-pill);
  background: rgba(20,27,23,0.45); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  color: rgba(240,236,226,0.94); font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.auth-hero-back:hover { color: var(--primary); }
.auth-lang-btn { background: rgba(20,27,23,0.45); color: rgba(240,236,226,0.94); }

/* Строка «Нет аккаунта? — Создать аккаунт» под способами входа. */
.auth-hero-signup {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 2px 0; font-size: 13.5px; color: rgba(232,226,212,0.72);
}
.auth-hero-signup-btn {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(127,161,122,0.55); background: rgba(127,161,122,0.14);
  color: var(--primary); font-weight: 800; text-decoration: none; white-space: nowrap;
}
.auth-hero-signup-btn:hover, .auth-hero-signup-btn:focus-visible { color: var(--primary); background: rgba(127,161,122,0.22); }

/* Надпись встаёт ровно под логотипом, который вшит в кадр. */
.auth-hero-name { position: absolute; left: 0; right: 0; top: 37%; text-align: center; }
.auth-hero-name h1 {
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: 4px;
  color: var(--primary) !important; background: none !important;
  -webkit-text-fill-color: var(--primary) !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.auth-hero-name p {
  margin: 5px 0 0; font-size: 13px; color: rgba(232,226,212,0.75);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.auth-hero-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }  /* = gap у .oauth-buttons: все расстояния внизу одинаковые */

/* Главный способ — телефон. Раньше все шесть кнопок были одинаковыми и глазу
   не за что было зацепиться. */
.oauth-primary {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 48px; border-radius: var(--radius);
  background: var(--primary); color: #12170f;
  border: none; font-family: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer; transition: filter .15s;
}
.oauth-primary:hover { filter: brightness(1.07); }
.oauth-primary .oauth-btn-icon svg { stroke: #12170f; color: #12170f; }

/* Соцсети в два ряда вместо четырёх — блок вдвое ниже, кадру остаётся воздух. */
/* minmax(0,1fr), а не 1fr: обычный 1fr не даёт колонке стать уже своего
   содержимого, и одна длинная подпись в ячейке распирала всю сетку за край
   экрана — форма входа «ехала». Теперь колонка всегда ровно половина. */
.oauth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
/* Подписи-ссылки внутри сетки (например «войти под другим аккаунтом Telegram»)
   занимают строку целиком — как ячейка они ломали ритм 2×2. */
.oauth-grid > .oauth-btn-text { grid-column: 1 / -1; }
.oauth-grid .oauth-btn {
  /* В сетке значки уже НЕ выстраиваются в один столбик — выравнивание по левому
     краю читалось рвано из-за разной длины подписей. Поэтому по центру ячейки. */
  justify-content: center;
  height: 44px; padding: 0 10px; gap: 8px; font-size: 13px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.14);
}
.oauth-grid .oauth-btn:hover { background: rgba(255,255,255,0.14); }
/* Подпись не имеет права раздвигать кнопку: длинное слово обрезается многоточием.
   Иначе любая надпись подлиннее (или ожидание входа) меняла форму кнопки — а сетка
   на экране входа должна стоять неподвижно, что бы в ней ни происходило. */
.oauth-grid .oauth-btn > span:not(.oauth-btn-icon) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Все способы входа, кроме телефона, — ОДНОЙ строкой значков.
   Раньше это была сетка 2×2 плюс отдельная строка почты: три ряда кнопок
   отжимали кадр реки вверх. Подписи скрыты — значки мессенджеров узнаваемы,
   а имя кнопки остаётся в aria-label и подсказке (см. SocialAuthButtons). */
.oauth-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.oauth-icons > .oauth-btn {
  flex: 1 1 0; min-width: 0; height: 48px; padding: 0; gap: 0;
  justify-content: center;
}
/* Стекло — ВСЕМ, включая Apple. Её фирменная чёрная плашка в ряду одинаковых
   значков читалась как чужеродная заплатка. Требование Apple — дать своему входу
   равное место, а не обязательно чёрный фон; логотип остаётся белым и узнаваемым. */
.oauth-icons > .oauth-btn {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,0.14);
}
.oauth-icons > .oauth-btn:hover { background: rgba(255,255,255,0.14); }
.oauth-icons > .oauth-btn--apple { color: #fff; }
/* Подписи убраны из потока, а не спрятаны прозрачностью: иначе они продолжали бы
   задавать ширину кнопки, и «ВКонтакте» распирало бы ряд. */
.oauth-icons > .oauth-btn > span:not(.oauth-btn-icon) { display: none; }
.oauth-icons > .oauth-btn .oauth-btn-icon { width: auto; }
/* Раскрытая почта подсвечена — видно, какой способ сейчас на экране. */
.oauth-icons > .oauth-btn.is-open {
  background: rgba(127,161,122,0.22); border-color: var(--primary); color: var(--primary);
}
/* Подпись-ссылка «войти под другим аккаунтом Telegram» (только десктоп) уезжает
   на свою строку, а не встаёт значком в ряд. */
.oauth-icons > .oauth-btn-text { flex: 1 0 100%; order: 9; text-align: center; }

/* Первый шаг входа по почте: адрес и «Далее» — одним элементом, без шва. */
.auth-email-join { display: flex; align-items: stretch; }
.auth-email-join > input, .auth-email-join > .field > input {
  flex: 1; min-width: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-right-color: transparent;
}
.auth-email-join input:focus { border-right-color: var(--primary); }
.auth-email-join > button {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 15px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 800;
  background: var(--primary); color: #12170f;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.auth-email-join > button:active { filter: brightness(0.94); }
.auth-email-join > button:disabled { opacity: 0.6; cursor: default; }
/* Обёртка поля — чтобы положить внутрь глазок, не ломая стык с кнопкой. */
.auth-email-join > .field { position: relative; display: flex; flex: 1; min-width: 0; }
.auth-email-join > .field input { padding-right: 40px; }
.field-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px;
  background: none; cursor: pointer; color: var(--text-muted);
}
.field-eye:hover { color: var(--primary); }

/* Ошибка поля: мягкая красная рамка и одно подрагивание. Системный пузырь
   браузера («в адресе отсутствует символ @») выключен через noValidate —
   он перекрывал форму и говорил машинным языком. */
.auth-email-join.is-error input { border-color: var(--danger); }
.auth-email-join.is-error { animation: field-shake 0.32s ease; }
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}
/* Подсказка с примером — тихая; ошибка — на её месте, тем же кеглем, чтобы
   форма не подпрыгивала при появлении сообщения. */
.field-hint, .field-err {
  font-size: 12px; line-height: 1.4; padding: 0 2px; margin-top: -2px;
}
.field-hint { color: rgba(232,226,212,0.55); }
.field-err { color: var(--danger); }

/* Ссылки под формой — одной строкой, по центру: «Забыли пароль?» и возврат
   к остальным способам входа. */
.auth-email-links {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap; margin-top: 4px;
}
.auth-email-links button {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: rgba(232,226,212,0.75);
}
.auth-email-links button:hover { color: var(--primary); }

/* Поле только для менеджера паролей: с экрана убрано, но остаётся в форме
   (display:none менеджеры игнорируют, поэтому уводим за край). */
.offscreen-input {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Шаг «пароль»: адрес, который человек ввёл на первом шаге, — и возврат к нему. */
.auth-email-who {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-xs); padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: rgba(232,226,212,0.85);
}
.auth-email-who span {
  flex: 1; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-email-who b { color: var(--primary); font-weight: 700; flex-shrink: 0; }

.auth-hero-mail {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  color: rgba(232,226,212,0.82); font-size: 13.5px; font-weight: 700; padding: 8px 0;
}
/* Экран «Проверь почту» — тот же кадр и та же нижняя колонка, что у входа. */
.auth-done { text-align: center; }
.auth-done-ico { color: var(--primary); margin: 0 auto 2px; }
.auth-done-ico--bad { color: var(--danger); }
.auth-done .oauth-primary:disabled { opacity: 0.6; cursor: default; }
.auth-done h2 {
  margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 0.2px;
  color: rgba(240,236,226,0.96); text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.auth-done p {
  margin: 0; font-size: 13.5px; line-height: 1.55;
  color: rgba(232,226,212,0.78); text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.auth-done p b { display: block; margin-top: 4px; color: var(--primary); word-break: break-all; }
.auth-done-note { font-size: 12.5px !important; color: rgba(232,226,212,0.6) !important; }
.auth-done .oauth-primary { margin-top: 6px; text-decoration: none; }
.auth-done .oauth-btn {
  justify-content: center;
  background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

.auth-hero-legal {
  font-size: 11px; line-height: 1.5; text-align: center;
  color: rgba(232,226,212,0.6);
}
.auth-hero-links {
  display: flex; justify-content: center; gap: 18px; padding-top: 4px;
  font-size: 13px; font-weight: 700;
}


/* Согласие на экране регистрации без карточки: стеклянная плашка над кнопками.
   Наверх экрана её не унести — без галочки регистрация не работает, человек
   должен видеть её рядом с кнопками, а не после прокрутки. */
/* Согласие — просто текст по центру, БЕЗ подложки. Стеклянная плашка добавляла
   ещё один блок к и так плотному низу экрана; галочка и выделенные ссылки
   сами показывают, что тут нужно действие. Галочка стоит в строке перед первым
   словом — у центрированного абзаца отдельная колонка под неё смотрелась бы криво.
   Внешних отступов нет: расстояние до «Телефона» задаёт общий gap колонки — то
   же, что между «Телефоном» и рядом значков. */
.register-agree--hero {
  display: block; text-align: center; margin: 0; padding: 0 4px;
  font-size: 12px; line-height: 1.5; color: rgba(232,226,212,0.82);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  cursor: pointer;
}
/* Отступы у чекбокса сброшены: общий стиль полей (padding 13px 16px) цеплял и его,
   раздувая рамку, из-за чего галочка съезжала к верху строки. */
.register-agree--hero input {
  display: inline-block; vertical-align: -4px;
  margin: 0 7px 0 0; padding: 0; width: 18px; height: 18px;
}
/* Не отметили и нажали способ — рамки больше нет, поэтому краснеет сам текст. */
.register-agree--hero.register-agree--error { color: var(--danger); border: none; background: none; }
.register-agree--hero .legal-link { font-size: 12px; }

/* Подсказки под полем пароля — один тихий стиль: значок + текст, без рамок.
   И совет «Придумайте новый…», и требования к паролю выглядят одинаково. */
.auth-hint {
  display: flex; align-items: flex-start; gap: 6px; margin: 6px 2px 0;
  font-size: 12px; line-height: 1.4; color: rgba(232,226,212,0.62);
}
.auth-hint svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.auth-hint-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 2px 0; }
.auth-hint-check {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; line-height: 1.4; color: rgba(232,226,212,0.62);
}
.auth-hint-check svg { flex-shrink: 0; color: rgba(232,226,212,0.42); }
.auth-hint-check.ok, .auth-hint-check.ok svg { color: var(--primary); }

/* Демонстрация шторки на странице стандартов (/styleguide): показываем внутренности
   листа без оверлея, поэтому геометрию берём у .repost-sheet вручную. */
.sg-sheet-demo {
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 8px 16px 16px;
}

/* Награды автора — группа справа, у кнопки «Подписаться»; если её нет, группа
   сама уезжает к «⋯» (свободное место забирает ссылка автора). Высота как у
   кнопки подписки — 28px, с подложкой, чтобы значки читались как плашки. */
.post-header .post-author { flex: 1 1 auto; min-width: 0; }
.post-header-badges {
  display: flex; align-items: center; gap: 6px;
  /* Прижимаем к правому краю строки статуса */
  margin-inline-start: auto; margin-inline-end: 0;
  /* Помещается три награды; остальные — прокруткой вбок, чтобы группа никогда
     не выдавливала имя автора и кнопку подписки. */
  /* не сжимаемся: ширину задаёт содержимое, но не больше потолка (3 награды) */
  flex: 0 0 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
}
.post-header-badges::-webkit-scrollbar { display: none; }
.post-header-badges .author-badge-btn { scroll-snap-align: start; }
/* Подсказка «список продолжается»: правый край растворяется, из-под него
   выглядывает следующая награда. Как только докрутили до конца — исчезает. */
.post-header-badges.has-more {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
}


.post-header-badges:empty { display: none; margin: 0; }
/* У рисованных наград свой круг с ободком — вторая подложка была бы кольцом
   в кольце, поэтому сама плашка прозрачная. */
.post-header-badges .author-badge-btn {
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: none; border: none; overflow: hidden;
}
.post-header-badges .author-badge-btn svg { width: 16px; height: 16px; }
.post-header-badges .author-badge-btn img { width: 28px; height: 28px; border-radius: var(--radius-pill); }
.post-header-badges .author-badge-btn .author-badge,
.post-header-badges .author-badge-btn .author-founder-emoji { font-size: 15px; }

.post-header-badges .author-badge-btn:active { background: var(--primary-bg); }

/* Версия приложения внизу «О проекте». Ни iOS, ни Android не показывают её нигде
   в системе — без этой строки человек не может сказать, что у него стоит. */
.app-version-line {
  text-align: center; padding: 14px 16px 22px;
  font-size: 12px; color: var(--text-muted); opacity: .8;
  font-variant-numeric: tabular-nums;
}

/* Строка статуса под шапкой: разряд · очки слева, награды справа. Вынесена
   из колонки автора — там её зажимала кнопка «Подписаться» (в русском она
   127px) и «1-й разряд» обрезался до «1-й …». Здесь вся ширина карточки. */
.post-status-line {
  display: flex; align-items: center; gap: 6px;
  padding: 0 var(--card-padding); margin: 2px 0 2px;
  min-width: 0;
}
.post-status-line .post-rank-inline { min-width: 0; overflow: hidden; }

/* ── Шапка поста: сетка 4 колонки × 2 строки ────────────────────────────────
   [ава][имя ..........][подписка][⋯]
   [ава][разряд · очки ][награды  ]
   Аватар занимает обе строки, имя и строка статуса начинаются от одной
   вертикали, награды заканчиваются ровно там же, где кнопка над ними. */
.post-header--grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px; row-gap: 2px;
  padding: 0 var(--card-padding);
}
.post-header--grid .post-author-ava {
  grid-column: 1; grid-row: 1 / 3;
  display: flex; align-items: center; text-decoration: none;
}
.post-header--grid .post-author-name-link {
  grid-column: 2; grid-row: 1;
  min-width: 0; color: var(--text); text-decoration: none;
}
.post-header--grid .post-follow-btn-action { grid-column: 3; grid-row: 1; margin: 0; }
.post-header--grid .post-menu-wrapper      { grid-column: 4; grid-row: 1; margin: 0; }
.post-header--grid .post-status-line {
  grid-column: 2; grid-row: 2;
  padding: 0; margin: 0; min-width: 0;
}
.post-header--grid .post-header-badges {
  grid-column: 3; grid-row: 2;
  justify-self: end; margin: 0;
}
/* Автора без кнопки подписки (свой пост) — награды занимают её колонку */
.post-header--grid .post-header-badges:only-child { grid-column: 3 / 5; }
/* Аватар крупнее: он держит обе строки */
.post-header--grid .avatar-sm,
.post-header--grid .avatar-placeholder { width: 44px; height: 44px; }
.post-header--grid .post-author-line1 { width: 100%; }

/* ── Шапка поста, доводка 10.09 ──────────────────────────────────────────── */
/* «⋯» — такой же кружок, как «Подписан»: правый край шапки собран из одинаковых
   элементов, а не из кнопки и висящих в воздухе точек. */
.post-header--grid .post-menu-btn {
  width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted); background: transparent;
}
/* Награды доходят до правого края «⋯» — под точками больше нет пустоты */
.post-header--grid .post-header-badges { grid-column: 3 / 5; }
/* Разряд и очки — одним голосом: один цвет, один вес. Это одна мысль. */
.post-header--grid .post-rank-inline,
.post-header--grid .post-rank-inline b {
  color: var(--text); font-weight: 600; font-size: 12px;
}
/* Воздух вокруг шапки — вдвое меньше: 12 → 6 сверху и до фото */
.post-header--grid { margin-bottom: 0; }

/* Награды занимают всю полосу под «Подписаться» + «⋯»: от левого края кнопки до
   правого края кружка. Пока помещаются — стоят справа целиком; не помещаются —
   последняя уходит под растворяющийся край (подсказка прокрутки).
   width:0 + min-width:100% — чтобы ряд наград не распирал колонки сетки и не
   отъедал ширину у имени, а просто заполнял уже отведённое место. */
.post-header--grid .post-header-badges {
  grid-column: 3 / 5; justify-self: stretch;
  width: 0; min-width: 100%;
}
/* Прижимаем вправо через auto-отступ первого значка, а не justify-content:
   flex-end — с ним начало ряда при прокрутке становится недостижимым. */
.post-header--grid .post-header-badges > :first-child { margin-inline-start: auto; }
/* Свой пост — кнопки подписки нет, колонка пустая: тогда ряд сам задаёт ширину */
.post-header--no-follow .post-header-badges { width: auto; min-width: 0; max-width: 168px; }

/* ── Ритм правой части шапки ──────────────────────────────────────────────
   Один шаг 14px везде: между «Подписаться» и «⋯» и между наградами.
   Кнопка 112px — тогда 4 награды (4×28 + 3×14 = 154) ровно ложатся от левого
   края кнопки до правого края «⋯», а четвёртая встаёт точно под «⋯».
   min-width, а не width: на длинных языках кнопка вправе вырасти. */
.post-header--grid .post-follow-btn-action { min-width: 112px; padding: 4px 10px; text-align: center; }
.post-header--grid .post-menu-wrapper { margin-inline-start: 4px; }   /* 10 (сетка) + 4 = 14 */
.post-header--grid .post-header-badges { gap: 14px; }
/* Ровно четыре — растягиваем на всю полосу: первая под началом кнопки, последняя под «⋯» */
.post-header--grid .post-header-badges:has(> :nth-child(4):last-child) { justify-content: space-between; }
.post-header--grid .post-header-badges:has(> :nth-child(4):last-child) > :first-child { margin-inline-start: 0; }

/* Награда = одинаковый песочный круг + значок. Цвет круга — токен --badge-bg. */
.badge-art {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--badge-bg); border: 1.5px solid var(--badge-rim);
  box-sizing: border-box; flex-shrink: 0;
}
.badge-art img { width: 72%; height: 72%; object-fit: contain; display: block; }
.post-header-badges .author-badge-btn img { width: 72%; height: 72%; border-radius: 0; }

/* ── Шапка поста, раскладка 10.09 (вечер) ────────────────────────────────
   [ава][имя ..............][ награды  ]
   [ава][разряд · очки ....][Подписаться][⋯]
   Награды наверху — рядом с именем (это про человека), действия внизу.
   Значки без подложки и обводки: светлые, сами читаются на тёмной карточке. */
.post-header--grid .post-header-badges { grid-row: 1; }
.post-header--grid .post-follow-btn-action { grid-row: 2; }
.post-header--grid .post-menu-wrapper      { grid-row: 2; }
.post-header--grid .post-author-name-link  { grid-row: 1; align-self: center; }
.post-header--grid .post-status-line       { grid-row: 2; align-self: center; }
.post-header--grid .author-badge-btn .badge-art {
  background: none; border: none;
}
.post-header--grid .author-badge-btn .badge-art img { width: 86%; height: 86%; }
/* Обе строки ровно по 28px (высота кнопок) + 2px между ними = 58.
   Аватар 58px: верх — по верху наград, низ — по низу кнопок. */
.post-header--grid { grid-template-rows: 28px 28px; row-gap: 2px; }
.post-header--grid .avatar-sm,
.post-header--grid .avatar-placeholder { width: 58px; height: 58px; font-size: 20px; }
/* Имя крупнее: оно главное в шапке */
/* 15px: крупнее прежних 14, но «Иван Савченко» ещё помещается рядом с наградами (в 16px не хватало 4px) */
.post-header--grid .author-name { font-size: 15px; }

/* ── Шапка поста, 10.09 поздно ────────────────────────────────────────────
   1) Имя и награды — одна строка: имя забирает всё, что не заняли награды.
      Наград видно не больше трёх, четвёртая выглядывает из-под затухания. */
.post-header--grid .post-header-top {
  grid-column: 2 / 5; grid-row: 1;
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.post-header--grid .post-header-top .post-author-name-link {
  grid-column: auto; grid-row: auto; flex: 1 1 auto; min-width: 0;
}
.post-header--grid .post-header-top .post-header-badges {
  grid-column: auto; grid-row: auto; justify-self: auto;
  flex: 0 0 auto; width: auto; min-width: 0;
  max-width: 140px;              /* три награды (0–112) + зазор 14 + половина четвёртой (14px) — подсказка прокрутки */
  justify-content: flex-start;
}
.post-header--grid .post-header-top .post-header-badges > :first-child { margin-inline-start: 0; }

/* 2) Кнопки без обводок, но с мягкой заливкой — видно, что это кнопки */
.post-header--grid .post-follow-btn-action {
  border: none; background: var(--primary-light); color: var(--primary);
  font-weight: 700;
}
.post-header--grid .post-follow-btn-action:active { filter: brightness(1.15); }
.post-header--grid .post-menu-btn {
  border: none; background: var(--primary-bg); color: var(--text-dim);
  box-sizing: border-box;
}
.post-header--grid .post-menu-wrapper { align-self: center; display: flex; }

/* 3) Буквы по центру наград и кнопок: без выносных строк у текста центр
   прописных сидит выше центра строки — опускаем на измеренные 1–1.5px */
.post-header--grid .author-name { line-height: 1.2; position: relative; top: 1.5px; }
.post-header--grid .post-rank-inline { position: relative; top: 1px; }

/* Кнопки внизу — без подложек и рамок: «Подписаться» — зелёный полужирный текст,
   «⋯» — просто точки. Высота 28px сохранена под палец. Без мин. ширины кнопка
   равна своему слову, и вся нижняя группа уже не выходит левее ряда наград. */
.post-header--grid .post-follow-btn-action {
  background: none; border: none; min-width: 0;
  padding: 0 2px; height: 28px;
  color: var(--primary); font-size: 13px; font-weight: 700;
}
.post-header--grid .post-follow-btn-action:active { opacity: 0.6; filter: none; }
.post-header--grid .post-menu-btn {
  background: none; border: none; color: var(--text-dim);
}
.post-header--grid .post-menu-btn:active { opacity: 0.6; }

/* Нижняя группа (слово + точки) не шире полного ряда наград (140px): убираем
   добавочные 4px у «⋯» — ритм 14px держали рамки, а рамок больше нет. */
.post-header--grid .post-menu-wrapper { margin-inline-start: 0; }

/* Отклик на подписку: слово меняется на «✓ Подписан», кнопка чуть пружинит
   и через ~1.4с гаснет — после этого её убирает React. */
.post-header--grid .post-follow-btn-action.is-flash {
  color: var(--text-muted); pointer-events: none;
  animation: follow-flash 1.4s ease forwards;
}
@keyframes follow-flash {
  0%   { transform: scale(1);    opacity: 1; }
  14%  { transform: scale(1.1);  opacity: 1; }
  28%  { transform: scale(1);    opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .post-header--grid .post-follow-btn-action.is-flash { animation: none; }
}

/* ── Облегчённая шапка поста ─────────────────────────────────────────────
   Значки 24 вместо 28: без рамок у кнопок они больше не обязаны держать
   высоту кнопки и спорили с именем. Строки 24+2+24 = 50 = аватар — правило
   «аватар от верха значков до низа кнопок» сохраняется. */
.post-header--grid { grid-template-rows: 24px 24px; }
.post-header--grid .avatar-sm,
.post-header--grid .avatar-placeholder { width: 50px; height: 50px; font-size: 18px; }
.post-header--grid .post-header-badges .author-badge-btn { width: 24px; height: 24px; }
.post-header--grid .post-header-top .post-header-badges {
  gap: 10px;
  max-width: 114px;   /* три значка (3×24 + 2×10 = 92) + зазор 10 + половина четвёртой 12 */
}
.post-header--grid .post-follow-btn-action,
.post-header--grid .post-menu-btn { height: 24px; }
.post-header--grid .post-menu-btn { width: 24px; }

/* Подсказки прокрутки наград с обеих сторон: справа — пока есть что листать,
   слева — как только ушли от начала. Обе сразу — обе стороны растворяются. */
.post-header-badges.has-less {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px);
  mask-image: linear-gradient(to right, transparent 0, #000 22px);
}
.post-header-badges.has-less.has-more {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
}

/* ── Область под фото, 10.09 ─────────────────────────────────────────────
   Один левый край (12px) у текста, записи и сердечка; ровный ритм отступов;
   строка действий без пустой полосы; цифры по центру значков. */
.post-card--feed .post-text { margin-top: 10px; margin-bottom: 10px; } /* текст по центру между фото и рядом действий */
.post-diary-block { margin: 8px var(--card-padding) 0; }
/* «Полная запись рыбалки» — лёгкая строка-ссылка вместо коробки с рамкой */
.post-diary-toggle {
  background: none; border: none; border-radius: 0;
  padding: 4px 0; gap: 7px;
  color: var(--text-dim); font-size: 13.5px; font-weight: 600;
}
.post-diary-toggle:hover { color: var(--text); }
.post-diary-toggle svg { flex-shrink: 0; }
.post-diary-chevron { color: var(--text-muted); transition: transform 0.2s; }
.post-diary-chevron.is-open { transform: rotate(180deg); }
/* Строка действий: 44px под палец, без добавочных полей; сердечко на краю текста */
.post-actions {
  padding: 0 calc(var(--card-padding) - 8px);
  margin-top: 8px;
}
.post-actions .action-btn { min-height: 44px; }
/* Цифры счётчиков: у цифр нет выносных элементов, их центр выше центра строки —
   без поправки «6», «1», «24» висели над значками */
.post-actions .action-btn > span:not(.reaction-face),
.post-actions .post-views,
.post-actions .post-actions-time { position: relative; top: 1px; }

/* В ленте на телефоне поля строке действий задаёт правило .feed-page .posts-list
   (12px) — с ним сердечко стояло на 8px правее текста. 4px = 12 − внутренние 8px
   кнопки: значок встаёт ровно на край текста. */
.feed-page .posts-list .post-actions { padding-inline: calc(var(--card-padding) - 8px); }

/* Глазик-просмотры у автора и админа — кнопка, открывает шторку «кто смотрел» */
.post-views--btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  min-height: 44px; border-radius: var(--radius-pill);
}
.post-views--btn:active { opacity: 0.6; }

/* Шторка «Просмотры» */
.viewers-list { display: flex; flex-direction: column; }
.viewers-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 2px; min-height: 52px;
  color: var(--text); text-decoration: none;
}
.viewers-row + .viewers-row { border-top: 1px solid var(--border-light); }
.viewers-ava { width: 38px; height: 38px; border-radius: var(--radius-pill); object-fit: cover; flex-shrink: 0; }
.viewers-ava--ph {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-dim); font-weight: 700;
}
.viewers-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewers-time { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.viewers-guests {
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-light);
  font-size: 12.5px; color: var(--text-muted); text-align: center; line-height: 1.5;
}
.viewers-guests b { color: var(--text-dim); }
.viewers-guests-note { opacity: 0.75; margin-top: 3px; }

/* Шторка «Запись рыбалки» */
.diary-sheet { padding-bottom: 6px; }
.diary-sheet-rows { display: flex; flex-direction: column; }
.diary-sheet-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 2px; font-size: 14px;
}
.diary-sheet-row + .diary-sheet-row { border-top: 1px solid var(--border-light); }
.diary-sheet-row span { color: var(--text-muted); flex-shrink: 0; }
.diary-sheet-row b { font-weight: 600; text-align: end; color: var(--text); }
.diary-sheet-notes { font-size: 14px; line-height: 1.55; color: var(--text-dim); white-space: pre-wrap; padding: 0 2px; }

/* Компактный низ карточки: у кнопок действий уже есть 44px зоны нажатия —
   внутри неё 12px воздуха сверху и снизу. Отступ ряда (8) и поле карточки (12)
   поверх этого давали 21px над значками и 24px под ними. Убираем добавки. */
.post-actions { margin-top: 0; }
.post-card--feed,
.feed-page .posts-list .post-card { padding-bottom: 0; }

/* Шторка «Запись рыбалки»: фото выезда, карта-превью места */
.diary-sheet-photos {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x;
}
.diary-sheet-photos::-webkit-scrollbar { display: none; }
.diary-sheet-photo {
  flex: 0 0 auto; width: 112px; height: 112px; padding: 0; border: none;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); cursor: pointer;
}
.diary-sheet-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diary-sheet-map {
  display: block; position: relative; margin: 12px 0 4px;
  height: 160px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg); text-decoration: none;
}
.diary-sheet-map > *:first-child { width: 100%; height: 100%; }
.diary-sheet-map-ph { width: 100%; height: 100%; background: var(--bg); }
.diary-sheet-map-link {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--card); color: var(--text); font-size: 12.5px; font-weight: 600;
  box-shadow: var(--shadow);
}
/* Лайтбокс поверх шторки (у шторки 3000) */
.diary-sheet-lightbox .media-lightbox { z-index: 3100; }

/* Миниатюра карты раздела «Карта» (MapPreview) — неподвижная, нажатие у ссылки-обёртки */
.map-preview { width: 100%; height: 100%; touch-action: none; }
.map-preview > * { width: 100% !important; height: 100% !important; }
.diary-sheet-map--tall { height: 220px; margin-top: 2px; }
.place-sheet-nocoords { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 12px; }
.place-sheet-open {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-weight: 700; font-size: 14px; text-decoration: none;
}

/* Панель трофея внутри шторки — без своей рамки и фона: карточка в карточке */
.trophy-sheet .trophy-panel { margin: 0; padding: 0 2px 6px; background: none; border: none; }

/* Шторка «Рекорд»: мини-таблица топа по виду */
.record-sheet-list { display: flex; flex-direction: column; }
.record-sheet-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 6px; min-height: 56px; border-radius: var(--radius-sm);
}
.record-sheet-row + .record-sheet-row { border-top: 1px solid var(--border-light); }
.record-sheet-row.is-this { background: var(--primary-bg); border-top-color: transparent; }
.record-sheet-row.is-this + .record-sheet-row { border-top-color: transparent; }
.record-sheet-rank {
  width: 22px; flex-shrink: 0; display: inline-flex; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.record-sheet-ava { width: 38px; height: 38px; border-radius: var(--radius-pill); object-fit: cover; flex-shrink: 0; }
.record-sheet-ava--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text-dim); font-weight: 700; }
.record-sheet-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.record-sheet-who b { font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-sheet-who span { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-sheet-kg { font-size: 15px; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.record-sheet-all {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 44px; margin-top: 10px;
  color: var(--primary); font-weight: 700; font-size: 14px; text-decoration: none;
}
/* Плашка рекорда стала кнопкой — сбрасываем кнопочные стили браузера */
button.post-record-badge { border: none; cursor: pointer; font-family: inherit; }

/* Шторка «Улов» */
.catch-sheet-hero { display: flex; align-items: center; gap: 12px; padding: 2px 2px 10px; }
.catch-sheet-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.catch-sheet-thumb--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--primary); }
.catch-sheet-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.catch-sheet-what b { font-size: 18px; font-weight: 800; color: var(--text); }
.catch-sheet-what span { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catch-sheet-kg { font-size: 22px; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.catch-sheet-facts { border-top: 1px solid var(--border-light); }
.catch-sheet-first {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--primary-bg); color: var(--text); font-size: 14px; font-weight: 600;
}
.catch-sheet-first svg { color: var(--primary); flex-shrink: 0; }
.catch-sheet-standing { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 4px; }
.catch-sheet-standing-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--text-dim); }
.catch-sheet-standing-line b { color: var(--text); }
.catch-sheet-record { font-size: 12.5px; color: var(--text-muted); }
.catch-sheet-bar { height: 6px; border-radius: var(--radius-pill); background: var(--bg); overflow: hidden; }
.catch-sheet-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--primary); }
.catch-sheet-top { margin-top: 8px; }

/* Шторка «Рейтинг рыбака» */
.rank-sheet-hero { display: flex; align-items: center; gap: 12px; padding: 2px 2px 12px; }
.rank-sheet-badge {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-bg); font-size: 28px;
}
.rank-sheet-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rank-sheet-what b { font-size: 18px; font-weight: 800; color: var(--text); }
.rank-sheet-what span { font-size: 12.5px; color: var(--text-muted); }
.rank-sheet-pts { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; font-weight: 800; color: var(--text); flex-shrink: 0; }
.rank-sheet-next { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 4px; }
.rank-sheet-next-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text-dim); }
.rank-sheet-next-line b { color: var(--primary); font-weight: 800; }
.rank-sheet-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rank-sheet-place {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 10px 6px; border-radius: var(--radius-sm); background: var(--bg);
}
.rank-sheet-place b { font-size: 20px; font-weight: 800; color: var(--text); }
.rank-sheet-place span { font-size: 11.5px; color: var(--text-muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rank-sheet-row { text-decoration: none; }
.rank-sheet-row-pts { font-size: 13.5px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; }

/* Шторка «Награда» */
.badge-sheet { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 0; }
.badge-sheet-art { width: 88px; height: 88px; object-fit: contain; margin: 4px 0 10px; }
.badge-sheet-title { font-size: 19px; font-weight: 800; color: var(--text); }
.badge-sheet-text { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.badge-sheet-how {
  width: 100%; box-sizing: border-box; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-sm); background: var(--primary-bg);
  display: flex; flex-direction: column; gap: 4px; text-align: start;
}
.badge-sheet-how span { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-muted); }
.badge-sheet-how b { font-size: 14px; font-weight: 600; color: var(--text); }
.badge-sheet-allbtn { background: none; border: none; cursor: pointer; font-family: inherit; width: 100%; }
.badge-catalog-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--primary); font-weight: 700; font-size: 14px; padding: 0 2px;
}
.badge-catalog-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--radius-sm); }
.badge-catalog-row + .badge-catalog-row { border-top: 1px solid var(--border-light); }
.badge-catalog-row.is-this { background: var(--primary-bg); border-top-color: transparent; }
.badge-catalog-row img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.badge-catalog-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-catalog-row b { font-size: 14px; font-weight: 700; color: var(--text); }
.badge-catalog-row span span { font-size: 12.5px; color: var(--text-muted); line-height: 1.35; }

/* Длинные списки в шторках: прокручивается только список, шапка и сноски — на месте */
.repost-sheet--split > .viewers-list,
.repost-sheet--split > .badge-catalog {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin: 0 -4px; padding: 0 4px;
}
.repost-sheet--split > .viewers-guests { margin-top: 0; }

/* Рисованный значок уровня мастерства (LeagueIcon) — по базовой линии текста */
.league-icon { display: inline-block; vertical-align: -3px; object-fit: contain; }
.rank-sheet-badge .league-icon { vertical-align: middle; }
.rank-sheet-next-name { display: inline-flex; align-items: center; gap: 5px; }
.rank-sheet-row-pts { display: inline-flex; align-items: center; gap: 5px; }
.rating-league-chip { display: inline-flex; align-items: center; gap: 4px; }
.rating-city .league-icon { margin-right: 4px; vertical-align: -3px; }

/* ── Плашки на фото листаются вбок (14.09) ───────────────────────────────
   Полоса была с pointer-events:none (чтобы тап по затемнению открывал фото),
   и iPhone её не прокручивал; к тому же плашки сжимались до значков и
   прокручивать было нечего. Теперь затемнение — отдельный слой без касаний,
   полоса — обычный горизонтальный скролл высотой с плашки. */
.post-gallery-meta-shade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.20) 50%, transparent);
  pointer-events: none;
}
.post-gallery-meta.post-gallery-meta--scroll {
  pointer-events: auto; background: none;
  padding-top: 6px; overscroll-behavior-x: contain;
}
.post-gallery-meta--scroll > * { flex-shrink: 0; }
.post-gallery-meta--scroll .post-location-text { max-width: 60vw; }
/*
 * Ф.язык — правостороннее письмо (арабский).
 *
 * Основную работу делает dir="rtl" на <html> вместе с логическими свойствами
 * CSS (margin-inline-start и т. п.): флексы, гриды, отступы и выравнивание
 * текста зеркалятся сами, без единого правила здесь.
 *
 * В этом файле только то, что зеркалить само не умеет:
 *   1. графика с направлением — стрелки, шевроны;
 *   2. абсолютное позиционирование через left/right — в App.css таких мест
 *      около двухсот, и смысл у них разный: иконку внутри поля зеркалить надо,
 *      элемент, привязанный к краю экрана, — часто нет;
 *   3. сдвиги через transform: translateX.
 *
 * Здесь закрыты типовые узлы. Экраны, где RTL важен, нужно пройти глазами —
 * автоматически такую проверку не сделать.
 */

/* ── 1. Направленная графика ─────────────────────────────────────────────── */
/* Стрелки «назад/вперёд» в RTL указывают в другую сторону. Иконки без
   направления (лупа, шестерёнка, рыба) зеркалить нельзя — отсюда точечный
   список, а не общее правило на все svg. */
[dir='rtl'] .icon-arrow-left,
[dir='rtl'] .icon-arrow-right,
[dir='rtl'] .icon-chevron-left,
[dir='rtl'] .icon-chevron-right,
[dir='rtl'] .back-btn svg,
[dir='rtl'] .page-header__back svg,
[dir='rtl'] .hdr-back svg,
[dir='rtl'] .carousel-arrow svg,
[dir='rtl'] .nav-arrow svg {
  transform: scaleX(-1);
}

/* Прогресс-полосы растут от начала строки, то есть справа. */
[dir='rtl'] .progress-bar__fill,
[dir='rtl'] .xp-bar__fill,
[dir='rtl'] .bite-bar__fill {
  transform-origin: right center;
}

/* ── 2. Позиционирование ─────────────────────────────────────────────────── */
/* Иконка и кнопка очистки внутри поля ввода. */
[dir='rtl'] .search-input__icon,
[dir='rtl'] .input-icon-left { left: auto; right: 12px; }
[dir='rtl'] .search-input__clear,
[dir='rtl'] .input-icon-right { right: auto; left: 12px; }
[dir='rtl'] .search-input input,
[dir='rtl'] .input-with-icon input { padding-inline-start: 38px; padding-inline-end: 12px; }

/* Счётчики-бейджи на иконках нижней навигации и хедера. */
[dir='rtl'] .nav-badge,
[dir='rtl'] .hdr-badge,
[dir='rtl'] .unread-badge { right: auto; left: -4px; }

/* Выпадающие меню прижимаются к началу строки. */
[dir='rtl'] .dropdown-menu,
[dir='rtl'] .avatar-menu,
[dir='rtl'] .lang-menu,
[dir='rtl'] .context-menu { right: auto; left: 0; }

/* Тосты — в противоположный угол. */
[dir='rtl'] .toast-container { right: auto; left: 16px; }

/* Модалки-шторки выезжают с той стороны, откуда читают. */
[dir='rtl'] .drawer--left { left: auto; right: 0; }
[dir='rtl'] .drawer--right { right: auto; left: 0; }

/* ── 3. Смешанный текст ──────────────────────────────────────────────────── */
/* Латиница и цифры внутри арабского абзаца: изолируем, иначе знаки препинания
   и единицы уезжают в конец предложения. Касается ников, единиц веса и URL. */
[dir='rtl'] .username,
[dir='rtl'] .user-handle,
[dir='rtl'] .fish-weight,
[dir='rtl'] .fish-length,
[dir='rtl'] .stat-value,
[dir='rtl'] .phone,
[dir='rtl'] .url,
[dir='rtl'] code {
  unicode-bidi: isolate;
}

/* Время и даты всегда читаются слева направо, даже в арабской строке. */
[dir='rtl'] time,
[dir='rtl'] .timestamp { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Поля ввода телефона, email и URL — латиница, ввод слева направо. */
[dir='rtl'] input[type='tel'],
[dir='rtl'] input[type='email'],
[dir='rtl'] input[type='url'],
[dir='rtl'] input[type='number'] { direction: ltr; text-align: start; }

/* ── 4. Шрифт ────────────────────────────────────────────────────────────── */
/* У арабской вязи выше линия строки: с межстрочным интервалом латиницы
   надстрочные знаки обрезаются соседней строкой. */
[dir='rtl'] body { line-height: 1.75; }
[dir='rtl'] h1, [dir='rtl'] h2, [dir='rtl'] h3 { line-height: 1.5; }

/* ── 5. Шапка на мобильном ────────────────────────────────────────────────── */
/* Аватар, кнопка создания и сообщения зафиксированы через right со сдвигом
   друг относительно друга (--hdr-btn-right/--hdr-gap). В RTL они уезжают
   на противоположный край и наезжали друг на друга — задаём тот же ряд
   от левого края, сохраняя порядок и шаг. */
@media (max-width: 767px) {
  [dir='rtl'] .header-avatar-fixed {
    right: auto;
    left: 12px;
  }
  [dir='rtl'] .header-fab-fixed {
    right: auto;
    left: calc(12px + var(--hdr-btn-right) + var(--hdr-gap));
  }
  [dir='rtl'] .header-msg-fixed {
    right: auto;
    left: calc(12px + 2 * (var(--hdr-btn-right) + var(--hdr-gap)));
  }
  /* Счётчик непрочитанного на кнопке — в зеркальный угол. */
  [dir='rtl'] .header-msg-fixed .hdr-badge,
  [dir='rtl'] .header-fab-fixed .hdr-badge {
    right: auto;
    left: -5px;
  }
}