/* Сгенерировано scripts/landing_miniapp.mjs из webapp/src/styles.css — руками не править. */
/* KvadroApp Mini App. Светлая тема — из темы Telegram (SDK выставляет --tg-theme-*), тёмная — своя
   (ниже, [data-scheme="dark"]). Ритм отступов — 4/8, радиусы 12/16/24. */
.dev {
  /* Полупрозрачная подложка с размытием для шапок поверх прокрутки (как шапка ленты, панель «Позвонить») */
  --material: color-mix(in srgb, var(--bg) 72%, transparent);
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --text: var(--tg-theme-text-color, #0f0f10);
  --hint: var(--tg-theme-hint-color, #8a8f98);
  /* Поднятая поверхность: шторки и плавающие панели. В светлой — тот же белый (отделяет затемнение),
     в тёмной — светлее фона, иначе шторка сливается с лентой под затемнением */
  --sheet: var(--bg);
  --dim: rgba(0, 0, 0, 0.4); /* затемнение под шторкой */
  /* Ссылки и текстовые кнопки — цветом текста (интерфейс чёрно-бело-жёлтый, без синего Telegram) */
  --link: var(--text);
  /* Акцент — жёлтый kvadro² (как на аватаре бота), а не цвет кнопок Telegram; текст на нём — чёрный */
  --accent: #ffd23f;
  --accent-text: #0b0b0b;
  --sep: color-mix(in srgb, var(--text) 10%, transparent);
  --fill: color-mix(in srgb, var(--text) 6%, transparent);
  --good: #16a34a;
  --high: #ea7a0c;
  --heart: #ff385c;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  /* Безопасная зона: вырез экрана + кнопки Telegram в полноэкранном режиме (SDK 8.0) */
  --top-inset: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --bottom-inset: var(--tg-safe-area-inset-bottom, 0px);
  --tabbar-h: 62px;
  --r-photo: 18px;
  /* сколько места снизу занимают плавающие панель и кнопка «Карта» */
  --bottom-chrome: calc(var(--tabbar-h) + var(--bottom-inset) + 90px);
  color-scheme: light dark;
}
/* Своя тема из настроек (вместо темы Telegram): те же переменные, свои значения */
.dev[data-theme="light"] {
  --bg: #ffffff; --bg2: #f2f2f7; --text: #0f0f10; --hint: #8a8f98;
  --accent: #ffd23f; --accent-text: #0b0b0b;
  color-scheme: light;
}
.dev[data-theme="dark"] { color-scheme: dark; }
/* Тёмная тема — своя и в «Как в Telegram»: у Telegram шторка того же чёрного, что и лента, и под
   затемнением с ней сливается, а чисто белый текст на чёрном режет глаз. Здесь: фон ленты — чёрный
   (решение владельца 15.10), шторки, плавающие панели и вторичные подложки — на ступень светлее
   (--sheet, --bg2), текст — не чисто белый, затемнение гуще. */
.dev[data-scheme="dark"] {
  --bg: #000000; --bg2: #151517; --sheet: #151517; --text: #ececee; --hint: #8f8f97;
  --accent: #ffd23f; --accent-text: #0b0b0b;
  --sep: color-mix(in srgb, var(--text) 14%, transparent);
  --fill: color-mix(in srgb, var(--text) 8%, transparent);
  --dim: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

.dev * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.dev { margin: 0; background: var(--bg); color: var(--text); }
.dev {
  font: 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  font-variant-numeric: tabular-nums;
}
.dev button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.dev button:active { opacity: 0.7; }
.dev h1, .dev h2, .dev h3, .dev p { margin: 0; }
.dev [hidden] { display: none !important; }
.dev .muted { color: var(--hint); }
.dev .small { font-size: 13px; }
/* Чёрная ссылка в строке текста — с подчёркиванием, иначе не видно, что на неё можно нажать */
.dev .link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Верх: переключатель Аренда / Продажа ---------- */
.dev .topbar {
  position: sticky; top: 0; z-index: 10;
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform;
  padding: calc(8px + var(--top-inset)) 16px 10px;
  background: var(--material);
  backdrop-filter: blur(22px) saturate(190%);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
}
.dev .segmented {
  display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px;
  border-radius: 999px; background: var(--fill);
}
.dev .seg {
  height: 34px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--hint);
  transition: background 0.2s, color 0.2s;
}
.dev .seg.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.dev .screen-title { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; padding: 2px 0; }
.dev .title-tabs { display: flex; align-items: baseline; gap: 18px; padding: 2px 0; }
.dev .title-tab {
  font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--hint); opacity: 0.55;
  transition: color 0.2s, opacity 0.2s;
}
.dev .title-tab.active { color: var(--text); opacity: 1; }

/* ---------- Liquid Glass ----------
   Стекло: полупрозрачная заливка из темы + сильное размытие с насыщенностью, тонкая светлая кромка,
   блик сверху (::before) и мягкая тень. В тёмной теме кромка и блик слабее. */
.dev .glass {
  position: relative; isolation: isolate;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.75),
    inset 0 -0.5px 0.5px rgba(255, 255, 255, 0.25);
}
.dev .glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 48%);
}
.dev[data-scheme="dark"] .glass {
  background: color-mix(in srgb, var(--sheet) 60%, transparent);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.16),
    inset 0 -0.5px 0.5px rgba(255, 255, 255, 0.05);
}
.dev[data-scheme="dark"] .glass::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 48%);
}
/* ---------- Нижняя панель: плавающая стеклянная капсула ---------- */
.dev .tabbar {
  position: fixed; z-index: 30; left: 20px; right: 20px;
  bottom: calc(10px + var(--bottom-inset));
  height: var(--tabbar-h); border-radius: calc(var(--tabbar-h) / 2);
  /* minmax(0, …): длинная подпись («Уведомления», «Bildirishnomalar») не расширяет свою колонку —
     иначе «линза» под активной вкладкой съезжает; подпись может чуть выйти за край, не обрезаясь */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 5px;
  transition: clip-path 0.42s cubic-bezier(0.3, 1.1, 0.45, 1);
  will-change: clip-path;
}
/* «Линза» под активной вкладкой — переезжает с упругостью, как в iOS 26 */
.dev .tab-lens {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 4);
  border-radius: calc((var(--tabbar-h) - 10px) / 2);
  transform: translateX(calc(var(--tab, 0) * 100%));
  transition: transform 0.45s cubic-bezier(0.3, 1.35, 0.45, 1);
  background: color-mix(in srgb, var(--text) 9%, transparent);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.55), inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.06);
}
.dev[data-scheme="dark"] .tab-lens {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.18);
}
.dev .tabbtn {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; font-size: 11px; font-weight: 600; color: var(--text);
  opacity: 0.55; transition: opacity 0.2s, transform 0.15s;
}
.dev .tabbtn:active { transform: scale(0.92); opacity: 0.8; }
.dev .tabbtn.active { opacity: 1; font-weight: 700; }
.dev .tabbtn span { white-space: nowrap; letter-spacing: -0.01em; }
.dev .tabbtn span.long { font-size: 9.5px; letter-spacing: -0.02em; }

