/* Luk — собственные стили без внешних зависимостей. Мобильная раскладка — основная, desktop дополняет её.
   Иконки — спрайт Lucide (static/luk/icons.svg, ISC). */
:root {
  --bg: #f4f5f7;
  --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;
}
@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; }
a:hover { color: var(--primary-dark); }
h1 { font-size: 1.55rem; margin: .1em 0 .55em; line-height: 1.2; letter-spacing: -.015em; font-weight: 750; }
h2 { font-size: 1.2rem; margin: 1.3em 0 .6em; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
h3 { font-size: 1.02rem; margin: .8em 0 .4em; font-weight: 650; }
.panel > h2:first-child, .panel > h1:first-child { margin-top: 0; }
@media (min-width: 900px) { h1 { font-size: 1.85rem; } h2 { font-size: 1.3rem; } }
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: 6px; }

/* Шапка */
.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; }
.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; }
.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; }
.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; }
.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; }
.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], 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; }
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: .9rem; 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: 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; }
.btn:hover { background: #e4e7eb; color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; }
.btn--ghost { background: #fff; border-color: var(--line-strong); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); border-color: #bfc5ce; }
.btn--soft { background: var(--primary-soft); color: var(--primary-dark); }
.btn--soft:hover { background: #d9eaff; color: var(--primary-dark); }
.btn--danger { background: #fff; border-color: #f1c3be; color: var(--danger); }
.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; }
.btn--link:hover { background: none; color: var(--primary-dark); text-decoration: underline; }
.btn--small { min-height: 34px; padding: 6px 12px; font-size: .85rem; border-radius: 10px; }
.btn--large { min-height: 52px; padding: 12px 22px; font-size: 1.02rem; border-radius: 14px; }
.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: 6px; font-size: .92rem; color: var(--text-2); }
.field__hint { display: block; color: var(--muted); font-size: .84rem; margin-top: 5px; }
.field__error { display: block; color: var(--danger); font-size: .86rem; margin-top: 5px; font-weight: 500; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--danger); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 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: 10px; 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: .92rem; }
.panel { background: var(--surface); border-radius: var(--radius-lg); 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: 10px; }
.auth { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px 24px; }
@media (min-width: 600px) { .auth { padding: 36px 36px 32px; margin-top: 24px; } }
.auth h1 { font-size: 1.6rem; }
.auth__lead { color: var(--muted); margin-bottom: 20px; }
/* Один вход для всех (ADR 0012): Google, Telegram и почта — равные кнопки одного вида; поле почты раскрывает кнопка
   почты (<details>, без JavaScript). */
.auth__methods { display: grid; gap: 10px; 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: 14px; }
.auth__methods ~ .muted.small { margin: 0 0 10px; }
.auth__consent { margin: 14px 0 0; }
.btn--provider { background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); font-weight: 650; gap: 10px; }
.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: 10px 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: .88rem; 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: .85rem; overflow-wrap: anywhere; }  /* номер Telegram (ADR 0017) */
.auth__divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; margin: 16px 0; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth__foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .92rem; }
/* «Запросить письмо ещё раз» — кнопка формы (выход из незавершённого входа), но в тексте выглядит как ссылка. */
.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: 6px; }
/* «Это моё объявление» (ADR 0017): автор перенесённого объявления подтверждает авторство через Telegram. Узкая карточка
   входа; сверху — само объявление; галочка рисуется SVG-обводкой, при prefers-reduced-motion — сразу готовой. */
.claim__listing { display: flex; align-items: center; gap: 12px; padding: 10px; margin: -6px 0 20px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.claim__listing:hover { background: var(--surface-2); }
.claim__cover { width: 52px; height: 52px; border-radius: 10px; 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: 10px 0 0; }
.claim__done { text-align: center; }
.claim__done .auth__lead { margin-bottom: 22px; }
.claim__done .claim__note { margin: -10px 0 22px; }  /* «Ещё N ваших объявлений пока здесь…» */
.claim__icon { width: 64px; height: 64px; margin: 4px auto 14px; 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 14px; 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: 1.05rem; line-height: 1.35; margin: 4px 0 14px; }
.claim__retry { margin-top: 10px; }
.claim__contact { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 16px; }
.claim__contact p { margin: 0 0 6px; overflow-wrap: anywhere; }
.claim__contact form { margin: 10px 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 14px; align-items: center; }
.claim-hint__actions form { margin: 0; }
.claim-found { display: grid; gap: 10px; margin: 0 0 16px; }
.claim-found__item { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--surface); border-radius: var(--radius); 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: 10px; 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: 6px; max-width: 100%; margin: 0 0 10px; padding: 6px 13px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: .85rem; font-weight: 600; line-height: 1.25; text-decoration: none; }
.claim-pill .icon { width: 15px; height: 15px; flex: none; color: var(--muted); }
.claim-pill:hover { border-color: var(--line-strong); color: var(--text); }
.listing__buy .listing__safety { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .8rem; }
.listing__safety .icon { width: 16px; height: 16px; flex: none; }
/* Страница автора: «Забрать себе» и «Удалить с Luk» — два равных пути с пояснением под кнопкой; «ещё объявления» —
   отдельно, под чертой. */
