/* =====================================================================
   Дару Дар — стили сайта (ПК). Переписано заново 8 ноября 2026.
   Телефон и планшет: public/css/mobile.css (до 1024 px, не в админке).
   Система: тёплый «слоновая кость» фон, белые карточки с тонкой рамкой,
   Nunito для текста (округлый, владелец вернул его 8 ноября 2026), Source Serif 4 для заголовков, оранжевый только для
   главных действий и акцентов. Цвета, радиусы и тени — только из :root.
   ===================================================================== */

/* ---------- Шрифты (свои файлы: CSP не пускает внешние) ---------- */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/nunito-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Токены ---------- */
:root {
  /* фон и поверхности */
  --color-bg: #faf8f4;            /* фон страниц: тёплая слоновая кость */
  --color-surface: #ffffff;       /* карточки, шапка, окна */
  --color-subtle: #f4eee6;        /* наведение, выбранный пункт, спокойные плашки */
  --color-subtle-strong: #ece4d9; /* нажатие, выбранное на выбранном */
  --color-bubble-mine: #f0e8dd;   /* свои сообщения в чате и на форуме */
  /* текст */
  --color-text: #1f1e1d;
  --color-text-muted: #6f675f;
  /* линии */
  --color-border: #e9e2d7;
  --color-border-strong: #d9d0c3;
  /* бренд: оранжевый — только главные кнопки, ссылки и маленькие акценты */
  --color-primary: #c96442;
  --color-primary-dark: #a9502f;
  --color-primary-soft: #f6eee8;  /* очень бледный оттенок: выбранное значение, текущий город */
  /* второстепенные */
  --color-accent: #5b7b56;
  --color-accent-soft: #e8eee3;
  --color-accent-text: #3d5638;
  --color-danger: #b42318;
  --color-danger-dark: #8f1c13;
  --color-danger-soft: #fbeae8;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(31, 30, 29, 0.04);
  --shadow-hover: 0 6px 22px rgba(31, 30, 29, 0.08);
  --shadow-pop: 0 12px 32px rgba(31, 30, 29, 0.12), 0 2px 6px rgba(31, 30, 29, 0.05);
  --ring: 0 0 0 0 transparent; /* свечение у полей убрано (владелец): при фокусе только оранжевая рамка */
  --max-width: 1320px;

  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Шкала текста: Source Serif 4 — заголовки и крупные числа, Nunito — всё остальное */
  --font-size-xs: 12px;   /* время, значки */
  --font-size-sm: 14px; /* подписи, подсказки */
  --font-size-base: 16px; /* основной текст */
  --font-size-md: 16px;
  --font-size-lg: 18px;   /* малые заголовки */
  --font-size-xl: 20px;   /* заголовки блоков */
  --font-size-2xl: 26px;  /* заголовки разделов главной */
  --font-size-3xl: 28px;  /* заголовки страниц */

  --control-height: 44px;
  --page-top: 22px;
  --page-top-detail: 18px;
}

* { box-sizing: border-box; }

/* Видимый фокус для всех интерактивных элементов */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- Утилиты (вместо инлайновых style="", которые блокирует CSP) ---------- */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

.btn-block { width: 100%; }
.inline-form { display: inline; margin: 0; }
.report-form { margin-top: var(--space-3); max-width: 360px; }
.admin-search-form { margin-bottom: var(--space-4); max-width: 320px; }
.admin-add-card { max-width: 420px; }
.profile-card { max-width: 520px; }
.password-card { max-width: 440px; }
.dashboard-header-card { margin-bottom: var(--space-5); }
.notification-row { padding: 14px 18px; }
.notification-row.is-unread { background: var(--color-subtle); }
.listing-title-link { font-size: var(--font-size-base); }
.profile-header-name { margin: 0 0 4px; font-size: var(--font-size-2xl); overflow-wrap: anywhere; }
.btn-block-link { display: block; width: 100%; text-align: center; }
.w-auto { width: auto; }
.listing-description { white-space: pre-wrap; margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.comment-body { margin: var(--space-1) 0 0; }

.flex-row { display: flex; align-items: center; gap: var(--space-2); }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.text-center { text-align: center; }

[data-gallery-thumb] { cursor: pointer; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Единые компактные отступы внутри карточек и блоков по всему сайту */
.card-padded, .card-padded-sm, .admin-add-card, .profile-card, .password-card,
.form-section, .listing-summary, .listing-comments, .profile-avatar-card, .profile-data-card,
.profile-password-card, .admin-block { padding: 16px; }
.dashboard-header-card, .manage-card, .listing-seller, .owner-card { padding: 12px 16px; }

/* ---------- Основа ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { scrollbar-gutter: stable; }
body { min-height: calc(100vh / var(--page-zoom, 1)); display: flex; flex-direction: column; }
body > main { flex: 1; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
}
h2 { font-size: var(--font-size-xl); margin: 0 0 var(--space-4); }
h3 { font-size: var(--font-size-lg); }
strong, b { font-weight: 600; }

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }
img { max-width: 100%; display: block; }
::selection { background: rgba(201, 100, 66, 0.18); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.container.container-narrow { max-width: 520px; }
.container.container-medium { max-width: 720px; }
.container.container-form { max-width: 860px; }
.container.container-wide { max-width: 820px; }

/* Свои тонкие ползунки прокрутки на всём сайте */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(31, 30, 29, 0.18); border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(31, 30, 29, 0.32); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(31, 30, 29, 0.25) transparent; }
}

/* ---------- Шапка ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header__inner { display: flex; align-items: center; gap: 20px; padding: 10px 20px; flex-wrap: wrap; }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark);
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo__mark { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }

/* Выбор города рядом с логотипом */
.city-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  max-width: 220px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.city-btn:hover { background: var(--color-subtle); color: var(--color-text); }
.city-btn svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-text-muted); }
.city-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.main-nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
  font-size: 14.5px;
  font-weight: 600;
}
.main-nav a, .nav-link { color: var(--color-text); }
.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s;
}
.main-nav .main-nav__link--mobile { display: none; }
.main-nav__link:hover { background: var(--color-subtle); text-decoration: none; }
.main-nav__link.active { background: var(--color-subtle); color: var(--color-text); font-weight: 600; }
.nav-link { border: 0; padding: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.nav-link:hover { text-decoration: underline; }
.nav-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }

.nav-toggle {
  display: none;
  border: 0;
  background: none;
  padding: 10px;
  margin-left: auto;
  color: var(--color-text);
  cursor: pointer;
  border-radius: var(--radius);
}

.main-nav .nav-cta {
  min-height: 38px;
  padding: 0 12px;
  margin: 0;
  background: none;
  color: var(--color-text) !important;
  font-size: inherit;
  font-weight: 600;
}
.main-nav .nav-cta:hover { background: var(--color-subtle); }

.icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 2px;
  border-radius: var(--radius);
  color: var(--color-text);
  transition: background-color 0.15s;
}
.icon-link svg { width: 21px; height: 21px; }
.icon-link:hover { background: var(--color-subtle); text-decoration: none; }
.icon-link .badge-count { position: absolute; top: 3px; right: 1px; margin: 0; }
.icon-link__label { display: none; }

.badge-count {
  display: inline-block;
  min-width: 18px;
  padding: 3px 5px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Меню пользователя (details — работает без JS) */
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 3px 10px 3px 3px;
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 500;
  transition: background-color 0.15s;
}
.user-menu__button:hover, .user-menu[open] > .user-menu__button { background: var(--color-subtle); }
.user-menu__name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 240px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  z-index: 30;
}
.user-menu__panel a, .user-menu__panel .nav-link {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--color-text);
  font-weight: 600;
}
.user-menu__panel a:hover, .user-menu__panel .nav-link:hover { background: var(--color-subtle); text-decoration: none; }
.user-menu__panel hr { margin: 6px 0; }
.user-menu__panel form { margin: 0; }

/* ---------- Окна (город, поддержка, подтверждение, фото профиля) ---------- */
.support-dialog {
  width: min(400px, calc(100% - 32px));
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 64px rgba(31, 30, 29, 0.22);
}
.support-dialog::backdrop { background: rgba(31, 30, 29, 0.42); }
.support-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.support-dialog__header h2 { margin: 0; font-size: var(--font-size-xl); }
.support-dialog__close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius); background: var(--color-subtle); color: var(--color-text); cursor: pointer; }
.support-dialog__close:hover { background: var(--color-subtle-strong); }
.support-form .form-group { margin-bottom: 12px; }
.support-form textarea { min-height: 120px; resize: vertical; }
.support-done { margin: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--color-accent-soft); color: var(--color-accent-text); font-weight: 600; }

