/* ---------- Цвета: светлая тема (как было) ---------- */
:root {
  --bg: #F1EEE2;
  --surface: #FBF9F2;
  --ink: #22241D;
  --ink-muted: #6B6C5C;
  --primary: #C1652E;
  --primary-dark: #9C4F24;
  --primary-hover: #9C4F24;     /* фон кнопок при нажатии */
  --ochre: #B8842E;
  --ochre-soft: #EEDDB2;
  --rust: #8C4536;
  --on-rust: #fff;              /* текст на ржаво-красном фоне */
  --border: #DDD6C2;
  --seller-bg: #F6F0DF;         /* окно с ником продавца в карточке */
  --edit-hover: #E5D197;
  --shadow: rgba(34, 36, 29, .25);
  --map-tiles: none;            /* в тёмной теме карта тоже становится тёмной */
  --radius: 10px;
  color-scheme: light;
}

/* ---------- Тёмная тема: та же терракота и охра, но на тёплом тёмном фоне ----------
   Включается в «Настройках профиля»: «Тёмная» — всегда, «Как на телефоне» —
   когда на устройстве включён ночной режим. */
:root[data-theme="dark"] {
  --bg: #1B1915;
  --surface: #25221C;
  --ink: #EEE7D7;
  --ink-muted: #A9A08C;
  --primary: #C8693A;
  --primary-dark: #E9A173;      /* в тёмной теме это светлый терракотовый — для заголовков и ссылок */
  --primary-hover: #A9542A;
  --ochre: #D0A04A;
  --ochre-soft: #3A2F1E;
  --rust: #E39079;
  --on-rust: #1B1915;
  --border: #3A352B;
  --seller-bg: #2C2820;
  --edit-hover: #4A3C25;
  --shadow: rgba(0, 0, 0, .45);
  --map-tiles: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #1B1915;
    --surface: #25221C;
    --ink: #EEE7D7;
    --ink-muted: #A9A08C;
    --primary: #C8693A;
    --primary-dark: #E9A173;      /* в тёмной теме это светлый терракотовый — для заголовков и ссылок */
    --primary-hover: #A9542A;
    --ochre: #D0A04A;
    --ochre-soft: #3A2F1E;
    --rust: #E39079;
    --on-rust: #1B1915;
    --border: #3A352B;
    --seller-bg: #2C2820;
    --edit-hover: #4A3C25;
    --shadow: rgba(0, 0, 0, .45);
    --map-tiles: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.55);
    color-scheme: dark;
  }
}

input, select, textarea { color: var(--ink); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .4em;
  color: var(--primary-dark);
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin-top: 1.6em; }

a { color: var(--primary-dark); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
}

.topbar {
  background: var(--primary);
  color: #F6F2E4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* В приложении с экрана «Домой» шапка заходит под строку состояния iPhone
     (часы, сеть, Wi-Fi, батарея) — опускаем её на высоту этой строки.
     В обычном Safari env(...) = 0, и шапка не меняется. */
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px))
           14px calc(18px + env(safe-area-inset-left, 0px));
  flex-wrap: wrap;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #F6F2E4;
  text-decoration: none;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.2rem;
}

.brand-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  color: #F3E3BC;
}
.topbar-user span { margin-right: 4px; }

.topbar-user a {
  color: #F6F2E4;
  text-decoration: none;
  opacity: .85;
}
.topbar-user a:hover { opacity: 1; }

.wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 18px calc(96px + env(safe-area-inset-bottom, 0px));
}

.hero { margin-bottom: 18px; }
.hero p { color: var(--ink-muted); margin: 0; }

.flash {
  background: var(--ochre-soft);
  border: 1px solid var(--ochre);
  color: var(--primary-dark);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: .92rem;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.filter > div { flex: 1; min-width: 108px; }
.filter-search { flex: 1.4; min-width: 140px; }
.filter-search input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: .92rem;
}
.filter-submit { margin: 0; flex-basis: 100%; align-self: flex-start; }

.tag-sub { background: transparent; border: 1px solid var(--ochre); margin-left: 4px; }

.price-line {
  font-size: .82rem;
  color: var(--primary-dark);
  font-weight: 500;
  margin: 0 0 2px;
}
.filter label {
  display: block;
  font-size: .78rem;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.filter select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: .92rem;
}

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

.card-wrap { position: relative; }

.favorite-form {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
  z-index: 3;
}

.favorite-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px var(--shadow);
}
.favorite-btn.active { color: var(--ochre); border-color: var(--ochre); background: var(--ochre-soft); }

.favorite-btn-inline {
  background: transparent;
}
.favorite-btn-inline.active { color: var(--ochre); border-color: var(--ochre); }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ochre);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease;
}
.card:hover { border-color: var(--ochre); }

.card h2 {
  margin: 4px 0 6px;
  font-size: 1.05rem;
  color: var(--ink);
}

.card-photo {
  display: block;
  width: calc(100% + 32px);
  height: 160px;
  margin: -14px -16px 10px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

/* ---------- Карточка по сетке Фибоначчи ----------
   Окна 21 · 13 · 8 · 5 · 3 как на картинке со спиралью:
   слева фото 21×21; справа сверху 13×13 (название, описание,
   категории); внизу справа 8×8 («Предложить мену»), внизу слева
   5×5 (город), над ним полоса 5×3 (ник и рейтинг продавца).
   Вся карточка — прямоугольник 34×21, поэтому пропорции держатся
   на любой ширине экрана. */
.card-fib {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 21fr) minmax(0, 5fr) minmax(0, 8fr);
  grid-template-rows: minmax(0, 13fr) minmax(0, 3fr) minmax(0, 5fr);
  aspect-ratio: 34 / 21;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}

.fib-photo {
  grid-column: 1;
  grid-row: 1 / 4;
  min-width: 0;
  min-height: 0;
  background: var(--ochre-soft);
  overflow: hidden;
  position: relative;
  z-index: 2;          /* поверх ссылки-«растяжки» карточки: свайп листает фото */
}
.fib-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fib-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 3rem;
  color: var(--ochre);
}

