/* Torvy — вёрстка. Цвета — только через переменные из themes.css */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
html{background:var(--bg)}
/* isolation — свой слой у body: без него свечение с z-index:-1 уходит под сплошной фон body и не видно */
body{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13px;color:var(--text);background:var(--bg-img,none) var(--bg);min-height:100vh;min-height:100dvh;isolation:isolate}
/* градиент-свечение темы стоит на месте, лента прокручивается поверх */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--glow,none);pointer-events:none}
/* Настройки → «Градиент» выключен: фон однотонный */
[data-glow=off] body{background:var(--bg)}
[data-glow=off] body::before{display:none}
svg{display:block}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none !important}
.app{margin:0 auto;padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* ===== Шапка: поиск + аватар (на ПК ещё логотип и навигация) ===== */
.top{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--bg) 45%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.top-in{display:flex;gap:8px;align-items:center;margin:0 auto;padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
.logo{display:none;align-items:center;gap:9px;flex:none;font-size:21px;font-weight:800;letter-spacing:-.03em}
.logo img{display:block;border-radius:9px}
.desk-nav{display:none}
.field{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 4px 0 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--muted);transition:box-shadow .2s,border-color .2s}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field .ic{width:18px;height:18px;flex:none}
/* 16px — иначе iPhone приближает страницу при нажатии на поиск */
.field input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--text)}
.field input::placeholder{color:var(--muted)}
.field input::-webkit-search-cancel-button{display:none}
.filter{position:relative;width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--text);background:var(--surface-2)}
.filter .ic{width:17px;height:17px}
.filter::after{content:"";position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* аватар с кольцом-прогрессом заполненности профиля */
.avatar{position:relative;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent-2) 0 72%,var(--surface-2) 72% 100%)}
.avatar span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.02em;
  background:var(--surface);color:var(--accent);border:2px solid var(--bg)}
.avatar.sm{width:38px;height:38px}
.avatar.sm span{width:32px;height:32px;font-size:11px;border-color:var(--surface)}

/* ===== Меню аватара ===== */
.menu-wrap{position:relative;flex:none}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:264px;padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18);transform-origin:top right;animation:menuIn .16s ease}
@keyframes menuIn{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.menu-head{display:flex;align-items:center;gap:10px;padding:8px 8px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.menu-head b{display:block;font-size:14px;font-weight:800}
.menu-head small{font-size:12px;color:var(--muted)}
.mi{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 10px;border-radius:12px;font-size:14px;font-weight:600;text-align:left}
.mi .ic{color:var(--accent)}
.mi small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.mi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mi:disabled{cursor:default;color:var(--muted)}
.mi:disabled .ic{color:var(--muted)}

/* ===== Подсказка установки ===== */
.sheet{margin:auto;width:calc(100% - 32px);max-width:340px;padding:24px 20px 20px;border:0;border-radius:24px;background:var(--surface);color:var(--text);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.sheet::backdrop{background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.sheet img{display:block;margin:0 auto 12px;border-radius:14px}
.sheet h2{font-size:18px;font-weight:800;margin-bottom:8px}
.sheet p{font-size:14px;line-height:1.45;color:var(--muted);margin-bottom:18px}
.sheet p b{color:var(--text)}
.sheet p .ic{display:inline-block;width:17px;height:17px;vertical-align:-3px;color:var(--accent)}
.ib-go{width:100%;height:44px;border-radius:13px;font-size:14px;font-weight:700;background:var(--accent);color:var(--accent-ink)}

/* ===== Теги: сверху бегущая строка запросов, ниже — статичный ряд фильтров ===== */
.live{display:flex;align-items:center;gap:6px;padding:4px 14px 8px;font-size:11px;font-weight:600;color:var(--muted)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--accent-2);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent-2) 60%,transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.tickers{margin-bottom:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.ticker{overflow:hidden}
.track{display:flex;width:max-content;animation:slide 75s linear infinite}
.tickers:hover .track,.tickers.hold .track{animation-play-state:paused}
/* фильтры стоят на месте, лишние листаются пальцем */
.filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 12px;margin-bottom:16px}
.filters::-webkit-scrollbar{display:none}
.filters > *{flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
.track > *{margin-right:6px;flex:none}
/* верхний ряд — запросы-хэштеги */
.q{display:flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px dashed color-mix(in oklab,var(--text) 18%,transparent);color:var(--text)}
.q b{color:var(--accent-2);font-weight:800}
.q em{font-style:normal;font-size:10px;font-weight:700;color:var(--muted)}
.q.up em{color:var(--accent-2)}
/* нижний ряд — быстрые фильтры-переключатели */
.f{display:flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 4px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--line);transition:.2s}
.f .ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.f .ico .ic{width:13px;height:13px;stroke-width:2}
.f[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.f[aria-pressed=true] .ico{background:color-mix(in oklab,var(--accent-ink) 22%,transparent);color:var(--accent-ink)}

/* ===== Вкладки ленты ===== */
.feed-tabs{display:flex;gap:16px;align-items:flex-end;padding:0 14px 10px}
.feed-tabs button{position:relative;font-size:15px;font-weight:700;color:var(--muted);letter-spacing:-.01em;transition:color .2s,font-size .2s}
.feed-tabs button[aria-selected=true]{font-size:19px;font-weight:800;color:var(--text)}
.feed-tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;bottom:-5px;width:14px;height:3px;border-radius:2px;background:var(--accent)}

/* ===== Лента: ровная сетка в 2 колонки, карточки одного размера ===== */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px}
.card{min-width:0;background:var(--surface);border-radius:18px;padding:5px;border:1px solid var(--line)}
.ph{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
/* полоски-счётчик фото, как в сторис */
.bars{position:absolute;top:7px;left:8px;right:44px;display:flex;gap:3px}
.bars i{flex:1;height:2.5px;border-radius:2px;background:color-mix(in oklab,var(--surface) 55%,transparent)}
.bars i:first-child{background:var(--surface)}
.fav{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--surface) 80%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text)}
.fav .ic{width:16px;height:16px}
.fav[aria-pressed=true]{color:var(--accent)}
.fav[aria-pressed=true] path{fill:currentColor}
.fav.pop{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.3)}}
.body{padding:8px 6px 6px}
.price{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--price,var(--text))}
.drop{font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:color-mix(in oklab,var(--accent-2) 15%,transparent);color:var(--accent-2)}
.title{font-size:12.5px;line-height:1.3;min-height:2.6em;margin:2px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ===== Настройки ===== */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;background:color-mix(in oklab,var(--bg) 45%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.bar h1{font-size:19px;font-weight:800;letter-spacing:-.01em}
.round{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line)}
.prof{padding-top:6px}
.sect{padding:0 12px 20px}
.sect h2{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 4px 10px}
.sect h3{font-size:14px;font-weight:700;padding:16px 4px 8px}
.sect h3.first{padding-top:0}
.seg{display:flex;padding:4px;border-radius:14px;background:var(--surface-2)}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 0;border-radius:10px;font-size:13px;font-weight:600;color:var(--muted);transition:.2s}
.seg button .ic{width:16px;height:16px}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.opts{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.opt{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left}
.opt + .opt{border-top:1px solid var(--line)}
.opt span:nth-child(2){flex:1;min-width:0}
.opt b{display:block;font-size:14px;font-weight:700}
.opt small{font-size:12px;color:var(--muted)}
.opt .check{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent}
.opt[aria-pressed=true] .check{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.opt .check .ic{width:13px;height:13px;stroke-width:3}
.opts + .opts{margin-top:10px}
/* переключатель вкл/выкл в строке настроек */
.opt .tgl{position:relative;width:44px;height:26px;flex:none;border-radius:13px;background:var(--surface-2);transition:background .2s}
.opt .tgl::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.opt[aria-checked=true] .tgl{background:var(--accent)}
.opt[aria-checked=true] .tgl::after{transform:translateX(18px)}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.chip{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px;font-size:12.5px;line-height:1.2;font-weight:600;text-align:left;background:var(--surface);border:1px solid var(--line);transition:.2s}
.chip.wide{grid-column:1/-1}
.chip[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sw{display:flex;flex:none}
.sw i{width:18px;height:18px;border-radius:50%;margin-left:-6px;border:2px solid var(--surface)}
.sw i:first-child{margin-left:0}

/* ===== Нижнее меню-островок ===== */
.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:10;transform:translateX(-50%);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.dock.hide{transform:translate(-50%,160%)}
.island{display:flex;gap:2px;padding:4px;border-radius:999px;background:color-mix(in oklab,var(--surface) 76%,transparent);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.14)}
.tab{position:relative;display:flex;align-items:center;gap:6px;height:44px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted);transition:background .3s,color .3s}
.tab .ic{width:21px;height:21px;flex:none}
.tab .lbl{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .35s,opacity .25s}
.tab[aria-current=page]{background:var(--accent);color:var(--accent-ink);padding-right:15px}
.tab[aria-current=page] .lbl{max-width:90px;opacity:1}
.tab .count{position:absolute;top:5px;left:25px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;font-size:9px;font-weight:800;line-height:15px;text-align:center;background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--surface)}

/* ===== Загрузка ленты ===== */
.card.skel{aspect-ratio:3/4;background:linear-gradient(100deg,var(--surface) 40%,var(--surface-2) 50%,var(--surface) 60%) 0 0/200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 16px;color:var(--muted);font-size:14px}
.empty .ib-go{width:auto;padding:0 22px}

/* ===== Кнопка «Карта» рядом с фильтром в поиске ===== */
.map-toggle{margin-left:-4px;background:var(--accent-soft);color:var(--accent)}
.map-toggle::after{display:none}
.map-toggle .i-list,[data-route=map] .map-toggle .i-map{display:none}
[data-route=map] .map-toggle .i-list{display:block}
[data-route=map] .map-toggle{background:var(--accent);color:var(--accent-ink)}