#city-dialog { width: min(640px, calc(100% - 32px)); }
.city-dialog__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; max-height: calc(50vh / var(--page-zoom, 1)); overflow-x: hidden; overflow-y: auto; padding: 2px 6px 2px 2px; }
.city-dialog__list a { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); text-align: center; font-weight: 500; transition: background-color 0.15s, border-color 0.15s; }
.city-dialog__list a:hover { background: var(--color-subtle); border-color: var(--color-border-strong); text-decoration: none; }
.city-dialog__list a.is-current { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-primary-dark); font-weight: 600; }
.city-dialog__all { grid-column: 1 / -1; }
.city-dialog__hint { margin: var(--space-4) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.support-link { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: var(--color-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.support-link:hover { color: var(--color-text); }
@media (max-width: 520px) { .city-dialog__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.confirm-dialog { width: min(400px, calc(100% - 32px)); }
.confirm-dialog__text { margin: 0 0 var(--space-4); font-size: var(--font-size-md); line-height: 1.5; }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }

.crop-dialog { width: min(360px, calc(100% - 32px)); }
.crop-dialog__hint { margin: 0 0 12px; }
.crop-stage { display: flex; justify-content: center; }
#crop-canvas { width: 300px; max-width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); background: #222; touch-action: none; cursor: grab; }
#crop-canvas.is-dragging { cursor: grabbing; }
#crop-zoom { width: 100%; margin: 14px 0 6px; accent-color: var(--color-primary); }
.crop-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .city-btn { display: none; }
  .main-nav .main-nav__link--mobile { display: inline-flex; }
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: var(--space-2);
    padding: var(--space-3) 0 var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-base);
  }
  .main-nav.is-open { display: flex; max-height: calc(100vh / var(--page-zoom, 1) - 84px); overflow-y: auto; }
  .main-nav__link, .icon-link { width: 100%; justify-content: flex-start; border-radius: var(--radius); padding: 0 12px; min-height: 46px; }
  .icon-link { gap: 12px; margin-right: 0; }
  .icon-link__label { display: inline; }
  .icon-link .badge-count { position: static; }
  .nav-cta { justify-content: center; margin: 4px 0; min-height: 48px; font-size: var(--font-size-md); }
  .user-menu__button { width: 100%; padding: 6px 12px 6px 8px; min-height: 50px; }
  .user-menu__name { max-width: none; }
  .user-menu__panel { position: static; width: 100%; box-shadow: none; border: 0; padding: 0 0 0 8px; }
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-subtle); border-color: var(--color-border-strong); }
.btn-outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-soft); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-dark); }
.btn-success { background: var(--color-accent); color: #fff; }
.btn-success:hover { background: var(--color-accent-text); }
.btn-small { min-height: 36px; padding: 6px 14px; font-size: var(--font-size-sm); }
.btn-compact { min-height: 40px; padding: 8px 16px; font-size: var(--font-size-base); }
.btn-lg { min-height: 50px; padding: 12px 26px; font-size: var(--font-size-lg); }
/* Маленькие служебные кнопки одного назначения («Изменить», «Сделать активным», «Удалить объявление», «Да») везде одного размера */
.btn-xs { min-height: 32px; padding: 4px 12px; font-size: 13px; gap: 6px; border-radius: 10px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--color-primary-dark); cursor: pointer; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn-link.btn-link--danger { color: var(--color-danger); font-size: var(--font-size-sm); }
.form-delete { margin-top: var(--space-5); text-align: center; }

/* ---------- Карточки, формы ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.form-group { margin-bottom: 18px; }
.form-group label, .form-label { display: block; margin-bottom: 6px; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
.form-control {
  width: 100%;
  min-height: var(--control-height);
  padding: 10px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-base);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control::placeholder { color: #a2978b; }
.form-control:hover { border-color: #cdc3b4; }
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f675f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
textarea.form-control { resize: vertical; min-height: 130px; line-height: 1.5; }
input[type="file"].form-control { padding: 9px 12px; }
.form-hint { margin-top: 6px; color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.5; }
.form-group label .form-hint, .form-label .form-hint { font-weight: 400; margin: 0; }
.form-row { display: flex; gap: 0 18px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }
/* Город и район стоят в одной строке (форма объявления и «Настройки»), на любой ширине */
.form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.form-row--pair .form-group { min-width: 0; }

.alert { padding: 12px 16px; margin: 0 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius); font-size: var(--font-size-base); }
.alert-success { background: var(--color-accent-soft); border-color: #d6e1cf; color: var(--color-accent-text); }
.alert-error { background: var(--color-danger-soft); border-color: #f3d1cd; color: var(--color-danger); }
.alert-draft { background: var(--color-primary-soft); border-color: #eedccf; color: var(--color-primary-dark); }
.alert-muted { background: var(--color-subtle); color: var(--color-text); }
main > .container:first-child:empty { display: none; }
main > .container:first-child { padding-top: 1px; }
main > .container:first-child > .alert:first-child { margin-top: var(--space-4); }

.errors-list { margin: 0 0 18px; padding: 12px 16px 12px 34px; border: 1px solid #f3d1cd; border-radius: var(--radius); background: var(--color-danger-soft); color: var(--color-danger); font-size: var(--font-size-base); }
.errors-list[hidden] { display: none; }
.field-error { margin: 6px 0 0; color: var(--color-danger); font-size: var(--font-size-sm); font-weight: 500; }

.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 0; }
.form-actions .btn { flex: 1; min-width: 180px; }
/* кнопки формы ближе к последнему блоку: блок и так даёт отступ снизу */
.form-section + .form-actions { margin-top: -12px; }
/* Редактирование объявления: «Удалить» слева, «Сохранить изменения» справа */
.form-actions--split { justify-content: space-between; align-items: center; }

/* Карточки-шаги формы */
.form-section { margin-bottom: var(--space-5); }
.form-section__title { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--space-4); font-size: var(--font-size-xl); }
.form-section__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
}
.form-section .form-group:last-child { margin-bottom: 0; }

/* Крупный выбор из двух вариантов */
.choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.choice { display: block; margin: 0 !important; font-weight: inherit !important; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.choice__box strong { font-size: var(--font-size-base); font-weight: 600; }
.choice__box small { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 400; line-height: 1.4; }
.choice:hover .choice__box { border-color: #cdc3b4; }
.choice input:checked + .choice__box { border-color: var(--color-primary); background: var(--color-primary-soft); box-shadow: inset 0 0 0 1px var(--color-primary); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 520px) { .choice-group { grid-template-columns: 1fr; } }

/* Фото в форме */
.photo-manager { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.photo-manager:empty { display: none; }
.photo-manager__item { position: relative; width: 100%; aspect-ratio: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.photo-manager__item img { display: block; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius); pointer-events: none; }
.photo-manager__item.is-dragging { z-index: 5; cursor: grabbing; opacity: 0.92; transition: none; filter: drop-shadow(0 10px 18px rgba(31, 30, 29, 0.25)); }
.photo-manager__cover-badge {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgba(31, 30, 29, 0.66); color: #fff;
  font-size: 12px; font-weight: 600;
}
.photo-manager__remove-form { margin: 0; }
.photo-manager__remove { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(31, 30, 29, 0.62); color: #fff; font-size: 19px; line-height: 1; cursor: pointer; transition: background-color 0.15s; }
.photo-manager__remove:hover { background: var(--color-danger); }
.photo-hint { margin: calc(var(--space-2) * -1) 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.photo-upload-form { display: block; }
.photo-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 16px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.photo-drop:hover, .photo-upload-form:focus-within .photo-drop { background: var(--color-subtle); border-color: var(--color-primary); }
.photo-drop strong { font-size: var(--font-size-lg); font-weight: 600; }
.photo-drop span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.photo-drop svg { margin-bottom: 2px; color: var(--color-primary); }
.photo-drop__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.photo-drop__chips span { padding: 3px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- Главная ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 46px 0 76px;
  background: var(--color-bg);
  text-align: center;
}
.hero__content { position: relative; z-index: 1; width: 56%; max-width: 920px; }
.hero__art {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(220px, 31vw, 560px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 76%, rgba(0, 0, 0, 0.75) 84%, rgba(0, 0, 0, 0.4) 91%, rgba(0, 0, 0, 0.12) 96%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 76%, rgba(0, 0, 0, 0.75) 84%, rgba(0, 0, 0, 0.4) 91%, rgba(0, 0, 0, 0.12) 96%, transparent);
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.hero__art--left { left: -12px; }
.hero__art--right { right: -12px; }
.hero__art--left img {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 62%, rgba(0, 0, 0, 0.96) 67%, rgba(0, 0, 0, 0.85) 72%, rgba(0, 0, 0, 0.69) 77%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.31) 87%, rgba(0, 0, 0, 0.15) 92%, rgba(0, 0, 0, 0.05) 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 62%, rgba(0, 0, 0, 0.96) 67%, rgba(0, 0, 0, 0.85) 72%, rgba(0, 0, 0, 0.69) 77%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.31) 87%, rgba(0, 0, 0, 0.15) 92%, rgba(0, 0, 0, 0.05) 96%, transparent);
}
.hero__art--right img {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 62%, rgba(0, 0, 0, 0.96) 67%, rgba(0, 0, 0, 0.85) 72%, rgba(0, 0, 0, 0.69) 77%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.31) 87%, rgba(0, 0, 0, 0.15) 92%, rgba(0, 0, 0, 0.05) 96%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 7%, #000 62%, rgba(0, 0, 0, 0.96) 67%, rgba(0, 0, 0, 0.85) 72%, rgba(0, 0, 0, 0.69) 77%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0.31) 87%, rgba(0, 0, 0, 0.15) 92%, rgba(0, 0, 0, 0.05) 96%, transparent);
}
.hero h1 { margin: 0 0 20px; font-size: clamp(28px, 2.5vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--color-text); }
.hero__lead { color: var(--color-text); }
.hero__accent { display: block; color: var(--color-primary); }
.hero p { max-width: 540px; margin: 0 auto 30px; font-size: var(--font-size-lg); color: var(--color-text-muted); text-wrap: balance; }
@media (max-width: 1000px) {
  .hero { --hero-art: clamp(190px, 28vw, 250px); padding: 28px 0 calc(var(--hero-art) + 20px); }
  .hero__content { width: 100%; }
  .hero__art { top: auto; height: var(--hero-art); width: clamp(190px, 33vw, 320px); max-width: 54%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, rgba(0, 0, 0, 0.5) 92%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 80%, rgba(0, 0, 0, 0.5) 92%, transparent); }
  .hero__art--left { left: 0; }
  .hero__art--right { right: 0; }
  .hero h1 { margin-bottom: var(--space-4); }
  .hero p { margin-bottom: var(--space-5); }
}

.hero-search {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 540px;
  margin: 0 auto;
  padding: 5px 5px 5px 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 4px 18px rgba(31, 30, 29, 0.06);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hero-search:focus-within { border-color: var(--color-primary); box-shadow: var(--ring), 0 4px 18px rgba(31, 30, 29, 0.06); }
.hero-search svg { flex-shrink: 0; color: var(--color-text-muted); }
.hero-search input[type="search"] { flex: 1; min-width: 0; padding: 8px 6px; border: 0; background: none; font: inherit; font-size: var(--font-size-base); color: var(--color-text); }
.hero-search input[type="search"]:focus { outline: none; }
.hero-search input[type="search"]::placeholder { color: #a2978b; }
.hero-search .btn { flex-shrink: 0; border-radius: var(--radius-pill); padding-left: 22px; padding-right: 22px; }

.section { padding: 48px 0; }
/* Первая секция любой внутренней страницы: всегда одинаково далеко от шапки */
main > .container:first-child + .section { padding-top: var(--page-top); }
/* Страница внутри карточки (объявление, сверху ссылка «назад») ближе к шапке */
main > .container:first-child + .section.section--detail { padding-top: var(--page-top-detail); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.section__head h2 { margin: 0; font-size: var(--font-size-2xl); }
.section__more { font-weight: 600; }

.category-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.category-tile:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-hover); text-decoration: none; }
.category-tile__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-subtle); font-size: 26px; line-height: 1; }
.category-tile__icon img { width: 1.1em; height: 1.1em; }
@media (max-width: 860px) { .category-tiles { grid-template-columns: repeat(3, 1fr); } }

.steps-band { padding-bottom: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.step { display: flex; gap: var(--space-4); align-items: flex-start; }
.step__num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
}
.step h3 { margin: 6px 0 4px; font-size: var(--font-size-lg); }
.step p { margin: 0; color: var(--color-text-muted); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- Каталог: поиск и фильтры ---------- */
.page-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.page-head .page-title { margin: 0; }
.page-head .results-count { margin: 0; }

.filters-bar { margin-bottom: var(--space-4); padding: 12px; }
.filters-bar form { display: flex; flex-direction: column; gap: var(--space-3); }
.search-row { display: flex; gap: var(--space-2); }
.search-row .form-control { flex: 1; min-width: 0; padding-left: 16px; }
.search-row .btn { flex-shrink: 0; }
/* Фильтры каталога: все пять в одну строку; на узких экранах по три и по два */
.filters-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.filter-field { min-width: 0; }
.filter-field > label { display: block; margin: 0 0 5px 2px; overflow: hidden; color: var(--color-text-muted); font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.filters-row .form-control { width: 100%; min-width: 0; padding-left: 14px; }
@media (max-width: 900px) {
  .filters-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters-row .filter-field:nth-child(3n) .cselect__panel { left: auto; right: 0; }
}
@media (max-width: 699px) {
  .filters-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters-row .filter-field:nth-child(3n) .cselect__panel { left: 0; right: auto; }
  .filters-row .filter-field:nth-child(even) .cselect__panel { left: auto; right: 0; }
}
@media (max-width: 339px) { .filters-row { grid-template-columns: minmax(0, 1fr); } }

.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-subtle); }
.segmented__item { margin: 0 !important; cursor: pointer; font-weight: inherit !important; }
.segmented__item input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__item span { display: block; padding: 7px 16px; border-radius: 10px; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; transition: background-color 0.15s, color 0.15s; }
.segmented__item input:checked + span { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(31, 30, 29, 0.1); }
.segmented__item input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.segmented__item:hover input:not(:checked) + span { color: var(--color-text); }

.more-filters summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--radius); color: var(--color-text); font-weight: 600; list-style: none; cursor: pointer; }
.more-filters summary::-webkit-details-marker { display: none; }
.more-filters summary:hover { background: var(--color-subtle); }
.more-filters summary::after { content: "▾"; font-size: 12px; transition: transform 0.15s; }
.more-filters[open] summary::after { transform: rotate(180deg); }

