/* Luk — собственные стили без внешних зависимостей. Мобильная раскладка — основная, desktop дополняет её.
   Иконки — спрайт Lucide (static/luk/icons.svg, ISC). */
:root {
  --bg: #f4f5f7;
  --steps-card: #e9ecf1;  /* карточка подачи по шагам — чуть темнее фона страницы (25.10.2026) */
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --text: #16181d;
  --text-2: #3d434d;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-strong: #d3d7de;
  --primary: #0a84ff;
  --primary-dark: #0068d6;
  --primary-soft: #e8f2ff;
  --accent: #00a854;
  --accent-dark: #008c46;
  --accent-soft: #e6f6ed;
  --danger: #d93025;
  --danger-soft: #fdecea;
  --warn: #9a6200;
  --warn-bg: #fff6e0;
  --ok-bg: #e7f7ee;
  --ok: #0a6b39;
  --read: #1597ff;
  --heart: #ff3b5c;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --shadow-lg: 0 8px 28px rgba(16, 24, 40, .14);
  --focus: 0 0 0 3px rgba(10, 132, 255, .32);
  --header-h: 64px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
/* Шкала шрифта (шаг 3.2 «Премиальный вид», 11.10.2026, docs/design-system.md): 8 ступеней по телефону, в rem — на
   компьютере (корень 16 px) та же шкала чуть крупнее. Жирность — 400, 500, 600, 700; скругления — 4, 8, 12, 16, 24 и
   круг; отступы — кратные 4. Главная, шапка, островок меню, карточки ленты и подвал — прежние. */
:root {
  --fs-12: .8rem; --fs-13: .8667rem; --fs-14: .9333rem; --fs-15: 1rem; --fs-16: 1.0667rem; --fs-18: 1.2rem; --fs-22: 1.4667rem; --fs-28: 1.8667rem;
  --r-4: 4px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px;
}
@media (min-width: 900px) { :root { font-size: 16px; } }
* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--primary-dark); } }
h1 { font-size: var(--fs-22); margin: .1em 0 .55em; line-height: 1.2; letter-spacing: -.015em; font-weight: 700; }
h2 { font-size: var(--fs-18); margin: 1.3em 0 .6em; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
h3 { font-size: var(--fs-15); margin: .8em 0 .4em; font-weight: 600; }
.panel > h2:first-child, .panel > h1:first-child { margin-top: 0; }
@media (min-width: 900px) { h1 { font-size: var(--fs-28); } h2 { font-size: var(--fs-18); } }
p { margin: 0 0 .8em; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .wrap { padding: 0 24px; } }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.error { color: var(--danger); margin: .3em 0; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-8); }

/* Шапка */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar__row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo . actions" "search search search"; gap: 10px 12px; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.logo { grid-area: logo; font-weight: 850; font-size: 1.6rem; color: var(--text); letter-spacing: -.035em; display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
@media (hover: hover) and (pointer: fine) { .logo:hover { color: var(--text); } }
.logo__market { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; align-self: flex-end; margin-bottom: 2px; }
.search { grid-area: search; display: flex; min-width: 0; position: relative; }
.search__field { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.search__field .icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.search__input.search__input { padding-left: 40px; border-radius: 12px 0 0 12px; border-right: 0; height: 44px; background: var(--surface-2); }
.search__input.search__input:focus { background: #fff; }
.search__btn.btn { border-radius: 0 12px 12px 0; height: 44px; padding: 0 18px; }
.topbar__actions { grid-area: actions; display: flex; align-items: center; gap: 6px; }
.topnav { display: none; align-items: center; gap: 2px; }
.topnav__link { color: var(--text-2); font-size: .92rem; font-weight: 550; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; position: relative; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .topnav__link:hover { background: var(--surface-2); color: var(--text); } }
.topnav__link[aria-current="page"] { color: var(--primary); }
.topnav__link .badge { position: absolute; top: 2px; left: 22px; }
.topnav__sell { margin: 0; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; color: var(--text-2); position: relative; background: transparent; border: 0; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .iconbtn:hover { background: var(--surface-2); color: var(--text); } }
.iconbtn .badge { position: absolute; top: 4px; right: 3px; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1; border: 2px solid var(--surface); box-sizing: content-box; }
@media (max-width: 899px) { .sell-btn .sell-btn__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 12px; font-weight: 600; color: var(--text-2); }
.usermenu > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .usermenu > summary:hover { background: var(--surface-2); } }
.usermenu__panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; max-width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 40; }
.usermenu__head { padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow-wrap: anywhere; }
.usermenu__panel a, .usermenu__panel button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text); background: none; border: 0; cursor: pointer; text-align: left; font-size: .95rem; }
@media (hover: hover) and (pointer: fine) { .usermenu__panel a:hover, .usermenu__panel button:hover { background: var(--surface-2); } }
.usermenu__panel form { margin: 0; }
.avatar--sm { width: 32px; height: 32px; font-size: .85rem; }
@media (min-width: 900px) {
  .topbar__row { grid-template-columns: auto minmax(280px, 1fr) auto; grid-template-areas: "logo search actions"; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
  .topnav { display: flex; }
  .topbar__mobile { display: none; }
}
@media (max-width: 899px) { .sell-btn { padding: 8px 12px; min-height: 40px; } }

/* Нижняя навигация на телефоне */
/* Нижнее меню телефона (.tabbar) — «островок»: блок «Нижнее меню — островок» в конце файла. */

/* Формы */
input:not([type]), input[type=text], input[type=email], input[type=search], input[type=number], input[type=tel], input[type=url], input[type=date], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
input::placeholder, textarea::placeholder { color: #9aa1ab; }
@media (hover: hover) and (pointer: fine) { input:hover, select:hover, textarea:hover { border-color: #b9bfc8; } }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
input[type=file] { font: inherit; font-size: var(--fs-14); max-width: 100%; }
/* Safari на iPhone увеличивает страницу при фокусе на поле со шрифтом меньше 16px, и экран «разъезжается» (владелец,
   поле кода входа, 29.09.2026). На телефоне базовый шрифт 15px, поэтому поля — не меньше 16px; important перекрывает
   уменьшенные поля фильтров и сортировки. */
@media (max-width: 899px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1rem) !important; }
}
.btn { font: inherit; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h, 44px); padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; background: #eef0f3; color: var(--text); font-weight: 650; white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, transform .05s; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #e4e7eb; color: var(--text); text-decoration: none; } }
.btn--primary { background: var(--primary); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--primary-dark); color: #fff; } }
.btn--accent { background: var(--accent); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn--accent:hover { background: var(--accent-dark); color: #fff; } }
.btn--ghost { background: #fff; border-color: var(--line-strong); color: var(--text); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--surface-2); border-color: #bfc5ce; } }
.btn--soft { background: var(--primary-soft); color: var(--primary-dark); }
@media (hover: hover) and (pointer: fine) { .btn--soft:hover { background: #d9eaff; color: var(--primary-dark); } }
.btn--danger { background: #fff; border-color: #f1c3be; color: var(--danger); }
@media (hover: hover) and (pointer: fine) { .btn--danger:hover { background: var(--danger-soft); color: var(--danger); } }
.btn--link { background: none; border: 0; padding: 0; min-height: 0; color: var(--primary); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .btn--link:hover { background: none; color: var(--primary-dark); text-decoration: underline; } }
.btn--small { min-height: var(--btn-h-sm, 34px); padding: 6px 12px; font-size: .85rem; border-radius: 10px; }
.btn--large { min-height: var(--btn-h-lg, 52px); padding: 12px 24px; font-size: var(--fs-15); border-radius: var(--r-16); }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 18px; height: 18px; }
.field { display: block; margin: 0 0 16px; }
.field__label { display: block; font-weight: 600; margin-bottom: 8px; font-size: var(--fs-14); color: var(--text-2); }
.field__hint { display: block; color: var(--muted); font-size: var(--fs-13); margin-top: 4px; }
#event-date { scroll-margin-top: calc(var(--topbar-h) + 48px); } /* «Изменить дату» снятого билета (пакет 15): поле с подписью — не под шапкой */
.field__error { display: block; color: var(--danger); font-size: var(--fs-13); margin-top: 4px; font-weight: 500; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--danger); }
.check { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; cursor: pointer; line-height: 1.4; }
.check input { margin-top: 1px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.actions form { margin: 0; }
.stack { display: grid; gap: 12px; }
.inline-form { display: inline; margin: 0; }

/* Раскладка страницы */
.main { padding-top: 16px; padding-bottom: 48px; flex: 1; width: 100%; }
@media (min-width: 900px) { .main { padding-top: 24px; } }
/* Колонка: сообщение allauth («письмо отправлено») — над карточкой входа, а не рядом с ней (в ряд на телефоне страница
   уезжала вбок). */
.main--auth { display: flex; flex-direction: column; align-items: center; }
.main--auth > .flash { width: 100%; max-width: 460px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head__meta { color: var(--muted); font-size: var(--fs-14); }
/* «Черновик сохраняется сам» → «Черновик сохранён в …»: на телефоне рядом с заголовком строке не хватает места, поэтому
   у неё своя строка под заголовком с самого начала — форма и «Далее» не прыгают (сдвиг вёрстки, пакет 8, 14.10.2026). */
@media (max-width: 699px) {
  .page-head:has(> [data-autosave-status]) { row-gap: 4px; }
  .page-head > [data-autosave-status] { flex-basis: 100%; min-height: 20px; line-height: 20px; }
}
.panel { background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; }
@media (min-width: 900px) { .panel { padding: 24px; } }
.panel--narrow, .auth { width: 100%; max-width: 460px; }
.panel--center { margin-left: auto; margin-right: auto; }
.panel__title { display: flex; align-items: center; gap: 8px; }
.auth { background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 28px 24px; }
@media (min-width: 600px) { .auth { padding: 36px 36px 32px; margin-top: 24px; } }
.auth h1 { font-size: var(--fs-22); }
.auth__lead { color: var(--muted); margin-bottom: 20px; }
/* Один вход для всех (ADR 0012): Google, Telegram и почта — равные кнопки одного вида; поле почты раскрывает кнопка
   почты (<details>, без JavaScript). */
.auth__methods { display: grid; gap: 8px; margin: 0 0 16px; }
.auth__methods form { margin: 0; }
.auth__email > summary { list-style: none; }
.auth__email > summary::-webkit-details-marker { display: none; }
.auth__email[open] > summary { background: var(--surface-2); border-color: var(--primary); }
.auth__methods .auth__email-form { margin-top: 16px; }
.auth__email-form .field { margin-bottom: 16px; }
.auth__methods ~ .muted.small { margin: 0 0 10px; }
.auth__consent { margin: 16px 0 0; }
.btn--provider { background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font-weight: 600; gap: 8px; }
@media (hover: hover) and (pointer: fine) { .btn--provider:hover { background: var(--surface-2); color: var(--text); } }
.btn--provider:disabled { opacity: .55; cursor: not-allowed; background: var(--surface); }
.btn--provider .icon { width: 20px; height: 20px; }
.brand { width: 20px; height: 20px; flex: none; vertical-align: middle; }
.login-methods { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; }
.login-methods li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.login-methods li:last-child { border-bottom: 0; }
.login-methods .icon, .login-methods .brand { width: 22px; height: 22px; }
.login-methods__name { font-weight: 600; }
.login-methods__state { margin-left: auto; min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--fs-13); text-align: right; }
.login-methods__state--on { color: var(--ok); font-weight: 600; }
.login-methods__note { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-13); overflow-wrap: anywhere; }  /* номер Telegram (ADR 0017) */
/* Строка Telegram (ADR 0032): не подключён — пояснение, зачем; подключён — переключатель «Сообщения в Telegram». Под
   значком и названием, во всю ширину строки. */
.login-methods li:has(> .login-methods__why, > .login-methods__switch) { flex-wrap: wrap; row-gap: 8px; scroll-margin-top: calc(var(--topbar-h) + 16px); }  /* #telegram после сохранения — не под шапкой */
.login-methods__why, .login-methods__switch { flex: 1 0 100%; margin: 0; padding-left: 32px; }
.login-methods__why { color: var(--muted); font-size: var(--fs-14); line-height: 1.45; }
.login-methods__toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; font-weight: 600; cursor: pointer; }
.login-methods__switch .login-methods__note { margin-top: 8px; text-align: left; }
.auth__divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-13); margin: 16px 0; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-14); }
/* «Запросить письмо ещё раз» — кнопка формы (выход из незавершённого входа), но в тексте выглядит как ссылка. */
.auth__foot .btn--link { display: inline; font-size: inherit; font-weight: inherit; white-space: normal; vertical-align: baseline; }
.auth__foot form { margin: 0; }
.auth__foot form + form { margin-top: 8px; }
/* «Подключить Telegram» (templates/miniapp/connect.html, connect_app.html): в браузере имя профиля Telegram — подписью
   под проверенным @именем; в приложении — карточка аккаунта: буква, имя и почта частично. */
.connect__telegram { overflow-wrap: anywhere; }
.connect__name { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-14); overflow-wrap: anywhere; }
.connect__after { margin-top: 12px; }
.connect__account { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface-2); }
.connect__who { display: flex; flex-direction: column; min-width: 0; }
.connect__who strong { overflow-wrap: anywhere; }
.connect__email { color: var(--muted); font-size: var(--fs-14); overflow-wrap: anywhere; }
/* «Способы входа → Подключить или отключить» (templates/socialaccount/connections.html): строки как в панели настроек —
   значок, название и состояние столбиком, кнопка справа; на узком экране кнопка не уезжает за край. */
