:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8a8f98);
  --link: var(--tg-theme-link-color, #2481cc);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-section-bg-color, var(--bg));
  --sep: color-mix(in srgb, var(--hint) 25%, transparent);
  --radius: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg2); color: var(--text);
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", sans-serif; }
body { padding-bottom: env(safe-area-inset-bottom); overscroll-behavior-y: contain; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
body { -webkit-text-size-adjust: 100%; }
.body, .section, .desc, .short { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.desc { text-wrap: pretty; }
.title, .h1 { text-wrap: balance; }

/* --- шапка: поиск и фильтры --- */
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 10px 12px 8px;
  border-bottom: 1px solid var(--sep); }
.search { display: flex; align-items: center; gap: 8px; background: var(--bg2); border-radius: 12px; padding: 0 12px; }
.search-icon { font-size: 15px; opacity: .7; }
.search input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 16px; }
.search input::placeholder { color: var(--hint); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-top: 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--bg2);
  white-space: nowrap; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.chip.on { background: var(--accent); color: var(--accent-text); }
.chip.reset { color: var(--link); background: transparent; }

.summary { padding: 10px 16px 2px; color: var(--hint); font-size: 13px; }
.summary b { color: var(--text); }
#feed { padding: 8px 10px; display: flex; flex-direction: column; gap: 12px; }