/* Свой выпадающий список (см. js/custom-select.js) */
.cselect { position: relative; }
.cselect .cselect__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding-right: 40px;
  text-align: left;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f675f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.filters-row .cselect .cselect__btn { padding-left: 14px; }
.cselect.is-open .cselect__btn { border-color: var(--color-primary); box-shadow: var(--ring); }
.cselect__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cselect__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(360px, 92vw);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
}
.cselect .cselect__search { width: calc(100% - 12px); min-height: 38px; margin: 6px 6px 0; padding: 7px 12px; }
.cselect__list { position: relative; max-height: 320px; margin: 0; padding: 6px; overflow-y: auto; list-style: none; }
.cselect__opt { padding: 8px 10px; border-radius: 10px; font-size: var(--font-size-base); line-height: 1.35; cursor: pointer; }
.cselect__opt:hover, .cselect__opt:focus { background: var(--color-subtle); outline: none; }
.cselect__opt.is-selected { color: var(--color-primary-dark); font-weight: 600; }
.cselect__opt.is-nested { padding-left: 22px; }
.cselect__group { padding: 10px 10px 4px; color: var(--color-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cselect__empty { padding: 12px; color: var(--color-text-muted); }
.city-search { margin-bottom: var(--space-3); padding-left: 14px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 500; }
.filter-chip:hover { border-color: var(--color-border-strong); background: var(--color-subtle); text-decoration: none; }
.filter-chip--reset { background: none; border-style: dashed; color: var(--color-text-muted); }
.filter-chip--reset:hover { color: var(--color-text); background: var(--color-surface); }

.results-count { margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
/* «Показать ещё» не видна: следующая страница каталога подгружается сама при прокрутке (app.js) */
#listing-grid.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }
.load-more-wrap { display: flex; justify-content: center; height: 1px; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.feed-sentinel { height: 1px; }

/* ---------- Карточки объявлений ---------- */
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
/* Главная: число колонок задано жёстко, лишние карточки скрываются, чтобы последний ряд не был неполным */
.listing-grid--home { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1279px) { .listing-grid--home { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .listing-grid--home { grid-template-columns: repeat(3, 1fr); } }

.listing-card { position: relative; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.listing-card:hover { transform: translateY(-2px); border-color: var(--color-border-strong); box-shadow: var(--shadow-hover); }
.listing-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.listing-card__link:hover { text-decoration: none; }
.listing-card__favorite-form { margin: 0; }
.listing-card__favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text-muted);
  box-shadow: 0 1px 4px rgba(31, 30, 29, 0.16);
  cursor: pointer;
  transition: transform 0.15s, color 0.15s;
}
.listing-card__favorite:hover { background: #fff; color: var(--color-danger); text-decoration: none; transform: scale(1.06); }
.listing-card__favorite.is-active { color: var(--color-danger); }
.listing-card__image {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 6 / 5;
  overflow: hidden;
  background: var(--color-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.listing-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.listing-card:hover .listing-card__image img { transform: scale(1.03); }
.listing-card--gone .listing-card__image img { filter: grayscale(1); opacity: 0.3; }
.listing-card--gone .listing-card__image { background: #f5f1eb; }
.listing-card--gone .listing-card__body { opacity: 0.55; }
.listing-card__noimage { font-size: 36px; line-height: 1; opacity: 0.8; }
.listing-card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(31, 30, 29, 0.12);
}
.listing-card__tag--status { background: rgba(31, 30, 29, 0.78); color: #fff; box-shadow: none; }
/* Текст ближе к краям, название до двух строк, адрес внизу до двух строк */
.listing-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 11px; }
.listing-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.listing-card__meta { color: var(--color-text-muted); font-size: 13px; }
.listing-card__meta--place { display: flex; align-items: flex-start; gap: 4px; min-width: 0; margin-top: auto; padding-top: 4px; color: var(--color-text-muted); font-weight: 400; line-height: 1.3; white-space: normal; }
.listing-card__meta--place svg { flex-shrink: 0; margin-top: 1px; color: var(--color-text-muted); }
.listing-card__place-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; }
/* Отданная вещь старше 90 дней: только картинка и название, карточка не открывается */
.listing-card--static, .listing-card--static:hover { transform: none; border-color: var(--color-border); box-shadow: var(--shadow); cursor: default; }
.listing-card--static:hover .listing-card__image img { transform: none; }
.listing-card--static .listing-card__link { cursor: default; }

.type-badge { display: inline-block; width: fit-content; padding: 3px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 600; }
.type-badge.give { background: var(--color-accent-soft); color: var(--color-accent-text); }
.type-badge.want { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.status-badge { display: inline-block; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--color-subtle); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 600; }

/* ---------- Страница объявления ---------- */
.back-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; line-height: 1.3; }
.back-link:hover { color: var(--color-text); text-decoration: none; }

.listing-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "gallery side" "comments comments";
  grid-template-rows: auto auto;
  column-gap: 28px;
  row-gap: 24px;
  margin-top: 8px;
  align-items: start;
}
.listing-detail__gallery { grid-area: gallery; }
.listing-detail__comments { grid-area: comments; }
.listing-detail__side { grid-area: side; display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 900px) {
  .listing-detail { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .listing-detail__gallery { order: 1; }
  .listing-detail__side { order: 2; }
  .listing-detail__comments { order: 3; }
}

.listing-gallery__main { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.listing-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.listing-gallery__main img.is-zoomable { cursor: zoom-in; }
.listing-gallery__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.listing-gallery__thumbs img { width: 72px; height: 72px; object-fit: cover; border: 2px solid transparent; border-radius: var(--radius); opacity: 0.8; transition: opacity 0.15s, border-color 0.15s; }
.listing-gallery__thumbs img:hover { opacity: 1; border-color: var(--color-border-strong); }
.listing-gallery__thumbs img.is-active { opacity: 1; border-color: var(--color-text); }
.gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--color-text); box-shadow: 0 2px 8px rgba(31, 30, 29, 0.18); cursor: pointer; transition: transform 0.15s, opacity 0.15s; }
.gallery-arrow:hover { transform: translateY(-50%) scale(1.08); }
.gallery-arrow--prev { left: 12px; }
.gallery-arrow--next { right: 12px; }
/* Стрелки на фото: на компьютере при наведении, на телефоне и планшете видны сразу */
@media (hover: hover) {
  .listing-gallery__main .gallery-arrow { opacity: 0; transition: opacity 0.15s, transform 0.15s; }
  .listing-gallery__main:hover .gallery-arrow, .listing-gallery__main .gallery-arrow:focus-visible { opacity: 1; }
}

/* Фото на весь экран */
.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; background: rgba(20, 19, 18, 0.94); }
.lightbox__stage { flex: 1; min-width: 0; display: flex; overflow: auto; padding: 56px 72px 40px; cursor: zoom-out; }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; object-fit: contain; border-radius: 6px; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.lightbox__stage.is-zoom-1, .lightbox__stage.is-zoom-2 { padding: 0; }
.lightbox__stage.is-zoom-1 .lightbox__img, .lightbox__stage.is-zoom-2 .lightbox__img { max-width: none; max-height: none; border-radius: 0; cursor: grab; }
.lightbox__stage.is-zoom-1 .lightbox__img { height: 150vh; }
.lightbox__stage.is-zoom-2 .lightbox__img { height: 270vh; }
.lightbox__stage.is-dragging, .lightbox__stage.is-dragging .lightbox__img { cursor: grabbing; }
.lightbox__close { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; }
.lightbox__close:hover { background: rgba(255, 255, 255, 0.26); }
.lightbox .gallery-arrow { position: absolute; z-index: 2; opacity: 1; }
.lightbox__count { position: absolute; left: 50%; bottom: 14px; z-index: 2; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.14); color: #fff; font-size: var(--font-size-sm); font-weight: 500; }
@media (max-width: 700px) { .lightbox__stage { padding: 60px 8px 48px; } .lightbox .gallery-arrow--prev { left: 6px; } .lightbox .gallery-arrow--next { right: 6px; } }

.listing-summary__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
/* Заголовок слева, сердечко и «Изменить» справа; длинное название переносится */
.listing-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.listing-title { margin: 0 0 var(--space-4); font-size: 24px; line-height: 1.25; }
.listing-titlebar .listing-title { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.listing-cta { display: flex; align-items: stretch; justify-content: flex-start; gap: var(--space-2); margin-top: var(--space-4); }
.listing-cta form { margin: 0; }
.listing-cta__main { flex: 1; min-width: 0; }
.listing-cta__fav { flex-shrink: 0; display: flex; }
.listing-titlebar .listing-cta { flex-shrink: 0; margin: 0 0 0 auto; gap: 8px; }
.fav-btn { position: relative; flex-shrink: 0; width: 44px; padding: 0; color: var(--color-text-muted); }
.fav-btn:hover { color: var(--color-danger); border-color: #f0c9c4; background: var(--color-danger-soft); }
.fav-btn.is-active { color: var(--color-danger); border-color: var(--color-danger); }
/* Сердечко: маленькое, у правого края строки с названием */
.listing-titlebar .fav-btn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; }
.listing-titlebar .fav-btn svg { width: 18px; height: 18px; }
.share-btn.is-copied::after { content: "Ссылка скопирована"; position: absolute; right: 0; bottom: calc(100% + 8px); padding: 5px 10px; border-radius: var(--radius-sm); background: var(--color-text); color: #fff; font-size: var(--font-size-xs); font-weight: 500; white-space: nowrap; }
/* Страница объявления у владельца: «Изменить» рядом с названием */
.listing-edit-btn { flex-shrink: 0; margin-left: auto; gap: 6px; }
/* «Изменить» у обещанной вещи: бледная, ничего не делает */
.listing-edit-btn.is-locked { opacity: 0.45; cursor: not-allowed; }
.listing-edit-btn.is-locked:hover { background: var(--color-surface); border-color: var(--color-border-strong); }

.facts { display: grid; gap: 10px; margin: 0 0 var(--space-5); padding: 0; list-style: none; font-size: var(--font-size-base); }
.facts li { display: flex; align-items: baseline; gap: 10px; }
.facts__label { flex: 0 0 104px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.facts__value { min-width: 0; font-weight: 500; }
/* Название, состояние, место, описание */
.listing-facts { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.listing-fact { margin: 0; }
.listing-fact dt { margin: 0 0 2px; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; }
.listing-fact dd, .listing-fact dd.listing-description { margin: 0; font-size: var(--font-size-base); line-height: 1.55; }

.listing-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 500; }
.chip svg { flex-shrink: 0; color: var(--color-primary); }

.listing-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.listing-views { margin: 0; padding: 0; border: 0; color: var(--color-text-muted); font-size: 13px; }
.listing-views-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.listing-views-row .listing-admin { flex-shrink: 0; margin: 0; }
.listing-views-row .btn.is-locked { opacity: 0.45; cursor: not-allowed; }
.listing-admin { margin-top: 12px; }

/* «Пожаловаться»: тихая ссылка, окно жалобы открывается под ней справа */
.report-details summary { width: fit-content; min-height: 32px; margin: 0; padding: 4px 8px; border: 0; background: none; color: var(--color-text-muted); font-size: calc(var(--font-size-sm) * 0.95); list-style: none; cursor: pointer; }
.report-details summary:hover { color: var(--color-danger); background: none; }
.report-details summary::-webkit-details-marker { display: none; }
.report-details[open] summary { color: var(--color-danger); }
.report-details .report-form { max-width: none; }
.listing-meta .report-details, .listing-seller .report-details, .profile-head .report-details { position: relative; flex-shrink: 0; }
.profile-head .report-details { align-self: flex-start; }
.listing-meta .report-form, .listing-seller .report-form, .profile-head .report-form {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  width: min(340px, calc(100vw - 48px));
  max-width: none;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-pop);
}

/* Автор объявления */
.listing-seller { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.listing-seller .listing-owner { min-width: 0; margin: 0; padding: 0; border: 0; }
.listing-owner { display: flex; align-items: center; gap: 12px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.listing-owner .avatar { width: 40px; height: 40px; font-size: 15px; }
.listing-owner .owner-card__stats { margin-top: 2px; }
.listing-owner a { color: var(--color-text); font-weight: 600; }
.listing-owner a.avatar { color: var(--color-accent-text); }
.owner-card { display: flex; align-items: center; gap: 14px; }
.owner-card a { color: var(--color-text); font-weight: 600; }
.owner-card a.edit-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); color: var(--color-text-muted); }
.owner-card a.edit-link:hover { background: var(--color-subtle); color: var(--color-text); text-decoration: none; }
.owner-card__stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.owner-card__stats strong { color: var(--color-text); font-size: var(--font-size-base); }
.dashboard-name { font-size: var(--font-size-lg); }
.manage-card { }

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-weight: 600;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
a.avatar:hover { text-decoration: none; }
.avatar-sm { width: 38px; height: 38px; font-size: 15px; }
.avatar-md { width: 64px; height: 64px; font-size: 24px; }
.avatar-lg { width: 96px; height: 96px; font-size: 34px; }
.avatar-xl { width: 120px; height: 120px; font-size: 44px; }
.avatar-edit { padding: 0; border: 0; cursor: pointer; }
.avatar-edit img { width: 100%; height: 100%; object-fit: cover; }

/* Плашки на странице объявления: «обещано», «Вы передали вещь получателю?», на модерации — спокойные, бежево-серые */
.promise-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 var(--space-4); padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-subtle); }
.promise-box--muted { background: var(--color-subtle); }
.promise-box form { margin: 0; }
.promise-box__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.promise-box.handover { background: var(--color-subtle); }
.handover__q { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; }
.handover-note { margin-top: var(--space-4); padding: 12px 14px; border-radius: var(--radius); background: var(--color-accent-soft); color: var(--color-accent-text); }
.handover-note strong { display: block; margin-bottom: 2px; font-size: var(--font-size-sm); }

/* Пожелания */
.listing-comments h2 { font-size: var(--font-size-xl); }
.listing-comments .form-hint { font-size: var(--font-size-base); }
.listing-comments__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 22px; }
.listing-comments__head form { margin: 0; }
.listing-comments__head .btn-link--danger { font-size: var(--font-size-base); }
.listing-comments .comment-body { margin: 2px 0 0; font-size: var(--font-size-base); line-height: 1.5; }
.listing-comments textarea.form-control { font-size: var(--font-size-base); }
.listing-comments form .form-group { margin-bottom: 10px; }
.count-badge { display: inline-block; margin-left: 4px; padding: 0; background: none; color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--font-size-lg); font-weight: 500; vertical-align: middle; }
.comments-empty { margin: 0 0 var(--space-3); }
.comment { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.comment:last-of-type { border-bottom: none; }
.comment__avatar { display: block; flex-shrink: 0; }
.comment__avatar:hover { text-decoration: none; }
.comment__main { flex: 1; min-width: 0; }
.comment__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; min-width: 0; }
.comment__name, .comment__name:hover { min-width: 0; max-width: 100%; overflow: hidden; color: var(--color-text); font-size: var(--font-size-base); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.comment__name:hover { text-decoration: underline; }
.comment__time { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.comment__choose { flex-shrink: 0; align-self: center; margin: 0; }
.comment__chosen { flex-shrink: 0; align-self: center; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--color-subtle); color: var(--color-text); font-size: 12.5px; font-weight: 600; }
.comment__edit { margin-top: 4px; }
.comment__edit summary { display: inline-block; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; list-style: none; cursor: pointer; }
.comment__edit summary::-webkit-details-marker { display: none; }
.comment__edit summary:hover { color: var(--color-text); }
.comment__edit form { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; }
.comment__edit textarea { width: 100%; min-height: 80px; font-size: var(--font-size-base); }
.comment__edit-actions { display: flex; gap: 8px; }
/* при открытом редактировании прячем текст пожелания и саму ссылку */
.comment__main:has(.comment__edit[open]) .comment-body { display: none; }
.comment__edit[open] > summary { display: none; }

/* ---------- Каркас страниц кабинета ---------- */
.page-title { margin: 0 0 var(--space-5); font-size: var(--font-size-3xl); line-height: 1.15; letter-spacing: -0.02em; }
.two-col { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow); }
.side-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; color: var(--color-text); font-weight: 600; transition: background-color 0.15s; }
.side-nav a:hover { background: var(--color-subtle); text-decoration: none; }
.side-nav a.active { background: var(--color-subtle); color: var(--color-text); font-weight: 800; box-shadow: inset 3px 0 0 var(--color-primary); }
.side-nav .badge-count { margin-left: 0; }