.claim__option { margin: 0 0 14px; }
.claim__option--remove { margin-top: 14px; }  /* и после кнопок входа (шаг входа, Telegram привязан к аккаунту) */
.claim__option form { margin: 0; }
.claim__option .claim__note { margin: 8px 0 0; text-align: center; }
.claim__more { margin-top: 22px; 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: 10px; }
.claim__more-actions form { flex: 1 1 140px; margin: 0; }
.claim__more-actions .btn { width: 100%; }
.flash { margin-bottom: 14px; display: grid; gap: 8px; }
.flash__item { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); 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(--radius); background: var(--warn-bg); color: #6b4700; margin: 0 0 16px; border: 1px solid #f5e0a8; }
.notice p:last-child { margin-bottom: 0; }
.notice form { margin: 10px 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__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); }
.footer a:hover { color: var(--text); }
.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: 10px; color: var(--text-2); font-weight: 600; font-size: .92rem; 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; } .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: .88rem; margin-top: -4px; }
.legal__lead { font-size: 1.05rem; color: var(--text); }
.legal__toc { background: var(--surface-2); border-radius: var(--radius); 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); }
.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; } }
.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; }
.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; }
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip--active, .chip--active:hover { background: var(--text); color: #fff; border-color: var(--text); }
.breadcrumbs { font-size: .86rem; color: var(--muted); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs__sep { color: #b3b9c2; }

/* Карточки выдачи */
.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; }
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.card__link { color: inherit; display: flex; flex-direction: column; flex: 1; }
.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; }
@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; }
.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(--radius-lg); box-shadow: var(--shadow); }
.empty__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; 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: 1.1rem; margin-bottom: 4px; }
.empty .btn { margin-top: 14px; }
.empty h1 { font-size: 1.4rem; 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(--radius-lg); box-shadow: var(--shadow); padding: 18px; }
@media (min-width: 960px) { .filters { position: sticky; top: calc(var(--header-h) + 16px); } }
.filters .field { margin-bottom: 14px; }
.filters__toggle { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-weight: 650; }
.filters__toggle::-webkit-details-marker { display: none; }
.filters__count { background: var(--primary); color: #fff; border-radius: 10px; font-size: .75rem; padding: 1px 7px; margin-left: 6px; }
.filters__body { margin-top: 14px; }
.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: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.results-bar__count { color: var(--muted); font-size: .92rem; }
.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: 6px; }
.listing__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: .9rem; margin: 0 0 4px; }
.listing__meta span { display: inline-flex; align-items: center; gap: 6px; }
.listing__badges { margin: 4px 0 14px; }
.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: 14px; }
.listing__seller-role { margin: 0; font-size: .78rem; 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: 3px; min-width: 0; }
.seller__info .seller__name { font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.seller__fact { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .88rem; }
.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(--radius-lg); box-shadow: var(--shadow); padding: 10px; margin-bottom: 16px; }
.gallery__stage { position: relative; border-radius: var(--radius); overflow: hidden; background: #111418; }
.gallery__main { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #111418; cursor: zoom-in; }
.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__counter { position: absolute; right: 12px; bottom: 12px; background: rgba(15, 18, 24, .62); color: #fff; font-size: .8rem; font-weight: 600; padding: 3px 9px; border-radius: 10px; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: thin; }
.gallery__thumb { width: 84px; height: 63px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; flex: none; opacity: .75; transition: opacity .15s; }
.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; }
.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: .9rem; }
.listing__price { font-size: 1.75rem; font-weight: 850; margin: 0 0 4px; letter-spacing: -.02em; }
.listing__sub { color: var(--muted); font-size: .88rem; margin-bottom: 16px; }
.listing__desc { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; 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); }
.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); }
.avatar-pick:hover .avatar-pick__badge { background: var(--brand-dark, var(--primary-dark)); }
.side-actions { display: grid; gap: 10px; }
.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: 10px; padding: 10px 12px; }
.qr svg { width: 140px; height: 140px; margin-top: 8px; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 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: 10px; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.safety .icon { color: #9aa1ab; margin-top: 2px; }
.listing-report { margin-top: 4px; font-size: .9rem; }
.listing-report a { color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.listing-report a:hover { color: var(--danger); }
/* Недвижимость (ADR 0020): строка для покупателя у «Пожаловаться» и жёлтая плашка в форме объявления. */
.listing-report__bait { margin: 2px 0 0; font-size: .9rem; 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: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius); background: #fff1b8; border: 1px solid #f0c94a; color: #4f3a00; font-size: .95rem; 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: 10px; align-items: flex-start; }
.bait-check__head .icon { color: #b07a00; width: 24px; height: 24px; margin-top: 2px; }
.bait-check__head h2 { margin: 0 0 6px; font-size: 1.1rem; }
.bait-check__deadline { margin: 4px 0 10px; }
.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(--radius); 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: 1.15rem; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-sm); 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(--radius-sm); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: .8rem; 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: 6px; }
.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(--radius-sm); }
.bait-proofs--small img { width: 72px; height: 72px; object-fit: cover; }
.bait-history__row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.bait-history__row--proven { border-left: 3px solid var(--danger); padding-left: 10px; }
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: 6px; margin-top: 6px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: .8rem; font-weight: 650; 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: 14px; flex-wrap: wrap; color: var(--muted); font-size: .92rem; }
.profile-stats b { color: var(--text); font-size: 1.05rem; }

