:root {
    --bg: #fbf8f4;
    --card: #ffffff;
    --ink: #23201c;
    --muted: #7a736a;
    --line: #e8e2d9;
    --accent: #2f6b4f;
    --accent-soft: #e6f0ea;
    /* Текст на акцентном фоне. Отдельным токеном, потому что в тёмной теме
       акцент светлый и белые буквы на нём читаются плохо */
    --on-accent: #ffffff;
    --home: #2f6b4f;
    --lost: #c2410c;
    --found: #1d6fa5;
    --help: #b91c1c;
    --ask: #6d5bd0;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(35, 32, 28, .06), 0 8px 24px rgba(35, 32, 28, .05);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16150f;
        --card: #211f1a;
        --ink: #f0ece4;
        --muted: #a49c90;
        --line: #322f28;
        --accent: #79c39b;
        --accent-soft: #223229;
        --on-accent: #10231a;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

/* Атрибут hidden обязан прятать элемент, даже когда у него задан свой
   display. Браузерное [hidden] {display:none} — стиль user-agent, и любое
   авторское правило его перебивает: из-за «.cf-item { display: flex }»
   поиск по городам считал совпадения правильно, а показывал весь список */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- шапка */

.top {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.top-inner { display: flex; align-items: center; gap: 16px; height: 62px; }

.logo { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; font-weight: 700; text-decoration: none; font-size: 18px; }
.logo span.paw { font-size: 22px; }

/* Навигация занимает всё место справа от логотипа. Строка разделов
   (.nav-items) сжимается и обрезается, а nav.js переносит не влезшие
   разделы в меню — сколько бы их ни было и какой бы ни был экран */
.nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: 1 1 auto; min-width: 0; }
.nav-items { display: flex; align-items: center; gap: 18px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.nav a { flex: 0 0 auto; text-decoration: none; color: var(--muted); font-size: 15px; white-space: nowrap; }
.nav a:hover { color: var(--ink); }

/* Значки разделов видны только в меню; в строке — один поиск, и у него
   наоборот прячется слово */
.nav-items .nav-ic { display: none; }
.nav-items .nav-find .nav-ic { display: inline; }
.nav-items .nav-find .nav-word { display: none; }
.nav-items .nav-me { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }

.nav-more { position: relative; flex: 0 0 auto; }
.nav-toggle {
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    border-radius: 999px; padding: 7px 12px; cursor: pointer;
    font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.nav-collapsed .nav-toggle { font-size: 19px; padding: 3px 11px 4px; }

.nav-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    min-width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 12px 36px rgba(35, 32, 28, .18);
}
.nav-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; font-size: 15.5px; color: var(--ink);
}
.nav-menu a:hover { background: var(--accent-soft); color: var(--ink); }
.nav .nav-menu a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; box-shadow: none; }
.nav-menu .nav-ic { width: 26px; text-align: center; font-size: 18px; }
/* Поиск и вход — не разделы: отделяем чертой, когда они попали в меню */
.nav-menu .nav-find { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
.nav-menu .nav-find .nav-word { display: inline; }

/* Активный раздел: одного лишь потемнения текста не видно — рядом
   десяток таких же ссылок. Подчёркиваем акцентом */
.nav a.on {
    color: var(--accent); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--accent);
}
.nav a.btn.on { box-shadow: none; }

/* Переключатель в одну строку: вкладки состояния, разделы помощи */
.seg-state { margin: 12px 0 4px; }

/* Кнопка «добавить» стояла под списком и сноской — до неё не доскролливали.
   Теперь она в начале страницы, сразу под заголовком */
.dir-actions { margin: 14px 0 0; }
.seg-state b { font-weight: 600; opacity: .7; margin-left: 4px; }

/* Пустая вкладка остаётся на виду со своим нулём: «Активные 0» отвечает
   на вопрос лучше, чем исчезнувший переключатель */
.seg-state .off {
    padding: 7px 14px; border-radius: 999px; font-size: 14px;
    border: 1px dashed var(--line); color: var(--muted); opacity: .65;
}
/* Кнопка внутри навигации: правило .nav a специфичнее .btn и перекрашивало
   её в приглушённый цвет — текст на зелёном фоне становился нечитаемым */
.nav a.btn, .nav a.btn:hover { color: var(--on-accent); }

.btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent); color: var(--on-accent); text-decoration: none;
    padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: 15px;
    border: 0; cursor: pointer;
}

/* Кнопка в шапке: компактнее по площади, но контрастнее и читабельнее —
   плюс-иконка вместо лишней ширины, тень вместо размера */
.top .btn {
    padding: 7px 14px 7px 11px;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: .005em;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent);
}
.top .btn::before {
    content: '+';
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    margin-top: -1px;
}
.top .btn:hover { box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 560px) {
    .top-inner { gap: 10px; }
    .nav { gap: 8px; }
    .nav-items { gap: 12px; }
    .logo { font-size: 17px; }
    .top .btn { padding: 7px 12px 7px 10px; font-size: 14px; }
    /* Меню — полоса во всю ширину сразу под шапкой (шапка липкая,
       поэтому меню остаётся на экране, где бы ни была прокрутка) */
    .nav-more { position: static; }
    .nav-menu {
        left: 0; right: 0; top: 100%;
        border-radius: 0 0 18px 18px; border-top: 0;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
        max-height: calc(100vh - 62px); overflow-y: auto;
    }
    .nav-menu a { font-size: 16px; padding: 11px 12px; }
}

/* ---------------------------------------------------------------- герой */