/* --- карточка --- */
.card { background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.gallery { position: relative; aspect-ratio: 4 / 3; background: var(--bg2); }
.photos { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.photos::-webkit-scrollbar { display: none; }
.photos img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; background: var(--bg2); }
.photos .more { flex: none; width: 100%; height: 100%; scroll-snap-align: start; display: flex; align-items: center;
  justify-content: center; color: var(--hint); font-size: 15px; }
.counter { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; padding: 3px 8px; border-radius: 10px; }
.badge { position: absolute; left: 10px; top: 10px; background: #2ea44f; color: #fff; font-size: 12px;
  font-weight: 600; padding: 4px 9px; border-radius: 10px; }
.body { padding: 12px 14px 14px; }
.price { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.price small { font-size: 13px; font-weight: 400; color: var(--hint); margin-left: 6px; }
.title { font-weight: 600; margin-top: 2px; }
.place { color: var(--hint); font-size: 13px; }
.specs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 14px; }
.delivery { margin-top: 6px; font-size: 14px; }
.delivery.ask { color: var(--hint); }
.features { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.features span { background: var(--bg2); border-radius: 10px; padding: 3px 9px; font-size: 13px; }
.short { margin-top: 10px; color: var(--hint); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.code { margin-top: 8px; font-size: 12px; color: var(--hint); }
.actions { display: flex; gap: 8px; margin-top: 12px; }
.btn { flex: 1; height: 40px; border-radius: 12px; background: var(--bg2); font-weight: 600; font-size: 14px; }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.done { background: #2ea44f; color: #fff; }

/* --- состояния --- */
.empty, .error { text-align: center; color: var(--hint); padding: 48px 24px; }
.empty .big, .error .big { font-size: 40px; }
.empty button { margin-top: 12px; color: var(--link); font-weight: 600; }
.skeleton { height: 360px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card) 25%, var(--bg2) 50%, var(--card) 75%); background-size: 200% 100%;
  animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
#sentinel { height: 1px; }

/* --- нижний лист с вариантами --- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 10; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; background: var(--bg);
  border-radius: 18px 18px 0 0; max-height: 75vh; display: flex; flex-direction: column;
  padding: 6px 0 calc(10px + env(safe-area-inset-bottom)); }
.sheet-handle { width: 36px; height: 5px; border-radius: 3px; background: var(--sep); margin: 4px auto 8px; }
.sheet h3 { margin: 0 16px 8px; font-size: 17px; }
.sheet-filter { margin: 0 16px 8px; height: 38px; border-radius: 10px; border: 0; background: var(--bg2);
  color: var(--text); padding: 0 12px; font-size: 16px; outline: 0; }
.sheet-list { overflow-y: auto; }
.opt { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  padding: 13px 16px; border-bottom: 1px solid var(--sep); }
.opt .n { color: var(--hint); font-size: 13px; }
.opt.on { color: var(--link); font-weight: 600; }
.opt.on::after { content: "✓"; margin-left: 8px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(0,0,0,.8); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 20;
  max-width: 90vw; text-align: center; }

/* --- карточка в ленте кликабельна --- */
.card { cursor: pointer; }
.btn.icon { flex: 0 0 48px; }

/* --- страница объекта --- */
.detail { position: fixed; inset: 0; z-index: 8; background: var(--bg2); overflow-y: auto;
  -webkit-overflow-scrolling: touch; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.detail-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--sep); }
.back { color: var(--link); font-size: 16px; font-weight: 600; padding: 6px 4px; }
.detail-code { color: var(--hint); font-size: 13px; }
.detail .gallery { aspect-ratio: 4 / 3; }
.section { background: var(--card); margin: 10px; border-radius: var(--radius); padding: 14px; }
.section h3 { margin: 0 0 10px; font-size: 16px; }
.head .price { font-size: 24px; }
.rows { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 15px; }
.rows .k { color: var(--hint); }
.rows .v { text-align: right; font-weight: 500; }
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.feat-grid span { background: var(--bg2); border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.desc h4 { margin: 14px 0 6px; font-size: 15px; }
.desc p { margin: 0 0 10px; }
.desc ul { margin: 0 0 10px; padding-left: 20px; }
.desc li { margin: 3px 0; }
.lang-note { color: var(--hint); font-size: 13px; margin-bottom: 8px; }
.link-btn { display: block; width: 100%; text-align: left; padding: 11px 0; color: var(--link); font-weight: 600;
  border-top: 1px solid var(--sep); }
.admin-box { border: 2px dashed color-mix(in srgb, var(--link) 50%, transparent); }
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; gap: 8px; background: var(--bg);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sep); }
.ask-box textarea { width: calc(100% - 32px); margin: 0 16px; min-height: 96px; border: 0; border-radius: 12px;
  background: var(--bg2); color: var(--text); padding: 10px 12px; font: inherit; font-size: 16px; resize: vertical; outline: 0; }
.ask-box .btn { margin: 10px 16px 0; width: calc(100% - 32px); flex: none; }
.ask-box .hint { color: var(--hint); font-size: 13px; margin: 0 16px 8px; }

/* --- экран фильтров --- */
.filters { position: fixed; inset: 0; z-index: 8; background: var(--bg2); overflow-y: auto;
  padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.filters .bar { position: fixed; }
.filters .bar .btn { height: 46px; font-size: 16px; }
.fsec { background: var(--card); margin: 10px; border-radius: var(--radius); padding: 14px; }
.fsec h3 { margin: 0 0 10px; font-size: 16px; }
.fsec .sheet-filter { margin: 0 0 10px; width: 100%; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchips .chip { height: auto; min-height: 36px; padding: 6px 12px; white-space: normal; text-align: left; }
.chip .cnt { margin-left: 6px; font-size: 12px; opacity: .65; }
.chip.zero { opacity: .4; }
.range { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.range .num { flex: 1; min-width: 0; height: 40px; border: 0; border-radius: 10px; background: var(--bg2); color: var(--text);
  padding: 0 12px; font-size: 16px; outline: 0; }
.fhint { color: var(--hint); font-size: 13px; margin-top: 8px; }

/* --- фото на весь экран --- */
.viewer { position: fixed; inset: 0; z-index: 30; background: #000; }
.viewer .photos { height: 100%; }
.vslide { flex: none; width: 100%; height: 100%; scroll-snap-align: start; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.vslide img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vslide.zoomed { overflow: auto; display: block; }
.vslide.zoomed img { width: 250%; height: auto; max-width: none; }
.vcounter { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; background: rgba(255,255,255,.15); padding: 4px 10px; border-radius: 12px; }
.vclose { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 12px; color: #fff; font-size: 22px;
  width: 40px; height: 40px; border-radius: 20px; background: rgba(255,255,255,.15); }
.vhint { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.6); font-size: 12px; }
.zoom-hint { position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
  padding: 3px 8px; border-radius: 10px; pointer-events: none; }
.detail .gallery img { cursor: zoom-in; }
.collage .zoom-hint { left: auto; right: 10px; bottom: auto; top: 10px; }

/* --- коллаж фото --- */
.collage { position: relative; display: grid; gap: 3px; background: var(--bg2); cursor: pointer; }
.collage .cell { position: relative; overflow: hidden; min-height: 0; }
.collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.collage .cell:hover img { transform: scale(1.03); }
.collage .more-over { position: absolute; inset: 0; background: rgba(0,0,0,.45); color: #fff; display: flex;
  align-items: center; justify-content: center; font-weight: 600; font-size: 15px; }
/* лента (широкий экран): 1 большое слева + 2 справа */
.card .collage.c3 { aspect-ratio: 16 / 10; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.card .collage.c3 .main { grid-row: 1 / 3; }
/* страница объекта — телефон: большое сверху + полоска из 4 */
.detail .collage { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 72px; }
.detail .collage .main { grid-column: 1 / 5; aspect-ratio: 4 / 3; }
.detail .collage.c3 .cell:not(.main), .detail .collage.c4 .cell:not(.main) { grid-row: 2; }
.detail .collage.c3 { grid-template-columns: 1fr 1fr; }
.detail .collage.c3 .main { grid-column: 1 / 3; }
.detail .collage.c4 { grid-template-columns: repeat(3, 1fr); }
.detail .collage.c4 .main { grid-column: 1 / 4; }

/* --- стрелки в просмотре фото (компьютер) --- */
.varrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; color: #fff; font-size: 40px;
  background: rgba(255,255,255,.12); border-radius: 12px; display: none; }
.varrow.left { left: 12px; } .varrow.right { right: 12px; }

/* --- широкий экран (Mac, планшет): колонки, коллажи --- */
@media (min-width: 760px) {
  .top, .summary { max-width: 1180px; margin: 0 auto; }
  .top { border-bottom: 0; }
  #feed { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 12px 16px; }
  .card { display: flex; flex-direction: column; }
  .card .body { flex: 1; display: flex; flex-direction: column; }
  .card .actions { margin-top: auto; padding-top: 12px; }
  .detail-top, #detailBody, .filters .detail-top, #filtersBody { max-width: 980px; margin-left: auto; margin-right: auto; }
  .detail #detailBody > .collage { margin: 12px; border-radius: var(--radius); overflow: hidden;
    grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 210px 210px; }
  .detail .collage .main { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
  .detail .collage .cell:not(.main) { grid-row: auto; }
  .detail .collage.c3 { grid-template-columns: 2fr 1fr; }
  .detail .collage.c3 .main, .detail .collage.c4 .main { grid-column: 1; }
  .detail .collage.c4 { grid-template-columns: 2fr 1fr 1fr; }
  .bar { max-width: 980px; margin: 0 auto; border-radius: 16px 16px 0 0; }
  .feat-grid { grid-template-columns: repeat(3, 1fr); }
  .rows { max-width: 520px; }
  .varrow { display: block; }
  .sheet { max-width: 560px; margin: 0 auto; }
}
@media (min-width: 1100px) {
  #feed { grid-template-columns: repeat(3, 1fr); }
}

/* --- подборки --- */
.selscreen { z-index: 7; }
.selrow { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 4px;
  border-bottom: 1px solid var(--sep); text-align: left; }
.selrow.on .t { font-weight: 700; color: var(--link); }
.selrow .n { color: var(--hint); font-size: 14px; }
.selbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.selbtns .btn { flex: 1 1 auto; padding: 0 12px; }
.selitem { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sep); }
.selitem .thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; background: var(--bg2);
  display: flex; align-items: center; justify-content: center; }
.selitem .info { flex: 1; min-width: 0; cursor: pointer; }
.selitem .t { font-weight: 600; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.selitem .p { color: var(--hint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selitem .ops { display: flex; gap: 4px; flex: none; }
.selitem .ops button { width: 32px; height: 32px; border-radius: 8px; background: var(--bg2); font-size: 15px; }
.selitem .ops button:disabled { opacity: .3; }
.btn.icon.done { background: #2ea44f; color: #fff; }
.selitem.over { opacity: .45; }
.report-toggle { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; color: var(--hint); font-size: 13px; cursor: pointer; }
.section .report-toggle { margin: 0; }
.report-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }