/* ============================================================================
   АРЕНДА ЖИЛЬЯ — общая дизайн-система
   Один 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;

  --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)}
.btn--success{background:var(--success); color:#fff}
.btn--success:hover{background:#0E8B45}
.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)}
.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}
.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}
.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}
.ftab{position:relative; 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}
.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; align-items:center; gap:4px; box-shadow:var(--sh-1)}
.fbar__f{display:flex; align-items:center; gap:9px; height:48px; padding:0 18px; 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}
.fbar__right .btn{height:48px}
.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}

.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}
.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}
.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)}
.modal__close:hover{background:var(--bg-3)}
.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__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__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}
.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}
  .addr{flex-wrap:wrap}
  .addr > span{flex:1 1 100%}
  .addr .lnk{margin-left:26px}
  .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}
  .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}
.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){
  /* На телефоне плашка стоит в том же углу, но уже и ниже: под ней может
     оказаться домашняя полоска iPhone, а поверх текста лезть нельзя. */
  .maxp{right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); }
  .maxp__go{padding:11px 4px 11px 12px; font-size:14.5px; gap:8px}
  .maxp__ico{width:24px; height:24px}
  .maxp__ico svg{width:17px; height:17px}
  .maxp__x{width:36px}
}

@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 }
}

/* Формы посуточного раздела */
.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;
}
@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(76px + env(safe-area-inset-bottom))}

/* Строка брони в календаре объекта */
.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 }
@media (min-width: 900px) { .head-gap { padding-top: 36px } }

/* Календарь занятости на странице объекта: только «свободно или нет». */
.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 }
.cal--plain td.is-busy { background: var(--line, #e5e7eb); color: var(--ink-3, #9ca3af) }
.cal--plain td.is-past { color: var(--ink-3, #9ca3af); opacity: .5 }

/* Запрос гостя выделен: это единственная строка, требующая ответа. */
.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 }

/* Галерея на странице объекта */
.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}
}