.fib-info {
  grid-column: 2 / 4;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  padding: 8px 9px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.card-fib .fib-info h2 {
  margin: 0;
  font-size: min(3.6vw, 1rem);
  line-height: 1.2;
  color: var(--ink);
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Вся карточка кликабельна: ссылка на названии растягивается на неё,
   а «Предложить мену» / «Редактировать» лежат поверх (z-index выше). */
.fib-link { color: inherit; text-decoration: none; }
.fib-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.fib-info .desc {
  margin: 0;
  font-size: .76rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 3;
}
.fib-info.has-sub .desc { -webkit-line-clamp: 2; }
@media (min-width: 480px) {
  .fib-info .desc { -webkit-line-clamp: 5; }
  .fib-info.has-sub .desc { -webkit-line-clamp: 4; }
}

.fib-tags {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.fib-tags .tag {
  max-width: 100%;
  margin: 0;
  padding: 1px 8px;
  font-size: .66rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Полоса 5×3 над городом: ник и рейтинг продавца */
.fib-seller {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  padding: 2px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: min(2.3vw, .75rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
  background: var(--seller-bg);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.fib-seller-name, .fib-seller-rating {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fib-seller-name { font-weight: 600; }
.fib-seller-rating { color: var(--primary-dark); }
a.fib-seller:hover .fib-seller-name { text-decoration: underline; }

.fib-city {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  padding: 4px 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  font-size: min(2.3vw, .75rem);
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ink-muted);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.fib-pin { font-size: .8rem; line-height: 1; }
a.fib-city-link {
  position: relative;
  z-index: 2;
  text-decoration: none;
  color: var(--primary-dark);
}
a.fib-city-link .fib-city-name {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
a.fib-city-link:hover, a.fib-city-link:active { background: var(--ochre-soft); }
.fib-radius {
  font-size: .9em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.fib-city-name {
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fib-action {
  grid-column: 3;
  grid-row: 2 / 4;
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 0;
  padding: 4px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--primary);
  color: #F6F2E4;
  font-size: min(3.2vw, .9rem);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
a.fib-action:hover, a.fib-action:active { background: var(--primary-hover); }
.fib-action-edit, .fib-action-done {
  background: var(--ochre-soft);
  color: var(--primary-dark);
  border-top: 1px solid var(--border);
}
a.fib-action-edit:hover, a.fib-action-edit:active { background: var(--edit-hover); }
.fib-action-edit { font-size: min(2.5vw, .8rem); overflow: hidden; }
.fib-action-done { z-index: 0; }

.detail-photo {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.tag {
  display: inline-block;
  font-size: .75rem;
  color: var(--primary-dark);
  background: var(--ochre-soft);
  padding: 2px 9px;
  border-radius: 999px;
}

.desc {
  color: var(--ink-muted);
  font-size: .92rem;
  margin: 0 0 8px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.detail .desc { -webkit-line-clamp: initial; }

.location {
  font-size: .82rem;
  color: var(--ink-muted);
  margin: 0 0 2px;
}

.owner {
  font-size: .82rem;
  color: var(--ink-muted);
  margin: 0;
}

.empty {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--ink-muted);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 420px;
}
.form label {
  font-size: .85rem;
  color: var(--ink-muted);
  margin-top: 10px;
}
.form input, .form textarea, .form select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
}
.form textarea { resize: vertical; }

.button {
  margin-top: 16px;
  align-self: flex-start;
  background: var(--primary);
  color: #F6F2E4;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .15s ease;
}
.button:hover { background: var(--primary-hover); }
.button.secondary {
  background: transparent;
  color: var(--rust);
  border: 1px solid var(--rust);
}
.button.secondary:hover { background: var(--rust); color: var(--on-rust); }

.detail { margin-bottom: 10px; }

.note { color: var(--ink-muted); font-style: italic; }

.propose { margin-top: 10px; }
.propose .form { max-width: 100%; }

.trades { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

.trade-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.trade-card.archive-link {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-left-color: var(--primary);
}
.trade-card.archive-link p { margin: 0 0 4px; }

.card.static-card { cursor: default; }
.trade-card p { margin: 0 0 6px; font-size: .94rem; }
.trade-card.status-pending { border-left-color: var(--ochre); }
.trade-card.status-accepted { border-left-color: var(--primary); }
.trade-card.status-declined { border-left-color: var(--border); opacity: .7; }

.status-label { font-size: .8rem; color: var(--ink-muted); }

.contact-line {
  font-size: .88rem;
  color: var(--primary-dark);
  font-weight: 500;
  background: var(--ochre-soft);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
}

.actions { display: flex; gap: 10px; margin-top: 8px; }
.actions form { margin: 0; }

.switch-link {
  margin-top: 18px;
  font-size: .9rem;
  color: var(--ink-muted);
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  font-size: .88rem;
  color: var(--ink);
}
.checkbox-row input { margin-top: 3px; flex-shrink: 0; }

.hint {
  font-size: .78rem;
  color: var(--ink-muted);
  margin: 2px 0 0;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.profile-header h1 { margin: 0; }

.profile-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}

.stat-line { font-size: .88rem; color: var(--ink-muted); }

.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  display: block;
  margin-bottom: 10px;
}

.avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ochre-soft);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  font-weight: 600;
  flex-shrink: 0;
}

.rating-badge.muted { background: var(--border); color: var(--ink-muted); }

.rating-badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--ochre-soft);
  padding: 1px 8px;
  border-radius: 999px;
}
.rating-badge.large { font-size: 1.05rem; padding: 4px 12px; }

.rating-summary { margin-bottom: 10px; }

.review-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.review-form label { font-size: .82rem; color: var(--ink-muted); }
.review-form select, .review-form textarea {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: inherit;
  font-size: .92rem;
  color: var(--ink);
}
.review-form textarea { resize: vertical; }
.review-form .button { margin-top: 4px; align-self: flex-start; padding: 8px 16px; font-size: .88rem; }

.empty-line { color: var(--ink-muted); font-size: .92rem; }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.chat-message {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.chat-message.mine {
  align-self: flex-end;
  background: var(--primary);
  color: #F6F2E4;
  border-color: var(--primary-hover);
}
.chat-message.theirs { align-self: flex-start; }

.chat-meta {
  font-size: .72rem;
  opacity: .75;
  margin: 0 0 3px;
}

.chat-text { margin: 0; font-size: .94rem; white-space: pre-wrap; }

.chat-attachment {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin-top: 6px;
}

.chat-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.chat-form textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}
.chat-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.chat-form-row input[type="file"] { font-size: .82rem; max-width: 60%; }
.chat-form-row .button { margin: 0; }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 4px 8px;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: .72rem;
  position: relative;
}
.nav-item.active { color: var(--primary-dark); }

.nav-icon-img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  opacity: .7;
}
.nav-item.active .nav-icon-img { opacity: 1; }

.nav-item-add {
  background: var(--primary);
  color: #F6F2E4;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  justify-content: center;
  margin-top: -30px;
  box-shadow: 0 3px 10px var(--shadow);
}
.nav-item-add span { display: none; }

.badge {
  position: absolute;
  top: -2px;
  right: 4px;
  background: var(--rust);
  color: var(--on-rust);
  font-size: .65rem;
  line-height: 1;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

@media (max-width: 480px) {
  .topbar { padding: calc(12px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px))
                    12px calc(14px + env(safe-area-inset-left, 0px)); }
  .wrap { padding: 16px 14px calc(92px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Блок продавца на странице товара ---------- */
.seller-card {
  margin: 14px 0 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.seller-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
}
.seller-head:hover .seller-name { color: var(--primary-dark); }
.seller-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--ochre-soft);
}
.seller-avatar-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ochre-soft);
  color: var(--primary-dark);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.4rem;
}
.seller-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.seller-label { font-size: .74rem; color: var(--ink-muted); }
.seller-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seller-stats { font-size: .84rem; color: var(--ink-muted); margin-top: 2px; }
.seller-stats .rating-badge { margin-right: 2px; }
.seller-chevron { font-size: 1.6rem; color: var(--ink-muted); line-height: 1; }

.seller-reviews {
  border-top: 1px solid var(--border);
  padding: 4px 14px 12px;
}
.seller-review {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}
.seller-review:last-of-type { border-bottom: 0; }
.seller-review p { margin: 2px 0; font-size: .92rem; }
.stars { color: var(--ochre); letter-spacing: 1px; font-size: .9rem; }
.stars-off { color: var(--border); }
.seller-all {
  display: inline-block;
  margin-top: 6px;
  font-size: .88rem;
  font-weight: 500;
}

/* ---------- Карта: точка встречи и радиус ---------- */
.map-box {
  height: 280px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--ochre-soft);
  z-index: 0;            /* чтобы карта не перекрывала нижнее меню */
}
.map-field {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  margin: 6px 0 14px;
  background: var(--surface);
}
.map-field legend {
  font-size: .9rem;
  font-weight: 600;
  padding: 0 4px;
}
.map-field .hint { margin-top: 0; }
.radius-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 8px 0 10px;
}
.map-field .radius-chip { margin: 0; cursor: pointer; position: relative; }
.radius-chip input { position: absolute; opacity: 0; pointer-events: none; }
.radius-chip span {
  display: block;
  text-align: center;
  padding: 7px 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .88rem;
  background: var(--bg);
  color: var(--ink);
}
.radius-chip input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: #F6F2E4;
  font-weight: 600;
}
.radius-chip input:focus-visible + span { outline: 2px solid var(--ochre); outline-offset: 2px; }
.map-status { font-size: .84rem; color: var(--ink-muted); margin: 6px 0; min-height: 1.2em; }
.map-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.button.small { padding: 7px 12px; font-size: .84rem; margin: 0; }