/* «Карта / Список» — стеклянная капсула над панелью, по центру */
.dev .view-toggle {
  position: fixed; z-index: 29; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--bottom-inset) + 22px);
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 22px; font-weight: 600; font-size: 15px; color: var(--text);
}
.dev .view-toggle:active { transform: translateX(-50%) scale(0.95); opacity: 1; }
.dev .view-toggle {
  transition: transform 0.42s cubic-bezier(0.3, 1.1, 0.45, 1), clip-path 0.42s cubic-bezier(0.3, 1.1, 0.45, 1);
  will-change: transform, clip-path;
}

/* ---------- Фокус на контенте: при прокрутке вниз панели — миниатюры ---------- */
.dev .mini-top {
  position: fixed; z-index: 31; left: 50%; top: calc(var(--top-inset) + 8px); will-change: transform, opacity;
  visibility: hidden;
  max-width: calc(100% - 96px); height: 36px; padding: 0 16px; border-radius: 18px;
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none; transform: translate(-50%, -16px) scale(0.92);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s linear 0.35s;
}
.dev.chrome-mini .mini-top {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0) scale(1);
  transition: opacity 0.25s, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0s;
}
/* В полноэкранном Telegram капсула — на одной линии с его кнопками «Close» и «⋯»: по центру
   полосы, которую Telegram отводит под них (content safe area), и не шире промежутка между ними */
.dev.fullscreen .mini-top {
  top: max(
    calc(var(--tg-safe-area-inset-top, 0px) + 4px),
    calc(var(--tg-safe-area-inset-top, 0px) + (var(--tg-content-safe-area-inset-top, 0px) - 36px) / 2)
  );
  max-width: calc(100% - 176px); padding: 0 14px;
}
.dev.chrome-mini .topbar { transform: translateY(calc(-100% - 12px)); }
/* Морфинг, как в iOS 26: панели сами превращаются в круги. Форму меняет clip-path (обрезка, без
   пересчёта раскладки), движение и размер — transform; лента при этом не перерисовывается.
   В покое обрезка с запасом 30px — тень и кромка стекла видны целиком. */
.dev .tabbar, .dev .view-toggle { clip-path: inset(-30px round 60px); }
/* Меню: капсула сжимается к левому краю до круга 62px; иконка текущей вкладки съезжает в круг */
.dev.chrome-mini .tabbar { clip-path: inset(0 calc(100% - var(--tabbar-h)) 0 0 round calc(var(--tabbar-h) / 2)); }
.dev .tabbtn { transition: opacity 0.2s, transform 0.42s cubic-bezier(0.3, 1.2, 0.45, 1); }
.dev .tabbtn svg, .dev .tabbtn span { transition: transform 0.42s cubic-bezier(0.3, 1.2, 0.45, 1), opacity 0.2s; }
.dev.chrome-mini .tabbtn { transform: translateX(calc(26px - (var(--tab, 0) + 0.5) * 100%)); }
.dev.chrome-mini .tabbtn span { opacity: 0; }
.dev.chrome-mini .tabbtn svg { transform: translateY(7px); }
.dev .tab-lens { transition: transform 0.45s cubic-bezier(0.3, 1.35, 0.45, 1), opacity 0.2s; }
.dev.chrome-mini .tab-lens { opacity: 0; }
/* «Карта»: капсула обрезается до круга вокруг иконки и уезжает вниз вправо, увеличиваясь до 62px.
   Иконка — в 27px от левого края капсулы; круг 62px справа: центр в 51px от правого края экрана */
.dev .view-toggle { transform-origin: 27px 50%; }
.dev .view-toggle span { transition: opacity 0.18s; }
.dev.chrome-mini .view-toggle {
  clip-path: inset(0 calc(100% - 49px) 0 5px round 22px);
  transform: translate(calc(195px - 78px), calc(var(--tabbar-h) + 22px + 22px - 41px)) scale(1.41);
}
.dev.chrome-mini .view-toggle span { opacity: 0; }
/* Кромка и тень свёрнутых кругов — отдельным кольцом поверх (обрезка срезает их у самой панели).
   Без него белое стекло на белом фоне не видно. Кольцо меняет только opacity. */
.dev .mini-ring {
  position: fixed; z-index: 32; bottom: calc(10px + var(--bottom-inset));
  width: var(--tabbar-h); height: var(--tabbar-h); border-radius: 50%; pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 10px 26px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.8);
  transition: opacity 0.15s;
}
.dev .mini-ring.left { left: 20px; }
.dev .mini-ring.right { right: 20px; }
.dev[data-scheme="dark"] .mini-ring {
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.18), 0 10px 26px rgba(0, 0, 0, 0.55),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.16);
}
.dev.chrome-mini .mini-ring { opacity: 1; transition-delay: 0.2s; }
.dev .map-mode .mini-ring { display: none; }
.dev.chrome-mini .view-toggle:active { transform: translate(calc(195px - 78px), calc(var(--tabbar-h) + 3px)) scale(1.3); }

/* ---------- Лента ---------- */
.dev .feed {
  display: flex; flex-direction: column; gap: 28px;
  padding: 6px 16px var(--bottom-chrome);
}
.dev .lc { cursor: pointer; }
.dev .feed > .lc { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.dev .lc-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden;
  background: var(--fill); isolation: isolate;
}
.dev .lc-info { padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.dev .line { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dev .line svg { flex: none; }
.dev .line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .lc-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 3px; font-size: 15px; color: var(--hint); }
/* Цена — главный элемент карточки: крупно, плотно, цветом текста */
.dev .lc-price b { font-size: 28px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--text); }
.dev .lc-price .delta { margin-left: 8px; }

