:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f3f5);
  --text: var(--tg-theme-text-color, #16181d);
  --hint: var(--tg-theme-hint-color, #6f7785);
  --link: var(--tg-theme-link-color, #1f7ae0);
  --btn: var(--tg-theme-button-color, #2ea6ff);
  --btn-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-section-bg-color, #ffffff);
  --line: var(--tg-theme-section-separator-color, #e3e5e8);
  --deal: #2fb55a;
  --drop: #e8a23a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not(.tg) {
    --bg: #17212b; --bg2: #232e3c; --text: #f5f5f5; --hint: #7f91a4; --link: #6ab2f2; --card: #1e2a36; --line: #2b3a4b;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; text-decoration: none; }
main { max-width: 1280px; margin: 0 auto; padding: 0 12px 40px; }
.top { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.topnav { flex: 0 0 100%; display: flex; gap: 6px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav .cat { flex: none; padding: 6px 11px; border-radius: 16px; background: var(--bg2); font-size: 13px; white-space: nowrap; }
.topnav .cat.sel { background: var(--text); color: var(--bg); }
/* плитки групп на главной: на компьютере — как у образца, на телефоне — сетка 4×3 значков, как иконки приложений */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { background: var(--bg2); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.tile .ic { font-size: 26px; line-height: 1; }
.tile .n { color: var(--hint); font-size: 13px; }
@media (max-width: 699px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tile { padding: 10px 4px; align-items: center; text-align: center; gap: 4px; }
  .tile b { font-size: 11px; font-weight: 500; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile .n { display: none; }
}
.tg .top { padding-top: calc(10px + var(--tg-content-safe-area-inset-top, 0px)); }
.logo { font-weight: 700; font-size: 18px; color: var(--link); }
.search { flex: 1; }
.search input { width: 100%; padding: 9px 12px; border-radius: 12px; border: 0; background: var(--bg2); color: var(--text); font-size: 15px; }
.h { font-size: 20px; margin: 14px 0 8px; }
.h small { color: var(--hint); font-weight: 400; font-size: 14px; }
.h2 { font-size: 17px; margin: 18px 0 8px; }
.crumbs { margin-top: 12px; color: var(--hint); font-size: 13px; }
.crumbs a { color: var(--link); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; align-items: flex-start; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 6px 11px; border-radius: 16px; background: var(--bg2); font-size: 13px; white-space: nowrap; cursor: pointer; }
.chip.sel { background: var(--btn); color: var(--btn-text); }
.chip.on { background: color-mix(in srgb, var(--btn) 18%, var(--bg2)); color: var(--link); }
.row-name { flex: none; align-self: center; color: var(--hint); font-size: 12px; padding-right: 2px; }
.chips.filters { flex-wrap: wrap; overflow: visible; } /* иначе выпадающие формы обрезаются прокручиваемой строкой */
.pick { position: relative; }
.pick summary { list-style: none; }
.pick summary::-webkit-details-marker { display: none; }
.pick form { position: absolute; z-index: 15; top: 34px; left: 0; min-width: 190px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--card); box-shadow: 0 6px 24px rgba(0,0,0,.25); white-space: normal; }
.pick button, .btn { border: 0; border-radius: 10px; padding: 9px 12px; background: var(--btn); color: var(--btn-text); font-weight: 600; font-size: 14px; cursor: pointer; text-align: center; }
.pick input[name^=price] { width: 70px; padding: 5px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-auto-flow: dense; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card { background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); min-width: 0; }
.car { position: relative; background: var(--bg2); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slides img { flex: none; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; scroll-snap-align: start; display: block; background: var(--bg2); }
.nophoto { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: var(--hint); font-size: 13px; }
.dots { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.5); }
.dots i.a { background: #fff; }
.cnt, .badge { position: absolute; top: 6px; font-size: 11px; padding: 2px 6px; border-radius: 6px; color: #fff; }
.cnt { right: 6px; background: rgba(0,0,0,.55); }
.badge { left: 6px; font-weight: 600; }
.badge.deal { background: var(--deal); }
.badge.drop { background: var(--drop); }
.arr { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 16px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.arr.l { left: 6px; } .arr.r { right: 6px; }
@media (hover: hover) { .car:hover .arr { opacity: 1; } }
.body { display: block; padding: 7px 9px 9px; }
.price { font-weight: 700; font-size: 15px; margin: 0; }
.price s { color: var(--hint); font-weight: 400; font-size: 13px; text-decoration: none; }
.title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; margin-top: 2px; }
.meta { display: block; color: var(--hint); font-size: 12px; margin-top: 3px; }
.detail .car.big .slides img { aspect-ratio: 4 / 3; object-fit: contain; background: #000; }
.detail .info { padding: 12px; position: relative; }
.detail h1.title { font-size: 17px; -webkit-line-clamp: unset; margin: 4px 0; }
.detail .close { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg2); color: var(--text); font-size: 16px; cursor: pointer; display: none; }
html.modal, html.modal body { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.sheet { background: var(--card); width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; animation: up .18s ease-out; }
.sheet .detail .close { display: block; }
.sheet .detail .info { padding-top: 16px; }
@keyframes up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.tg .sheet { padding-top: var(--tg-content-safe-area-inset-top, 0px); }
@media (min-width: 900px) {
  .sheet { width: min(1040px, 92vw); height: auto; max-height: 90vh; border-radius: 16px; overflow: hidden; }
  .sheet .detail { display: flex; max-height: 90vh; }
  .sheet .detail .car.big { width: 58%; flex: none; display: flex; align-items: center; background: #000; }
  .sheet .detail .car.big .slides { width: 100%; }
  .sheet .detail .info { overflow-y: auto; padding: 20px 20px 20px 22px; flex: 1; }
  .sheet .detail .banner { position: absolute; z-index: 2; left: 12px; right: calc(42% + 12px); top: 12px; }
}
.seller, .market { font-size: 13px; color: var(--hint); }
.market { color: var(--deal); }
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tags span { font-size: 12px; padding: 3px 7px; border-radius: 6px; background: var(--bg2); }
.text { white-space: pre-line; font-size: 14px; overflow-wrap: anywhere; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.g { background: var(--bg2); color: var(--text); }
.banner { background: var(--bg2); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.more { display: block; text-align: center; padding: 12px; margin: 12px 0; color: var(--link); grid-column: 1 / -1; }
.empty { color: var(--hint); padding: 30px 0; text-align: center; }
.page-listing { max-width: 720px; margin: 12px auto; background: var(--card); border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.foot { max-width: 1280px; margin: 0 auto; padding: 16px 12px 30px; color: var(--hint); font-size: 12px; }
@media (max-width: 899px) { /* телефон: крестик всегда виден поверх фото, лист прокручивается под ним */
  .sheet .detail .close { position: fixed; z-index: 25; top: calc(10px + var(--tg-content-safe-area-inset-top, 0px)); right: 10px; background: rgba(0,0,0,.55); color: #fff; }
}
.card .slides { cursor: pointer; }
/* Мини-апп (#70): вкладки, «Следить», мои поиски, меню. Вкладки и меню — только внутри Telegram. */
html:not(.tg) .tgonly { display: none !important; }
html.tg .notg { display: none; }
html:not(.tg) [data-auth] { display: none; }
.notg { text-align: center; padding: 30px 12px; color: var(--hint); display: grid; gap: 12px; justify-items: center; }
.menu-link { margin-left: auto; font-size: 22px; line-height: 1; padding: 4px 8px; color: var(--text); }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.tabs a { flex: 1; text-align: center; padding: 11px 0; color: var(--hint); font-size: 13px; }
.tabs a.on { color: var(--link); font-weight: 600; }
html.tg body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
/* «Следить» закреплена внизу экрана (макет A), над вкладками мини-аппа; место под неё — отступ у body */
.followbar { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 14; padding: 10px max(12px, calc((100vw - 1280px) / 2 + 12px));
  background: linear-gradient(transparent, var(--bg) 35%); display: flex; gap: 10px; align-items: center; }
html.tg .followbar { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
body:has(.followbar) { padding-bottom: 70px; }
html.tg body:has(.followbar) { padding-bottom: calc(122px + env(safe-area-inset-bottom, 0px)); }
.followbar .cancel { color: var(--hint); white-space: nowrap; }
.btn.wide { flex: 1; text-align: center; padding: 12px; font-size: 15px; }
.sheet.small { height: auto; max-height: 80vh; align-self: flex-end; border-radius: 16px 16px 0 0; }
@media (min-width: 900px) { .sheet.small { width: min(520px, 92vw); align-self: center; border-radius: 16px; } }
.follow-sheet { padding: 18px 16px 20px; display: grid; gap: 10px; position: relative; }
.follow-sheet .close { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg2); color: var(--text); cursor: pointer; }
.follow-sheet .human { font-weight: 600; margin: 0; padding-right: 36px; }
.follow-sheet .note, .msg { color: var(--hint); font-size: 13px; margin: 0; }
.mylist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mylist li { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.mylist li a { flex: 1; min-width: 0; color: var(--text); display: grid; gap: 2px; }
.mylist small { color: var(--hint); }
.mylist .danger { background: none; border: 0; color: #c62828; font: inherit; font-weight: 600; padding: 0; cursor: pointer; }
.pill { font-size: 11px; border-radius: 999px; padding: 2px 8px; background: var(--bg2); color: var(--hint); white-space: nowrap; }
.pill.on { background: #e6f6ef; color: #1b7a4b; }
.pill.p { background: #fff4e0; color: #9a5b00; }
.mysub { color: var(--hint); font-size: 13px; }
.myacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.btn.red { background: #fdecec; color: #c62828; }
.help { max-width: 65ch; display: grid; gap: 4px; }
.pricing { color: var(--hint); font-size: 13px; margin: -4px 0 8px; }
.privacy ul { padding-left: 20px; display: grid; gap: 4px; } .privacy h2 { margin-top: 14px; } .foot a { color: var(--hint); text-decoration: underline; }
/* Помощник (#71): «Скажите словами», строка правки, ✕ на карточках и шторка причин */
.refine { display: flex; gap: 8px; margin: 4px 0 8px; }
.refine input[type=text] { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1.5px solid var(--link); background: var(--card); color: var(--text); font: inherit; }
.changes { font-size: 13px; color: var(--link); margin: 0 0 8px; }
.chip.new { outline: 2px solid var(--link); }
.card .car { position: relative; }
.card .mark { position: absolute; top: 6px; left: 6px; z-index: 3; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #c62828; font-size: 13px; cursor: pointer; }
.card.dim { opacity: .45; }
.card.dim .mark { background: #c62828; color: #fff; opacity: 1; }
.markbar[hidden] { display: none; }
.markbar { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 16; padding: 10px max(12px, calc((100vw - 1280px) / 2 + 12px)); display: flex; background: linear-gradient(transparent, var(--bg) 35%); }
html.tg .markbar { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
.notit-sheet .chips { flex-wrap: wrap; }
.notit-sheet .chip { border: 0; font: inherit; cursor: pointer; }