/* Мои объявления */
.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: 10px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.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: 10px; padding: 0 7px; font-size: .78rem; }
.quota { display: flex; align-items: center; gap: 12px; }
.quota__bar { flex: 1; height: 6px; background: #eef0f3; border-radius: 3px; overflow: hidden; min-width: 120px; }
.quota__fill { height: 100%; background: var(--accent); border-radius: 3px; }
.mine { display: grid; gap: 10px; }
.mine__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; align-items: center; color: var(--text); }
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: 10px; 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: 650; margin-bottom: 2px; overflow-wrap: anywhere; }
.mine__price { font-weight: 750; }
.mine__meta { color: var(--muted); font-size: .84rem; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.mine__go { display: none; color: #9aa1ab; }
@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: 1.35rem; 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: 10px; 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: .8rem; font-weight: 800; flex: none; }
/* Кнопки «Опубликовать» и «Сохранить» — в конце формы и на телефоне: закреплённая внизу полоса занимала четверть
   экрана над нижней панелью и мешала заполнять объявление (владелец, 30.09.2026). */
.editor__actions { display: flex; gap: 10px; 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: 10px; 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: 10px; background: #e9ecf1; display: flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--muted); text-align: center; padding: 4px; }
img.photo__img { padding: 0; }
.photo__img[data-processing] { 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: 6px; }
.photo__bar button { flex: 1; min-height: 30px; padding: 2px 4px; font-size: .8rem; }
.photo__cover { position: absolute; top: 6px; left: 6px; font-size: .7rem; color: #fff; font-weight: 700; background: var(--accent); padding: 2px 7px; border-radius: 8px; 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: .72rem; font-weight: 650; color: #fff; background: rgba(22, 24, 29, .72); border-radius: 8px; padding: 3px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo.is-uploading .photo__img, .photo.is-processing .photo__img { opacity: .65; }
.photo.is-uploading .photo__state::before, .photo.is-processing .photo__state::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; 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(--radius); padding: 16px; text-align: center; background: var(--surface-2); display: grid; gap: 10px; justify-items: center; color: var(--muted); margin: 12px 0; }
.upload.is-dragover { border-color: var(--primary); background: var(--primary-soft); }
.upload__buttons { display: flex; gap: 10px; 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(--radius); padding: 10px 14px; 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 14px; }
.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: 20px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: .92rem; }
.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: 10px; }
.editor__more > summary::-webkit-details-marker { display: none; }
.editor__more > summary::after { content: "Показать"; margin-left: auto; color: var(--primary); font-weight: 600; font-size: .9rem; }
.editor__more[open] > summary { margin-bottom: 14px; }
.editor__more[open] > summary::after { content: "Скрыть"; }
.editor__more .editor__section-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.question { display: grid; gap: 4px; }
.question .actions { margin-top: 6px; }
.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: 1.1rem; }
.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: 1rem; color: var(--muted); font-weight: 650; }
.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: 8px; }

/* Direct */
.inbox { display: grid; background: var(--surface); border-radius: var(--radius-lg); 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; }
.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: .86rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.inbox__cover { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #e9ecf1; }
.inbox__preview { color: var(--text-2); font-size: .9rem; 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: .78rem; white-space: nowrap; }
/* Телефон: «сегодня в 20:28» в две строки — название и последнее сообщение не обрезаются до пары слов (30.09.2026) */
@media (max-width: 599px) { .inbox__item { gap: 10px; padding: 12px 14px; } .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(--radius-lg); 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: 10px; align-items: center; min-width: 0; }
.chat__who a, .chat__who strong { color: var(--text); font-weight: 700; }
.chat__listing { display: flex; gap: 10px; align-items: center; color: var(--text); min-width: 0; flex: 1; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); }
a.chat__listing:hover { color: var(--text); background: #eef1f5; }
.chat__listing img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.chat__listing > span { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.chat__tools { display: flex; gap: 6px; 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: 6px; overflow-y: auto; max-height: 62vh; min-height: 320px; background: #f6f8fb; }
.msg { max-width: 80%; padding: 8px 12px 6px; border-radius: 16px 16px 16px 6px; 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: 16px 16px 6px 16px; }
@media (min-width: 900px) { .msg { max-width: 64%; } }
.msg__meta { display: block; font-size: .7rem; 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: 10px 12px; display: flex; gap: 8px; align-items: flex-end; background: var(--surface); }
.chat__compose textarea { min-height: 46px; max-height: 180px; border-radius: 22px; padding: 11px 16px; resize: none; }
.chat__compose .btn { border-radius: 22px; min-height: 46px; }
.chat__state { padding: 14px 16px; border-top: 1px solid var(--line); color: var(--muted); background: var(--surface-2); }
.chat__note { color: var(--muted); font-size: .84rem; margin-top: 12px; display: flex; gap: 8px; }
.notifications { display: grid; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.notification { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.notification:last-child { border-bottom: 0; }
.notification__icon { width: 40px; height: 40px; border-radius: 12px; 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; }
.notification__text a:hover { color: var(--primary); }
.notification__time { color: var(--muted); font-size: .8rem; margin-top: 2px; }

/* Настройки и аккаунт */
.account-head { display: flex; gap: 14px; align-items: center; }
.account-head__text { flex: 1; min-width: 0; overflow-wrap: anywhere; } /* длинное имя переносится внутри карточки */
.account-head__name { margin: 0; font-size: 1.2rem; font-weight: 750; 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: 13px 4px; color: var(--text); border-bottom: 1px solid var(--line); font-weight: 550; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; cursor: pointer; text-align: left; font-size: 1rem; }
.menu-list li:last-child a, .menu-list li:last-child button { border-bottom: 0; }
.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: 14px; 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 14px; }
  .cabinet__menu { gap: 2px; }
  .cabinet__menu a { padding: 10px 8px; border-bottom: 0; border-radius: 12px; font-size: .95rem; }
  .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 3px; } /* строка — до краёв экрана */
  .cabinet--section .cabinet__menu::-webkit-scrollbar { display: none; }
  .cabinet--section .cabinet__menu li { flex: none; }
  .cabinet--section .cabinet__menu a { width: auto; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9rem; 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 3px; } }

/* Статические страницы */
.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: 14px; align-items: flex-start; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 18px; color: var(--text); }
.staff-tile:hover { color: var(--text); box-shadow: var(--shadow-lg); }
.staff-tile__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.staff-tile b { display: block; font-size: 1.02rem; }
.staff-tile span { color: var(--muted); font-size: .88rem; }
.staff-bar { background: #1c2230; color: #d7dce5; font-size: .82rem; }
.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:10px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.import-photo img { width:100px; height:80px; object-fit:cover; border-radius: 8px; }
.import-photo__state { display:inline-flex; align-items:center; justify-content:center; width:100px; height:80px; background:var(--bg); color:var(--muted); border-radius:8px; font-size:12px; 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: 6px; font-weight: 600; font-size: .92rem; color: var(--text-2); }
.team-member { display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; padding:14px 0; border-bottom:1px solid var(--line); }
.team-member:last-child { border-bottom: 0; }
.team-roles form { display:inline-flex; gap:6px; align-items:center; margin:0 12px 6px 0; }
.role-tag { display:inline-flex; align-items: center; padding:2px 9px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); font-size:.8rem; font-weight: 600; color: var(--text-2); }
[data-telegram-issued] ol { padding-left:20px; }
[data-telegram-issued] li { margin:10px 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: 650; margin-bottom: 8px; }
.report-form__mine { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; }
.report-messages { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.report-message { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; 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: 650; }
.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: 6px; margin: 8px 0; }
.evidence__msg { padding: 8px 10px; border-radius: 10px; 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 10px; background: var(--bg); border-radius: 10px; 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 -10px; padding: 12px 10px; border-radius: 10px; border-bottom: 0; }
.case-row__overdue { color: var(--warn); font-weight: 650; }
.case-question { padding: 10px 12px; border-radius: 10px; 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: 12px; padding: 12px; }
.mod-stat b { display: block; font-size: 1.4rem; }
.mod-stat span { color: var(--muted); font-size: .85rem; }
.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: 8px; background: var(--bg); }
.secret-line { display: block; font-family: ui-monospace, monospace; word-break: break-all; padding: 10px 12px; background: var(--bg); border-radius: 10px; 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: 8px; }
.msg__actions > summary::-webkit-details-marker { display: none; }
.msg__actions > summary:hover { background: rgba(0, 0, 0, .05); }
.msg__menu { display: grid; gap: 8px; margin-top: 4px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; text-align: left; box-shadow: var(--shadow-lg); }
.msg__menu form { margin: 0; }
.msg__edit { display: grid; gap: 4px; margin-bottom: 6px; }
.msg__edit textarea { width: 100%; min-height: 72px; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }

/* Входы и устройства */
.session-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 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: 12px; 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: 6px; }
.chat__latest { padding: 8px 14px; 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-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: 4px; }
meter.quota__meter::-webkit-meter-bar { background: #eef0f3; border: 0; border-radius: 4px; height: 8px; }
meter.quota__meter::-webkit-meter-optimum-value { background: var(--accent); border-radius: 4px; }
meter.quota__meter::-moz-meter-bar { background: var(--accent); border-radius: 4px; }
/* Телефон: фото → цена и кнопки → описание → продавец. Компьютер: справа цена и продавец в одной липкой колонке. */
.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: 10px 14px; } }
.actions--center { justify-content: center; }
.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:hover .icon, .topnav__link[aria-current="page"] .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: 6px 9px; }
}
@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; }
.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: 12px; 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; }
.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: .86rem; padding: 7px 0; }
.dev-bar .wrap { display: flex; gap: 8px; align-items: center; }
.dev-bar code { background: rgba(0, 0, 0, .06); padding: 1px 6px; border-radius: 6px; }

/* Фото: понятная причина и действие */
.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: 6px 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--primary-soft); color: #0b4fa3; font-size: .88rem; }
.photo-problems__item--error { background: var(--danger-soft); color: #a3261d; }
.photo-problems__actions { display: inline-flex; gap: 6px; 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: 10px 12px; border-radius: var(--radius-sm); font-size: .9rem; 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: 10px; width: 100%; min-height: 50px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.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: 12px; }
.catpick__value { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.catpick__name { font-weight: 650; }
.catpick__section { color: var(--muted); font-size: .88rem; }
.catpick__section::before { content: "· "; }
.catpick__placeholder { color: var(--muted); }
.catpick__action { color: var(--primary); font-weight: 600; font-size: .92rem; 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: 6px; border: 1px solid var(--line); border-radius: 14px; 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: 13px 0; flex: 1; min-width: 0; background: none; font-size: 1rem; }
.catpick__list { position: relative; max-height: min(380px, 55vh); overflow-y: auto; padding: 4px 6px 6px; overscroll-behavior: contain; }
.catpick__group-name { padding: 10px 10px 4px; color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.catpick__option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.catpick__option:hover, .catpick__option.is-active { background: var(--primary-soft); }
.catpick__option.is-current { font-weight: 650; 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: 6px; padding-top: 4px; }
.catpick__group--other .catpick__option { color: var(--text-2); }
.catpick__empty { padding: 12px; margin: 0; color: var(--muted); font-size: .92rem; }
.catpick__auto { margin: 8px 0 0; padding: 7px 12px; font-size: .9rem; }

/* ==============================================================================================================
   Идентичность 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); }
.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], select, textarea { border-radius: 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
.chip { border-radius: 999px; }
.chip--active, .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); }
.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; }
.search__btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--brand-gradient); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(74, 94, 240, .3); }
.search__btn:hover { filter: brightness(1.08); }
.search__btn .icon { width: 18px; height: 18px; }
.sell-btn.btn { background: var(--brand-gradient); border-radius: 999px; box-shadow: 0 6px 16px rgba(74, 94, 240, .3); font-weight: 650; }
.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); }
  .topnav__link--icon:hover { background: var(--brand-soft); }
  .topnav__link--icon:hover .icon, .topnav__link--icon[aria-current="page"] .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); }
.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; }
.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; }
.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; }
.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); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.card__media { border-radius: 15px; overflow: hidden; }
.card__cover { transition: transform .35s ease; }
.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; } }
.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: 34px; font-size: 1.05rem; 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; }
.price-field__unit { flex: 0 1 auto; width: auto; min-width: 128px; }
.price-field__suffix { align-self: center; color: var(--text-2); font-weight: 600; }
/* Способ связи в объявлении: сообщения в Luk и дополнительный контакт по желанию */
.reach { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.reach__row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 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: .9rem; margin-top: 3px; }
.reach__choices { margin: 10px 0 4px; }
.reach__state { margin: 8px 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-size: .9rem; color: var(--text-2); }
.reach__state[data-contacts-state="shown"] { background: var(--accent-soft); color: #0c5f36; }
.reach__link { font-size: .9rem; 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__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 .subcats--bar { display: none; } /* телефон: подкатегории — во второй строке заголовка */

.catalog .filters { background: none; box-shadow: none; padding: 0; border-radius: 0; position: static; }
.catalog .filters__body { margin-top: 10px; }
.filters__price-hint { display: none; }
html.catalog-page .catalog__panel:not(.is-sheet) .filters__price-hint { display: block; }
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; }
.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); }
.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: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
  /* липкая панель — всегда под шапкой и компактной строкой: её отступ не меняется, когда строка появляется */
  .catalog__side { grid-column: 1; position: sticky; top: calc(var(--topbar-h) + var(--compact-bar) + 12px); max-height: calc(100vh - var(--topbar-h) - var(--compact-bar) - 24px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 20px; padding: 14px; box-shadow: var(--shadow); }
  .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: repeat(5, 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; }
.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__side .subcats--panel { display: none; }
  .catalog__head .subcats--bar { grid-area: rest; display: flex; flex-direction: row; 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 .filters { flex: 1; overflow-y: auto; padding: 4px 16px 0; }
  .catalog__panel.is-sheet .filters__toggle { display: none; }
  .catalog__panel.is-sheet .filters__actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  body.sheet-open { overflow: hidden; }
}
@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; }
.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: 6px; }
.msg__good { display: block; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); font-size: .84rem; color: var(--text-2); }
.compose__goods { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.compose__target { padding: 10px 12px; border-radius: var(--radius); background: var(--primary-soft); color: var(--text); font-size: .92rem; }
.compose__offer { font-size: .92rem; }
.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: 6px 0 0; font-size: .88rem; color: var(--text-2); }
.cartgroup { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px; margin-bottom: 16px; }
.cartgroup__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cartgroup__who { display: flex; flex-direction: column; min-width: 0; }
.cartgroup__name { font-size: 1.05rem; margin: 0; }
.cartgroup__name a { color: var(--text); }
.cartgroup__lines { list-style: none; margin: 0; padding: 0; }
.cartline { display: flex; align-items: center; gap: 10px; padding: 10px 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: 10px; flex: 1; min-width: 0; color: var(--text); }
.cartline__item img, .cartline__noimg { width: 56px; height: 56px; border-radius: 10px; 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: .84rem; color: var(--muted); }
.cartline__was--down { color: var(--ok); }
.cartline__talk { font-size: .82rem; color: var(--primary-dark); font-weight: 600; }
.cartline__actions { display: flex; gap: 6px; 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: .9rem; 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: 30px; }
  .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:hover, .citypick__panel a[aria-current="true"] { 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: 14px; }