.dev .seen {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #111; background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
}
.dev .lc.compact .seen { display: none; }
.dev .feed-tools { display: flex; align-items: center; justify-content: flex-end; padding: 0 2px; }
.dev .feed-tools .text-btn { display: inline-flex; align-items: center; gap: 5px; }
.dev .lc-facts { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 500; margin-top: 4px; }
.dev .lc-facts > span:first-child { flex: 1; min-width: 0; }
.dev .lc-facts .lc-ago { flex: none; font-weight: 400; }
.dev .lc-where { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Цена относительно района: контурная капсула, без заливки */
.dev .delta {
  flex: none; display: inline-block; align-self: center; padding: 3px 9px; border-radius: 999px;
  border: 1px solid currentColor; font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
.dev .delta.good { color: var(--text); }
.dev .delta.same { color: var(--hint); }
.dev .delta.high { color: var(--high); }

/* Метки и цена относительно рынка */
.dev .tag {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.72); color: #111; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
}
.dev .tag.warn.bottom { top: auto; bottom: 12px; background: rgba(255, 244, 230, 0.96); color: #9a4a00; }
.dev .deal {
  display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 13px; font-weight: 600;
  align-self: center;
}
.dev .deal.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.dev .deal.same { background: var(--fill); color: var(--hint); }
.dev .deal.high { background: color-mix(in srgb, var(--high) 14%, transparent); color: var(--high); }

/* ---------- Фото ---------- */
.dev .photo { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.25s; }
.dev .photo.loaded { opacity: 1; }
.dev .photo.placeholder {
  display: grid; place-items: center; opacity: 1; color: var(--hint); background: var(--fill);
}
.dev .strip {
  display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.dev .strip::-webkit-scrollbar { display: none; }
.dev .slide { flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.dev .dots {
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center; gap: 5px; pointer-events: none;
}
.dev .dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); transition: transform 0.2s, background 0.2s;
}
.dev .dots i.on { background: #fff; transform: scale(1.2); }
/* Кадр из видео: целиком поверх размытой копии себя (мелкий вертикальный кадр не растягиваем) и ▶ */
.dev .slide.vframe { position: relative; overflow: hidden; cursor: pointer; background: #000; }
.dev .slide.vframe .vbg {
  position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px);
  object-fit: cover; filter: blur(22px) brightness(0.75); transform: scale(1.05);
}
.dev .slide.vframe .photo { position: relative; object-fit: contain; }
.dev .play {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.dev .play-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  color: #111; background: rgba(255, 255, 255, 0.78); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
}
.dev .play-btn svg { margin-left: 3px; }
.dev .play.big .play-btn { width: 64px; height: 64px; }
.dev .play-label {
  padding: 4px 11px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); color: #fff;
  font-size: 13px; font-weight: 600;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}
.dev .counter {
  position: absolute; right: 12px; bottom: 32px; z-index: 2; padding: 3px 9px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.32); color: #fff; font-size: 12px; font-weight: 600;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
}

/* ---------- Избранное ---------- */
.dev .fav { display: grid; place-items: center; transition: transform 0.15s; }
.dev .fav:active { transform: scale(0.88); opacity: 1; }
.dev .fav.overlay {
  position: absolute; right: 8px; top: 8px; z-index: 2; width: 40px; height: 40px; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}
.dev .fav.overlay svg { fill: rgba(0, 0, 0, 0.25); }
.dev .fav.plain { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--fill); }
.dev .fav.on { color: var(--heart); }
.dev .fav.on svg { fill: var(--heart); }

/* ---------- Карточка объявления ---------- */
/* Объявление — слой поверх ленты (.listing-layer), внутри — своя прокрутка (.listing), как у подстраницы: лента под ним остаётся на месте,
   и при свайпе «назад» (swipeBack.ts) её видно под пальцем. overscroll — чтобы на iPhone прокрутка
   у края не уходила в ленту под слоем. Выше панелей ленты (30–32), ниже шторок (50) и просмотра фото (100). */
.dev .listing-layer { position: fixed; inset: 0; z-index: 45; background: var(--bg); }
.dev .listing {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(96px + var(--bottom-inset));
}
.dev .listing-layer.swiping, .dev .subpage.swiping { box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18); }
.dev.listing-open { overflow: hidden; }
.dev .hero { position: relative; aspect-ratio: 1 / 1; max-height: 523.28px; width: 100%; background: var(--fill); }
/* В полном экране фото под кнопками Telegram — затемняем верх, чтобы они читались */
.dev.fullscreen .hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: calc(var(--top-inset) + 32px); z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, 0.45), transparent); pointer-events: none;
}
.dev .sheet {
  position: relative; z-index: 3; margin-top: -24px; padding: 24px 20px 12px;
  border-radius: var(--r-l) var(--r-l) 0 0; background: var(--bg);
  display: flex; flex-direction: column; gap: 22px;
}
.dev .banner {
  padding: 10px 14px; border-radius: var(--r-s); font-size: 14px; font-weight: 500;
  background: color-mix(in srgb, var(--high) 12%, transparent); color: var(--high);
}
.dev .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dev .title-row h1 { font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2px; }
.dev .facts {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 14px 0; border-top: 0.5px solid var(--sep); border-bottom: 0.5px solid var(--sep);
}
.dev .fact { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dev .fact + .fact { border-left: 0.5px solid var(--sep); }
.dev .fact b { font-size: 17px; font-weight: 700; }
.dev .sheet section { display: flex; flex-direction: column; gap: 10px; }
.dev .sheet h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.dev .row { display: flex; gap: 12px; align-items: flex-start; }
.dev .row-icon { flex: none; display: grid; place-items: center; width: 24px; color: var(--text); opacity: 0.8; }
.dev .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dev .chip {
  padding: 7px 12px; border-radius: 999px; background: var(--fill); color: var(--link);
  font-size: 14px; font-weight: 500;
}
.dev .disclosure {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 0; border-top: 0.5px solid var(--sep); font-weight: 600;
}
.dev .disclosure svg { transition: transform 0.2s; }
.dev .disclosure .rot { transform: rotate(180deg); }
.dev .original {
  margin: 0; white-space: pre-wrap; font: inherit; font-size: 14px; color: var(--hint);
  background: var(--fill); padding: 12px; border-radius: var(--r-s);
}

/* Цена относительно района (шкала, как «Typical price») */
.dev .market { padding: 16px; border-radius: var(--r-m); background: var(--fill); gap: 12px !important; }
.dev .market-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dev .market-head h2 { font-size: 16px !important; }
.dev .scale { position: relative; height: 44px; margin: 0 6px; }
.dev .track {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--good), color-mix(in srgb, var(--hint) 50%, transparent) 50%, var(--high));
  opacity: 0.75;
}
.dev .median-tick { position: absolute; left: 50%; bottom: 0; width: 2px; height: 18px; margin-left: -1px; background: var(--text); opacity: 0.5; }
.dev .marker {
  --c: var(--hint);
  position: absolute; bottom: 2px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.dev .marker.good { --c: var(--good); }
.dev .marker.high { --c: var(--high); }
.dev .marker::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--c);
}
.dev .marker span {
  margin-bottom: 4px; padding: 2px 8px; border-radius: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 700; background: var(--c); color: #fff;
}
.dev .scale-labels { display: flex; justify-content: space-between; }
/* Первое открытие: маркер едет от медианы к цене, оценка проявляется следом (MarketCard) */
.dev .scale .marker { transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.dev .market-verdict { opacity: 0; transform: translateY(2px); transition: opacity 0.3s 0.45s, transform 0.3s 0.45s; }
.dev .market-verdict.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dev .scale .marker, .dev .market-verdict { transition: none; }
}

/* Закреплённая панель действия */
.dev .cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + var(--bottom-inset));
  background: var(--material); border-top: 0.5px solid var(--sep);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
}
.dev .cta-price { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dev .cta-main {
  font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dev .cta-period { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--hint); margin-left: 2px; }
.dev .cta-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; overflow: hidden; }
.dev .cta-bar .primary { padding: 0 18px; }
.dev .cta-wait { width: 148px; } /* место кнопки, пока не знаем: позвонить, написать или открыть пост */
.dev .cta-sub .delta { font-size: 11px; padding: 2px 8px; }
.dev .icon-btn {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--fill); color: var(--text);
}
.dev .primary {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px;
  border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 600; font-size: 16px;
}