.connections { max-width: 560px; }
.login-methods--manage { margin-bottom: 16px; }
.login-methods--manage li { padding: 12px 0; }
.login-methods--manage .login-methods__what { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.login-methods--manage .login-methods__state { margin-left: 0; text-align: left; }
.login-methods--manage .login-methods__note { text-align: left; }
.login-methods--manage form { margin: 0; flex: none; }
.login-methods--manage .btn { flex: none; }
/* «Это моё объявление» (ADR 0017): автор перенесённого объявления подтверждает авторство через Telegram. Узкая карточка
   входа; сверху — само объявление; галочка рисуется SVG-обводкой, при prefers-reduced-motion — сразу готовой. */
.claim__listing { display: flex; align-items: center; gap: 12px; padding: 8px; margin: -8px 0 20px; border: 1px solid var(--line); border-radius: var(--r-16); color: var(--text); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .claim__listing:hover { background: var(--surface-2); } }
.claim__cover { width: 52px; height: 52px; border-radius: var(--r-12); object-fit: cover; flex: none; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: #9aa1ab; }
.claim__title { font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.claim__note { margin: 8px 0 0; }
.claim__done { text-align: center; }
.claim__done .auth__lead { margin-bottom: 24px; }
.claim__done .claim__note { margin: -8px 0 24px; }  /* «Ещё N ваших объявлений пока здесь…» */
.claim__icon { width: 64px; height: 64px; margin: 4px auto 16px; border-radius: 50%; background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.claim__icon .icon { width: 30px; height: 30px; }
.claim__icon--ok { background: var(--ok-bg); color: var(--ok); }
.claim-check { display: block; width: 76px; height: 76px; margin: 4px auto 16px; animation: claim-pop .32s ease-in-out .78s both; }
.claim-check__circle { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 2.5; stroke-dasharray: 152; stroke-dashoffset: 152; animation: claim-stroke .55s cubic-bezier(.65, 0, .45, 1) forwards; }
.claim-check__mark { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: claim-stroke .38s cubic-bezier(.65, 0, .45, 1) .48s forwards; }
@keyframes claim-stroke { to { stroke-dashoffset: 0; } }
@keyframes claim-pop { 50% { transform: scale(1.07); } }
.claim-check--still, .claim-check--still .claim-check__circle, .claim-check--still .claim-check__mark { animation: none; }
.claim-check--still .claim-check__circle, .claim-check--still .claim-check__mark { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .claim-check, .claim-check__circle, .claim-check__mark { animation: none; }
  .claim-check__circle, .claim-check__mark { stroke-dashoffset: 0; }
}
.claim .btn { white-space: normal; text-align: center; }
.claim__step { font-size: var(--fs-16); line-height: 1.35; margin: 4px 0 16px; }
.claim__retry { margin-top: 8px; }
.claim__contact { background: var(--surface-2); border-radius: var(--r-16); padding: 16px 16px; margin: 0 0 16px; }
.claim__contact p { margin: 0 0 8px; overflow-wrap: anywhere; }
.claim__contact form { margin: 8px 0 0; }
.notice.claim-hint { display: flex; gap: 12px; align-items: flex-start; }
.claim-hint > .icon { flex: none; margin-top: 2px; }
.claim-hint__text { flex: 1; min-width: 0; }
.claim-hint__text p { margin: 0 0 8px; }
.claim-hint__actions { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.claim-hint__actions form { margin: 0; }
.claim-found { display: grid; gap: 8px; margin: 0 0 16px; }
.claim-found__item { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--surface); border-radius: var(--r-16); box-shadow: var(--shadow); }
.claim-found__item > a { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.claim-found__item .claim__title { flex: 1; min-width: 0; }
.claim-found__item form { margin: 0; }
.claim-found__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 20px; }
.claim-found__actions form { margin: 0; }

/* «Это ваше объявление?» (01.10.2026): маленькая спокойная плашка над фото — не призыв для покупателя. Правило про
   оплату у такого объявления — мелко в блоке с ценой, под кнопками связи. */
.claim-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 8px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: var(--fs-13); font-weight: 600; line-height: 1.25; text-decoration: none; }
.claim-pill .icon { width: 15px; height: 15px; flex: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .claim-pill:hover { border-color: var(--line-strong); color: var(--text); } }
.listing__buy .listing__safety { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-12); }
.listing__safety .icon { width: 16px; height: 16px; flex: none; }
/* Страница автора: «Забрать себе» и «Удалить с Luk» — два равных пути с пояснением под кнопкой; «ещё объявления» —
   отдельно, под чертой. */
.claim__option { margin: 0 0 16px; }
.claim__option--remove { margin-top: 16px; }  /* и после кнопок входа (шаг входа, Telegram привязан к аккаунту) */
.claim__option form { margin: 0; }
.claim__option .claim__note { margin: 8px 0 0; text-align: center; }
.claim__more { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; }
.claim__more-title { margin: 0 0 12px; font-weight: 600; }
.claim__more-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.claim__more-actions form { flex: 1 1 140px; margin: 0; }
.claim__more-actions .btn { width: 100%; }
.flash { margin-bottom: 16px; display: grid; gap: 8px; }
.flash__item { display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r-16); background: var(--ok-bg); color: var(--ok); margin: 0; font-weight: 500; border: 1px solid #c9ecd7; }
.flash__item--error, .flash__item--warning { background: var(--danger-soft); color: #a3261d; border-color: #f6cbc6; }
.flash__item--info { background: var(--primary-soft); color: #0b4fa3; border-color: #cfe3ff; }
.notice { display: block; padding: 12px 16px; border-radius: var(--r-16); background: var(--warn-bg); color: #6b4700; margin: 0 0 16px; border: 1px solid #f5e0a8; }
.notice p:last-child { margin-bottom: 0; }
.notice form { margin: 8px 0 0; }
.notice--ok { background: var(--ok-bg); color: var(--ok); border-color: #c9ecd7; }
.notice--info { background: var(--primary-soft); color: #0b4fa3; border-color: #cfe3ff; }
.bump { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; }
.notice--danger { background: var(--danger-soft); color: #a3261d; border-color: #f6cbc6; }
.notice a { font-weight: 600; }
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0; color: var(--muted); font-size: .9rem; margin-top: auto; }
.footer__grid { display: grid; gap: 20px 32px; grid-template-columns: 1fr 1fr; }
.footer__about { grid-column: 1 / -1; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: minmax(0, 2fr) 1fr 1fr; } .footer__about { grid-column: auto; } .footer__grid--cities { grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr; } }
.footer__brand { color: var(--text); font-weight: 700; }
.footer__note { font-size: .84rem; margin: 6px 0 0; max-width: 460px; }
.footer__col { display: grid; gap: 6px; align-content: start; }
.footer__title { color: var(--text); font-weight: 650; font-size: .86rem; }
.footer a { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--text); } }
/* Подвал на телефоне — примерно втрое ниже (решение владельца 25.10.2026), ничего не убрано: «Luk · город» и
   предупреждение мельче, города — строкой через точку, «Поддержка · Безопасные сделки · Правила · Конфиденциальность» —
   строкой с переносом; видимых заголовков колонок нет, у nav остаётся aria-label. Строка ссылок — 30 px, между ссылками
   17 px: пальцу не промахнуться. Точка — пустой ::before, читалка экрана её не произносит. Компьютер — как раньше. */
@media (max-width: 759px) {
  .footer { padding: 12px 0 8px; }
  .footer__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 0 17px; }
  .footer__about { flex: 0 0 100%; margin-bottom: 4px; }
  .footer__brand { font-size: .8rem; }
  .footer__note { margin-top: 1px; font-size: .75rem; line-height: 1.35; }
  .footer__title { display: none; }
  .footer__grid--cities > .footer__col:nth-child(2) { flex: 0 0 100%; }  /* города — своей строкой */
  .footer__col { display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: .8rem; }
  .footer__col a { display: inline-flex; align-items: center; min-height: 30px; }
  .footer__col a + a::before { content: ""; flex: none; width: 3px; height: 3px; margin: 0 7px; border-radius: 50%; background: currentColor; opacity: .55; }
}
.legal { display: grid; gap: 16px; }
@media (min-width: 960px) { .legal { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; } }
.legal__nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.legal__nav::-webkit-scrollbar { display: none; }
.legal__nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-12); color: var(--text-2); font-weight: 600; font-size: var(--fs-14); white-space: nowrap; background: var(--surface); border: 1px solid var(--line); }
.legal__nav a[aria-current="page"] { background: var(--primary-soft); border-color: #cfe3ff; color: var(--primary-dark); }
@media (min-width: 960px) { .legal__nav { flex-direction: column; position: sticky; top: calc(var(--header-h) + 16px); } .legal__nav a { border: 0; background: none; } @media (hover: hover) and (pointer: fine) { .legal__nav a:hover { background: var(--surface); } } .legal__nav a[aria-current="page"] { background: var(--primary-soft); } }
.legal__doc { max-width: 820px; }
.legal__meta { color: var(--muted); font-size: var(--fs-13); margin-top: -4px; }
.legal__lead { font-size: var(--fs-16); color: var(--text); }
.legal__toc { background: var(--surface-2); border-radius: var(--r-16); padding: 12px 16px; margin: 12px 0 8px; }
.legal__toc ol { margin: 0; padding-left: 20px; columns: 2 220px; column-gap: 24px; }
.legal__toc li { margin: 2px 0; }
.legal__doc h2 { scroll-margin-top: 90px; }

/* Главная */
.hero { background: linear-gradient(120deg, #0a84ff 0%, #2b6cf6 55%, #6f4ff0 100%); color: #fff; border-radius: var(--radius-lg); padding: 22px 20px; margin-bottom: 20px; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.hero h1 { font-size: 1.45rem; margin: 0 0 6px; color: #fff; }
.hero p { margin: 0; opacity: .92; max-width: 560px; }
.hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; position: relative; z-index: 1; }
.hero__fact { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); font-size: .88rem; line-height: 1.2; color: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); }
.hero__fact b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.hero__fact-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hero__fact-icon .icon { width: 14px; height: 14px; }
.hero__cta { margin-top: 16px; position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.hero__cta .btn { background: #fff; color: var(--primary-dark); }
@media (hover: hover) and (pointer: fine) { .hero__cta .btn:hover { background: #eef5ff; } }
@media (min-width: 900px) { .hero { padding: 32px 36px; } .hero h1 { font-size: 2rem; } }
.sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
@media (min-width: 600px) { .sections { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sections { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } }
.sections:empty { display: none; } /* все разделы города скрыты как незаполненные (ADR 0044) — без пустой полосы */
.section-tile { background: var(--surface); border-radius: var(--radius); padding: 12px 10px; box-shadow: var(--shadow); color: var(--text); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 92px; transition: box-shadow .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) { .section-tile:hover { color: var(--text); box-shadow: var(--shadow-lg); transform: translateY(-1px); } }
.section-tile__icon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--tile-bg, var(--primary-soft)); color: var(--tile-fg, var(--primary)); }
.section-tile__name { font-weight: 650; font-size: .88rem; line-height: 1.25; }
.section-tile__count { color: var(--muted); font-size: .78rem; margin-top: -4px; }
@media (min-width: 900px) { .section-tile { padding: 14px; } .section-tile__name { font-size: .95rem; } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 8px 0 12px; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 600; font-size: .92rem; }

/* Категории, чипы, хлебные крошки */
.chips { display: flex; gap: 8px; margin: 0 0 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chips { flex-wrap: wrap; overflow: visible; } }
.chip { padding: 7px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: .88rem; font-weight: 550; white-space: nowrap; flex: none; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--primary); color: var(--primary); } }
.chip--active { background: var(--text); color: #fff; border-color: var(--text); }
@media (hover: hover) and (pointer: fine) { .chip--active:hover { background: var(--text); color: #fff; border-color: var(--text); } }
.breadcrumbs { font-size: var(--fs-13); color: var(--muted); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.breadcrumbs a { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .breadcrumbs a:hover { color: var(--primary); } }
.breadcrumbs__sep { color: var(--muted); }  /* «/» читается рядом с подписями (контраст 1,8 → 5 : 1, 13.10.2026) */

/* Карточки выдачи */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .grid--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--text); display: flex; flex-direction: column; position: relative; transition: box-shadow .15s, transform .15s; }
@media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); } }
.card__link { color: inherit; display: flex; flex-direction: column; flex: 1; }
@media (hover: hover) and (pointer: fine) { .card__link:hover { color: inherit; } }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__media { position: relative; }
.card__cover { aspect-ratio: 4 / 3; background: #e9ecf1; object-fit: cover; width: 100%; }
.card__cover--empty { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; color: var(--muted); font-size: .85rem; background: linear-gradient(135deg, #eef2f7, #e3e8ef); }
.card__cover--job { background: linear-gradient(135deg, #e8f2ff, #dfe9fb); color: #3b5b8f; }
.card__photos { position: absolute; left: 8px; bottom: 8px; background: rgba(15, 18, 24, .62); color: #fff; font-size: .72rem; font-weight: 600; padding: 3px 7px; border-radius: 8px; display: inline-flex; gap: 4px; align-items: center; }
.card__photos .icon { width: 13px; height: 13px; }
.card__body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.card__price { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.card__title { font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; color: var(--text-2); font-size: .93rem; }
.card__meta { color: var(--muted); font-size: .78rem; margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
/* Дата и район одной строкой (B13): дата («сегодня», «вчера», «9 окт.») — целиком, район в конце — с многоточием */
.card__meta--line { display: flex; align-items: baseline; min-width: 0; white-space: nowrap; }
.card__when { flex: none; }
.card__where { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card__when + .card__where::before { content: "·"; margin: 0 .3em; }
@media (min-width: 900px) { .card__price { font-size: 1.1rem; } .card__body { padding: 12px 14px 14px; } }
.fav { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.fav__btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #3d434d; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); transition: transform .1s, color .15s; }
@media (hover: hover) and (pointer: fine) { .fav__btn:hover { color: var(--heart); transform: scale(1.06); } }
.fav__btn .icon { width: 19px; height: 19px; }
.fav__btn[aria-pressed="true"] { color: var(--heart); }
.fav__btn[aria-pressed="true"] .icon { fill: currentColor; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); }
.empty__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: var(--r-16); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: #9aa1ab; }
.empty__icon .icon { width: 28px; height: 28px; }
.empty__title { color: var(--text); font-weight: 700; font-size: var(--fs-16); margin-bottom: 4px; }
.empty .btn { margin-top: 16px; }
.empty h1 { font-size: var(--fs-22); color: var(--text); }
.pager { margin: 24px 0 8px; text-align: center; }
.pager .btn { min-width: 220px; }

/* Фильтры */
.layout { display: grid; gap: 16px; }
@media (min-width: 960px) { .layout { grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; } }
.filters { background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 16px; }
@media (min-width: 960px) { .filters { position: sticky; top: calc(var(--header-h) + 16px); } }
.filters .field { margin-bottom: 16px; }
.filters__toggle { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-weight: 600; }
.filters__toggle::-webkit-details-marker { display: none; }
.filters__count { background: var(--primary); color: #fff; border-radius: var(--r-12); font-size: var(--fs-12); padding: 1px 8px; margin-left: 8px; }
.filters__body { margin-top: 16px; }
.filters__actions { display: grid; gap: 8px; }
@media (min-width: 960px) { .filters__toggle { pointer-events: none; } .filters__toggle .icon { display: none; } }
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.results-bar__count { color: var(--muted); font-size: var(--fs-14); }
.sortform { display: flex; align-items: center; gap: 8px; margin: 0; }
.sortform select { min-height: 38px; padding-top: 6px; padding-bottom: 6px; width: auto; font-size: .9rem; border-radius: 10px; }

/* Страница объявления */
.listing { display: grid; gap: 16px; }
@media (min-width: 960px) { .listing { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } }
.listing__title { margin-bottom: 8px; }
.listing__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: var(--fs-14); margin: 0 0 4px; }
.listing__meta span { display: inline-flex; align-items: center; gap: 8px; }
.listing__badges { margin: 4px 0 16px; }
.badge-soft { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--text-2); }
.listing__seller { display: grid; gap: 16px; }
.listing__seller-role { margin: 0; font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.listing__seller .seller { margin: 0; align-items: flex-start; }
.seller__info { display: grid; gap: 4px; min-width: 0; }
.seller__info .seller__name { font-size: var(--fs-16); line-height: 1.25; overflow-wrap: anywhere; }
.seller__fact { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-13); }
.listing__seller .btn .icon--sm { margin-left: 2px; }
.listing__seller .safety { border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.rail { margin-top: 8px; }
.grid--rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 44%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 10px; scrollbar-width: thin; }
.grid--rail > * { scroll-snap-align: start; }
@media (min-width: 600px) { .grid--rail { grid-auto-columns: minmax(190px, 30%); } }
@media (min-width: 1100px) { .grid--rail { grid-auto-columns: calc((100% - 4 * 16px) / 5); } }
.listing__aside { display: grid; gap: 16px; }
@media (min-width: 960px) { .listing__aside { position: sticky; top: calc(var(--header-h) + 16px); } }
.gallery { background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 8px; margin-bottom: 16px; }
.gallery__stage { position: relative; border-radius: var(--r-16); overflow: hidden; background: #111418; }
/* Лента фото (docs/smooth-ui.md): прокрутка с привязкой — фото едет за пальцем, по одному за жест; полосы прокрутки нет,
   прокрутка не передаётся странице и не листает историю жестом «назад». Высота — из пропорции, а не из атрибута height. */
.gallery__track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__main { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #111418; cursor: zoom-in; }
.gallery__track > .gallery__main { flex: 0 0 100%; min-width: 0; height: auto; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__main.is-cover { background-position: center; background-size: contain; background-repeat: no-repeat; }
.gallery.is-opening .gallery__track { cursor: progress; }
.gallery__main.card__cover--empty { cursor: default; background: linear-gradient(135deg, #eef2f7, #e3e8ef); }
.gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); color: var(--text); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery.is-enhanced .gallery__nav { display: inline-flex; }
.gallery:not(.is-enhanced) .gallery__counter { display: none; }  /* без скрипта счётчик не следил бы за лентой */
.gallery__counter { position: absolute; right: 12px; bottom: 12px; background: rgba(15, 18, 24, .62); color: #fff; font-size: var(--fs-12); font-weight: 600; padding: 4px 8px; border-radius: var(--r-12); }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; }
.gallery__thumb { width: 84px; height: 63px; object-fit: cover; border-radius: var(--r-8); border: 2px solid transparent; cursor: pointer; flex: none; opacity: .75; transition: opacity .15s; }
@media (hover: hover) and (pointer: fine) { .gallery__thumb:hover { opacity: 1; } }
.gallery__thumb--active { border-color: var(--primary); opacity: 1; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 10, 14, .94); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.lightbox__close, .lightbox__nav { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .26); } }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__counter { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 600; font-size: var(--fs-14); }
.listing__price { font-size: var(--fs-28); font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; }
.listing__sub { color: var(--muted); font-size: var(--fs-13); margin-bottom: 16px; }
.listing__desc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-15); line-height: 1.6; color: var(--text-2); }
.listing__actions-top { display: flex; gap: 8px; }
.seller { display: flex; gap: 12px; align-items: center; margin: 0 0 16px; }
.seller__name { font-weight: 700; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .seller__name:hover { color: var(--primary); } }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--avatar-bg, #dfe7f5); color: var(--avatar-fg, #3b5b8f); display: flex; align-items: center; justify-content: center; font-weight: 750; flex: none; font-size: 1.1rem; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.7rem; }
.avatar--photo { background: var(--surface-2, #eef1f6); overflow: hidden; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; scroll-margin-top: calc(var(--topbar-h) + 16px); } /* после загрузки (#photo) — не под шапкой телефона */
.avatar-edit__body { flex: 1; min-width: 0; }
.avatar-edit__body .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.avatar-edit__body form { margin: 0; }
.avatar-edit label.btn:focus-within { box-shadow: var(--focus); } /* поле файла скрыто — фокус видно на кнопке */
/* Фото профиля (§28): аватар со значком камеры — label того же поля файла, что и кнопка «Загрузить фото» */
.avatar-pick { position: relative; display: block; flex: none; border-radius: 50%; cursor: pointer; }
.avatar-pick__badge { position: absolute; right: -3px; bottom: -3px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand, var(--primary)); color: #fff; border: 2px solid var(--surface); box-shadow: 0 2px 6px rgba(22, 26, 60, .22); }
@media (hover: hover) and (pointer: fine) { .avatar-pick:hover .avatar-pick__badge { background: var(--brand-dark, var(--primary-dark)); } }
.side-actions { display: grid; gap: 8px; }
.side-actions form { margin: 0; }
.contacts { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.contacts li { background: var(--surface-2); border-radius: var(--r-12); padding: 8px 12px; }
.qr svg { width: 140px; height: 140px; margin-top: 8px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.safety { display: flex; gap: 8px; color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }
.safety .icon { color: #9aa1ab; margin-top: 2px; }
.listing-report { margin-top: 4px; font-size: var(--fs-14); }
.listing-report a { color: var(--muted); display: inline-flex; gap: 8px; align-items: center; }
@media (hover: hover) and (pointer: fine) { .listing-report a:hover { color: var(--danger); } }
/* Недвижимость (ADR 0020): строка для покупателя у «Пожаловаться» и жёлтая плашка в форме объявления. */
.listing-report__bait { margin: 2px 0 0; font-size: var(--fs-14); color: var(--text-2); }
.report-form__reason { display: grid; gap: 4px; margin-bottom: 12px; }
.report-form__reason p { margin: 0; }
.bait-banner { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--r-16); background: #fff1b8; border: 1px solid #f0c94a; color: #4f3a00; font-size: var(--fs-14); line-height: 1.45; }
.bait-banner .icon { flex: none; width: 22px; height: 22px; color: #b07a00; margin-top: 1px; }
.bait-banner p { margin: 0; }
.bait-banner strong { color: #3d2c00; }
.panel.bait-check { border: 1px solid #f0c94a; background: #fffaf0; }
.bait-check__head { display: flex; gap: 8px; align-items: flex-start; }
.bait-check__head .icon { color: #b07a00; width: 24px; height: 24px; margin-top: 2px; }
.bait-check__head h2 { margin: 0 0 8px; font-size: var(--fs-16); }
.bait-check__deadline { margin: 4px 0 8px; }
.bait-check__options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.bait-check__option { padding: 12px; border-radius: var(--r-16); background: var(--surface); border: 1px solid var(--line); }
.bait-check__option form { display: grid; gap: 8px; justify-items: start; }
.bait-check__option p { margin: 0; }
.bait-check__note { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-18); font-weight: 700; padding: 8px 8px; border-radius: var(--r-12); background: var(--surface-2); border: 1px dashed var(--line-strong); }
.bait-check__photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.bait-check__photos img, .bait-check__photo { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-12); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: var(--fs-12); color: var(--muted); gap: 4px; flex-direction: column; }
.bait-check__more { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.still-rented p { margin: 0 0 8px; }
.still-rented__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.still-rented__hint { margin: 0; opacity: .85; }
.bait-proofs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.bait-proofs img { width: 220px; max-width: 100%; border-radius: var(--r-12); }
.bait-proofs--small img { width: 72px; height: 72px; object-fit: cover; }
.bait-history__row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.bait-history__row--proven { border-left: 3px solid var(--danger); padding-left: 8px; }
a.bait-hint { display: flex; gap: 8px; align-items: center; color: #6b4700; text-decoration: none; font-weight: 600; }
.notification__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: var(--r-24); font-size: var(--fs-12); font-weight: 600; background: #eef0f3; color: var(--text-2); white-space: nowrap; }
.status--active { background: var(--ok-bg); color: var(--ok); }
.status--pending, .status--draft { background: var(--primary-soft); color: #0b4fa3; }
.status--warn { background: var(--warn-bg); color: var(--warn); }
.status--muted { background: #eef0f3; color: var(--muted); }
.status--danger { background: var(--danger-soft); color: #a3261d; }

/* Профиль */
.profile-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.profile-head h1 { margin: 0 0 2px; }
.profile-stats { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-14); }
.profile-stats b { color: var(--text); font-size: var(--fs-16); }

/* Мои объявления */
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 16px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { padding: 8px 16px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 8px; align-items: center; }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--text); } }
.tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--primary); }
.tab__count { background: #eef0f3; color: var(--text-2); border-radius: var(--r-12); padding: 0 8px; font-size: var(--fs-12); }
.quota { display: flex; align-items: center; gap: 12px; }
.quota__bar { flex: 1; height: 6px; background: #eef0f3; border-radius: var(--r-4); overflow: hidden; min-width: 120px; }
.quota__fill { height: 100%; background: var(--accent); border-radius: var(--r-4); }
.mine { display: grid; gap: 8px; }
.mine__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; background: var(--surface); border-radius: var(--r-16); box-shadow: var(--shadow); padding: 12px; align-items: center; color: var(--text); }
@media (hover: hover) and (pointer: fine) { a.mine__item:hover { color: var(--text); box-shadow: var(--shadow-lg); } }
@media (min-width: 700px) { .mine__item { grid-template-columns: 128px minmax(0, 1fr) auto; } }
.mine__cover { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-12); background: #e9ecf1; display: flex; align-items: center; justify-content: center; color: #9aa1ab; }
@media (min-width: 700px) { .mine__cover { width: 128px; height: 96px; } }
.mine__title { font-weight: 600; margin-bottom: 2px; overflow-wrap: anywhere; }
.mine__price { font-weight: 700; }
.mine__meta { color: var(--muted); font-size: var(--fs-13); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mine__go { display: none; color: #9aa1ab; }
.mine-draft { position: relative; min-width: 0; border-radius: var(--r-16); }
.mine-draft__front { position: relative; transition: transform .18s ease; }
.mine-draft .mine__item { padding-right: 60px; }
.mine-draft .mine__go { display: none; }
.mine-draft .mine-draft__menu { position: absolute; top: 12px; right: 8px; }
.mine-draft:has(details[open]) { z-index: 21; }
.mine-draft__menu > summary { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-8); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .mine-draft__menu > summary:hover { background: var(--surface-2); } }
.mine-draft__menu .pop__panel { min-width: 160px; }
.mine-draft__menu .pop__panel button { min-height: 44px; color: var(--danger); }
.mine-draft__menu .pop__panel .icon { color: inherit; }
.mine-draft.is-touch-ready { touch-action: pan-y pinch-zoom; }
.mine-draft.is-dragging .mine-draft__front { transition: none; }
.mine-draft.is-dragging, .mine-draft[data-swiped] { overflow: hidden; }
.mine-draft__delete { position: absolute; right: 0; top: 0; bottom: 0; width: 104px; margin: 0; }
.mine-draft__delete button { width: 100%; height: 100%; border: 0; border-radius: var(--r-16); background: var(--danger); color: #fff; display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; font: inherit; font-weight: 600; cursor: pointer; }
@media (min-width: 700px) { .mine-draft .mine__item { grid-template-columns: 128px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mine-draft__front { transition: none; } }
@media (min-width: 700px) { .mine__go { display: block; } }
.manage-head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; margin-bottom: 16px; }
@media (min-width: 700px) { .manage-head { grid-template-columns: 180px minmax(0, 1fr); } }
.manage-head .mine__cover { width: 112px; height: 84px; }
@media (min-width: 700px) { .manage-head .mine__cover { width: 180px; height: 135px; } }
.manage-head h1 { font-size: var(--fs-22); margin: 0 0 4px; }

/* Редактор */
.editor { display: grid; gap: 16px; }
@media (min-width: 1000px) { .editor { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } }
.editor__main { min-width: 0; }
.editor__section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; } /* подпись поля не липнет к заголовку */
.editor__photos .editor__section-title { margin-bottom: 4px; } /* у фото отступ даёт поле загрузки */
.editor__step { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-12); font-weight: 700; flex: none; }
/* Кнопки «Опубликовать» и «Сохранить» — в конце формы и на телефоне: закреплённая внизу полоса занимала четверть
   экрана над нижней панелью и мешала заполнять объявление (владелец, 30.09.2026). */
.editor__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 0; }
@media (min-width: 900px) { .editor__actions { margin: 8px 0 0; } }
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
@media (min-width: 600px) { .photos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.photo { position: relative; min-width: 0; }
.photo__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-12); background: #e9ecf1; display: flex; align-items: center; justify-content: center; font-size: var(--fs-12); color: var(--muted); text-align: center; padding: 4px; }
img.photo__img { padding: 0; }
.photo__img[data-processing], .photo__img--wait { background: linear-gradient(90deg, #e9ecf1 25%, #f4f6f9 37%, #e9ecf1 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.photo__bar { display: flex; gap: 4px; margin-top: 8px; }
.photo__bar button { flex: 1; min-height: 30px; padding: 2px 4px; font-size: var(--fs-12); }
.photo__cover { position: absolute; top: 6px; left: 6px; font-size: var(--fs-12); color: #fff; font-weight: 700; background: var(--accent); padding: 2px 8px; border-radius: var(--r-8); display: none; }
.photo:first-child .photo__cover { display: block; }
.photo__img--error { color: var(--danger); gap: 4px; flex-direction: column; }
.photo__state { position: absolute; left: 6px; right: 6px; bottom: 44px; font-size: var(--fs-12); font-weight: 600; color: #fff; background: rgba(22, 24, 29, .72); border-radius: var(--r-8); padding: 4px 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo.is-uploading .photo__img, .photo.is-processing .photo__img, .photo.is-retrying .photo__img { opacity: .65; }
.photo.is-uploading .photo__state::before, .photo.is-processing .photo__state::before, .photo.is-preparing .photo__state::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: spin .8s linear infinite; vertical-align: -1px; }
.photo.is-failed .photo__img { opacity: .4; }
.photo.is-failed .photo__state { background: var(--danger); }
@keyframes spin { to { transform: rotate(360deg); } }
.upload { border: 2px dashed var(--line-strong); border-radius: var(--r-16); padding: 16px; text-align: center; background: var(--surface-2); display: grid; gap: 8px; justify-items: center; color: var(--muted); margin: 12px 0; }
.upload.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
/* «Загрузить» — только без скрипта. Со скриптом (app.js отмечает <html> до первого кадра) её не видно сразу, а не после
   загрузки editor.js: иначе на компьютере блок фото сжимается на глазах (сдвиг вёрстки, пакет 8, 14.10.2026). */
html[data-app-platform] .upload [data-upload-submit] { display: none; }
.upload__buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%; }
.upload__buttons .btn { flex: 1 1 0; min-width: 150px; min-height: 48px; }
.upload__buttons .btn .icon { width: 20px; height: 20px; }
/* На телефоне — два понятных пути: камера и галерея (iOS и Android открывают камеру по capture, а «Выбрать фото» —
   свой выбор галереи или файлов). На широком экране с мышью камеры нет: только выбор и перетаскивание файлов. */
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .upload__camera { display: none; }
  .upload__buttons .btn { flex: 0 0 auto; }
}
@media (hover: none), (pointer: coarse), (max-width: 699px) { .upload__drop { display: none; } .upload { border-style: solid; border-width: 1px; background: var(--surface); } }
.editor__photos .photos:empty { margin: 0; }
.catpick__auto { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--accent-soft); color: #0c5f36; border-radius: var(--r-16); padding: 8px 16px; margin: 0 0 12px; }
.catpick__auto .icon { color: var(--accent); flex: none; }
.catpick__auto .btn--link { margin-left: auto; }
.catpick__alts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.catpick__alts .chip { cursor: pointer; }
.segmented { display: flex; flex-wrap: wrap; gap: 8px; }
.segmented__item { position: relative; }
.segmented__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented__item span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: var(--r-24); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: var(--fs-14); }
.segmented__item input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.segmented__item input:focus-visible + span { box-shadow: var(--focus); }
.segmented--soft .segmented__item input:checked + span { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
fieldset.field { border: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; }
.editor__more > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.editor__more > summary::-webkit-details-marker { display: none; }
.editor__more > summary::after { content: "Показать"; margin-left: auto; color: var(--primary); font-weight: 600; font-size: var(--fs-14); }
.editor__more[open] > summary { margin-bottom: 16px; }
.editor__more[open] > summary::after { content: "Скрыть"; }
.editor__more .editor__section-title { margin: 0; font-size: var(--fs-16); font-weight: 700; }
.question { display: grid; gap: 4px; }
.question .actions { margin-top: 8px; }
.next-step { display: flex; gap: 12px 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--accent-soft); border-color: #c9ecd7; }
.next-step h2 { margin: 0 0 4px; font-size: var(--fs-16); }
.next-step p { margin: 0; }
@media (max-width: 599px) { .next-step form, .next-step .btn { width: 100%; } }
.preview { display: grid; gap: 12px; }
@media (min-width: 1000px) { .preview { position: sticky; top: calc(var(--header-h) + 16px); } }
.preview .card { max-width: 300px; }
.preview h2 { margin: 0; font-size: var(--fs-15); color: var(--muted); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .preview .card:hover { transform: none; } }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton { background: linear-gradient(90deg, #e9ecf1 25%, #f4f6f9 37%, #e9ecf1 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-8); }

/* Direct */
.inbox { display: grid; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); overflow: hidden; }
.inbox__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; color: var(--text); border-bottom: 1px solid var(--line); }
.inbox__item:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .inbox__item:hover { background: var(--surface-2); color: var(--text); } }
.inbox__item[data-unread] { background: #f5f9ff; }
.inbox__summary { min-width: 0; }
.inbox__name { font-weight: 700; }
.inbox__title { color: var(--muted); font-size: var(--fs-13); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inbox__cover { width: 56px; height: 56px; border-radius: var(--r-12); object-fit: cover; background: #e9ecf1; }
.inbox__preview { color: var(--text-2); font-size: var(--fs-14); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inbox__item[data-unread] .inbox__preview { font-weight: 600; color: var(--text); }
.inbox__side { text-align: right; display: grid; gap: 4px; justify-items: end; }
.inbox__time { color: var(--muted); font-size: var(--fs-12); white-space: nowrap; }
/* Телефон: «сегодня в 20:28» в две строки — название и последнее сообщение не обрезаются до пары слов (30.09.2026) */
@media (max-width: 599px) { .inbox__item { gap: 8px; padding: 12px 16px; } .inbox__time { white-space: normal; max-width: 60px; line-height: 1.25; } }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); display: inline-block; }
.chat { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); min-height: 60vh; overflow: hidden; }
.chat__head { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.chat__who { display: flex; gap: 8px; align-items: center; min-width: 0; }
.chat__who a, .chat__who strong { color: var(--text); font-weight: 700; }
.chat__listing { display: flex; gap: 8px; align-items: center; color: var(--text); min-width: 0; flex: 1; padding: 8px 8px; border-radius: var(--r-12); background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { a.chat__listing:hover { color: var(--text); background: #eef1f5; } }
.chat__listing img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-8); flex: none; }
.chat__listing > span { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-14); }
.chat__tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chat__tools form { margin: 0; }
@media (max-width: 600px) {
  .chat__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .chat__listing { grid-column: 1 / -1; order: 3; }
  /* полоска товаров разговора — своей строкой под собеседником, как одна карточка */
  .chat__goods { grid-column: 1 / -1; order: 3; }
}
.chat__messages { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 62vh; min-height: 320px; background: #f6f8fb; }
.msg { max-width: 80%; padding: 8px 12px 8px; border-radius: var(--r-16) var(--r-16) var(--r-16) var(--r-8); background: #fff; align-self: flex-start; overflow-wrap: anywhere; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(16, 24, 40, .06); line-height: 1.4; }
.msg--mine { align-self: flex-end; background: #d8ecff; border-radius: var(--r-16) var(--r-16) var(--r-8) var(--r-16); }
@media (min-width: 900px) { .msg { max-width: 64%; } }
.msg__meta { display: block; font-size: var(--fs-12); color: var(--muted); margin-top: 2px; text-align: right; }
.msg__ticks { font-weight: 700; letter-spacing: -2px; }
.msg__ticks--read { color: var(--read); }
.msg--deleted { font-style: italic; color: var(--muted); background: transparent; box-shadow: none; border: 1px dashed var(--line-strong); }
.chat__compose { border-top: 1px solid var(--line); padding: 8px 12px; display: flex; gap: 8px; align-items: flex-end; background: var(--surface); }
.chat__compose textarea { min-height: 46px; max-height: 180px; border-radius: var(--r-24); padding: 12px 16px; resize: none; }
.chat__compose .btn { border-radius: var(--r-24); min-height: 46px; }
.chat__state { padding: 16px 16px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }
.chat__note { color: var(--muted); font-size: var(--fs-13); margin-top: 12px; display: flex; gap: 8px; }
.notifications { display: grid; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); overflow: hidden; }
.notification { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.notification:last-child { border-bottom: 0; }
.notification__icon { width: 40px; height: 40px; border-radius: var(--r-12); background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.notification--new { background: #f5f9ff; }
.notification--new .notification__icon { background: var(--primary-soft); color: var(--primary); }
.notification__text a { color: var(--text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .notification__text a:hover { color: var(--primary); } }
.notification__time { color: var(--muted); font-size: var(--fs-12); margin-top: 2px; }

/* Настройки и аккаунт */
.account-head { display: flex; gap: 16px; align-items: center; }
.account-head__text { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* длинное имя переносится внутри карточки */
.account-head__name { margin: 0; font-size: var(--fs-18); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; hyphens: auto; }
.account-head__hint { display: inline-block; margin-top: 4px; font-weight: 600; line-height: 1.35; }
.menu-list { display: grid; margin: 0; padding: 0; list-style: none; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--text); border-bottom: 1px solid var(--line); font-weight: 500; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; cursor: pointer; text-align: left; font-size: var(--fs-15); }
.menu-list li:last-child a, .menu-list li:last-child button { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .menu-list a:hover, .menu-list button:hover { color: var(--primary); } }
.menu-list .icon { color: var(--muted); }
.menu-list__go { margin-left: auto; color: #b3b9c2; }
.menu-list form { margin: 0; }

/* Личный кабинет (§28): одна оболочка — карточка с меню слева, выбранный раздел справа (templates/accounts/cabinet.html) */
.cabinet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cabinet__main { min-width: 0; }
.cabinet__card .account-head { padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.cabinet__menu .badge { margin-left: -4px; }
.cabinet__menu a[aria-current="page"] { color: var(--brand-dark); }
.cabinet__menu a[aria-current="page"] .icon { color: var(--brand); }
@media (min-width: 960px) {
  .cabinet { grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
  .cabinet__card { padding: 20px 16px; }
  .cabinet__card .account-head { padding: 0 4px 16px; }
  .cabinet__menu { gap: 2px; }
  .cabinet__menu a { padding: 8px 8px; border-bottom: 0; border-radius: var(--r-12); font-size: var(--fs-14); }
  @media (hover: hover) and (pointer: fine) { .cabinet__menu a:hover { background: var(--surface-2); } }
  .cabinet__menu a[aria-current="page"] { background: var(--brand-soft); font-weight: 700; }
  .cabinet__main .grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) and (min-height: 760px) { .cabinet__side { position: sticky; top: calc(var(--topbar-h) + 16px); } }
@media (min-width: 1100px) { .cabinet__main .grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Телефон и планшет: меню целиком — в корне «Профиль и настройки» (сам он в списке не нужен); в разделах — строка
   разделов с прокруткой вбок вместо карточки, которая сдвигала бы раздел вниз */
@media (max-width: 959px) {
  .cabinet--hub .cabinet__home { display: none; }
  .cabinet--section .cabinet__card { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
  .cabinet--section .account-head, .cabinet--section .cabinet__extra, .cabinet--section .menu-list__go { display: none; }
  .cabinet--section .cabinet__menu { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; position: relative; margin: 0 -16px; padding: 1px 16px 4px; } /* строка — до краёв экрана */
  .cabinet--section .cabinet__menu::-webkit-scrollbar { display: none; }
  .cabinet--section .cabinet__menu li { flex: none; }
  .cabinet--section .cabinet__menu a { width: auto; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--fs-14); white-space: nowrap; }
  .cabinet--section .cabinet__menu .icon { width: 16px; height: 16px; }
  .cabinet--section .cabinet__menu .badge { margin-left: 0; }
  .cabinet--section .cabinet__menu a[aria-current="page"] { background: var(--brand-soft); border-color: transparent; }
}
@media (min-width: 900px) and (max-width: 959px) { .cabinet--section .cabinet__menu { margin: 0 -24px; padding: 1px 24px 4px; } }

/* Статические страницы */
.prose { max-width: 760px; }
.prose p, .prose li { color: var(--text-2); line-height: 1.65; }
.prose h2 { margin-top: 1.6em; }

/* Служебный контур */
.staff-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.staff-tile { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 16px; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .staff-tile:hover { color: var(--text); box-shadow: var(--shadow-lg); } }
.staff-tile__icon { width: 44px; height: 44px; border-radius: var(--r-12); background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.staff-tile b { display: block; font-size: var(--fs-15); }
.staff-tile span { color: var(--muted); font-size: var(--fs-13); }
.staff-bar { background: #1c2230; color: #d7dce5; font-size: var(--fs-12); }
.staff-bar .wrap { display: flex; gap: 12px; align-items: center; min-height: 32px; flex-wrap: wrap; }
.staff-bar a { color: #fff; font-weight: 600; }

.import-review { display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:24px; margin-top:24px; }
.import-review input:not([type=checkbox]), .import-review select, .import-review textarea { width:100%; max-width:100%; }
.import-photo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.import-photo img { width:100px; height:80px; object-fit:cover; border-radius: var(--r-8); }
.import-photo__state { display:inline-flex; align-items:center; justify-content:center; width:100px; height:80px; background:var(--bg); color:var(--muted); border-radius:var(--r-8); font-size:var(--fs-12); text-align:center; }
.import-upload { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.import-source-photo { width:100%; max-width:520px; }
.import-source + .import-source { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.telegram-member { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--line); }
[data-telegram-link] { width:100%; margin-top:8px; }
.team-add { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; align-items:end; }
.team-add .field { margin: 0; }
.team-add > label { display: grid; gap: 8px; font-weight: 600; font-size: var(--fs-14); color: var(--text-2); }
.team-member { display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; padding:16px 0; border-bottom:1px solid var(--line); }
.team-member:last-child { border-bottom: 0; }
.team-roles form { display:inline-flex; gap:8px; align-items:center; margin:0 12px 8px 0; }
.role-tag { display:inline-flex; align-items: center; padding:2px 8px; border-radius:var(--r-12); background:var(--surface-2); border:1px solid var(--line); font-size:var(--fs-12); font-weight: 600; color: var(--text-2); }
[data-telegram-issued] ol { padding-left:20px; }
[data-telegram-issued] li { margin:8px 0; }
@media(max-width:760px) { .import-review { grid-template-columns: minmax(0,1fr); } }

/* Жалобы и модерация */
.report-form fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.report-form legend { font-weight: 600; margin-bottom: 8px; }
.report-form__mine { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 16px; }
.report-messages { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.report-message { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--bg); overflow-wrap: anywhere; }
.report-message--theirs { background: var(--surface); }
.queue-section { margin-bottom: 8px; }
.case-row { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.case-row:last-child { border-bottom: 0; }
.case-row a { font-weight: 600; }
.case-preview { margin-bottom: 16px; }
.case-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.case-report + .case-report { border-top: 1px solid var(--line); padding-top: 12px; }
.evidence { display: grid; gap: 8px; margin: 8px 0; }
.evidence__msg { padding: 8px 8px; border-radius: var(--r-12); background: var(--bg); overflow-wrap: anywhere; }
.evidence__msg--reported { background: var(--warn-bg); }
.case-decide__row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.case-decide__row .field { flex: 1 1 260px; margin: 0; }
.case-decide__account fieldset { border: 0; padding: 0; margin: 8px 0; }
.case-appeal { padding: 8px 8px; background: var(--bg); border-radius: var(--r-12); overflow-wrap: anywhere; }
@media (max-width: 760px) { .case-grid { grid-template-columns: minmax(0,1fr); } }
/* CRM модерации: переданные дела, ожидание дольше N часов, сводка, выборочная проверка, служебный ключ */
.case-row--overdue { background: var(--warn-bg); margin: 0 -8px; padding: 12px 8px; border-radius: var(--r-12); border-bottom: 0; }
.case-row__overdue { color: var(--warn); font-weight: 600; }
.case-question { padding: 8px 12px; border-radius: var(--r-12); background: var(--primary-soft); color: #0b4fa3; overflow-wrap: anywhere; }
.mod-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.mod-stat { background: var(--bg); border-radius: var(--r-12); padding: 12px; }
.mod-stat b { display: block; font-size: var(--fs-22); }
.mod-stat span { color: var(--muted); font-size: var(--fs-13); }
.mod-stat--bad b { color: var(--danger); }
.mod-decision + .mod-decision { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.mod-decision p { overflow-wrap: anywhere; }
.spot-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.spot-photos img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--r-8); background: var(--bg); }
.secret-line { display: block; font-family: ui-monospace, monospace; word-break: break-all; padding: 8px 12px; background: var(--bg); border-radius: var(--r-12); user-select: all; }

/* Действия со своим сообщением Direct */
.msg__body { display: block; }
.msg__actions { white-space: normal; margin-top: 0; text-align: right; }
.msg__actions > summary { display: inline-block; list-style: none; cursor: pointer; min-width: 30px; min-height: 22px; line-height: 22px; text-align: center; color: var(--muted); border-radius: var(--r-8); }
.msg__actions > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .msg__actions > summary:hover { background: rgba(0, 0, 0, .05); } }
.msg__menu { display: grid; gap: 8px; margin-top: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-12); text-align: left; box-shadow: var(--shadow-lg); }
.msg__menu form { margin: 0; }
.msg__edit { display: grid; gap: 4px; margin-bottom: 8px; }
.msg__edit textarea { width: 100%; min-height: 72px; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-8); }

/* Входы и устройства */
.session-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 0; border-bottom: 1px solid var(--line); }
.session-row:last-child { border-bottom: 0; }
.session-row__who { display: flex; gap: 12px; align-items: center; }
.session-row__icon { width: 40px; height: 40px; border-radius: var(--r-12); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-2); flex: none; }
.sessions__all { margin-top: 12px; }
.push-offer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.chat__earlier { align-self: center; margin-bottom: 8px; }
.chat__latest { padding: 8px 16px; margin: 0; border-top: 1px solid var(--line); }
[data-unsent] textarea { width: 100%; min-height: 80px; }

/* Цвета без inline-стилей (CSP style-src 'self') */
.tone-0 { --avatar-bg: #dfe7f5; --avatar-fg: #2f5089; }
.tone-1 { --avatar-bg: #e3f4ea; --avatar-fg: #1d6b43; }
.tone-2 { --avatar-bg: #fdebd8; --avatar-fg: #9a4d0b; }
.tone-3 { --avatar-bg: #f1e4fb; --avatar-fg: #6a3596; }
.tone-4 { --avatar-bg: #fde2e6; --avatar-fg: #a02a42; }
.tone-5 { --avatar-bg: #dff3f5; --avatar-fg: #176a75; }
.tile-transport { --tile-bg: #e8f2ff; --tile-fg: #0a6fd6; }
.tile-real-estate { --tile-bg: #e6f6ed; --tile-fg: #0a8a47; }
.tile-beauty-health { --tile-bg: #fcebf8; --tile-fg: #b0288e; }
.tile-electronics { --tile-bg: #efe9ff; --tile-fg: #6a45d9; }
.tile-home { --tile-bg: #fff1e3; --tile-fg: #c45f0c; }
.tile-personal { --tile-bg: #ffe8ef; --tile-fg: #c42a5a; }
.tile-kids { --tile-bg: #fff8d9; --tile-fg: #a57c00; }
.tile-hobby { --tile-bg: #e3f7f6; --tile-fg: #0d8580; }
.tile-services { --tile-bg: #eaf0ff; --tile-fg: #3651c9; }
.tile-business-equipment { --tile-bg: #eef1f4; --tile-fg: #4a5563; }
.tile-animals { --tile-bg: #fdeee3; --tile-fg: #b0561b; }
.tile-jobs { --tile-bg: #e9f5e4; --tile-fg: #3e7d1f; }
.tile-other { --tile-bg: #f1eef9; --tile-fg: #5b4a8a; }
meter.quota__meter { width: 100%; height: 8px; border-radius: var(--r-4); }
meter.quota__meter::-webkit-meter-bar { background: #eef0f3; border: 0; border-radius: var(--r-4); height: 8px; }
meter.quota__meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: var(--r-4); }
meter.quota__meter::-moz-meter-bar { background: var(--accent); border-radius: var(--r-4); }
/* Телефон: фото → цена и кнопки → описание → продавец. Компьютер: справа цена и продавец в одной липкой колонке. */
.listing { grid-template-areas: "head" "gallery" "buy" "details" "seller"; }
.listing__head { grid-area: head; }
.listing__gallery { grid-area: gallery; min-width: 0; }
.listing__aside { display: contents; }
.listing__buy { grid-area: buy; }
.listing__seller { grid-area: seller; }
.listing__details { grid-area: details; min-width: 0; }
.listing__aside .panel, .listing__details .panel, .listing__gallery .gallery { margin-bottom: 0; }
@media (min-width: 960px) {
  .listing { grid-template-areas: "head aside" "gallery aside" "details aside"; grid-template-rows: auto auto 1fr; row-gap: 16px; }
  .listing__aside { display: grid; grid-area: aside; align-self: start; }
  .listing__buy, .listing__seller { grid-area: auto; }
}
.fav__wide[aria-pressed="true"] { color: var(--heart); border-color: #ffc2cd; background: #fff5f7; }
.fav__wide[aria-pressed="true"] .icon { fill: currentColor; }
.filters .row { flex-wrap: nowrap; }
.filters .row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 599px) {
  .hero { padding: 18px 16px; margin-bottom: 14px; }
  .hero h1 { font-size: 1.3rem; }
  .hero p { display: none; }
  .hero__facts { gap: 6px; margin-top: 10px; }
  .hero__fact { font-size: .78rem; padding: 3px 10px 3px 3px; gap: 6px; }
  .hero__fact-icon { width: 22px; height: 22px; }
  .hero__fact-icon .icon { width: 12px; height: 12px; }
}
.panel--narrow .chat__listing { margin-bottom: 16px; }
@media (max-width: 599px) { .chat__send-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .chat__compose .btn { padding: 8px 16px; } }
.actions--center { justify-content: center; }
/* Две кнопки экрана «недоступно» (пакет 3, 14.10.2026): на узком телефоне «Новые объявления» не помещается рядом с
   «На главную» — обе во всю ширину одна под другой, а не разной длины лесенкой. */
@media (max-width: 389px) { .actions--pair > .btn { flex: 1 1 100%; } }
.staff-tile--muted { opacity: .7; } .staff-tile--muted .staff-tile__icon { background: #eef0f3; color: var(--muted); }

/* Компактная навигация шапки: иконка и короткая подпись под ней — поиску остаётся место */
@media (min-width: 900px) {
  .topnav__link { flex-direction: column; gap: 1px; padding: 4px 8px; font-size: .72rem; font-weight: 600; color: var(--muted); min-width: 64px; }
  .topnav__link .icon { width: 22px; height: 22px; color: var(--text-2); }
  .topnav__link[aria-current="page"] .icon { color: var(--primary); }
  @media (hover: hover) and (pointer: fine) { .topnav__link:hover .icon { color: var(--primary); } }
  .topnav__link .badge { top: 0; left: calc(50% + 6px); }
  .topbar__row { grid-template-columns: auto minmax(240px, 1fr) auto; }
  .usermenu { margin-left: 4px; }
}
@media (max-width: 599px) {
  .chat__tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chat__tools .btn { min-width: 38px; padding: 8px 8px; }
}
@media (max-width: 1279px) { .sell-btn .sell-btn__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.editor__actions .btn--link { color: var(--muted); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .editor__actions .btn--link:hover { color: var(--danger); } }
/* Страницы allauth для управления входом (MFA сотрудника и т. п.) */
.main--manage { max-width: 760px; }
.mfa-qr { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: var(--r-12); border: 1px solid var(--line); margin: 8px 0 16px; image-rendering: pixelated; }
/* Телефон: разделы — горизонтальная лента, чтобы объявления были видны на первом экране */
@media (max-width: 599px) {
  .sections { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 20px; padding: 2px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .sections::-webkit-scrollbar { display: none; }
  .section-tile { flex: 0 0 96px; min-height: 0; padding: 10px 8px; align-items: center; text-align: center; gap: 6px; scroll-snap-align: start; }
  .section-tile__name { font-size: .78rem; }
  .section-tile__count { display: none; }
}
/* Снимок снятого или проданного объявления в избранном */
.card--snapshot .card__cover { filter: grayscale(.4); opacity: .85; }
@media (hover: hover) and (pointer: fine) { .card--snapshot:hover, .card--gone:hover { transform: none; box-shadow: var(--shadow); } }
.card__status { position: absolute; left: 8px; top: 8px; max-width: calc(100% - 60px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: rgba(15, 18, 24, .74); color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.card--gone .card__title { color: var(--muted); }

/* Локальная разработка: фоновые задачи не запущены (только DEBUG) */
.dev-bar { background: #fff3cd; color: #6b4a00; border-bottom: 1px solid #f1d98a; font-size: var(--fs-13); padding: 8px 0; }
.dev-bar .wrap { display: flex; gap: 8px; align-items: center; }
.dev-bar code { background: rgba(0, 0, 0, .06); padding: 1px 8px; border-radius: var(--r-8); }

/* Фото: понятная причина и действие */
.photo-problems { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; }
.photo-problems__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 12px; border-radius: var(--r-12); background: var(--primary-soft); color: #0b4fa3; font-size: var(--fs-13); }
.photo-problems__item--error { background: var(--danger-soft); color: #a3261d; }
.photo-problems__actions { display: inline-flex; gap: 8px; margin-left: auto; }

/* Отправка формы: всегда видно, что происходит */
.spinner { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; flex: none; opacity: .85; }
.btn.is-busy { cursor: progress; }
.btn.is-busy .spinner { width: 15px; height: 15px; }
.submit-status { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-12); font-size: var(--fs-14); line-height: 1.4; }
.submit-status--wait { background: var(--primary-soft); color: #0b4fa3; }
.submit-status--warn { background: var(--warn-bg); color: #6b4700; }
.submit-status--error { background: var(--danger-soft); color: #a3261d; }
.submit-status .btn--link { color: inherit; text-decoration: underline; }
.submit-status > span:not(.spinner) { flex: 1 1 240px; min-width: 0; }

/* Поиск категории при ручном выборе */
/* Поле «Категория»: выбранная подкатегория и «Изменить»; открытый список — поиск сверху, разделы, «Другое» внизу */
.catpick__box { position: relative; }
.catpick__trigger { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-12); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .catpick__trigger:hover { border-color: #c5cad3; } }
.catpick__trigger:focus-visible, .catpick__box.is-open .catpick__trigger { border-color: var(--brand, var(--primary)); box-shadow: var(--focus); border-radius: var(--r-12); }
.catpick__value { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.catpick__name { font-weight: 600; }
.catpick__section { color: var(--muted); font-size: var(--fs-13); }
.catpick__section::before { content: "· "; }
.catpick__placeholder { color: var(--muted); }
.catpick__action { color: var(--primary); font-weight: 600; font-size: var(--fs-14); white-space: nowrap; }
.catpick__trigger .icon { color: var(--muted); transition: transform .15s; }
.catpick__box.is-open .catpick__trigger .icon { transform: rotate(180deg); }
.catpick__panel { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; }
.catpick__search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.catpick__search .icon { color: var(--muted); }
.catpick__search input { border: 0; outline: 0; box-shadow: none; padding: 12px 0; flex: 1; min-width: 0; background: none; font-size: var(--fs-15); }
.catpick__list { position: relative; max-height: min(380px, 55vh); overflow-y: auto; padding: 4px 8px 8px; overscroll-behavior: contain; }
.catpick__group-name { padding: 8px 8px 4px; color: var(--muted); font-size: var(--fs-12); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.catpick__option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: var(--r-12); cursor: pointer; }
.catpick__option.is-active { background: var(--primary-soft); }
@media (hover: hover) and (pointer: fine) { .catpick__option:hover { background: var(--primary-soft); } }
.catpick__option.is-current { font-weight: 600; color: var(--primary-dark, var(--primary)); }
.catpick__option.is-current::after { content: "✓"; font-weight: 700; }
.catpick__group--other { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
/* Раздел с одной полкой («Красота и здоровье», ADR 0031): строка раздела вместо заголовка и одной полки под ним. */
.catpick__group--single { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 8px 0; padding: 4px 0; }
.catpick__group--single .catpick__option { font-weight: 600; }
.catpick__group--other .catpick__option { color: var(--text-2); }
.catpick__empty { padding: 12px; margin: 0; color: var(--muted); font-size: var(--fs-14); }
.catpick__auto { margin: 8px 0 0; padding: 8px 12px; font-size: var(--fs-14); }

/* ==============================================================================================================
   Идентичность Luk (проход 25.09.2026). Цвета и чистота прежние; меняются композиция и характер, чтобы Luk не
   читался как вариация Авито: собственный знак и шрифт, поиск-капсула без приставной кнопки «Найти», круглые
   иконки навигации вместо подписей, фирменный градиент на главном действии, разделы-«пузыри», карточки с фото в
   рамке и ценой-меткой, капсулы вместо прямоугольных кнопок.
   ============================================================================================================== */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/onest-cyrillic.d1abf183873c.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/onest-latin-ext.960412f3c7e3.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/onest-latin.fd7dbbcb3633.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  font-family: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand: #4a5ef0;
  --brand-dark: #3a4bd6;
  --brand-soft: #ecefff;
  --brand-gradient: linear-gradient(120deg, #0a84ff 0%, #2b6cf6 55%, #6f4ff0 100%);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --focus: 0 0 0 3px rgba(74, 94, 240, .28);
  --shadow: 0 1px 2px rgba(22, 26, 60, .04), 0 3px 10px rgba(22, 26, 60, .05);
  --shadow-lg: 0 12px 32px rgba(22, 26, 60, .12);
}
h1, h2, h3 { letter-spacing: -.02em; }
h1 { font-weight: 700; }
.icon { stroke-width: 1.8; }

/* Кнопки и поля — капсулы */
.btn { border-radius: 999px; font-weight: 600; }
.btn--small { border-radius: 999px; }
.btn--brand { background: var(--brand-gradient); color: #fff; box-shadow: 0 6px 16px rgba(74, 94, 240, .28); }
@media (hover: hover) and (pointer: fine) { .btn--brand:hover { color: #fff; filter: brightness(1.06); background: var(--brand-gradient); } }
input:not([type]), input[type=text], input[type=email], input[type=search], input[type=number], input[type=tel], input[type=url], input[type=date], select, textarea { border-radius: 12px; }
/* Дата в Safari на iPhone по умолчанию по центру и без высоты строки (дата мероприятия у «Билетов», 14.10.2026). */
input[type=date]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.chip { border-radius: 999px; }
.chip--active { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (hover: hover) and (pointer: fine) { .chip--active:hover { background: var(--brand); border-color: var(--brand); color: #fff; } }

/* Шапка: знак, поиск-капсула, круглые иконки, главное действие в фирменном градиенте */
.topbar { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.5) blur(14px); border-bottom-color: rgba(22, 26, 60, .06); }
.logo { gap: 9px; font-weight: 800; letter-spacing: -.045em; }
/* Знак Luk (логотип 02.10.2026, ADR 0013): две стороны — лицевая и обратная, развёрнутая на 180°, чтобы буква не
   отражалась зеркально; поворот вокруг вертикальной оси, как у знака 7ex: ~5,5 с покоя, затем полный оборот. */
.logo__mark { width: 30px; height: 30px; flex: none; position: relative; display: inline-block; transform-style: preserve-3d; will-change: transform; animation: luk-mark-turn 8.8s cubic-bezier(.45, .05, .55, .95) infinite; }
.logo__face { position: absolute; inset: 0; border-radius: 22.5%; background: url("app/logo-96.5408ffdf4c1c.png") center / cover no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 4px 12px rgba(74, 94, 240, .3); }
.logo__face--back { transform: rotateY(180deg); }
@keyframes luk-mark-turn { 0%, 62% { transform: perspective(460px) rotateY(0deg); } 86%, 100% { transform: perspective(460px) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .logo__mark { animation: none; } }
.logo__word { font-size: 1.62rem; line-height: 1; color: var(--text); }
.logo__market { align-self: center; margin: 0 0 0 2px; padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); font-size: .74rem; font-weight: 600; letter-spacing: 0; }
.search__input.search__input { border-radius: 999px; border: 1px solid transparent; height: 46px; padding-left: 44px; padding-right: 54px; background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { .search__input.search__input:hover { border-color: var(--line); } }
.search__input.search__input:focus { background: #fff; border-color: var(--brand); }
.search__field .icon { left: 16px; }
/* Стрелка поиска стоит по центру поля без transform, а круг нарисован под значком (::before): нажатое состояние
   уменьшает только круг и значок, сама кнопка и место касания не двигаются. Раньше :active заменял translateY(-50%) на
   scale — за 0,1 с кнопка уезжала на 17–18 px вниз, касание верхней половины круга приходилось уже на поле, и поиск не
   начинался (владелец 23.10.2026: «в лучшем случае со второго раза»; experiments/browser-search-tap). */
.search__btn { position: absolute; right: 5px; top: 0; bottom: 0; margin: auto 0; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0; background: none; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; isolation: isolate; }
.search__btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--brand-gradient); box-shadow: 0 3px 10px rgba(74, 94, 240, .3); transition: transform .1s ease; }
@media (hover: hover) and (pointer: fine) { .search__btn:hover { filter: brightness(1.08); } }
.search__btn .icon { width: 18px; height: 18px; transition: transform .1s ease; }
/* Крестик очистки (владелец 23.10.2026): свой вместо системного — системный в WebKit разный, а в приложении в Telegram
   может не показываться. Слева от стрелки, место касания 44 × 44; виден, когда в поле есть текст (search.js). Без
   JavaScript кнопки нет и у поля прежний системный крестик: .search--clear ставит search.js. */
.search__clear { position: absolute; right: 45px; top: 50%; margin-top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.search__clear::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--line); transition: background-color .15s, transform .1s ease; }
.search__clear .icon { position: relative; width: 14px; height: 14px; stroke-width: 2.6; transition: transform .1s ease; }
@media (hover: hover) and (pointer: fine) { .search__clear:hover::before { background: var(--line-strong); } }
.search__clear:active::before { background: var(--line-strong); transform: scale(.9); }
.search__clear:active .icon { transform: scale(.9); }
.search__clear:focus-visible { outline: none; }
.search__clear:focus-visible::before { box-shadow: var(--focus); }
.search--clear .search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search.is-filled .search__input.search__input { padding-right: 84px; }  /* текст кончается до круга крестика */
.sell-btn.btn { background: var(--brand-gradient); border-radius: 999px; box-shadow: 0 6px 16px rgba(74, 94, 240, .3); font-weight: 650; }
@media (hover: hover) and (pointer: fine) { .sell-btn.btn:hover { background: var(--brand-gradient); filter: brightness(1.06); color: #fff; } }
.iconbtn { border-radius: 50%; }
@media (min-width: 900px) {
  .topnav { gap: 8px; }
  .topnav__link { flex-direction: row; font-size: .9rem; color: var(--text-2); min-width: 0; padding: 9px 14px; border-radius: 999px; gap: 7px; }
  .topnav__link .icon { width: 20px; height: 20px; }
  .topnav__link--icon { width: 42px; height: 42px; padding: 0; justify-content: center; background: var(--surface-2); }
  .topnav__link--icon .topnav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topnav__link--icon .icon { color: var(--text-2); }
  @media (hover: hover) and (pointer: fine) { .topnav__link--icon:hover { background: var(--brand-soft); } }
  .topnav__link--icon[aria-current="page"] .icon { color: var(--brand); }
  @media (hover: hover) and (pointer: fine) { .topnav__link--icon:hover .icon { color: var(--brand); } }
  .topnav__link--icon[aria-current="page"] { background: var(--brand-soft); }
  .topnav__link--icon .badge { top: -3px; right: -3px; left: auto; }
  .topbar__row { gap: 18px; }
}

/* Главная: hero объясняет, что это за продукт, для кого и зачем */
.hero { border-radius: 28px; padding: 26px 22px 24px; margin-bottom: 18px; }
.hero::before { content: ""; position: absolute; left: -80px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.hero h1 { position: relative; z-index: 1; font-size: 1.55rem; line-height: 1.15; max-width: 760px; margin: 0; }
.hero .hero__lead { position: relative; z-index: 1; display: block; font-size: 1rem; line-height: 1.5; margin: 10px 0 0; max-width: 580px; opacity: .92; }
.hero__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin: 20px 0 0; position: relative; z-index: 1; }
.btn--hero { background: #fff; color: var(--brand-dark); box-shadow: 0 8px 20px rgba(12, 18, 80, .2); }
@media (hover: hover) and (pointer: fine) { .btn--hero:hover { background: #f4f6ff; color: var(--brand-dark); } }
.hero__link { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; opacity: .95; }
@media (hover: hover) and (pointer: fine) { .hero__link:hover { color: #fff; opacity: 1; text-decoration: underline; } }
@media (min-width: 900px) { .hero { padding: 42px 46px 40px; } .hero h1 { font-size: 2.3rem; } .hero .hero__lead { font-size: 1.1rem; } }
@media (max-width: 599px) { .hero { padding: 20px 18px; border-radius: 22px; } .hero h1 { font-size: 1.32rem; } .hero .hero__lead { font-size: .92rem; } .hero__cta { margin-top: 14px; } .hero__link { display: none; } .btn--hero { padding: 9px 16px; } }

/* Разделы — «пузыри», а не плитки */
@media (min-width: 600px) { .sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: 26px; } }
.section-tile { background: none; box-shadow: none; padding: 8px 4px; align-items: center; text-align: center; gap: 8px; min-height: 0; border-radius: 18px; }
@media (hover: hover) and (pointer: fine) { .section-tile:hover { background: var(--surface); box-shadow: none; transform: none; } }
.section-tile__icon { width: 58px; height: 58px; border-radius: 50%; transition: transform .15s, box-shadow .15s; }
.section-tile__icon .icon { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) { .section-tile:hover .section-tile__icon { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(22, 26, 60, .12); } }
.section-tile__name { font-size: .82rem; font-weight: 600; line-height: 1.2; }
@media (max-width: 599px) { .section-tile { flex: 0 0 84px; } .section-tile__icon { width: 52px; height: 52px; } }
.section-head h2 { display: flex; align-items: center; gap: 10px; }
.section-head h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-gradient); flex: none; }

/* Карточки: фото в рамке, цена — метка на фото */
.card { border-radius: 20px; padding: 6px; border: 1px solid rgba(22, 26, 60, .05); }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.card__media { border-radius: 15px; overflow: hidden; }
.card__cover { transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) { .card:hover .card__cover { transform: scale(1.035); } }
.card__media .card__price { position: absolute; left: 8px; bottom: 8px; z-index: 1; max-width: calc(100% - 16px); background: rgba(255, 255, 255, .95); color: var(--text); font-weight: 750; font-size: .9rem; padding: 4px 11px; border-radius: 999px; box-shadow: 0 2px 10px rgba(0, 0, 0, .14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__media .card__price:empty { display: none; }
/* Узкий телефон (360 px): цена с единицей («8 000 ฿ за сутки») обрезалась многоточием — мельче и, если нужно, в две
   строки, но целиком (проверка перед запуском 30.09.2026). */
@media (max-width: 400px) { .card__media .card__price { font-size: .8rem; padding: 4px 9px; white-space: normal; text-wrap: balance; line-height: 1.2; border-radius: 12px; overflow: visible; text-overflow: clip; } }
/* Донги и рупии (12.10.2026): «Rp 76 750 000 в месяц» в узкой карточке — в две строки на любой ширине, как на телефоне,
   а не «Rp 76 750 000 в мес…». Сумма не рвётся (неразрывные пробелы), переносится только подпись. */
.card__media .card__price--long { font-size: .8rem; padding: 4px 9px; white-space: normal; text-wrap: balance; line-height: 1.2; border-radius: 12px; overflow: visible; text-overflow: clip; }
@media (min-width: 1100px) { .grid--rail .card__media .card__price--long { font-size: .74rem; padding: 3px 8px; } }
.card__photos { top: 8px; bottom: auto; border-radius: 999px; padding: 3px 8px; }
.card__body { padding: 9px 8px 6px; }
.card__title { color: var(--text); font-weight: 600; font-size: .92rem; }
.fav { top: 12px; right: 12px; }
.fav__btn { width: 34px; height: 34px; }
@media (min-width: 900px) { .card__media .card__price { font-size: .96rem; } .card__body { padding: 10px 10px 8px; } }

/* Узкий телефон: знак, город и «Разместить» ужимаются, иконки не сжимаются в ноль */
.topbar__actions > * { flex: none; }
@media (max-width: 899px) { .logo__mark { width: 26px; height: 26px; } .logo__word { font-size: 1.45rem; } .logo { gap: 7px; } .topbar__row { gap: 10px 8px; } }
@media (max-width: 420px) { .logo__market { padding: 3px 8px; font-size: .7rem; } .sell-btn.btn { padding: 8px 12px; } .topbar__actions { gap: 2px; } }
/* 360–389px (частые Android, iPhone SE/mini): строка шапки была шире экрана на 20–30px — без «+» в «Разместить» */
@media (min-width: 360px) and (max-width: 389px) { .sell-btn.btn { padding: 8px 10px; } .sell-btn.btn > .icon { display: none; } .topbar__row { column-gap: 6px; } }
@media (max-width: 359px) { .logo__market { display: none; } }
.iconbtn .badge { top: 2px; left: 23px; right: auto; }
.catpick__auto { flex-wrap: nowrap; align-items: flex-start; }
.catpick__auto .icon { margin-top: 1px; }
/* Цена: число с «฿» и, если у подкатегории несколько моделей цены, компактный выбор единицы рядом */
.price-field__row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.price-field__amount { position: relative; flex: 0 1 220px; min-width: 150px; }
.price-field__amount input { width: 100%; padding-right: 32px; font-size: var(--fs-16); font-weight: 600; font-variant-numeric: tabular-nums; }
.price-field__currency { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; pointer-events: none; }
/* Вьетнам и Бали: валюта цены — выбор рядом с суммой («₫ / $», «Rp / $»), знака внутри поля нет. */
.price-field__amount--pick { flex: 1 1 120px; min-width: 120px; max-width: 240px; }
.price-field__amount--pick ~ .price-field__unit { flex: 1 1 112px; min-width: 112px; max-width: 200px; }
.price-field__amount--pick input { padding-right: 14px; }
.price-field__money { flex: 0 0 auto; width: auto; min-width: 64px; font-weight: 600; }
.price-field__unit { flex: 0 1 auto; width: auto; min-width: 128px; }
/* Город объявления в форме подачи (12.10.2026): одна строка над формой, когда открыты города разных стран. */
.editor-city { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 0 0 12px; }
.editor-city__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); }
.editor-city select { width: auto; min-width: 160px; max-width: 100%; }

.price-field__suffix { align-self: center; color: var(--text-2); font-weight: 600; }
/* Способ связи в объявлении: сообщения в Luk и дополнительный контакт по желанию */
.reach { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.reach__row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.reach__row > .icon { flex: none; margin-top: 2px; color: var(--primary); }
.reach__row--extra > .icon { color: var(--muted); }
.reach__row > div { flex: 1; min-width: 0; }
.reach__note { display: block; color: var(--muted); font-size: var(--fs-14); margin-top: 4px; }
.reach__choices { margin: 8px 0 4px; }
.reach__state { margin: 8px 0 8px; padding: 8px 12px; border-radius: var(--r-12); background: var(--surface-2); font-size: var(--fs-14); color: var(--text-2); }
.reach__state[data-contacts-state="shown"] { background: var(--accent-soft); color: #0c5f36; }
.reach__link { font-size: var(--fs-14); font-weight: 600; }

/* ==============================================================================================================
   Оболочка каталога (25.09.2026): главная, разделы, подкатегории и поиск — один экран. Выдача стоит на пяти равных
   колонках: в разделе первая — панель, карточки занимают остальные четыре и остаются того же размера, что в
   режиме «Все». Строка заголовка одной высоты во всех состояниях — карточки не прыгают по вертикали.

   Липкая геометрия (UX-проход 25.09.2026) — одна система, а не наслоение:
   - полная лента разделов живёт в потоке страницы и уезжает вместе с ней;
   - поверх контента — только шапка и одна компактная строка (--compact-bar); компактная заменяет полную ровно тогда,
     когда шапка закрывает полную (static/luk/catalog.js), двух лент одновременно на экране нет;
   - на телефоне липких строк управления нет: «Фильтры» — в компактной строке; при чтении шапка уезжает, при
     прокрутке вверх выглядывает только строка поиска (--topbar-peek);
   - выдача занимает не меньше экрана: короткий раздел не обрезает прокрутку и не «отбрасывает» страницу.
   ============================================================================================================== */
html.catalog-page { overflow-anchor: none; } /* прокрутку при смене областей держит catalog.js */
:root { --topbar-h: 121px; --topbar-peek: 56px; --compact-bar: 44px; } /* шапка телефона: две строки, поиск — со второй */
@media (min-width: 900px) { :root { --topbar-h: 71px; } }
.catalog__hero { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s ease, opacity .2s ease; }
.catalog__hero-inner { min-height: 0; overflow: hidden; }
.catalog__hero.is-collapsing { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .catalog__hero { transition: none; } }

/* Лента разделов: «Все» и разделы в одну строку; подписи — ровно две строки, плитки одной высоты */
.tile-all { --tile-bg: #eef0f4; --tile-fg: #3d434d; }
.catalog .section-tile { justify-content: flex-start; }
.catalog .section-tile__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.2; min-height: 2.4em; text-align: center; }
@media (min-width: 600px) { .catalog .sections { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 18px; } .catalog .section-tile__name { font-size: .76rem; letter-spacing: -.01em; } }
@media (max-width: 599px) { .catalog .sections { margin-bottom: 4px; } .catalog .section-tile__name { font-size: .74rem; } }
.section-tile.is-active .section-tile__icon { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--brand); }
.section-tile.is-active .section-tile__name { color: var(--brand-dark); font-weight: 750; }

/* Выдача */
.catalog__region { position: relative; min-height: calc(100vh - var(--topbar-h) - var(--compact-bar)); }
.catalog__progress { position: absolute; left: 0; right: 0; top: -8px; height: 3px; border-radius: 3px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--brand), transparent) no-repeat; background-size: 40% 100%; }
.catalog.is-loading .catalog__progress { opacity: 1; animation: catalog-progress 1s linear infinite; }
@keyframes catalog-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.catalog.is-loading .catalog__results, .catalog.is-loading .catalog__side { opacity: .55; transition: opacity .15s ease .12s; }
.catalog.is-loading .catalog__results { pointer-events: none; }  /* выдача меняется: случайное касание не открывает прежнюю */

.catalog__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "heading zone sort"; align-items: center; gap: 8px 12px; min-height: 44px; margin: 0 0 12px; }
.catalog__heading { grid-area: heading; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.catalog__title { margin: 0; font-size: 1.3rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.catalog__title:focus { outline: none; }
.catalog__count { color: var(--muted); font-size: .9rem; white-space: nowrap; flex: none; }
.catalog__head .zoneform { grid-area: zone; }
.catalog__head .sortform { grid-area: sort; }
.zoneform, .sortform { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; }
.zoneform select, .sortform select { width: auto; min-width: 0; max-width: 100%; min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.catalog__filters { grid-area: lead; flex: none; gap: 6px; }
.catalog__filters .filters__count { margin-left: 2px; }
.catalog__head--section { grid-template-areas: "heading heading sort" "rest rest rest"; }
.catalog__head .subcats--bar { grid-area: rest; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.subcats--bar .subcats__item { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; font-size: 14px; }
.subcats--bar .subcats__item.is-active { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.subcats--bar .subcats__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.catalog .filters { background: none; box-shadow: none; padding: 0; border-radius: 0; position: static; }
.catalog .filters__body { margin: 0; font-size: 14px; }
.filters__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.filters__title { margin: 0; font-size: var(--fs-15); }
.filters__reset { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; color: var(--brand-dark); font-size: var(--fs-14); border-radius: var(--r-12); }
@media (hover: hover) and (pointer: fine) { .filters__reset:hover { color: var(--brand); text-decoration: underline; } }
.filters__reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.filters__reset--footer { display: none; }
.catalog .filters .field { margin-bottom: 12px; }
.catalog .filters .field__label { font-size: 14px; margin-bottom: 5px; }
.catalog .filters input:not([type=radio]):not([type=hidden]), .catalog .filters select { min-height: 38px; height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
.catalog .filters .field__hint { font-size: 12px; }
.catalog .filters .row { gap: 8px; }
html.catalog-page .catalog__panel:not(.is-sheet) .filters__submit { display: none; } /* компьютер: применяется сразу */
.catalog__note { margin: 0 0 10px; }

.subcats { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.subcats__item { padding: 7px 10px; border-radius: 10px; color: var(--text-2); font-size: .92rem; font-weight: 550; }
@media (hover: hover) and (pointer: fine) { .subcats__item:hover { background: var(--surface-2); color: var(--text); } }
.subcats__item.is-active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }

.chips--active { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip--removable { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); }
@media (hover: hover) and (pointer: fine) { .chip--removable:hover { background: #dfe4ff; color: var(--brand-dark); } }
.chip--removable .icon { opacity: .7; }
.chip--scope { background: var(--surface); border-color: var(--brand); }

@media (min-width: 960px) {
  .catalog__body { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  /* Без JS — обычная колонка; вычисленный отступ позволяет высокой колонке липнуть снизу. */
  .catalog__side { grid-column: 1; background: var(--surface); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow); min-width: 0; }
  .catalog__side.is-sticky { position: sticky; top: var(--side-top); }
  .catalog__results { grid-column: 2 / -1; min-width: 0; }
  .catalog--all .catalog__results { grid-column: 1 / -1; }
  .catalog--all .grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .catalog--section .catalog__results .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1100px) {
  .catalog__body { grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(0, 1fr)); gap: 16px; }
  .catalog--all .grid--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .catalog--section .catalog__results .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* Компактная строка разделов (создаёт catalog.js) — внутри шапки, сразу под ней; уезжает и выглядывает вместе с ней */
.catalog-compact { position: absolute; left: 0; right: 0; top: 100%; z-index: -1; height: var(--compact-bar); background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(22, 26, 60, .08); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .16s ease, opacity .16s ease, visibility 0s linear .16s; }
.catalog-compact.is-visible { transform: none; opacity: 1; visibility: visible; transition: transform .16s ease, opacity .16s ease; }
.catalog-compact__inner { max-width: 1240px; height: 100%; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 8px; }
.catalog-compact__row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.catalog-compact__row::-webkit-scrollbar { display: none; }
.catalog-compact__link { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 999px; color: var(--text-2); font-size: .84rem; font-weight: 600; white-space: nowrap; }
.catalog-compact__link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .catalog-compact__link:hover { background: var(--surface-2); color: var(--text); } }
.catalog-compact__link.is-active { background: var(--brand); color: #fff; }
.catalog-compact__filters { display: none; }
.topbar { transition: transform .2s ease; }
body.catalog-header-hidden .topbar { transform: translateY(-100%); }
body.catalog-compact-on .topbar { box-shadow: none; }

/* Телефон: без постоянной панели; фильтры — лист на всю высоту */
.sheet__head { display: none; }
@media (max-width: 899px) { body.catalog-header-peek .topbar { transform: translateY(calc(-1 * var(--topbar-peek))); } }
@media (max-width: 959px) {
  .catalog__region { min-height: calc(100vh - var(--compact-bar)); }
  .catalog__head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 36px 40px; grid-template-areas: "heading heading sort" "lead rest rest"; row-gap: 8px; margin-bottom: 10px; min-height: 0; }
  .catalog__head .zoneform { grid-area: lead; }
  .catalog__title { font-size: 1.15rem; }
  .sortform label { display: none; }
  .zoneform select, .sortform select { max-width: 46vw; min-height: 36px; font-size: .9rem; }
  .catalog__head .subcats--bar { grid-area: rest; display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -16px 0 0; padding: 0 16px 0 0; border: 0; scrollbar-width: none; align-items: center; }
  .subcats--bar::-webkit-scrollbar { display: none; }
  .catalog__head--bare .subcats--bar { grid-column: 1 / -1; } /* пустой раздел: «Фильтры» нет — подкатегории с края */
  .subcats--bar .subcats__item { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; font-size: .86rem; }
  .subcats--bar .subcats__item.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .catalog-compact__inner { padding: 0 12px; }
  .catalog-compact__link { height: 30px; padding: 0 11px; }
  .catalog-compact__link svg { display: none; }
  .catalog-compact__filters { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 650; font-size: .84rem; cursor: pointer; }
  .catalog-compact__filters .icon { width: 16px; height: 16px; }
  .catalog__panel.is-sheet { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; transform: translateY(100%); visibility: hidden; transition: transform .24s ease, visibility 0s linear .24s; }
  .catalog__panel.is-sheet.is-open { transform: none; visibility: visible; transition: transform .24s ease; }
  .catalog__panel.is-sheet .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .sheet__title { font-weight: 700; }
  .catalog__panel.is-sheet { height: 100dvh; }
  .catalog__panel.is-sheet .sheet__head { flex: none; }
  .catalog__panel.is-sheet .filters { display: flex; flex: 1; min-height: 0; }
  .catalog__panel.is-sheet .filters__body { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
  .catalog__panel.is-sheet .filters__header { display: none; }
  .catalog__panel.is-sheet .filters__fields { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 0; }
  .catalog__panel.is-sheet .filters__reset--footer { display: inline-flex; }
  .catalog .filters input:not([type=radio]):not([type=hidden]), .catalog .filters select { min-height: 44px; height: 44px; font-size: 16px; }
  .filters__reset { min-height: 44px; }
  .catalog__panel.is-sheet .filters__toggle { display: none; }
  .catalog__panel.is-sheet .filters__actions { display: flex; align-items: center; flex: none; gap: 16px; background: var(--surface); border-top: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .catalog__panel.is-sheet .filters__submit { flex: 1; width: auto; min-height: 44px; padding: 10px 16px; font-size: 15px; }
  body.sheet-open { overflow: hidden; }
  /* Лист открыт или уезжает: нижнее меню не встаёт под палец, уезжающий лист касаний не принимает — второе быстрое
     касание «Показать» не открывает «Объявления» (замер 08.10.2026, docs/smooth-ui.md). */
  body.sheet-open .tabbar, body.sheet-closing .tabbar { visibility: hidden; }
  .catalog__panel.is-sheet:not(.is-open) { pointer-events: none; }
}
@media (max-width: 359px) { .zoneform select, .sortform select { max-width: 42vw; } }
@media (prefers-reduced-motion: reduce) { .catalog__panel.is-sheet, .catalog-compact, .topbar { transition: none; } }
/* Компактная строка и выглядывающая шапка — непрозрачные: карточки под ними не просвечивают */
body.catalog-compact-on .topbar { background: #fff; backdrop-filter: none; }
.catalog-compact { background: #fff; backdrop-filter: none; }
.catalog-compact__row { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); padding: 0 10px; }
@media (min-width: 960px) {
  .catalog-compact__row { gap: 0; justify-content: space-between; }
  .catalog-compact__link { padding: 0 8px; gap: 5px; font-size: .8rem; }
  .catalog-compact__link svg { width: 15px; height: 15px; }
}
/* Телефон: сортировка — компактная кнопка-иконка (тот же select), заголовку раздела остаётся место */
@media (max-width: 959px) {
  .catalog__head .sortform { position: relative; }
  .catalog__head .sortform label { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; pointer-events: none; color: var(--text-2); z-index: 1; }
  .catalog__head .sortform label .icon { width: 18px; height: 18px; }
  .catalog__head .sortform select { width: 44px; max-width: 44px; padding: 0; color: transparent; background-image: none; text-indent: -999px; }
  .catalog__head .sortform select option { color: var(--text); }
}
/* В компактной строке — только названия: иконки дублируют текст, а 13 разделов с ними не помещаются в строку */
.catalog-compact__link svg { display: none; }
@media (min-width: 960px) { .catalog-compact__link { padding: 0 7px; } }
/* В разделе компактная строка — его подкатегории (catalog.js): пилюли, как во второй строке заголовка на телефоне,
   слева направо, та же высота строки. Раздел без подкатегорий — только его название. */
.catalog-compact--sub .catalog-compact__row { justify-content: flex-start; gap: 6px; }
.catalog-compact--sub .catalog-compact__link { height: 30px; padding: 0 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-size: .84rem; }
@media (hover: hover) and (pointer: fine) { .catalog-compact--sub .catalog-compact__link:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); } }
.catalog-compact--sub .catalog-compact__link.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.catalog-compact__label { flex: none; padding: 0 2px; color: var(--text); font-size: .9rem; font-weight: 700; white-space: nowrap; }
/* Лента в «Все» (№22.4, 26.09.2026): строка о составе и быстрые цены над выдачей, пометка «Новое» на фото,
   честный конец ленты. Карточки того же размера, что во всех состояниях оболочки. */
.feedbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; }
.feedbar__note { margin: 0; color: var(--muted); font-size: .88rem; }
.feedbar__prices { margin: 0; padding-bottom: 0; }
.feedbar__prices .chip { padding: 5px 12px; font-size: .84rem; }
.card__badge { position: absolute; left: 8px; top: 8px; background: rgba(255, 255, 255, .94); color: var(--text); font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.feed-end { margin: 24px 0 8px; padding: 28px 20px; text-align: center; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.feed-end__title { font-size: 1.1rem; font-weight: 750; color: var(--text); margin: 0 0 4px; }
.feed-end__sections { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 16px; }
/* Молодой город (templates/web/_young_city.html): вместо «пусто» — «только начинается», «Разместить» и живой город */
.young-city { margin: 24px 0 8px; padding: 32px 20px; text-align: center; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.catalog__results > .young-city:first-child { margin-top: 0; }
.young-city__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; }
.young-city__icon .icon { width: 28px; height: 28px; }
.young-city__title { font-size: 1.15rem; font-weight: 750; color: var(--text); margin: 0 0 6px; }
.young-city__text { color: var(--muted); margin: 0 auto 18px; max-width: 460px; }
.young-city__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.young-city__actions form { margin: 0; }
@media (max-width: 599px) { .young-city__actions { flex-direction: column; align-items: stretch; } .young-city__actions .btn { width: 100%; } }
/* Разговор о нескольких товарах (№23.1, 26.09.2026): полоска товаров в шапке, товары под сообщением, окно сообщения */
.chat__goods { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.chat__goods::-webkit-scrollbar { display: none; }
.chat__good { flex: none; max-width: 240px; }
.chat__good.is-inactive { opacity: .7; }
.msg__goods { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.msg__good { display: block; padding: 4px 8px; border-radius: var(--r-8); background: rgba(255, 255, 255, .6); border: 1px solid var(--line); font-size: var(--fs-13); color: var(--text-2); }
.compose__goods { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.compose__target { padding: 8px 12px; border-radius: var(--r-16); background: var(--primary-soft); color: var(--text); font-size: var(--fs-14); }
.compose__offer { font-size: var(--fs-14); }
.compose__chip { align-self: flex-start; cursor: pointer; }
/* Корзина (№30.1, 26.09.2026): группы по продавцам, кнопка в каждой группе, общей суммы и общей кнопки нет */
.cart__lead { color: var(--muted); margin: -4px 0 16px; max-width: 70ch; }
.cart__summary { margin-bottom: 16px; }
.cart__clear { margin: 8px 0 24px; }
.cart__toast { margin: 8px 0 0; font-size: var(--fs-13); color: var(--text-2); }
.cartgroup { background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.cartgroup__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cartgroup__who { display: flex; flex-direction: column; min-width: 0; }
.cartgroup__name { font-size: var(--fs-16); margin: 0; }
.cartgroup__name a { color: var(--text); }
.cartgroup__lines { list-style: none; margin: 0; padding: 0; }
.cartline { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.cartline.is-inactive .cartline__item { opacity: .65; }
.cartline__pick { width: 20px; height: 20px; flex: none; accent-color: var(--brand, var(--primary)); }
.cartline__item { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--text); }
.cartline__item img, .cartline__noimg { width: 56px; height: 56px; border-radius: var(--r-12); object-fit: cover; flex: none; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.cartline__text { display: flex; flex-direction: column; min-width: 0; }
.cartline__title { font-weight: 600; overflow-wrap: anywhere; }
.cartline__price { font-weight: 700; }
.cartline__was { font-weight: 500; font-size: var(--fs-13); color: var(--muted); }
.cartline__was--down { color: var(--ok); }
.cartline__talk { font-size: var(--fs-12); color: var(--primary-dark); font-weight: 600; }
.cartline__actions { display: flex; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.cartgroup__foot { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cartgroup__sum { margin: 0; color: var(--text-2); }
.cartgroup__state { margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.cartgroup__offer { margin: 0; }
.cartgroup__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card__cart { padding: 0 12px 12px; }
.cart__in { color: var(--text); }
@media (max-width: 599px) {
  .cartline { flex-wrap: wrap; }
  .cartline__actions { width: 100%; justify-content: flex-start; padding-left: 32px; }
  .cartgroup__actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Telegram Import v1: выбор города, внешнее объявление, CRM импорта */
.logo-group { grid-area: logo; display: flex; align-items: center; gap: 4px; }
/* Телефон: город — во второй строке, слева от поиска (как у Авито — город рядом с поиском). В первой строке с корзиной,
   уведомлениями и «Разместить» он не помещался: на 390 px шапка вылезала за экран, на 360 — и с одним городом
   (проверка перед запуском 30.09.2026). Две колонки: первая — по логотипу или городу, вторая — действия и поиск. */
@media (max-width: 899px) {
  .topbar__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo actions" "city search"; }
  .topbar__actions { justify-self: end; }
  .logo-group { display: contents; }
  .logo-group > .citypick, .logo-group > .logo__market { grid-area: city; }
  .logo-group > .logo__market, .citypick > .logo__market { height: 46px; margin: 0; padding: 0 10px; display: inline-flex; align-items: center; gap: 2px; font-size: .84rem; white-space: nowrap; }
  .search__input.search__input { padding-left: 40px; padding-right: 46px; }
  .search__field .icon { left: 14px; }
}
.citypick { position: relative; }
.citypick > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.citypick > summary::-webkit-details-marker { display: none; }
.citypick__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 180px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: grid; }
.citypick__panel a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--text); font-weight: 550; }
.citypick__panel a[aria-current="true"] { background: var(--brand-soft); color: var(--brand-dark); }
/* Города по странам (12.10.2026): флаг и страна над её городами; длинный список прокручивается внутри панели. */
.citypick__panel--countries { min-width: 220px; max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain; gap: 2px; }
.citypick__group { display: grid; }
.citypick__group + .citypick__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.citypick__country { margin: 0; padding: 8px 10px 4px; font-size: .78rem; font-weight: 650; letter-spacing: .02em; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .citypick__panel a:hover { background: var(--brand-soft); color: var(--brand-dark); } }

.external-actions { display: grid; gap: 8px; }

.main--wide { max-width: 1680px; }
.imp-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.imp-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; color: var(--text-2); font-weight: 600; font-size: var(--fs-14); }
@media (hover: hover) and (pointer: fine) { .imp-nav a:hover { background: var(--surface); } }
.imp-nav a[aria-current="page"] { background: var(--brand); color: #fff; }
.imp-nav__home { color: var(--muted) !important; }
.imp-head h1 { margin: 0 0 4px; font-size: var(--fs-22); }
.imp-head p { margin: 0 0 16px; max-width: 900px; }
.imp-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px; scrollbar-width: thin; }
.imp-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--r-12); background: var(--surface); color: var(--text-2); font-weight: 600; box-shadow: var(--shadow); }
.imp-tab.is-active { background: var(--text); color: #fff; }
.imp-tab__count { font-size: var(--fs-12); padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.imp-tab.is-active .imp-tab__count { background: rgba(255, 255, 255, .18); color: #fff; }
.imp-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 8px; align-items: end; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 12px; margin-bottom: 12px; }
.imp-filters label { display: grid; gap: 4px; font-size: var(--fs-12); color: var(--muted); min-width: 0; }
.imp-filters select, .imp-filters input { width: 100%; min-width: 0; }
.imp-filters input[type=date] { min-height: 46px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-12); background: var(--surface); font: inherit; color: var(--text); }
.imp-filters__q { grid-column: span 2; }
.imp-filters__actions { display: flex; gap: 8px; }
@media (max-width: 599px) { .imp-filters__q { grid-column: auto; } }
.imp-publish-all { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; background: var(--accent-soft); color: var(--ok); border-radius: var(--r-16); padding: 8px 16px; margin-bottom: 8px; }
.imp-publish-all span { display: inline-flex; gap: 8px; align-items: center; }
.imp-bulk { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg); padding: 8px 0 8px; }
.imp-check { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; font-size: var(--fs-14); }
.imp-bulk__source { display: inline-flex; gap: 8px; }
.imp-bulk__source select { max-width: 180px; }
.imp-table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); margin-bottom: 16px; }
.imp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.imp-table th, .imp-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.imp-table thead th { font-size: var(--fs-12); color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .imp-row:hover { background: var(--surface-2); } }
.imp-row.is-selected { background: var(--brand-soft); }
.imp-col-check { width: 32px; }
.imp-row__main { display: flex; gap: 8px; align-items: center; color: var(--text); min-width: 240px; }
.imp-row__num { color: var(--muted); font-variant-numeric: tabular-nums; }
.imp-row__title { font-weight: 600; }
.imp-thumb { width: 48px; height: 48px; border-radius: var(--r-8); object-fit: cover; flex: none; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.imp-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.imp-chip { font-size: var(--fs-12); padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); }
.imp-nowrap { white-space: nowrap; }
.imp-yes { color: var(--ok); } .imp-no { color: var(--danger); } .imp-warn { color: var(--warn); font-weight: 600; }
.imp-status { display: inline-block; font-size: var(--fs-12); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.imp-status--ready, .imp-status--published, .imp-status--market-active { background: var(--ok-bg); color: var(--ok); }
.imp-status--needs_review, .imp-status--market-filling { background: var(--warn-bg); color: var(--warn); }
.imp-status--failed, .imp-status--duplicate { background: var(--danger-soft); color: var(--danger); }
.imp-status--received, .imp-status--processing { background: var(--primary-soft); color: var(--primary-dark); }
.imp-status--market-inactive { background: #eef0f3; color: var(--muted); }
.imp-status--review { background: var(--warn-bg); color: var(--warn); }
.imp-status--expired { background: var(--danger-soft); color: var(--danger); }
.imp-status--unused { background: var(--surface-2); color: var(--muted); }
.imp-why { display: block; font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }
.imp-itembar .imp-why { display: inline; margin: 0; }
.imp-processing-line { display: flex; gap: 8px; align-items: center; color: var(--text-2); font-size: var(--fs-13); margin: -4px 0 8px; }
.imp-menu { position: relative; }
.imp-menu > summary { list-style: none; cursor: pointer; }
.imp-menu > summary::-webkit-details-marker { display: none; }
.imp-menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: 2px; min-width: 220px; padding: 8px; background: var(--surface); border-radius: var(--r-16); box-shadow: var(--shadow); }
.imp-menu__list .btn { justify-content: flex-start; width: 100%; }
.imp-missing { border-color: var(--danger); }
.imp-access-add { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; }
.imp-access-add label { display: grid; gap: 4px; flex: 1 1 220px; }
.imp-access-add label span { font-size: var(--fs-12); color: var(--text-2); }
.imp-pager { display: flex; gap: 12px; align-items: center; justify-content: center; }

.imp-itembar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 8px 16px; margin-bottom: 12px; position: sticky; top: 0; z-index: 20; }
.imp-itembar__back { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.imp-itembar__num { font-weight: 700; font-size: var(--fs-16); }
.imp-itembar__nav { display: inline-flex; gap: 4px; }
.imp-itembar__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.imp-reasons { display: grid; gap: 8px; margin-bottom: 8px; }
.imp-reason { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; border-radius: var(--r-16); padding: 8px 16px; background: var(--warn-bg); color: var(--warn); }
.imp-reason--hard { background: var(--danger-soft); color: var(--danger); }
.imp-reason--ok { background: var(--ok-bg); color: var(--ok); }
.imp-reason__text { display: grid; gap: 2px; }
.imp-reason__text span { color: var(--text-2); font-size: var(--fs-13); }
.imp-warning { display: flex; gap: 8px; align-items: flex-start; color: var(--text-2); font-size: var(--fs-13); margin: 0 0 8px; }
.imp-processing { display: flex; gap: 8px; align-items: center; }
.imp-assign select { max-width: 260px; }
.imp-panes { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .imp-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .imp-pane--preview { grid-column: 1 / -1; } }
@media (min-width: 1440px) { .imp-panes { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(400px, 430px); } .imp-pane--preview { grid-column: auto; } }
.imp-pane { background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.imp-pane h2 { font-size: var(--fs-15); margin: 0 0 12px; display: flex; gap: 8px; align-items: center; }
.imp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: var(--fs-13); margin: 0 0 12px; }
.imp-facts dt { color: var(--muted); }
.imp-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.imp-contact { display: block; }
.imp-original { white-space: normal; background: var(--surface-2); border-radius: var(--r-16); padding: 12px; font-size: var(--fs-14); line-height: 1.45; overflow-wrap: anywhere; margin-bottom: 8px; }
.imp-media { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.imp-media img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-8); }
.imp-media__state { font-size: var(--fs-12); padding: 8px 8px; border-radius: var(--r-8); background: var(--surface-2); }
.imp-details summary { cursor: pointer; font-weight: 600; font-size: var(--fs-14); }
.imp-log { font-size: var(--fs-12); padding-left: 16px; color: var(--text-2); }
.imp-log--error { color: var(--danger); } .imp-log--retry, .imp-log--warn { color: var(--warn); }
.imp-form { display: grid; gap: 8px; }
.imp-form label { display: grid; gap: 4px; font-size: var(--fs-13); color: var(--muted); min-width: 0; }
.imp-form input:not([type=checkbox]), .imp-form select, .imp-form textarea { width: 100%; min-width: 0; color: var(--text); }
.imp-form .imp-inline, .imp-inline { display: flex; gap: 8px; align-items: center; }
.imp-inline input[type="checkbox"] { width: auto; }
.imp-optout { display: flex; flex-wrap: wrap; gap: 8px 8px; align-items: center; margin: 8px 0 0; }  /* ADR 0017 */
.imp-form--narrow { max-width: 720px; }
.imp-row2 { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* Справочник Telegram-сообществ (CRM, ADR 0018) */
.comm-fit { background: var(--surface-2); color: var(--text); }
.comm-fit--primary { background: var(--accent-soft); color: var(--ok); }
.comm-fit--no { background: var(--danger-soft); color: var(--danger); }
.comm-gap td:first-child { font-weight: 600; }
.comm-langs { display: flex; flex-wrap: wrap; gap: 8px 16px; border: 0; padding: 0; margin: 0; }
.comm-langs legend { width: 100%; padding: 0; margin-bottom: 2px; }
.comm-fits select { width: 100%; min-width: 0; }
.imp-save { font-size: var(--fs-12); font-weight: 500; color: var(--muted); margin-left: auto; }
.imp-save--ok { color: var(--ok); } .imp-save--error { color: var(--danger); }
.imp-photos { border: 0; padding: 0; margin: 0; }
.imp-photos legend { font-size: var(--fs-13); color: var(--muted); margin-bottom: 8px; }
.imp-photos [data-photos] { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-photo { width: 118px; display: grid; gap: 4px; font-size: var(--fs-12); }
.imp-photo img { width: 118px; height: 88px; object-fit: cover; border-radius: var(--r-8); }
.imp-photo label { display: flex; gap: 4px; color: var(--text-2); font-size: var(--fs-12); }
.imp-photo__move { display: flex; gap: 4px; }
.imp-photo__move .btn { min-height: 28px; padding: 2px 8px; }
.imp-dups { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.imp-dups h3 { font-size: var(--fs-14); margin: 0 0 8px; }
.imp-dup { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; font-size: var(--fs-13); }
.imp-dup > span { flex: 1; min-width: 0; }
.imp-preview-switch { display: flex; gap: 8px; margin-bottom: 8px; }
.imp-frame-wrap { overflow: auto; background: var(--bg); border-radius: var(--r-16); display: flex; justify-content: center; }
.imp-frame { border: 0; background: var(--bg); display: block; height: 1100px; }
.imp-frame--phone { width: 390px; max-width: 100%; }
.imp-frame--desktop { width: 1180px; max-width: none; }
.imp-keys kbd { font-family: inherit; font-size: var(--fs-12); padding: 1px 8px; border-radius: var(--r-8); border: 1px solid var(--line-strong); background: var(--surface); }
.imp-modes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.imp-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); }
.imp-matrix th, .imp-matrix td { padding: 0; border-bottom: 1px solid var(--line); text-align: center; }
.imp-matrix thead th { padding: 8px 12px; font-size: var(--fs-13); background: var(--surface-2); }
.imp-matrix thead th a { display: block; color: var(--text); font-weight: 700; }
.imp-matrix tbody th, .imp-matrix tfoot th { text-align: left; padding: 8px 12px; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--surface); }
.imp-matrix tbody th .icon { margin-right: 8px; color: var(--muted); }
.imp-matrix tfoot td { padding: 8px 12px; }
.imp-cell a { display: block; padding: 8px 12px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .imp-cell a:hover { outline: 2px solid var(--brand); outline-offset: -2px; } }
.imp-cell__pipe { display: block; font-size: var(--fs-12); font-weight: 500; color: var(--muted); }
.imp-heat-0 a { color: #b8bec8; font-weight: 500; }
.imp-heat-1 { background: #f3f5ff; } .imp-heat-2 { background: #e3e8ff; } .imp-heat-3 { background: #cdd5ff; }
.imp-heat-4 { background: #b4c0ff; } .imp-heat-5 { background: #97a6fb; }
.imp-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.imp-market .imp-facts { grid-template-columns: 1fr auto; }
.imp-market .imp-facts dd { white-space: nowrap; text-align: right; }
.imp-market h3 { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: 0 0 8px; font-size: var(--fs-16); }
.preview-body { background: var(--bg); }
.preview-label { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0; }
.preview-card { grid-template-columns: minmax(0, 260px); margin-bottom: 16px; }

/* Компании (ADR 0010): отметка «Компания», страница /c/<имя>, кабинет компании, QR для печати, переключатель режима */
.avatar--xs { width: 20px; height: 20px; font-size: .6rem; }
.avatar--xl { width: 88px; height: 88px; font-size: 2rem; }
.company-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; background: var(--brand-soft, #ecefff); color: var(--brand-dark, #3a4bd6); font-size: .8rem; font-weight: 650; white-space: nowrap; }
.company-badge--sm { padding: 1px 7px; font-size: .7rem; }
.company-badge .icon { width: 14px; height: 14px; }
.seller__info .company-badge, .company-head__text .company-badge { justify-self: start; }
.card__company { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; font-size: .78rem; color: var(--text-2); }
.card__company-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 600; }
.company-open { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.company-open--now { color: var(--ok); font-weight: 600; }
.company-head { display: grid; gap: 16px; }
.company-head__main { display: flex; gap: 16px; align-items: center; min-width: 0; }
.company-head__text { min-width: 0; display: grid; gap: 6px; }
.company-head__name { margin: 0; font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; font-weight: 700; }
.company-head__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0; font-size: .9rem; color: var(--muted); }
.company-head__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.company-head__activity { margin: 0; font-size: .9rem; }
.company-head__actions { display: grid; gap: 10px; }
.company-head__actions form { margin: 0; }
.company-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.company-share .btn { min-width: 0; }
.company-share__copy { grid-column: 1 / -1; }
.map-pin { width: 26px; height: 26px; }
.company-url { display: flex; align-items: center; gap: 6px; margin: 0; overflow-wrap: anywhere; }
.company-layout { display: grid; gap: 16px; }
.company-layout__side .panel h2 { font-size: 1.1rem; }
.company-layout__side h3 { font-size: .95rem; margin: 16px 0 8px; }
.company-where__address { display: flex; gap: 8px; align-items: flex-start; font-weight: 550; }
.company-map { height: 260px; border-radius: var(--radius); overflow: hidden; margin: 12px 0; background: var(--surface-2); }
.company-map--pick { height: 300px; }
.company-map__links { color: var(--muted); margin: 10px 0 0; }
.map-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--brand, #4a5ef0); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.company-hours { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: .92rem; }
.company-hours dt { color: var(--muted); }
.company-hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.company-about__text { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; }
.company-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0; }
.company-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
@media (min-width: 900px) {
  .company-head { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; }
  .company-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .company-layout__side { position: sticky; top: calc(var(--header-h) + 16px); }
}
.company-intro__lead { font-size: 1.05rem; font-weight: 550; }
.company-intro__list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.company-intro__list li { display: flex; gap: 10px; align-items: flex-start; }
.company-intro__list .icon { color: var(--brand, #4a5ef0); flex: none; margin-top: 2px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; }
.pick-grid .check { margin: 8px 0; }
.slug-field { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-12); overflow: hidden; background: var(--surface); }
.slug-field__prefix { display: flex; align-items: center; padding: 0 4px 0 12px; color: var(--muted); white-space: nowrap; font-size: var(--fs-14); background: var(--surface-2); }
.slug-field input { border: 0; border-radius: 0; min-width: 0; flex: 1; box-shadow: none; }
.company-photo-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.company-photo-list li { display: grid; gap: 6px; justify-items: start; }
.company-photo-list img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.company-photo-list__state { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); }
.move-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.move-list__item { display: flex; gap: 8px; align-items: center; min-width: 0; }
.move-list__item img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-8); flex: none; }
.mode-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px; background: var(--surface); border-radius: var(--r-16); box-shadow: var(--shadow); max-width: 100%; overflow-x: auto; }
.mode-switch__item { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 16px; border-radius: var(--r-12); font: inherit; font-weight: 600; font-size: var(--fs-14); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.mode-switch__item.is-active { background: var(--text); color: #fff; }
.mode-switch__item .badge { position: static; }
.segmented { border: 0; padding: 0; }
.segmented__item { display: inline-flex; align-items: center; gap: 8px; margin: 0 12px 8px 0; cursor: pointer; font-size: var(--fs-14); }
.catalog__head .zoneform { display: flex; gap: 6px; flex-wrap: wrap; }
.owner-choice .check { margin: 8px 0; }
.chat__as { margin-bottom: 8px; }
.notification__company { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.qr-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }
.qr-sheet { background: #fff; color: #111; border-radius: var(--r-24); box-shadow: var(--shadow); padding: 28px 20px; max-width: 520px; margin: 0 auto 16px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.qr-sheet__head { display: flex; gap: 16px; align-items: center; text-align: left; }
.qr-sheet__name { margin: 0; font-size: var(--fs-22); }
.qr-sheet__lead { margin: 2px 0 0; color: #555; }
.qr-sheet__code svg { width: min(78vw, 320px); height: auto; display: block; }
.qr-sheet__hint { margin: 0; font-weight: 600; }
.qr-sheet__url { margin: 0; font-size: var(--fs-18); font-weight: 700; overflow-wrap: anywhere; }
.qr-sheet__brand { margin: 4px 0 0; color: #777; font-size: var(--fs-13); }
@media print {
  .topbar, .footer, .tabbar, .no-print, .flash, .dev-bar, .staff-bar { display: none !important; }
  body, .main { background: #fff !important; padding: 0 !important; }
  .qr-sheet { box-shadow: none; max-width: none; margin: 0 auto; }
  .qr-sheet__code svg { width: 9cm; }
}

/* Телефон: «Все районы» и «Все продавцы» — компактные таблетки в одну строку, как чипы цены ниже (владелец,
   29.09.2026: плашки были громоздкими, а перенос второй на новую строку ложился поверх текста — у строки была
   фиксированная высота). Шрифт — 16px: иначе Safari на iPhone увеличивает страницу при выборе. */
@media (max-width: 959px) {
  .catalog__head { grid-template-rows: 36px auto; }
  .catalog__head .zoneform { grid-row: 2; grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .catalog__head .zoneform::-webkit-scrollbar { display: none; }
  .catalog__head .zoneform select { flex: none; width: auto; max-width: none; height: 36px; min-height: 36px; padding: 0 30px 0 14px; border-radius: 20px; border-color: var(--line); background-color: var(--surface); background-position: right 10px center; color: var(--text-2); font-weight: 550; box-shadow: none; }
  .catalog__head .zoneform select:has(option:checked:not([value=""])) { background-color: var(--brand-soft); border-color: transparent; color: var(--brand-dark); }
}

/* Счётчик фото и «Новое» стояли в одном углу (top/left 8px) и ложились друг на друга у нового товара с
   несколькими фото (проверка мобильной раскладки, 29.09.2026): «Новое» — под счётчиком. */
.card__photos ~ .card__badge { top: 36px; }
@media (max-width: 959px) {
  /* Таблетка фильтра — по ширине выбранного значения (где браузер умеет), не шире половины строки. */
  .catalog__head .zoneform select { field-sizing: content; max-width: calc(50% - 4px); text-overflow: ellipsis; }
}

/* Переносы строк сохраняются только в тексте сообщения. На всём пузыре pre-wrap рисовал пустой строкой перевод
   строки из разметки меню «⋯» (проверка мобильной раскладки, 29.09.2026). */
.msg { white-space: normal; }
.msg__body { white-space: pre-wrap; }

/* ==============================================================================================================
   Luk на телефоне (PWA, ADR 0013). Режим и браузер отмечает static/luk/app.js на <html> до первого кадра:
   .is-app — открыт с экрана «Домой»; data-app-platform — браузер; data-install — какой вариант установки показать.
   ============================================================================================================== */
/* Безопасные зоны (viewport-fit=cover): в альбомной ориентации iPhone с вырезом содержимое не уходит под него, нижняя
   панель — над полосой «Домой». Строка состояния default: страница начинается под часами, отступ сверху — ноль и нужен
   только если стиль строки станет прозрачным. */
.topbar { padding-top: env(safe-area-inset-top); }
.wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
@media (min-width: 900px) { .wrap { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } }

/* Без кнопок браузера — своя «Назад» в шапке (кроме главной). Телефон: слева от поиска, первая строка не теснится. */
.topbar__back { display: none; }
html.is-app .topbar__back { display: inline-flex; grid-area: back; }
@media (max-width: 899px) {
  html.is-app .topbar__row:has(.topbar__back) { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "logo actions actions" "back city search"; }
  html.is-app .topbar__back { width: 40px; margin-left: -6px; }
}
@media (min-width: 900px) {
  html.is-app .topbar__row:has(.topbar__back) { grid-template-columns: auto auto minmax(240px, 1fr) auto; grid-template-areas: "back logo search actions"; }
  html.is-app .topbar__back { margin-right: -10px; }
}
/* В приложении пункты «Установить Luk на телефон» не нужны. */
html.is-app [data-app-install-link] { display: none; }

/* Экран «Проверьте почту» в приложении: ссылка из письма на iPhone откроется в Safari, а не здесь (ADR 0011, 0013). */
.app-hint { display: none; }
html.is-app .app-hint, html[data-tg] .app-hint { display: block; margin: -8px 0 16px; padding: 8px 16px; border-radius: var(--r-16); background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; font-size: var(--fs-14); line-height: 1.4; }

/* Карточка «Установить» — в потоке страницы, не всплывающее окно */
.app-offer { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--brand-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px; margin: 0 0 16px; }
.push-offer + .app-offer, .chat + .app-offer { margin-top: 12px; }
.app-offer__icon { width: 48px; height: 48px; flex: none; }
.app-offer__body { flex: 1; min-width: 0; }
.app-offer__title { margin: 0 0 2px; font-weight: 700; font-size: 1.02rem; }
.app-offer__text { margin: 0 0 12px; color: var(--text-2); font-size: .93rem; line-height: 1.45; }
.app-offer__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.app-offer__howto { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
html[data-app-platform^="ios"] [data-offer-for="other"], html:not([data-app-platform^="ios"]) [data-offer-for="ios"] { display: none; }

/* Как установить (templates/web/_install.html): один вариант под этот браузер; без JavaScript — все, кроме кнопки */
.install__variant { display: none; }
html:not([data-install]) .install__variant:not([data-install-for="prompt"]),
html[data-install="prompt"] [data-install-for~="prompt"],
html[data-install="ios-safari"] [data-install-for~="ios-safari"],
html[data-install="ios-other"] [data-install-for~="ios-other"],
html[data-install="ios-chrome"] [data-install-for~="ios-chrome"],
html[data-install="android"] [data-install-for~="android"],
html[data-install="inapp"] [data-install-for~="inapp"],
html[data-install="desktop"] [data-install-for~="desktop"],
html[data-install="app"] [data-install-for~="app"],
html[data-install="installed"] [data-install-for~="installed"] { display: block; }
.install__variant p { margin: 0 0 8px; }
.install__variant > .btn { margin-bottom: 8px; }
.install__title { font-weight: 600; }
.install__steps { list-style: none; counter-reset: step; margin: 0 0 4px; padding: 0; display: grid; gap: 16px; }
.install__steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px 12px; align-items: start; }
.install__steps li::before { content: counter(step); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: var(--fs-13); display: flex; align-items: center; justify-content: center; }
.install__text { font-size: var(--fs-14); line-height: 1.45; }
.install__pic { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.install__done { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ok); }
.install__copied { color: var(--ok); }
/* Картинки шагов — макеты кнопок iPhone и Android: системный синий, как в Safari и Chrome */
.pic-key, .pic-row, .pic-head, .pic-address { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-12); color: #0a84ff; }
.pic-key { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; }
.pic-or { color: var(--muted); font-size: var(--fs-12); }
.pic-row { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; width: min(240px, 100%); padding: 8px 16px; color: var(--text); font-weight: 500; font-size: var(--fs-14); }
.pic-row .icon { color: var(--text-2); }
.pic-head { display: inline-flex; justify-content: space-between; gap: 32px; width: min(240px, 100%); padding: 8px 16px; font-size: var(--fs-14); }
.pic-address { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: min(240px, 100%); padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: var(--fs-13); }
.pic-address .icon { color: #0a84ff; }

/* Уведомления на iPhone в браузере: объяснение и инструкция вместо отказа */
.push-ios { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.push-ios > p { margin: 0 0 16px; }

/* Страница «Luk на телефоне» */
.app-page__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.app-page__head h1 { margin: 0 0 4px; }
.app-page__head p { margin: 0; }
.app-page__icon { width: 64px; height: 64px; flex: none; }
@media (max-width: 599px) { .app-page__icon { width: 52px; height: 52px; } }
.app-page__facts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.app-page__facts li { display: flex; gap: 8px; align-items: flex-start; }
.app-page__facts .icon { color: var(--brand); }

/* Кружок непрочитанного на колокольчике и корзине — внутри кнопки на узком телефоне: с left: 23px он вылезал за край
   и налезал на «Разместить», между ними там 2px (проверка PWA, пакет 30.09.2026). */
@media (max-width: 420px) { .iconbtn .badge { left: auto; right: 0; } }

/* ==============================================================================================================
   Витрина компании /@<имя> (ADR 0010, «Витрина компании»; проход по виду — решение владельца 30.09.2026): обложка,
   логотип, слоган, преимущества и соцсети, «Написать» и «Показать контакты», объявления компании с вкладками и
   поиском. Телефон — в первую очередь: обложка 2:1, логотип наезжает на неё, две главные кнопки в ряд; компьютер —
   обложка ≈ 4:1, шапка в две колонки, объявления слева, адрес и часы — справа.
   ============================================================================================================== */
.store { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.store-head { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.store-cover { position: relative; aspect-ratio: 2 / 1; background: var(--brand-gradient); overflow: hidden; }
.store-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
/* Лёгкое затемнение снизу — логотип на светлой обложке не теряется. */
.store-cover:has(img)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, rgba(16, 20, 40, .22), transparent); pointer-events: none; }
/* Без обложки — фон в цветах Luk с мягкими бликами и крупным знаком магазина. */
.store-cover:not(:has(img))::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 30%, rgba(255, 255, 255, .24) 0, transparent 42%), radial-gradient(circle at 85% 80%, rgba(255, 255, 255, .16) 0, transparent 38%); }
.store-cover__mark { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, .22); }
.store-cover__mark .icon { width: 88px; height: 88px; stroke-width: 1.4; }
.store-head__body { padding: 0 16px 18px; display: grid; gap: 16px; }
/* Логотип наезжает на обложку; название и отметка — справа от него, слоган и район — на всю ширину (на компьютере —
   в колонке текста). Текстовый блок раскладывается прямо в сетку шапки (display: contents). */
.store-head__identity { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: start; position: relative; }
.store-head__text { display: contents; }
.store-logo { grid-column: 1; grid-row: 1 / span 2; margin-top: -40px; display: block; border-radius: 24px; padding: 4px; background: var(--surface); box-shadow: 0 6px 18px rgba(22, 26, 60, .16); }
.store-logo .avatar { width: 84px; height: 84px; border-radius: 20px; font-size: 2rem; }
/* Без логотипа — буква названия на фоне в цветах Luk, как знак магазина. */
.store-logo .avatar:not(.avatar--photo) { background: var(--brand-gradient); color: #fff; }
.store-head__name { grid-column: 2; grid-row: 1; margin: 0; padding-top: 10px; font-size: 1.4rem; line-height: 1.2; font-weight: 750; letter-spacing: -.02em; overflow-wrap: anywhere; }
.store-head__badges { grid-column: 2; grid-row: 2; margin: 5px 0 0; }
.store-head__tagline { grid-column: 1 / -1; margin: 14px 0 0; font-size: 1.05rem; font-weight: 550; color: var(--text); overflow-wrap: anywhere; line-height: 1.4; }
.store-head__meta { grid-column: 1 / -1; margin-top: 8px; gap: 4px 14px; }
.store-head__extras { display: grid; gap: 12px; }
.store-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.store-perk { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--brand-soft); color: var(--brand-dark); font-size: .86rem; font-weight: 600; line-height: 1.25; }
.store-perk .icon { width: 16px; height: 16px; flex: none; }
.store-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.store-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); transition: background-color .15s, color .15s; }
@media (hover: hover) and (pointer: fine) { .store-social:hover { background: var(--brand-soft); color: var(--brand-dark); } }
.store-social .brand { width: 19px; height: 19px; }
.store-actions { display: grid; gap: 10px; align-content: start; }
.store-actions form { margin: 0; }
.store-actions .contacts { margin: 0; }
.store-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.store-cta .btn { width: 100%; min-height: 48px; }
.store-share { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.store-share .btn { min-width: 0; min-height: 54px; padding: 7px 4px; flex-direction: column; font-size: .78rem; font-weight: 600; gap: 3px; white-space: nowrap; line-height: 1.15; background: transparent; border-color: var(--line); color: var(--text-2); }
.store-share .btn .icon { width: 17px; height: 17px; flex: none; }
@media (hover: hover) and (pointer: fine) { .store-share .btn:hover { background: var(--surface-2); color: var(--text); } }
.store-share .btn span { overflow: hidden; text-overflow: ellipsis; }
/* Предпросмотр «Так увидят клиенты»: кнопки выглядят как у посетителя, но не действуют. */
.store-actions .btn[aria-disabled="true"] { opacity: 1; cursor: default; pointer-events: none; }
.store-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.store-nav::-webkit-scrollbar { display: none; }
.store-nav a { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); color: var(--text-2); font-weight: 600; font-size: .9rem; }
@media (hover: hover) and (pointer: fine) { .store-nav a:hover { color: var(--text); } }
.store-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.store-layout__main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.store-goods, .store-about, .company-where { scroll-margin-top: calc(var(--header-h) + 12px); }
.store-goods .section-head { margin: 4px 0 12px; }
.store-goods .section-head h2 { font-size: 1.3rem; }
.store-goods .empty { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px 20px; }
.store-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 12px; }
.store-search { position: relative; display: flex; }
.store-search > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.store-search input { padding-left: 40px; border-radius: 12px 0 0 12px; border-right: 0; font-size: 16px; background: var(--surface); }
.store-search__go { border-radius: 0 12px 12px 0; padding: 10px 16px; }
.store-sort { position: relative; display: flex; align-items: center; }
.store-sort > .icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.store-sort select { padding-left: 36px; font-size: 16px; background-color: var(--surface); }
.store-tabs { margin-bottom: 14px; }
.chip__count { color: var(--muted); font-weight: 500; margin-left: 2px; }
.chip--active .chip__count { color: rgba(255, 255, 255, .72); }
.store-subtitle { display: flex; align-items: center; gap: 6px; font-size: 1.02rem; margin: 6px 0 10px; }
.store-subtitle .icon { color: var(--brand); }
.store-fresh { margin-bottom: 8px; }
.store-found { margin: 0 0 12px; }
.store-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0; }
.store-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.store-about h2, .company-where h2 { font-size: 1.1rem; margin-top: 0; }
.store-about .company-about__text { font-size: 1rem; }
.company-where h3 { font-size: .95rem; margin: 16px 0 8px; }
.store-preview-note .icon { vertical-align: -3px; }
.store-open-line { display: flex; margin: -2px 0 10px; font-size: .92rem; }
@media (min-width: 600px) {
  .store-tools { grid-template-columns: minmax(0, 1fr) 220px; }
  .store-share .btn { flex-direction: row; min-height: 42px; gap: 6px; font-size: .86rem; }
  .store-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .store-cover { aspect-ratio: auto; height: clamp(200px, 22vw, 280px); }
  .store-head__body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity actions" "extras actions"; padding: 0 28px 24px; gap: 16px 32px; }
  .store-head__identity { grid-area: identity; gap: 2px 20px; }
  .store-logo { grid-row: 1 / span 4; margin-top: -58px; border-radius: 30px; padding: 5px; }
  .store-logo .avatar { width: 116px; height: 116px; border-radius: 26px; font-size: 2.6rem; }
  .store-head__name { padding-top: 16px; font-size: 1.9rem; }
  .store-head__tagline, .store-head__meta { grid-column: 2; }
  .store-head__tagline { margin-top: 8px; font-size: 1.1rem; }
  .store-head__meta { margin-top: 6px; }
  .store-head__extras { grid-area: extras; padding-left: 146px; }
  .store-actions { grid-area: actions; align-self: end; width: 340px; }
  .store-share .btn { flex-direction: column; min-height: 54px; gap: 3px; font-size: .78rem; }
  .store-nav { margin: 0; padding: 0; }
  .store-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .store-layout__side { position: sticky; top: calc(var(--header-h) + 16px); }
}
/* Кабинет: «Так увидят клиенты» — та же шапка витрины в рамке. */
.store-preview { border: 1px dashed var(--line-strong); border-radius: calc(var(--radius-lg) + 6px); padding: 6px; background: var(--surface-2); margin-bottom: 12px; }
.store-preview .store-head { box-shadow: none; }
.store-preview .store-head__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; padding: 0 16px 16px; }
.store-preview .store-head__identity { grid-area: auto; }
.store-preview .store-cover { aspect-ratio: 3 / 1; height: auto; }
.store-preview .store-logo { grid-row: 1 / span 2; margin-top: -34px; border-radius: 22px; padding: 4px; }
.store-preview .store-logo .avatar { width: 72px; height: 72px; border-radius: 18px; font-size: 1.7rem; }
.store-preview .store-head__name { padding-top: 8px; font-size: 1.3rem; }
.store-preview .store-head__tagline, .store-preview .store-head__meta { grid-column: 1 / -1; }
.store-preview .store-head__extras { grid-area: auto; padding-left: 0; }
.store-preview .store-actions { grid-area: auto; width: auto; }
.cover-edit__image { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--r-16); display: block; background: var(--surface-2); }
.cover-edit__empty { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 1; border-radius: var(--r-16); background: var(--brand-gradient); color: rgba(255, 255, 255, .85); font-weight: 600; }
/* Профиль компании: преимущества группами (не больше шести), соцсети. */
.perk-group { border: 0; padding: 0; margin: 0 0 12px; }
.perk-group__title { font-weight: 600; font-size: var(--fs-14); color: var(--text-2); margin-bottom: 4px; padding: 0; }
.perk-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; }
.perk-pick .check .icon { color: var(--brand); width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.perk-pick .check:has(input:disabled) { opacity: .5; }
.form-subtitle { font-size: var(--fs-15); margin: 20px 0 4px; }
.brand--inline { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; color: var(--text-2); }
/* «Возможности компании» (luk/companies/benefits.py). */
.benefits__title { font-weight: 700; font-size: var(--fs-16); margin: 0; }
.benefits__lead { margin: 2px 0 12px; }
.benefits__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.benefits__item { display: flex; gap: 12px; align-items: flex-start; }
.benefits__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-12); background: var(--brand-soft); color: var(--brand-dark); flex: none; }
.benefits__icon .icon { width: 18px; height: 18px; }
.benefits--compact .benefits__list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.benefits--compact .benefits__item { align-items: center; font-size: var(--fs-14); }
.benefits--compact .benefits__icon { width: 30px; height: 30px; border-radius: var(--r-12); }
.benefits--compact .benefits__item strong { font-weight: 600; }
[data-settings-company] .benefits { margin: 4px 0 16px; }
.benefits-details > summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.benefits-details[open] > summary { margin-bottom: 16px; }
@media (min-width: 700px) { .benefits:not(.benefits--compact) .benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; } }
/* Разговор с компанией без объявления (ADR 0010): окно сообщения и шапка разговора. */
.compose__company { display: flex; gap: 12px; align-items: center; padding: 12px; margin: 0 0 16px; border-radius: var(--r-16); background: var(--surface-2); color: var(--text); }
@media (hover: hover) and (pointer: fine) { .compose__company:hover { color: var(--text); background: #eef1f5; } }
.compose__company .avatar { border-radius: 16px; }
.chat__company-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--r-12); background: var(--brand-soft); color: var(--brand-dark); flex: none; }
.inbox__cover .avatar { width: 56px; height: 56px; border-radius: 12px; }

/* CRM «Источники» и «Ссылки и QR» (ADR 0015). Таблица широкая — прокручивается внутри рамки, страница — нет. */
.src-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.src-kpi { display: grid; gap: 2px; background: var(--surface); border-radius: var(--r-24); box-shadow: var(--shadow); padding: 12px 16px; font-size: var(--fs-14); }
.src-kpi__label { color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.src-kpi b { font-size: var(--fs-18); }
.src-controls { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; margin-bottom: 4px; }
.src-controls .imp-modes { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.src-controls .btn { margin-bottom: 12px; }
.src-table th, .src-table td { padding-left: 6px; padding-right: 6px; }
.src-table thead th { white-space: normal; vertical-align: bottom; min-width: 72px; max-width: 120px; line-height: 1.25; }
.src-table thead th:first-child { min-width: 0; max-width: none; }
.src-table tbody th, .src-table tfoot th { font-weight: 600; overflow-wrap: anywhere; min-width: 120px; }
.src-table .src-num { text-align: right; font-variant-numeric: tabular-nums; }
.src-table td.src-num { white-space: nowrap; }
.src-table tfoot td, .src-table tfoot th { border-bottom: 0; background: var(--surface-2); }
.src-help ul { margin: 8px 0 0; padding-left: 16px; display: grid; gap: 8px; }
.src-help summary { cursor: pointer; }
.src-hint { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.src-share { display: inline-block; min-width: 4ch; color: var(--muted); font-weight: 400; }
.src-since { margin: 0 0 8px; }
.src-pair { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .src-pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.src-pair .panel { margin: 0; }
.src-builder { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .src-builder { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } }
.src-targets { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.src-radio { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-size: var(--fs-14); cursor: pointer; }
.src-radio:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.src-utm { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.src-url { margin: 0 0 8px; }
.src-url code { display: block; padding: 8px 12px; background: var(--surface-2); border-radius: var(--r-12); font-size: var(--fs-13); overflow-wrap: anywhere; user-select: all; }
.src-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.src-qr { background: #fff; border-radius: var(--r-12); padding: 8px; width: fit-content; margin: 8px 0; border: 1px solid var(--line); }
.src-qr svg { display: block; width: min(64vw, 240px); height: auto; }

/* «Переслать в Telegram-группы» (ADR 0016, дополнение 09.10.2026): кнопка владельца и окно с готовым текстом (на
   телефоне — лист снизу, над нижней панелью и полосой «Домой»). Экран после публикации — первая панель «Управления
   объявлением»: «Объявление уже опубликовано!», строка и крупная кнопка. */
.tgshare { margin: 12px 0; }
.tgshare__row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.owner-note .tgshare { margin: 8px 0 0; }
.owner-note .tgshare__open { min-height: 38px; padding: 8px 16px; }
.published { background: var(--accent-soft); border-color: #c9ecd7; }
.published__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-22); line-height: 1.25; }
.published__title .icon { flex: none; width: 26px; height: 26px; color: var(--ok); }
.published__lead { margin: 0; color: var(--text-2); }
.published__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; margin: 8px 0 12px; padding: 8px 12px; border-radius: var(--r-12); background: var(--brand-soft); color: var(--text); font-weight: 500; }
.published__group .brand { width: 20px; height: 20px; flex: none; }
.published__group span { flex: 1 1 180px; }
.published__group a { font-weight: 600; white-space: nowrap; }
/* Путь новичка после публикации (мастер красоты, прокат): шаги с отметками и кнопкой у каждого. */
.next-steps__title { margin: 16px 0 0; font-weight: 700; }
.next-steps { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 8px; }
.next-steps__item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-16); background: var(--surface); box-shadow: var(--shadow); }
.next-steps__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: var(--fs-14); }
.next-steps__item.is-done .next-steps__mark { background: var(--ok); color: #fff; }
.next-steps__mark .icon { width: 16px; height: 16px; }
.next-steps__text { display: grid; gap: 2px; min-width: 0; }
.next-steps__text span { color: var(--text-2); font-size: var(--fs-13); line-height: 1.35; overflow-wrap: anywhere; }
.next-steps__item .btn { white-space: nowrap; }
@media (max-width: 380px) { .next-steps__item { grid-template-columns: 30px minmax(0, 1fr); } .next-steps__item .btn { grid-column: 2; justify-self: start; } }
/* Профиль в шапке телефона — свой кружок рядом с колокольчиком (замечание Даши 10.10.2026). */
.topbar__me .avatar { width: 30px; height: 30px; font-size: .8rem; }
.tgshare--primary { margin: 16px 0 0; }
.tgshare--primary .tgshare__open { width: 100%; }
@media (min-width: 600px) { .tgshare--primary .tgshare__open { width: auto; min-width: 320px; } }
.manage-head__title { font-size: var(--fs-18); margin: 0 0 4px; }
.tgsheet { border: 0; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); border-radius: var(--r-24); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overscroll-behavior: contain; }
.tgsheet::backdrop { background: rgba(8, 10, 14, .45); }
.tgsheet__body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; }
.tgsheet__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: -8px; }
.tgsheet__head h2 { margin: 0; font-size: var(--fs-18); }
.tgsheet__lead { margin: 0; color: var(--text-2); font-size: var(--fs-14); line-height: 1.45; }
.tgsheet__text { display: block; width: 100%; min-height: 160px; max-height: 44vh; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; line-height: 1.45; resize: none; overflow: auto; }
.tgsheet__text:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.tgsheet__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tgsheet__actions .btn { flex: 1 1 200px; }
.tgsheet__send[disabled] { opacity: .75; cursor: progress; }
.tgsheet__status { margin: 0; min-height: 1.4em; color: var(--ok); font-size: var(--fs-14); }
.tgsheet__note { margin: -4px 0 0; color: var(--text-2); font-size: var(--fs-13); }
.tgsheet__offer { padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface-2); }
.tgsheet__offer p { margin: 0; font-size: var(--fs-14); line-height: 1.45; }
.tgsheet__offer form { display: grid; gap: 8px; }
.tgsheet__offer .field__label { margin: 0; }
.tgsheet__offer-row { display: flex; gap: 8px; }
.tgsheet__offer-row input { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.tgsheet__offer-row .btn { flex: none; }
.tgsheet__hint { color: var(--text-2); font-size: var(--fs-13); }
.tgsheet__status:empty { min-height: 0; }
.tgsheet__status.is-error { color: var(--danger); }
@media (max-width: 599px) {
  .tgsheet { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92vh; max-height: 92dvh; border-radius: var(--r-24) var(--r-24) 0 0; }
  .tgsheet__body { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
  .tgsheet__text { max-height: 40vh; max-height: 40dvh; }
  .tgsheet__actions { flex-direction: column; }
  .tgsheet__actions .btn { flex: none; width: 100%; }
}

/* Кабинет компании по разделам (владелец 01.10.2026: премиально, спокойно, воздушно; «у компании много возможностей»,
   но не всё сразу). Компьютер — подпункты «Компании» в левой колонке кабинета; телефон — строки разделов в обзоре,
   раздел — свой экран с «‹ Компания». Раздел — одна панель, группы разделены тонкой линией. */
.cabinet__sub { display: none; }
@media (min-width: 960px) {
  .cabinet__sub { display: grid; gap: 1px; list-style: none; margin: 2px 0 8px 20px; padding: 0 0 0 12px; border-left: 1px solid var(--line); }
  .cabinet__menu .cabinet__sub a { padding: 8px 8px; font-size: var(--fs-14); font-weight: 500; color: var(--text-2); border-radius: var(--r-12); }
  @media (hover: hover) and (pointer: fine) { .cabinet__menu .cabinet__sub a:hover { background: var(--surface-2); color: var(--text); } }
  .cabinet__menu .cabinet__sub a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
  .cabinet__menu a.is-parent { color: var(--brand-dark); font-weight: 600; }
  .cabinet__menu a.is-parent .icon { color: var(--brand); }
  .cabinet__menu li:has(> .cabinet__sub) > a .menu-list__go { transform: rotate(90deg); }
}
/* Телефон: экран раздела — без меню кабинета, только «‹ Компания» (одна навигация). */
@media (max-width: 959px) { .cabinet--deep .cabinet__side { display: none; } }
.company-back { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 4px -6px; padding: 6px 10px 6px 2px; font-weight: 600; color: var(--brand-dark); border-radius: 10px; }
@media (hover: hover) and (pointer: fine) { .company-back:hover { color: var(--brand); } }
@media (min-width: 960px) { .company-back { display: none; } }
.company-section-head { margin-bottom: 14px; }

/* Раздел: одна панель, группы без рамок */
.sform { padding: 0 20px; }
.sgroup { display: block; padding: 20px 0; border-top: 1px solid var(--line); margin: 0; }
.sgroup:first-child { border-top: 0; }
.sgroup > .field:last-child, .sgroup > fieldset.field:last-child { margin-bottom: 0; }
.sgroup__title { font-size: var(--fs-15); font-weight: 600; margin: 0 0 4px; letter-spacing: -.005em; }
.sgroup__title + .field, .sgroup__title + fieldset.field { margin-top: 12px; }
.sgroup__lead { color: var(--muted); font-size: var(--fs-14); margin: 0 0 16px; line-height: 1.45; }
.sform .field { max-width: 600px; }
.sform .pick-grid, .sform .perk-pick { max-width: none; }
.sform__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px 0 20px; border-top: 1px solid var(--line); }
.sform__bar form { margin: 0; }
.sgroup .sform__bar { border-top: 0; padding: 8px 0 0; }
.sform__note { flex-basis: 100%; margin: 2px 0 0; color: var(--muted); font-size: var(--fs-13); line-height: 1.45; }
.sform .avatar-edit { margin-bottom: 0; }
.sform .actions { margin-top: 12px; }
@media (min-width: 900px) { .sform { padding: 0 28px; } .sgroup { padding: 24px 0; } }
.pending-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: var(--fs-12); font-weight: 600; vertical-align: 1px; white-space: nowrap; }
.pending-tag .icon { width: 12px; height: 12px; }
.btn--link.btn--quiet { color: var(--muted); font-weight: 500; font-size: var(--fs-14); padding: 8px 4px; }
@media (hover: hover) and (pointer: fine) { .btn--link.btn--quiet:hover { color: var(--danger); text-decoration: none; } }

/* Свёрнутое: длинные подсказки, полный список преимуществ, необязательное при создании */
.sdetails > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.sdetails > summary::-webkit-details-marker { display: none; }
.sdetails__go { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--brand-dark); font-weight: 600; font-size: var(--fs-13); white-space: nowrap; }
.sdetails__go::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.sdetails[open] > summary .sdetails__go::after { transform: translateY(1px) rotate(-135deg); }
.sdetails[open] > summary { margin-bottom: 8px; }
/* Подсказка «Подробнее» внутри своего блока, без отдельной строки (владелец 01.10.2026) */
.hint-more { display: inline; }
.hint-more > summary { display: inline; list-style: none; cursor: pointer; color: var(--brand-dark); font-size: var(--fs-13); font-weight: 500; white-space: nowrap; }
.hint-more > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .hint-more > summary:hover { color: var(--brand); } }
.hint-more[open] { display: block; flex-basis: 100%; }
.hint-more .field__hint { margin: 4px 0 0; }
.actions .hint-more > summary { padding: 8px 4px; }
.sdetails--group > summary .sgroup__title { margin: 0; }
.sdetails--group > summary .sdetails__go { color: var(--muted); font-weight: 500; }
.sdetails--group[open] > summary { margin-bottom: 16px; }
.perk-chosen { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.perk-chosen:empty { display: none; }
.perk-chosen .store-perk { font-size: .8rem; padding: 4px 10px; }
.sdetails .perk-group { margin-top: 8px; }

/* Обзор: карточка компании с одной «Поделиться» */
.company-card { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.company-card__main { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 260px; }
.company-card__text { min-width: 0; display: grid; gap: 4px; }
.company-card__name { margin: 0; font-size: 1.25rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; letter-spacing: -.01em; }
.company-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .86rem; color: var(--muted); }
.company-card__state--active { color: var(--ok); font-weight: 600; }
.company-card .company-url { margin: 0; font-weight: 500; font-size: .9rem; }
@media (max-width: 599px) {
  .company-card .pop { flex: 1 1 100%; }
  .company-card .pop > summary { width: 100%; }
  .company-card .pop__panel { left: 0; right: 0; min-width: 0; }
}
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; }
.pop > summary::-webkit-details-marker { display: none; }
.pop__caret { margin-left: -2px; transition: transform .15s; }
.pop[open] .pop__caret { transform: rotate(180deg); }
.pop__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-16); box-shadow: var(--shadow-lg); padding: 8px; display: grid; }
.pop__panel a, .pop__panel button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--r-8); background: none; color: var(--text); font: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .pop__panel a:hover, .pop__panel button:hover { background: var(--surface-2); color: var(--text); } }
.pop__panel .icon { color: var(--muted); }
.pop__field { display: grid; gap: 4px; padding: 8px 12px 8px; }

/* Обзор: объявления и сообщения компании */
.company-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.company-tiles form { margin: 0; min-width: 0; }
.company-tile { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; column-gap: 12px; align-items: center; padding: 14px 16px; border: 0; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .company-tile:hover { box-shadow: var(--shadow), 0 0 0 1px #d9defc; } }
.company-tile__icon { grid-area: icon; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.company-tile__label { grid-area: label; font-weight: 650; line-height: 1.25; }
.company-tile__value { grid-area: value; color: var(--muted); font-size: .86rem; line-height: 1.3; }
@media (max-width: 359px) { .company-tile { padding: 12px; column-gap: 10px; } .company-tile__icon { width: 34px; height: 34px; } }

/* Обзор: что ещё заполнить — только недостающее */
.company-todo__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.company-todo__title { margin: 0; font-size: 1.02rem; font-weight: 650; }
.company-todo__count { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; margin: 8px 0 16px; border: 0; border-radius: 999px; background: #eef0f4; overflow: hidden; color: var(--brand); }
.meter::-webkit-progress-bar { background: #eef0f4; border-radius: 999px; }
.meter::-webkit-progress-value { background: var(--brand-gradient); border-radius: 999px; }
.meter::-moz-progress-bar { background: var(--brand-gradient); border-radius: 999px; }
.company-todo__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.company-todo__list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px dashed var(--line-strong); border-radius: 999px; color: var(--text-2); font-size: .88rem; font-weight: 550; }
@media (hover: hover) and (pointer: fine) { .company-todo__list a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); } }
.company-hint { margin: -4px 0 16px; font-size: .9rem; }
.company-hint a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Строки разделов (телефон) и строки настроек: название слева, краткое значение справа */
.srows { padding: 2px 16px; }
.srows ul { list-style: none; margin: 0; padding: 0; }
.srows li { position: relative; }
.srows li + li .srow { border-top: 1px solid var(--line); }
.srow { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 0; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .srow:hover { color: var(--text); } }
@media (hover: hover) and (pointer: fine) { .srow:hover .srow__label { color: var(--brand-dark); } }
.srow__icon { width: 34px; height: 34px; flex: none; border-radius: var(--r-12); background: var(--brand-soft); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.srow__icon .icon { width: 18px; height: 18px; }
.srow__label { font-weight: 600; white-space: nowrap; }
.srow__text { display: grid; min-width: 0; }
.srow__hint { color: var(--muted); font-size: var(--fs-13); }
.srow__value { margin-left: auto; min-width: 0; color: var(--muted); font-size: var(--fs-13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.srow__go { flex: none; color: #b3b9c2; }
.srow__anchor { position: absolute; top: 0; left: 0; }
.srows li:has(.srow__anchor:target) .srow { background: var(--brand-soft); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 960px) { .srows { display: none; } }

/* Объявления: лимит компании */
.quota { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.quota__value { font-size: var(--fs-28); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.quota__of { font-size: var(--fs-16); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.quota__label { color: var(--muted); }

/* Ссылка и QR */
.company-link__url { margin: 0 0 14px; font-size: 1.12rem; font-weight: 650; overflow-wrap: anywhere; }
.company-link .pop { display: inline-block; }
.company-link .pop__panel { left: 0; right: auto; }
.company-qr { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; }
.company-qr__code { width: 124px; flex: none; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.company-qr__code svg { display: block; width: 100%; height: auto; }
.company-qr__body { flex: 1 1 220px; min-width: 0; }
.company-qr__body .sgroup__lead { margin-bottom: 12px; }
.company-rename .field { margin-bottom: 12px; }
.quiet-danger { margin: 4px 0 0; }
.quiet-danger a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; color: var(--muted); font-size: var(--fs-14); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .quiet-danger a:hover { color: var(--danger); } }

/* Оформление: шапка витрины глазами клиента */
.design-preview { margin: 0 0 16px; }
.design-preview .store-preview { margin-bottom: 8px; }
.design-preview__all { display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px; font-weight: 600; font-size: var(--fs-14); }
.design-preview .store-actions { display: none; } /* в кабинете важен вид шапки; кнопки — во «Вся страница глазами клиента» */
@media (min-width: 900px) { .design-preview .store-cover { aspect-ratio: auto; height: clamp(120px, 15vw, 180px); } }
/* Логотип и обложка: миниатюра, название и пояснение; кнопки — на телефоне под ними во всю ширину, шире — под текстом */
.media-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "thumb body" "actions actions"; gap: 12px 16px; align-items: start; }
.media-row__thumb { grid-area: thumb; min-width: 0; }
.media-row__body { grid-area: body; min-width: 0; }
.media-row__body .sgroup__lead { margin-bottom: 0; }
.media-row .media-row__actions { grid-area: actions; margin-top: 0; }
.media-row__thumb .cover-edit__image, .media-row__thumb .cover-edit__empty { aspect-ratio: 2 / 1; border-radius: var(--r-12); }
@media (min-width: 600px) {
  .media-row { grid-template-columns: 168px minmax(0, 1fr); grid-template-areas: "thumb body" "thumb actions"; column-gap: 16px; row-gap: 8px; }
}

/* Обзор на компьютере: «Так видят клиенты» (владелец 01.10.2026); на телефоне — строки разделов */
.company-look__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.company-look .store-preview { margin: 0; }
@media (max-width: 959px) { .company-look { display: none; } }
.company-tile__value--new { color: var(--brand-dark); font-weight: 650; }

/* Часы работы (по образцу Google Business Profile): день — переключатель «открыто / выходной» и одно время */
.hours { display: grid; margin: 8px 0 4px; }
/* Телефон: день, «Выходной» и переключатель — строкой, время — под ними (как в приложении Google Business Profile) */
.hours-day { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name off toggle" "times times times"; align-items: center; gap: 8px 12px; padding: 8px 0; }
.hours-day + .hours-day { border-top: 1px solid var(--line); }
.hours-day__name { grid-area: name; font-weight: 600; font-size: var(--fs-14); }
.hours-day .switch { grid-area: toggle; }
.hours-day__times { grid-area: times; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hours-day__times input { flex: 1 1 0; min-width: 0; max-width: 11em; font-variant-numeric: tabular-nums; }
.hours-day__off { grid-area: off; color: var(--muted); font-size: var(--fs-14); }
.hours-day:has([data-hours-on]:not(:checked)) .hours-day__times { display: none; }
.hours-day:has([data-hours-on]:checked) .hours-day__off { display: none; }
.hours__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; padding-top: 12px; }
.sgroup:has([data-hours-always]:checked) [data-hours-days] { display: none; }
@media (min-width: 600px) {
  .hours-day { grid-template-columns: 9em auto minmax(0, 1fr); grid-template-areas: "name toggle times"; gap: 16px; min-height: 56px; padding: 8px 0; }
  .hours-day__off { grid-area: times; }
  .hours-day__times input { max-width: 10em; }
}
.switch { position: relative; display: inline-flex; flex: none; width: 44px; height: 26px; cursor: pointer; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch__track { width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background .15s; position: relative; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform .15s; }
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus); }
/* «Как вас найти»: варианты карточками */
.choices { display: grid; gap: 8px; margin-top: 2px; }
@media (min-width: 600px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-16); background: var(--surface); cursor: pointer; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: #b9bfc8; } }
.choice input { margin-top: 2px; accent-color: var(--brand); }
.choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.choice:has(input:focus-visible) { box-shadow: var(--focus); }
.choice__text { display: grid; gap: 2px; min-width: 0; }
.choice__title { font-weight: 600; }
.choice__hint { color: var(--muted); font-size: var(--fs-13); }
@media (min-width: 900px) {
  .company-look .store-cover { height: 112px; }
  .company-look .store-logo { margin-top: -28px; }
  .company-look .store-logo .avatar { width: 60px; height: 60px; border-radius: 16px; font-size: 1.4rem; }
  .company-look .store-head__name { font-size: 1.15rem; }
}
.sdetails--group > fieldset.field > legend.field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* заголовок — уже в summary */
@media (max-width: 959px) { .company-hint { display: none; } } /* на телефоне перенос — в строке «Лимит и перенос» */

/* ==============================================================================================================
   Телефон горизонтально (владелец, 01.10.2026; дополнение ADR 0013). Отдельный компактный режим, а не масштаб.
   Режим выбирается по высоте экрана: телефоны лёжа — от 568 до ~1000 px в ширину (iPhone SE 667, iPhone 14 844,
   Pixel 7 915, iPhone Pro Max 932), но ниже 480 px. Граница — класс «компактная высота» Android (< 480dp: 99,78%
   телефонов лёжа, планшеты лёжа выше). Условие (max-height: 479px) and (min-width: 560px) — то же в
   static/luk/catalog.js; ширина от 560 px отсекает телефон стоя, у которого при открытой клавиатуре Android окно
   может стать низким. Правила (нижняя панель — как у iPhone лёжа по Apple HIG: иконка и подпись рядом):
   - верх — одна строка высотой 49 px (логотип, город, поиск, корзина, уведомления, «Разместить»), поиск и кнопки —
     38 px; шапка и нижняя панель — телефонные на любой ширине лёжа (и от 900 px, где стоя — компьютерная шапка);
   - нижнее меню — сразу сжатый островок; раскрытое — 44 px, иконка и подпись в ряд (блок «Нижнее меню — островок»);
   - поверх содержимого один верхний слой: в каталоге при чтении вниз шапка уезжает и остаётся компактная строка, при
     прокрутке вверх шапка возвращается целиком вместо неё (catalog.js, --topbar-peek: 0);
   - высокие липкие колонки (цена объявления, страница компании, превью в редакторе) не залипают: на низком экране их
     низ был бы недостижим;
   - объявление — фото и цена рядом, фото целиком на экране; разговор — лента сообщений и поле ответа на одном экране.
   Вырезы iPhone слева и справа: .wrap и нижнее меню берут env(safe-area-inset-*) (блок PWA выше), компактная строка
   каталога, лист фильтров и просмотр фото — блок «Вырезы iPhone лёжа» ниже.
   ============================================================================================================== */
@media (max-height: 479px) and (min-width: 560px) {
  :root { --topbar-h: 49px; --topbar-peek: 0px; --compact-bar: 38px; }
  .topbar__row { padding-top: 5px; padding-bottom: 5px; }
  .search__input.search__input { height: 38px; min-height: 38px; }  /* общий min-height полей 44 px растягивал шапку до 55 px */
  .search__btn { width: 30px; height: 30px; right: 4px; }
  .search__clear { right: 38px; }  /* сразу левее места касания стрелки (30 px + 4 px вокруг) */
  .search__btn .icon { width: 16px; height: 16px; }
  .topbar .iconbtn { width: 38px; height: 38px; }
  .sell-btn.btn { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
  .main { padding-top: 8px; padding-bottom: 24px; }
  h1 { font-size: var(--fs-22); }
  .breadcrumbs { margin-bottom: 8px; }
  .topbar .iconbtn .badge { left: auto; right: 0; }  /* кружок — внутри кнопки, не на «Разместить» */

  /* Главная: hero и лента разделов ниже — первые объявления видны на первом экране */
  .hero { padding: 16px 20px; margin-bottom: 12px; border-radius: 20px; }
  .hero h1 { font-size: 1.25rem; }
  .hero .hero__lead { font-size: .9rem; margin-top: 6px; }
  .hero__cta { margin-top: 12px; }
  .btn--hero { min-height: 38px; padding: 7px 16px; }
  .catalog .sections { gap: 2px; margin-bottom: 10px; }
  .section-tile { padding: 4px 2px; gap: 5px; }
  .section-tile__icon { width: 42px; height: 42px; }
  .section-tile__icon .icon { width: 21px; height: 21px; }

  /* Липкие колонки длиннее экрана — в потоке страницы (панель каталога остаётся: у неё своя прокрутка) */
  .listing__aside, .filters, .legal__nav, .preview, .company-layout__side, .store-layout__side { position: static; }

  /* Фото объявления — целиком на экране под шапкой (у широкого фото по бокам тёмные поля, как в просмотре) */
  .gallery__main { max-height: calc(100vh - var(--topbar-h) - var(--island-space) - 20px); max-height: calc(100svh - var(--topbar-h) - var(--island-space) - 20px); }

  /* Разговор: нижнего меню нет (как в Telegram), «Все сообщения» — строкой над ним; шапка разговора — одна низкая
     строка; лента сообщений и поле ответа — на одном экране */
  .chat { min-height: 0; }
  .chat__head { padding: 8px 12px; flex-wrap: nowrap; gap: 8px; }
  .chat__listing { padding: 4px 8px; }
  .chat__listing img, .chat__company-icon { width: 36px; height: 36px; }
  .chat__listing > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.3; }
  .chat__tool-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chat__tools .btn { min-width: 38px; padding: 8px 8px; }
  .chat__messages { min-height: 120px; padding: 8px 16px; max-height: calc(100vh - var(--topbar-h) - env(safe-area-inset-bottom) - 164px); max-height: calc(100svh - var(--topbar-h) - env(safe-area-inset-bottom) - 164px); }
  .chat__compose { padding: 8px 8px; }
  .chat__compose textarea { height: 40px; min-height: 40px; padding: 8px 16px; }  /* одна строка: длинный текст прокручивается в поле */
  .chat__compose .btn { min-height: 40px; }

  /* Страница компании: обложка — полоса, а не пол-экрана */
  .store-cover { aspect-ratio: auto; height: clamp(110px, 30vh, 160px); }
}
/* Шапка телефона в одну строку и нижняя панель — на любой ширине лёжа. От 900 px компьютерная шапка (6 значков, аватар
   и «Разместить») не помещалась: на 915 px «Разместить» обрезалась, на iPhone Pro Max с вырезами по 59 px — тем
   более (обход 01.10.2026). Навигация — та же, что у этого телефона стоя: внизу, иконка и подпись в ряд (Apple HIG). */
@media (max-height: 479px) and (min-width: 560px) {
  .topbar__row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "logo city search actions"; gap: 0 8px; }
  html.is-app .topbar__row:has(.topbar__back) { grid-template-columns: auto auto auto minmax(0, 1fr) auto; grid-template-areas: "back logo city search actions"; }
  html.is-app .topbar__back { width: 38px; margin: 0 0 0 -4px; }
  .topnav { display: none; }
  .topbar__mobile { display: inline-flex; }
  .topbar__actions { justify-self: end; gap: 4px; }
  .logo-group { display: contents; }
  .logo-group > .citypick, .logo-group > .logo__market { grid-area: city; }
  .logo-group > .logo__market, .citypick > .logo__market { height: 38px; margin: 0; padding: 0 10px; display: inline-flex; align-items: center; gap: 2px; font-size: .84rem; white-space: nowrap; }
  .logo { gap: 7px; }
  .logo__mark { width: 24px; height: 24px; }
  .logo__word { font-size: 1.35rem; }
  .search__input.search__input { padding-left: 40px; padding-right: 42px; }
  .search__field .icon { left: 14px; }
  .sell-btn.btn { padding-left: 12px; padding-right: 12px; }
}
/* Объявление до 960 px лёжа: фото слева, цена, кнопки и продавец справа (40% ширины), описание — под фото */
@media (max-height: 479px) and (min-width: 560px) and (max-width: 959px) {
  .listing { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-areas: "head head" "gallery aside" "details aside"; grid-template-rows: auto auto 1fr; gap: 12px 16px; align-items: start; }
  .listing__aside { display: grid; grid-area: aside; gap: 12px; align-self: start; min-width: 0; }
  .listing__buy, .listing__seller { grid-area: auto; min-width: 0; }
  .listing__aside .btn { white-space: normal; text-align: center; }
  .listing__aside .panel { padding: 16px; }  /* колонка узкая: «Все объявления продавца» — в две строки, а не за край */
}

/* Лента разделов на 600–1239 px: 14 плиток не помещались, и длинные подписи («Недвижимость») ложились на соседние
   (обход на 844, 915 и 932 px, 01.10.2026). Плитка не уже 80 px, остальное — прокруткой вбок, как на телефоне; с
   1240 px плитки по 81 px и больше — как было. */
@media (min-width: 600px) and (max-width: 1239px) {
  .catalog .sections { grid-auto-columns: minmax(80px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .catalog .sections::-webkit-scrollbar { display: none; }
}
@media (max-height: 479px) and (min-width: 600px) { .catalog .sections { grid-auto-columns: minmax(84px, 1fr); overflow-x: auto; scrollbar-width: none; } .catalog .section-tile__name { font-size: .72rem; } }

/* Сенсорный экран шире 899 px (телефон лёжа, iPad): поля не меньше 16 px, как на телефоне стоя (раздел «Формы»), —
   иначе Safari на iPhone Pro Max лёжа увеличивает страницу при выборе района или сортировки. */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1rem) !important; }
}

/* Вырезы iPhone лёжа (обход с эмуляцией безопасных зон, 01.10.2026): то, что лежит от края до края экрана вне .wrap,
   отступает от «чёлки» и скруглений так же, как шапка и нижняя панель. В портрете и на компьютере вырезов нет —
   max() оставляет прежние отступы. */
.catalog-compact__inner { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
@media (min-width: 960px) { .catalog-compact__inner { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } }
@media (max-width: 959px), (max-height: 479px) and (min-width: 560px) {
  .catalog__panel.is-sheet .sheet__head { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .catalog__panel.is-sheet .filters { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
.lightbox__close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.lightbox__nav--prev { left: max(16px, env(safe-area-inset-left)); }
.lightbox__nav--next { right: max(16px, env(safe-area-inset-right)); }
/* PhotoSwipe (просмотр фото во весь экран): счётчик и кнопки не уходят под вырез экрана. Стили PhotoSwipe подключаются
   позже luk.css — поэтому селектор с .pswp. */
.pswp .pswp__top-bar { top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ==============================================================================================================
   Нижнее меню — островок (владелец 02.10.2026; ADR 0013, дополнение 02.10.2026). Только телефон: стоя — до 899 px,
   лёжа — режим «Телефон горизонтально»; на компьютере меню нет, как раньше. Поведение — static/luk/tabbar.js.
   - В покое — полное меню, но парящее: полупрозрачная капсула с размытием, с отступами от краёв и от низа; вокруг и
     сквозь неё видна лента (Apple HIG, Tab bars, iOS 26: панель «плавает над содержимым» на стекле).
   - Читаем вниз — сжимается в островок: кнопка с иконкой текущего раздела и красной точкой, если есть непрочитанные
     сообщения (.is-mini). Касание, прокрутка вверх и начало страницы раскрывают (UIKit: minimizeBehavior
     .onScrollDown). Лёжа — сразу островок, раскрывается касанием.
   - Низ: в Luk с экрана «Домой» — над полосой «Домой» (env(safe-area-inset-bottom)); в Safari — над его панелью:
     Safari 26 не рисует закреплённые слои под своей плавающей панелью, нижний край окна для них — над ней. В
     браузерах iPhone раскрытое меню ниже (56 px): под ним ещё панель браузера.
   - Без JavaScript — меню всегда раскрыто: .is-mini и кнопку островка включает только скрипт. Без backdrop-filter и
     при «Понижении прозрачности» — плотный белый фон; prefers-reduced-motion — без анимации.
   - Нижний отступ страницы — высота раскрытого меню, отступ снизу и зазор (--island-space): последний элемент страницы
     не прячется под меню. От него же считаются высоты, где меню учитывается (фото объявления лёжа).
   - Сама .tabbar — нулевой высоты у нижнего края: вокруг капсулы и островка касания проходят к странице, а мера
     «закреплённые слои» обхода (experiments/browser-mobile) видит только то, что действительно закрывает экран.
   ============================================================================================================== */
:root {
  --island-h: 60px;
  --island-mini: 48px;
  --island-bottom: max(10px, calc(env(safe-area-inset-bottom) - 8px));
  --island-left: max(10px, env(safe-area-inset-left));
  --island-right: max(10px, env(safe-area-inset-right));
  --island-space: calc(var(--island-h) + var(--island-bottom) + 12px);
  --island-glass: rgba(255, 255, 255, .78);
}
@media (max-width: 899px) and (min-height: 480px) { html[data-app-platform^="ios"] { --island-h: 56px; } }
.tabbar { display: none; }
@media (max-width: 899px), (max-height: 479px) and (min-width: 560px) {
  .tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 30; }
  body.has-tabbar { padding-bottom: var(--island-space); }
}
.tabbar__items, .tabbar__island {
  position: absolute; bottom: var(--island-bottom);
  background: var(--island-glass); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 30px rgba(22, 26, 60, .16), 0 1px 3px rgba(22, 26, 60, .1), 0 0 0 .5px rgba(22, 26, 60, .1);
}
.tabbar__items {
  left: var(--island-left); right: var(--island-right); max-width: 480px; margin: 0 auto; height: var(--island-h);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 4px; border-radius: 999px;
  transform-origin: 24px 50%;
}
.tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; position: relative; border-radius: 999px; color: var(--text-2); font-size: .66rem; font-weight: 600; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
.tabbar__item > span:last-child { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Область нажатия — до краёв капсулы и через зазоры между разделами: лёжа видимый раздел 36 px, касание — 44 px. */
.tabbar__item::before { content: ""; position: absolute; inset: -4px -1px; border-radius: inherit; }
.tabbar__item .icon { width: 23px; height: 23px; }
@media (hover: hover) { .tabbar__item:hover { color: var(--text); } }
.tabbar__item:active { background: rgba(22, 26, 60, .06); }
.tabbar__item[aria-current="page"] { color: var(--brand); background: rgba(74, 94, 240, .12); }
.tabbar__item:focus-visible { border-radius: 999px; }
/* Счётчик — в углу значка (и стоя, и лёжа, где подпись стоит рядом с иконкой и места на кружок нет). */
.tabbar__icon { position: relative; display: flex; }
.tabbar__icon .badge { position: absolute; top: -7px; left: 13px; }
html[data-app-platform^="ios"] .tabbar__item .icon { width: 22px; height: 22px; }

/* Островок — у левого края, как сжатая панель вкладок iOS 26: иконка раздела, на котором человек сейчас (вне
   разделов — значок меню), и точка непрочитанных сообщений — она повторяет счётчик «Сообщения» в меню (realtime.js
   обновляет его на месте). */
.tabbar__island {
  left: var(--island-left); width: var(--island-mini); height: var(--island-mini); padding: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-2); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transform: scale(.6);
}
.tabbar__island.is-current { color: var(--brand); }
.tabbar__island:active { background: rgba(255, 255, 255, .95); }
.tabbar__island:focus-visible { border-radius: 50%; box-shadow: var(--focus), 0 10px 30px rgba(22, 26, 60, .16); }
.tabbar__island-icon { display: flex; }
.tabbar__island-icon .icon { width: 24px; height: 24px; }
.tabbar__dot { display: none; position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px #fff; }
.tabbar:has(.badge[data-counter="unread_direct"]:not(.hidden)) .tabbar__dot { display: block; }

.tabbar.is-mini .tabbar__island { opacity: 1; visibility: visible; transform: none; }
.tabbar.is-mini .tabbar__items { opacity: 0; visibility: hidden; transform: scale(.5); pointer-events: none; }
/* Пока печатают (клавиатура на экране) — меню нет: оно встало бы над клавиатурой или поверх поля. Так же — пока кнопку
   действия внизу экрана (подача: «Назад / Далее», «Опубликовать») закрыл бы и островок (.is-yield, tabbar.js). */
.tabbar.is-away .tabbar__items, .tabbar.is-away .tabbar__island,
.tabbar.is-yield .tabbar__items, .tabbar.is-yield .tabbar__island { opacity: 0; visibility: hidden; pointer-events: none; }
/* Анимация — только после первого кадра (.is-animated): страница не открывается с «сворачиванием». Исчезающий слой
   становится невидимым для фокуса и чтения в конце анимации, появляющийся — сразу. Только transform и opacity —
   без перерасчёта раскладки на слабых телефонах. */
@media (prefers-reduced-motion: no-preference) {
  .tabbar.is-animated .tabbar__items { transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1), visibility 0s linear 0s; }
  .tabbar.is-animated.is-mini .tabbar__items, .tabbar.is-animated.is-away .tabbar__items, .tabbar.is-animated.is-yield .tabbar__items { transition: opacity .16s ease, transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .24s; }
  .tabbar.is-animated .tabbar__island { transition: opacity .14s ease, transform .24s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .24s; }
  .tabbar.is-animated.is-mini .tabbar__island { transition: opacity .2s ease .06s, transform .3s cubic-bezier(.2, .9, .3, 1) .02s, visibility 0s linear 0s; }
  .tabbar.is-animated.is-mini.is-away .tabbar__island, .tabbar.is-animated.is-mini.is-yield .tabbar__island { transition: opacity .16s ease, visibility 0s linear .16s; }
}
/* Стекло — только где оно есть и не мешает: иначе плотный фон (текст меню читается над любым фото). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { :root { --island-glass: rgba(255, 255, 255, .98); } }
@media (prefers-reduced-transparency: reduce) {
  :root { --island-glass: #fff; }
  .tabbar__items, .tabbar__island { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Лёжа: раскрытое меню — 44 px, иконка и подпись в ряд (Apple HIG: компактная панель лёжа); островок тоже 44 px. */
@media (max-height: 479px) and (min-width: 560px) {
  :root { --island-h: 44px; --island-mini: 44px; }
  .tabbar__items { max-width: 640px; padding: 3px; }
  .tabbar__item { flex-direction: row; gap: 6px; font-size: .74rem; }
  .tabbar__item .icon, html[data-app-platform^="ios"] .tabbar__item .icon { width: 20px; height: 20px; }
  .tabbar__icon .badge { left: 10px; }
  .tabbar__icon:has(.badge:not(.hidden)) { margin-right: 18px; }  /* кружок не заходит на подпись рядом */
  .tabbar__island-icon .icon { width: 22px; height: 22px; }
  .tabbar__dot { top: 7px; right: 7px; }
}

/* Своя группа Luk (ADR 0019): галочка в форме публикации, строка о посте и выключатель на «Управлении объявлением». */
.group-offer { flex-basis: 100%; margin: 0 0 2px; }
.group-post { margin: 16px 0 4px; padding: 12px 16px; border-radius: var(--r-16); background: var(--surface-2); }
.group-post__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-weight: 500; }
.group-post__ok { display: inline-flex; align-items: center; gap: 4px; }
.group-post__ok .icon { color: var(--accent); }
.group-post__sep { color: var(--muted); }
.group-post__switch { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.group-post__switch .check { margin: 0; }
@media (max-width: 599px) { .group-post__sep { display: none; } .group-post__line { flex-direction: column; align-items: flex-start; gap: 2px; } }

/* Search suggestions, ADR 0025. */
.search { position:relative; }
.search-suggestions { position:absolute; top:100%; left:0; right:0; z-index:80; background:var(--surface, #fff); border:1px solid var(--line, #ddd); border-radius:12px; box-shadow:0 8px 24px #0002; }
.search-suggestions[hidden] { display:none; }
.search-suggestions a { display:flex; align-items:center; min-height:44px; padding:10px 14px; overflow-wrap:anywhere; color:inherit; text-decoration:none; }
.search-suggestions a[aria-selected="true"] { background:#f1f5f9; }
@media (hover: hover) and (pointer: fine) { .search-suggestions a:hover { background:#f1f5f9; } }
.search-notice { margin-bottom:12px; overflow-wrap:anywhere; }

/* Сопоставимая цена: две ручки, относительная гистограмма, те же pmin/pmax. */
.price-filter { min-width: 0; }
.price-filter__plot { padding: 0 24px; margin-top: 8px; }
.price-filter__histogram { display: block; width: 100%; height: 40px; fill: var(--brand-soft); }
.price-filter__histogram rect.is-selected { fill: var(--brand); opacity: .65; }
.price-filter__rail { position: relative; height: 44px; touch-action: pan-y; }
.price-filter__rail::before, .price-filter__selection { content: ""; position: absolute; height: 4px; top: 20px; left: 0; right: 0; border-radius: var(--r-4); background: var(--line-strong); }
.price-filter__selection { background: var(--brand); }
.price-filter__handle { position: absolute; top: 0; left: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; transform: translateX(-50%); background: transparent; cursor: grab; touch-action: none; z-index: 1; }
.price-filter__handle::before { content: ""; display: block; width: 22px; height: 22px; margin: auto; border: 2px solid var(--brand); border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); }
.price-filter__handle:active { cursor: grabbing; }
.price-filter__handle:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; z-index: 2; }
.price-filter__presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.price-filter__presets .chip { min-height: 28px; padding: 4px 7px; white-space: nowrap; font-size: 12px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.price-filter__presets .chip[aria-pressed=true] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.price-filter__exact { margin-top: 4px; }
.price-filter__exact label { position: relative; min-width: 0; flex: 1; }
.price-filter__exact input { width: 100%; min-width: 0; padding-left: 8px; padding-right: 24px; }
.price-filter__currency { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
/* Донги и рупии (12.10.2026): «20 000 000» не помещается в половину узкой колонки фильтров — «от» и «до» друг под
   другом в боковой колонке компьютера; на телефоне в листе фильтров — рядом, как у бата. */
@media (min-width: 960px) { .catalog__side .price-filter__exact--long { flex-direction: column; align-items: stretch; } .catalog__side .price-filter__exact--long label { flex: none; } }
.price-units { padding: 0; border: 0; min-width: 0; }
/* Сегменты — один переключатель (владелец 06.10.2026: «кнопки некрасивые»): общая подложка без рамок у вариантов,
   выбранный — белая плашка с лёгкой тенью; в узкой колонке не тесно. */
/* Вариант не уже своего слова (замечание владельца 14.10.2026: в «Другом» на компьютере «Любой | Продажа | Аренда |
   Услуга» налезали друг на друга и обрезались): не помещаются в ряд — переносятся, а не сжимаются. */
.price-units__row { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--surface-2); }
.price-units label { position: relative; flex: 1 0 auto; min-width: 0; cursor: pointer; }  /* ширина — по слову: «Компании» шире «Все» */
.price-units input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.price-units span { display: flex; min-height: 32px; align-items: center; justify-content: center; padding: 4px 8px; border: 0; border-radius: var(--r-8); background: transparent; color: var(--text-2); font-size: var(--fs-14); white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
/* Боковая колонка фильтров компьютера (240 px) и узкий телефон (до 380 px, «Любой / Продажа / Аренда / Услуга» не
   помещается в ряд): четыре и больше вариантов — сеткой по два, нечётное число — первый («Любой») на всю ширину
   сверху. Лист фильтров на телефоне шире и на планшете — ряд, как был. */
@media (min-width: 960px) {
  .catalog__side .price-units span { padding-inline: 4px; }  /* три варианта («Любой / Продажа / Аренда») — в один ряд */
  .catalog__side .price-units__row:has(> label:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog__side .price-units__row:has(> label:nth-child(4)):has(> label:last-child:nth-child(odd)) > label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  .price-units__row:has(> label:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-units__row:has(> label:nth-child(4)):has(> label:last-child:nth-child(odd)) > label:first-child { grid-column: 1 / -1; }
}
.price-units input:checked + span { background: var(--surface); color: var(--brand-dark); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .1); }
.price-units input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Только невыбранный: на телефоне :hover «залипает» после касания и перекрасил бы выбранный в чёрный. */
@media (hover: hover) and (pointer: fine) { .price-units label:hover input:not(:checked) + span { color: var(--text); background: rgba(16, 24, 40, .04); } }
@media (hover: hover) and (pointer: fine) { .price-filter__presets .chip:hover { border-color: var(--brand); background: var(--surface-2); } }
.price-filter__presets .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 959px) {
  .price-units span { min-height: 38px; font-size: var(--fs-15); }  /* с подложкой ряд — 46 px: касание не меньше 44 */
  .price-filter__presets .chip { min-height: 44px; }
  .price-filter__presets .chip { padding: 6px 10px; font-size: 14px; }
}

/* Отклик на нажатие и переходы (владелец 08.10.2026: «нажал — секунду ничего не происходит, потом резко меняется
   картинка», docs/smooth-ui.md). Нажатое состояние — сразу при касании у всего, что нажимается; :hover — только у мыши
   (@media (hover: hover) and (pointer: fine) выше), на телефоне он «залипал» после касания. У этих элементов серой
   вспышки касания iOS нет — своё состояние видно и в Safari (nav.js включает там :active); у остальных — системная. Переход начался — нажатое остаётся
   (.is-pending), у формы кнопка «занята» (.is-busy, вместо значка — индикатор), через 120 мс сверху — полоска. */
.btn, .iconbtn, .topnav__link, .card__link, .section-tile, .chip, .subcats__item, .catalog-compact__link, .fav__btn,
.gallery__nav, .gallery__thumb, .gallery__track, .search__btn, .inbox__item, .menu-list a, .menu-list button, .cabinet__menu a,
.usermenu__panel a, .usermenu > summary, .citypick__panel a, .search-suggestions a, .pop__panel a, .catpick__option, .choice,
a.mine__item, a.chat__listing, .logo, .breadcrumbs a, .footer a, .seller__name, .listing-report a, .hero__link,
.section-head a, :where(main) a:not([class]) { -webkit-tap-highlight-color: transparent; }
.btn:active, .btn.is-pending, .btn.is-busy { transform: scale(.97); filter: brightness(.93); }
.btn--link:active, .btn--link.is-pending { transform: none; filter: none; opacity: .6; }
.btn.is-pending, .btn.is-busy { cursor: progress; }
.btn > [data-nav-spinner] { width: 18px; height: 18px; }
.btn > [data-nav-spinner] + .icon { display: none; }
.iconbtn, .topnav__link, .chip, .subcats__item, .catalog-compact__link, .gallery__thumb, .search__btn { transition: transform .1s ease, background-color .15s, color .15s, opacity .15s, filter .15s; }
.iconbtn:active, .topnav__link:active, .iconbtn.is-pending, .topnav__link.is-pending { background: var(--surface-2); transform: scale(.94); }
.search__btn:active { filter: brightness(.92); }  /* кнопка не двигается: уменьшаются круг и значок */
.search__btn:active::before, .search__btn:active .icon { transform: scale(.92); }
.card:has(> .card__link:active), .card:has(> .card__link.is-pending) { transform: scale(.975); box-shadow: var(--shadow); }
.section-tile:active .section-tile__icon, .section-tile.is-pending .section-tile__icon { transform: scale(.9); }
.chip:active, .subcats__item:active, .catalog-compact__link:active, .chip.is-pending, .subcats__item.is-pending { transform: scale(.95); }
.subcats__item:active, .catalog-compact__link:active { background: var(--surface-2); }
.fav__btn:active { transform: scale(.86); }
.gallery__nav:active { transform: translateY(-50%) scale(.9); background: #fff; }
.gallery__thumb:active { opacity: 1; transform: scale(.94); }
.tabbar__item .icon { transition: transform .1s ease; }
.tabbar__item:active { background: rgba(22, 26, 60, .08); }
.tabbar__item:active .icon { transform: scale(.88); }
/* Нажатый раздел нижнего меню сразу становится текущим — как вкладка в приложении, ещё до ответа сервера. */
.tabbar__item.is-pending { color: var(--brand); background: rgba(74, 94, 240, .12); }
.tabbar__items:has(.is-pending) .tabbar__item[aria-current="page"]:not(.is-pending) { color: var(--text-2); background: none; }
.inbox__item:active, .menu-list a:active, .menu-list button:active, .cabinet__menu a:active, .usermenu__panel a:active,
.usermenu > summary:active, .citypick__panel a:active, .search-suggestions a:active, .pop__panel a:active, .catpick__option:active,
.choice:active, a.mine__item:active, a.chat__listing:active, .inbox__item.is-pending, .menu-list a.is-pending, .cabinet__menu a.is-pending { background: var(--surface-2); }
.logo:active, .breadcrumbs a:active, .footer a:active, .seller__name:active, .listing-report a:active, .hero__link:active,
.section-head a:active, :where(main) a:not([class]):active { opacity: .6; }

/* Полоска загрузки: тонкая, сверху (под вырезом и часами — env(safe-area-inset-top)); появляется через 120 мс, быстро
   доходит до трети и дальше замедляется — до ответа сервера. Гаснет вместе со страницей (nav.js). У Luk с экрана
   «Домой» это единственный признак загрузки. При «Уменьшить движение» — неподвижная полоса во всю ширину. */
.navprogress { position: fixed; z-index: 1000; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; pointer-events: none; background: var(--brand-gradient); box-shadow: 0 0 6px rgba(74, 94, 240, .45); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.navprogress.is-active { opacity: 1; transform: scaleX(.94); transition: opacity .1s linear .12s, transform 8s cubic-bezier(.05, .75, .25, 1) .12s; }
@media (prefers-reduced-motion: reduce) { .navprogress.is-active { transform: none; transition: opacity .1s linear .12s; } }

/* Смена страниц — короткое растворение (cross-document View Transitions; Chrome, Edge, Safari 18.2+; в остальных — как
   было). Шапка и нижнее меню не растворяются: стоят на месте, меняется только содержимое. Во время смены касания
   проходят к новой странице (pointer-events). При «Уменьшить движение» смены нет. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition { pointer-events: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
.topbar { view-transition-name: luk-topbar; }
.tabbar { view-transition-name: luk-tabbar; }
::view-transition-group(luk-topbar), ::view-transition-group(luk-tabbar) { animation-duration: .16s; }
::view-transition-old(luk-topbar), ::view-transition-old(luk-tabbar) { display: none; }
::view-transition-new(luk-topbar), ::view-transition-new(luk-tabbar) { animation: none; }

/* Свайп от левого края — «назад» (static/luk/swipe-back.js; Luk в Telegram и с экрана «Домой» на iPhone). Содержимое
   едет за пальцем, шапка и нижнее меню стоят; в открывшейся полосе — круглая стрелка, синяя — «отпустите». */
html.is-swiping-back, html.is-swiping-back body { overflow-x: clip; }  /* содержимое за пальцем не расширяет страницу */
html.is-swiping-back #content, html.is-swiping-back body > .footer { background: var(--bg); box-shadow: -10px 0 28px -14px rgba(16, 24, 40, .32); will-change: transform; }
.swipe-back { position: fixed; z-index: 45; top: -22px; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; transition: background-color .15s, color .15s; }
.swipe-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.swipe-back.is-ready { background: var(--brand); color: #fff; }

/* ==============================================================================================================
   Мини-приложение Luk в Telegram (ADR 0032). html[data-tg] — страница открыта в Telegram (static/luk/tg.js ставит
   признак в <head>, до первого кадра); html[data-tg-fullscreen] — во весь экран на телефоне (решение владельца
   08.10.2026). Отступы знает только клиент Telegram: --tg-safe-area-inset-* (строка состояния, вырез, полоска «домой»)
   и --tg-content-safe-area-inset-* (плавающие «Закрыть» и «⋯») задаёт tg.js по его событиям; env(safe-area-inset-*)
   в webview Telegram их не знает.
   - Установка на экран «Домой» и Web Push в Telegram не нужны: приложение уже открыто, уведомления — от бота Luk.
     «Назад» в шапке Luk (режим PWA) не нужен — есть «Назад» Telegram. Подсказка «введите код из письма» — как в PWA.
   - Во весь экран: шапка ниже кнопок Telegram, над ней — сплошная полоса: прокручиваемое не уходит под кнопки, и
     шапка, уезжая в каталоге, прячется под неё; нижнее меню и низ страницы — выше полоски «домой»; бока — по отступам
     при повороте телефона. Просмотр фото, лист фильтров и лист «Для Telegram» — тоже ниже кнопок.
   ============================================================================================================== */
html[data-tg] [data-app-install-link], html[data-tg] .app-offer, html[data-tg] [data-push-panel],
html[data-tg] .topbar__back { display: none !important; }
html[data-tg-fullscreen] {
  --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --tg-bottom: var(--tg-safe-area-inset-bottom, 0px);
  --tg-left: var(--tg-safe-area-inset-left, 0px);
  --tg-right: var(--tg-safe-area-inset-right, 0px);
  --topbar-h: calc(121px + var(--tg-top));
  --island-bottom: max(10px, calc(var(--tg-bottom) + 4px));
  --island-left: max(10px, var(--tg-left));
  --island-right: max(10px, var(--tg-right));
}
@media (min-width: 900px) { html[data-tg-fullscreen] { --topbar-h: calc(71px + var(--tg-top)); } }
@media (max-height: 479px) and (min-width: 560px) { html[data-tg-fullscreen] { --topbar-h: calc(49px + var(--tg-top)); } }
html[data-tg-fullscreen] .topbar { padding-top: var(--tg-top); }
/* Каталог при чтении вниз: шапка уезжает до полосы под кнопками, компактная строка разделов — сразу под ней. */
html[data-tg-fullscreen] body.catalog-header-hidden .topbar { transform: translateY(calc(var(--tg-top) - 100%)); }
html[data-tg-fullscreen] body::before {  /* глухая: нажатия не доходят до спрятанной под ней шапки */
  content: ""; position: fixed; z-index: 31; top: 0; left: 0; right: 0; height: var(--tg-top); background: var(--surface);
}
html[data-tg-fullscreen] body:not(.has-tabbar) { padding-bottom: var(--tg-bottom); }
html[data-tg-fullscreen] .navprogress { top: var(--tg-top); }
html[data-tg-fullscreen] .wrap { padding-left: max(16px, var(--tg-left)); padding-right: max(16px, var(--tg-right)); }
@media (min-width: 900px) {
  html[data-tg-fullscreen] .wrap { padding-left: max(24px, var(--tg-left)); padding-right: max(24px, var(--tg-right)); }
}
html[data-tg-fullscreen] .pswp .pswp__top-bar { top: var(--tg-top); padding-left: var(--tg-left); padding-right: var(--tg-right); }
html[data-tg-fullscreen] .lightbox__close { top: calc(var(--tg-top) + 16px); }
html[data-tg-fullscreen] .catalog__panel.is-sheet { padding-top: var(--tg-top); padding-bottom: var(--tg-bottom); }
html[data-tg-fullscreen] .tgsheet { max-height: calc(100dvh - var(--tg-top) - 12px); }
html[data-tg-fullscreen] .tgsheet__body { padding-bottom: calc(16px + var(--tg-bottom)); }
/* Галочка над клавиатурой — только в приложении на телефоне (решение владельца 25.10.2026): кнопку создаёт и ставит
   static/luk/tg.js (transform — по низу видимой области), цвет — button_color темы Telegram, без темы — синий Luk. */
.tg-kb-done { position: fixed; left: 0; top: 0; z-index: 95; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(16, 24, 40, .28); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tg-kb-done svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tg-kb-done:active { filter: brightness(.9); }

/* Подсказки о Telegram (дополнение ADR 0032 от 08.10.2026; templates/miniapp/_prompt.html, правила —
   luk/miniapp/prompts.py). Плашка «Сообщения в Telegram» — только внутри приложения (html[data-tg]); строка «Luk
   удобнее в Telegram» и строка «Luk в Telegram» в профиле — только на телефоне вне Telegram (html[data-app-os] ставит
   static/luk/app.js до первого кадра; без скрипта их не видно). Обе — в потоке страницы под шапкой: на плавающие кнопки
   Telegram и нижнее меню не заходят. */
.tg-prompt { display: none; }
html[data-tg] .tg-prompt { display: block; margin: 0 0 14px; }
.compose__telegram { max-width: 460px; margin: 0 auto; }  /* форма сообщения: плашка под формой, по её ширине (15.10.2026) */
html[data-tg] .compose__telegram .tg-prompt { margin: 14px 0 0; }
.tg-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text close" "icon on on"; align-items: start; gap: 8px 10px; padding: 12px 6px 12px 14px; border-radius: var(--radius); background: var(--brand-soft); border: 1px solid #d9defd; }
.tg-banner__icon { grid-area: icon; padding-top: 1px; }
.tg-banner__icon .brand { width: 26px; height: 26px; }
.tg-banner__text { grid-area: text; margin: 0; font-size: .93rem; line-height: 1.42; font-weight: 550; color: var(--text); }
.tg-banner__actions { display: contents; }
.tg-banner [data-tg-banner-on] { grid-area: on; justify-self: start; min-width: 120px; }
.tg-banner__close { grid-area: close; width: 34px; height: 34px; margin: -6px 0 0; color: var(--muted); }
.tg-banner[hidden], .tg-banner__done[hidden] { display: none; }
/* «Сообщения в Telegram» в нужный момент (дополнение ADR 0032 от 10.10.2026): карточка после публикации и нижнее окно
   после первого сообщения продавцу — только внутри приложения. */
.tg-ask { margin-top: 16px; padding: 16px; border-radius: var(--r-16); background: var(--brand-soft); border: 1px solid #d9defd; }
.tg-ask__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.tg-ask__icon .brand { width: 28px; height: 28px; }
.tg-ask__title { margin: 0; font-weight: 700; }
.tg-ask__lead { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-14); line-height: 1.4; }
.tg-ask__actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.tg-ask__actions .btn { flex: 1 1 0; min-height: 46px; }
.tg-ask__done { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ok); font-weight: 600; }
.tg-ask__done .icon { width: 20px; height: 20px; }
.tg-ask__body[hidden], .tg-ask__done[hidden], .tg-ask[hidden] { display: none; }
dialog.tg-ask--sheet { position: fixed; inset: auto 0 0 0; width: min(100%, 520px); max-width: 100%; margin: 0 auto; padding: 20px 18px calc(18px + var(--tg-bottom, 0px) + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r-24) var(--r-24) 0 0; background: var(--surface); box-shadow: 0 -10px 30px rgba(22, 26, 60, .18); }
dialog.tg-ask--sheet::backdrop { background: rgba(16, 20, 30, .38); }

.tg-banner__done { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok); border: 1px solid #c9ecd7; font-weight: 550; font-size: .93rem; }
.tg-banner__done .icon { flex: none; }
@media (min-width: 720px) {
  .tg-banner { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon text on close"; align-items: center; }
  .tg-banner__icon { padding-top: 0; }
  .tg-banner__close { margin: 0; }
}
.tg-why .tgsheet__body { gap: 16px; }
/* «Luk на экране телефона» на главной в приложении (решение владельца 11.10.2026; templates/miniapp/_home_screen.html,
   static/luk/tg.js) — тем же видом, что плашка «Сообщения в Telegram». */
.tg-home { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon text close" "icon add add"; align-items: start; gap: 8px 12px; margin: 0 0 14px; padding: 12px 6px 12px 12px; border-radius: var(--radius); background: var(--brand-soft); border: 1px solid #d9defd; }
.tg-home[hidden], .tg-home__done[hidden] { display: none; }
.tg-home__icon { grid-area: icon; width: 40px; height: 40px; border-radius: 10px; }
.tg-home__text { grid-area: text; min-width: 0; }
.tg-home__title { margin: 0; font-weight: 700; font-size: .98rem; line-height: 1.3; color: var(--text); }
.tg-home__lead { margin: 2px 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.4; }
.tg-home__add { grid-area: add; justify-self: start; min-width: 120px; min-height: 44px; }
.tg-home__close { grid-area: close; width: 34px; height: 34px; margin: -6px 0 0; color: var(--muted); }
.tg-home__done { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--radius); background: var(--ok-bg); color: var(--ok); border: 1px solid #c9ecd7; font-weight: 550; font-size: .93rem; }
.tg-home__done .icon { flex: none; }
/* Те же карточка и «Готово» после публикации (под «Сообщениями в Telegram») и у «В избранное» (13.10.2026) — с отступом
   сверху, как у соседних блоков; в профиле — строка-раздел со статусом «уже на экране». */
.tg-home--publish, .tg-home__done--publish { margin: 16px 0 0; }
.tg-home--favorite, .tg-home__done--favorite { margin: 12px 0 0; }
.tg-home-row[hidden], .tg-home-row [hidden] { display: none; }
.tg-home-row__state { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--ok); font-weight: 600; }
.tg-home-row__state .icon { flex: none; width: 20px; height: 20px; }
@media (min-width: 720px) {
  .tg-home { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon text add close"; align-items: center; }
  .tg-home__close { margin: 0; }
}
.tg-why__path { margin: 0; font-size: var(--fs-14); line-height: 1.45; color: var(--text-2); }
.tg-why__path a { font-weight: 600; }
.tg-why .check { margin: 0; }
.tg-why [data-tg-why-ok] { align-self: stretch; }

.tg-strip, .tg-open-row { display: none; }
html[data-app-os="ios"]:not([data-tg]) .tg-strip, html[data-app-os="android"]:not([data-tg]) .tg-strip { display: flex; }
html[data-app-os="ios"]:not([data-tg]) .tg-open-row, html[data-app-os="android"]:not([data-tg]) .tg-open-row { display: block; }
.tg-strip[hidden] { display: none !important; }
.tg-strip { align-items: center; gap: 8px; margin: 0 0 12px; padding: 6px 0 6px 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.tg-strip__icon { flex: none; display: inline-flex; }
.tg-strip__text { flex: 1; min-width: 0; margin: 0; font-size: .8rem; line-height: 1.55; color: var(--text-2); }
.tg-strip__text b { color: var(--text); font-weight: 650; }
/* Кнопка — в строке текста: на телефоне 360–390 px строка остаётся в две строки, а не карточкой. */
.tg-strip__open { display: inline-block; margin-left: 2px; padding: 0 9px; border-radius: 999px; background: var(--brand-gradient); color: #fff; font-weight: 650; font-size: .74rem; line-height: 1.7; white-space: nowrap; }
.tg-strip__open:visited, .tg-strip__open:active { color: #fff; }
@media (hover: hover) and (pointer: fine) { .tg-strip__open:hover { color: #fff; filter: brightness(1.06); } }
.tg-strip__close { flex: none; width: 32px; height: 32px; color: var(--muted); }

.app-offer__tg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.app-offer__alt { flex: 1 1 200px; margin: 0; color: var(--text-2); font-size: .9rem; line-height: 1.42; }
.app-offer__alt b { color: var(--text); }
.app-offer__tg .btn .brand { width: 18px; height: 18px; }
.tg-open-row__go { display: inline-flex; align-items: center; gap: 2px; color: var(--primary); font-size: var(--fs-14); font-weight: 600; }
.cabinet__menu .tg-open-row .brand { width: 20px; height: 20px; }

/* =============================================================================================================
   Проверка удобства 09.10.2026 (docs/reports/2026-10-09-walkthrough.md): контраст, места нажатия, мелкий текст,
   контакт на месте кнопки, имя перед публикацией и сообщением, пустой поиск, фото.
   ============================================================================================================== */
/* Ш3. Белый текст на синих и зелёных кнопках и синие ссылки — не меньше 4,5 : 1 (фирменный синий темнее). */
:root {
  --primary: #0064d2;
  --primary-dark: #0055b3;
  --accent: #007a3d;
  --accent-dark: #006633;
  --muted: #626976;
  --brand-gradient: linear-gradient(120deg, #0064d2 0%, #2559e0 55%, #5b45e0 100%);
}
.hero { background: var(--brand-gradient); }
.pic-key, .pic-row, .pic-head, .pic-address, .pic-address .icon { color: var(--primary); }

/* Ш1. Места для нажатия не меньше 44 px: где картинка меньше, область нажатия шире самой картинки. */
.fav__btn, .feedbar__prices .chip, .catalog__filters, .subcats__item, .breadcrumbs a, .auth__foot a,
.claim-pill, .msg__actions > summary { position: relative; }  /* .search__btn уже absolute */
.fav__btn::after, .search__btn::after, .feedbar__prices .chip::after, .catalog__filters::after, .subcats__item::after,
.breadcrumbs a::after, .auth__foot a::after, .claim-pill::after, .msg__actions > summary::after { content: ""; position: absolute; }
/* Полосы с прокруткой обрезают выступающую область нажатия — им место по высоте. */
.feedbar__prices { padding-top: 8px; padding-bottom: 8px; }
.catalog__head .subcats--bar { padding-top: 5px; padding-bottom: 5px; }
:root { --compact-bar: 46px; }  /* компактная строка разделов: место для области нажатия 44 px */
.catalog-compact__row { align-self: stretch; }
.catalog-compact__link, .catalog-compact__filters { position: relative; }
.catalog-compact__link::after, .catalog-compact__filters::after { content: ""; position: absolute; inset: -8px 0; }
.fav__btn::after { inset: -5px; border-radius: 50%; }
.search__btn::after { inset: -4px; border-radius: 50%; }
.catalog__filters::after { inset: -7px 0; }
.feedbar__prices .chip::after { inset: -8px 0; }  /* чипы цены — 44 px по высоте (были 43, 13.10.2026) */
.claim-pill::after { inset: -8px 0; }
.subcats__item::after { inset: -5px 0; }
.breadcrumbs a::after { inset: -13px -3px; }
.auth__foot a::after { inset: -14px -4px; }
.msg__actions > summary::after { inset: -11px -7px; }
.zoneform select, .sortform select, .catalog__head .zoneform select { min-height: 44px; height: 44px; }
.catalog__head .sortform select { min-height: 44px; height: 44px; }
.chat__tools .btn, .push-offer .btn { min-height: 44px; min-width: 44px; }
.iconbtn, .gallery__nav { width: 44px; height: 44px; }
.listing-report a { min-height: 44px; }
.app-offer__actions .btn, .editor__more > summary { min-height: 44px; }
.editor__more > summary { display: flex; align-items: center; }

/* Ш2. Подписи нижней панели и время в переписке — не меньше 11 px. */
.tabbar__item { font-size: 11px; }
@media (max-height: 479px) and (min-width: 560px) { .tabbar__item { font-size: 11.5px; } }
.msg__meta { font-size: var(--fs-12); }
.photo__cover { font-size: var(--fs-12); }

/* Значок счётчика не закрывает колокольчик (Д5): у края иконки, а не на ней. */
.iconbtn .badge { top: -8px; right: -6px; min-width: 15px; height: 16px; font-size: 10.5px; padding: 0 4px; }
.topnav__link .badge { top: -6px; left: 24px; }

/* Д7. Зачем вход — одной строкой. */
.auth__reason { margin: -8px 0 8px; color: var(--text); font-weight: 600; font-size: var(--fs-15); }

/* М3. «Как вас называть?» — над сообщением и перед публикацией. */
.name-ask { margin: 0 0 4px; }
.chat__compose { flex-wrap: wrap; }
.chat__name { flex: 1 0 100%; }
.chat__name .field { margin: 0; }

/* М2. Открытый контакт — на месте кнопки, крупными кнопками; без скрипта страница открывается на нём. */
#contacts { scroll-margin-top: 90px; scroll-margin-bottom: 140px; }
.contacts-shown { display: grid; gap: 8px; outline: none; }
.contacts-shown__item { display: grid; gap: 8px; }
.contacts-shown__link { justify-content: flex-start; white-space: normal; text-align: left; }
.contacts-shown__value { font-weight: 700; overflow-wrap: anywhere; }
.contacts-shown__plain { margin: 0; overflow-wrap: anywhere; }
.side-actions .btn--brand[data-contact-call], .side-actions [data-external-phone] { white-space: normal; }
.challenge__hint { margin: 0 0 8px; font-weight: 600; color: var(--text); }
.side-actions .challenge { margin: 2px 0 4px; }

/* Д3. Telegram и WhatsApp прямо в форме объявления. */
.reach__lead { margin: 8px 0 4px; color: var(--text-2); font-size: var(--fs-14); }
.reach__contact { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.reach__contact .field { margin: 0; }
.reach__contact:last-of-type { border-bottom: 0; }
.reach .check { min-height: 44px; align-items: center; }

/* Д4. Сразу после публикации — своё объявление и «Открыть объявление» первыми. */
.manage-head__open { margin: 16px 0 4px; }
.manage-head__open .btn { width: 100%; }
.manage-head__open .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* Д5. О каком объявлении уведомление. */
.notification__listing { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }

/* Д2. Пустой поиск — разделы и свежие объявления, не тупик. */
.empty-search { margin-top: 8px; }
.empty-search__sections { justify-content: center; flex-wrap: wrap; margin: 0 0 8px; }
.empty-search__sections .chip { min-height: 44px; display: inline-flex; align-items: center; }

/* Д8. Фото: обложка — нажатием на снимок; кнопки 44 px; подписи не обрезаются и не налезают на метки. */
@media (max-width: 599px) { .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.photo__bar { gap: 8px; }
.photo__bar button, .photo__bar .btn { min-height: 44px; min-width: 44px; padding: 4px; }
.photo__make-cover { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 3; border: 0; padding: 0; margin: 0; background: transparent; border-radius: var(--r-12); cursor: pointer; }
.photo:first-child .photo__make-cover { display: none; }
.photo__state { bottom: 56px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; font-size: var(--fs-12); }
.photo__img--error { justify-content: flex-start; padding: 8px 8px 32px; font-size: var(--fs-12); line-height: 1.3; }
.catalog-compact--sub .catalog-compact__link::after { inset: -9px 0; }  /* у строки подразделов рамка: на 1 px больше */
.photo-problems__actions .btn { min-height: 44px; }

/* Плотная форма объявления (решение владельца 09.10.2026): меньше воздуха, управление рядом с полями, короткие
   подсказки. Места нажатия — не меньше 44 px (Ш1). Только внутри .editor: остальные формы не трогаем. */
.editor__note { display: flex; gap: 8px; align-items: center; margin: -4px 0 12px; color: var(--muted); font-size: var(--fs-13); }
.editor__note .icon { flex: none; color: var(--brand); }
.editor { gap: 12px; }
.editor .panel { padding: 16px; margin-bottom: 12px; }
@media (min-width: 700px) { .editor .panel { padding: 20px; } }
.editor .editor__section-title { margin-bottom: 8px; font-size: var(--fs-16); }
.editor .field { margin-bottom: 12px; }
.editor .field__label { margin-bottom: 4px; }
.editor .field__hint { margin-top: 4px; font-size: var(--fs-12); }
.editor .check { margin: 2px 0; min-height: 44px; align-items: center; }
/* Фото: по три в ряд и на телефоне, квадратом; «убрать» — крестик в углу снимка; обложка — нажатием на снимок
   (кнопка .photo__make-cover поверх снимка); стрелок нет — порядок задаёт обложка. Шаблон плитки тот же. */
.editor .photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 8px; }
@media (min-width: 700px) { .editor .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.editor .photo__img, .editor .photo__make-cover { aspect-ratio: 1; border-radius: var(--r-12); }
.editor .photo__bar { position: absolute; top: 0; right: 0; margin: 0; gap: 0; z-index: 2; }
.editor .photo__bar [data-photo-move] { display: none; }
.editor .photo__bar [data-photo-remove] { position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #fff; box-shadow: none; display: grid; place-items: center; }
.editor .photo__bar [data-photo-remove]::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(22, 24, 29, .62); }
.editor .photo__bar [data-photo-remove] .icon { position: relative; width: 15px; height: 15px; }
.editor .photo__bar [data-photo-remove]:focus-visible::before { box-shadow: var(--focus); }
.editor .photo__state { bottom: 6px; left: 6px; right: 6px; }
.editor .photo__cover { top: 6px; bottom: auto; left: 6px; max-width: calc(100% - 48px); }
.editor .photo.is-queued .photo__cover, .editor .photo.is-uploading .photo__cover, .editor .photo.is-preparing .photo__cover,
.editor .photo.is-retrying .photo__cover, .editor .photo.is-processing .photo__cover, .editor .photo.is-failed .photo__cover { display: none; }
.photo__progress { position: absolute; left: 6px; bottom: 1px; width: calc(100% - 12px); height: 4px; accent-color: var(--accent); }
.photo__progress[hidden] { display: none; }
.photo.is-queued .photo__img { opacity: .65; }
.editor textarea { min-height: 96px; }
.editor .upload { padding: 0; border: 0; background: none; gap: 8px; }
.editor .upload__buttons { gap: 8px; flex-wrap: nowrap; }
.editor .upload__buttons .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 8px; font-size: var(--fs-14); white-space: nowrap; }
.editor #photos-hint { margin: 8px 0 0; font-size: var(--fs-12); }
/* Контакты: строка на контакт — имя, поле и «Показывать» рядом; у WhatsApp ниже — «звонки». */
.editor .reach { margin-top: 12px; padding-top: 12px; }
.editor .reach__head { margin: 0 0 8px; display: grid; gap: 2px; }
.editor .reach__sub { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: var(--fs-13); }
.editor .reach__sub .icon { flex: none; color: var(--brand); }
.editor .reach__lead { margin: 0 0 4px; font-size: var(--fs-13); color: var(--muted); }
.editor .reach__contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "input show" "error error" "calls calls"; gap: 4px 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.editor .reach__contact:last-of-type { border-bottom: 0; }
.editor .reach__name { grid-area: name; display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: var(--fs-13); color: var(--text-2); }
.editor .reach__name .icon { color: var(--muted); }
.editor .reach__contact > input { grid-area: input; min-width: 0; }
.editor .reach__show { grid-area: show; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-13); cursor: pointer; white-space: nowrap; }
.editor .reach__show:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.editor .reach__contact > .field__error { grid-area: error; margin: 0; }
.editor .reach__calls { grid-area: calls; margin: 0; min-height: 40px; font-size: var(--fs-14); }
.editor .reach__line { margin: 4px 0; }
.editor .reach__note { font-size: var(--fs-12); margin-top: 8px; }
/* Галочка своей группы Luk — короткой строкой над «Опубликовать», включена по умолчанию. */
.editor .group-offer { min-height: 40px; margin: 0; font-size: var(--fs-14); color: var(--text-2); }
.editor .editor__actions { margin-top: 12px; gap: 8px; }

/* ==============================================================================================================
   Подача по шагам (ADR 0037, решение владельца 10.10.2026): та же форма редактора, один экран — одно действие.
   static/luk/publish-steps.js ставит .is-stepped на .editor-page и .is-current на части формы текущего шага
   (data-step в шаблоне); всё без data-step видно всегда. Без скрипта — форма целиком, переключатель и полоска скрыты.
   - Сверху — переключатель «Пошагово / Всё на одном экране», «Шаг N из 5», название шага и полоска из пяти частей.
   - Внизу шага — «Назад» и «Далее» (на последнем — «Опубликовать» той же кнопки формы); в Telegram — те же кнопки и ещё
     «Назад» Telegram вверху (.is-native; своя «Назад» видна и там с 25.10.2026).
   - «Шаг N из 5», полоска, шаг и его кнопки — в одной карточке чуть темнее фона (.steps-card, 25.10.2026); переключатель
     — над ней; «Отложить» — в верхней строке карточки, справа.
   - На компьютере — колонка по центру; на шаге «Проверка» карточка слева, список справа. На телефоне 360–430 px — одна
     колонка, без горизонтальной прокрутки; места нажатия не меньше 44 px.
   - Смена шага — короткое появление снизу (назад — сверху); при prefers-reduced-motion — без анимации.
   ============================================================================================================== */
.steps-switch { display: inline-flex; gap: 2px; padding: 4px; margin: -4px 0 16px; border-radius: 999px; background: #e9ecf2; max-width: 100%; }
.steps-switch__item { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s, box-shadow .15s; }
.steps-switch__item[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(22, 26, 60, .08), 0 2px 8px rgba(22, 26, 60, .06); }
.steps-switch__item:focus-visible { outline: none; box-shadow: var(--focus); }
@media (hover: hover) and (pointer: fine) { .steps-switch__item[aria-pressed="false"]:hover { color: var(--text); } }
@media (max-width: 359px) { .steps-switch__item { padding: 0 8px; font-size: var(--fs-13); } }

.steps-progress { margin: 0 0 16px; }
.steps-progress__label { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
.steps-progress__count { flex-basis: 100%; color: var(--muted); font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.steps-progress__name { font-size: var(--fs-18); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--text); outline: none; }
.steps-progress__name:focus-visible { box-shadow: none; }  /* фокус здесь — только для читалки экрана, не для нажатия */
.steps-progress__optional { padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.steps-progress__bar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.steps-progress__seg { height: 6px; border-radius: 999px; background: #dfe3eb; position: relative; overflow: hidden; }
.steps-progress__seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.steps-progress__seg.is-done::after, .steps-progress__seg.is-current::after { transform: scaleX(1); }
.steps-progress__seg.is-done::after { opacity: .55; }
@media (min-width: 900px) { .steps-progress__name { font-size: var(--fs-22); } }

.editor-page.is-stepped { max-width: 720px; margin: 0 auto; }
/* Карточка шагов (решение владельца 25.10.2026: «область пошагового хода слегка выделена — как карточка, в рамках которой
   мы шагаем»): фон чуть темнее страницы, скругление как у .panel. Белые части шага внутри — белые, без своей тени: две
   тени подряд тяжелы. Отступы карточки небольшие — на телефоне поля страницы прежние, 16 px. */
.editor-page.is-stepped .steps-card { padding: 16px 16px 0; border-radius: var(--r-24); background: var(--steps-card); }
.editor-page.is-stepped .steps-card .panel { box-shadow: none; }
.editor-page.is-stepped .steps-progress { position: relative; }
@media (max-width: 599px) { .editor-page.is-stepped .steps-card { padding: 14px 8px 0; } .editor-page.is-stepped .steps-progress { margin-left: 4px; margin-right: 4px; } }
.editor-page.is-stepped .editor { grid-template-columns: minmax(0, 1fr); }
.editor-page.is-stepped [data-step]:not(.is-current) { display: none; }
/* Название части формы — в шапке шага; у самой части оно остаётся для читалки экрана. */
.editor-page.is-stepped [data-steps-title] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }
.editor-page.is-stepped .editor__more[open] > summary { margin: 0; }
.editor-page.is-stepped .preview { order: -1; }
.editor-page.is-stepped .preview .card { max-width: 260px; }
.editor-page.is-stepped .preview__tips, .editor-page.is-stepped [data-steps-publish] { display: none; }
.editor-page.is-stepped .editor__photos .upload__buttons .btn { min-height: 52px; }
.editor-page.is-stepped .editor__actions { margin-top: 4px; }
.editor-page.is-stepped .editor__actions > * { order: 4; }
.editor-page.is-stepped .editor__actions > .group-offer { order: 1; flex-basis: 100%; }
.editor-page.is-stepped .editor__actions > .submit-status { order: 2; }
.editor-page.is-stepped .editor__actions > .steps-nav { order: 3; }
.editor-page.is-stepped .editor__actions > .btn--ghost[data-step] { min-height: 44px; }
@media (min-width: 760px) {
  .editor-page.is-stepped[data-step-now="5"] .editor { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; }
  .editor-page.is-stepped[data-step-now="5"] .preview .card { max-width: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .editor-page.steps-anim [data-step].is-current { animation: steps-in .3s cubic-bezier(.2, .8, .2, 1) both; }
  .editor-page.steps-anim.is-back [data-step].is-current { animation-name: steps-in-back; }
}
@keyframes steps-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes steps-in-back { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.steps-nav { flex-basis: 100%; display: flex; gap: 8px; align-items: center; margin: 2px 0 4px; }
.steps-nav__back { flex: none; padding-left: 16px; padding-right: 20px; }
.steps-nav__next { flex: 1 1 auto; min-width: 0; }
.steps-nav__next .icon { width: 19px; height: 19px; }
.steps-nav__next[aria-busy="true"] { pointer-events: none; opacity: .92; }
@media (min-width: 700px) { .steps-nav__next { flex: 0 1 280px; margin-left: auto; } }
/* Шаги 1–4: «Назад» и «Далее» — компактной строкой внизу карточки шага (решение владельца 11.10.2026), «Далее» справа.
   На шаге «Всё верно?» — прежняя крупная «Опубликовать» в форме. В Telegram своя «Назад» тоже видна (решение владельца
   25.10.2026: свайп понимают не все); «Назад» Telegram вверху остаётся. */
.steps-nav.is-inline { margin: 16px 0 0; justify-content: flex-end; }
.steps-nav.is-inline .btn--large { min-height: 46px; padding: 8px 20px; font-size: var(--fs-15); }
.steps-nav.is-inline .steps-nav__back { margin-right: auto; padding-left: 12px; padding-right: 16px; }
.steps-nav.is-inline .steps-nav__next { flex: 0 0 auto; min-width: 136px; }

/* «Отложить» (решение владельца 25.10.2026, templates/listings/_postpone.html): тихая кнопка — по шагам в верхней строке
   карточки справа от «Шаг N из 5», в обычной форме — в шапке рядом с «Черновик сохраняется сам». Окно — на телефоне лист
   снизу, на компьютере небольшое окно по центру (как .tgsheet). Затемнение — часть <summary>: касание закрывает окно и
   без JavaScript. */
.postpone > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border-radius: var(--r-8); color: var(--text-2); font-size: var(--fs-13); font-weight: 600; list-style: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.postpone > summary::-webkit-details-marker { display: none; }
.postpone > summary .icon { width: 16px; height: 16px; color: var(--muted); }
.postpone > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.postpone > summary:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) { .postpone > summary:hover { color: var(--text); } }
.postpone[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 80; background: rgba(8, 10, 14, .45); cursor: default; }
.postpone__sheet { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border-radius: var(--r-24); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); outline: none; }
.postpone__title { margin: 0 0 4px; font-size: var(--fs-18); }
.postpone__lead { margin: 0 0 16px; color: var(--text-2); font-size: var(--fs-14); line-height: 1.45; }
.postpone__actions { display: grid; gap: 8px; }
.postpone__actions .btn { width: 100%; min-height: 44px; }
.postpone__actions .postpone__delete { color: var(--danger); }
@media (max-width: 599px) {
  .postpone__sheet { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 92dvh; transform: none; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: var(--r-24) var(--r-24) 0 0; }
  html[data-tg-fullscreen] .postpone__sheet { padding-bottom: calc(16px + var(--tg-bottom)); }
}
/* Место кнопки: по шагам — справа от «Шаг N из 5» (строка 18 px, касание 44 px — вверх и вниз поровну); в шапке
   страницы — рядом с «Черновик сохраняется сам», на телефоне — справа от заголовка (у строки автосохранения своя строка). */
.steps-progress > .postpone { position: absolute; top: -13px; right: -4px; }
.page-head > .postpone { margin: 0 -4px -12px 0; }  /* текст кнопки — на одной линии с соседним текстом */
@media (min-width: 700px) { .page-head:has(> .postpone) > [data-autosave-status] { margin-left: auto; } }
@media (max-width: 699px) {
  .page-head > .postpone { order: 1; margin-left: auto; }
  .page-head:has(> .postpone) > [data-autosave-status] { order: 2; }
}

.steps-review { padding-top: 4px; padding-bottom: 4px; }
.steps-review__todo { margin: 12px 0 4px; padding: 8px 12px; border-radius: var(--r-12); background: var(--warn-bg); color: #6b4700; font-size: var(--fs-14); line-height: 1.4; }
.steps-review__list { margin: 0; }
.steps-review__row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.steps-review__row:last-child { border-bottom: 0; }
.steps-review__label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: var(--fs-12); font-weight: 600; }
.steps-review__value { margin: 2px 0 0; color: var(--text); font-size: var(--fs-14); line-height: 1.45; overflow-wrap: anywhere; }
.steps-review__problem { display: block; margin-top: 2px; color: var(--danger); font-size: var(--fs-13); font-weight: 500; }
.steps-review__row.is-missing .steps-review__text { color: var(--muted); }
.steps-review__edit { margin: -12px -4px -12px 0; padding: 12px 4px 12px 12px; min-height: 44px; border: 0; background: none; color: var(--brand); font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.steps-review__edit:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-8); }
@media (hover: hover) and (pointer: fine) { .steps-review__edit:hover { color: var(--brand-dark); text-decoration: underline; } }

/* Аудит вида 11.10.2026, этап 2 — дефекты (docs/reports/2026-10-11-premium-audit.md, слой A). Номера — из отчёта. */
/* A1. Слово без пробелов в заголовке не раздвигает страницу и не режется краем карточки без «…». */
.listing__title, .card__title, .manage-head h1, .manage-head__title, .mp-price__title { overflow-wrap: anywhere; }
/* A2. Заглушка без фото (вакансия): значок и подпись выше метки цены — метка в две строки на них не ложится. */
.card__media > .card__cover--empty { justify-content: flex-start; padding-top: 10px; gap: 4px; }
.card__media > .card__cover--empty .icon--lg { width: 24px; height: 24px; }
/* Узкая карточка ленты-полосы (свежие под пустым поиском, «Другие объявления»): места под подписью «Без фото» нет — её
   накрывала метка цены (билеты без фото, пакет 12). Остаётся значок. */
.grid--rail .card__media > .card__cover--empty > span { display: none; }
/* A3. Длинный заголовок в кабинете: 2 строки в списке, 3 — в карточке управления, 1 — в крошках правки. */
.mine__title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.manage-head h1, .manage-head__title { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.breadcrumbs__clip { display: inline-block; max-width: min(52vw, 420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* A8. Разговор: поле и кнопка «Отправить» в одну строку; «⋯» своего сообщения — в строке со временем. */
.chat__compose textarea { flex: 1 1 0; width: auto; min-width: 0; }
.msg:has(> .msg__actions) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2px; align-items: end; }
.msg:has(> .msg__actions) > .msg__body, .msg:has(> .msg__actions) > .msg__goods { grid-column: 1 / -1; }
.msg:has(> .msg__actions) > .msg__meta { grid-column: 1; }
.msg:has(> .msg__actions) > .msg__actions { grid-column: 2; grid-row: 2; }
.msg:has(> .msg__actions) > .msg__actions[open] { grid-column: 1 / -1; grid-row: auto; }
/* A10. Метка «Обложка» — внизу снимка, крестик «убрать» — вверху: не ложатся друг на друга и на узкой плитке. */
.editor .photo__cover { top: auto; bottom: 6px; left: 6px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A11. Вкладки документов на телефоне — переносом, активная всегда на виду. */
@media (max-width: 959px) { .legal__nav { flex-wrap: wrap; overflow: visible; } }
.legal__nav a { min-height: 44px; }
/* A12. Ряд разделов кабинета: текущий раздел у левого края (luk.js), края ряда — мягким затуханием, а не обрывком. */
@media (max-width: 899px) {
  .cabinet--section .cabinet__menu { padding-block: 4px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); }
  .cabinet--section .cabinet__menu a { position: relative; }
  .cabinet--section .cabinet__menu a::after { content: ""; position: absolute; inset: -4px 0; }
}
/* A13. «Все 6 ›» не разрывается, стрелка — рядом с числом. */
.section-head a { flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
/* A14. Длинный ник в кнопке открытого контакта — второй строкой и с «…», кнопка обычной высоты. */
.contacts-shown__link > span { display: grid; min-width: 0; }
.contacts-shown__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A17. Контраст: подпись текущего пункта нижнего меню и «прочитано» в своём сообщении — не ниже 4,5 : 1. */
.tabbar__item[aria-current="page"] { color: var(--brand-dark); }
.msg--mine .msg__ticks--read { color: #0058b8; }
/* A18. Места для пальца не меньше 44 px: строки выбора в жалобе, поддержке и приветствии, переключатель подачи,
   снятие фильтра, города, жалоба на профиль. */
/* Только выбор причины и темы (жалобы, поддержка) и флажки приветствия — остальные формы не трогаем. */
.check:has(> input[type=radio]), .auth .check { min-height: 44px; align-items: center; }
.steps-switch__item { min-height: 44px; }
.chip--removable { position: relative; }
.chip--removable::after { content: ""; position: absolute; inset: -4px 0; }
.citypick__panel a { min-height: 44px; }
[data-report-profile] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* =============================================================================================================
   Единая система кнопок — этап 3.1 «Премиальный вид» (выбор владельца 11.10.2026: главная — градиентом, как
   «Разместить» в шапке). Подробно — docs/design-system.md. Только вид: ни одна кнопка не убрана и не перенесена.
   Четыре вида:
   - главная — .btn--brand; прежние синяя .btn--primary и зелёная .btn--accent выглядят так же. На экране одна главная,
     остальные кнопки второстепенные (выбирают шаблоны);
   - второстепенная — .btn--ghost: белая с тонкой рамкой;
   - тихая — .btn--quiet: без рамки, цветом ссылки («Не сейчас»);
   - опасная — .btn--danger: белая, красный текст и рамка.
   Две высоты: обычная и крупная — 48, компактная — 40 (--btn-h, --btn-h-sm). Главная страница (лента «Все» и карточка
   приложения на ней) и CRM остаются как были (решение владельца 11.10.2026: главную не трогаем; CRM — служебная).
   Шапка, островок меню, карточки ленты — без изменений.
   ============================================================================================================== */
:root { --btn-h: 48px; --btn-h-sm: 40px; --btn-h-lg: 48px; --btn-main: var(--brand-gradient); --btn-main-shadow: 0 6px 16px rgba(74, 94, 240, .28); }
.catalog--all, [data-app-offer="return"], .crm { --btn-h: 44px; --btn-h-sm: 34px; --btn-h-lg: 52px; }

.btn--primary, .btn--accent { background: var(--btn-main); color: #fff; box-shadow: var(--btn-main-shadow); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover, .btn--accent:hover { background: var(--btn-main); color: #fff; filter: brightness(1.06); } }
.crm .btn--primary { background: var(--primary); box-shadow: none; }
.crm .btn--accent { background: var(--accent); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .crm .btn--primary:hover { background: var(--primary-dark); filter: none; }
  .crm .btn--accent:hover { background: var(--accent-dark); filter: none; }
}

.btn--quiet:not(.btn--link) { background: transparent; border-color: transparent; color: var(--brand-dark); box-shadow: none; padding-left: 12px; padding-right: 12px; }
@media (hover: hover) and (pointer: fine) { .btn--quiet:not(.btn--link):hover { background: var(--brand-soft); color: var(--brand-dark); } }

/* Высоты, которые раньше задавались на месте, — по двум ступеням. */
.tg-ask__actions .btn, .editor .upload__buttons .btn, .editor-page.is-stepped .editor__photos .upload__buttons .btn,
.steps-nav.is-inline .btn--large { min-height: var(--btn-h); }

/* Управление объявлением: кнопки одной ширины, одна под другой — ровный край; шире 560 px — два столбца. */
.actions--stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.actions--stack > form, .actions--stack > a { min-width: 0; }
.actions--stack .btn { width: 100%; }
@media (min-width: 560px) {
  .actions--stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions--stack > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Экраны-подтверждения (удаление аккаунта, подтверждение входа, «Снять с публикации?», сообщение продавцу): на телефоне
   кнопки во всю ширину, как «Выйти» и «Да, это моё». */
@media (max-width: 699px) {
  .panel--narrow form > .btn, .panel--narrow .actions > .btn, .panel--narrow .actions > form { width: 100%; }
  .panel--narrow .actions > form > .btn { width: 100%; }
}

/* Своя страница мастера и проката: кнопки связи — как у клиента, не бледные; нажатие у владельца по-прежнему ничего не
   делает (B3). */
.mp-actions .btn:disabled, .mp-item .btn:disabled, .rp-item .btn:disabled { opacity: 1; cursor: default; }

/* =============================================================================================================
   Формы и мелочи — этап 3.3 «Премиальный вид» (docs/design-system.md). Только вид: поля, флажки, кнопки и ссылки те же.
   ============================================================================================================== */
/* B7: своё сообщение под полем вместо подсказки браузера (luk.js) — в виде ошибок подачи, рамка поля красная. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
.field__error--own { margin-top: 4px; }
label > .field__error--own { font-weight: 500; }

/* B8: выбор файла — кнопкой в виде второстепенной, рядом спокойная подпись «Файл не выбран» / имя файла. */
input[type=file] { color: var(--muted); font-size: var(--fs-14); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; min-height: var(--btn-h-sm); padding: 8px 16px; margin: 0 12px 0 0; cursor: pointer; }
input[type=file]::-webkit-file-upload-button { font: inherit; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; min-height: var(--btn-h-sm); padding: 8px 16px; margin: 0 12px 0 0; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { input[type=file]::file-selector-button:hover { background: var(--surface-2); } }

/* B8: «Сохранить» у блока — второстепенная, пока в блоке ничего не меняли; после правки — главная (luk.js ставит
   форме .is-changed): видно, где несохранённое. Сохраняется всё так же, по блокам. */
form.is-changed .btn--save { background: var(--btn-main); color: #fff; border-color: transparent; box-shadow: var(--btn-main-shadow); }

/* B9: «Показывать» и «Можно звонить» — одним переключателем везде: форма объявления, настройки, страница мастера и
   проката. Это тот же флажок, другой только вид — как у переключателя «Сообщения в Telegram» (.switch выше): 44×26,
   включён — фирменным синим. Подпись рядом, вся строка нажимается. */
.check-switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.check-switch input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background-color .15s; }
.check-switch input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform .15s; }
.check-switch input[type=checkbox]:checked { background: var(--brand); }
.check-switch input[type=checkbox]:checked::after { transform: translateX(18px); }
.check-switch input[type=checkbox]:focus-visible { box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) { .check-switch input[type=checkbox], .check-switch input[type=checkbox]::after { transition: none; } }
.editor .reach__show.check-switch { border: 0; padding: 0; background: none; }
.editor .reach__show.check-switch:has(input:checked) { background: none; color: var(--text); }

/* B15: тихие действия под объявлением — одним видом: значок, серый текст, строка 44 px. */
.listing-report { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; font-size: var(--fs-14); color: var(--muted); }
.listing-report > .icon { width: 16px; height: 16px; flex: none; }
.listing-report a .icon { width: 16px; height: 16px; flex: none; }
.listing-report--bait { line-height: 1.4; }
.listing-report--bait a { display: inline; min-height: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* =============================================================================================================
   Страница объявления — вариант B (этап 4.1 «Премиальный вид», решение владельца 11.10.2026, docs/design-system.md).
   Ничего не убрано: те же способы связи, «В избранное», «Поделиться», описание целиком, все сведения.
   ============================================================================================================== */
/* Цена — сразу под заголовком на телефоне; на компьютере и лёжа (две колонки) — в карточке справа, как раньше. */
.listing__headprice { margin: 12px 0 0; font-size: var(--fs-28); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.listing__badges--head { margin: 8px 0 0; }
.listing__headprice, .listing__badges--head { display: none; }
@media (max-width: 959px) {
  .listing__headprice, .listing__badges--head { display: block; }
  .listing__buy .listing__price, .listing__buy .listing__badges { display: none; }
  .listing__buy--owner { display: none; }  /* у своего объявления в карточке остаётся только цена — она уже наверху */
}
@media (max-height: 479px) and (min-width: 560px) and (max-width: 959px) {
  .listing__headprice, .listing__badges--head { display: none; }
  .listing__buy .listing__price, .listing__buy .listing__badges { display: block; }
  .listing__buy--owner { display: block; }
}
/* «Зарплата не указана» — обычной строкой, а не шрифтом цены. */
.listing__price--none, .listing__headprice--none { font-size: var(--fs-18); font-weight: 600; color: var(--text-2); letter-spacing: 0; }

/* «В избранное» и «Поделиться» — у заголовка, компактно (владелец: чуть меньше, чем в макете); место для пальца — 44. */
.listing__tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.listing__tools > form { margin: 0; display: contents; }
.listing__tools .btn { width: auto; min-height: 36px; padding: 0 14px; font-size: var(--fs-14); gap: 6px; position: relative; }
.listing__tools .btn::before { content: ""; position: absolute; inset: -6px 0; }  /* 36 px кнопки без рамки + 12 = 46 */
.listing__tools .btn .icon { width: 16px; height: 16px; }

/* Способы связи: главная — во всю ширину, остальные — рядом по две; нечётная — на всю строку. Проверка «Я не робот»,
   «Открыть …» и открытый номер (их вставляет contacts.js) — тоже на всю строку. */
.contact-row { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-row > .btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding-left: 12px; padding-right: 12px; }
.contact-row > :not(.btn), .contact-row > [data-contact-open], .contact-row > [data-external-phone] { flex: 1 1 100%; }

/* Без фото — низкая полоса со значком вместо большого пустого квадрата. */
.listing__gallery .gallery__main.card__cover--empty { aspect-ratio: auto; height: 112px; flex-direction: row; gap: 12px; }

/* Панорама и вертикальное фото — на размытом фоне из того же снимка вместо чёрных полей (listing.js). */
.gallery__stage.has-backdrop { background: #1d2027; }
.gallery__backdrop { position: absolute; inset: -32px; z-index: 0; background: center / cover no-repeat; filter: blur(28px) saturate(1.1) brightness(.78); pointer-events: none; transition: background-image .2s; }
.gallery__stage.has-backdrop .gallery__track { position: relative; z-index: 1; }
.gallery__stage.has-backdrop .gallery__main { background: transparent; }
.gallery__stage.has-backdrop .gallery__nav, .gallery__stage.has-backdrop .gallery__counter { z-index: 2; }

/* Длинное описание — 8 строк и «Читать полностью»; одно нажатие раскрывает весь текст на месте (listing.js). */
.listing__desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.listing__more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--brand-dark); font: inherit; font-weight: 600; cursor: pointer; }
.listing__more .icon { width: 18px; height: 18px; }

/* Пока читаете описание, рядом с островком меню — та же кнопка связи, что в карточке (нажатие — то же самое нажатие). */
.listing-float { position: fixed; z-index: 31; bottom: var(--island-bottom); left: calc(var(--island-left) + var(--island-mini) + 10px); right: var(--island-right); max-width: 420px; min-height: var(--island-mini); margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s; }
.listing-float.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .16s ease, transform .2s ease; }
.listing-float .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .listing-float, .listing-float.is-on { transition: none; } }

/* =============================================================================================================
   Этап 4.2 «Премиальный вид» (docs/design-system.md). Только добавляет и уплотняет — ничего не скрыто.
   ============================================================================================================== */
/* C14: под коротким списком раздела — строка конца, «Ещё в разделе …» и карточка соседних разделов (как конец ленты
   на главной); в пустом городе — карточка города той же страны. Поиск и главная — как есть. */
.section-done { margin: 20px 0 0; text-align: center; color: var(--muted); font-size: var(--fs-14); }
.rail--more { margin-top: 24px; }

/* C16: телефон лёжа — строка «Luk удобнее в Telegram» ниже, чтобы на первом экране было больше самого раздела. Всё на
   месте и нажимается; у крестика место для пальца — 44 (невидимая область). Ряд разделов кабинета — как был: он уже
   компактный (этап 2, A12), а ниже его не ужать без потери места для пальца — ряд прокручивается вбок и обрезает
   невидимую область по своему отступу. */
@media (max-height: 479px) and (min-width: 560px) {
  .tg-strip { margin-bottom: 8px; padding-top: 0; padding-bottom: 0; }
  .tg-strip__text { line-height: 1.35; }
  .tg-strip__close.iconbtn { width: 36px; height: 36px; }
  .tg-strip__close.iconbtn::before { content: ""; position: absolute; inset: -4px; }
}

/* «Выберите город» — luk.markets/ без выбранного города (пакет 3b): города по странам, плитка ведёт на главную города. */
.cities { margin: 0 0 20px; }
.cities__country { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: var(--fs-18); }
.cities__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 600px) { .cities__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cities__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.cities__city { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px 10px 10px; border-radius: var(--r-16); background: var(--surface); box-shadow: var(--shadow); color: var(--text); font-weight: 600; text-decoration: none; }
button.cities__city { width: 100%; border: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }  /* «В каком городе объявление?» — кнопки формы */
.cities__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cities__name { flex: 1; min-width: 0; }
.cities__arrow { color: var(--muted); flex: none; }
@media (hover: hover) and (pointer: fine) { .cities__city:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--brand), var(--shadow); } }
.cities__city:focus-visible { outline: none; box-shadow: var(--focus); }

/* Реклама на главной (ADR 0041, templates/web/_adslot.html, static/luk/adslot.js). Слева, высотой ровно в два ряда
   карточек, после двух полных рядов: на телефоне (2 колонки) — одна колонка, рядом две карточки; шире (3–5 колонок) —
   две колонки, справа карточки (владелец 17.10: «чтобы была слева и занимала только 2 ряда карточек», на телефоне
   меньше и «карточки объявлений гармонично чтобы были вписаны»). Высоту задают карточки соседней колонки: содержимое
   блока лежит поверх (position: absolute) и ряды не растягивает. Ролик 9:16 целиком (contain), вокруг — размытая
   заглушка. Нужное число карточек: два ряда + соседи в двух рядах (2 колонки — 6, 3 — 8, 4 — 12, 5 — 16); меньше или
   браузер без :has() — блок в конце сетки в одну колонку со своей высотой 9:16. */
.grid > .adslot { position: relative; min-width: 0; order: 1; grid-row: span 2; border-radius: 20px; overflow: hidden; background: #ead6c4; box-shadow: var(--shadow); }
.grid > .adslot .adslot__link { position: relative; aspect-ratio: 9 / 16; }
.grid:has(> .card:nth-of-type(6)) > .adslot { order: 0; grid-column: 1; grid-row: 3 / span 2; }
.grid:has(> .card:nth-of-type(6)) > .adslot .adslot__link { position: absolute; inset: 0; aspect-ratio: auto; }
@media (min-width: 600px) {
  .grid:has(> .card:nth-of-type(6)) > .adslot { order: 1; grid-column: auto; grid-row: span 2; }
  .grid:has(> .card:nth-of-type(6)) > .adslot .adslot__link { position: relative; inset: auto; aspect-ratio: 9 / 16; }
  .grid:has(> .card:nth-of-type(8)) > .adslot { order: 0; grid-column: 1 / span 2; grid-row: 3 / span 2; }
  .grid:has(> .card:nth-of-type(8)) > .adslot .adslot__link { position: absolute; inset: 0; aspect-ratio: auto; }
}
@media (min-width: 960px) {
  .grid:has(> .card:nth-of-type(8)) > .adslot { order: 1; grid-column: auto; grid-row: span 2; }
  .grid:has(> .card:nth-of-type(8)) > .adslot .adslot__link { position: relative; inset: auto; aspect-ratio: 9 / 16; }
  .grid:has(> .card:nth-of-type(12)) > .adslot { order: 0; grid-column: 1 / span 2; grid-row: 3 / span 2; }
  .grid:has(> .card:nth-of-type(12)) > .adslot .adslot__link { position: absolute; inset: 0; aspect-ratio: auto; }
}
@media (min-width: 1100px) {
  .grid:has(> .card:nth-of-type(12)) > .adslot { order: 1; grid-column: auto; grid-row: span 2; }
  .grid:has(> .card:nth-of-type(12)) > .adslot .adslot__link { position: relative; inset: auto; aspect-ratio: 9 / 16; }
  .grid:has(> .card:nth-of-type(16)) > .adslot { order: 0; grid-column: 1 / span 2; grid-row: 3 / span 2; }
  .grid:has(> .card:nth-of-type(16)) > .adslot .adslot__link { position: absolute; inset: 0; aspect-ratio: auto; }
}
.adslot__link { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; color: #fff; text-decoration: none; }
.adslot__link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--brand); }
@media (hover: hover) and (pointer: fine) { .adslot:hover { box-shadow: var(--shadow-lg); } }
.adslot__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(36px) saturate(.85); transform: scale(1.3); opacity: .7; }
/* Живая подсветка (adslot.js): кадр ролика в крошечном холсте, размытый, — поля по бокам на компьютере светятся его
   цветами; пока её нет (заглушка, старый браузер) — размытая заглушка под ней. */
.adslot__glow { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(26px) saturate(1.1) brightness(1.03); transform: scale(1.25); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.adslot__glow.is-on { opacity: .9; }
.adslot__media { position: absolute; inset: 0; display: block; }
.adslot__poster, .adslot__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.adslot__video { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.adslot__media.is-playing .adslot__video { opacity: 1; }
/* Телефон (владелец 17.10: «растянуть рекламу так, чтобы не было пустой области внизу и вверху… гармонично и красиво»):
   ролик заполняет блок по высоте, края кадра уходят за блок — как обложка карточки, без искажения, — но не больше чем на
   14 % с каждой стороны: финальная фраза ролика и заглушка для телефона (poster_phone) помещаются в центральные 72 %.
   На самых узких экранах (360) остаются тонкие полосы размытой заглушки. Размер — от блока (container-type: size;
   содержимое блока и так поверх, ряды не меняются); без единиц cq — как на широком экране. */
@supports (width: 1cqw) {
  @media (max-width: 599px) {
    .grid:has(> .card:nth-of-type(6)) > .adslot { container-type: size; }
    .grid:has(> .card:nth-of-type(6)) > .adslot .adslot__media { inset: auto; left: 50%; top: 50%; width: min(100cqh * 9 / 16, 100cqw / .72); aspect-ratio: 9 / 16; transform: translate(-50%, -50%); }
    .grid:has(> .card:nth-of-type(6)) > .adslot--fit-phone .adslot__media { inset: 0; width: auto; aspect-ratio: auto; transform: none; }
  }
}
/* Ролик под размер места (luk.ads.slots.Fitted): телефон 9:22, компьютер 1:1 — заполняет блок, как обложка карточки. */
@media (max-width: 599px) { .adslot--fit-phone .adslot__poster, .adslot--fit-phone .adslot__video { object-fit: cover; } }
@media (min-width: 600px) { .adslot--fit-desktop .adslot__poster, .adslot--fit-desktop .adslot__video { object-fit: cover; } }
/* Метка «Реклама» (владелец 23.10.2026: «незаметнее», затем «вниз слева»): без подложки, мельче и приглушённая; лёгкая
   тень — чтобы читалась и на светлом кадре. Ролики оставляют под неё левый нижний угол (ADR 0041). */
.adslot__label { position: absolute; bottom: 7px; left: 8px; z-index: 2; color: rgba(255, 255, 255, .6); font-size: 9px; line-height: 1; letter-spacing: .03em; text-shadow: 0 0 3px rgba(0, 0, 0, .5); pointer-events: none; }

/* Шапка главной с роликом (ADR 0042, templates/web/_catalog.html, static/luk/hero.js; владелец 22.10.2026). Картинка —
   ролик (заставка, пока он не играет или когда его нет), слова — живой текст сайта поверх: постоянная строка h1,
   сменяющиеся фразы, кнопка. Место занято заранее, страница не прыгает: компьютер — пропорция ролика 2560/720
   (≈1192×335 при окне 1440), планшет 600–899 px — высота 260 px (ролик обрезается по бокам), телефон — 1080/600
   (≈358×199 при 390): объявления остаются на первом экране; телефон лёжа (низкий экран, как в блоке «лёжа» выше) —
   200 px. Действие в кадре — справа, слева спокойно под текст. */
.hero.hero--video { padding: 0; aspect-ratio: 2560 / 720; min-height: 300px; isolation: isolate; }
.hero--video::before, .hero--video::after { display: none; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.hero__poster, .hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.hero--video.is-playing .hero__video { opacity: 1; }
/* Слева под текстом — лёгкое затемнение: белые слова читаются на любом кадре. */
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 30, 120, .34) 0%, rgba(9, 30, 120, .18) 34%, rgba(9, 30, 120, 0) 52%); }
.hero__content { position: relative; z-index: 1; display: flex; flex-direction: column; box-sizing: border-box; height: 100%; padding: 34px 46px 32px; }
.hero.hero--video h1 { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 0; max-width: none; opacity: .88; }
/* Мягкая тень, не контур: слова читаются и поверх светлых предметов в кадре (ревью архитектора 22.10). */
.hero.hero--video h1, .hero__phrase { text-shadow: 0 1px 10px rgba(9, 30, 120, .45); }
/* 560 px: первая фраза не доходит до предметов слева от знака Luk. */
.hero__phrases { position: relative; flex: 1; min-height: 0; margin-top: 12px; max-width: 560px; }
/* Фразы лежат друг на друге; видна одна. Без ролика — первая, неподвижно; с роликом прозрачность, сдвиг и размытие
   ставит hero.js по времени ролика (класс is-live). */
.hero__phrase { position: absolute; top: 0; left: 0; right: 0; color: #fff; font-size: 2.55rem; font-weight: 750; line-height: 1.1; letter-spacing: -.022em; text-wrap: balance; opacity: 0; visibility: hidden; }
.hero--video:not(.is-live) .hero__phrase:first-child { opacity: 1; visibility: visible; }
.hero.hero--video .hero__cta { margin-top: 0; }
@media (max-width: 899px) {
  .hero.hero--video { aspect-ratio: auto; height: 260px; min-height: 0; }
  .hero__content { padding: 24px 26px 22px; }
  .hero__phrases { max-width: 470px; }
  .hero__phrase { font-size: 2rem; }
}
@media (max-width: 599px) {
  .hero.hero--video { aspect-ratio: 1080 / 600; height: auto; border-radius: 22px; }
  .hero__media::after { background: linear-gradient(90deg, rgba(9, 30, 120, .40) 0%, rgba(9, 30, 120, .22) 52%, rgba(9, 30, 120, 0) 74%); }
  .hero__content { padding: 14px 16px; }
  .hero.hero--video h1 { font-size: .8rem; max-width: 66%; }  /* не заходит на предметы справа — лучше в две строки */
  .hero__phrases { margin-top: 6px; max-width: 64%; }
  .hero__phrase { font-size: 1.32rem; line-height: 1.12; }
  /* Кнопка ниже обычной, чтобы фразам хватило места; область нажатия — те же 44 px (Ш1). */
  .hero--video .btn--hero { position: relative; min-height: 36px; padding: 6px 14px; font-size: .9rem; }
  .hero--video .btn--hero::after { content: ""; position: absolute; inset: -4px 0; }
}
/* Телефон лёжа (и любой низкий экран — то же условие, что у компактного блока «лёжа»): 200 px вместо 260, ролик
   обрезается по бокам; фразы мельче, чтобы поместились вместе с кнопкой. */
@media (max-height: 479px) and (min-width: 560px) {
  .hero.hero--video { aspect-ratio: auto; height: 200px; min-height: 0; }
  .hero__content { padding: 16px 24px 16px; }
  .hero__phrases { margin-top: 8px; max-width: 470px; }
  .hero__phrase { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .hero__video { transition: none; } }

/* =============================================================================================================
   «Ищу» — «Сниму», «Куплю», «Ищу исполнителя» (ADR 0043, решение владельца 22.10.2026). Метка видна сразу — на
   карточке, на странице объявления и в кабинете, на телефоне тоже. Цвет — фирменный синий Luk, отличный от зелёного
   «Опубликовать» и белой метки цены.
   ============================================================================================================== */
.card__want { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; background: var(--brand); color: #fff; font-size: .74rem; font-weight: 750; line-height: 1.2; padding: 3px 9px 3px 7px; border-radius: 999px; box-shadow: 0 2px 8px rgba(43, 58, 180, .28); letter-spacing: .01em; }
.card__want .icon { width: 13px; height: 13px; }
.card__want[hidden] { display: none; }
.card__want ~ .card__photos { top: 36px; }
.card__cover--want { background: linear-gradient(135deg, #eef0ff, #e1e6fd); color: #3d4bc4; }
.card__media > .card__cover--want { padding-top: 38px; }
.badge-want { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 9px; border-radius: 999px; background: var(--brand); color: #fff; font-size: .84rem; font-weight: 700; line-height: 1.2; }
.badge-want .icon { width: 14px; height: 14px; }
.badge-want--sm { font-size: .72rem; padding: 2px 8px; }
.listing__want { margin: 10px 0 0; }
/* «Бюджет» — подписью над суммой: крупной остаётся сама сумма «до 25 000 ฿ в месяц». */
.listing__budget { display: block; margin-bottom: 2px; font-size: var(--fs-13); font-weight: 600; letter-spacing: .02em; color: var(--muted); }
/* Подача: первый выбор «Предлагаю / Ищу» (решение владельца 23.10.2026: «очень маленьким») — одна строка под «Городом
   объявления», без карточки: вид — как переключатель «Пошагово / Всё на одном экране», только меньше (34 px). Пальцу —
   44 px: невидимое поле касания над и под кнопкой (::after у label). Без JavaScript — те же радиокнопки. */
.wanted-choice { margin: 0 0 14px; }
.wanted-choice[hidden] { display: none; }
.wanted-choice__options { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #e9ecf2; max-width: 100%; vertical-align: top; }
.wanted-choice__item { position: relative; display: flex; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wanted-choice__item::after { content: ""; position: absolute; inset: -8px -1px; }
.wanted-choice__item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wanted-choice__item span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border-radius: 999px; color: var(--text-2); font-size: var(--fs-13); font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.wanted-choice__item input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(22, 26, 60, .08), 0 2px 8px rgba(22, 26, 60, .06); }
.wanted-choice__item input:focus-visible + span { box-shadow: var(--focus); }
@media (hover: hover) and (pointer: fine) { .wanted-choice__item input:not(:checked):hover + span { color: var(--text); } }
@media (prefers-reduced-motion: reduce) { .wanted-choice__item span { transition: none; } }
.wanted-choice__question { margin: 12px 0 0; }