/* ============================================================================
   АРЕНДА ЖИЛЬЯ — общая дизайн-система
   Один CSS на все страницы. Без внешних шрифтов и библиотек.
   ============================================================================ */

/* ----------------------------- 1. ТОКЕНЫ ---------------------------------- */
:root{
  --brand:#4A3AFF; --brand-600:#3B2CE0; --brand-700:#2E22B8;
  --brand-soft:#EEECFF; --brand-line:#DAD5FF;

  --accent:#FF8A3D; --accent-soft:#FFF3E8;
  --success:#12A150; --success-soft:#E6F6ED;
  --danger:#E5484D;  --danger-soft:#FDECEC;
  --warn:#C8871A;    --warn-soft:#FFF6E3;
  --info:#0A88C9;    --info-soft:#E6F4FB;

  --ink:#14162B; --ink-2:#494D6B; --ink-3:#7C819C; --ink-4:#A9AEC4;
  --line:#E6E8F0; --line-2:#F0F1F6;
  --bg:#FFFFFF; --bg-2:#F7F8FC; --bg-3:#EFF1F8;

  --r-xs:6px; --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,22,43,.06), 0 1px 3px rgba(20,22,43,.04);
  --sh-2:0 4px 14px rgba(20,22,43,.07);
  --sh-3:0 12px 34px rgba(20,22,43,.12);
  --sh-4:0 24px 60px rgba(20,22,43,.18);
  --sh-brand:0 8px 22px rgba(74,58,255,.28);

  --wrap:1200px; --wrap-wide:1440px; --gap:24px;
  --header-h:70px; --sidebar-w:260px;
  /* Высота нижней панели приложения. Числом она стояла в двух местах, и
     22.09.2026, когда панель появилась на всех экранах, к ним добавилось
     третье — панель подачи, которая обязана вставать ровно над ней. Три
     числа в трёх местах однажды разъедутся. */
  --navbar-h:56px;

  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* палитра графиков */
  --c1:#4A3AFF; --c2:#12A150; --c3:#FF8A3D; --c4:#0A88C9; --c5:#B14EF5; --c6:#E5484D;
}

/* ----------------------------- 2. БАЗА ------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
/* Фон документа оставляем светлым.

   Тёмный я поставил 12.08.2026, чтобы «пружинка» под подвалом выглядела его
   продолжением. Вышло хуже болезни: на коротких страницах — в мини-приложении,
   где подвала нет вовсе, — под содержимым появился чёрный экран во весь
   остаток окна. Лечение оказалось заметнее того, что лечили. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
img,svg,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,h5{margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:750}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px}
.wrap--wide{max-width:var(--wrap-wide)}
.wrap--narrow{max-width:820px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* утилиты */
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.row{display:flex; align-items:center; gap:12px}
.row--wrap{flex-wrap:wrap}
.row--between{justify-content:space-between}
.row--end{justify-content:flex-end}
.col{display:flex; flex-direction:column; gap:12px}
.grow{flex:1; min-width:0}
.right{margin-left:auto}
.center{text-align:center}
.muted{color:var(--ink-3)}
.small{font-size:13.5px}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* ----------------------------- 3. КНОПКИ ---------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px; border-radius:var(--r-m); border:1px solid transparent;
  font-weight:650; font-size:15px; cursor:pointer; white-space:nowrap;
  transition:background .16s, border-color .16s, transform .12s, box-shadow .16s, color .16s}
.btn:active{transform:translateY(1px)}
.btn svg{flex-shrink:0}
.btn--primary{background:var(--brand); color:#fff; box-shadow:var(--sh-brand)}
.btn--primary:hover{background:var(--brand-600)}
.btn--dark{background:var(--ink); color:#fff}
.btn--dark:hover{background:#242742}
.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink-3); background:var(--bg-2)}
.btn--soft{background:var(--brand-soft); color:var(--brand-700)}
.btn--soft:hover{background:var(--brand-line)}
.btn--quiet{background:transparent; color:var(--ink-2)}
.btn--quiet:hover{background:var(--bg-3); color:var(--ink)}
.btn--danger{background:var(--danger); color:#fff}
.btn--danger:hover{background:#CF3B40}
.btn--danger-soft{background:var(--danger-soft); color:var(--danger)}
/* Розовая кнопка — вход в посуточный контур приложения. 22.09.2026,
   Александр: «выделил бы цветом (розовым)». Тот же розовый, что у нас
   означает «это другое»: мягкий фон, тёмная надпись — не тревога, но и не
   очередная серая кнопка в ряду. */
.btn--pink{background:var(--danger-soft); color:#A32126; border-color:transparent}
.btn--pink:hover{background:#FBDDDE; color:#8E1B20}
.btn--success{background:var(--success); color:#fff}
.btn--success:hover{background:#0E8B45}
/* Кнопка «Скопировать»: синяя, пока не нажали, зелёная, когда скопировано.
   24.09.2026, Александр: «сделай кнопку синей, а при нажатии и скопировано —
   зелёной, так везде, где встречается». До того одни такие кнопки были
   зелёными с самого начала, другие белыми, и зелёный ничего не сообщал:
   цвет «готово» стоял на кнопке, которую ещё не нажимали. Класс ставит
   скрипт на те же две секунды, что висит надпись «Скопировано». */
.btn.is-copied, .btn.is-copied:hover{background:var(--success); color:#fff; box-shadow:none}
.btn--white{background:#fff; color:var(--ink); box-shadow:0 10px 26px rgba(0,0,0,.22)}
.btn--white:hover{background:#F2F2F7}
.btn--outline-w{background:transparent; border-color:rgba(255,255,255,.32); color:#fff}
.btn--outline-w:hover{background:rgba(255,255,255,.1)}
.btn--max{background:#111; color:#fff; gap:9px}
.btn--max:hover{background:#2a2a2a}
.btn--xs{height:32px; padding:0 12px; font-size:13px; border-radius:8px; gap:6px}
.btn--sm{height:40px; padding:0 16px; font-size:14px; border-radius:var(--r-s)}
.btn--lg{height:56px; padding:0 30px; font-size:17px}
.btn--full{width:100%}
/* Кнопка посреди строки, а не у левого края. Просьба Александра
   30.08.2026 про «Сгенерировать описание»: маленькая кнопка, прижатая
   влево под названием поля, выглядит потерянной. */
.btn--center{display:flex; width:fit-content; margin-left:auto; margin-right:auto}
.btn--icon{width:44px; padding:0}
.btn--icon.btn--sm{width:40px}
.btn--icon.btn--xs{width:32px}
.btn[disabled],.btn.is-disabled{opacity:.45; pointer-events:none}

/* иконка Max */
.mxico{border-radius:27%; flex-shrink:0; position:relative;
  background:linear-gradient(140deg,#A98BFF 0%,#7B5CFF 45%,#4B57FF 100%)}
.mxico::before{content:""; position:absolute; inset:0; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19.6V8.3c0-2 2.4-2.9 3.7-1.4L12 11.9l4.3-5c1.3-1.5 3.7-.6 3.7 1.4v11.3h-3.6v-8.2l-3.2 3.8a1.6 1.6 0 0 1-2.4 0l-3.2-3.8v8.2z'/%3E%3C/svg%3E") center/64% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19.6V8.3c0-2 2.4-2.9 3.7-1.4L12 11.9l4.3-5c1.3-1.5 3.7-.6 3.7 1.4v11.3h-3.6v-8.2l-3.2 3.8a1.6 1.6 0 0 1-2.4 0l-3.2-3.8v8.2z'/%3E%3C/svg%3E") center/64% no-repeat}

/* плитки приложений */
.appico{width:34px; height:34px; border-radius:27%; display:grid; place-items:center; flex-shrink:0}
.appico svg{width:62%; height:62%; fill:#fff}
.appico--max{background:linear-gradient(140deg,#A98BFF 0%,#7B5CFF 45%,#4B57FF 100%)}
.appico--vk{background:#0077FF}
.appico--tg{background:linear-gradient(180deg,#3EC0F5,#0A88C9)}
.appico--web{background:#fff; color:var(--brand)}
.appico--web svg{fill:none; stroke:currentColor; width:78%; height:78%}
.appico--web svg text{fill:currentColor; stroke:none}

/* ----------------------------- 4. ФОРМЫ ----------------------------------- */
.field{display:block; margin-bottom:18px}
.field__label{display:block; font-size:13.5px; font-weight:650; color:var(--ink-2); margin-bottom:7px}
/* Подсказка занимает свою строку. Строчным элементом она делила строку с
   кнопкой, стоящей следом, и та наезжала на текст: 30.08.2026 «Сгенерировать
   описание» закрыла собой половину слов «они будут вырезаны». */
.field__hint{display:block; font-size:12.5px; color:var(--ink-3); margin-top:6px}
.field__err{font-size:12.5px; color:var(--danger); margin-top:6px}

.inp,.sel,.ta{width:100%; height:48px; padding:0 15px; border:1.5px solid var(--line); border-radius:var(--r-m);
  background:#fff; font-size:15.5px; transition:border-color .15s, box-shadow .15s; outline:none}
.inp::placeholder,.ta::placeholder{color:var(--ink-4)}
.inp:hover,.sel:hover,.ta:hover{border-color:var(--ink-4)}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(74,58,255,.1)}
.inp.is-err{border-color:var(--danger)}
.ta{height:auto; min-height:120px; padding:13px 15px; line-height:1.5; resize:vertical}
.sel{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C819C' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px}
.inp--sm,.sel--sm{height:40px; font-size:14.5px; border-radius:var(--r-s)}

.inp-group{display:flex; align-items:center; gap:0; border:1.5px solid var(--line); border-radius:var(--r-m); background:#fff; overflow:hidden}
.inp-group:focus-within{border-color:var(--brand); box-shadow:0 0 0 4px rgba(74,58,255,.1)}
/* Многострочное поле не держит фиксированную высоту: 17.08.2026 Александр
   показал снимком «Описание» в одну строку — при восьми строках в разметке.
   Высота приходила из общего правила для полей ввода, и текст прокручивался
   внутри полоски в 48 пикселей. Растёт такое поле скриптом (`app.js`), а
   здесь снимаем потолок и даём ему стартовый рост. */
textarea.inp{height:auto; min-height:132px; padding:12px 15px; line-height:1.5;
  resize:vertical; overflow-y:auto}

.inp-group .inp{border:0; box-shadow:none; border-radius:0}
.inp-group__ad{padding:0 14px; color:var(--ink-3); font-size:14.5px; font-weight:600; white-space:nowrap}
.inp-ico{position:relative}
.inp-ico .inp{padding-left:44px}
.inp-ico > svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px;
  stroke:var(--ink-3); fill:none; stroke-width:1.8; pointer-events:none}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}

/* чекбоксы / радио */
.chk{display:flex; align-items:flex-start; gap:11px; cursor:pointer; padding:6px 0; font-size:15px}
.chk input{position:absolute; opacity:0; width:0; height:0}
.chk__box{width:21px; height:21px; border:1.8px solid var(--line); border-radius:6px; flex-shrink:0;
  background:#fff; display:grid; place-items:center; transition:.15s; margin-top:1px}
.chk__box svg{width:13px; height:13px; stroke:#fff; fill:none; stroke-width:3; opacity:0; transition:.12s}
.chk:hover .chk__box{border-color:var(--ink-4)}
.chk input:checked + .chk__box{background:var(--brand); border-color:var(--brand)}
.chk input:checked + .chk__box svg{opacity:1}
.chk--radio .chk__box{border-radius:50%}
.chk input:checked + .chk__box.is-radio{background:#fff; border:6px solid var(--brand)}
.chk__txt em{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3)}

/* переключатель */
.sw{display:inline-flex; align-items:center; gap:11px; cursor:pointer}
.sw input{position:absolute; opacity:0}
.sw__t{width:44px; height:26px; border-radius:var(--r-pill); background:var(--bg-3); position:relative; transition:.18s; flex-shrink:0}
.sw__t::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:var(--sh-1); transition:.18s}
.sw input:checked + .sw__t{background:var(--brand)}
.sw input:checked + .sw__t::after{transform:translateX(18px)}

/* сегментированный контрол */
.seg{display:inline-flex; background:var(--bg-3); border-radius:var(--r-pill); padding:4px; gap:3px}
.seg button,.seg a{height:38px; padding:0 18px; border:0; border-radius:var(--r-pill); background:transparent;
  font-size:14.5px; font-weight:650; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.15s}
.seg button:hover,.seg a:hover{color:var(--ink)}
.seg .is-active{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}
/* Правило для `is-on` — ниже, в блоке переключателей 30.08.2026. Дубля
   здесь быть не должно: 22.09.2026 я его завёл, не заметив прежнего, и
   получил две правды об одном и том же в одном файле. */

/* Только что созданная строка — её и ищут глазами, вернувшись с формы.
   22.09.2026: класс `is-new` стоял в разметке подборок, а правила к нему
   не было — подсветки не случалось никогда. Найдено сторожем, который я
   завёл после точно такой же истории с переключателем контуров. */
tr.is-new, .is-new{background:var(--brand-soft)}
.seg--sm button,.seg--sm a{height:32px; padding:0 13px; font-size:13.5px}
.seg--scroll{max-width:100%; overflow-x:auto; scrollbar-width:none}
.seg--scroll::-webkit-scrollbar{display:none}

/* чипсы-фильтры */
.chip{padding:8px 15px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff;
  font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:7px}
.chip:hover{border-color:var(--brand-line); color:var(--brand-700)}
.chip.is-active{background:var(--ink); border-color:var(--ink); color:#fff}
.chip--more{border-style:dashed; color:var(--brand)}
.chip--sm{padding:6px 12px; font-size:13px}
.chip__x{opacity:.6; font-size:15px; line-height:1}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips__label{width:100%; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:2px}

/* диапазон */
.range{display:flex; align-items:center; gap:10px}
.range .inp{text-align:center}
.range span{color:var(--ink-3)}

/* загрузка фото */
.uploader{border:2px dashed var(--line); border-radius:var(--r-l); padding:28px; text-align:center; background:var(--bg-2); transition:.15s; cursor:pointer}
.uploader:hover{border-color:var(--brand-line); background:var(--brand-soft)}
.uploader svg{width:34px; height:34px; margin:0 auto 12px; stroke:var(--brand); fill:none; stroke-width:1.6}
.uploader b{display:block; font-size:16px; margin-bottom:4px}
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:16px}
.photo{position:relative; aspect-ratio:4/3; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line)}
.photo .ph{width:100%; height:100%}
.photo__x{position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:0;
  background:rgba(20,22,43,.72); color:#fff; cursor:pointer; font-size:13px; line-height:1; display:grid; place-items:center}
.photo__main{position:absolute; bottom:6px; left:6px; font-size:11px; font-weight:700; background:var(--brand); color:#fff; padding:3px 8px; border-radius:var(--r-pill)}

/* ------------------------ 5. ЗАГЛУШКИ ФОТО -------------------------------- */
.ph{background:linear-gradient(135deg,#E9EDF7,#D7DEEE); position:relative}
.ph::after{content:""; position:absolute; inset:0; opacity:.34;
  background:center/38% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 20 24 7l18 13v20a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z'/%3E%3Cpath d='M18 41V27h12v14'/%3E%3C/svg%3E")}
.ph--1{background:linear-gradient(135deg,#E3E9FA,#CBD6F0)}
.ph--2{background:linear-gradient(135deg,#F3E9E2,#E4D2C4)}
.ph--3{background:linear-gradient(135deg,#E2F0EC,#C8E3DA)}
.ph--4{background:linear-gradient(135deg,#EEE6F6,#DACCEE)}
.ph--5{background:linear-gradient(135deg,#FAF0E1,#EEDCC0)}
.ph--6{background:linear-gradient(135deg,#E1EDF6,#C6DDEE)}
.ph--7{background:linear-gradient(135deg,#F0E9E9,#DCCFCF)}
.ph--8{background:linear-gradient(135deg,#E8F1E2,#D0E2C6)}
.ph--9{background:linear-gradient(135deg,#EDE8FA,#D5CBF0)}
.ph--10{background:linear-gradient(135deg,#FBE9EC,#EFCDD4)}

/* ------------------------ 6. ШАПКА И ФУТЕР -------------------------------- */
/* Шапка липкая, и содержимое уезжает под неё — так и задумано. Но выглядеть
   это должно как матовое стекло, а не как полупрозрачная плёнка с размазанной
   под ней фотографией.

   Поэтому по умолчанию шапка почти сплошная: если браузер не умеет размывать
   фон, лучше честный белый прямоугольник, чем заголовок поверх чужой мебели.
   Настоящая прозрачность включается только там, где размытие действительно
   работает. Префикс -webkit- обязателен: Safari до 18-й научился понимать
   свойство без него совсем недавно, а на телефонах живут версии постарше —
   без префикса блюра там не было вовсе, и вместо стекла получалась именно
   плёнка. Из-за этого шапка на айфоне и выглядела неаккуратно. */
.header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.985);
  border-bottom:1px solid var(--line)}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header{background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    backdrop-filter:saturate(180%) blur(16px)}
}
.header__in{display:flex; align-items:center; gap:18px; height:var(--header-h)}
.logo{display:flex; align-items:center; font-weight:800; letter-spacing:-.035em; font-size:21px; flex-shrink:0; color:var(--ink)}
.logo em{font-style:normal; color:var(--brand)}

.city{position:relative; flex-shrink:0}
.city__btn{display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:var(--r-s);
  background:var(--bg-2); border:1px solid var(--line); font-weight:600; font-size:14px; cursor:pointer;
  max-width:100%}
/* Название города — отдельным узлом, чтобы на узком телефоне плашка могла
   ужаться, а длинное имя («Борисоглебск») обрезалось многоточием, а не
   выдавливало конверт с бургером за край экрана. */
.city__n{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.city__btn svg{flex-shrink:0}
.city__btn:hover{border-color:var(--brand-line); background:var(--brand-soft)}
.city__menu{position:absolute; top:46px; left:0; width:250px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--sh-3); padding:8px; display:none; z-index:70}
.city__menu.is-open{display:block}
.city__menu b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); padding:8px 10px 4px}
.city__menu a{display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border-radius:8px; font-size:14.5px}
.city__menu a:hover{background:var(--bg-2)}
.city__menu a.is-soon{color:var(--ink-3); cursor:default}
.city__menu a.is-soon:hover{background:transparent}
.tag-soon{font-size:11px; font-weight:650; color:var(--ink-3); background:var(--bg-3); border-radius:var(--r-pill); padding:2px 8px}

.nav{display:flex; align-items:center; gap:4px; margin-left:6px}
.nav a{padding:8px 12px; border-radius:8px; font-size:15px; font-weight:550; color:var(--ink-2)}
.nav a:hover{background:var(--bg-2); color:var(--ink)}
.nav a.is-active{color:var(--brand-700); background:var(--brand-soft)}
.header__right{margin-left:auto; display:flex; align-items:center; gap:10px}
.menu{position:relative}
.menu__m{position:absolute; right:0; top:calc(100% + 10px); width:272px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--sh-3); padding:7px; display:none; z-index:80}
.menu.is-open .menu__m{display:block}
.menu__m a{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-s);
  font-size:14.5px; font-weight:600; color:var(--ink-2)}
.menu__m a:hover{background:var(--bg-2); color:var(--ink)}
.menu__m a svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; flex-shrink:0}
.menu__m .cnt{margin-left:auto}
.menu__sep{height:1px; background:var(--line-2); margin:6px 4px}
.menu__u{display:flex; align-items:center; gap:12px; padding:10px 11px 14px}
.menu__u b{display:block; font-size:15px}
.menu__u span{font-size:12.5px; color:var(--ink-3)}
.menu__out{color:var(--danger) !important}
.menu__out:hover{background:var(--danger-soft) !important}

.navdrawer{position:fixed; inset:0; z-index:140; display:none}
.navdrawer.is-open{display:block}
.navdrawer__bg{position:absolute; inset:0; background:rgba(20,22,43,.5)}
.navdrawer__p{position:absolute; top:0; right:0; bottom:0; width:min(320px,86%); background:#fff;
  display:flex; flex-direction:column; box-shadow:var(--sh-4)}
.navdrawer__h{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line)}
.navdrawer__n{flex:1; padding:12px; overflow-y:auto}
.navdrawer__n a{display:block; padding:13px 14px; border-radius:var(--r-s); font-size:16px; font-weight:650; color:var(--ink)}
.navdrawer__n a:hover{background:var(--bg-2)}
.navdrawer__f{padding:16px 18px; border-top:1px solid var(--line)}

.footer__note{font-size:12.5px; color:rgba(255,255,255,.45); margin-top:14px; line-height:1.5}

.burger{display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; align-items:center; justify-content:center}

/* аватар пользователя в шапке */
.uchip{display:flex; align-items:center; gap:9px; height:44px; padding:0 14px 0 6px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:650; font-size:14.5px}
.uchip:hover{border-color:var(--ink-4)}
.avatar{width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#9B7BFF,#4B57FF);
  color:#fff; display:grid; place-items:center; font-weight:750; font-size:13px; flex-shrink:0}
.avatar--lg{width:56px; height:56px; font-size:20px}
.avatar--sm{width:26px; height:26px; font-size:11px}
.uchip__n{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Картинка вместо буквы. overflow скрывает углы снимка, object-fit не даёт
   вытянуть лицо: аватары приходят из мессенджера квадратными не всегда. */
.avatar{overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar--gray{background:linear-gradient(135deg,#B6BCD2,#8A90AB)}
.avatar--green{background:linear-gradient(135deg,#4FD08A,#12A150)}
.avatar--orange{background:linear-gradient(135deg,#FFB578,#FF8A3D)}

/* Отступ перед подвалом. Раньше последняя карточка на странице упиралась в
   тёмную полосу подвала вплотную — Александр 09.08.2026: «сливается».
   Правило общее, а не по странице: этот стык одинаков везде, и чинить его
   в каждом шаблоне значит однажды забыть про новый. */
.footer{margin-top:56px; background:var(--ink); color:rgba(255,255,255,.7);
  padding:56px 0 30px; font-size:14.5px}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px}
.footer h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px}
.footer li{margin-bottom:8px}
.footer a:hover{color:#fff}
.footer__logo{display:block; color:#fff; font-weight:800; font-size:21px; letter-spacing:-.035em; margin-bottom:14px}
.footer__logo em{font-style:normal; color:#9C90FF}
.footer__bottom{margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.5)}
.footer__bottom a:hover{color:#fff}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:42px;height:42px;border-radius:12px; display:grid; place-items:center; transition:transform .15s, filter .15s}
.socials a:hover{transform:translateY(-2px); filter:brightness(1.1)}
.socials svg{width:22px;height:22px;fill:#fff}
.socials .s-max{background:linear-gradient(140deg,#A98BFF 0%,#7B5CFF 45%,#4B57FF 100%)}
.socials .s-vk{background:#0077FF}
.socials .s-tg{background:linear-gradient(180deg,#3EC0F5,#0A88C9)}

/* ------------------------ 7. СЕКЦИИ И ЗАГОЛОВКИ --------------------------- */
.sec{padding:64px 0}
.sec--sm{padding:44px 0}
.sec--tint{background:var(--bg-2)}
.sec__head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap}
.sec__head h2{font-size:clamp(24px,3vw,34px)}
.sec__head p{color:var(--ink-2); margin-top:8px; max-width:62ch}
.sec__cta{display:flex; justify-content:center; margin-top:36px}
.sec__cta .btn{min-width:320px}
.link-more{display:inline-flex; align-items:center; gap:6px; font-weight:650; color:var(--brand); font-size:15px}
.link-more:hover{color:var(--brand-700)}

/* Только вертикальные отступы: `padding` целиком затирал боковые у
   `.wrap`, с которым этот класс всегда стоит в паре, — и заголовок
   прилипал к краю экрана на пяти страницах сразу, включая блог. */
.page-head{padding-block:32px 8px}
.page-head h1{font-size:clamp(26px,3.4vw,38px)}
.page-head p{color:var(--ink-2); margin-top:10px; max-width:70ch}
.crumbs{display:flex; gap:8px; font-size:13px; color:var(--ink-3); margin-bottom:16px; flex-wrap:wrap}
.crumbs a:hover{color:var(--brand)}

/* ------------------------ 8. КАРТОЧКИ ОБЪЯВЛЕНИЙ -------------------------- */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  transition:box-shadow .18s, transform .18s, border-color .18s; display:block}
.card:hover{box-shadow:var(--sh-3); transform:translateY(-3px); border-color:transparent}
/* Карточка, которая не прыгает под курсором. 22.09.2026, Александр:
   «не нужно, чтоб блок подпрыгивал — должно быть статично». Подъём уместен
   там, где карточка целиком нажимается; в списке объектов нажимают ссылки
   и кнопки внутри неё, и движение под рукой только мешает целиться. */
.card--still:hover{box-shadow:var(--sh-1); transform:none; border-color:var(--line)}

/* Строка объекта в списке: название и действия. На узком экране название
   занимает всю ширину, кнопки уходят под него и делят её поровну — иначе
   при трёх кнопках рядом название схлопывается в столбик по слову.
   22.09.2026, снимок Александра с телефона. */
.stayrow{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap}
.stayrow__who{flex:1 1 300px; min-width:0}
.stayrow__acts{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
@media (max-width:640px){
  .stayrow__who{flex:1 1 100%}
  .stayrow__acts{margin-left:0; width:100%}
  .stayrow__acts > *{flex:1 1 calc(50% - 4px)}
  .stayrow__acts .btn{width:100%}
}
/* Карточка-сообщение не подпрыгивает. Подъём при наведении — обещание
   нажатия, а в «здесь пока пусто» или «на эти даты не нашлось» нажимать
   нечего: внутри в лучшем случае одна кнопка, и приподнимается она сама.
   21.09.2026, по снимку Александра. */
.card--flat:hover{box-shadow:none; transform:none; border-color:var(--line)}
/* Карточка-подтверждение: событие, после которого человек уходит ждать.
   22.09.2026 — отправка объекта на проверку. Зелёная рамка и мягкий фон,
   чтобы её нельзя было принять за очередной блок страницы. */
.card--ok{border-color:var(--success); background:var(--success-soft)}
.card--ok:hover{box-shadow:none; transform:none; border-color:var(--success)}
/* Карточка вопроса, после которого что-то случится: отмена брони,
   удаление. Цветом, а не только текстом — второе нажатие должно
   отличаться от первого на вид. */
.card--warn{border-color:var(--danger); background:var(--danger-soft)}
.card--warn:hover{box-shadow:none; transform:none; border-color:var(--danger)}
.card__media{position:relative; aspect-ratio:4/3; overflow:hidden}
.card__media .ph{width:100%; height:100%}
.card__badges{position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; max-width:calc(100% - 60px)}
.badge{font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill); background:rgba(255,255,255,.94); color:var(--ink); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:inline-flex; align-items:center; gap:5px}
.badge--owner{background:var(--success); color:#fff}
/* Плашка «Посуточно» на карточке выдачи. 22.09.2026, Александр: карточка
   как в длительной, «единственное чтоб плашка была — посуточно». Цвет
   фирменный, а не зелёный: зелёная метка у нас означает «собственник», и
   две разные вещи одним цветом читались бы как одна. */
.badge--daily{background:var(--brand); color:#fff}
.badge--agency{background:#4A6CF7; color:#fff}
.badge--hot{background:var(--accent); color:#fff}
.badge--new{background:var(--brand); color:#fff}
.badge--gray{background:var(--bg-3); color:var(--ink-2)}
.badge--ok{background:var(--success-soft); color:var(--success)}
.badge--warn{background:var(--warn-soft); color:var(--warn)}
.badge--err{background:var(--danger-soft); color:var(--danger)}
.badge--info{background:var(--info-soft); color:var(--info)}
.badge--brand{background:var(--brand-soft); color:var(--brand-700)}
.fav{position:absolute; top:8px; right:8px; width:34px; height:34px; border-radius:50%; border:0;
  background:rgba(255,255,255,.92); display:grid; place-items:center; cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.fav svg{width:17px;height:17px; fill:none; stroke:var(--ink); stroke-width:1.8}
.fav.is-on svg{fill:#FF3B57; stroke:#FF3B57}
.card__count{position:absolute; bottom:8px; right:8px; background:rgba(20,22,43,.62); color:#fff;
  font-size:11.5px; font-weight:600; padding:3px 8px; border-radius:var(--r-pill); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.card__body{padding:14px 16px 16px}
.card__price{font-size:20px; font-weight:800; letter-spacing:-.02em}
.card__price span{font-size:13px; font-weight:600; color:var(--ink-3)}
.card__fee{font-size:12.5px; color:var(--success); font-weight:650; margin-top:2px}
.card__fee--paid{color:var(--ink-3)}
.card__title{margin-top:8px; font-size:15.5px; font-weight:650; line-height:1.35}
.card__addr{margin-top:5px; font-size:13.5px; color:var(--ink-3); display:flex; align-items:flex-start; gap:6px}
.card__addr svg{width:14px; height:14px; flex-shrink:0; margin-top:2.5px; fill:var(--brand); opacity:.75}
.card__meta{margin-top:12px; padding-top:11px; border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink-3)}
.views{display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums}
.views svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7}

/* Сердечко и «написать владельцу» на плитке — просьба Александра
   15.08.2026. Карточка перестала быть одной большой ссылкой: ссылка теперь
   растянута под содержимым, а кнопки лежат над ней. Порядок слоёв важнее,
   чем кажется: без него нажатие на сердечко открывало бы объявление. */
/* Кнопки в ряду стоят на одной линии. Адрес и заголовок бывают в одну
   строку и в две, и карточки разъезжались по высоте: 15.08.2026 Александр
   прислал снимок с красной чертой поперёк ряда. Тянем карточку на всю
   высоту ячейки, а нижний блок прижимаем к её низу — тогда линия одна,
   какой бы длины ни был адрес. */
.card{position:relative; display:flex; flex-direction:column; height:100%}
.card__body{display:flex; flex-direction:column; flex:1}
.card__meta{margin-top:auto}
.card__link{position:absolute; inset:0; z-index:1}
.card__media,.card__body{position:relative}
.card__pricerow{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
/* Просмотры прижаты к цене, а не растянуты по строке: `margin-right:auto`
   собирает цену и счётчик слева, сердечко остаётся справа. Просьба
   Александра 30.08.2026 — внизу карточки счётчик слипался со временем
   публикации и числом снимков. */
.card__pricerow .views{margin:5px auto 0 2px; color:var(--ink-3)}
.card__fav{position:relative; z-index:2; flex:0 0 auto; width:36px; height:36px; margin:-4px -4px 0 0;
  display:inline-flex; align-items:center; justify-content:center; border:0; cursor:pointer;
  background:transparent; border-radius:50%; color:var(--ink-3); transition:color .15s, background .15s}
.card__fav svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7}
.card__fav:hover{background:var(--bg-2); color:var(--brand)}
.card__fav.is-on{color:var(--danger)}
.card__fav.is-on svg{fill:currentColor; stroke:currentColor}
.card__write{position:relative; z-index:2; margin-top:10px}

/* горизонтальная карточка (список в каталоге) */
.rowcard{display:grid; grid-template-columns:280px 1fr auto; gap:20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-l); padding:14px; transition:box-shadow .18s, border-color .18s}
.rowcard:hover{box-shadow:var(--sh-2); border-color:var(--brand-line)}
.rowcard__media{position:relative; aspect-ratio:4/3; border-radius:var(--r-m); overflow:hidden}
.rowcard__media .ph{width:100%; height:100%}
.rowcard__body{padding:4px 0; min-width:0}
.rowcard__price{font-size:24px; font-weight:800; letter-spacing:-.025em}
.rowcard__price span{font-size:14px; font-weight:600; color:var(--ink-3)}
.rowcard__title{font-size:17px; font-weight:700; margin-top:6px}
.rowcard__desc{font-size:14px; color:var(--ink-2); margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rowcard__side{width:210px; display:flex; flex-direction:column; gap:9px; justify-content:center; padding-right:6px}
.rowcard__feats{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.feat{font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--bg-2); border-radius:var(--r-s); padding:4px 10px}

/* ------------------------ 9. ФИЛЬТРЫ -------------------------------------- */
.ftabs{display:inline-flex; gap:4px; background:var(--bg-3); border-radius:var(--r-pill); padding:4px}
/* Кнопка и ссылка в одной паре обязаны вести себя одинаково.
   20.09.2026, снимок Александра «криво косо»: «Снять надолго» — это
   `<button>`, «Посуточно» — `<a>`. У кнопки высота применяется, у ссылки
   нет: строчный элемент её не берёт, и вместо ровной пары выходила белая
   половина, вылезающая за подложку, и пустой хвост справа. Поэтому display
   задаётся явно, а не достаётся от типа элемента. */
.ftab{position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 22px; border:0; border-radius:var(--r-pill); background:transparent;
  font-size:15px; font-weight:650; color:var(--ink-2); cursor:pointer; transition:.15s;
  white-space:nowrap; text-decoration:none}
.ftab:hover{color:var(--ink)}
.ftab.is-active{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}
.ftab.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-6px)}30%{transform:translateX(6px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
.tip{position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%) scale(.94);
  background:var(--ink); color:#fff; font-size:13px; font-weight:600; white-space:nowrap;
  padding:8px 13px; border-radius:var(--r-s); opacity:0; pointer-events:none; transition:.18s; box-shadow:var(--sh-2); z-index:5}
.tip::before{content:""; position:absolute; left:-4px; top:50%; margin-top:-4px; width:8px; height:8px; background:var(--ink); transform:rotate(45deg)}
.tip.is-on{opacity:1; transform:translateY(-50%) scale(1)}

.fbar{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:8px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; box-shadow:var(--sh-1)}
/* `flex-wrap` здесь, а не только в медиазапросе: перенос должен зависеть от
   того, влезла ли строка, а не от ширины окна. Полоса живёт в `.wrap`
   шириной 1200, то есть 1160 на содержимое, — и посуточный фильтр (район,
   заезд, выезд, гости, две кнопки) в них не помещался, хотя окно было 1280 и
   медиазапрос на 1180 не срабатывал. Кнопка «Показать N вариантов» уезжала
   за край. 20.09.2026. */
.fbar__f{display:flex; align-items:center; gap:8px; height:48px; padding:0 13px; border:0; background:transparent;
  border-radius:var(--r-l); font-size:15.5px; font-weight:600; color:var(--ink); cursor:pointer; white-space:nowrap; transition:background .15s}
.fbar__f:hover{background:#fff}
.fbar__f.is-empty{color:var(--ink-3); font-weight:550}
.fbar__f > svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; flex-shrink:0; opacity:.75}
.fbar__f .caret{width:13px; height:13px; opacity:.5; margin-left:-2px; transition:transform .18s}
.fbar__sep{width:1px; height:24px; background:var(--line); flex-shrink:0}
.fbar__right{margin-left:auto; display:flex; align-items:center; gap:8px}
/* Кнопки в полосе теснее обычных: полоса живёт в контейнере 1160, и с
   посуточными полями (район, две даты, гости) обычные 22 пикселя по бокам
   выталкивали «Показать N вариантов» на вторую строку. 20.09.2026. */
.fbar__right .btn{height:48px; padding:0 16px}
.fbar__count{background:var(--brand); color:#fff; font-size:11.5px; font-weight:750; border-radius:var(--r-pill); padding:1px 7px; margin-left:2px}

/* Даты в строке поиска посуточного.

   20.09.2026, просьба Александра сделать фильтр «по аналогии с нашим
   длительно». Поля там — выпадающие списки, а здесь два из четырёх — даты,
   и им нужна подпись: без неё «20.09.2026 / 21.09.2026» рядом читается как
   одно непонятное число. Подпись мелкая и серая, само поле — как остальные
   в строке. */
.fbar__f--date{gap:6px; cursor:default; padding:0 9px}
/* Посуточная полоса: полей на два больше (заезд и выезд), и в контейнер
   1160 они с кнопками одной строкой не вставали — кнопка уезжала на вторую.
   Александр: «нужно, чтобы всё помещалось в одну». Ужимаем ровно настолько,
   насколько не хватало: поля теснее, разделители убраны, кнопки короче.
   Растягивать поля нельзя — тогда кнопкам не остаётся места.
   20.09.2026, по двум его снимкам подряд. */
.fbar--stay{gap:2px}
.fbar--stay .fbar__f{flex:0 1 auto; min-width:0; padding:0 10px}
.fbar--stay .fbar__f--date{padding:0 6px; gap:5px}
.fbar--stay .fbar__cap{font-size:11px}
.fbar--stay .fbar__sep{display:none}
.fbar--stay .fbar__right{margin-left:auto; gap:6px}
.fbar--stay .fbar__right .btn{padding:0 14px; font-size:14.5px}
.fbar__cap{font-size:11.5px; font-weight:650; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
.fbar__f--date input{border:0; background:transparent; font:inherit; color:inherit; padding:0; cursor:pointer}
.fbar__f--date input::-webkit-calendar-picker-indicator{opacity:.5; cursor:pointer}

.fdrop{position:relative}
.fdrop.is-open .fbar__f{background:#fff; box-shadow:var(--sh-1)}
.fdrop.is-open .caret{transform:rotate(180deg)}
.fdrop__menu{position:absolute; top:calc(100% + 8px); left:0; min-width:270px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-3); padding:6px; z-index:40; display:none}
.fdrop.is-open .fdrop__menu{display:block}
.fdrop__menu--wide{min-width:340px; padding:16px}
.fdrop__i{display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; border:0; background:transparent;
  border-radius:var(--r-s); font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left}
.fdrop__i:hover{background:var(--bg-2)}
.fdrop__i .tick{margin-left:auto; width:16px; height:16px; stroke:var(--brand); fill:none; stroke-width:2.6; opacity:0; flex-shrink:0}
.fdrop__i.is-on{color:var(--brand-700)}
.fdrop__i.is-on .tick{opacity:1}
.fdrop__i em{font-style:normal; font-size:12.5px; font-weight:500; color:var(--ink-3); display:block; margin-top:1px}

/* панель «Все фильтры» */
.drawer{position:fixed; inset:0; z-index:110; display:none}
.drawer.is-open{display:block}
.drawer__bg{position:absolute; inset:0; background:rgba(20,22,43,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.drawer__panel{position:absolute; top:0; right:0; bottom:0; width:min(520px,100%); background:#fff;
  display:flex; flex-direction:column; box-shadow:var(--sh-4); animation:slidein .25s ease}
@keyframes slidein{from{transform:translateX(30px); opacity:.4}to{transform:none; opacity:1}}
.drawer__head{padding:20px 24px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px}
.drawer__head h3{font-size:21px; flex:1}
.drawer__body{flex:1; overflow-y:auto; padding:22px 24px}
.drawer__foot{padding:16px 24px; border-top:1px solid var(--line); display:flex; gap:12px; background:#fff}
.drawer__foot .btn{flex:1}
.fgroup{padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line-2)}
.fgroup:last-child{border:0; margin-bottom:0; padding-bottom:0}
.fgroup__t{font-size:15.5px; font-weight:700; margin-bottom:14px}

/* ------------------------ 10. КАРТА --------------------------------------- */
.map{position:relative; background:
    linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0/46px 100%,
    radial-gradient(120% 90% at 70% 20%, #E9F0E4 0%, rgba(233,240,228,0) 55%),
    radial-gradient(90% 70% at 20% 80%, #E2ECF6 0%, rgba(226,236,246,0) 60%),
    #EEF1F2;
  overflow:hidden; border-radius:var(--r-l)}
.map__roads{position:absolute; inset:0; pointer-events:none}
.map__roads path{stroke:#fff; fill:none; stroke-linecap:round}
.map__river{fill:#CFE2F0}
.map__green{fill:#DCEBD4}
.pin{position:absolute; transform:translate(-50%,-100%); cursor:pointer; z-index:2}
.pin__b{background:var(--brand); color:#fff; font-size:13px; font-weight:750; padding:6px 11px; border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(20,22,43,.28); white-space:nowrap; border:2px solid #fff; transition:.15s}
.pin:hover .pin__b,.pin.is-active .pin__b{background:var(--ink); transform:scale(1.06)}
.pin--seen .pin__b{background:#fff; color:var(--ink-2); border-color:var(--line)}
.pin--cluster .pin__b{background:var(--ink); font-size:14px; padding:9px 14px}
.pin::after{content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; background:inherit; transform:translateX(-50%) rotate(45deg)}
.map__ctl{position:absolute; right:14px; top:14px; display:flex; flex-direction:column; gap:8px; z-index:3}
.map__btn{width:42px; height:42px; border-radius:var(--r-s); border:1px solid var(--line); background:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--sh-1); font-size:18px; font-weight:600}
.map__btn:hover{background:var(--bg-2)}
.map__badge{position:absolute; left:14px; top:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 15px; font-size:13.5px; font-weight:650; box-shadow:var(--sh-1); z-index:3; display:flex; align-items:center; gap:8px}
.map__attr{position:absolute; right:10px; bottom:8px; font-size:11px; color:var(--ink-3); background:rgba(255,255,255,.8); padding:2px 8px; border-radius:6px; z-index:3}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--success); box-shadow:0 0 0 3px var(--success-soft); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.mappop{position:absolute; width:260px; background:#fff; border-radius:var(--r-m); box-shadow:var(--sh-3);
  overflow:hidden; z-index:5; transform:translate(-50%,-118%)}
.mappop .ph{aspect-ratio:16/9}
.mappop__b{padding:11px 13px}
.mappop__b b{font-size:16px; display:block}
.mappop__b span{font-size:12.5px; color:var(--ink-3)}

/* ------------------------ 11. ДАШБОРД-ШЕЛЛ -------------------------------- */
/* Высота в `dvh`, а не `vh`.

   `100vh` на телефоне — это высота экрана без учёта панелей браузера, и
   страница всегда оказывается выше видимой области на высоту адресной
   строки. Внизу кабинета получалась пустота, которую не пролистать до
   конца: содержимого нет, а прокрутка есть. `dvh` считает то, что человек
   действительно видит; `vh` оставлен строкой выше для старых браузеров. */
.app{display:grid; grid-template-columns:var(--sidebar-w) 1fr; background:var(--bg-2);
  min-height:calc(100vh - var(--header-h)); min-height:calc(100dvh - var(--header-h))}
.side{background:#fff; border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:var(--header-h); height:calc(100vh - var(--header-h)); overflow-y:auto; z-index:20}
.side__top{padding:18px 20px 6px}
.side__title{display:block; font-size:16.5px; font-weight:750; letter-spacing:-.02em}
.side__sub{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px}
.side__money{display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding:8px 12px; border-radius:var(--r-s); text-decoration:none;
  background:var(--brand-soft); color:var(--brand-700); font-size:13px}
.side__money b{font-size:15px; font-variant-numeric:tabular-nums}
.side__money:hover{background:var(--brand-line)}
.side__nav{padding:6px 12px; flex:1}
.side__group{font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-4);
  padding:16px 12px 7px}
.side__nav a,.side__foot .side__user{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-s);
  font-size:14.8px; font-weight:600; color:var(--ink-2); margin-bottom:2px; transition:.14s}
.side__nav a:hover{background:var(--bg-2); color:var(--ink)}
.side__nav a.is-active{background:var(--brand-soft); color:var(--brand-700)}
.side__nav a svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; flex-shrink:0}
.side__nav a .cnt,.menu__m .cnt{margin-left:auto; background:var(--brand); color:#fff; font-size:11px; font-weight:750; border-radius:var(--r-pill); padding:1px 7px}
.menu__m .cnt--gray,.side__nav a .cnt--gray{background:var(--bg-3); color:var(--ink-3)}
.side__foot{padding:14px; border-top:1px solid var(--line-2)}
.side__user{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-s)}
.side__user:hover{background:var(--bg-2)}
.side__user b{display:block; font-size:14px; font-weight:650}
.side__user span{font-size:12px; color:var(--ink-3)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  padding:0 28px; height:66px; display:flex; align-items:center; gap:16px; position:sticky; top:var(--header-h); z-index:19}
.topbar h1{font-size:21px}
/* Переключатель контуров под заголовком — только на узком экране.
   22.09.2026: на телефоне он лежит внутри «гамбургера», и человек час не
   мог найти собственные квартиры, хотя меню открывал. */
.onlynarrow{display:none}
@media (max-width:1024px){
  /* Воздух со всех четырёх сторон, а не только сверху. 23.09.2026,
     снимок Александра: переключатель лежал вплотную на серой сетке —
     нижнего отступа не было вовсе, и он читался как её часть. */
  .onlynarrow{display:block; padding:14px 18px; background:#fff;
    position:sticky; top:calc(var(--header-h) + var(--topbar-h)); z-index:18}
  .seg--top{width:100%}
  .seg--top a{flex:1}
}
/* Высота верхней панели — переменной: к ней липнет подменю объекта, и два
   разных числа в двух местах однажды разъедутся. */
:root{--topbar-h:66px}

/* Подменю объекта: липкое, под верхней панелью кабинета.
   22.09.2026, Александр: «вынеси это меню вверх объекта, сделай его липким
   к шапке и статичным». Оно нужно на всех экранах объекта, а не только на
   календаре: хозяин ходит между ценами, фотографиями и календарями, и
   возвращаться наверх ради перехода — лишняя работа. */
/* Кто я и откуда: строка над полосой разделов. Липкая вместе с ней —
   иначе ответ на «какой объект я правлю» уезжает вверх при первой же
   прокрутке. */
.staynav__who{position:sticky; top:calc(var(--header-h) + var(--topbar-h)); z-index:18;
  background:#fff; padding:12px 28px 0; margin:-28px -28px 0;
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.staynav__who b{font-size:15px}
@media (max-width:1024px){
  .staynav__who{margin:-18px -18px 0; padding:10px 18px 0}
}

.staynav{position:sticky; top:calc(var(--header-h) + var(--topbar-h) + 34px); z-index:17;
  background:#fff; border-bottom:1px solid var(--line);
  margin:0 -28px 16px; padding:10px 28px;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none}
.staynav::-webkit-scrollbar{display:none}
.staynav .btn{flex:0 0 auto}
@media (max-width:1024px){
  /* На узком экране липким остаётся переключатель контуров, а не полоса
     объекта: двух липких полос подряд экран телефона не выдерживает —
     они съедают треть высоты. */
  .staynav{position:static; margin:0 -18px 14px; padding:10px 18px}
  .staynav__who{position:static; margin:0 -18px 0; padding:10px 18px 0}
}

/* В кабинете карточки не прыгают под курсором: они не нажимаются целиком,
   внутри них ссылки и кнопки, и движение мешает целиться. Просьба
   Александра 22.09.2026: «в ЛК мне не нужно подпрыгивание полей». */
.app .card:hover{box-shadow:var(--sh-1); transform:none; border-color:var(--line)}
.topbar__r{margin-left:auto; display:flex; align-items:center; gap:10px}
.content{padding:28px; flex:1}
.content--flush{padding:0}
/* Центрирование значка — через flex, а не `place-items`.

   Было `display:grid; place-items:center`, и значок стоял не по центру в двух
   местах сразу (замечание Александра 13.08.2026 — конверт в шапке и «гармошка»
   в кабинете). Причина одна: `justify-items` во flex-контейнере не работает
   вовсе. А флексом эти кнопки становятся обе, разными путями: конверту на
   телефоне ниже явно ставится `inline-flex`, а `<button>` браузер и так не
   раскладывает гридом. Оставалось только вертикальное центрирование — значок
   уезжал влево на 10px в конверте и на 4,5px в кнопке (плюс её собственный
   отступ 6px от браузера, поэтому `padding:0`). Кнопка `.burger` рядом всегда
   стояла ровно именно потому, что у неё flex и `justify-content`. */
.iconbtn{width:42px; height:42px; border-radius:var(--r-s); border:1px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; position:relative}
.iconbtn:hover{background:var(--bg-2)}
/* Число непрочитанного на значке. Кружок поверх угла — как везде, где
   считают сообщения: человеку не надо объяснять, что это. */
.iconbtn__dot{position:absolute; top:-5px; right:-5px; min-width:18px; height:18px;
  padding:0 5px; border-radius:9px; background:var(--danger); color:#fff;
  font-size:11px; font-weight:750; display:grid; place-items:center}
body.is-app{background:var(--bg-2)}

/* ---- Подача в мини-приложении ----
   Полоса шагов: человек должен видеть, сколько осталось, — это снижает
   число брошенных подач сильнее любой другой мелочи. */
.steps-bar{display:flex; gap:5px}
.steps-bar i{height:4px; border-radius:2px; background:var(--line); flex:1}
.steps-bar i.is-done{background:var(--brand)}
.steps-bar i.is-now{background:var(--brand); opacity:.5}
.step-label{font-size:13px; font-weight:700; color:var(--brand)}

/* Кнопки шага прижаты к низу окна: главное действие должно быть под
   большим пальцем, а не уезжать вместе с длинной формой.

   Панель непрозрачная, и это не вкус. Раньше её фон уходил в прозрачность
   сверху, и поле под ней просвечивало: видно наполовину, значит выглядит
   рабочим. Нажатие при этом ловила панель — 13.09.2026 я это измерил,
   спросив у браузера, кто поймает палец в середине каждого поля. Как экран
   открывается, мёртвым оказывался «Агентство» в обязательном «Кто сдаёт»,
   а после небольшой прокрутки — «Коммунальные, ₽».

   Человек жмёт и не получает ничего. Это худший вид поломки: приложение
   выглядит исправным и не отвечает. Из десяти живых черновиков восемь
   стояли без цены, трое — прямо на этом шаге.

   Сплошной фон и линия сверху говорят правду: под панелью что-то есть,
   прокрутите. Тогда нажимают то, что видят. */
.addbar{position:sticky; bottom:0; display:flex; gap:10px; align-items:center;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1px solid var(--line-2);
  box-shadow:0 -10px 16px -12px rgba(20,22,43,.25)}
.addbar .btn--quiet{flex:0 0 auto}

/* Звёздочка у обязательного поля — сразу, а не после отказа. */
.req{color:var(--danger)}

/* Выбор из двух с объяснением последствий: важное решение, и человек
   должен видеть, чем один вариант отличается от другого. */
.pick{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; gap:10px; align-items:flex-start; padding:12px; width:100%;
  border:1px solid var(--line); border-radius:var(--r-m); background:#fff;
  text-align:left; cursor:pointer; font:inherit; color:inherit}
.opt--on{border-color:var(--brand); background:var(--brand-soft)}
.opt__mark{width:18px; height:18px; border-radius:50%; border:2px solid var(--line);
  flex:none; margin-top:2px; display:grid; place-items:center}
.opt--on .opt__mark{border-color:var(--brand)}
.opt--on .opt__mark::after{content:""; width:9px; height:9px; border-radius:50%;
  background:var(--brand)}
.opt b{font-size:14px; display:block}
.opt p{font-size:12px; color:var(--ink-3); margin-top:2px}
/* Поле, растущее под текст: высоту ставит скрипт, прокрутку убираем,
   иначе внутри появляется вторая полоса. */
.grow-in{overflow-y:hidden; resize:none; min-height:76px}

/* ---- Посуточно: календарь и шахматка ----
   Сетка прокручивается вбок вместе с телефоном: столбцов тридцать, и
   ужимать их до нечитаемости хуже, чем дать прокрутку. Левый столбец
   прилипает — без него, пролистав на две недели, не понять, чья строка. */
.board{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
  border-radius:var(--r-m)}
.board__t{border-collapse:separate; border-spacing:0; font-size:13px}
.board__name{position:sticky; left:0; z-index:2; background:#fff; text-align:left;
  min-width:132px; max-width:132px; padding:8px 10px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line-2); font-weight:650; display:table-cell}
.board__name span{display:block; font-weight:400}
.board__h{min-width:30px; padding:6px 0; text-align:center; font-weight:650;
  border-bottom:1px solid var(--line); background:#fff}
.board__h i{display:block; font-style:normal; font-size:10px; color:var(--ink-3); text-transform:lowercase}
.board__h.is-weekend,.board__c.is-weekend{background:var(--bg-2)}
.board__c{min-width:30px; height:34px; border-bottom:1px solid var(--line-2);
  border-right:1px solid var(--line-2)}
/* Состояние клетки записано двойным классом намеренно: правило выходного
   дня (.board__c.is-weekend) весит столько же, и с одинарным классом
   суббота с воскресеньем перекрашивали занятый день обратно в свободный.
   Для посуточной аренды это худший из возможных дней для такой ошибки:
   выходные и есть основная продажа. Поймано прогоном 13.08.2026. */
.board__c.board__c--booked{background:var(--brand); border-color:var(--brand)}
.board__c.board__c--closed{background:var(--ink-3)}
.board__c.board__c--imported{background:repeating-linear-gradient(45deg,var(--ink-3),var(--ink-3) 3px,#fff 3px,#fff 6px)}

.cal{width:100%; border-collapse:collapse; font-size:13px}
.cal th{padding:6px 0; font-size:11.5px; color:var(--ink-3); font-weight:650}
.cal__d{border:1px solid var(--line-2); height:52px; vertical-align:top; text-align:left}
.cal__d label{display:block; padding:5px 6px; cursor:pointer; height:100%}
.cal__d--empty{border:0}
.cal__d--past{opacity:.45}
.cal__d--booked{background:var(--brand-soft)}
.cal__d--closed{background:var(--bg-3)}
.cal__d--imported{background:repeating-linear-gradient(45deg,var(--bg-3),var(--bg-3) 4px,#fff 4px,#fff 8px)}
.cal__n{display:block; font-weight:700}
.cal__p{display:block; font-size:11px; color:var(--ink-3)}
.cal__key{display:inline-block; width:13px; height:13px; border-radius:3px; vertical-align:-2px;
  margin-right:5px; border:1px solid var(--line)}
.cal__key--booked{background:var(--brand); border-color:var(--brand)}
.cal__key--closed{background:var(--ink-3)}
.cal__key--imported{background:repeating-linear-gradient(45deg,var(--ink-3),var(--ink-3) 3px,#fff 3px,#fff 6px)}
/* Вход в кабинет в выдвижном меню: кнопкой, а не строчкой, и в тех же
   полях, что «Разместить объявление» внизу — чтобы две главные кнопки
   меню выглядели одинаково. */
.navdrawer__go{padding:16px 18px; border-bottom:1px solid var(--line)}
.iconbtn svg{width:19px; height:19px; stroke:var(--ink-2); fill:none; stroke-width:1.8}
.iconbtn .dot{position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid #fff}

/* ------------------------ 12. ПАНЕЛИ И ПЛИТКИ ----------------------------- */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden}
.panel__head{padding:18px 22px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:14px}
.panel__head h3{font-size:17.5px; flex:1}
.panel__body{padding:22px}
.panel__body--flush{padding:0}
.panel__foot{padding:16px 22px; border-top:1px solid var(--line-2); background:var(--bg-2); display:flex; gap:12px; align-items:center}

.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.tile{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:20px}
.tile__t{font-size:13.5px; color:var(--ink-3); font-weight:600; display:flex; align-items:center; gap:7px}
.tile__v{font-size:32px; font-weight:800; letter-spacing:-.03em; margin-top:8px; line-height:1}
.tile__d{font-size:13px; font-weight:650; margin-top:8px; display:inline-flex; align-items:center; gap:5px}
.up{color:var(--success)}
.down{color:var(--danger)}
.tile__spark{margin-top:12px}

/* ------------------------ 13. ТАБЛИЦЫ ------------------------------------- */
/*
  Таблица шире экрана прокручивается внутри себя, а не выталкивает страницу.
  29.08.2026: журнал операций на 390 обрезался на столбце «Сумма» — человек
  видел, что деньги пришли, но не видел сколько.
*/
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media (max-width:520px){ .hide-sm{display:none} }
.tbl{width:100%; font-size:14.5px}
.tbl th{text-align:left; font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); padding:12px 16px; border-bottom:1px solid var(--line); background:var(--bg-2); white-space:nowrap}
.tbl td{padding:14px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--bg-2)}
.tbl__num{text-align:right; font-variant-numeric:tabular-nums}
.tbl__thumb{width:64px; height:48px; border-radius:8px; overflow:hidden; flex-shrink:0}
.tbl__thumb .ph{width:100%; height:100%}
.tbl-scroll{overflow-x:auto}
.tbl-scroll .tbl{min-width:760px}

/* ------------------------ 14. ЧАТ ----------------------------------------- */
.chat{display:grid; grid-template-columns:320px 1fr; height:calc(100vh - var(--header-h) - 66px); min-height:520px; background:#fff}
.chat__list{border-right:1px solid var(--line); overflow-y:auto}
.chat__search{padding:14px; border-bottom:1px solid var(--line-2); position:sticky; top:0; background:#fff; z-index:2}
.dialog{display:flex; gap:12px; padding:14px; border-bottom:1px solid var(--line-2); cursor:pointer; transition:.14s}
.dialog:hover{background:var(--bg-2)}
.dialog.is-active{background:var(--brand-soft)}
.dialog__b{min-width:0; flex:1}
.dialog__top{display:flex; align-items:baseline; gap:8px}
.dialog__top b{font-size:14.5px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dialog__top span{font-size:11.5px; color:var(--ink-3); flex-shrink:0}
.dialog__msg{font-size:13.5px; color:var(--ink-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dialog__obj{font-size:12px; color:var(--brand-700); background:var(--brand-soft); border-radius:6px;
  padding:2px 7px; margin-top:6px; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dialog__unread{width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff;
  font-size:11px; font-weight:750; display:grid; place-items:center; flex-shrink:0; align-self:center}

.chat__pane{display:flex; flex-direction:column; min-width:0}
.chat__head{padding:14px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px}
.chat__body{flex:1; overflow-y:auto; padding:22px; background:var(--bg-2);
  display:flex; flex-direction:column; gap:12px}
.chat__day{align-self:center; font-size:12px; font-weight:650; color:var(--ink-3); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 13px; margin:6px 0}
.msg{max-width:min(62%,520px); padding:11px 15px; border-radius:18px; font-size:15px;
  line-height:1.45; position:relative;
  /* Длинная ссылка не рвёт пузырь: адрес поста в MAX — это сорок знаков
     без пробелов, и без переноса он вылезал за край экрана (22.09.2026). */
  overflow-wrap:anywhere}
.msg a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.msg--out a{color:#fff}
.msg time{display:block; font-size:11px; opacity:.55; margin-top:4px; text-align:right}
.msg--in{background:#fff; border:1px solid var(--line); border-bottom-left-radius:6px; align-self:flex-start}
.msg--out{background:var(--brand); color:#fff; border-bottom-right-radius:6px; align-self:flex-end}
.msg--sys{align-self:center; background:var(--warn-soft); color:var(--warn); font-size:13px; max-width:80%; text-align:center; border-radius:var(--r-m)}
.msg__obj{display:flex; gap:10px; padding:9px; background:rgba(255,255,255,.16); border-radius:var(--r-s); margin-bottom:8px}
.msg--in .msg__obj{background:var(--bg-2)}
.msg__obj .ph{width:52px; height:40px; border-radius:6px; flex-shrink:0}
.chat__foot{padding:14px 22px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:flex-end; background:#fff}
.chat__foot .ta{min-height:48px; max-height:140px}
.quick{display:flex; gap:8px; flex-wrap:wrap; padding:0 22px 12px; background:#fff}

/* ------------------------ 15. ГРАФИКИ ------------------------------------- */
.chart{width:100%}
.chart text{font-family:var(--font); font-size:11px; fill:var(--ink-3)}
.chart .grid line{stroke:var(--line-2); stroke-width:1}
.chart .axis{stroke:var(--line); stroke-width:1}
.chart .line{fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.chart .area{opacity:.12}
.chart .dot{stroke:#fff; stroke-width:2}
.bars{display:flex; align-items:flex-end; gap:10px; height:180px}
.bar{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; height:100%}
.bar__v{width:100%; border-radius:8px 8px 3px 3px; background:var(--brand); position:relative; transition:.2s; min-height:4px}
.bar:hover .bar__v{filter:brightness(1.15)}
.bar__v span{position:absolute; top:-22px; left:0; right:0; text-align:center; font-size:12px; font-weight:700; color:var(--ink)}
.bar__l{font-size:11.5px; color:var(--ink-3); text-align:center; line-height:1.2}
.legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:13px; color:var(--ink-2)}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:7px; vertical-align:-1px}
.hbar{display:flex; align-items:center; gap:12px; padding:9px 0}
.hbar__l{width:150px; font-size:13.5px; font-weight:600; flex-shrink:0}
.hbar__t{flex:1; height:12px; background:var(--bg-3); border-radius:var(--r-pill); overflow:hidden}
.hbar__f{height:100%; border-radius:var(--r-pill); background:var(--brand)}
.hbar__v{width:96px; text-align:right; font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; flex-shrink:0}
.donut{transform:rotate(-90deg)}
.donut circle{fill:none; stroke-width:16}

/* ------------------------ 16. ПРОЧИЕ КОМПОНЕНТЫ --------------------------- */
.alert{display:flex; gap:12px; padding:15px 18px; border-radius:var(--r-m); font-size:14.5px; align-items:flex-start}
.alert svg{width:20px; height:20px; flex-shrink:0; margin-top:1px}
.alert b{display:block; margin-bottom:3px}
.alert--info{background:var(--info-soft); color:#0B5E86}
.alert--ok{background:var(--success-soft); color:#0B6E37}
.alert--warn{background:var(--warn-soft); color:#8A5B08}
.alert--err{background:var(--danger-soft); color:#A32126}
.alert--brand{background:var(--brand-soft); color:var(--brand-700)}

.empty{text-align:center; padding:56px 24px}
.empty svg{width:56px; height:56px; margin:0 auto 18px; stroke:var(--ink-4); fill:none; stroke-width:1.3}
.empty h3{font-size:19px; margin-bottom:8px}
.empty p{color:var(--ink-3); max-width:44ch; margin:0 auto 20px}

.steps-h{display:flex; align-items:center; gap:0; margin-bottom:32px}
.step-h{display:flex; align-items:center; gap:10px; flex:1}
.step-h__n{width:34px; height:34px; border-radius:50%; background:var(--bg-3); color:var(--ink-3);
  display:grid; place-items:center; font-weight:750; font-size:14px; flex-shrink:0}
.step-h.is-done .step-h__n{background:var(--success); color:#fff}
.step-h.is-now .step-h__n{background:var(--brand); color:#fff; box-shadow:0 0 0 5px var(--brand-soft)}
.step-h__t{font-size:14px; font-weight:650; color:var(--ink-3)}
.step-h.is-now .step-h__t,.step-h.is-done .step-h__t{color:var(--ink)}
/* Последний шаг не растягиваем: линии между шагами и так забирают всё
   свободное место, а растянутый последний блок оставлял пустоту справа —
   полоса выглядела сдвинутой влево. Замечание Александра 14.08.2026. */
.step-h:last-child{flex:0 0 auto}
.step-h__line{flex:1; height:2px; background:var(--line); margin:0 12px}
.step-h.is-done .step-h__line{background:var(--success)}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto}
.tabs a,.tabs button{padding:12px 16px; border:0; background:transparent; font-size:15px; font-weight:650;
  color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:.15s}
.tabs a:hover,.tabs button:hover{color:var(--ink)}
.tabs .is-active{color:var(--brand-700); border-bottom-color:var(--brand)}
.tabs .cnt{background:var(--bg-3); color:var(--ink-3); font-size:11.5px; font-weight:750; border-radius:var(--r-pill); padding:1px 7px; margin-left:6px}

.pager{display:flex; align-items:center; justify-content:center; gap:6px; margin-top:32px}
.pager a,.pager span{min-width:42px; height:42px; padding:0 12px; border-radius:var(--r-s); border:1px solid var(--line);
  background:#fff; display:grid; place-items:center; font-size:14.5px; font-weight:650}
.pager a:hover{border-color:var(--brand-line); color:var(--brand-700)}
.pager .is-active{background:var(--ink); border-color:var(--ink); color:#fff}
.pager .gap{border:0; background:transparent}

.modal{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:20px}
.modal.is-open{display:flex}
.modal__bg{position:absolute; inset:0; background:rgba(20,22,43,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.modal__box{position:relative; background:#fff; border-radius:var(--r-xl); width:100%; max-width:460px; padding:34px;
  box-shadow:var(--sh-4); max-height:92vh; overflow-y:auto}
.modal__box--lg{max-width:720px}
.modal__close{position:absolute; top:16px; right:16px; width:34px;height:34px; border-radius:50%; border:0;
  background:var(--bg-2); cursor:pointer; font-size:17px; color:var(--ink-3)}
/* При наведении — розовым, как крестик панели брони. 24.09.2026, Александр:
   «хочу, когда наводишь на крестик, становился розовым». Закрывающее
   действие у нас одного цвета везде. */
.modal__close{transition:background .15s, color .15s}
.modal__close:hover{background:var(--danger-soft); color:var(--danger)}
.modal__ico{width:58px;height:58px;margin-bottom:18px}
.modal h3{font-size:23px; margin-bottom:8px}
.code{display:flex; gap:9px; margin-bottom:18px}
.code input{width:100%; height:56px; text-align:center; font-size:22px; font-weight:700; border:1.5px solid var(--line);
  border-radius:var(--r-m); background:var(--bg-2)}
.code input:focus{outline:none; border-color:var(--brand); background:#fff}

.or{display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--ink-3); font-size:13px}
.or::before,.or::after{content:""; height:1px; flex:1; background:var(--line)}

.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:200;
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:var(--r-m); font-size:14.5px; font-weight:600;
  box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:.22s; display:flex; align-items:center; gap:10px}
.toast.is-on{opacity:1; transform:translateX(-50%)}

.mbar{display:none; position:fixed; bottom:0; left:0; right:0; z-index:55; background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:10px}
.mbar .btn{flex:1}

/* прогресс */
.prog{height:8px; background:var(--bg-3); border-radius:var(--r-pill); overflow:hidden}
.prog__f{height:100%; background:var(--brand); border-radius:var(--r-pill);
  transition:width .4s ease}

/* галерея объявления */
.gallery{display:grid; grid-template-columns:2fr 1fr; gap:10px; border-radius:var(--r-l); overflow:hidden}
.gallery__main{aspect-ratio:4/3}
.gallery__side{display:grid; grid-template-rows:1fr 1fr; gap:10px}
.gallery__side .ph{height:100%}
.gallery .ph{width:100%; height:100%}
.gallery__more{position:relative; cursor:pointer}
/* Затемнение с надписью «Ещё 5» лежит поверх снимка и перехватывало
   нажатие: палец попадал в него, а не в фотографию с ссылкой на просмотр,
   и ничего не открывалось. Насквозь — значит нажатие доходит до снимка. */
.gallery__more span{position:absolute; inset:0; display:grid; place-items:center; background:rgba(20,22,43,.5);
  color:#fff; font-weight:700; font-size:15px; pointer-events:none}

/* определения (характеристики) */
.dl{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.dl div{display:flex; align-items:baseline; gap:8px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.dl dt{color:var(--ink-3); font-size:14.5px; white-space:nowrap}
.dl dd{margin:0; font-weight:650; font-size:14.5px; text-align:right; margin-left:auto}
.dl i{flex:1; border-bottom:1px dotted var(--line); min-width:14px; align-self:center}

/* ------------------------ 17. АДАПТИВ ------------------------------------- */
@media (max-width:1180px){
  .fbar{flex-wrap:wrap}
  .fbar__right{margin-left:0; width:100%; gap:8px}
  /* Посуточная полоса: на широком экране кнопки прижаты вправо в общей
     строке, но когда места не хватает и строка ломается, они должны
     занимать её целиком — иначе висят в углу второй строки, а слева
     пустота. Правило повторено здесь, потому что снаружи `.fbar--stay`
     перебивает общее. */
  .fbar--stay .fbar__right{margin-left:0; width:100%}
  .fbar__right .btn--dark{flex:1}
  .fbar__sep{display:none}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .rowcard{grid-template-columns:220px 1fr; }
  .rowcard__side{width:auto; grid-column:1/-1; flex-direction:row; flex-wrap:wrap}
}
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .nav{display:none}
  /* Разделы прячутся с 1080, а кнопка меню раньше появлялась только с 720 —
     между ними шапка оставалась без единственного пути в «Снять», «Ищут
     жильё» и «Блог». Планшет в портрете и узкое окно на ноутбуке попадают
     ровно в эту щель. Кнопка встаёт там же, где исчезают разделы. */
  .burger{display:flex}
  /* На телефоне колонка одна, и растягивать её на весь экран незачем:
     под коротким содержимым остаётся мёртвая зона прокрутки. */
  .app{grid-template-columns:1fr; min-height:0}
  .side{position:fixed; left:0; top:0; bottom:0; height:auto; width:274px; z-index:150; transform:translateX(-100%); transition:.24s}
  .side.is-open{transform:none}
  .chat{grid-template-columns:1fr}
  .chat__list{display:none}
  .chat{height:calc(100vh - var(--header-h) - 66px)}
  .chat.show-list .chat__list{display:block}
  .chat.show-list .chat__pane{display:none}
}
@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr; gap:28px}
  .gallery{grid-template-columns:1fr}
  .gallery__side{grid-template-columns:1fr 1fr; grid-template-rows:none}
  .content{padding:18px}
  .topbar{padding:0 18px}
}
@media (max-width:720px){
  .sec{padding:44px 0}
  .cards{grid-template-columns:repeat(2,1fr); gap:14px}
  .cards--2,.cards--3{grid-template-columns:1fr}
  .card__body{padding:12px}
  .card__price{font-size:17px}
  .card__title{font-size:14px}
  .rowcard{grid-template-columns:1fr; gap:12px}
  .rowcard__media{aspect-ratio:16/10}
  .mbar{display:flex}
  body.has-mbar{padding-bottom:76px}
  /* Высота шапки задаётся переменной, а не самой полосой. К `--header-h`
     прилипают верхняя панель кабинета, полоса фильтров каталога и боковое
     меню; когда полоса становилась ниже, а переменная оставалась прежней,
     они прилипали на 8px ниже её края — в щель просвечивало содержимое. */
  :root{--header-h:62px}
  .header__in{gap:10px}
  .logo{font-size:18px}
  .city__btn{height:34px; padding:0 10px; font-size:13.5px}
  .city__btn svg:last-child{display:none}
  /* На телефоне из правой части шапки остаётся одно главное действие —
     и оно разное у гостя и у вошедшего: гостю «Войти через MAX», вошедшему
     «Разместить». Всё остальное («Кабинет», «В панель») живёт в выдвижном
     меню: туда ходят не с каждой страницы, а «В панель» вдобавок распирала
     шапку шире экрана, и страница уезжала вбок.

     Раньше здесь пряталось вообще всё, включая вход, и телефон шире 396
     точек оставался без единственной двери на сайт: у гостя в шапке были
     только полоски. Ниже 396 вход показывали обратно — одна и та же шапка
     на двух соседних размерах экрана выглядела по-разному. */
  .header__right .btn--ghost,.header__right .btn--dark,
  .header__right .uchip,.header__right .iconbtn{display:none}
  .header__right .btn--max,.header__right .btn--primary{height:36px; padding:0 13px; font-size:13.5px}
  /* Конверт остаётся на виду и на телефоне: «Разместить» и «Кабинет»
     уезжают в меню, а сообщения важнее — о новом человек должен узнавать
     сразу, а не открыв меню. Место у бургера рабочее: палец дотягивается. */
  .header__right .iconbtn--mail{display:inline-flex}
  .topbar{padding:0 16px; height:58px}
  .topbar h1{font-size:18px}
  .ftabs{width:100%}
  .ftab{flex:1; padding:0 10px; font-size:14px}
  .tip{left:auto; right:0; top:calc(100% + 10px); transform:translateY(4px) scale(.96)}
  .tip::before{left:auto; right:22px; top:-4px; margin-top:0}
  .tip.is-on{transform:translateY(0) scale(1)}
  .fbar{flex-direction:column; align-items:stretch; gap:2px; padding:6px}
  .fbar__f{justify-content:flex-start; height:44px}
  .fbar__right{flex-wrap:wrap; margin-top:6px}
  .fbar__right .btn{flex:1; height:46px}
  /* На телефоне строка складывается в столбик, и подпись даты перестаёт
     тесниться рядом с самим полем. */
  .fbar__f--date{justify-content:flex-start}
  .fbar__right .fbar__f{width:100%; background:#fff}
  .chips{gap:6px}
  .chip{font-size:13px; padding:7px 12px}
  .sec__cta{margin-top:24px}
  .sec__cta .btn{min-width:0; width:100%}
  .tiles{grid-template-columns:1fr 1fr; gap:12px}
  .tile{padding:15px}
  .tile__v{font-size:25px}
  .drawer__panel{width:100%}
  .msg{max-width:86%}
  .panel__body{padding:16px}
  .panel__head{padding:15px 16px}
  .modal__box{padding:26px 20px}
  /* Кольцо активного шага — это тень за пределами кружка, а `overflow-x`
     её срезает: у первого шага контур выглядел обрезанным слева. Даём
     кольцу место отступом и возвращаем полосу на место отрицательным
     полем, иначе кружок разъедется с карточкой ниже. */
  .steps-h{overflow-x:auto; padding:6px 6px 8px; margin-left:-6px; margin-right:-6px}
  .step-h__t{display:none}
  .step-h__line{margin:0 6px}
}
/* Шапка на телефоне: две строки, обе занятые.

   История правок здесь длинная, и каждая чинила свой угол: 13.08.2026
   конверт с бургером упирались в край, 14.08.2026 город выдавливал их за
   край, 15.08.2026 вторая строка пустовала, 26.08.2026 у гостя бургер висел
   посреди пустоты. Заплатки складывались в шапку, которая на 390 точках
   выглядела одним образом, на 414 — другим, а у гостя и у вошедшего
   по-разному в обоих случаях. Поэтому раскладка собрана заново и одна на
   все телефоны.

   Строка первая — кто мы и где: логотип и город стоят связкой слева,
   конверт с бургером прижаты к правому краю. Пустоты между логотипом и
   бургером больше нет: её занял город.
   Строка вторая — одно главное действие во всю ширину. У гостя это «Войти
   через MAX», у вошедшего «Разместить». Обе строки заняты, и обе выглядят
   одинаково устроенными независимо от того, вошёл человек или нет.

   Порог 560px — ширина, ниже которой строка перестаёт помещаться: логотип
   133, город 66, конверт с бургером 84, кнопка входа 155 и отступы дают
   около 510 при доступных 520. Выше порога всё это стоит одной строкой.

   `display:contents` у правого блока распускает его детей в саму шапку —
   иначе кнопку не переставить, не трогая разметку; псевдоэлемент шириной
   во всю строку гарантирует перенос там, где мы его задумали, а не там,
   где сойдётся ширина. Порядок задаётся `order`: в HTML город стоит вторым,
   и на широком экране он должен там и остаться.

   `--header-h` переопределяется здесь же и по той же причине, что этажом
   выше: к нему прилипает всё, что висит под шапкой — верхняя панель
   кабинета, полоса фильтров каталога, боковое меню. 8 + 42 + 8 + 40 + 8. */
@media (max-width:560px){
  :root{--header-h:106px}
  .logo{font-size:17px}
  /* Булавка в плашке города здесь лишняя: слово «Воронеж» и так о городе,
     а её 21 точка — разница между «Воронеж» целиком и «Во…» в обрезке. */
  .city__btn{padding:0 10px}
  .city__btn svg:first-child{display:none}
  /* Сетка, а не перенос строки флексом: при `flex-wrap` элемент переносится
     целиком, как только перестаёт помещаться, — и город с длинным именем
     срывал бургер на третью строку вместо того, чтобы ужаться самому.
     В сетке место каждого задано явно, а городу отведена единственная
     тянущаяся колонка, которой разрешено сжиматься до нуля. Отступы —
     полями, а не `column-gap`: у гостя значка сообщений нет вовсе, и зазор
     остался бы висеть пустым у правого края. */
  .header__in{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
    align-content:center; row-gap:8px; column-gap:0; padding-top:8px; padding-bottom:8px}
  .header__right{display:contents}
  .logo{grid-column:1; grid-row:1; margin-right:10px}
  .city{grid-column:2; grid-row:1; justify-self:start; min-width:0; max-width:100%}
  .header__right .iconbtn--mail{grid-column:3; grid-row:1; margin-left:8px}
  .burger{grid-column:4; grid-row:1; margin-left:8px}
  .header__right .btn--max,.header__right .btn--primary{grid-column:1/-1; grid-row:2;
    height:40px; padding:0 14px; font-size:14.5px}
}

/* Совсем узкие экраны: 320–360 точек. Логотип с городом и парой значков
   в одну строку там сходятся впритык, поэтому ужимаем саму строку.
   Булавка в плашке города здесь лишняя: слово «Воронеж» и так о городе. */
@media (max-width:380px){
  .logo{font-size:16px; margin-right:7px}
  .city__btn{padding:0 7px; font-size:13px}
  .iconbtn,.burger{width:38px; height:38px}
  .header__right .iconbtn--mail,.burger{margin-left:6px}
}

@media (max-width:460px){
  .cards{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
}


/* ---------- Бесшовный вход через Max ---------- */
.qrbox{display:flex; align-items:center; gap:16px; margin-top:18px; padding:16px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-m)}
.qrbox__q{width:104px; height:104px; padding:7px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-s); flex-shrink:0}
.qr{width:100%; height:100%; display:block}
.qrbox b{font-size:14.5px}

.waitico{position:relative; width:64px; height:64px; margin-bottom:20px}
.waitico .mxico{position:absolute; inset:8px; border-radius:28%}
.waitico__ring{position:absolute; inset:0; border-radius:20px; border:2.5px solid var(--brand-line);
  border-top-color:var(--brand); animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.waitbox{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-m); padding:6px 14px; margin-bottom:20px}
.waitbox__row{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line)}
.waitbox__row:last-child{border-bottom:0}
.waitbox__row b{display:block; font-size:14.5px}
.waitbox__row span{font-size:12.5px; color:var(--ink-3)}
.waitbox__row.is-ok b{color:var(--success)}
.waitdot{width:18px; height:18px; border-radius:50%; flex-shrink:0; margin-top:2px; position:relative;
  background:var(--bg-3); border:2px solid var(--line)}
.waitdot.is-done{background:var(--success); border-color:var(--success)}
.waitdot.is-done::after{content:""; position:absolute; left:4px; top:1px; width:5px; height:9px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg)}
.waitdot.is-live{background:var(--brand); border-color:var(--brand); animation:pulse 1.4s infinite}

.lnk{border:0; background:none; padding:0; color:var(--brand); font:inherit; text-decoration:underline; cursor:pointer}

@media (max-width:460px){
  .qrbox{flex-direction:column; text-align:center}
}

/* печать */
@media print{
  .header,.footer,.side,.topbar,.mbar,.drawer,.modal,.no-print{display:none !important}
  body{background:#fff}
  .panel{border:0; box-shadow:none}
}


/* ============================================================================
   18. КОМПОНЕНТЫ ГЛАВНОЙ СТРАНИЦЫ
   ============================================================================ */
.hero{position:relative; padding:52px 0 56px; background:
  radial-gradient(900px 380px at 12% -10%, #EFECFF 0%, rgba(239,236,255,0) 62%),
  radial-gradient(700px 340px at 92% 0%, #E8F5FF 0%, rgba(232,245,255,0) 60%), #fff;
  border-bottom:1px solid var(--line-2)}
.hero h1{font-size:clamp(30px,4.4vw,50px); max-width:16ch}
.hero__top{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:56px; align-items:start}
.hero__lead{margin-top:14px; font-size:18px; color:var(--ink-2); max-width:56ch}
.hero__stats{display:flex; flex-wrap:wrap; gap:8px 10px; margin-top:20px}
/* 30.09.2026, снимок Александра с arenda-123.ru: пустой каталог показывает
   длинную плашку «Каталог наполняется — …», а посуточный `.pill` ниже по
   файлу ставит всем плашкам flex:none — она не сжималась, вылезала за
   экран, и телефон уменьшал всю страницу. В шапке плашка сжимается. */
.hero__stats .pill{flex:0 1 auto; min-width:0; background:#fff; border-radius:var(--r-pill); padding:7px 14px}
.hero__stats .dot{flex:none}
.pill{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); padding:7px 14px; font-size:13.5px; font-weight:600; color:var(--ink-2); box-shadow:var(--sh-1)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}
.hero .ftabs{margin-top:26px}
.hero .fbar{margin-top:14px}
.hero .chips{margin-top:22px}

/* большие кнопки каналов */
.channels{display:grid; gap:12px; align-content:start}
.channels__t{font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); margin-bottom:2px}
.channels__t span{text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink-4)}
.chan{display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:var(--r-l);
  color:#fff; box-shadow:var(--sh-2); transition:transform .16s, box-shadow .16s; position:relative; overflow:hidden}
.chan:hover{transform:translateY(-2px); box-shadow:var(--sh-3)}
.chan__ico{width:44px; height:44px; border-radius:26%; background:rgba(255,255,255,.18); display:grid; place-items:center; flex-shrink:0}
.chan__ico svg{width:26px; height:26px; fill:#fff}
.chan b{display:block; font-size:16.5px; font-weight:700; letter-spacing:-.01em}
.chan span{font-size:13px; opacity:.82}
.chan__go{margin-left:auto; opacity:.7; flex-shrink:0}
.chan__go svg{width:20px; height:20px; stroke:#fff; fill:none; stroke-width:2}
.chan--max{background:linear-gradient(120deg,#9B7BFF 0%,#6C5CFF 50%,#4B57FF 100%)}
.chan--vk{background:linear-gradient(120deg,#3E9BFF,#0077FF)}
.chan--tg{background:linear-gradient(120deg,#48C4F2,#0A88C9)}

/* шаги */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:26px}
.step__n{width:38px;height:38px;border-radius:12px; background:var(--brand-soft); color:var(--brand-700);
  display:grid; place-items:center; font-weight:800; font-size:16px; margin-bottom:16px}
.step h3{font-size:18px; margin-bottom:8px}
.step p{color:var(--ink-2); font-size:15px}

/* блок для собственника */
.owner{background:linear-gradient(135deg,#1B1740 0%, #302A6E 55%, #4A3AFF 130%); color:#fff;
  border-radius:var(--r-xl); padding:46px; position:relative; overflow:hidden}
.owner::after{content:""; position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.06)}
.owner__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; position:relative; z-index:1}
.owner h2{font-size:clamp(24px,3vw,36px)}
.owner p{color:rgba(255,255,255,.78); margin-top:14px; font-size:17px}
.owner__list{margin-top:22px; display:grid; gap:11px}
.owner__list li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:rgba(255,255,255,.92)}
.owner__list .ok{flex-shrink:0; width:22px;height:22px;border-radius:50%; background:rgba(255,255,255,.14); display:grid; place-items:center; margin-top:1px}
.owner__list .ok svg{width:12px;height:12px;stroke:#fff;stroke-width:2.6;fill:none}
.owner__cta{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}

.spread{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-l); padding:24px}
.spread__t{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.6); font-weight:700; margin-bottom:16px}
.spread__row{display:flex; align-items:center; gap:12px; padding:12px 14px; background:rgba(255,255,255,.08); border-radius:var(--r-m); margin-bottom:8px}
.spread__row:last-child{margin-bottom:0}
.spread__row b{display:block; font-size:14.5px}
.spread__row div span{font-size:12.5px; color:rgba(255,255,255,.62)}
.spread__arrow{display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.45); font-size:11.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:16px 0 12px}
.spread__arrow::before,.spread__arrow::after{content:""; height:1px; flex:1; background:rgba(255,255,255,.16)}
.spread__grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.spread__grid .spread__row{margin-bottom:0}
.spread__src{display:grid; grid-template-columns:1fr 1fr; gap:8px}

/* цифры доверия */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap)}
.trust__i .num{font-size:34px; font-weight:800; letter-spacing:-.03em; color:var(--brand)}
.trust__i p{color:var(--ink-2); font-size:14.5px; margin-top:4px}

/* перелинковка */
.seo-links{display:grid; grid-template-columns:repeat(4,1fr); gap:28px 32px}
.seo-links h3{font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:12px}
.seo-links li{margin-bottom:7px}
.seo-links a{font-size:14.5px; color:var(--ink-2)}
.seo-links a:hover{color:var(--brand)}

/* FAQ */
.faq{max-width:820px; margin:0 auto}
.faq details{border:1px solid var(--line); border-radius:var(--r-m); background:#fff; margin-bottom:10px; overflow:hidden}
.faq summary{padding:18px 22px; cursor:pointer; font-weight:650; font-size:16.5px; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--ink-3); flex-shrink:0}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{color:var(--brand-700)}
.faq p{padding:0 22px 20px; color:var(--ink-2); font-size:15.5px}

/* SEO-текст */
.seotext{max-width:860px; color:var(--ink-2); font-size:15px; line-height:1.7}
.seotext h2{font-size:22px; color:var(--ink); margin-bottom:14px}
.seotext h3{font-size:17px; color:var(--ink); margin:22px 0 8px}
.seotext p{margin-bottom:12px}

.modal__note{font-size:13px; color:var(--ink-3); text-align:center; margin-top:16px}
.modal__note a{color:var(--brand); text-decoration:underline}

@media (max-width:1180px){
  .hero__top{grid-template-columns:minmax(0,1fr) 320px; gap:36px}
}
@media (max-width:1080px){
  .seo-links{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:880px){
  .owner__grid{grid-template-columns:1fr; gap:30px}
  .owner{padding:32px 24px}
  .hero__top{grid-template-columns:1fr; gap:28px}
  .channels{grid-template-columns:repeat(3,1fr); gap:10px}
  .chan{padding:14px 16px; gap:11px}
  .chan__ico{width:38px;height:38px}
  .chan__go{display:none}
  .chan b{font-size:15px}
  .chan span{font-size:12px}
  .trust{grid-template-columns:repeat(2,1fr); gap:26px}
  .steps{grid-template-columns:1fr}
  .spread__grid,.spread__src{grid-template-columns:1fr}
}
@media (max-width:720px){
  .hero{padding:26px 0 32px}
  .hero__lead{font-size:16px}
  .channels{grid-template-columns:1fr}
  .chan__go{display:block}
}

/* ==========================================================================
   Дополнения к дизайн-системе прототипа
   --------------------------------------------------------------------------
   Ниже — то, чего в prototype/assets/app.css нет и не будет: прототип рисовал
   фильтры кнопками на скриптах, а в работающем каталоге это настоящая форма.
   Отсюда чекбоксы, притворяющиеся чипсами, и скрытая подпись для селекта.
   Всё выше этой черты держим байт в байт как в прототипе.
   ========================================================================== */

/* Чипса-переключатель. Сам input не убираем из потока насовсем: он должен
   ловить фокус с клавиатуры, иначе фильтр недоступен без мыши. */
.chip--check{position:relative; cursor:pointer; display:inline-flex; align-items:center}
.chip--check input{position:absolute; opacity:0; width:100%; height:100%; left:0; top:0; margin:0; cursor:pointer}
.chip--check:has(input:checked){background:var(--ink); border-color:var(--ink); color:#fff}
.chip--check:has(input:focus-visible){outline:2px solid var(--brand); outline-offset:2px}

/* Подпись только для скринридера: у селекта сортировки видимой метки нет —
   рядом с ним и так кнопка «Показать», и вторая строка текста лишняя. */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Настоящая фотография в карточке выдачи — в прототипе там был градиент. */
.rowcard__media img{width:100%; height:100%; object-fit:cover; display:block}

/* Настоящие снимки в галерее карточки — прототип рисовал их градиентами. */
.gallery img{width:100%; height:100%; object-fit:cover; display:block}
.strip__i img{width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--r-s)}

/* Панель поиска на главной — настоящая форма. В прототипе там были кнопки
   с выпадающими меню на скриптах; здесь <select>, потому что фильтр обязан
   работать и без JS. Родную стрелку убираем и рисуем свою — иначе три
   поля выглядят как три разных элемента управления. */
select.fbar__f{
  appearance:none; -webkit-appearance:none;
  padding-right:40px; max-width:100%;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:13px;
}
select.fbar__f:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ==========================================================================
   Постраничные стили из прототипа.

   В прототипе они лежали в <style> внутри каждой страницы, и при переносе
   дизайн-системы уехал только общий app.css — из-за этого каталог, карточка,
   кабинет и форма подачи остались без половины своей вёрстки. Собраны сюда
   как есть, без правок: расходиться с макетом им незачем.
   ========================================================================== */
/* --- из прототипа: catalog.html --- */
.catbar{position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.pad-b{padding-bottom:56px}
.split{display:grid; grid-template-columns:minmax(0,1fr) 46%; gap:20px; align-items:start}
.split__list{display:flex; flex-direction:column; gap:16px}
.split__map{position:sticky; top:calc(var(--header-h) + 190px); height:calc(100vh - var(--header-h) - 220px); min-height:520px}
.promo-inline{display:flex; align-items:center; gap:20px; background:var(--brand-soft);
  border:1px solid var(--brand-line); border-radius:var(--r-l); padding:20px 22px}
.promo-inline b{font-size:16.5px}
/* Заметное сообщение внутри списка — сейчас это просьба открыть чат с
   ботом в мини-приложении. Тон предупреждающий, а не рекламный: без
   этого шага человек не узнает ни решения модерации, ни отклика. */
.notice{background:var(--warn-soft); border:1px solid var(--warn);
  border-radius:var(--r-l); padding:16px 18px}
.notice b{display:block; color:var(--warn); font-size:16px; margin-bottom:6px}
.notice p{color:var(--ink-2)}

/* Чего ждут от человека по его объявлению. Не серым и не мелким: это
   единственное действие на карточке. */
.ask{margin-top:6px; padding:8px 10px; border-radius:var(--r-m);
  background:var(--warn-soft); color:var(--warn); font-size:14px; line-height:1.45}

/* «Доделайте объявление» — не предупреждение, а приглашение: тон другой,
   форма та же. */
.notice--do{background:var(--brand-soft); border-color:var(--brand-line)}
/*
  Короткое предупреждение в одну-две строки — не рамкой на пол-экрана.

  30.08.2026, Александр про строчку о VPN: «выдели цветом». Она стояла
  серой подписью под кнопкой и терялась ровно там, где нужна: человек
  нажимает «Оплатить», уходит в браузер и видит белый экран.
*/
.warnline{display:block; padding:9px 12px; border-radius:var(--r-s);
  background:var(--warn-soft); border:1px solid var(--warn);
  color:var(--warn); font-size:13px; font-weight:600; line-height:1.4}
/*
  «Готово» — зелёной строкой с галочкой.

  30.08.2026, Александр про экран после публикации: «сделай какую-то
  наладку зелёную, что всё ок». Слова «Объявление опубликовано» серым по
  белому не читаются как успех: человек только что прошёл пять шагов и
  ждёт подтверждения, а не сводки.
*/
.done{display:flex; gap:10px; align-items:flex-start; padding:12px 14px;
  border-radius:var(--r-m); background:var(--success-soft);
  border:1px solid var(--success); color:var(--ink); line-height:1.45}
.done__tick{flex-shrink:0; width:22px; height:22px; border-radius:50%;
  background:var(--success); color:#fff; font-size:13px; font-weight:800;
  display:grid; place-items:center; line-height:1}
.done b{display:block; color:var(--success); font-size:15.5px; margin-bottom:2px}
.done p{font-size:13.5px; color:var(--ink-2)}
.notice--do b{color:var(--brand)}

.seo-block{max-width:900px; margin-top:48px; color:var(--ink-2); font-size:15px; line-height:1.7}
.seo-block h2{font-size:21px; color:var(--ink); margin-bottom:12px}
.seo-block p{margin-bottom:10px}
.split .rowcard{grid-template-columns:200px 1fr}
.split .rowcard__side{grid-column:1/-1; width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding:0}
.split .rowcard__side .btn{flex:1; min-width:145px}
.split .rowcard__side > div{width:100%}
.split .rowcard__desc{-webkit-line-clamp:2}
@media (max-width:1180px){
  .split{grid-template-columns:1fr}
  .split .rowcard{grid-template-columns:280px 1fr auto}
  .split .rowcard__side{grid-column:auto; width:210px; flex-direction:column}
  .split__map{position:relative; top:0; height:480px; min-height:0; order:-1}
}
@media (max-width:720px){
  .catbar{position:static}
  .seg button{padding:0 12px; font-size:13.5px}
  .split .rowcard,.rowcard{grid-template-columns:1fr}
  .split .rowcard__side,.rowcard__side{width:auto; grid-column:auto; flex-direction:row; flex-wrap:wrap}
  .promo-inline{flex-direction:column; align-items:stretch; text-align:left}
}

/* --- из прототипа: listing.html --- */
/* Отступ сверху обязателен: шапка липкая и полупрозрачная, а первым идёт
   галерея во всю ширину. Без воздуха фотография подъезжает вплотную и
   просвечивает сквозь шапку — страница выглядит как съехавшая вёрстка. */
.lay{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start;
  padding:28px 0 56px}
.lcol{min-width:0}
.aside{position:sticky; top:calc(var(--header-h) + 18px); display:flex; flex-direction:column; gap:14px}
/* галерея и стрип */
.gallery__main .ph{border-radius:var(--r-l) 0 0 var(--r-l)}
.strip{display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin-top:10px}
.strip__i{width:100%; aspect-ratio:4/3; padding:0; border:2px solid transparent; border-radius:12px;
  background:none; cursor:pointer; overflow:hidden; line-height:0}
.strip__i .ph{display:block; width:100%; height:100%; border-radius:9px}
.strip__i.is-on{border-color:var(--brand)}
.strip__i--more{border:1.5px dashed var(--brand-line); background:var(--bg-2); color:var(--brand);
  font-weight:750; font-size:15px; line-height:1; display:grid; place-items:center}
/* блоки */
.blk{padding:28px 0; border-top:1px solid var(--line)}
.blk--first{border-top:0}
.blk h1{font-size:clamp(23px,2.6vw,30px)}
.blk h2{font-size:21px; margin-bottom:16px}
.addr{display:flex; align-items:flex-start; gap:8px; color:var(--ink-2); font-size:15.5px}
.addr svg{width:18px; height:18px; flex-shrink:0; margin-top:3px; fill:var(--brand); opacity:.8}
.lnk{color:var(--brand); font-weight:600}
.lnk:hover{color:var(--brand-700); text-decoration:underline}
/* цена */
.pricebox{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-l); padding:22px}
.price-big{font-size:clamp(28px,3.4vw,36px); font-weight:800; letter-spacing:-.03em; line-height:1.1}
.price-big span{font-size:15px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.price-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line)}
.price-grid span{display:block; font-size:12.5px; color:var(--ink-3); margin-bottom:3px}
.price-grid b{font-size:15px; font-weight:700}
.price-grid .ok{color:var(--success)}
/* плитки удобств */
.ftiles{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.ftile{display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r-m); font-size:14.5px; font-weight:600; background:#fff}
.ftile svg{width:21px; height:21px; flex-shrink:0; stroke:var(--brand); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
/* описание */
.descr{font-size:16px; color:var(--ink-2); line-height:1.68; max-width:70ch}
.descr p{margin-bottom:12px}
.descr p:last-child{margin-bottom:0}
/* что рядом */
.near{margin-top:18px}
.near li{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:14.8px}
.near li:last-child{border-bottom:0}
.near b{margin-left:auto; padding-left:12px; font-size:13.5px; font-weight:650; color:var(--ink-3); white-space:nowrap}
.near__i{width:34px; height:34px; border-radius:10px; background:var(--brand-soft); display:grid;
  place-items:center; flex-shrink:0}
.near__i svg{width:19px; height:19px; stroke:var(--brand-700); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
/* автор */
.author{display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line);
  border-radius:var(--r-l); padding:20px}
.author__stats{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:10px; font-size:13.5px; color:var(--ink-3)}
.author__stats span{display:inline-flex; align-items:center; gap:7px}
.author__stats span::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--ink-4)}
/* безопасная сделка */
.safe{display:grid; gap:14px}
.safe li{display:flex; gap:14px; background:var(--bg-2); border-radius:var(--r-m); padding:16px 18px}
.safe__n{width:28px; height:28px; border-radius:50%; background:var(--brand); color:#fff; flex-shrink:0;
  display:grid; place-items:center; font-size:14px; font-weight:750}
.safe b{display:block; font-size:15.5px; margin-bottom:4px}
.safe p{font-size:14.5px; color:var(--ink-2)}
/* правая панель */
.acard{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:20px; box-shadow:var(--sh-1)}
.acard--soft{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-700); box-shadow:none}
.acard--quiet{background:var(--bg-2); box-shadow:none}
.acard__stats{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2)}
.acard__stats div{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:13.5px}
.acard__stats span{color:var(--ink-3)}
.acard__stats b{font-weight:700}
#favBtn.is-fav{color:#FF3B57}
/* модалка фото */
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:1080px){
  .lay{grid-template-columns:minmax(0,1fr); gap:8px}
  .aside{position:static; padding-bottom:24px}
  .ftiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .gallery__main .ph{border-radius:var(--r-l) var(--r-l) 0 0}
  .gallery__side > .ph,.gallery__side .gallery__more{aspect-ratio:4/3}
  .price-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  /* Отступ под нижнюю панель телефона. В прототипе он стоял на body
     страницы объявления; здесь стиль общий, поэтому привязан к классу —
     иначе пустая полоса внизу появилась бы на всех страницах сразу,
     а самой панели у нас пока нет. */
  body.has-mbar{padding-bottom:78px}
  .blk{padding:22px 0}
  .blk h2{font-size:19px}
  .pricebox{padding:16px}
  .ftiles{grid-template-columns:1fr}
  .ftile{padding:10px 12px}
  .author{flex-direction:column; gap:12px; padding:16px}
  .safe li{padding:14px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:repeat(4,1fr); gap:7px}
  /* Значок и адрес — в одну строку: 24.09.2026 на 390 px значок стоял
     отдельной строкой, а ссылка района уезжала с отступом — выглядело как
     поломка вёрстки. */
  .addr{flex-wrap:nowrap}
  .addr > span{flex:1 1 auto; min-width:0}
  .seg a{padding:0 11px; font-size:13.5px}
  .seg a .muted{display:none}
  .descr{font-size:15.5px}
  .near li{font-size:14px; align-items:flex-start}
  .near b{font-size:12.5px}
}

/* --- из прототипа: page.html --- */
.doc{font-size:16.5px; line-height:1.72; color:var(--ink-2); max-width:72ch}
.docsec{margin-top:38px; scroll-margin-top:100px}
.docsec h2{font-size:21px; color:var(--ink); margin-bottom:14px; display:flex; gap:12px; align-items:baseline; line-height:1.3}
.doc p{margin-bottom:14px}
.doc p:last-child{margin-bottom:0}
.doc b{color:var(--ink); font-weight:700}
.docn{display:inline-grid; place-items:center; min-width:28px; height:28px; padding:0 6px; border-radius:9px;
  background:var(--brand-soft); color:var(--brand-700); font-size:13.5px; font-weight:750; flex-shrink:0;
  transform:translateY(-1px)}
.doctoc a{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r-s);
  font-size:15px; color:var(--ink-2); font-weight:600}
.doctoc a:hover{background:var(--bg-2); color:var(--brand-700)}
.doctoc{display:grid; grid-template-columns:1fr 1fr; gap:2px 18px}
.docmeta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; font-size:14px; color:var(--ink-3)}
.docmeta > span{display:inline-flex; align-items:center; gap:6px}
.docmeta i{width:3px; height:3px; border-radius:50%; background:var(--ink-4); display:inline-block}
.docdocs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.docdoc{display:flex; gap:14px; align-items:flex-start; padding:18px; border:1px solid var(--line);
  border-radius:var(--r-l); background:#fff; transition:.15s}
.docdoc:hover{border-color:var(--brand-line); box-shadow:var(--sh-2)}
.docdoc__i{width:40px; height:40px; border-radius:12px; background:var(--brand-soft); color:var(--brand-700);
  display:grid; place-items:center; flex-shrink:0}
.docdoc b{font-size:15px; display:block; color:var(--ink); margin-bottom:3px}
.docdoc span{font-size:13px; color:var(--ink-3)}
/*
  Коробка выбора при подаче: платное размещение в соцсетях.

  Своя, а не `.askbox`: та стоит в конце длинных страниц отдельным блоком с
  большими полями, а эта живёт внутри формы и должна читаться как её часть.
  Рамка чуть заметнее обычной — это единственное место в мастере, где
  нажатие стоит денег, и оно не должно теряться среди полей.
*/
.paybox{border:1.5px solid var(--brand-line); background:var(--brand-soft);
  border-radius:var(--r-m); padding:16px 18px}
.paybox b{font-size:15px}
.paybox input[type=checkbox]{width:18px; height:18px; accent-color:var(--brand); flex:0 0 auto}

.askbox{display:flex; align-items:center; gap:24px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:26px 30px; margin-top:24px}
.askbox b{font-size:19px; display:block}
.askbox p{color:var(--ink-2); font-size:15px; margin-top:6px}
@media (max-width:900px){
  .doctoc{grid-template-columns:1fr}
  .docdocs{grid-template-columns:1fr}
  .askbox{flex-direction:column; align-items:flex-start; gap:16px}
}
@media (max-width:720px){
  .doc{font-size:16px}
  .docsec h2{font-size:19px}
  .askbox{padding:20px 18px}
  .askbox .btn{width:100%}
}

/* --- из прототипа: cabinet.html --- */
.hi{margin-bottom:20px}
.hi h2{font-size:clamp(22px,2.6vw,28px)}
.hi p{color:var(--ink-3); margin-top:6px; font-size:15px}
.stack{display:grid; gap:18px}
.pgrid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; align-items:start}
.topbar h1{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.metrics{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.metrics b{color:var(--ink); font-weight:700}
.metrics span{display:inline-flex; align-items:center; gap:6px}
.metrics svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; flex-shrink:0}
/* выпадающее меню действий */
.menu{position:relative}
.menu__list{position:absolute; right:0; top:calc(100% + 6px); min-width:218px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sh-3); padding:6px; display:none; z-index:45}
.menu.is-open .menu__list{display:block}
.menu__list a,.menu__list button{display:flex; width:100%; align-items:center; gap:10px; padding:9px 11px; border:0;
  background:transparent; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left}
.menu__list a:hover,.menu__list button:hover{background:var(--bg-2)}
.menu__list .is-danger{color:var(--danger)}
.menu__sep{height:1px; background:var(--line-2); margin:5px 4px}
.show-xs{display:none}
@media (max-width:1180px){.pgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .topbar h1{font-size:17px}
  .hide-xs{display:none !important}
  .show-xs{display:inline-flex}
  .topbar{padding:0 14px; gap:10px}
  /* Заголовок страницы на телефоне убран совсем. 23.09.2026, Александр
     перечеркнул его на снимке: «убери сегодня из мобильной версии,
     сделай нормальной ширины гармошку, а кнопки распредели нормально».
     От заголовка всё равно оставалось «Се…» и «Ша…» — два символа, по
     которым ничего не понять, а место они забирали у кнопок, ради
     которых сюда и смотрят. Какой это экран, видно по самому экрану. */
  .topbar h1{display:none}
  .topbar .iconbtn{flex-shrink:0}
  .topbar__r{margin-left:0; flex:1; gap:8px}
  /* Кнопки делят строку поровну — иначе «Сделать подборку» вытесняет
     «Шахматку» в две буквы. */
  .topbar__r > .btn{flex:1; min-width:0; padding-left:10px; padding-right:10px;
    justify-content:center; white-space:nowrap}
  .panel__head{flex-wrap:wrap; gap:10px}
  .panel__head .seg{margin-left:0}
  .chart text{font-size:17px}
}
.tile__t svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.mini{display:grid; grid-template-columns:82px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:14px 22px; border-bottom:1px solid var(--line-2)}
.mini:last-child{border-bottom:0}
.mini__m{aspect-ratio:4/3; border-radius:10px; overflow:hidden}
.mini__m .ph{width:100%;height:100%}
.mini__t{font-size:15px; font-weight:650; line-height:1.3}
.mini__t:hover{color:var(--brand-700)}
.mini__act{display:flex; gap:8px; flex-shrink:0}
.dlg{display:flex; gap:12px; padding:13px 22px; border-bottom:1px solid var(--line-2)}
.dlg:last-child{border-bottom:0}
.dlg:hover{background:var(--bg-2)}
.dlg__b{min-width:0; flex:1}
.todo{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line-2)}
.todo:last-child{border-bottom:0}
.todo__i{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--bg-3)}
.todo__i svg{width:13px;height:13px;fill:none;stroke:var(--ink-4);stroke-width:2.6}
.todo.is-done .todo__i{background:var(--success)}
.todo.is-done .todo__i svg{stroke:#fff}
.todo b{display:block; font-size:14.5px; font-weight:650}
.todo p{font-size:13px; color:var(--ink-3); margin-top:2px}
.todo.is-done b{color:var(--ink-3); text-decoration:line-through}
.sprd{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.sprd__i{border:1px solid var(--line); border-radius:var(--r-m); padding:14px; background:var(--bg-2)}
.sprd__i b{display:block; font-size:20px; font-weight:800; margin-top:10px; letter-spacing:-.02em}
.sprd__i span{font-size:12.5px; color:var(--ink-3)}
.sprd__i .appico--web{border:1px solid var(--line)}
.chart{max-height:300px}
@media (max-width:900px){.sprd{grid-template-columns:1fr 1fr}}
@media (max-width:620px){
  .mini{grid-template-columns:70px minmax(0,1fr); padding:14px 16px}
  /*
    Кнопки переносятся, а не режутся по краю.

    29.08.2026: рядом с «Редактировать» и «Снять» появилось «Поднять · 200 ₽»,
    и втроём они в 390 не поместились — «Снять» уезжала за экран целиком, а
    «Редактировать» обрывалась на середине слова. Пока кнопок было две, ряд
    сходился, и `flex:1` этого не показывал.

    `flex:1 1 auto` вместо `flex:1`: три кнопки в одну строку не втискиваем,
    каждая занимает по надписи и переносится, когда места нет.
  */
  .mini__act{grid-column:1/-1; flex-wrap:wrap}
  .mini__act .btn{flex:1 1 auto}
  .mini__act form{flex:1 1 auto; display:flex}
  .mini__act form .btn{width:100%}
  .dlg{padding:13px 16px}
}

/* --- из прототипа: cabinet-listings.html --- */
.lrow{display:grid; grid-template-columns:200px minmax(0,1fr) 210px; gap:18px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-l); padding:14px; margin-bottom:14px}
.lrow:hover{box-shadow:var(--sh-2); border-color:var(--brand-line)}
.lrow__m{position:relative; aspect-ratio:4/3; border-radius:var(--r-m); overflow:hidden}
.lrow__m .ph{width:100%;height:100%}
.lrow__t{font-size:17px; font-weight:700; display:block; margin-top:8px}
.lrow__t:hover{color:var(--brand-700)}
.lrow__p{font-size:22px; font-weight:800; letter-spacing:-.025em; margin-top:10px}
.lrow__p span{font-size:13px; font-weight:600; color:var(--ink-3)}
.lrow__side{display:flex; flex-direction:column; gap:8px; justify-content:center}
.lrow__side .btn{width:100%}
.lrow__side .menu{width:100%}
.lrow--off .lrow__m{filter:grayscale(1); opacity:.6}
.lrow__foot{margin-top:12px; padding-top:11px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--ink-3)}
.tabs{margin-bottom:20px}
@media (max-width:900px){
  .lrow{grid-template-columns:150px minmax(0,1fr)}
  .lrow__side{grid-column:1/-1; flex-direction:row; flex-wrap:wrap}
  .lrow__side .btn{flex:1; width:auto; min-width:130px}
  .lrow__side .menu{flex:0 0 auto}
}
@media (max-width:620px){
  .lrow{grid-template-columns:minmax(0,1fr); padding:10px}
  .lrow__m{aspect-ratio:16/10}
  .lrow__p{font-size:20px}
}

/* --- из прототипа: cabinet-favorites.html --- */
.delta{font-size:12.5px; font-weight:700; border-radius:var(--r-pill); padding:3px 9px; display:inline-block; margin-top:8px}
.delta--down{background:var(--success-soft); color:var(--success)}
.delta--up{background:var(--danger-soft); color:var(--danger)}
.delta--same{background:var(--bg-3); color:var(--ink-3)}
.card--off{opacity:.72}
.card--off .card__media .ph{filter:grayscale(1)}
.card__off{position:absolute; inset:0; display:grid; place-items:center; background:rgba(20,22,43,.42)}
.card__off span{background:#fff; border-radius:var(--r-pill); padding:7px 15px; font-size:13px; font-weight:700}
.sechead{display:flex; align-items:center; gap:12px; margin:26px 0 14px}
.sechead h3{font-size:18px}
.sechead .line{flex:1; height:1px; background:var(--line)}

/* --- из прототипа: cabinet-searches.html --- */
.srch{padding:18px 22px; border-bottom:1px solid var(--line-2)}
.srch:last-child{border-bottom:0}
.srch__t{font-size:16.5px; font-weight:700}
.srch__t:hover{color:var(--brand-700)}
.srch__row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px;
  padding-top:14px; border-top:1px dashed var(--line)}
.srch__new{background:var(--brand); color:#fff; font-size:12px; font-weight:750; border-radius:var(--r-pill); padding:3px 10px}
.chan-row{display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-2)}
.chan-row:last-child{border-bottom:0}
.appico--mail{background:linear-gradient(140deg,#8A90AB,#565C7A)}
.chan-row b{display:block; font-size:15px}
.chan-row span{font-size:13px; color:var(--ink-3)}
.freq{display:inline-flex; gap:3px; background:var(--bg-3); border-radius:var(--r-pill); padding:3px}
.freq label{cursor:pointer}
.freq input{position:absolute; opacity:0}
.freq span{display:inline-flex; align-items:center; height:30px; padding:0 13px; border-radius:var(--r-pill);
  font-size:13px; font-weight:650; color:var(--ink-2)}
.freq input:checked + span{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}
@media (max-width:620px){.srch{padding:16px}}

/* --- из прототипа: cabinet-settings.html --- */
.avarow{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.avabig{width:88px; height:88px; border-radius:50%; background:linear-gradient(135deg,#9B7BFF,#4B57FF);
  color:#fff; display:grid; place-items:center; font-weight:750; font-size:32px; flex-shrink:0}
.maxcard{display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:var(--r-m);
  padding:16px; background:var(--bg-2)}
.maxcard b{display:block; font-size:15px; white-space:nowrap}
.maxcard span{font-size:13px; color:var(--ink-3); white-space:nowrap}
.setgrid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
.swrow{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-2)}
.swrow:last-child{border-bottom:0}
.swrow b{display:block; font-size:14.5px}
.swrow p{font-size:13px; color:var(--ink-3); margin-top:2px}
.swrow .sw{margin-left:auto; flex-shrink:0}
.ntbl td .sw{margin:0}
.ntbl td{text-align:center}
.ntbl td:first-child{text-align:left}
.ntbl th:not(:first-child){text-align:center}
@media (max-width:1080px){.setgrid{grid-template-columns:minmax(0,1fr)}}

/* --- из прототипа: add.html --- */
.lay{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:28px; align-items:start; padding-bottom:56px}
.steps-h .step-h{cursor:pointer}
.seg button{white-space:nowrap}
.panel__foot{justify-content:flex-start}
.panel__foot .right{margin-left:auto}
.blk-t{font-size:16px; font-weight:700; margin-bottom:14px}
/* подсказки адреса */
.sugg{border:1.5px solid var(--line); border-top:0; border-radius:0 0 var(--r-m) var(--r-m);
  background:#fff; box-shadow:var(--sh-2); padding:6px; margin-top:-4px; position:relative; z-index:2}
.sugg__i{display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border:0; background:transparent;
  border-radius:var(--r-s); text-align:left; cursor:pointer; font-size:15px}
.sugg__i:hover{background:var(--bg-2)}
.sugg__i.is-on{background:var(--brand-soft); color:var(--brand-700)}
.sugg__i svg{width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--ink-4); stroke-width:1.8}
.sugg__i.is-on svg{stroke:var(--brand)}
.sugg__i em{display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:1px}
.map__hint{position:absolute; left:14px; right:14px; bottom:34px; background:rgba(255,255,255,.95);
  border:1px solid var(--line); border-radius:var(--r-s); padding:9px 13px; font-size:13px;
  font-weight:600; color:var(--ink-2); box-shadow:var(--sh-1); z-index:3}
/* фото */
.photo--add{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  aspect-ratio:4/3; border:2px dashed var(--line); border-radius:var(--r-m); background:var(--bg-2);
  color:var(--ink-3); font-size:12.5px; font-weight:650; cursor:pointer}
.photo--add span{font-size:24px; line-height:1; color:var(--brand); font-weight:400}
.photo--add:hover{border-color:var(--brand-line); background:var(--brand-soft)}
/* платная опция */
.optbox{border:1.5px solid var(--brand-line); border-radius:var(--r-l); background:var(--brand-soft); overflow:hidden}
.optbox__top{display:flex; gap:14px; align-items:flex-start; padding:18px 20px}
.optbox__top b{font-size:16px}
.optbox__top .sw{margin-top:2px}
.optbox__top .sw__t{background:#fff; box-shadow:inset 0 0 0 1.5px var(--brand-line)}
.optbox__top .sw input:checked + .sw__t{background:var(--brand); box-shadow:none}
.optbox__foot{display:flex; align-items:center; gap:12px; padding:12px 20px; background:rgba(255,255,255,.6);
  border-top:1px solid var(--brand-line)}
.optbox__price{font-size:19px; font-weight:800; letter-spacing:-.02em}
/* куда попадёт */
.dest{display:grid; gap:10px}
.dest__row{display:flex; align-items:center; gap:14px; border:1px solid var(--line);
  border-radius:var(--r-m); padding:13px 16px; background:#fff}
.dest__row b{display:block; font-size:15px}
.dest__row span:not(.appico):not(.badge){font-size:13px; color:var(--ink-3)}
.dest__row .badge{flex-shrink:0}
/* Форма-обёртка вокруг кнопки в строке: без этого она занимает всю
   оставшуюся ширину и растаскивает строку. */
.dest__act{margin:0; flex-shrink:0}
/* правая колонка */
.acard{background:#fff; border:1px solid var(--line); border-radius:var(--r-l); padding:16px; box-shadow:var(--sh-1)}
.acard__t{font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); margin-bottom:12px}
.acard__prog{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2)}
.acard .card:hover{transform:none; box-shadow:none; border-color:var(--line)}
.tips{display:grid; gap:14px}
.tips li{display:flex; gap:11px}
.tips b{display:block; font-size:13.8px; font-weight:650; line-height:1.35}
.tips p{font-size:12.8px; color:var(--ink-3); margin-top:3px}
.tip__i{width:28px; height:28px; border-radius:9px; background:var(--warn-soft); display:grid;
  place-items:center; flex-shrink:0}
.tip__i svg{width:16px; height:16px; stroke:var(--warn); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
@media (max-width:1080px){
  .lay{grid-template-columns:minmax(0,1fr); gap:20px}
  .aside{position:static}
  .aside .card{max-width:420px}
}
@media (max-width:720px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .panel__foot{flex-wrap:wrap; gap:10px}
  .panel__foot .btn{flex:1; min-width:140px}
  .panel__foot .right{margin-left:0}
  .optbox__top{flex-wrap:wrap; padding:16px}
  .optbox__foot{padding:12px 16px}
  .dest__row{align-items:flex-start; gap:11px; padding:12px; flex-wrap:wrap}
  .dest__row .badge{margin-top:2px}
  .dest__row>.btn,
  .dest__act{flex:1 0 100%}
  .dest__row>.btn,
  .dest__act .btn{justify-content:center; width:100%}
  .photos{grid-template-columns:repeat(2,1fr)}
}
/* --- переработанная подача (макет 17.08.2026) --------------------------- */

/* Липкая полоса шагов. Раньше полоса `.steps-h` стояла в потоке страницы и
   уезжала вверх при прокрутке: на четвёртом экране человек уже не видел, где
   он и сколько осталось. Здесь она приклеена под шапкой, и в ней же живёт
   отметка автосохранения — «черновик сохранён» должно быть видно всегда, а
   не всплывать сообщением, которое исчезло, пока человек смотрел в поле. */
.savebar{position:sticky; top:var(--header-h); z-index:30; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); margin-bottom:22px}
.savebar__in{display:flex; align-items:center; gap:16px; padding:11px 0}
.savebar__steps{display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none;
  flex:1; min-width:0}
.savebar__steps::-webkit-scrollbar{display:none}
.sstep{display:flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:var(--r-pill);
  border:0; background:transparent; cursor:pointer; white-space:nowrap; font:inherit; font-size:13.5px;
  font-weight:600; color:var(--ink-3); transition:.15s; text-decoration:none}
.sstep:hover{background:var(--bg-2); color:var(--ink)}
.sstep--flat{cursor:default}
.sstep--flat:hover{background:transparent; color:var(--ink-3)}
.sstep__n{width:22px; height:22px; border-radius:50%; background:var(--bg-3); color:var(--ink-3);
  display:grid; place-items:center; font-size:12px; font-weight:750; flex-shrink:0}
.sstep__n svg{width:13px; height:13px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round;
  stroke-linejoin:round}
.sstep.is-done{color:var(--ink-2)}
.sstep.is-done .sstep__n{background:var(--success); color:#fff}
.sstep.is-now{background:var(--brand-soft); color:var(--brand-700)}
.sstep.is-now .sstep__n{background:var(--brand); color:#fff}
.saved{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-3);
  white-space:nowrap; font-weight:600}
.saved[hidden]{display:none}
.saved svg{width:15px; height:15px; fill:none; stroke:var(--success); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.savebar__bar{height:3px; background:var(--bg-3)}
.savebar__bar i{display:block; height:100%; background:var(--brand); border-radius:0 3px 3px 0;
  transition:width .35s}

/* Экран «С чего начнём»: три пути к одному и тому же объявлению. */
.qstart{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
/* Развилка подачи: дверей две, и в трёхколоночной сетке они висели,
   оставляя пустую треть. Правило стоит выше узкого экрана намеренно —
   на телефоне обе карточки всё равно идут в одну колонку. */
.qstart--two{grid-template-columns:repeat(2,1fr)}
.qcard{display:flex; flex-direction:column; gap:10px; text-align:left; padding:20px;
  border-radius:var(--r-l); border:1.5px solid var(--line); background:#fff; cursor:pointer;
  font:inherit; transition:.16s; position:relative; color:inherit; text-decoration:none}
.qcard:hover{border-color:var(--brand-line); box-shadow:var(--sh-2); transform:translateY(-2px)}
.qcard.is-on{border-color:var(--brand); box-shadow:0 0 0 4px rgba(74,58,255,.1)}
.qcard__i{width:42px; height:42px; border-radius:13px; background:var(--brand-soft); display:grid;
  place-items:center}
.qcard__i svg{width:22px; height:22px; fill:none; stroke:var(--brand); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.qcard b{font-size:16px}
.qcard p{font-size:13px; color:var(--ink-3); line-height:1.45}
.qcard__meta{margin-top:auto; padding-top:6px; font-size:12.5px; font-weight:700; color:var(--brand-700)}
.qcard .badge{position:absolute; top:14px; right:14px}

/* Что подставилось из данных о доме. Зелёным и отдельным блоком: человек
   должен видеть, что он этого не вводил, — иначе чужая ошибка в справочнике
   уедет в объявление как его собственная. */
.autofill{border:1.5px solid var(--success); background:var(--success-soft); border-radius:var(--r-l);
  padding:16px 18px}
.autofill__h{display:flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px; color:var(--success)}
.autofill__h svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.afchips{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.afchip{background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 12px;
  font-size:12.8px; font-weight:600; color:var(--ink-2)}
.afchip b{color:var(--ink); font-weight:750}

/* Гистограмма цен района. */
.mkt{border:1px solid var(--line); border-radius:var(--r-l); padding:16px 18px; background:var(--bg-2)}
.mkt__bars{display:flex; align-items:flex-end; gap:5px; height:74px; margin:14px 0 8px}
.mkt__bars i{flex:1; background:var(--brand-line); border-radius:4px 4px 0 0}
.mkt__bars i.is-you{background:var(--brand); position:relative}
.mkt__bars i.is-you::after{content:"вы"; position:absolute; left:50%; transform:translateX(-50%);
  top:-19px; font-size:11px; font-weight:750; color:var(--brand-700)}
.mkt__ax{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-3); font-weight:600}

/* Чек-лист готовности перед публикацией. */
.ready{display:grid; gap:9px}
.ready li{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.ready svg{width:19px; height:19px; flex-shrink:0; margin-top:1px; fill:none; stroke-width:2.3;
  stroke-linecap:round; stroke-linejoin:round}
.ready .ok svg{stroke:var(--success)}
.ready .no svg{stroke:var(--warn)}
.ready em{font-style:normal; color:var(--ink-3); font-size:13px; display:block}

/* Кнопка «собрать по параметрам» рядом с подписью поля. */
.genbtn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--brand-line);
  background:var(--brand-soft); color:var(--brand-700); border-radius:var(--r-pill); padding:6px 13px;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.genbtn:hover{background:var(--brand-line)}
.genbtn svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.field__row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:7px}
.field__row .field__label{margin-bottom:0}

/* Подписи и предупреждения на снимках. */
.photo__tag{position:absolute; left:6px; bottom:6px; background:rgba(20,22,43,.72); color:#fff;
  font-size:11px; font-weight:650; padding:3px 8px; border-radius:var(--r-pill); backdrop-filter:blur(4px)}
.photo__grab{position:absolute; left:6px; top:6px; width:22px; height:22px; border-radius:7px;
  background:rgba(255,255,255,.9); display:grid; place-items:center; cursor:grab; box-shadow:var(--sh-1)}
.photo__grab svg{width:13px; height:13px; stroke:var(--ink-2); stroke-width:2; fill:none; stroke-linecap:round}
.photo.is-bad{outline:2px solid var(--warn); outline-offset:-2px}
.photo__warn{position:absolute; inset:auto 6px 6px auto; background:var(--warn); color:#fff;
  font-size:11px; font-weight:700; padding:3px 7px; border-radius:var(--r-pill)}

/* Место под рилс. Пока ведёт на страницу «скоро»: обещать услугу, которой
   нет, кнопкой «оплатить» нельзя. */
.reelbox{border:1.5px solid var(--brand-line); border-radius:var(--r-l);
  background:linear-gradient(135deg,#F3F1FF,#EAF0FF); overflow:hidden}
.reelbox__in{display:flex; gap:18px; align-items:flex-start; padding:20px}
.reelbox__prev{width:92px; flex-shrink:0; aspect-ratio:9/16; border-radius:14px; position:relative;
  background:linear-gradient(150deg,#CBD6F0,#E3E9FA); overflow:hidden; box-shadow:var(--sh-2)}
.reelbox__play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px;
  height:34px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center;
  z-index:2; box-shadow:var(--sh-1)}
.reelbox__play svg{width:16px; height:16px; fill:var(--brand); margin-left:2px}
.reelbox h3{font-size:17px; margin-bottom:6px}
.reelbox p{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.reelbox__feat{display:grid; gap:7px; margin-top:12px}
.reelbox__feat li{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2)}
.reelbox__feat svg{width:15px; height:15px; flex-shrink:0; margin-top:2px; fill:none;
  stroke:var(--success); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.reelbox__foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 20px;
  background:rgba(255,255,255,.72); border-top:1px solid var(--brand-line)}
.reelbox__price{font-size:20px; font-weight:800; letter-spacing:-.02em}

/* Липкая нижняя панель на телефоне. Кнопки «назад/далее» в конце длинной
   формы означают прокрутку до низа на каждом шаге. */
.mobbar{display:none}
@media (max-width:860px){
  .qstart{grid-template-columns:1fr}
}
@media (max-width:720px){
  .savebar__in{gap:10px}
  .saved span{display:none}
  .sstep{padding:6px 8px}
  .sstep__t{display:none}
  .sstep.is-now{padding-right:12px}
  .sstep.is-now .sstep__t{display:inline}
  /* Блок про ролик: превью 92 px сбоку оставляет тексту узкую колонку в
     несколько слов. На телефоне складываем в столбец. */
  .reelbox__in{flex-direction:column; gap:14px}
  .reelbox__prev{width:100%; aspect-ratio:16/9}
  .lay{padding-bottom:96px}
  .reelbox__in{flex-wrap:wrap; padding:16px}
  .reelbox__foot{padding:12px 16px}
  .mobbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; gap:10px; padding:10px 14px;
    background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
  .mobbar .btn{flex:1}
  .mobbar .btn--icon{flex:0 0 46px}
  /* Нижняя панель дублирует кнопки шага — показывать оба ряда незачем. */
  .steps-foot{display:none}
}

/* --- то, чего в прототипе не было, а на сайте понадобилось --- */

/* Список карточек-строк: в прототипе он назывался .split__list и жил внутри
   раскладки «список плюс карта». Карта появится позже, а список нужен уже
   сейчас — и на карточке объявления, где никакой карты рядом нет. */
.rowcards{display:flex; flex-direction:column; gap:16px}

/* Текст, который пишет человек в админке: юридические документы, вступление
   к району, описание объекта. Своё оформление нужно потому, что HTML там
   произвольный — заголовки, списки, ссылки, — а верстать его классами
   дизайн-системы автор не будет. */
.prose{color:var(--ink-2); font-size:15.5px; line-height:1.75}
.prose h2{font-size:21px; color:var(--ink); margin:26px 0 10px}
.prose h3{font-size:17.5px; color:var(--ink); margin:22px 0 8px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin-bottom:12px}
.prose ul,.prose ol{margin:0 0 14px 22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--brand); font-weight:600}
.prose a:hover{color:var(--brand-700); text-decoration:underline}
/* Таблица «цель — основание» в политике. С телефона она не помещается по
   ширине, поэтому прокручивается внутри себя, а не растягивает страницу. */
.prose .tbl{display:block; overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--r-m); margin:0 0 16px; border-collapse:collapse}
.prose .tbl th,.prose .tbl td{padding:10px 14px; border-bottom:1px solid var(--line-2);
  text-align:left; vertical-align:top; min-width:180px}
.prose .tbl tr:last-child td{border-bottom:none}

/* ==== Блог: список статей и сама статья (prototype/blog*.html) ==== */
/* --- из прототипа: blog.html --- */
.rubs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0 32px}
.rub{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; min-width:0;
  border:1px solid var(--line); border-radius:var(--r-m); background:#fff; font-weight:650; font-size:15px;
  color:var(--ink); transition:.15s}
.rub:hover{border-color:var(--brand-line); background:var(--brand-soft); color:var(--brand-700)}
.rub.is-active{background:var(--ink); border-color:var(--ink); color:#fff}
.rub span{font-size:12.5px; font-weight:700; color:var(--ink-3); background:var(--bg-3);
  border-radius:var(--r-pill); padding:2px 9px; flex-shrink:0}
.rub.is-active span{background:rgba(255,255,255,.18); color:#fff}
.blay{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:34px; align-items:start}
.bside{position:sticky; top:calc(var(--header-h) + 18px); display:grid; gap:16px}
.hpost{display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; background:#fff; margin-bottom:26px; transition:.18s}
.hpost:hover{box-shadow:var(--sh-3); border-color:transparent}
.hpost__m{position:relative; min-height:310px}
.hpost__m .ph{position:absolute; inset:0}
.hpost__b{padding:30px 32px; display:flex; flex-direction:column; justify-content:center; min-width:0}
.hpost__b h2{font-size:clamp(21px,2.3vw,29px); margin:13px 0 12px}
.hpost__b p{color:var(--ink-2); font-size:15.5px}
.pmeta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); margin-top:18px}
.pmeta > span{display:inline-flex; align-items:center; gap:5px}
.pmeta b{font-weight:650; color:var(--ink-2)}
.pmeta i{width:3px; height:3px; border-radius:50%; background:var(--ink-4); display:inline-block}
.pager a{display:inline-flex; align-items:center; justify-content:center; gap:7px}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.pcard__t{font-size:16.5px; font-weight:700; line-height:1.32}
.pcard__d{font-size:14px; color:var(--ink-2); margin-top:8px; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pcard .card__meta{font-size:12px; gap:8px}
.pcard .card__meta span{display:inline-flex; align-items:center; gap:4px}
.subs{grid-column:1/-1; display:flex; align-items:center; gap:26px;
  background:linear-gradient(135deg,#1B1740 0%,#302A6E 58%,#4A3AFF 145%); color:#fff;
  border-radius:var(--r-xl); padding:26px 30px}
.subs b{font-size:19px; display:block; letter-spacing:-.02em}
.subs p{color:rgba(255,255,255,.74); font-size:14.5px; margin-top:8px; max-width:56ch}
.subs__b{display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0}
.swrap{position:relative}
.swrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:18px; height:18px;
  stroke:var(--ink-3); fill:none; stroke-width:1.9; pointer-events:none}
.swrap .inp{padding-left:42px}
.pop{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-2); align-items:center}
.pop:first-child{padding-top:0}
.pop:last-child{border:0; padding-bottom:0}
.pop .ph{width:66px; height:52px; border-radius:10px; flex-shrink:0}
.pop b{font-size:14px; font-weight:650; line-height:1.35; display:block; margin-bottom:3px}
.pop:hover b{color:var(--brand-700)}
.rlist a{display:flex; justify-content:space-between; gap:10px; padding:10px 0; font-size:14.5px;
  border-bottom:1px solid var(--line-2); color:var(--ink-2)}
.rlist a:last-child{border:0; padding-bottom:0}
.rlist a:hover{color:var(--brand-700)}
.wid-cta{background:linear-gradient(140deg,#EFECFF,#E4F1FF); border:1px solid var(--brand-line);
  border-radius:var(--r-l); padding:22px}
.wid-cta b{font-size:17px; display:block; margin-bottom:6px}
.wid-cta p{font-size:14px; color:var(--ink-2); margin-bottom:16px}
@media (max-width:1180px){ .rubs{grid-template-columns:repeat(3,minmax(0,1fr))} .pgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1080px){
  .blay{grid-template-columns:minmax(0,1fr)}
  .pager{flex-wrap:wrap}
  .bside{position:static; grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .rubs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .hpost{grid-template-columns:1fr}
  .hpost__m{min-height:200px; aspect-ratio:16/9}
  .subs{flex-direction:column; align-items:flex-start; gap:18px}
}
@media (max-width:720px){
  .rubs{grid-template-columns:1fr; gap:8px}
  .rub{padding:12px 16px; font-size:14.5px}
  .bside{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .hpost__b{padding:20px}
  .subs{padding:22px 18px}
  .subs b{font-size:17px}
  .subs__b{width:100%}
  .subs__b .btn{flex:1}
}

/* --- из прототипа: blog-post.html --- */
.readbar{position:fixed; top:0; left:0; height:3px; width:0; background:var(--brand); z-index:100;
  transition:width .1s linear}
.play{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:44px; align-items:start}
.toc{position:sticky; top:calc(var(--header-h) + 18px); display:grid; gap:16px}
.toc__l{display:grid}
.toc__l a{display:block; padding:8px 0 8px 14px; border-left:2px solid var(--line); font-size:14px;
  color:var(--ink-3); line-height:1.35; transition:.15s}
.toc__l a:hover{color:var(--ink); border-color:var(--ink-4)}
.toc__l a.is-on{border-color:var(--brand); color:var(--brand-700); font-weight:650}
.ptitle{font-size:clamp(27px,3.6vw,42px); max-width:20ch; margin-top:14px}
.pmeta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-3); margin-top:18px}
.cover{aspect-ratio:21/9; border-radius:var(--r-xl); margin:24px 0 8px}
.art{font-size:17px; line-height:1.72; color:var(--ink-2); max-width:72ch}
.art h2{font-size:clamp(21px,2.3vw,27px); color:var(--ink); margin:40px 0 14px; scroll-margin-top:100px}
.art h3{font-size:19px; color:var(--ink); margin:26px 0 10px}
.art > p{margin-bottom:16px}
.art ul{margin:0 0 20px; display:grid; gap:9px}
.art ul li{padding-left:24px; position:relative}
.art ul li::before{content:""; position:absolute; left:6px; top:11px; width:6px; height:6px;
  border-radius:50%; background:var(--brand)}
.art blockquote{margin:28px 0; padding:20px 24px; border-left:3px solid var(--brand);
  background:var(--brand-soft); border-radius:0 var(--r-m) var(--r-m) 0; font-size:17.5px;
  color:var(--brand-700); font-weight:600; line-height:1.55}
.art blockquote cite{display:block; font-style:normal; font-size:13.5px; font-weight:600;
  color:var(--ink-3); margin-top:10px}
.art figure{margin:28px 0}
.art figure .ph{aspect-ratio:16/9; border-radius:var(--r-l)}
.art figcaption{font-size:13.5px; color:var(--ink-3); margin-top:10px}
.art .alert{margin:26px 0; font-size:15px}
.art a.inl{color:var(--brand); text-decoration:underline; font-weight:600}
.ctbl{width:100%; margin:22px 0 26px; font-size:14.5px; border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden}
.ctbl th{background:var(--bg-2); text-align:left; font-size:12px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); padding:11px 12px; font-weight:750}
.ctbl td{padding:11px 12px; border-top:1px solid var(--line-2); color:var(--ink)}
.ctbl td:first-child{font-weight:650}
.ctbl .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.wprice div{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--line-2); font-size:14.5px}
.wprice div:last-child{border:0; padding-bottom:0}
.wprice span{color:var(--ink-2)}
.wprice b{font-variant-numeric:tabular-nums}
.wsub{background:linear-gradient(140deg,#1B1740,#3B2CE0); color:#fff; border-radius:var(--r-l); padding:22px}
.wsub b{font-size:16.5px; display:block; margin-bottom:6px}
.wsub p{font-size:13.5px; color:rgba(255,255,255,.75); margin-bottom:14px}
.share{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:34px 0 0;
  padding-top:24px; border-top:1px solid var(--line)}
.sbtn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff; font-size:14px; font-weight:650; cursor:pointer; color:var(--ink)}
.sbtn:hover{border-color:var(--ink-4); background:var(--bg-2)}
.sbtn svg{width:17px; height:17px; fill:currentColor}
.sbtn--max{background:#111; border-color:#111; color:#fff}
.sbtn--vk{background:#0077FF; border-color:#0077FF; color:#fff}
.sbtn--tg{background:#0A88C9; border-color:#0A88C9; color:#fff}
.author{display:flex; gap:18px; align-items:flex-start; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-l); padding:24px; margin-top:32px}
.author b{font-size:17px; display:block}
.author p{font-size:14.5px; color:var(--ink-2); margin-top:8px}
.author .btn svg{width:16px; height:16px; fill:currentColor}
.pcard .card__meta{font-size:12px}
.rel3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:1080px){
  .play{grid-template-columns:1fr; gap:28px}
  .toc{position:static; grid-template-columns:repeat(2,1fr)}
  .toc__l{grid-column:1/-1}
}
@media (max-width:900px){
  .rel3{grid-template-columns:1fr}
  .toc{grid-template-columns:1fr}
}
@media (max-width:720px){
  .art{font-size:16px}
  .cover{aspect-ratio:16/10; margin:18px 0 4px}
  .ctbl{font-size:13px}
  .ctbl th,.ctbl td{padding:9px 8px}
  .author{flex-direction:column; gap:12px; padding:18px}
  .art blockquote{padding:16px 18px; font-size:16px}
}
/* Кнопка «Меню» в кабинете и панели нужна только там, где боковое меню
   спрятано, — то есть уже 1080 px. На широком экране меню и так на виду,
   и кнопка рядом с заголовком выглядит как забытая деталь. */
[data-side-toggle]{display:none}
@media (max-width:1080px){
  [data-side-toggle]{display:inline-flex}
}

/* Листание фотографий прямо в карточке выдачи.

   Зачем: человек решает по снимкам, а не по заголовку. Заставлять его
   открывать объявление ради второго фото — это терять его на первом.
   На компьютере переключение идёт наведением по зонам, на телефоне —
   свайпом; точки показывают, где он сейчас. */
.card__dots{position:absolute; left:10px; right:10px; bottom:10px; display:flex; gap:4px; z-index:2}
.card__dot{flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.45);
  box-shadow:0 1px 2px rgba(0,0,0,.25); transition:background .15s}
.card__dot.is-on{background:#fff}
.card__media{touch-action:pan-y}

/* Карта каталога. Высота фиксированная: карта без высоты схлопывается в
   ноль, и это самая частая причина «карта не работает». */
.mapbox__canvas{height:460px; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--line)}
@media (max-width:720px){ .mapbox__canvas{height:340px} }

/* Атрибут hidden обязан прятать элемент всегда.

   Браузер прячет его правилом `[hidden]{display:none}` из своей таблицы, а
   любой наш класс с `display:flex` или `grid` это правило перебивает — и
   элемент остаётся на экране. Поймано на карточке канала в мини-приложении:
   она висела с текстом-заглушкой и вела в никуда, потому что скрипт считал
   её скрытой. */
[hidden]{display:none !important}

/* Лента фотографий в мини-приложении.

   Прокрутка с прилипанием, а не скрипт: на телефоне это единственный
   способ получить настоящий свайп с инерцией, тот же жест, что и везде в
   мессенджере. Полоска-точки под лентой показывает, где человек сейчас. */
.appgal{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:12px}
.appgal::-webkit-scrollbar{display:none}
.appgal img{flex:0 0 100%; width:100%; aspect-ratio:4/3; object-fit:cover;
  scroll-snap-align:center; display:block}
.appdots{display:flex; gap:4px; justify-content:center; margin-top:8px}
.appdot{width:6px; height:6px; border-radius:50%; background:var(--line);
  transition:background .15s}
.appdot.is-on{background:var(--brand)}

/* Галочка с подписью справа: обычный чекбокс, а не наша нарисованная .chk.
   Согласие человек должен видеть как согласие — квадрат и текст рядом. */
.check{display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  font-size:15px; line-height:1.4}
.check input{width:20px; height:20px; margin:0; flex:none; accent-color:var(--brand)}

/* ============================================================================
   Плашка «Мы в MAX!» в правом нижнем углу.

   Цвета — те же, что у карточки канала MAX на главной (.chan--max): одна и та
   же площадка, нарисованная в двух местах разными фиолетовыми, выглядит как
   две разные.

   Крестик — отдельная кнопка рядом со ссылкой, а не внутри неё: вложенная
   кнопка в ссылке ломается и мышью, и с клавиатуры. Между ними тонкая
   светлая черта, как в макете.
   ============================================================================ */
.maxp{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; align-items:stretch;
  background:linear-gradient(120deg,#9B7BFF 0%,#6C5CFF 50%,#4B57FF 100%);
  border-radius:var(--r-pill); box-shadow:var(--sh-3); overflow:hidden;
  /* Появляется не мгновенно: полторы секунды человек смотрит на страницу,
     за которой пришёл, и только потом получает приглашение. */
  opacity:0; transform:translateY(14px); animation:maxp-in .34s ease-out 1.5s forwards}
.maxp[hidden]{display:none}

@keyframes maxp-in{to{opacity:1; transform:none}}

.maxp__go{display:flex; align-items:center; gap:10px; padding:13px 6px 13px 15px;
  color:#fff; text-decoration:none; font-weight:700; font-size:15.5px; line-height:1}
.maxp__go:hover{color:#fff}
.maxp__ico{display:grid; place-items:center; width:28px; height:28px; flex:none;
  border-radius:50%; background:rgba(255,255,255,.22)}
.maxp__ico svg{width:20px; height:20px; fill:#fff}
.maxp__ch{width:17px; height:17px; opacity:.75; transition:transform .16s}
.maxp__go:hover .maxp__ch{transform:translateX(2px)}

.maxp__x{display:grid; place-items:center; width:42px; flex:none; padding:0;
  background:none; border:0; border-left:1px solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.8); cursor:pointer; transition:color .16s, background .16s}
.maxp__x:hover{color:#fff; background:rgba(255,255,255,.12)}
.maxp__x svg{width:16px; height:16px}

@media (max-width:640px){
  /* На телефоне — короткая пилюля, а не полоса во всю ширину.

     24.09.2026, аудит на 390 px: полоса «Мы в MAX! ›  ✕» шириной в две трети
     экрана ложилась на метку «Без комиссии» в карточке и на правую половину
     карточки канала ВК на главной — нажатие туда уходило плашке. Значок
     занимает угол и почти ничего не накрывает; крестик — маленькой
     меткой на его краю.

     В тот же день Александр: «это не понятно — сделай „Мы в MAX!“». Одна
     буква в кружке не говорит, куда зовёт. Поэтому подпись вернулась, но
     короткой пилюлей: без стрелки и без отдельной половины под крестик —
     вдвое уже прежней полосы. */
  .maxp{right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); overflow:visible}
  .maxp__go{gap:7px; padding:9px 14px 9px 9px; font-size:14.5px}
  .maxp__ch{display:none}
  .maxp__ico{width:26px; height:26px}
  .maxp__ico svg{width:18px; height:18px}
  .maxp__x{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border:0;
    border-radius:50%; background:#fff; color:var(--ink-2); box-shadow:var(--sh-2)}
  .maxp__x svg{width:11px; height:11px}
  .maxp__x:hover{background:#fff; color:var(--ink)}
}

@media (prefers-reduced-motion:reduce){
  .maxp{animation-duration:.01s}
  .maxp__go:hover .maxp__ch{transform:none}
}

/* ---------- мини-приложение: снимок с плашкой состояния и миниатюры ----------

   Плашка стоит поверх снимка, потому что в списке своих объявлений человек
   ищет глазами состояние, а не читает карточки подряд. Цвет — по смыслу:
   зелёное живёт, жёлтое ждёт вас, серое лежит. Цвет при этом не единственный
   носитель смысла — в плашке написано словами, иначе она была бы бесполезна
   тому, кто не различает эти оттенки. */
.shot{position:relative}
.shot__flag{position:absolute; top:10px; left:10px; z-index:2; padding:5px 11px;
  border-radius:var(--r-pill); font-size:12px; font-weight:700; line-height:1.2;
  background:rgba(255,255,255,.94); color:var(--ink); box-shadow:var(--sh-1);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.shot__flag--ok{background:var(--success); color:#fff}
.shot__flag--wait{background:var(--warn); color:#fff}
.shot__flag--todo{background:var(--danger); color:#fff}
.shot__flag--idle{background:rgba(20,22,43,.72); color:#fff}

/* Миниатюры загруженных снимков на шаге «Фотографии». Человек должен видеть,
   что именно уехало на сайт: с телефона легко отправить смазанный кадр или
   экран блокировки вместо кухни. */
.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.thumb{position:relative; border-radius:var(--r-s); overflow:hidden; background:var(--bg-3)}
.thumb img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.thumb__x{position:absolute; top:4px; right:4px; width:26px; height:26px; padding:0;
  display:grid; place-items:center; border:0; border-radius:50%; cursor:pointer;
  background:rgba(20,22,43,.66); color:#fff; font-size:17px; line-height:1}
.thumb__x:hover{background:rgba(20,22,43,.85)}
.thumb__x:disabled{opacity:.5; cursor:default}
/*
  Метка на нынешней обложке — синяя, на остальных снимках серая.

  30.08.2026, слова Александра: «обложка должна быть синим выделена, когда
  ты нажимаешь на неё, а они серым». Было наоборот: выбранная белая,
  невыбранные синие, — и шесть одинаковых плашек читались как «все
  обложки». Цвет здесь единственное, что отличает выбранное от выбираемого,
  и синий человек читает как «вот это сейчас и есть».
*/
.thumb__cover{position:absolute; left:4px; bottom:4px; padding:2px 7px; border-radius:var(--r-pill);
  background:var(--brand); color:#fff; font-size:10.5px; font-weight:700}
/*
  Кнопка «сделать обложкой» на чужих снимках. Той же формы и на том же
  месте, что метка у нынешней обложки: человек видит один элемент — «здесь
  про обложку», — и разница только в цвете и в том, нажимается он или нет.
*/
.thumb__pick{position:absolute; left:4px; bottom:4px; padding:2px 7px; border:0;
  border-radius:var(--r-pill); background:rgba(255,255,255,.92); color:var(--ink-2);
  font-size:10.5px; font-weight:700; cursor:pointer; font-family:inherit}
.thumb__pick:hover{background:#fff; color:var(--brand)}
.thumb__pick:disabled{opacity:.5; cursor:default}

/* Выбор на первом шаге подачи: сдаю или ищу. Две крупные карточки, а не
   переключатель: это развилка на два разных пути, и человек должен видеть,
   чем они отличаются, до того как выберет. */
.intent{display:block; width:100%; text-align:left; padding:18px 20px; margin-bottom:12px;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-l); cursor:pointer;
  transition:border-color .15s, box-shadow .15s}
.intent:hover{border-color:var(--brand); box-shadow:var(--sh-2)}
.intent b{display:block; font-size:17px; font-weight:750; letter-spacing:-.01em}
.intent span{display:block; margin-top:5px; font-size:13.5px; color:var(--ink-3); line-height:1.45}

/* Выбор районов в заявке «ищу жильё».

   Отдельный ряд, а не общий `.stat-row`: районов три десятка, они
   переносятся на десять строк, и при общем отступе в 8 точек строки
   сливаются в сплошное полотно, по которому глаз не цепляется ни за что.
   Между строками больше, чем между соседями в строке, — так ряды читаются
   как ряды. */
.pickrow{display:flex; flex-wrap:wrap; gap:12px 10px; margin:10px 0 4px}
.pickrow .chip{margin:0}

/* ---------- страницы ошибок ----------

   Отдельные правила, а не общая секция: на странице ошибки человек оказался
   не по своей воле, и сжатый в комок текст читается там как продолжение
   поломки. Воздуха больше, чем в обычных разделах, а действия — крупные и
   разнесённые, чтобы выход был очевиден. */
.err{padding:72px 0 96px; max-width:640px}
.err__code{font-size:88px; line-height:.9; font-weight:800; letter-spacing:-.04em;
  color:var(--line); margin:0}
.err__t{font-size:30px; letter-spacing:-.02em; margin-top:20px}
.err__lead{color:var(--ink-3); font-size:16px; line-height:1.55; margin-top:12px}
.err__act{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.err__more{margin-top:48px; padding-top:28px; border-top:1px solid var(--line)}
.err__h2{font-size:17px; margin-bottom:14px}
.err__more .chips{gap:10px}

@media (max-width:640px){
  .err{padding:44px 0 64px}
  .err__code{font-size:64px}
  .err__t{font-size:24px}
  .err__act .btn{width:100%}
}

/* Служебный блок на карточке объявления: виден только сотруднику. Намеренно
   не похож на остальную карточку — жёлтая рамка говорит «это не то, что
   видит посетитель», и не даёт перепутать служебное с обычным. */
.acard--staff{border:1.5px dashed var(--warn); background:var(--warn-soft)}
.acard--staff .btn{white-space:nowrap}

/* ---------- снимок во весь экран ----------
   Тёмный фон, а не белый: рассматривают фотографию, и всё вокруг должно
   уйти. Стрелки крупные и по краям — на телефоне до середины экрана палец
   не дотягивается. */
.zoom{position:fixed; inset:0; z-index:160; display:none; align-items:center; justify-content:center;
  background:rgba(12,13,24,.94); padding:56px 16px}
.zoom.is-on{display:flex}
.zoom__img{max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--r-s);
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.zoom__x{position:absolute; top:14px; right:16px; width:44px; height:44px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer}
.zoom__x:hover{background:rgba(255,255,255,.24)}
.zoom__nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:0;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:32px; line-height:1;
  cursor:pointer; display:grid; place-items:center}
.zoom__nav:hover{background:rgba(255,255,255,.24)}
.zoom__nav--prev{left:12px}
.zoom__nav--next{right:12px}
.zoom__count{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.75);
  font-size:13.5px; font-weight:650}
@media (max-width:640px){
  .zoom{padding:52px 8px}
  .zoom__nav{width:44px; height:44px; font-size:26px}
}

/*
  Заставка мини-приложения.

  Дом рисуется линией, пока идёт проверка подписи запуска. Анимация
  бесконечная намеренно: сколько займёт проверка — неизвестно, а рывок в
  конце незаметен, потому что экран к этому моменту уже сменился.
*/
.splash {
  min-height: 60vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
}
.splash__house {
  width: 116px; height: 96px;
  fill: none; stroke: var(--brand, #4f46e5);
  stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
}
.splash__house path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: splash-draw 1.6s ease-in-out infinite;
}
.splash__house path:nth-child(2) { animation-delay: .18s }
.splash__house path:nth-child(3) { animation-delay: .36s }
.splash__house path:nth-child(4) { animation-delay: .5s }
.splash__house path:nth-child(5) { animation-delay: .5s }
@keyframes splash-draw {
  0%   { stroke-dashoffset: 240 }
  45%  { stroke-dashoffset: 0 }
  85%  { stroke-dashoffset: 0 }
  100% { stroke-dashoffset: 0; opacity: .25 }
}
.splash__name { font-size: 22px; font-weight: 700; letter-spacing: -.01em }

/* Уважаем «уменьшить движение»: у части людей от такого кружится голова. */
@media (prefers-reduced-motion: reduce) {
  .splash__house path { animation: none; stroke-dashoffset: 0 }
}

/* Профиль */
.prof { display: flex; align-items: center; gap: 12px; margin-bottom: 16px }
.prof__face {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700;
  background: var(--brand-weak, #eef2ff); color: var(--brand, #4f46e5);
}
.prof__name { font-size: 20px; font-weight: 700 }
.prof__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 6px;
  border-radius: 50%; font-size: 11px; font-weight: 700;
  background: var(--brand-weak, #eef2ff); color: var(--brand, #4f46e5);
}
.prof__rows { border: 1px solid var(--line, #e5e7eb); border-radius: 14px; overflow: hidden }
.prof__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 14px;
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.prof__row:last-child { border-bottom: 0 }
.prof__row b { font-weight: 600 }
/*
  Значение справа — либо текст, либо кнопка. Кнопке снимаем всю её
  внешность: рамка вокруг «Воронеж» и «0» делала из подписи поле ввода.
  Тапабельность показывает цвет, а не коробка.
*/
.prof__val {
  color: var(--ink-2, #6b7280); text-align: right;
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.prof__val--do { color: var(--brand, #4f46e5); font-weight: 600 }

/*
  Сводка по площадке.

  Замечание Александра 27.08.2026: список одинаковых строк «подпись —
  число» читается как выписка из базы, а не как сводка. Смотрят её с
  телефона и секунду: главное должно быть видно без чтения.

  Отсюда три правила разметки ниже.

  1. Три числа, по которым судят о площадке — люди, объявления, разговоры —
     вынесены наверх крупно. Остальное осталось строками.
  2. Пояснения к строкам видны всегда. Раньше они лежали в `title`, то есть
     во всплывающей подсказке: на телефоне её нет вовсе, и «Из них не
     дошло» оставалось загадкой ровно для того, кто читает с телефона.
  3. Плохое число окрашено, ноль — нет. Красное «не дошло: 12» видно, не
     вчитываясь; когда там ноль, красить нечего и цвет только шумит.

  Цифры набраны `tabular-nums`: в столбце справа разряды должны стоять друг
  под другом, иначе колонка выглядит рваной.
*/
.stat__hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.stat__tile {
  border: 1px solid var(--line, #e5e7eb); border-radius: 14px;
  padding: 12px 10px 11px; background: var(--bg-2, #f7f8fc);
}
.stat__num {
  font-size: 26px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat__cap { color: var(--ink-3, #7c819c); font-size: 12px; margin-top: 3px }
.stat__delta {
  display: inline-block; margin-top: 8px; padding: 2px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--success-soft, #e6f6ed); color: var(--success, #12a150);
}
.stat__delta--zero { background: var(--bg-3, #eff1f8); color: var(--ink-3, #7c819c) }

.stat__group { margin-top: 18px }
.stat__title {
  color: var(--ink-3, #7c819c); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; margin-bottom: 6px;
}
.stat__rows { border: 1px solid var(--line, #e5e7eb); border-radius: 14px; overflow: hidden }
.stat__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--line-2, #f0f1f6);
}
.stat__row:last-child { border-bottom: 0 }
.stat__label { min-width: 0 }
.stat__note { display: block; color: var(--ink-3, #7c819c); font-size: 12px; line-height: 1.35; margin-top: 3px }
.stat__val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap }
.stat__val--bad { color: var(--danger, #e5484d) }
.stat__val--warn { color: var(--warn, #c8871a) }
.stat__val--calm { color: var(--ink-3, #7c819c); font-weight: 600 }

/*
  Полоска охвата. Единственное место, где доля важнее числа: «126» ничего
  не говорит, «126 из 204» говорит, что четверти людей мы написать не можем.
*/
.stat__barrow { padding: 12px 14px; border-bottom: 1px solid var(--line-2, #f0f1f6) }
.stat__bar { height: 6px; margin-top: 9px; border-radius: 999px; background: var(--bg-3, #eff1f8); overflow: hidden }
.stat__bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand, #4f46e5) }

/* На 360 трём плашкам тесно: подпись переносится, и число уезжает вверх. */
@media (max-width: 379px) {
  .stat__tile { padding: 10px 8px }
  .stat__num { font-size: 23px }
  .stat__cap { font-size: 11px }
}

/* Формы посуточного раздела */
.dfld{display:flex; flex-direction:column; gap:3px; flex:1 1 130px; min-width:0}
.dfld__cap{font-size:11.5px; font-weight:650; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em}
/* `min-width:0` и на самом поле, не только на обёртке. Поле даты на iOS
   просит под себя ширину целой строки («21 сент. 2026 г.») и по умолчанию
   не сжимается — два таких поля в ряд уезжали за правый край телефона.
   21.09.2026, по снимку Александра из приложения. */
.dfld .inp, .dfld .sel{width:100%; min-width:0; max-width:100%}
.dfld input[type="date"]{box-sizing:border-box}

/* Поле даты на iOS не сжимается ниже своего текста.
   22.09.2026, Александр из приложения в MAX: «в Максе уплывают поля» —
   поля дат уходят за правый край экрана, хотя каждое стоит своей строкой и
   у него `width:100%`.
   Повторить у себя не вышло: в Chromium поле даты показывает «22.09.2026»
   и спокойно сжимается, а WebKit на телефоне пишет «22 сент. 2026 г.» и
   ниже ширины этого текста не опускается — ни `width`, ни `min-width:0`
   его не убеждают. Убеждает снятие системного вида: тогда WebKit считает
   поле обычным текстовым и слушается ширины. Сам выбор даты при этом
   остаётся системным — он привязан к типу поля, а не к виду.
   В Chromium правило ничего не меняет: он и так слушается. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
/* На телефоне даты — каждая своей строкой. Формат подписи задаёт система:
   в браузере это «09/21/2026», а на айфоне «21 сент. 2026 г.» — на треть
   длиннее, и пара таких полей в ряд уезжает за край. Подгонять ширину под
   самый длинный вариант чужой системы бессмысленно: он изменится. */
@media (max-width:430px){
  .dfld{flex:1 1 100%}
  .dfld--half{flex:1 1 calc(50% - 4px)}
}

.fld { margin-top: 12px }
.fld label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px }
.fld__err { color: var(--bad, #b91c1c); font-size: 13px; margin-top: 4px }
.fld--bad .inp { border-color: var(--bad, #b91c1c) }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px }
@media (max-width: 520px) { .grid2 { grid-template-columns: 1fr } }
.feed {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding-top: 12px; border-top: 1px solid var(--line, #e5e7eb);
}
.feed__acts { display: flex; gap: 8px; flex: 0 0 auto }
.feed__bad { color: var(--bad, #b91c1c); font-weight: 600 }
@media (max-width: 520px) {
  .feed { flex-direction: column }
  .feed__acts { width: 100% }
}

/*
  Ряд плашек мини-приложения: домой, имя, город.

  Одинаковая окантовка и одна строка — замечание Александра 12.08.2026:
  плоское имя рядом с городом в рамке читалось как разные сущности.
  Переносится по ширине, чтобы длинное имя не выдавливало город за экран.
*/
.topchips { display: flex; gap: 8px; margin-bottom: 12px }
/*
  Поля у плашек в этом ряду уже, чем у обычной кнопки: втроём с обычными
  16 пикселями они не влезали в 390, и «Александр» превращался в
  «Александ…» при том, что места на экране хватало.
*/
.topchips .btn { margin: 0; min-width: 0; padding-inline: 10px }

/*
  Домик держит свой размер, имя и город делят остаток поровну — так ряд
  занимает всю ширину экрана, а домик стоит в углу независимо от того,
  насколько длинное имя и название города.
*/
/*
  `auto`, а не `0`: при равных долях обе плашки резались многоточием даже
  тогда, когда места хватало — «Александ…» и «Ворон…» на пустом ряду.
  Теперь каждая занимает по содержимому и ужимается только при нехватке.
*/
.topchips__grow { flex: 1 1 auto; overflow: hidden }
.topchips__grow span:not(.prof__dot) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Выбор из вариантов на сайте: варианты списком, каждый — своя строка. */
.picks ul, .picks div { list-style: none; margin: 0; padding: 0 }
.picks li, .picks > div > div { margin-top: 6px }
.picks label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer }
.picks input { margin-top: 3px }

/*
  Контейнер мини-приложения.

  Свой, а не общий `.wrap`: тот держит сетку всего сайта, у него поля по 20
  пикселей и потолок в 1200 — на телефоне в мессенджере это заметно узкая
  колонка с широкими краями. Замечание Александра 12.08.2026: «отцентруй,
  сделай на ширину экрана».

  Горизонтального выезда, о котором была догадка, здесь нет: замерил на
  390 пикселях, scrollWidth равен clientWidth, за край не выходит ничего.
  Дело было только в полях.
*/
.app-wrap {
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 8px 14px 40px;
  /* Ни один потомок не имеет права растянуть приложение вбок. В мессенджере
     горизонтальной прокрутки нет вовсе, и уехавший за край элемент там не
     «прокручивается», а пропадает. Списки, которые листаются вбок,
     прокручиваются внутри себя и этим правилом не затронуты. */
  overflow-x: clip;
  /* И не качается вбок по инерции: внутри мессенджера это выглядит как
     съехавшее приложение, а не как прокрутка. 23.09.2026. */
  overscroll-behavior-x: none;
}
@media (min-width: 480px) { .app-wrap { padding-left: 20px; padding-right: 20px } }

/*
  Нижняя панель разделов мини-приложения.

  Выбор Александра 04.09.2026 из четырёх макетов: «чтобы были видны
  сообщения — конвертик». До этого в сообщения вела кнопка под списком
  своих объявлений — её не видно без прокрутки, и с других экранов до неё
  было не добраться вовсе.

  Прибита к окну, а не липкая внутри потока: липкая уезжает вместе с
  длинным списком, и человек находит её, только докрутив до конца, — ровно
  та беда, ради которой панель и делается. Отступ снизу — под вырез
  телефона, иначе подписи разделов лежат на домашней полосе.
*/
.navbar{position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.navbar__i{flex:1 1 0; min-width:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:600; line-height:1.2;
  color:var(--ink-3); padding:7px 2px 9px; position:relative}
.navbar__i svg{width:22px; height:22px; display:block; margin:0 auto 3px}
.navbar__i.is-on{color:var(--brand); font-weight:750}
/* Счётчик непрочитанного — тем же кружком, что и на конверте в шапке
   сайта: одно и то же должно выглядеть одинаково в обоих входах. */
.navbar__n{position:absolute; top:2px; left:50%; margin-left:5px; min-width:17px;
  height:17px; padding:0 5px; border-radius:9px; background:var(--danger);
  color:#fff; font-size:10.5px; font-weight:750; display:grid; place-items:center}
/* Место под панель: без него она накрывает последнюю кнопку списка. */
body.has-nav .app-wrap{padding-bottom:calc(var(--navbar-h) + 20px + env(safe-area-inset-bottom))}

/* Панель подачи встаёт над панелью разделов, а не под ней.
   22.09.2026, Александр: «нижняя панель должна быть на всех экранах — как
   только я подаю, она пропадает». Панель вернули, и теперь у низа экрана
   два жильца: «Назад / Далее» и разделы. Кнопка, наполовину закрытая
   чужой панелью, хуже отсутствующей.
   Отступ снизу тут обычный: домашнюю полосу телефона держит панель
   разделов, и второй такой же отступ был бы пустой полосой. */
body.has-nav .addbar{bottom:calc(var(--navbar-h) + env(safe-area-inset-bottom));
  padding-bottom:12px}

/* Строка брони в календаре объекта */
.bk {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #e5e7eb);
}
.bk:last-of-type { border-bottom: 0 }

/*
  Ряд действий над объектом. Сеткой, а не потоком: три кнопки разной
  длины вставали лесенкой с разными отступами и читались как случайный
  набор ссылок, а не как один ряд.
*/
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
/*
  Ячейка сетки по умолчанию не уже своего содержимого: кнопки с длинными
  подписями вылезали за карточку, «Правка объекта» обрезалась на середине.
  min-width: 0 разрешает им ужиматься, перенос — умещаться в две строки.
*/
.acts .btn { min-width: 0; white-space: normal; padding-inline: 10px }
.acts .btn:first-child { grid-column: 1 / -1 }
@media (max-width: 380px) { .acts { grid-template-columns: 1fr } }

/*
  Вход: воздух между строками.

  Замечание Александра 12.08.2026 по снимку с компьютера: «одно нагромождает
  другое». На широком экране заголовок, объяснение, кнопка и правовая строка
  стояли вплотную и читались одним пятном — глазу не за что зацепиться, а
  это единственная страница, где человек решает, доверять нам или нет.
*/
/*
  На широком экране блок входа стоял в левом верхнем углу пустой страницы и
  выглядел обрезком, а не страницей. Ставим по центру: единственное
  действие должно быть там, куда смотрят.
*/
.login { margin-inline: auto }
@media (min-width: 900px) { .login { padding-block: 40px 64px } }

.login h1 { margin-bottom: 14px }
.login p.muted { line-height: 1.6 }
.login #btn-start { margin-top: 24px }
.login #step-start > p.muted.small:last-child { margin-top: 28px }
@media (min-width: 900px) {
  .login h1 { margin-bottom: 18px }
  .login #btn-start { margin-top: 32px }
  .login #step-start > p.muted.small:last-child { margin-top: 36px }
}

/* Отбивка заголовка страницы от шапки. */
.head-gap { padding-top: 24px; padding-bottom: 16px }
@media (min-width: 900px) { .head-gap { padding-top: 36px; padding-bottom: 20px } }
/* 22.09.2026, Александр снимком: строка фильтра упиралась в подзаголовок.
   Отступ у самой шапки страницы, а не у фильтра: тогда он есть и там, где
   за шапкой идёт не фильтр, а список районов или текст о районе. */

/* Календарь занятости на странице объекта: только «свободно или нет». */
.cal--plain { width: 100%; border-collapse: collapse; text-align: center }
.cal--plain th { font-size: 12px; color: var(--ink-3, #9ca3af); font-weight: 600; padding: 6px 0 }
.cal--plain td { padding: 8px 0; border-radius: 8px; font-size: 14px }
/* Занято — красным, а не серым. 23.09.2026, Александр обвёл 25 и 26 в
   календаре браузера: «почему прямо при выборе дат нельзя отметить
   красным, чтобы пользователь видел, что занято».

   Серый на этой сетке уже занят прошедшими днями, и две разные вещи —
   «нельзя, потому что прошло» и «нельзя, потому что занято» — выглядели
   одинаково. Перечёркиваем вдобавок к цвету: цвет один читают не все. */
.cal--plain td.is-busy { background: var(--danger-soft, #fdeaea);
  color: var(--danger, #d1435b); text-decoration: line-through }
.cal--plain td.is-past { color: var(--ink-3, #9ca3af); opacity: .5 }

/* Два месяца рядом и вдвое мельче. 22.09.2026, Александр: «зачем он такой
   здоровый». Календарь здесь — справка «свободно ли», а не инструмент:
   нажимать в нём нечего, и место он занимал как главный экран. */
.cal2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 24px }
.cal2 .cal--plain th { font-size: 11px; padding: 3px 0 }
.cal2 .cal--plain td { padding: 4px 0; font-size: 12.5px; border-radius: 6px }
.cal2 h3 { font-size: 14px; margin: 0 0 4px }

/* Запрос гостя выделен: это единственная строка, требующая ответа. */
.bk--ask { background: var(--brand-weak, #eef2ff); border-radius: 12px; padding: 12px; margin-top: 8px }
.bk--ask + .bk--ask { margin-top: 8px }

/* Снимки объекта в кабинете */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px }
.shots .shot { margin: 0 }
.shots .shot img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block }
.shots .shot--cover img { outline: 3px solid var(--brand, #4f46e5); outline-offset: 2px }
.shots .shot figcaption { font-size: 12px; color: var(--brand, #4f46e5); font-weight: 600; margin-top: 4px }
.shots .shot form { display: flex; gap: 6px; margin-top: 6px }
.shots .shot .btn { flex: 1; padding-inline: 6px; min-width: 0 }

/* Плитка снимка как карточка: рамка и одинаковый отступ со всех сторон.
   22.09.2026, Александр: «выровняй, сделай отступ» — подпись «обложка» и
   вес файла лежали на самом краю, а из-за лишней строки у обложки крестики
   соседних плиток стояли на разной высоте. Метка «обложка» переехала на сам
   снимок, и строка под ним у всех плиток теперь одна и та же. */
.shots--pick .shot { border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; background: #fff; display: flex; flex-direction: column }
.shots--pick .shot--cover { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset }
.shots--pick .shot img { border-radius: 8px }
.shots--pick .shot--cover img { outline: none }
.shots--pick .shot__tools { padding: 8px 2px 0; margin-top: auto }
/* Метка лежит на снимке, а не на рамке плитки: отступ плитки её сдвинул. */
.shots--pick .shot__flag { top: 14px; left: 14px; font-size: 11px; padding: 4px 9px }
.shots--pick .shot form { margin-top: 8px }

/* Галерея на странице объекта */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.gal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; display: block }
.gal__hero { grid-column: 1 / -1 }
.gal__hero img { aspect-ratio: 16/10 }

/* Шаги двери: оба условия входа одним списком с галочками. */
.gstep {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border: 1px solid var(--line, #e5e7eb);
  border-radius: 12px; margin-bottom: 8px;
}
.gstep__mark {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line, #e5e7eb);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.gstep--done { border-color: var(--good, #16a34a) }
.gstep--done .gstep__mark { background: var(--good, #16a34a); border-color: var(--good, #16a34a) }
.gstep span span { display: block }

/*
  Всплывающая форма «написать по объявлению».

  На телефоне боковая колонка уезжает под карту и галерею, и до формы там
  просто не доходят. Окно открывается поверх карточки: квартира остаётся
  перед глазами, пока человек пишет.
*/
.modal { position: fixed; inset: 0; z-index: 80; display: flex;
         align-items: center; justify-content: center; padding: 16px }
.modal__back { position: absolute; inset: 0; background: rgba(15, 18, 34, .55) }
.modal__body {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  max-height: 90vh; overflow-y: auto;
  background: var(--bg, #fff); border-radius: 16px; padding: 18px;
  box-shadow: 0 18px 60px rgba(15, 18, 34, .28);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.modal__head b { font-size: 18px }
@media (max-width: 520px) {
  .modal { align-items: flex-end; padding: 0 }
  .modal__body { max-width: none; border-radius: 16px 16px 0 0; max-height: 88vh }
}

/* Поле, растущее под текст: высоту задаёт скрипт, прокрутка — на пределе. */
.inp--grow { resize: none; overflow-y: auto; line-height: 1.5 }

/* Заголовок переписки: название слева, кнопка к объявлению справа. */
.thread__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 12px;
}
.msg__wait {
  display: block; margin-top: 4px; font-size: 12px; opacity: .75;
}
.mt-4 { margin-top: 4px }
.mt-20 { margin-top: 20px }

/*
  Тёплая кнопка. Просьба Александра 13.08.2026: «сделай кнопку слегка
  розовой». Смысл в том, чтобы «Посмотреть объявление» не спорило с
  синей кнопкой отправки: два одинаково заметных действия рядом заставляют
  выбирать, хотя выбирать не из чего — одно ведёт читать, другое писать.
*/
.btn--rose { background: #fdeef2; color: #a83a5b; border: 1px solid #f6d3dd }
.btn--rose:hover { background: #fbe0e8 }

/* Галочки состояния: одна — записано у нас, две — собеседник прочитал. */
.tick { margin-left: 4px; letter-spacing: -1px }
.tick--read { color: #9be7ff }

/* Снимки в реплике переписки */
.msg__shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 6px }
.msg__shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; display: block }
.msg__shots a:only-child img { aspect-ratio: 3/2 }

/*
  Строка разговора в списке сообщений: кто, о чём, когда и сколько ждёт
  ответа. Раньше имя терялось в служебной строке, а непрочитанное было
  припиской в конце — понять, куда смотреть, можно было только читая всё.
*/
.conv {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; margin-top: 10px; text-decoration: none; color: inherit;
  border: 1px solid var(--line, #e5e7eb); border-radius: 14px;
}
.conv:hover { border-color: var(--brand, #4f46e5) }
.conv--new { background: var(--brand-weak, #eef2ff); border-color: var(--brand-line, #dcd9fb) }
.conv__face {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; background: var(--brand, #4f46e5);
}
.conv__body { flex: 1; min-width: 0; display: block }
.conv__top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline }
.conv__obj { display: block; font-size: 12.5px; color: var(--brand, #4f46e5); font-weight: 600 }
.conv__last {
  display: block; font-size: 13.5px; color: var(--ink-2, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv__count {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px; background: var(--brand, #4f46e5); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

/* Разделитель дня в переписке: «Сегодня», «Вчера», «12 августа». */
.daysep {
  align-self: center; margin: 10px auto 6px; padding: 3px 12px;
  font-size: 12px; font-weight: 700; color: var(--ink-3, #9ca3af);
  background: var(--bg, #fff); border: 1px solid var(--line, #e5e7eb);
  border-radius: 999px; width: fit-content;
}

/* Список разговоров — строками во всю ширину, без карточки вокруг карточек. */
.convs { display: block }
.convs .conv:first-of-type { margin-top: 14px }
@media (max-width: 560px) {
  .conv { padding: 12px; gap: 10px; border-radius: 12px }
  .conv__face { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px }
}

/* Компактная строка отправки: скрепка, поле, кнопка. Кнопка во всю ширину
   съедала половину экрана телефона. */
@media (max-width: 560px) {
  .thread__send { display: flex; gap: 8px; align-items: flex-end }
  .thread__send .inp--grow { flex: 1 }
  .thread__send .btn { flex: 0 0 auto; padding-inline: 14px }
  .thread__file { flex: 0 0 auto }
}

/* Расчёт стоимости на странице объекта: строки прайса и итог.
   Отдельный класс, базовые правила не трогаю — файл один на весь сайт. */
.calc {
  border: 1px solid var(--line, #e5e7eb); border-radius: 12px;
  padding: 10px 12px; background: var(--bg-2, #f9fafb);
}
.calc__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 5px 0; font-size: 14px;
}
.calc__row + .calc__row { border-top: 1px solid var(--line, #e5e7eb) }
.calc__row--total { font-size: 16px; padding-top: 8px }
.calc__row--total b { font-size: 18px }

/* Число свободных единиц прямо в клетке шахматки. Для гостиницы «занято» —
   это «занято четыре из шести», и одним цветом это не передать. */
.board__n {
  display: block; font-size: 11px; line-height: 34px; font-weight: 700;
  text-align: center; color: var(--ink-2, #4b5563);
}
.board__c--booked .board__n, .board__c--closed .board__n { color: #fff }
/* Частично занятый день продаётся дальше — он светлее занятого. */
.board__c.is-part { background: color-mix(in srgb, var(--brand) 18%, #fff) }
.cal__key--part { background: color-mix(in srgb, var(--brand) 18%, #fff) }
.board__c.is-part .board__n { color: var(--ink-2, #4b5563) }

/* Дни недели в массовой правке цен — строкой, как календарная неделя.
   Семь чекбоксов в столбик занимают пол-экрана телефона. */
.wdays > .fld > div { display: flex; flex-wrap: wrap; gap: 6px }
.wdays label[for^="id_weekdays"] {
  display: inline-flex; align-items: center; gap: 5px; margin: 0;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}

/* Снимки на шаге подачи: выбор обложки, удаление и ход загрузки.
   17.08.2026 Александр прошёл шаг сам: обложку не выбрать, снимок не
   удалить, хода загрузки не видно. Кнопки нужны на самом снимке — иначе
   человек ищет их глазами по всей странице.

   Всё, что про плитку снимка, живёт только внутри `.shots`. Без этого
   правила доставали чужую разметку: в мини-приложении `.shot` — обёртка
   карточки «Мои объявления», и она получала ширину 150 px и высоту
   картинки 112 px. 18.08.2026 Александр прислал снимок из MAX, где
   объявление показано узкой плиткой слева и пустотой справа. */
.shots{display:flex; flex-wrap:wrap; gap:10px}
.shots .shot{position:relative; width:150px; margin:0; border-radius:var(--r-m); overflow:hidden;
  border:1.5px solid var(--line); background:var(--bg-2)}
.shots .shot--cover{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft)}
.shots .shot img{display:block; width:100%; height:112px; object-fit:cover}
.shots .shot__tools{display:flex; gap:4px; padding:6px; align-items:center; justify-content:space-between}
.shot__btn{border:1px solid var(--line); background:#fff; border-radius:var(--r-s);
  padding:3px 8px; font-size:12px; cursor:pointer; color:var(--ink-2)}
.shot__btn:hover{border-color:var(--brand); color:var(--brand)}
.shot__btn--drop{color:var(--danger); padding:3px 7px; margin-left:auto}
.shot__btn[disabled]{opacity:.5; pointer-events:none}
.shots .shot__flag{position:absolute; left:6px; top:6px; padding:2px 8px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:11px; font-weight:650}

/* Подпись под снимком и метка тёмного кадра (макет 17.08.2026). Подпись —
   обычный выпадающий список, а не значок: человек её и ставит, и читает. */
.shots .shot[draggable="true"]{cursor:grab}
.shots .shot__tag{width:100%; border:0; border-top:1px solid var(--line); background:#fff;
  padding:6px 8px; font:inherit; font-size:12px; color:var(--ink-2); cursor:pointer}
.shots .shot__tag:focus{outline:2px solid var(--brand-line); outline-offset:-2px}
.shots .shot--dark{border-color:var(--warn)}
.shots .shot__warn{position:absolute; right:6px; top:6px; padding:2px 8px; border-radius:999px;
  background:var(--warn); color:#fff; font-size:11px; font-weight:700}

/* Ход загрузки: по строке на файл. Тишина после нажатия читается как
   поломка — особенно когда снимков десяток и грузятся они по очереди. */
.uprow{display:flex; justify-content:space-between; gap:12px; align-items:center;
  padding:6px 0; font-size:13px; color:var(--ink-2); border-bottom:1px solid var(--line-2)}
.uprow__name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%}
.uprow__state{display:flex; gap:8px; align-items:center; color:var(--ink-3); flex-shrink:0}
.uprow--done .uprow__state{color:var(--success)}
.uprow--bad .uprow__state{color:var(--danger)}

/* --- студия ролика (19.08.2026) ------------------------------------------

   Карточка выбора шаблона и «плёнка» кадров. Отдельные классы, а не
   переиспользование `.qcard`: там карточка — ссылка на целый экран, здесь
   переключатель внутри формы, и одинаковый вид у разного поведения путает
   больше, чем помогает. */
/*
  Выбор шаблона — с видимой отметкой.

  30.08.2026, Александр: «а почему нельзя выбрать галочкой, зачем так
  сложно?». Выбор был, но невидимый: переключатель спрятан, а выбранное
  отличалось только цветом рамки. Три карточки подряд читались как три
  надписи, а не как выбор из трёх.
*/
.tcard{display:grid; grid-template-columns:22px 1fr; gap:4px 12px; align-items:center;
  padding:14px 16px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r-l); background:#fff; transition:.16s}
.tcard:hover{border-color:var(--brand-line)}
.tcard.is-on{border-color:var(--brand); box-shadow:0 0 0 4px rgba(74,58,255,.1)}
.tcard b{font-size:15px; grid-column:2}
.tcard > .small{grid-column:2}
.tcard__dot{grid-row:1 / span 2; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line); background:#fff; display:grid; place-items:center;
  color:#fff; font-size:12px; font-weight:800; line-height:1}
.tcard.is-on .tcard__dot{border-color:var(--brand); background:var(--brand)}

/* Финальный кадр в «плёнке» — не фотография, а плашка: показываем её тем
   же, чем она станет в ролике. */
.shots .shot--final{display:flex; flex-direction:column; justify-content:space-between;
  background:#141628; border-color:#141628}
.shots .shot__end{display:flex; flex-direction:column; gap:4px; padding:14px 12px; height:112px;
  justify-content:center; text-align:center; color:#fff}
.shots .shot__end b{font-size:15px}
.shots .shot__end span{font-size:11px; color:#d6d2ff}
.shots .shot__end em{font-size:11px; color:#8f8bb8; font-style:normal}
.shots .shot--final .shot__tools{background:#fff}

/* Галочка «убрать кадр» внутри плитки: подпись рядом, а не под квадратом. */
.check--tight{gap:6px; margin:0}
.check--tight span{font-size:12px}

/* Полоса ожидания без процентов: ffmpeg не умеет честно сказать, сколько
   осталось, поэтому полоска бегает, а не заполняется. */
.prog__f--live{width:40%; animation:reelrun 1.6s ease-in-out infinite}
@keyframes reelrun{
  0%{margin-left:0; width:25%}
  50%{margin-left:60%; width:40%}
  100%{margin-left:0; width:25%}
}
@media (prefers-reduced-motion:reduce){
  .prog__f--live{animation:none; width:100%; opacity:.4}
}

/* ---------------------------------------------------------------------------
   Переключатель контуров кабинета: «Надолго / Посуточно».

   Живёт здесь, а не в daily.css, потому что виден в обоих контурах — в том
   числе на страницах долгосрочного, где daily.css не грузится вовсе.
   Решение Александра 30.08.2026.
   --------------------------------------------------------------------------- */
.seg{display:inline-flex; background:var(--bg-3); border-radius:var(--r-pill); padding:3px}
.seg a,.seg button{border:0; background:transparent; font:inherit; font-size:13px;
  font-weight:600; color:var(--ink-2); padding:6px 14px; border-radius:var(--r-pill);
  cursor:pointer; text-decoration:none; line-height:1.2; white-space:nowrap}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg .is-on{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}

/* Переключатель контуров под заголовком на телефоне: крупнее и по центру.
   22.09.2026, снимок Александра — «Надолго» жалось к левому краю своей
   половины. `text-align` внутри флекса ничего не выравнивает: надпись
   стоит там, куда её поставил `justify-content`.
   Правило стоит здесь, а не рядом с `.onlynarrow`: блок `.seg` объявлен в
   файле дважды, и более поздний перебивал размер шрифта. */
@media (max-width:1024px){
  .seg--top a{justify-content:center; font-size:16px; padding:10px 14px}
}
.side__seg{display:flex; margin-top:12px}
.side__seg a{flex:1; justify-content:center; text-align:center; padding:7px 10px}
/* `justify-content` здесь не для красоты: сама ссылка — flex-контейнер
   (`display:inline-flex` из общего правила `.seg a` выше, ради значков и
   счётчиков), а у flex-контейнера `text-align` содержимое не двигает. Пока
   половины переключателя по ширине текста, это незаметно; в кабинете они
   растянуты на всю колонку — и надпись прижималась к левому краю своей
   половины. 20.09.2026, по снимку Александра. */

/* ===== Карточка посуточного объекта ==================================
   22.09.2026, макет Александра: на широком экране маркетплейс — галерея
   слева, действие в липком столбце справа, разделы ниже; на телефоне
   снимок во всю ширину и липкая нижняя панель с ценой. */
/* Воздух под шапкой: 22.09.2026, Александр снимком — «нет воздуха».
   Галерея и заголовок начинались вплотную к верхней панели. */
.stay { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px;
  align-items: start; padding-top: 24px }
/* Ячейка сетки по умолчанию не уже своего содержимого, и таблица календаря
   растягивала всю страницу за край экрана: на телефоне ширина выходила 503
   пикселя при экране 390. Замерено прогоном 22.09.2026. */
.stay > * { min-width: 0 }
.stay__scroll { overflow-x: auto }
.stay__gal { grid-column: 1; grid-row: 1 }
/* Липкий столбец на широком экране: цена и запрос всегда на виду, как в
   макете. Столбец выше экрана, поэтому прокручивается внутри себя — иначе
   `sticky` не держит ничего. Просьба Александра 22.09.2026. */
.stay__side { grid-column: 2; grid-row: 1 / span 2; position: sticky;
  top: calc(var(--header-h) + 12px);
  max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto;
  scrollbar-width: thin; padding-right: 2px }
/* Подпрыгивание при наведении здесь лишнее: карточка не ссылка, нажимать
   её целиком некуда, а форма под курсором дёргается. */
.stay__side .card:hover { transform: none; box-shadow: var(--sh-1); border-color: var(--line) }
.stay__side .kv { margin-top: 20px }
/* Кнопка после поля не должна лежать на нём. 22.09.2026, Александр
   снимком: «Посчитать стоимость» упиралась в поле «Гостей». Поля имеют
   свой отступ сверху, кнопки — нет, и на стыке он пропадал. */
.stay__side .fld + .btn,
.stay__side .calc + .btn { margin-top: 14px }
.stay__side .calc { margin-top: 14px }
.stay__body { grid-column: 1; grid-row: 2 }

.stay h1 { font-size: 24px; line-height: 1.25; margin: 0 0 6px }
.stay__price { margin: 14px 0 }
.stay__addr { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 4px;
  font-size: 15px; color: var(--ink-2) }
.stay__addr svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: var(--brand) }
.stay__addr a { color: var(--brand); text-decoration: underline; text-decoration-color: rgba(91,76,255,.35);
  text-underline-offset: 3px }
.stay__addr a:hover { text-decoration-color: currentColor }
.stay__price b { font-size: 30px; font-weight: 800; line-height: 1.1 }

.sgal { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-2, #f7f8fc) }
.sgal__shot { display: none; width: 100%; height: 440px; object-fit: cover }
.sgal__shot.is-on { display: block }
.sgal--empty { height: 260px; display: grid; place-items: center; color: var(--ink-3) }
.sgal__arr { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.15);
  font-size: 20px; line-height: 1; cursor: pointer }
.sgal__arr--l { left: 12px } .sgal__arr--r { right: 12px }
.sgal__cnt { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.5);
  color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 8px }
.sgal__dots { display: none; position: absolute; bottom: 14px; left: 0; right: 0; gap: 5px; justify-content: center }
.sgal__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6) }
.sgal__dots i.is-on { background: #fff; width: 16px; border-radius: 3px }
.sgal__th { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto }
.sgal__th img { width: 96px; height: 68px; object-fit: cover; border-radius: 10px; cursor: pointer; flex: none }
.sgal__th img.is-on { outline: 3px solid var(--brand); outline-offset: -3px }

/* Строкой, а не столбцом: `.card__body` — флекс-колонка, и без явного
   направления аватар вставал над именем по центру. 22.09.2026, Александр:
   «тут всё криво косо». */
.stay .host { display: flex; flex-direction: row; gap: 12px;
  align-items: center; text-align: left }
/* Размер в пикселях, а не в процентах. 22.09.2026, Александр: «что за
   колхоз» — аватар вытянулся в овал. `height:100%` внутри сетки браузер
   посчитал неопределённым и взял высоту по пропорции снимка: 46 в ширину,
   73 в высоту. Пиксели считаются всегда. */
.host__ava { overflow: hidden }
.host__ava img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block }
.host__line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.host__ava { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-soft);
  color: var(--brand); display: grid; place-items: center; font-weight: 800; flex: none; text-transform: uppercase }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; margin: 0 }
.kv dt { color: var(--ink-3) } .kv dd { margin: 0 }

.pills { display: flex; gap: 8px; overflow-x: auto; margin: 14px 0 }
.pill { min-width: 104px; background: var(--bg-2, #f7f8fc); border-radius: 14px; padding: 10px 12px; flex: none }
.pill b { display: block; font-size: 16px } .pill span { font-size: 12px; color: var(--ink-3) }

.stabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 20px 0 8px; overflow-x: auto }
.stabs a { padding: 11px 14px; font-size: 14px; color: var(--ink-3); white-space: nowrap }
.stabs a.is-on { color: var(--ink); border-bottom: 2px solid var(--brand); font-weight: 600 }
.stay__body section { padding: 6px 0 22px;
  /* Ссылка адреса ведёт сюда: без отступа заголовок уходил под шапку. */
  scroll-margin-top: calc(var(--header-h) + 12px) }
.stay__body section h2 { font-size: 18px; margin: 0 0 10px }
/* Отзывы — в тонкой серой рамке, как форма запроса справа. 24.09.2026,
   Александр снимком: «отзывы в такую рамку сделай — тоненькую серую».
   Без рамки блок сливался с «Где находится» над ним. */
.stay__body #otzyvy { border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 18px 20px; margin-top: 16px }

/* Нижняя панель — только на телефоне. */
.mbar { display: none }

@media (max-width: 900px) {
  .stay { grid-template-columns: 1fr; gap: 0 }
  .stay__gal, .stay__side, .stay__body { grid-column: 1; grid-row: auto }
  .stay__side { position: static; margin-top: 16px }
  /* Порядок на телефоне: снимки, заголовок с ценой, описание — и только
     потом форма запроса.

     24.09.2026, Александр с телефона: «описания нет». Оно было, но под
     формой запроса, хозяином, условиями и предупреждением — четыре экрана
     вниз, куда никто не листает, не решив ещё, нравится ли квартира.
     Столбцы раскрываем (`display: contents`), и их части встают в общую
     сетку по `order`; разметка при этом одна на оба экрана. Кнопка
     «Запросить даты» внизу экрана по-прежнему ведёт к форме. */
  .stay__side, .stay__body { display: contents }
  .stay__side > *, .stay__body > * { min-width: 0 }
  .stay__gal { order: 1 }
  .stay__side > h1 { order: 2; margin-top: 16px }
  .stay__side > p, .stay__price { order: 2 }
  .stay__addr { margin-top: 6px }
  .stay__body > .pills, .stabs, #opisanie, #krovati, #udobstva, #pravila, #usloviya { order: 3 }
  #zapros { order: 4 }
  .stay__side > .card:not(#zapros), .stay__side > .kv, .stay__side > .alert { order: 5 }
  #daty, #karta, #otzyvy { order: 6; margin-top: 16px }
  /* Кнопки хозяина — над снимками, как он их и увидел после перестановки:
     на своей странице ему нужнее всего «Редактировать». Место задано
     явно, а не досталось по умолчанию: без `order` они и всплыли наверх.
     Отступ снизу — 24.09.2026, Александр: «Воздух», кнопки лежали на фото
     вплотную. */
  .stay__owner { order: 0; margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap }
  .sgal { border-radius: 12px }
  .sgal__shot { height: 300px }
  .sgal__arr, .sgal__cnt, .sgal__th { display: none }
  .sgal__dots { display: flex }
  .stay h1 { font-size: 21px }
  .stay__price b { font-size: 24px }
  body.has-mbar { padding-bottom: 84px }
  .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: #fff;
    border-top: 1px solid var(--line); padding: 12px 16px; gap: 12px; align-items: center;
    z-index: 20; box-shadow: 0 -6px 20px rgba(20,22,43,.06) }
  .mbar b { font-size: 18px } .mbar .btn { flex: 1 }
}

/* ==========================================================================
   Посуточный контур в мини-приложении: лента дней и полоса действий.
   22.09.2026, отдельный файл `daily_app.js`.

   Правила здесь, а не в разметке экрана: класс без правила — это состояние
   без вида. День, помеченный «выбран», обязан выглядеть выбранным, иначе
   человек жмёт его второй раз и снимает собственный выбор.
   ========================================================================== */
/* Переключатель срока в приложении: две равные половины, надпись по центру.

   22.09.2026, снимок Александра с обведённым переключателем: «отцентруй,
   сделай красиво и чтоб пользователь понимал — где находится». На снимке
   надписи жались к левому краю своих половин, а сами половины были разной
   ширины — по такому ряду непонятно, что это выбор из двух, а не две
   разные надписи.

   `flex:1 1 0` вместо ширины по содержимому: «Длительно» и «Посуточно»
   разной длины, и без этого белая плашка прыгала бы при переключении.
   44 px — та граница, ниже которой палец мажет (ТЗ §9); 38 px из общего
   правила рассчитаны на курсор. */
#rentSeg{display:flex; width:100%; padding:4px; gap:4px}
#rentSeg button{flex:1 1 0; justify-content:center; min-height:44px;
  font-size:15px; padding:0 10px; white-space:nowrap}
/* Где человек сейчас — белой плашкой с тенью, как на сайте. Серый на сером
   различим не на всяком экране и не при всяком солнце. */
#rentSeg .is-on{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}

/* Подписи нижней панели на узком экране. 22.09.2026, снимок при 320 px:
   четвёртая подпись «Профиль» упиралась в край. Уменьшаем подпись, а не
   прячем её: значок без слова читается угадыванием. */
@media (max-width:360px){
  .navbar__i{font-size:10.5px; padding-left:1px; padding-right:1px}
}

/* Воздух. 22.09.2026, Александр по снимкам: «не забывай про воздух».
   Экран, собранный вплотную, читается как таблица, а не как разговор:
   глазу негде остановиться между «что от меня хотят» и «что у меня
   сегодня». Отступы здесь — не украшение, а границы смысловых кусков. */
.dhead{margin:22px 0 2px; font-size:22px; font-weight:750; letter-spacing:-.02em}
.dsub{margin:0 0 4px}
.drow{margin-top:22px; gap:10px}
.dblock{margin:34px 0 12px; font-size:16px; font-weight:700}
.dcard{margin-bottom:14px}
.dcard .card__body > * + *{margin-top:7px}
/* Плашка обнимает своё слово, а не растягивается на всю карточку:
   `.card__body` — колонка флекса, и её дети по умолчанию тянутся во всю
   ширину. Полоса во всю карточку читается не как метка, а как заливка. */
.dcard .badge{align-self:flex-start}
.dnote{margin-top:14px; line-height:1.5}

/* Плашка состояния объекта: ей нужен воздух с обеих сторон — сверху
   сообщение о сохранении, снизу список недостающего, и без отступов она
   оказывается зажатой между ними. */
.dstate{margin:20px 0 10px}

.dcal__m{margin:26px 0 10px; font-size:15px; font-weight:700; color:var(--ink-2)}

.dday{display:flex; align-items:center; justify-content:space-between; width:100%;
  gap:12px; padding:14px 16px; margin-bottom:8px; background:#fff; text-align:left;
  border:1px solid var(--line); border-radius:12px; font:inherit; cursor:pointer;
  /* 44 px — нижняя граница, ниже которой палец промахивается. */
  min-height:44px; transition:.12s}
.dday:hover{border-color:var(--brand)}
.dday__d{font-size:14.5px; font-weight:600; color:var(--ink)}
.dday__p{font-size:14px; color:var(--ink-3); white-space:nowrap}
/* Своя цена на ночь — не то же, что базовая: её ставил хозяин, и он должен
   видеть, где именно. */
.dday__p.is-own{color:var(--brand); font-weight:650}

.dday.is-on{border-color:var(--brand); background:var(--brand-soft); box-shadow:var(--sh-1)}
.dday.is-on .dday__d{color:var(--ink)}
/* Занятое и закрытое нажать нельзя — и это видно до нажатия, а не после. */
.dday.is-busy, .dday[disabled]{background:var(--bg-2, #f6f7fb); color:var(--ink-3);
  cursor:default; opacity:.85}
.dday.is-busy:hover{border-color:var(--line)}
.dday.is-closed{border-style:dashed}

/* Запас под последними днями, пока внизу висит полоса действий: иначе она
   накрывает две последние строки, и нажатие по ним достаётся ей. */
.dcal.is-picking{padding-bottom:132px}

/* Полоса действий липнет к низу: выбрав двадцать дней, человек не должен
   искать кнопку прокруткой обратно вверх. Над нижней панелью разделов. */
.dbar{position:sticky; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:19;
  margin-top:22px; padding:14px 16px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--sh-2)}

/* Шахматка в приложении — 23.09.2026, снимок Александра: «так вот
   идеальная шахматка для приложения». Сама сетка приходит со стилями
   `daily.css`, которые грузятся по первому заходу; здесь только то, чего
   на сайте нет, — строка «поле: значение» в карточке брони и отрезок дат
   над сеткой. */
/* Строка «что выбрано» в полоске действий: это ответ на вопрос «я туда
   ткнул?», и читать его надо с одного взгляда, а не искать среди кнопок. */
.dbar__t{font-size:15px; font-weight:650; margin:0}
/* Карта объекта в приложении: невысокая и во всю ширину карточки.
   23.09.2026, просьба Александра про кнопку «показать на карте». Высота
   240 px — столько, чтобы видеть квартал вокруг метки, и не столько,
   чтобы карта заняла экран целиком: под ней кнопка запроса дат. */
.minimap{height:240px; border-radius:var(--r-m); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2)}

/* Строка журнала правок в приложении: кто и когда, под ними — что именно.
   23.09.2026, вместе с кнопками «Редактировать» и «Отменить» в брони. */
.dlog{border-left:2px solid var(--line); padding:2px 0 8px 12px; margin-top:10px}
.dlog b{display:block; font-size:14px; font-weight:650}
.dlog > span{display:block; color:var(--ink-3); margin-bottom:4px}
.dlog p{margin:2px 0; color:var(--ink-2)}
.dpair{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; margin:0 0 8px}
.dpair b{text-align:right; overflow-wrap:anywhere}
.dnav__t{text-align:center; color:var(--ink-2)}
/* Сетка в приложении шире экрана — это и есть её смысл. Но прокрутка
   страницы вбок вместе с ней превращает всё приложение в качели, поэтому
   вбок ездит только сама сетка. */
#dailyBoard .gridwrap{max-width:100%}
/* `overscroll-behavior-x:contain` — не украшение, а лечение «приложение
   уплывает в бок» (23.09.2026, видео Александра). Сама раскладка за край
   не выходит: на 390 px ширина страницы равна ширине окна, сетка ездит
   внутри себя (замерено на стенде). Уплывало другое — жест: досмотрев
   сетку до края, палец продолжал тянуть, и мессенджер докручивал уже не
   сетку, а всё окно вместе с нижней панелью. Правило обрывает эту
   передачу на самой сетке.
   Высоту ограничивать нельзя: у `daily.css` она `100vh - 260px`, считана
   под кабинет с его шапкой, а здесь отнимать нечего. */
#dailyBoard .gridscroll{-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; overscroll-behavior-y:auto; max-height:none}

/* Правка объекта посуточного в приложении — 22.09.2026.
   «Зачем мне вести на сайт человека, если он в приложении работает». */
.dfield{display:block; margin-top:16px}
.dfield__cap{display:block; font-size:12px; font-weight:700; color:var(--ink-2);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px}
.dfield .inp{width:100%; box-sizing:border-box}
.dfield__hint{display:block; margin-top:6px; font-size:12.5px; color:var(--ink-3);
  line-height:1.45}
/* Согласие — строкой с галочкой, а не полем: это ответ «да», а не ввод. */
.dfield--check{display:flex; align-items:flex-start; gap:10px; margin-top:20px;
  font-size:14px; line-height:1.45; color:var(--ink-2)}
.dfield--check input{width:22px; height:22px; flex:0 0 auto; margin:0; accent-color:var(--brand)}

/* Снимки объекта: сетка из квадратов, у каждого свои действия.
   Действия видны всегда, а не по наведению: пальцем наводить нечем. */
.dshots{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px}
.dshot{position:relative; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--bg-2)}
.dshot img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.dshot.is-cover{border-color:var(--brand)}
.dshot__flag{position:absolute; top:8px; left:8px; padding:3px 8px; border-radius:999px;
  background:var(--brand); color:#fff; font-size:11px; font-weight:700}
.dshot__acts{display:flex; gap:4px; padding:6px}
.dshot__acts .btn{flex:1 1 0; min-width:0; padding:0 6px; font-size:12.5px}
.dshot__off{color:var(--danger)}

/* Аватар в кружке — и в плашке имени, и в профиле. 22.09.2026: буква
   оставалась даже у тех, чей аватар лежал в учётке с первого запуска. */
.face__img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}

/* Миниатюра шахматки на «Сегодня» в приложении. 23.09.2026: экран отвечал
   на «что у меня сегодня» и молчал о том, что спрашивают чаще — «а на
   выходных свободно?».

   Название объекта — строкой над его полосой, а не в узком столбце слева:
   в столбце шириной в сто пикселей «Двухуровневая студия 42 м² в ЖК
   „Бунин"» обрезается на втором слове, а это единственное, по чему
   человек узнаёт, чья это полоса. */
.dmini{margin-top:10px}
.dmini__s{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line);
  border-radius:12px; background:#fff; padding-bottom:2px}
.dmini__g{display:grid; min-width:max-content}
/* Шкала дат остаётся на виду, пока листаешь страницу вниз. */
.dmini__h{position:sticky; top:0; z-index:2; background:#fff; padding:7px 0 6px;
  font-size:12px; font-weight:700; color:var(--ink-2); text-align:center;
  border-bottom:1px solid var(--line-2)}
.dmini__h i{display:block; font-style:normal; font-size:10px; font-weight:600;
  color:var(--ink-4)}
.dmini__h.is-weekend{color:var(--danger)}
/* Имя объекта во всю ширину полосы: его читают, а не разглядывают. */
.dmini__name{grid-column:1 / -1; display:block; width:100%; text-align:left;
  padding:10px 12px 6px; border:0; background:none; font:inherit; font-size:13.5px;
  font-weight:650; color:var(--ink); cursor:pointer}
.dmini__name:hover{color:var(--brand)}
.dmini__c{height:32px; border-left:1px solid var(--line-2); border-top:1px solid var(--line-2);
  background:#fff; cursor:pointer}
.dmini__c.is-booked{background:var(--brand); cursor:default}
.dmini__c.is-imported{background:var(--ink-3); cursor:default}
.dmini__c.is-closed{background:repeating-linear-gradient(45deg,
  var(--bg-3) 0 4px, #fff 4px 8px); cursor:default}

/* Кто занял день — второй строкой в правой колонке календаря объекта.
   23.09.2026: строка говорила «Занято», и хозяин шёл за именем в список
   броней — из календаря, который для этого и открывают. */
.dday__till{display:block; font-size:12px; font-weight:500; color:var(--ink-4)}
.dday__p{text-align:right}

/* Имя и число гостей — в одной строке и на телефоне тоже. 23.09.2026,
   Александр: «два поля расположи рядом». Обычная сетка `grid2` на узком
   экране складывается в столбик — здесь это не нужно: список гостей узкий
   и рядом с именем помещается, а два поля порознь растягивают форму на
   лишний экран. */
.pair-name{display:grid; grid-template-columns:minmax(0,1fr) 112px; gap:12px;
  align-items:start}
@media (max-width:360px){
  .pair-name{grid-template-columns:minmax(0,1fr) 96px; gap:8px}
}

/* Выбор отрезка прямо в календаре занятости объекта. 23.09.2026:
   «проставить первую дату — чтобы было видно, а при наведении на вторую
   выделялась вся бронь». */
.cal--plain td[data-day]{cursor:pointer}
.cal--plain td[data-day]:hover{background:var(--brand-soft)}
.cal--plain td.is-from, .cal--plain td.is-to{background:var(--brand); color:#fff;
  font-weight:700}
.cal--plain td.is-between{background:var(--brand-soft); color:var(--brand-700)}


/* ==========================================================================
   Нижняя панель карточки объявления (24.09.2026) — см. listings/detail.html.
   Показывается там же, где и посуточная: до 900 px, пока колонка связи
   стоит под содержимым, а не рядом с ним.
   ========================================================================== */
.mbar--listing .mbar__price{display:flex; flex-direction:column; line-height:1.15; min-width:0}
.mbar--listing .mbar__price b{font-size:18px; white-space:nowrap}
.mbar--listing .btn{flex:1; min-height:46px}
.mbar--listing .mbar__call{flex:0 0 46px; padding:0}
.mbar--listing .mbar__call svg{width:20px; height:20px}
.mbar--listing .mbar__call.is-ready{background:var(--success); border-color:var(--success); color:#fff}
@media (min-width:901px){ .mbar--listing{display:none !important} body.has-mbar{padding-bottom:0} }


/* Районы в каталоге: на телефоне — восемь и «ещё N» (см. listings/catalog.html). */
.chips__toggle{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px}
.chip--toggle{display:none; cursor:pointer; color:var(--brand); font-weight:650}
@media (max-width:640px){
  .chips--fold .chip--tail{display:none}
  .chips--fold .chip--toggle{display:inline-flex}
  .chips--fold .chips__toggle:checked ~ .chip--tail{display:inline-flex}
  .chips--fold .chips__toggle:checked ~ .chip--toggle{display:none}
}

/* Нижняя панель уходит, когда на экране то, к чему она ведёт. */
.mbar{transition:transform .2s ease}
.mbar.is-away{transform:translateY(110%); pointer-events:none}

/* Фильтры каталога на телефоне — сеткой два на два, а не
   столбиком из четырёх строк. 24.09.2026, проверка на 390 px: столбик
   фильтров вместе с сортировкой и кнопкой занимал ~600 px, и первая
   квартира в каталоге оставалась за первым экраном даже после того, как
   свернули районы. Меню выпадает на всю ширину полосы — в правой колонке
   оно иначе уходило бы за край экрана.

   Только каталог: у поиска на главной фильтров три, и в сетке справа
   оставалась пустая клетка, а «Показать 116 объявлений» обрезалось на
   равной с «На карте» ширине — Александр прислал снимок 24.09 в 04:01. */
@media (max-width:640px){
  #catalogFilters{display:grid; grid-template-columns:1fr 1fr; gap:4px; position:relative}
  #catalogFilters .fdrop{position:static; min-width:0}
  #catalogFilters .fbar__f{width:100%; min-width:0; padding:0 8px; gap:6px; overflow:hidden; font-size:15px}
  #catalogFilters .fbar__f span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #catalogFilters .fdrop__menu{left:6px; right:6px; min-width:0; top:auto}
  #catalogFilters .fbar__right{grid-column:1 / -1; flex-wrap:nowrap; margin-top:4px}
  #catalogFilters .fbar__right > *{flex:1 1 0; min-width:0}
}

/* Таблица, которая на телефоне складывается в карточки: строка — блок,
   ячейка — «подпись: значение» (подпись из data-label). 24.09.2026, подборки
   посуточного: столбец со ссылкой уезжал за край экрана. */
.pick-link .inp{min-width:230px}
@media (max-width:640px){
  .tbl--stack thead{display:none}
  .tbl--stack, .tbl--stack tbody, .tbl--stack tr, .tbl--stack td{display:block; width:100%}
  .tbl--stack tr{border:1px solid var(--line); border-radius:var(--r-m); padding:10px 12px; margin-bottom:10px}
  .tbl--stack td{border:0; padding:4px 0; display:flex; gap:10px; align-items:baseline}
  .tbl--stack td::before{content:attr(data-label); flex:0 0 88px; color:var(--ink-3); font-size:13px}
  .tbl--stack td.tbl__wide{display:block}
  .tbl--stack td.tbl__wide::before{display:block; margin-bottom:6px}
  .pick-link{flex-wrap:wrap !important}
  .pick-link .inp{min-width:0; flex:1 1 100%}
  .pick-link .btn{flex:1 1 100%}
}

/* Кровати, удобства и правила в форме посуточного объекта (24.09.2026). */
.beds{display:grid; gap:10px}
.beds__row{display:grid; grid-template-columns:1fr 140px 40px; gap:10px; align-items:end;
  border:1px solid var(--line); border-radius:var(--r-m); padding:12px 14px}
.beds__row .fld{margin:0}
.beds__x{width:40px; height:40px; margin-bottom:2px}
/* Удобства слева, правила справа: высота у них почти равная, и рядом оба
   помещаются в один экран. Под 900 px — снова друг под другом. */
.amen-rules{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 40px;
  align-items:start}
.amen__h{font-size:15px; margin:14px 0 6px}
.amen{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 18px}
.amen__i{display:flex; align-items:center; gap:9px; padding:6px 0; cursor:pointer; font-size:15px}
.amen__i input{width:18px; height:18px; flex:none}
.yn{display:grid; gap:14px}
.yn__row b{display:block; font-size:15px; margin-bottom:6px}
.yn__opts{display:flex; gap:6px; flex-wrap:wrap}
.yn__o{position:relative; cursor:pointer}
.yn__o input{position:absolute; opacity:0; pointer-events:none}
.yn__o span{display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:var(--r-s);
  background:var(--bg-2); font-weight:600; font-size:14px}
.yn__o--none span{background:transparent; color:var(--ink-3); font-weight:500}
.yn__o input:checked + span{background:var(--ink); color:#fff}
.yn__o--none input:checked + span{background:var(--bg-3); color:var(--ink-2)}
.yn__o input:focus-visible + span{outline:2px solid var(--brand); outline-offset:2px}
@media (max-width:900px){
  .amen-rules{grid-template-columns:1fr}
}
@media (max-width:560px){
  .beds__row{grid-template-columns:1fr 90px 40px}
  .amen{grid-template-columns:1fr}
}
/* На странице квартиры. */
.srules{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.srules li{display:flex; gap:8px; align-items:center; font-size:15px}
.srules li::before{content:"✓"; color:var(--success); font-weight:800; width:16px}
.srules li.is-no::before{content:"✕"; color:var(--danger)}
.srules li.is-bed::before{content:"•"; color:var(--ink-3)}

/* Полоса вкладок раздела под заголовком кабинета — во всю ширину, как сама
   шапка (24.09.2026, «Каналы»: вкладки площадок). Липнет под шапкой. */
.tabbar{display:flex; gap:4px; background:#fff; border-bottom:1px solid var(--line);
  padding:0 28px; overflow-x:auto; scrollbar-width:none;
  position:sticky; top:calc(var(--header-h) + var(--topbar-h)); z-index:18}
.tabbar::-webkit-scrollbar{display:none}
.tabbar a{flex:0 0 auto; padding:14px 14px 12px; font-weight:650; font-size:14.5px;
  color:var(--ink-3); text-decoration:none; border-bottom:2.5px solid transparent;
  margin-bottom:-1px}
.tabbar a:hover{color:var(--ink)}
.tabbar a.is-on{color:var(--ink); border-bottom-color:var(--brand)}
@media (max-width:1024px){ .tabbar{padding:0 18px; position:static} }

/* Отзывы: оценка звёздами и фото плиткой (24.09.2026, по образцу Zillow и
   GetYourGuide из Mobbin). Звёзды в разметке идут от пятой к первой, а
   ряд развёрнут: так «~» красит наведённую звезду и все левее неё. */
.rstars{display:inline-flex; flex-direction:row-reverse; gap:4px}
.rstars input{position:absolute; opacity:0; pointer-events:none}
.rstars label{font-size:34px; line-height:1; color:#D9DCE6; cursor:pointer;
  transition:color .12s, transform .12s; user-select:none}
.rstars label:hover,.rstars label:hover ~ label,
.rstars input:checked ~ label{color:#F5B301}
.rstars label:hover{transform:scale(1.12)}
.rstars input:focus-visible + label{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.rshow{color:#D9DCE6; font-size:16px; letter-spacing:1px; white-space:nowrap}
.rshow .on,.rshow:not(:has(i)){color:#F5B301}
.phpick{display:flex; flex-wrap:wrap; gap:10px}
.phpick__add,.phpick__i{width:92px; height:92px; border-radius:14px; flex:none}
.phpick__add{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; border:1.5px dashed var(--line); background:var(--bg-2); color:var(--ink-2);
  font-size:12px; font-weight:600; cursor:pointer; text-align:center}
.phpick__add:hover{border-color:var(--brand); color:var(--brand)}
.phpick__add[hidden]{display:none}
.phpick__plus{font-size:26px; line-height:1; font-weight:400}
.phpick__i{position:relative; overflow:hidden; background:var(--bg-2)}
.phpick__i img{width:100%; height:100%; object-fit:cover; display:block}
.phpick__x{position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%;
  border:0; background:rgba(20,22,43,.7); color:#fff; font-size:16px; line-height:24px;
  cursor:pointer; padding:0}

/* Отключающее действие: спокойное, пока не навели, и розовое при наведении —
   тот же цвет, что у «Удалить» (25.09.2026, Александр: «при наведении
   курсора она должна становиться розовой»). */
.btn--off:hover,.btn--off:focus-visible{background:var(--danger-soft); color:var(--danger)}