/* ============================================================
   Estate Web — дизайн-система в духе LUN.ua
   Токены из docs/webapp-contract.md. Desktop-first, брейкпоинт 768px.
   ============================================================ */

/* Токены — палитра truvo Clay (тест 2026-07-26): тёплый sand-фон, clay-акцент,
   шоколадный текст. Откат — git revert этого блока и dark-блока ниже */
:root{
  --accent:#C77258;       /* clay: кнопки, ссылки, акценты, лого */
  --accent-soft:#F9E2D2;  /* peach-soft подложки */
  --ink:#33231C;          /* chocolate: основной текст */
  --muted:#9C8578;
  --line:#E7D9CB;
  --bg:#F6EDE4;           /* sand: фон страниц */
  --card:#FDFAF5;         /* sand-white: карточки */
  --cta:#C77258;          /* primary-кнопки — clay */
  --ok:#7A8C5A;           /* тёплый оливковый */
  --warn:#C77258;
  --bad:#B0402F;          /* тёплый терракотовый */
  --link:#C77258;
  --radius:12px;
  --radius-s:8px;
  --shadow:0 1px 3px rgba(51,35,28,.06);
  --shadow-lift:0 8px 24px rgba(51,35,28,.10);
  --topbar-h:56px;
  --bottombar-h:0px;
  /* роли, вынесенные из хардкода (тёмная тема переопределяет) */
  --ink-2:#5C4A3E;        /* вторичный текст */
  --ink-3:#7A6455;        /* текст табов/иконок */
  --cta-ink:#FDFAF5;      /* текст на CTA-кнопке */
  --hover:#EFE3D6;        /* ховеры строк/плиток */
  --line-soft:#F0E5D8;    /* мягкие разделители */
  --media-bg:#EAE0D3;     /* фото-плейсхолдеры */
  --media-bg-2:#F4EDE3;   /* блик скелетона */
  --ghost:#D9C9BA;        /* иконки-заглушки */
  --pill-muted:#F1E6D9;
  --table-stripe:#FAF4EC;
  --table-hover:#F3EADF;
  --kb-col:#EFE6DA;
  /* «жидкое стекло»: полупрозрачные бары + blur */
  --glass:rgba(253,250,245,.72);
  --glass-hover:rgba(253,250,245,.88);
  --glass-line:rgba(51,35,28,.12);
  /* серии графиков (dashboard/admin) */
  --chart-1:#33231C; --chart-2:#C77258; --chart-3:#9C8578;
  --chart-4:#7A8C5A; --chart-5:#EFB79A; --chart-6:#B0402F;
  --chart-grid:#EDE3D6; --chart-axis:#DCCFC0;
  /* насыщенный акцент: контур/выбранный дом подсветки на карте */
  --accent-strong:#A85A42;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.45 Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
svg{display:block;flex:none}

/* Leaflet живёт в своём stacking context — оверлеи всегда сверху */
.leaflet-container{isolation:isolate;font:inherit;z-index:0}

/* ---------- топбар и вкладки ---------- */
/* «жидкое стекло» Apple Maps: полупрозрачный бар + blur. Сам blur живёт на
   ::before: backdrop-filter на .topbar сделал бы его containing block для
   fixed-потомков — мобильные .tabs (нижняя навигация) прилипали бы к топбару.
   Фолбэк без backdrop-filter — непрозрачный var(--card) (см. @supports). */
.topbar{
  position:sticky;top:0;z-index:40;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:28px;
  padding:0 20px;
  border-bottom:1px solid var(--glass-line);
}
.topbar::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  backdrop-filter:blur(20px) saturate(1.8);
}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .topbar{background:var(--card);border-bottom-color:var(--line)}
  .topbar::before{display:none}
  .modesw{background:var(--bg);border-color:var(--line)}
  .tabs{background:var(--card);border-top-color:var(--line)}
}
.logo{
  display:flex;align-items:center;gap:9px;
  font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--accent);
}
.logo__img{width:28px;height:28px;border-radius:8px;display:block}
.tabs{display:flex;gap:4px}
.tab{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:10px;
  color:var(--ink-3);font-weight:500;
  transition:background .15s,color .15s;
}
.tab svg{width:19px;height:19px}
.tab:hover{background:var(--hover);color:var(--ink)}
.tab--active{background:var(--hover);color:var(--ink);font-weight:600}

/* сегмент «Оренда | Продаж» — режим базы, живёт в топбаре перед блоком юзера */
.modesw{
  display:flex;gap:2px;flex:none;
  background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  backdrop-filter:blur(20px) saturate(1.8);
  border-radius:999px;padding:3px;
}
.modesw:empty{display:none}
.modesw__btn{
  border-radius:999px;padding:5px 14px;
  font-size:13px;font-weight:600;color:var(--muted);
  transition:background .15s,color .15s;white-space:nowrap;
}
.modesw__btn:hover{color:var(--ink)}
.modesw__btn--active{background:var(--accent);color:#FFF}
.modesw__btn--active:hover{color:#FFF}

/* ---------- страница ---------- */
.page{max-width:1440px;margin:0 auto;padding:20px 16px 40px}
/* деталка — на весь экран ПК (запрос 2026-07-22): фото и контент крупнее,
   центр не зажимает; на сверхшироких мониторах разумный потолок */
.page--listing{max-width:1880px;padding-left:28px;padding-right:28px}
.muted{color:var(--muted)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--cta);color:var(--cta-ink);
  font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:var(--radius-s);
  transition:opacity .15s,transform .15s;
  user-select:none;
}
.btn:hover{opacity:.85}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn--full{width:100%}
.btn--ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn--ghost:hover{opacity:1;border-color:var(--muted);background:var(--hover)}
.btn--reset{color:var(--accent);font-weight:600;font-size:14px;align-self:flex-end;padding:9px 0}
.btn--reset:hover{text-decoration:underline}
.iconbtn{
  width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-3);transition:background .15s;
}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.backbtn{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:500;color:var(--ink-3);padding:6px 10px 6px 4px;
  border-radius:10px;margin-bottom:12px;transition:background .15s,color .15s;
}
.backbtn:hover{background:var(--hover);color:var(--ink)}

/* ---------- чипы, поля ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;
  font-size:14px;font-weight:500;
  transition:border-color .15s,background .15s,color .15s;
  user-select:none;white-space:nowrap;
}
.chip:hover{border-color:var(--muted)}
.chip--active{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.chip--active:hover{border-color:var(--cta)}
.chips{display:flex;gap:8px;flex-wrap:wrap}

.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:13px;color:var(--muted)}
.input,.select{
  background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;font-size:14px;
  outline:none;transition:border-color .15s;
  -moz-appearance:textfield;appearance:auto;
}
.input:focus,.select:focus{border-color:var(--ink)}
.input::placeholder{color:var(--muted)}
.input[type=number]::-webkit-outer-spin-button,
.input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.input--num{width:96px}
textarea.input{resize:vertical;min-height:88px}

/* ---------- карточка объявления ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}

.card{
  position:relative;   /* контекст для .card__link (оверлей-ссылка) */
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
  outline:none;
  /* карточки одного ряда — одной высоты (grid stretch), а футер с кнопками
     прижат к низу: разная длина описания больше не гуляет кнопками (2026-07-25) */
  display:flex;flex-direction:column;
}
/* ссылка-оверлей: настоящий <a target=_blank> поверх карточки — колёсико/
   Ctrl+клик работают нативно; стрелки и «+ клієнту» лежат выше (z-index:2) */