/* ---------- Состояния ---------- */
.dev .empty {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 64px 24px; text-align: center; color: var(--hint);
}
.dev .empty b { color: var(--text); font-size: 17px; }
/* Маскот kvadro² в пустом состоянии (жёлтая подложка — читается и в тёмной теме) */
.dev .empty .mascot { width: 120px; height: 120px; margin-bottom: 6px; }
.dev .sentinel { min-height: 48px; display: grid; place-items: center; }
.dev .retry { margin: 0 auto; padding: 10px 16px; border-radius: 999px; background: var(--fill); color: var(--link); font-weight: 600; }
.dev .spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--sep); border-top-color: var(--accent); animation: ma-spin 0.8s linear infinite;
}
@keyframes ma-spin { to { transform: rotate(360deg); } }
.dev .skeleton .bar, .dev .sheet .bar { height: 14px; border-radius: 7px; margin-top: 8px; }
.dev .shimmer {
  background: linear-gradient(90deg, var(--fill) 25%, color-mix(in srgb, var(--text) 12%, transparent) 50%, var(--fill) 75%);
  background-size: 200% 100%; animation: ma-shimmer 1.3s ease-in-out infinite;
}
@keyframes ma-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .dev .shimmer, .dev .spinner { animation: none; }
  .dev * { transition: none !important; }
}

/* ---------- Фильтры: строка над лентой ---------- */
.dev .filterbar { display: flex; gap: 8px; margin-top: 10px; }
.dev .filter-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--sep); background: var(--bg); font-size: 14px; font-weight: 600;
}
.dev .filterbar .filter-btn, .dev .filterbar .icon-round { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.dev .filterbar .icon-round { width: 46px; height: 46px; border: 1px solid var(--sep); color: var(--text); }
.dev .filter-summary { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .count-badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--text); color: var(--bg); font-size: 12px; font-weight: 700; line-height: 20px;
}
.dev .icon-round {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fill);
}
.dev .icon-round.accent { background: var(--accent); color: var(--accent-text); }

/* ---------- Шторка фильтров ---------- */
.dev.locked { overflow: hidden; }
.dev .sheet-backdrop {
  position: fixed; inset: 0; z-index: 50; background: var(--dim);
  display: flex; align-items: flex-end; animation: ma-fade 0.2s ease-out;
  /* Касание по затемнению не листает ленту под ним (iPhone не слушается одного overflow у body) */
  touch-action: none;
}
.dev.sheet-open { overflow: hidden; }
.dev .fsheet {
  position: relative; /* шапка и низ — поверх прокрутки (FilterSheet меряет их высоту) */
  overscroll-behavior: contain; /* шапка и низ шторки — тоже не «протекают» в ленту */
  width: 100%; height: calc(100% - var(--top-inset) - 24px); display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-l) var(--r-l) 0 0; overflow: hidden;
  animation: ma-rise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* Внутри шторок «фон» — поднятая поверхность: и сама шторка, и чипы, и стекло шапки */
.dev .fsheet, .dev .csheet { --bg: var(--sheet); --material: color-mix(in srgb, var(--sheet) 72%, transparent); }
/* Выбранный сегмент в тёмной — светлее дорожки (цвет фона на ней почти не виден) */
.dev[data-scheme="dark"] .seg.active { background: color-mix(in srgb, var(--text) 18%, var(--bg)); box-shadow: none; }
@keyframes ma-fade { from { opacity: 0; } }
@keyframes ma-rise { from { transform: translateY(100%); } }
/* Колонки 1fr | auto | 1fr: «Сбросить» шире крестика, а заголовок всё равно ровно по центру;
   длинный заголовок на узком экране переносится, кнопки не сжимаются */
.dev .fsheet-head {
  display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 0.5px solid transparent;
}
/* Шапка и низ фильтров — поверх списка, с размытием; линия под шапкой — когда список прокручен */
.dev .fsheet-head, .dev .fsheet-foot {
  position: absolute; left: 0; right: 0; z-index: 2; background: var(--material);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
}
.dev .fsheet-head { top: 0; transition: border-color 0.2s; }
.dev .fsheet.scrolled .fsheet-head { border-bottom-color: var(--sep); }
.dev .fsheet-head h2 { text-align: center; font-size: 17px; font-weight: 700; }
.dev .fsheet-head .icon-round { justify-self: start; }
.dev .fsheet-head .text-btn { justify-self: end; }
/* Ручка: шапку шторки можно тянуть вниз — закрыть (sheetDrag.ts) */
.dev .fsheet-head { padding-top: 18px; touch-action: none; }
.dev .sheet-grab {
  position: absolute; top: 6px; left: 50%; width: 38px; height: 5px; margin-left: -19px;
  border-radius: 3px; background: var(--sep);
}
.dev .text-btn { color: var(--link); font-weight: 600; font-size: 15px; }
.dev .fsheet-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--fsheet-head, 70px) + 16px) 16px calc(var(--fsheet-foot, 72px) + 24px);
  scroll-padding: var(--fsheet-head, 70px) 0 var(--fsheet-foot, 72px);
  display: flex; flex-direction: column; gap: 26px;
}
.dev .fsheet-body section { display: flex; flex-direction: column; gap: 10px; }
.dev .fsheet-body h3 { font-size: 17px; font-weight: 700; }
.dev .fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.dev .fchips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.dev .fchips.scroll::-webkit-scrollbar { display: none; }
.dev .fchip {
  flex: none; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--sep); background: var(--bg); transition: background 0.15s, border-color 0.15s;
}
.dev .fchip.on { border-color: var(--text); background: var(--text); color: var(--bg); }
.dev .rooms { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); border: 1px solid var(--sep); border-radius: 999px; overflow: hidden; }
.dev .room { height: 44px; font-weight: 600; font-size: 15px; transition: background 0.15s; }
.dev .room + .room { border-left: 1px solid var(--sep); }
.dev .room.on { background: var(--text); color: var(--bg); }
.dev .price-inputs { display: flex; align-items: center; gap: 10px; }
.dev .price-inputs label {
  flex: 1; display: flex; flex-direction: column; padding: 8px 12px; border-radius: var(--r-s);
  border: 1px solid var(--sep);
}
/* Жёлтая рамка на белом почти не видна — фокус контрастным цветом текста */
.dev .price-inputs label:focus-within { border-color: var(--text); }
.dev .price-inputs input {
  border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; font-weight: 600;
  padding: 0; width: 100%;
}
.dev .segmented.three { grid-template-columns: repeat(3, 1fr); }
.dev .segmented.three .seg { font-size: 13px; }
.dev .fsheet-foot {
  bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px calc(12px + var(--bottom-inset));
  border-top: 0.5px solid var(--sep);
}
.dev .foot-flow { flex-basis: 100%; text-align: center; margin-bottom: -2px; }
.dev .secondary-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  padding: 0 16px; border-radius: 999px; background: var(--fill); font-weight: 600; font-size: 15px;
}
.dev .secondary-btn:disabled { opacity: 0.5; }
.dev .primary.grow { flex: 1; justify-content: center; }