.map-section { margin-top: 18px; scroll-margin-top: 12px; }
.map-section .hint { margin-top: 0; }
.map-links { font-size: .88rem; margin: 6px 0 0; }
.city-link { color: var(--primary-dark); text-decoration: underline dotted; text-underline-offset: 2px; }

/* ---------- Главная: «Что меняешь?» и «Рядом с тобой» ---------- */
.pick-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pick-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary-dark);
}
.pick-panel select {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
}
.pick-note { margin: 0; font-size: .84rem; color: var(--ink-muted); }
.pick-note b { white-space: nowrap; color: var(--primary-dark); }
.near-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.near-row .pick-label { flex-shrink: 0; }
.near-chips { flex: 1; margin: 0; min-width: 220px; }
.pick-panel .radius-chip { margin: 0; cursor: pointer; position: relative; }
.pick-panel .radius-chip span { padding: 5px 0; font-size: .84rem; }

/* ---------- Поиск по адресу и радиус «1 м» ---------- */
.radius-chips-5 { grid-template-columns: repeat(5, 1fr); }
.radius-chips-5 .radius-chip span { font-size: .84rem; }
.map-field .map-address-label { margin-top: 2px; font-size: .82rem; }
.map-address-row, .near-address-row { display: flex; gap: 6px; margin-bottom: 8px; }
.map-address-row input, .near-address-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
}
.map-address-row .button, .near-address-row .button { flex-shrink: 0; }
.address-results { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.address-results:empty { display: none; }
.address-option {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: inherit;
  font-size: .86rem;
  color: var(--ink);
  cursor: pointer;
}
.address-option:hover, .address-option:focus-visible { border-color: var(--primary); background: var(--ochre-soft); }

/* ---------- «Что меняешь?»: уменьшенные копии своих объявлений ----------
   Ряд листается пальцем вбок. Каждая копия — та же карточка Фибоначчи,
   что во вкладке «Мои», только меньше: размеры шрифтов заданы в cqw —
   долях ширины самой карточки, поэтому всё уменьшается пропорционально. */
.pick-scroller {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 3px 3px 8px;
  margin: 0 -3px;
}
.pick-card, .pick-none {
  position: relative;
  margin: 0;
  cursor: pointer;
  scroll-snap-align: start;
}
.pick-card { flex: 0 0 78%; max-width: 300px; container-type: inline-size; }
.pick-none { flex: 0 0 24%; max-width: 110px; display: flex; }
.pick-card > input, .pick-none > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.pick-none-box {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink-muted);
  font-size: .9rem;
}
.pick-none > input:checked + .pick-none-box {
  border: 2px solid var(--primary);
  background: var(--ochre-soft);
  color: var(--primary-dark);
  font-weight: 600;
}
.pick-card > input:checked + .card-wrap .card-fib {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary);
}
.pick-card > input:focus-visible + .card-wrap .card-fib,
.pick-none > input:focus-visible + .pick-none-box { outline: 2px solid var(--ochre); outline-offset: 2px; }