.card__link{position:absolute;inset:0;z-index:1}
.card:hover,.card:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.card--active{transform:translateY(-2px);box-shadow:var(--shadow-lift);outline:2px solid var(--accent)}

/* фото портретное, как карточки LUN (360×480) */
.card__media{position:relative;aspect-ratio:3/4;background:var(--media-bg);overflow:hidden;flex-shrink:0}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__nophoto{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ghost);
}
.card__nophoto svg{width:44px;height:44px}
.card__ind{
  position:absolute;left:0;right:0;bottom:8px;z-index:2;
  display:flex;justify-content:center;gap:4px;pointer-events:none;
}
.card__ind i{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.35);
  transition:background .15s;
}
.card__ind i.on{background:#fff}
.card__cnt{
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:10px;
}
/* стрелки карусели: на десктопе появляются при наведении, на touch — всегда */
.card__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:#1E2126;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
  opacity:0;transition:opacity .15s;z-index:2;
}
.card__nav svg{width:16px;height:16px}
.card__nav--l{left:8px}
.card__nav--r{right:8px}
.card__media:hover .card__nav{opacity:1}
@media (hover:none){.card__nav{opacity:.85}}
.card__desc{
  font-size:13px;color:var(--ink-2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* «переглянуто за сесію» — приглушаем только в панели карты */
.map-cards .card--viewed{opacity:.6;filter:grayscale(.35)}
.card__badges{
  position:absolute;top:8px;left:8px;
  display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;
}
.badge{
  background:rgba(24,24,24,.72);color:#fff;
  font-size:12px;font-weight:500;
  padding:4px 9px;border-radius:8px;
  backdrop-filter:blur(2px);white-space:nowrap;
}
/* deal-тег «нижче ринку»; pointer-events — чтобы работал title-тултип
   (у .card__badges события выключены) */
.badge--deal{background:var(--ok);color:#fff;font-weight:600;pointer-events:auto}
/* цена и адрес поверх фото на градиенте — как LUN */
.card__overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:48px 14px 22px;color:#fff;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 40%,rgba(0,0,0,.62) 100%);
}
.card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__price{font-size:24px;font-weight:800;line-height:1.15;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35)}
.card__price-orig{font-size:13px;font-weight:500;color:var(--muted)}
.card__price-uah{font-size:13px;font-weight:600;color:var(--muted)}
.card__overlay .card__price-uah{color:rgba(255,255,255,.85)}
.card__title{
  font-size:15px;font-weight:600;margin-top:2px;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.card__mtr{font-size:13px;color:rgba(255,255,255,.92);margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
/* чипы ЖК/района под фото — серые пилюли LUN */
.card__tags{display:flex;flex-wrap:wrap;gap:6px}
.card__tag{
  background:var(--hover);border-radius:999px;padding:4px 10px;
  font-size:12.5px;font-weight:500;color:var(--ink-2);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* факты с иконками столбиком в 2 колонки — как property grid LUN */
.card__facts{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px}
.card__fact{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);min-width:0}
.card__fact svg{flex:0 0 auto;color:var(--muted)}
.card__fact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);
}
.card__src{font-weight:600;letter-spacing:.02em}

/* скелетоны */
.card--skeleton{pointer-events:none}
.sk{
  background:linear-gradient(90deg,var(--media-bg) 25%,var(--media-bg-2) 37%,var(--media-bg) 63%);
  background-size:400% 100%;animation:sk 1.2s ease infinite;
}
.sk--line{height:13px;border-radius:6px;margin:5px 0}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- лента ---------- */
.feed__top{display:flex;align-items:center;gap:14px;margin-bottom:12px;min-height:20px}
.feed__count{font-size:14px;color:var(--muted)}
.filters-btn{display:none;position:relative;padding:9px 14px;font-size:14px}
.filters-btn svg{width:17px;height:17px}
.filters-btn__n{
  background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  min-width:18px;height:18px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
}
.filters-btn__n[hidden]{display:none}   /* display:inline-flex сильнее UA-правила [hidden] */
.feed__more{padding:8px 0}
.feed__end{text-align:center;color:var(--muted);font-size:14px;padding:20px 0}

/* панель фильтров (desktop — бар; mobile — bottom-sheet, см. медиа) */
.feedbar{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px;margin-bottom:18px;
}
.feedbar__inner{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end}
.fgroup{display:flex;flex-direction:column;gap:6px}
.fgroup__label{font-size:12px;color:var(--muted)}
.fgroup--q{flex:1;min-width:220px}
.range{display:flex;align-items:center;gap:6px}
.range__dash{color:var(--muted)}
.qwrap{position:relative}
.qwrap svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted);pointer-events:none;
}
.input--q{padding-left:34px;width:100%}
.sheet__head,.sheet__apply{display:none}

/* desktop-лента: фильтры — закреплённая мини-панель слева, карточки правее */
@media (min-width:769px){
  .page--feed{max-width:1440px}
  .feed__layout{display:flex;gap:22px;align-items:flex-start}
  .feed__main{flex:1;min-width:0}
  .feedbar{
    width:250px;flex:0 0 auto;margin-bottom:0;
    position:sticky;top:calc(var(--topbar-h) + 16px);
    max-height:calc(100dvh - var(--topbar-h) - 32px);overflow-y:auto;
  }
  .feedbar__inner{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:16px}
  .fgroup--q{min-width:0}
  .feedbar .range .input{flex:1;width:auto;min-width:0}
  .btn--reset{align-self:flex-start}
  /* dropdown района раскрывается в потоке: overflow панели не режет его */
  .feedbar .dd__menu{
    position:static;box-shadow:none;min-width:0;max-height:240px;
    border:1px solid var(--line-soft);
  }
  /* карточки покрупнее: панель слева съедает колонку — вернём размер с запасом */
  .page--feed .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
}

/* dropdown мультиселекта района */
.dd{position:relative}
.dd__btn svg{width:15px;height:15px;color:var(--muted)}
.chip--active.dd__btn svg{color:var(--cta-ink)}
.dd__menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  min-width:230px;max-height:280px;overflow-y:auto;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);
  box-shadow:var(--shadow-lift);padding:6px;
}
.dd__item{
  display:flex;align-items:center;gap:9px;
  padding:7px 10px;border-radius:8px;cursor:pointer;font-size:14px;
}
.dd__item:hover{background:var(--hover)}
.dd__item input{accent-color:var(--accent);width:15px;height:15px;margin:0}

/* ---------- пустые состояния, ошибки, спиннер ---------- */
.empty{
  grid-column:1/-1;text-align:center;color:var(--muted);padding:56px 16px;
}
.empty svg{width:36px;height:36px;margin:0 auto 4px;color:var(--ghost)}
.empty h3{color:var(--ink);margin:12px 0 4px;font-size:17px}
.errorbox{text-align:center;color:var(--muted);padding:36px 16px;display:flex;flex-direction:column;gap:14px;align-items:center}
.spinner{
  width:28px;height:28px;margin:28px auto;
  border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- деталка ---------- */
.listing{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
/* широкий ПК: панель шире, зазор больше — фото занимают остальное */
@media (min-width:1500px){
  .listing{grid-template-columns:minmax(0,1fr) 400px;gap:32px}
  .listing__title--sub{font-size:17px}
  .lhead__price{font-size:36px}
  .lfact{font-size:16px}
  .mapbox{height:400px}
  .grid--similar{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
}
.listing__title{font-size:23px;font-weight:700;line-height:1.25;margin-bottom:6px}
.listing__addr{
  display:flex;align-items:center;gap:6px;
  color:var(--ink-2);font-size:14px;margin-bottom:14px;
}
.listing__addr svg{width:16px;height:16px;color:var(--muted)}

.gallery__main{
  border-radius:var(--radius);overflow:hidden;background:var(--media-bg);
  aspect-ratio:16/10;cursor:zoom-in;position:relative;
}
.gallery__main img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__count{
  position:absolute;right:12px;bottom:12px;
  padding:5px 10px;border-radius:6px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  color:#fff;font-size:13px;font-weight:600;
}
.gallery__main--empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:var(--ghost);cursor:default;
  border-radius:var(--radius);background:var(--media-bg);aspect-ratio:16/10;
}
.gallery__main--empty svg{width:44px;height:44px}

/* hero-галерея «как ЛУН»: главное фото + мозаика из 2 справа, стрелки всегда
   видны (раньше листать можно было только в лайтбоксе) */
.ghero{display:grid;grid-template-columns:1fr;gap:8px}
.ghero--mosaic{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.ghero__main{
  border-radius:var(--radius);overflow:hidden;background:var(--media-bg);
  aspect-ratio:4/3;cursor:zoom-in;position:relative;
}
.ghero__main img{width:100%;height:100%;object-fit:cover;display:block}
.ghero__side{display:grid;grid-template-rows:auto auto;gap:8px;min-width:0;align-content:start}
.ghero__cell{
  border-radius:var(--radius-s);overflow:hidden;background:var(--media-bg);
  position:relative;cursor:zoom-in;
  /* 4/3 в колонке 1fr при main 2fr даёт высоту мозаики ≈ высоте главного фото */
  aspect-ratio:4/3;
}
.ghero__cell img{width:100%;height:100%;object-fit:cover;display:block}
.ghero__more{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.48);color:#fff;font-size:16px;font-weight:700;
  cursor:pointer;backdrop-filter:blur(1px);
}
.ghero__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;z-index:2;cursor:pointer;border:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:#1E2126;
  box-shadow:0 2px 10px rgba(0,0,0,.28);transition:background .15s,color .15s;
}
.ghero__nav:hover{background:var(--accent);color:#fff}
.ghero__nav svg{width:19px;height:19px}
.ghero__nav--l{left:12px}
.ghero__nav--r{right:12px}
:root[data-theme="dark"] .ghero__nav{background:rgba(44,44,46,.9);color:#F2F2F7}
:root[data-theme="dark"] .ghero__nav:hover{background:var(--accent);color:#fff}
.ghero__count{
  position:absolute;right:12px;bottom:12px;
  padding:5px 10px;border-radius:6px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  color:#fff;font-size:13px;font-weight:600;pointer-events:none;
}

/* адресные чипы под заголовком и крупные факты «как ЛУН» */
.listing__addrchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:13px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);
}
.listing__addrchip svg{width:14px;height:14px;color:var(--muted)}
/* шапка деталки «как ЛУН»: цена крупно, тип+улица строкой, чипы района */
.lhead{margin-top:18px}
.lhead__price{font-size:32px;font-weight:800;line-height:1.15}
.listing__title--sub{font-size:16px;font-weight:500;color:var(--ink-2);margin:6px 0 10px}
/* факты «как ЛУН»: иконка + текст в строку, без карточного фона */
.lfacts{display:flex;gap:8px 36px;flex-wrap:wrap;margin-top:16px;padding:4px 2px}
.lfact{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600}
.lfact svg{width:21px;height:21px;color:var(--ink-2);flex:none}
/* строки секций «Деталі»/«У квартирі є»/«Про будинок» — сетка как у ЛУН */
.lrows{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px 28px}
.lrow{display:flex;align-items:center;gap:11px;font-size:14.5px;color:var(--ink)}
.lrow svg{width:20px;height:20px;color:var(--ink-2);flex:none}
/* адресная строка секции («Про будинок», «Місцезнаходження») — как у ЛУН */
.lsec__addr{font-size:14.5px;font-weight:600;color:var(--ink);margin:-4px 0 14px}
.lsec__metro{color:var(--bad);font-weight:600;margin-left:10px}
/* фототур: сетка всех фото альбома, клик — лайтбокс */
.ptour{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ptour img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:10px;cursor:zoom-in;background:var(--media-bg);
  transition:transform .15s;
}
.ptour img:hover{transform:scale(1.015)}
/* тумблер «Мапа | 3D» поверх мини-карты */
.map3d{
  position:absolute;top:10px;left:10px;z-index:5;display:flex;gap:2px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
  padding:3px;
}
.map3d__btn{
  padding:5px 12px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--muted);transition:background .15s,color .15s;
}
.map3d__btn--on{background:var(--accent);color:#fff}
.lchips{display:flex;gap:8px;flex-wrap:wrap}
.lchip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:500;
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
}
.lchip svg{width:18px;height:18px;flex:none;color:var(--muted)}
.lchip--ok{border-color:transparent;background:color-mix(in srgb, var(--ok) 12%, var(--card));color:var(--ink)}
.lchip--ok svg{color:var(--ok)}
.listing__srctitle{font-weight:700;margin-bottom:8px;color:var(--ink)}
.listing__desc--clamped{
  display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical;overflow:hidden;
}
.lmore{
  margin-top:10px;color:var(--accent);font-weight:600;font-size:14px;cursor:pointer;
  background:none;border:0;padding:0;
}
.lmore:hover{text-decoration:underline}
.panel__sqm{font-size:14px;color:var(--muted);margin-top:-10px}
.grid--similar{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.gallery__thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth}

/* стрелки ленты превью (страница объявления) — как в лайтбоксе, но компактнее */
.gstrip{position:relative}
.gstrip__btn{
  position:absolute;top:calc(50% + 2px);transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);color:var(--ink);
  box-shadow:0 1px 6px rgba(0,0,0,.25);
  transition:opacity .15s;
}
.gstrip__btn svg{width:16px;height:16px}
.gstrip__btn:hover{opacity:.85}
.gstrip__prev{left:4px}
.gstrip__next{right:4px}
.gallery__thumbs img{
  width:92px;height:68px;flex:none;object-fit:cover;
  border-radius:8px;cursor:pointer;opacity:.8;transition:opacity .15s;
}
.gallery__thumbs img:hover{opacity:1}
.gallery__thumbs img.on{outline:2px solid var(--accent);opacity:1}

.block{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-top:16px;
}
.block h2{font-size:17px;font-weight:700;margin-bottom:12px}
.listing__desc{white-space:pre-line;color:var(--ink);font-size:15px;overflow-wrap:break-word}
.mapbox{height:320px;border-radius:var(--radius-s);overflow:hidden;position:relative;z-index:0}
.geoline{margin-top:12px;display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}
.geonote{font-size:13px;margin-top:8px}

/* плашка «оголошення зняте» (liveness) в деталке */
.stale-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:14px;
  background:#FDEBEC;border:1px solid #F5C6CB;border-radius:var(--radius-s);
  color:#8A1C24;font-size:14px;
}
.stale-note svg{width:18px;height:18px;flex:none}
.stale-note span{color:#A94450}
.panel{
  position:sticky;top:calc(var(--topbar-h) + 16px);
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;
  display:flex;flex-direction:column;gap:14px;
}
.panel__price{font-size:28px;font-weight:800}
.panel__mo{font-size:15px;font-weight:500;color:var(--muted);margin-left:4px}
.panel__orig{font-size:14px;color:var(--muted);margin-top:-10px}
.panel__deal{font-size:14px;font-weight:600;color:var(--ok)}
.panel__badges{display:flex;gap:6px;flex-wrap:wrap}
.panel__found{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.panel__found svg{width:15px;height:15px}
.panel__sec{border-top:1px solid var(--line-soft);padding-top:14px}
.panel__sec h2{font-size:15px;font-weight:700;margin-bottom:6px}
.drow{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px}
.drow svg{width:17px;height:17px;color:var(--muted)}
.drow b{margin-left:auto;font-weight:600;text-align:right}

/* ---------- split список + карта ---------- */
.split{
  display:grid;grid-template-columns:420px minmax(0,1fr);
  height:calc(100dvh - var(--topbar-h) - var(--bottombar-h));
}
.split>*:first-child{overflow-y:auto;padding:16px;background:var(--bg)}
.split>*:first-child .grid{grid-template-columns:1fr}
.split>*:last-child{position:relative;z-index:0}

/* ---------- ценовой пин карты ---------- */
.pin-wrap{background:none;border:none}
.pin{
  position:absolute;transform:translate(-50%,calc(-100% - 7px));
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:4px 10px;font-size:12px;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition:background .15s,color .15s;cursor:pointer;
}
.pin::after{
  content:'';position:absolute;left:50%;bottom:-4px;
  width:8px;height:8px;background:inherit;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg);
}
/* пин как элемент maplibregl.Marker (мини-карта деталки): позиционирует
   сам маркер, абсолютная леафлетовская раскладка не нужна */
.pin--gl{position:relative;transform:none;display:inline-block;cursor:default}
/* кнопка источника, снятого с публикации (семья дублей) */
.btn--stale{opacity:.55}
.pin:hover,.pin--active{
  background:var(--cta);color:var(--cta-ink);border-color:var(--cta);z-index:5;
}
.pin:hover::after,.pin--active::after{border-color:var(--cta)}

/* кластеры markercluster — в акцент */
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{
  background:rgba(199,114,88,.28);
}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{
  background:var(--accent);color:#fff;font-weight:700;
  font-family:inherit;
}

/* ---------- оверлеи: sheet, modal, lightbox, login ---------- */
.backdrop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.4)}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  background:var(--card);border-radius:16px 16px 0 0;
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
  padding:16px;max-height:85dvh;overflow-y:auto;
  transform:translateY(105%);transition:transform .25s ease;
}
.sheet--open{transform:translateY(0)}

.modal{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);padding:16px;
}
.modal__box{
  background:var(--card);border-radius:var(--radius);
  padding:24px;width:min(480px,100%);max-height:86dvh;overflow-y:auto;
  box-shadow:var(--shadow-lift);
}

.lightbox{
  position:fixed;inset:0;z-index:80;
  background:rgba(12,12,12,.93);
  display:flex;align-items:center;justify-content:center;
}
.lightbox img{max-width:92vw;max-height:86dvh;object-fit:contain;border-radius:8px}
.lightbox__btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;z-index:2;
}
.lightbox__btn:hover{background:rgba(255,255,255,.28)}
.lightbox__prev{left:16px}
.lightbox__next{right:16px}
.lightbox__close{top:16px;right:16px;transform:none}
.lightbox__count{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  color:#DDD;font-size:13px;letter-spacing:.04em;
}