.imp-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; color: var(--text-2); font-weight: 600; font-size: .9rem; }
.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: 1.45rem; }
.imp-head p { margin: 0 0 14px; max-width: 900px; }
.imp-tabs { display: flex; gap: 6px; 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 14px; border-radius: 12px; 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: .78rem; padding: 1px 7px; 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 10px; align-items: end; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 12px; margin-bottom: 12px; }
.imp-filters label { display: grid; gap: 3px; font-size: .8rem; 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: 12px; background: var(--surface); font: inherit; color: var(--text); }
.imp-filters__q { grid-column: span 2; }
.imp-filters__actions { display: flex; gap: 6px; }
@media (max-width: 599px) { .imp-filters__q { grid-column: auto; } }
.imp-publish-all { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: var(--accent-soft); color: var(--ok); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 10px; }
.imp-publish-all span { display: inline-flex; gap: 6px; align-items: center; }
.imp-bulk { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--bg); padding: 6px 0 10px; }
.imp-check { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; font-size: .9rem; }
.imp-bulk__source { display: inline-flex; gap: 6px; }
.imp-bulk__source select { max-width: 180px; }
.imp-table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin-bottom: 14px; }
.imp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.imp-table th, .imp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.imp-table thead th { font-size: .78rem; color: var(--muted); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.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: 10px; 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: 8px; 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: .72rem; padding: 1px 7px; 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: .76rem; font-weight: 650; padding: 2px 9px; 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: .76rem; color: var(--text-2); margin-top: 2px; }
.imp-itembar .imp-why { display: inline; margin: 0; }
.imp-processing-line { display: flex; gap: 6px; align-items: center; color: var(--text-2); font-size: .88rem; margin: -4px 0 10px; }
.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: 6px; background: var(--surface); border-radius: var(--radius); 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: 10px 12px; align-items: flex-end; }
.imp-access-add label { display: grid; gap: 4px; flex: 1 1 220px; }
.imp-access-add label span { font-size: .8rem; 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(--radius-lg); box-shadow: var(--shadow); padding: 10px 14px; 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: 750; font-size: 1.1rem; }
.imp-itembar__nav { display: inline-flex; gap: 4px; }
.imp-itembar__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.imp-reasons { display: grid; gap: 6px; margin-bottom: 10px; }
.imp-reason { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; border-radius: var(--radius); padding: 10px 14px; 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: .88rem; }
.imp-warning { display: flex; gap: 6px; align-items: flex-start; color: var(--text-2); font-size: .88rem; margin: 0 0 6px; }
.imp-processing { display: flex; gap: 8px; align-items: center; }
.imp-assign select { max-width: 260px; }
.imp-panes { display: grid; gap: 14px; 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(--radius-lg); box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.imp-pane h2 { font-size: 1.02rem; 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: .88rem; 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(--radius); padding: 12px; font-size: .92rem; line-height: 1.45; overflow-wrap: anywhere; margin-bottom: 10px; }
.imp-media { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.imp-media img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; }
.imp-media__state { font-size: .8rem; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.imp-details summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.imp-log { font-size: .8rem; padding-left: 18px; color: var(--text-2); }
.imp-log--error { color: var(--danger); } .imp-log--retry, .imp-log--warn { color: var(--warn); }
.imp-form { display: grid; gap: 10px; }
.imp-form label { display: grid; gap: 4px; font-size: .85rem; 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: 6px 10px; align-items: center; margin: 6px 0 0; }  /* ADR 0017 */
.imp-form--narrow { max-width: 720px; }
.imp-row2 { display: grid; gap: 10px; 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: 650; }
.comm-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; 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: .8rem; 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: .85rem; color: var(--muted); margin-bottom: 6px; }
.imp-photos [data-photos] { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-photo { width: 118px; display: grid; gap: 4px; font-size: .78rem; }
.imp-photo img { width: 118px; height: 88px; object-fit: cover; border-radius: 8px; }
.imp-photo label { display: flex; gap: 4px; color: var(--text-2); font-size: .78rem; }
.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: .95rem; margin: 0 0 8px; }
.imp-dup { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 0; font-size: .88rem; }
.imp-dup > span { flex: 1; min-width: 0; }
.imp-preview-switch { display: flex; gap: 6px; margin-bottom: 10px; }
.imp-frame-wrap { overflow: auto; background: var(--bg); border-radius: var(--radius); 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: .78rem; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); }
.imp-modes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.imp-matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.imp-matrix th, .imp-matrix td { padding: 0; border-bottom: 1px solid var(--line); text-align: center; }
.imp-matrix thead th { padding: 10px 12px; font-size: .88rem; 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: 10px 12px; font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--surface); }
.imp-matrix tbody th .icon { margin-right: 6px; color: var(--muted); }
.imp-matrix tfoot td { padding: 10px 12px; }
.imp-cell a { display: block; padding: 10px 12px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 650; }
.imp-cell a:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.imp-cell__pipe { display: block; font-size: .72rem; 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 10px; font-size: 1.05rem; }
.preview-body { background: var(--bg); }
.preview-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 8px 0; }
.preview-card { grid-template-columns: minmax(0, 260px); margin-bottom: 18px; }

