:root {
  --green: #2e7d52;
  --green-dark: #246343;
  --green-soft: #eef7f1;
  --bg: #f6f9f7;
  --text: #1c2922;
  --muted: #68786f;
  --border: #dfe9e3;
  --border-strong: #c9dbd0;
  --white: #ffffff;
  --danger: #a3261f;
  --shadow: 0 14px 40px rgba(32, 68, 48, 0.08);
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

a {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
}

a:hover { color: var(--green); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(46, 125, 82, 0.2);
  outline-offset: 2px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0 !important;
  white-space: nowrap;
}

/* Шапка */
.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--border);
}

/* ПК: шапка липнет к верху и плавно «задвигается» при скролле вниз, выезжает при
   скролле вверх (класс scroll-hide-top-header на body вешает JS). На смартфоне
   (max-width: 640px) шапка остаётся обычной — там авто-скрывается нижнее меню. */
@media (min-width: 641px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    transition: transform 0.3s ease;
  }

  body.scroll-hide-top-header .site-header {
    transform: translateY(-100%);
  }
}

.header-inner {
  width: 100%;
  max-width: none;
  min-height: 66px;
  margin: 0 auto;
  padding: 10px clamp(18px, 3vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-link {
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  color: var(--green-dark);
  line-height: 1.05;
  white-space: nowrap;
}

.brand-link:hover { color: var(--green); }

.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.brand-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}

.brand-link:hover .brand-hint { color: var(--green-dark); }

.site-header nav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 14px;
}

.account-menu {
  position: relative;
}

.account-summary {
  min-height: 40px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  list-style: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.account-summary::-webkit-details-marker {
  display: none;
}

.account-summary:hover,
.account-menu[open] .account-summary {
  border-color: #adc8b8;
  background: var(--green-soft);
  color: var(--green-dark);
}

.account-icon,
.account-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.account-chevron {
  width: 16px;
  height: 16px;
  transition: transform 150ms ease;
}

.account-menu[open] .account-chevron {
  transform: rotate(180deg);
}

.account-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  width: 190px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.account-logout-form {
  margin: 0;
}

.account-id {
  min-height: 30px;
  margin: 2px 2px 6px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f8fbf9;
  color: var(--muted);
  cursor: default;
  font-size: 12px;
  line-height: 1.2;
  user-select: text;
}

.account-id-label {
  font-weight: 750;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.account-id-value {
  min-width: 0;
  overflow: hidden;
  color: #51625a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-item {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
}

.account-item:hover {
  background: var(--green-soft);
  color: var(--green-dark);
}

.header-action {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--green-dark);
  cursor: default;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.header-action[href] {
  cursor: pointer;
}

.header-action:hover {
  border-color: #adc8b8;
  background: var(--green-soft);
  color: var(--green-dark);
}

.header-create-action {
  width: auto;
  min-width: 0;
  gap: 7px;
  padding: 8px 12px;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
}

.header-create-action:hover {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}

.header-action-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nav-unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: #d93636;
  color: var(--white);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(217, 54, 54, 0.24);
  pointer-events: none;
}

.mobile-bottom-nav {
  display: none;
}

.mobile-bottom-action {
  position: relative;
  min-width: 0;
  min-height: 52px;
  padding: 6px 10px;
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--green-dark);
  cursor: default;
  font: inherit;
  line-height: 1.1;
  list-style: none;
}

.mobile-bottom-action::-webkit-details-marker {
  display: none;
}

.mobile-bottom-action:hover,
.mobile-bottom-action:focus-visible,
.mobile-bottom-account[open] > .mobile-bottom-action {
  background: var(--green-soft);
  color: var(--green-dark);
}

.mobile-bottom-create {
  color: var(--green-dark);
}

.mobile-create-icon {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 18px rgba(46, 125, 82, 0.2);
}

.mobile-create-icon .mobile-bottom-icon {
  width: 20px;
  height: 20px;
}

.mobile-bottom-icon {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.mobile-bottom-label {
  max-width: 100%;
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bottom-account {
  min-width: 0;
  flex: 1 1 0;
}

/* Основной контейнер */
.container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 40px clamp(18px, 3vw, 48px) 56px;
  flex: 1;
}

/* Главная */
.home-search {
  width: min(720px, 100%);
  margin: -18px auto 18px;
  position: relative;
}

.home-search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.home-search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.home-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 126px 10px 46px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(32, 68, 48, 0.07);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.home-search input::placeholder {
  color: #87968e;
  font-weight: 550;
  opacity: 1;
}

.home-search input:hover {
  border-color: #b7cfc0;
}

.home-search input:focus {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1), 0 14px 34px rgba(32, 68, 48, 0.1);
  outline: none;
}

.home-search-submit {
  position: absolute;
  top: 50%;
  right: 5px;
  min-width: 104px;
  min-height: 34px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 8px 18px rgba(46, 125, 82, 0.18);
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.home-search-submit:hover {
  background: var(--green-dark);
  box-shadow: 0 10px 22px rgba(36, 99, 67, 0.22);
  transform: translateY(calc(-50% - 1px));
}

.home-search-submit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.results-page {
  /* Центрированная колонка каталога (как у OLX/Kaspi): на широких мониторах контент
     не размазывается влево, а держится по центру. 1230px = 5 колонок карточек. */
  width: min(1230px, 100%);
  margin: 0 auto;
}

.results-search-row {
  width: 100%;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.results-search {
  min-width: 0;
  position: relative;
}

.results-search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 23px;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.results-search-icon svg,
.results-location-summary svg,
.results-control-summary svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.results-search-icon svg {
  stroke-width: 1.9;
}

.results-search input {
  width: 100%;
  height: 48px;
  padding: 11px 15px 11px 48px;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(32, 68, 48, 0.07);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.results-search input::placeholder {
  color: #87968e;
  font-weight: 550;
  opacity: 1;
}

.results-search input:focus {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1), 0 14px 34px rgba(32, 68, 48, 0.1);
  outline: none;
}

.results-location-filter {
  position: relative;
  flex: 0 0 auto;
}

.results-location-summary {
  min-width: 82px;
  height: 48px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--green);
  border-radius: 15px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  list-style: none;
  box-shadow: 0 10px 26px rgba(46, 125, 82, 0.16);
  white-space: nowrap;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.results-location-summary::-webkit-details-marker {
  display: none;
}

.results-location-pin {
  width: 19px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.results-location-summary svg {
  stroke-width: 1.8;
}

.results-location-panel {
  position: absolute;
  z-index: 45;
  top: calc(100% + 10px);
  right: 0;
  width: min(430px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 150px));
  max-height: min(620px, calc(100dvh - 150px));
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 22px 54px rgba(32, 68, 48, 0.18);
}

.results-location-scroll {
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.results-location-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.results-city-group {
  margin-bottom: 10px;
  border: 1px solid #e7efe9;
  border-radius: 14px;
  background: #fbfdfb;
}

.results-city-group:last-of-type {
  margin-bottom: 0;
}

.results-city-summary {
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--green-dark);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  list-style: none;
}

.results-city-summary::-webkit-details-marker {
  display: none;
}

.results-city-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.results-area-grid {
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
}

.results-area-chip {
  min-height: 38px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease,
    box-shadow 150ms ease;
}

.results-area-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.results-area-chip:hover,
.results-area-chip.is-active,
.results-area-chip:has(input:checked) {
  border-color: #88b79a;
  border-width: 2px;
  background: #e1f1e7;
  color: var(--green-dark);
  font-weight: 800;
  box-shadow: 0 9px 20px rgba(46, 125, 82, 0.11);
}

.results-area-chip-all {
  grid-column: 1 / -1;
}

/* Категории на странице поиска — горизонтальная полоска чипсов-миниатюр.
   На телефоне листается свайпом БЕЗ видимого скроллбара (как у Kaspi/Avito);
   вместо полосы прокрутки о «продолжении» подсказывают затухания по краям
   (классы has-scroll-left/right ставит app.js). На десктопе чипсы просто
   переносятся на следующую строку — прокрутки нет вовсе. */
.results-categories {
  position: relative;
  margin: 4px 0 14px;
}

.results-categories::before,
.results-categories::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.results-categories::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), rgba(246, 249, 247, 0));
}

.results-categories::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), rgba(246, 249, 247, 0));
}

.results-categories.has-scroll-left::before {
  opacity: 1;
}

.results-categories.has-scroll-right::after {
  opacity: 1;
}

.results-categories-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox: полосу прячем, свайп остаётся */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.results-categories-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge: полосу прячем, свайп остаётся */
}

@media (min-width: 641px) {
  .results-categories-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.results-category-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 78px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease,
    transform 150ms ease;
}

.results-category-chip:hover,
.results-category-chip:focus-visible {
  border-color: #88b79a;
  box-shadow: 0 9px 20px rgba(46, 125, 82, 0.11);
  transform: translateY(-1px);
  outline: none;
}

.results-category-chip.is-active {
  border-color: #88b79a;
  border-width: 2px;
  background: var(--green-soft);
  color: var(--green-dark);
}

.results-category-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--green-soft);
  font-size: 24px;
  line-height: 1;
}

.results-category-chip.is-active .results-category-emoji {
  background: #cfe7d8;
}

.results-category-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.results-category-back .results-category-emoji {
  background: var(--bg);
  color: var(--muted);
  font-weight: 800;
}

.results-head-category {
  margin: 0 0 4px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 800;
}

/* Постраничная навигация результатов поиска */
.results-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 6px;
}

.results-page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.results-page-num,
.results-page-btn {
  min-width: 42px;
  min-height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.results-page-num:hover,
.results-page-btn:hover {
  border-color: #88b79a;
  background: var(--green-soft);
  color: var(--green-dark);
}

.results-page-num.is-current {
  border-color: var(--green);
  border-width: 2px;
  background: var(--green);
  color: #fff;
}

.results-page-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.results-page-ellipsis {
  min-width: 22px;
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

.results-location-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.98);
}

.results-location-reset,
.results-location-submit {
  min-height: 42px;
  border-radius: 11px;
}

.results-location-reset {
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 750;
}

.results-location-reset:hover {
  border-color: #adc8b8;
  background: var(--green-soft);
}

.results-options-row {
  margin-bottom: 18px;
  display: flex;
  justify-content: flex-end;
}

.results-head {
  margin-bottom: 14px;
}