.login{
  position:fixed;inset:0;z-index:90;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.login__box{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:32px 28px;width:min(360px,100%);
  display:flex;flex-direction:column;gap:14px;text-align:center;
}
.login__logo{font-size:30px;font-weight:800;letter-spacing:-.5px;color:var(--accent)}
.login__hint{color:var(--muted);font-size:14px}
.login__err{color:var(--bad);font-size:13px;min-height:16px}

/* ---------- мобайл ≤768px ---------- */
@media (max-width:768px){
  :root{--bottombar-h:58px}

  body{padding-bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom))}

  .topbar{justify-content:center;gap:0}
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--glass);border-top:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(20px) saturate(1.8);
    backdrop-filter:blur(20px) saturate(1.8);
    height:calc(var(--bottombar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    display:flex;justify-content:space-around;align-items:stretch;
  }
  .tab{flex:1;flex-direction:column;gap:3px;justify-content:center;font-size:11px;padding:6px 0;border-radius:0}
  .tab svg{width:22px;height:22px}
  .tab:hover{background:none}
  .tab--active{background:none;color:var(--accent)}

  /* переключатель режима остаётся в топбаре: компактно слева от центр-лого
     (справа абсолютный .topbar__user — туда нельзя) */
  .modesw{position:absolute;left:10px;top:50%;transform:translateY(-50%);padding:2px}
  .modesw__btn{padding:4px 10px;font-size:12px}

  .page{padding:14px 12px 28px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .card__price{font-size:19px}
  .card__overlay{padding:34px 10px 16px}
  .card__title{font-size:13px}
  .card__body{padding:10px 11px 11px;gap:6px}
  .card__facts{grid-template-columns:1fr}

  .filters-btn{display:inline-flex}

  /* панель фильтров → bottom-sheet */
  .feedbar{
    position:fixed;left:0;right:0;bottom:0;z-index:61;
    margin:0;border:none;border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.15);
    max-height:82dvh;display:flex;flex-direction:column;
    transform:translateY(105%);transition:transform .25s ease;
    padding:16px;
  }
  .feedbar.sheet--open{transform:translateY(0)}
  .feedbar__inner{
    flex-direction:column;align-items:stretch;gap:16px;
    overflow-y:auto;padding:4px 0 8px;
  }
  .fgroup--q{min-width:0}
  .input--num{width:100%}
  .range{gap:10px}
  .range .input{flex:1}
  .sheet__head{
    display:flex;justify-content:space-between;align-items:center;
    padding-bottom:10px;border-bottom:1px solid var(--line-soft);font-size:16px;
  }
  .sheet__apply{display:block;padding-top:12px;border-top:1px solid var(--line-soft)}
  .btn--reset{align-self:flex-start}
  .dd__menu{position:static;box-shadow:none;border:none;max-height:230px;padding:0;min-width:0}

  /* деталка в одну колонку, панель не липнет */
  .listing{grid-template-columns:1fr;gap:14px}
  .listing__title{font-size:19px}
  .panel{position:static}
  /* hero-мозаика: на телефоне только главное фото (боковые ушли в ленту) */
  .ghero--mosaic{grid-template-columns:1fr}
  .ghero__side{display:none}
  .ghero__nav{width:34px;height:34px}
  .lfacts{gap:6px 22px}
  .lhead__price{font-size:26px}
  .grid--similar{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .panel__price{font-size:24px}
  .mapbox{height:240px}
  .gallery__main{aspect-ratio:4/3}
  .gallery__thumbs img{width:76px;height:57px}

  /* split: одна колонка; режим переключается классами --list / --map */
  .split{grid-template-columns:1fr}
  .split>*:last-child{display:none}
  .split--map>*:first-child{display:none}
  .split--map>*:last-child{display:block}

  .lightbox__btn{width:38px;height:38px}
  .lightbox__prev{left:8px}
  .lightbox__next{right:8px}
}

/* узкие телефоны: карточки в одну колонку */
@media (max-width:420px){
  .grid{grid-template-columns:1fr}
}


/* ============================================================
   ТЁМНАЯ ТЕМА. Токены переопределяются целиком; ниже — точечные
   оверрайды компонентов, чьи светлые значения не токенизируются
   (статусные пиллы, плашка «зняте», попапы карты).
   Переключатель — кнопка в топбаре (app.js), выбор в localStorage,
   дефолт — системная prefers-color-scheme (index.html).
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme:dark;
  /* тёмная тема — ПРЕЖНЯЯ (графит, запрос 2026-07-26): из брендинга truvo
     здесь только clay-акцент вместо оранжевого; фоны не трогаем */
  --accent:#D08063;
  --accent-soft:#4A322A;
  --accent-strong:#B96A50;
  --ink:#F2F2F7;
  --ink-2:#C7C7CC;
  --ink-3:#AEAEB2;
  --muted:#8E8E93;
  --line:#38383A;
  --line-soft:#323234;
  --bg:#1C1C1E;
  --card:#2C2C2E;
  --cta:#48484A;
  --cta-ink:#FFFFFF;
  --ok:#30D158;
  --warn:#FF9F0A;
  --bad:#FF453A;
  --link:#0A84FF;
  --hover:#3A3A3C;
  --media-bg:#3A3A3C;
  --media-bg-2:#48484A;
  --ghost:#636366;
  --pill-muted:#3A3A3C;
  --table-stripe:#323234;
  --table-hover:#3A3A3C;
  --kb-col:#232326;
  --glass:rgba(28,28,30,.72);
  --glass-hover:rgba(58,58,60,.78);
  --glass-line:rgba(255,255,255,.10);
  --shadow:0 1px 3px rgba(0,0,0,.45);
  --shadow-lift:0 10px 28px rgba(0,0,0,.55);
  --chart-1:#E5E5EA; --chart-2:#D08063; --chart-3:#98989D;
  --chart-4:#30D158; --chart-5:#0A84FF; --chart-6:#FF453A;
  --chart-grid:#2C2C2E; --chart-axis:#3A3A3C;
}
/* автосистемная тёмная до инициализации JS не нужна: index.html ставит
   data-theme до загрузки CSS. Ниже — компонентные оверрайды. */