/* Вкладки разделов: строка с подчёркиванием, выбранная — тёмный текст и оранжевая линия */
.tabs, .tabs-bar { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.tabs-bar .tabs { display: contents; }
.tab {
  display: inline-flex;
  align-items: center;
  margin-bottom: -1px;
  padding: 9px 12px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--color-text); text-decoration: none; }
.tab.active { border-bottom-color: var(--color-primary); color: var(--color-text); font-weight: 700; }
.tab__count { display: inline-block; min-width: 20px; margin-left: 7px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--color-subtle); color: var(--color-text-muted); font-size: 11.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.tab.active .tab__count { background: var(--color-primary-soft); color: var(--color-primary-dark); }
/* Подпись открытого раздела под вкладками («Активные», «Обещанные», …) */
.tab-caption { display: block; margin: 0 0 var(--space-4); color: var(--color-text); font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
/* Пока вкладки внутри раздела подгружаются, список бледнеет */
[data-tab-area].is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.15s; }

.empty-state { padding: 52px 20px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-base); text-align: center; }

.pagination { display: flex; justify-content: center; gap: 6px; margin: 32px 0; }
.pagination a, .pagination span { min-width: 38px; padding: 7px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); font-weight: 500; text-align: center; }
.pagination a:hover { background: var(--color-subtle); text-decoration: none; }
.pagination .current { border-color: var(--color-text); background: var(--color-text); color: #fff; }

@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; gap: 16px; }
  .side-nav { position: static; flex-direction: row; gap: 2px; padding: 4px; overflow-x: auto; border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
  .side-nav a { padding: 8px 14px; white-space: nowrap; }
  .side-nav a.active { box-shadow: none; }
}

/* Личный кабинет: ОДНА общая карточка (аватарка, имя, «В Дару Дар с …», город и три числа); список разделов только на телефоне */
.cab-card { margin-bottom: var(--space-4); padding: 18px 22px; }
.cab-card__top { display: flex; align-items: center; gap: 16px; }
.cab-card__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cab-card__name { font-size: var(--font-size-lg); font-weight: 600; }
.cab-card__meta { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cab-card .edit-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; color: var(--color-text-muted); }
.cab-card .edit-link:hover { background: var(--color-subtle); color: var(--color-text); text-decoration: none; }
.cab-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.cab-card__stats div { padding: 0 8px; text-align: center; }
.cab-card__stats div + div { border-left: 1px solid var(--color-border); }
.cab-card__stats strong { display: block; color: var(--color-text); font-family: var(--font-display); font-size: var(--font-size-3xl); font-weight: 600; line-height: 1.2; }
.cab-card__stats span { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { padding: 16px 8px; text-align: center; }
.stat-card strong { display: block; color: var(--color-text); font-family: var(--font-display); font-size: var(--font-size-3xl); font-weight: 600; line-height: 1.2; }
.stat-card span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.stat-grid + .cab-cta { margin-top: -8px; }

/* Профиль и настройки */
.profile-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.profile-avatar-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.profile-avatar-card .form-hint { margin: 0; }
.profile-data-card .form-group:last-of-type { margin-bottom: var(--space-4); }
.profile-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.profile-password-card h2 { margin-bottom: var(--space-3); }
@media (max-width: 760px) { .profile-grid { grid-template-columns: 1fr; } }
/* Публичный профиль */
.profile-head { position: relative; align-items: center; }
.profile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.profile-meta__place { display: inline-flex; align-items: center; gap: 4px; }
.profile-meta__place svg { flex-shrink: 0; color: var(--color-text-muted); }

/* ---------- Сообщения ---------- */
.conversation-list { display: flex; flex-direction: column; overflow: hidden; }
.conversation-item { display: flex; align-items: center; border-bottom: 1px solid var(--color-border); transition: background-color 0.15s; }
.conversation-item:last-child { border-bottom: 0; }
.conversation-item:hover { background: var(--color-bg); }
.conversation-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: var(--color-text); }
.conversation-row:hover { text-decoration: none; }
.conversation-row__text { flex: 1; min-width: 0; }
.conversation-row__top { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row__top strong { font-weight: 600; }
.conversation-row__text p { margin: 2px 0 0; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.conversation-delete { flex-shrink: 0; margin: 0 14px 0 0; }
.conversation-delete__btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--color-text-muted); cursor: pointer; }
.conversation-delete__btn:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.conversation-delete__btn:disabled { opacity: 0.35; cursor: not-allowed; background: none; color: var(--color-text-muted); }