/* ---------- Подписки ---------- */
.dev .subs { display: flex; flex-direction: column; padding: 4px 16px var(--bottom-chrome); }
.dev .sub {
  padding: 18px 0; border-bottom: 0.5px solid var(--sep);
  display: flex; flex-direction: column; gap: 8px; transition: opacity 0.2s;
}
.dev .sub.off h3, .dev .sub.off .sub-desc { opacity: 0.55; }
.dev .sub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dev .sub-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.dev .sub-desc { font-size: 15px; }
.dev .sub-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dev .sub-tags:empty { display: none; }
.dev .sub-actions { display: flex; gap: 8px; margin-top: 4px; }
.dev .sub-actions .secondary-btn { flex: 1; height: 42px; background: transparent; border: 1px solid var(--sep); }
.dev .sub-actions .icon-btn { width: 42px; height: 42px; }
.dev .segmented.mode { margin-top: 2px; }
.dev .segmented.mode .seg { height: 30px; font-size: 14px; }
/* Настройки как в iOS / Telegram: группы-карточки, строка «иконка · название · значение ›»,
   тап — подстраница со списком вариантов */
.dev .settings { display: flex; flex-direction: column; gap: 22px; padding: 6px 16px var(--bottom-chrome); }
.dev .set-group h3 { margin: 0 4px 8px; font-size: 13px; font-weight: 600; color: var(--hint); }
.dev .set-card { background: var(--fill); border-radius: 16px; overflow: hidden; }
.dev .set-row {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 0 14px; text-align: left;
}
.dev .set-row + .set-row::before {
  content: ""; position: absolute; top: 0; right: 0; left: 56px; border-top: 0.5px solid var(--sep);
}
.dev .set-row.choice + .set-row.choice::before { left: 16px; }
.dev .set-row:active { opacity: 1; background: color-mix(in srgb, var(--text) 6%, transparent); }
.dev .set-icon {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--bg); color: var(--text);
}
.dev .set-label { flex: 1; min-width: 0; font-size: 16px; }
.dev .set-value { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--hint); }
.dev .set-chevron { flex: none; margin-right: -4px; color: var(--hint); }
.dev .set-check { flex: none; color: var(--text); }
.dev .set-row.static { align-items: flex-start; padding: 12px 14px; }
.dev .set-text { font-size: 14px; line-height: 1.4; color: var(--hint); }
.dev .set-footer { margin: 8px 4px 0; line-height: 1.4; }
.dev .subpage {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; background: var(--bg);
  padding: 0 16px calc(24px + var(--bottom-inset));
  animation: ma-subpage-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* Заголовок подстраницы прилипает сверху с размытием, линия — когда прокручено */
.dev .subpage-head {
  position: sticky; top: 0; z-index: 2; margin: 0 -16px 14px; padding: calc(8px + var(--top-inset)) 16px 8px;
  background: var(--material); border-bottom: 0.5px solid transparent; transition: border-color 0.2s;
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
}
.dev .subpage.scrolled .subpage-head { border-bottom-color: var(--sep); }
@keyframes ma-subpage-in { from { transform: translateX(24%); opacity: 0; } }
.dev .switch {
  flex: none; position: relative; width: 51px; height: 31px; border-radius: 16px;
  background: color-mix(in srgb, var(--text) 16%, transparent); transition: background 0.2s;
}
.dev .switch i {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s;
}
.dev .switch.on { background: var(--text); }
.dev .switch.on i { background: var(--bg); }
.dev .switch.on i { transform: translateX(20px); }
.dev .empty.tall { padding-top: 96px; gap: 10px; }
.dev .empty.tall span { max-width: 300px; }
.dev .empty .primary, .dev .empty .secondary-btn { margin-top: 10px; }
.dev .empty-icon {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--fill); color: var(--text); margin-bottom: 6px;
}

/* ---------- Сообщение ---------- */
.dev .toast {
  position: fixed; left: 16px; right: 16px; z-index: 60;
  bottom: calc(var(--tabbar-h) + var(--bottom-inset) + 78px);
  padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--text) 92%, transparent);
  color: var(--bg); font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: ma-rise-in 0.25s ease-out;
}
@keyframes ma-rise-in { from { transform: translateY(12px); opacity: 0; } }

/* ---------- Карта ---------- */
.dev .topbar.over-map { position: fixed; left: 0; right: 0; }
/* Над картой — не шапка, а один ряд плавающих стеклянных кнопок: всё остальное место — карте */
.dev .topbar.over-map {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
.dev .map-bar { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.dev .map-bar .segmented.compact { flex: none; width: 210px; padding: 4px; gap: 4px; }
.dev .map-bar .seg { height: 36px; font-size: 14px; color: var(--text); opacity: 0.6; }
.dev .map-bar .seg.active { background: var(--text); color: var(--bg); opacity: 1; box-shadow: none; }
/* .icon-round задаёт свою заливку позже .glass — здесь возвращаем стеклянную */
.dev .map-bar .icon-round { width: 44px; height: 44px; color: var(--text); position: relative; background: color-mix(in srgb, var(--bg) 62%, transparent); }
.dev .map-bar .segmented + .icon-round { margin-left: auto; }
.dev .dot-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 700; line-height: 18px;
}
.dev .map-mode .tabbar { display: none; }
.dev .map-mode .view-toggle { bottom: calc(var(--bottom-inset) + 20px); }
.dev .map-mode .map-card { bottom: calc(var(--bottom-inset) + 12px); }
.dev .map-mode .leaflet-control-attribution { margin-bottom: calc(var(--bottom-inset) + 4px) !important; }
.dev .mapview { position: fixed; inset: 0; z-index: 1; }
/* isolation: у панелей Leaflet z-index 400–700 — без своего контекста они перекрыли бы карточку и подсказку */
.dev .map { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: var(--bg2); }
.dev .leaflet-container { font: inherit; }
.dev .tiles { filter: saturate(0.3) brightness(1.05) contrast(0.92); }
.dev .tiles.dark { filter: invert(1) hue-rotate(180deg) saturate(0.4) brightness(0.9) contrast(0.9); }
.dev .leaflet-control-attribution {
  font-size: 9px; background: color-mix(in srgb, var(--bg) 70%, transparent) !important; color: var(--hint);
  margin-bottom: calc(var(--tabbar-h) + var(--bottom-inset) + 14px) !important;
}
.dev .leaflet-control-attribution a { color: var(--hint); }
.dev .pin-wrap { background: none; border: 0; }
/* Ценник: белая капсула 26 px по центру точки, тонкий контур тенью (как в телефоне на лендинге —
   выбор владельца 17.10 после пробы А/Б); контур — ниже рынка (как плашка «−21% к рынку»), выбранный —
   тёмный */
.dev .pin {
  transform: translate(-50%, -50%); display: inline-flex; align-items: center; height: 26px; white-space: nowrap;
  padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1;
  background: var(--bg); color: var(--text);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.14);
  border: 1.5px solid transparent; transition: transform 0.15s;
}
.dev[data-scheme="dark"] .pin { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.4); }
.dev .pin.good { border-color: var(--text); }
.dev .pin.high { color: var(--high); }
.dev .pin.nego { color: var(--hint); font-weight: 600; }
.dev .pin.active { background: var(--text); color: var(--bg); transform: translate(-50%, -50%) scale(1.08); z-index: 1000; }
/* Кластер — светлый, в языке ценников: белый круг, тёмная цифра, тонкий контур тенью (у Airbnb, Vrbo,
   Opendoor на карте нет тёмных пятен — всё белыми капсулами; решение владельца 17.10: чёрные круги
   «недружелюбные») */