.hero { padding: 34px 0 22px; }
.hero h1 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 40px); line-height: 1.15; letter-spacing: -.02em; }
.hero p { margin: 0; color: var(--muted); max-width: 62ch; font-size: 17px; }
.hero .stats { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
/* Пара кнопок под текстом: строчные элементы переносятся вплотную,
   и на телефоне «Разместить» упиралось в «На карте» */
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.stat b { display: block; font-size: 24px; }
.stat span { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- фильтры */

.filters { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.chip {
    flex: 0 0 auto; text-decoration: none; font-size: 14px;
    padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--card); color: var(--muted); white-space: nowrap;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip b { font-weight: 600; }

/* Сброс фильтров — тоже чип, но приглушённый: это не ещё один вариант
   выбора, а выход из выбранного */
.cf-reset { color: var(--muted); border-style: dashed; }
.cf-reset:hover { color: var(--ink); border-style: solid; }

/* Пока список едет с сервера, гасим прежний: иначе непонятно, успел
   поиск отработать или нашлось ровно то же самое */
.dir-waiting { opacity: .45; transition: opacity .15s ease; }

/* Страница по QR с жетона: её читают на улице, одной рукой */
.pet { max-width: 560px; margin: 0 auto; text-align: center; }
.pet-head h1 { margin: 0 0 4px; }
.pet-sub { margin: 0 0 16px; color: var(--muted); }
.pet-photo {
    width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
    display: block; margin-bottom: 16px;
}
.pet-note {
    text-align: left; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.pet-lost {
    background: var(--accent-soft); border-radius: var(--radius);
    padding: 12px 14px; margin-bottom: 16px;
    display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.pet-contact { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pet-contact p { margin: 0; }
.btn.big { font-size: 20px; padding: 14px 28px; }
.pet-hint { color: var(--muted); font-size: 14px; margin-top: 22px; }

/* Маршрутный лист: список номеров, по которым звонят в первый день */
.callsheet {
    margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); padding: 10px 14px;
}
.callsheet summary { cursor: pointer; font-weight: 600; }
.callsheet[open] summary { margin-bottom: 8px; }
.callsheet-head { display: block; margin: 10px 0 6px; font-size: 14px; }
.callsheet-list { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 8px; }
.callsheet-list li {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.callsheet-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.callsheet-name { flex: 1; min-width: 150px; }
.callsheet-away { color: var(--muted); font-size: 13px; }
.callsheet-phone { font-weight: 600; white-space: nowrap; }

/* Ориентировка: свёрнутый блок — нужен не каждому, кто открыл карточку */
.poster {
    margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); padding: 10px 14px;
}
.poster summary { cursor: pointer; font-weight: 600; }
.poster[open] summary { margin-bottom: 8px; }
.poster form { display: flex; gap: 8px; flex-wrap: wrap; }
.poster input {
    flex: 1; min-width: 190px; padding: 10px 12px; border-radius: 10px; font: inherit;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.poster input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.poster-note { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
.poster-note:last-child { margin: 8px 0 0; }

.search { display: flex; gap: 8px; }
.search input {
    flex: 1; padding: 11px 14px; border-radius: 999px; font-size: 15px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------------------------------------------------------------- карточки */

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

.card {
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(35,32,28,.08), 0 14px 34px rgba(35,32,28,.09); }

.thumb { position: relative; aspect-ratio: 4 / 3; background: var(--accent-soft); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .empty { display: grid; place-items: center; height: 100%; font-size: 44px; opacity: .5; }

.badge {
    position: absolute; left: 10px; top: 10px;
    background: rgba(255,255,255,.94); color: var(--home);
    padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.badge.lost { color: var(--lost); }
.badge.found { color: var(--found); }
.badge.help { color: var(--help); }
.badge.ask { color: var(--ask); }
.badge.done { background: var(--home); color: #fff; }

.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-city { font-weight: 600; font-size: 15px; }
.card-text { color: var(--muted); font-size: 14px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { margin-top: auto; color: var(--muted); font-size: 13px; }
/* Глазик с просмотрами: служебная цифра, потому тихая — тем же цветом, что дата */
.views { margin-left: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; opacity: .85; }

/* ---------------------------------------------------------------- карточка объявления */

.detail { display: grid; grid-template-columns: 1.25fr .85fr; gap: 28px; padding: 24px 0 40px; }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; gap: 20px; } }

.gallery { display: grid; gap: 10px; }
.gallery img { width: 100%; border-radius: var(--radius); display: block; }
.gallery .more { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.gallery .more img { aspect-ratio: 1; object-fit: cover; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.panel h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.01em; }
.panel .where { color: var(--muted); margin-bottom: 14px; font-size: 15px; }
.panel .text { white-space: pre-wrap; margin: 0 0 18px; }
.panel .actions { display: flex; flex-direction: column; gap: 9px; }

.mini-map { height: 240px; border-radius: var(--radius); margin-top: 14px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- карта */

#map { height: calc(100vh - 210px); min-height: 420px; border-radius: var(--radius); border: 1px solid var(--line); }
/* Карта — в своём контексте наложения: у Leaflet слои z-index 400 и
   кнопки 1000, и без z-index на контейнере они всплывают над раскрытыми
   панелями фильтров (z-index 30/60), которые стоят над картой */
#map, .pick-map, .leaflet-container { position: relative; z-index: 0; }
.leaflet-popup-content { margin: 12px 14px; font: 14px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; }

/* Группа меток: кружок с числом того же цвета, что метки в ней (если
   категория одна). Ножки «веера» рисует сам плагин (MarkerCluster.css) */
.cluster {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    color: #fff; font: 700 14px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.leaflet-cluster-anim .leaflet-marker-icon { transition: transform .25s ease-out, opacity .25s ease-in; }

/* Окно маркера: миниатюра обложки слева, текст справа; у видео — значок
   воспроизведения поверх кадра */
.map-pop { display: flex; gap: 10px; align-items: flex-start; min-width: 230px; max-width: 300px; }
.map-pop .mp-pic { position: relative; flex: 0 0 96px; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: #e6f0ea; }
.map-pop .mp-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-pop .mp-pic.video::after {
    content: '▶'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
    font-size: 13px; line-height: 28px; text-align: center; padding-left: 2px;
}
.map-pop .mp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.map-pop .mp-body span { color: #555; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.map-pop .mp-body a { font-weight: 600; }
.pin { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.pin span { transform: rotate(45deg); font-size: 15px; }

/* ---------------------------------------------------------------- прочее */

.pager { display: flex; gap: 8px; justify-content: center; margin: 28px 0; flex-wrap: wrap; }
.pager a, .pager span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; background: var(--card); font-size: 14px; }
.pager .cur { background: var(--accent); border-color: var(--accent); color: #fff; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .big { font-size: 46px; margin-bottom: 10px; }

/* Кнопки пустого состояния — колонкой по центру. Инлайновыми ссылками
   они на телефоне переносились и наезжали друг на друга: между строками
   инлайна нет вертикального зазора */
.empty-state .btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 6px 4px;
}
@media (max-width: 560px) {
    .empty-state .btn { display: flex; width: 100%; max-width: 340px;
                        margin: 6px auto; }
}

.section-title { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.section-title h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.section-title a { margin-left: auto; color: var(--accent); text-decoration: none; font-size: 15px; }

.list { display: grid; gap: 10px; }
.row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.row b { display: block; }
.row small { color: var(--muted); }

.foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 22px 0 34px; color: var(--muted); font-size: 14px; }
.foot a { color: var(--muted); }
.foot .cols { display: flex; gap: 26px; flex-wrap: wrap; }

.shelter-tag {
    display: inline-block; font-size: 12.5px; font-weight: 600;
    color: var(--accent); background: var(--accent-soft);
    padding: 3px 9px; border-radius: 999px;
}
.row p { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }
.row .btn { margin-top: 10px; }

.article { max-width: 68ch; margin: 0 auto 30px; }
/* Статья-инструкция: читается с телефона, поэтому крупнее и просторнее
   обычного текста сайта */
.article h1 { font-size: 28px; line-height: 1.2; margin: 6px 0 10px; }
.article h2 { font-size: 21px; margin: 26px 0 8px; }
.article-lead { font-size: 17px; color: var(--muted); margin: 0 0 18px; }
.article-cover { width: 100%; border-radius: var(--radius); margin: 0 0 18px; }
.article ul, .article ol { margin: 0 0 14px; padding-left: 22px; }
.article li { margin-bottom: 6px; }
.article blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--accent);
    background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.crumbs { color: var(--muted); font-size: 13.5px; margin: 14px 0 4px; }
.crumbs a { color: var(--muted); }
.faq { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: var(--card); }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin: 8px 0 0; color: var(--muted); }
.next-steps ul { margin: 8px 0 0; padding-left: 20px; }
.article h3 { margin: 22px 0 8px; font-size: 18px; }
.article p { margin: 0 0 12px; }
.article p:last-child { margin-bottom: 0; }

.card-wrap { position: relative; }
.fav {
    position: absolute; right: 8px; top: 8px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    border: 0; background: rgba(255, 255, 255, .92); color: #b9b2a8;
    font-size: 17px; line-height: 1; box-shadow: 0 1px 4px rgba(35, 32, 28, .18);
    transition: transform .12s ease, color .12s ease;
}
.fav:hover { transform: scale(1.08); color: #c2410c; }
.fav.on { color: #c2410c; }

/* ---------------------------------------------------------------- галерея */

.gallery img { cursor: zoom-in; }
.gallery .more img {
    cursor: pointer; opacity: .85;
    transition: opacity .12s ease, outline-color .12s ease;
    outline: 2px solid transparent; outline-offset: -2px;
}
.gallery .more img:hover { opacity: 1; }
.gallery .more img.on { opacity: 1; outline-color: var(--accent); }

/* Видео не храним у себя: показываем кадр-обложку со ссылкой в канал */
.play {
    position: relative; display: block; border-radius: var(--radius); overflow: hidden;
}
.play img { width: 100%; display: block; }
.play::after {
    content: '▶';
    position: absolute; inset: 0; margin: auto;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 20px; padding-left: 4px;
}
.play span {
    position: absolute; left: 10px; bottom: 10px; z-index: 2;
    background: rgba(0, 0, 0, .6); color: #fff;
    padding: 3px 9px; border-radius: 999px; font-size: 12.5px;
}
.gallery .more .play { aspect-ratio: 1; }
.gallery .more .play img { height: 100%; object-fit: cover; }
.gallery .more .play::after { width: 34px; height: 34px; font-size: 14px; }

#lightbox {
    /* Выше карты: у элементов управления Leaflet z-index 1000 */
    position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .88);
    display: grid; place-items: center; padding: 20px; cursor: zoom-out;
}
/* Без этого правила плёнка висит поверх страницы всегда: любой авторский
   display перебивает атрибут hidden из стилей браузера */
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
#lightbox button {
    position: absolute; right: 16px; top: 16px; width: 40px; height: 40px;
    border-radius: 50%; border: 0; cursor: pointer; font-size: 18px;
    background: rgba(255, 255, 255, .16); color: #fff;
}

/* ---------------------------------------------------------------- справочник */

.dir-grid {
    display: grid; gap: 14px; margin-top: 18px;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

.dir-card {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 16px 16px 14px;
    box-shadow: var(--shadow);
    transition: transform .14s ease, box-shadow .14s ease;
}
.dir-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(35,32,28,.08), 0 14px 30px rgba(35,32,28,.08); }

.dir-card .head { display: flex; gap: 11px; align-items: flex-start; }
.dir-card .ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 19px;
    background: var(--accent-soft);
}
.dir-card .name { font-weight: 650; line-height: 1.3; }
.dir-card .where { color: var(--muted); font-size: 14px; margin-top: 3px; }

.dir-card .links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; }
.dir-card .links a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; text-decoration: none; padding: 6px 11px;
    border-radius: 999px; border: 1px solid var(--line); color: var(--ink);
    background: transparent;
}
.dir-card .links a:hover { border-color: var(--accent); color: var(--accent); }
.dir-card .links a.phone { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }

.tag-people {
    display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
    padding: 3px 8px; border-radius: 6px; margin-left: 6px; vertical-align: 2px;
}

.dir-note {
    color: var(--muted); font-size: 13px; margin-top: 24px;
    padding-top: 14px; border-top: 1px solid var(--line);
}
.dir-note a { color: var(--muted); }

.split-title {
    display: flex; align-items: baseline; gap: 10px; margin: 30px 0 4px;
}
.split-title h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.split-title span { color: var(--muted); font-size: 14px; }

/* ---------------------------------------------------------------- фильтр городов */

.cityfilter { position: relative; display: inline-flex; align-items: center; gap: 10px; }

.cf-trigger {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--card); border: 1px solid var(--line); color: var(--ink);
    padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 600;
    font-family: inherit;
}
.cf-trigger:hover { border-color: var(--accent); }
/* Фильтр с выбранным значением: в строке из пяти одинаковых кнопок
   иначе не видно, какие сейчас действуют */
.cf-trigger.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cf-trigger.on .cf-arrow { color: var(--accent); }
/* Подпись кнопки постоянная («Города»), выбранное — бейджем: счётчик
   или значение («2», «50 км», «Новые») */
.cf-badge {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    background: var(--accent); color: var(--on-accent);
    font-size: 12.5px; font-weight: 700; line-height: 1.5; white-space: nowrap;
    max-width: 12ch; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.cf-pin { font-size: 16px; }
.cf-arrow { color: var(--muted); font-size: 12px; }
.cf-hint { color: var(--muted); font-size: 13px; }

.cf-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    width: min(360px, calc(100vw - 32px));
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 8px 30px rgba(35, 32, 28, .16);
    padding: 12px; display: flex; flex-direction: column; gap: 10px;
    /* Палец по панели не должен листать страницу под ней: прокручивается
       только внутренний список, у него своё touch-action ниже */
    touch-action: none; overscroll-behavior: contain;
}
.cf-panel[hidden] { display: none; }

/* Подложка на весь экран: ловит касания мимо панели и закрывает её по тапу.
   Нужна только на телефоне — на широком экране список висит под кнопкой. */
.cf-backdrop {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(35, 32, 28, .42);
    /* pan-y, а не none: панель стоит в потоке страницы под своей кнопкой,
       и если она не влезла в экран, страницу должно быть можно домотать */
    touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.cf-backdrop[hidden] { display: none; }
@media (min-width: 561px) { .cf-backdrop { display: none; } }

.cf-top { display: flex; gap: 8px; }
.cf-search {
    flex: 1; padding: 9px 12px; border-radius: 10px; font-size: 15px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.cf-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.cf-x {
    width: 36px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--bg); color: var(--muted); font-size: 15px;
}

.cf-cap {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); margin: 2px 0 6px;
}
.cf-link {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    color: var(--accent); font-size: 12px; font-weight: 600; text-transform: none;
    letter-spacing: 0; font-family: inherit;
}

.cf-scroll {
    /* Колонка, а не просто блок: порядок строк при поиске задаётся через
       order — переставлять полторы тысячи узлов на каждое нажатие дорого */
    display: flex; flex-direction: column;
    max-height: 46vh; overflow-y: auto;
    /* contain — чтобы прокрутка не «перетекала» на страницу, когда список
       домотан до конца; pan-y — чтобы сам список листался пальцем */
    overscroll-behavior: contain; touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.cf-item {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 7px 8px; border-radius: 9px; font-size: 15px;
}
.cf-item:hover { background: var(--accent-soft); }
.cf-item input { width: 17px; height: 17px; accent-color: var(--accent); }
.cf-item span { flex: 1; }
.cf-item b { color: var(--muted); font-weight: 500; font-size: 13px; }

.cf-empty { color: var(--muted); font-size: 14px; padding: 10px 8px; }
.cf-count { color: var(--muted); font-size: 12.5px; padding: 0 2px; }

/* Быстрые переходы в профиле: свои объявления, избранное, свой город */
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }

/* Галерея: видео главным и в миниатюрах — со значком, открывается в окне */
.video-main, .thumb-video { position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: #1c1b19; border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.video-main img, .thumb-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-main { aspect-ratio: 16 / 10; }
.thumb-video { aspect-ratio: 1; }
.video-main .video-hint { position: absolute; left: 12px; bottom: 12px; color: #fff; font-weight: 700;
  background: rgba(0,0,0,.55); padding: 6px 12px; border-radius: 999px; font-size: 14px; }
.play-mark.big { width: 64px; height: 64px; font-size: 26px; }
.gallery .more .thumb-video { outline: 2px solid transparent; }
.gallery .more .thumb-video:hover { outline-color: var(--accent); }

#videobox { position: fixed; inset: 0; z-index: 2000; background: rgba(18, 17, 15, .92);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
#videobox[hidden] { display: none; }
.vb-wrap { width: min(960px, 100%); display: flex; flex-direction: column; gap: 10px; }
.vb-media video, .vb-media iframe { width: 100%; max-height: 78vh; background: #000;
  border-radius: var(--radius); display: block; }
.vb-media iframe { height: 70vh; border: 0; }
.vb-bar { display: flex; justify-content: flex-end; gap: 8px; }
.vb-bar .btn { color: #fff; border-color: rgba(255,255,255,.35); }
.vb-wrap.full { position: fixed; inset: 0; width: auto; padding: 8px; background: #000; }
.vb-wrap.full .vb-media video { max-height: calc(100vh - 60px); }
.vb-wrap:fullscreen { background: #000; padding: 8px; }
.vb-wrap:fullscreen .vb-media video { max-height: calc(100vh - 60px); }

/* Полоса с результатом действия: «имя сохранено» и т. п. */
.flash { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.flash.error { background: #fde8e8; color: #9b1c1c; }

/* Смена имени в кабинете и мини-аппе */
.name-edit { margin: 6px 0 10px; }
.name-edit summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.name-form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.name-form input { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--line, #d8ddd6);
  border-radius: 10px; font: inherit; }

/* Автор на карточке объявления */
.author-box { margin: 0 0 12px; }
.author-box .links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Перекрёстные ссылки города под шапкой раздела */
.city-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.city-links .btn { font-size: 13.5px; padding: 6px 12px; }
.mod-text { margin-top: 10px; }
.mod-text summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.mod-text textarea { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px;
  border: 1px solid var(--line, #d8ddd6); border-radius: 10px; font: inherit; resize: vertical; }
.quick-links b { font-weight: 700; opacity: .65; margin-left: 2px; }

/* Кнопка внутри строки: отвязка мессенджера — форма, а не ссылка */
.inline-form { display: inline; }

/* Полоска «подпишитесь на канал». Не баннер во весь экран: это подсказка,
   а не требование — подписан человек или нет, сайт всё равно не знает */
.subscribe {
    position: relative;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 16px 0 0; padding: 12px 44px 12px 14px;
    background: var(--accent-soft); border: 1px solid var(--line);
    border-radius: var(--radius); font-size: 14.5px;
}
.sub-text { flex: 1 1 260px; }
/* Две одинаковые кнопки — Telegram и MAX: сайт не знает, каким мессенджером
   пользуется человек. Текст в кнопке не переносится, на узком экране
   кнопки делят строку поровну */
.sub-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.sub-actions .btn { white-space: nowrap; flex: 1 1 auto; justify-content: center; }
.sub-close {
    position: absolute; top: 6px; right: 6px;
    width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--muted); font-size: 15px;
}
.sub-close:hover { background: var(--card); color: var(--ink); }

/* ------------------------------------------------------------- обсуждение */

.comments { margin-top: 28px; }
.comment-list { display: flex; flex-direction: column; gap: 12px; }
.comment {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px 14px;
}
.comment-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 14px; margin-bottom: 4px;
}
.comment-head time { color: var(--muted); font-size: 13px; }
.comment p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-hide {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    color: var(--muted); font-size: 14px; padding: 2px 6px; border-radius: 6px;
}
.comment-hide:hover { background: var(--accent-soft); color: var(--ink); }
/* Цитата: ответ читается только вместе с тем, на что отвечают. Держим её
   короткой — полный текст всё равно рядом, выше в ветке */
.comment-quote {
    border-left: 3px solid var(--line); padding: 1px 0 1px 9px;
    margin-bottom: 7px; font-size: 13px; color: var(--muted);
    display: flex; gap: 6px; flex-wrap: wrap;
}
.comment-quote b { color: var(--ink); font-weight: 600; }
.comment-quote span { overflow-wrap: anywhere; }
.comment-reply {
    margin-top: 8px; border: 0; background: none; cursor: pointer;
    color: var(--accent); font-size: 13.5px; padding: 0; border-radius: 6px;
}
.comment-reply:hover { text-decoration: underline; }
.comment-answer {
    display: flex; align-items: center; gap: 8px; font-size: 13.5px;
    color: var(--muted); background: var(--accent-soft);
    border-radius: 10px; padding: 6px 10px;
}
.comment-answer b { color: var(--ink); }
.comment-answer button {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    color: var(--muted); font-size: 14px; padding: 0 4px;
}

.comment-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.comment-form textarea, .comment-name {
    width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
    resize: vertical;
}
.comment-form textarea:focus, .comment-name:focus {
    outline: 2px solid var(--accent); outline-offset: -1px;
}
.comment-actions { display: flex; align-items: center; gap: 10px; }
.comment-note { color: var(--muted); font-size: 13.5px; }
.comment-note.bad { color: #b91c1c; }

/* Ловушка для ботов: поле есть в разметке, но человек его не видит и
   не может выбрать клавишей Tab */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Блок удаления данных. Отделён рамкой, но не выкрашен в красный: это
   законное право человека, а не опасная кнопка, от которой отговаривают */
.danger-zone { border-color: #d9c9c0; }
.danger-zone b { display: block; margin-bottom: 2px; }

/* Одиночный выбор: пункт списка — ссылка, а не галочка. Город выбирают
   всегда один, и шаг «отметить, потом нажать Показать» здесь только лишний */
.cf-one { color: inherit; text-decoration: none; }
.cf-one.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.cf-one.on b { color: var(--accent); }

/* Переключатель порядка: по числу записей, по алфавиту или от вашей точки.
   Больше тысячи городов надо чем-то упорядочить, и одного порядка мало —
   «где больше клиник» и «что ко мне ближе» это разные вопросы */
.cf-sort { display: flex; gap: 6px; flex-wrap: wrap; }
.cf-sort a {
    flex: 1 1 auto; text-align: center; text-decoration: none; white-space: nowrap;
    padding: 6px 10px; border-radius: 999px; font-size: 13px;
    background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.cf-sort a.on {
    background: var(--accent-soft); color: var(--accent);
    border-color: var(--accent); font-weight: 600;
}
.cf-foot { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.cf-foot .btn { flex: 1; justify-content: center; }

/* Списки одиночного выбора (радиус, порядок): заголовок с крестиком,
   пункт с пояснением второй строкой, галочка у выбранного */
.cf-cap .cf-x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; }
.cf-pick .cf-group { display: flex; flex-direction: column; }
.cf-one small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); line-height: 1.3; }
.cf-one .cf-ic { flex: 0 0 auto; width: 22px; text-align: center; }
.cf-one.on b { font-weight: 700; }
.cf-note { color: var(--muted); font-size: 12.5px; padding: 6px 8px 0; border-top: 1px solid var(--line); }

@media (max-width: 560px) {
    /* На телефоне панель — во всю ширину строки фильтров, ПОД нажатой
       кнопкой (top ставит filter.js), а не fixed у верха экрана: в
       мини-аппах fixed местами считается от верха страницы, и после
       прокрутки открытый список оставался за кадром. Кнопку человек
       только что нажал — значит, она на экране, и панель под ней тоже.
       Не к низу: высота окна мини-аппа не совпадает со 100vh, пока оно
       не развёрнуто, и нижняя шторка уезжала за край */
    .filter-row .cf-panel {
        position: absolute; left: 0; right: 0; top: 100%; width: auto;
        z-index: 60;
        max-height: min(58vh, 480px);
        box-shadow: 0 14px 40px rgba(35, 32, 28, .28);
    }
    /* Высоту задаёт панель, список занимает остаток: min-height нужен,
       иначе flex-элемент не даёт себя сжать и прокрутка не появляется */
    .cf-scroll { max-height: none; flex: 1 1 auto; min-height: 0; }
}

/* Строка фильтров: пять одинаковых кнопок-списков. Переносится,
   когда не влезает, но подсказки всегда уходят в конец (order),
   чтобы не разрывать ряд кнопок посередине */
.filter-row {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 14px;
}
.filter-row .cityfilter { position: relative; }
.filter-row .cf-hint { flex-basis: 100%; order: 10; }

/* Кнопки не сжимаются: строка фильтров переносит их целиком, а не плющит */
.filter-row > .cityfilter { flex: 0 0 auto; max-width: 100%; }

/* «Показаны ваши города из бота: …» — под фильтрами. Заметно, но тихо:
   мягкий фон и полоска слева, без рамки и без иконок-восклицаний */
.city-notice {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    margin-top: 10px; padding: 8px 12px;
    background: var(--accent-soft); border-left: 3px solid var(--accent);
    border-radius: 10px; font-size: 14px; color: var(--muted);
}
.city-notice .cn-ic { font-size: 15px; }
.city-notice .cn-text { flex: 1 1 200px; }
.city-notice b { color: var(--ink); font-weight: 600; }
.city-notice .cn-link {
    margin-left: auto; color: var(--accent); font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.city-notice .cn-link:hover { text-decoration: underline; }

/* Надпись на кнопке не должна ломаться на две строки внутри пилюли,
   а длинное название — распирать её на весь экран */
.cf-trigger { white-space: nowrap; }
.cf-label { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
    /* Кнопки растягиваются по ширине ряда: два-три ровных ряда вместо
       рваной строки разной длины. Значок слева, стрелка справа.
       position: static — чтобы панель считала left/right от всей строки
       фильтров, а не от своей кнопки (правило стоит ПОСЛЕ relative выше) */
    .filter-row > .cityfilter { flex: 1 1 auto; position: static; }
    .filter-row .cf-trigger { width: 100%; padding: 8px 12px; font-size: 14.5px; gap: 6px; }
    .filter-row .cf-label { flex: 1; text-align: left; max-width: none; }
    .filter-row .chip { flex: 0 0 auto; }
}

.dir-card .head { position: relative; }
/* Часы работы и значок круглосуточной: главный вопрос к справочнику —
   «а сейчас открыто?», и ответ должен быть виден в карточке */
.dir-card .hours { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
/* «Уточнить» — тише телефона и карты: это приглашение помочь, а не действие,
   за которым пришли */
.fix-link { color: var(--muted); font-size: 13px; }
.tag-24 { background: #fdecec; color: #b3261e; }
.away {
    margin-left: auto; flex: 0 0 auto; align-self: flex-start;
    font-size: 12.5px; font-weight: 700; color: var(--accent);
    background: var(--accent-soft); padding: 4px 9px; border-radius: 999px;
    white-space: nowrap;
}

/* Переключатель разделов помощи в мини-аппе: клиники или приюты */
.seg { display: flex; gap: 6px; margin: 10px 0 6px; }
.seg a {
    flex: 1; text-align: center; text-decoration: none; font-size: 14.5px;
    font-weight: 600; color: var(--muted); padding: 9px 0; border-radius: 12px;
    background: var(--card); border: 1px solid var(--line);
}
.seg a.on { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }

.dir-about { margin: 0; color: var(--muted); font-size: 14px; }

/* ------------------------------------------------------------------ поиск */

.searchbox { display: flex; gap: 8px; margin: 14px 0 8px; }
.searchbox input {
    /* 16px обязательны: при меньшем размере Safari на айфоне зумит страницу,
       как только палец попадает в поле */
    flex: 1; min-width: 0; padding: 11px 14px; font-size: 16px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); color: var(--ink); font-family: inherit;
}
.searchbox input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.searchbox .btn { white-space: nowrap; }

/* Кнопка модератора на карточке списка: закрыть чужое объявление в один тап.
   Действие выполняет бот — у сайта нет прав менять статус */
.mod-close {
    position: absolute; left: 8px; top: 8px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--card); border: 1px solid var(--line);
    color: var(--muted); text-decoration: none; font-size: 15px;
}
.mod-close:hover { color: var(--accent); border-color: var(--accent); }

/* Отметка о льготной стерилизации — заметнее обычной метки: ради неё
   человек и открывает список клиник */
.tag-ster { background: var(--accent-soft); color: var(--accent); }


/* Код входа: должен читаться посимвольно и легко выделяться */
.code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-row code {
    font-size: 17px; letter-spacing: .04em; padding: 9px 14px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
    user-select: all;
}

/* -------------------------------------------------------- панель модератора */

.mod-panel {
    margin-top: 16px; padding: 14px; border-radius: var(--radius);
    background: var(--card); border: 1px dashed var(--line);
}
.mod-panel b { display: block; margin-bottom: 10px; color: var(--muted);
               font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.mod-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
           margin-bottom: 8px; }
.mod-row select {
    flex: 1; min-width: 160px; padding: 9px 12px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    font-family: inherit; font-size: 15px;
}
.mod-note { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.mod-panel button[disabled] { opacity: .55; cursor: default; }

/* Кнопка «Назад» над карточкой: маленькая, не спорит с содержимым */
.back-row { margin: 14px 0 4px; }
.back-row .btn { padding: 6px 14px; font-size: 14px; }

/* Снимок в списке «Мои объявления»: узнать своё объявление с одного взгляда */
.row-photo { display: block; margin-bottom: 10px; }
.row-photo img {
    width: 100%; max-height: 180px; object-fit: cover;
    border-radius: 12px; display: block;
}

/* Маркер-лапка на карте объявления. Своя иконка Leaflet — обычный div,
   поэтому картинку грузить не нужно */
.paw-pin { display: grid; place-items: center; }
.paw-pin span {
    font-size: 22px; line-height: 1;
    width: 36px; height: 36px; display: grid; place-items: center;
    background: var(--card); border: 2px solid var(--accent);
    border-radius: 50% 50% 50% 8px;      /* капля: угол смотрит на точку */
    box-shadow: 0 3px 10px rgba(35, 32, 28, .3);
}
/* Точка не своя, а городская — маркер приглушён, чтобы не выдавать
   центр города за место находки */
.paw-pin.soft span { border-color: var(--line); opacity: .85; }

.map-note { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }

/* Плеер Telegram, вставленный вместо обложки видео */
.tg-embed {
    width: 100%; min-height: 480px; border: 0; display: block;
    border-radius: var(--radius); background: var(--card);
}
/* Обложка видео теперь div, а не ссылка — курсор должен об этом сказать */
.gallery .play { cursor: pointer; }
.gallery .play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Своё видео объявления: обычный проигрыватель браузера.
   preload="none" — файл тянется только когда его решили посмотреть */
.pub-video {
    width: 100%; display: block; border-radius: var(--radius);
    background: #000; max-height: 70vh;
}
.pub-video.small { max-height: 220px; }

/* Значок «здесь видео» поверх обложки карточки.
   Обложка видео — обычный кадр, от фотографии её не отличить: без значка
   человек кликает по картинке и неожиданно попадает на проигрыватель.
   Треугольник рисуем рамкой, чтобы не тянуть иконку файлом */
.thumb, .row-photo { position: relative; }
.play-mark {
    position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; margin: -22px 0 0 -22px;
    border-radius: 50%; background: rgba(20, 18, 16, .55);
    border: 2px solid rgba(255, 255, 255, .9);
    display: grid; place-items: center; pointer-events: none;
}
.play-mark::after {
    content: ''; display: block;
    /* Треугольник из рамок: левая сторона белая, остальные прозрачные */
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;                 /* оптический центр, а не геометрический */
}
.row-photo .play-mark { width: 38px; height: 38px; margin: -19px 0 0 -19px; }

/* ------------------------------------------------------- карта объявлений */

/* Легенда: без неё цветные метки — просто цветные метки */
.map-legend {
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
    margin: 0 0 10px; font-size: 13.5px; color: var(--muted);
}
.map-legend .dot {
    display: inline-block; width: 11px; height: 11px; border-radius: 50%;
    margin-right: 5px; vertical-align: -1px;
}
.map-legend .dot.home  { background: #2f6b4f; }
.map-legend .dot.lost  { background: #c2410c; }
.map-legend .dot.found { background: #1d6fa5; }
.map-legend .dot.help  { background: #b91c1c; }
.map-legend .dot.ask   { background: #6d5bd0; }
.map-legend .legend-note { flex-basis: 100%; font-size: 13px; opacity: .85; }

/* Метка по городу, а не по точке: приглушаем, чтобы её не приняли
   за место, где животное видели */
.pin.soft { opacity: .55; box-shadow: none; }

/* Кнопка «развернуть» поверх карты в карточке */
.map-box { position: relative; }
.map-expand {
    position: absolute; right: 10px; top: 10px; z-index: 500;
    width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--line); font-size: 15px; line-height: 1;
    box-shadow: 0 2px 8px rgba(35, 32, 28, .18);
}
.map-expand:hover { border-color: var(--accent); }

/* Запасной полноэкранный режим: когда системный недоступен —
   в мини-аппе Telegram это обычное дело */
.map-box.full {
    position: fixed; inset: 0; z-index: 1000; margin: 0;
    background: var(--bg);
}
.map-box.full .mini-map { height: 100%; border-radius: 0; border: 0; }
.map-box:fullscreen .mini-map { height: 100%; border-radius: 0; border: 0; }


/* Свои объявления в профиле: те же карточки, что в каталоге, но со своими
   действиями. Снимок — главное в объявлении о животном, по нему автор
   узнаёт своё быстрее, чем по тексту */
.mine-card .card-photo {
    display: block; position: relative; aspect-ratio: 4 / 3;
    overflow: hidden; background: var(--accent-soft);
}
.mine-card .card-photo img { width: 100%; height: 100%; object-fit: cover; }
.mine-card .no-photo {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 42px; opacity: .5;
}
.mine-card .card-body { padding: 12px 14px; }
.mine-card .card-city { font-weight: 600; }
.mine-card .card-date { color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.mine-card .card-body p { margin: 0 0 10px; }
.mine-card .card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }


/* Ссылки на внешние карты под своей картой */
.map-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.map-links .btn { flex: 0 1 auto; }


/* Кнопки под заголовком справочника: между ними нужен воздух, иначе
   на телефоне они смыкаются и попасть в нужную трудно */
.dir-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

/* Блок «добавить»: подпись и кнопки одного размера. Сетка, а не строка:
   в строке кнопки разной длины разъезжаются и выглядят случайными */
/* Чек-лист и опросник: строки с отметками и ответ в рамке */
.checklist { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.check {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer;
}
.check input { margin-top: 3px; flex: 0 0 auto; }
.check input:checked + span { color: var(--muted); text-decoration: line-through; }
.age-result { font-size: 22px; }
.field input[type=range] { width: 100%; accent-color: var(--act, var(--accent)); }
.field label .muted { font-weight: normal; color: var(--muted); }
.quiz-answer {
    margin-top: 14px; padding: 14px; border-radius: var(--radius);
    background: var(--accent-soft); display: flex; flex-direction: column; gap: 10px;
    align-items: flex-start;
}
.quiz-answer p { margin: 0; }
@media print {
    /* На печати — только список: шапка, подвал и кнопки не нужны */
    .top, .tabs, .foot, .dir-actions, .hero p { display: none; }
    .check { break-inside: avoid; border-color: #999; }
}

/* Путь до страницы: мелким, над заголовком, не отвлекая от содержания */
.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 0 0 10px; font-size: 13px; color: var(--muted);
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs-sep { opacity: .5; }

/* Фотография профиля: кружок, а без снимка — буква на мягком фоне */
.avatar {
    width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
    flex: 0 0 auto; background: var(--accent-soft); display: inline-block;
}
.avatar-letter {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px; color: var(--accent);
}
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head h1 { margin: 0; }
.comment-head .avatar { width: 28px; height: 28px; font-size: 13px; }
.photo-pick { margin-top: 16px; }
.photo-pick > b { display: block; margin-bottom: 2px; }
.photo-pick .btn { margin-top: 8px; }

/* Настройки: строка-переключатель во всю ширину, подпись слева */
.settings-panel { margin-bottom: 22px; }
.settings-panel > b { display: block; margin-bottom: 4px; }
.settings-admin { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.settings-admin > b { display: block; margin: 16px 0 2px; }
.settings-admin > b:first-child { margin-top: 0; }
.switches { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.switch-row {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--radius); cursor: pointer;
}
.switch-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.switch-text span { color: var(--muted); font-size: 13px; }
.switch { flex: 0 0 auto; width: 22px; height: 22px; accent-color: var(--act, var(--accent)); }
.switch:disabled { opacity: .5; }
.settings-note { margin-top: 10px; color: var(--muted); font-size: 14px; }
.settings-note.bad { color: #b0372c; }

.add-actions { margin: 14px 0; }
.add-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 14.5px; }
.add-buttons {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; max-width: 560px;
}
.add-buttons .btn { width: 100%; text-align: center; margin: 0; }
@media (max-width: 560px) {
    .add-buttons { grid-template-columns: 1fr; max-width: none; }
}
.dir-actions .btn { margin: 0; }

/* Ссылки в карточке помощника: их бывает три — телефон и два мессенджера */
.dir-card .links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Снять себя из справочника. Не красная и не на виду: это законное
   действие человека, а не опасная кнопка, от которой отговаривают */
.helper-off { margin-top: 10px; }
.helper-off .btn { font-size: 13px; padding: 6px 12px; }


/* Выбор мессенджера: подпись и два коротких названия вместо двух длинных
   фраз, отличающихся последним словом.

   Подпись — тёмная и полужирная: серым мелким она терялась среди прочих
   пояснений, хотя это заголовок действия. Кнопки одинаковые: выбор между
   мессенджерами равный, и «призрак» рядом со сплошной читался бы как
   «этот хуже» */
.bot-choice {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bot-choice-label {
    color: var(--ink); font-weight: 600; font-size: 15px;
}
/* Обе кнопки одинаковые: выбор между мессенджерами равный, и сплошная
   рядом с «призраком» читалась бы как «эта правильнее» */
.bot-choice .btn,
.bot-choice .btn.ghost {
    background: var(--accent-soft); color: var(--accent);
    border-color: transparent;
}
.bot-choice .btn:hover,
.bot-choice .btn.ghost:hover { background: var(--accent); color: var(--on-accent); }

/* ---------------------------------------------------------- анкеты справочника */

.hero.narrow p { max-width: 60ch; }
.submit-wrap { max-width: 640px; }
.submit-form {
    display: flex; flex-direction: column; gap: 16px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field .two > div > label { font-weight: 600; font-size: 14.5px; }
.field .req { color: var(--lost); font-weight: 700; }
.field input[type="text"], .field input[type="tel"], .field input[type="url"], .field textarea {
    width: 100%; padding: 10px 12px; border-radius: 10px; font: inherit;
    /* 16px обязательны: при меньшем размере Safari на айфоне зумит страницу */
    font-size: 16px;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    resize: vertical;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field.two > div { display: flex; flex-direction: column; gap: 6px; }
.field-note { color: var(--muted); font-size: 13px; }
.field-error { color: var(--help); font-size: 13.5px; font-weight: 600; }

/* Вид записи — чипами с радиокнопками: три варианта, всё на виду */
.kind-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.kind-opt { position: relative; }
.kind-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kind-opt span {
    display: inline-block; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    font-size: 14.5px; font-weight: 600;
}
.kind-opt input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.kind-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Выбор города в анкете: та же кнопка, что у фильтров, но во всю ширину
   поля; список ограничен по высоте и на телефоне тоже — он стоит не в
   строке фильтров, и общее правило шторки его не касается */
.citypick { display: flex; width: 100%; }
.citypick .cf-trigger { width: 100%; }
.citypick .cf-label { flex: 1; text-align: left; }
.citypick .cf-badge { max-width: 60%; }
/* Панель — по ширине поля и ПОВЕРХ подложки: общее правило z-index 60
   действует только в строке фильтров, а тут поле формы */
.citypick .cf-panel { left: 0; right: 0; width: auto; z-index: 60; max-height: min(60vh, 460px); }
.citypick .cf-scroll { max-height: min(46vh, 380px); overflow-y: auto; flex: 0 1 auto; }
.citypick .cf-item { width: 100%; text-align: left; border: 0; background: none; font: inherit; }
/* Вид животного: кошка и собака чипами, «Другой» — список. Кнопка списка
   подогнана под чипы (тот же фон и размер), панель раскрывается на ширину
   поля под всей строкой, а не под кнопкой: у правого края она вылезала бы
   за экран телефона */
.species-pick { position: relative; align-items: center; }
.animalpick { position: static; }
.animalpick .cf-trigger { padding: 8px 14px; font-size: 14.5px; background: var(--bg); }
.animalpick .cf-trigger.on { background: var(--accent-soft); }
/* «Волнистый попугай» целиком: у фильтров бейдж — счётчик, тут — название */
.animalpick .cf-badge { max-width: 24ch; }
.animalpick .cf-panel { left: 0; right: 0; width: auto; z-index: 60; max-height: min(60vh, 460px); }
.animalpick .cf-scroll { max-height: min(46vh, 380px); overflow-y: auto; flex: 0 1 auto; }
.animalpick .cf-item { width: 100%; text-align: left; border: 0; background: none; font: inherit; }
.animalpick .cf-cap { margin-top: 8px; }
/* Подзаголовок списка: он же ориентир для поисковика — на страницах
   списков не было ни одного h2 */
.list-head { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 0;
    font-size: 19px; letter-spacing: -.01em; }
.list-count { color: var(--muted); font-size: 14px; font-weight: 500; }
.submit-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Правка объявления: нынешние снимки плиткой, под каждым — отметка «убрать» */
.edit-media { display: flex; flex-wrap: wrap; gap: 10px; }
.edit-media-item { position: relative; width: 108px; display: flex; flex-direction: column; gap: 4px;
    cursor: pointer; font-size: 13px; }
.edit-media-item img, .edit-media-empty { width: 108px; height: 84px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
    font-size: 28px; background: var(--bg); }
.edit-media-kind { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 999px;
    background: rgba(0,0,0,.6); color: #fff; font-size: 11px; }
.edit-media-del { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.edit-media-item:has(input:checked) img, .edit-media-item:has(input:checked) .edit-media-empty { opacity: .35; }
.edit-media-item:has(input:checked) .edit-media-del { color: var(--help); font-weight: 600; }
.btn.small { padding: 5px 11px; font-size: 13.5px; }

/* Анкета объявления: превью снимков и карта для точки */
.photo-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.photo-strip img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.pick-map { height: 240px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; }
.field input[type="file"] { font-size: 14px; }
.btn.danger { color: var(--help); }
/* Компактная панель действий в списках своих объявлений */
.mod-panel.compact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px;
    border: 0; padding: 0; background: none; box-shadow: none; }
.mod-panel.compact .mod-note { flex-basis: 100%; font-size: 13px; color: var(--muted); }

/* Мои заявки в справочник — со статусом. Строки, не карточки: у заявки нет снимка */
.submissions { display: flex; flex-direction: column; gap: 8px; }
.submission {
    display: flex; align-items: center; gap: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
}
.submission .sb-ic { font-size: 20px; }
.submission .sb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.submission .sb-body b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission small { color: var(--muted); font-size: 13px; }
.submission .sb-err { color: var(--help); }
.sb-status {
    flex: 0 0 auto; font-size: 13px; font-weight: 600; white-space: nowrap;
    padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--muted);
}
.sb-status.approved { background: var(--accent-soft); color: var(--accent); }
.sb-status.rejected { background: #fdecec; color: var(--help); }
@media (prefers-color-scheme: dark) { .sb-status.rejected { background: #3a2222; } }
@media (max-width: 560px) {
    .field.two { grid-template-columns: 1fr; }
    .submit-form { padding: 14px; }
}