/* Окно переписки: на весь экран, как мессенджер; шапка и поле ввода белые, лента на тёплом фоне */
.chat-card { display: flex; flex-direction: column; height: calc(100vh / var(--page-zoom, 1) - 168px); min-height: 460px; overflow: hidden; }
.chat-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: var(--color-surface); box-shadow: 0 1px 0 var(--color-border); }
.chat-head__back { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; color: var(--color-text-muted); }
.chat-head__back:hover { background: var(--color-subtle); color: var(--color-text); text-decoration: none; }
.chat-head .avatar { width: 38px; height: 38px; font-size: 15px; }
.chat-head a.avatar { color: var(--color-accent-text); }
.chat-head__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.chat-head__name, .chat-head__name:hover { display: block; min-width: 0; max-width: 100%; overflow: hidden; color: var(--color-text); font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.chat-head__name:hover { text-decoration: underline; }
.chat-head__listing { display: block; min-width: 0; max-width: 100%; overflow: hidden; color: var(--color-text-muted); font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.chat-window { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; padding: 14px; overflow-y: auto; background: var(--color-bg); }
/* В личной переписке бегунок прокрутки не нужен */
.chat-card:not(.forum-card) .chat-window { scrollbar-width: none; }
.chat-card:not(.forum-card) .chat-window::-webkit-scrollbar { display: none; width: 0; }
.chat-window .empty-state { padding: 32px 20px; border: 0; background: none; }
.chat-window .empty-state::before { content: "💬"; display: block; margin-bottom: 12px; font-size: 40px; line-height: 1; }

.chat-bubble { max-width: 75%; padding: 9px 13px; border-radius: 16px; font-size: var(--font-size-base); line-height: 1.45; overflow-wrap: anywhere; }
.chat-bubble.mine { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--color-bubble-mine); color: var(--color-text); }
.chat-bubble.theirs { align-self: flex-start; border: 1px solid var(--color-border); border-bottom-left-radius: 4px; background: var(--color-surface); color: var(--color-text); }
.chat-bubble time { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 11.5px; }
.chat-bubble.mine time { display: flex; align-items: center; gap: 5px; }
.chat-bubble--media { padding: 5px 5px 7px; }
.chat-bubble--media time { padding: 0 7px; }
.chat-bubble--admin { align-self: center; max-width: 85%; border: 1px solid #eedccf; background: var(--color-primary-soft); color: var(--color-text); }
.chat-bubble__who { display: block; margin-bottom: 2px; color: var(--color-primary-dark); font-size: 12px; font-weight: 700; }
.chat-bubble.mine .chat-bubble__who, .chat-bubble.theirs .chat-bubble__who { color: var(--color-text-muted); }
.chat-bubble--system { align-self: center; max-width: 90%; padding: 5px 12px; border-radius: 10px; background: var(--color-subtle); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; text-align: center; }
.chat-attach-img { display: block; max-width: 100%; max-height: 280px; margin-bottom: 4px; border-radius: 10px; }
.chat-attach-file { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; color: inherit; font-weight: 500; text-decoration: underline; }
/* Галочки у своих сообщений: одна (доставлено), две (прочитано) */
.tick { display: inline-flex; align-items: center; color: var(--color-text-muted); }
.tick svg { display: block; }
.tick--read { color: var(--color-primary); }

/* Голосовые */
.voice { display: flex; align-items: center; gap: 12px; min-width: 250px; margin-bottom: 2px; }
.voice__btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; transition: transform 0.1s; }
.voice__btn:active { transform: scale(0.94); }
.voice__icon--pause, .voice.is-playing .voice__icon--play { display: none; }
.voice.is-playing .voice__icon--pause { display: block; }
.voice__icon--play { transform: translateX(-0.6px); } /* треугольник «играть» по центру круга на глаз */
.voice__wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.voice__wave i { flex: 1; min-width: 2px; border-radius: 2px; transition: background-color 0.1s; }
.voice__time { flex-shrink: 0; min-width: 34px; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.chat-bubble.mine .voice__btn, .forum-msg.is-mine .voice__btn { background: var(--color-text); color: #fff; }
.chat-bubble.mine .voice__wave i, .forum-msg.is-mine .voice__wave i { background: rgba(31, 30, 29, 0.22); }
.chat-bubble.mine .voice__wave i.is-played, .forum-msg.is-mine .voice__wave i.is-played { background: var(--color-text); }
.chat-bubble.theirs .voice__btn, .forum-msg:not(.is-mine) .voice__btn { background: var(--color-primary); color: #fff; }
.chat-bubble.theirs .voice__wave i, .forum-msg:not(.is-mine) .voice__wave i { background: rgba(201, 100, 66, 0.28); }
.chat-bubble.theirs .voice__wave i.is-played, .forum-msg:not(.is-mine) .voice__wave i.is-played { background: var(--color-primary); }

/* Поле ввода: одна плоская строка во всю ширину, значки по краям */
.chat-input-row { position: relative; z-index: 1; padding: 6px 8px; border: 0; background: var(--color-surface); box-shadow: 0 -1px 0 var(--color-border); }
.chat-composer { display: flex; flex-direction: column; gap: 8px; }
.chat-compose-row { display: flex; align-items: center; gap: 2px; }
.chat-compose-row[hidden], .chat-recorder[hidden], .chat-pending[hidden], .chat-error[hidden], .chat-send[hidden], .chat-icon-btn[hidden] { display: none; }
.chat-input-row textarea { flex: 1; max-height: 150px; resize: none; line-height: 1.4; overflow-y: auto; }
.chat-input-row textarea.form-control, .chat-input-row textarea.form-control:hover, .chat-input-row textarea.form-control:focus { min-height: 40px; padding: 10px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; }
.chat-icon-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--color-text-muted); cursor: pointer; }
.chat-icon-btn svg { width: 20px; height: 20px; }
.chat-icon-btn:hover { background: var(--color-subtle); color: var(--color-text); }
.chat-send { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--color-primary); color: #fff; cursor: pointer; transition: background-color 0.15s; }
.chat-send svg { width: 18px; height: 18px; }
.chat-send:hover { background: var(--color-primary-dark); }
.chat-pending { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; max-width: 100%; padding: 5px 6px 5px 12px; border-radius: 10px; background: var(--color-subtle); color: var(--color-text); font-size: 14px; }
.chat-pending__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pending__remove { padding: 0 6px; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.chat-error { margin: 0; color: var(--color-danger); font-size: var(--font-size-sm); }
.chat-recorder { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.chat-recorder__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--color-danger); animation: chat-rec-pulse 1s ease-in-out infinite; }
.chat-recorder__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.chat-recorder__hint { flex: 1; color: var(--color-text-muted); }
@keyframes chat-rec-pulse { 50% { opacity: 0.25; } }

/* Обещанные вещи в переписке: кнопка справа в шапке, список раскрывается под ней, у каждой вещи «Да» (передал) */
.chat-head .promised { position: relative; flex-shrink: 0; margin-left: auto; }
.promised summary { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-subtle); color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; list-style: none; cursor: pointer; user-select: none; }
.promised summary:hover { background: var(--color-subtle-strong); }
.promised summary::-webkit-details-marker { display: none; }
.promised summary::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.promised[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.promised__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(400px, 86vw); max-height: 260px; margin: 0; padding: 2px 14px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-pop); list-style: none; }
.promised__list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.promised__list li + li { border-top: 1px solid var(--color-border); }
.promised__list a { flex: 1; min-width: 0; color: var(--color-text); font-weight: 500; overflow-wrap: anywhere; }
.promised__list a:hover { text-decoration: underline; }
.promised__list form { display: flex; flex-shrink: 0; align-items: center; gap: 10px; margin: 0; }
.promised__q { color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* Переписка на весь экран: окно доходит до низа, страница не прокручивается, подвала нет */
main:has(.chat-card) .section { padding-bottom: 0; }
body:has(.chat-card) { height: calc(100vh / var(--page-zoom, 1)); overflow: hidden; }
body:has(.chat-card) .site-footer { display: none; }
body:has(.chat-card) main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
main > .container:first-child + .section:has(.chat-card):not(.forum-page) { flex: 1; min-height: 0; display: flex; padding-bottom: 20px; }
.section:has(.chat-card):not(.forum-page) > .container.two-col { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
.container.two-col:has(.chat-card) > div { display: flex; flex-direction: column; min-height: 0; }
.container.two-col:has(.chat-card) > .side-nav { align-self: start; }
body:has(.chat-card) .two-col .chat-card { flex: 1; height: auto; min-height: 0; }
@media (max-width: 860px) { .section:has(.chat-card):not(.forum-page) > .container.two-col { grid-template-rows: auto minmax(0, 1fr); } }

/* Уведомления (страница не подключена, стили на будущее) */
.notification-list { overflow: hidden; }
.notification-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: var(--color-bg); text-decoration: none; }
.notification-item.is-unread { background: var(--color-subtle); }
.notification-item.is-unread:hover { background: var(--color-subtle-strong); }
.notification-item__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text); }
.notification-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notification-item__text { font-size: var(--font-size-base); }
.notification-item__time { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.notification-item__dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }

/* ---------- Форум как мессенджер: слева чаты городов, справа переписка ---------- */
.forum-head { gap: 12px; }
.forum-head__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; min-width: 0; font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 600; line-height: 1.2; }
.forum-head__city { display: block; min-width: 0; max-width: 100%; overflow: hidden; color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.forum-side__empty { margin: 0; padding: 14px 18px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.forum-head__hint { display: block; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.forum-city { flex-shrink: 0; width: 200px; max-width: 45%; margin: 0 0 0 auto; }
.forum-city .form-control, .forum-city .cselect__btn { min-height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: var(--font-size-sm); }
/* Список городов открывается от правого края, чтобы не выходить за экран */
.forum-city .cselect__panel { left: auto; right: 0; }
.forum-page .page-title { margin-bottom: var(--space-3); }

.forum-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 82%; }
.forum-msg.is-mine { align-self: flex-end; }
.forum-msg__avatar { flex-shrink: 0; color: var(--color-accent-text); }
.forum-msg__bubble { min-width: 0; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 16px; border-bottom-left-radius: 5px; background: var(--color-surface); }
.forum-msg.is-mine .forum-msg__bubble { border-color: transparent; border-radius: 16px; border-bottom-right-radius: 5px; background: var(--color-bubble-mine); }
.forum-msg__name, .forum-msg__name:hover { display: block; min-width: 0; max-width: 100%; margin-bottom: 1px; overflow: hidden; color: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.forum-msg__name:hover { text-decoration: underline; }
.forum-msg__text { font-size: var(--font-size-base); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.forum-msg__meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; color: var(--color-text-muted); font-size: 11.5px; }
.forum-msg__del { padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.forum-msg:hover .forum-msg__del, .forum-msg__del:focus-visible { opacity: 1; }
.forum-msg__del:hover { color: var(--color-danger); }
.forum-msg__bubble .chat-attach-img { max-height: 260px; }
.forum-msg__bubble .voice { min-width: 230px; }
@media (hover: none) { .forum-msg__del { opacity: 1; } }

.forum-card { height: calc(100vh / var(--page-zoom, 1) - 110px); min-height: 420px; }
body:has(.forum-app) { height: calc(100vh / var(--page-zoom, 1)); overflow: hidden; }
body:has(.forum-app) .site-footer { display: none; }
body:has(.forum-app) main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
main .section.forum-page { flex: 1; min-height: 0; display: flex; padding-bottom: 20px; }
main > .container:first-child + .section.forum-page { padding: 0; }
.forum-page > .container { display: flex; width: 100%; max-width: none; min-height: 0; padding: 0; }
.forum-app { flex: 1; display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.forum-app.card { border: 0; border-radius: 0; box-shadow: none; }
.forum-app .forum-card { flex: 1; min-width: 0; height: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.forum-app .forum-window { background: var(--color-bg); }
.forum-side { display: flex; flex-direction: column; flex-shrink: 0; width: 320px; min-height: 0; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.forum-side__title, .forum-app .forum-head { box-sizing: border-box; display: flex; align-items: center; height: 64px; padding: 0 18px; border-bottom: 0; }
.forum-side__title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 600; }
.forum-app .forum-head { background: var(--color-surface); box-shadow: 0 1px 0 var(--color-border); }
.forum-app .forum-head__title { font-size: var(--font-size-lg); }
.forum-side__list { flex: 1; min-height: 0; padding: 6px; overflow-y: auto; }
.forum-chat-item { position: relative; }
.forum-chat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); color: var(--color-text); }
.forum-chat:hover { background: var(--color-subtle); text-decoration: none; }
.forum-chat.is-active, .forum-chat.is-active:hover { background: var(--color-subtle); box-shadow: inset 3px 0 0 var(--color-primary); }
.forum-chat__avatar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-text); font-size: var(--font-size-lg); font-weight: 600; }
.forum-chat.is-active .forum-chat__avatar { background: var(--color-primary); color: #fff; }
.forum-chat__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.forum-chat__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.forum-chat__top strong { overflow: hidden; font-size: var(--font-size-base); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.forum-chat__top time { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.forum-chat__preview { padding-right: 24px; overflow: hidden; color: var(--color-text-muted); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.forum-chat__remove { position: absolute; right: 12px; bottom: 10px; margin: 0; opacity: 0; transition: opacity 0.15s; }
.forum-chat__remove button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--color-surface); color: var(--color-text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.forum-chat.is-active + .forum-chat__remove button { background: var(--color-subtle); }
.forum-chat__remove button:hover { background: var(--color-danger-soft); color: var(--color-danger); }
.forum-chat-item:hover .forum-chat__remove, .forum-chat__remove:focus-within { opacity: 1; }
@media (hover: none) { .forum-chat__remove { opacity: 1; } }
.forum-chats-btn, .forum-side-backdrop, .forum-side__close { display: none; }
@media (max-width: 600px) {
  .forum-head { flex-wrap: wrap; }
  .forum-msg { max-width: 92%; }
  .forum-app .forum-head { height: auto; min-height: 64px; padding: 8px 14px; flex-wrap: nowrap; }
  .forum-city { width: 190px; max-width: 58%; margin-left: auto; }
}
@media (max-width: 520px) { .forum-card { height: calc(100dvh / var(--page-zoom, 1) - 110px); } }

/* ---------- Подвал ---------- */
footer.site-footer { margin-top: 64px; padding: 32px 0 26px; border-top: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__brand img { width: 44px; height: 44px; object-fit: contain; }
.site-footer__brand strong { display: block; color: var(--color-primary-dark); font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 600; line-height: 1.2; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { color: var(--color-text-muted); font-weight: 500; }
.site-footer a:hover { color: var(--color-text); }
.site-footer__copy { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: var(--font-size-xs); }

/* ---------- Вход и регистрация ---------- */
.auth-card { padding: var(--space-6) var(--space-5); }
.auth-card .page-title { margin: 0 0 var(--space-5); font-size: var(--font-size-2xl); text-align: center; }
.auth-lead { margin: 0 0 var(--space-5); color: var(--color-text-muted); text-align: center; }
.auth-alt { margin: var(--space-5) 0 0; color: var(--color-text-muted); text-align: center; }
.auth-alt a { font-weight: 600; }
.auth-forgot { display: block; margin: -6px 0 18px; text-align: right; font-size: var(--font-size-sm); font-weight: 600; }
.auth-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.auth-sep::before, .auth-sep::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* ---------- Прочее ---------- */
.is-leaving { opacity: 0; transition: opacity 0.18s ease; }

/* Мобильная вёрстка лежит отдельно: public/css/mobile.css (подключается только до 1024 px и не на страницах админки) */
.hero__panorama, .header-msg, .tab__ic, .chat-head__note, .cab-list, .cab-back, .drawer-sep, .filters-toggle, .drawer-top, .drawer-account, .nav-backdrop, .drawer-brand { display: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .listing-card:hover, .category-tile:hover { transform: none; }
}

/* Планшеты и телефоны: всё немного мельче и дальше от глаз */
@media (max-width: 1024px) {
  :root { --page-zoom: 0.88; }
  html { zoom: var(--page-zoom); }
}
@media (max-width: 600px) {
  :root { --font-size-3xl: 24px; --font-size-2xl: 24px; }
  .container { padding: 0 14px; }
  .section { padding: 36px 0; }
  .site-header__inner { gap: 10px; }
  .hero-search { padding-left: 16px; }
  .hero-search > svg { display: none; }
  .hero-search .btn { padding-left: 16px; padding-right: 16px; }
  .segmented { width: 100%; }
  .segmented__item { flex: 1; text-align: center; }
  .listing-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .listing-card__tag { top: 8px; left: 8px; }
  .listing-card__favorite { top: 8px; right: 8px; width: 30px; height: 30px; }
  .category-tiles { gap: var(--space-2); }
  .category-tile { gap: 6px; padding: 12px 6px 10px; font-size: var(--font-size-sm); }
  .category-tile__icon { width: 42px; height: 42px; font-size: 21px; }
  .chat-bubble { max-width: 88%; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  .stat-card { padding: 14px 6px; }
  .stat-card strong { font-size: 24px; }
  .stat-card span { display: block; font-size: 12px; line-height: 1.25; }
  .form-actions .btn { flex: 1 1 100%; min-width: 0; }
  .form-actions--split { flex-direction: column-reverse; align-items: stretch; }
  .form-actions--split .btn { flex: 1 1 auto; }
  .page-title { margin-bottom: var(--space-4); }
  .photo-manager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  :root { --page-zoom: 0.84; }
  .listing-card__title { font-size: 14px; }
  .listing-card__meta--place { font-size: 12px; }
  .chat-card { height: calc(100dvh / var(--page-zoom) - 160px); min-height: 420px; }
}

/* ---------- Админка ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); }
table.data-table th, table.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--color-border); text-align: left; }
table.data-table th { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; }
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table tbody tr:hover td { background: var(--color-bg); }
table.data-table--center th, table.data-table--center td { text-align: center; }
table.data-table--center .table-actions { justify-content: center; }
.card:has(> table.data-table) { overflow-x: auto; }
.table-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.table-actions form { margin: 0; }
.table-actions--center { justify-content: center; }

/* Одна плашка из четырёх чисел за сутки */
.stat-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-bar__item { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 26px 16px; text-align: center; }
.stat-bar__item + .stat-bar__item { border-left: 1px solid var(--color-border); }
.stat-bar__item strong { display: block; color: var(--color-text); font-family: var(--font-display); font-size: var(--font-size-3xl); font-weight: 600; line-height: 1.2; }
.stat-bar__item span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
@media (max-width: 700px) {
  .stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-bar__item:nth-child(odd) { border-left: 0; }
  .stat-bar__item:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
}
.admin-wide { margin-top: 24px; }
.admin-block { margin-bottom: 16px; }
.admin-block__title { margin: 0 0 4px; font-size: var(--font-size-xl); }
.name-link { color: var(--color-text); font-weight: 600; }
.name-link:hover { color: var(--color-primary-dark); }

/* Переключатели на обзоре: что показывать слева, за какой срок справа */
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.chart-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-subtle); }
.chart-seg a { padding: 6px 12px; border-radius: 10px; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; }
.chart-seg a:hover { color: var(--color-text); text-decoration: none; }
.chart-seg a.active { background: var(--color-surface); color: var(--color-text); font-weight: 600; box-shadow: 0 1px 3px rgba(31, 30, 29, 0.1); }
@media (max-width: 600px) { .chart-seg { width: 100%; } .chart-seg a { flex: 1 1 auto; text-align: center; } }

/* График: на всю ширину, значения над столбцами, подсказка сразу */
.chart-wrap { margin-top: 12px; overflow-x: auto; }
.chart { display: block; width: 100%; min-width: 640px; height: auto; }
.chart__grid { stroke: var(--color-border); stroke-width: 1; }
.chart__label { fill: var(--color-text-muted); font-size: var(--font-size-xs); }
.chart__val { fill: var(--color-text); font-size: var(--font-size-sm); font-weight: 600; }
.chart__empty { fill: var(--color-text-muted); font-size: var(--font-size-base); }
.chart__bar--visits { fill: var(--color-accent); }
.chart__bar--signups { fill: var(--color-primary); }
.chart__hl { fill: transparent; }
.chart__col:hover .chart__hl { fill: rgba(31, 30, 29, 0.05); }
.chart__tip { display: none; pointer-events: none; }
.chart__col:hover .chart__tip { display: block; }
.chart__tip rect { fill: var(--color-text); }
.chart__tip text { fill: #fff; font-size: var(--font-size-sm); font-weight: 600; }

/* Списки, значки */
.admin-list { margin: 8px 0 0; padding: 0; list-style: none; }
.admin-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.admin-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.admin-list__meta { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.admin-list__details { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.admin-list--rows .admin-row { align-items: center; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; }
.admin-chip--warn { border-color: transparent; background: var(--color-primary-soft); color: var(--color-primary-dark); }
.admin-chip--danger { border-color: transparent; background: var(--color-danger-soft); color: var(--color-danger); }
.admin-chip--ok { border-color: transparent; background: var(--color-accent-soft); color: var(--color-accent-text); }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.admin-toolbar .tabs { margin: 0; }
.admin-toolbar .admin-search-form { flex: 1 1 240px; max-width: 320px; margin: 0; }

/* Карточка жалобы и карточка объявления на проверке */
.rcard { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; padding: 16px; }
.rcard__main { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; }
.rcard__main--photos { grid-template-columns: 128px minmax(0, 1fr); }
.rcard__thumb, .rcard__avatar { flex-shrink: 0; width: 88px; height: 88px; }
.rcard__thumb { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius); background: var(--color-subtle); font-size: 34px; }
.rcard__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rcard__avatar { font-size: 30px; }
.rcard__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rcard__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.rcard__head .rcard__title { flex: 1 1 240px; min-width: 0; }
.rcard__chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.rcard__chips .admin-chip { padding: 3px 10px; }
.rcard__title { color: var(--color-text); font-size: var(--font-size-lg); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
a.rcard__title:hover { color: var(--color-primary-dark); text-decoration: none; }
.rcard__title--gone { color: var(--color-text-muted); font-weight: 500; }
.rcard__people { display: flex; flex-wrap: wrap; gap: 2px 24px; margin: 0; color: var(--color-text-muted); }
.rcard__quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 4px 0 0; padding: 10px 14px; overflow: hidden; border-left: 3px solid var(--color-border-strong); border-radius: 0 var(--radius) var(--radius) 0; background: var(--color-bg); line-height: 1.5; overflow-wrap: anywhere; }
.rcard__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.rcard__date { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.rcard__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rcard__actions form { margin: 0; }

.mcard__photos { display: grid; gap: 3px; width: 128px; height: 128px; overflow: hidden; border-radius: var(--radius); background: var(--color-subtle); }
.mcard__photos--2 { grid-template-columns: 1fr 1fr; }
.mcard__photos--3, .mcard__photos--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mcard__photos--3 a:first-child { grid-row: 1 / 3; }
.mcard__photos a { display: block; min-width: 0; min-height: 0; }
.mcard__photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mcard__nophoto { display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }

@media (max-width: 640px) {
  .rcard__main, .rcard__main--photos { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .rcard__thumb, .rcard__avatar { width: 64px; height: 64px; }
  .rcard__thumb { font-size: 26px; }
  .rcard__avatar { font-size: 22px; }
  .mcard__photos { width: 64px; height: 64px; }
  .rcard__actions { margin-left: 0; }
}

/* Карточка человека для админа */
.admin-person__head { display: flex; align-items: center; gap: 16px; }
.admin-person__name { margin: 0 0 4px; }
.admin-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 16px 0 0; }
.admin-facts dt { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .admin-facts { grid-template-columns: 1fr; } }
.report-card__details { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.report-card__actions { margin-top: 12px; }
.report-thumb { flex-shrink: 0; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }

/* Админ читает переписку двух людей (из жалобы): лента, у каждого сообщения имя, внизу поле «от администрации» */
.admin-chat { display: flex; flex-direction: column; overflow: hidden; }
.admin-chat__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.admin-chat__and { color: var(--color-text-muted); }
.admin-chat__hint { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.admin-chat__window { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; padding: 14px; overflow-y: auto; background: var(--color-bg); }
.admin-chat__only { color: var(--color-text-muted); font-weight: 400; }
.admin-chat__form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-border); }
.admin-chat__form textarea { flex: 1; min-height: 44px; resize: vertical; }
.admin-chat audio { max-width: 100%; }

/* Карточка человека в админке: фото, имя и статус, под именем почта · город · дата одной строкой, справа действия; снизу четыре числа */
.aperson { padding: 18px 20px; }
.aperson__top { display: flex; align-items: center; gap: 16px; }
.aperson__avatar { width: 64px; height: 64px; font-size: 24px; }
.aperson__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aperson__name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.aperson__name { margin: 0; font-size: var(--font-size-2xl); line-height: 1.2; overflow-wrap: anywhere; }
.aperson__meta { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.aperson__meta > span + span::before { content: "·"; margin: 0 8px; }
.aperson__warn { color: var(--color-danger); }
.aperson__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.aperson__actions form { margin: 0; }
.aperson__stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.aperson__stats div { padding: 0 8px; text-align: center; }
.aperson__stats div + div { border-left: 1px solid var(--color-border); }
.aperson__stats strong { display: block; font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 600; line-height: 1.2; }
.aperson__stats span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
@media (max-width: 760px) {
  .aperson__top { flex-wrap: wrap; }
  .aperson__actions { width: 100%; justify-content: flex-start; }
  .aperson__stats { grid-template-columns: repeat(2, 1fr); row-gap: 12px; }
  .aperson__stats div:nth-child(3) { border-left: 0; }
}

/* История человека в админке: свёрнута, раскрывается по нажатию на заголовок */
.ahistory > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.ahistory > summary::-webkit-details-marker { display: none; }
.ahistory > summary .admin-block__title { margin: 0; color: var(--color-text); font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 600; letter-spacing: -0.015em; }
.ahistory > summary::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin: -4px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.15s; }
.ahistory[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ahistory__count { margin-left: auto; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.ahistory__sub { margin: 16px 0 0; font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 700; }
/* «← Жалобы» над перепиской нужен только на узком экране: на ПК слева и так меню админки */
@media (min-width: 861px) { .admin-narrow-only { display: none; } }

/* Правила сообщества: крупное вступление, разделы с отступами, списки с воздухом */
.rules { padding: 24px 28px; }
.rules__lead { margin: 0 0 8px; font-size: var(--font-size-lg); line-height: 1.55; }
.rules h2 { margin: 26px 0 10px; font-size: var(--font-size-xl); }
.rules ul { margin: 0; padding-left: 22px; }
.rules li { margin: 0 0 8px; line-height: 1.55; }
.rules li::marker { color: var(--color-primary); }
.rules__date { margin: 18px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
@media (max-width: 600px) { .rules { padding: 16px 14px; } .rules__lead { font-size: 15.5px; } }

/* Предупреждения от администрации */
.btn-warn { background: #b7791f; color: #fff; }
.btn-warn:hover { background: #975a16; }
.warn-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; background: #fbf1dc; border-bottom: 1px solid #f0dcae; color: #7a4b0c; font-size: var(--font-size-sm); font-weight: 700; text-align: center; }
.warn-bar:hover { background: #f8e9c8; text-decoration: none; }
.warn-bar svg { flex-shrink: 0; }
/* Окно о новом предупреждении (один раз) */
.warn-popup { width: min(440px, calc(100% - 32px)); text-align: center; }
.warn-popup__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 50%; background: #fbf1dc; color: #b7791f; }
.warn-popup h2 { margin: 0 0 10px; font-size: var(--font-size-lg); }
.warn-popup__list { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius); background: var(--color-subtle); list-style: none; text-align: left; font-weight: 600; font-size: var(--font-size-sm); }
.warn-popup__list li + li { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--color-border); }
.warn-popup__note { margin: 0 0 16px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.warn-popup__actions { display: flex; gap: 10px; justify-content: center; }
.warn-popup__actions .btn { flex: 1; }
/* Предупреждения — маленький значок в углу карточки профиля, причины по нажатию */
.cab-card__top { position: relative; }
.warn-chip { position: relative; margin-left: auto; align-self: flex-start; }
.warn-chip > summary { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill); background: #fbf1dc; border: 1px solid #f0dcae; color: #7a4b0c; font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; }
.warn-chip > summary::-webkit-details-marker { display: none; }
.warn-chip > summary:hover, .warn-chip[open] > summary { background: #f6e3b8; }
.warn-chip__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 320px; max-width: calc(100vw - 32px); padding: 12px 14px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(40, 30, 20, .14); }
.warn-chip__title { display: block; color: #7a4b0c; font-size: var(--font-size-sm); }
.warn-chip__list { margin: 6px 0 0; padding: 0; list-style: none; }
.warn-chip__list li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.warn-chip__reason { color: var(--color-text); font-weight: 600; font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.warn-chip__meta { color: var(--color-text-muted); font-size: 12.5px; }
.warn-chip__note { margin: 4px 0 0; color: var(--color-text-muted); font-size: 12.5px; line-height: 1.45; }
.rcard__warns { color: #975a16; font-weight: 700; }
.aperson__stats { grid-template-columns: repeat(5, 1fr); }
.aperson__stat--warn strong { color: #975a16; }
.aperson__warn-form { position: relative; }
.aperson__warn-form > summary { list-style: none; }
.aperson__warn-form > summary::-webkit-details-marker { display: none; }
.aperson__warn-form form { position: absolute; top: calc(100% + 8px); right: 0; z-index: 10; display: flex; flex-direction: column; gap: 8px; width: min(360px, 86vw); padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-pop); }
.aperson__warn-form label { font-size: var(--font-size-sm); font-weight: 700; }
.aperson__warn-form .form-hint { margin: 0; }
@media (max-width: 760px) { .aperson__stats { grid-template-columns: repeat(2, 1fr); } .aperson__stats div:nth-child(odd) { border-left: 0; } }

/* Карта (OpenStreetMap через Leaflet): в форме — выбрать точку, на странице вещи — примерное место */
.map-box { position: relative; z-index: 0; width: 100%; height: 260px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-subtle); }
.map-box--pick { height: 290px; cursor: crosshair; }
.map-field__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.map-field__foot .form-hint { margin-top: 6px; }
.map-field__foot .btn-link { flex-shrink: 0; margin-top: 6px; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-attribution { font-size: 10px; }

/* Ссылка «Показать на карте» в «Местоположении» и окно с картой */
.map-link { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 9px 2px 7px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer; transition: background-color 0.15s; }
.map-link svg { width: 12px; height: 12px; color: #2563eb; }
.listing-place { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.map-link:hover { background: var(--color-subtle); }
.map-dialog { width: min(760px, calc(100% - 32px)); }
.map-box--dialog { height: min(460px, 62vh); }
.map-dialog__note { margin: 10px 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
/* Точка на карте: оранжевый кружок с белой обводкой */
.map-pin { border: 3px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); }

/* Крестик в выпадающем списке: только на телефоне, где список — шторка снизу */
.cselect__top { display: flex; align-items: center; gap: 6px; }
.cselect__top .cselect__search { flex: 1; width: auto; }
.cselect__close { display: none; flex-shrink: 0; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 6px 6px 0 0; padding: 0; border: 0; border-radius: var(--radius); background: var(--color-subtle); color: var(--color-text); cursor: pointer; }

/* Строка списка в админке с кнопкой справа (снять предупреждение) */
.admin-list li.admin-list__row { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; }
.admin-list__row > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.admin-list__row form { flex-shrink: 0; margin: 0; }

/* «Нужно исправить объявление» (на доработке): одна спокойная плашка — значок, заголовок, текст админа, кнопка */
.fix-box { display: flex; gap: 12px; margin: 0 0 16px; padding: 14px 16px; border: 1px solid #efdcb4; border-radius: var(--radius); background: #fffaf0; }
.fix-box__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fbeccd; color: #a8641a; }
.fix-box__body { flex: 1; min-width: 0; }
.fix-box__title { display: block; margin-top: 6px; color: var(--color-text); font-size: var(--font-size-base); }
.fix-box__text { margin: 6px 0 0; color: var(--color-text); line-height: 1.5; overflow-wrap: anywhere; }
.fix-box--calm { border-color: var(--color-border); background: var(--color-subtle); }
.fix-box--calm .fix-box__icon { background: var(--color-surface); color: var(--color-text-muted); }
.fix-box__foot form { margin: 0; }
.fix-box__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.rcard__actions .aperson__warn-form form { right: 0; }