.dev .cluster {
  display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 13px; letter-spacing: -0.01em;
  color: var(--text); background: var(--bg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.16);
}
.dev[data-scheme="dark"] .cluster { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.45); }
/* Несколько объявлений в одной точке — ценник самого дешёвого и счётчик серым кружком (MapCard.tsx) */
.dev .pin.stack { gap: 6px; padding-right: 4px; }
.dev .pin-n {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 11px; font-weight: 700; background: var(--fill); color: var(--text);
}
/* «Паук»: точка дома и ценники вокруг без наложений (spiderLayout в MapCard.tsx) */
.dev .spider-dot {
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--text);
  box-shadow: 0 0 0 3px var(--bg), 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dev .spider-leg { position: absolute; }
.dev .pin.active .pin-n { background: color-mix(in srgb, var(--bg) 22%, transparent); color: var(--bg); }
.dev .map-note {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  top: calc(var(--top-inset) + 66px); padding: 6px 12px; border-radius: 14px;
  font-size: 12px; color: var(--text); text-align: center;
}
.dev .map-card {
  position: fixed; z-index: 31; left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + var(--bottom-inset) + 20px);
  border-radius: 22px; padding: 10px; animation: ma-rise-in 0.25s ease-out;
}
/* Объявления в одной точке — отдельные плитки, листаются вбок, следующая выглядывает справа (как
   карточки на карте у Airbnb); «2 из 6» и крестик — над ними (MapCard.tsx) */
.dev .map-card.stack { left: 0; right: 0; padding: 0; border-radius: 0; background: none; }
.dev .map-card.stack .map-close { top: -44px; right: 16px; }
.dev .map-stack-count {
  position: absolute; top: -38px; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--bg) 85%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.dev .map-stack-track {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 0 12px; scroll-padding: 0 12px;
}
.dev .map-stack-track::-webkit-scrollbar { display: none; }
.dev .map-stack-slot {
  flex: 0 0 calc(100% - 48px); scroll-snap-align: start; scroll-snap-stop: always; min-height: 112px;
  border-radius: 22px; padding: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
}
/* Стекло с содержимым — плотнее: карта не должна просвечивать сквозь текст и фото */
.dev .map-card.glass, .dev .map-note.glass { background: color-mix(in srgb, var(--bg) 85%, transparent); }
/* «Где я» — справа внизу, на линии кнопки «Список» */
.dev .map-locate {
  position: fixed; z-index: 6; right: 16px; width: 48px; height: 48px; color: var(--text);
  bottom: calc(var(--tabbar-h) + var(--bottom-inset) + 20px);
  background: color-mix(in srgb, var(--bg) 62%, transparent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.dev .map-mode .map-locate { bottom: calc(var(--bottom-inset) + 18px); }
.dev .spinner.small { width: 18px; height: 18px; border-width: 2px; }
/* «Определить по геопозиции» — первая строка списка в шторке «Город» */
.dev .city-geo .city-name b { font-size: 17px; }
.dev .city-geo:disabled { opacity: 0.7; }
.dev .city-geo-icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fill); color: var(--text);
}
.dev .map-close { position: absolute; top: -14px; right: -6px; z-index: 3; width: 32px; height: 32px; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.dev .lc.compact { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
.dev .lc.compact .lc-media { aspect-ratio: 1 / 1; border-radius: var(--r-s); }
.dev .lc.compact .lc-info { padding-top: 0; min-width: 0; }
.dev .lc.compact .lc-price { white-space: nowrap; }
.dev .lc.compact .lc-price b { font-size: 22px; }
.dev .lc.compact .lc-where { font-size: 13px; }
.dev .lc.compact .lc-ago { display: none; }
.dev .lc.compact .lc-facts { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dev .lc.compact .fav.overlay { width: 32px; height: 32px; top: 4px; right: 4px; }
.dev .lc.compact .fav.overlay svg { width: 20px; height: 20px; }
/* пока открыта карточка объявления, кнопка «Список» не нужна — она бы перекрывала карточку */
.dev .mapview:has(.map-card) ~ .view-toggle { opacity: 0; pointer-events: none; }

/* ---------- Факты, статистика, история цены ---------- */
.dev .facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.dev .fact-cell { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.dev .fact-cell.wide { grid-column: 1 / -1; }
.dev .fact-cell svg { flex: none; margin-top: 2px; opacity: 0.75; }
.dev .fact-cell div { display: flex; flex-direction: column; min-width: 0; }
.dev .fact-cell b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.dev .stats-cells {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 12px 0;
  border-top: 0.5px solid var(--sep); border-bottom: 0.5px solid var(--sep);
}
.dev .stats-cells div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 0 4px; }
.dev .stats-cells div + div { border-left: 0.5px solid var(--sep); }
.dev .stats-cells b { font-size: 16px; font-weight: 700; }
.dev .stats-cells .small { font-size: 12px; line-height: 1.2; }
.dev .history { display: flex; flex-direction: column; }
.dev .hrow {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 0.5px solid var(--sep); font-size: 14px;
}
.dev .hrow:last-child { border-bottom: 0; }
.dev .hdate { font-size: 13px; display: flex; flex-direction: column; line-height: 1.25; }
.dev .hdate small { font-size: 11px; opacity: 0.8; }
.dev .hevent { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.dev .hdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--hint); opacity: 0.6; transform: translateY(-1px); }
.dev .hrow.price_down .hdot { background: var(--good); opacity: 1; }
.dev .hrow.price_up .hdot { background: var(--high); opacity: 1; }
.dev .hrow.published .hdot {
  background: var(--accent); opacity: 1; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent);
}
.dev .hprice { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.dev .hchange { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; }
.dev .hchange.good { color: var(--good); }
.dev .hchange.high { color: var(--high); }

.dev .title-actions { display: flex; gap: 8px; flex: none; }
.dev .title-actions .icon-round { width: 44px; height: 44px; }
.dev .foot-count { flex: 1; align-self: center; }
.dev .sub-actions .secondary-btn { padding: 0 12px; font-size: 14px; }

/* ---------- Первый вход: выбор языка ---------- */
.dev .lang-pick {
  min-height: 844px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: calc(24px + var(--top-inset)) 24px calc(24px + var(--bottom-inset)); text-align: center;
}
.dev .lang-pick h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.dev .lang-list { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin-top: 20px; }
.dev .lang-btn {
  height: 54px; border-radius: 999px; background: var(--fill); font-size: 17px; font-weight: 600;
  transition: transform 0.1s, opacity 0.2s;
}
.dev .lang-btn:first-child { background: var(--accent); color: var(--accent-text); }
.dev .lang-btn:active { transform: scale(0.98); }
.dev .lang-btn:disabled { opacity: 0.5; }

.dev .translate-btn { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; }

/* ---------- Сортировка: кнопка в шапке и стеклянное меню под ней ---------- */
.dev .filterbar .icon-round { position: relative; }
.dev .filterbar .icon-round.followed { color: var(--text); }
.dev .dot-badge.dot { min-width: 0; width: 9px; height: 9px; padding: 0; top: 4px; right: 4px; border-radius: 50%; }
/* Сортировка — шторка снизу (SortMenu.tsx) в виде «Города»; название порядка — чуть мельче города */
.dev .city-name b.sort-name { font-size: 17px; }

/* Шторка фильтров: подзаголовки внутри «Подробнее» */
.dev .fsheet-body h4 { font-size: 15px; font-weight: 600; margin: 8px 0 -2px; }

/* ---------- Фото на весь экран: листание, щипок, свайп вниз — закрыть ---------- */
.dev .slide.zoomable { cursor: zoom-in; }
.dev .viewer {
  position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / calc(1 - var(--drag, 0)));
  animation: ma-viewer-in 0.2s ease-out;
}
@keyframes ma-viewer-in { from { opacity: 0; } }
.dev .viewer-strip {
  display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior: contain;
}
.dev .viewer-strip::-webkit-scrollbar { display: none; }
.dev .viewer-slide {
  flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always;
  touch-action: pan-x; /* вертикаль и щипок — наши */
}
.dev .viewer.zoomed .viewer-strip { overflow-x: hidden; }
.dev .viewer.zoomed .viewer-slide { touch-action: none; }
.dev .viewer-zoom { width: 100%; height: 100%; }
.dev .viewer-zoom img {
  width: 100%; height: 100%; object-fit: contain; display: block; will-change: transform;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.dev .viewer-bar {
  position: absolute; left: 16px; right: 16px; top: calc(var(--top-inset) + 10px); height: 40px;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  opacity: calc(1 - var(--drag, 0) * 3);
}
.dev .viewer-close {
  position: absolute; left: 0; pointer-events: auto; color: #fff; background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.dev .viewer-count {
  padding: 6px 12px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 600;
  background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ---------- Потянуть вниз — обновить: кружок выезжает из-под шапки ---------- */
.dev .ptr {
  position: fixed; left: 50%; top: 0; z-index: 9; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text); pointer-events: none;
  opacity: 0; transform: translate(-50%, -60px);
}
.dev .ptr .ptr-spin { display: none; width: 20px; height: 20px; }
.dev .ptr.spinning .ptr-arrow { display: none; }
.dev .ptr.spinning .ptr-spin { display: block; }

/* ---------- Нет доступа (закрытая бета) ---------- */
.dev .no-access-text { max-width: 300px; font-size: 16px; line-height: 1.4; }

/* ---------- Город ---------- */
/* Шторка «Город» — короткая, снизу; поверх шторки фильтров тоже */
.dev .city-backdrop { z-index: 60; }
.dev .csheet {
  width: 100%; max-height: calc(100% - var(--top-inset) - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 0 calc(16px + var(--bottom-inset)); background: var(--bg); border-radius: var(--r-l) var(--r-l) 0 0;
  animation: ma-rise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* Шапка шторки прилипает сверху с размытием, линия — когда список прокручен */
.dev .csheet-top {
  position: sticky; top: 0; z-index: 2; padding-top: 8px; touch-action: none;
  background: var(--material); border-bottom: 0.5px solid transparent; transition: border-color 0.2s;
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
}
.dev .csheet.scrolled .csheet-top { border-bottom-color: var(--sep); }
.dev .csheet-grab { display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--sep); margin: 0 auto 6px; }
.dev .csheet-head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; padding: 2px 16px 4px; }
.dev .csheet-head h2 { text-align: center; font-size: 17px; font-weight: 700; }
.dev .csheet-head.first { display: block; padding: 10px 20px 6px; }
.dev .csheet-head.first h2 { text-align: left; font-size: 26px; letter-spacing: -0.03em; }
.dev .city-list { display: flex; flex-direction: column; padding: 0 16px; }
.dev .city-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; text-align: left; border-bottom: 0.5px solid var(--sep); }
.dev .city-row:last-child { border-bottom: 0; }
.dev .city-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dev .city-name b { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.dev .city-name .muted { font-size: 14px; }
.dev .city-check { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); }

/* Шторка фильтров: город — строкой под «Аренда / Продажа» */
.dev .city-field {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--sep); border-radius: var(--r-m);
}
.dev .city-field-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dev .city-field-text b { font-size: 17px; font-weight: 600; }

