/* Фирменный стиль «Колесник Инвестиции».
/* hidden сильнее любых display: иначе «.поля label {display:flex}» показывает спрятанные поля. */
[hidden] { display: none !important; }
   Фон #FAFAFA, текст #262626, линии #202020, акцент #B08F78, зелёный #86E86E.
   Красного нет — просрочка показана густотой коричневого и словом, а не цветом
   тревоги (правило Сергея от 03.09.2026). GT America — только капсом. */

@font-face { font-family: 'GT America Compressed'; src: url('/статика/fonts/GTAmericaCompressed-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/статика/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/статика/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/статика/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/статика/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --фон: #FAFAFA; --текст: #262626; --линия: #202020; --акцент: #B08F78;
  --зелёный: #86E86E; --золото: #C9A227; --серый: #8A8A8A; --поле: #FFFFFF; --рамка: #E2E2E2;
  --тень: 0 1px 2px rgba(38,38,38,.06);
  --долг-слабо: #EFE6DF; --долг-средне: #DCC4B3; --долг-сильно: #B08F78;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--фон); color: var(--текст);
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
a.ссылка { border-bottom: 1px solid #D6D0CA; }
a.ссылка:hover { border-bottom-color: var(--акцент); }
/* Номер договора — одно слово: «072.047-18,9» не должен рваться на дефисе в три строки. */
.номер-договора { white-space: nowrap; }
/* Реестр задатков: поля оплаты, брокера и документов в узкой колонке складывались столбиком
   и раздували строку на полэкрана. Даём им ширину — таблица едет вбок, но строка низкая. */
.реестр-задатков td[data-имя="Помещение"] { min-width: 130px; }
.реестр-задатков td[data-имя="Покупатель"] { min-width: 120px; }
.реестр-задатков td[data-имя="Оплата"] { min-width: 290px; }
.реестр-задатков td[data-имя="Внешний брокер"] { min-width: 160px; }
.реестр-задатков td[data-имя="Регистрация"] { min-width: 160px; }
.реестр-задатков td[data-имя="Документы"] { min-width: 250px; }
/* Названия из 1С бывают на семь строк капсом — в списке хватит двух, целиком — в подсказке. */
.два-ряда { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Подвкладки — строка текстом под основными вкладками: не кнопки, чтобы не спорить с ними. */
.подвкладки { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; padding: 2px 0 0;
  border-bottom: 1px solid var(--рамка); font-size: 13px; }
.подвкладки a { padding: 4px 0 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--серый); }
.подвкладки a:hover { color: var(--текст); }
.подвкладки a.тут { border-bottom-color: var(--акцент); color: var(--текст); font-weight: 600; }
.подвкладки .счёт { color: var(--серый); font-weight: 400; }

h1, h2, h3, .капс, th, .кнопка, button, summary.заголовок {
  font-family: 'GT America Compressed', 'Inter', sans-serif; text-transform: uppercase; font-weight: 700;
  letter-spacing: .01em;
}
h1 { font-size: 30px; margin: 0 0 2px; }
h2 { font-size: 17px; margin: 26px 0 10px; padding-top: 8px; border-top: 2px solid var(--линия); }
h3 { font-size: 14px; margin: 16px 0 8px; }
.мелко { font-size: 12px; color: var(--серый); }
.тусклое { color: var(--серый); }
.число { font-variant-numeric: tabular-nums; }

/* --- шапка --- */
header.шапка {
  position: sticky; top: 0; z-index: 20; background: var(--фон);
  border-bottom: 2px solid var(--линия); padding: 10px 18px 0;
}
.шапка .верх { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.шапка .лого { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 15px; }
.шапка .кто { margin-left: auto; font-size: 12px; color: var(--серый); }
.шапка .кто b { color: var(--текст); }
nav.меню { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 0 8px; }
nav.меню a { padding-bottom: 2px; border-bottom: 2px solid transparent; }
nav.меню a.тут { border-bottom-color: var(--акцент); }
main { padding: 18px; max-width: 1280px; margin: 0 auto; min-width: 0; }

/* --- боковое меню --- */
/* Разделов стало больше семи: в верхней полосе они не читаются, а боковая колонка
   с группами — читается. Скрывается кнопкой ☰, состояние помнит браузер. */
.корпус { display: flex; align-items: flex-start; }
.боковое { flex: 0 0 210px; width: 210px; position: sticky; top: 46px; height: calc(100vh - 46px);
  overflow-y: auto; background: #F3F0ED; border-right: 1px solid var(--рамка); padding: 10px 0 20px;
  transition: width .15s ease, flex-basis .15s ease; }
.боковое nav { display: flex; flex-direction: column; }
.боковое .группа { font-family: 'GT America Compressed', 'Inter', sans-serif; text-transform: uppercase;
  font-size: 11px; letter-spacing: .06em; color: var(--серый); padding: 14px 16px 4px;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; }
.боковое button.группа:hover { color: var(--текст); }
.боковое .группа .галка { transition: transform .15s ease; font-size: 12px; }
.боковое .группа.свёрнута .галка { transform: rotate(-90deg); }
.боковое .пункт { display: block; padding: 7px 16px 7px 14px; border-left: 3px solid transparent; white-space: nowrap; }
.боковое .пункт:hover { background: #ECE7E1; }
.боковое .пункт.тут { border-left-color: var(--акцент); background: #ECE7E1; font-weight: 600; }
.боковое .пункты { display: flex; flex-direction: column; }
.боковое .ряд { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; }
.боковое .ряд .пункт { flex: 1 1 auto; cursor: pointer; }
.боковое .ряд.тащится { opacity: .35; }
.боковое .ряд.над { box-shadow: inset 0 2px 0 var(--акцент); }
/* Звёздочка: маленькая, без рамки и фона, золотая. Видна на наведении и всегда —
   у избранных, иначе меню рябит точками. Правила перебивают общий вид кнопок. */
.боковое .ряд button.звезда {
  flex: 0 0 auto; align-self: center; background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: 0 10px 0 2px; margin: 0; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1;
  letter-spacing: 0; text-transform: none; color: #C9C2BA; opacity: 0; transition: opacity .12s, transform .12s; }
.боковое .ряд:hover button.звезда, .боковое .ряд button.звезда.горит { opacity: 1; }
.боковое .ряд button.звезда:hover { color: var(--золото); }
.боковое .ряд button.звезда.горит { color: var(--золото); }
.боковое .ряд button.звезда.перебор { opacity: 1; color: var(--золото); transform: scale(1.4); }
.корпус > main { flex: 1 1 auto; }
body.меню-скрыто .боковое { flex-basis: 0; width: 0; padding: 0; border: 0; overflow: hidden; }
.кнопка-меню { font-family: inherit; font-size: 18px; line-height: 1; background: none; border: 1px solid var(--рамка);
  border-radius: 3px; padding: 2px 8px; cursor: pointer; color: var(--текст); text-transform: none; }
.кнопка-меню:hover { border-color: var(--акцент); }
.шапка .верх { padding-bottom: 8px; }
@media (max-width: 900px) {
  .боковое { position: fixed; left: 0; top: 46px; z-index: 90; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  body.меню-скрыто .боковое { display: none; }
}

/* Мем на странице ошибки: крупно, моноширинно, чтобы рожица не разъезжалась. */
.мем { font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', monospace; font-size: 34px; line-height: 1.2;
  color: var(--акцент); margin: 10px 0 6px; white-space: nowrap; overflow-x: auto; }
@media (max-width: 700px) { .мем { font-size: 24px; } }

.мем-картинка { display: block; max-width: min(420px, 100%); height: auto; border-radius: 3px;
  border: 1px solid var(--рамка); margin: 10px 0 12px; }
.сетка-мемов { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin: 10px 0; }
.сетка-мемов figure { margin: 0; }
.сетка-мемов img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 2px; }
.сетка-мемов figcaption { margin-top: 6px; word-break: break-all; }

/* Сделка, у которой сняли рассрочку: её надо расторгать. Помечаем полосой и меткой —
   ярко, но без красного: у нас его не используют даже для плохих новостей. */
tr.расторжение > td { background: #F6F0EA; box-shadow: inset 3px 0 0 var(--акцент); }
.метка.расторжение-метка { background: var(--акцент); color: var(--фон); border: 0; display: inline-block; }

/* Месяц, в котором начислили, но не заплатили: в таблице оплат это главное, что ищут глазами. */
td.нет-оплаты { background: #F6F0EA; box-shadow: inset 0 -2px 0 var(--акцент); }

/* --- плашка сообщения --- */
.сообщение { background: #E8F8E0; border: 1px solid #C9E9BA; padding: 8px 12px; border-radius: 3px; margin: 0 0 14px; }
.внимание { background: #F1EEEA; border: 1px solid var(--акцент); padding: 8px 12px; border-radius: 3px; margin: 0 0 14px; }

/* --- KPI --- */
.kpi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  margin: 14px 0 6px; padding-bottom: 14px; border-bottom: 2px solid var(--линия); }
.kpi .значение { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 26px; line-height: 1.1; }
.kpi .значение.акцент { color: var(--акцент); }
.kpi .подпись { font-size: 12px; color: var(--серый); }

/* --- карточки --- */
.карточки { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.карточка { background: var(--поле); border: 1px solid var(--рамка); border-radius: 3px; padding: 12px 14px; box-shadow: var(--тень); }
.карточка:hover { border-color: var(--акцент); }
.карточка .код { color: var(--акцент); font-size: 12px; }
.карточка .имя { font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 16px; margin: 2px 0 6px; }
.карточка .сумма { font-size: 20px; font-weight: 600; }

/* --- таблицы --- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11.5px; letter-spacing: .04em; border-bottom: 1px solid var(--линия); padding: 6px 8px; white-space: nowrap; }
td { padding: 6px 8px; border-bottom: 1px solid rgba(38,38,38,.10); vertical-align: top; }
td.ч, th.ч { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.итог td { border-top: 1px solid var(--линия); font-weight: 600; }
.обёртка { overflow-x: auto; }
/* Шапка группы в таблице: счётчики одного арендатора идут подряд, имя пишем один раз. */
tr.строка-группы th { text-align: left; background: #F1EEEA; border-top: 1px solid var(--рамка);
  padding: 8px 10px; font-size: 13px; letter-spacing: .02em; }
tr.строка-группы th .мелко { font-family: 'Inter', sans-serif; text-transform: none; letter-spacing: 0;
  font-weight: 400; margin-left: 8px; }

/* Просрочка — коричневым по густоте, без красного. */
.срок { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; white-space: nowrap; }
.срок.до30 { background: var(--долг-слабо); }
.срок.до60 { background: var(--долг-средне); }
.срок.до90 { background: var(--долг-сильно); color: var(--фон); }
.срок.больше90 { background: var(--линия); color: var(--фон); }
.метка { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 11px; background: #F1EEEA; }
.метка.зелёная { background: #E8F8E0; }
.метка.уточнить { background: var(--долг-слабо); border: 1px dashed var(--акцент); }

/* --- формы --- */
.форма { background: var(--поле); border: 1px solid var(--рамка); border-radius: 3px; padding: 4px 16px 14px; margin: 0 0 14px; }
.поля { display: grid; gap: 10px 14px; margin: 10px 0 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.поля label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--серый); }
.поля .широко { grid-column: 1 / -1; }
/* Те же правила под именами, которыми пользуются страницы коммуналки. */
.форма-раздела { background: var(--поле); border: 1px solid var(--рамка); border-radius: 3px; padding: 4px 16px 14px; margin: 0 0 14px; }
.поля-формы { display: grid; gap: 10px 14px; margin: 10px 0 12px; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.поля-формы label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--серый); }
.поля-формы label input, .поля-формы label select { font: inherit; font-size: 14px; color: var(--текст); padding: 6px 8px; border: 1px solid #D6D0CA; background: #FFF; border-radius: 2px; min-width: 0; }
.поля-формы .широко { grid-column: 1 / -1; }
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--текст); padding: 6px 8px; min-width: 0;
  border: 1px solid #D6D0CA; background: var(--поле); border-radius: 2px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--акцент); }
button, .кнопка {
  font-size: 12.5px; padding: 8px 16px; border: 1px solid var(--линия); border-radius: 2px;
  background: var(--поле); color: var(--текст); cursor: pointer;
}
button.главная, .кнопка.главная { background: var(--линия); color: var(--фон); }
button:hover, .кнопка:hover { border-color: var(--акцент); }
button.тихо { border-color: var(--рамка); color: var(--серый); padding: 4px 10px; }
.ряд { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.фильтры { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 14px; }

/* --- раскрывающиеся блоки --- */
details.блок { border-bottom: 1px solid var(--линия); }
details.блок > summary { cursor: pointer; padding: 9px 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-family: 'GT America Compressed', sans-serif; text-transform: uppercase; font-size: 14px; }
details.блок > summary .справа { margin-left: auto; font-family: 'Inter', sans-serif; text-transform: none;
  font-size: 13px; font-weight: 500; }
details.блок[open] > summary { border-bottom: 1px dashed var(--рамка); }
details.движения summary { cursor: pointer; font-size: 12px; color: var(--серый); padding: 2px 0; }

/* --- вход --- */
.вход-экран { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.вход-окно { width: 320px; background: var(--поле); border: 2px solid var(--линия); padding: 22px 24px 24px; }
.вход-окно h1 { font-size: 24px; }
.вход-окно label { display: block; font-size: 11px; color: var(--серый); margin: 14px 0 4px; text-transform: uppercase; }
.вход-окно input { width: 100%; }
.вход-окно button { width: 100%; margin-top: 18px; }
.вход-окно .ошибка { color: var(--акцент); font-size: 12px; margin-top: 10px; min-height: 16px; }

/* --- телефон --- */
@media (max-width: 640px) {
  main { padding: 12px; }
  h1 { font-size: 24px; }
  .kpi { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi .значение { font-size: 20px; }
  table { font-size: 13px; }
  th, td { padding: 6px 5px; }
  /* Длинные таблицы движений — карточками, чтобы не ехать вбок. */
  /* Сама таблица тоже становится блоком: иначе её ширину задаёт самая широкая
     графа, строка-грид растягивается вместе с ней и правые поля уезжают за экран. */
  table.карточками, table.карточками tbody, table.карточками tfoot { display: block; width: 100%; }
  table.карточками thead { display: none; }
  table.карточками tr { display: grid; grid-template-columns: 1fr auto; gap: 0 8px;
    border-bottom: 1px solid rgba(38,38,38,.14); padding: 6px 0; }
  table.карточками td { border: none; padding: 1px 0; }
  table.карточками td[data-имя]::before { content: attr(data-имя) ': '; color: var(--серый); font-size: 11px; }

  /* Поля в карточках: на телефоне ширины в em из вёрстки вылезают за экран,
     поэтому тянем их по месту. !important — потому что ширина задана инлайном. */
  table.карточками td input, table.карточками td select, table.карточками td textarea {
    width: 100% !important; max-width: 100% !important; min-width: 0;
  }
  table.карточками td { min-width: 0; }
  table.карточками td[data-имя] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  table.карточками td[data-имя]::before { align-self: end; }

  /* Таблицы, где каждая графа — поле ввода (счета, показания): на телефоне
     раскладываем в один столбец, иначе правая колонка уезжает за экран. */
  table.формой tr { grid-template-columns: minmax(0, 1fr); }
  table.формой td, table.формой th { text-align: left; }
  table.формой td.ч { text-align: left; }
  table.формой tr { padding: 10px 0; }
  table.формой td:first-child { font-weight: 600; padding-bottom: 4px; }
  /* Дата и примечание в одной графе — каждая со своей строки. */
  table.карточками td input[type=date] + input { margin-top: 4px; }
}

@media print {
  header.шапка, .боковое, .фильтры, form, button { display: none !important; }
  body { background: #FFF; }
}


/* --- легенда статусов --- */
.легенда { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; color: var(--серый);
  font-size: 12px; margin: 0 0 10px; }
.легенда span { display: flex; align-items: center; gap: 6px; }
.легенда i { width: 15px; height: 15px; border: 1px solid #C6BFB8; border-radius: 2px; display: inline-block; }

/* --- карта аренды и продажи --- */
/* Подложка — картинка от брокера, поверх неё слой многоугольников. Слой тянется
   ровно по картинке, поэтому координаты из пикселей исходника работают при любом
   размере экрана. */
.карта-обёртка { position: relative; display: inline-block; max-width: 100%; border: 1px solid #E2E2E2; background: var(--поле); }
.карта-подложка { display: block; max-width: 100%; height: auto; }
.карта-слой { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Карта показывается как есть, без нашей обводки: помещение подсвечивается
   только под курсором — цветом статуса из наших данных и тонкой рамкой. */
.карта-слой .зона { cursor: pointer; transition: fill-opacity .12s; }
.карта-слой .зона:hover { fill-opacity: .85 !important; stroke: #202020; stroke-width: 2; }
.карта-слой .номер-зоны { font: 600 13px Inter, sans-serif; fill: #202020; text-anchor: middle; pointer-events: none; }

/* Карточка при наведении: ходит за курсором, как подсказка «кто правил». */
.карта-карточка {
  position: fixed; z-index: 100; max-width: 340px; background: var(--поле); color: var(--текст);
  border: 1px solid var(--линия); border-radius: 3px; padding: 10px 12px; font-size: 12.5px;
  box-shadow: 0 8px 22px rgba(0,0,0,.18); pointer-events: none;
}
.карта-карточка .заголовок { font-family: 'GT America LC Compressed', sans-serif; text-transform: uppercase;
  font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.карта-карточка table { width: 100%; border: none; margin: 0; }
.карта-карточка th { width: 42%; text-align: left; font-size: 11px; color: var(--серый); font-weight: 400;
  text-transform: none; letter-spacing: 0; border: none; padding: 2px 6px 2px 0; white-space: nowrap; }
.карта-карточка td { border: none; padding: 2px 0; }
.разметка { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .разметка { grid-template-columns: minmax(0, 1fr); } }


/* --- калькулятор продажи объекта --- */
.таблица-калькулятора { font-size: 12.5px; }
.таблица-калькулятора th, .таблица-калькулятора td { padding: 4px 6px; white-space: nowrap; }
.таблица-калькулятора input.исход { background: #FFF8E1; border: 1px solid #E6DCC0; border-radius: 2px; padding: 3px 5px;
  font: inherit; text-align: right; }
.таблица-калькулятора input.исход:focus { outline: none; border-color: var(--акцент); }
/* Строка красится по статусу помещения — как на карте брокера. */
.таблица-калькулятора tr.статус-сдано td:nth-child(2) { box-shadow: inset 4px 0 0 #9ED9B7; }
.таблица-калькулятора tr.статус-задаток td:nth-child(2) { box-shadow: inset 4px 0 0 #5E5E5E; }
.таблица-калькулятора tr.статус-продано td:nth-child(2) { box-shadow: inset 4px 0 0 #A87860; }
.таблица-калькулятора tr.статус-продано td { color: var(--серый); }
.полоса-доли { display: flex; height: 26px; border: 1px solid #C6BFB8; border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.полоса-доли div { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; min-width: 0; }


/* Меню: четыре главных раздела, остальное под «Ещё». */
.меню details.ещё { display: inline-block; position: relative; }
.меню details.ещё summary { cursor: pointer; list-style: none; padding: 0 2px; }
.меню details.ещё summary::-webkit-details-marker { display: none; }
.меню details.ещё[open] > a { display: block; }
.меню details.ещё > a { display: none; }
.меню details.ещё[open] { position: relative; }
.меню details.ещё[open] summary + a, .меню details.ещё[open] a { margin-left: 0; }
.меню details.ещё[open]::after { content: ''; }
.меню details.ещё[open] > a { position: static; padding: 4px 0; }
.меню details.ещё[open] { background: var(--поле); border: 1px solid #E2E2E2; border-radius: 3px; padding: 4px 10px; }


/* --- проекты: небольшие карточки, карты по этажам, увеличение при наведении --- */
.сетка-проектов { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.карточка-проекта { background: var(--поле); border: 1px solid #E2E2E2; border-radius: 3px; padding: 12px 14px 10px; position: relative; }
/* Черновик — копия для проверки теории: пунктир, чтобы не путать с объектом компании. */
.карточка-проекта.черновик { border-style: dashed; border-color: var(--акцент); background: #FCFBFA; }
.карточка-проекта .заголовок-проекта { font-family: 'GT America LC Compressed', sans-serif; text-transform: uppercase; font-weight: 700; font-size: 18px; }
.карточка-проекта .полоса-доли { height: 10px; margin: 8px 0 6px; }
.цифры-проекта { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--серый); }
.цифры-проекта b { color: var(--текст); }
.цифры-проекта .акцент b { color: var(--акцент); }
.этажи-проекта { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.этаж-мини { width: calc(50% - 5px); min-width: 130px; }
.карта-обёртка.мини { display: block; width: 100%; transition: transform .18s ease; transform-origin: center center; background: #FFF; }
.карта-обёртка.мини.раскрыта { z-index: 60; box-shadow: 0 12px 34px rgba(0,0,0,.28); }
.карта-обёртка.мини .карта-слой .зона:hover { fill-opacity: .85 !important; stroke: #202020; stroke-width: 2; }
.низ-карточки { gap: 12px; margin-top: 10px; }

/* Печатные формы: соглашение о расторжении и всё, что подписывают руками. */
.документ { max-width: 780px; background: #fff; border: 1px solid #E6E2DE; padding: 34px 38px; }
.документ h1 { font-size: 20px; text-align: center; margin: 0 0 18px; }
.документ .строка-даты { display: flex; justify-content: space-between; margin: 0 0 18px; }
.документ p, .документ li { line-height: 1.6; }
.документ ol { padding-left: 20px; }
.документ ol > li { margin-bottom: 8px; }
.подписи { display: flex; gap: 40px; margin-top: 34px; }
.подписи > div { flex: 1; }
.подпись-роль { font-weight: 600; margin-bottom: 4px; }
.линия-подписи { border-bottom: 1px solid #202020; height: 34px; }
@media print {
  .не-печатать, nav, header, footer { display: none !important; }
  .документ { border: 0; padding: 0; max-width: none; }
}
/* Показание, посчитанное за того, кто не передал: видно, что это не с обхода. */
.ячейка.посчитано { background: #F3EEE9; border-color: #B08F78; }
/* Таблица условий внутри печатной формы: сроки и ставки по датам. */
.документ table.условия { width: 100%; border-collapse: collapse; margin: 8px 0; }
.документ table.условия th, .документ table.условия td { border: 1px solid #D6D0CA; padding: 5px 8px; text-align: left; }
.документ table.условия th { background: #F4F2F0; font-weight: 600; }
.документ .реквизиты-заголовок { font-size: 14px; margin: 26px 0 8px; }

/* --- окно поверх страницы --- */
dialog.окно { border: 1px solid var(--линия); border-radius: 4px; padding: 0; width: min(960px, calc(100vw - 32px));
  max-height: calc(100vh - 40px); background: var(--фон); color: var(--текст); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
dialog.окно::backdrop { background: rgba(38,38,38,.45); }
.окно-тело { padding: 16px 20px 20px; overflow: auto; max-height: calc(100vh - 42px); }
.окно-шапка { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.закрыть-окно { font-family: inherit; font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--серый); padding: 0 4px; }
.закрыть-окно:hover { color: var(--текст); }

/* «Проекты» в шапке: главный раздел доступен и при свёрнутом меню.
   Рядом — до пяти избранных разделов, помеченных звёздочкой в боковом меню. */
.верх-проекты { margin-left: 6px; padding: 3px 10px; font-size: 12px; }
.избранное { display: inline-flex; gap: 0; flex-wrap: wrap; }
.верх-избранное { margin-left: 6px; border-style: dashed; }
.верх-избранное.главная { border-style: solid; }

/* --- полоса согласования --- */
.полоса-согласования { background: #F1EEEA; border: 1px solid var(--акцент); border-radius: 3px;
  padding: 8px 12px; margin: 0 0 14px; }
.строка-согласования { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 2px 0; }
.кнопки-согласования { display: inline-flex; gap: 6px; margin-left: auto; }
.кнопки-согласования button { padding: 3px 10px; font-size: 11px; }
/* Строка счёта, куда подставились данные из платёжки: видно, что это не ручной ввод. */
tr.подставлено td { background: #F3F7F0; }

/* Объекты редактора — раскрывающийся список галочек */
.выбор-объектов summary { cursor: pointer; padding: 6px 8px; border: 1px solid var(--линия, #ddd); min-width: 12em; }
.выбор-объектов .список-объектов { max-height: 16em; overflow: auto; display: grid; gap: 2px; padding: 6px 2px; }

/* Плашка согласования: утвердить — зелёным, отклонить — красным (так просили явно). */
.кнопки-согласования button[data-решение="согласовано"] { background: #86E86E; border-color: #86E86E; color: #262626; }
.кнопки-согласования button[data-решение="отклонено"] { background: #D64545; border-color: #D64545; color: #FAFAFA; }