.results-head h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(21px, 4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.results-controls {
  position: relative; /* панели меню позиционируются от всего ряда, не от своей кнопки */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* Все выпадающие панели ряда контролов прижимаются к правому краю РЯДА (right: 0 у
   .results-control-panel сработает от .results-controls). Если якорить к кнопке,
   панель левых кнопок (сортировка, цена) вылезает за левый край экрана смартфона. */
.results-control-menu {
  position: static;
  display: inline-flex;
}

.results-control-summary {
  width: 44px;
  height: 44px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.results-control-summary::-webkit-details-marker {
  display: none;
}

.results-control-panel {
  position: absolute;
  z-index: 44;
  top: calc(100% + 9px);
  right: 0;
  width: min(230px, calc(100vw - 24px));
  padding: 8px;
  display: grid;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 18px 42px rgba(32, 68, 48, 0.16);
}

.results-control-option {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
}

.results-control-option:hover,
.results-control-option.is-active {
  border-color: #adc8b8;
  background: var(--green-soft);
  color: var(--green-dark);
}

.results-control-summary:hover,
.results-control-menu[open] > .results-control-summary {
  border-color: #adc8b8;
  background: var(--green-soft);
  box-shadow: 0 10px 24px rgba(46, 125, 82, 0.11);
}

.results-location-summary:hover,
.results-location-filter[open] > .results-location-summary {
  border-color: var(--green-dark);
  background: var(--green-dark);
  color: #fff;
  box-shadow: 0 12px 30px rgba(36, 99, 67, 0.2);
}

.results-control-summary svg {
  stroke-width: 1.9;
}

/* Зелёная точка на иконке: фильтр (цена/состояние) сейчас активен. */
.results-control-summary.is-filtered {
  position: relative;
  border-color: var(--green);
}

.results-control-summary.is-filtered::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* Панель фильтра «Цена»: от—до + подсказка + кнопки. */
.results-price-panel {
  width: min(290px, calc(100vw - 24px));
  padding: 12px;
}

.results-price-title {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.results-price-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.results-price-inputs input {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 15px;
}

.results-price-dash {
  color: var(--muted);
  font-weight: 700;
}

.results-price-hint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.results-price-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.results-price-reset {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.results-price-reset:hover {
  color: var(--green-dark);
}

.results-empty {
  min-height: 230px;
  padding: 42px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  text-align: center;
}

.results-empty h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}

.results-empty p {
  max-width: 480px;
  margin: 0;
}

.results-listings {
  display: grid;
  gap: 14px;
}

.results-view-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* В сетке карточка = обложка фикс-высоты + тело, добирающее остаток (текст сверху). */
.results-view-grid .listing-card-link {
  grid-template-rows: auto 1fr;
}

.results-view-list,
.results-view-wide {
  grid-template-columns: 1fr;
}

.listing-card {
  position: relative; /* якорь для сердечка-оверлея .favorite-form-card */
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(32, 68, 48, 0.07);
}

.listing-card-link {
  height: 100%;
  min-width: 0;
  max-width: 100%;
  display: grid;
  color: var(--text);
}

.results-view-list .listing-card-link,
.results-view-wide .listing-card-link {
  grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
}

.results-view-list {
  gap: 10px;
}

.results-view-list .listing-card {
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(32, 68, 48, 0.055);
}

.results-view-list .listing-card-link {
  grid-template-columns: 116px minmax(0, 1fr);
  min-height: 116px;
}

.results-view-list .listing-card-photo {
  min-height: 116px;
  font-size: 38px;
}

.results-view-list .listing-card-body {
  align-content: center;
  padding: 12px 14px;
  gap: 5px;
}

.results-view-list .listing-card-topline {
  font-size: 11px;
}

.results-view-list .listing-card h2 {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.results-view-list .listing-card-price {
  font-size: 18px;
}

.results-view-list .listing-card-location {
  font-size: 13px;
}

.results-view-wide {
  gap: 18px;
}

.results-view-wide .listing-card-link {
  grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
  min-height: 240px;
}

.results-view-wide .listing-card-photo {
  min-height: 240px;
  font-size: 74px;
}

.results-view-wide .listing-card-body {
  align-content: start;
  padding: 22px;
  gap: 12px;
}

.results-view-wide .listing-card h2 {
  font-size: 24px;
  line-height: 1.12;
}

.results-view-wide .listing-card-price {
  font-size: 28px;
}

.results-view-wide .listing-card-location {
  font-size: 15px;
}

.listing-card-photo {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e5f2ea, #f8fbf9);
  color: var(--green);
  font-size: 54px;
  font-weight: 900;
}

.listing-card-photo img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
}

/* Сетка: единое КВАДРАТНОЕ соотношение обложки (1:1) — карточки одинаковой высоты вне
   зависимости от ориентации фото и не «растянуты» вертикально. Фото любой ориентации
   обрезается под квадрат по центру (object-fit: cover). */
.results-view-grid .listing-card-photo {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.results-view-grid .listing-card-photo img {
  min-height: 0;
}

.listing-card-body {
  min-width: 0;
  max-width: 100%;
  padding: 14px;
  display: grid;
  gap: 8px;
  align-content: start;
}

/* В сетке тело — колонка: заголовок и цена сверху, локация прижата к низу.
   Свободное место (у коротких карточек) собирается в одном месте над локацией
   и смотрится как ровный отступ, а не «дыра». */
.results-view-grid .listing-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.results-view-grid .listing-card-location {
  margin-top: auto;
  padding-top: 2px;
}

.listing-card-topline {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.listing-card-topline span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.listing-visible-id {
  color: #8a978f;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

p.listing-visible-id {
  margin: 0 0 4px;
}

.listing-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Сетка: заголовок ровно в 2 строки (место зарезервировано, короткие тоже держат высоту)
   — чтобы тело карточки было одинаковым у всех. */
.results-view-grid .listing-card h2 {
  display: -webkit-box;
  overflow: hidden;
  min-height: 2.4em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.listing-card-price {
  margin: 0;
  color: var(--green-dark);
  font-size: 20px;
  font-weight: 900;
  /* Сумма и пометка — на РАЗНЫХ строках: цена видна целиком, «Договорная»/«Бесплатно»
     всегда на своём уровне и не обрезается. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.listing-card-price .price-amount,
.profile-listing-price .price-amount {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Пометка на отдельной строке — компактный чип фиксированного (не em) размера,
   чтобы под крупной ценой смотрелась ровно и одинаково во всех карточках. */
.listing-card-price .price-note,
.profile-listing-price .price-note {
  font-size: 11.5px;
  font-weight: 800;
}

/* Аккуратная подпись цены: крупная сумма (.price-amount наследует стиль родителя) +
   мелкая пометка-чип «Договорная»/«Бесплатно». Размер чипа задан в em — масштабируется
   под контекст (карточка, страница объявления, ЛК). Работает в .listing-card-price,
   .listing-price, .profile-listing-price. */
.price-note {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
  padding: 0.18em 0.6em;
  border-radius: 999px;
  font-size: 0.62em;
  font-weight: 750;
  line-height: 1.45;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* «Договорная» — уточнение к сумме: тонкий приглушённый контур, не спорит с ценой. */
.price-note-negotiable {
  color: #5a6d63;
  background: #f1f6f3;
  border: 1px solid #d6e3dc;
}

/* «Бесплатно» — это и есть цена: мягкий зелёный акцент, заметный, но не кричащий. */
.price-note-free {
  color: #1f7a43;
  background: #e7f6ed;
  border: 1px solid #bfe3cb;
}

.listing-card-location {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Избранное: кнопка-сердечко (toggle) ===== */
.favorite-form {
  margin: 0;
  line-height: 0;
}

.favorite-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #45584d;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.favorite-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.favorite-button:hover {
  color: var(--green-dark);
}

.favorite-button.is-active {
  color: var(--green);
}

.favorite-button.is-active svg {
  fill: var(--green);
  stroke: var(--green);
}

/* Пульс при добавлении (класс вешает JS на мгновение). */
@keyframes favorite-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.favorite-button.favorite-pulse {
  animation: favorite-pulse 0.28s ease;
}

/* В карточке ленты: белый кружок поверх фото, правый верхний угол. */
.favorite-form-card {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.favorite-button-card {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 8px 20px rgba(16, 34, 23, 0.14);
}

.favorite-button-card:hover {
  background: #fff;
}

/* На странице объявления: круглая кнопка поверх фото (зеркально кнопке «Назад»),
   стиль как у триггера меню «⋮» владельца. */
.favorite-form-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.favorite-button-overlay {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 28px rgba(16, 34, 23, 0.16);
  backdrop-filter: blur(12px);
}

.favorite-button-overlay:hover {
  background: #ffffff;
}

.favorite-button-overlay svg {
  width: 22px;
  height: 22px;
}

/* На детали без фото — в верхней строке рядом с «Назад». */
.favorite-form-topbar {
  flex: 0 0 auto;
}

.favorite-button-topbar {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  background: var(--white);
}

/* Плавное исчезновение карточки при снятии сердечка в разделе «Избранное». */
.listing-card-removing {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ===== Страница «Избранное» ===== */
.favorites-head {
  margin-bottom: 16px;
}

.favorites-head h1 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3vw, 30px);
}

.favorites-intro {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

.favorites-empty {
  min-height: 260px;
  padding: 44px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.favorites-empty-heart svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.favorites-empty h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
}

.favorites-empty p {
  max-width: 430px;
  margin: 0 0 8px;
  color: var(--muted);
}

.listing-create-page {
  width: min(620px, 100%);
  margin: 0 auto;
}

.listing-create-card {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.listing-create-card h1 {
  margin: 0 0 20px;
  color: var(--text);
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.9px;
}

.listing-create-card p {
  margin: 0 0 18px;
  color: var(--muted);
}

.listing-form {
  display: grid;
  gap: 14px;
}

.listing-form label,
.listing-form .listing-price-field,
.listing-form .listing-phone-field {
  display: grid;
  gap: 6px;
  color: #3f5348;
  font-size: 14px;
  font-weight: 750;
}

.listing-field {
  min-width: 0;
}

.listing-form input,
.listing-form textarea,
.listing-form select {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}

.listing-field.is-invalid input,
.listing-field.is-invalid textarea,
.listing-field.is-invalid select {
  border-color: #e3442e;
  background: #fff6f2;
}

.listing-field.is-invalid input:focus,
.listing-field.is-invalid textarea:focus,
.listing-field.is-invalid select:focus {
  border-color: #e3442e;
  box-shadow: 0 0 0 4px rgba(227, 68, 46, 0.12);
}

.listing-field-error {
  display: none;
  color: #cf3a2a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.listing-field.is-invalid .listing-field-error {
  display: block;
}

.listing-field-meta {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  color: #64776c;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.listing-field-meta small {
  min-width: 0;
}

.listing-field-counter {
  flex: 0 0 auto;
  color: #687b70;
  white-space: nowrap;
}

.listing-field-counter.is-danger {
  color: #cf3a2a;
  font-weight: 800;
}

.listing-form textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.45;
}

.listing-description-field {
  display: grid;
  gap: 6px;
}

.listing-description-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.listing-description-head label {
  min-width: 0;
  display: block;
  color: #3f5348;
  font-size: 14px;
  font-weight: 750;
}

.listing-form input:focus,
.listing-form textarea:focus,
.listing-form select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1);
  outline: none;
}

.listing-form input:disabled,
.listing-form select:disabled {
  background: #f7faf8;
  color: #8a9890;
  cursor: not-allowed;
}

.listing-form .listing-photo-upload {
  min-height: 214px;
  padding: 0;
  display: grid;
  gap: 10px;
  border: 1px dashed rgba(46, 125, 82, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
    #e3f3e8;
  color: var(--green-dark);
  cursor: default;
  text-align: center;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.listing-form .listing-photo-upload:hover,
.listing-form .listing-photo-upload:focus-within {
  border-color: rgba(46, 125, 82, 0.72);
  box-shadow: 0 12px 28px rgba(46, 125, 82, 0.12);
  transform: translateY(-1px);
}

.listing-form .listing-photo-upload.has-files {
  min-height: 0;
  padding: 12px;
}

.listing-form .listing-photo-upload.has-files .listing-photo-upload-zone {
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(46, 125, 82, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.listing-form .listing-photo-upload.has-files .listing-photo-upload-art {
  display: none;
}

.listing-form .listing-photo-upload-zone {
  width: 100%;
  min-height: 212px;
  padding: 22px 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  color: inherit;
  cursor: pointer;
}

.listing-photo-upload-art {
  width: min(112px, 44%);
  display: block;
  margin-inline: auto;
  color: var(--green-dark);
}

.listing-photo-upload-art svg {
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}

.photo-art-frame {
  fill: #f9fffb;
  stroke: rgba(46, 125, 82, 0.76);
  stroke-width: 7;
}

.photo-art-fill {
  fill: rgba(46, 125, 82, 0.62);
}

.listing-photo-preview[hidden] {
  display: none;
}

.listing-photo-preview {
  order: -1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.listing-photo-preview-item {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(46, 125, 82, 0.2);
  border-radius: 8px;
  background: #f9fffb;
}

.listing-photo-preview-item.is-main {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(46, 125, 82, 0.18);
}

.listing-photo-preview-image {
  width: 100%;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eef7f1;
}

.listing-photo-preview-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.listing-form .listing-photo-empty-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  aspect-ratio: 1 / 1;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.48);
  color: rgba(46, 125, 82, 0.58);
  cursor: pointer;
}

.listing-form .listing-photo-empty-slot:hover {
  border-color: rgba(46, 125, 82, 0.58);
  background: rgba(255, 255, 255, 0.72);
}

.listing-form .listing-photo-empty-slot svg {
  width: min(48px, 54%);
  height: auto;
  display: block;
}

.listing-photo-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-height: 28px;
  padding: 3px;
  border-top: 1px solid rgba(46, 125, 82, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.listing-photo-cover-button,
.listing-photo-cover-state {
  min-width: 0;
  max-width: 100%;
  min-height: 22px;
  padding: 3px 2px;
  flex: 1 1 auto;
  border: 1px solid rgba(36, 99, 67, 0.24);
  border-radius: 5px;
  overflow: hidden;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-photo-cover-button {
  background: var(--green-soft);
  color: var(--green-dark);
  cursor: pointer;
}

.listing-photo-cover-button:hover {
  background: #dceee3;
}

.listing-photo-cover-state {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.listing-photo-delete {
  width: 20px;
  height: 22px;
  min-width: 20px;
  min-height: 22px;
  padding: 0;
  border: 1px solid rgba(163, 38, 31, 0.18);
  border-radius: 5px;
  background: #fff;
  color: #a3261f;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.listing-photo-delete svg {
  width: 12px;
  height: 12px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listing-photo-delete:hover {
  background: #fff3f1;
}

.listing-photo-upload-title {
  color: var(--green-dark);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.15;
  text-decoration: underline;
  text-underline-offset: 7px;
  text-decoration-thickness: 1.5px;
}

.listing-form .listing-photo-upload small {
  max-width: 360px;
  color: #60756a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.listing-form .listing-photo-upload small.is-warning {
  color: #a3261f;
}

/* Существующие фото на форме редактирования */
.listing-existing-photos {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.listing-existing-photos-title {
  margin: 0;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 800;
}

.listing-existing-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.listing-existing-photo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(46, 125, 82, 0.2);
  border-radius: 8px;
  background: #f9fffb;
}

.listing-existing-photo-frame {
  width: 100%;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eef7f1;
}

.listing-existing-photo-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 0.15s ease;
}

.listing-existing-photo.is-removed .listing-existing-photo-frame img {
  opacity: 0.35;
}

.listing-existing-photo.is-removed {
  border-color: rgba(163, 38, 31, 0.4);
}

/* Действия под миниатюрой — вертикальный стек: гарантированно влезает в узкую
   колонку (3 в ряд на смартфоне) и не «разъезжается». */
.listing-existing-photo-actions {
  display: grid;
  gap: 4px;
  padding: 5px;
  border-top: 1px solid rgba(46, 125, 82, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.listing-existing-cover {
  display: block;
  cursor: pointer;
}

/* Нативный радиоввод спрятан (.sr-only) — состояние показывает чип. */
.listing-existing-cover-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 26px;
  padding: 3px 6px;
  border: 1px solid rgba(46, 125, 82, 0.3);
  border-radius: 6px;
  background: #fff;
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.listing-existing-cover-star {
  font-size: 11px;
  line-height: 1;
}

/* Выбранная обложка — зелёная заливка. */
.listing-existing-cover input:checked + .listing-existing-cover-chip {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

/* Фото помечено на удаление — обложкой быть не может. */
.listing-existing-cover input:disabled + .listing-existing-cover-chip {
  opacity: 0.5;
  cursor: not-allowed;
}

.listing-existing-remove {
  width: 100%;
  min-height: 26px;
  padding: 3px 6px;
  border: 1px solid rgba(163, 38, 31, 0.22);
  border-radius: 6px;
  background: #fff;
  color: #a3261f;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.listing-existing-remove:hover {
  background: #fff3f1;
}

.listing-existing-photo.is-removed .listing-existing-remove {
  color: var(--green-dark);
  border-color: rgba(46, 125, 82, 0.3);
}

/* Защита: радио/чекбоксы в форме объявления не растягиваются глобальным правилом
   .listing-form input (width:100%; min-height) — иначе нативный радио стал бы
   гигантским кругом. */
.listing-form input[type="radio"],
.listing-form input[type="checkbox"] {
  width: auto;
  min-height: 0;
}

.listing-existing-photos-hint {
  color: #60756a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

/* Выбор категории в форме объявления: группы-аккордеоны + чипсы подкатегорий */
.listing-category-section {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

.listing-category-section legend {
  margin-bottom: 2px;
  padding: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.listing-cat-group {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--white);
  overflow: hidden;
}

.listing-cat-group-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.listing-cat-group-summary::-webkit-details-marker {
  display: none;
}

.listing-cat-group-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--green-soft);
  font-size: 18px;
  line-height: 1;
}

.listing-cat-group-name {
  flex: 1 1 auto;
  font-size: 14.5px;
  font-weight: 750;
}

/* Галочка «в этой группе выбрана подкатегория» */
.listing-cat-group-check {
  display: none;
  color: var(--green-dark);
  font-weight: 900;
}

.listing-cat-group:has(input:checked) {
  border-color: #88b79a;
}

.listing-cat-group:has(input:checked) .listing-cat-group-check {
  display: inline;
}

.listing-cat-group-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 150ms ease;
}

.listing-cat-group[open] .listing-cat-group-chevron {
  transform: rotate(180deg);
}

.listing-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 12px 12px;
}

.listing-cat-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.listing-cat-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.listing-cat-chip:hover,
.listing-cat-chip:has(input:focus-visible) {
  border-color: #88b79a;
}

.listing-cat-chip:has(input:checked) {
  border-color: #88b79a;
  border-width: 2px;
  background: #e1f1e7;
  color: var(--green-dark);
  font-weight: 800;
}

.listing-cat-chip-emoji {
  font-size: 15px;
  line-height: 1;
}

.listing-category-section.is-invalid .listing-cat-group {
  border-color: rgba(163, 38, 31, 0.5);
}

.listing-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Сегмент выбора типа цены: «Цена» / «Договорная» / «Бесплатно». */
.listing-price-type {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.listing-price-type-option {
  min-height: 40px;
  padding: 8px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.listing-price-type-option:hover {
  border-color: #adc8b8;
  background: var(--green-soft);
}

.listing-price-type-option.is-active,
.listing-price-type-option[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.listing-price-field input[hidden] {
  display: none;
}

.listing-contact-section {
  min-width: 0;
  padding: 14px;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(46, 125, 82, 0.16);
  border-radius: 15px;
  background: rgba(238, 247, 241, 0.48);
}

.listing-contact-section h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.25;
}

.listing-phone-control {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.listing-phone-control > input {
  min-width: 0;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.listing-phone-field.is-phone-hidden {
  color: #7d8d84;
}

.listing-phone-field.is-phone-hidden .listing-phone-control > input {
  border-color: #d9e2dd;
  background: #f2f5f3;
  color: #7c8a83;
  cursor: not-allowed;
}

.listing-phone-field.is-phone-hidden .listing-phone-control > input:focus {
  border-color: #d9e2dd;
  box-shadow: none;
}

.listing-form .listing-phone-hide {
  min-width: 92px;
  min-height: 46px;
  padding: 8px 10px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
  user-select: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.listing-form .listing-phone-hide input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--green);
}

.listing-form .listing-phone-hide span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.listing-form .listing-phone-hide.is-active,
.listing-form .listing-phone-hide:has(input:checked) {
  border-color: #d9e2dd;
  background: #f2f5f3;
  color: #7c8a83;
}

.listing-create-note {
  margin: 18px 0;
  padding: 14px;
  border: 1px solid #cfe0d5;
  border-radius: 15px;
  background: var(--green-soft);
  color: #315843;
  font-size: 14px;
}

.listing-create-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--green-dark);
}

.listing-create-card .listing-moderation-note {
  margin: 8px 0 0;
  color: #5c7066;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;
}

.listing-create-action-bar {
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  display: grid;
  grid-template-columns: 52px minmax(150px, 0.62fr) minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border);
}

.listing-create-cancel,
.listing-create-preview,
.listing-create-submit {
  min-width: 0;
  min-height: 52px;
  border-radius: 10px;
  font: inherit;
}

.listing-create-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: #17201b;
}

.listing-create-cancel:hover {
  border-color: #adc8b8;
  background: var(--green-soft);
  color: #17201b;
}

.listing-create-cancel svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.listing-create-preview {
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--green-dark);
  cursor: pointer;
  font-weight: 800;
}

.listing-create-preview:hover {
  border-color: #adc8b8;
  background: var(--green-soft);
}

.listing-create-label-short {
  display: none;
}

.listing-create-submit {
  border: 0;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  font-weight: 850;
  text-align: center;
  box-shadow: 0 12px 26px rgba(46, 125, 82, 0.24);
}

.listing-create-submit:hover {
  background: var(--green-dark);
}

.listing-description-editor-overlay[hidden] {
  display: none;
}

.listing-description-editor-overlay {
  position: fixed;
  z-index: 135;
  top: var(--listing-editor-viewport-top, 0px);
  right: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: var(--listing-editor-viewport-height, 100dvh);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
  background: rgba(14, 35, 24, 0.46);
}

.listing-description-editor {
  width: min(720px, calc(100vw - 48px));
  max-width: 100%;
  max-height: min(760px, calc(var(--listing-editor-viewport-height, 100vh) - 48px));
  min-height: min(620px, calc(var(--listing-editor-viewport-height, 100vh) - 48px));
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(14, 35, 24, 0.22);
}

body.is-description-editor-open {
  position: fixed;
  top: var(--listing-editor-scroll-lock-top, 0px);
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-description-editor-open .listing-create-action-bar {
  display: none;
}

.listing-description-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.listing-description-editor-header .eyebrow {
  margin-bottom: 4px;
}

.listing-description-editor-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
}

.listing-description-editor-close {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: #fff;
  color: #17201b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.listing-description-editor-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.listing-description-editor-input {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  resize: none;
}

.listing-description-editor-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1);
  outline: none;
}

.listing-description-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.listing-description-editor-counter {
  color: #60756a;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.listing-description-editor-counter.is-danger {
  color: #cf3a2a;
}

.listing-description-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.listing-preview-overlay[hidden],
.listing-preview-modal[hidden] {
  display: none;
}

.listing-preview-overlay {
  position: fixed;
  z-index: 120;
  inset: 0;
  background: rgba(14, 35, 24, 0.48);
}

.listing-preview-modal {
  position: fixed;
  z-index: 121;
  top: 50%;
  left: 50%;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 28px 70px rgba(14, 35, 24, 0.25);
}

body.is-listing-preview-open {
  overflow: hidden;
}

.listing-preview-header {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.listing-preview-header .eyebrow {
  margin-bottom: 5px;
}

.listing-preview-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.16;
}

.listing-preview-close {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--white);
  color: #17201b;
  cursor: pointer;
}

.listing-preview-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.listing-preview-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fbfdfb;
}

.listing-preview-media {
  overflow: hidden;
  border-radius: 16px;
  background: var(--green-soft);
}

.listing-preview-media img {
  width: 100%;
  max-height: 440px;
  display: block;
  object-fit: contain;
  background: var(--green-soft);
}

.listing-preview-photo-placeholder {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08)),
    #e3f3e8;
}

.listing-preview-photo-placeholder svg {
  width: 132px;
  max-width: 48%;
}

.listing-preview-thumbs {
  margin: 9px 0 16px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.listing-preview-thumb {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--white);
  cursor: pointer;
}

.listing-preview-thumb.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(46, 125, 82, 0.16);
}

.listing-preview-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
}

.listing-preview-card .listing-published-at {
  margin-top: 16px;
}

.listing-preview-card h3 {
  margin: 0 0 9px;
  color: var(--green-dark);
  font-size: 24px;
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-preview-price {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 26px;
  font-weight: 900;
}

.listing-preview-tags {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing-preview-tags span {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.listing-preview-description {
  max-width: 100%;
  margin: 0 0 14px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-preview-author {
  margin-top: 14px;
}

.listing-preview-contact {
  margin-top: 14px;
  padding: 12px 13px;
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
}

.listing-preview-contact span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.listing-preview-contact strong {
  color: var(--green-dark);
  font-size: 18px;
}

.listing-create-steps {
  margin: 18px 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.listing-create-steps span {
  min-height: 42px;
  padding: 9px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfdfb;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.listing-detail-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.listing-detail-body .container {
  padding-top: 28px;
}

.listing-back-link {
  width: fit-content;
  min-height: 40px;
  padding: 8px 13px 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #123222;
  box-shadow: 0 12px 28px rgba(16, 34, 23, 0.16);
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  backdrop-filter: blur(12px);
  z-index: 4;
}

.listing-back-link span:first-child {
  font-size: 27px;
  font-weight: 800;
  line-height: 0.75;
}

.listing-back-link:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: #ffffff;
  color: var(--green-dark);
}

.listing-back-link-overlay {
  position: absolute;
  top: 14px;
  left: 14px;
}

.listing-back-link-standalone {
  margin-bottom: 12px;
}

.listing-status-note {
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid #cfe0d5;
  border-radius: 14px;
  background: var(--green-soft);
  color: #315843;
  font-size: 14px;
}

/* Меню действий владельца объявления (⋮): правка и т.п. */
.listing-detail-topbar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.listing-detail-topbar .listing-back-link-standalone {
  margin-bottom: 0;
}

.listing-owner-menu {
  position: relative;
  flex: 0 0 auto;
}

.listing-owner-menu-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

.listing-owner-menu-trigger {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #123222;
  box-shadow: 0 12px 28px rgba(16, 34, 23, 0.16);
  backdrop-filter: blur(12px);
  cursor: pointer;
  list-style: none;
}

.listing-owner-menu-trigger::-webkit-details-marker {
  display: none;
}

.listing-owner-menu-trigger:hover,
.listing-owner-menu[open] .listing-owner-menu-trigger {
  border-color: rgba(255, 255, 255, 0.8);
  background: #ffffff;
  color: var(--green-dark);
}

.listing-owner-menu-trigger svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.listing-owner-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 188px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(16, 34, 23, 0.18);
}

.listing-owner-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.listing-owner-menu-dropdown form {
  margin: 0;
}

.listing-owner-menu-item:hover {
  background: var(--green-soft);
}

.listing-owner-menu-item-danger {
  color: #c0392b;
}

.listing-owner-menu-item-danger:hover {
  background: #fdeaea;
}

.listing-owner-menu-item svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listing-status-rejected {
  border-color: #efc7c7;
  background: #fff4f4;
  color: #8a2d2d;
}

.listing-detail-card {
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(270px, 320px);
  align-items: start;
  justify-content: center;
  gap: 18px;
}

.listing-detail-main {
  grid-column: auto;
}

.listing-detail-main,
.listing-contact-card {
  min-width: 0;
  max-width: 100%;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(32, 68, 48, 0.055);
}

.listing-contact-card {
  width: 100%;
  position: sticky;
  top: 18px;
}

.listing-gallery {
  position: relative;
  margin: -4px -4px 20px;
}

.listing-gallery-main-link {
  width: 100%;
  height: clamp(340px, 38vw, 430px);
  min-height: 0;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: var(--green-soft);
  cursor: zoom-in;
}

.listing-gallery-main-link:focus-visible,
.listing-gallery-thumb:focus-visible {
  outline: 3px solid rgba(45, 111, 70, 0.32);
  outline-offset: 3px;
}

.listing-gallery-main {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
  background: var(--green-soft);
  object-fit: cover;
  object-position: center center;
}

.listing-gallery-thumbs {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.listing-gallery-thumb {
  flex: 1 1 0;
  max-width: 132px;
  display: block;
  min-width: 0;
  border-radius: 10px;
  cursor: zoom-in;
}

.listing-gallery-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  object-fit: cover;
}

.listing-photo-viewer-body {
  min-height: 100vh;
  margin: 0;
  background: #0f1512;
  color: #f8fbf8;
}

.listing-photo-viewer-body .site-header,
.listing-photo-viewer-body .site-footer,
.listing-photo-viewer-body .mobile-bottom-nav {
  display: none;
}

.listing-photo-viewer {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    radial-gradient(circle at 50% 10%, rgba(57, 91, 68, 0.24), transparent 42%),
    #0f1512;
}

.listing-photo-viewer-header {
  min-height: 68px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(10, 15, 12, 0.9), rgba(10, 15, 12, 0.45));
  z-index: 2;
}

.listing-photo-viewer-back {
  min-height: 42px;
  padding: 8px 13px 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fbf8;
  font-size: 14px;
  font-weight: 750;
  backdrop-filter: blur(12px);
}

.listing-photo-viewer-back:hover {
  background: rgba(255, 255, 255, 0.14);
}

.listing-photo-viewer-back span:first-child {
  font-size: 28px;
  line-height: 0.8;
}

.listing-photo-viewer-heading {
  min-width: 0;
  text-align: center;
}

.listing-photo-viewer-heading p {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-photo-viewer-heading span {
  display: block;
  margin-top: 3px;
  color: rgba(248, 251, 248, 0.72);
  font-size: 12px;
  font-weight: 650;
}

.listing-photo-viewer-header-spacer {
  min-width: 78px;
  display: block;
}

.listing-photo-viewer-zoom {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(15, 21, 18, 0.55);
  color: #ffffff;
  cursor: zoom-in;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
  transition:
    background 160ms ease,
    transform 160ms ease;
  z-index: 3;
}

.listing-photo-viewer-zoom:hover,
.listing-photo-viewer-zoom:focus-visible {
  background: rgba(15, 21, 18, 0.82);
  transform: translateY(-1px);
}

.listing-photo-viewer-zoom[aria-pressed="true"] {
  background: rgba(15, 21, 18, 0.82);
  cursor: zoom-out;
}

.listing-photo-viewer-zoom-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.listing-photo-viewer-zoom[aria-pressed="true"] .listing-photo-viewer-zoom-bar-v {
  display: none;
}

.listing-photo-viewer-stage {
  position: relative;
  min-height: 0;
  padding: 8px 84px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y;
}

.listing-photo-viewer-image-frame {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  cursor: default;
}

.listing-photo-viewer-image-frame.is-zoomed {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  cursor: grab;
}

.listing-photo-viewer-image-frame.is-zoomed.is-panning {
  cursor: grabbing;
}

.listing-photo-viewer-image {
  max-width: 100%;
  max-height: calc(100vh - 204px);
  max-height: calc(100svh - 204px);
  display: block;
  border-radius: 8px;
  background: #f6faf7;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  user-select: none;
  transition:
    transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 260ms ease;
  will-change: transform, opacity;
}

.listing-photo-viewer-image-frame.is-zoomed .listing-photo-viewer-image {
  cursor: grab;
  transform-origin: center center;
}

.listing-photo-viewer-image-frame.is-zoomed.is-panning .listing-photo-viewer-image {
  cursor: grabbing;
  transition: none;
}

.listing-photo-viewer-image-ghost {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.listing-photo-viewer-nav {
  position: absolute;
  top: 50%;
  width: 54px;
  height: 74px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 48px;
  line-height: 1;
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}

.listing-photo-viewer-nav:hover,
.listing-photo-viewer-nav:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.listing-photo-viewer-prev {
  left: 18px;
}

.listing-photo-viewer-next {
  right: 18px;
}

.listing-photo-viewer-thumbs {
  --viewer-thumb-count: 1;
  --viewer-thumb-gap: clamp(4px, 0.78vw, 10px);
  position: relative;
}

/* Кол-во миниатюр задаём классом, а не инлайн-стилем (CSP блокирует style=""). */
.listing-photo-viewer-thumbs-c2 { --viewer-thumb-count: 2; }
.listing-photo-viewer-thumbs-c3 { --viewer-thumb-count: 3; }
.listing-photo-viewer-thumbs-c4 { --viewer-thumb-count: 4; }
.listing-photo-viewer-thumbs-c5 { --viewer-thumb-count: 5; }
.listing-photo-viewer-thumbs-c6 { --viewer-thumb-count: 6; }

.listing-photo-viewer-thumbs {
  min-height: 104px;
  padding: 12px 18px 18px;
  display: flex;
  justify-content: center;
  gap: var(--viewer-thumb-gap);
  overflow: hidden;
  background: linear-gradient(0deg, rgba(10, 15, 12, 0.92), rgba(10, 15, 12, 0.45));
}

.listing-photo-viewer-thumb {
  width: clamp(
    32px,
    calc((100vw - 44px - ((var(--viewer-thumb-count) - 1) * var(--viewer-thumb-gap))) / var(--viewer-thumb-count)),
    92px
  );
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 3px;
  display: block;
  border-radius: 12px;
  opacity: 0.72;
  z-index: 1;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.listing-photo-viewer-thumb:hover,
.listing-photo-viewer-thumb:focus-visible {
  opacity: 1;
}

.listing-photo-viewer-thumb.is-active {
  background: rgba(217, 240, 222, 0.12);
  opacity: 1;
}

.listing-photo-viewer-thumb-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 2px solid #d9f0de;
  border-radius: 12px;
  pointer-events: none;
  z-index: 2;
}

.listing-photo-viewer-thumbs.is-indicator-ready .listing-photo-viewer-thumb-indicator {
  transition:
    transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1),
    width 180ms ease,
    height 180ms ease;
}

.listing-photo-viewer-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.listing-photo-viewer-thumb-single {
  margin: 0;
}

.listing-photo-viewer-thumbs-single {
  min-height: 104px;
}

.listing-photo-manager {
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(247, 251, 248, 0.78);
}

.listing-photo-manager-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.listing-photo-manager-head h2 {
  margin: 0;
  font-size: 16px;
}

.listing-photo-manager-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.listing-photo-add-form {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.listing-photo-add-form label,
.listing-photo-manager-actions label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.listing-photo-add-form input,
.listing-photo-manager-actions input {
  width: 100%;
  min-width: 0;
  font-size: 13px;
}

.listing-photo-manager-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.listing-photo-manager-item {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.listing-photo-manager-item > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

.listing-photo-manager-actions {
  display: grid;
  gap: 6px;
}

.listing-photo-manager-actions form {
  display: grid;
  gap: 6px;
}

.listing-published-at {
  margin: 0 0 8px;
  color: #7e8b84;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.listing-detail-main h1 {
  max-width: 22ch;
  margin: 0 0 10px;
  color: var(--text);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-price {
  margin: 0 0 20px;
  color: var(--green-dark);
  font-size: clamp(26px, 2.7vw, 32px);
  font-weight: 800;
  line-height: 1.15;
}

/* Категория объявления — кликабельный тег под ценой, ведёт в поиск подкатегории */
.listing-category-line {
  margin: -10px 0 18px;
}

.listing-category-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.listing-category-tag:hover,
.listing-category-tag:focus-visible {
  background: #d7ebde;
  outline: none;
}

.listing-category-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Состояние («Новое»/«Передаренное») — нейтральный некликабельный тег рядом с категорией. */
.listing-condition-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.listing-meta {
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing-meta span {
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-detail-main h2,
.listing-contact-card h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 18px;
}

.listing-description {
  max-width: 58ch;
  margin: 0 0 18px;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.62;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Расположение объявления после описания: пин + «Город, район». */
.listing-detail-location {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.listing-detail-location-pin {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listing-detail-main > .listing-visible-id {
  margin: 0 0 18px;
  color: #7e8b84;
  font-size: 12px;
  font-weight: 600;
}

.listing-author {
  max-width: none;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(247, 251, 248, 0.78);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.listing-author:hover {
  border-color: #9acfac;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(21, 54, 37, 0.1);
}

.listing-author-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #eef8f1, #dbeede);
  color: var(--green-dark);
  font-size: 19px;
  font-weight: 850;
}

.listing-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.listing-author-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.listing-author-name {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-author-kicker {
  color: var(--muted);
  font-weight: 600;
  margin-right: 4px;
}

.listing-author-since {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.listing-author-cta {
  margin-top: 3px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
}

.listing-author-chevron {
  flex: 0 0 auto;
  color: var(--green);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.listing-seller-name {
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 800;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-contact-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-contact-hidden {
  margin: 0;
  padding: 12px 13px;
  border: 1px solid rgba(36, 99, 67, 0.16);
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.listing-chat-form {
  margin-top: 12px;
}

.listing-chat-button {
  min-height: 46px;
}

.listing-report {
  margin-top: 12px;
  padding-top: 0;
  border-top: 0;
}

.listing-report summary {
  width: fit-content;
  cursor: pointer;
  color: #b23b3b;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.listing-report summary::-webkit-details-marker {
  display: none;
}

.listing-report summary::after {
  content: " +";
  color: #b23b3b;
}

.listing-report[open] summary::after {
  content: " −";
}

.listing-report summary:hover {
  color: #8f2828;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.listing-report-form {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.listing-report-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.listing-report-form select,
.listing-report-form textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font: inherit;
}

.listing-report-form select {
  min-height: 42px;
  padding: 8px 10px;
}

.listing-report-form textarea {
  min-height: 92px;
  padding: 10px;
  resize: vertical;
}

.listing-report-form select:focus,
.listing-report-form textarea:focus {
  outline: 3px solid rgba(47, 140, 87, 0.14);
  border-color: var(--green);
}

.listing-report-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.listing-mobile-actions {
  display: none;
}

.listing-mobile-message-form {
  min-width: 0;
  display: contents;
}

.listing-call-overlay[hidden],
.listing-call-sheet[hidden] {
  display: none;
}

.listing-call-overlay {
  position: fixed;
  z-index: 88;
  inset: 0;
  background: rgba(36, 99, 67, 0.72);
  opacity: 0;
  transition: opacity 180ms ease;
}

.listing-call-overlay.is-open {
  opacity: 1;
}

.listing-call-sheet {
  position: fixed;
  z-index: 89;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 430px;
  margin: 0 auto;
  padding: 12px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -18px 46px rgba(10, 39, 29, 0.24);
  text-align: center;
  transform: translateY(105%);
  transition: transform 220ms ease;
}

.listing-call-sheet.is-open {
  transform: translateY(0);
}

.listing-call-sheet-handle {
  width: 32px;
  height: 4px;
  margin: 0 auto 22px;
  display: block;
  border-radius: 999px;
  background: #e8eeea;
}

.listing-call-label {
  margin: 0 0 8px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 600;
}

.listing-call-number {
  margin: 0 0 18px;
  color: var(--green-dark);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.2;
}

.listing-call-primary,
.listing-call-cancel {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.listing-call-primary {
  margin-bottom: 22px;
  border: 1px solid var(--green-dark);
  background: var(--green-dark);
  color: #fff;
}

.listing-call-cancel {
  width: auto;
  min-height: 38px;
  margin: 0 auto;
  padding: 4px 0;
  border: 0;
  border-bottom: 2px solid var(--green-dark);
  border-radius: 0;
  background: transparent;
  color: var(--green-dark);
  cursor: pointer;
}

body.is-listing-call-open {
  overflow: hidden;
}

.admin-page {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.admin-heading {
  max-width: 760px;
  margin-bottom: 18px;
}

.admin-heading h1 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.7px;
}

.admin-heading p {
  margin: 0;
  color: var(--muted);
}

.admin-note {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid #cfe0d5;
  border-radius: 14px;
  background: #eef7f1;
  color: #315843;
  font-size: 14px;
}

.admin-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.admin-section-card {
  min-height: 132px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 34px rgba(32, 68, 48, 0.06);
  color: var(--text);
}

.admin-section-card:hover {
  border-color: #adc8b8;
  background: var(--green-soft);
  color: var(--green-dark);
}

.admin-section-title {
  color: var(--green-dark);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.15;
}

.admin-section-description {
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
}

.admin-tabs {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-tabs a {
  min-height: 38px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 800;
}

.admin-tabs a:hover,
.admin-tabs a.is-active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.admin-listing-list {
  display: grid;
  gap: 14px;
}

.admin-listing-card {
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(32, 68, 48, 0.06);
}

.admin-listing-topline,
.admin-listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.admin-listing-card h2 {
  margin: 8px 0;
  font-size: 22px;
  line-height: 1.18;
}

.admin-listing-card h2 a {
  color: var(--text);
}

.admin-listing-contact {
  margin: 8px 0 0;
  color: #3f5348;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.admin-listing-contact strong {
  color: var(--text);
}

.admin-listing-contact span {
  margin-left: 6px;
  padding: 3px 7px;
  display: inline-flex;
  border-radius: 999px;
  background: #fff4e0;
  color: #85611a;
  font-size: 12px;
  font-weight: 800;
}

.admin-listing-description,
.admin-listing-comment {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-listing-comment {
  color: #8a2d2d;
  font-weight: 700;
}

.admin-report-details {
  margin: 10px 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(247, 251, 248, 0.86);
  color: var(--text);
  line-height: 1.45;
  white-space: pre-line;
}

.admin-report-muted {
  color: var(--muted);
}

.admin-listing-actions {
  display: grid;
  align-content: start;
  gap: 10px;
}

.admin-report-decision-form,
.admin-reject-form {
  display: grid;
  gap: 8px;
}

.admin-report-decision-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-report-decision-form input,
.admin-report-decision-form select,
.admin-reject-form input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  font: inherit;
}

.admin-report-safety-note {
  margin: 0;
  color: #8a2d2d;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

/* === Красные бейджи-счётчики в админке === */
.admin-section-title { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.admin-section-badge,
.admin-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #d93636; color: #fff; font-weight: 850; line-height: 1;
}
.admin-section-badge { min-width: 24px; height: 24px; padding: 0 7px; font-size: 13px; }
.admin-tab-badge { min-width: 19px; height: 19px; margin-left: 7px; padding: 0 5px; font-size: 11px; }
.admin-tabs a.is-active .admin-tab-badge { background: #fff; color: #c0392b; }

/* === Компактная очередь модерации объявлений (раскрывающиеся карточки) === */
.mod-list { display: flex; flex-direction: column; gap: 10px; }
.mod-card {
  overflow: hidden; border: 1px solid var(--border); border-radius: 16px;
  background: var(--white); box-shadow: 0 10px 26px rgba(32, 68, 48, 0.06);
}
.mod-card[open] { border-color: #9acfac; }
.mod-card-pending { border-left: 3px solid #e0a32e; }

.mod-summary {
  min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  cursor: pointer; list-style: none;
}
.mod-summary::-webkit-details-marker { display: none; }
.mod-summary:hover { background: var(--green-soft); }

.mod-thumb {
  position: relative; width: 60px; height: 60px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 12px; background: var(--green-soft);
}
.mod-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mod-thumb-empty { color: var(--green-dark); font-size: 24px; font-weight: 850; }
.mod-thumb-count {
  position: absolute; right: 3px; bottom: 3px; padding: 1px 6px; border-radius: 999px;
  background: rgba(16, 34, 23, 0.78); color: #fff; font-size: 11px; font-weight: 800; line-height: 1.4;
}

.mod-summary-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mod-summary-topline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mod-status { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 850; background: var(--green-soft); color: var(--green-dark); }
.mod-status-pending { background: #fbecd2; color: #8a5a14; }
.mod-status-rejected { background: #fdeaea; color: #a23a3a; }
.mod-status-active { background: #e7f4ea; color: #2c6b41; }
/* «Правка» — продавец изменил объявление, это повторная модерация, а не новое. */
.mod-edit-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 850;
  background: #e8eefc; color: #2f4d9e;
}
.mod-summary-title {
  color: var(--text); font-size: 15.5px; font-weight: 750; line-height: 1.25;
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow-wrap: anywhere; word-break: break-word;
}
/* В развёрнутой карточке заголовок виден полностью. */
.mod-card[open] .mod-summary-title { display: block; overflow: visible; -webkit-line-clamp: unset; }
.mod-summary-meta {
  color: var(--muted); font-size: 12.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mod-chevron {
  width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--muted);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s ease;
}
.mod-card[open] .mod-chevron { transform: rotate(180deg); }

.mod-details { padding: 4px 14px 16px; border-top: 1px solid var(--border); }
.mod-gallery {
  margin: 12px 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
.mod-photo {
  display: block; width: 100%; padding: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--border); background: var(--green-soft); cursor: pointer;
}
.mod-photo img { width: 100%; height: 100%; object-fit: cover; }
.mod-no-photo {
  margin: 12px 0; padding: 12px; border: 1px dashed #e0a32e; border-radius: 12px;
  background: #fdf6e8; color: #8a5a14; font-size: 13.5px; font-weight: 700; text-align: center;
}
/* Структурированные факты объявления для модератора: категория, состояние, цена и т.д. */
.mod-facts {
  margin: 12px 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(238, 247, 241, 0.45);
}
.mod-fact { min-width: 0; display: grid; gap: 1px; }
.mod-fact dt { color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.mod-fact dd {
  margin: 0; color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.35;
  overflow-wrap: anywhere; word-break: break-word;
}
.mod-fact dd a { color: var(--green-dark); }
.mod-fact-edit { grid-column: 1 / -1; }
.mod-fact-edit dd { color: #2f4d9e; }

.mod-description {
  margin: 0 0 12px; color: var(--text); font-size: 14.5px; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere; word-break: break-word;
}
.mod-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 12px; }
.mod-actions form { margin: 0; }
.mod-actions .admin-reject-form { display: flex; gap: 8px; flex: 1 1 240px; min-width: 200px; }
.mod-actions .admin-reject-form input { flex: 1 1 auto; min-width: 0; }
/* Специфичность .mod-actions .btn перебивает .btn (overflow-wrap: anywhere ниже по файлу),
   иначе слово «Отклонить» ломалось посреди. */
.mod-actions .btn { overflow-wrap: normal; }
.mod-actions .mod-reject-btn { white-space: nowrap; flex: 0 0 auto; }

.admin-empty-state {
  padding: 34px 22px;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted);
  text-align: center;
}

.admin-empty-state h2 {
  margin: 0 0 8px;
  color: var(--text);
}

.admin-location-list {
  display: grid;
  gap: 14px;
}

.admin-region,
.admin-city {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 34px rgba(32, 68, 48, 0.06);
}

.admin-region {
  overflow: hidden;
}

.admin-region-summary {
  min-height: 56px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--green-dark);
  cursor: pointer;
  font-weight: 820;
  list-style: none;
}

.admin-region-summary::-webkit-details-marker {
  display: none;
}

.admin-region-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-region[open] > .admin-region-summary {
  border-bottom: 1px solid var(--border);
  background: #fbfdfb;
}

.admin-inline-form,
.admin-move-form {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.admin-move-form {
  padding-block: 0 12px;
}

.admin-inline-form label,
.admin-move-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #44564c;
  font-size: 13px;
  font-weight: 700;
}

.admin-inline-form input,
.admin-inline-form select,
.admin-move-form select,
.admin-area select {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--white);
  color: var(--text);
  font-size: 15px;
}

.admin-inline-form input:focus,
.admin-inline-form select:focus,
.admin-move-form select:focus,
.admin-area select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1);
  outline: none;
}

.admin-city-list {
  padding: 0 16px 16px;
  display: grid;
  gap: 12px;
}

.admin-city {
  padding: 14px;
}

.admin-city.is-disabled,
.admin-area.is-disabled {
  opacity: 0.58;
}

.admin-city-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.admin-city-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.2;
}

.admin-city-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.btn-small {
  min-height: 36px;
  padding: 8px 11px;
  font-size: 13px;
}

.admin-area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-area {
  min-height: 44px;
  padding: 8px 9px 8px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fbfdfb;
}

.admin-area span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.admin-area strong {
  color: var(--text);
  font-size: 13px;
}

.admin-area small {
  color: var(--muted);
  font-size: 10px;
}

.admin-area form {
  margin: 0;
}

.admin-area-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-area-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-area select {
  width: min(150px, 34vw);
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.admin-toggle {
  min-height: 28px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.admin-toggle:hover {
  background: #dff0e5;
}

.admin-empty {
  margin: 0;
  padding: 10px 16px 16px;
  color: var(--muted);
  font-size: 14px;
}

.hero {
  padding: 56px 20px 48px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 14px;
  color: var(--green-dark);
  font-size: clamp(38px, 7vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.5px;
}

.hero p {
  max-width: 580px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: clamp(16px, 3vw, 19px);
}

.home-location {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 0 auto 22px;
  text-align: left;
}

.home-location-heading {
  margin-bottom: 9px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.home-location h2 {
  margin: 0;
  color: var(--green-dark);
  font-size: clamp(18px, 3vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.35px;
}

.location-picker {
  position: relative;
}

.location-summary {
  min-height: 62px;
  padding: 11px 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 17px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(32, 68, 48, 0.1);
  color: var(--green-dark);
  cursor: pointer;
  list-style: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.location-summary::-webkit-details-marker {
  display: none;
}

.location-summary:hover,
.location-picker[open] .location-summary {
  border-color: #adc8b8;
  box-shadow: 0 16px 40px rgba(32, 68, 48, 0.14);
}

.location-pin {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--green-soft);
  color: var(--green-dark);
}

.location-pin svg,
.location-chevron {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.location-pin svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
}

.location-summary-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.location-summary-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.location-summary-value {
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-summary-hint {
  max-width: 210px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.location-chevron {
  width: 20px;
  height: 20px;
  color: var(--green-dark);
  stroke-width: 2;
  transition: transform 150ms ease;
}

.location-picker[open] .location-chevron {
  transform: rotate(180deg);
}

.location-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  max-height: min(560px, calc(100vh - 150px));
  padding: 12px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 54px rgba(32, 68, 48, 0.18);
}

.location-current-path {
  margin-bottom: 10px;
  padding: 9px 11px;
  overflow: hidden;
  border: 1px solid #e8f0eb;
  border-radius: 12px;
  background: #fbfdfb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-tree-group {
  margin: 0;
}

.location-tree-summary {
  min-height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  color: #33483d;
  cursor: pointer;
  font-size: 14px;
  font-weight: 780;
  list-style: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.location-tree-summary::-webkit-details-marker {
  display: none;
}

.location-tree-summary::before {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--green-dark);
  content: "›";
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  transition: transform 150ms ease, background-color 150ms ease;
}

.location-tree-group[open] > .location-tree-summary::before {
  transform: rotate(90deg);
}

.location-tree-summary:hover,
.location-tree-group[open] > .location-tree-summary {
  background: var(--green-soft);
  color: var(--green-dark);
}

.location-tree-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-tree-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.location-tree-children {
  margin: 2px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.location-tree-option {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.2;
  text-align: left;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.location-tree-option span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-tree-option small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.location-tree-option:hover,
.location-tree-option.is-active {
  border-color: #cfe0d5;
  background: var(--green-soft);
  color: var(--green-dark);
}

.location-tree-option.is-active small {
  color: #557063;
}

.location-tree-disabled {
  cursor: default;
  opacity: 0.58;
}

.location-tree-disabled:hover {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.location-tree-list-label {
  margin: 8px 0 2px;
  padding-inline: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.location-level-0 { padding-left: 10px; }
.location-level-1 { padding-left: 10px; }
.location-level-2 { padding-left: 28px; }
.location-level-3 { padding-left: 46px; }
.location-level-4 { padding-left: 64px; }
.location-level-5 { padding-left: 82px; }

.location-reset {
  margin-top: 10px;
  padding: 8px 10px;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.placeholder {
  margin-top: 16px;
  padding: 42px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  text-align: center;
}

.placeholder p { margin: 0; }

/* Главная — компактный заголовок и секции */
.home-tagline {
  width: min(720px, 100%);
  margin: 2px auto 24px;
  color: var(--muted);
  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
}

.home-section {
  width: min(960px, 100%);
  margin: 0 auto 30px;
}

.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.home-section-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(18px, 3.4vw, 22px);
  font-weight: 850;
  letter-spacing: -0.3px;
}

.home-section-link {
  flex: 0 0 auto;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.home-section-link:hover,
.home-section-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.home-feed-empty {
  padding: 36px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
  color: var(--muted);
}

.home-feed-empty-title {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

.home-feed-empty-text {
  max-width: 420px;
  margin: 0 auto 18px;
}

.home-feed-empty-cta {
  display: inline-flex;
}

.home-categories-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 118px;
  padding: 18px 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(32, 68, 48, 0.06);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease,
    background-color 150ms ease;
}

.home-category-tile:hover,
.home-category-tile:focus-visible {
  border-color: #88b79a;
  background: var(--green-soft);
  box-shadow: 0 14px 32px rgba(46, 125, 82, 0.14);
  transform: translateY(-2px);
  outline: none;
}

.home-category-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--green-soft);
  font-size: 30px;
  line-height: 1;
}

.home-category-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

@media (min-width: 641px) {
  .home-categories-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* Кнопки */
.btn {
  min-height: 46px;
  max-width: 100%;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease,
    color 150ms ease, transform 150ms ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 7px 18px rgba(46, 125, 82, 0.18);
}

.btn-primary:hover {
  background: var(--green-dark);
  color: #fff;
}

.btn-secondary,
.btn-google {
  border-color: var(--border-strong);
  background: var(--white);
  color: var(--text);
}

.btn-secondary:hover,
.btn-google:hover {
  border-color: #adc8b8;
  background: var(--green-soft);
  color: var(--green-dark);
}

.btn-google {
  position: relative;
}

.google-icon {
  position: absolute;
  left: 15px;
  width: 20px;
  height: 20px;
  flex: none;
}

.btn-compact {
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 10px;
  font-size: 14px;
}

.btn-lg {
  min-height: 50px;
  padding: 13px 28px;
  font-size: 16px;
}

.btn-block {
  width: 100%;
  display: flex;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 7px 18px rgba(163, 38, 31, 0.18);
}

.btn-danger:hover {
  background: #861d17;
  color: #fff;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

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

.auth-card {
  width: 100%;
  max-width: 430px;
  margin: 18px auto;
  padding: 34px;
}

.profile-card {
  width: 100%;
  max-width: 520px;
  margin: 12px auto;
  padding: 24px;
}

.profile-card .auth-heading {
  margin-bottom: 18px;
}

.profile-card .auth-heading h1 {
  font-size: clamp(24px, 6vw, 27px);
}

.profile-card .auth-heading p {
  margin-top: 4px;
}

.auth-heading {
  margin-bottom: 26px;
  text-align: center;
}

.auth-heading h1 {
  margin: 0;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.auth-heading p {
  margin: 9px auto 0;
  color: var(--muted);
  font-size: 14px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #44564c;
  font-size: 14px;
  font-weight: 650;
}

.auth-form input {
  width: 100%;
  height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: #fdfefd;
  color: var(--text);
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.auth-form input::placeholder {
  color: #97a59d;
  opacity: 1;
}

.auth-form input:hover { border-color: #b7cfc0; }

.auth-form input:focus {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1);
  outline: none;
}

.divider {
  margin: 22px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8b9991;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.divider::before,
.divider::after {
  height: 1px;
  flex: 1;
  background: var(--border);
  content: "";
}

.muted {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.auth-footer {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.profile-hero {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 14px 16px;
  align-items: center;
}

.avatar-form {
  margin: 0;
}

.avatar-picker {
  position: relative;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #dce9e1;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--green), var(--green-dark));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(46, 125, 82, 0.22);
  overflow: visible;
}

.avatar-picker img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.avatar-initial {
  font-size: 27px;
  font-weight: 850;
  line-height: 1;
}

.avatar-edit {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--white);
  color: var(--green-dark);
  box-shadow: 0 5px 14px rgba(32, 68, 48, 0.18);
}

.avatar-edit svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.avatar-picker:hover .avatar-edit {
  background: var(--green-soft);
}

.profile-form {
  display: contents;
  min-width: 0;
}

.profile-identity {
  grid-column: 2;
  min-width: 0;
}

.profile-local-errors,
.profile-section-title,
.profile-field,
.profile-actions {
  grid-column: 1 / -1;
}

.profile-name-editor {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
}

.profile-name-editor input {
  min-width: 0;
  width: 100%;
  max-width: 390px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: clamp(22px, 4.5vw, 26px);
  font-weight: 820;
  line-height: 1.15;
  letter-spacing: -0.55px;
  outline: none;
}

.profile-name-editor input:focus {
  border-color: var(--border-strong);
  background: #fdfefd;
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.08);
}

.profile-edit-name {
  width: 34px;
  height: 34px;
  padding: 8px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green-dark);
  cursor: pointer;
}

.profile-edit-name:hover {
  background: #dff0e5;
}

.profile-edit-name svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.profile-email-muted {
  min-width: 0;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 540;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta {
  margin-top: 1px;
  display: block;
  align-items: center;
  padding: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 540;
  line-height: 1.25;
}

.profile-section-title {
  margin: 16px 0 -2px;
  color: #44564c;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.profile-local-errors {
  margin-bottom: 0;
}

.profile-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.profile-field-readonly {
  margin-bottom: 12px;
}

.profile-label {
  color: #44564c;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.profile-value,
.profile-field input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: #fdfefd;
  color: var(--text);
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.profile-value {
  display: flex;
  align-items: center;
  background: #f9fbfa;
  color: #53645b;
  font-weight: 600;
  cursor: default;
}

.profile-email {
  min-width: 0;
  justify-content: space-between;
  gap: 8px;
  border-color: #d8e5dd;
  background: #f7faf8;
}

.profile-email-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readonly-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf4ef;
  color: #73837a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
  white-space: nowrap;
}

.profile-field input::placeholder {
  color: #97a59d;
  opacity: 1;
}

.profile-field input:hover {
  border-color: #b7cfc0;
}

.profile-field input:focus {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1);
  outline: none;
}

.profile-actions {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.profile-actions .btn {
  width: 100%;
  min-height: 44px;
}

.profile-password {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfdfb;
}

.profile-password-summary {
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #44564c;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  list-style: none;
}

.profile-password-summary::-webkit-details-marker {
  display: none;
}

.profile-password-summary:hover,
.profile-password[open] .profile-password-summary {
  background: var(--green-soft);
  color: var(--green-dark);
}

.profile-password-action {
  flex: 0 0 auto;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 750;
}

.profile-password-action::after {
  margin-left: 7px;
  content: "+";
  font-size: 12px;
}

.profile-password[open] .profile-password-action::after {
  content: "-";
}

.profile-password-body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}

.profile-note {
  margin: 10px 0;
  color: var(--muted);
  font-size: 13px;
}

.profile-password-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-password-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #44564c;
  font-size: 13px;
  font-weight: 650;
}

.profile-password-form input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: #fdfefd;
  color: var(--text);
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.profile-password-form input::placeholder {
  color: #97a59d;
  opacity: 1;
}

.profile-password-form input:hover {
  border-color: #b7cfc0;
}

.profile-password-form input:focus {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1);
  outline: none;
}

.profile-password-form .btn {
  min-height: 44px;
}

.profile-password-errors {
  margin-bottom: 10px;
}

/* Удаление аккаунта: приглушённая ссылка в профиле + страница подтверждения */
.profile-delete-link {
  margin-top: 18px;
  display: inline-flex;
  align-self: flex-start;
  color: var(--danger);
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
}

.profile-delete-link:hover {
  text-decoration: underline;
}

.profile-delete-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-delete-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.15;
}

.profile-delete-lead {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.profile-delete-block {
  padding: 15px 17px;
  border: 1px solid #f1d9d4;
  border-radius: 14px;
  background: #fcf3f1;
}

.profile-delete-subtitle {
  margin: 0 0 6px;
  color: #8a3a2e;
  font-size: 14px;
  font-weight: 760;
}

.profile-delete-block ul {
  margin: 0 0 12px;
  padding-left: 20px;
  color: #6f4a43;
  font-size: 14px;
  line-height: 1.5;
}

.profile-delete-block ul:last-child {
  margin-bottom: 0;
}

.profile-delete-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
}

.profile-delete-confirm input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--danger);
}

.profile-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-delete-actions .btn {
  flex: 1 1 200px;
}

.profile-listings-link {
  margin-top: 14px;
  min-height: 48px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfdfb;
  color: var(--text);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.profile-listings-link:hover {
  border-color: #b7d9c6;
  background: var(--green-soft);
  box-shadow: 0 10px 24px rgba(46, 125, 82, 0.12);
}

.profile-listings-link span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-listings-link strong {
  color: #44564c;
  font-size: 14px;
  font-weight: 780;
}

.profile-listings-link small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 540;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav-unread-badge {
  top: 3px;
  right: calc(50% - 26px);
}

.profile-listings-link svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--green-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.profile-listings-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.profile-listings-head {
  margin: 6px 0 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.profile-listings-kicker {
  margin: 0 0 5px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.profile-listings-head h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.05;
  letter-spacing: -1px;
}

.profile-listings-head p {
  max-width: 560px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.profile-listings-create {
  flex: 0 0 auto;
  min-width: 118px;
}

.profile-listings-tabs {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.profile-listings-tab {
  min-height: 42px;
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--white);
  color: #44564c;
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
}

.profile-listings-tab small {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #edf4ef;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  text-align: center;
}

.profile-listings-tab.is-active {
  border-color: #9acfac;
  background: var(--green-soft);
  color: var(--green-dark);
}

.profile-listings-tab.is-disabled {
  color: #819088;
  cursor: default;
  opacity: 0.76;
}

.profile-listings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-listing-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 14px 36px rgba(21, 54, 37, 0.08);
}

.profile-listing-card-link {
  min-height: 132px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  color: inherit;
  text-decoration: none;
}

.profile-listing-cover {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #eef8f1, #f8fcfa);
  color: var(--green);
  font-size: 42px;
  font-weight: 850;
  overflow: hidden;
}

.profile-listing-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.profile-listing-body {
  min-width: 0;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.profile-listing-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.profile-listing-topline span:last-child {
  flex: 0 0 auto;
  color: #8b9991;
  font-size: 11.5px;
}

.profile-listing-body h2 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-listing-price {
  margin: 0;
  color: var(--green-dark);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.profile-listing-location {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-listing-note {
  margin: 0;
  padding: 10px 15px;
  border-top: 1px solid #f1d9d4;
  background: #fcf3f1;
  color: #9a4a3a;
  font-size: 12.5px;
  font-weight: 640;
  line-height: 1.35;
}

.profile-listing-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 15px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
}

.profile-listing-actions form {
  margin: 0;
}

.profile-listing-delete {
  border: 1px solid rgba(192, 57, 43, 0.32);
  background: #fff;
  color: #c0392b;
}

.profile-listing-delete:hover {
  background: #fdeaea;
  border-color: rgba(192, 57, 43, 0.5);
}

.profile-listings-empty {
  padding: 34px 22px;
  border: 1px dashed #cfe0d5;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  text-align: center;
}

.profile-listings-empty h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(23px, 5vw, 30px);
  line-height: 1.15;
}

.profile-listings-empty p {
  max-width: 520px;
  margin: 12px auto 18px;
  font-size: 15px;
  line-height: 1.5;
}

/* === Публичная страница автора: все его активные объявления === */
.seller-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

/* Своя компактная шапка страницы автора: «‹ Назад» слева, бренд по центру,
   иконка чатов справа. Заменяет обычную шапку сайта только на этой странице.
   Кнопка назад использует общий компонент .listing-back-link — чтобы выглядела
   так же, как на странице объявления (на мобильном — белый круг со стрелкой).
   Иконка чатов сделана в том же стиле, чтобы шапка смотрелась цельно. */
.seller-header-inner {
  gap: 12px;
}

.seller-header-back {
  flex: 0 0 auto;
}

.seller-header-chats {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.84);
  color: #123222;
  box-shadow: 0 12px 28px rgba(16, 34, 23, 0.16);
  backdrop-filter: blur(12px);
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.seller-header-chats:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: #ffffff;
  color: var(--green-dark);
}

.seller-header-chats svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.seller-hero {
  margin: 0 0 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 14px 36px rgba(21, 54, 37, 0.07);
}

.seller-hero-avatar {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #eef8f1, #dbeede);
  color: var(--green-dark);
  font-size: 28px;
  font-weight: 850;
}

.seller-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seller-hero-info {
  min-width: 0;
  flex: 1 1 auto;
}

.seller-hero-toprow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.seller-hero-toprow h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.seller-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 820;
}

.seller-hero-meta {
  margin: 7px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
}

.seller-hero-count {
  color: var(--green-dark);
  font-weight: 800;
}

.seller-listings {
  margin-top: 4px;
}

.seller-empty {
  padding: 34px 22px;
  border: 1px dashed #cfe0d5;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  text-align: center;
}

.seller-empty h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(22px, 5vw, 28px);
  line-height: 1.15;
}

.seller-empty p {
  max-width: 480px;
  margin: 12px auto 18px;
  font-size: 15px;
  line-height: 1.5;
}

.chats-page,
/* === Рабочая область чата: список слева + активный чат справа (ПК) ===
   Точную высоту окна для body на ПК задаёт JS (setupChatDesktopLock) — это
   надёжнее медиа-запроса: страница чата получает ровно высоту окна и сама не
   прокручивается, листается только переписка/список внутри своих панелей. */
body.is-chat-page .container {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 22px;
  padding-bottom: 24px;
}

.chat-workspace {
  flex: 1 1 auto;
  /* Высота = ровно по окну браузера (без жёсткого минимума), иначе на невысоком
     окне область не влезала и прокручивалась вся страница. Переписка листается
     внутри своей панели. */
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(290px, 31%, 372px) minmax(0, 1fr);
  /* Высота строки = высота рабочей области, а не «по содержимому» — иначе высокий
     композер (с превью фото) распирал бы её вниз и уезжал за пределы экрана. */
  grid-template-rows: minmax(0, 1fr);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 18px 48px rgba(21, 54, 37, 0.10);
  overflow: hidden;
}

.chat-sidebar {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fbfdfb;
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.chat-sidebar-head {
  flex: 0 0 auto;
  padding: 13px 14px 11px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.chat-sidebar-title {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.chat-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--green-soft);
}

.chat-tab {
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.chat-tab.is-active {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 3px 10px rgba(21, 54, 37, 0.12);
}

.chat-sidebar-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.chat-sidebar-empty,
.chat-sidebar-empty-filter {
  margin: 0;
  padding: 22px 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.chat-sidebar-empty .btn {
  margin-top: 12px;
}

.chat-card {
  position: relative;
  padding: 9px 40px 9px 9px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.chat-card:hover {
  background: #f1f8f3;
}

.chat-card[hidden] {
  display: none;
}

.chat-card.is-active {
  background: var(--green-soft);
  border-color: #cfe6d8;
}

.chat-card-cover {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #eef8f1, #f8fcfa);
  color: var(--green);
  font-size: 22px;
  font-weight: 850;
  overflow: hidden;
}

.chat-card-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chat-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.chat-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-card-topline strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-card-topline time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.chat-card-listing,
.chat-card-message {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-card-listing {
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 650;
}

.chat-card-message {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.chat-card-message span {
  color: var(--text);
  font-weight: 650;
}

.chat-unread-badge {
  position: absolute;
  top: 50%;
  right: 12px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  transform: translateY(-50%);
}

.chats-empty,
.chat-empty-thread {
  padding: 34px 22px;
  border: 1px dashed #cfe0d5;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  text-align: center;
}

.chats-empty h2,
.chat-empty-thread h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(23px, 5vw, 30px);
  line-height: 1.15;
}

.chats-empty p,
.chat-empty-thread p {
  max-width: 460px;
  margin: 12px auto 18px;
  font-size: 15px;
  line-height: 1.5;
}

/* === Правая панель: активный чат === */
.chat-main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  overflow: hidden;
}

.chat-main-empty {
  align-items: center;
  justify-content: center;
}

.chat-empty-pane {
  max-width: 320px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
}

.chat-empty-pane-art {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  fill: none;
  stroke: #bcd5c6;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-empty-pane h2 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 19px;
}

.chat-empty-pane p {
  margin: 0;
  font-size: 14px;
}

.chat-thread-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.chat-thread-back {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--green-dark);
}

.chat-thread-back svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-thread-peer {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 4px 4px;
  margin: -4px 0;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.16s ease;
}

.chat-thread-peer:hover {
  background: var(--green-soft);
}

.chat-thread-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, #eef8f1, #dbeede);
  color: var(--green-dark);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
}

.chat-thread-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-thread-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.chat-thread-name {
  display: block;
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-peer-hint {
  display: block;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-thread-chats {
  position: relative;
  width: 42px;
  height: 42px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--green-dark);
}

.chat-thread-chats-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-thread-chats .nav-unread-badge {
  top: 3px;
  right: 3px;
}

.chat-thread-more {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.chat-thread-more::-webkit-details-marker { display: none; }
.chat-thread-more:hover { background: var(--green-soft); color: var(--green-dark); }

.chat-thread-more svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Выпадающее меню действий с собеседником (жалоба, блокировка). */
.chat-thread-menu { position: relative; flex: 0 0 auto; }
.chat-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  min-width: 196px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(16, 34, 23, 0.18);
}
.chat-menu-dropdown form { margin: 0; }
.chat-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.chat-menu-item:hover { background: var(--green-soft); }
.chat-menu-item svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-menu-item-danger { color: #c0392b; }
.chat-menu-item-danger:hover { background: #fdeaea; }

/* Баннер вместо поля ввода, когда чат заблокирован. */
.chat-blocked-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 13.5px;
  line-height: 1.4;
}
.chat-blocked-banner form { margin: 0; flex: 0 0 auto; }

/* Модалка жалобы на пользователя. */
.chat-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(16, 34, 23, 0.45);
}
.chat-report-overlay[hidden] { display: none; }
.chat-report-modal {
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 26px 60px rgba(16, 34, 23, 0.3);
}
.chat-report-modal h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--text); }
.chat-report-sub { margin: 4px 0 14px; color: var(--muted); font-size: 13.5px; }
.chat-report-form { display: flex; flex-direction: column; gap: 12px; }
.chat-report-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); }
.chat-report-form select,
.chat-report-form textarea { width: 100%; }
.chat-report-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }

.chat-thread-listing {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--green-soft);
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.chat-thread-listing.is-unavailable {
  opacity: 0.85;
}

.chat-thread-listing-cover {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  overflow: hidden;
  background: var(--white);
  color: var(--green);
  font-size: 16px;
  font-weight: 800;
}

.chat-thread-listing-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-thread-listing-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.chat-thread-listing-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-listing-meta {
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
}

.chat-thread-listing-id {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.chat-main .chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
}

.chat-main .chat-compose {
  flex: 0 0 auto;
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

/* Время показываем только под последним сообщением группы. */
.chat-message.is-grouped time {
  display: none;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.chat-message {
  width: fit-content;
  max-width: min(78%, 520px);
  padding: 10px 12px 7px;
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 5px;
  background: var(--white);
  box-shadow: 0 8px 22px rgba(21, 54, 37, 0.06);
}

.chat-message.is-own {
  align-self: flex-end;
  border-color: #9acfac;
  border-radius: 16px 16px 5px 16px;
  background: var(--green-soft);
}

.chat-message p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message time {
  margin-top: 5px;
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-align: right;
}

.chat-listing-strip.is-unavailable {
  cursor: default;
  opacity: 0.9;
}

.chat-message-photos {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chat-photo-thumb {
  width: 86px;
  height: 86px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--green-soft);
  overflow: hidden;
  cursor: zoom-in;
}

.chat-photo-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chat-message-photos:has(.chat-photo-thumb:only-child) .chat-photo-thumb {
  width: min(220px, 60vw);
  height: auto;
  aspect-ratio: 4 / 3;
}

.chat-compose {
  margin-top: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(21, 54, 37, 0.08);
}

.chat-compose-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.chat-attach {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: #fdfefd;
  color: var(--green-dark);
  cursor: pointer;
}

.chat-attach:hover {
  background: var(--green-soft);
}

.chat-attach svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat-compose textarea {
  width: 100%;
  min-height: 44px;
  /* Растём максимум до ~3–4 строк, дальше — прокрутка ВНУТРИ поля (как в OLX),
     чтобы поле не занимало пол-экрана вместе с клавиатурой. */
  max-height: 108px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: #fdfefd;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
}

.chat-compose textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(46, 125, 82, 0.1);
  outline: none;
}

.chat-compose .btn {
  min-height: 46px;
  align-self: end;
}

.chat-send {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.chat-send-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  /* Лёгкий сдвиг, чтобы «стрелка отправки» визуально стояла по центру. */
  transform: translateX(1px);
}

.chat-send:disabled {
  opacity: 0.6;
  cursor: default;
}

.chat-compose-error {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fdecec;
  color: #a32d2d;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.chat-compose-error[hidden] {
  display: none;
}

.chat-compose-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-compose-preview {
  position: relative;
  width: 64px;
  height: 64px;
}

.chat-compose-preview img {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  object-fit: cover;
}

.chat-compose-preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(15, 21, 18, 0.82);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 12, 10, 0.94);
}

.chat-lightbox[hidden] {
  display: none;
}

body.chat-lightbox-open {
  overflow: hidden;
}

.chat-lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.chat-lightbox-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.chat-lightbox-track.is-animating {
  transition: transform 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.chat-lightbox-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.chat-lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.chat-lightbox-close,
.chat-lightbox-nav {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(15, 21, 18, 0.6);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.chat-lightbox-close[hidden],
.chat-lightbox-nav[hidden] {
  display: none;
}

.chat-lightbox-close {
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}

.chat-lightbox-nav {
  top: 50%;
  width: 50px;
  height: 70px;
  font-size: 40px;
  line-height: 1;
  transform: translateY(-50%);
}

.chat-lightbox-prev { left: 16px; }
.chat-lightbox-next { right: 16px; }

.chat-lightbox-close:hover,
.chat-lightbox-nav:hover {
  background: rgba(15, 21, 18, 0.85);
}

.chat-lightbox-thumbs {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.chat-lightbox-thumbs::-webkit-scrollbar {
  display: none;
}

.chat-lightbox-thumbs[hidden] {
  display: none;
}

.chat-lightbox-thumb {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 9px;
  background: none;
  overflow: hidden;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 160ms ease;
}

.chat-lightbox-thumb.is-active {
  opacity: 1;
  border-color: #fff;
}

.chat-lightbox-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.chat-lightbox-counter {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 650;
  transform: translateX(-50%);
}

.chat-bottom-anchor {
  width: 1px;
  height: 1px;
}

.form-row-right {
  margin-top: -7px;
  text-align: right;
}

.link-sm { font-size: 13px; }

/* Показ/скрытие пароля */
.pw-field {
  position: relative;
  display: block;
}

.pw-field input { padding-right: 52px; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #718078;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.pw-toggle:hover {
  background: var(--green-soft);
  color: var(--green-dark);
}

.pw-toggle svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pw-slash {
  opacity: 0;
  transition: opacity 120ms ease;
}

.pw-toggle[aria-pressed="true"] .pw-slash { opacity: 1; }

/* Сообщения и ошибки */
.flashes {
  position: fixed;
  z-index: 80;
  right: 24px;
  bottom: 24px;
  width: min(360px, calc(100vw - 32px));
  margin: 0;
  pointer-events: none;
}

.flash,
.form-errors {
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 14px;
}

.flash {
  margin-bottom: 10px;
  box-shadow: 0 12px 30px rgba(32, 68, 48, 0.12);
  opacity: 1;
  pointer-events: auto;
  cursor: pointer; /* закрывается тапом/кликом */
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.flash-hiding {
  opacity: 0;
  transform: translateY(8px);
}

.flash-success { border: 1px solid #bfe3cb; background: #e8f6ed; color: #1e6b3a; }
.flash-error { border: 1px solid #f3c4c0; background: #fdeaea; color: var(--danger); }
.flash-info { border: 1px solid #cfe0f2; background: #eef4fb; color: #2a5a8f; }

.form-errors {
  margin-bottom: 20px;
  border: 1px solid #f3c4c0;
  background: #fdeaea;
  color: var(--danger);
}

.form-errors div { margin: 2px 0; }

.cf-turnstile {
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}

/* Подвал */
.site-footer {
  padding: 22px 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.site-footer p { margin: 0; }

@media (min-width: 641px) and (max-height: 850px) {
  .header-inner {
    min-height: 58px;
    padding-block: 7px;
  }

  .container {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .auth-card {
    margin: 0 auto;
    padding: 20px 26px;
  }

  .auth-heading {
    margin-bottom: 14px;
  }

  .auth-heading h1 {
    font-size: 24px;
  }

  .auth-heading p {
    margin-top: 4px;
  }

  .auth-form {
    gap: 10px;
  }

  .auth-form label {
    gap: 4px;
  }

  .auth-form input {
    height: 46px;
  }

  .cf-turnstile {
    min-height: 65px;
  }

  .divider {
    margin: 12px 0;
  }

  .auth-footer {
    margin-top: 12px;
  }

  .site-footer {
    padding-block: 14px;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .listing-detail-page {
    max-width: 720px;
  }

  .listing-detail-card {
    grid-template-columns: 1fr;
  }

  .listing-contact-card {
    position: static;
  }

  .listing-gallery-main-link {
    height: clamp(320px, 52vw, 420px);
  }
}

@media (max-width: 640px) {
  /* На смартфоне чат и ЛК есть в нижнем меню — в шапке их прячем (остаётся «Создать»). */
  .header-hide-mobile { display: none; }

  /* Кнопки модерации на смартфоне — крупно и в столбик, поле причины во всю ширину. */
  .mod-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .mod-actions > a,
  .mod-actions > form { width: 100%; }
  .mod-actions .btn { width: 100%; min-height: 44px; }
  .mod-actions .admin-reject-form { flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 8px; }
  .mod-actions .admin-reject-form input { width: 100%; min-height: 46px; }

  body.listing-create-shell {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  body.has-mobile-bottom-nav {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }

  body.has-listing-actions {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .header-inner {
    min-height: 54px;
    padding: 7px 14px;
    gap: 12px;
  }

  .site-header nav { gap: 7px; }
  .header-nav-auth {
    display: none;
  }

  .brand-hint { font-size: 11px; }
  .account-summary {
    min-height: 38px;
    padding: 7px 9px;
  }

  .header-action {
    width: 38px;
    height: 38px;
    padding: 8px;
  }

  .header-create-action {
    display: none;
  }

  .header-action-icon {
    width: 19px;
    height: 19px;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 75;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding: 6px 6px calc(7px + env(safe-area-inset-bottom, 0px));
    /* Ровно 5 пунктов В ОДИН РЯД (Главная, Избранное, Создать, Чат, ЛК) — сетка
       гарантирует равные колонки (у flex был квирк: пункт-<details> ЛК получался
       уже остальных). */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 2px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -12px 28px rgba(32, 68, 48, 0.1);
    /* Плавное авто-скрытие при скролле вниз (класс на body вешает JS). */
    transition: transform 0.3s ease;
  }

  body.scroll-hide-bottom-nav .mobile-bottom-nav {
    transform: translateY(110%);
  }

  /* Пункт ЛК — это <details>; его summary должен заполнять ячейку целиком. */
  .mobile-bottom-nav > .mobile-bottom-account { width: 100%; height: 100%; }
  .mobile-bottom-account > .mobile-bottom-summary { width: 100%; height: 100%; }

  /* Ровная геометрия 5 пунктов:
     - каждый пункт растянут на высоту ряда (stretch) и прижимает содержимое К НИЗУ —
       подписи всех пунктов стоят на одной линии, даже у «Создать» с большим кружком;
     - у иконок единая зона 26px (сами иконки 24px по центру зоны), кружок «Создать»
       крупнее и просто выступает вверх — как акцентная центральная кнопка. */
  .mobile-bottom-nav {
    align-items: stretch;
  }

  .mobile-bottom-nav .mobile-bottom-action {
    height: 100%;
    padding: 4px 2px 2px;
    gap: 4px;
    justify-content: flex-end;
  }

  .mobile-bottom-nav .mobile-bottom-action > .mobile-bottom-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 1px; /* оптическая компенсация: контур иконок легче кружка */
  }

  .mobile-bottom-nav .mobile-create-icon {
    width: 33px;
    height: 33px;
  }

  .mobile-bottom-nav .mobile-bottom-label {
    font-size: 10.5px;
    line-height: 1.15;
  }

  .listing-create-action-bar {
    position: fixed;
    z-index: 90;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: calc(74px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -14px 34px rgba(32, 68, 48, 0.13);
  }

  .listing-create-label-full {
    display: none;
  }

  .listing-create-label-short {
    display: inline;
  }

  .listing-create-cancel,
  .listing-create-preview,
  .listing-create-submit {
    min-height: 50px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
  }

  .listing-create-cancel {
    flex: 0 0 50px;
    width: 50px;
  }

  .listing-create-preview {
    flex: 0 0 102px;
    width: 102px;
  }

  .listing-create-submit {
    flex: 1 1 auto;
    width: auto;
  }

  .listing-create-preview,
  .listing-create-submit {
    font-size: 13.5px;
  }

  .listing-description-field textarea {
    min-height: 180px;
  }

  .listing-description-editor-overlay {
    width: 100%;
    max-width: 100%;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
  }

  .listing-description-editor {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: var(--listing-editor-viewport-height, 100dvh);
    max-height: var(--listing-editor-viewport-height, 100dvh);
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    border: 0;
    border-radius: 0;
  }

  .listing-description-editor-header {
    align-items: center;
  }

  .listing-description-editor-header h2 {
    font-size: 19px;
  }

  .listing-description-editor-input {
    min-height: 0;
    font-size: 16px;
  }

  .listing-description-editor-footer {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .listing-description-editor-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: 9px;
  }

  .listing-description-editor-actions .btn {
    width: 100%;
    min-height: 46px;
  }

  .listing-preview-modal {
    inset: 0;
    width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 14px 12px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: none;
    border: 0;
    border-radius: 0;
  }

  .listing-preview-header {
    align-items: center;
  }

  .listing-preview-header h2 {
    font-size: 18px;
  }

  .listing-preview-card {
    padding: 14px;
    border-radius: 16px;
  }

  .listing-preview-photo-placeholder {
    min-height: 210px;
  }

  .listing-preview-media img {
    max-height: 380px;
  }

  .listing-preview-card h3 {
    font-size: 21px;
  }

  .listing-preview-price {
    font-size: 23px;
  }

  .mobile-bottom-account .account-dropdown {
    position: fixed;
    top: auto;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 190px;
    max-width: calc(100vw - 24px);
  }

  .listing-mobile-actions {
    position: fixed;
    z-index: 80;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px));
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 -14px 32px rgba(32, 68, 48, 0.12);
  }

  .listing-mobile-actions-message-only {
    grid-template-columns: minmax(0, 1fr);
  }

  .listing-mobile-action {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font: inherit;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .listing-mobile-call {
    border: 1px solid var(--green-dark);
    background: var(--white);
    color: var(--green-dark);
  }

  .listing-mobile-message {
    border: 1px solid var(--green-dark);
    background: var(--green-dark);
    color: #fff;
  }

  .listing-mobile-message[aria-disabled="true"] {
    cursor: default;
  }

  .account-dropdown {
    width: 180px;
    max-width: calc(100vw - 28px);
  }

  .container {
    padding: 14px 12px 28px;
  }

  .listing-detail-body .container {
    padding: 0 0 28px;
  }

  .home-search {
    width: 100%;
    margin: -5px auto 16px;
  }

  .home-search input {
    min-height: 42px;
    padding: 9px 54px 9px 44px;
    border-radius: 13px;
  }

  .home-search-submit {
    right: 4px;
    min-width: 38px;
    width: 38px;
    min-height: 34px;
    padding: 8px;
    border-radius: 11px;
  }

  .home-search-submit span {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .results-search-row {
    margin: -5px auto 8px;
    gap: 7px;
  }

  .results-search input {
    height: 42px;
    padding-block: 9px;
    border-radius: 13px;
  }

  .results-location-summary {
    min-width: 76px;
    height: 42px;
    padding: 9px 11px;
    border-radius: 13px;
    font-size: 13.5px;
  }

  .results-location-panel {
    position: fixed;
    top: 112px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
    overflow: hidden;
    padding: 0;
    border-radius: 16px;
  }

  .results-location-scroll {
    padding: 12px;
  }

  .results-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .results-area-chip {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 12.5px;
  }

  .results-location-actions {
    position: static;
    margin: 0;
    padding: 10px 12px 12px;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid var(--border);
  }

  .results-options-row {
    margin-bottom: 14px;
  }

  .results-head {
    margin-bottom: 12px;
  }

  .results-controls {
    width: auto;
    justify-content: flex-end;
  }

  .results-control-summary {
    width: 40px;
    height: 40px;
    padding: 9px;
  }

  .results-control-panel {
    top: calc(100% + 8px);
  }

  .results-empty {
    min-height: 210px;
    padding: 34px 18px;
  }

  .results-view-list,
  .results-view-wide {
    grid-template-columns: 1fr;
  }

  .results-view-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .results-view-grid .listing-card {
    border-radius: 15px;
  }

  .results-view-grid .listing-card-photo {
    min-height: 0;
    font-size: 40px;
  }

  .results-view-grid .listing-card-body {
    padding: 10px;
    gap: 6px;
  }

  .results-view-grid .listing-card-topline {
    font-size: 10.5px;
  }

  .results-view-grid .listing-card h2 {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .results-view-grid .listing-card-price {
    font-size: 17px;
  }

  .results-view-grid .listing-card-location {
    font-size: 12.5px;
  }

  .results-view-list .listing-card-link {
    grid-template-columns: 94px minmax(0, 1fr);
    min-height: 104px;
  }

  .results-view-list .listing-card-photo {
    min-height: 104px;
    font-size: 32px;
  }

  .results-view-list .listing-card-body {
    padding: 10px 11px;
  }

  .results-view-list .listing-card h2 {
    font-size: 15px;
  }

  .results-view-wide .listing-card-link {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .results-view-wide .listing-card-photo {
    min-height: 190px;
    font-size: 58px;
  }

  .results-view-wide .listing-card-body {
    padding: 15px;
  }

  .results-view-wide .listing-card h2 {
    font-size: 20px;
  }

  .listing-card-photo {
    min-height: 120px;
    font-size: 42px;
  }

  .listing-card-body {
    padding: 12px;
  }

  .listing-form-grid,
  .listing-detail-card,
  .admin-listing-card {
    grid-template-columns: 1fr;
  }

  .listing-detail-page {
    max-width: none;
  }

  .listing-detail-main,
  .listing-contact-card {
    padding: 18px;
    border-radius: 17px;
  }

  .listing-detail-main {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding: 0 0 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .listing-gallery {
    margin: 0 0 18px;
  }

  .listing-back-link {
    width: 42px;
    min-height: 42px;
    padding: 0;
  }

  .listing-back-text {
    position: absolute !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .listing-back-link-overlay {
    top: 10px;
    left: 10px;
  }

  .listing-owner-menu-overlay {
    top: 10px;
    right: 10px;
  }

  .listing-owner-menu-trigger {
    width: 42px;
    height: 42px;
  }

  .listing-gallery-main {
    border-radius: 0;
  }

  .listing-gallery-main-link {
    height: clamp(260px, 76vw, 330px);
    min-height: 0;
    border-radius: 0;
  }

  .listing-photo-manager-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .listing-gallery-thumbs {
    padding: 0 18px;
    gap: 7px;
  }

  .listing-gallery-thumb {
    max-width: none;
  }

  .listing-photo-manager {
    margin: 0 18px 20px;
  }

  .listing-photo-viewer-header {
    min-height: 58px;
    padding: 9px 10px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .listing-photo-viewer-back {
    min-height: 38px;
    padding: 7px 10px 7px 8px;
    font-size: 13px;
  }

  .listing-photo-viewer-heading {
    padding-right: 46px;
  }

  .listing-photo-viewer-heading p {
    font-size: 13px;
  }

  .listing-photo-viewer-header-spacer,
  .listing-photo-viewer-zoom {
    display: none;
  }

  .listing-photo-viewer-stage {
    padding: 6px 0 8px;
  }

  .listing-photo-viewer-image-frame {
    width: 100%;
  }

  .listing-photo-viewer-image {
    width: 100%;
    max-height: calc(100vh - 142px);
    max-height: calc(100svh - 142px);
    border-radius: 0;
    box-shadow: none;
  }

  .listing-photo-viewer-nav {
    display: none;
  }

  .listing-photo-viewer-thumbs {
    --viewer-thumb-gap: clamp(3px, 1vw, 8px);
    min-height: 78px;
    padding: 8px 10px 10px;
    justify-content: center;
    gap: var(--viewer-thumb-gap);
  }

  .listing-photo-viewer-thumb {
    width: clamp(
      30px,
      calc((100vw - 20px - ((var(--viewer-thumb-count) - 1) * var(--viewer-thumb-gap))) / var(--viewer-thumb-count)),
      70px
    );
    border-radius: 10px;
  }

  .listing-photo-viewer-thumb img {
    border-radius: 6px;
  }

  .listing-photo-manager {
    padding: 12px;
  }

  .listing-photo-add-form {
    grid-template-columns: 1fr;
  }

  .listing-contact-card {
    width: 100%;
  }

  .listing-detail-page .listing-contact-card {
    display: none;
  }

  .listing-published-at {
    margin: 0 18px 7px;
    font-size: 12px;
  }

  .listing-detail-main h1 {
    max-width: none;
    margin: 0 18px 8px;
    font-size: 22px;
    line-height: 1.2;
  }

  .listing-price {
    margin: 0 18px 17px;
    font-size: 26px;
  }

  /* Теги категории и состояния — с тем же боковым отступом, что и остальной текст. */
  .listing-category-line {
    margin: -7px 18px 16px;
  }

  .listing-description {
    max-width: 100%;
    margin: 0 18px 16px;
    font-size: 15px;
    line-height: 1.56;
  }

  .listing-detail-location {
    margin: 0 18px 14px;
  }

  .listing-detail-main > .listing-visible-id {
    margin: 0 18px 16px;
  }

  .listing-author {
    max-width: none;
    margin-right: 18px;
    margin-left: 18px;
    padding: 11px 12px;
    border-radius: 13px;
  }

  .listing-report {
    margin-right: 18px;
    margin-left: 18px;
  }

  .listing-form input,
  .listing-form textarea,
  .listing-form select {
    min-height: 44px;
    font-size: 16px;
  }

  .listing-price-type-option {
    min-height: 42px;
    padding-inline: 4px;
    font-size: 12.5px;
  }

  .admin-listing-actions {
    grid-template-columns: 1fr;
  }

  .admin-heading {
    margin-bottom: 14px;
  }

  .admin-note {
    margin-bottom: 14px;
    font-size: 13px;
  }

  .admin-region-summary {
    min-height: 50px;
    padding: 12px 13px;
  }

  .admin-inline-form,
  .admin-move-form {
    padding: 12px;
    grid-template-columns: 1fr;
  }

  .admin-city-list {
    padding: 0 12px 12px;
  }

  .admin-city {
    padding: 12px;
  }

  .admin-city-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .admin-city-head form,
  .admin-city-head .btn {
    width: 100%;
  }

  .admin-area {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    border-radius: 14px;
  }

  .admin-area-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .admin-area-move {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-area select {
    width: 100%;
  }

  .hero {
    padding: 18px 8px 34px;
  }

  .home-location {
    margin-bottom: 18px;
  }

  .home-location-heading {
    margin-bottom: 8px;
  }

  .location-summary {
    min-height: 58px;
    padding: 10px 12px;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    gap: 10px;
    border-radius: 15px;
  }

  .location-pin {
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }

  .location-summary-hint {
    display: none;
  }

  .location-summary-value {
    font-size: 15px;
  }

  .location-panel {
    position: fixed;
    top: 66px;
    right: 10px;
    left: 10px;
    max-height: calc(100vh - 88px);
    padding: 10px;
    overflow-y: auto;
    border-radius: 16px;
  }

  .location-current-path {
    font-size: 11.5px;
  }

  .location-tree-summary,
  .location-tree-option {
    min-height: 38px;
    padding-block: 8px;
    padding-right: 9px;
    font-size: 13.5px;
  }

  .location-tree-summary::before {
    width: 16px;
    height: 16px;
    font-size: 16px;
  }

  .location-tree-meta,
  .location-tree-option small {
    font-size: 10.5px;
  }

  .location-tree-list-label {
    font-size: 10.5px;
  }

  .location-level-0 { padding-left: 9px; }
  .location-level-1 { padding-left: 9px; }
  .location-level-2 { padding-left: 20px; }
  .location-level-3 { padding-left: 30px; }
  .location-level-4 { padding-left: 40px; }
  .location-level-5 { padding-left: 50px; }

  .location-tree-option span {
    white-space: normal;
  }

  .location-reset {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--white);
  }

  .placeholder {
    padding: 32px 18px;
  }

  .auth-card {
    margin: 0 auto;
    padding: 20px 18px;
    border-radius: 16px;
  }

  .profile-card {
    margin: 0 auto;
    padding: 16px;
    border-radius: 16px;
  }

  .profile-listings-link {
    margin-top: 12px;
    min-height: 46px;
    padding: 10px 12px;
  }

  .profile-listings-page {
    max-width: 100%;
  }

  .profile-listings-head {
    margin: 0 0 13px;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .profile-listings-head h1 {
    font-size: 29px;
  }

  .profile-listings-head p {
    margin-top: 7px;
    font-size: 14px;
  }

  .profile-listings-create {
    width: 100%;
    min-height: 42px;
  }

  .profile-listings-tabs {
    margin-inline: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-listings-tab {
    min-height: 40px;
    padding: 8px 11px;
    justify-content: space-between;
    font-size: 13px;
  }

  .profile-listings-tab span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profile-listings-tab small {
    flex: 0 0 auto;
  }

  .profile-listings-grid {
    grid-template-columns: 1fr;
    gap: 11px;
  }

  .profile-listing-card {
    border-radius: 16px;
  }

  .profile-listing-card-link {
    min-height: 112px;
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .profile-listing-cover {
    min-height: 112px;
    font-size: 34px;
  }

  .profile-listing-body {
    padding: 11px 12px;
  }

  .profile-listing-body h2 {
    font-size: 16px;
  }

  .profile-listing-price {
    font-size: 17px;
  }

  .profile-listings-empty {
    padding: 30px 18px;
    border-radius: 18px;
  }

  .seller-page {
    max-width: 100%;
  }

  .seller-header-inner {
    gap: 10px;
  }

  .seller-hero {
    padding: 13px 14px;
    gap: 12px;
    border-radius: 16px;
  }

  .seller-hero-avatar {
    width: 54px;
    height: 54px;
    font-size: 23px;
  }

  .seller-empty {
    padding: 30px 18px;
    border-radius: 18px;
  }

  .chats-page,
  .chat-thread-page {
    max-width: 100%;
  }

  .chats-head {
    margin: 0 0 13px;
  }

  .chats-head h1 {
    font-size: 29px;
  }

  .chats-head p {
    font-size: 14px;
  }

  .chat-list {
    gap: 10px;
  }

  .chat-card {
    min-height: 96px;
    padding: 9px 38px 9px 9px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
    border-radius: 16px;
  }

  .chat-card-cover {
    min-height: 76px;
    border-radius: 13px;
    font-size: 30px;
  }

  .chat-card-topline strong {
    font-size: 14px;
  }

  .chat-card-listing,
  .chat-card-message {
    font-size: 12.5px;
  }

  .chat-unread-badge {
    top: 10px;
    right: 10px;
  }

  .chats-empty,
  .chat-empty-thread {
    padding: 30px 18px;
    border-radius: 18px;
  }

  .chat-back-link {
    margin-bottom: 10px;
  }

  .chat-listing-strip {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    border-radius: 16px;
  }

  .chat-listing-cover {
    min-height: 62px;
    border-radius: 13px;
    font-size: 26px;
  }

  .chat-listing-info h1 {
    font-size: 16px;
  }

  .chat-message {
    max-width: 86%;
    padding: 9px 11px 7px;
  }

  .chat-message p {
    font-size: 14.5px;
  }

  /* === Мобильный чат === */
  /* Рабочая область на смартфоне — без рамки/сетки (одна панель на экран). */
  .chat-workspace {
    display: block;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .chat-sidebar {
    background: transparent;
    border-right: none;
    overflow: visible;
  }

  /* Список чатов (/chats): сайдбар во весь экран, карточки — отдельными плашками. */
  .is-chat-list .chat-main-empty {
    display: none;
  }

  .is-chat-list .chat-sidebar-head {
    padding: 4px 2px 12px;
    background: transparent;
    border-bottom: none;
  }

  .is-chat-list .chat-sidebar-title {
    font-size: clamp(26px, 6vw, 34px);
  }

  .is-chat-list .chat-sidebar-list {
    padding: 0;
    gap: 8px;
    overflow: visible;
  }

  .is-chat-list .chat-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    box-shadow: 0 10px 26px rgba(21, 54, 37, 0.07);
  }

  .is-chat-list .chat-card.is-active {
    border-color: #cfe6d8;
  }

  /* Диалог (/chats/{id}): полноэкранный мессенджер.
     Высота = видимая часть экрана (--chat-app-height ставит JS по visualViewport,
     поэтому при выезде клавиатуры поле ввода остаётся над ней). */
  body.is-chat-thread {
    position: fixed;
    /* Блок чата точно накрывает ВИДИМУЮ область экрана: top следует за сдвигом
       visualViewport (при клавиатуре iOS сдвигает видимую область — без этого чат
       «улетал» вверх), height = видимая высота. */
    top: var(--chat-app-top, 0px);
    left: 0;
    right: 0;
    height: 100svh;
    height: var(--chat-app-height, 100dvh);
    /* ВАЖНО: гасим базовый min-height: 100vh — на iOS 100vh больше видимой высоты
       и перебивает height, из-за чего низ с полем ввода уходил под панель браузера. */
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }

  /* На диалоге глобальную шапку прячем — её роль играет компактная шапка чата. */
  body.is-chat-thread .site-header {
    display: none;
  }

  body.is-chat-thread main.container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.is-chat-thread .flashes {
    flex: 0 0 auto;
    margin: 8px 12px 0;
  }

  body.is-chat-thread .chat-workspace,
  body.is-chat-thread .chat-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* Список (сайдбар) на мобильном диалоге скрыт. */
  body.is-chat-thread .chat-sidebar {
    display: none;
  }

  /* Шапка чата: на смартфоне показываем «назад» и значок чатов, прячем «…». */
  body.is-chat-thread .chat-thread-back,
  body.is-chat-thread .chat-thread-chats {
    display: inline-flex;
  }

  body.is-chat-thread .chat-thread-more {
    display: inline-flex;
  }

  body.is-chat-thread .chat-thread-head {
    padding: 8px 8px 8px 4px;
  }

  body.is-chat-thread .chat-thread-listing-id {
    display: none;
  }

  body.is-chat-thread .chat-main .chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 12px;
    overscroll-behavior: contain;
  }

  body.is-chat-thread .chat-main .chat-compose {
    flex: 0 0 auto;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }

  body.is-chat-thread .chat-bottom-anchor {
    display: none;
  }

  .chat-compose textarea {
    min-height: 44px;
    max-height: 100px;
    font-size: 16px;
  }

  .chat-message-photos .chat-photo-thumb {
    width: 78px;
    height: 78px;
  }

  /* На смартфоне переключаем фото свайпом, поэтому боковые стрелки прячем. */
  .chat-lightbox {
    padding: 0;
  }

  .chat-lightbox-nav {
    display: none;
  }

  .listing-create-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  .listing-create-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-heading {
    margin-bottom: 16px;
  }

  .auth-heading h1 {
    font-size: 23px;
  }

  .auth-heading p { margin-top: 5px; }
  .auth-form { gap: 13px; }
  .auth-form label { gap: 5px; }
  .form-row-right { margin-top: -6px; }
  .divider { margin: 16px 0; }
  .auth-footer { margin-top: 16px; }
  .form-errors { margin-bottom: 15px; }

  .profile-hero {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .avatar-picker {
    width: 56px;
    height: 56px;
  }

  .avatar-initial {
    font-size: 23px;
  }

  .avatar-edit {
    width: 23px;
    height: 23px;
  }

  .profile-name-editor {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 6px;
  }

  .profile-name-editor input {
    padding-inline: 2px;
    font-size: 21px;
  }

  .profile-edit-name {
    width: 32px;
    height: 32px;
    padding: 7px;
  }

  .profile-section-title {
    margin-top: 14px;
  }

  .flashes {
    bottom: 14px;
    right: 8px;
    left: 8px;
    width: auto;
  }

  /* Факты модерации на смартфоне — в одну колонку, чтобы не тесниться. */
  .mod-facts {
    grid-template-columns: 1fr;
  }

  /* Тост не должен накрывать нижнюю навигацию и панель действий объявления. */
  body.has-mobile-bottom-nav .flashes {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  body.has-listing-actions .flashes {
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .flash {
    font-size: 14px;
  }

  .profile-field {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 9px;
  }

  .profile-label {
    font-size: 12px;
  }

  .profile-value,
  .profile-field input {
    min-height: 44px;
    padding: 9px 11px;
  }

  .profile-actions {
    margin-top: 4px;
  }

  .profile-actions .btn {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .profile-password-summary {
    min-height: 42px;
  }

  .btn-compact {
    min-height: 38px;
    padding: 8px 12px;
  }
}

@media (max-width: 390px) {
  .logo { font-size: 20px; }
  .site-header nav { gap: 6px; }
  .site-header nav > a:not(.btn) { font-size: 13px; }
  .home-search input {
    min-height: 40px;
    font-size: 15px;
  }
  .results-search input {
    height: 40px;
    font-size: 15px;
  }
  .results-location-summary {
    height: 40px;
    min-width: 72px;
    font-size: 13px;
  }
  .results-head h1 {
    font-size: 22px;
  }
  .home-location h2 { font-size: 18px; }
  .location-summary {
    padding-inline: 10px;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
  }
  .location-pin {
    width: 34px;
    height: 34px;
  }
  .location-summary-label {
    font-size: 11px;
  }
  .location-summary-value {
    font-size: 14px;
  }
  .account-summary {
    padding-inline: 8px;
    font-size: 13px;
  }
  .account-icon,
  .account-chevron {
    width: 16px;
    height: 16px;
  }
  .header-action {
    width: 36px;
    height: 36px;
    padding: 8px;
  }
  .header-action-icon {
    width: 18px;
    height: 18px;
  }
  .btn-compact { padding-inline: 10px; }
  .auth-card { padding-inline: 17px; }
  .profile-card { padding-inline: 15px; }
  .profile-listing-card-link {
    grid-template-columns: 96px minmax(0, 1fr);
  }
  .profile-listing-cover {
    min-height: 106px;
  }
  .profile-listing-body {
    padding-inline: 10px;
  }
  .profile-listing-topline {
    font-size: 11.5px;
  }
  .profile-listing-topline span:last-child {
    font-size: 11px;
  }
  .profile-hero {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
  }
  .avatar-picker {
    width: 50px;
    height: 50px;
  }
  .avatar-initial {
    font-size: 21px;
  }
  .avatar-edit {
    width: 22px;
    height: 22px;
  }
  .profile-name-editor input {
    font-size: 20px;
  }
  .profile-email-muted {
    font-size: 12px;
  }
  .profile-meta {
    font-size: 12px;
  }
  .profile-field {
    column-gap: 7px;
  }
  .profile-label {
    font-size: 11.5px;
  }
  .profile-value,
  .profile-field input {
    padding-inline: 10px;
  }
}

@media (max-width: 360px) {
  .cf-turnstile { margin-inline: -21px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.admin-debug-note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px dashed #cfe0d5;
  border-radius: 12px;
  background: rgba(247, 251, 248, 0.7);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.admin-debug-note strong { color: var(--green-dark); }
.admin-debug-note code { font-size: 12px; }

/* ===================== Оценки и отзывы продавцов ===================== */

/* Дробный показ среднего балла: серые звёзды снизу, золотые сверху по ширине. */
.stars {
  --rating: 0;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  font-family: Arial, "Segoe UI Symbol", sans-serif;
  white-space: nowrap;
  vertical-align: middle;
}
/* Золотая заливка глифов градиентом: золото до доли --rating/5, дальше серый.
   background-clip: text работает во всех современных браузерах, включая мобильные. */
.stars::before {
  content: "★★★★★";
  background-image: linear-gradient(
    90deg,
    #f5a623 calc(var(--rating) * 20%),
    #d6e0d8 calc(var(--rating) * 20%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Доля заполнения задаётся классом (CSP блокирует инлайн-стиль). Шаг — половина звезды. */
.stars-r0 { --rating: 0; }
.stars-r1 { --rating: 0.5; }
.stars-r2 { --rating: 1; }
.stars-r3 { --rating: 1.5; }
.stars-r4 { --rating: 2; }
.stars-r5 { --rating: 2.5; }
.stars-r6 { --rating: 3; }
.stars-r7 { --rating: 3.5; }
.stars-r8 { --rating: 4; }
.stars-r9 { --rating: 4.5; }
.stars-r10 { --rating: 5; }
.stars-lg { font-size: 24px; }
.star-glyph { color: #f5a623; }

/* Компактный рейтинг в блоке «Автор» на странице объявления. */
.listing-author-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 750;
  color: var(--text);
}
.listing-author-rating .star-glyph { font-size: 15px; }
.listing-author-rating-value { font-weight: 850; }
.listing-author-rating-count { color: var(--muted); font-weight: 650; }

/* Рейтинг-кнопка в шапке страницы автора (ведёт на отзывы). */
.seller-hero-rating {
  width: fit-content;
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.seller-hero-rating:hover { border-color: #9acfac; background: var(--green-soft); }
.seller-hero-rating-value { font-weight: 850; font-size: 15px; }
.seller-hero-rating-counts { color: var(--muted); font-size: 13px; font-weight: 650; }
.seller-hero-rating-arrow { color: var(--green); font-weight: 800; font-size: 18px; line-height: 1; }

/* Публичная страница отзывов продавца. */
.reviews-page { width: 100%; max-width: 760px; margin: 0 auto; }
.reviews-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.reviews-head-avatar {
  width: 56px; height: 56px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 50%;
  background: linear-gradient(145deg, #eef8f1, #dbeede);
  color: var(--green-dark); font-size: 24px; font-weight: 850;
}
.reviews-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviews-kicker {
  margin: 0 0 3px; color: var(--green-dark);
  font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
}
.reviews-head-info h1 {
  margin: 0; font-size: clamp(24px, 5vw, 34px); letter-spacing: -0.5px; line-height: 1.05;
  overflow-wrap: anywhere; word-break: break-word;
}
.reviews-summary {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--white); box-shadow: 0 14px 36px rgba(21, 54, 37, 0.07);
}
.reviews-summary-score { display: flex; align-items: center; gap: 12px; }
.reviews-summary-average {
  font-size: 40px; font-weight: 850; line-height: 1; color: var(--text); letter-spacing: -1px;
}
.reviews-summary-counts { margin: 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.reviews-list { display: flex; flex-direction: column; gap: 12px; }
.reviews-empty {
  padding: 34px 22px; border: 1px dashed #cfe0d5; border-radius: 20px;
  background: rgba(255, 255, 255, 0.78); color: var(--muted); text-align: center;
}
.reviews-empty h2 { margin: 0; color: var(--text); font-size: clamp(20px, 4.5vw, 26px); }
.reviews-empty p { max-width: 460px; margin: 10px auto 0; font-size: 15px; line-height: 1.5; }
.reviews-empty .btn { margin-top: 16px; }

/* Карточка одного отзыва (общая для публичной страницы и ЛК). */
.review-card {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--white); box-shadow: 0 12px 30px rgba(21, 54, 37, 0.06);
}
.review-card-head { display: flex; align-items: center; gap: 11px; }
.review-card-avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 50%;
  background: linear-gradient(145deg, #eef8f1, #dbeede);
  color: var(--green-dark); font-weight: 800;
}
.review-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-card-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.review-card-name { font-weight: 750; color: var(--text); overflow-wrap: anywhere; word-break: break-word; }
.review-card-subline { display: flex; align-items: center; gap: 8px; }
.review-card-date { color: var(--muted); font-size: 12.5px; }
.review-card-text {
  margin: 11px 0 0; color: var(--text); font-size: 14.5px; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere; word-break: break-word;
}
.review-card-listing { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; word-break: break-word; }
.review-card-listing i { font-style: normal; opacity: 0.85; }

/* Миниатюра фото к отзыву (клик открывает полноэкранный просмотрщик). */
.review-card-photo { margin: 11px 0 0; }
.review-photo-thumb {
  display: block; width: 120px; height: 120px; padding: 0; line-height: 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--white); cursor: zoom-in;
}
.review-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-photo-thumb:hover { border-color: var(--green); }
.review-photo-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Жалоба на отзыв. */
.review-report { margin-top: 10px; }
.review-report-summary {
  display: inline-flex; align-items: center; cursor: pointer; list-style: none;
  color: var(--muted); font-size: 12.5px; font-weight: 700;
}
.review-report-summary::-webkit-details-marker { display: none; }
.review-report-summary:hover { color: var(--green-dark); }
.review-report-form {
  margin-top: 10px; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: rgba(247, 251, 248, 0.7);
}
.review-report-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text); }
.review-report-form select, .review-report-form textarea { width: 100%; }
.review-report-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Личный кабинет: раздел «Отзывы». */
.lk-reviews-page { width: 100%; max-width: 760px; margin: 0 auto; }
.lk-reviews-head { margin: 6px 0 14px; }
.lk-reviews-head h1 { margin: 0; font-size: clamp(28px, 5vw, 40px); letter-spacing: -1px; line-height: 1.05; }
.reviews-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.reviews-tab {
  min-height: 42px; padding: 9px 15px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--white);
  color: #44564c; font-size: 14px; font-weight: 760; text-decoration: none;
}
.reviews-tab.is-active { border-color: #9acfac; background: var(--green-soft); color: var(--green-dark); }
.reviews-tab-badge {
  min-width: 18px; height: 18px; padding: 0 5px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #d93636; color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}
.lk-reviews-summary {
  margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px;
  background: var(--white); box-shadow: 0 14px 36px rgba(21, 54, 37, 0.07);
}
.lk-summary-score { display: flex; align-items: center; gap: 12px; }
.lk-summary-average { font-size: 38px; font-weight: 850; line-height: 1; letter-spacing: -1px; color: var(--text); }
.lk-summary-counts { margin: 6px 0 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.lk-summary-note {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--green-soft); color: var(--green-dark); font-size: 13px; line-height: 1.45;
}
.lk-summary-empty-note { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* Раздел «Мои жалобы на отзывы» — решение модератора, видимое подавшему жалобу. */
.lk-complaints { margin-top: 26px; }
.lk-complaints-title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.lk-complaints-intro { margin: 4px 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.lk-complaint-card {
  margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--white);
}
.lk-complaint-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lk-complaint-status {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--green-soft); color: var(--green-dark);
}
.lk-complaint-accepted .lk-complaint-status { background: #e7f4ea; color: #2c6b41; }
.lk-complaint-rejected .lk-complaint-status { background: #fdeaea; color: #a23a3a; }
.lk-complaint-date { color: var(--muted); font-size: 12.5px; }
.lk-complaint-line { margin: 3px 0 0; font-size: 13.5px; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.lk-complaint-line span { color: var(--muted); font-weight: 700; }
.lk-complaint-decision {
  margin: 9px 0 0; padding: 9px 11px; border-radius: 10px; background: rgba(247, 251, 248, 0.8);
  font-size: 13.5px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; word-break: break-word;
}
.lk-complaint-decision strong { color: var(--green-dark); }
.lk-complaint-muted { color: var(--muted); background: transparent; padding-left: 0; }

.rate-intro { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.rate-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rate-card {
  min-width: 0;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border: 1px solid var(--border); border-radius: 18px; background: var(--white);
  box-shadow: 0 12px 30px rgba(21, 54, 37, 0.06);
}
.rate-card-seller { min-width: 0; display: flex; align-items: center; gap: 11px; }
.rate-card-avatar {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 50%;
  background: linear-gradient(145deg, #eef8f1, #dbeede);
  color: var(--green-dark); font-weight: 850; text-decoration: none;
}
.rate-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rate-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rate-card-name { font-weight: 800; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.rate-card-name:hover { color: var(--green-dark); }
.rate-card-listing {
  color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rate-card-repeat {
  align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-dark); font-size: 11px; font-weight: 800;
}
.rate-card-rating { display: flex; flex-direction: column; gap: 6px; }
.rate-card-stars-label { font-size: 13px; font-weight: 750; color: var(--muted); }

/* Поле отзыва раскрывается после выбора оценки (только при включённом JS). */
.rate-card-extra { display: flex; flex-direction: column; gap: 9px; }
.rate-card.js-collapse .rate-card-extra { display: none; }
.rate-card.js-collapse.is-rated .rate-card-extra { display: flex; }
.rate-card-comment-label { font-size: 13px; font-weight: 750; color: var(--text); }
.rate-card-comment {
  width: 100%; resize: vertical; min-height: 70px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--white);
  color: var(--text); font: inherit; line-height: 1.5;
}
.rate-card-comment:focus { outline: none; border-color: #9acfac; box-shadow: 0 0 0 3px rgba(99, 153, 34, 0.12); }

/* Прикрепление одного фото к отзыву. */
.rate-card-photo-field { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rate-card-photo-add {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border: 1px dashed #b9d3c1; border-radius: 12px;
  background: var(--green-soft); color: var(--green-dark); font-weight: 750; font-size: 13.5px;
}
.rate-card-photo-add:hover { border-color: var(--green); }
.rate-card-photo-add svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.rate-card-photo-add[hidden] { display: none; }
.rate-card-photo-preview {
  position: relative; width: 104px; height: 104px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.rate-card-photo-preview[hidden] { display: none; }
.rate-card-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rate-card-photo-remove {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(20, 30, 24, 0.62); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.rate-card-photo-remove:hover { background: rgba(20, 30, 24, 0.82); }
.rate-card-photo-hint { margin: 0; color: var(--muted); font-size: 12px; }

.rate-card-submit { align-self: flex-start; min-width: 120px; }

/* Интерактивный ввод оценки звёздами (CSS-only, без JS). */
.star-input {
  border: 0; margin: 0; padding: 0;
  display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px;
}
.star-input input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-input label {
  cursor: pointer; color: #d6e0d8; font-size: 30px; line-height: 1; padding: 0 1px;
  transition: color 0.12s ease;
}
/* Постоянная подсветка выбранной оценки (работает и без JS, и на тач-экранах). */
.star-input input:checked ~ label { color: #f5a623; }
/* Предпросмотр наведением включает JS (класс is-previewing/is-hover) — только мышью,
   поэтому на тач-экранах выбор виден сразу и не «пропадает». */
.star-input.is-previewing input:checked ~ label { color: #d6e0d8; }
.star-input label.is-hover { color: #f5a623; }
.star-input input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

/* Бейдж уведомлений в меню ЛК. */
.account-summary { position: relative; }
.mobile-bottom-summary { position: relative; }
.account-notice-badge { background: #d93636; }
.account-item-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.account-item-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #d93636; color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}

/* Цитата отзыва в админ-модерации жалоб. */
.admin-review-quote {
  margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: rgba(247, 251, 248, 0.7);
}
.admin-review-quote-meta { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--green-dark); }
.admin-review-quote-text {
  margin: 0 0 6px; font-size: 14px; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; word-break: break-word;
}

/* Read-only просмотр переписки админом (по жалобе из чата). */
.admin-chat-context {
  margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 14px; background: rgba(247, 251, 248, 0.7);
}
.admin-chat-context p { margin: 0 0 4px; }
.admin-chat-context p:last-child { margin-bottom: 0; }
.admin-chat-log { display: flex; flex-direction: column; gap: 10px; }
.admin-chat-msg {
  padding: 10px 13px; border: 1px solid var(--border); border-left: 3px solid #cfe0d4;
  border-radius: 12px; background: var(--white);
}
.admin-chat-msg.is-reported { border-left-color: #d93636; background: rgba(217, 54, 54, 0.04); }
.admin-chat-msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.admin-chat-msg-name { font-size: 13px; font-weight: 800; color: var(--green-dark); overflow-wrap: anywhere; }
.admin-chat-msg.is-reported .admin-chat-msg-name { color: #b02a2a; }
.admin-chat-msg-time { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.admin-chat-msg-body {
  margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.55;
  white-space: pre-line; overflow-wrap: anywhere; word-break: break-word;
}
.admin-chat-msg-photos { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-chat-photo-thumb {
  display: block; width: 110px; height: 110px; padding: 0; line-height: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--white); cursor: zoom-in;
}
.admin-chat-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-chat-photo-thumb:hover { border-color: var(--green); }
.admin-chat-photo-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.admin-chat-empty {
  padding: 20px; border: 1px dashed var(--border); border-radius: 14px;
  background: var(--white); color: var(--muted); text-align: center;
}
.admin-chat-thread-actions { margin-top: 18px; }

@media (max-width: 640px) {
  .reviews-page,
  .lk-reviews-page { max-width: 100%; }

  .reviews-summary-average,
  .lk-summary-average { font-size: 32px; }

  .reviews-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .reviews-tab { justify-content: center; text-align: center; padding: 9px 11px; font-size: 13px; }

  .rate-list { grid-template-columns: minmax(0, 1fr); }

  /* Крупнее звёзды для удобного тапа на телефоне. */
  .star-input label { font-size: 36px; padding: 0 3px; }
  .rate-card-submit { width: 100%; }

  .seller-hero-rating { width: 100%; justify-content: flex-start; }
}

/* ===== Раздел «Поддержка» (обращения и переписка) ===== */
.support-card,
.support-thread-card,
.admin-support-card {
  width: 100%;
  max-width: 880px;
  margin: 12px auto;
  padding: 24px 28px;
}

.support-head { margin-bottom: 14px; }
.support-title { margin: 0; font-size: clamp(22px, 5vw, 26px); color: var(--text); }
.support-lead { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Форма нового обращения */
.support-new {
  margin-bottom: 18px; border: 1px solid var(--border); border-radius: 14px;
  background: rgba(247, 251, 248, 0.6); overflow: hidden;
}
.support-new-summary {
  list-style: none; cursor: pointer; padding: 13px 15px;
  display: flex; flex-direction: column; gap: 2px;
}
.support-new-summary::-webkit-details-marker { display: none; }
.support-new-summary > span:first-child { font-weight: 800; color: var(--green-dark); }
.support-new-hint { font-size: 13px; color: var(--muted); }
.support-new[open] .support-new-summary { border-bottom: 1px solid var(--border); }
.support-new-form { padding: 14px 15px; display: flex; flex-direction: column; gap: 14px; }
.support-field { display: flex; flex-direction: column; gap: 6px; }
.support-field-label { font-size: 13px; font-weight: 700; color: var(--text); }
.support-field select,
.support-field textarea,
.support-reply-form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong);
  border-radius: 12px; background: var(--white); color: var(--text);
  font-size: 15px; font-family: inherit; line-height: 1.5;
}
.support-field textarea,
.support-reply-form textarea { resize: vertical; min-height: 84px; }
.support-field select:focus,
.support-field textarea:focus,
.support-reply-form textarea:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(46, 125, 82, 0.12);
}
.support-new-form .btn { align-self: flex-start; }

/* Список обращений */
.support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.support-list-item { border: 1px solid var(--border); border-radius: 14px; background: var(--white); }
.support-list-item-unread { border-color: var(--border-strong); background: var(--green-soft); }
.support-list-link {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  color: var(--text); text-decoration: none;
}
.support-list-link:hover { text-decoration: none; }
.support-list-main { flex: 1 1 auto; min-width: 0; }
.support-list-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.support-topic { font-weight: 800; color: var(--text); }
.support-list-snippet {
  color: var(--muted); font-size: 14px; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.support-list-meta { margin-top: 3px; font-size: 12px; color: var(--muted); }
.support-list-chevron { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; }
.support-unread-dot { width: 9px; height: 9px; border-radius: 999px; background: #d93636; flex: 0 0 auto; }
.support-empty {
  margin: 6px 0 0; padding: 18px; border: 1px dashed var(--border-strong); border-radius: 14px;
  color: var(--muted); text-align: center;
}

/* Значок статуса */
.support-status {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 800; line-height: 1.6; white-space: nowrap;
}
.support-status-open { background: #fff2e0; color: #a15c00; }
.support-status-answered { background: var(--green-soft); color: var(--green-dark); }
.support-status-closed { background: #eef1ef; color: var(--muted); }

/* Переписка */
.support-thread-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.support-back {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none;
}
.support-back:hover { color: var(--green-dark); text-decoration: none; }
.support-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.support-thread-topic { margin: 0; font-size: clamp(20px, 4.5vw, 24px); color: var(--text); }
.support-thread-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.support-thread-code { font-size: 13px; color: var(--muted); }
.support-thread-author { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.support-thread-author a { color: var(--green-dark); font-weight: 700; }

.support-messages {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px;
  min-height: 320px; padding: 16px; border: 1px solid var(--border);
  border-radius: 14px; background: rgba(247, 251, 248, 0.55);
}
.support-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; border: 1px solid var(--border); }
.support-msg-support { align-self: flex-start; background: var(--white); border-bottom-left-radius: 5px; }
.support-msg-own {
  align-self: flex-end; background: var(--green-soft);
  border-color: var(--border-strong); border-bottom-right-radius: 5px;
}
.support-msg-author { font-size: 12.5px; font-weight: 800; color: var(--green-dark); margin-bottom: 3px; }
.support-msg-body {
  color: var(--text); font-size: 14.5px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.support-msg-time { margin-top: 4px; font-size: 11.5px; color: var(--muted); text-align: right; }

.support-closed-note {
  margin: 0 0 12px; padding: 10px 13px; border: 1px dashed var(--border-strong);
  border-radius: 12px; background: rgba(247, 251, 248, 0.7); color: var(--muted);
  font-size: 13.5px; text-align: center;
}
.support-reply-form { display: flex; flex-direction: column; gap: 10px; }
.support-reply-form .btn { align-self: flex-end; }
.support-close-form { margin-top: 12px; text-align: right; }

/* Фото в сообщениях поддержки (миниатюра-кнопка открывает лайтбокс) */
.support-msg-photos { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.support-photo-thumb {
  appearance: none; -webkit-appearance: none; font: inherit;
  display: block; width: 116px; height: 116px; padding: 0; line-height: 0;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--white); cursor: zoom-in;
}
.support-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.support-photo-thumb:hover { border-color: var(--green); }
.support-photo-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Докладчик фото: превью выбранных + кнопка «прикрепить» */
.support-compose-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.support-compose-preview { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.support-compose-preview img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--border);
}
.support-compose-preview-remove {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  border: none; border-radius: 999px; background: #d93636; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.support-compose-preview-remove:hover { background: #b02a2a; }

.support-compose-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.support-attach {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 13px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--white); color: var(--green-dark); font-size: 14px; font-weight: 700;
}
.support-attach:hover { border-color: #adc8b8; background: var(--green-soft); }
.support-attach svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.support-attach-block { align-self: flex-start; }

/* Вкладки очереди в модерке */
.support-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.support-tab {
  padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--white); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none;
}
.support-tab:hover { border-color: #adc8b8; background: var(--green-soft); color: var(--green-dark); text-decoration: none; }
.support-tab-active { background: var(--green); border-color: var(--green); color: #fff; }
.support-tab-active:hover { background: var(--green-dark); color: #fff; }

/* Ссылки в подвале */
.site-footer-nav { margin-bottom: 8px; }
.site-footer-nav a { color: var(--muted); font-weight: 700; }
.site-footer-nav a:hover { color: var(--green-dark); }

/* Ссылка «Поддержка» в правом верхнем углу списка чатов */
.chat-sidebar-titlerow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.chat-support-link {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--white); color: var(--green-dark); font-size: 13px; font-weight: 700;
  text-decoration: none;
}
.chat-support-link:hover { border-color: #adc8b8; background: var(--green-soft); text-decoration: none; }
.chat-support-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (max-width: 640px) {
  .support-msg { max-width: 90%; }
  .support-reply-form .btn,
  .support-new-form .btn { align-self: stretch; }
}