/* ===== Экран карты ===== */
.mapwrap{position:fixed;left:0;right:0;bottom:0;top:var(--top-h,60px);z-index:1;background:var(--surface-2)}
#map{position:absolute;inset:0}
.map-back{position:absolute;top:12px;left:12px;z-index:2;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.map-back .ic{width:17px;height:17px;color:var(--accent)}
/* метка-цена */
.pin{position:relative;padding:5px 10px;border-radius:999px;font:800 12px/1.2 Manrope,system-ui,sans-serif;white-space:nowrap;background:var(--surface);color:var(--text);border:1.5px solid var(--surface);box-shadow:0 4px 14px rgba(0,0,0,.2);margin-bottom:6px;transition:transform .15s}
.pin::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:inherit;border-radius:0 0 3px 0;z-index:-1}
.pin:hover{transform:scale(1.06)}
.pin.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);z-index:3}
/* несколько объявлений рядом — кружок с числом */
.cluster{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:800 14px Manrope,system-ui,sans-serif;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 7px var(--accent-soft),0 4px 14px rgba(0,0,0,.2)}
/* «вы здесь» */
.me-dot{width:16px;height:16px;border-radius:50%;background:var(--accent-2);border:3px solid #fff;box-shadow:0 0 0 8px color-mix(in oklab,var(--accent-2) 22%,transparent)}
/* карточка выбранного объявления */
.map-card{position:absolute;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:2;display:flex;gap:12px;padding:8px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.22);animation:menuIn .18s ease}
.map-card img{width:96px;height:96px;flex:none;border-radius:14px;object-fit:cover}
.mc-body{flex:1;min-width:0;padding:4px 0}
.mc-body .title{min-height:0;margin:2px 0 4px}
.mc-addr{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-addr .ic{width:13px;height:13px;flex:none;color:var(--accent-2)}
.mc-close{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.mc-close .ic{width:14px;height:14px}
.maplibregl-ctrl-attrib{font-size:10px}
/* поиск адреса — справа вверху; на телефоне — от кнопки «Списком» до правого края */
.map-search{position:absolute;top:12px;right:12px;left:124px;z-index:3;display:flex;align-items:center;gap:8px;height:38px;padding:0 4px 0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.14);color:var(--muted)}
.map-search>.ic{width:17px;height:17px;flex:none}
.map-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--text)}
.map-search input::-webkit-search-cancel-button{display:none}
.map-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 6px 18px rgba(0,0,0,.14)}
.ms-clear{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.ms-clear .ic{width:15px;height:15px}
.ms-list{position:absolute;top:calc(100% + 6px);left:0;right:0;list-style:none;padding:6px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18);max-height:min(360px,60vh);overflow-y:auto}
.ms-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;cursor:pointer;color:var(--text)}
.ms-list li[aria-selected=true]{background:var(--surface-2)}
.ms-list li .ic{width:17px;height:17px;flex:none;color:var(--accent-2)}
.ms-list li b{display:block;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-list li small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-list li span{min-width:0}
.ms-list .ms-note{cursor:default;color:var(--muted);font-size:13px}
/* найденный адрес */
.addr-pin svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.addr-pin path{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.addr-pin circle{fill:var(--surface)}
/* кнопки карты (масштаб, «моё местоположение») — в цветах темы */
.maplibregl-ctrl-group,.maplibregl-ctrl-group:not(:empty){background:var(--surface);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.14)}
.maplibregl-ctrl-group button{width:38px;height:38px}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)}
[data-mode=dark] .maplibregl-ctrl-group .maplibregl-ctrl-icon{filter:invert(1)}
.locate{display:grid;place-items:center;color:var(--text)}
.locate .ic{width:20px;height:20px}
.locate.busy .ic{animation:locPulse 1s ease-in-out infinite}
.locate.on{color:var(--accent)}
@keyframes locPulse{50%{opacity:.35}}
/* короткое сообщение внизу экрана: «ссылка скопирована», «доступ к местоположению запрещён» */
.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:40;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:11px 16px;border-radius:14px;font-size:13px;font-weight:600;line-height:1.35;text-align:center;background:var(--text);color:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.2);animation:menuIn .18s ease}