.fib-action-pick {
  background: var(--ochre-soft);
  color: var(--primary-dark);
  border-top: 1px solid var(--border);
}
.fib-action-pick .pick-on { display: none; }
.pick-card > input:checked + .card-wrap .fib-action-pick { background: var(--primary); color: #F6F2E4; }
.pick-card > input:checked + .card-wrap .pick-on { display: inline; }
.pick-card > input:checked + .card-wrap .pick-off { display: none; }

/* размеры внутри уменьшенной копии — от ширины карточки */
.pick-card .card-fib .fib-info { padding: 2.3cqw 2.5cqw 1.7cqw; gap: .8cqw; }
.pick-card .card-fib .fib-info h2 { font-size: 3.97cqw; }
.pick-card .card-fib .fib-info .desc,
.pick-card .card-fib .fib-info.has-sub .desc { font-size: 3.4cqw; -webkit-line-clamp: 2; }
.pick-card .card-fib .fib-tags .tag { font-size: 2.95cqw; padding: .3cqw 2.2cqw; }
.pick-card .card-fib .fib-seller,
.pick-card .card-fib .fib-city { font-size: 2.55cqw; }
.pick-card .card-fib .fib-pin { font-size: 3.6cqw; }
.pick-card .card-fib .fib-action { font-size: 3.5cqw; padding: 1cqw; }
.pick-card .card-fib .fib-photo-placeholder { font-size: 13cqw; }

/* ---------- Карта в тёмной теме и кнопки карты ---------- */
.leaflet-tile-pane { filter: var(--map-tiles); }
/* (селекторы «длиннее», чем в leaflet.css — он подключается позже и иначе перебил бы) */
.leaflet-container .leaflet-bar a,
.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus {
  background: var(--surface);
  color: var(--ink);
  border-bottom-color: var(--border);
}
.leaflet-container .leaflet-control-container .leaflet-control-attribution {
  background: var(--surface);
  color: var(--ink-muted);
  opacity: .92;
}
.leaflet-container .leaflet-control-container .leaflet-control-attribution a { color: var(--primary-dark); }

/* ---------- Настройки: выбор темы ---------- */
.theme-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 420px;
}
.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
}
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option:has(input:checked) { border: 2px solid var(--primary); padding: 9px 5px; }
.theme-option input:focus-visible ~ .theme-name { outline: 2px solid var(--ochre); outline-offset: 2px; }
.theme-name { font-size: .84rem; }
.theme-option input:checked ~ .theme-name { font-weight: 600; color: var(--primary-dark); }
/* маленький образец темы: фон, карточка, акцент */
.theme-swatch {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 64px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.theme-swatch span:nth-child(1) { grid-row: 1 / 3; }
.theme-option-light .theme-swatch span:nth-child(1) { background: #F1EEE2; }
.theme-option-light .theme-swatch span:nth-child(2) { background: #FBF9F2; }
.theme-option-light .theme-swatch span:nth-child(3) { background: #C1652E; }
.theme-option-dark .theme-swatch span:nth-child(1) { background: #1B1915; }
.theme-option-dark .theme-swatch span:nth-child(2) { background: #25221C; }
.theme-option-dark .theme-swatch span:nth-child(3) { background: #C8693A; }
.theme-option-auto .theme-swatch span:nth-child(1) { background: linear-gradient(135deg, #F1EEE2 50%, #1B1915 50%); }
.theme-option-auto .theme-swatch span:nth-child(2) { background: linear-gradient(135deg, #FBF9F2 50%, #25221C 50%); }
.theme-option-auto .theme-swatch span:nth-child(3) { background: #C1652E; }

.security-note p { font-size: .86rem; color: var(--ink-muted); margin: 14px 0 0; }
.security-note .warn { color: var(--rust); }
.security-note code { font-size: .8rem; background: var(--ochre-soft); padding: 1px 4px; border-radius: 4px; }

/* ---------- Листалка фото и видео (окно 21×21 и страница товара) ---------- */
.media-strip {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.media-strip::-webkit-scrollbar { display: none; }
.media-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
}
.media-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.media-slide-video { background: #000; display: flex; }
.media-slide-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }

.media-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 1;
}
.media-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 2px rgba(0, 0, 0, .55);
}
.media-dots span.on { background: #fff; transform: scale(1.25); }
.media-dots .dot-video {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
  font-size: 8px;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
  text-shadow: 0 0 2px rgba(0, 0, 0, .7);
}
.media-dots .dot-video.on { background: none; color: #fff; }
.on-video .media-dots, .on-video .media-badge { display: none; }

.media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 25, 21, .5);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.media-prev { left: 6px; }
.media-next { right: 6px; }
.media-nav:disabled { opacity: 0; pointer-events: none; }
/* стрелки — только там, где есть мышь (на телефоне листают пальцем) */
@media (hover: hover) {
  .fib-photo:hover .media-nav, .gallery:hover .media-nav { display: flex; }
}

.media-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(27, 25, 21, .6);
  color: #fff;
  font-size: .68rem;
  line-height: 1.4;
  pointer-events: none;
}
.pick-card .media-badge { font-size: 2.6cqw; top: 2cqw; right: 2cqw; padding: .4cqw 2cqw; }

/* галерея на странице товара */
.gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ochre-soft);
  margin-bottom: 10px;
}

/* ---------- Формы: несколько фото и видео ---------- */
.upload-previews {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.upload-previews:empty { display: none; }
.upload-previews img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.upload-previews .is-cover { outline: 2px solid var(--primary); outline-offset: 1px; }
.upload-status.warn { color: var(--rust); }

.media-field {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
  margin: 6px 0 4px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.media-field legend { font-size: .9rem; font-weight: 600; padding: 0 4px; }
.media-manage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
}
.media-thumb {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: .78rem;
}
.media-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.media-thumb:has(.media-cover input:checked) img { outline: 2px solid var(--primary); outline-offset: 1px; }
.media-thumb:has(.media-del input:checked) img { opacity: .35; }
.form .media-thumb label { margin: 0; display: flex; align-items: center; gap: 4px; color: var(--ink); font-size: .78rem; }
.form .media-thumb input { padding: 0; }
.media-video-preview {
  width: 100%;
  max-height: 240px;
  border-radius: 8px;
  background: #000;
}

/* ---------- «Что хочешь взамен» и «Подходит для мены» ---------- */
.wants-preview { display: flex; flex-wrap: wrap; gap: 5px; }
.wants-preview:empty { display: none; }
.want-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--primary);
  color: var(--primary-dark);
  background: var(--surface);
  font-size: .8rem;
  line-height: 1.5;
}
.wants-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 6px 0 2px; }
.wants-label { font-size: .84rem; color: var(--ink-muted); margin-right: 2px; }
.wants-any { font-size: .84rem; color: var(--ink-muted); font-style: italic; }

.match-item { display: flex; flex-direction: column; gap: 4px; }
.match-reason {
  margin: 0;
  font-size: .84rem;
  line-height: 1.35;
  color: var(--ink-muted);
}
.match-reason.tier-1 {
  color: var(--primary-dark);
  background: var(--ochre-soft);
  border-radius: 8px;
  padding: 6px 10px;
}
.match-reason.tier-2 { color: var(--primary-dark); }
.wants-hint { margin: 4px 0 10px; }

/* ---------- Фото и видео в форме: камера + галерея ---------- */
.file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}
.media-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.media-pick-label { font-size: .85rem; color: var(--ink-muted); margin-top: 8px; }
.media-pick-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.media-pick-buttons .button { margin: 0; align-self: auto; }
.form .media-pick label.button { margin: 0; font-size: .84rem; color: var(--rust); cursor: pointer; }
.form .media-pick label.button:hover { color: var(--on-rust); }
.media-pick .is-disabled { opacity: .45; pointer-events: none; }

.upload-tile { position: relative; }
.upload-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.upload-previews .upload-tile.is-cover img { outline: 2px solid var(--primary); outline-offset: 1px; }
.upload-cover {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--primary);
  color: #F6F2E4;
  font-size: .62rem;
  line-height: 1.5;
}
.upload-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: rgba(27, 25, 21, .8);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.video-preview { position: relative; }
.video-preview:empty { display: none; }
.video-preview video {
  display: block;
  width: 100%;
  max-height: 220px;
  border-radius: 8px;
  background: #000;
}
.video-preview .upload-remove { top: 6px; right: 6px; }

/* ---------- Камера на сайте (во весь экран, всегда тёмная) ---------- */
body.cam-open { overflow: hidden; }
.cam {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.cam[hidden] { display: none; }
.cam-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  font-size: .85rem;
}
.cam-count { opacity: .8; flex: 1; }
.cam-timer { font-variant-numeric: tabular-nums; flex: 1; text-align: center; }
.cam.recording .cam-timer { color: #ff5a4f; font-weight: 600; }
.cam-done {
  flex: 1;
  max-width: 110px;
  margin-left: auto;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #C1652E;
  color: #F6F2E4;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.cam-view { position: relative; flex: 1; min-height: 0; display: flex; }
.cam-view video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cam-view video.mirror { transform: scaleX(-1); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: cam-flash .35s ease-out; }
@keyframes cam-flash { from { opacity: .8; } to { opacity: 0; } }
.cam-status { min-height: 1.3em; margin: 6px 14px 0; font-size: .82rem; text-align: center; color: #E8DFC8; }
.cam-alt {
  margin-top: 6px;
  padding: 6px 12px;
  border: 1px solid #E8DFC8;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
}
.cam-modes { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.cam-mode {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .6);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 6px;
  cursor: pointer;
}
.cam-mode.on { color: #F0B27A; }
.cam.recording .cam-modes { visibility: hidden; }
.cam-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 24px 18px;
}
.cam-thumb {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, .7);
  background: center / cover no-repeat;
  visibility: hidden;
}
.cam-thumb.has { visibility: visible; }
.cam-shutter {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.cam-shutter::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #fff;
  transition: all .15s ease;
}
.cam.mode-video .cam-shutter::after { background: #ff3b30; }
.cam.recording .cam-shutter::after { inset: 20px; border-radius: 6px; }
.cam-shutter:disabled { opacity: .35; cursor: default; }
.cam-shutter:active::after { transform: scale(.92); }
.cam-flip {
  justify-self: end;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}
.cam.recording .cam-flip { visibility: hidden; }

/* ---------- «Хочу взамен»: окна категорий и подкатегорий ---------- */
.wants-box { display: flex; flex-direction: column; gap: 6px; }
.pick-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 8px 10px 10px;
  margin: 4px 0 0;
}
.pick-box legend { font-size: .85rem; font-weight: 600; padding: 0 4px; color: var(--ink); }
.pick-box .hint { margin: 0 0 6px; }
.check-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.form .check-chip { margin: 0; cursor: pointer; position: relative; color: var(--ink); }
.check-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.check-chip span {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: .84rem;
  line-height: 1.3;
}
.check-chip input:checked + span {
  background: var(--primary);
  border-color: var(--primary);
  color: #F6F2E4;
}
.check-chip input:checked + span::before { content: "✓ "; }
.check-chip input:focus-visible + span { outline: 2px solid var(--ochre); outline-offset: 2px; }
.check-chip[hidden], .chip-limit[hidden] { display: none !important; }
.chip-limit { font-size: .76rem; opacity: .8; }
.sub-group { margin-top: 8px; }
.sub-group[hidden] { display: none; }
.sub-group-title { display: block; font-size: .78rem; color: var(--ink-muted); margin-bottom: 4px; }

/* ---------- Обязательная стоимость и напоминание ---------- */
.req { color: var(--rust); font-weight: 600; }
.notice {
  background: var(--ochre-soft);
  border: 1px solid var(--ochre);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 0 14px;
  font-size: .9rem;
  color: var(--ink);
}
.notice p { margin: 0 0 4px; }
.notice p:last-child { margin: 0; }

/* ---------- Состояние «Новое» / «Б/У» ---------- */
.field-label { font-size: .85rem; color: var(--ink-muted); margin-top: 10px; }
.cond-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 420px; }
.form .cond-chip { margin: 0; position: relative; cursor: pointer; color: var(--ink); }
.cond-chip input { position: absolute; left: 50%; bottom: 0; opacity: 0; width: 1px; height: 1px; }
.cond-chip span {
  display: block;
  text-align: center;
  padding: 10px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: .95rem;
  font-weight: 500;
}
.cond-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #F6F2E4; }
.cond-chip input:checked + span::before { content: "✓ "; }
.cond-chip input:focus-visible + span { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* значок на фото карточки — внизу слева (точки листалки — по центру) */
.cond-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 1;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.cond-badge.cond-new { background: #3E7A4E; color: #fff; }
.cond-badge.cond-used { background: rgba(27, 25, 21, .7); color: #fff; }
.on-video .cond-badge { display: none; }
.pick-card .cond-badge { font-size: 2.6cqw; left: 2cqw; bottom: 2cqw; padding: .3cqw 2cqw; }

.cond-line { font-size: .9rem; margin: 2px 0; color: var(--ink-muted); }
.cond-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.cond-pill.cond-new { background: #3E7A4E; color: #fff; }
.cond-pill.cond-used { background: var(--ochre-soft); color: var(--primary-dark); }

/* ---------- «Что предложишь взамен?» — только той же стоимости ---------- */
.propose .offer-hint { margin: 6px 0 10px; font-size: .82rem; }
.propose .offer-note, .propose .offer-empty { margin: 4px 0 12px; }
.propose .notice b, .propose .nowrap { white-space: nowrap; }

/* Подкатегория в форме объявления — во всю ширину, как остальные поля */
.form #subcategory-wrap { display: flex; flex-direction: column; }

/* ================= Автомобиль: характеристики, схема кузова, проверка ================= */
:root { --ok: #3C7A46; --ok-soft: #DDEBD9; --danger: #C8402E; }
:root[data-theme="dark"] { --ok: #86C690; --ok-soft: #23331F; --danger: #E5735F; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --ok: #86C690; --ok-soft: #23331F; --danger: #E5735F; } }

.car-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 12px 14px;
  margin: 12px 0 4px;
  min-width: 0;
}
.car-box[hidden] { display: none; }
.car-box > legend { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.05rem; padding: 0 6px; color: var(--primary-dark); }
.car-ids { background: var(--ochre-soft); border-radius: 8px; padding: 8px 10px 4px; margin-bottom: 6px; }
.car-ids-title { margin: 0 0 2px; font-weight: 600; font-size: .9rem; }
.car-ids .hint { margin: 6px 0 4px; }
.car-row, .car-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.car-field { display: flex; flex-direction: column; min-width: 0; }
.car-field[hidden] { display: none; }
.car-field-wide { grid-column: 1 / -1; }
.car-field .check-chips { margin-top: 6px; }
.form .car-field input, .form .car-field select { width: 100%; }
/* в две колонки на телефоне длинные значения («Косметический») не влезали — меньше отступы */
.form .car-grid select { padding-left: 9px; padding-right: 4px; }
.plate-input, .vin-input { text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.plate-input { font-weight: 600; }
.car-group { margin-top: 12px; }
.car-group-title { margin: 0; font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.car-more { border-top: 1px solid var(--border); padding-top: 6px; }
.car-more > summary { cursor: pointer; font-weight: 600; font-size: .92rem; padding: 4px 0; list-style-position: inside; }
.car-count { color: var(--ink-muted); font-weight: 400; }
.car-mod { margin: 8px 0 0; font-size: .86rem; color: var(--ink-muted); min-height: 1.2em; }
.car-mod b { color: var(--ink); }
@media (max-width: 360px) { .car-row, .car-grid { grid-template-columns: minmax(0, 1fr); } }

/* --- схема кузова --- */
.body-map { margin-top: 6px; }
.body-stage { position: relative; background: var(--bg); border-radius: 8px; padding: 6px; }
.body-view { position: relative; margin: 0 auto; }
.body-view[hidden] { display: none; }
.body-view-face { max-width: 300px; }
.body-view-side { max-width: 460px; }
.body-drawing { display: block; width: 100%; height: auto; fill: none; stroke: var(--ink-muted); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.body-pt {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--ink); color: var(--surface);
  font: 700 18px/1 "Work Sans", sans-serif; padding: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 1px 4px var(--shadow);
}
.body-pt.is-damaged { background: var(--danger); color: #fff; }
.is-readonly .body-pt { cursor: default; }
.body-pt:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.body-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.body-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid transparent; background: none; border-radius: 10px; padding: 6px 2px 8px;
  color: var(--ink-muted); font: 500 .82rem "Work Sans", sans-serif; cursor: pointer; position: relative;
}
.body-tab svg { width: 100%; max-width: 64px; height: 30px; fill: none; stroke: currentColor; stroke-width: 7; }
.body-tab.is-on { background: var(--surface); border-color: var(--border); color: var(--ink); }
.is-editable .body-tab.is-on, .car-box .body-tab.is-on { background: var(--bg); }
.body-dot { position: absolute; bottom: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
.body-dot[hidden] { display: none; }
.body-list { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; }
.body-list:empty { display: none; }
.body-sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.body-sheet[hidden] { display: none; }
.body-sheet-panel {
  width: 100%; max-width: 520px; background: var(--surface); color: var(--ink);
  border-radius: 16px 16px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px var(--shadow);
}
.body-sheet-head { display: flex; align-items: center; gap: 10px; padding: 4px 0 8px; }
.body-sheet-head strong { flex: 1; text-align: center; margin-right: 34px; }
.body-sheet-close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink); font-size: 1.3rem; cursor: pointer; }
.body-opt {
  display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border);
  background: none; color: var(--ink); font: 400 1rem "Work Sans", sans-serif; padding: 14px 4px; cursor: pointer;
}
.body-opt.is-on { font-weight: 600; color: var(--primary-dark); }
.body-opt.is-on::after { content: " ✓"; }
body.sheet-open { overflow: hidden; }

/* --- страница товара: характеристики --- */
.car-section { margin: 18px 0; }
.car-section h2 { margin-bottom: 8px; }
.car-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); margin: 0; border-top: 1px solid var(--border); }
.car-specs dt, .car-specs dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.car-specs dt { color: var(--ink-muted); padding-right: 10px; }
.car-opt-group { margin: 10px 0 0; }
.car-opt-group h3 { font-size: .9rem; margin: 0 0 4px; }
.car-opt-group .want-chip { margin: 0 4px 4px 0; }
.check-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: .88rem; font-weight: 500; margin: 6px 0; }
.check-clean { background: var(--ok-soft); color: var(--ok); }
.check-pending { background: var(--ochre-soft); color: var(--ink); }
.check-wanted { background: var(--danger); color: #fff; }
.car-line { font-size: .86rem; color: var(--ink-muted); margin: 2px 0 6px; }
.status-badge { position: absolute; right: 6px; top: 6px; z-index: 3; font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.status-badge.check-pending { background: var(--ochre-soft); color: var(--ink); }
.status-badge.check-wanted { background: var(--danger); color: #fff; }

/* --- модерация --- */
.mod-link { font-weight: 600; }
.mod-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .72rem; text-align: center; }
.mod-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; margin: 10px 0; }
.mod-card h2 { font-size: 1.05rem; margin: 0 0 4px; }
.mod-ids { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: .92rem; margin: 6px 0; }
.mod-ids code { font-size: .95rem; letter-spacing: .05em; user-select: all; overflow-wrap: anywhere; }
.mod-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mod-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.mod-actions input[type=text] { flex: 1 1 160px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); }
.button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.button.ok { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.notice-danger { border-color: var(--danger); }
@media (max-width: 440px) { .car-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- «Проверка авто»: конвейер по одной машине ---------- */
.mod-progress { margin: 4px 0 8px; color: var(--ink-muted); }
.mod-current { border-width: 2px; border-color: var(--primary); padding: 14px; }
.mod-head { display: flex; gap: 12px; align-items: flex-start; }
.mod-head h2 { margin: 0 0 2px; }
.mod-head .car-line, .mod-head .hint { margin: 2px 0; }
.mod-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex: none; }
.mod-warns { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.mod-warn { padding: 7px 10px; border-radius: 8px; font-size: .9rem; line-height: 1.35; }
.mod-warn-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--ink); border-left: 3px solid var(--danger); }
.mod-warn-info { background: var(--ok-soft); color: var(--ink); border-left: 3px solid var(--ok); }
.mod-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; margin-top: 16px; }
.mod-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff;
              display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.mod-step-title { display: block; font-weight: 600; margin: 3px 0 6px; }
.mod-step-body form { margin: 0 0 8px; }
.mod-vin { width: 100%; box-sizing: border-box; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem;
           letter-spacing: .08em; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
           background: var(--bg); color: var(--ink); }
.mod-open, .mod-big { display: block; width: 100%; margin: 8px 0 0; text-align: center; }
.mod-wanted-form input[type=text] { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px;
                                    border: 1px solid var(--border); background: var(--bg); color: var(--ink); margin-top: 6px; }
.mod-queue { padding-left: 18px; }
.mod-queue li { margin: 6px 0; overflow-wrap: anywhere; }
.mod-small p { margin: 2px 0; }
.mod-how { margin: 18px 0; }
.mod-how summary { cursor: pointer; font-weight: 600; }
.mod-how ul { padding-left: 18px; }
.mod-empty { font-size: 1.05rem; }
.mod-tag { display: inline-block; padding: 1px 8px; border-radius: 8px; font-size: .78rem; font-weight: 600; margin-left: 6px; vertical-align: 1px; }

/* ---------- Проверка автомобиля покупателем ---------- */
.check-unverified { background: var(--ochre-soft); color: var(--ink); }
.check-unverified a { color: inherit; font-weight: 600; }
.check-buyer { background: var(--ok-soft); color: var(--ok); }
.status-badge.check-unverified { background: var(--surface); color: var(--ink); border: 1px solid var(--ochre); }
.car-check .mod-step:first-of-type { margin-top: 10px; }
.car-check form { margin: 0 0 8px; }
.check-buyers { color: var(--ok); }

/* ---------- Обязательная проверка продавцом (форма объявления) ---------- */
.seller-check { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }
.seller-check .mod-step { margin-top: 10px; }
.seller-check-answers .check-chip input:disabled + span { opacity: .45; }
.seller-check.is-open .seller-check-answers .check-chip span { border-color: var(--primary); }
.seller-check-done { color: var(--ok); }

/* ---------- API-ключи в настройках и страница документации API ---------- */
.api-section { margin: 24px 0; }
.api-keys { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.api-keys li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px;
               border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.api-keys li form { margin: 0 0 0 auto; }
.api-key-name { font-weight: 600; }
.api-key-field { font-size: .92rem; letter-spacing: 0; }
.api-new-key { border-color: var(--ok); }
.api-docs h2 { margin-top: 28px; }
.api-docs pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
                overflow-x: auto; font-size: .82rem; line-height: 1.45; }
.api-docs code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; }
.api-docs .ep { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0 14px; }
.api-docs .ep th, .api-docs .ep td { text-align: left; vertical-align: top; padding: 6px 6px; border-bottom: 1px solid var(--border); }
.api-docs .ep td:first-child { white-space: nowrap; }
.api-docs .m { display: inline-block; min-width: 52px; font-weight: 600; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.api-docs .m-get { color: var(--ok); } .api-docs .m-post { color: var(--primary); } .api-docs .m-del { color: var(--danger); }
.api-docs .ep-wrap { overflow-x: auto; }
.api-copy { margin: 8px 0 10px; }

/* ---------- Вход через VK ID и Яндекс ID, документы, подвал ---------- */
.social-buttons { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 16px; }
.social-btn { display: block; text-align: center; padding: 13px 16px; border-radius: 12px; font-weight: 600;
              text-decoration: none; color: #fff; }
.social-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.social-vk { background: #0077FF; }
.social-vk:hover { background: #0066DB; }
.social-yandex { background: #1F1F1F; }
.social-yandex:hover { background: #000; }
.or-divider { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font-size: .9rem; margin: 6px 0 10px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.consents { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.consents .checkbox-row { align-items: flex-start; }
.consents a { color: var(--primary); }
.center-hint { text-align: center; }
.login-methods { margin-top: 28px; }
.login-methods .api-keys form { margin-left: auto; }
.legal-doc h1 { margin-bottom: 12px; }
.legal-doc p { line-height: 1.55; }
.site-footer { margin: 40px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--ink-muted); }
.site-footer p { margin: 4px 0; }
.site-footer a { color: var(--ink-muted); }
.delete-section { margin-top: 32px; }
.delete-section details summary { display: inline-block; cursor: pointer; list-style: none; }
.delete-section details summary::-webkit-details-marker { display: none; }
.delete-form { margin-top: 12px; }

/* ---------- Вход по номеру телефона ---------- */
.social-phone { background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); }
.social-phone:hover { background: var(--bg); }
.code-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; max-width: 220px; font-variant-numeric: tabular-nums; }
.phone-captcha { margin: 12px 0 4px; min-height: 102px; }
.phone-again a.is-waiting { color: var(--ink-muted); pointer-events: none; text-decoration: none; }

/* ---------- Жалобы и блокировка ---------- */
.report-row { margin: 22px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.chat-report { margin: -4px 0 8px; }
.report-link { color: var(--ink-muted); font-size: .9rem; text-decoration: underline; text-underline-offset: 2px; }
.report-link:hover { color: var(--danger); }
.report-reasons { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0 0 12px; }
.report-reasons legend { padding: 0 4px; font-weight: 600; }
.report-reasons .checkbox-row { margin: 6px 0; }
.admin-ban summary { list-style: none; cursor: pointer; }
.admin-ban summary::-webkit-details-marker { display: none; }
.admin-ban-form { margin-top: 10px; }
.admin-tools { margin: 24px 0; padding: 12px 14px; border: 1px dashed var(--border); border-radius: var(--radius); }
.admin-tools h2 { font-size: 1rem; margin: 0 0 8px; }
.admin-tools form { margin: 0 0 6px; }
.complaint-case { border-left: 3px solid var(--danger); }
.complaint-list { margin: 10px 0 6px; padding-left: 18px; }
.complaint-list li { margin: 6px 0; overflow-wrap: anywhere; }
.complaint-list .hint { display: block; margin: 1px 0 0; }
.complaint-hidden { background: var(--ochre-soft); color: var(--ink); margin: 2px 0 4px; }
.complaint-chat { margin: 8px 0; }
.complaint-chat summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.complaint-msg { margin: 6px 0; padding: 6px 8px; background: var(--bg); border-radius: 8px; font-size: .9rem; overflow-wrap: anywhere; }
.complaint-actions form { margin: 0 0 6px; }
.mod-log li { font-size: .9rem; }
.topbar-user { flex-wrap: wrap; row-gap: 4px; }

/* ---------- Яндекс Карты: метка точки и найденного адреса ---------- */
.ymap-pin { position: absolute; width: 30px; height: 40px; transform: translate(-50%, -100%); cursor: grab;
            filter: drop-shadow(0 2px 3px var(--shadow)); }
.ymap-pin svg { display: block; }
.ymap-hint { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); border-radius: 50%;
             background: #fff; border: 3px solid var(--primary); box-shadow: 0 0 0 6px rgba(193, 101, 46, .22);
             pointer-events: none; }
.near-map-box { margin: 8px 0; }
.map-box-small { height: 220px; }

/* ---------- Пуш-уведомления в настройках ---------- */
.push-section { margin-top: 28px; }
.push-device { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
               padding: 12px 14px; margin: 10px 0 4px; }
.push-state { margin: 0 0 8px; font-weight: 600; font-size: .95rem; }
.push-state.is-on { color: var(--ok); }
.push-state.is-on::before { content: "✓ "; }
.push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.push-actions .button { margin: 0; }
.push-msg:empty { display: none; }
.push-msg { margin-top: 8px; }
.push-msg.warn { color: var(--rust); }
.push-help { margin: 12px 0 0; }
.push-help ol, .push-help ul { margin: 4px 0 6px; padding-left: 20px; }
.push-help li { margin: 3px 0; }
.push-prefs { margin-top: 6px; }
.push-prefs .field-label { margin: 14px 0 0; }
.push-prefs .field-label + .checkbox-row { margin-top: 6px; }
.push-prefs .checkbox-row { margin-top: 8px; }
.push-prefs .button { margin-top: 14px; }
.push-off-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; }
.push-off-all .button { margin: 0; }
.push-section [hidden] { display: none !important; }
.map-box.map-unavailable { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--ink-muted); font-size: .9rem; }

/* ---------- Документы: политика обработки персональных данных ---------- */
.legal-doc h2 { font-size: 1.15rem; margin: 28px 0 8px; scroll-margin-top: 70px; }
.legal-doc h3 { font-size: 1rem; margin: 0 0 6px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; line-height: 1.55; }
.legal-doc li { margin: 4px 0; }
.legal-doc a { color: var(--primary); }
.legal-meta { color: var(--ink-muted); font-size: .9rem; }
.legal-toc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 14px; margin: 12px 0 8px; }
.legal-toc ol { margin: 0; padding-left: 22px; columns: 2 260px; column-gap: 24px; }
.legal-toc li { break-inside: avoid; margin: 3px 0; }
.legal-requisites { list-style: none; padding: 10px 14px !important; border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; }
.pd-purpose, .pd-recipient { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 14px; margin: 10px 0; }
.pd-recipient p { margin: 0; }
.pd-purpose dl { margin: 0; display: grid; grid-template-columns: 9.5em 1fr; gap: 6px 12px; }
.pd-purpose dt { color: var(--ink-muted); font-size: .88rem; }
.pd-purpose dd { margin: 0; line-height: 1.5; }
@media (max-width: 520px) {
  .pd-purpose dl { grid-template-columns: 1fr; gap: 2px; }
  .pd-purpose dd { margin-bottom: 6px; }
}
.legal-missing { color: var(--danger); font-weight: 600; background: color-mix(in srgb, var(--danger) 12%, transparent); padding: 0 4px; border-radius: 4px; }
.consents-section { margin-top: 28px; }
.consents-section .api-keys li { align-items: baseline; }
.consents-section details summary { display: inline-block; cursor: pointer; list-style: none; }
.consents-section details summary::-webkit-details-marker { display: none; }
.consents-section .warn { color: var(--rust); }
.consent-log { margin-top: 10px; }
.consent-log ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- «Меняю» и «Даром» ---------- */
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; margin: 4px 0 12px;
             background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.mode-tab { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 9px;
            text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem; }
.mode-tab:hover { background: var(--ochre-soft); }
.mode-tab.is-on { background: var(--primary); color: #F6F2E4; }
.mode-tab:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.mode-count { font-size: .75rem; font-weight: 700; padding: 0 7px; border-radius: 999px; background: var(--ochre-soft); color: var(--primary-dark); }
.mode-tab.is-on .mode-count { background: rgba(255, 255, 255, .25); color: #fff; }
.mode-note { margin: -4px 0 12px; }
.mode-note a { color: var(--primary); }

.mode-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 520px; }
.form .mode-chip { margin: 0; position: relative; cursor: pointer; color: var(--ink); }
.mode-chip input { position: absolute; left: 50%; bottom: 0; opacity: 0; width: 1px; height: 1px; }
.mode-chip span { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; height: 100%;
                  padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mode-chip small { font-size: .76rem; color: var(--ink-muted); }
.mode-chip input:checked + span { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: var(--ochre-soft); }
.mode-chip input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
#price-block[hidden], #wants-block[hidden] { display: none !important; }

.free-badge { position: absolute; right: 6px; top: 6px; z-index: 3; padding: 2px 8px; border-radius: 999px;
              font-size: .7rem; font-weight: 700; background: #3E7A4E; color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
              pointer-events: none; }
.pick-card .free-badge { font-size: 2.6cqw; right: 2cqw; top: 2cqw; }
.fib-action-free { background: #3E7A4E; }
a.fib-action-free:hover, a.fib-action-free:active { background: #346842; }
.free-line { font-size: .95rem; font-weight: 600; color: var(--ok); margin: 4px 0; }
.take textarea { width: 100%; }

/* ---------- Гость: вход в шапке ---------- */
.topbar-user a.topbar-login {
  opacity: 1;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
}
.topbar-user a.topbar-login:hover { background: rgba(255, 255, 255, .26); }
.guest-action .button { margin-top: 6px; }

/* ---------- Подписки на продавцов ---------- */
.seller-follow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 12px;
}
.seller-follow form { margin: 0; }
.seller-followers { font-size: .84rem; color: var(--ink-muted); }
.follow-btn { margin: 0; white-space: nowrap; }
.follow-btn.is-on { color: var(--primary-dark); border-color: var(--border); }
.follow-btn.is-on:hover { background: var(--ochre-soft); color: var(--primary-dark); }

.profile-title { min-width: 0; }
.profile-follow-stats { margin: 2px 0 0; font-size: .88rem; color: var(--ink-muted); }
.profile-follow { margin: 6px 0 14px; }
.profile-follow form { margin: 0; }
.profile-follow .hint { margin: 6px 0 0; }
.followers-list { margin: 0 0 14px; font-size: .92rem; }
.followers-list summary { cursor: pointer; color: var(--primary-dark); font-weight: 500; }
.followers-list p { margin: 6px 0 0; overflow-wrap: anywhere; }

.subs-head { display: flex; align-items: center; gap: 8px; }
.subs-count { font-family: "Work Sans", sans-serif; font-size: .75rem; font-weight: 700; padding: 1px 8px;
              border-radius: 999px; background: var(--ochre-soft); color: var(--primary-dark); }
.subs-count.subs-new { background: var(--primary); color: #F6F2E4; }
.seller-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.seller-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px 8px 12px;
}
.seller-row form { margin: 0; flex-shrink: 0; }
.seller-row-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; text-decoration: none; color: var(--ink); }
.seller-row .seller-avatar { width: 44px; height: 44px; font-size: 1.15rem; }
.feed-item { position: relative; }
.new-badge {
  position: absolute;
  top: 14px;
  left: 58px;   /* справа от звёздочки «в избранное», на фото */
  z-index: 3;
  background: var(--primary);
  color: #F6F2E4;
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  box-shadow: 0 2px 6px var(--shadow);
}

/* ---------- Слежка за доменами (администраторы) ---------- */
.domain-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.domain-head h2 { margin: 0; font-size: 1.2rem; }
.domain-label { margin: 4px 0 6px; font-weight: 500; }
.domain-specs { margin: 6px 0; }
.domain-ns { overflow-wrap: anywhere; }
.domain-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.domain-actions form { margin: 0; }
.domain-log { margin-top: 8px; font-size: .9rem; }
.domain-log summary { cursor: pointer; color: var(--primary-dark); }
.domain-log ul { margin: 6px 0 0; padding-left: 18px; }
.domain-log li { margin: 3px 0; overflow-wrap: anywhere; }
.domain-add { margin: 14px 0; }
.domain-help ul { margin: 4px 0 0; padding-left: 18px; }
.domain-help li { margin: 4px 0; font-size: .92rem; }