:root[data-theme="dark"] .pill--ok{background:rgba(48,209,88,.16);color:#4CD964}
:root[data-theme="dark"] .pill--warn{background:rgba(255,159,10,.16);color:#FFB340}
:root[data-theme="dark"] .pill--bad{background:rgba(255,69,58,.16);color:#FF7A70}
:root[data-theme="dark"] .stale-note{background:#3B1D20;border-color:#5C2E33;color:#FF9BA0}
:root[data-theme="dark"] .stale-note span{color:#E5868D}
:root[data-theme="dark"] .badge--deal{color:#0B2413}
:root[data-theme="dark"] .filters-btn__n{color:#1C1C1E}
/* на светлом dark-акценте белый текст слепнет — тёмный, как у filters-btn__n */
:root[data-theme="dark"] .modesw__btn--active{color:#1C1C1E}
:root[data-theme="dark"] .modesw__btn--active:hover{color:#1C1C1E}
:root[data-theme="dark"] .mapbtn--active{color:#1C1C1E}
:root[data-theme="dark"] .map-selchip{color:#1C1C1E}
/* тосты/тултипы в тёмной — «поднятая» серая плашка (elevated), не белая */
:root[data-theme="dark"] .search-toast{background:#48484A;color:#F2F2F7}
:root[data-theme="dark"] .adm-toast{background:#48484A;color:#F2F2F7}
:root[data-theme="dark"] .chart-tip{background:#48484A;color:#F2F2F7}
:root[data-theme="dark"] .chart-tip b{color:#AEAEB2}
/* лого на логине: --cta в тёмной серый — держим текст читаемым */
:root[data-theme="dark"] .login__logo--crm{color:var(--ink)}
/* стрелки карусели на фото: тёмное стекло вместо белых кружков */
:root[data-theme="dark"] .card__nav{background:rgba(44,44,46,.88);color:#F2F2F7}
/* попапы Leaflet/MapLibre — тёмные карточки */
:root[data-theme="dark"] .maplibregl-popup-content{background:var(--card);color:var(--ink)}
:root[data-theme="dark"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:var(--card)}
:root[data-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:var(--card)}
:root[data-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--card)}
:root[data-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--card)}
:root[data-theme="dark"] .maplibregl-popup-close-button{color:var(--muted)}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip{background:var(--card);color:var(--ink)}
:root[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
:root[data-theme="dark"] .leaflet-bar a{background:var(--card);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .leaflet-bar a:hover{background:var(--hover)}
/* серый пин «переглянуто» в тёмной теме */
:root[data-theme="dark"] .pin--viewed{background:#2A2D33 !important;color:#7C818A !important;border-color:#3A3E45 !important}
/* элементы управления MapLibre (зум) — «стекло», как кнопки Apple Maps */
.maplibregl-ctrl-group{
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  backdrop-filter:blur(20px) saturate(1.8);
  box-shadow:0 2px 8px rgba(0,0,0,.14),0 0 0 1px var(--glass-line);
}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--glass-line)}
:root[data-theme="dark"] .maplibregl-ctrl button .maplibregl-ctrl-icon{filter:invert(.85)}
@supports not ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))){
  .maplibregl-ctrl-group{background:var(--card)}
}

/* ---------- переключатель валюты фильтра цены (₴/$) ---------- */
.fgroup__label--row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.curswitch{
  display:inline-flex;gap:2px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:2px;
}
.curswitch__btn{
  min-width:26px;padding:2px 8px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--muted);
  transition:background .15s,color .15s;
}
.curswitch__btn:hover{color:var(--ink)}
.curswitch__btn--active{background:var(--accent);color:#FFF}
.map-filters__lbl--cur{display:flex;align-items:center;gap:8px}

/* --- сортировка списков (лента + панель карты, 2026-07-25) ----------------------- */
.sortctl{display:flex;align-items:center;gap:6px;margin-left:auto}
.sortctl__sel{
  appearance:none;-webkit-appearance:none;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  padding:7px 26px 7px 12px;font:inherit;font-size:13.5px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.sortctl__sel:hover{border-color:var(--ink-3)}
.sortctl__dir{
  width:34px;height:34px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--ink-2);display:inline-flex;
  align-items:center;justify-content:center;
}
.sortctl__dir:hover{color:var(--accent);border-color:var(--accent)}
.map-countbar .sortctl{margin-left:auto;margin-right:8px}
.map-countbar .sortctl__sel{padding:5px 22px 5px 9px;font-size:12.5px;border-radius:8px;background-position:right 7px center}
.map-countbar .sortctl__dir{width:28px;height:28px;border-radius:8px}

/* --- кнопка POST: карточка (футер) и деталка (2026-07-25) ------------------------ */
.card__postwrap{display:flex;gap:5px;position:relative;z-index:2}
.postbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:26px;padding:0 12px;border-radius:8px;border:none;cursor:pointer;
  background:#229ED9;color:#FFF;font-weight:700;font-size:11.5px;letter-spacing:.4px;
  transition:filter .15s;
}
.postbtn:hover{filter:brightness(1.1)}
.postbtn:disabled{opacity:.6;cursor:default}
.postbtn--gear{width:26px;padding:0;background:var(--ghost);color:var(--ink-2)}
.postbtn--gear:hover{color:var(--accent)}
.postrow{display:flex;gap:8px}
.postrow__gear{flex:0 0 44px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.postrow__send{
  flex:1;background:#229ED9;border-color:#229ED9;color:#FFF;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-weight:700;letter-spacing:.5px;
}
.postrow__send:hover{filter:brightness(1.08)}
.spinner--s{width:15px;height:15px;border-width:2px;margin:0}

/* --- попапы POST: получатели / фото+текст / налаштування ------------------------- */
.pmodal{max-width:520px;width:min(520px,94vw)}
.pmodal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pmodal__body{max-height:min(72vh,640px);overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.pmodal__hint{font-size:12.5px;margin:0}
.pmodal__row{display:flex;gap:8px;justify-content:flex-end}
.pmodal__sec h3{margin:0 0 8px;font-size:14px}
.pmodal__sec + .pmodal__sec{margin-top:6px;border-top:1px solid var(--line-soft);padding-top:12px}
.rcp__list{display:flex;flex-direction:column;gap:2px}
.rcp{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  cursor:pointer;transition:background .12s;
}
.rcp:hover{background:var(--hover)}
.rcp__ava{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--ghost);flex:0 0 30px}
.rcp__ava--none{visibility:hidden}
.rcp__name{font-weight:600;font-size:13.5px}
.rcp__id{color:var(--ink-3);font-size:12px;margin-left:auto}
.rcp input{width:16px;height:16px;accent-color:var(--accent)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
/* фикс. высота ячейки, НЕ aspect-ratio: грид со скроллом определённой высоты
   + aspect-ratio = циклический расчёт строк (та же ловушка, что map-cards).
   Рамка выделения — ВНУТРЬ ячейки (offset -2px): наружная резалась краями
   скролл-контейнера */
.pgrid__cell{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;height:92px;outline:2px solid transparent;outline-offset:-2px}
.pgrid__cell img{width:100%;height:100%;object-fit:cover;display:block}
.pgrid__cell input{position:absolute;top:5px;right:5px;width:16px;height:16px;accent-color:var(--accent);z-index:1}
.pgrid__cell:has(input:checked){outline-color:var(--accent)}
.pgrid__cell:has(input:not(:checked)) img{opacity:.45}
.pgrid__tick{display:none}
.ptext{
  width:100%;box-sizing:border-box;resize:vertical;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;font:inherit;font-size:13px;line-height:1.45;
}
.pgrid__count{font-size:12.5px}
.pgrid--all{max-height:340px;overflow-y:auto;padding-right:2px}


/* ============================================================
   Палитра «orange» (классическая, до-truvo): подключается в
   налаштуваннях (localStorage 'palette'); дефолт — Clay выше.
   :not([data-theme=dark]) — светлые значения не перебивают тёмную тему
   ============================================================ */
:root[data-palette="orange"]:not([data-theme="dark"]){
  --accent:#FF9500;
  --accent-soft:#FFF0DC;
  --accent-strong:#E04E00;
  --ink:#1C1C1E;
  --muted:#8E8E93;
  --line:#E5E5EA;
  --bg:#F2F2F7;
  --card:#FFFFFF;
  --cta:#1D1D1F;
  --ok:#34C759;
  --warn:#FF9500;
  --bad:#FF3B30;
  --link:#007AFF;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow-lift:0 8px 24px rgba(0,0,0,.10);
  --ink-2:#48484A;
  --ink-3:#6C6C70;
  --cta-ink:#FFFFFF;
  --hover:#E9E9EB;
  --line-soft:#EBEBF0;
  --media-bg:#E5E5EA;
  --media-bg-2:#F2F2F5;
  --ghost:#C7C7CC;
  --pill-muted:#EBEBF0;
  --table-stripe:#F7F7F9;
  --table-hover:#F0F0F3;
  --kb-col:#EAEAEF;
  --glass:rgba(255,255,255,.72);
  --glass-hover:rgba(255,255,255,.88);
  --glass-line:rgba(60,60,67,.12);
  --chart-1:#1D1D1F; --chart-2:#FF9500; --chart-3:#8E8E93;
  --chart-4:#34C759; --chart-5:#007AFF; --chart-6:#FF3B30;
  --chart-grid:#ECECF1; --chart-axis:#D9D9DE;
}
:root[data-palette="orange"][data-theme="dark"]{
  --accent:#FF9F0A;
  --accent-soft:#3A2B12;
  --accent-strong:#E04E00;
  --chart-2:#FF9F0A;
}

/* --- поиск по ЖК «как ЛУН» (cxsearch.js, 2026-07-26) ----------------------------- */
.cxs{position:relative;width:100%}
.cxs__input{width:100%;box-sizing:border-box;padding-right:34px}
.cxs__clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:8px;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;
}
.cxs__clear:hover{background:var(--hover);color:var(--ink)}
.cxs__menu{
  position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lift);padding:6px;max-height:320px;overflow-y:auto;
}
.cxs__item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:14px;
}
.cxs__item:hover{background:var(--hover)}
.cxs__item b{color:var(--muted);font-weight:600;font-size:12.5px}
.cxs__none{padding:10px;color:var(--muted);font-size:13.5px}
.map-filters__row--cx{width:100%}

/* --- мультивыбор ЖК (cxms, 2026-07-26) ------------------------------------------- */
.cxms{position:relative;width:100%}
.cxms__btn{width:100%;justify-content:space-between}
.cxms__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxms__menu{
  position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;min-width:280px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lift);padding:8px;display:flex;flex-direction:column;gap:8px;
}
/* КРИТИЧНО: авторский display:flex перебивает UA-стиль [hidden]{display:none} —
   без этого правила меню «само открывалось» и не закрывалось (баг 2026-07-26) */
.cxms__menu[hidden]{display:none}
.cxms__list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column}
.cxms__opt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:14px}
.cxms__opt:hover{background:var(--hover)}
.cxms__opt b{color:var(--muted);font-weight:600;font-size:12.5px}
/* стильные чекбоксы (запрос 2026-07-26): нативный input скрыт, рисуем свой
   квадратик с галочкой; :checked красит в акцент текущей палитры */
.cxms__opt input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.cxms__cb{
  width:18px;height:18px;border-radius:6px;flex:none;
  border:1.5px solid var(--ghost);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;
  color:transparent;transition:background .12s,border-color .12s,color .12s;
}
.cxms__opt:hover .cxms__cb{border-color:var(--accent)}
.cxms__opt input:checked~.cxms__cb{background:var(--accent);border-color:var(--accent);color:#FFF}
.cxms__name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cxms__top{display:flex;gap:8px;align-items:center}
.cxms__top .cxms__q{flex:1;min-width:0}
.cxms__clearall{
  flex:none;font-size:13px;font-weight:600;color:var(--accent);
  padding:7px 10px;border-radius:8px;
}
.cxms__clearall:hover{background:var(--accent-soft)}

/* лента: панель фильтров — скролл-контейнер, absolute-меню ЖК ею клипалось
   (обрезанные «Очистити»/счётчики, скроллбары — баг 2026-07-26). В фидбаре
   меню раскрывается В ПОТОКЕ (как district в мобильном шите), группа ЖК —
   на всю строку панели */
.fgroup--cx{flex:1 1 100%;min-width:0}
.feedbar .cxms__menu{
  position:static;min-width:0;box-shadow:none;
  border-color:var(--line-soft);
}

/* --- вкладка «ІІ Агент» (2026-07-27) --------------------------------------------- */
.page--agent{max-width:1440px}
.agent__head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:18px}
.agent__title{font-size:24px;font-weight:800}
.agent__badge{
  display:inline-flex;min-width:18px;height:18px;padding:0 5px;margin-left:4px;
  border-radius:999px;background:var(--bad);color:#FFF;font-size:11px;
  align-items:center;justify-content:center;
}
.agent-alert{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:12px;padding:10px 14px;margin-bottom:10px;font-size:14px;
}
.agent-alert__t{color:var(--muted);font-size:12.5px}
.agent-split{
  display:flex;gap:14px;height:calc(100dvh - 230px);min-height:460px;
}
.agent-list{
  flex:0 0 320px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
}
.agent-chatrow{
  text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;
  transition:border-color .12s,background .12s;
}
.agent-chatrow:hover{border-color:var(--muted)}
.agent-chatrow--on{border-color:var(--accent);background:var(--accent-soft)}
.agent-chatrow__top{display:flex;align-items:center;gap:7px;font-size:14px}
.agent-chatrow__mid{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agent-chatrow__bot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.agent-unread{
  background:var(--accent);color:#FFF;border-radius:999px;font-style:normal;
  min-width:17px;height:17px;padding:0 4px;font-size:10.5px;
  display:inline-flex;align-items:center;justify-content:center;
}
.agent-warn{font-style:normal}
.agent-win{
  flex:1;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:14px;display:flex;flex-direction:column;overflow:hidden;
}
.agent-win__head{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line-soft);
}
.agent-win__sp{flex:1}
.agent-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.agent-msg{
  max-width:74%;padding:8px 12px;border-radius:12px;font-size:14px;
  white-space:pre-wrap;word-break:break-word;background:var(--hover);
  align-self:flex-start;
}
.agent-msg--agent,.agent-msg--realtor{align-self:flex-end;background:var(--accent-soft)}
.agent-msg--system{align-self:center;background:none;color:var(--muted);font-size:12.5px}
.agent-msg__who{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.agent-composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line-soft)}
.agent-composer__ta{flex:1;resize:none}
.agent-composer__btns{display:flex;flex-direction:column;gap:6px}
.agent-empty{color:var(--muted);text-align:center;margin:auto;padding:30px;font-size:14px}
.agent-sec{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.agent-sec h3{margin:0 0 8px;font-size:15px}
.agent-sec .muted{font-size:13px;margin-bottom:8px}
.agent-sec__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}
.agent-settings{max-width:640px}
.agent-settings .input,.agent-settings .select{width:100%;margin-bottom:8px}
.agent-row{display:flex;gap:8px}
.agent-row .select{flex:0 0 46%}
.agent-check{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.agent-check input{width:16px;height:16px;accent-color:var(--accent)}
.agent-personas{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.agent-persona{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.agent-persona--on{border-color:var(--accent)}
.agent-persona__head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.agent-persona__btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.agent-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.agent-tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:4px}
.agent-tile b{font-size:26px}
.agent-tile span{color:var(--muted);font-size:13px}
@media (max-width:900px){
  .agent-split{flex-direction:column;height:auto}
  .agent-list{flex:none;max-height:300px}
  .agent-win{min-height:420px}
}

/* ===== Бобка: панель квартир диалога + превью в сообщениях (2026-07-27) ===== */
.agent-winbody{display:flex;flex:1;min-height:0}
.agent-winbody .agent-msgs{flex:1;min-width:0}
.agent-props{width:210px;flex:none;overflow-y:auto;border-left:1px solid var(--border);
  padding:10px;display:flex;flex-direction:column;gap:8px}
.agent-props__h{margin:0 0 2px;font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.agent-prop{display:flex;gap:8px;align-items:flex-start;text-decoration:none;
  color:inherit;border:1px solid var(--border);border-radius:10px;padding:6px;
  transition:border-color .15s}
.agent-prop:hover{border-color:var(--accent)}
.agent-prop img{width:56px;height:44px;object-fit:cover;border-radius:6px;flex:none}
.agent-prop__ph{width:56px;height:44px;display:flex;align-items:center;
  justify-content:center;background:var(--bg-soft);border-radius:6px;flex:none}
.agent-prop__body{display:flex;flex-direction:column;gap:1px;font-size:12px;min-width:0}
.agent-prop__body small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-prop__off{color:var(--bad);font-style:normal;font-weight:600}
.agent-msg__listing{display:flex;gap:8px;align-items:center;margin:4px 0 6px;
  padding:4px 6px;border:1px solid var(--border);border-radius:8px;
  text-decoration:none;color:inherit;font-size:12px;width:fit-content;max-width:100%}
.agent-msg__listing img{width:48px;height:38px;object-fit:cover;border-radius:5px;flex:none}
.agent-msg__listing:hover{border-color:var(--accent)}
@media (max-width: 1100px){.agent-props{display:none}}

/* карта: поиск по ID в тулбаре */
.map-idinp{width:76px;padding:4px 8px;border:1px solid var(--border);
  border-radius:8px;background:var(--bg);color:inherit;font-size:13px}

/* CRM: «запит» клиента */
.client-req{margin:4px 0;padding:6px 10px;background:var(--accent-soft);
  border-radius:8px;font-size:13px}

/* ===== Районы «как ЛУН»: счётчик и подпись передмістя в мультиселекте ===== */
.cxms__cnt{margin-left:auto;font-size:12px;color:var(--muted);
  background:var(--bg-soft);border-radius:10px;padding:1px 7px;flex:none}
.cxms__sub{font-style:normal;font-size:11px;color:var(--muted);opacity:.8}
.dd__item .cxms__cnt{margin-left:auto}

/* глобальный бейдж «Бобки» в навигации */
.tab{position:relative}
.tab__badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;
  padding:0 4px;border-radius:9px;background:var(--bad,#e5484d);color:#fff;
  font-size:10px;font-weight:700;line-height:16px;text-align:center}

/* ===== Панель фильтров карты: секции вместо потока чипов (2026-07-29) ===== */
.map-sec{padding:7px 0;border-bottom:1px solid var(--border)}
.map-sec:first-child{padding-top:2px}
.map-sec:last-child{border-bottom:0;padding-bottom:2px}
.map-sec__h{font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px;opacity:.85}
.map-sec__stack{display:flex;flex-direction:column;gap:5px}
/* nowrap + flex:none у переключателя валют: при переносе он налезал на поле */
.map-sec__row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.map-sec__row > .curswitch{flex:none}
.map-sec .map-filters__row{margin:0;gap:5px}
.map-sec .map-filters__row + .map-filters__row{margin-top:5px}
.map-sec .map-range{margin:0}
.map-sec .cxms{width:100%}
.map-sec .cxms__btn{width:100%;justify-content:space-between;padding:6px 12px}
.map-sec .map-filters__sel{width:100%;padding:6px 10px;font-size:13px}
/* компактные контролы внутри панели: чипы и поля ниже обычных */
.map-sec .chip{padding:5px 11px;font-size:13px}
.map-sec .map-range__i{padding:5px 8px;font-size:13px}
.map-sec .curswitch{padding:1px}
.map-sec .curswitch__btn{padding:2px 7px;font-size:11.5px}
/* подпись поля внутри секции: ширина фиксирована, но контент не обрезается */
.map-sec__lbl{font-size:12px;color:var(--muted);flex:0 0 52px;white-space:nowrap}
.map-sec__row .map-range{flex:1 1 auto;min-width:0}
.map-sec .map-filters__row{flex-wrap:wrap}
.map-grid{display:grid;grid-template-columns:auto auto minmax(0,1fr);
  gap:5px 8px;align-items:center}

/* ===== Лента: компактная панель фильтров (фидбек 2026-07-29) =====
   панель разрослась после новых фильтров (поверх/будинок) и не влезала
   в экран — уплотняем отступы и контролы, ЖК не занимает всю строку */
.feedbar{padding:10px 14px;margin-bottom:12px}
.feedbar__inner{gap:9px 16px}
.feedbar .fgroup{gap:4px}
.feedbar .fgroup__label{font-size:11px;letter-spacing:.02em}
.feedbar .chip{padding:5px 11px;font-size:13px}
.feedbar .input{padding:6px 9px;font-size:13px}
.feedbar .input--num{width:78px}
.feedbar .select{padding:6px 10px;font-size:13px}
.feedbar .cxms__btn,.feedbar .dd__btn{padding:5px 11px;font-size:13px}
.feedbar .curswitch__btn{padding:2px 7px;font-size:11.5px}
.feedbar .fgroup--q{min-width:180px}
/* ЖК: панель фильтров ленты — КОЛОНКА, поэтому flex-basis уходит в ВЫСОТУ
   (240px пустоты, баг 2026-07-29). Размер только по содержимому. */
.feedbar .fgroup--cx{flex:0 0 auto;min-width:0}
.feedbar .cxms__menu{max-height:260px;overflow-y:auto}
.feedbar .chips{gap:5px}
.feedbar .chip{padding:4px 10px;font-size:12.5px}

/* меню фильтров ленты — поверх панели (fixed из dropdown.js), а не в потоке:
   .feedbar имеет overflow:auto и обрезал absolute-меню, а static-меню
   раздвигало панель и «прыгал весь блок» (фидбек 2026-07-29) */
@media (min-width: 901px){
  .feedbar .cxms__menu,.feedbar .dd__menu{
    position:fixed;z-index:60;box-shadow:var(--shadow);
    border-color:var(--line);overflow-y:auto;
  }
}

/* комиссии: разбивка агентство/риелтор/админ в модалке */
.crm-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.crm-split{background:var(--bg-soft);border-radius:10px;padding:8px 12px;
  display:flex;flex-direction:column;gap:3px;font-size:13px}
.crm-split__row{display:flex;justify-content:space-between}
.crm-split__row b{font-weight:700}
.crm-split__admin{color:var(--accent-strong,var(--accent))}