/* ===== Объявление ===== */
.card[data-id]{cursor:pointer}
.bar .grow{flex:1}
.bar .round{color:var(--text)}
.it-fav[aria-pressed=true]{color:var(--accent)}
.it-fav[aria-pressed=true] path{fill:currentColor}
.it-fav.pop{animation:pop .35s ease}
.it{display:flex;flex-direction:column;padding:0 12px}
/* телефон: одна колонка — фото, цена и кнопки, характеристики, описание, место, продавец; обёртки колонок ПК не мешают */
.it-left,.it-right{display:contents}
.it-media{order:1}.it-head{order:2}.it-info{order:3}.it-side{order:4}
.it-head,.it-info,.it-side{padding:0 4px}
.it-head{padding-top:14px}
/* галерея: фото листаются пальцем, по одному */
.it-media{position:relative}
/* фото целиком, без обрезки: пустые поля у вытянутых фото — тёмно-серые в любой теме */
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px;background:#262626;aspect-ratio:1/1}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:none;width:100%;height:100%;object-fit:contain;scroll-snap-align:start}
.gal-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in oklab,var(--surface) 55%,transparent)}
.gal-dots i.on{background:var(--surface)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--text)}
.crumbs .sep{width:12px;height:12px;opacity:.6}
.it-price{font-size:26px;letter-spacing:-.02em}
.it-price .drop{font-size:12px}
.it-title{font-size:18px;font-weight:700;line-height:1.3;margin:4px 0 10px}
.it-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.it-tags span{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--accent-soft);color:var(--accent)}
.it-actions{display:none;gap:8px;margin-bottom:18px}
.it-actions .ib-go{width:auto;padding:0 22px}
.ib-go .ic,.ib-alt .ic{width:18px;height:18px}
.ib-go,.ib-alt{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ib-alt{height:44px;padding:0 18px;border-radius:13px;font-size:14px;font-weight:700;background:var(--surface-2);color:var(--text)}
.it-sect{padding:16px 0;border-top:1px solid var(--line)}
.it-sect h2{font-size:16px;font-weight:800;margin-bottom:10px}
/* характеристики: название слева, значение справа, точки-направляющие между ними */
.specs{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.specs div{display:flex;align-items:baseline;gap:8px}
.specs dt{color:var(--muted);flex:none}
.specs div::after{content:"";order:1;flex:1;border-bottom:1px dotted color-mix(in oklab,var(--text) 22%,transparent)}
.specs dd{order:2;font-weight:600;text-align:right}
.it-desc{font-size:14px;line-height:1.55;white-space:pre-line}
.it-addr{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.it-addr .ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--accent-2)}
.it-addr b{display:block;font-size:14px}
.it-addr small{font-size:12px;color:var(--muted)}
.mini-map{position:relative;height:170px;border-radius:18px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);cursor:pointer}
.mini-map>span{position:absolute;right:8px;bottom:8px;z-index:2;display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.mini-map>span .ic{width:15px;height:15px;color:var(--accent)}
.osm{display:block;margin-top:5px;font-size:10px;color:var(--muted)}
.seller{display:flex;gap:12px;align-items:center}
.s-ava{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:800;background:var(--accent-soft);color:var(--accent)}
.s-info b{display:block;font-size:15px;margin-bottom:2px}
.s-info small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.s-rate{display:flex !important;align-items:center;gap:4px;color:var(--text) !important;font-weight:700}
.s-rate .ic{width:13px;height:13px;color:var(--accent-2)}
.it-meta{padding:14px 0 6px;font-size:12px;color:var(--muted)}
.it-more{padding-top:10px}
.it-more h2{font-size:18px;font-weight:800;padding:8px 14px 12px}
/* телефон: «Позвонить» и «Написать» прибиты к низу экрана вместо меню-островка */
.it-cta{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.it-cta button{flex:1;width:auto}
[data-route=item] .dock{display:none}
[data-route=item] .toast{bottom:calc(80px + env(safe-area-inset-bottom))}

/* ===== Каталог ===== */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 12px}
.cat-tile{display:flex;flex-direction:column;gap:2px;min-height:118px;padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.cat-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;margin-bottom:auto;background:var(--accent-soft);color:var(--accent)}
.cat-tile b{font-size:14px;font-weight:800;line-height:1.25;margin-top:10px}
.cat-tile small{font-size:11.5px;color:var(--muted)}
.cat-page{padding:0 12px}
.cat-page .crumbs{padding:0 4px}
.cat-list{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line);margin-bottom:6px}
.cat-row{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px}
.cat-row+.cat-row{border-top:1px solid var(--line)}
.cat-row span{flex:1;min-width:0}
.cat-row b{display:block;font-size:14px;font-weight:700}
.cat-row small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-row em{font-style:normal;font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.cat-row>.ic{width:16px;height:16px;flex:none;color:var(--muted)}
.cat-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fchip{padding:9px 11px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.fchip b{display:block;font-size:13px}
.fchip small{display:block;font-size:11.5px;line-height:1.35;color:var(--muted)}
.cat-page .grid{padding:0}
.muted{font-size:13px;color:var(--muted)}

/* ===== «Разместить»: товар или услуга ===== */
.post-kind{text-align:left;max-width:380px}
.post-kind h2{text-align:center;margin-bottom:14px}
.pk{display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin-bottom:8px;border-radius:16px;border:1px solid var(--line);background:var(--surface);text-align:left}
.pk .cat-ic{margin:0;flex:none}
.pk b{display:block;font-size:15px}
.pk small{font-size:12px;color:var(--muted)}
.pk:disabled{opacity:.5;cursor:default}
.post-kind form{margin-top:6px}
.post-kind .ib-alt{width:100%}
@media (hover:hover){.pk:not(:disabled):hover{border-color:var(--accent)}}

/* ===== Выбор категории ===== */
.cat-pick{max-width:440px;max-height:min(640px,86dvh);padding:14px;text-align:left;overflow:auto}
.cp-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cp-head h2{flex:1;margin:0;font-size:17px}
.cat-pick .cat-row{width:100%;text-align:left}
.cat-ic.sm{width:34px;height:34px;border-radius:11px;margin:0;flex:none}
.cat-ic.sm .ic{width:18px;height:18px}
.cp-on{color:var(--accent) !important}

/* ===== Форма объявления ===== */
.nf{padding:0 12px 20px;max-width:720px;margin:0 auto}
.nf-sect{padding:16px 4px;border-top:1px solid var(--line)}
.nf-sect:first-child{border-top:0;padding-top:4px}
.nf-sect h2{font-size:16px;font-weight:800;margin-bottom:8px}
.nf i,.nf-lbl i{font-style:normal;color:var(--accent)}
.nf-hint{font-size:12px;color:var(--muted);margin:-2px 0 10px}
.nf-field{margin-bottom:14px}
.nf-field:last-child{margin-bottom:0}
.nf-lbl{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.nf-in{width:100%;min-height:44px;padding:10px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:16px;outline:0}
.nf-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.nf-in{resize:vertical;line-height:1.45}
.nf-unit{position:relative}
.nf-unit span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;pointer-events:none}
.nf-unit .nf-in{padding-right:44px}
.nf-cat{display:flex;align-items:center;gap:4px;flex-wrap:wrap;text-align:left;font-size:14px;font-weight:600}
.nf-cat>.ic{margin-left:auto;width:16px;height:16px;color:var(--muted)}
.nf-cat .sep{width:12px;height:12px;opacity:.5}
.ph-text{color:var(--muted);font-weight:500}
.nf-chips{display:flex;flex-wrap:wrap;gap:6px}
.nf-chip{height:34px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--line)}
.nf-chip[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.nf-tgl{width:100%;margin-top:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.nf-tgl>.ic{width:20px;height:20px;flex:none;color:var(--accent)}
.nf-tgl small{display:block}
.nf-err{font-size:12px;font-weight:600;color:#D9534F;margin-top:6px}
.nf-err:empty{display:none}
.invalid .nf-in,.invalid .seg,.invalid .nf-photos .add{border-color:#D9534F}
/* фото: плитки 3 в ряд, обложка подписана, загружающиеся — с крутилкой */
.nf-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nf-ph{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.nf-ph img{width:100%;height:100%;object-fit:cover}
.nf-ph-b{position:absolute;top:5px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:color-mix(in oklab,var(--bg) 70%,transparent);color:var(--text)}
.nf-ph-b .ic{width:14px;height:14px}
.nf-ph-b.del{right:5px}
.nf-ph-b.left{left:5px}
.nf-cover{position:absolute;left:5px;bottom:5px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;background:var(--accent);color:var(--accent-ink)}
.nf-ph.busy{display:grid;place-items:center}
.nf-ph.busy i{width:24px;height:24px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nf-ph.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;border:1.5px dashed color-mix(in oklab,var(--accent) 45%,var(--line));background:var(--accent-soft);color:var(--accent);text-align:center;padding:6px}
.nf-ph.add span{font-size:12px;font-weight:700}
.nf-ph.add small{font-size:11px;color:var(--muted)}
/* адрес: поле с подсказками как на карте, но в потоке формы */
.map-search.nf-addr{position:relative;left:auto;right:auto;top:auto;width:auto;height:44px;border-radius:13px;box-shadow:none;margin-bottom:8px;z-index:4}
.nf-addr>.ic{width:17px;height:17px;flex:none;color:var(--accent-2)}
.nf-loc{width:100%;margin-bottom:10px}
.nf-map{height:200px;cursor:crosshair}
.nf-cta{position:sticky;bottom:0;z-index:5;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line)}
.nf-cta .ib-go{display:flex;max-width:696px;margin:0 auto}
.nf-cta .ib-go:disabled{opacity:.6}
[data-route=new] .dock{display:none}
[data-route=new] .app{padding-bottom:0}

/* ===== Своё объявление и «Мои объявления» ===== */
.it-own{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:10px}
.it-own .ic{width:16px;height:16px}
.mine-note{margin:0 4px 10px}
.mine-row{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px}
.mine-row+.mine-row{border-top:1px solid var(--line)}
.mine-row a{flex:1;min-width:0;display:flex;align-items:center;gap:12px}
.mine-row img{width:56px;height:56px;flex:none;border-radius:12px;object-fit:cover}
.mine-row b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mine-row small{font-size:12px;color:var(--muted)}
.mine-row .round{width:36px;height:36px}

/* ===== Вход и профиль ===== */
.ava-ini .ic{width:18px;height:18px}
.login-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:13px;font-size:14px;font-weight:700;background:var(--surface-2);color:var(--text)}
.login-btn .ic{width:18px;height:18px;color:var(--accent)}
.auth{max-width:440px}
.auth .seg{margin-bottom:18px}
.auth .ib-go,.auth .ib-alt{width:100%;margin-top:10px}
.auth-text{font-size:14px;line-height:1.5;margin-bottom:12px}
.auth-text a,.pf-row a,.mine-note a{color:var(--accent);font-weight:700}
.auth-code{letter-spacing:.4em;text-align:center;font-size:22px;font-weight:700}
.auth-call{height:56px;font-size:18px}
.auth-wait{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--muted)}
.auth-wait i{width:16px;height:16px;flex:none;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.pf-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pf-head b{display:block;font-size:18px;font-weight:800}
.pf-head small{font-size:13px;color:var(--muted)}
.pf-row{display:flex;align-items:center;gap:12px;min-height:48px;font-size:14px}
.pf-row+.pf-row{border-top:1px solid var(--line)}
.pf-row>.ic{color:var(--accent)}
.pf-row span{flex:1;min-width:0}
.pf-row small{display:block;font-size:12px;color:var(--muted)}
/* над картой без размытия: blur поверх WebGL пересчитывается на каждом кадре и тормозит движение */
[data-route=map] .top{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-route=map] .island{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}

/* ===== Чаты: на телефоне список и переписка по очереди (переписка — на весь экран), на ПК — рядом ===== */
.cl-all{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:12px;font-size:13px;font-weight:700;background:var(--surface-2);color:var(--accent);white-space:nowrap}
.cl-all .ic{width:17px;height:17px}
.cl-all:disabled{color:var(--muted);opacity:.6;cursor:default}
.ic.big{width:44px;height:44px;color:var(--accent);stroke-width:1.4}
.cl-empty{max-width:360px;margin:0 auto;text-align:center;line-height:1.45}
.cl-empty b{font-size:16px;color:var(--text)}
.cl-list{display:flex;flex-direction:column;gap:2px;padding:0 8px 8px}
.cl-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:16px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.cl-row img{width:54px;height:54px;flex:none;border-radius:14px;object-fit:cover;background:var(--surface-2)}
.cl-row.on{background:var(--accent-soft)}
.cl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cl-top,.cl-bot{display:flex;align-items:center;gap:6px}
.cl-top b{min-width:0;font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-pin{width:13px;height:13px;flex:none;color:var(--muted)}
.cl-top time{margin-left:auto;flex:none;padding-left:6px;font-size:11.5px;color:var(--muted)}
.cl-lot{font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-prev{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-bot em{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-style:normal;font-size:11px;font-weight:800;line-height:20px;text-align:center;background:var(--accent);color:var(--accent-ink)}
.typing{color:var(--accent) !important}
.tk{display:inline-flex;flex:none;color:var(--muted)}
.tk .ic{width:15px;height:15px;stroke-width:2}
.tk.read{color:var(--accent)}
/* переписка */
.cv{display:none}
[data-chat-open] .cl{display:none}
[data-chat-open] .cv{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;background:var(--bg)}
[data-chat-open] .dock{display:none}
.cv-head{display:flex;align-items:center;gap:10px;flex:none;padding:calc(8px + env(safe-area-inset-top)) 12px 8px;border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--bg) 85%,transparent)}
.cv-head .round{color:var(--text)}
.cv-lot img{display:block;width:42px;height:42px;border-radius:12px;object-fit:cover;background:var(--surface-2)}
.cv-who{flex:1;min-width:0}
.cv-who b,.cv-who small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-who b{font-size:15px;font-weight:800}
.cv-who small{font-size:12px;color:var(--muted)}
.cv-pin{display:flex;align-items:center;gap:4px;flex:none;padding:6px 8px 6px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.cv-pin-go{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding-left:10px;border-left:3px solid var(--accent);text-align:left}
.cv-pin-go>.ic{width:17px;height:17px;flex:none;color:var(--accent)}
.cv-pin-go span{min-width:0}
.cv-pin-go b{display:block;font-size:12px;color:var(--accent)}
.cv-pin-go small{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-pin-x,.cv-bar-x{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.cv-pin-x .ic,.cv-bar-x .ic{width:16px;height:16px}
.cv-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px;padding:12px 10px 8px}
.cv-msgs>:first-child{margin-top:auto}   /* мало сообщений — прижаты к полю ввода, как в Telegram */
.cv-day{align-self:center;margin:10px 0 6px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface);color:var(--muted)}
.cv-older{align-self:center;padding:6px}
.cv-hello,.cv-none{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:300px;padding:24px;text-align:center;font-size:13.5px;line-height:1.45;color:var(--muted)}
.cv-hello b{font-size:16px;color:var(--text)}
.cv-none{height:100%;justify-content:center;font-size:15px;font-weight:600}
.msg{display:flex}
.msg.mine{justify-content:flex-end}
.mb{position:relative;max-width:min(80%,540px);padding:7px 11px;border-radius:18px 18px 18px 6px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.mine .mb{border-radius:18px 18px 6px 18px;background:var(--accent);color:var(--accent-ink);border-color:transparent}
.msg.flash .mb{animation:flash 1.4s ease}
@keyframes flash{25%{box-shadow:0 0 0 4px var(--accent-2)}}
.mb-text{font-size:14.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.mb-text a{text-decoration:underline;text-underline-offset:2px}
.msg:not(.mine) .mb-text a{color:var(--accent)}
/* время и галочки — в конце последней строки текста */
.mb-meta{float:right;display:inline-flex;align-items:center;gap:3px;margin:7px -3px -3px 10px;font-size:10.5px;line-height:1;opacity:.72;white-space:nowrap}
.mine .tk,.mine .tk.read{color:inherit}
.mb-meta .tk .ic{width:14px;height:14px}
.mb.has-img{padding:3px}
.mb-img{display:block;position:relative;width:min(280px,62vw);max-height:360px;border-radius:15px;overflow:hidden;background:var(--surface-2)}
.mb-img img{display:block;width:100%;height:100%;object-fit:cover}
.mb-img .mb-meta{position:absolute;right:6px;bottom:6px;margin:0;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;opacity:1}
.has-img .mb-text{padding:5px 8px 4px}
.mb-file{display:flex;align-items:center;gap:10px;min-width:min(220px,58vw);padding:2px 0 4px}
.mb-file>.ic{width:40px;height:40px;flex:none;padding:9px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.mine .mb-file>.ic{background:color-mix(in oklab,var(--accent-ink) 18%,transparent);color:var(--accent-ink)}
.mb-file span{min-width:0}
.mb-file b{display:block;font-size:13.5px;overflow-wrap:anywhere}
.mb-file small{font-size:12px;opacity:.72}
/* поле ввода */
.cv-form{flex:none;padding:8px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in oklab,var(--bg) 85%,transparent)}
.cv-bar{display:flex;align-items:center;gap:10px;padding:2px 4px 8px 8px}
.cv-bar>.ic{flex:none;color:var(--accent)}
.cv-bar img{width:40px;height:40px;flex:none;border-radius:10px;object-fit:cover}
.cv-bar span{flex:1;min-width:0}
.cv-bar b{display:block;font-size:12.5px;color:var(--accent)}
.cv-bar small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spin{display:block;width:22px;height:22px;flex:none;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:spin .8s linear infinite}
.cv-row{display:flex;align-items:flex-end;gap:6px}
.cv-clip{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.cv-clip .ic{width:22px;height:22px}
.cv-in{flex:1;min-width:0;height:44px;max-height:140px;padding:11px 15px;border-radius:22px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.3;resize:none;outline:0;overflow-y:hidden}
.cv-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cv-send{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.cv-send .ic{width:21px;height:21px}
[data-route=chats] .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
/* меню сообщения или чата — у места нажатия */
.ctx{position:fixed;right:auto;top:0;left:0;width:auto;min-width:200px;z-index:60;transform-origin:top left}
.mi.danger,.mi.danger .ic{color:#D9534F}
/* фото во весь экран */
.lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.92);place-items:center}
.lightbox[open]{display:grid}
.lightbox::backdrop{background:rgba(0,0,0,.5)}
.lightbox img{max-width:100%;max-height:100dvh;object-fit:contain}
.lb-bar{position:fixed;top:calc(12px + env(safe-area-inset-top));right:12px;display:flex;gap:8px}
.lb-bar .round{color:var(--text)}
@media (hover:hover){
  .cl-row:not(.on):hover{background:var(--surface-2)}
  .cl-all:not(:disabled):hover{background:var(--accent-soft)}
}

/* ===== Телефон: экран настроек со своей шапкой, крупнее цели под палец ===== */
@media (max-width:899px){
  [data-route=settings] .top,[data-route=item] .top,[data-route=catalog] .top,[data-route=new] .top,[data-route=mine] .top,[data-route=chats] .top{display:none}
  [data-route=item] .app{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  /* кнопки карты — над нижним меню-островком, а при открытой карточке объявления — над ней */
  .mapwrap .maplibregl-ctrl-bottom-right{bottom:calc(72px + env(safe-area-inset-bottom));transition:bottom .2s}
  .mapwrap.card-open .maplibregl-ctrl-bottom-right{bottom:calc(224px + env(safe-area-inset-bottom))}
}
@media (pointer:coarse){
  .fav{width:36px;height:36px}
  .fav .ic{width:18px;height:18px}
  .q,.f{height:32px}
}

/* ===== Планшет ===== */
@media (min-width:600px){
  .top-in,.app{max-width:900px}
  .top-in{padding-left:16px;padding-right:16px}
  .live{padding-left:20px}
  .filters{padding:0 16px}
  .feed-tabs{padding-left:20px}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .sect{padding-left:16px;padding-right:16px}
  .chips{grid-template-columns:repeat(3,1fr)}
}

/* ===== ПК: шапка с логотипом и разделами, островок не нужен ===== */
@media (min-width:900px){
  .top-in,.app{max-width:1240px}
  .top-in{gap:18px;padding:14px 24px}
  .logo{display:flex}
  .field{height:44px;max-width:640px}
  .desk-nav{display:flex;gap:4px;margin-left:auto}
  .dn{position:relative;display:flex;align-items:center;gap:7px;height:42px;padding:0 14px;border-radius:13px;font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s}
  .dn .ic{width:19px;height:19px}
  .dn .count{min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:10px;font-weight:800;line-height:18px;text-align:center;background:var(--accent);color:var(--accent-ink)}
  .dn.primary{margin-left:6px;background:var(--accent);color:var(--accent-ink)}
  .avatar{width:44px;height:44px}
  .avatar span{width:38px;height:38px}
  .avatar.sm{width:38px;height:38px}
  .avatar.sm span{width:32px;height:32px}
  .login-btn{height:42px}
  .dock{display:none}
  .app{padding-bottom:56px}
  .live{padding:14px 26px 10px}
  .tickers{margin:0 12px 10px}
  .filters{padding:0 24px;margin-bottom:22px}
  .feed-tabs{padding:0 26px 14px}
  .grid{grid-template-columns:repeat(4,1fr);gap:14px;padding:0 24px}
  .bar{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:22px 24px 12px}
  .bar h1{font-size:26px}
  .prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;max-width:1100px;padding:0 12px}
  .prof .sect:last-child{padding-top:28px}
  .map-back{top:16px;left:24px}
  .map-search{top:16px;right:24px;left:auto;width:360px;height:42px}
  .toast,[data-route=item] .toast{bottom:28px}
  /* объявление: слева фото, под ним характеристики и описание; справа цена, название, кнопки, продавец, место.
     Обе колонки прокручиваются вместе со страницей; кнопки — в колонке, не внизу экрана */
  .it{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:start;padding:0 24px}
  .it-left,.it-right{display:block}
  .it-info{padding-top:14px}
  .it-head{padding-top:0}
  .it-side{display:flex;flex-direction:column}
  .it-side .seller{order:-1}   /* на ПК продавец — сразу под кнопками, на телефоне — после расположения */
  .it-actions{display:flex}
  .it-cta{display:none}
  .it-title{font-size:24px}
  .it-price{font-size:30px}
  .it-more h2{padding:8px 26px 14px}
  .cat-page{max-width:1240px;margin:0 auto;padding:0 24px}
  .cat-filters{grid-template-columns:repeat(4,1fr)}
  .cat-page .grid{grid-template-columns:repeat(4,1fr);gap:14px}
  .mapwrap .maplibregl-ctrl-bottom-right{margin:0 14px 14px 0}
  .map-card{left:24px;right:auto;bottom:24px;width:400px}
  /* чаты: список слева, переписка справа — одна карточка на высоту экрана под шапкой */
  [data-route=chats] .app{padding-bottom:0}
  .chats-wrap{display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr);height:calc(100dvh - var(--top-h,72px) - 20px);
    max-width:1192px;margin:4px auto 0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:color-mix(in oklab,var(--surface) 55%,transparent)}
  .cl,[data-chat-open] .cl{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
  .cl .bar{padding:16px 16px 10px}
  .cl .bar h1{font-size:22px}
  .cl .bar [data-back]{display:none}
  .cl-list{flex:1;min-height:0;overflow-y:auto}
  .cv,[data-chat-open] .cv{position:static;z-index:auto;display:flex;flex-direction:column;min-height:0;background:none}
  .cv-back{display:none}
  .cv-head{padding:12px 18px;background:none}
  .cv-msgs{padding:16px 22px 10px}
  .cv-form{padding:10px 16px 14px;background:none}
  [data-route=chats] .toast{bottom:28px}
}
@media (min-width:1200px){
  .grid{grid-template-columns:repeat(5,1fr)}
}

/* ===== Каталог на ПК (#catalog): весь экран под шапкой — разделы столбиком слева, за полоской — категории
   раздела под курсором. На телефоне вместо этого плитки разделов и под ними подразделы выбранного (.m-sub) ===== */
.mega{display:none}
.cat-tile{text-align:left;color:inherit}
.cat-tile[aria-current]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.m-sub{padding:18px 12px 24px;scroll-margin-top:calc(var(--top-h,64px) + 8px)}
.m-sub h2{font-size:18px;font-weight:800;padding:0 4px 10px}
.cat-none{padding:24px 4px}
@media (min-width:900px){
  .cat-root>.bar,.cat-grid,.m-sub{display:none}
  .mega{display:grid;grid-template-columns:288px minmax(0,1fr);max-width:1240px;min-height:calc(100dvh - var(--top-h,72px));margin:0 auto}
  .mega-side{position:sticky;top:var(--top-h,72px);align-self:start;display:flex;flex-direction:column;gap:12px;
    height:calc(100dvh - var(--top-h,72px));padding:22px 16px 22px 24px;border-right:1px solid var(--line)}
  .mega-find{display:flex;align-items:center;gap:8px;height:42px;flex:none;padding:0 12px;border-radius:13px;background:var(--surface);border:1px solid var(--line);color:var(--muted);transition:border-color .2s,box-shadow .2s}
  .mega-find:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .mega-find .ic{width:17px;height:17px;flex:none}
  .mega-find input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:13.5px;color:var(--text)}
  .mega-find input::placeholder{color:var(--muted)}
  .mega-tops{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto;scrollbar-width:none;margin-right:-17px;padding-right:17px}
  .mega-top{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:6px 10px 6px 6px;border-radius:14px;font-size:14.5px;font-weight:700;text-align:left;color:var(--text);transition:background .12s,color .12s}
  .mega-top>span:last-child{flex:1;min-width:0}
  .mega-top .cat-ic.sm{background:var(--surface-2);color:var(--text);transition:background .12s,color .12s}
  .mega-top[aria-current]{background:var(--accent-soft);color:var(--accent)}
  .mega-top[aria-current] .cat-ic.sm{background:var(--accent);color:var(--accent-ink)}
  /* язычок на разделительной полоске напротив выбранного раздела */
  .mega-top[aria-current]::after{content:"";position:absolute;right:-17px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--accent)}
  .mega-top:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .mega-main{min-width:0;padding:26px 24px 40px 40px}
  .mega-main>*{animation:megaFade .16s ease}
  .mega-head{display:flex;align-items:center;gap:14px;margin-bottom:26px}
  .mega-head h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .mega-head small{font-size:12.5px;color:var(--muted)}
  .mega-all{margin-left:auto;display:flex;align-items:center;gap:2px;height:38px;padding:0 10px 0 16px;border-radius:999px;font-size:13px;font-weight:700;background:var(--accent);color:var(--accent-ink)}
  .mega-all .ic{width:15px;height:15px}
  .mega-cols{columns:3 200px;column-gap:40px}
  .mega-grp{break-inside:avoid;padding-bottom:26px}
  .mega-h{display:inline-block;font-size:15px;font-weight:800;line-height:1.3;margin-bottom:10px;transition:color .12s}
  .mega-grp ul{list-style:none;display:flex;flex-direction:column;gap:8px}
  .mega-grp li a{font-size:13.5px;line-height:1.35;color:color-mix(in oklab,var(--text) 78%,transparent);transition:color .12s}
  .mega-hits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 18px}
  .mega-hit{display:block;padding:9px 12px;border-radius:12px;transition:background .12s}
  .mega-hit b{display:block;font-size:14px;font-weight:700}
  .mega-hit small{font-size:12px;color:var(--muted)}
  .mega-hit mark{padding:0 1px;border-radius:4px;background:var(--accent-soft);color:var(--accent)}
  .dn[aria-current=page]{background:var(--surface-2)}
}
@media (min-width:900px) and (hover:hover){
  .mega-top:not([aria-current]):hover{background:var(--surface-2)}
  .mega-h:hover,.mega-grp li a:hover{color:var(--accent)}
  .mega-hit:hover{background:var(--surface-2)}
}
@keyframes megaFade{from{opacity:0}}

/* ===== Мышь: отклик на наведение ===== */
@media (hover:hover){
  .card{transition:transform .2s,box-shadow .2s}
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.09)}
  .dn:not(.primary):hover,.mi:hover,.opt:hover{background:var(--surface-2)}
  .chip:hover{border-color:color-mix(in oklab,var(--accent) 40%,var(--line))}
}

@media (prefers-reduced-motion:reduce){
  .track{animation:none}
  .ticker{overflow-x:auto;scrollbar-width:none}
}