/* Компании (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: 6px 0; }
.slug-field { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); 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: .92rem; 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: 10px; align-items: center; min-width: 0; }
.move-list__item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.mode-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 14px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); max-width: 100%; overflow-x: auto; }
.mode-switch__item { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 8px 14px; border-radius: 10px; font: inherit; font-weight: 600; font-size: .9rem; 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: 6px; margin: 0 12px 6px 0; cursor: pointer; font-size: .92rem; }
.catalog__head .zoneform { display: flex; gap: 6px; flex-wrap: wrap; }
.owner-choice .check { margin: 8px 0; }
.chat__as { margin-bottom: 10px; }
.notification__company { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.qr-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }
.qr-sheet { background: #fff; color: #111; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px 20px; max-width: 520px; margin: 0 auto 16px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.qr-sheet__head { display: flex; gap: 14px; align-items: center; text-align: left; }
.qr-sheet__name { margin: 0; font-size: 1.5rem; }
.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: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.qr-sheet__brand { margin: 4px 0 0; color: #777; font-size: .85rem; }
@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 { display: block; margin: -6px 0 18px; padding: 10px 14px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; font-size: .95rem; 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 10px; }
.install__variant > .btn { margin-bottom: 8px; }
.install__title { font-weight: 650; }
.install__steps { list-style: none; counter-reset: step; margin: 0 0 4px; padding: 0; display: grid; gap: 14px; }
.install__steps li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 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: .88rem; display: flex; align-items: center; justify-content: center; }
.install__text { font-size: .95rem; 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: 12px; color: #0a84ff; }
.pic-key { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; }
.pic-or { color: var(--muted); font-size: .8rem; }
.pic-row { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; width: min(240px, 100%); padding: 9px 14px; color: var(--text); font-weight: 550; font-size: .92rem; }
.pic-row .icon { color: var(--text-2); }
.pic-head { display: inline-flex; justify-content: space-between; gap: 32px; width: min(240px, 100%); padding: 9px 14px; font-size: .92rem; }
.pic-address { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: min(240px, 100%); padding: 7px 12px; border-radius: 999px; color: var(--muted); font-size: .88rem; }
.pic-address .icon { color: #0a84ff; }

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

/* Страница «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: 10px; }
.app-page__facts li { display: flex; gap: 10px; 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; }
.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; }
.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; }
.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(--radius); 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(--radius); 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: 650; font-size: .9rem; 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: 1rem; margin: 20px 0 4px; }
.brand--inline { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--text-2); }
/* «Возможности компании» (luk/companies/benefits.py). */
.benefits__title { font-weight: 700; font-size: 1.05rem; 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: 12px; 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: .92rem; }
.benefits--compact .benefits__icon { width: 30px; height: 30px; border-radius: 10px; }
.benefits--compact .benefits__item strong { font-weight: 600; }
[data-settings-company] .benefits { margin: 4px 0 16px; }
.benefits-details > summary { cursor: pointer; font-weight: 650; list-style-position: inside; }
.benefits-details[open] > summary { margin-bottom: 14px; }
@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(--radius); background: var(--surface-2); color: var(--text); }
.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: 10px; 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: 10px; margin-bottom: 14px; }
.src-kpi { display: grid; gap: 2px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 12px 16px; font-size: .95rem; }
.src-kpi__label { color: var(--muted); font-size: .8rem; font-weight: 600; }
.src-kpi b { font-size: 1.15rem; }
.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 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: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.src-help summary { cursor: pointer; }
.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: 550; font-size: .92rem; 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 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.src-url { margin: 0 0 8px; }
.src-url code { display: block; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; font-size: .88rem; overflow-wrap: anywhere; user-select: all; }
.src-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.src-qr { background: #fff; border-radius: 12px; 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): кнопка владельца, окно с готовым текстом (на телефоне — лист снизу, над нижней панелью
   и полосой «Домой») и подсказка со стрелкой на кнопку. Подсказка — в потоке страницы, а не поверх: не закрывает
   содержимое и не уходит под нижнюю панель. */