/* Конец короткой ленты: куда смотреть дальше */
.dev .few-note { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--sep); border-radius: 20px; }
.dev .few-note b { font-size: 17px; }
.dev .few-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dev .few-actions .secondary-btn { width: 100%; }
.dev .few-actions .text-btn { align-self: center; padding: 6px 12px; }

/* ---------- Облегчённая графика (Android, см. perf.ts) ----------
   Без размытия: оно пересчитывается на каждом кадре прокрутки. Панели, шторки, стеклянные кнопки и
   плашки на фото — непрозрачные. При прокрутке вниз панели не превращаются в кружки (обрезка clip-path
   перерисовывается каждый кадр), а целиком уезжают за край — только transform, его двигает видеокарта;
   вверх — возвращаются. Размытая подложка видео — просто тёмная. Карточки далеко за экраном не
   отрисовываются. */
.dev.lite { --material: var(--bg); }
.dev.lite *, .dev.lite *::before, .dev.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.dev.lite .glass, .dev.lite .map-bar .icon-round { background: var(--sheet); }
.dev.lite .fsheet, .dev.lite .csheet { --material: var(--sheet); }
.dev.lite .glass::before { display: none; }
.dev.lite .glass { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); }
.dev.lite .seen, .dev.lite .tag, .dev.lite .play-btn { background: #fff; }
.dev.lite .tag.warn.bottom { background: #fff4e6; }
.dev.lite .counter { background: rgba(0, 0, 0, 0.5); }
.dev.lite .play-label { background: rgba(0, 0, 0, 0.6); }
.dev.lite .fav.overlay { filter: none; }
.dev.lite .fav.overlay svg { fill: rgba(0, 0, 0, 0.35); }
.dev.lite .slide.vframe .vbg { display: none; }
.dev.lite .topbar, .dev.lite .tabbar, .dev.lite .view-toggle {
  clip-path: none; will-change: transform; transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.dev.lite.chrome-mini .topbar { transform: translateY(-100%); }
.dev.lite.chrome-mini .tabbar { clip-path: none; transform: translateY(calc(100% + 10px + var(--bottom-inset))); }
.dev.lite.chrome-mini .view-toggle {
  clip-path: none; transform: translate(-50%, calc(100% + var(--tabbar-h) + 32px + var(--bottom-inset)));
}
.dev.lite.chrome-mini .tabbtn, .dev.lite.chrome-mini .tabbtn svg { transform: none; }
.dev.lite.chrome-mini .tabbtn span, .dev.lite.chrome-mini .tab-lens, .dev.lite.chrome-mini .view-toggle span { opacity: 1; }
.dev.lite .mini-top, .dev.lite .mini-ring { display: none; }
.dev.lite .lc:not(.compact) { content-visibility: auto; contain-intrinsic-size: auto 360px; }

/* ---------- «Нашли жильё?» (FoundSheet) ---------- */
.dev .found-sub { padding: 0 20px 6px; font-size: 15px; line-height: 1.35; }
.dev .found-row b { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.dev .found-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--text); }
.dev .found-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 24px 4px; text-align: center; }
.dev .found-done img { width: 132px; height: 132px; }
.dev .found-done h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.dev .found-done p { max-width: 320px; font-size: 15px; line-height: 1.4; margin-bottom: 10px; }
.dev .found-done .primary { width: 100%; justify-content: center; }
.dev .found-done .text-btn { padding: 12px 16px 4px; }

/* ---------- Шапка ленты: ряд чипов (FeedHeader.tsx) ---------- */
.dev .hchips {
  display: flex; gap: 8px; margin: 10px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.dev .hchips::-webkit-scrollbar { display: none; }
.dev .hchip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--sep); background: color-mix(in srgb, var(--bg) 60%, transparent);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.dev .hchip svg { flex: none; }
.dev .hchip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.dev .hchip .count-badge { min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; font-size: 11px; }
/* Короткая шторка одного фильтра (QuickSheet.tsx) */
.dev .qsheet-body { display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 4px; }
.dev .qsheet-foot { display: flex; gap: 10px; padding: 14px 16px 0; }
/* «Присылать новые по этому поиску?» — над «Картой», где и тосты (nudge.ts) */
.dev .nudge {
  position: fixed; left: 12px; right: 12px; z-index: 35; bottom: calc(var(--tabbar-h) + var(--bottom-inset) + 78px);
  display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 14px; border-radius: 18px;
  background: var(--sheet); color: var(--text); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), 0 0 0 0.5px var(--sep);
  animation: ma-rise-in 0.25s ease-out;
}
.dev .nudge-icon { flex: none; }
.dev .nudge-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.dev .nudge-text b { font-size: 14px; font-weight: 600; }
.dev .nudge-text .muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .nudge-go {
  flex: none; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--accent); color: var(--accent-text);
  font-size: 14px; font-weight: 700;
}
.dev .nudge-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--hint); }

/* ---------- Радар: картинка на пустой вкладке (Subscriptions.tsx) ----------
   Круги, луч обходит круг (transform — дёшево), три «объявления» вспыхивают, когда луч проходит рядом.
   prefers-reduced-motion и облегчённая графика — без движения. */
.dev .radar-art {
  position: relative; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; margin-bottom: 6px;
  background:
    radial-gradient(circle, transparent 0 21%, var(--sep) 21% calc(21% + 1px), transparent calc(21% + 1px) 43%,
      var(--sep) 43% calc(43% + 1px), transparent calc(43% + 1px) 66%, var(--sep) 66% calc(66% + 1px), transparent calc(66% + 1px)),
    var(--fill);
  box-shadow: inset 0 0 0 1px var(--sep);
}
.dev .radar-sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 22%);
  animation: ma-radar-turn 3.2s linear infinite;
}
.dev .radar-art i {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: ma-radar-blip 3.2s ease-out infinite;
}
.dev .radar-art i:nth-of-type(2) { animation-delay: 1.9s; }
.dev .radar-art i:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes ma-radar-turn { to { transform: rotate(360deg); } }
@keyframes ma-radar-blip { 0%, 8% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0.15; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .dev .radar-sweep, .dev .radar-art i { animation: none; } }
.dev.lite .radar-sweep, .dev.lite .radar-art i { animation: none; }

/* ---------- Вкладка «Радар»: плитки с коллажем и страница радара (Subscriptions.tsx) ---------- */
.dev .screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dev .subs.radar-c { gap: 14px; }
.dev .radar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; line-height: 1.3; }
.dev .radar-text b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .radar-text .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .radar-state { font-size: 13px; color: var(--text); opacity: 0.85; display: inline-flex; align-items: center; gap: 6px; }
.dev .off .radar-text b { color: var(--hint); }
.dev .radar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dev .radar-dot.off { background: var(--hint); }
.dev .radar-strip {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px;
  overscroll-behavior-x: contain;
}
.dev .radar-strip::-webkit-scrollbar { display: none; }
.dev .radar-mini { flex: none; width: 136px; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.dev .radar-mini.ghost { height: 140px; border-radius: 12px; background: var(--fill); }
.dev .radar-ph {
  position: relative; width: 136px; height: 102px; border-radius: 12px; background: var(--fill) center / cover no-repeat;
}
.dev .radar-new {
  position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: var(--accent); color: var(--accent-text);
}
.dev .radar-mini b { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .radar-mini b small { font-size: 12px; font-weight: 500; }
.dev .radar-mini .muted { font-size: 12px; margin-top: -4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .radar-all {
  flex: none; width: 96px; height: 102px; border-radius: 12px; background: var(--fill);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 600;
}
/* В — плитки с коллажем */
.dev .radar-tiles { display: flex; flex-direction: column; gap: 12px; }
.dev .radar-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--fill); cursor: pointer;
}
.dev .radar-tile .radar-text b { white-space: normal; line-height: 1.25; }
.dev .radar-coll {
  flex: none; width: 84px; height: 84px; border-radius: 14px; overflow: hidden; display: grid; gap: 2px;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: var(--fill); color: var(--hint); place-items: stretch;
}
.dev .radar-coll i { background: var(--fill) center / cover no-repeat; }
.dev .radar-coll.n0 { place-items: center; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dev .radar-coll.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.dev .radar-coll.n2 i { grid-row: 1 / 3; }
.dev .radar-coll.n3 i:first-child { grid-row: 1 / 3; }
.dev .radar-tile.off .radar-coll { filter: grayscale(1) brightness(0.7); }
/* Шторка радара */
/* Страница радара: шторка почти во весь экран, низ с главной кнопкой закреплён */
.dev .rsheet { display: flex; flex-direction: column; padding-bottom: 0; }
/* Вернулись на уже открытую страницу радара — без анимации появления */
.dev .sheet-backdrop.instant, .dev .sheet-backdrop.instant .csheet { animation: none; }
.dev .rsheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 16px 10px; }
.dev .rsheet-head .radar-text b { font-size: 19px; font-weight: 700; white-space: normal; }
.dev .rsheet-head .radar-text .muted { white-space: normal; }
.dev .rsheet-body { display: flex; flex-direction: column; gap: 14px; padding: 6px 16px 16px; }
.dev .rsheet-label { font-size: 13px; font-weight: 600; color: var(--hint); margin-bottom: 8px; }
.dev .rsheet-finds.off .radar-strip { opacity: 0.45; }
.dev .rsheet-body .set-card { background: var(--fill); }
.dev .rsheet-foot {
  position: sticky; bottom: 0; z-index: 2; padding: 12px 16px calc(12px + var(--bottom-inset));
  background: var(--material); border-top: 0.5px solid var(--sep);
  -webkit-backdrop-filter: blur(22px) saturate(190%); backdrop-filter: blur(22px) saturate(190%);
}
.dev .rsheet-foot .primary { width: 100%; justify-content: center; }
.dev .radar-none { padding: 8px 0; font-size: 14px; }
.dev .static-row { cursor: default; justify-content: space-between; }
.dev .mode-row { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.dev .mode-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.dev .mode-text .muted { font-size: 13px; }
.dev .rsheet .set-row + .set-row::before { left: 16px; }
.dev .danger-row .set-label { color: #ff5c5c; }