.tgshare { margin: 12px 0; }
.tgshare__row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.tgshare.is-hinted .tgshare__note { display: none; }  /* стрелка подсказки смотрит прямо на кнопку */
.owner-note .tgshare { margin: 10px 0 0; }
.owner-note .tgshare__open { min-height: 38px; padding: 6px 14px; }
.coach { position: relative; margin: 14px 0 4px; max-width: 440px; padding: 14px 48px 14px 16px; background: #1d2433; color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: coach-in .22s ease-out; }
.coach__arrow { position: absolute; top: -7px; left: var(--arrow-x, 48px); width: 14px; height: 14px; margin-left: -7px; background: #1d2433; transform: rotate(45deg); border-radius: 2px; }
.coach__title { margin: 0 0 4px; font-weight: 700; font-size: 1.02rem; }
.coach__text { margin: 0 0 12px; font-size: .93rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.coach__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.coach__copy { background: #fff; color: #1d2433; }
.coach__copy:hover { background: #eef0f3; color: #1d2433; }
.coach__ok { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.coach__ok:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.coach__close { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .78); cursor: pointer; }
.coach__close:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.coach :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes coach-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .coach { animation: none; } }
.tgsheet { border: 0; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); border-radius: var(--radius-lg); 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: 1.15rem; }
.tgsheet__lead { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.45; }
.tgsheet__text { display: block; width: 100%; min-height: 160px; max-height: 44vh; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); 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: .9rem; }
.tgsheet__status:empty { min-height: 0; }
@media (max-width: 599px) {
  .tgsheet { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92vh; max-height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 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 6px 19px; padding: 0 0 0 12px; border-left: 1px solid var(--line); }
  .cabinet__menu .cabinet__sub a { padding: 7px 10px; font-size: .9rem; font-weight: 500; color: var(--text-2); border-radius: 10px; }
  .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: 650; }
  .cabinet__menu a.is-parent { color: var(--brand-dark); font-weight: 650; }
  .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; }
.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: 1.02rem; font-weight: 650; margin: 0 0 4px; letter-spacing: -.005em; }
.sgroup__title + .field, .sgroup__title + fieldset.field { margin-top: 12px; }
.sgroup__lead { color: var(--muted); font-size: .9rem; margin: 0 0 14px; 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: 10px; align-items: center; padding: 18px 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: .84rem; 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: 6px; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: .74rem; font-weight: 650; vertical-align: 1px; white-space: nowrap; }
.pending-tag .icon { width: 12px; height: 12px; }
.btn--link.btn--quiet { color: var(--muted); font-weight: 550; font-size: .9rem; padding: 8px 4px; }
.btn--link.btn--quiet:hover { color: var(--danger); text-decoration: none; }

/* Свёрнутое: длинные подсказки, полный список преимуществ, необязательное при создании */
.sdetails > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.sdetails > summary::-webkit-details-marker { display: none; }
.sdetails__go { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--brand-dark); font-weight: 600; font-size: .88rem; 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: 10px; }
/* Подсказка «Подробнее» внутри своего блока, без отдельной строки (владелец 01.10.2026) */
.hint-more { display: inline; }
.hint-more > summary { display: inline; list-style: none; cursor: pointer; color: var(--brand-dark); font-size: .88rem; font-weight: 550; white-space: nowrap; }
.hint-more > summary::-webkit-details-marker { display: none; }
.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: 550; }
.sdetails--group[open] > summary { margin-bottom: 14px; }
.perk-chosen { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.perk-chosen:empty { display: none; }
.perk-chosen .store-perk { font-size: .8rem; padding: 4px 10px; }
.sdetails .perk-group { margin-top: 10px; }

/* Обзор: карточка компании с одной «Поделиться» */
.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(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: grid; }
.pop__panel a, .pop__panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.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 6px; }

/* Обзор: объявления и сообщения компании */
.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; }
.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: 10px 0 14px; 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; }
.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: 13px 0; color: var(--text); }
.srow:hover { color: var(--text); }
.srow:hover .srow__label { color: var(--brand-dark); }
.srow__icon { width: 34px; height: 34px; flex: none; border-radius: 10px; 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: .84rem; }
.srow__value { margin-left: auto; min-width: 0; color: var(--muted); font-size: .88rem; 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: 2rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.quota__of { font-size: 1.05rem; 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: 6px; padding: 8px 4px; color: var(--muted); font-size: .9rem; font-weight: 550; }
.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: 6px; padding: 4px 2px; font-weight: 600; font-size: .9rem; }
.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 14px; 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: 12px; }
@media (min-width: 600px) {
  .media-row { grid-template-columns: 168px minmax(0, 1fr); grid-template-areas: "thumb body" "thumb actions"; column-gap: 18px; row-gap: 10px; }
}

/* Обзор на компьютере: «Так видят клиенты» (владелец 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: 6px 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: 10px 0; }
.hours-day + .hours-day { border-top: 1px solid var(--line); }
.hours-day__name { grid-area: name; font-weight: 600; font-size: .95rem; }
.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: .92rem; }
.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 10px; 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: 14px; min-height: 56px; padding: 6px 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 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; line-height: 1.35; }
.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: .86rem; }
@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__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: 10px; padding-bottom: 24px; }
  h1 { font-size: 1.35rem; }
  .breadcrumbs { margin-bottom: 6px; }
  .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: 6px 12px; flex-wrap: nowrap; gap: 10px; }
  .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: 6px 9px; }
  .chat__messages { min-height: 120px; padding: 10px 14px; 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: 6px 10px; }
  .chat__compose textarea { height: 40px; min-height: 40px; padding: 8px 14px; }  /* одна строка: длинный текст прокручивается в поле */
  .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; }
/* Пока печатают (клавиатура на экране) — меню нет: оно встало бы над клавиатурой или поверх поля. */
.tabbar.is-away .tabbar__items, .tabbar.is-away .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 { 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 { 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: 14px 0 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.group-post__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; 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; } }